Photography is one of my hobbies and I’m sure it’s the same with some of you reading this post. When I thought of creating some content in HTML5 for my iPad, the first thing that crossed my mind was Adobe Photoshop Lightroom 3. I not only appreciate it but have also seen a lot of my photographer friends use it. So, here I go with my venture to create tutorials on basics of Adobe Photoshop Lightroom 3… 🙂

Here’s the SWF version of the tutorial.

Navigate to http://bit.ly/nLWV0j in iPad to view the demo inside iPad as HTML5.

Size matters…

When I first thought of my project size, first thing came to my mind was, why do we have to worry when iPad can resize it to fit. But when I looked at few samples, either they had scrollbars appearing or they had a lot of white space in the screen. So, with the help of my friend, I found this website http://maproom.co.uk/samples/ryg.html which can tell you the runtime calculation of the browser window size, excluding the browsers toolbar, menubar, etc. This size by default has around 10 pixels of padding all around. My job  was easier now, I just had to browse to this website in iPad and the screen size I got was 981×661. But, there is a trick here… If you have used the HTML5 converter, you might have observed a Playbar which appear at the bottom of the screen which is approximately 110 pixels height. I thought of using that space to keep my buttons. So… now the size becomes 981×551. I chose 980×550 but how do we accommodate the rest 110? Read through to find out… 🙂

Capture it… with Adobe Captivate 5.5 🙂

My next task was to decide on what to cover in the tutorial and zeroed down on the ‘Develop’ module in basic workflow for using Adobe Photoshop Lightroom 3. If you haven’t tried it yet, you must because it’s simply amazing. As I had already decided on the size of my project, I started capturing the workflows with 980×550 dimension. Captured the Demo and Training module, combined them together, modified the captions and removed the unwanted slides wherever necessary. When you do it, make sure you set the slide quality for all the slides to 24-bit and remove unused items from the library… After all quality and size  matters… 🙂

Icing on the cake…

Yes, just publishing the captured slides would have helped but to make it more friendly, I had to introduce few slides in between for navigation purpose. When I was looking at some of the content created for iPad, I observed two things, less cluttered and more usable. This made sense because, these tablets are mostly used on-the-go and consuming the information is more important than filling the screen with unnecessary content. So… added a starter slides and a couple of title slides.

Now, where do I place the branding? That is the trick I mentioned while discussing the size, to accommodate the other 110 pixels, rescale the project to 660 but be cautious while doing that. Disable ‘Maintain Aspect Ratio’, increase the height to 660, choose ‘Keep project the same size and position the project’ and position project to top left… :)… Wow! That trick works! Now I placed the logo in the bottom panel so that it doesn’t interfere with the content. This space can also be used as footer to flow the content across the slides as well.

Almost there…

Removed the playbar from the skin editor, removed the border, converted the file using our own HTML5 converter for Adobe Captivate 5.5 and I’m good to go… 🙂

Do you want to know more about the conversion process? View the post by Dr. Pooja Jaisingh at http://adobe.ly/nZTlXW.

Here’s the link to download the HTML5 Converter from Adobe Labs http://adobe.ly/qsqMFu