Tips to create awesome 48×48 pixels icons

Preview:

Step 1

Let’s start by observing photos of real graphic tablets. My reference is my Wacom Intuos:

*Note for Mac users: ctrl=cmd.

Take in mind that we have to represent this tablet in 48×48 pixels. The first thing to do is to define the fundamental shapes that compose the tablet. There’s a first rectangular shape:

Then there are two other rectangular shapes: the right area with the active area of the tablet in, and the left area with the buttons.

Finally there are the control buttons on the left and the active area on the right…and the pen, of course.

Step 2

Now that we have defined the main shapes, we can start working in Photoshop. Create a new 48×48 pixels new document.

Step 3

Grab the Rectangular Marquee tool and make a selection, having in mind the first shape of step1. There’s a reason if my selection doesn’t cover all the 48px width of the canvas, but there is 1px left on each side: we are going to play with shape’s blending options, that we will use to add a 1px stroke effect in the next step.

Press alt+delete to fill the selection with the foreground color, black in this case. Then press ctrl+D to deselect.

Step 4

Right-click on the layer thumb and select blending options. The first style to add is a gradient overlay. We need to add depth to the shape. The trick is to make the top and bottom areas darker, while the center lighter.

Then let’s add a 1px stroke effect (#494949).

Step 5

We have to realize the left shape. So zoom in, create a new layer, grab the Rectangular marquee tool and, as we made in step 3, create the second shape.

Step 6

Open the style window and add a gradient overlay. The concept is the same of the main shape: darker near the top and bottom areas, and lighter in the center. Colors are #060606 and #494949.

Step 7

We are going to create the buttons on the left. From the real picture, you can notice a round button and 2 lines of rectangular buttons. As I explained at the beginning, while working in 48px it’s fundamental to make the icon essential. There are details that can be lost, the importance is that users will recognize what the icon represents.

Since there’s no space for all those buttons, we will create 3 rectangular buttons and a circular one. Create a new layer for each button and, with the help of the Rectangular Marquee Tool and the Elliptical Marquee Tool, create 4 new shapes.

Step 8

Let’s add the same style to all the shapes: a gradient overlay going from a dark grey (#5a5a5a) to a lighter one (#9e9e9e).

Then add a 1px black (#000000) stroke effect with opacity 35%.

Here are all the buttons with the styles applied. You can notice how the stroke effect helps to enhance the buttons, while the gradient color gives the illusion of depth.

Step 9

To separate the left area from the right one, let’s create a 1px white line, always with the Rectangular Marquee tool. While working with so small sizes, 1px lines will become your best friends. They are often used to separate areas and to create engraved end embossed effects, as I will show in the following steps.

Step 10

Create a new layer and, always with the Rectangular Marquee tool, make a selection and fill it. The color is not important because we are going to apply the styles. Maybe you are more comfortable to draw shapes directly using the Rectangle tool. Well, it’s ok! I prefer to start with selections and then fill them because they give me the sensation to have more control on lines and shapes. It’s just my habit.

Step 11

In the blending options window, add a grey color overlay (#575757) and a black inner shadow.

Step 12

Duplicate the layer of the active area of the tablet, and move the duplicated layer below the original one. Hit once the right and down arrows on your keyboard to move 1px down and 1px to the left the shape. Then add a white color overlay and reduce the layer opacity to 20%. As I wrote before, 1px lines, if put in the right position, can create an engraved effect.

Step 13

Duplicate again the layer of the active area, then eliminate all the styles to have a clean black rectangle. Go to Filter>Noise>Add Noise and enter the following values:

Set the layer blend mode to screen with opacity 20%. The aim of this step is to add a textured effect to a specific area of the icon.

Step 14

The last detail is the pen. Draw a thin rectangle with the Rectangle tool.

Then press ctrl+T to activate the Free Transform Tool and rotate a little bit the shape.

Add a gradient overlay going from #2e2e2e to #6b6b6b.

Step 15

With the Pen tool (P) in “Shape Layers” mode, draw the point of the pen.

Step 16

To make to top of the pen rounded, zoom in an make a selection with the Elliptical Marquee tool, as shown in the screenshot below:

Then create a new layer and fill the selection with the same grey (#6b6b6b) of the top of the pen.

Step 17

Another important detail is the shadow of the pen. Select al the pen layers and press alt+ctrl+E to merge them into a new layer. Move this layer below the original pen and open the blending options window. Here add a drop shadow:

Step 18

We could stop here, the icon looks cool and sharp. Anyway, for those who love light effects, here is another – the last – step.

Create a new layer – below the pen layers -, grab the Rectangular Marquee tool and make a selection of the main shape, except the stroke effect.

Fill the selections with white, then deselect by pressing ctrl+D.

With the Pen tool in Path mode, draw a path as shown below:

Press ctrl+Enter to activate the selection, the hit delete and reduce opacity to 10%. Remember to deselect (ctrl+D).

Finito! We’ve so create an awesome graphic tablet small icon! Once learned the technique, you can realize your set. Remember the importance of observing the reality before working in Photoshop. For any doubt or criticism, use the comments ;-)