Modern Online Pharmacy Web Layout


This tutorial will show you how to create a modern web layout for online pharmacy.

Create a new file having 742×642 px and 72 dpi and apply the Rectangle Tool (U) to represent the primary layer for the site’s background.

Modern Online Pharmacy Web Layout

The layer’s parameters:
Blending Options>Gradient Overlay

Modern Online Pharmacy Web Layout

Gradient’s parameters:

Modern Online Pharmacy Web Layout
Modern Online Pharmacy Web Layout

Make a copy of the last made layer and change the copy’s parameters:
Fill 0% on the layers.
Blending Options>Gradient Overlay

Modern Online Pharmacy Web Layout

Gradient’s parameters:

Modern Online Pharmacy Web Layout
Modern Online Pharmacy Web Layout

Using the Rectangle Tool (U), represent a vertical stripe along the background’s left side.

Modern Online Pharmacy Web Layout

The layer’s parameters:
Fill 0% on the layers.
Opacity 30%
Blending Options>Gradient Overlay

Modern Online Pharmacy Web Layout

Gradient’s parameters:

Modern Online Pharmacy Web Layout
Modern Online Pharmacy Web Layout

Make a copy of the recently made layer and select the Free Transform option to turn the copy over and place it the way it is indicated below.

Modern Online Pharmacy Web Layout
Modern Online Pharmacy Web Layout

Select again the Rectangle Tool (U) to divide the background in two halves.

Modern Online Pharmacy Web Layout

The layer’s parameters:
Fill 0% on the layers.
Blending Options>Gradient Overlay

Modern Online Pharmacy Web Layout

Gradient’s parameters:

Modern Online Pharmacy Web Layout
Modern Online Pharmacy Web Layout

Now we have to represent an element of the menu on the site’s header, using the Rounded Rectangle Tool (U).

Modern Online Pharmacy Web Layout
Modern Online Pharmacy Web Layout

The layer’s parameters:
Blending Options>Inner Glow

Modern Online Pharmacy Web Layout

Blending Options>Bevel and Emboss

Modern Online Pharmacy Web Layout

Blending Options>Gradient Overlay

Modern Online Pharmacy Web Layout

Gradient’s parameters:

Modern Online Pharmacy Web Layout
Modern Online Pharmacy Web Layout

Make a copy of the last created layer and select again Free Transform option to situate the copy like it is shown on the next picture, changing its parameters too.

Modern Online Pharmacy Web Layout

The layer’s parameters:
Fill 0% on the layers.
Blending Options>Gradient Overlay

Modern Online Pharmacy Web Layout

Gradient’s parameters:

Modern Online Pharmacy Web Layout
Modern Online Pharmacy Web Layout

Create a new layer and select the Brush Tool (B) to represent the shadow under the capsule.

Modern Online Pharmacy Web Layout
Modern Online Pharmacy Web Layout

Next we have to select two instruments for darkening out the lowest part of the capsule. Choose for the beginning the Rectangle Tool (U) and represent a black rectangle above the capsule’s surface and then press on the Alt button, selecting the Ellipse Tool (U) simultaneously to cut out an opening on the capsule. The opening’s shapes may be corrected with the Convert Point Tool.

Modern Online Pharmacy Web Layout

Press on the Alt button and make a click between the opening’s layer and the capsule’s one and we’ll get the necessary effect of darkening the capsule.

Modern Online Pharmacy Web Layout
Modern Online Pharmacy Web Layout

Make another copy of the capsule and place the copy above all the layers (on the layers’ palette). Press Alt button, choosing the Rectangle Tool (U) and cut out the copy on its middle part, changing also the copy’s parameters:

Modern Online Pharmacy Web Layout

The layer’s parameters:
Blending Options>Inner Glow

Modern Online Pharmacy Web Layout

Blending Options>Gradient Overlay

Modern Online Pharmacy Web Layout

Gradient’s parameters:

Modern Online Pharmacy Web Layout
Modern Online Pharmacy Web Layout

Draw a vertical stripe now on the capsule’s middle part that would have the white color, using the Rectangle Tool (U).

Modern Online Pharmacy Web Layout
Modern Online Pharmacy Web Layout

