Locked lesson.
About this lesson
Design an app icon for IOS or Android.
Exercise files
Download the Photoshop file used in the video tutorial and try the lesson yourself.
iOS Icon Design.psd578.9 KB
Quick reference
Topic: IOS Icon Design
Design an app icon for IOS or Android.
When to use
Learn how to set up a smart document template so that the single design will output to different sizes. This is not just good for Icon design, but any kind of document the requires different versions and sizes for publication and display
Instructions
Create the largest size document
- New document and set to 1024 by 1024.
Create the design background
- Select the rounded rectangle shape tool.
- Click (do not drag) within the document to bring up dialogue box.
- Set width and height to 1024, and radius 220px.
- Position in the centre of the document.
- Add an adjustment fill layer – Gradient.
- Set gradient, right click and create clipping mask.
Convert into smart object template
- Select all layers except background.
- Right click and choose convert to smart object.
- Use crop tool (shortcut key C) to extend right side out (press return to accept).
- Duplicate smart object as a new layer by Command (Mac) or Control (Windows) + ‘J’.
- Command (Mac) or Control (Windows) + ‘T’ to enter transform mode and in options bar lock the ratio and enter 120px (press ‘Return’ to accept).
- Duplicate smart object as a new layer by Command (Mac) or Control (Windows) + ‘J’.
- Command (Mac) or Control (win) + ‘T’ to enter transform mode and in options bar lock the ratio and enter 80px (press ‘Return’ to accept).
- Duplicate smart object as a new layer by Command (Mac) or Control (Windows) + ‘J’.
- Press Command (Mac) or Control (Windows) + ‘T’ To enter transform mode and in options bar lock the ratio and enter 58px (press ‘Return’ to accept).
Edit all the icons at once to make a music icon
- Double click on the original document to enter edit mode.
- With the circle shape tool create a white circle.
- In the options bar turn off fill and turn on the stroke to 25 points.
- In the shape tools, choose custom shape.
- In the shape picker find the music notes shape.
- Turn on the stroke to 10 points.
- To adjust the shape path use the ‘Direct Selection’ Tool (above the shape tool icon). Press Command (Mac) or Control (Windows) + ‘Shift-H’ to reveal paths.
- Saving will update all the icons in the presentation document.
- 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.