Preview

Create a Custom Mac OSX Style Ring Binder Address Book Icon

Sep 23rd in Designing, Drawing by Martin Šnajdr

Today I'll show you how to create an Address Book replacement icon for Mac OSX. When you are a beginner, it's better to start with designing replacement icons to get some practice. Let's get started with personalizing the icons in our workspaces.

Author: Martin Šnajdr

I am 18 and I live in Karlovy Vary, Czech Republic. I love everything about retro art, illustration, design, typography, and punk-rock music.

Final Image Preview

Let's take a look at the image we'll be creating. Want access to the full PSD files and downloadable copies of every tutorial, including this one? Join PSDTUTS PLUS for just $9/month.

Introduction

Creating a good Mac OSX icon is not only about an idea or a sophisticated design, but also about the rules. When you are going to start with designing an icon for Mac OSX there are many things you need to know. First of all you have to read the Apple Human Interface Guidelines. It gives you a basic knowledge about the philosophy of Mac OSX User Interface design. The next thing to consider is actually what you want to create, so let's start making our own personalized icon for our Address Book app.

Lighting Theory

We start with a small theory about icon lighting. It's very simple to understand it. There are two sources of light - a sunlight as a strong light source and an environment reflection as a soft light source.

Step 1

Create a New Document that is 1024 pixels by 1024 pixels. To define a 512px by 512px rectangle (Leopard icon standard) add four guides (View > New Guide).

Step 2

Create a New Layer and add a rounded rectangle (with a 20px diameter) as a shape layer. This will be the main shape of the book. I would like to have a red book, so I am going to choose a red color as the fill color. Let's call this layer "Book Cover."

Step 3

The books or the papers of Mac OSX icons have a specific perspective, see the image below.

Step 4

Take the Direct Selection Tool (A) and select two corner points (always two). Then align them to our guides (and then hide the guides). Copy the "Book Cover" layer one more time and rename it to "Paper." We are going to use this layer later, so hide it for now.

Step 5

Double-click on the "Book Cover" to reveal Layer Style window and apply all the settings below. Don't forget to check Blend Clipped Layers as Group in the Blending Options.

Step 6

Create a New Layer, press Command + Alt + G to change the layer to a Clipping Mask. Select the Pen Tool (P) and make a dark blue wide line on the left. Let's simply call it "Black Binding" because the dark blue looks like a black color.

Step 7

Apply these settings on the "Black Binding."

Step 8

Add another two clipping masks to the book shape. These masks have to be under the "Black Binding" layer. Fill the first one with black. Next, go to Filter > Noise > Add Noise (apply an Amount of 75% and set the Distribution to Uniform). Also, change the Blending mode to Overlay and set the Opacity to 7%. On the second clipping mask apply the Note Paper Filter (with the Image Balance of 20, Graininess of 15, and Relief of 10). Change the Blending mode to Overlay and set the Opacity to 3%.

Step 9

Let's add some patterns to the "Black Binding." Create another two clipping masks, this time they have to be over the "Black Binding" layer, of course. Now we need to make a selection of the "Black Binding." So hold down Command and click on the vector mask of the "Black Binding." Fill the selection with a black color and apply the Graphic Pen filter with the settings below.

Step 10

Click on Extract (Command + Alt + X), and extract about half of the black strips from the white color.

Step 11

Change the Blending mode of this layer to Overlay and set the Opacity to 10%.

Step 12

Now we are going to repeat something from previous steps. So select the second clipping mask, which we created in Step 9. Do the same steps like in Step 9, but without applying the Graphic Pen filter. We are going to use the Note Paper filter as like as in Step 8, with the same settings (Image Balance - 20, Graininess - 15, Relief - 10). And again, change the Blending mode to Overlay and this time, leave the Opacity on 100%.

Step 13

The last thing we need to do on the "Black Binding" (and on the book cover) is to add some visible scratches. Create a new layer above all "Book Cover" clipping masks. Select the Brush Tool and a Starburst Brush (you can find it in Assorted Brushes).

Grab a black color, then make a selection of the "Black Binding" (Command + click on the vector mask), and click several times to the right border of the selection. At the end, create a new group, call it "Front Cover." Move all the layers we used to draw the book cover there.

Step 14

So let's add a back to our book. Copy the "Front Cover" group, rename it to "Back Cover" and move it under the "Front Cover" group.

Step 15

The "Back Cover" is almost similar to the "Front Cover." We need to hide only two layer effects. The first one is a Drop Shadow of the main book shape and the second one is a Bevel and Emboss of the "Black Binding" shape.

Step 16

Now it's time to use the "Paper" layer from Step 4. So reveal this layer and grab the Direct Selection Tool. What we are going to do now is to scale down the "Paper" layer. But as you can see, we won't be using Transformation because we need to retain the rounded corners of the paper on the same radius as the book cover corners. If we scale with Transformation, the radius of the corners scales too. Always, select two corner points and move them a little bit closer to the next corner. At last, change the fill color to white.

