In this Photoshop tutorial we’re going to create a chocolate-looking website layout. As we go through the different steps, we’ll deal with many techniques, some big typography, wood texturing, and so on. I hope you like this tutorial!
Before we get started let’s have a look at what we’ll be creating:
Tutorial Details
- Program: Adobe Photoshop CS4
- Difficulty: Intermediate
- Estimated Completion Time: About 2 hours
External Sources
Before you get started, make sure you have the following elements:
Images:
- Wood Texture #1: from iStockPhoto
- Wood Texture #2: from iStockPhoto
- Function Free Icon Set: from WeFunction
Fonts:
- Arial: Available on all operating systems.
- Rockwell: You can get it from Fonts.com. (or you can always substitute Rockwell for your favorite slab serif font)
Step 1
We’ll be using the 960s Grid System (download here) to keep everything aligned. Once you have it, open the included Photoshop document called: “960_grid_24_col.psd“. And then hide the group called “24 Col Grid“.
We’ll be using guides quite a bit, so we need to view our rulers. To do so go to View → Rulers.
Also we need to make sure that Guides are visible. Go to View → Extras.
Our final design is a bit taller than the current height. So we need to adjust our canvas size. Go to Image → Canvas Size, Height: 1500px.
Step 2
We need to set lower borders to our header area, by dragging a new horizontal guide after 100px. Go to View → New Guide. Orientation: Horizontal, Position: 100px.
Using the Rectangular Marquee Tool (M) make a selection of 1020x100px. Click Shift+Backspace to fill it – with any color – then call this layer “header_bg”.
Add a Gradient Overlay to your header background (“header_bg”) layer. Use the image below for reference.
Step 3
Write your website title, with the following character settings:
- Font Family: Rockwell
- Font size: 35px
- Font weight: Regular
- Anti-aliasing setting: Smooth
- Color: Won’t matter, we’ll add a Gradient Overlay
Also make sure to align your text according to the following image.
After you’ve written your website title, add a Drop Shadow to it:
Then add a Gradient Overlay:
In order to align our website title correctly, select its layer and the “header_bg” layer. Click on Align vertical centers while you have both layers selected.
Step 4
With the Line Tool (U) create a 1px wide vertical line – like the one below – and then add a Gradient Overlay to it. Use the image below for reference.
Create another 1px wide vertical line. Also give it a Gradient Overlay according to the following image.
And you should have a nice looking separating line!
Before we move on to the next step, just make sure you organize your layers. Mine looks like this:
Step 5
Write the navigation text, with these character settings:
- Font Family: Rockwell
- Font size: 40px
- Font weight: Regular
- Anti-aliasing setting: Smooth
- Color: #d9800e – #301d17
Make sure you align your text this way. Check the image below:
Duplicate the separating line you created in step four, make three copies of it (depends on how much pages you have in your navigation) and place them like the in following screenshot:
Step 6
Using the Line Tool (U) Create a 3px line like the one below:
Give it some layer styles according to the following image:
Before we start creating the featured designs area, make sure to keep your layers grouped and well-organized. Here’s how mine looks:
Step 7
We’ll start this step by dragging a new horizontal guide according to the following image:
With the Rectangular Marquee Tool (M) create a selection of 1020x350px. Click Shift+Backspace to fill it (with any color) and call this layer “featured_bg”.
Add some layer styles to it. Use the image below for reference.
You should have something like this:
Using the Single Row Marquee Tool, create a 1px selection and click Shift+Backspace to fill it with white: #ffffff.
That makes a pixel perfect detail!
Step 8
Big typography always look nice, so let’s work on that.
Using the Horizontal Type Tool (T) type some text (I personally wrote: “WE MAKE DESIGN THAT ROCKS!”) with these character settings:
- Font Family: Rockwell
- First Line: 55px
- Second Line: 132px
- Third Line: 132px
- Font weight: Bold
- Anti-aliasing setting: Sharp
- Color: #e18611 – #e4e4e4
Add a Drop Shadow to your text. Check the image below:
You should have this nice big typography!
Align your text horizontally according to the following image:
In order to get right vertical alignment, Select the featured background (“featured_bg”) layer and the text layer, then click on Align vertical centers while having both layers selected.
Step 9
Get this wood texture form iStockPhoto. (Note: You can skip this step by getting a large size version, otherwise save your money and stick with me! ;))
In order to place your texture in your document, go to File → Place → Locate to where you’ve downloaded it and click Place.
Make sure that the wood texture layer is underneath “featured_bg” layer.
Select the wood texture’s layer, right-click on it and choose Duplicate Layer. Make two copies of it, and put them all next to each other.
Select the one in the middle, go to Edit → Free Transform and make your width negative. (in my case W: -277.7%).
As you can see it’s fading smoothly now!
In order to make the three copies one single piece, select the three layers of the three copies, Right-click → Convert to Smart Object.
Step 10
Needs to be a bit darker, right? Let’s do that! We’ll start by making a selection of about 1020x55px over the wood texture.
Now create a new layer and call it “overlay” then fill your selection with this color value: #2d1a14.
Set your layer opacity to 40% and Blend Mode to Overlay.
Step 11
Using the Ellipse Tool (U) create an ellipse of 20x20px and fill it with Black: #000000. It will work as a sliding button.
Give it some layer styles according to the following image.
You should have something like this:
Duplicate your ellipse, but this time fill it with white: #ffffff.
Make three more copies of the ellipse and put them all in one group.
In order to leave equivalent spaces between our ellipses, select the five of them and click on Distribute left edges in the control bar.
Step 12
We’ll start creating the content area by dragging a new horizontal guide according to the following image.
With the Rectangular Marquee Tool (M) create a selection of 1020x550px and fill it with any color.
Add a Gradient Overlay to it. Use the image below for reference:
With the Single Row Marquee Tool create a 1px selection – like the one below – and fill it with white: #ffffff.
Pixel perfection!
Step 13
To be more accurate we’ll drag two new horizontal guides according to the following image.
Write some heading with the following character settings:
- Font Family: Rockwell
- Font size: 30px
- Font weight: Regular
- Anti-aliasing setting: Smooth
- Color: #e18610
Write a sub-title with these character settings:
- Font Family: Arial
- Font size: 15px
- Font weight: Regular
- Anti-aliasing setting: Smooth
- Color: #2d1a14
Drag two new horizontal guides according to the following image.
Write a text paragraph with these character settings:
- Font Family: Arial
- Font size: 15px
- Font weight: Regular
- Anti-aliasing setting: None
- Color: #2d1a14
Step 14
Drag two more horizontal guides according to the following image.
Make a selection of about 480x100px – like the one below – and fill it with this color value: #f2f2f2. Call this layer “bg”.
While selecting the same layer (“bg”) click on Add layer mask (look at the bottom of the layers panel, can you find a rectangle with a circle inside of it? Yep, that one!)
Make a Black, White, Black gradient; and with the Gradient Tool (G) (linear gradient) start dragging from right side and end dragging at the left side.
With the Line Tool (U) create a 1px line, fill it with this color value: #ababab and place it like the following image:
Use the same instructions and add a layer mask to it, and drag with the gradient tool. You should have something like the image below!
Make another copy of your line and place it like the following.
Step 15
Write a heading (i.e. a featured service or something like that) with the following character settings:
- Font Family: Rockwell
- Font size: 25px
- Font weight: Regular
- Anti-aliasing setting: Smooth
- Color: #e18610
Then write some text with these character settings:
- Font Family: Arial
- Font size: 15px
- Font weight: Regular
- Anti-aliasing setting: None
- Color: #2d1a14
Download this icon set: Function Free Icon Set from WeFunction and place the icons like on the following image.
To make sure it’s vertically aligned, select its layer and “bg” layer, then click on Align vertical centers in the control bar.
Make sure to keep your layers organized. Like this:
Make two copies of what we’ve created in the previous two steps, and you should have this:
Finally, your content area layers should look like this:
Step 16
Again create another heading, just like the one on the left.
Write some text with these character settings:
- Font Family: Arial
- Font size: 15px
- Font weight: Regular
- Anti-aliasing setting: Smooth
- Color: #e18610
Using the Line Tool (U) create a 3px line, about 440px width and fill it with this color value: #2d1a14.
With the Polygonal Lasso Tool (L) create a selection like the one below and fill it with this color value: #2d1a14.
Have you organized you layers?
Using the Rectangular Marquee Tool (M) create a selection of about 205x55px – place it like the following – and fill it with any color. Call this layer “image_holder”.
Give it a stroke – use the image below for reference.
Place an image of a featured design. Make sure it’s above the “image_holder” layer, right-click on the image layer and choose Create Clipping Mask.
Make three copies and place them like in the following image:
Make four layer groups and put each of the images in an individual group.
Step 17
Drag a new horizontal guide after 30px. Then write a heading with the following character settings:
- Font Family: Rockwell
- Font size: 25px
- Font weight: Regular
- Anti-aliasing setting: Smooth
- Color: #e18610
Write some text with these settings:
- Font Family: Arial
- Font size: 15px
- Font weight: Regular
- Anti-aliasing setting: None
- Color: #2d1a14
Using the Rounded Rectangle Tool (U), create a rectangle of 170x45px – 5px radius, fill it with any color and align it like in the following image:
Give some layer styles according to the following image:
Write a word on the button (I put “HIRE US” just so it’s related to the heading above) with these character settings:
- Font Family: Rockwell
- Font size: 30px
- Font weight: Regular
- Anti-aliasing setting: Sharp
- Color: #6b3d0c
Give it a drop shadow. Use the image below for reference:
Make another copy of what we’ve created in this step!
Step 18
With the Rectangular Marquee Tool (M) create a selection of 1020x450px and fill it with this color value: #2f1c16.
With the Single Row Marquee Tool create a 1px selection (*to have the right effect don’t make the selection right over the upper edge of the footer area, but nudge it down just a little bit – about 1-2px).
Now fill your selection with this color value: #6d5c57.
Step 19
Drag two new horizontal guides according to the following image.
Using the Rounded Rectangle Tool (U) create a rectangle of 250x25px – 5px radius, fill it with any color, and place it like in the following image.
Call this layer “wood_bg”.
Get this wood texture from iStockPhoto. Import it, and put its layer above the “wood_bg” layer, right-click on it and choose Create Clipping Mask.
Using the Elliptical Marquee Tool (M) create a selection like the one below, and fill it with black: #000000.
Go to Filter → Blur → Gaussian Blur → radius: 2.5px.
Make a selection over the lower part of the blurry black shadow, and hit delete.
Using the Rounded Rectangle Tool (U) create a rectangle of 223x223px – 5px radius, fill it with this color value: #6b3d0c, and align it like in the following image. Call this layer: “box_bg”.
Select “box_bg” layer, click on Add layer mask. Make a selection over the lower part of the rounded rectangle and click Shift+Backspace to fill it with Black: #000000.
With the Elliptical Marquee Tool (M) create a selection like the one below.
Click Shift+Backspace and fill it with Black: #000000.
Go to Filter → Blur → Gaussian Blur → Radius: 4px.
Step 20
Write a heading with these character settings:
- Font Family: Rockwell
- Font size: 30px
- Font weight: Regular
- Anti-aliasing setting: Smooth
- Color: #fcf6c4
Add a Drop Shadow to it. Use the image below for reference:
Write a sub-title with these the following character settings:
- Font Family: Arial
- Font size: 15px
- Font weight: Regular
- Anti-aliasing setting: None
- Color: #fcf6c4
Write some text with the following character settings:
- Font Family: Arial
- Font size: 15px
- Font weight: Regular
- Anti-aliasing setting: None
- Color: #c27819
Step 21
With whatever tool you like, create a rectangle of about 210x30px, fill it with this color value: #c27819 and place it like the following image. Call this layer: “band”.
Select the “band” layer and click on Add layer mask at the bottom of the layers panel.
Set your gradient editor to a Black/White gradient.
Using the Gradient Tool (G) and with a linear gradient, drag from left to right.
Step 22
With the Ellipse Tool (U) create an ellipse of 40x40px and fill it with this color: #fcf6c4.
Give it a stroke. Use the image below for reference:
With the Custom Shape Tool (U) create an arrow, fill it with #c27819 and align it visually.
Add some layer styles to it. Use the image below for reference:
Write the word “READ MORE” with the following character settings:
- Font Family: Arial
- Font size: 15px
- Font weight: Regular
- Anti-aliasing setting: Smooth
- Color: #2f1c16
Step 23
Make a copy of what we’ve created in the previous four steps. and align to the right.
Use the same techniques shown here to create something like the following.
Continue creating the middle box, finally you should have something like this!
Make sure to keep your layers well-organized. Here’s how the box layers look:
And here’s how the footer layers look.
Step 24
We’re almost there! Drag a new horizontal guide after 50px.
Using the Rectangular Marquee Tool (M), create a selection of about 1020x115px and fill it with any color.
Give it a Gradient Overlay – use the image below for reference:
With the Single Row Marquee Tool create a 1px selection and fill it with this color value: #482e27.
Write your sub-navigation text with the following character settings:
- Font Family: Arial
- Font size: 15px
- Font weight: Regular
- Anti-aliasing setting: None
- Color: #c27819 – #2f1c16
With the same character settings, write your copyright text and align it to the right.
Don’t forget to organize your small footer layers. Here’s how mine look:
Conclusion
There we have it! Hopefully you should have something like this:
Download The PSD file
Your Turn To Talk
I hope you enjoyed this tutorial! Please feel free to chime in and leave a comment below :)
Author: Mahmoud Khaled
Mahmoud is a young web and graphic designer from Egypt. He’s also a blogger and tutorial writer. Send him a tweet @MahmoudKhaled, connect with him on Facebook, or visit his blog/site called mkhaled.com.
Great tut!
Although I do prefer a different Design That Rocks website! LOL
http://www.designthatrocks.com
:)
Nice tutorial. Not a fan of the overall design but some really nice touches! It’s inspired me to do something similar!
Very nice. maybe u can make a wordpress conversion…
Great tutorial. very informative and helpful for beginners and professional.
Thanks for including those cool tricks..
Every Photoshop tutorial should be written like this from now on!
Clear, detailed etc. Not just like: create something like this, about the size of this… :D
Really nice, worth the work you put into it!
Great tut! Just one thing. Can you make a gradient pack with all the gradients that you have in your gradients folder? Because they look really nice!
wow amazing tutorial, it was fun to read it and very informative to see some tricks from you,
i wish there where more tuts like this …
so i got some ideas for my website, but not so much time to do this all and so often i can´t do all the stuff by my self …
so thanks now i can do a little bit more :)
V.
Nice tutorial. Very clear and easy to follow ;)
@All: Happy you liked it! Thanks for the appreciates :)
@giochi: Unfortunately, I don’t code WordPress. though, you can look around the web, I’m pretty sure you’ll find WordPress tutorials.
@Vincent: I’ve released a freebie of this gradients set on my blog: http://mkhaled.com/freebie-clean-gradients-set/ Hope you find them useful.
Great tutorial.
Thanks.
Such a great tutorial Mahmoud, it’s great that I’m seeing you everywhere round the design blogosphere now. Keep it up!
Wow hard work ! A lot of steps , very detailed ! thanks for sharing
Nice and detailed tut.Thanks!
@All: Thanks guys! :)
@Callum: Yeah, I really enjoy writing for blogs, it’s also a good way of getting known. Thanks! :)
hey! maybe it’s just me but when i tried to download the psd at the end, it said file not found :(
@h1brd: yes, we just switched server. The download will be back up real soon. Sorry about that.
Thanks! Very nice.
Thanks very much. I really enjoyed scrolling through this guide as it gives a really detailed breakdown about what to do/colours to use; some photoshop tutorials tend to skip these details (as pointed out in other comments) and some of the techniques here look really useful.
Great tutorial! Very detailed. NICE
Interesting tutorial -was a real pleasure to go through all the steps.
Thanks !
Thanks for the tut man, but more importantly thanks for those gradients. You have a great simple set there.
Derrick
Great tutorial. I like the colors and layout. It would be nice if someone would write a PSD to HTML tutorial based on this mockup :) Thanks!
very nice and detailed tutorial
Thanks
Very good tut, even if i don’t know what rocks in it, it’s okay :)
@Aaron
HaHa, I see your point, Aaron. It’s just that huge typography sometimes makes that feel.
After all, it’s a tutorial. And I believe that a tutorial with over 120+ screen shots should be a pleasure for the reader! :)
WOW! Simply blown away by how this layout looks. Really clean and professional looking. I’ve tried numerous times doing a web design somewhat like this on my own but it always turn out odd in a way. In the end, I decided to use the professional services of an online design site offering web design packages instead(http://www.logodesignstation.com) and got the design I wanted at an affordable price and fast too. I did provide this link for reference and inspiration to my designer as I liked how yours look. Thanks for posting this, by the way. It looks really modern and cool.
Very clear tutorial, and the design inspired me to follow your guide, good jobs.
Easy to follow.. congratulation
nice tutorial
Wow, what a great tutorial!
Wow! Such a detailed instructions on how to do site. This will be a great guide to everybody else especially those who are new into this craft.
Good job Mahmoud! Very very detailed! Thanks!
Thank you, I’m learning Photoshop and your tutorial is very useful!
Congrats, your tutorial has been added to a list of the best Photoshop website layout tutorials, featured here:
http://smileyhelper.com/inspiration/50-photoshop-website-layout-tutorials/
:)
OMG you ve just saved my life! Great post! Thanks!
PSD to XHTML CSS JS done! Check my Github repo for the code. Planning to write a tutorial about it. ;)
@Taty
Sounds good!
As for the tutorial, make sure to contact Jon (the founder).
Currently I’m still looking for good and helpful tutorials which explains how to create a cool website layout. A few moments ago I comment that I like another tutorial very much. But this one is much cooler than the other one. And so I have to thank you very much for writing this useful tutorial about using Photoshop for the creation of beautiful website layouts.
Please keep on writing tuts like this one!
Greets from Germany
Great tutorial. I love how it turned out. Thanks for sharing.
May I ask where you get your gradients? I simply love them, and I have saw that set before on other web-tutorials. I just love them! Thanks for this awesome tutorial, too. Keep it up!
Great tutorial, may use some of the tips as inspiration in new projects
In my Photoshop document my rulers start at 0-1-2-3-4 but on your screen shots your rulers are 0-50-100-150 can you explain why mine are different please?
Wow! That was a great post. It was long, but a lot of detail. Thanks for not skipping steps, it seems in some many tutorials online a couple key segments get left out, and if you do try to follow the example you find yourself frustrated. Great Man
Nice tutorial. Just one little problem……”Testimonials” is spelled incorrectly.
Such a great tutorial, I tried myself and the result is awesome. Tutorial was easy to follow till completion. Helped me allot to learn new things!