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.
11 - 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.
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:


Get a commercial/public use licence for this PSD (More info)







Loading...
37 Responses
Lenin
Nice work jean…, Thanks for the tut.
Frank J
Very cool tutorial. Thank you for sharing this great how to.
Jean-Baptiste Jung
You’re welcome guys, glad you enjoyed the tutorial!
Murray
Great tutorial, very fun and clean. I liked the little trick with the mountain picture as the blur.
The only little detail I didn’t like was the final logo at the bottom left as well. It just barely seems misplaced.
Otherwise, awesome tutorials, always a fun time doing them, learning design really fast
bitlimakina
thanks for nice tutorial
Jean-Baptiste Jung
@Murray: Glad to read you had fun with the tutorial! I personally like the small logo on the bottom left part of the design (I did it on my other blog Cats Who Code) but sure thing, it depends of you rpersonnal tastes
Sumesh
Nice tutorial, this looks a bit like Catswhocode redesign, doesn’t it?
The little 3D effect on sidebar titles is cool, much like out-of-box designs.
And I agree with the comment above about the logo at the bottom, it lacks contrast and spoils the footer. Otherwise cool
Lenin
@jean-Baptise, yes i agree with you. There is no such rule that a design must be look like this or should have to be like one and it solely depends on personal taste and clients requirement, the only thing that the designer must know is how to be creative.
Jean-Baptiste Jung
@Sumesh: Yes, it was inspired by the new Cats Who Code design
Marcell
Great tutorial! You should code it now
Pavlow Vinelli
Great work! And additionally a search field and a little informational footer will be nice for this theme.
Matt
It’s alright, nothing really special about it though. And the header isn’t very nice, very bold and is just text (bad font too…) with a gradient slapped onto it, I just don’t see how it’s a ‘premium’ layout. Some typography lessons are needed here I think. Something like http://www.giselejaquenod.com.ar/blog/ would be considered premium. Sorry if I sound harsh, it’s just my opinion as a fellow designer.
Jean-Baptiste Jung
@Matt: No problem to give out your opinions
A design can’t please anyone anyways.
Mark
Can you make a tut to use this as a Wordpress theme?
tirath
Awesome web layouts with nice step by step tutorial
Thanks a lot for your kind effort & your valuable time for making & sharing awesome tutorials always.
I learn lot’s of new technique because of your awesome web layouts tutorial
your all web layouts tutorials are awesome & valuable. keep up good work
Only things is that the view & opinion of each individual is different
CgBaran Tuts
Nice layout thanks for this tutorial
irenraj
This is by far the most incredible set of resources in one place I have ever come across. Well done and thank you so much
creative
That was fantastic – quick and well explained. I will be using the ribbon effect on upcoming work.
Also interesting technique for creating random banners.
Well done.
3rdGear
Nice layout.. Good usage of contrasting colors..
I do have one question thought.. I’ve created a couple of layouts just playing around be recently decided to use one for a website for personal use and have run into an issues of I don’t know how to implement it into a site..
any help would be greatly appreciated.
Kelly
Nice layout, I’ve always liked themes with preview images in the main listing.
psdlovers
nice tut.but can you code the theme and give us?
Ferlyn Adison
I like your 3d effect on the sidebars.
I will try to make this tutorial and see if it really works best if I’ll do.
photo retouching services
Great layout tut! I`m off to try this at home.
Web Design Beach
Really professional, simple and effective layout for tech blogs. Thanks for sharing.
Abdurrahman
Wow, super layout, thanks for share
kurra
HI CAN ANYBODY TELL ME HOW CAN WE CONVERT A PSD FILE INTO A XML FILE PLZ
Mr Hoang
Good posd!
Can I post in my blog? thank
zenaire
How can I thank you..I really need this tutorial cause I want to build a blog soon and happy to find about your techniques. I will try my best.
Thanks
Lance
Great tutorial. Thanks for taking your time to show this to us.
Porter
That’s a nice looking layout. I definitely need to update my photoshop skills, too long have I said I’m not that good at it, time to change that up.
Alecsandr
I’m from Russia city of Rostov on Don!
Very nice work.
Thank you for your work!
Patrick Culverton
I never knew this one. thanks for the help. hehehe mybe i could apply this in one of my blogs. great!
Tutorial Lounge
really professional way for design an professional layout design.
ali
l must try this, because looks easy, can be my first one
Kamal
Thank you so much boss
Mike @ PCTECH
Very nice tutorial. The end result is very clean.
WOLF BESPREDEL
thanks! will need to draw, something like that as soon as free time!