Illustrated designs - http://www.illustrateddesigns.com
Advanced Web Hosting Services Header
http://www.illustrateddesigns.com/articles/2590/1/Advanced-Web-Hosting-Services-Header/Page1.html
By Art-D !
Published on 01/10/2007
 
Create Advanced Web Hosting Services Header in Photoshop CS Advanced Web Hosting Services Header
Create a professional web hosting header from scratch.

Advanced Web Hosting Services Header - part 1
Open a new file that would have 700x 258 px and 72 dpi. It must be painted in 002EAE.

Create Advanced Web Hosting Services Header in Photoshop CS

Now we should take the following instrument and create a texture’s clich? colored in 002A8F. It is reserved for the lowest layer of the site’s header. The clich? has next sizes: 4x4 px. You may see this picture below.

Create Advanced Web Hosting Services Header in Photoshop CS

Create Advanced Web Hosting Services Header in Photoshop CS

Save it!
Using this instrument on a new layer colored in 0135A1, represent the background’s layer. Apply the next parameters shown below.

Create Advanced Web Hosting Services Header in Photoshop CS

Blending Options-Pattern Overlay

Create Advanced Web Hosting Services Header in Photoshop CS

Blending Options-Stroke

Create Advanced Web Hosting Services Header in Photoshop CS

Advanced Web Hosting Services Header - part 2
Using the previous instrument over the last layer, it’s possible to represent the lowest layer for the menu’s buttons for the central panel.

Create Advanced Web Hosting Services Header in Photoshop CS

Blending Options-Drop Shadow

Create Advanced Web Hosting Services Header in Photoshop CS

Blending Options-Gradient Overlay

Create Advanced Web Hosting Services Header in Photoshop CS

Gradient’s parameters.

Create Advanced Web Hosting Services Header in Photoshop CS

Using the instrument , inside the white background, represent the basic central layer for the site’s header.

Create Advanced Web Hosting Services Header in Photoshop CS

Blending Options-Gradient Overlay

Create Advanced Web Hosting Services Header in Photoshop CS

Advanced Web Hosting Services Header - part 3
Gradient’s parameters:

Create Advanced Web Hosting Services Header in Photoshop CS

Blending Options-Pattern Overlay

Create Advanced Web Hosting Services Header in Photoshop CS

Blending Options-Stroke

Create Advanced Web Hosting Services Header in Photoshop CS

Gradient’s parameters:

Create Advanced Web Hosting Services Header in Photoshop CS

Take the next instrument and insert a stripe having the color 22C7FF on the upper part of the recently made layer.

Create Advanced Web Hosting Services Header in Photoshop CS

Select the following for the layers

Create Advanced Web Hosting Services Header in Photoshop CS

Advanced Web Hosting Services Header - part 4
Find now a picture representing the sky, make the necessary changes in its sizes and place the picture like in the next image.

Create Advanced Web Hosting Services Header in Photoshop CS

Select another tool now to represent a stripe, colored in 017BB8, along the lowest sky’s picture’s edge.

Create Advanced Web Hosting Services Header in Photoshop CS

Take a brush with blurred edges, of a big size on a new layer and insert a flare colored in 59F7FF on the lowest right corner.

Create Advanced Web Hosting Services Header in Photoshop CS

Now we have to introduce the banner, but first write the advertising announcement.

Create Advanced Web Hosting Services Header in Photoshop CS

Create Advanced Web Hosting Services Header in Photoshop CS

Blending Options-Stroke

Create Advanced Web Hosting Services Header in Photoshop CS

Advanced Web Hosting Services Header - part 5
Represent after that the lowest background of the banner, colored in white with the following tool .

Create Advanced Web Hosting Services Header in Photoshop CS

The layers’ Opacity must be of 20%.
Write then the site’s name.

Create Advanced Web Hosting Services Header in Photoshop CS

FAST

Create Advanced Web Hosting Services Header in Photoshop CS

HOSTING

Create Advanced Web Hosting Services Header in Photoshop CS

BEST HOSTING IN WEB

Create Advanced Web Hosting Services Header in Photoshop CS

Cut out now a picture with a computer on it, including the monitor from an appropriate picture and place it the way it is shown below.

Create Advanced Web Hosting Services Header in Photoshop CS

Advanced Web Hosting Services Header - part 6
Take the next instrument and represent the button designed for the searching system.

Create Advanced Web Hosting Services Header in Photoshop CS

Blending Options-Gradient Overlay

Create Advanced Web Hosting Services Header in Photoshop CS

Gradient’s parameters:

Create Advanced Web Hosting Services Header in Photoshop CS

Blending Options-Stroke

Create Advanced Web Hosting Services Header in Photoshop CS

Gradient’s parameters:

Create Advanced Web Hosting Services Header in Photoshop CS

Applying the previous instrument, insert a flare on the button represented earlier.

Create Advanced Web Hosting Services Header in Photoshop CS

Advanced Web Hosting Services Header - part 7
Blending Options-Gradient Overlay

Create Advanced Web Hosting Services Header in Photoshop CS

Gradient’s parameters:

Create Advanced Web Hosting Services Header in Photoshop CS

Write after that the names of the menu’s buttons and the searching button.

Create Advanced Web Hosting Services Header in Photoshop CS

Menu’s buttons.

Create Advanced Web Hosting Services Header in Photoshop CS

The searching button.

Create Advanced Web Hosting Services Header in Photoshop CS

Take the next instrument and create a dividing stripe for the menu that should be colored in black and white.

Create Advanced Web Hosting Services Header in Photoshop CS

Advanced Web Hosting Services Header - part 8
Create Advanced Web Hosting Services Header in Photoshop CS

on the layers we have

Create Advanced Web Hosting Services Header in Photoshop CS

Copy this new layer three times and place everything the way it is demonstrated in the next picture.

Create Advanced Web Hosting Services Header in Photoshop CS

Represent now a searching window with the instrument . First represent a white rectangle on which sides must be inserted several elements giving to it the necessary volume. Do it with this tool .

Create Advanced Web Hosting Services Header in Photoshop CS

Create Advanced Web Hosting Services Header in Photoshop CS

The last feature includes representing the colored lines on the upper part of the menu’s buttons. It’s possible to make them with the instrument of 2 px.
The blue line has the color 42C0DF.
The red one – FF0000.
The green one – 4FD605.
The violet one – D605AC.
The orange one – D6A705.

Create Advanced Web Hosting Services Header in Photoshop CS

And the final result is this one!

View full size here.