Website design tutorial in Photoshop (Part 3): Create professional website layout

Beautiful, clean and practical interface design is an essential part of Web designers. In this tutorial, we will create a clean and professional web layout in Photoshop.

1. 10 common problems in Photoshop and basic remedies

Document

1. Function icon set - wefunction.com
2. Twitter icon - iconeden.com
3. Bebas fonts - dafont.com

Step 1: Use Mockup

Before you start designing, you need to plan requirements, interfaces and functions, then turn them into layout ideas. Mockup and wire frames are very useful for creating layouts with a lot of flexibility.

Here we will use gray tones, this way will remove colors from the scene and to focus on the overall layout and avoid messing up the colors. That allows to quickly change and rearrange everything. A mockup provides as much detail as you want.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 1

Step 2: Set up Canvas

Here we have a blueprint for the web layout, so let's redesign it together. Create a new document with dimensions of 1200 x 1500 pixels.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 2

Here we need a 960 pixel layout so we need to define the working area by adding a path. Press Ctrl + A to select the entire document.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 3

Go to Select> Transform Selection , shrink the selection down to 960 pixels wide. That is the working area of ​​the layout.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 4

Add a guide to the selection.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 5

Create some distance between borders and content to add later. With the area selected, select the Transform Selection again, resize the selection to a 920 pixel width. That means 20 pixels on each side, 40 pixels in total.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 6

Add a path to the selected area.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 7

Step 3: Create a title

Create a title for the layout, choose a height of 465 pixels.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 8

Fill this selection with gray and then use Layer Styles to add colors and gradients. Follow this style throughout the design process to maintain the visual hierarchy.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 9

Add Gradient to the title. Double click the layer thumbnail, select Gradient Overlay . Create 2 gradient colors using the settings shown below.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 10

We get the following result:

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 11

Next need to add a highlight for the title. Create a new layer by pressing Ctrl + Alt + Shift + N. Choose Soft brush with diameter 600px and color # 19535a and just click once on the middle of the title to create highlights.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 12

Select the top part with 110 pixels height.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 13

Click Delete to delete the selected part.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 14

Narrow it vertically by pressing Ctrl + T.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 15

To make sure the highlight is at the center of the title, select the title and highlight layers, then press "V" to move to the Move Tool . On the Options Panel , select the Align Horizontal Centers button.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 16

Create a new layer, draw a 1 pixel highlight line using the Pencil Tool with the color # 01bfd2 .

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 17

Hide the edges using a gradient mask. Select the Gradient Tool , create a gradient like below in the Options panel.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 18

Apply the gradient above.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 19

Step 4: Create texture samples

Now create a simple test template and apply it to the title. Select the Pencil Tool , use a 2 pixel size brush and add two square dots to touch each corner. Turn off the background and select the dots then choose Edit> Define Pattern .

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 20

Create a new layer and place it under the highlighted layer above. Select the area you want to apply the template to, press Shift + F5 to load the Fill dialog. Select the template you just created and click OK.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 21

Cover the selection with the created template.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 22

Mix the sample harmoniously with the title. Add a Layer Mask to this template layer. Choose a large soft brush with the color #ffffff. Reduce Opacity to about 60% and paint. If you find it too strong, you can adjust the opacity of this layer.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 23

We have the following result:

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 24

Step 5: Add ogo

After completing the background, now go to the logo creation step. Before adding styles, add a highlight behind the logo. Select Soft brush with color # 19535a and add a dot.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 25

Type the text, using the font you like, in this example use the font "Bebas".

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 26

Apply subtle effects to the logo.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 27

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 28

Step 6: Add navigation bar

Add navigation links.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 29

Create navigation button. Using the Rectangular Marquee Tool , fill it with any color and let the Opacity Fill to 0.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 30

Double click the layer thumbnail, select Gradient Overlay and apply this setting.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 31

Step 7: Content slider

Choose an area of ​​580 x 295 pixels.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 32

Cover this selection with gray tones.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 33

Upload photos to the class we just created above.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 34

Now add the shadow effect to the slider. Create a new layer, select the Brush Tool , set the diameter up to 400 pixels. Open the Brushes panel, reduce the Roundness level with the settings below.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 35

Use the color brush # 000000 and add a black strip.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 36

Apply Gaussian Blur to soften the edges.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 37

Select the bottom part of the shadow and delete it.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 38

Reposition the ball right on the slider.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 39

Then narrow down vertically and center the slider. Select both layers and on the Options panel click the Align Horizontal Centers button.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 40

Copy this shadow layer and rotate it vertically, place it on the bottom edge of the slider.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 41

Create a slider control button with the Marquee Rectangular tool and cover with # 000000 color.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 42

Reduce Opacity to 50%.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 43

Open the automatic shape in the Options Panel and select the arrow as shown, then add it to the button.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 44

Create a frame with color # 000000.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 45

Reduce Opacity to 50%.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 46

Add more description about the project.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 47

Step 8: Add some lines to help

A welcome message and some description of the site.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 48

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 49

Step 9: Complete the title

We have almost completed the title. Now just need to add a subtle shadow effect to finish. Create a shadow as previously created using the Brush tool.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 50

Leave a distance of 1px between the head and the shadow.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 51

Step 10: Use the Gradient for the background

Create a gradient from light gray to white.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 52

Create a new layer below the title and apply the gradient color on.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 53

Step 11: Add the x slider bar

Create a rotating slider

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 54

Apply Inner Shadow to a point to see the active item in the slider.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 55

Step 12: Create content division lines

Select the Pencil Tool and draw a 1 pixel line with light gray (#aaaaaa).

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 56

Hide smooth edges using gradient masks.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 57

Step 13: Add the main content

This is a 3 column layout so we need to create 3 equal columns with a distance between them. Here perform a simple calculation and divide the available space into 3 equal parts and the distance between them is 25 pixels.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 58

Add the guides to the sections, then remove the sections.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 59

Add some featured services by dropping the icons from the Function icon set. Maintain the distance between homogeneous objects.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 60

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 61

Create a simple " Read More " button by selecting the Rectangle Tool to draw the shape.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 62

Apply Gradient Overlay and Stroke for this button.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 63

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 64

Copy this button to other sections.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 65

We will add some recent work items by drawing three image hold boxes and applying a 3 pixel stroke.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 66

Drag the image into the boxes.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 67

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 68

Create the ball as you did before and place it under the box.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 69

Add some project descriptions.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 70

Create a Twitter feed. Drop on the Twitter bird icon.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 71

Add a Twitter notification.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 72

Create a button for More Tweets.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 73

Apply the styles like the image below.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 74

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 75

Add text content.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 76

Step 14: Create footer and finish

Select an area for the footer and fill it with gray.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 77

Apply Color Overlay as shown below.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 78

Finally add a foot navigation and copyright information.

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 79

Final result

Website design tutorial in Photoshop (Part 3): Create professional website layout Picture 80

Download: PSD file

See more:

1. How to design a website in Photoshop (Part 1): Create a theme for the craft shop
2. How to design a website in Photoshop (Part 2): Create a Landing page for travel websites

I wish you all success!