This is what the result will look like:
1 - Let’s start by creating a new document. The size is 1280*1200 pixels. Fill the background with black (#000000).
2 - Create a new layer named content. Pick up the Rectangular marquee tool and draw a 976px wide rectangle. Fill it with white (#FFFFFF).
3 - Still on the content layer, use the rectangular marquee tool to draw the sidebar. The width is 331px and background color is #E9E9E9.
At this point, your design should look like this:
4 - Create a new layer set named header. We’re now ready to create a nice header background. To do so, I have first downloaded this picture and imported it into Photoshop. Once the picture is imported, select Filter, Blur, Mottion blur and apply the effect with the following parameters:
5 - Once done, import the modified picture in the design. Crop it to 972*188px. Then, go to the Image menu and select Ajdjustments, Color balance. Add blue on highlight, shadows and midtones.
The header should look like this:
6 - Time to draw the navigation menu. Pick up the rectangular marquee tool and draw a 972*53 pixels rectangle in a new layer called navigation. Fill it with #080808.
7 - On the Layers window, right click on the navigation layer and choose Blending options. Once the Layer style window is open, add a Gradient overlay. Setting are 65% opacity, #000000 on left and #3F3E3E on right.
8 - Now, select the text tool and start adding navigation links on the nav bar. I chose Arial bold, 18pt. Color is white.
9 - For the active/hover state of the navigation links, select the rounded rectangle tool and draw a shape around one of the links. The rounded rectangle radius is 10px and the background color is #6589A7.
10 - It’s time for us to add a logo to our blog design. I have chose the Futura bold font with 72pt font size and black color (#FFFFFF). Simply type the text you want, and duplicate the layer once you’re done with typing.
1
1 - On the layers window, make sure the first text layer (Not the copy) is selected, right click and select Blending options. We’re going to add a nice, very “technology-like” gradient on the text. Select Gradient overlay and add the gradient. Left color is #EEEFF0 and right color is #4E4D4D.
12 - Once you’re done with the gradient, select the copy of the layer (which is plain white). Pick up the Move Tool and use the keyboard arrows to move the layer 1 pixel on the right and 1 pixel on the bottom.
After the 3 latest steps, your blog logo should looks like this:
13 - We’re done with the header, and it’s time to create our posts. The first thing to do is to create a new layer set named post. Then, get three or four 200*200px images to illustrate the posts. Such images can be found on my other blogs Cats Who Code and WpRecipes. Import one 200*200 pixels image into the design, and place it 18px from the edges of the white container.
14 - The font used for the titles is #222222 Arial, bold, 36pt. Type the text you want for a post title, and select it using the Text Tool. On the Photoshop menu, go to Window and select Paragraph. Set the AV to -75, according to the screenshot below:
15 - Pick up the text tool again and write the author name, the post category, the number of comments or anything else. Select white (#FFFFFF) 12pt Arial bold font.
16 - Select the rectangular marquee tool and draw a rectangle around the text you just entered. Fill the rectangle with #6589A7. Make sure the text layer is above the shape.
17 - For the post excerpt, I have choosen Arial font, 12pt, Italic. Color is #555555.
18 - Select the Line Tool and draw a #CCCCCC line below the post. The post should looks like the following:
19 - Copy the post layer set as many times as necessary to fill up the content space:
20 - Time to create a cool sidebar for our blog design. Let’s start by creating a new layer set named sidebar. The first thing to add to the sidebar is some 125*125px ads. Download some from your favorites blog and import it into the design. In the psd, I have choosen to display 4 ads, but of course it is just an example.
2
1 - In order to draw a sidebar widget title, create a new layer set named widget, pick up the rectangular marquee tool and draw a 342*40 pixels rectangle on the sidebar, starting from the left edge. Fill it with #6589A7.
22 - Use the Zoom Tool to zoom on the right side of the newly created rectangle. Pick up the Polygonal Lasso Tool to draw a shape like the one in the screenshot below. Fill the shape with #4F667A.
23 - Add some text in the widget title. The font used in the example is 12pt Arial bold. Color is white (#FFFFFF).
24 - Add some text below the title. Font used is #222222 12pt Arial bold. Once done, your sidebar widget should look like this:
25 - Duplicate the widget layer set as many time as needed to fill up the sidebar space.
26 - Our design should now looks like the screenshot below:
27 - Finally, the last step of this tutorial is to create a simple, but nice looking footer for our blog design. Start by creating a new layer set, named footer. Then, Create a new layer (Also named footer) and draw a 972*34 px rectangle using the Rectangular Marquee Tool. Fill it with #6589A7.
28 - Add your copyright message (or whatever) to the footer. The font I used was Arial bold, 12pt. The color is white (#FFFFFF). Once done, align the text to the right part of the footer.
29 - Repeat steps 10,11 and 12 in order to have a smaller version of your logo in the footer. You should also dusplicate the logo layers and scale it, of course.
30 - You’re done! Look at what you just created:
Get a commercial/public use licence for this PSD (More info)
