Creating a tech blog or site layout in Adobe Photoshop

This is what the result will look like:

1 - Lets 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. Were 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 - Its 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 youre done with typing. 11 - On the layers window, make sure the first text layer (Not the copy) is selected, right click and select Blending options. Were going to add a nice, very technologylike gradient on the text. Select Gradient overlay and add the gradient. Left color is

#EEEFF0 and right color is #4E4D4D.

12 - Once youre 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 - Were done with the header, and its 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. Lets 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. 21 - 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 - Youre done! Look at what you just created: