We Heart Games » Blog Archive » Screencast 1: App Icon Design and Resolution Independence

Screencast 1: App Icon Design and Resolution Independence

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/

home

face race

blog

client work

contact

Follow on:

latest blog posts

Buy it now
on the App Store