Layers TV: Episode 44 (Part 2)

RC uses Fireworks to layout an iPhone-sized website and then brings it into Dreamweaver for some additional coding to make it compatible.

• Open a new document in Fireworks. Don’t forget to make it 320×480 in size so that it matches the iPhone’s size of impact
• Import some graphics into the workspace and arrange them in your design. Fireworks will give you auto guidelines to help you align your graphics
• Because of the small display size, RC recommends pixel-based fonts, which you can find at Minifonts.com
• Install your font and return to Fireworks. Using the text tool, insert some menu items
• Use align features to space them out evenly across the page. Use styles to help design the graphic elements on the page
• If you want to learn more about using Fireworks, be sure to check out RC’s 10 video tutorials
• Slice up all of the elements of your design in Fireworks and export them out to Dreamweaver
• Use the iPhoney application to preview how your site will display on an iPhone
• In Dreamweaver, you can add a line of meta code to your site that will allow the design to scale up or down as needed
• Flash has settings that will export video to work with the iPhone. Use Dreamweaver to embed that video into your page
• The exported video file will include a readme file that has code for posting the video to your site
• Apply gradients in opposite directions to create the illusion of a beveled edge on the face plate. Make sure that the dimensions of the video all match throughout the code
• There is also a redirect that will take iPhone viewers to a separate page
• Use the gradient tool, elliptical tool, and levels to add the home button at the bottom of the phone
• Check out the sample iPhone page at www.flipthatpage.com/test
• Also, test the iPhone redirect by going to www.flipthatpage.com/sample.htm
• Don’t forget to register for Photoshop World, September 4-6 in Las Vegas. There are going to be a lot of great instructors and plenty to learn

Contest Winner
RC and Corey have decided that the weekly contest winner from Layers TV will be announced in RC’s blog post. Remember when you submit your answer in the contact form to choose Layers Blog from the drop-down menu. Be sure to check the front page post for the name of this week’s winner and tune in to this week’s episode to find out what the contest question and prizes are.