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 5583 times already!)

Your Turn To Talk

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





About the author:

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.

Comments:

Scroll back to the top