In this tutorial, we’ll go through simple, easy and effective steps for creating a nice leather studded social bookmark icon. There’s a light use of the Pen Tool in the tutorial, but most of it uses Selection Tools and shape tools to create this icon. The idea of writing this tutorial is to make sure that you’ll get familiar with some useful techniques which are otherwise not used. The inspiration for this icon came from the navigation bar in Elegant themes website.

With icons, web designers and graphic artists have a good opportunity to showcase their skills, prove their experience and explore their creativity. There are numerous amounts of icons on the web. A well created, good looking icon set is a great way for designers to showcase their work and it may be a way to build up some reputation in the online community. So, in this tutorial, we will be learning about how to create custom brushes and to a lot about layer styles.

Step 1:

Create a new document with size 500px x500px and fill it with #ab3b29.

Step 2:

Double click on the background layer and press OK to unlock it. Now apply a pattern overlay for that layer. Use the image below for reference. Name this layer ‘ORIGINAL RED’.

Step 3:

Set the blend mode of that pattern overlay to MULTIPLY. The output should be looking similar to this:

Step 4:

This is optional. Right Click on the ‘Pattern Overlay’ effect in the layers palette and click on ‘CREATE LAYER’. This is to individually edit the layer styles. I did this and applied a ‘GAUSSIAN BLUR’ of 1 px to give it a smooth finish. As I said, this is an optional step.

Step 5:

Using the Rounded Rectangular Tool with a radius of about 20px, and the Options set to ‘PATHS’, create a square shaped path as shown below. Now, using the ‘PEN TOOL’, right click on this path and click on ‘Make selection’.

Step 6:

Use 0 px for feather radius and check ‘Anti-aliased’

Step 7:

The output is somewhat similar to this:

Step 8:

Let the selection be active. Now create a new layer and name it ‘LIGHT COLOR’ and using the Paint Bucket tool, paint in this selection with color #b55252.

Step 9:

Now, Place the layer ‘LIGHT COLOR’ under the ‘ORIGINAL RED’ layer and set the blending mode of the latter to ‘SOFT LIGHT’.

Now, CTRL + Click the ‘LIGHT COLOR’ layer and press CTRL + SHIFT + I to invert the selection.

Select the ‘ORIGINAL RED’ layer to make it active and press DELETE Key. The output should look something like this:

Step 10:

At this point, my layers palette looks something like this. I have put all the layer into a group and duplicated it and Merged one of them and name it ‘LEATHER’.
P.S. I forgot to name it.

Step 11:

Now, create a new layer above all the other layers and put the foreground color as #963535 and background color as #b55252 and Fill the layer with the paint bucket tool. Now go to FILTER>RENDER>CLOUDS. The output looks something like this.

Step 12:

Now, set the blending mode of this cloud layer to Soft Light and the opacity to around 60%. Now, remove that part of the cloud layer which does not belong to the actual ‘leather’ layer area. TIP : Repeat second half of Step 9.

Step 13:

Now, Merge the cloud layer and ‘LEATHER’ layer and open layer styles and apply Inner Glow with the following settings

Step 14:

Creating the Stitches:

Open another document with size 500 x 500px and using the rectangular tool with a radius set to around 30px and options set to ‘Shapes’, create a rectangular as shown below. CTRL + Click on the layer to select only the rectangle (running marquee)

Step 15:

Now, go to EDIT > DEFINE BRUSH PRESET. Name it whatever you want and press OK.

Step 16:

Now that our brush is saved, let us come back to our original document and CTRL + CLick on the leather layer and go to SETTINGS > MODIFY > CONTRACT. Use 14 px for the value.

Step 17:

Select Rectangular Marquee Tool(M) and right click on the selection and select ‘MAKE WORK PATH’. Use 0.5 for tolerance. This will create a path (something which can also be done using the Pen Tool).

Step 18:

Now, click on Brush Tool(B) and use the newly created brush (the one we just made) from the toolbox above and press F5 to open the brush settings. Apply the following settings.

Step 19:

Create a new layer, name it ‘STITCHES’. Set the foreground color to White. Now click on Pen Tool(P) and right click on the path and select ‘Stroke Path’

Step 20:

Select Brush with ‘simulate pressure’ unticked

The output must be something like this:

Step 21:

Now, double click the ‘Stitches’ layer and apply the following settings:

Step 22:

I added a blue background to make the icon look better. The final result must look something like this:

Step 23:

Well, we are almost done. Now, get you logo and paste it on the document. I added the RSS logo.

Step 24:

Double click on the logo layer and apply the following setttings.

Step 25:

The output looks something like this.

Step 26:

Now, let us add a shadow to our icon. Underneath the ‘LEATHER’ layer, using the ‘Elliptical shape tool’ create a ellipse as shown below.

Step 27:

Now, let us add a Gaussian Blur Filter from FILTER > BLUR > GAUSSIAN BLUR. Use the following settings.

Well, that’s all folks. Didn’t you enjoy it? Now, you can start putting your own logo and make icons out of it. Well, if you think this is pretty huge and cumbersome process, I have created the social bookmark icon set just for you and have uploaded them  here. So, go and download it. These are under Creative commons license. So, be careful with it :)

Here is how they look. Just click on the download icon below to download them. Please give your opinions and suggestions on this. Download the icons by clicking on the image below:

While saving the psd, i reduced the image size to 64 x 64. It was such a blunder. So, you can still create your own icons but will have to restrict them to 64 x 64 sizes. Will try to create a bigger size and upload it here.

Join online testking 646-671 web designing course to lean how to create artistic designs in photoshop. Get latest testking 70-643 photoshop tutorials and testking 650-195 design guides to learn web designing in your own way.

Related posts:

1. Free Icons : Gold embedded Leather Social Icon Set
2. Create a crumbled paper effect in Photoshop + PSD
3. Create a dark glossy social bookmark icon in 5 simple steps