Layers TV: Episode 44 (Part 1)
Layers TV brings you a special, two-part episode to coincide with the release of Apple’s new 3G iPhone. In Part 1, Corey breaks down how to create those cool icons on the iPhone interface while RC is joined by Kelby Media Group’s Creative Director Felix Nelson who demonstrates how to illustrate the iPhone in Photoshop. Enjoy Part 1 of Layers TV Episode 44 and look for Part 2 coming soon.


Thank you so much to iStockPhoto for providing us with images to use for the show. Be sure to visit them for all of your image needs: iStockPhoto

Have an idea for the show? Click on the Contact Us link below and send us an email. Be sure to select Layers TV from the drop down. We’d love to hear from you!
Corey breaks down how to create those cool icons on the iPhone interface.
- The great thing about designing icons for the iPhone is that the iPhone will automatically add reflection, drop shadow, and rounded edges to your design
- The dimensions for the iPhone icons are 57 pixels x 57 pixels
- Create a new document at double those sizes to work on. Drag a logo of your choice into the document or design a new one
- Use the styles menu to apply some web styles to your icon
- Double-click on the layer effects icon to adjust the settings of the preset styles
- Control-click on the effects icon to adjust the scale of the effects
- Add some finishing touches and export the icon. Save it as a PNG file
- Implement the new icon into the iPhone using the code provided in the lesson download
RC is joined by Kelby Media Group’s Creative Director Felix Nelson who demonstrates how to create an illustration of the iPhone.
- Download the iPhone design paths provided in the download section for this episode
- Open the buttons path provided in the PS document. Fill the buttons with black
- Open the edges paths provided and fill it with a two-tone gradient. Use layer styles to create a chrome effect
- Apply gradients in opposite directions to create the illusion of a beveled edge on the face plate
- Add the speaker at the top of the phone and use a noise filter to make the mesh covering
- Use the gradient tool, elliptical tool, and levels to add the home button at the bottom of the phone
- Once the iPhone is designed, you can add anything you want to display on the face
- Keep an eye out for the new iPhone book coming from Scott Kelby and Terry White
- 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.
Visitor Comments »
Comment by Jane Lopez | July 22, 2008 @ 10:15 am
Corey, Here is a quote from: http://blog.wired.com/monkeybites/2008/01/pimp-your-websi.html
“…Keep in mind though that some clipping occurs so you really only have a roughly 47×47 pixel working area.”
Any truth to this?
Thanks.
Comment by Bob | July 25, 2008 @ 4:27 pm
Im curious to know how the paths for the iPhone tutorial were created.
Comment by Alex | July 31, 2008 @ 1:29 pm
Leave us a comment

- Dragging an Object Between Documents
- TV Scanline Effect
- Trick to the Glossy Effect
- 3D Text
- Changing Type on a Path
iPhone Paths
Uploading iPhone Icons




Photoshop
Illustrator
Indesign
Dreamweaver
Fireworks
Premiere
Flash
After Effects
Lightroom
Acrobat














