How to Design Blog Interface in Photoshop – [Photoshop Tutorial]

This is very Important Photoshop Tutorial, in this Tutorial we are going to design Blog Interface in Photoshop. By following this tutorial you can also design your own Blog. This tutorial will really help those who are new to Photoshop field and they wanted to make Mockups, Interfaces, Templates in Photoshop. We will be designing whole Interface in Photoshop.

Here is what we will prepare in Photoshop:

Step 1:

Let’s start out by creating a new file. I used a 1280×2000 pixels canvas set at 72dpi, and I filled my background with #1E1E1E color shade. Now grab the concrete wall image below and place it on the top end of the canvas.

Step 2:

In a new layer, draw a large white rectangle with 1069 x 1478 px dimensions below the concrete wall header.

Step 3:

Under Layer Style (Layer > Layer Style) add a Pattern Overlay blending option to the large white rectangle layer.

Pattern (right click over it and save it to your PC):

Result:

Step 4:

Now create the small light blue circle with #89BFE3 color shade pattern shown below. This section will hold your navigation links.

Step 5:

Select the Horizontal Type Tool, then set the font family to Century Gothic, regular, 22 pt, sharp, and #C2CD3D color shade. In a new text layer, type out your navigation links below the circle pattern.

Step 6:

Below your navigation links add a section for email subscription. In a new layer, draw a 1px and 2px horizontal Light Blue (#92C5E9) lines on top of each other. Then in another new layer, draw 2 px lines in a shape of a long rectangle.

Step 7:

In a new layer, draw a light blue rectangle with #92C5E9 color shade and 86 x 36 px dimensions on the right end side of the email subscription section. Draw 1px white lines on the rectangle. Now Add the text ‘Subscribe’ using font Century Gothic, bold, 14 pt, smooth and white color shade. Then add a search box and the text ‘Subscribe to Email Updates:” using font Century Gothic, regular, 15 pt, crisp, and black color shade

Step 8:

On the left side of the email subscription section, add your social network buttons with text and link details.

Step 9:

Create a new layer set and name it ‘Content Box‘. In a new layer, draw a white rectangle with 631 x 370 px dimensions.

Step 10:

Under Layer Style (Layer > Layer Style) add a Stroke blending option to the white rectangle layer.

Result:

Step 11:

In a new layer, draw a long rectangle with #E5EEFA color shade and 623 x 29 px dimensions on the bottom of the content box. Then add text content on the rectangle design.

Step 12:

Now add text links for categories on the bottom left side of the content box. Then add two white rounded rectangle buttons on the right end side for the Read More link and comments.

Step 13:

Below the main content box, add smaller content boxes for featured products.

Step 14:

Create a new layer. Next to the main content box, draw a gray rectangle with #EEEEEE color shade and 300 x 387 px dimensions.

Step 15:

Under Layer Style (Layer > Layer Style) add a Stroke blending option to the gray rectangle layer.

Result:

Step 16:

In a new layer, draw a white rectangle with 298 x 33 px dimensions on the gray rectangle design. Add a total of 10 white rectangles with a 1px space between each rectangles.

Step 17:

In a new layer, add one more white rectangle on the top side of the gray rectangle design.

Step 18:

Under Layer Style (Layer > Layer Style) add a Drop Shadow, Inner Shadow, and Gradient Overlay blending options to the white rectangle layer. Then set the layer’s blending mode to Darken.

Result:

Step 19:

In a new text layer, add the text ‘Categories’ using font Century Gothic, regular, 20 pt, crisp, and #636363 color shade. Then in a new text layer, add your links using font Arial, regular, 12 pt, none, and #46799E color shade.

Step 20:

On the bottom left footer, add your copyright details using font Arial, regular, 11 pt, crisp, and white color shade.

Step 21:

On the bottom right footer, add your navigation links with #D0D86E color shade.

Step 22:

Create a new layer behind the large white rectangle layer, then draw a gray rounded rectangle with #676767 color shade and 223 x 23 px dimensions.

Step 23:

Under Layer Style (Layer > Layer Style) add an Inner Shadow and Gradient Overlay blending options to the gray rounded rectangle layer.

Result:

Step 24:

In a new text layer, type your links using font Arial, bold, 13 pt, crisp, and white color shade on the gray rounded rectangle design.

Step 25:

In a new text layer, type STUNNINGMESH.COM using font Futura Md, 48 pt, crisp, white and #CFD76D color shade (You will see ‘i’ in Stunningmesh, I’ve designed it separately and put it here):

Step 26:

Under Layer Style (Layer > Layer Style) add a Drop Shadow blending option to your name text layer.

Result:

Final Result of Design Blog Interface in Photoshop:

So here is the final Design Blog Interface in Photoshop. You have learn the technique How to Design Website or How to Design Blog in Photoshop.

After working on Design Blog Interface in Photoshop, you’ll surly wanted to convert it to CSS/HTML, so this tutorial will really help you a lot.

About The Author