iOS7 Photo Icons

Quick reference

• 00:04 Hey everyone, Howard Pinsky here, showing you guys how to create an IOS style
• 00:08 icon in Photoshop. Today, we will be creating the new ‘photos’ icon
• 00:13 that's part of IOS 7. While I really don't find this icon particularly
• 00:17 attractive,
• 00:18 I think you guys are going to pick up some nice tips and tricks along the way - let's get
• 00:22 to it.
• 00:22 Starting off with the document: I like to start large, but not too large,
• 00:27 1024 by 1024 pixels will work well.
• 00:30 Once the document has been created, I'm going to fill the background with a
• 00:34 nice light blue,
• 00:34 just so we have a bit of contrast against the white icon.
• 00:38 Now we can go ahead and create the shape of our icon, which will be slightly
• 00:42 different depending on the size of your starting document.
• 00:44 As the corners of the icon are rounded, the Rounded Rectangle tool will do the
• 00:49 trick.
• 00:49 When starting off with a 1024 by 1024 pixel document,
• 00:53 a radius of 220 pixels will give us the corners that we’re looking for.
• 00:58 But like I mentioned, if your document is larger or smaller,
• 01:01 you're going to have to adjust the radius. Now, you can drag the icon from the top
• 01:05 left of your document down to the bottom right,
• 01:08 making sure to hold down the Shift key in order to maintain
• 01:11 a square aspect ratio. And after you've created your shape,
• 01:15 if the color is not set to white, you can double-click on the shape layers
• 01:18 thumbnail in the Layers panel
• 01:20 and set the color accordingly. Next, to help us position the colored petals,
• 01:24 we're going to be placing guides in the centre of our icon.
• 01:27 If you don't see the rulers on the left and top of your workspace,
• 01:31 Command or Control R will reveal them. Now, you can drag out a horizontal
• 01:36 and vertical guide, which should snap to the center of your icon.
• 01:40 Now we can start creating the colored petals in the middle.
• 01:44 With the rounded rectangle tool still active,
• 01:45 drag out the first petal towards the top the icon, making sure to leave a little
• 01:49 bit of breathing room.
• 01:50 Once the shape has been created, place it in the center of the icon,
• 01:54 right on top the horizontal guide, and then move it up 30 pixels by holding down the
• 01:59 Shift key
• 02:00 and pressing the up arrow three times. As for the color of
• 02:04 the shape, it's going to be a nice bright orange - the value I will be using will be
• 02:08 fa a7 33. Now we get to the fun process
• 02:13 of duplicating: Command or Control J will quickly duplicate your current
• 02:17 layer.
• 02:18 And then Command or Control T will enter free transform mode.
• 02:22 Here's where you need to pay attention: we want the shape to rotate
• 02:26 around the center of the icon, so grab the pivot point from the center of our
• 02:30 current shape,
• 02:30 and drag it to the center of the icon, where the two guides meet.
• 02:34 Now, when you rotate your shape, it pivots around at the counterpoint,
• 02:39 but instead of guessing where you want to drop it, hold down the Shift key before
• 02:43 rotating.
• 02:44 This will rotate in increments of fifteen degrees.
• 02:47 Once it snaps three times - or at 45 degrees -
• 02:51 you can accept the rotation by pressing Return or Enter.
• 02:55 The color for the second shape is going to be
• 02:56 f2 69 67.
• 02:59 Now thankfully, the process from here is a little bit easier.
• 03:03 Because we've already defined a transformation, we can tell Photoshop to
• 03:07 use the same conditions as we did before.
• 03:09 Once again, duplicate the shape with Command or Control J.
• 03:12 But, instead of manually rotating again, we can use the ‘transform again’ feature,
• 03:17 which is located under the edit/transform path menu.
• 03:21 If all goes well, Photoshop should rotate that new duplicate
• 03:25 45 degrees around the center of your document.
• 03:29 For this shape, the colors can be set to
• 03:30 d4 86 AD.
• 03:33 Again: duplicate with Command or Control J,
• 03:37 edit/transform path again.
• 03:40 The shapes color is going to be 83 8e c3.
• 03:44 Duplicate/
• 03:47 transform path again, and the color will be a light blue:
• 03:51 79 ab db.
• 03:55 Again, duplicate/transform path again,
• 03:59 and the color this time's going to be
• 04:03 6c c1 98.
• 04:06 Command or Control J to duplicate and transform again,
• 04:10 we're almost there, this colors going to be:
• 04:13 b3 d5 57.
• 04:16 Now, one last time, duplicate with Command or Control J,
• 04:19 transform again, and finally, this color is going to be
• 04:23 f8 e3 2b.
• 04:27 Alright, we're past the repetitive nonsense. Now obviously, the petals in the
• 04:30 photos icon has a bit of transparency to them.
• 04:33 You can achieve this effect by setting the blend mode of those layers
• 04:36 to multiply, so in your layers panel on the right
• 04:39 select the top panel, and with your Shift key held down,
• 04:43 select the bottom petal. Once they've all been selected,
• 04:46 set the blend mode to multiply and you should see the petals
• 04:50 overlap quite nicely: leaving you with the final result

Lesson notes are only available for subscribers.