Create a dark glossy social bookmark icon in 5 simple steps

Richie

Everyone loves social bookmarking. Whether it is tweeting, or sharing a link in facebook or even showcasing design works in flickr.Well, there are almost thousands of icons out there patiently waiting for us to use them.

The difficulty in designing web graphics is not so much in the actual execution of the design, but more in the planning of it and the process of learning new things. At the same time you want the design to be eye-catching, yet smooth and small enough so it doesn’t dominate your layout. So, i decided to create some fancy, dark and glossy icon inspired by the iPhone app, Tweetie. In this article, I have written a tutorial on how to create them. It is very simple and can be finished in minutes. I also have uploaded the icon set in 128 x 128 and 64 x 64 sizes.

So, let us get down to business.

Step 1 :

Open Photoshop and Create a new document with size 500px x 500px. Select Rounded Rectangle Tool as the shape (from the Custom Shape Tool) and with radius of 30 px, draw a square (holding Shift) as shown below. Make sure ‘Shape Layers’ is selected.

Step 2:

Right Click on the rectangle layer (just created) on the ‘Layers Palette’ and click on Rasterize Layer. Now we need to apply a few layer styles. So, double click on the rectangle layer and the layer style window will open.

Apply Gradient overlay with settings as shown below. The gradient varying from #818388 to #dcdfeb.

Step 3:

Now for the actual logo/icon. Let us create the Gtalk icon. Go to Custom Shape tool and select custom shape and from the toolbar above, select the custom shape1 from the talk bubble category.

Step 4:

Draw a talk bubble on the rectangle as shown below. Don’t worry about the color, it will be unnecessary as we shall be applying gradient overlay.

Step 5:

Now, we shall apply the layer styles to the logo/icon. This is the ultimate step. After these, its all about experimenting with different colors and reflection and stuff.

First, let us apply the Gradient Overlay like we did for the rectangle. Don’t forget to Rasterize the logo layer before applying the layer stlyes. Use the settings as shown below. The gradient runs from #4b505b to #2c303b.

Inner Shadow :

Outer Glow:

Now select the Rectangle Layer from the layer palette and double click to open the layer styles and apply Inner Glow:

Step 6 :

Presto! it is done. Now, for the finishing touches. Let us add a gloss to our icon.

Create a new Layer and select the Elliptical Marquee tool and draw a huge ellipse such that the upper region of the icon is selected within the lower part of the ellipse. Use the below image as reference.

Step 7:

Select the gradient tool and set the the gradient as White (#FFFFFF) to Transparent and Drag the gradient from center to the top as shown below.

You should be getting an image similar to this :

Step 8:

Now comes the important part. Make sure you get this right. Select the gradient layer and CTRL + select the rectangle layer. We need to do this to erase the gloss gradient which is not the part of the rectangle. After you’ve done with the above said selection, Go to Select >> Inverse or SHIFT + CTRL + I to invert the selection. Now, your image should look something like this :

Press Delete to delete the unwanted part of the gloss and finally your image will look like this:

So, there you go, the icon is ready to be used. You can even go further by adding more detail. CTRL + click on the gloss layer just created so that the selection appears around it and go to Select >> Modify >> Contract and set the radius as 2 pixels as shown below :

Now, Invert the selection (SHIFT + CTRL + I) and press Delete. Finally, icon is ready with a neat shine. Have fun.

Hope you guys liked the tutorial. It is very simple and looks really good and shiny.

I have created a set of social bookmark icons and have uploaded them. I have also included the PSD file hoping to make your job easier. Please download them and provide valuable suggestions. Thank you.