iOS Icon Design

Quick reference

• 00:04 Hey, everyone.
• 00:05 Howard Pinsky here with a Photoshop tutorial covering best practices when
• 00:09 designing an app icon to be used in IOS 7.
• 00:13 Now, before you Android users get all defensive,
• 00:15 you can use the same techniques to create your icons as well.
• 00:19 This video will primarily help you create a template and
• 00:23 go over some key tips to help you as you're designing.
• 00:27 Starting off with the document,
• 00:28 the largest icon that you are going to be submitting is 1024 by 1024 pixels.
• 00:34 You'll also be creating smaller versions,
• 00:35 which I'll be showing you in a few moments.
• 00:38 Once the document has been created, we can build our first shape,
• 00:41 a rounded rectangle, which you can find in your Tools bar.
• 00:45 Instead of dragging out the shape like you normally would,
• 00:48 clicking anywhere within your document will bring up
• 00:51 a dialog box that allows you to enter the dimensions and the radius of the shape.
• 00:56 As I'd like the shape to fill the entire document, both the width and
• 00:59 the height will be set to 1024 pixels.
• 01:02 And, the radius will be set to 220 pixels.
• 01:06 This will give you the exact shape of the IOS 7 icons.
• 01:09 If your shape didn't get created right in the center of the document,
• 01:13 grab your Move tool, shortcut key V, and then move it in place.
• 01:17 Now, as for the color of the shape, there are a few ways to go about this.
• 01:21 If you want a one color design.
• 01:23 Then, you can simply double-click on the layer thumbnail in the Layers panel,
• 01:27 to bring up the Color Picker, and then choose a color from there.
• 01:30 The second way is to set a fill on your Options bar when a shape tool is active.
• 01:36 This drop down will allow you to set a solid, gradient or
• 01:40 pattern fill for your shape.
• 01:42 If you watched my video on swatches, which I'll link at the end of the video.
• 01:46 You may have some custom colors already saved,
• 01:48 which you'll be able to access right here.
• 01:51 Now, if you think your document may be open on older versions of Photoshop,
• 01:55 you may want to avoid setting a gradient using this method.
• 01:58 As it may not be visible in versions older than Photoshop CS 6.
• 02:02 Instead, you can use a fill layer.
• 02:05 At the bottom of your Layers panel, you can add a variety of adjustment and
• 02:09 fill layers, including a gradient.
• 02:12 If you click on the Gradient bar, the Gradient Editor will appear, which allows
• 02:16 you to choose a preset gradient, or edit the colors to create your own.
• 02:20 To keep things nice and
• 02:21 flat, this gradient will be a subtle two color gradient.
• 02:25 On the bottom, which is the left stop, I am going to choose a vibrant baby blue.
• 02:28 And then at the top, I can sample the bottom color, and
• 02:33 then shift it a touch to slightly lighten it up.
• 02:36 Now, if you think you may use this gradient again for
• 02:38 future designs, you may want to save it as a preset.
• 02:42 First, give your new gradient a name, Flat Blue Gradient, and
• 02:47 then press New to save it.
• 02:49 Good. So now that the gradient is set,
• 02:51 pressing OK twice will apply the new Fill layer but
• 02:55 as you might be noticing, it's covering up the rounded rectangle.
• 02:59 In order to place the gradient within the icon, a clipping mask needs to be created.
• 03:04 This can be done by right-clicking on the Fill layer, and
• 03:07 choosing Create Clipping Mask.
• 03:09 Using a clipping mask,
• 03:11 can help you place just about anything inside of a shape like this one.
• 03:15 Now, before anything else is placed inside of this icon,
• 03:18 let's look at how utilizing smart objects can help with the design process.
• 03:23 Now, to see how the icon is going to look at the required sizes,
• 03:27 we'll want to make three duplicates.
• 03:29 But, before that's done, this icon should be converted into a smart object first.
• 03:34 And, you'll see why this is done in a moment.
• 03:36 In order to convert this icon, start by selecting all the elements that make up
• 03:40 this design, excluding the background.
• 03:43 In this case, I'll want to select the Gradient and the Shape layer.
• 03:47 This can be done by selecting either of them, and then holding down the Cmd or
• 03:50 Ctrl key, Cmd on the Mac, Ctrl on Windows, and clicking on the other.
• 03:55 Once all of the elements have been selected,
• 03:57 right-click on either of them and choose Convert to Smart Object.
• 04:01 Now, we can create the duplicates.
• 04:04 To make a bit of room on this document, I'll want to extend the right side.
• 04:08 With my Crop tool active, shortcut key C.
• 04:11 I'm able to pull on the right crop handle to extend the document outwards.
• 04:15 And then, press Return or Enter to accept the changes.
• 04:18 If the extended background layer is transparent after the crop,
• 04:22 select the Background layer and then fill it with whatever color you wish.
• 04:26 To create a copy of your icon, you can either use the Cmd or Ctrl+J shortcut, or
• 04:31 you can hold down Alt or
• 04:32 Option, Option on the Mac Alt on Windows, and then drag the icon to the right.
• 04:38 Once you have your first duplicate of the icon,
• 04:40 it needs to be transformed to it's new size.
• 04:43 Enter Free Transform Mode with Cmd or
• 04:45 Ctrl+T, and then at the top on the Options bar, lock the Width and
• 04:49 the Height values, and then enter 120 pixels into both fields.
• 04:54 And then, press Return or Enter to accept the transformation.
• 04:57 Good, let's do two more.
• 04:59 Duplicate the current icon just like you did a moment ago.
• 05:03 Enter Free Transform mode.
• 05:05 Lock the dimensions.
• 05:06 And then, for this icon, the width and height are gonna be set to 80 pixels.
• 05:11 Finally, the last icon is gonna be slightly smaller.
• 05:14 This one is gonna be transformed down to 58 pixels.
• 05:19 Perfect. Our required icons are set.
• 05:21 And, you're free to place them anywhere you wish.
• 05:23 This document is strictly for preview purposes.
• 05:26 Now, here's the beauty of Smart Objects.
• 05:29 Even though we have four icons on this document,
• 05:31 you only need to edit one of them.
• 05:34 You'll notice in your Layers panel that each icon has the smart object symbol on
• 05:38 its thumbnail.
• 05:39 And, because they're a duplicate of the initial smart object,
• 05:42 they all share the same source.
• 05:45 So, double-clicking on any of the layers thumbnails will bring up the source in
• 05:49 a new document containing your original layers as you can see in the Layers panel.
• 05:54 This is where your editing will primarily take place.
• 05:57 Let's create a simple music icon to go in the center.
• 06:00 In the Tools bar,
• 06:00 I'm gonna grab the Ellipse tool to create a white circle in the middle of this icon.
• 06:05 But, instead of leaving the fill solid white, on the Options bar,
• 06:08 I'm gonna set the fill to None, and then add a white stroke around
• 06:13 the outside of the circle, with a width of around 25 points.
• 06:18 Next, I'm gonna use a custom shape for the music icon.
• 06:22 Back in the Tools bar, I'll grab the Custom Shape tool.
• 06:25 Then, in the Shape Picker, I'm gonna find the music symbol.
• 06:28 If you don't see these shapes, click on the gear icon at the top right,
• 06:32 choose the Music Pack, and then press Append to add them to your current shapes.
• 06:37 Now, selecting the Music icon, I can drag one out on the document to create it.
• 06:42 At first glance, is a little bit too thin.
• 06:44 So, with the shape tool still active,
• 06:46 I'm gonna add a white stroke with the width around ten points to fatten it up.
• 06:52 Finally, to edit the points or paths on the shape,
• 06:54 I can use the Direct Selection Tool which is right above your Shapes.
• 06:58 This will allow me to drag any of the points or paths of this shape.
• 07:03 If you don't initially see the points, use the Cmd or
• 07:05 Ctrl+Shift+H shortcut to reveal your path.
• 07:10 Perfect, my simple icon is complete.
• 07:12 Of course, you can create or add anything you wish to your icons.
• 07:16 Now, here's the fun part, because I'm editing the source of the smart object.
• 07:20 All I have to do is save.
• 07:22 Cmd or Ctrl+S, and then when I return to the presentation document,
• 07:25 you're gonna notice that all of the icons have been updated to show the new design.
• 07:31 And, that will complete it.
• 07:32 Hopefully, you've taken away some handy tips from this tutorial.

Lesson notes are only available for subscribers.