Step: 1

Create a new document of size 16 X 16 px and transparent background.

Step: 2

Zoon it to maximum. Select a color and using pencil tool make some design.

Step: 3

Save the icon as favicon. ico Your favicon icon is ready.
You can link this favicon in your website by adding below code before tag.

<link rel="shortcut icon" type="image/ico" href="favicon.ico" />

Final Preview

Before I start the tutorial, let’s see the final image of the social icons that we will design in this tutorial.

Step 1:

Create a new document of size 350 X 350px and transparent background.

Step 2:

Select rectangle tool.


Press and hold SHIFT key and draw a square shape in color #d7d7d7 as shown below.

Now Rasterize this square shape layer.

Step 3:

Select brush tool with following settings.

Step 4:

Load square shape.


Right click and select “Make Work Path..”

Step 5:

Select Pen tool. Right click again and select Stroke path >> Eraser





And then delete the path.


It looks like this now.

Apply following layer style to this shape.

Step 6:

Select Rectangle tool again. Create a new layer and draw another square shape in color #e7f3f9 as shown below.

Step 7:

Create a new layer and paste a social icon. Like here I am pasting twitter icon.

Step 8:

Now rotate all layer as shown below.

Step 9:

Create a new layer. Select Ellipse tool, and draw a elliptical shape in black color as shown below.


Apply Gaussian blur (Filter >> Blur >> Gaussian Blur) so it looks like a shadow.

Step 10:

So, our first social icon, Twitter icon is ready. Now just replace twitter icon by another social icons to make other social icons.

Below you can download PSD and PNG files of social icon set.

Final Preview

Before I start the tutorial, let’s see the final image of the social icons that we will design in this tutorial.

Step: 1

Create a new document of size 400 X 400px and transparent background.

Step: 2

Select rectangle tool and draw a shape as shown below.


Apply following layer style to this rectangle shape layer.






So, it looks like this now.

Step: 3

Select brush tool with soft rounded shape of 300 px master diameter.


Select white color and apply brush once on this rectangle shape.

Step: 4

Select Polygonal Lasso Tool


And select right bottom corner.


Rasterize the rectangle shape layer and cut the selected part (CTRL + X)

Step: 5

Create a new layer, paste the cut part as shown below.


Apply following layer style to this paste part.




So, it looks like this now.

Step: 6

Paste a social icon. Here I am pasting twitter icon.


Apply following layer style to twitter icon layer.




So, it looks like this now.

Step: 7

Load icon shape.


Using elliptical marquee tool, select upper half as shown below.


Create a new layer, and fill the selected part with #fff color.


Change layer mode to Soft Light and opacity to 20%. So, it looks like this now.


Our first social icon is ready. Now we will only change social icon, and make other social icons.

Below you can download PSD and PNG files of social icon set.

Final Preview

Before I start the tutorial, let’s see the final image of the social icons that we will design in this tutorial.

Step: 1

Create a new document of size 512 X 512px and transparent background.

Step: 2

Select “Rounded Rectangle Tool” with 15px radius.


Create a new layer and name it as “Face One”. Press and hold SHIFT button and draw a shape as shown below using color #9b9b9b

Step: 3

Make a duplicate layer of “Face One” layer and name duplicate layer as “Face Two”. Change color of Face Two shape to #3e3e3e Move Face Two shape equally little top and left as shown below.

Step: 4

Using CRTL button select both Face One and Face Two layers. Free transform the layers using CTRL + T or (Edit >> Transform). Now rotate the shapes as shown below.

Step: 5

Create a new layer between Face One and Face Two layers and name new layer as “Bottom Corner”. Select “Pen Tool”

Using pen tool make a triangle path in left bottom corner as shown below.


Now right click and select “Fill path”.


Fill it using color #9b9b9b (Its same color we used for Face One shape)


Right click again and this time select “Delete Path”.

It should look like this now.

Step: 6

Create a new layer just above “Bottom Corner” layer and name it as “Top Corner“. Repeat step 5 to make top right corner. It should look like this now.

