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.

Final Design

Before I start the tutorial, lets see the final image of the discount tag 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 Lower. Select “Rounded Rectangle Tool” with 6 px radius.

With #c7591f color draw a round rectangle shape as shown below.

Step 3:

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

Under Shapes, select solid triangle custom shape.

With same color i.e #c7591f that we used for round rectangle shape draw a triangle at top of rectangle shape.

Step 4:

Using CTRL key select Lower Layer and Upper Layer and merge both layer. Name merged layer as Tag Body.

Apply following layer style to Tag Body layer.

It should look like this now.

Step 5:

Select “Burn Tool” with 45px brush size and #000000 color.

Apply burn around the edges.

Step 6:

Select “Elliptical Marquee Tool“.


Press and hold SHIFT key and make a uniform circular selection at top of the “Tag Body” Layer.

Press DEL button to delete the selection part.

Create a new layer and name it as Hole.
Now right click and select Stroke.

And stroke the selection with #833b01 color and 3px width.

Apply following layer style to Hole layer.


It should look like this now.

Step 7:

Create a new layer and name it as Text Box. Select “Rectangle Marquee tool” and make a rectangle selection as show below.

Now right click and select Stroke.

Stroke the selection with 2px width and white color.

It should look like this now.

Step 8:

Create a new layer and name it as “Discount Text“. Using text tool write some offer text within the box. Text color should be white and it should be centered within the box.


Add few more text below the box as last date of discount.

Step 9:

Select all layers except background layer using CTRL key.

Free transform all layer using CTRL + T.


Now rotate it to make like this.

Step 10:

Create a new layer and name it as Thread. Select “Pen Tool“.


Using Pen Tool make a path as shown below.


Now stroke the shape with brush tool set to 3px master diameter and black color. After stroking, right click and delete the path. So, it looks like this now.

Similarly make another thread.

Step 11:

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


And now apply Gaussian Blur (Filter >> Blur >> Gaussian Blur) to elliptical shape.


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


Change opacity of shadow layer to 50%. Our Discount Tag is ready.

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 discount tag.

Step 1:

Create a new document of size 900 X 400px with background color #23a1c0 You may take different size as per your requirement.

Step 2:

Apply some noise to background. Filter >> Noise >> Add Noise >> Amount: 4

Step 3:

Select “Rectangle tool”.

With color set to #086380 draw a rectangle shape leaving a margin of about 50px from all 4 sides.
Hint: Use Guides (View >> New Guide) to leave equal margin from all 4 sides.

Step 4:

Now we will transform the rectangle shape. With rectangle shape layer selected, Go to:
Edit >> Transform >> Warp
And apply following transform.

Step 5:

Now apply following layer style to rectangle shape layer.

Step 6:

Create a new layer and draw a rectangular shape with color #075f7c as shown in below image. Change layer mode to “Multiply”.

Now apply following layer style to this rectangle shape.

So, it looks like this now.

Step 7:

Create a new layer just above “Background layer”. Select “Ellipse Tool”. With black color draw a elliptical shape as show below.

Apply warp transform Edit >> Transform >> Warp, same as we did in step 4. So, it looks like this now.

Apply Filter > Blur > Gaussian blur

So, it looks like this now:

Step 8:

Now we will add arrow on both sides using custom shapes. Use color #015368 for arrow. You may apply some layer style to arrow shape to make it attractive.

So, our featured post background is ready.
Below is final image.

Step 1:
Create a new document sized 700 x 250px with transparent background.
Create a new layer named “white background”, Select “Rectangle Tool” from the toolbox:

Draw a rectangle shape using white color. Leave around 20px margin from both left and right side.

Step 2:
Create a new layer named “grey background”, Select “Rectangle Tool” from the toolbox and draw a rectangle shape as shown below. Use color #ebeaea and leave 8 px margin from left side and about 35 px margin from right side.

Apply following layer style to “Grey Background” layer.

You should get something like this now:

Step 3:
Create a new layer named “left border” just below “Grey background” layer. Select “Pen tool” and draw a triangular path as shown in below image. Fill the triangle path with #000000 color and after filling, delete the path.

Step 4:
Create a new layer named “shadow” just below “Grey background”. Again using “pen tool” draw a black triangle shape.

