In today’s tutorial, we’re going to be creating the new Photos icon that’s part of the iOS 7 beta. While I don’t think this icon particularly attractive, you may pick up some tricks along the way. Let’s get to it!
Starting off with the document, I like to start off large, but not too large. 1024 by 1024 pixels will work well.
Once the document has been created, I’m going to fill the background with a light blue, just so we’ll have a bit of contract against the white icon.
Now we can create the shape of the icon, which will be slightly different depending on the size of your starting document. As the corners are rounded, the Rounded Rectangle Tool will do the trick! When starting off with a 1024 by 1024 document, a radius of 220 pixels will give us the corners we’re looking for, but like I mentioned, if your document is larger or smaller, you’ll have to adjust the radius. Make sure to hold down your Shift key in order to maintain a square aspect ratio.
After you’ve created the shape, if the color is not set to white, you can double-click on the shape layer’s thumbnail in the Layers panel, and set the color accordingly.
Next, to help us position the colored petals, we’re going to place guides in the centers of the icon. If you don’t see your rulers on the left and top of your workspace, Command/Ctrl + R will reveal them. Now you can drag out a horizontal and vertical guide, which should snap to the centers of your icon.
If your guides aren’t snapping, you can turn snap on under the View menu.
Now we can start creating the colored petals in the middle. With the Rounded Rectangle Tool still active, drag out the first petal, color #faa733, towards the top of the icon, making sure to leave a bit of breathing room. Once the shape has been created, place it in the center of the icon, and right on top of the horizontal guide, then move it up 30 pixels by holding down your Shift key, and pressing the up arrow key 3 times.
Now we get to the fun process of duplicating. Command/Ctrl + J will quickly duplicate your currently layer, then Command/Ctrl + T will enter free transform mode.
Here’s where you need to pay attention. We want the shape to rotate around the center of the icon, so grab the pivot point from the center of your current shape, and drag it to the center of the icon, where the two guides meet.
Now, when you rotate your shape, it pivots around the center. But instead of guessing where you should drop it, hold down your shift key before rotating. This will rotate in increments of 15 degrees. Once it snaps three times, or at 45 degrees, you can accept the rotation by pressing return or enter.
The color for this second shape is going to be: #f26967.
Now, thankfully, the process from here is a touch easier. Because we’ve already defined a transformation, we can tell Photoshop to use the same conditions as before.
Once again, duplicate the shape with Command/Ctrl + J, but instead of manually rotating again, we can use the Transform Again feature, which is located under the Edit > Transform Path (Again) menu. If all goes well, Photoshop should rotate that new duplicate 45 degrees, around the center of your document.
For this shape, the color will be set to: #d486ad.
Repeat this process, changing the color of the new petals.
Fourth petal color is: #a38ec3.
The fifth petal color is: #79abdb.
The sixth petal color is: #6cc198.
The seventh petal color is: #b3d557.
Finally, the last petal color is: #f8e32b.
Alright! We’re past the repetitive nonsense! Now obviously, the petals in the Photos icon has a bit of transparency to them. You can achieve that effect by setting the Blend Mode of those layers to Multiply. So in your Layers panel, select the top petal, then with your Shift key held down, select the bottom petal. Once they’ve all been selected, set the Blend Mode to Multiply, and you should see the petals overlap quite nicely, leaving you with the final result.
Again, this wouldn’t be my choice of design for the photos icon, but I felt that you guys may pick up some good tips by recreating this icon.