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!

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.

Create Web layout for Night Club web site in Photoshop CS

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.

Create Web layout for Night Club web site in Photoshop CS

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

Create Web layout for Night Club web site in Photoshop CS

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.

Create Web layout for Night Club web site in Photoshop CS

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

Create Web layout for Night Club web site in Photoshop CS

(Night)

Create Web layout for Night Club web site in Photoshop CS

(club)

Create Web layout for Night Club web site in Photoshop CS

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

Create Web layout for Night Club web site in Photoshop CSBlending Options>Bevel and Emboss

Create Web layout for Night Club web site in Photoshop CS

Blending Options>Gradient Overlay

Create Web layout for Night Club web site in Photoshop CS

Gradient’s parameters:

Create Web layout for Night Club web site in Photoshop CS

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

Create Web layout for Night Club web site in Photoshop CS

Gradient’s parameters:

Create Web layout for Night Club web site in Photoshop CS

Create Web layout for Night Club web site in Photoshop CS

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

Create Web layout for Night Club web site in Photoshop CS

Create Web layout for Night Club web site in Photoshop CSThe layer’s parameters:
Blending Options>Drop Shadow

Create Web layout for Night Club web site in Photoshop CS

Blending Options>Color Overlay

Create Web layout for Night Club web site in Photoshop CS

Create Web layout for Night Club web site in Photoshop CS

Introduce also the sections’ titles:

Create Web layout for Night Club web site in Photoshop CS

(welcome, news)

Create Web layout for Night Club web site in Photoshop CS

(to our club!)

Create Web layout for Night Club web site in Photoshop CS

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

Create Web layout for Night Club web site in Photoshop CS

Blending Options>Gradient Overlay

Create Web layout for Night Club web site in Photoshop CSGradient’s parameters:

Create Web layout for Night Club web site in Photoshop CS

Create Web layout for Night Club web site in Photoshop CS

Insert the picture also:

Create Web layout for Night Club web site in Photoshop CS

Fill the sections with the necessary text:

Create Web layout for Night Club web site in Photoshop CS

(the bold text)

Create Web layout for Night Club web site in Photoshop CS

(the basic text)

Create Web layout for Night Club web site in Photoshop CS

(the underlined text)

Create Web layout for Night Club web site in Photoshop CS

(20.05.2007)

Create Web layout for Night Club web site in Photoshop CSSelect now the Rounded Rectangle Tool (U) and represent a button colored in #F8AC27.

Create Web layout for Night Club web site in Photoshop CS

Create Web layout for Night Club web site in Photoshop CS

Create Web layout for Night Club web site in Photoshop CS

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.

Create Web layout for Night Club web site in Photoshop CS

Create Web layout for Night Club web site in Photoshop CS

Create Web layout for Night Club web site in Photoshop CS

Insert the button’s title:

Create Web layout for Night Club web site in Photoshop CS

Create Web layout for Night Club web site in Photoshop CSFor 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:

Create Web layout for Night Club web site in Photoshop CS

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

Create Web layout for Night Club web site in Photoshop CS

Create Web layout for Night Club web site in Photoshop CS

Save the texture!

Create Web layout for Night Club web site in Photoshop CS

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

Create Web layout for Night Club web site in Photoshop CS

Create Web layout for Night Club web site in Photoshop CS

The site is finished!

View full size here.

Page: 1 2

Comments