Download Source Files
- Source files for this tutorial are available to Premium members.
Get a Premium Membership
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.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Razvan
Premium Members
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription. Join Now
Related Posts
Premium Membership
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription
Digital Signage Today - More
Photoshop Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Other Plus Sites ...
aetuts+ audiotuts+ vectortuts+ tuts+ phototuts+ cgtuts+ nettuts+ psdtuts+ activetuts+Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Psdtuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
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?
Tutorial added to thewebtuts.com
excellent article for photoshop starters. thanks mate!
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
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.
My morning is better with this article.
thanks for this. appreciate it.
nice!!!
nice! tuts… i like it.. its simple and easy to make.. good job psdtuts..
keep it up..
love it .. I wonder the gradient pallete is a customized one? or came in dafault in CS4 ?? Anyone can answer ?
The gradient pallete you can find on my website. search for 27000 photoshop gradients
I don’t understand why people are using Photoshop for website comps when Fireworks is available.
Because it’s better.
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
wow
need to try
Very nice. Buy how can I use this?
I am newbie in web designer.
Tks
good one… thanks for sharing.
The 960 grid system is something really new to me!
I see this sort of thing as something to learn the basics from, but please don’t describe this as creative.
Great tutorial
Great tut I loved it and the others of yours Ive done as well, thanks =)
Great tuto.
Thankx a lot Razvan.
And your custom gradient preset is so superb.
Nice Tutorial! Thanks a lot.
sorry.. but sometimes a bit less is more
Nice, but how can i get those custom gradients that are in this tutorial.
Good Stuff.
great job i’ll try it now
thx 
Guys your awesome… I love the details!!!
Good job ….. I like it
Great post.. love it
Well done, make more glowssius.
Can you please share your amazing gradient presets?
Thank you for this fantastic tutorial.
Thank you for this fantastic tutorial.
Really enjoyed this, and the tip on steps 33 > were excellent, never thought something that looked that nice would be so simple.
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
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
Cool layout design, very nice.
I liked this tutorial, So I maked an example but with another language “ARABIC”, I tryed to make it good but he has more thinks to add:
http://m7ml.com/uploads6/e60f7f284e.png
from this tut I’m now interrested to GRAFPEDIA, i think that I’ll learn a lot from this site, and pass good times.
Thanks My teacher Razvan
exelent tut!! I need some more… tnks
nice tut
Thanks..
I somehow dont agree with a few things, but its great anyways.
Find a new date for the new year.
Adult Friend Finder is the world’s oldest, biggest adult dating site. They know how to hook you with a new partner just when you need it.
See for yourself at http://katy.xmatch.com.
Nice tuts….tks for sharing, here my result: http://giuliandrimba.deviantart.com/art/Blog-layout-148840867
What WordPress theme are you using?
Hi guys just a newbie here! how to get rid of the grid?whats the short cut keys for that?im having trouble with viewing the design because of the grid so how can I get rid of the grid temporarily to view the design
Nice tutorial
hey i’m interested in designing my own blog and definitely wanna learn all these stuffs. but let’s say i finished my design, like the one above, i was wondering how can i code it i mean, in a Blogger (blogger.com) way..u know compatible with the posting, archiving, the widgets in blogger. is there a guide like the grid system? i’m really noob sorry…hope u get what i’m saying.
very great tut. hope can make like this ..
that goods creation, but i could’nt follow you….:), i must learn to hard both photoshp n web design.
wow, nice share