Creating an attractive and functional web layouts – an integral part of the life of a web designer. In this lesson we will create a professional site layout from scratch. In the process of the lesson you will learn some useful tricks when creating a design.
- Icon Set (wefunction.com)
Alternate Icon Set
- Twitter icon (iconeden.com)
- Bebas Font (dafont.com)
Step 1. Mockup
Before we begin to create the layout of the site, you need to create a plan-sketch of the future layout, which will show its functionality and approximate appearance.
Step 2. Create a document.
We will create a site layout with a width of 960 pixels. To do this, create a new document with a size of 1200×1500 pixels. Resolution 72 pixels.
As the site layout will be 960 pixels wide, we need to define this area by adding guides. Select the entire document (Ctrl + A).
Go to the Selection menu – Transform Selection (Select> Transform Selection). On the property bar at the top of the screen, set the width to 960 pixels. This will be the workspace layout.
Set the guides exactly along the edges of the selection.
We need to create an indent between the edges of the layout workspace and the content area that we will add later. With the active selection of the document, again go to the menu Selection – Transform Selection (Select> Transform Selection). Reduce the selection width to 920 pixels. This means that there will be an indent of 20 pixels on each side of the layout, which results in a total of 40 pixels.
Install guides on the new selection:
Step 3. Create a website header.
We proceed to the creation of the site header. Create a selection with a height of 465 pixels at the top of the layout.
Fill the selection with gray, and later use layer styles to apply colors and gradients.
Add a gradient fill to the header through the layer style. Gradient overlay (Gradient Overlay). Create a gradient of two colors.
Now the cap will look like this:
Now you need to add highlighting to the cap. Create a new layer (Ctrl + Alt + Shift + N) and select a soft brush of 600 pixels. Select color # 19535a and click once with the brush in the top center of the cap.
Create a selection of 110 pixels on the header.
Press key Delete, to remove the highlighted part.
Backlit layer squeeze vertically (Ctrl + T).
You need to make sure that the light spot on the cap is exactly in the center. To do this, make active the layers with the header and backlight and select the tool Move (Move Tool) (V). On the property bar at the top of the screen, click the Align Horizontal Centers button.
Create a new layer. (Shift + Ctrl + N) and draw tool Pencil (Pencil Tool) point, the size of 1 pixel. For drawing use color # 01bfd2.
Smooth the edges of this layer using a gradient mask. Choose a tool Gradient (Gradient Tool) and create a gradient as shown below:
Apply a new layer with a mask that you fill with the gradient you just created.
Step 4. Create a pattern
Now we will create a simple pattern that we will add to the cap. Tool Pencil (Pencil Tool) size of 2 pixels, draw two points, as shown in the figure. Turn off the visibility of the background layer for a while (click on the eye icon near the background layer) and create a pattern (Editing – Define a pattern) (Edit> Define Pattern):
Create a new layer. (Shift + Ctrl + N) and place it under the backlit layer. Select the area to which you want to apply the pattern and open the window Run Fill (Fill) (Shift + F5). Click OK.
After adding the texture, the cap looks like this:
Make a smooth transition from the pattern to the cap: add a mask to the patterned layer and with a soft white brush (#ffffff) with 60% opacity, go over the mask.
Step 5. Add a logo
We proceed to add the logo. Choose a soft brush with color # 19535a and paint a spot.
Write the text:
Add a layer style to the logo layer. Shadow (Drop Shadow).
Step 6. Navigation
Add text to navigate.
Draw a navigation button using the tool. Rectangular Selection (Rectangular Marquee Tool). Fill the selection with any color and reduce the Fill parameter to zero.
Add a style to the button layer. Gradient overlay (Gradient Overlay).
Step 7. Content slider
Create a selection of 580×295 pixels.
Fill the selection with any shade of gray.
Place an image. Pin it with the layer you created earlier.
Now add an effect to the slider. Create a new layer. (Shift + Ctrl + N), select Brush (Brush Tool) with a diameter of 400 pixels. Open the Brush panel (F5) and set the parameters shown in the screenshot:
Choose black (# 000000) and draw a spot:
To soften the edges, apply a filter. Gaussian blur (Gaussian Blur).
Select the bottom half of the shadow and remove (Delete).
Place the shadow layer above the slider:
Squeeze the shadow layer over the middle marker. (Ctrl + T), then center the shadow layer again: select both layers and click the button on the property bar Horizontal alignment (Align Horizontal Centers).
Duplicate the shadow layer. (Ctrl + J) and place the duplicate on the bottom edge of the slider.
Draw buttons on the slider using the tool Rectangular Selection (Rectangular Marqee Tool). Fill the buttons with black (# 000000).
Reduce the opacity of the button layer to 50%.
Add an arrow shape to the slider buttons:
At the bottom of the slider, draw a strip and fill it with black (# 000000).
Reduce the opacity of the stripe layer to 50%.
Add a description of your project to this page:
Step 8. Add text with a greeting
Write a greeting text:
Step 9. Finish work on the site header.
We have almost finished work on the site header. Add a faint shadow with the tool Brush (Brush Tool).
Leave a 1 pixel space between the shadow and the header.
Create a new layer under the cap layer. (Shift + Ctrl + N) and apply a gradient to it.
Step 10. Add buttons for the slider
Draw slide change buttons.
Add a layer style to one button. Inner shadow (Inner Shadow), and then duplicate the layer with the button the desired number of times (Ctrl + J).
Step 12. Create a content delimiter.
Use the Pencil Tool and draw a light gray (#aaaaaa) line 1 pixel wide.
Add a mask to the layer with the line and use a gradient to make a smooth transition at the edges.
Step 13. Add content
It’s time to add areas for content. The content area will be divided into 3 columns with equal indentation. There will be a 25 pixel space between each column.
Add guides on both sides of the columns.
Add a list of services in the column. Decorate the text with services icons.
Draw the “Read More” button with the tool Rounded Rectangle (Rounded Rectangle Tool) in layer-shape mode.
Apply layer styles to the button layer. Gradient Overlay (Gradient Overlay) and Stroke (Stroke).
Duplicate the button layer. (Ctrl + J)
At the bottom of these three columns, draw gray rectangles and add style to them. Stroke (Stroke), 3 pixels in size.
Add images to these gray areas:
Create a shadow like you did before and place it under the photo area:
Add a project description:
Place the Twitter icon in one of the columns.
Add a message about Twitter.
Draw a button More Tweets.
Apply layer styles to this button:
Step 14. Create a footer
Create a selection at the bottom of the layout – this will be the area under the footer, and fill the selection with gray.
Apply a layer style to this area. Color overlay.
In the final, add navigation and copyright to the footer.