iOS 7 Photos Icon in Photoshop

11,599
views
Skill level
Beginner

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!

Subscribe on YouTube!  Contribute on Patreon!

Document

Starting off with the document, I like to start off large, but not too large. 1024 by 1024 pixels will work well.

iOS7 photos document iOS 7 Photos Icon in Photoshop

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.

iOS7 photos bluebg iOS 7 Photos Icon in Photoshop

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.

iOS7 photos iconshape iOS 7 Photos Icon in Photoshop

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.

iOS7 photos guides iOS 7 Photos Icon in Photoshop

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.

iOS7 photos firstpetal iOS 7 Photos Icon in Photoshop

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.

iOS7 photos pivotpoint iOS 7 Photos Icon in Photoshop

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.

iOS7 photos rotated iOS 7 Photos Icon in Photoshop

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.

iOS7 photos thirdpetal iOS 7 Photos Icon in Photoshop

Repeat this process, changing the color of the new petals.

Fourth petal color is: #a38ec3.

iOS7 photos fourthpetal iOS 7 Photos Icon in Photoshop

The fifth petal color is: #79abdb.

iOS7 photos fifthpetal iOS 7 Photos Icon in Photoshop

The sixth petal color is: #6cc198.

iOS7 photos sixthpetal iOS 7 Photos Icon in Photoshop

The seventh petal color is: #b3d557.

iOS7 photos seventhpetal iOS 7 Photos Icon in Photoshop

Finally, the last petal color is: #f8e32b.

iOS7 photos lastpetal iOS 7 Photos Icon in Photoshop

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.

iOS7 photos multiply iOS 7 Photos Icon in Photoshop

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.

Check out Nathaniel’s tutorial on creating an IOS 7 interface in Photoshop!

downloadPSD button iOS 7 Photos Icon in Photoshop

  • Aulia

    Thankyou! :)

  • uhanepono

    Thanks Howard. I love your tuts! They give me lots of ideas! I will look into hte new site! and see what I have for your tip jar!

  • uhanepono

    Here’s a link to what I came up with from your tut

    http://www.flickr.com/photos/c_avery/9061784354/#

  • http://www.clippingpathspecialist.com/clipping-path.html Clipping Path

    Its a good tutorial for iOS 7 photos.