Home
  • home

  • face race

  • blog

  • client work

  • contact

« From the ashes…

Take the wide turn, love what you do. »
Screencast 1: App Icon Design and Resolution Independence
Mike Berg
30
Jun 2010

My debut entry to the iDevBlogADay… phenomenon? Thanks to @mysterycoconut for setting this up and organizing it. We’re in excellent company. Check out the links in the sidebar for more iPhone dev goodness.

Helping iPhone developers hate using Photoshop a little less with simple tricks that make workflows more efficient. View the rest of the screencasts in the “Photoshop for Devs” series.

This screencast covers making your App Store icon in Photoshop (I’m using CS3):

  • Using a template to start your icon right
  • How to use vector layers and position them precisely
  • Creating icons at each of the required sizes and what to watch for
  • Using Smart Layers for resolution independent files
  • Using a preview window when working on small icons


Please excuse the fan noise, and forgive the voice, I’ve had a cold. Head over to the YouTube page for the nice big HD version, if it’s hard to see.

Also note that the rectangle and rounded rectangle shape tools have this somewhat-hidden checkbox that helps to ensure your shape edges are right on the pixel-edge:

Download the PSD files referenced in the video. But if you want the right corner radius for every size, check out this great template.

Here’s the documentation on adding icons (and other graphics) at different resolutions to support the new hardware.

Category: Blog, idevblogaday, Photoshop for Devs, Resources  Tags: icon, iDevBlogADay, Photoshop, screencast, vector
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
  • http://www.retrodreamer.com Craig Sharpe

    Thanks for the awesome video Mike! I always struggle when working in different resolutions, and this tutorial offers tons of useful tips that will certainly make future projects a lot easier :)

  • http://www.streamingcolour.com Owen Goss

    Great video, Mike! I just learned a bunch of stuff I didn't know, and I've been using PS for almost 10 years! :)

  • http://weheartgames.com WeHeartGames

    Thanks guys! Glad you found them helpful. Many conversations I've had with devs who do their own art have showed me that there are a lot of simple Ps tricks I can share that would make the process a lot more efficient and a lot less frustrating. So here we are! I hope future screencasts are as helpful.

  • http://maniacdev.com/2010/07/photoshop-tutorials-for-iphone-developers/ Photoshop Tutorials For iPhone Developers | iPhone iOS 4 iPad SDK Development Tutorials, Programming Tips, News

    [...] App Icon Design and Resolution Independence – which includes a template to quickly start your icon, how to use vector layers, creating icons of the right sizes, smart layers, and how to use the preview window when working on small icons. [...]

  • Lena_abbas

    Hey, awesome video. Quick question, what’s the shortcut you did at 5:47 when you fit your texture to the template? you did it so fast…

  • http://weheartgames.com Anonymous

    Thanks for asking, I should’ve described what I was doing. At that point I created a clipping mask using the shape layer below. The shortcut for that is to Option-click the line between the two layers. You can also select “Layer > Create Clipping Mask”. For more info on clipping masks, see Screencast 2: How and when to use clipping masks – http://weheartgames.com/2010/07/screencast-clipping-masks/

« From the ashes…

Take the wide turn, love what you do. »

    Follow on:

    RSS | Twitter | YouTube

latest blog posts

  • Protect yourself against theft
  • New website for One Man Left
  • I like two things
  • Photoshop tip – layer style defaults in CS5
  • Sortie game icon with time-lapse video

Buy it now
on the App Store

A camera-based
party game for iPhone

© 2012 - We Heart Games Inc. All rights reserved.