Step: 7

using CTRL button select Face One, Bottom Corner and Top Corner layers.


Now right click on any layer and select “Merge layers“.

Step: 8

Rename mered layer as “Bottom Face“. Press and hold CTRL button and click on “Bottom Face“ layer. This will load “Bottom Face“ layer.

Step: 9

Set foreground color to #ad8c2b and select Gradient tool with “Foreground to Transparent“.

Step: 10

Apply radial gradient in corners and Reflected Gradient in center. It should look like this.


Apply following layer style to this shape.

Step: 11

Select Face Two Layer and apply following layer style.




It should look like this now.

Step: 12

Create a new layer and name it as icon. Paste the icon which you want to make, like here I am pasting a Twitter icon.


Apply following layer to icon layer.




It should look like this now.

Step: 13

Load Face Two layer.


Create a new layer and name it as Glow. Select Elliptical marquee tool with Intersect with selection.

And make a selection as shown below.


Fill the selection with white color and change its layer mode to soft light and opacity to 30%.
It should look like this now.

Our first icon is ready. Now just change icon to make other social icons like RSS, Facebook, Digg etc

Difficulty: Easy
Completion time: 10-15 minutes.
Tools: Adobe Photoshop

Final Preview

Before I start the tutorial, lets see the final image of the search social icons that we will design in this tutorial.

Step 1:

Create a new document of size 512 X 512 px and transparent background.

Step 2:

Create a new layer and name it as Search Shape. Select “Custom Shape Tool”


Under web section select search shape.


And draw a search shape in color #646464


Apply following layer style to this search shape.

It should look like this now.

Step 3:

Select gradient tool with with Reflected Gradient mode and foreground color set to #878686.

Now select only handle part of search shape and apply a small gradient.

Step 4:

Create a new layer just below “Search shape” layer and name it as inner circle. Select “Ellipse Shape Tool”.


With SHIFT key pressed, draw a circular shape in color #799cb9 just inside the search shape.


Apply following layer style to “Inner Circle” layer.




It should look like this now.

Step 5:

Load inner circle shape and than using marquee tool, make a selection as shown below.


Create a new layer just above “Inner Circle” layer and fill the selection with white color. Change layer mode to “Soft light” and opacity to 30%. It should look like this now.

Step 6:

In this step we will add shadow. Using elliptical shape tool draw a shape in black color as shown below.


And now apply Gaussian Blur (Filter >> Blur >> Gaussian Blur) of 4 px radius to elliptical shape. Free transform (CTRL + T) the shape and stretch to both side.


Change opacity of shadow layer to 50-60%. Our Magnifying / Search icon is ready.

License

Free for personal and commercial use. No attribution is necessary.

Below you can download PSD file and PNG file of the search icon in 512, 256, 128, 64, 32 px size.

I hope you licked the tutorial.

Preview

Below is preview of rss icon from “psyag – Blue Carbon Social Icon” set.

License

Free for personal and commercial use. No attribution is necessary.

Download

below you can download all 22 “psyag – Blue Carbon Social Icon” set in 256 px size.

Difficulty: Easy
Completion time: 10-15 minutes.
Tools: Adobe Photoshop

Final Preview

Before I start the tutorial, lets see the final image of the MySpace social icons that we will design in this tutorial.

Step 1:

Create a new document of size 300 X 300 px and transparent background.

Step 2:

Create a new layer and name it as Square. Select “Rounded Rectangle Tool” with 10 px radius.

Press and hold SHIFT key and draw a rounded corner square in #093f61 color.

Apply following layer style to Square layer.




It should look like this now.

Step 3:

Press and hold CTRL key and click on Square layer. This will load Square layer.


Now create a new layer and name it as Glow. Select Brush Tool with a soft brush and 270 px master diameter.


With #6ba0c1 color click once on top of square shape.

Step 4:

Create a new layer and name it as Glow 2. Select Elliptical marquee tool with Intersect with selection

And make a selection as shown below.

Fill the selection with white color and change its layer mode to soft light and opacity to 30%.
It should look like this now.

Step 5:

Create a new layer and name it as “Buddy One Face“. Select Ellipse Tool

Press and hold SHIFT key and draw a circular shape in white color.

Step 6:

Create a new layer and name it as “Buddy One body“. Select “Rounded Rectangle Tool” with 30px radius.


Draw a shape just in white color below face shape as shown below.


Right click Buddy One body layer and select “Rasterize Layer”


Select lower end of Buddy One body layer and delete it using DEL key.
It should look like this now.

Step 7:

using CTRL key select Buddy One face and Buddy One body layers. Now right click on any layer and select “Merge layers“.


Rename mered layer as “Buddy one“.
Apply following layer style to Buddy one layer.




It should look like this now.

Step 8:

Create two duplicate layer of Buddy one, resize them and place them in left. Our MySpace Social Icon is ready.


I hope you liked the tutorial. Below you can download PSD file and PNG files of social icons

Difficulty: Beginner
Completion time: 20-30 minutes.
Tools: Adobe Photoshop

Final Preview

Before I start the tutorial, lets see the final image of the social icons that we will design in this tutorial.

Step 1:

Create a new document of size 512 X 512px and transparent background.

Step 2:

Create a new layer and name it as “First Face“. Select “Rounded Rectangle Tool” with 15px radius.

Press and hold SHIFT key and draw a rounded square shape in color #e4cf9d

Step 3:

Make a duplicate layer of First Face layer and name duplicate layer as “Second Face“. Change color of Second Face shape to #db9736 Move Second Face shape equally little right and bottom.

Step 4:

Using CRTL key select both First Face and Second Face layers. Free transform the layers using CTRL + T or (Edit >> Transform)

Now right click and select “Perspective“.

Drag middle right point to little upward.

It should look like this now.

Step 5:

With both First Face and Second Face layers selected, again free transform both layers CTRL + T and then right click and select “Perspective“.
This time drag top right point to little right side.

It should look like this now.

Step 6:

Create a new layer between First Face and Second Face layers and name new layer as “Bottom Corner“. Select “Pen Tool“.


Using pen tool make a triangle path in left bottom corner as shown below.


Now right click and select “Fill path”


And fill path with color #e4cf9d (Its same color we used for First face shape).

After filling, right click again and this time select “Delete Path”

It should look like this now.

Step 7:

Create a new layer just above “Bottom Corner” layer and name it as “Top Corner“. Repeat step 6 to make top right corner. It should look like this now.

Step 8:

Select Second Face layer and apply following layer style to Second Face layer.

It should look like this now.

Step 9:

using CTRL key select First Face, Bottom Corner and Top Corner layers.


Now right click on any layer and select “Merge layers“.


Rename mered layer as “Back Face“.
Apply following layer style to Back Face layer.




It should look like this now.

Step 10:

Press and hold CTRL key and click on Back Face layer. This will load Back Face layer.


Set foreground color to #ad8c2b and select Gradient tool with “Foreground to Transparent“.


Press and hold SHIFT key and drag mouse from top right corner to slightly left side to apply gradient.


Similarly apply gradient in left bottom corner.

Now set foreground color to white and gradient type to “Reflected Gradient“.


Apply gradient in top left corner.


It should look like this now.

Step 11:

Create a new layer and name it as icon. Paste the icon which you want to make, like here I am pasting a RSS icon.


Apply following layer style to icon layer.

It should look like this now.

Step 12:

Create a new layer just above Background layer and name it as Shadow. Using Pen Tool make a path and fill it with black color as shown below.


Apply motion blur (Filter >> Blur >> Motion Blur) to “Shadow layer” with -27 angle.


Our one social icon, ie. RSS icon is ready.

Just change icon and make other social icons.

I hope you liked the tutorial.

License

Free to use for personal and commercial use. Everyone is free to distribute it. A kind request, please put a link back to our site as source.

Below you can download PSD file and PNG files of social icons.

