Her

Home Photoshop Tutorials Web Layout Design Studio - Web Page Layout

Design Studio - Web Page Layout

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

For the beginning create a new file (File>New) of 850x912 px and 72 dpi. Applying the Paint Bucket Tool (G), fill the new file with some color - #191E24

image 1

Create a new layer where must use the Rectangular Marquee Tool (M) to represent several rectangle elements, colored with those codes indicated below (create for each element new layer).

image 2

Using the Eraser Tool (E), erase off 3 px out of each rectangle's corners, as it is shown below. This way we can round up their corners.

image 3

Make a copy of the last 4 layers (Ctrl+J), put the duplicated layers in a single layer using Merge Down (Ctrl+E), move this layer under layers with rectangle elements in Layers Palette and apply the effects of the next filter's selection: Filter>Blur>Gaussian Blur

image 4

You must get the same thing from below:

image 5

Get back to the rectangle elements, choosing for each of them the next parameters of Blending Options>Bevel and Emboss (make a mouse click on the layer we work with on the layers' palette).

image 6

Next you may see the gradient's parameters, each of the elements getting its own color.

Blending Options>Gradient Overlay

image 7

Gradient Editor

image 8

You may see demonstrated below the gradients for each rectangle element.

image 9

On this stage you must get the thing from below:

image 10

Now select again the Rectangular Marquee Tool (M) and represent on a new layer four other rectangles as the picture from below shows it. Fill the new elements with white color, applying the Paint Bucket Tool (G). The Opacity is of 20%.

image 11

Now it's time to choose another instrument – the Pen Tool (P) to draw a line like below:

image 12

Next select the brush's presets and set the parameters from below:

image 13

Next create a new layer and select the Paths option on the layers' palette, make a double click on it and press OK. After that make a right click on the made layer, choosing the option indicated next image:

image 14

As a result we'll get the next line:

image 15

Get back to the layers and select the Blending Options>Outer Glow on the line's layer:

image 16

Blending Options>Gradient Overlay

image 17

Gradient Editor

image 18

In this case we'll obtain a rainbowed line.

image 19

This way we can draw several small lines more, without Blending Options.

image 20

Place the layers on our picture under the rectangles, made earlier. Using the Rectangle Tool (U), try to make a thin line on the bottom part of our site, choosing the color #262B31

image 21

Create a new file of 5x5 px and 72 dpi. Applying the Pencil Tool (B), try to put on the new file a diagonal line.

image 22

Select on the main menu Edit>Define Pattern…. Our pattern is saved now. Get back on the first file and select there Edit>Fill and find our saved pattern in the Custom Pattern option, pressing OK here. This operation should be done on a new layer.

image 23

Take the Rectangular Marquee Tool (M) and the Eraser Tool (E) to erase the unnecessary elements, placing this layer under the rectangles. Select on the layers' palette the option Fill 10% and in this case we must get the same thing from below:

image 24

Next we need to create an orange line, having the color's code #C53300. Later we'll represent a grey one on the bottom part.

image 25

Start inserting the logo.

image 26

Introduce the text, having the next shown parameters for the top line.

image 27

… and then the lowest one.

image 28

Both lines of the text have the same parameters, shown next table:

Blending Options>Drop Shadow

image 29

Blending Options>Outer Glow

image 30

Next we need to insert the button title, reserved for the menu.

image 31

Set the next text's parameters and Blending Options.

image 32

Blending Options>Drop Shadow

image 33

Blending Options>Gradient Overlay

image 34

Gradient Editor

image 35

You must get the next result:

image 36

Now it's time to insert the information about the design studio.

image 37

You may see below the parameters reserved for the title:

image 38

… and the parameters for the rest of the text:

image 39

Design Studio - Web Page Layout
Click to enlarge

Creating the web site came to end!