Embedded icon

INTRODUCTION

A good icon can be the make or break factor of your application’s success in the marketplace. Every day customers are bombarded with vast amounts of information. A clean and simple picture that represents the key benefits of your application may be the deciding element at the point of sale. Draw a minimalistic icon for a musical app.

The Shape Tool, Effects, the Gradient Tool and other features of Pixelmator are used in this tutorial.

RESOURCES
 
PXM File

STEP 1

Open Pixelmator and create a new document. The image size used in this tutorial is 900×600 pixels. Then, select the Paint Bucket Tool (N) and fill the “Background Layer” with grey (color code – #e6e6e6). Next, open the Effects Browser by choosing View > Show Effects. Choose the Stylize group in the Effects Browser and double-click the Noise thumbnail. Set Amount to 0.5% and click OK.

Now, make the gridlines visible by choosing View > Show Grid. Then, select the Ellipse Shape Tool. Hold down the Shift key and draw a circular shape filled with grey (color code – #b3b3b3) like in the example below.

STEP 2

Next, make the shape hollow. First, choose Add to Shape in the Tools Options Bar. Then, hold down the Shift key and draw a circular shape somewhere on the canvas. Make sure that the new shape is selected and click the Action button in the Tools Option Bar. Choose Path Composition and then, choose the Subtract from Shape in the shortcut menu. Then, resize and reposition the new shape like in the example below.

STEP 3

Now, hide the gridlines by choosing View > Hide Grid. Then, select both shapes in the “Shape” layer and click the Shape Settings button in the Tools Options Bar. Select the option “Stroke”. Set the Stroke Color to dark grey (color code – #999999) and use the same settings as in the example below. Next, select the option “Shadow”. Set the Shadow Color to white and also use the same settings as in the example. The Layers Palette is hidden in the image below to allow a better view.

STEP 4

Now, duplicate the “Shape” layer. Position the “Shape copy” layer below the “Shape” layer in the Layers Palette. Then, select the Move Tool (V) and use the Up Arrow key to move the shape 1 px up. Then, click the Shape Settings button in the Tools Options bar. Fill the shape with grey (color code – #7f7f7f) and deselect the other options.

STEP 5

Create a new layer and name it “Gradient”. Control-click the “Gradient” layer and choose Create Clipping Mask from the shortcut menu. Then, use the Gradient Tool (G) to fill the new layer with a white-to-black gradient like in the example below. Finally, change the layer’s Blending to Color Burn and reduce the Opacity to 10%.

STEP 6

Now, make the gridlines visible by choosing View > Show Grid. Then, select the Ellipse Shape Tool. Choose Draw New Shape in the Tools Options Bar and draw a small ellipse. Rename the new layer to “Note”. Next, choose Add to Shape in the Tools Options Bar and draw another ellipse 10 px lower than the first one. Then, select one of the ellipses and choose Edit > Transform. Rotate the shape by 350º like in the example below. Then, do the same with the other shape. Finally, apply the shape settings used in step 3.

STEP 7

Now, select the Rectangular Shape Tool in the Tools Palette. Draw two parallel rectangles. Then, add another rectangle on top like in the example below.

STEP 8

Now, Control-click the topmost rectangular shape and choose Make Editable from the shortcut menu. Select the two leftmost points and position them 10 px below. Then, create two more points  in the middle by double-clicking and position them 5 px up. Use the image below as a reference.

STEP 9

Hide the gridlines by choosing View > Hide Grid. Then, use the Move Tool (V) to position the “Note” layer in the middle of the circular shape. Use the image below as a reference. Next, Control-click the “Note” layer and choose Duplicate. Position the “Note copy” layer below the “Note” layer in the Layers Palette. Then, select the “Note copy” layer and click the Shape Settings button in the Tools Option Bar. Apply the settings used in step 4. Finally, use the Move Tool (V) to position the “Note copy” layer 1 px up.

STEP 10

Now, create a new layer and name it “Gradient 2”. Then, Control-click the new layer and choose Create Clipping Mask from the shortcut menu. Use the Gradient Tool (G) to fill the new layer with a white to black gradient like in the example below. Finally, change the “Gradient 2” layer’s Blending to Color Burn and reduce the Opacity to 10%.

STEP 11

Now, create a new layer and name it “Noise”. Use the Paint Bucket Tool (N) to fill the layer with white. Then, open the Effects Browser and choose the Stylize group. Double-click the Noise thumbnail. Set Amount to 50% and click OK. Finally, change the “Noise” layer’s Blending to Soft Light and reduce the Opacity to 5%.

CONCLUSION

Congratulations on finishing the tutorial! When creating an icon for your application or service, remember to think about the fine details like lighting, embossing and others. However, try to not overdo any of the aforementioned factors.