Locked lesson.
About this lesson
This is a good tutorial for brushing up on your Photoshop design skills. Learn how to draw and duplicate shapes into pattern structures. Good for icon and logo design.
Exercise files
Download the Photoshop file used in the video tutorial and try the lesson yourself.
iOS7 Photo Icons.psd4 MB
Quick reference
Topic
Create an iOS7 style design.
When to use
This is a good tutorial for brushing up on your Photoshop design skills. Learn how to draw and duplicate shapes into pattern structures. Good for icon and logo design.
Instructions
Create new document
- 1024 by 1024 pixels
- Fill the background with light blue.
- Draw shape of icon with a rounded rectangle tool: radius of 220 pixels
- Color: white
Set up rulers
- Command- or Control-R
- Drag out a horizontal and vertical guide which should snap to the centres of your icon.
Creating the colored petals
- With the rounded rectangle tool drag out the first petal towards the top
- Position: 30 pixels from middle, Color: fa a7 33
- Duplicate: Command- or Control-J
- Command- or Control-T to enter free transform mode
- Grab the pivot point from the centre of the shape and drag it to the centre of the icon, where the two guides meet.
- Hold down the Shift key and rotate 3 clicks (45 degrees)
- Color: f2 69 67
- Duplicate: Command- or Control-J
- Go to Edit/Transform Path: Transform Again menu
- Change Color: d4 86 AD
- Repeat duplication process with the following colors:
- 83 8e c3, 79 ab db, 6c c1 98, b3 d5 57 and f8 e3 2b
- Select all the petals and switch blending mode to Multiply
Login to download
- 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.