How to Create an Icon Set using Adobe Photoshop

What You'll Be Creating

In this tutorial, we are going to design a set of icons in Adobe Photoshop. An icon set needs to have the same background and theme. For learning purposes, we are going to design a sun icon, an ice flake icon, and an RSS icon. Let's get started.

1. Preparing the Canvas

Step 1

Start by making a new file with size 350 px × 350 px. Click the small box next to the Background Contents option to change the new canvas color.

Step 2

In the Color Picker dialog box, select grey (#e0e0e2) for the canvas background color.

Step 3

It is always a good idea to keep your work structured from the start. Make a new layer group and name it sun. This is where we will place all layers used in the sun icon.

2. Designing the Icon Base

Step 1

Use the Rounded Rectangle Tool to draw a rectangle with size 83 px × 64 px and 8 px radius. To get accurate results, use the Properties panel. In this panel, you can simply enter the exact size into the input box.

Step 2

Hold Shift and then draw another rounded rectangle. This new shape will be added to the previous shape. Set its size to 36 px × 36 px with radius 3 px.

Step 3

Hit Control-T to perform a transformation, and then click and drag outside the bounding box to rotate it 45°.

Step 4

Make sure the shape is in the middle of the previous shape. In CC 2014, you can test its position by dragging it and snapping it onto the guide in the center of the previous shape.

Step 5

Hit Enter to confirm the transformation result. You may find a confirmation dialog box from Photoshop, informing you that the shape will turn into a regular path. It means that you can no longer edit it using the Properties panel. Just click Yes.

Step 6

Place the shape as in the picture below.

Here's the result at 100% magnification.

Step 7

Draw a similar shape on top of the previous shape which is 1 px smaller. You can do this by duplicating the shape and then modifying its points, or simply by making a new shape.

Step 8

Set its color to #57adf8.

Step 9

Double-click the shape and then apply Stroke and Gradient Overlay using the following settings.

For the gradient, use the following arrangement of colors. To open the Gradient Editor and change the gradient setting, click on the gradient preview box.

Step 10

Reduce the Fill's layer to 11%. The layer content will be transparent and leave the layer styles intact.

This is the result.

3. Icon Shadow

Step 1

Make a new layer underneath the icon base. Activate the Brush Tool and then paint a shadow under the icon.

Step 2

Still using the Brush Tool, add a stronger shadow right under the icon tip.

Step 3

Control-click the smaller icon base to make a new selection based on its shape. Make a new layer and then paint white on top of the selection. Make sure you use a soft brush (0% Hardness)

Step 4

Once you have finished, remove the selection using Control-D and then reduce the layer's Opacity.

Step 5

Make another new layer and get the selection from the small icon base. Fill the selection with gradient from white to black. Change the layer's Blend Mode to Overlay and then reduce its Opacity.

Step 6

Add another new layer. Make a big elliptical selection on the lower part of the icon and then Control-click the small base layer to intersect it. Fill the selection with gradient from white to black. Change the layer's Blend Mode to Screen and reduce its Opacity.

This is the result at 100% magnification.

Step 7

Control-click the icon base layer. Make a new layer on top and then click Edit > Stroke. Set the color to lighter blue and Width: 1 px.

Below, you can see the difference before and after adding a stroke outline into the icon.

Step 8

Add a layer mask into the stroke layer. Fill it with black to hide all the outlines. Paint some parts of the line with white to reveal them. This way, now we have highlight on the icon's edge.

You can see detail of the highlight in the following picture.

Step 9

Add a Color Balance Adjustment Layer above the icon. We are going to use it to change the background's color.

For easier layer management, let's change its layer name to color changer.

Step 10

Fill its layer mask with black. Make a new selection based on the icon's shape, and then fill it with white. This way, the adjustment layer only affects the icon. Drag the sliders to change the color.

Step 11

Duplicate the icon base and change the parameter in Color Balance individually.

4. Add Icon Signs

Step 1

For our first icon, we will add a sun icon. Start by drawing a yellow circle shape.

Step 2

Apply the layer styles Inner Shadow and Inner Glow using the following settings. Use #7b6708 for their color and set both blend modes to Multiply.

Step 3

Paint a lighter yellow on the lower center of the sun.

Step 4

Add an elliptical shape on the upper half of the sun with a brighter yellow for its color.

Step 5

Draw a thin, light-colored shape on the top right side of the sun for its highlight. Delete some of it using a soft eraser to keep it natural.

Step 6

The next process is adding the sun's flame. Start by drawing two yellow triangles as seen below. Place them behind the sun.

Step 7

Select both vector shapes and then duplicate them: Control-C and then Control-V. Rotate the new shapes 45°.

Step 8

Keep duplicating and rotating until we have a full circle set of flames.

Step 9

Apply Inner Shadow with color #b48f0b and Outer Glow with color #f9dc7e.

 

Step 10

To help us, the sun is now hidden from view. Draw more yellow triangles as seen below.

Step 11

Add a circular shape on the center of the triangles and set its path mode to Subtract.

We're done, so let's bring back the flare and sun shapes.

Step 12

To get a realistic sun, we need to paint a blurry yellow circle shape behind the sun. You can draw it manually using a soft brush, or draw a circle first and then soften it using a Gaussian Blur filter.

Step 13

Double-click the icon group layer to add a layer style. Add an Inner Glow with black for its color and blend mode Multiply.

With this layer style, we have added a dark silhouette to the icon.

Step 14

Next, we are going to add an RSS symbol inside the icon. Start by drawing a circle shape on top of the icon base.

Step 15

Duplicate and then paste the path (Control-C, Control-V). Hit Control-T and then transform it into a smaller shape. Set its mode to Subtract Front Shape.

Step 16

Duplicate the path and make it smaller. Set its mode to Combine Shapes.

Step 17

Keep repeating the steps until you have the following shape.

Step 18

Add two rectangles and set their mode to Subtract Front Shape. See the picture below to know their position.

Step 19

Double-click the RSS symbols and then apply Inner Glow, Gradient Overlay, and Drop Shadow.

Here's the result at 100% magnification.

Step 20

Next we'll add a snowflake symbol into the third icon. Activate the Custom Shape Tool and load the Nature vector shapes set from the Option Bar.

A warning dialog box will appear, asking you to either replace or add the Nature vector shapes theme into the already existing shapes. You can click OK.

Step 21

Select the Snowflake shape from the drop down list.

Step 22

Click and drag to draw a snowflake symbol on top of the icon.

This is the result at 100% magnification.

Conclusion

As seen in this tutorial, designing an icon set is not so difficult. Before working on drawing the symbol, you need to prepare for the overall theme. In this case, the icon is placed on a rounded rectangle shape and a triangle. I hope you enjoyed the tutorial and learned something from its steps.