Step 17

Apply these settings to the "Paper" layer.

Step 18

To create five papers, copy the Paper layer four times. After that, place them as shown below.

Step 19

Create a New group, call it "Papers" and move all papers to this group. Place this group under the "Front Cover" group and over the "Back Cover" group.

Step 20

Something still missing? Rings, of course. So let's do them. First, create an ellipse with the Ellipse Tool (U).

Step 21

Subtract another ellipse inside the first ellipse using the Ellipse Tool (U) in Subtract mode (-).

Step 22

Subtract the hidden part of the ring shape using the Pen Tool (P) in Subtract mode (-). Name this layer "Ring."

Step 23

Apply these settings on the "Ring."

Step 24

To create a small reflection of the red color, duplicate the "Ring," clear layer styles, and apply these properties.

Step 25

Add a New layer, name it "Ring shadow," then go to Layer > Vector Mask > Reveal All. Click on the vector mask of the "Ring" and copy the path to the "Ring Shadow" layer. Select this layer and use a soft black 100px Brush with 20% Opacity to add a black color to the ends of the "Ring."

Step 26

Create a "Ring Eye" with the Ellipse Tool (U).

Step 27

Apply these layer settings on the "Ring Eye."

Step 28

Add a New Layer under the "Ring" and over the "Ring Eye." Create a selection of the "Black Binding." Take a black 50px Brush with 30% Opacity and paint a shadow under the "Ring."

Step 29

As you can see, it is necessary to fix the border of the "Ring." Create a New Layer over all the "Ring" Clipping Masks and fix it with a small black brush.

Step 30

Create a New Group, name it "Ring Layers" and put all the "Ring" layers there. Then copy this group and move it up. The shadow under the second "Ring" should be a little different so rotate it a few degrees closer to the "Ring." To get five rings repeat this step three more times (without creating a New Group though).

Step 31

Select the Pen Tool (P) and make a shape of a fold, as in the picture below.

Step 32

Apply the following properties on the "Fold."

Step 33

Duplicate the "Fold" four times.

Step 34

Ok, let's add a shadow to the book. I'm not going to transform and blur the book shape, but instead I am using only the Brush Tool (B) and the Erase Tool (E). I think this way may be harder for you, but I hope if you do your best, the result will be more real. You can also play with the opacity of this layer, an important thing is that the shadow shouldn't be too strong and dark (a swhite background helps us with this).

Step 35

Now we've done the book. You can use it as replacement icon for many applications, but if we want to use it as Address Book, we should add one more detail. It's going to be an at-sign as in original icon. So choose you favorite font (I love Myriad Pro), set the font size to 250pt and type the character "@."

Step 36

Then rotate the at-sign about 10° to the left...

Step 37

...and apply these settings.

Step 38

Copy the at-sign, move it a few pixels up, and a few pixels right. Clear the layer style, change the color to white, and apply the new settings. Don't forget to set the Opacity to 80%.

Conclusion

I hope this tutorial is useful for you as a starting-point in creating Mac OSX style icons. If not, you can at least download this icon for Mac OSX for free under the CC license and as a small bonus. I added another two color versions as well: green and black. To download this icon, click on the picture below. Here is an article that describes how to install custom Mac OSX icons.


Enjoy this Post?

We'd love your vote!

User Comments

