Web layout for Night Club

This tutorial will show you how to create a modern night club web layout.

Create a new file (File>New) that would have 770×600 px and 72 dpi. Select after that the Paint Bucket Tool (G) to paint the file in black color.

Web layout for Night Club

Create a new layer of 20×20 px and 72 dpi to represent a Pattern. We’ll use in this case the Pencil Tool (B) and the color #D28528.

Web layout for Night Club

Save the texture!

Web layout for Night Club

Using the Rounded Rectangle Tool (U), represent the primary layer reserved for the site’s sections.

Web layout for Night Club
Web layout for Night Club

The layer’s parameters:
Blending Options>Gradient Overlay

Web layout for Night Club

Gradient’s parameters:

Web layout for Night Club

Blending Options>Pattern Overlay

Web layout for Night Club

Blending Options>Stroke

Web layout for Night Club
Web layout for Night Club

Create a new layer and select then the Brush Tool (B), colored in #57100E to represent several patches downside, on the right side of the previous layer’s edge. We need also to place this layer lower than the layer reserved for the sections, on the layers’ palette.

Web layout for Night Club
Web layout for Night Club

Choosing the Rounded Rectangle Tool (U), try to make now the primary layer reserved for the menu of the buttons situated on the site’s header.

Web layout for Night Club
Web layout for Night Club

The layer’s parameters:
Blending Options>Gradient Overlay

Web layout for Night Club

Gradient’s parameters:

Web layout for Night Club

Blending Options>Pattern Overlay

Web layout for Night Club

Blending Options>Stroke

Web layout for Night Club
Web layout for Night Club

Make a copy of the last made layer and press on the Alt button to cut out five ellipses with the Ellipse Tool (U).

Web layout for Night Club

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

Web layout for Night Club

Gradient’s parameters:

Web layout for Night Club
Web layout for Night Club

Using the Ellipse Tool (U), make a flare on the left side of the menu’s palette.

Web layout for Night Club

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

Web layout for Night Club

Gradient’s parameters:

Web layout for Night Club
Web layout for Night Club

Make a copy of the last made layer and choose the Free Transform option to place the copy exactly like in the picture below.

Web layout for Night Club

Using the same instrument, try to picture out a flare on the upper part of the buttons’ palette.

Web layout for Night Club

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

Web layout for Night Club

Gradient’s parameters:

Web layout for Night Club
Web layout for Night Club

Make four copies of the last made layer and select the Free Transform option to place the copies exactly like on the next picture.

Web layout for Night Club

Using the Rectangle Tool (U), we have to represent the stripe of black color.

Web layout for Night Club
Web layout for Night Club

Create a new layer. Select after that the Pencil Tool (B) to create a vertical, dividing stripe of black color and near it – on the right and on the left side – by one stripe, colored in #B9622A

Web layout for Night Club
Web layout for Night Club
Web layout for Night Club

The layer’s parameters:
Blending Mode-Luminosity

Web layout for Night Club

Make three copies of the last made layer and choose the Free Transform option to place the copies exactly like on the picture shown below.

Web layout for Night Club

Using the Custom Shape Tool (U), create several small stars on the left side of the menu buttons’ palette, situated on the site’s header.

Web layout for Night Club

Te stars are of different sizes, colored all of them in a single color - #DE9826. Turn over the stars, using the Free Transform option.

Web layout for Night Club

For our convenience we should combine in a group all the stars from the left side (press on the Ctrl button to mark out the necessary layers and press on the left mouse’s button to take them downside on Create a new group option).
Make a copy of the last made group and choose again the Free Transform option to turn over the copies the way you may see below.

Web layout for Night Club

Next we’ll add the site’s logotype, keeping the details from the next tables.

Web layout for Night Club

(Night)

Web layout for Night Club

(club)

Web layout for Night Club

The Night layer’s parameters:
Blending Options>Outer Glow

Web layout for Night Club

Blending Options>Bevel and Emboss

Web layout for Night Club

Blending Options>Gradient Overlay

Web layout for Night Club

Gradient’s parameters:

Web layout for Night Club

The Club layer’s parameters:
Blending Options>Gradient Overlay

Web layout for Night Club

Gradient’s parameters:

Web layout for Night Club
Web layout for Night Club

We’ll write also the titles for the menu’s buttons, keeping the demands from the table demonstrated next:

Web layout for Night Club
Web layout for Night Club

The layer’s parameters:
Blending Options>Drop Shadow

Web layout for Night Club

Blending Options>Color Overlay

Web layout for Night Club
Web layout for Night Club

Introduce also the sections’ titles:

Web layout for Night Club

(welcome, news)

Web layout for Night Club

(to our club!)

Web layout for Night Club

The layer’s parameters are the same in all cases.
Blending Options>Drop Shadow

Web layout for Night Club

Blending Options>Gradient Overlay

Web layout for Night Club

Gradient’s parameters:

Web layout for Night Club
Web layout for Night Club

Insert the picture also:

Web layout for Night Club

Fill the sections with the necessary text:

Web layout for Night Club

(the bold text)

Web layout for Night Club

(the basic text)

Web layout for Night Club

(the underlined text)

Web layout for Night Club

(20.05.2007)

Web layout for Night Club

Select now the Rounded Rectangle Tool (U) and represent a button colored in #F8AC27.

Web layout for Night Club
Web layout for Night Club
Web layout for Night Club

Create on the right side of the button a small star, colored in # BA3526. We’ll need the Custom Shape Tool (U) for this operation.

Web layout for Night Club
Web layout for Night Club
Web layout for Night Club

Insert the button’s title:

Web layout for Night Club
Web layout for Night Club

For our convenience, we’ll combine in a group all the layers composing the recently made button (Press on the Ctrl button to mark out the necessary layers and keeping pressed the left mouse’s button we’ll take them down on Create a new group option).
Make two copies of the last made group and choose again Free Transform option to place all the copies the same way it is indicated next picture:

Web layout for Night Club

Create a new layer and then try to represent a texture’s pattern of 1×4 px and 72 dpi. The operation needs the Pencil Tool (B) and the color #8A3B00

Web layout for Night Club
Web layout for Night Club

Save the texture!

Web layout for Night Club

Using the Line Tool (U), try to make now a vertical, dividing stripe.
The layer’s parameters:
Fill 0% on the layers.
Blending Options>Pattern Overlay

Web layout for Night Club
Web layout for Night Club

The site is finished!