The process of making a professional set of social media icons

Many readers have contacted me via e-mail asking for a brief tutorial on how I created Socialiconized – The ultimate social icons pack. And here I am! I will show you some tips useful while working with icons. In particular we will deal with layers organization and pixel simplification. At the end of the tutorial, you will be able to create your own set of icons, in a variety of dimensions, from 48×48 to 16×16 pixels.

Icon design is a great graphics design branch, with lots of designers specialized in this fascinating matter. I’m studying icons design principles and techniques from more than 6 months, and finally I’m working on some unique sets that will reinforce our still rich arsenal of resources. 6 months?!?! Yes guys. Do you think is too much? The reality is that icon design is very difficult to approach for someone, like me, in the habit of working with A3 size documents. Icons need to be concise, self-explained and explicit. All in a few amount of pixels. So don’t consider this like a tutorial on how to create icons, but a brief introduction into the icon design world.

Preview:

Photoshop or Illustrator?

This is the first doubt when approaching icon design: which tool is better, Photoshop or Illustrator? In my opinion, they both have an important rule. The advantage of working with vectors is scalability, but this doesn’t mean that you can create a single icon and simply re-size it to obtain the other items of the group. Icons are designed in according with the pixel dimension they will have once in use. If you create a detailed glossy icon in Illustrator, you can be sure that most of light effects and details can’t be seen in smaller sizes (i.e. 16×16 pixels). On the other hand, you can imagine that it’s not recommended to create a 48×48 pixels icon in Photoshop and then re-size it to obtain a smaller image (larger is not convenient with raster images). You would obtain something like this:

Both Photoshop and Illustrator have advantages and disadvantages. Experience will suggest you which is the best tool to match your needs. In my case, I prefer to use Illustrator to create those forms that can be re-used for future projects (yahoo! logo in this case), and Photoshop to create every icon in its real dimension. Let’s start!

Step 1

Create a new 48×48 pixels document in Photoshop. Since this set is thought for webdesign, a resolution of 72px/inch should work well. But if you want to increase it a little bit, put a value around 80-100 and set 16bit to give more depth to your colors.

Step 2

Since we want to realize a square icon with 1px of stroke effect, we have to create a 46×46 pixels square. Grab the Rectangle tool and, in the option bar, set fixed dimensions:

Step 3

Once created the square, we need to put it in the exactly center of the canvas. So grab the move tool (V) and press ctrl+A to select the entire canvas. You can notice that align options are now active in the options bar (top). Press the “align vertical centers” and “align horizontal centers” button.

Step 4

Its time to add style to the icon. Lets start from colors. We want to create a Yahoo! icon, so let’s visit Yahoo.com for some inspiration. The purple of the logo can be used as the base icon color:

It’s not possible to insert the entire text of the logo into the icon. We need a simpler version of the logo. As suggested by the search icon on the left, the “Y” plus “!” will work well.

Step 5

Right-click on the square thumbnail in the layers window and select “blending options”. The first thing to do is to add a radial gradient, going form the purple of the logo, to a lighter purple (#aa36c7):

Secondly add a 1px stroke using a purple darker (#590070) than the one used for the gradient overlay:

Step 6

Duplicate the square shape layer (ctrl+J), eliminate the style and rasterize the layer (right-click>Rasterize).

Step 7

Ctrl+click on the white square layer thumbnail to select its pixels, then go to Select>Modify>Contract and enter 1px.

Step 8

Hit delete to remove the inner part. Then grab the eraser tool (or add a layer mask), and with a soft brush (hardness 0%) gently erase the bottom of the border just created. Finally reduce opacity to 30%:

Step 9

Click and drag from the ruler to create a horizontal guide and place it in correspondence with the center of the canvas. It will help you to be more precise. Now create a new layer, title it “light half top” and make a selection as shown in the screenshot using the Rectangular Marquee tool:

Step 10

Grab the Gradient tool (G), going from white to empty, and add a gradient into the selection (from bottom to top). Reduce layer opacity to 22%. Finally press ctrl+D to deselect.

Step 11

Zoom in and, always with the Rectangle Marquee tool, make a 1px selection immediately above the stroke at the bottom:

Step 12

Create a new layer and fill the selection using a purple darker (#400051) than the one of the stroke effect. Title this layer “dark bottom”. Its aim is to add soft depth sensation.

Step 13

It’s time to create the logo. Google for the Yahoo! logo, download and open it in Illustrator.

Reduce layer opacity and lock it. Then use the pen tool to create the “T” and the exclamation mark, using the downloaded logo as the reference point:

Here is the logo completed in Illustrator:

Step 14

Copy (ctrl+C) and paste (ctrl+V) the logo in Photoshop as a smart object. Right-click on its layer (always in the layers window) and add a white color overlay and a soft inner shadow:

Step 15

Duplicate the smart object (ctrl+J) and move the duplicated logo below the original one. Modify the blending options: eliminate the inner shadow and add a color overlay of the same purple (#590070) of the stroke of the main shape. Finally click (on your keyboard) once on the top arrow and once on the left one, to move the purple logo 1px to the top and 1px to the left.

Step 16

The 48×48 pixels icon is now complete. Save it in .png format, and consider to save also the Photoshop file before go on. We are at 2/3 of the work. Press ctrl+I and switch image dimensions to 32×32 px:

We will start now the process of polishing the smaller versions of the icon (not so funny!). Zoom in so that all the little bug will be visible and say hello to your new best friend: the Rectangular Marque tool! Here are some of the defects we have to eliminate: the logo is blurred, the 1px bottom line overlaps the 1px inner stroke, light effects do the same on inner stroke on top.

Step 17

Select the dark bottom line layer and grab the rectangle marquee tool. Select the parts of the line that go beyond the limits and hit delete.

Tip: with the Rectangular Marque tool selected, hold down shift to select more areas simultaneously.

Step 18

Do the same with light effects on top:

Step 19

Hide the visibility of the purple logo and focus your attention on the white one. Zoom in. We can make it sharper. Create a new layer above and grab a 1px white round brush. Paint over the canvas but…oops, there’s a problem. Your brush covers more than 1 px:

Step 20

The trick is to use the grid. Go to Photoshop>Preferences>Grid and set 1px for “Gridline every” and 1 for “subdivisions”:

Step 21

Go to View>Show>Grid. Try again to use the brush tool: this time it’s easy . Paint over the “Y” to increase the opacity of those blurred pixels:

Step 22

Select the smart object layer and rasterize it (right click>Rasterize). Use the Rectangular Marquee tool to select and eliminate those pixels in excess:

Step 23

A little bug: the inner shadow. Eliminate it. These details can result obtrusive when working with small sizes. Select the layer of the original “Y” and the layer where you have painted on. Merge them (ctrl+E). You can now duplicate the result layer, move the duplicated below and add a purple color overlay to it (as we made in step 15). Another improvement could be to increase the opacity of light effects, to enhance them a little bit.

The 32×32 pixels icon is now complete. You can see here the difference between the polished version and the one obtained simply re-sizing the original 48x48px icon:

The other two icons, 24×24 and the 16x16px, are realized using the same method. Re-size and eliminate parts in excess. In particular, in the 16×16 px icon, I have eliminated the exclamation mark, preserving only the “Y”. Don’t worry about make the icon more simple. The importance is that it’s always legible.

Here is the final result. I have made some screenshots so you can see the way I modified the 24×24 and the 16×16 icons. Don’t forget that Socialiconized, the icon set composed by160 social media icons, plus thousands of other design resources, can be download for only 7$!

Posted in: The process of making a professional set of social media icons