Showcase and discover digital art at yex

Follow Design Stacks

Subscribe to our free newsletter to get all our latest tutorials and articles delivered directly to your inbox!

Modern Online Pharmacy Web Layout

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

Final Image Preview

Create Modern Online Pharmacy Web Layout in Photoshop CS

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.

Create Modern Online Pharmacy Web Layout in Photoshop CS

The layer’s parameters:
Blending Options>Gradient Overlay

Create Modern Online Pharmacy Web Layout in Photoshop CS

Gradient’s parameters:

Create Modern Online Pharmacy Web Layout in Photoshop CS

Create Modern Online Pharmacy Web Layout in Photoshop CS

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

Create Modern Online Pharmacy Web Layout in Photoshop CS

Gradient’s parameters:

Create Modern Online Pharmacy Web Layout in Photoshop CS

Create Modern Online Pharmacy Web Layout in Photoshop CSUsing the Rectangle Tool (U), represent a vertical stripe along the background’s left side.

Create Modern Online Pharmacy Web Layout in Photoshop CS

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

Create Modern Online Pharmacy Web Layout in Photoshop CS

Gradient’s parameters:

Create Modern Online Pharmacy Web Layout in Photoshop CS

Create Modern Online Pharmacy Web Layout in Photoshop CS

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.

Create Modern Online Pharmacy Web Layout in Photoshop CS

Create Modern Online Pharmacy Web Layout in Photoshop CS

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

Create Modern Online Pharmacy Web Layout in Photoshop CSThe layer’s parameters:
Fill 0% on the layers.
Blending Options>Gradient Overlay

Create Modern Online Pharmacy Web Layout in Photoshop CS

Gradient’s parameters:

Create Modern Online Pharmacy Web Layout in Photoshop CS

Create Modern Online Pharmacy Web Layout in Photoshop CS

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

Create Modern Online Pharmacy Web Layout in Photoshop CS

Create Modern Online Pharmacy Web Layout in Photoshop CS

The layer’s parameters:
Blending Options>Inner Glow

Create Modern Online Pharmacy Web Layout in Photoshop CS

Blending Options>Bevel and Emboss

Create Modern Online Pharmacy Web Layout in Photoshop CSBlending Options>Gradient Overlay

Create Modern Online Pharmacy Web Layout in Photoshop CS

Gradient’s parameters:

Create Modern Online Pharmacy Web Layout in Photoshop CS

Create Modern Online Pharmacy Web Layout in Photoshop CS

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.

Create Modern Online Pharmacy Web Layout in Photoshop CS

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

Create Modern Online Pharmacy Web Layout in Photoshop CS

Gradient’s parameters:

Create Modern Online Pharmacy Web Layout in Photoshop CS

Create Modern Online Pharmacy Web Layout in Photoshop CSCreate a new layer and select the Brush Tool (B) to represent the shadow under the capsule.

Create Modern Online Pharmacy Web Layout in Photoshop CS

Create Modern Online Pharmacy Web Layout in Photoshop CS

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.

Create Modern Online Pharmacy Web Layout in Photoshop CS

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.

Create Modern Online Pharmacy Web Layout in Photoshop CS

Create Modern Online Pharmacy Web Layout in Photoshop CS

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:

Create Modern Online Pharmacy Web Layout in Photoshop CS

The layer’s parameters:
Blending Options>Inner Glow

Create Modern Online Pharmacy Web Layout in Photoshop CSBlending Options>Gradient Overlay

Create Modern Online Pharmacy Web Layout in Photoshop CS

Gradient’s parameters:

Create Modern Online Pharmacy Web Layout in Photoshop CS

Create Modern Online Pharmacy Web Layout in Photoshop CS

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

Create Modern Online Pharmacy Web Layout in Photoshop CS

Create Modern Online Pharmacy Web Layout in Photoshop CS

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

Create Modern Online Pharmacy Web Layout in Photoshop CS

Create Modern Online Pharmacy Web Layout in Photoshop CSThe layer’s parameters:
Blending Options>Drop Shadow

Create Modern Online Pharmacy Web Layout in Photoshop CS

Blending Options>Gradient Overlay

Create Modern Online Pharmacy Web Layout in Photoshop CS

Gradient’s parameters:

Create Modern Online Pharmacy Web Layout in Photoshop CS

Create Modern Online Pharmacy Web Layout in Photoshop CS

Create Modern Online Pharmacy Web Layout in Photoshop CS

Page: 1 2

Comments