How to Create a Mac Icon in Adobe Illustrator

How to Create a Mac Icon in Adobe Illustrator

In the following tutorial you will learn how to create a simple Mac icon in Adobe Illustrator.

For starters you will learn how to setup a simple grid and how to create pixel perfect shapes. Using basic tools and effects, basic vector shape building techniques and a neat script you will learn how to create most of the shapes. Finally, for the coloring we will use simple linear gradients and some basic blending techniques.


Final Image

As always, this is the final image that we’ll be creating:

How to Create a Mac Icon in Adobe Illustrator

Tutorial Details

  • Program: Adobe Illustrator CS5
  • Estimated Completion Time: 45 minutes
  • Difficulty: Beginner-Intermediate

Resources


Step 1

Hit CTRL + N to create a new document. Select Pixels from the Units drop-down menu, enter 600 in the width and height boxes then click on the Advanced button. Select RGB, Screen (72ppi) and make sure that the Align New Objects to Pixel Grid box is unchecked before you click OK.

Enable the Grid (View > Show Grid) and the Snap to Grid (View > Snap to Grid). For starters you will need a grid every 5px, so simply go to Edit > Preferences > Guides > Grid, enter 5 in the Gridline every box and 1 in the Subdivisions box.

You should also open the Info panel (Window > Info) for a live preview with the size and position of your shapes. Do not forget to set the unit of measurement to pixels from Edit > Preferences > Units > General. All these options will significantly increase your work speed.

How to Create a Mac Icon in Adobe Illustrator 1

Step 2

Pick the Rectangle Tool (M) and focus on your Toolbar. Remove the color from the stroke then select the fill and set its color to R=251 G=176 B=64.

Move to your artboard and simply create a 295 x 205px rectangle, the Snap to Grid should ease your work.

Make sure that this orange rectangle is selected and go to Effect > Stylize > Rounded Corners. Enter a 7px radius, click OK and go to Object > Expand Appearance.

How to Create a Mac Icon in Adobe Illustrator 2

Step 3

Using the Pen Tool (P), create a 305px, horizontal path and place it as shown in the following image. Add a 1pt, black stroke for this new path just to make it easier to notice.

How to Create a Mac Icon in Adobe Illustrator 3

Step 4

Reselect your orange rounded rectangle along with the horizontal path, open the Pathfinder panel (Window > Pathfinder) and click the Divide button. Make sure that the resulting group of shapes is selected and simply hit Shift + CTRL + G to Ungroup it.

How to Create a Mac Icon in Adobe Illustrator 4

Step 5

Select the smaller orange shape, open the Gradient panel (Window > Gradient) and simply click on the gradient thumbnail to add the default black to white linear gradient.

Make sure that your shape stays selected and focus on the Gradient panel. First, set the Angle to 5 degrees.

Next, select the left gradient slider and set the color to R=165 G=166 B=171.

Then select the right gradient slider and set the color to R=224 G=224 B=226.

Make sure that the right gradient slider is still selected, focus on the Location box (from the Gradient panel) and set it to 90%. Keep in mind that the white number from the Gradient image stands for Location percentage.

How to Create a Mac Icon in Adobe Illustrator 5

Step 6

Disable the Snap to Grid (View > Snap to Grid) then go to Edit > Preferences > General and make sure that the Keyboard Increment is set to 1px.

Reselect the shape filled with the linear gradient and make two copies in front (CTRL + C > CTRL + F > CTRL + F).

Select the top copy and simpy hit the down arrow button (from your keyboard) once to move it 1px down.

Reselect both copies made in this step and click the Minus Front button from the Pathfinder panel. Fill the resulting shape with white and open the Transparency panel (Window > Transparency). Simply lower the Opacity to 15% and change the Blending Mode to Soft Light.

How to Create a Mac Icon in Adobe Illustrator 6

Step 7

