create ablog layout with photoshop|Web design

create ablog layout with photoshop |creat a tech blog layout in photoshop |make layout of blog with photoshop |photoshop,tutorial,layout,blog,create,

2011,

Hello all

how are you today ?

In the creating a blog layout with photoshop tutorial we will learn how to creat a tech blog layout in photoshop

its a new kind of tutorials .

Final :::

create ablog layout with photoshop

step 1::

 Start by creating a new document. The size is 1280 * 1200 pixels. Fill the background with black (# 000000).

step 2 :

 Create a new layer named content. Pick up the Rectangular marquee tool and draw a 976px wide rectangle. Fill it with white (#FFFFFF).

step3::

Also 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:

step 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:

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

11 - On the layers window, make sure the first text layer (Not the copy) is selected, right click and selectBlending options. We’re going to add a nice, very “technology-like” gradient on the text. Select Gradient overlayand 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 Tooland 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.

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 - You’re done! Look at what you just created:

LEAVE YOUR COMMENT PLEASE
THIS TUTORIAL NAME :create ablog layout with photoshop






 Adobe Photoshop | Photoshop cs|Design Tutorial|Text effects|Photo effects |3D|Photoshop Tutorial