For your convenience, combine in a group all the layers composing the capsule and its reflection, shadow and darkening (press on the Ctrl button to mark out the necessary layers and make a mouse’s click on its left button just to move the layers on Create a new group option).
We’ll create now the buttons situated on the menu of the site’s header. They should be situated lower than the previous mentioned group (on the layers’ palette).
Select the Rectangle Tool (U) to draw the button

Modern Online Pharmacy Web Layout
Modern Online Pharmacy Web Layout

The layer’s parameters:
Blending Options>Drop Shadow

Modern Online Pharmacy Web Layout

Blending Options>Gradient Overlay

Modern Online Pharmacy Web Layout

Gradient’s parameters:

Modern Online Pharmacy Web Layout
Modern Online Pharmacy Web Layout
Modern Online Pharmacy Web Layout

Make a copy of the last represented layer and choose the Free Transform option to place the copy like on the next picture; change the copy’s parameters (we have to situate the copy’s layer lower than the first one situated on the layers’ palette).

Modern Online Pharmacy Web Layout

We should change the mentioned below parameters, the rest of them should stay the same.
Blending Options>Gradient Overlay

Modern Online Pharmacy Web Layout

Gradient’s parameters:

Modern Online Pharmacy Web Layout
Modern Online Pharmacy Web Layout
Modern Online Pharmacy Web Layout

Make two copies of the last made copy and select the Free Transform option to place it the way you may see below.

Modern Online Pharmacy Web Layout

Draw a thin stripe on the lowest part of the picture, colored in #E3E3E3 and using the Rectangle Tool (U).

Modern Online Pharmacy Web Layout
Modern Online Pharmacy Web Layout

Create a new layer and select the Pencil Tool (B) to draw a pointed line, colored with #C6C6C6 that would be situated upper than the last made stripe.
Brushes Pallete

Modern Online Pharmacy Web Layout
Modern Online Pharmacy Web Layout

Make a mouse’s click on the line’s beginning. Then press on the Shift button and make a click on the line’s end.

Modern Online Pharmacy Web Layout
Modern Online Pharmacy Web Layout

Make a copy of the new made pointed line and select the Free Transform option to place the copy like on the next picture.

Modern Online Pharmacy Web Layout
Modern Online Pharmacy Web Layout

Create a new layer and select the Pencil Tool (B) of different sizes to represent a window of search system - 4 px for the contour and a big size for the inside zone.

Modern Online Pharmacy Web Layout
Modern Online Pharmacy Web Layout

Close to the window we need to represent the searching button, colored with #F20000 (using the Rounded Rectangle Tool (U))

Modern Online Pharmacy Web Layout
Modern Online Pharmacy Web Layout
Modern Online Pharmacy Web Layout

The layer’s parameters:
Blending Options>Inner Glow

Modern Online Pharmacy Web Layout
Modern Online Pharmacy Web Layout
Modern Online Pharmacy Web Layout

Write the site’s logotype also, being attentive with the demands inserted below.

Modern Online Pharmacy Web Layout

(Online)

Modern Online Pharmacy Web Layout

(Pharmacy)

Modern Online Pharmacy Web Layout

(all you need for your health)

Modern Online Pharmacy Web Layout

Add the buttons’ titles of the menu situated on the site’s header, keeping the next demands from the table.

Modern Online Pharmacy Web Layout

(Home)

Modern Online Pharmacy Web Layout

(About Us, Price List, Contact Us)

Modern Online Pharmacy Web Layout

We have to add also the corresponding inscriptions on the searching system.

Modern Online Pharmacy Web Layout

(Search)

Modern Online Pharmacy Web Layout

(Go)

Modern Online Pharmacy Web Layout

Next step includes entitling the site’s sections.

Modern Online Pharmacy Web Layout

(Welcome, Special)

Modern Online Pharmacy Web Layout

(to our store, offers)

Modern Online Pharmacy Web Layout

Fill the site’s section with the appropriate text.

Modern Online Pharmacy Web Layout

(the bold text)

Modern Online Pharmacy Web Layout

(the basic sections’ text)

Modern Online Pharmacy Web Layout

Insert the inscriptions on the lowest palette.

Modern Online Pharmacy Web Layout
Modern Online Pharmacy Web Layout

Finished!