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 we’re 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 you’re 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 we’re 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.

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

Posted in: Web Design