SpyreStudios - Design and Development Magazine

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