Apply “Gaussian Blur” (Filter >> Blur >> Gaussian Blur) with radius 10 px.
You should get something like this now:

Now free transform the shape (CTRL + T) and stretch it both the side to get like this.

Step 5:
Create a new layer named “ Dark grey background”. Select “Rectangle Tool” from the toolbox and draw a shape as shown below. Use #727272 color and leave about 7px margin from top, bottom and right side.

Apply following layer style to “Dark grey background” layer.

You should get something like this now:

Step 6:
Hold “CTRL” key and click on “Dark Grey background” layer. This will load the grey background shape.

Now select “rectangular marquee tool” and remove about 200 px selection from left side.

On rest selected area, paste a image related to your post. Its similar like post thumbnail image. I am just using a random image.

Step 7:
Select “text tool” and type post information like “Post date”, “category”, “Author” in left of thumbnail image.

And again type post title using following text style.
Font style: verdana
Font weight: Bold
Size: 24
color: #2f2f2f

This is final image of the post title.

I hope you like the tutorial. below you can download PSD file.

So, lets start.
Step 1:
Create a new document (File >> New) with white background and of about 600px X 225px
Rename this layer as “Background”.

Step 2:
Create a new layer and rename it to “nav”. Select “Rounded Rectangle tool” with 3px radius and draw a rectangle shape for navigation bar body. Color of navigation bar body should be #dedede

And apply following layer style.

It should look like this now:

Step 3:
Press and hold CTRL key and click on “Nav” layer. this will load nav layer shape.

Contract the selection by 3px (Select >> Modify >> Contract).
Select “Rectangular Marquee Tool” with “Intersect with selection” and select upper half of the selection.

Create a new layer and fill the selection with white color. Change layer mode to “Soft Light” and opacity to 25%.
So, it looks like this now:

Step 4:
Create a new layer, select “Rounded Rectangle tool” with 3px radius and draw a shape of color #c05703 for active menu. This shape will be used as an active button. As you can see the below image, I have place the button on the top navigation bar.

Apply following layer style to active button shape.

This is my result so far.

Step 5:
Create a new layer, just above background layer. Select “pen tool” and draw a triangle shape and fill the shape with color #7d3809. Place it like in the following image.

Step 6:
Select “Text Tool” and type some text as links. Our navigation bar is ready. Below is the final image.

Step 1:
Create a new document, roughly about 600 px by 400 pixels, with white background. Fill the layer with #4c4c4c color using “Paint bucket tool”.

Step 2:
Create a new layer and name it “block boly”. Select “Rectangle Tool” and create a rectangle shape with #303030 color as shown below.

And apply following layer style to this shape.

Step 3:
Create a new layer but below “block body”. select “Pen Tool” and draw a shape as shown below with black color.

Now go to Filter >> Blur >> Gaussian Blur, and use a value of 12 in the radius field. Our block now look like this.

Free transform this layer using “CTRL + T” and stretch the shape to both left and right side to get desired look.
This is final image of the block.

I hope you like the tutorial. below you can download PSD file.

Step 1:
Create a new document (File >> New)


Select gradient tool. Set foreground color to #696a6a and background color to #9a9a99
Press and hold shift key and drag mouse from top to bottom.
Now background looks like this:


rename this layer as “Background“.
Create a new layer (Layer >> New >> Layer). Rename this layer as “Square“. Select “Rounded Rectangle tool” with 15px radius and set color to #bac014
Press and hold SHIFT key and draw a rounded square shape.


Right click “Square” layer and select Blending options. Apply following layer style to this rounded square shape.




Now our button looks like this:

Step 2:
Create a new layer. Rename the layer to “Ribbon“. Select “rectangle Tool” and set color to #023a5d
Draw a shape as show below.


Go to Edit >> Free Transform. And place as shown below.


Press and hold CTRL key and click on ribbon layer. This will load ribbon shape. Select “rectangular Marquee Tool” and select one end as shown in below image.


Press DEL key to delete the selection. Similar delete extra parts from other end.


Right click Ribbon later and select blending options. Apply following layer style to ribbon layer.




now our button looks like this:

Step 3:
Create a new layer just above background layer. Select “rectangle Tool” and set color to black. Draw a small shape at left end of ribbon, as shown below.


