creating a tech blog or site layout in adobe photoshop

8/6/2019 Creating a Tech Blog or Site Layout in Adobe Photoshop

1/12

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.


2/12

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 downloadedthis picture
http://www.flickr.com/photos/kevineddy/2103439353/http://www.flickr.com/photos/kevineddy/2103439353/http://www.flickr.com/photos/kevineddy/2103439353/http://www.flickr.com/photos/kevineddy/2103439353/


3/12

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


4/12

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 Blendingoptions. 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


5/12

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 technology-

like gradient on the text. Select Gradient overlay and add the gradient. Left color is


6/12

#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.


7/12

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 dois 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 blogsCats Who Codeand

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.
http://www.catswhocode.com/http://www.catswhocode.com/http://www.catswhocode.com/http://www.wprecipes.com/http://www.wprecipes.com/http://www.wprecipes.com/http://www.catswhocode.com/


8/12

18 - Select the Line Tool and draw a #CCCCCC line below the post. The post should

looks like the following:


9/12

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.


10/12

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.


11/12

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.


12/12

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:

creating a tech blog or site layout in adobe photoshop

Documents