31
Mar

How To Create a Rockin’ Website Layout In Photoshop

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:

Rockin Layout

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:

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“.

Rockin Layout

We’ll be using guides quite a bit, so we need to view our rulers. To do so go to View → Rulers.

Rockin Layout

Also we need to make sure that Guides are visible. Go to View → Extras.

Rockin Layout

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.

Rockin Layout

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.

Rockin Layout

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”.

Rockin Layout

Add a Gradient Overlay to your header background (“header_bg”) layer. Use the image below for reference.

Rockin Layout

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.

Rockin Layout

After you’ve written your website title, add a Drop Shadow to it:

Rockin Layout

Then add a Gradient Overlay:

Rockin Layout

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.

Rockin Layout

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.

Rockin Layout

Create another 1px wide vertical line. Also give it a Gradient Overlay according to the following image.

Rockin Layout

And you should have a nice looking separating line!

Rockin Layout

Before we move on to the next step, just make sure you organize your layers. Mine looks like this:

Rockin Layout

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

Rockin Layout

Make sure you align your text this way. Check the image below:

Rockin Layout

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:

Rockin Layout

Step 6

Using the Line Tool (U) Create a 3px line like the one below:

Rockin Layout

Give it some layer styles according to the following image:

Rockin Layout

Before we start creating the featured designs area, make sure to keep your layers grouped and well-organized. Here’s how mine looks:

Rockin Layout

Step 7

We’ll start this step by dragging a new horizontal guide according to the following image:

Rockin Layout

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”.

Rockin Layout

Add some layer styles to it. Use the image below for reference.

Rockin Layout

You should have something like this:

Rockin Layout

Using the Single Row Marquee Tool, create a 1px selection and click Shift+Backspace to fill it with white: #ffffff.

Rockin Layout

That makes a pixel perfect detail!

Rockin Layout

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

Rockin Layout

Add a Drop Shadow to your text. Check the image below:

Rockin Layout

You should have this nice big typography!

Rockin Layout

Align your text horizontally according to the following image:

Rockin Layout

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.

Rockin Layout

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.

Rockin Layout

Make sure that the wood texture layer is underneath “featured_bg” layer.

Rockin Layout

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.

Rockin Layout

Select the one in the middle, go to Edit → Free Transform and make your width negative. (in my case W: -277.7%).

Rockin Layout

As you can see it’s fading smoothly now!

Rockin Layout

In order to make the three copies one single piece, select the three layers of the three copies, Right-click → Convert to Smart Object.

Rockin Layout

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.

Rockin Layout

Now create a new layer and call it “overlay” then fill your selection with this color value: #2d1a14.

Rockin Layout

Set your layer opacity to 40% and Blend Mode to Overlay.

Rockin Layout

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.

Rockin Layout

Give it some layer styles according to the following image.

Rockin Layout

You should have something like this:

Rockin Layout

Duplicate your ellipse, but this time fill it with white: #ffffff.

Rockin Layout

Make three more copies of the ellipse and put them all in one group.

Rockin Layout

In order to leave equivalent spaces between our ellipses, select the five of them and click on Distribute left edges in the control bar.

Rockin Layout

Step 12

We’ll start creating the content area by dragging a new horizontal guide according to the following image.

Rockin Layout

With the Rectangular Marquee Tool (M) create a selection of 1020x550px and fill it with any color.

Rockin Layout

Add a Gradient Overlay to it. Use the image below for reference:

Rockin Layout

With the Single Row Marquee Tool create a 1px selection – like the one below – and fill it with white: #ffffff.

Rockin Layout

Pixel perfection!

Rockin Layout

Step 13

To be more accurate we’ll drag two new horizontal guides according to the following image.

Rockin Layout

Write some heading with the following character settings:

  • Font Family: Rockwell
  • Font size: 30px
  • Font weight: Regular
  • Anti-aliasing setting: Smooth
  • Color: #e18610

Rockin Layout

Write a sub-title with these character settings:

  • Font Family: Arial
  • Font size: 15px
  • Font weight: Regular
  • Anti-aliasing setting: Smooth
  • Color: #2d1a14

Rockin Layout

Drag two new horizontal guides according to the following image.

Rockin Layout

Write a text paragraph with these character settings:

  • Font Family: Arial
  • Font size: 15px
  • Font weight: Regular
  • Anti-aliasing setting: None
  • Color: #2d1a14

Rockin Layout

Step 14

Drag two more horizontal guides according to the following image.

Rockin Layout

Make a selection of about 480x100px – like the one below – and fill it with this color value: #f2f2f2. Call this layer “bg”.

Rockin Layout

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!)

Rockin Layout

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.

Rockin Layout

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!

Rockin Layout

Make another copy of your line and place it like the following.

Rockin Layout

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

Rockin Layout

Then write some text with these character settings:

  • Font Family: Arial
  • Font size: 15px
  • Font weight: Regular
  • Anti-aliasing setting: None
  • Color: #2d1a14

Rockin Layout

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.

Rockin Layout

Make sure to keep your layers organized. Like this:

Rockin Layout

Make two copies of what we’ve created in the previous two steps, and you should have this:

Rockin Layout

Finally, your content area layers should look like this:

Rockin Layout

Step 16

Again create another heading, just like the one on the left.

Rockin Layout

Write some text with these character settings:

  • Font Family: Arial
  • Font size: 15px
  • Font weight: Regular
  • Anti-aliasing setting: Smooth
  • Color: #e18610

Rockin Layout

Using the Line Tool (U) create a 3px line, about 440px width and fill it with this color value: #2d1a14.

Rockin Layout

With the Polygonal Lasso Tool (L) create a selection like the one below and fill it with this color value: #2d1a14.

Rockin Layout

Have you organized you layers?

Rockin Layout

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”.

Rockin Layout

Give it a stroke – use the image below for reference.

Rockin Layout

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.

Rockin Layout

Make three copies and place them like in the following image:

Rockin Layout

Make four layer groups and put each of the images in an individual group.

Rockin Layout

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

Rockin Layout

Write some text with these settings:

  • Font Family: Arial
  • Font size: 15px
  • Font weight: Regular
  • Anti-aliasing setting: None
  • Color: #2d1a14

Rockin Layout

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:

Rockin Layout

Give some layer styles according to the following image:

Rockin Layout

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

Rockin Layout

Give it a drop shadow. Use the image below for reference:

Rockin Layout

Make another copy of what we’ve created in this step!

Rockin Layout

Step 18

With the Rectangular Marquee Tool (M) create a selection of 1020x450px and fill it with this color value: #2f1c16.

Rockin Layout

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.

Rockin Layout

Step 19

Drag two new horizontal guides according to the following image.

Rockin Layout

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”.

Rockin Layout

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.

Rockin Layout

Using the Elliptical Marquee Tool (M) create a selection like the one below, and fill it with black: #000000.

Rockin Layout

Go to Filter → Blur → Gaussian Blur → radius: 2.5px.

Rockin Layout

Make a selection over the lower part of the blurry black shadow, and hit delete.

Rockin Layout

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”.

Rockin Layout

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.

Rockin Layout

With the Elliptical Marquee Tool (M) create a selection like the one below.

Rockin Layout

Click Shift+Backspace and fill it with Black: #000000.

Rockin Layout

Go to Filter → Blur → Gaussian Blur → Radius: 4px.

Rockin Layout

Step 20

Write a heading with these character settings:

  • Font Family: Rockwell
  • Font size: 30px
  • Font weight: Regular
  • Anti-aliasing setting: Smooth
  • Color: #fcf6c4

Rockin Layout

Add a Drop Shadow to it. Use the image below for reference:

Rockin Layout

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

Rockin Layout

Write some text with the following character settings:

  • Font Family: Arial
  • Font size: 15px
  • Font weight: Regular
  • Anti-aliasing setting: None
  • Color: #c27819

Rockin Layout

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”.

Rockin Layout

Select the “band” layer and click on Add layer mask at the bottom of the layers panel.

Rockin Layout

Set your gradient editor to a Black/White gradient.

Rockin Layout

Using the Gradient Tool (G) and with a linear gradient, drag from left to right.

Rockin Layout

Step 22

With the Ellipse Tool (U) create an ellipse of 40x40px and fill it with this color: #fcf6c4.

Rockin Layout

Give it a stroke. Use the image below for reference:

Rockin Layout

With the Custom Shape Tool (U) create an arrow, fill it with #c27819 and align it visually.

Rockin Layout

Add some layer styles to it. Use the image below for reference:

Rockin Layout

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

Rockin Layout

Step 23

Make a copy of what we’ve created in the previous four steps. and align to the right.

Rockin Layout

Use the same techniques shown here to create something like the following.

Rockin Layout

Continue creating the middle box, finally you should have something like this!

Rockin Layout

Make sure to keep your layers well-organized. Here’s how the box layers look:

Rockin Layout

And here’s how the footer layers look.

Rockin Layout

Step 24

We’re almost there! Drag a new horizontal guide after 50px.

Rockin Layout

Using the Rectangular Marquee Tool (M), create a selection of about 1020x115px and fill it with any color.

Rockin Layout

Give it a Gradient Overlay – use the image below for reference:

Rockin Layout

With the Single Row Marquee Tool create a 1px selection and fill it with this color value: #482e27.

Rockin Layout

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

Rockin Layout

With the same character settings, write your copyright text and align it to the right.

Rockin Layout

Don’t forget to organize your small footer layers. Here’s how mine look:

Rockin Layout

Conclusion

There we have it! Hopefully you should have something like this:
Rockin Layout

Download The PSD file

Download the ZIP file here (5.7MB) (downloaded 1382 times already!)

Your Turn To Talk

I hope you enjoyed this tutorial! Please feel free to chime in and leave a comment below :)

jump to the comment form ↓

  • User Gravatar Design That Rocks
    March 31st, 2010

    Great tut!

    Although I do prefer a different Design That Rocks website! LOL

    http://www.designthatrocks.com

    :)

  • User Gravatar Evan Skuthorpe
    March 31st, 2010

    Nice tutorial. Not a fan of the overall design but some really nice touches! It’s inspired me to do something similar!

  • User Gravatar giochi gratis
    March 31st, 2010

    Very nice. maybe u can make a wordpress conversion…

  • User Gravatar Lena Tailor
    March 31st, 2010

    Great tutorial. very informative and helpful for beginners and professional.
    Thanks for including those cool tricks..

  • User Gravatar Eli
    March 31st, 2010

    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!

  • User Gravatar Vincent
    March 31st, 2010

    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!

  • User Gravatar zauberer & hütchenspieler
    March 31st, 2010

    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.

  • User Gravatar Kiyamia Designs
    March 31st, 2010

    Nice tutorial. Very clear and easy to follow ;)

  • User Gravatar Mahmoud
    April 1st, 2010

    @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.

  • User Gravatar Halis KAYA
    April 1st, 2010

    Great tutorial.

    Thanks.

  • User Gravatar Callum Chapman
    April 1st, 2010

    Such a great tutorial Mahmoud, it’s great that I’m seeing you everywhere round the design blogosphere now. Keep it up!

  • User Gravatar PSDDude
    April 1st, 2010

    Wow hard work ! A lot of steps , very detailed ! thanks for sharing

  • User Gravatar Tincho
    April 1st, 2010

    Nice and detailed tut.Thanks!

  • User Gravatar Mahmoud
    April 1st, 2010

    @All: Thanks guys! :)

    @Callum: Yeah, I really enjoy writing for blogs, it’s also a good way of getting known. Thanks! :)

  • User Gravatar h1brd
    April 1st, 2010

    hey! maybe it’s just me but when i tried to download the psd at the end, it said file not found :(

  • User Gravatar Jon Phillips
    April 1st, 2010

    @h1brd: yes, we just switched server. The download will be back up real soon. Sorry about that.

  • User Gravatar Florin
    April 2nd, 2010

    Thanks! Very nice.

  • User Gravatar Flick
    April 2nd, 2010

    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.

  • User Gravatar Marcell Purham
    April 3rd, 2010

    Great tutorial! Very detailed. NICE

  • User Gravatar billy
    April 5th, 2010

    Interesting tutorial -was a real pleasure to go through all the steps.
    Thanks !

  • User Gravatar Derrick Workman
    April 7th, 2010

    Thanks for the tut man, but more importantly thanks for those gradients. You have a great simple set there.

    Derrick

  • User Gravatar Cardview
    April 8th, 2010

    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!

  • User Gravatar giochi
    April 11th, 2010

    very nice and detailed tutorial

    Thanks

  • User Gravatar Aaron Kato
    April 13th, 2010

    Very good tut, even if i don’t know what rocks in it, it’s okay :)

  • User Gravatar Mahmoud
    April 13th, 2010

    @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! :)

  • User Gravatar Beth
    June 7th, 2010

    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.

  • User Gravatar Arvin
    June 9th, 2010

    Very clear tutorial, and the design inspired me to follow your guide, good jobs.
    Easy to follow.. congratulation

  • User Gravatar victor max
    June 15th, 2010

    nice tutorial

  • User Gravatar Tammy
    June 20th, 2010

    Wow, what a great tutorial!

  • User Gravatar Frank
    July 7th, 2010

    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.

  • User Gravatar Agi
    July 15th, 2010

    Good job Mahmoud! Very very detailed! Thanks!

  • User Gravatar Alex
    July 19th, 2010

    Thank you, I’m learning Photoshop and your tutorial is very useful!

  • User Gravatar Katie
    July 26th, 2010

    Congrats, your tutorial has been added to a list of the best Photoshop website layout tutorials, featured here:
    http://smileyhelper.com/inspir.....tutorials/
    :)

  • User Gravatar Rosario
    August 6th, 2010

    OMG you ve just saved my life! Great post! Thanks!

Who Linked To This Post?

  1. designfloat.com
  2. How To Create a Rockin’ Website Layout In Photoshop | Design Newz
  3. 25 Best Posts of the Design Community-March 2010 |
  4. #WDNDL for 04/02/10 – Freelancer Advice, CSS, jQuery, Photoshop Tutorials & Inspirations! | AndySowards.com :: Daily Professional Web Design, Development, Programming Freelancer, Hacks, Downloads, Math and being a Web 2.0 Hipster?
  5. Saturday Swirl 11: Tasty Snacks From the Design Community - Visual Swirl
  6. 5 Fresh Photoshop Web Design Layout Tutorials | Design Reviver
  7. Ultimate Roundup Of Photoshop Web Layouts Tutorials

Share your thoughts, leave a comment!