Reselect the shape filled with the linear gradient and make two new copies in front (CTRL + C > CTRL + F > CTRL + F). Select the top copy and simply hit the up arrow button once to move it 1px up.

Reselect both copies made in this step and click the Minus Front button from the Pathfinder panel. Fill the resulting shape with black, lower its Opacity to 15% and change the Blending Mode to Soft Light.

How to Create a Mac Icon in Adobe Illustrator 7

Step 8

Select the remaining orange shape, focus on the Appearance panel and replace the existing fill color with R=3 G=3 B=3.

How to Create a Mac Icon in Adobe Illustrator 8

Step 9

Enable the Snap to Grid (View > Snap to Grid). Using the Rectangle Tool (M), create a 275 x 155px shape, set the fill color to R=30 G=30 B=30 and place it as shown in the first image.

Make sure that this new rectangle is selected and go to Effect > Path > Offset Path. Enter a -2px offset and click OK.

How to Create a Mac Icon in Adobe Illustrator 9

Step 10

Using the Rectangle Tool (M), create a 95 x 60px shape, set the fill color to R=251 G=176 B=64 and place it as shown in the first image.

Switch to the Add Anchor Point Tool (+) and simply add two anchor points as shown in the second image. Again, the Snap to Grid should ease your work.

How to Create a Mac Icon in Adobe Illustrator 10

Step 11

For this step you will need a grid every 1px, so go to Edit > Preferences > Guides & Grid and enter 1 in the Gridline every box.

Grab the Direct Selection Tool (A) and focus on the two anchor points added for that orange shape. Select the left one and drag it 3px down and 15px to the right then select the right one and drag it 3px down and 15px to the left. Once again, the Snap to Grid should ease your work. In the end things should look like in the second image.

How to Create a Mac Icon in Adobe Illustrator 11

Step 12

Make sure that the Direct Selection Tool (A) is still active and focus on the top side of your orange shape. Select the left anchor point and drag it 20px to the right then select the right anchor point and drag it 20px to the left. In the end things should look like in the second image.

How to Create a Mac Icon in Adobe Illustrator 12

Step 13

For this step you’ll need the Round Any Corner script. Save it to your hard drive, return to Illustrator and grab the Direct Selection Tool (A).

Focus on your orange shape, select the two anchor points highlighted in the first image and go to File > Scripts > Other Script. Open the Round Any Corner Script, enter a 3px radius and click OK. In the end your shape should look like in the second image.

Make sure that the Direct Selection Tool (A) is still active and focus on the bottom side of your orange shape. Select the two anchor points highlighted in the second image and go to File > Scripts > Other Script. Open the Round Any Corner Script, enter a 5px radius and click OK. In the end things should look like in the third image.

How to Create a Mac Icon in Adobe Illustrator 13

Step 14

Return to “gridline every 5px “, so simply go to Edit > Preferences > Guides & Grid and enter 5 in the Gridline every box.

Using the Rectangle Tool (M), create a 95 x 20px shape, pick a random color for the fill and place it as shown in the first image.

Select this new rectangle along with your orange shape and click the Minus Front button from the Pathfinder panel.

How to Create a Mac Icon in Adobe Illustrator 14

Step 15

Disable the Snap to Grid (View > Snap to Grid). Reselect your orange shape and make two copies in front (CTRL + C > CTRL + F > CTRL + F).

Select the top copy and move it 1px up using the up arrow button from the your keyboard. Reselect both copies and click the Minus Front button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown in the following image. Simply click on the gradient bar to add a new gradient sliders for your gradient and remember that the white numbers from the Gradient image stand for Location percentage.

How to Create a Mac Icon in Adobe Illustrator 15

Step 16

Reselect your orange shape and make two new copies in front (CTRL + C > CTRL + F > CTRL + F).

Select the top copy and move it 2px up using the up arrow button from the your keyboard. Reselect both copies and click the Minus Front button from the Pathfinder panel. Fill the resulting shape with white, lower its Opacity to 50% and change the Blending Mode to Overlay.

