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.

You can download each episode by subscribing to the podcast on iTunes.

Tutorial Downloads

Special Thanks

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?

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!

Contact Us

View past episodes of Layers TV

Episode Summary

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 »

 

Hi. I love your tutorials. I’m an A.C.I. …an Adobe Certified Idiot, that’s why I watch a lot of tutorials. Quick question, how do I download successfully the last 2 episodes through itunes? I downloaded them but the files are not retained. Thanks

 

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

Comments RSS | TrackBack URI

Back to Top

 
 
Advertisement
Creative Suite Tutorials
  1. Photoshop Photoshop
  2. Illustrator Illustrator
  3. Indesign Indesign
  4. Dreamweaver Dreamweaver
  5. Fireworks Fireworks
  6. Premiere Premiere
  7. Flash Flash
  8. After Effects After Effects
  9. Lightroom Lightroom
  10. Acrobat Acrobat

Get the latest tips, tricks and news delivered straight to your inbox.

From our Partners
Subscribe to Layers Magazine
 
 
 
  • Back to the Layers Magazine Homepage
  • Creative Suite Tutorials
  • Layers Magazine
  • Reviews on top products
  • Layers Magazine Reader Forums
  • Subscribe to Layers Magazine