Step-by-step instructions for creating a website layout in Photoshop

[subornaakter20]

To help you quickly and efficiently create a website layout, we suggest you use the step-by-step instructions. By studying each step of creating a layout from scratch, you will be able to understand the basics of layout.

Step 1. Prepare a Mockup
Creating a website layout in Photoshop begins with creating a sketch, which roughly explains the appearance of the website and its capabilities.


Step 2. Create a new document

Let's say you decide to create a 960 pixel layout. Then healthtrax corporate email list you create a document sized 1200 x 1500 pixels (resolution - 72 pixels).

Thus, the width of the site layout is 960 pixels. Select this area and mark the guides. Use Ctrl + A to select the entire page.

Step-by-step instructions for creating a website layout in Photoshop

Go to the menu "Selection" - "Transform the selected area" (Select ® Transform Selection) . Specify the working area of ​​the layout: at the top of the screen in the properties, set the width to 960 pixels.

The guides are positioned exactly along the selection boundaries.

There needs to be an indent between the edges of the work area and the area allocated for content. Select the entire page again, go to Select ® Transform Selection. Then set the selection width to 920 pixels. This will reduce the layout width by 40 pixels (20 on the left and 20 on the right).

After the new selection, set the guides again.

Step 3. Create a header
At the top of the layout, select a zone of 465 pixels in height. Fill this part with gray. Using layer styles, you can change colors and add gradients.

Using the Gradient Overlay layer style, add a two-color gradient fill.

The hat will look like this:

Site header

The next step is to add some highlight. To create a new layer, press Ctrl + Alt + Shift + N. Now use a soft brush (600px). Click it (color #19535a) once in the middle of the header, at the top.

Create a 100px selection on the header.

Click Delete and the selected part will be deleted.

Compress the layer to which you added the highlight vertically (using the keys Ctrl + T).

Recommended articles on this topic:
Company Marketing Plan: Double the Company's Profits

KPI for the sales department: how to calculate and implement

How to get 3 times more clients for 2 times less

This highlight needs to be centered: activate the layers that contain the site header and highlight, and then use the Move Tool (V). There is a property panel (at the top), among which you need to select "Align centers horizontally".

Again, create a new layer (Shift + Ctrl + N) and using the Pencil Tool , place a dot on this layer (color #01bfd2, size - 1 px).

Now, using a gradient mask, you need to blend this layer from the sides. This is done using the Gradient Tool. It will look like this: