Create A Nice Clean Blog Layout In Photoshop

In this tutorial you will learn how to create a high quality blog layout for your website using
photoshop. What are you waiting for go enhance your skills by following this tutorial.
Download Final
Step 1
Create a new a document Width:960px x Height: 1200px, color:#313131

Step 2
Now were going to give our website a little space. First things first, make sure you have your ruler
turned on then add a guide line to 0px and 960px.
Note: To insert a guide line just select the move tool and click on the grid and drag it.

Now press CTRL+ALT+C for windows or CMD+ALT+C for Mac. Now you should see a Canvas size
box. This is how were going to give our document more room for our website. Select the left
arrow and change the width from 960px to 1160px then press ok.

Now repeat the last step but select the right arrow and change the width from 1160px to 1360px
then press ok. Now you should have 960px in the middle
of your document.
Note: If your document is white or any other color on either side just select the paint bucket tool
and change it to the background color

Step 3
Now were going to create a navigation menu. Select the rounded rectangle tool, 5px radius,
color:#1c1b1b and draw a rounded rectangle from 0px to 960px. If youre lost just just draw the
rectangle from guide line to guide line.

Step 4
Keep the rounded rectangle tool selected just change the color:#515151, and draw another
rounded rectangle slightly over the menu background.

Step 5
Now create a rounded rectangle box color:#fff. Make sure you leave 15px on both sides of the
rectangle.

Step 6
Now create another rounded rectangle for our sidebar. Leave a little space at the top for out logo.
There is 15px space in between elements.

Step 7
Ok so now that the layout is basically there we will start with adding out menu navigation links.
Select the type tool, Arial, Bold, 14px, sharp, color:#686868. Then type out the correct menu links.
To get the single line text just double click when you have the type tool selected. Then after you
have the text entered create another rounded rectangle color #000 for our rollover.

Step 8
Now were going to make our logo. Select the type tool color:#fff, Arial, Bold, 36px, sharp. Now
write out a custom name for your blog.

Now right click on the text layer>>Blending options>>Inner shadow Blendmode:multiply,
Opacity:75, Angle:120, Distance0, Choke:0, Size:5.

Then select the color overlay check box and change the color to #3f3f3f. You should now have a
letterpress logo effect.

Select the type tool color:#fff, Arial, regular, 10px, sharp. Then write out a sub heading. For the
letterpress symbol all that is needed is to duplicate the letterpress text layer and select any symbol
from the custom symbol panel. Photoshop will ask you if you would like to rasterize layer and
simply click yes then insert your symbol. Your final logo should look exactly like this or similar to
the one below

Step 9
Select the rectangle tool color:#313131, then create a rectangle box for our featured slider. Leave
15px on each side and the top.

Now find any image you would like and lets insert it over our slider background leaving 5px around
the entire image.

Select the rectangle tool color:#313131, and create a rectangle just a bit above our image then
change the opacity to 50%.

Now select the type tool color:#ffffff, Arial, Bold, 18px, Sharp then create a generic post heading.

Step 10
Now were going to create our blog post. I will only demonstrate 1 blog post because after you
have one completed you can duplicate the rest. Select the rectangle tool color:#313131, then
create a rectangle box.

Right click on the box layer>>blending options>>gradient overlay. Blendmode:Normal,
Opacity:100, Style:Linear, Angel:90, Scale:100.

Now double click on the gradient bar>> Left Color:#e9e9e9, Right Color:#ffffff.

You should have something like the image below.

Now we will add a thumbnail image to our design. You can use any image just make sure you leave
5px around the entire image. Try to make height similar to mine.

Select the type tool color:#313131, Arial, Bold, 14px, Sharp then create a generic post title.

Select the type tool color:#515151, Arial, Regular, 12px, Sharp then create a generic post
information heading. Link color:#cc4343.

Select the type tool color:#515151, Arial, Regular, 12px, Sharp then create a generic excerpt(Little
information about the post). Link color:#313131(>Read More<--).

For our final step select the type tool color:#515151, Arial, Regular, 12px, Sharp then create some
post tags. Link color:#cc4343.

Step 11
Now that we have our 1 of the posts completed we can now duplicate the other 4. Group all the
layers for the post into one folder then right click on the folder and duplicate group. You can then
change titles and thumbnails images if you would like. It makes it seem more like a live website
preview.

Step 12
Now we will work on the sidebar. Before we begin working on the sidebar make sure you leave
15px on the sides and top of the sidebar. Google search or create 4 images 125px x 125px for our
ad spots. Then place the ads into the sidebar.

Step 13
Select the rectangle tool color:#ededed then create a rectangle box for our popular post widget.

Select the type tool color:#515151, Arial, Regular, 20px, Sharp then create a POPULAR POST
heading.

Select the type tool color:#606060, Arial, Regular, 20px, Sharp then create some generic post title
headings. Make sure they are all cap so that
they look the same as the images below. The highlighted color:#2c2c2c.

Step 14
For our final step we we now create the footer text. Select the type tool color:#515151, Arial,
Regular, 12px, Sharp then create your footer text. All
text below in image below was used on one line.

Youre now done! Your final layout should look like the image below(Click to enlarge)