How to create an elegant web layout in Photoshop

February 26th, 2010 Posted in Tutorials

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.

final-result-small

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 + ; ).

create elegant web layout in photoshop

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.

create elegant web layout in photoshop

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

create elegant web layout in photoshop

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.

create elegant web layout in photoshop

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

create elegant web layout in photoshop

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.

create elegant web layout in photoshop

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.

create elegant web layout in photoshop

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.

create elegant web layout in photoshop

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

create elegant web layout in photoshop

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.

create elegant web layout in photoshop

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

create elegant web layout in photoshop

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.

photoshop tutorial

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.

create elegant web layout in photoshop

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

photoshop web layout tutorial

Step 15

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

create elegant web layout in photoshop

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.

photoshop layout tutorial

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

photoshop layout tutorial

Step 23

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

phtoshop layout tutorial

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

photoshop layout tutorials

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.

create elegant web layout in photoshop

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.

photoshop layout tutorial

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.

create elegant web layout in photoshop

final-result-small

Author -

who has written 1 posts on [Re]Encoded.com.


Contact the author


25 Responses to “How to create an elegant web layout in Photoshop”

  1. uberVU - social comments Says:

    Social comments and analytics for this post…

    This post was mentioned on Twitter by ikabnews: How to create an elegant web layout in Photoshop: In this tutorial I will show you how to create an elegant web la… http://bit.ly/a6HL0F


  2. George K Abraham Says:

    This is a wonderful demonstration. I was searching for something of this kind to start learning to design a layout in Photoshop…This seems to be a more descriptive one with useful image demonstartion…keep the good work..thanks a lot for writing such a post…


  3. === popurls.com === popular today Says:

    === popurls.com === popular today…

    yeah! this story has entered the popular today section on popurls.com…


  4. Zac Says:

    yeah, screw this. Your template looks very very basic, no artistic quality to it.


  5. Codesquid Says:

    Very nice! Good to see the 960gs used well!


  6. BEN Says:

    Thanks, great tutorial!!!


  7. Ben Says:

    That’s great and all, but actually showing how to code it and making it work online would be a much better tutorial.

    You’ve taken the easy way out.


  8. sandy woods Says:

    Nice, thats what I am talking about dude.


  9. Ulrik Says:

    After designing it, how do you make it into an actual, working website? Photoshop normally creates a single file, e.g., JPEG, as its output?


  10. Big J Says:

    What I really want to know is how you were able to “up” your post on so many social networks at once (Digg, Delicious, etc). Very cool! Can you teach us this technique?


  11. kutchbhi Says:

    The real quesiton is how do you convert this to html and CSS


  12. Design+ Says:

    yes, thats what we need.


  13. Ryan Says:

    Wow! That’s an amazing step-by-step tutorial. It will help me a lot. Thanks!


  14. Phill Kenoyer Says:

    You are using the 960 grid, but most of your elements don’t line up on the margins. Why? Looks like you’re only using the far left and far right margins.


  15. Tim Says:

    I noticed the same thing. My designer constantly messes this up (I tried using 960 grid to make is easy for him) Maybe 960 grid is too weird for designers to recognize that the 20 pixels between columns is a GAP not space for content.


  16. Steave Says:

    Thanks for lot of Photoshop lessons. Good Look!


  17. Design+ Says:

    Wow great job really. would love to create my own website template.

    i have useful stuff for web design in my blog.
    hope u like it too. 🙂


  18. orange Says:

    waw amazing tutorial i like…nice share subscribe for u


  19. Fotografia Ślubna Gdańsk Says:

    Really nice tutorial. Thanks for share.


  20. Wedding Hire Says:

    This is fantastic information, thanks so much for sharing.


  21. Beauchamp Web Design Says:

    Great tutorial thanks for the tips


  22. Seanbelly Says:

    I like it, simple but effective.


  23. מצלמות אבטחה Says:

    Very helpful..


  24. John Dee Says:

    Very detailed and helpful! Thanks for posting this!


  25. Andrei Novalis Says:

    great tutorial, my team was just looking into that

    btw, photoshop rulez 😉


Leave a Reply