[Re]Encoded.com

How to create an elegant web layout in Photoshop

In this tutorial I will show you how to create an elegant web layout in Photoshop using thin lines, subtle gradients and beautiful typography.

Final Result

Have a look at the layout that we’ll be creating in this tutorial.

Step 1 – The 960 Grid System

First, download the 960 Grid System and unzip the archive. Then go to the “photoshop” folder (you will find it inside the “templates” folder) and open the “960_grid_24_col.psd” file in Photoshop. This .psd file has a grid of 24 columns.

The red bars that you see are located inside the “24 Col Grid” group. When you want to hide/show the grid, you can simply click on the eye icon of this group. We will create our layout between these red bars.

The file also contains guides that are very helpful when designing a web layout. To show/hide the guides, go to View > Show > Guides (Ctrl/Cmd + ; ).

Step 2 – Increasing the size of the canvas

Go to Image > Canvas Size and set the width to 1920px and the height to 1250px.

Now we will change the color of the background to a light yellow. Click on the “Background” layer to make it active. Then use the Paint Bucket Tool (G) to fill the background with the color #f6e8bc.

Step 3 – Creating the header

Create a new group (Layer > New > Group) and name it “header”. Then make sure that your Info panel is opened (Window > Info – F8). You will need it to see the exact size of the shapes that you will create in this tutorial.

Select the Rectangle Tool (U) and create a rectangle with the height 10px and the color #3c1927 at the top of your document. Name this layer “top bar”.

Step 4

Use the Rectangle Tool (U) again to create a rectangle with the height 120px and the color #542437 beneath the one from the previous step. Then double-click on this layer to open the Layer Style window and use the settings from the following image.

Step 5

Select the Line Tool (U), set the weight to 1px and the color to #2f141f. Then hold down the Shift key and drag a horizontal line from the right edge of your document to the left one. Move the line at the bottom of the first rectangle and name this layer “1px dark line”.

Duplicate the line layer (Ctrl/Cmd + J), select the Move Tool (V) and hit the up arrow once to move this new line one pixel up. Change the color of this line to #4e2133 and name the layer “1px light line”.

Step 6 – Writing the name of the layout

Select the Type Tool (T) and write the name of your web layout in the header. I used the font Garamond Premier Pro Bold with the color #ecd078. Then double-click on the text layer to open the Layer Style window and use the settings from the following image.

Note: make sure the guides are visible (Ctrl/Cmd + ; ) and move the text to the left edge of the layout. Take a look at the next image for reference.

Step 7 – Adding a subtle gradient under the name of the layout

Now we will create a white to transparent gradient under the text. Go to Layer > New Fill Layer > Gradient and use the settings from the following image. To move the gradient, click on your image and move the cursor while the Gradient Fill window is opened. Set the blend mode of this layer to Overlay 25% and put it beneath the text layer.

Step 8 – Creating the navigation bar

Create a new group and name it “navigation bar”. Select the Rectangle Tool (U) and create a rectangle beneath the header with the height 40px and the color #c02942. Double-click on this layer to open the Layer Style window and use the settings from the following image for Gradient Overlay.

Step 9

Select the Line Tool (U) and set the weight to 1px. Then create two horizontal lines at the top of the navigation bar. For the dark line use the color #4e121c and name this layer “1px dark line top”. For the light line use the color #ed3453 and name this layer “1px light line top”.

Step 10

Create two more lines with the weight 1px at the bottom of the navigation bar. Use the color #972437 for the dark line and #e3314e for the light one.

Step 11

Select the Type Tool (T) and write the name for your navigation menu items. Use a bright yellow color (#f2e9cc) and a serif font (I used Garamond Premier Pro Semibold).

Step 12 – Creating separators for the navigation bar

Create a new group inside the “navigation bar” group, name it “separators” and set its opacity to 75%. Select the Line Tool (U) and drag a vertical line from the top of the navigation bar to the bottom using the color #8a1e30. Then create a new line next to the first one using the color #d72e4b.

Select these two lines, duplicate them (drag them over the ‘Create a new layer’ button from the Layers panel) and move them to the right, between the first two navigation menu items. Repeat this process until you have as many separators as you need.

Step 13

Now we will use a mask to make the separators fade away at the top and at the bottom. Add a mask to the “separators” group (Layer > Layer Mask > Reveal All) and set the foreground color to black. Then select the Gradient Tool (G), hold down the Shift key and drag a vertical black to transparent gradient at the top of the navigation bar. Repeat this for the bottom area of the navigation bar as well.

Step 14 – Adding a gradient beneath the navigation bar

Create a new layer. Then select the Rectangular Marquee Tool (M) and create a selection like the one you see in the following image. Select the Gradient Tool (G), hold down the Shift key and drag a #b6aa86 to transparent gradient from the top of the selection to the bottom. Hit Ctrl/Cmd+D to deselect. Use the Move Tool (V) to move this layer 1px beneath the navigation bar. Name this layer “gradient” and set its opacity to 25%.

Step 15

Write a text beneath the navigation bar using the Type Tool (T) and the color #542437.

Step 16 – Creating a content carousel

Create a new group and name it “featured”. Create another group inside the first one and name it “top separator”.

Use the Line Tool (U) to create two horizontal lines with the weight 1px. For the first one use the color #f7efd3 and for the second one use the color #c7bc98. Set the opacity of these two layers to 60%.

Create a new layer. Select the Rectangular Marquee Tool (M) and create a rectangular selection right above the two lines. Then hold down the Shift key and drag a #b6aa86 to transparent gradient (G) from the bottom of the selection to the top. Set the opacity of this layer to 15% and name it “gradient”.

Step 17

Add a mask to the “top separator” group (Layer > Layer Mask > Reveal All). Then drag two horizontal black to transparent gradients (G) – one in the left side of the separator and another one in the right side. Take a look at the following image for reference. You can also activate the guides to help you drag these gradients.

Step 18

Duplicate the “top separator” group by dragging it over the ‘Create a new layer’ button from the bottom of the Layers panel. Then go to Edit > Transform > Flip Vertical. Move this new separator down at a distance of about 240px from the first one. Change the name of this group to “bottom separator”.

Step 19 – Adding the featured images

Open three images in Photoshop and move them into your first document using the Move Tool (V). I used images of some of my previous works.

Activate the grid. Then crop the images and use Free Transform (Ctrl/Cmd + T) to change their size. I have chosen to make the middle image bigger than the other two ones. My middle image has the dimensions 360px by 200px and the other two ones have 280px by 166px. Take a look at the following image for reference.

Step 20

Now we will add a double stroke effect to the images. Double-click on the middle image layer to open the Layer Style window and use the settings from the following image.

Step 21

For the other two images use the same Layer Style settings, but change the size of the Inner Glow to 5.

Step 22 – Creating a shadow beneath each image

Select the Ellipse Tool (U), hold down the Shift key and create a small circle in the middle of your big image using the color #847c63 (1). Go to Edit > Free Transform (Ctrl/Cmd + T) and stretch the circle as you see in the following image (2, 3).

Right-click on this layer and select Convert to Smart Object. Then go to Filter > Blur > Gaussian Blur and add a 3px gaussian blur (4). Name this layer “shadow 1″, move it beneath the layer of the image (5) and set its opacity to 20% (6).

Step 23

Repeat the previous step for the other two images, but set the opacity of the shadow layers to 15%.

Step 24 – Creating the navigation arrows

Now we will create two navigation arrows for the content carousel – one in the right side and one in the left side.

Select the Ellipse Tool (U), hold down the Shift key and create a circle with the dimensions 50px by 50px and the color of the layout’s background (#f6e8bc). Move this circle in the right side of the third image, as you see below.

Double-click on this layer to open the Layer Style window and use the settings from the following image for Outer Glow and Stroke. Name this layer “right circle”.

Step 25

Convert the “right circle” layer into a smart object (right-click on it and select Convert to Smart Object). Use the Rectangular Marquee Tool (M) to select the right half of this circle. Then erase the selected area by going to Layer > Layer Mask > Hide Selection.

Step 26

Duplicate the “right circle” layer (Ctrl/Cmd + J). Then go to Edit > Transform > Flip Horizontal. Name this layer “left circle” and use the Move Tool (V) to move it in the left side of the content carousel.

Step 27 – Creating two navigation arrows for the content carousel

Copy this symbol “»”, select the Type Tool (T), click on your image and paste it. I used the font Garamond Premier Pro Bold with the size 48px and the color #542437. Depending on which font you will use, your arrows will look different. Move this arrow in the middle of your right circle and name the layer “right arrow”.

Duplicate the “right arrow” layer (Ctrl/Cmd + J). Use the Move Tool (V) to move it in the left side of the content carousel. Then replace the first symbol with this one “«”. Name this layer “left arrow”.

Step 28 – Creating a vertical separator

Create a new group and name it “vertical separator”. Select the Line Tool (U) and create a vertical line in the middle of your layout with the height 600px and the color #f7efd3. Name this layer “light line”. Duplicate this line layer (Ctrl/Cmd + J) and change its color to #c7bc98. Then select the Move Tool (V) and hit the right arrow once to move this new line 1px to the right. Name this layer “dark line”.

Step 29 – Creating the ‘Services’ area

Create a new group and name it “services”. Then select the Type Tool (T) and write the word “Services” with the size 32px and the color #542437 in the left side of the layout.

Step 30

Add three representative images beneath the word “Services”. Activate the guides to help you arrange the images. Then crop each image to have the size 140px by 180px. Add a double stroke effect to each image using the Layer Style window and the settings below.

Step 31

Use the Rectangle Tool (U) to create a rectangle with the dimensions 138px by 30px and the color #94516b. Double-click on this layer to open the Layer Style window and use the settings from the following image. Duplicate this layer two times (Ctrl/Cmd + J) and put a rectangle beneath each image. Then select the Type Tool (T) and write three names of design services on your buttons using the color #fbf9f4.

Step 32 – Creating the ‘About us’ area

Create a new group and name it “about”. Then select the Type Tool (T) and write the words “About us” with the same font, color and size that you used for the word “Services”.

Add an image beneath the words “About us” with the dimensions 455px by120px. To add a double-stroke effect to this image, copy the layer style from a previous image (right-click on its layer and select Copy Layer Style), and then paste it to this layer (right-click on the layer and select Paste Layer Style). Then change the size of the Inner Glow to 6.

Select the Type Tool (T) and add a text beneath the image using the font Georgia, the size 14px and the color #673046.

Step 33 – Creating the ‘Blog’ area

Now we will create an area for recent blog posts. Create a new group and name it “blog”. Select the Type Tool (T) and write the word “Blog” beneath the ‘services’ area with the same font, color and size that you used for the words “About us”.

Add two images with the dimensions 220px by 100px. Then copy the layer style of the image from the ‘about us’ area and paste it to these two layers to get the same double stroke effect.

Use the Type Tool (T), the font Georgia and the color #683147 to write a text next to each of these two images.

Step 34 – Creating a contact form

Create a new group and name it “contact”. Then select the Type Tool (T) and write the words “Contact us”.

Select the Rectangle Tool (U) and create a contact form like the one you see in the following image using the color #fcf8ec. Add a 1px stroke to each rectangle using the color #ddd0a4. Then select the Type Tool (T) and write the name of each field of the contact form using the font Georgia and the color #ddd0a4.

Use the Rectangle Tool (T) to create a send button beneath the contact form. Use the same settings which you used at step 31 for the buttons from the ‘services’ area.

Step 35 – Adding a copyright statement in the footer

Select the Type Tool (T) and write a copyright statement in the footer of your layout using the font Georgia and the color #c8bfa4.

Final Result

Well, we’re finished! In the following images you can see the final web layout (with and without the grid). I hope you enjoyed this tutorial and you learned something new.