Her

Home Photoshop Tutorials Drawing Techniques Website Design Studio

Website Design Studio

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

Begin your work by creating a new file (File>New), having 800x600 px and 72 dpi.

Next we shall select the Rectangle Tool (U) to create the background of the web site page to be.

image 1

Set the next parameters for the layer by clicking on this layer on the layers' palette.

Blending Options>Gradient Overlay

image 2

Gradient's parameters:

image 3

image 4

Choose the previous tool to represent a thin stripe of white color.

image 5

Select then the Pen Tool (P) to draw a ray like the next one:

image 6

Use the same tool to draw several more rays:

image 7

Set for the layers the same parameters shown below: Fill 0%

Blending Options>Gradient Overlay

image 8

Gradient's parameters:

image 9

image 10

Now we should use the Rounded Rectangle Tool (U) (radius of 35 px) to represent the body, applying the white color also:

image 11

It's time to represent the panel reserved for the menu of the site's buttons. In this case we should apply the Rounded Rectangle Tool (U) (radius of 30 px). Press then Alt button while applying the Rectangle Tool (U) to trim a little the bottom part of the panel.

image 12

The layer's parameters: Blending Options>Inner Shadow

image 13

Blending Options>Gradient Overlay

image 14

Gradient's parameters:

image 15

image 16

Use the same method described above to insert also the footer:

image 17

The layer's parameters: Fill 0%

Blending Options>Inner Shadow

image 18

Blending Options>Color Overlay

image 19

image 20

Choose again the Rounded Rectangle Tool (U) (radius of 35 px) to draw the lateral panel, colored with #F6F6F6. Firstly we need to create the basis itself of the panel, then press Alt button white applying the same tool to cut out the windows reserved for the news:

image 21

Let's draw now a white stripe above the menu's buttons, choosing the Rectangle Tool (U) for this operation. The stripe needs to be inclined, applying the Free Transform solution.

image 22

image 23

Make six copies of the recently made layer and select one more time the Free Transform option to situate the layers as it is indicated next image:

image 24

Combine in a group all the layers containing the white stripes (press Ctrl button to mark out the necessary layers and then keep pressed the left mouse's button while moving the marked layers on Create a new group option). Mark out the group and press Ctrl +E, applying the next shown parameters for the rasterized layer:

Fill 20%
Blending Mode-Overlay

image 25

Choose again the Rounded Rectangle Tool (U) (radius of 20 px) to draw a button of white color.

image 26

The layer's parameters: Blending Options>Inner Shadow

image 27

image 28

Let's create the primary layer, reserved for the next button on the menu. The tool applied in this case is Rounded Rectangle Tool (U) (radius of 20 px).

image 29

The layer's parameters: Fill 0%

Blending Options>Inner Shadow

image 30

Blending Options>Gradient Overlay

image 31

Gradient's parameters:

image 32

image 33

Make a copy of the last made layer and use again the Free Transform option to situate the copy a little lower, changing also the layer's parameters with those from below: Fill 0%

Blending Options>Inner Shadow

image 34

Blending Options>Gradient Overlay

Website Design Studio