Similarly add another black shape on other end of ribbon.

Step 4:
Create a new layer. Select “text tool” and set color to white. Write some text. Use “Free Transform” to rotate the text and place the text just over the ribbon.


Step 5:
Create new layer. Select text tool and type PSYAG with white color


Apply following layer style to this text layer.




Now button looks like this:


Step 6:
Press and hold CTRL key and click on the “Square” layer. This will load rounded square layer.


Go to Select >> Modify >> Contract and contract the selection by 3px
Select “Rectangular Marquee tool” and make a selection as shown below.


Set foreground color to #4d2000 and background color to #943e00 Press and hold SHIFT key and drag mouse from top to bottom of the selection.


Step 7:
Create a new layer. Select text tool and type some text over below shape. Our button is ready. Below is the final image.


I hope you like the tutorial and you have not faced any trouble in understanding the tutorial.
Download PSD File FREE

Step 1:
Create a new document. File >> New

Now we will add a gradient background color. Select Gradient tool. Set foreground color to #8fb107 and background color to #adce26
Press and hold shift key and drag mouse from top to bottom. Background will look like this:

Step 2:
Create a new layer (Layer >> New >> Layer). Select “Rectangle tool”.

With color set to #e0c324 draw a horizontal rectangle shape as shown below.

Step 3:
Create a new layer (Layer >> New >> Layer). Select “Rounded Rectangle tool”.

With radius set to 10px and color #a54611, draw a shape as shown below.

Rename this layer as “Round Shape 1”

Step 4:
Right click the Rounded Rectangle shape and select “Duplicate Layer”. Rename this layer as “Round Shape 2” Press and hold CTRL key and click on the Round Shape 2 layer. This will load the duplicate shape.

Select rectangular marquee tool, and select only lower portion of the selection, and press DEL button to delete lower portion of the duplicate shape.

Press CRTL + D to deselect selection.

Step 5:
Create a new layer. Select “Rectangular Tool”. With color set to #a54611 draw a rectangle shape as shown below.


Rename this layer as “top 1”

Step 6:
Press and hold CTRL key and click the “Round Shape 2″ layer. This will load this shape. Move the shape as shown in below image.


Using CTRL key select “Round Shape 2″ layer and “top 1″ layer. Right click on any one layer and select “Merge Layers”. This will merge both layer into one layer. Now press DEL key. Now our navigation bar looks like this:


Repeat same process to make it from left side also. Rename this shape as “top 2”

Step 7:
Using CTRL key select “Round shape 1“, “Top 1“, “Top 2” layers. Right click any layer and select “Merge Layers”. This will merge all layers into one layer. Rename this layer as button
Now apply following layer to the Button layer.




Now it looks like this.


Step 8:
Create a new layer. Drag and place the layer just below Button layer. Select “Rounded Rectangle tool”. Set radius to 10px and color to #5c2600. Draw a shape as shown in below image.


Repeat same process for right side also.


Now our navigation bar looks like this:


Step 9:
Create a new layer. Select Text tool and type a menu link test. Our navigation bar is ready. Below is the final image of the tutorial.


I hope you like the tutorial. You can also download the PSD file of this tutorial free!!!
Download PSD File FREE

Step 1:
Create a new document.


Select paint bucket tool and fill the layer with color #870202

Step 2:
Create a new layer. Select “Rectangular marquee tool” and draw a rectangle as shown in below image.

Select Gradient tool with foreground color #88a60e and background color #576d01
Press and hold shift key and drag mouse from bottom to top of rectangular selection. Now the image looks like this:

Step 3:
Select “Pen tool”.

Make a triangular shape as show below.


Right click on the line and select “make selection”.


Make selection with 0 radius.


Now press Del button to delete the selected area. Now it looks like this:


Step 4:
Right click the rectangle shape layer and select “Blending options”. Apply following layer style.




Now it looks like this:

Step 5:
Create a new layer. Select “text tool” and type some text in #f0f0f0 color.


Now go to Edit >> Transform >> Rotate 90 CCW
Now the text will appear vertical.


Apply following layer style to text layer.




Our ribbon is ready. Below is the final image.


I hope you like the tutorial. You can also download the PSD file of this tutorial free!!!
Download PSD File FREE