Web Hosting Layout


Web Hosting Layout

This task we’ll see how to create a Header for Hosting Company.
First of all we should open a new file having next dimensions: 766×800 px and 72 dpi.
Then take the following instrument

Web Hosting Layout

and represent a rectangle the same way it is done below.

Web Hosting Layout

Blending Options-Gradient Overlay

Web Hosting Layout

Gradient’s parameters.

Web Hosting Layout

Blending Options-Stroke

Web Hosting Layout

Represent another rectangle above the previous one, keeping the same instrument. It must be colored in white and Fill 5% on it.

Web Hosting Layout

Using the next tool

Web Hosting Layout

, draw an ellipse on a new layer. The ellipse must be painted in white also. Set in the Layers window Blending mode (overlay).

Web Hosting Layout

Next step we should create several rays of white color with this instrument

Web Hosting Layout

. You may see below the Blending Options adjustments

Web Hosting Layout
Web Hosting Layout

Insert the next picture on a new layer.

Web Hosting Layout

We should get the next picture.

Web Hosting Layout

Choose now the indicated tool

Web Hosting Layout

to create four rectangles of white color. Fill 10% on each of them. Add a stripe to each of the rectangles. It’s possible to do that with this instrument

Web Hosting Layout

.

Web Hosting Layout

Insert now one more rectangle to the left side of the rest of them. Use the indicated instrument

Web Hosting Layout

with the gradient.

Web Hosting Layout
Web Hosting Layout
Web Hosting Layout

Next step includes adding a kind of flare on the previous layer.

Web Hosting Layout

Using the following tool

Web Hosting Layout

, stretch out the white ellipse (Fill 10%). Then choose next tool

Web Hosting Layout

to place the figure exactly the same way it is done below by keeping pressed the Alt button.
This way we’ll erase the unnecessary part of the ellipse. After that, take the next tool

Web Hosting Layout

to draw a stripe of 1 px thickness on the right vertical surface.
The second stripe with 2 px thickness (colored in 03ADC5) must be drawn on the lowest horizontal surface.
Get to representing the upper part of the web-site, where must be included the Main Menu. Using the next instrument

Web Hosting Layout

, create the next figure that you may see below.

Web Hosting Layout

Gradient’s parameters.

Web Hosting Layout

Next step includes creating a new rectangle with usual instrument

Web Hosting Layout

. Having the next tool

Web Hosting Layout

and keeping pressed the Alt button, you may cut out an orifice in that rectangle.

Web Hosting Layout

Apply the gradient to the new element we recently made it.

Web Hosting Layout

Choose this instrument

Web Hosting Layout

to represent two vertical stripes of 1 px, the same way it is shown next image.

Web Hosting Layout

Set out in the Layers window Blending Mode (overlay) and an Opacity-70%.

Web Hosting Layout

The stripe must get the same color as the menu’s one.
Double the stripes now the same way it is shown below.

Web Hosting Layout

Get to represent the menu’s buttons.

Web Hosting Layout
Web Hosting Layout

The buttons must be represented with this tool

Web Hosting Layout

. The first layer includes an outlined circle with the gradient.

Web Hosting Layout
Web Hosting Layout

The contours’ color is the same with the gradient’s one, the darkest place is colored in 1D66FF.
The second layer is composed of an ellipse with the gradient and Fill - 0%.

Web Hosting Layout

Copy now the made button on each menu’s opening, but you should change the colors of the gradient and the contours.

Web Hosting Layout

Fill the site with the text now.

Web Hosting Layout

The buttons’ text has next adjustments, inserted in the table.

Web Hosting Layout

The text inside the header has the next demands.

Web Hosting Layout

Logotype’s text:

Web Hosting Layout

The last action includes representing a lateral vertical stripe (

Web Hosting Layout

). Fill 10% to create an effect of shadow’s presence.

Web Hosting Layout
Web Hosting Layout

This way looks a finished Header for Hosting Company.