( ADD YOURS )

  1. Ed.HadDy September 23rd

    WOW, very nice tut… thanks very much!


  2. Lawrence77 September 23rd

    wow what an effect…
    I’m loving it :D


  3. Lawrence77 September 23rd

    hai SEAN HODGE you didnt reply me…
    WHY??? :(

    laranz.joe@gmail.com


  4. Tony September 23rd

    awesome job and great techniques!


  5. Lawrence77 September 23rd

    hai Martin Šnajdr….
    is this yours http://bh0.physics.ubc.ca/People/msnajdr/
    one?
    are you a physics expert….


  6. Dainis Graveris September 23rd

    Great outcome here as alaways! Appreciated!! Thank You again, mates!


  7. Lawrence77 September 23rd

    @Tony your website is very cool..
    as well as your WEB PROJECTS also very very nice…
    What a Brilliant man you are?


  8. kailoon September 23rd

    Wow… this is crazy! I like it!!!


  9. diesel September 23rd

    Fantastic work…a lot of work went in to that and Im exhausted just reading it!

    (psst…New shirts at my website.)


  10. Greg September 23rd

    This is great!!!! Thanks!!
    - Greg


  11. PaulR September 23rd

    Very nice


  12. Nate September 23rd

    Super realistic outcome. Looks great and was a good read. Thanks


  13. Ben Jacob September 23rd

    That was fantastic, Nice Fx too :D


  14. Mr Kuzio September 23rd

    What shiny address book XD


  15. Shane September 23rd

    very nice indeed.

    thanks for posting.


  16. Vince September 23rd

    Simple to create, yet great results! Another top quality tut. Keep em coming


  17. Dan September 23rd

    I’m not finding the PSD download on the plus site?


  18. Dan September 23rd

    Also, where are your contours coming from in the Contour and Satin effects on the rings? I don’t have any contours that look like those in my drop down and I’ve never played with adding new contours, don’t see a way to easily make your own.


  19. Ewan September 23rd

    Wow! That’s freakin awesome. One of the best tutorials I’ve seen on this site.


  20. daniel September 23rd

    very nice ! congrats!


  21. Dan September 23rd

    Wow, great stuff. More tuts like this, great work.


  22. David Hellmann September 23rd

    Nice Tutorial. thanks!


  23. Ericka Wright September 23rd

    This is awesome and why PSDTuts rocks!


  24. Francois Therrien September 23rd

    Wow ! Beautiful

    Tanxx


  25. elloh7 September 23rd

    About the custom contours: right click / command click the thumbnail (not the drop down arrow!) and you should get a dialog that is similar to the one used to edit curves. Its not obvious, I had to play around / random click things to find it myself.


  26. felipexakal September 23rd

    Very good…

    Nice Tutorial ^^


  27. NaldzGraphics September 23rd

    great tutorial as always.


  28. Jonathan September 23rd

    Your technique for creating the highlights and shadows on the rings is superb!


  29. RUGRLN September 23rd

    Fantastic layer style for the ring, looks so realistic!


  30. insic September 23rd

    wow really nice result.


  31. Knight September 23rd

    Maximum use of layer styles. Nice one!


  32. Sam September 23rd

    Really awesome technique. Can’t wait to try this out!


  33. Dustin September 23rd

    Includes theory.. very informative


  34. Burnside September 23rd

    Very great tutorial…


  35. hiperkarma September 23rd

    WOW~


  36. Make Design, Not War September 24th

    Nice, I love icon tutorials and this one is pretty darn cool. Thanks for another great post :)


  37. Rodrigo September 24th

    Excellent tutorial, thanks


  38. Adam September 24th

    Confused with step 4?
    Which points should I be selecting and what’s the best way to change the angles?


  39. yuki September 25th

    nice!


  40. Martin Šnajdr September 25th

    Thank you for your comments.

    It’s really nice to see you find this tutorial useful :)


  41. Mason Sklut September 25th

    Excellent usage of Layer Styles. Great job!


  42. Ruth Lopez September 26th

    Dat was a so perfect………..:-) Too good.


  43. wendy September 27th

    Where can I find “Note Paper Filter”


  44. sobakka September 27th

    Even in far&cold Russia I enjoy this tut :-). It`s delicious. Pity me Mac is not wide spread here…


  45. Nicolas September 28th

    I don’t get step 3 and 4 :( pls help


  46. Martin Šnajdr September 29th

    Nicolas, take a look on this picture… I hope it will help you…

    http://farm4.static.flickr.com/3210/2886759567_439eb218af_o.jpg


  47. Alex September 30th

    This icon tutorial is in much better quality than any other icon tutorial I’ve seen.


  48. kaiser October 10th

    OK. I HAVE TO GIVE ALL OF YOU “TUTORIAL”-AUTHORS ONE IMPORTANT TIP:

    NOT EVERYBODY HAS AN NATIVE VERSION OF THE PROGRAMMS. AND IT´S REALLY EXTREMLY HARD TO TRANSLATE EVERYTHING IN EVERY MENU. FOR E.G.: BLENDING MODES… try to translate all this and try to find things, when couldn`t translate one point…

    SO PLEASE ALWAYS ADD SCREENSHOTS OF THE OPEN MENU´S AND DROP-DOWNS TO SEE WHAT YOU´RE TALKING ABOUT.

    thanks a lot.


  49. godonholiday October 14th

    step 4 - missing image?


  50. Sidney October 15th

    If this image was produced with Photoshop from Adobe then I am going to change my name.


  51. iswan October 22nd

    nice tutorial


  52. suckoja October 24th

    Just… too cool.


  53. Lam Nguyen October 28th

    It’s awesome tut, thanks a lot


  54. James October 30th

    This is an excellent tutorial! I learnt so much just by making a single notebook~
    Thank you very much!


  55. janki October 31st

    very nice tutorial.
    i am goin to try this one out.

    http://www.mywebarts.com


  56. nick November 6th

    I still don’t get 3 and 4 and don’t get it how to select 2 corners?


  57. nick November 6th

    I got it how to select 2 but how do you know excactly how to make it how much degrees as in picture 3?


  58. rudy November 9th

    ur site is very cool…


  59. Nick November 10th

    This is an incredible tutorial, thank you.


  60. asiku November 13th

    good job so awesome


Add Your Comment

( GET A GRAVATAR )
  • Gravatar

    Your Name November 21st

Arrow