Final Icon

Before I start the tutorial, lets see the final image of the folder icon we will design in this tutorial.

Step 1:

Create a new document of size 256 X 256 px and transparent background.

Step 2:

Create a new layer and name it as First Face. Select “Rounded rectangle tool” with radius 10px and set color to #353434

Draw a rounded rectangle shape as shown below.

Step 3:

Create a new layer and name it as second Face. Select “Rounded rectangle tool” with radius 10px and set color to #353434 Draw a small round shape in top left as shown below.

Step 4:

Using CTRL key select both First Face and second Face layer and merge both layers. Rename merged layer to Face three.

Apply following layer style to Face three

So, it looks like this now.

Step 5:

Press and hold CTRL key and click on Face three.
This will load the rounded rectangle shape.

Contact the selection by 2 px. (Select >> Modify >> Contract).

Step 6:

Create a new layer. Select Elliptical marquee tool with subtract from selection.

Now select lower half of the selection.

Only upper part will be selected.

Create a new layer and name it as Top Half. Fill the selection with #ffffff color.

Change layer mode of Top half layer to “Soft light” and opacity to 15%

So, it looks like this now.

Step 7:

Using CTRL key select both Face three and Top half layer and merge both layers. Rename merged layer to Face four.

Step 8:

Duplicate layer Face four and rename duplicate later as Face five.

Step 9:

Free transform Face five layer (CTRL + T). Right click and select Perspective.

Slightly drag top right point to right side as shown below.

So, it looks like this now.

Right click again and this time select “Scale”.

And scale the shape little down. So, it looks like this now.

Step 10:

Create a new layer between Face four and face five layer and name it as icon. Place a nice looking icon on this layer.

Change opacity of “Face five” layer to 80-90%.
Our folder icon is ready.

Hope you liked the tutorial.

Final Icon

Before I start the tutorial, lets see the final image of the briefcase icon we will design in this tutorial.

Step 1:

Create a new document of size 512 X 512px and transparent background.

Create a new layer and name it as Briefcase Body. Select “Rounded rectangle tool” with radius 20px and set color to #85450f

Draw a rounded rectangle shape as shown below.

Apply following layer style.

So, it looks like this now.

Step 2:

Press and hold CTRL key and click on Briefcase body layer.

This will load the rounded rectangle shape.

Create a new layer. Select Elliptical marquee tool with Intersect with selection.

Now select upper half of the rectangle shape.

Only upper half will be selected.

Create a new layer and name it as Top Half. Fill the selection with #995316 color.


Apply following layer style to this shape.

So, it looks like this now.

Step 3:

Create a new layer and name it as “Lock”. Select “Rounded rectangle tool” with radius 10px and set color to #cbcbca


Draw a rounded rectangle shape as shown below.

Apply following layer style to lock layer.

So, it looks like this now.

Step 4:

Create a new layer just below “Briefcase body” layer and name it as “Handle”. Now select “Rounded Rectangle tool” with 20px radius and “paths”.

Make a path as shown below.

Now select “brush tool” and set master diameter to 19px.

Now again select “Rounded rectangle tool” and set color to #64330b
Right click and select “Stroke Path”.

Select “brush” and click OK button.


So, it looks like this now.

Apply following layer style from blending options to handle layer.

So, it looks like this now.

Step 5:

Now we will add a small shadow at bottom of briefcase. Create a new layer and name it as shadow. select “Ellipse tool” and draw a elliptical shape in black color just below the briefcase as shown in below image.

Apply Motion Blur (Filter >> Blur >> Motion Blur).

And now apply Gaussian Blur (Filter >> Blur >> Gaussian Blur).

Free transform (CTRL + T) the shape and stretch to both side.


Change opacity of shadow layer to 70%. Our Briefcase icon is ready.

Icon License

Free to use for personal and commercial use. Everyone is free to distribute it. A kind request, please put a link back to our site as source.

Below you can download PSD file and PNG file of the icon.

Hope you liked the tutorial.