Life's easy with Medialoot.

Unlimited access for only $14/mo.

How To Create an OS X Yosemite Style Safari App Icon with Photoshop and Illustrator

How To Create an OS X Yosemite Style Safari App Icon with Photoshop and Illustrator

The next version of OS X called 'Yosemite' was unveiled by Apple last week and it features a completely overhauled user interface, including redesigned app icons. The new icons are a blend between traditional skeuomorphic styling and the ultra-flat iOS 7 style, the results are familiar yet fresh and eye pleasing. The Safari web browser icon in particular is one of my favourites, and in this tutorial I will share the steps required to recreate the new Yosemite Safari app icon using Photoshop and Illustrator.

Step 1

Start by creating a new document in Photoshop. For this tutorial I went with 800 x 640 pixels. Fill the background with a dark grey (#303134).
how to create a os x safari app icon

Step 2

In the foreground draw a 480 x 480 pixel white circle holding down the shift key to constrain proportions. Use Photoshop’s align features to center the circle in the middle of the document.
how to create a os x safari app icon

Step 3

Apply Gradient Overlay, Inner Glow and Drop Shadow layer styles to the circle layer:
how to create a os x safari app icon
how to create a os x safari app icon
how to create a os x safari app icon

Step 4

Draw another circle or duplicate the original, resize to 445 x 445 pixels and set the fill colour to #1b96e2
how to create a os x safari app icon

Step 5

Apply Gradient Overlay, Inner Glow and Drop Shadow layer styles to the circle layer:
how to create a os x safari app icon
how to create a os x safari app icon
how to create a os x safari app icon

Step 6

The results should now be looking something like this:
how to create a os x safari app icon

Step 7

For the next step we need to jump over to Illustrator to make use of the Rotate tool. Create a new document in Illustrator and draw a 420 x 420 pixel circle to use as a guide.
how to create a os x safari app icon

Step 8

At the topmost edge of the circle draw a tall 4 x 40 pixel rectangle. Zoom in a little to ensure it as closely aligned to the top edge of the guide circle as possible.
how to create a os x safari app icon

Step 9

With the rectangle layer selected, pick the Rotate tool and whilst holding down the Alt key click the center of the guide circle. In the dialog that appears enter 10 degrees as the Angle and click Copy. (Tip: turn on Smart Guides in Illustrator to make finding the center of the circle easier)
how to create a os x safari app icon

Step 10

Tap CMD+D (Mac) or CTRL+D (Win) to repeat the last step until a full circle is formed.
how to create a os x safari app icon
how to create a os x safari app icon

Step 11

Duplicate the first rectangle and resize it, or draw a new one that is 4 x 20 pixels above the original.
how to create a os x safari app icon

Step 12

Use the Rotate tool again but this time enter half of the original value, which is 5 degrees and click OK.
how to create a os x safari app icon

Step 13

With the Rotate tool repeat steps 9 and 10 to create another full circle of rectangles in between the originals.
how to create a os x safari app icon
how to create a os x safari app icon

Step 14

Delete the guide circle and select all of the rotated rectangles. Then copy and paste them into your Photoshop document using the Shape Layer option.
how to create a os x safari app icon
how to create a os x safari app icon
how to create a os x safari app icon

Step 15

Apply Gradient Overlay and Drop Shadow layer styles to the new shape layer that was pasted from Illustrator.
how to create a os x safari app icon
how to create a os x safari app icon
how to create a os x safari app icon

Step 16

For the needle element of the compass, begin with just the top section by drawing a red (#e41f1f) 74 x 214 pixel rectangle. Delete the top left vector point and move the top right point 37 pixels to the left (or vise versa) to create a triangular shape.
how to create a os x safari app icon
how to create a os x safari app icon

Step 17

Apply a Gradient Overlay layer style and edit the default Black to White gradient by placing both colour stops at 50%:
how to create a os x safari app icon

Step 18

Duplicate the triangle shape and change the colour fill to light grey (#e1e1e1).
how to create a os x safari app icon

Step 19

Go the to Edit menu and select Transform > Flip Vertical, then position the grey shape directly below the red shape. Group both triangle layers and convert them to a Smart Object in the Layers panel.
how to create a os x safari app icon
how to create a os x safari app icon

Step 20

Rotate the needle Smart Object 45 degress holding down the Shift key.
how to create a os x safari app icon

Step 21

For the shadow, duplicate the Smart Object and apply a Color Overlay layer style
how to create a os x safari app icon
how to create a os x safari app icon

Step 22

Move the duplicated Smart Object layer below the original and use the Transform > Warp tool to distort the shape of the layer. Try to make the effect symmetrical but don’t worry if it isn’t quite perfect.
how to create a os x safari app icon

Step 23

Finally, apply a Gaussian Blur filter to the shadow Smart Object layer with a radius of about 5 pixels.
how to create a os x safari app icon

The Result

how to create a os x safari app icon
This is what the end result should look like, a pleasant blend between skeuomorphic and flat design principles that serves it’s purpose well. As always I try to cover techniques that can be applied to other similar projects, so if you are new to app icon design I hope this walkthrough was helpful!


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Comments

  • Reply »
    rex

    rex

    gooooooooooood

    Jun 11, 2014 at 2:12 pm
  • Reply »
    Samit

    Samit

    Nice tutorial thank you

    Jun 12, 2014 at 8:53 am
  • Reply »
    Roger

    Roger

    Good one, thanks

    Oct 28, 2014 at 6:42 pm

Leave a comment

Sign up to our Newsletter

Get site updates, freebies, and MediaLoot news.

Contact Us

Suggest a resource

FAQ

Attribution for free resources must be provided in conjunction any time the freebie is used, on the same page where the resource appears on your design. Or, you can purchase a premium version of the free resource.

See all