How to Create a Clean Blog Design with Photoshop
In this step-by-step web design layout tutorial, you will discover a method for designing a clean blog design with stunning gradient and lighting effects using Adobe Photoshop. This tutorial is geared for beginner to intermediate Photoshop users.
Final Result
To view the finished product, click on the following image to see the full-scale version.
Download the source file
The PSD source file is available for you to download and study.
- clean-blog-design.zip (ZIP, 0.74 MB)
Setting up the Photoshop document
1 Open up Photoshop, create a new document that is 1000px in height 1300 pixels in width, and with a white background (#FFFFFF).
Creating the banner rotator section
2 Create a new layer on top of the Background layer. Select the Rectangular Marquee Tool (M) and create a rectangular selection across the canvas leaving a 50px gap at the top. The height of the rectangle should be around 250px – 275px.
3 Set the Background color to #00C0FF. Double-click the layer to open up the Layer Styles dialog box and then add a Gradient Overlay layer style with the settings shown in the following figure.
You should have something like this:
Creating the banner’s lighting effect
4 Create a new layer. Select the Ellipse Tool from the Tools Panel and create an ellipse over the banner that is roughly between 250px – 275px in width, use the following figure as a guideline.
5 Select the layer and lower the fill to 0%.
6 Double-click the layer to open up the layer styles dialog box and then add the layer styles shown in the following figure.
You should get something like this:
7 Create a new layer, and select both the new layer and the Ellipse layer by holding down Ctrl/Cmd and clicking on the layers’ thumbnails in the Layers Panel.
8 Right-click on the layers in the Layers Panel, and choose Merge Layers.
9 Select the merged layer in the Layers Panel and adjust its Blend Mode from Normal to Overlay.
You should now have something like this:
Creating the banner’s rotator buttons
10 Select the Ellipse Tool and create a 20px wide circle; hold down the Shift key so that it is perfectly circular. In the Layers Panel, lower its opacity to 60%.
11 Duplicate the layer by right-clicking on the layer in the Layers Panel and choosing Duplicate Layer. Use the Move Tool (V) to move the circles on either side of the canvas down midway on top the banner rotator’s background.
Building the navigation bar
12 Select the Rectangular Marquee Tool (M) and create a rectangular selection across the canvas under the banner rotator. The height of the rectangle should be around 100px – 200px.
13 Create a new layer. Choose Edit > Fill and fill the rectangular marquee selection with any color. Set the background color to #000000. Set the opacity of the layer in the Layers Panel to 15%. Double-click the layer and open up the layer styles dialog box and then add a Gradient Overlay layer style as shown in the subsequent figure.
You should now have something like this:
Creating the content boxes
14 Select the Rounded Rectangle tool from the Tools Panel. Set the Radius of the tool to between 5px – 10px (depending on how much you want the corners to be rounded) in the Options bar. Create a large box 600px by 800px. This will serve as the content area background.
15 Double-click the layer to open up the Layer Styles dialog box and then add a Stroke layer style with the settings shown in the following figure.
You should have something like this:
16 Select the Rectangular Marquee Tool (M) and create a rectangle over the top part of the rounded rectangle.
17 With the rectangle still selected, create a new layer. Use the Gradient Tool (G) to create a Black (#000000) to Transparent Linear Gradient going up (see following figure).
18 Click on the layer with the rounded rectangle (the one we created in Step 14) in the Layers Panel to select it. Now choose the Magic Wand Tool (W) and click the outside of the shape.
19 With the area still selected, click the layer with the linear gradient (step 17) in the Layers Panel. Press the Delete key to delete the area beneath the magic wand selection.
20 Repeat the Steps 14 – 19 to create more content boxes as needed. In the following figure, I have created two more content boxes on the side bar using the same method above.
Creating the Footer section
21 Select the Rectangular Marquee Tool (M) and create a rectangular selection across the bottom part of the canvas. The height of the rectangle should be around 70px – 90px. Set the Background color to #D9D9D9.
Finishing touches
22 To spice this layout up, fill your header, banner, navigation, content boxes and footer with dummy content and pictures.
Banner:
I placed a screenshot of this mockup on the right, and used the Horizontal Type Tool (T) to type in some white (#FFFFFF) text.
Navigation:
Navigation text is simple, to simulate HTML text, I chose bolded Arial with anti-aliasing method on the Options bar set to None.
Content Boxes:
Here you can see I’ve simply placed some more dummy text in the content area using the Horizontal Type Tool (T). To get yourself some dummy text to copy and paste, head over to the Lipsum generator site.
Sidebar:
The first content box on the sidebar uses some smaller anti-aliased text. I also placed an image there that you can replace to showcase a logo or a photo of you/your company. The second sidebar content box is for banner advertisements.
Footer:
I’ve placed some copyright information on the footer.
Header:
Just a simple logo that you can replace with your own.
You should have something like this:
Congratulations, you’re finished!
If you followed along the tutorial, you should come out with something that looks like the following figure, click on it to see the full-scale version.
Download the source file
The PSD source file is available for you to download and study.
- clean-blog-design.zip (ZIP, 0.74 MB)
Related Content
- How to Make a Green & Sleek Web Layout in Photoshop
- Using XAMPP for Local WordPress Theme Development
- How to Create a Clean Web 2.0 Style Web Design in Photoshop
- Related categories: Tutorials and Photoshop
About the Author
38 Comments
Venard
August 12th, 2009
What a great and plain site. I’m going to use what I’ve learned in future designs.
Kirill Galenko
August 12th, 2009
The design is nice overall and I am sure that the novice designers will really learn from this. Great job.
However, maybe something can be done to improve the readability of the white text on top of the white highlight in the header?
Philipp
August 12th, 2009
Cool and clean tutorial!
jubo
August 12th, 2009
That’s a really good web page, I’m not very good with Photoshop but you’ve made this so easy to follow I’m going to try it out.
Thank you
sign.nl
August 12th, 2009
verry nice tutorial well explaind nice color combinations
great job :)
Reece
August 12th, 2009
@Kirill galenko.
u can lower the opacity of the layer in step 9. (ellipse layer)
this will make the text more readable.
Sean Hurley
August 12th, 2009
Very nice design and thanks for the source files.
Soner Gönül
August 12th, 2009
Cool!
Webr
August 12th, 2009
Nice tutorial, but we all must keep aware not to use all the same style. But anyway, nice tutorial!
Osmanelka17
August 12th, 2009
Thank you very much on this guidance…
This consortium is the most useful knowledge ..
Nicole Foster
August 12th, 2009
Great tutorial! The blog design is sleek, and clean. I hope there will be a how-to-code-this-into-wordpress follow up. I have been wanting to learn how to code designs into WordPress for awhile now.
Nikola Lazarevic
August 12th, 2009
Nice and clean design. Thanks!
Tomas Laurinavicius
August 12th, 2009
Very clean and professional look, thanks.
ijlal
August 12th, 2009
Thats really cool. The main coding part from psd to xhtml is very scarce on the web. There should be alot of more well explained xhtml coding tutorials.
Very nice work indeed.
Thanks
Jason Wizards
August 12th, 2009
Fantastic tutorial!
Keep up the good work!
Alex
August 13th, 2009
Very nice tutorial, I include it in my WP mock-up tutorials post list. Very nice job.
Gerasimos
August 13th, 2009
Nice one. Really easy to follow and a great simple design. Good work :)
David
August 13th, 2009
The Layout is not bad, but the typography is poor. I don’t wear glasses but
David
August 13th, 2009
[sorry] … i can’t read this small Font on my Screen. Line length and height are also not optimal.
Simukis
August 13th, 2009
@David: u really need glasses then, if u creating design by this tutorial , u will be able to make letters bigger.
@Reece: very beautiful design.
How you add a logo near your nick?
Christie
August 13th, 2009
Awesome work.. I just love the simplicity of design and clean minimalistic look.. Hope to see a “code” tutorial for this :)
Danny
August 13th, 2009
Great outcome, thanks for sharing this with us.
chris
August 15th, 2009
How do you code this into XHTML , that is what im most interested in
Jacob Gube
August 15th, 2009
@chris: We don’t have plans on covering the HTML/CSS part of this yet – but if enough people show interest, we might do it.
KDMART
August 15th, 2009
wow very amazing :D
but how to convert it to theme to use it in the blog ,,
it is now a psd file
Greg
August 17th, 2009
Very nice tutorial, thanks. I’d also like to see a followup on converting this design to html/css.
Tim
August 17th, 2009
How do we convert this into WordPress template?
Eric Shafer
August 17th, 2009
Great tutorial guys, I’d put my vote in to see a PSD->Wordpress conversion.
Ashely Adams
August 18th, 2009
Nice tutorial!enjoyed going through it.Although i use the wordpress templates myself , and am pretty satisfied with them.
Keith D
August 18th, 2009
Fantastic detail, great screenshots and superb result… makes me wish that I used Photoshop. Sadly, I don’t.
Any chance of a few Adobe Fireworks tutorials?
Jacob Gube
August 19th, 2009
@Keith D: Fireworks is something I’ve been wanting to cover for a while; I’ll see if I can find some authors who would like to write Fireworks tutorials.
Artendz
September 4th, 2009
Wow.. Thank so much for ur tutorial
Greatt….
Shane Walsh
September 23rd, 2009
Nice tutorial
But remember newbies the basic design is great but try add the rest of the content into CSS so you can update it easily!
duone
September 27th, 2009
snap, the part where we have to match the css layout with images from created from photoshop is the trickiest.I still trying to figure out about this.
ann
November 10th, 2009
Great tutorial! I’m going to try your tutorial
ani
February 12th, 2010
how do make background design in photoshop?in new model
Brad
November 25th, 2010
Very good post.
Great!
adhy
March 11th, 2011
Graet tutorial. but could you make its html code?plizzz
Leave a Comment