In this tutorial, we'll make a creative blog layout using mostly simple shapes, a few brush techniques, some images, and a dose of Photoshop ingenuity. Creating web design layouts is easier than you may think. You can learn to build attractive designs rapidly. Creating this design will take less than two hours and you'll learn some professional tips along the way. Let's get started!
Final Image Preview
Take a look at the image we'll be creating. Want access to the full PSD files and downloadable copies of every tutorial, including this one? Join Psd Plus for just $9/month. You can view the final image preview below. The final image is below or you can view a full size image here.
Tutorial Details
- Program: Adobe Photoshop CS4
- Difficulty: Intermediate
- Estimated Completion Time: 1.5 hours
Resources
To complete this tutorial you need to download the 960 Grid System. Now let's begin.
Step 1
Open the "960_grid_12_col.psd" template in Photoshop. It will look like the image shown below. The Grid System is useful because it allows you to align the layout quickly.
Step 2
Select the background layer and press Command + J. This is the shortcut to duplicate a layer. Using shortcuts will speed up your design process. For this new layer we'll add a nice gradient color. Now go to Layer > Layer Style > Gradient Overlay and use the following settings.
Step 3
Now hide the Grid because to see the design better. Keep your grid visible because you can align the shape better. Select the Rounded Rectangle Tool, and create a shape on top of the layout.
Step 4
For this navigation bar add the following layer styles.
Step 5
Using the same tool (Rounded Rectangle Tool) create another shape and fill it with the color: #001424.
Step 6
Add the following layer style for this shape.
Step 7
Create another shape with the Rounded Rectangle Tool using white for the color.
Step 8
Also for this shape add some simple layer styles and change the Fill value to 10%.
Below is the result so far.
Step 9
Over this last shape place an image. I've use some images from some tutorials I've made for Grafpedia, which serve as good image examples for this design. You should use your own images though of course.
Step 10
Now you need to load the selection for this image. To load the selection, select the layer in your layer palette and then go to Select > Load selection. You will see a selection around the image like in the following image.
Step 11
Create a new layer on top of all layers by using this shortcut: Command + Shift + Alt + N. Select the Brush Tool, and choose a smooth round brush. Over the new layer draw a horizontal line. Hold down the Shift key when you make the drawing. In this way the drawing will be perfect horizontally.
Step 12
Press Command + D to deselect. Now use the Rounded Rectangle Tool to create another shape with the color #4b6e82.
Step 13
For both shapes add the following layer styles.
Step 14
Grab the Ellipse Tool and create a shape right under the sidebar shape.
Step 15
Go to Filter > Blur > Gaussian Blur and use the following settings. Photoshop will ask you if you want to Rasterize the shape, go ahead and press OK.
Step 16
As you can see from the previous step, we've created a shadow there. Now let's accentuate this shadow by adding some lights. Select the Line tool, and set the weight of the line to 1 pixel and then create a vertical line as shown.
Step 17
Right-click on the layer and choose Rasterize layer.
Step 18
Select the Eraser Tool, and choose a smooth, round brush at around 100px. Use it to Delete the top part and the bottom part of the line.
Step 19
With the same technique create another line on top of the sidebar.
Step 20
Right under this white line create another one that is black.
Step 21
In the middle of the layout create another shape with the Rounded Rectangle Tool.
Step 22
Create some shapes with the Rectangle Tool. Over these shapes we'll add some images later.
Step 23
Add the same layer styles for all these three shapes.
Step 24
Now it's time to add the images over these white shapes. Also add some text with Horizontal Type Tool on the right side.
Step 25
Create a dashed line between the posts with the Horizontal Type Tool.
Step 26
Create another three shapes and place them under the Post Metadata text.
Step 27
Above the sidebar create a search box using the Rounded Rectangle Tool. In the same time you can see that I've placed some text over the navigation bar too.
Step 28
Please add the following layer styles for this search box.
Step 29
Now use the Rounded Rectangle Tool to create another shape. Place this shape over the previous shape. Also, add an icon on the right side.
Step 30
Right above the slide show create another white shape.
Step 31
Add the following layer styles for this shape.
Step 32
Hold down the Command Key and with the Pen tool selected press on the edge of the shape twice. The anchor point will become active and we'll be able to modify the look of the shape.
Step 33
With the Command key still pressed select the following anchor point.
Step 34
Hold down the Shift key and press once on your Down arrow key from your keyboard. The anchor point will move down and you will have the following result.
Step 35
Use the Ellipse Tool to create a circle.
Step 36
Right-click on the layer and choose Rasterize Layer. With the Rectangular Marquee Tool make a selection like that shown below.
Step 37
Be sure you have the layer with this small circle selected and then press the Delete key. Drag this layer above the background layer in your layer palette. This is my result so far.
Step 38
Now we'll add two buttons to allow the sites users to change the slide show image. You will need to use the Rounded Rectangle Tool to create the shape and then you can use the Custom Shape Tool to add the arrows.
Step 39
Over the sidebar create some white shapes as shown below.
Step 40
For all these white shapes please add the same layer styles.
Step 41
Add some banners in the sidebar. Also, add some social bookmarking icons on top of the site design. There are numerous free icons available across the web to choose from.
Step 42
Now add some text with the Horizontal Type Tool on the bottom of the sidebar. Also, add minus signs between the text using the Horizontal Type Tool to create dashed horizontal rules.
Step 43
Let's add other details on the navigation bar. Use the Line Tool to create two small lines. Zoom into this image so you can see better what you're doing.
Step 44
Select both layers inside your layer palette. To select both layers you need to hold down the Command key when selecting both layers. After you have the lines selected press Command + E to merge the layers into a single one. Select the Eraser Tool and use it to delete the top part and the bottom part of the lines. Please note that you need a soft, round brush with a size of 20 pixels.
Step 45
Change the blending mode for this layer to Soft Light. Duplicate it a few times and place the line between the other text buttons.
Step 46
Now create the text for this Wordpress layout's logo at a size that looks good to you.
Step 47
Add the following layer styles for this text logo.
Step 48
Right above the "background" layer create a new layer (Command + Shift + Alt + N). With the Brush Tool make a highlight mark there with a soft, round brush as shown.
Step 49
Change the blending mode for this layer to Soft Light.
Conclusion
The design is completed! I hope you enjoyed creating! The final image is below or you can view a full size image here.
Subscribe to the Psdtuts+ RSS Feed for the best Photoshop tuts and articles on the web.
Related Posts
Keep reading with more great tutorials and articles!
Enjoy this Post?
We'd love your vote!
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )MoonBoy October 16th
Good one for beginners .
( )Paolo October 16th
nice tutorial with a great outcome
( )imagineadesign October 16th
very useful tutorial, many thanks!
( )kovshenin October 16th
Looks very good indeed, thanks! Nice techniques, especially Step 33 through 39, I liked that part.
( )FinallyAnime November 15th
Like SERIOUSLY AMAZING!!! I used the advice about the orange navbar for my own site!!! it just POPS. I love how all this stuff can be done without the need of crazy flash. Check out my site to see what I did ;D
It’s an Anime Site btw
( )John Livings October 16th
Great tutorial. I think it would be cool to have a link to Nettuts to show how to go from PSD to Web.
( )Matthew L October 16th
Where did you get those Gradient Presets! o.O plz email me answer. Stunning tutorial too.
( )Modisana October 16th
Awesome end result… keep it up
( )kosh October 16th
Looks Great! but I’m no web guru & Ive seen a lot of these and don’t know how to convert them to the real thing. Is it hard?
( )Chris Horton October 16th
Is there going to be a tutorial showing how to code this?
( )macdo October 16th
Sorry, I’m a noob, but I don’t get how to make this work in a browser.
( )How do you export it to make it fully work or interactive?
Rasmus October 17th
You need to do a HTML markup. You can find serval tutorials on Nettuts.com about this subject.
( )Autonomy October 16th
This is very useful for people just learning the ropes. Great job on the concise instructions and layout.
( )Mac OS X PC Destek TR October 16th
Good tutorial, thanks for the sharing.
( )Anonymous October 16th
And how can I actually make a blog? Does anyone know a good site for that?
( )Isis October 16th
maybe http://www.blogger.com? =)
( )John October 16th
Grafpedia makes some really nice web layout tutorials. good job on this one.
( )Aerendyl October 16th
Thanks, will try it!
( )Markus October 16th
Nice, thank you!
( )Cornel October 16th
Great tutorial Razvan. You are one of the best designers over the web. I visit everyday you website and I really enjoy reading all of your tutorials. Another awesome work! Thank you!
( )Radoslav Angelov October 16th
I don’t think is creative… look a bit boring to be honest.
( )Is ok for beginers
zeemiDesign October 16th
Great tutorial,
( )some nice details and a nice polish (even though that happened throughout the design process).
Jason October 16th
Really like this post, thanks.
( )andrew October 16th
fun design…but not creative in design or layout. Title should be changed. Header across top main content 2/3 on left sidebar 1/3 on right…hardly creative.
( )Matthew booth October 17th
…
( )joris October 16th
Don’t like the result at all. It’s to chaotic.. kind of a mess.
( )Thomas October 17th
And how would you describe your website?
No offense.
( )Boba October 17th
Haha you got him there
LIGHTNING October 16th
I like the idea, I’ll post again with my outcome:)
( )Nicholas October 16th
Awesome. Plan to follow it up with slicing, markup and styling in the net.tutsplus.com area?
( )Murlu October 16th
I like it, it’s fun.
Would of been nice with some sort of footer but otherwise it’s quirky and cool.
( )Symon October 16th
Some nice touches. Gonna try a couple of them now!
( )Shawn October 16th
Great tutorial. I like the big social buttons in the top right sidebar. I’m not a big fan of sliders though.
( )Ben G October 16th
Nice tutorial! Thanks for the helpful tips.
( )Dnyanesh Mankar October 16th
Grafpedia designs are becoming cliche. All have something in common. Try to do something new. Good tutorial.
( )Amatatomba October 16th
Nice outcome. I’m getting more into web design lately, so I’ll have to give this a try and then code it.
( )Melody October 16th
That would be a hot blog site..now if you could only make it as a free WP theme *wink wink* haha..
( )matthew booth October 16th
I can turn it into a free wp theme if enough people wanted it
( )Isis October 16th
I’d love even more if you can make a tutorial explaining how to convert it to a wp theme.
=)
Thanks!!!
Matthew booth October 16th
that’s a job for nettuts.com, I believe they do have some WordPress tutorials for creating themes though.
just google it.
Tom November 5th
I would absolutely LOVE for you to make a WordPress theme from this! I’ve been trying to figure it out using nettuts, but I’m screwing it all up! Trying to follow a tutorial for converting PSD to HTML is nice, but it’s confusing when the tutorial is written specifically for a different layout or design.
Aevion October 16th
It looks alright… pretty standard, but good.
( )matthew booth October 16th
Nice outcome. It’s always cool to see techniques that I use being used by others as well. Somehow it makes me feel validated haha.
I also like how it leaves some room for personal touches. The theme is ambiguous enough that you could pursue a more Web 2.0, grunge look or whatever.
When you use the drop-shadow, outter glow or inner glow filter you may want to experiment with the “contour” option under the “Quality” section. Changing the contour can add some rad effects depending on your personal taste.
( )Goph3r October 16th
Nice tut, but the logo looks poorly placed.
( )inzogroup October 16th
Excellent!!
( )Connor Crosby October 16th
Can you link this to Net Tuts on converting PSD to a wordpress?
( )Isis October 16th
Convert PSD to wordpress can be really useful tutorial.
( )PLEASE, do it! =D
And thanks for the layout ideas and techniques, I learnt a lot!
Matthew booth October 16th
Net Tuts tutorials:
Wordpress Theme: http://net.tutsplus.com/site-builds/how-to-create-a-wordpress-theme-from-scratch/
Top 50 WordPress tutorials:http://net.tutsplus.com/articles/web-roundups/top-50-wordpress-tutorials/
PSD to HTML: http://net.tutsplus.com/site-builds/from-psd-to-html-building-a-set-of-website-designs-step-by-step/
I work in WordPress all day and to really be efficient at working with PSDs and custom WordPress Themes, you first get good at just basic PSD -> XHTML/CSS then get familiar with WordPress themes like Kubrik and the Default theme. After you have independent knowledge of the two, combining them is easier. Take the time to understand how a theme really works, it will save you a lot of hassle.
( )Rob October 16th
I love the level of detail put in the creation of this tutorial; but I have to agree with a few others who pointed out that the end result is just ‘off’. I don’t think it’s bad… but something just isn’t flowing and I think it all stems from the header.
The Grafpedia text is just so uninspired and oddly placed that it throws the entire design askew.
( )hend October 17th
waaaaaaaaaaaaaaaw very nice
( )g3niuz October 17th
i like this…
some cool touches ;D
( )Tom Ross October 17th
Really nice tutorial, I’ve been a fan of your web design tutorials for a while now
( )Grafpedia October 17th
Thank you Tom.
( )Ravi Vora October 17th
Really nice tutorial, but I would have made all of the margins more uniform. That can make a design feel a lot better and create consistency, especially in subpages.
( )micha October 18th
this kicks a$$. the attention to detail is amazing
( )Kristjan October 18th
How to make Step 32 and 33 on windows? I dont have the command key
and i didnt found a replacement on my keyboard
( )Grafpedia October 18th
You can use the CTRL key. Please let me know if this helps
( )Kristjan October 19th
that helped
thanks…thow there was one my own stupid mistake too
mystro October 18th
how do you add the html side to it?
( )demi October 18th
Nice tuutorial!
( )Ant October 18th
In my opinion, it’s better to design all elements (such as buttons and other decorations) on a new document and then link them to main layout. If you have many instances of same object, better to use smart object.
In that way, easier to convert psd to html+css (you don’t need to “slice” element, it is already sliced).
( )Especially when you have shadow (Ps do not select shadows or almost transparent pixels, and you need to use fancy tricks to save button as separate picture.
Panji October 18th
Wow, he always give us nice web tutorial design. However, I don’t know how to use 960 grid system since I was new to this area field XD
( )Amol Wagh October 18th
Its awesome tutorial. I was trying for the first time to design a theme in photo shop. Thank you very much. It inspired me
( )Shaheer October 18th
not very detailed, but a good tutorial, i am a web developer so; not good in design
, thanks for this tutorial, by the way, i think the sidebar navigation links could be styled differently 
( )Tylor October 18th
Wow, amazing! I really love the design of this. Simply awesome
Great job. Looking forward to more of your tutorials!
( )Nick October 18th
putting “how to” and “creative” in the same sentence is so lol. “how to create new ideas!” bit of an oxymoron, don’t you think?
( )TheWebTuts October 18th
Tutorial added to thewebtuts.com
( )ibura October 19th
excellent article for photoshop starters. thanks mate!
( )Tutorial Lounge October 19th
that’s very much professional work over there in whole tutorial, where you describe step by step for make blog layout design, i got many ideas for make some inspiration as follow you. thanks
( )Listoric October 19th
Very nice tutorial, but the outcome is quite a mess.
Tons of details that are just not needed. Especially the top right corner is so crowded with details, it is just not good. Also, the elements seem to have random paddings and margins, are not in line with each other, especially on the right hand side. It just seems like “yeah, 960 grid is the all healing wonder, lets skip every other information we know about webdesign, readability or arrangement.”
Its a well written tutorial, and it is ok for beginners (its just HUGE, who wants to start with such a tutorial?), but the outcome is disappointing.
( )Buzzlair Voufincci October 19th
My morning is better with this article.
thanks for this. appreciate it.
( )Nasweef October 20th
nice!!!
( )patvillaruz October 20th
nice! tuts… i like it.. its simple and easy to make.. good job psdtuts..
keep it up..
( )colourels October 21st
love it .. I wonder the gradient pallete is a customized one? or came in dafault in CS4 ?? Anyone can answer ?
( )Grafpedia October 21st
The gradient pallete you can find on my website. search for 27000 photoshop gradients
( )Sean October 22nd
I don’t understand why people are using Photoshop for website comps when Fireworks is available.
( )Nathan October 25th
Because it’s better.
( )Marten November 2nd
Photoshop is the best tool for customize photo’s not to design websites.
I think we should use all kind of programs to get the best result.
Illustrator for the icons.
Photoshop for the pictures and fireworks for the rest like buttons, grid, etc..
greets Martendejongh.com
joegrimjow October 22nd
wow
( )need to try
Philippe Machiavelli October 23rd
Very nice. Buy how can I use this?
( )I am newbie in web designer.
Tks
psd to html October 23rd
good one… thanks for sharing.
( )Web Design Singapore October 23rd
The 960 grid system is something really new to me!
( )Silver Firefly October 24th
I see this sort of thing as something to learn the basics from, but please don’t describe this as creative.
( )TheBlogTemplates October 25th
Great tutorial
( )ven October 25th
Great tut I loved it and the others of yours Ive done as well, thanks =)
( )Nuruzzaman Sheikh October 26th
Great tuto.
( )Thankx a lot Razvan.
And your custom gradient preset is so superb.
gene October 26th
Nice Tutorial! Thanks a lot.
( )andreas October 27th
sorry.. but sometimes a bit less is more
( )Ian Perera October 27th
Nice, but how can i get those custom gradients that are in this tutorial.
( )Elijah October 28th
Good Stuff.
( )PAWEP October 30th
great job i’ll try it now
thx 
( )Webdesign Stuttgart November 1st
Guys your awesome… I love the details!!!
( )jack bobby November 3rd
Good job ….. I like it
( )Mads Rasmussen November 3rd
Great post.. love it
( )Pratik November 3rd
Well done, make more glowssius.
( )Pablo Augusto November 3rd
Can you please share your amazing gradient presets?
( )Cristian November 5th
Thank you for this fantastic tutorial.
( )Khalid November 10th
Thank you for this fantastic tutorial.
( )Steve November 10th
Really enjoyed this, and the tip on steps 33 > were excellent, never thought something that looked that nice would be so simple.
( )Steve November 12th
I liked the photoshop design so much I decided to slice it up and get it into an XHTML/CSS format, you can see my original PSD design here, as it isnt quite as polished as Razvan’s:
http://cooca.net/grafpedia/grafpedia_creativeblog.png
This is a screenie of the XHTML/CSS as it stands right now, I have absolutely no intention of using it for anything which is why I used the images from recent Tuts+ articles.
Forgive my not linking directly to the index page, as the code isn’t clean atm, and in IE6 is looks just pure embarrasing
http://cooca.net/grafpedia/grafpedia_html_css_cooca.png
Intend to clean up the code some more, add the sparkly bits to add some detail which is missing from the html which is in the PSD design right now, and then put it into Wordpress.
Really enjoyed playing with this tut, I’ll definately be doing more from Grafpedia.
Steve
( )Grafpedia November 12th
Your result is very good. From a long time i haven’t seen someone to create such a similar layout with mine. very good job, and i am waiting you to test the future tutorials i will write for psdtuts
Thanks
( )Razvan
Tyrone May November 18th
Cool layout design, very nice.
( )