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.
- 10 common problems in Photoshop and basic remedies
Document
- Function icon set - wefunction.com
- Twitter icon - iconeden.com
- 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:
- How to design a website in Photoshop (Part 1): Create a theme for the craft shop
- How to design a website in Photoshop (Part 2): Create a Landing page for travel websites
I wish you all success!
You should read it
- Design Layout - Website layout in CSS
- How to design a website in Photoshop (Part 1): Create a theme for the craft shop
- Tips to help you create responsive layouts easily
- Layout in HTML
- How to enable the new keyboard layout in Windows 11
- How to use Windows 11's Snap Layout on Windows 10
- How to design a website in Photoshop (Part 2): Create a Landing page for travel websites
- Top 11 leading UX and UI design tools
- 6 leading website design companies in Vietnam
- How Much Freedom Do We Have as Website Designers?
- How to turn off Snap Layout in Windows 11
- How to create a custom keyboard layout for Windows 10