Tips to create awesome 48×48 pixels icons

Tips to create awesome 48×48 pixels icons

48×48 pixels is the standard size of icons destined to web design projects, along with 32×32 and 16×16 pixels. While to create icons of larger size allow designers to add lots of details and realize realistic illustrations, i.e. 512×512 pixels icons, 48 pixels of width and height oblige icon designers to “simplify” the illustration. Today I gonna show you how to realize an awesome small icon of a graphic tablet. We will start by studying a real tablet, we will understand which are the fundamental details and shapes to re-create into the small icon, and finally I will drive you through the Photoshop steps necessary to realize the icon.

Get unlimited access to 2500+ design resources for only $7! Take a tour or sign-up now.

Preview:

48px icon tutorial

Step 1

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

*Note for Mac users: ctrl=cmd.

48px icon tutorial

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:

48px icon tutorial

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.

48px icon tutorial

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

48px icon tutorial

Step 2

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

48px icon tutorial

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.

48px icon tutorial

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

48px icon tutorial

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.

48px icon tutorial

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

48px icon tutorial

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.

48px icon tutorial

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.

48px icon tutorial

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.

48px icon tutorial

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

48px icon tutorial

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

48px icon tutorial

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.

48px icon tutorial

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.

48px icon tutorial

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.

48px icon tutorial

Step 11

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

48px icon tutorial

48px icon tutorial

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.

48px icon tutorial

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:

48px icon tutorial

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.

48px icon tutorial

Step 14

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

48px icon tutorial

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

48px icon tutorial

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

48px icon tutorial

Step 15

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

48px icon tutorial

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:

48px icon tutorial

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

48px icon tutorial

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:

48px icon tutorial

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.

48px icon tutorial

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.

48px icon tutorial

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

48px icon tutorial

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

48px icon tutorial

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

48px icon tutorial

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 ;-)

48px icon tutorial

Related Posts

high quality vectors

2500+ premium design resources for only $7!

We do the best to provide high-quality products that you can use in your commercial projects.
You bet!

take a tour

Sebastiano

Howdy! I'm a self taught graphic designer who loves to create amazing stuff using every kind of media. I'm currently living and working in Italy.

25 Comments

(+add yours)
  1. Ann

    Great tutorial thanks for this one!

  2. alessandro

    amazing tutorial

  3. Matteo Stifanelli

    Great Tutorial… so simple!

  4. Nice tutorial :)

  5. thanks!!! for the great tutorial
    ……

  6. THis is just what i needed, thank you so much!

  7. Very nice tutorial.
    Useful

  8. ChazUK

    For some reason I thought this was a microwave. Strange

  9. Nice and easy to catch up =) <3 it =)

  10. Shebin Rawther

    awesome tutorial,

    cheers guys :)

  11. dndbot

    Great tut, thank you.

  12. Nice tutorial!

  13. great tutorial.
    thanks for sharing.

  14. Nice work, but I thought for proper scaling etc icons should be realised as vectors…

  15. anon

    definitely a try

  16. Tolly

    Great run-through! Good to know some new tricks as well as some restatement of common-sense rules.

  17. Anton

    Awesome tutorial! Thank you!

  18. PeZiii

    Thaaaaanks =)

  19. Useful tips thanks for sharing

    :)

  20. Serban

    Hey, awsome tutorial. I tried to make one. Here:
    http://i.imgur.com/Gh8vv.png

  21. Caprice Hall

    I would love to know how to create the background in this tutorial!

    • Emilian Roman

      .. It’s actually very easy..

      Make a grey background..

      Take a brush with a dimension of 500px (0% hardness)

      Make a spot in the middle..

      Using the Rectangular Marquee Tool, select around half of the white “circle” you made, and delete it.. :)

  22. Senthil

    I create this for 24 pix icon with less detail, but it is not sharp edge. Is there any option for creating sharp edge icon? Kindly give your feedback.

  23. Excellent goods from you, man. I’ve understand your stuff previous to and you are just extremely excellent. I really like what you have acquired here, certainly like what you’re saying and the way in which you say it.
    You make it enjoyable and you still take care of to keep it wise.
    I cant wait to read far more from you. This is actually a great site.

Leave your comment

© Copyright 2010 WeGraphics.net - All rights reserved. Design and code by WeGraphics Team