How to Create a Color-Inspired iOS Icon for Retina Displays

Creating an icon for iOS presents a variety of challenges to designers — challenges such as the size constraint. The purpose of this tutorial is help you create an icon for iOS that not only looks good, but also gives you a feel for what actually goes into creating icons for iOS. For this tutorial, we’ll be using Photoshop and Fireworks as well Cocoia’s iPhone 4 Icon PSD which you can download here.

Part One: Starting in Fireworks

In this part, we’ll be actually creating the content of the icon. The icon will look like a blend of colors so Photoshop may be considered overkill for this, while Fireworks does the job easily and efficiently.

1. Fire up Fireworks and create a new document that is 512 x 512px with a white background (don’t worry, this will be changed later).

Screen Shot 2012-04-22 at 09.18.38

2. Select the Ellipse tool from the left-hand sidebar or by pressing U and draw a reasonably-sized circle on your canvas whilst holding down the Shift key to constrain the circle. Select your circles and change the width and height to 210px – you can do this by changing the dimensions in left of the Properties window.

3. Now, on the right-hand side, right click the layer called Ellipse and click duplicate layer, do this three times so you have four circles on your canvas and spread them out.

Screen Shot 2012-04-22 at 09.22.26

4. Select a circle and in the Properties section (at the bottom) change the color to something strong – in this example I will be choosing Red (#FF0000) to be the shape’s fill color.

5. Repeat this step for each of the circles, each having a strong color – I am using Red: #FF0000 Blue: #0000FF, Green: #339900 and Orange: #CC6600.

Screen Shot 2012-04-22 at 09.26.04

6. Now, select all the circles on your canvas and select the opacity slider in the Properties window at the bottom and change the opacity to something substantial such as 60%.

7. Now, align all the circles that are on your canvas in the center and then select the top-most layer and in the bottom left corner (the left side of the Properties bar) change the Y position to 221 and, providing you’ve done everything correctly, it should read as: H: 210, W: 210, X: 151 and Y: 221. Now, select your second layer and change the Y position to 81. Select the third layer and change the X value to 221 and then the final layer’s X value should be 81 and it should be aligned in the center of the canvas.

8. Now, select all of the shapes and select the free transform tool from the sidebar (Command + T) and increase the size of the circles whilst constraining them by holding down Option (alt) and Shift and then press enter to accept.

Screen Shot 2012-04-22 at 09.42.29

9. Save your document as a PNG in your desired location.

Part Two: Making the Icon in Photoshop

Now, we’ll be moving from Fireworks to Photoshop and actually creating the icon along with a slight tint.

1. If you haven’t done so already, download Cocoia’s iPhone 4 Icon PSD template and then open it in Photoshop — for this tutorial, we’ll be creating an icon that is for the iPhone and for the retina display, so with the template open, right click the folder within the layers area entitled “114 Pixels (iPhone 4 home screen)” and select Duplicate Group and under document, select New and give it a name and press OK.

2. You should now be left with the icon on your canvas, select the Crop tool and crop around the icon template – the document size should end up being 114×114px once cropped. This is the standard size for a retina display icon.

Screen Shot 2012-04-22 at 10.03.45

3. Within the group (in the Layers section) we’re going to delete some layers, so delete the layer called Sample Shape copy 2, this should remove the star and also delete the layer called Stripes and you should be left with a clean, clear icon.

4. Select the color next to the layer entitled Base Shape copy 2 and change it to white and then navigate to your saved PNG file from part one and drag it to your canvas and then resize the icon (again, constraining it using Shift and Option) to a size that you believe looks good.

5. Right click the layer that you just created by dragging the new shape onto the canvas and select Create Clipping Mask.

6. Now, this is where you use your own discretion — you can alter the opacities of the tint and fill of the icon to make it look like you want. You can also change the background color from white to another color. In this example, I have used a dark shade of blue (#196088).

Photoshop

7. Once you’ve finished changing the opacity and tint of your icon, you’re ready to save it. The standard naming convention for retina display icons is [email protected] so save your file with that name as a PNG file.

That concludes this tutorial – the purpose of this tutorial was to help you get to to grips with some basic color-blending techniques in Fireworks as well as to allow you to get to know the world of creating icons for iPhone and iPod Touch in Photoshop. In the source files I have included the Fireworks and Photoshop document along with the source code for an Xcode document if you want to test the new icon out on your retina device.

IconOnDevice

Icon@2x

Click here to download the source files.

 

If you liked this article, please help spread the news on the following sites:

  • Bump It
  • Blend It
  • Bookmark on Delicious
  • Stumble It
  • Float This
  • Reddit This
  • Share on FriendFeed
  • Clip to Evernote