Create Clean Blog Template in Photoshop

Final Image

As always, this is the final image that we’ll be creating:

Learn how to design a modern blog layout, complete with an awesomely lit, unique background design, social media integration and call to action buttons. 

 

Step 1

Create a new document (1000X1450px). Fill the top 450px of your canvas with 76A300, and the area beneath this with 6C9400.

Step 2

Now create a new layer and name it ‘header gradient’ and create a linear gradient at the top of your canvas ranging from 415900 to transparent and opacity to 60%. This should give a shadowed effect to the top of your design.

 Step 3

Now create a new layer and name it ‘header highlight’. Use your radial gradient tool to create a range of ‘light spots’, whereby the gradient ranges from white to transparent. Drag a few of these out across your header area.

Then change your layer blend mode to ‘overlay’, and reduce it’s opacity to 30%.

 

Step 4

Now create a new layer and name it ‘header circle gradient’.Use your circular marquee tool to create a circular selection in the top left of your canvas. Then drag a linear gradient (white to transparent) upwards to fill your selection. Finally, reduce this layer’s opacity to 15%, and change it’s blend mode to ‘overlay’.

Step 5

Type out some logo text in the top left of your canvas. I used the free font Mido (download here) size: 48pt, kerning: -50. Then I added a drop shadow blending option (35% opacity, distance: 1px, size: 0px).

Step 6

Now create a search form at the top right of my canvas. I start by creating a rounded rectangle (5px radius, white). Then I reduce this layer’s opacity to 35% and add a inner shadow option.

Step 7

Now create a submit button, using your rounded rectangle tool and the blending options below:

Step8

Now create a white rounded rectangle (10px radius) and apply a stroke blending option (settings below):

Now change layer opacity to 60%.

Step 9

I want to create a menu for my design. The easiest way to create a menu that will fit the rounded corner top of my main content area is to create a rounded rectangle with the same 10px radius, and then rasterize this layer, and cut off the bottom rounded area. This way the top of your menu fits the rounded top corners of your content area, but the bottom part is flat.
Once you’ve created your menu shape, apply the blending options shown below (gradient overlay and inner shadow).

Step 10

Now apply some menu text (Arial, 16pt, -50 kerning, 646464). Also, apply an active menu state, demonstrating which page the blog was currently on. To do this, I just used my lasso tool to create a simple triangle, which I filled with the same green as the menu. In order to create a perfectly triangle hold shift while using your lasso tool to create perfect 45, and 90 degree angle selections.

Step 11

Now create a new layer above all layers EXCEPT for your menu related layers. This is because we’re about to create the area directly beneath our menu, and we want our active menu arrow to be visible ABOVE this new area. Create a selection ranging across the top part of your content area, but beneath your menu. Fill your selection with 567700. Also add inner shadow effect with following settings.

Step 12

Now as this is the featured post area, we need a post thumbnail. Right click save and paste it over the dark green area. Then to make it stand out I applied a stroke blending option (settings below):

Step 13

Now Add Rest of objects.

Tata here we are.

Download PSD Here