How to Create a Mac Icon in Adobe Illustrator 16

Step 17

Reselect your orange shape and replace the existing fill color with the linear gradient shown in the following image.

How to Create a Mac Icon in Adobe Illustrator 17

Step 18

Make sure that the shape edited in the previous step is still selected, focus on the Appearance panel and add a second fill using the Add New Fill button (indicated by the little, blue arrow in the following image). Select this new fill (from the Appearance panel), change its Blending Mode to Overlay and add the linear gradient shown in the following image. Don’t forget that the white number from the Gradient image stands for Location percentage while the yellow zero stands for Opacity percentage. This simply means that you must select that gradient slider, focus on the Opacity box (from the Gradient panel) and set it to 0%.

How to Create a Mac Icon in Adobe Illustrator 18

Step 19

Make sure that the shape edited in the previous step is still selected, focus on the Appearance, select the top fill and duplicate it using the Duplicate Selected Item button (indicated by the little, blue arrow in the following image). Select this new fill, move to the Gradient panel and simply click the Reverse Gradient button.

How to Create a Mac Icon in Adobe Illustrator 19

Step 20

Enable the Snap to Grid (View > Snap to Grid). Using the Ellipse Tool (L), create a 295 x 10px shape, set the fill color to black and place it as shown in the first image.

Switch to the Convert Anchor Point Tool (Shift + C) and simply click on the two anchor points highlighted in the first image. Make sure that this squeezed shape stays selected and lower its Opacity to 3%.

Go to Effect > Path > Offset Path. Enter a 1px offset and click OK.

Go to Effect > Stylize > Rounded Corners. Enter a 7px radius and click OK.

Go to Effect > Blur > Gaussian Blur. Enter a 7px radius and click OK.

How to Create a Mac Icon in Adobe Illustrator 20

Step 21

Using the Rectangle Tool (M), create a 95 x 10px shape, set the fill color to black and place it as shown in the first image.

Switch to the Direct Selection Tool (A) and focus on the top side of this new rectangle. Select the left anchor point and drag it 15px to the right then select the right anchor point and drag it 15px to the left. This should turn your rectangle into a trapezoid. Make sure that it stays selected and send it to back (Shift + CTRL + [ ).

Focus on the Appearance panel. Select the existing fill, lower its Opacity to 15% and go to Effect > Path > Offset Path. Enter a 1px offset and click OK.

Go to Effect > Stylize > Rounded Corners. Enter a 7px radius and click OK.

Go to Effect > Blur > Gaussian Blur. Enter a 3px radius and click OK.

Return to the Appearance panel and add a second fill for your shape using that same Add New Fill button.

Select this new fill, make sure that the color is set to black, lower its Opacity to 7% and go to Effect > Path > Offset Path. Enter a 1px offset and click OK.

Go to Effect > Stylize > Rounded Corners. Enter a 7px radius and click OK.

How to Create a Mac Icon in Adobe Illustrator 21

Step 22

Finally, you can add the Apple logo. Download one of these free vector logos, copy the path (CTRL + C) and paste it (CTRL + V) inside your document. Resize this new path, make sure that the fill color is set to black, place it as shown in the following image and go to Effect > Stylize > Drop Shadow. Enter the properties shown in the following image, click OK and you’re done.

How to Create a Mac Icon in Adobe Illustrator 22

And We’re Done!

Here is how it should look. I hope you’ve enjoyed this tutorial and can apply these techniques in your future projects.

How to Create a Mac Icon in Adobe Illustrator


Author:

I'm a self taught vector artist trying to make a living doing something that I like. I spend most of my time working in Adobe Illustrator, trying to avoid the Pen Tool. You can find all my vector experiments at this little website dedicate to Illustrator VforVectors.com.


  • Kim Andersson

    I have some additional questions. How do you save it? What is the file-format for the icon and how do you get the transparent background for the icon?