Her

Home Photoshop Tutorials Web Layout Modern Online Pharmacy Web Layout (Part 1)

Modern Online Pharmacy Web Layout (Part 1)

Author: Adobetutorialz.com Author's URL: www.adobetutorialz.com More by this author

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

image 1

The layer's parameters:

Blending Options>Gradient Overlay

image 2

Gradient's parameters:

image 3

image 4

Make a copy of the last made layer and change the copy's parameters:

Fill 0% on the layers.

Blending Options>Gradient Overlay

image 5

Gradient's parameters:

image 6

image 7

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

image 8

The layer's parameters:

Fill 0% on the layers.

Opacity 30%

Blending Options>Gradient Overlay

image 9

Gradient's parameters:

image 10

image 11

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.

image 12

image 13

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

image 14

The layer's parameters:

Fill 0% on the layers.

Blending Options>Gradient Overlay

image 15

Gradient's parameters:

image 16

image 17

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

image 18

image 19

The layer's parameters:

Blending Options>Inner Glow

image 20

Blending Options>Bevel and Emboss

image 21

Blending Options>Gradient Overlay

image 22

Gradient's parameters:

image 23

image 24

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.

image 25

The layer's parameters:

Fill 0% on the layers.

Blending Options>Gradient Overlay

image 26

Gradient's parameters:

image 27

Modern Online Pharmacy Web Layout (Part 1)