樂聞設計

In Designing, Drawing by Martin Šnajdr

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."