Web Layout for Hosting Company


In this detailed tutorial you will learn how to create a modern, professional Hosting Company layout in Photoshop.

Represent a new file having 766×660 px and 72dpi.
Choose the following instrument and try to represent the panel for the site’s header next to be.

Web Layout for Hosting Company

Blending Options-Gradient Overlay

Web Layout for Hosting Company

Gradient’s parameters:

Web Layout for Hosting Company

Selecting the previous instrument, you may create the lowest layer for the advertising announcement.

Web Layout for Hosting Company

Blending Options-Gradient Overlay

Web Layout for Hosting Company

Gradient’s parameters:

Web Layout for Hosting Company

Blending Options-Stroke

Web Layout for Hosting Company

Make two copies of the new made layer, but change the parameters of each copy.

Web Layout for Hosting Company

The parameters for the green one:
Blending Options-Gradient Overlay

Web Layout for Hosting Company

Gradient’s parameters:

Web Layout for Hosting Company

Blending Options-Stroke

Web Layout for Hosting Company

The parameters for the blue one:
Blending Options-Gradient Overlay

Web Layout for Hosting Company

Gradient’s parameters:

Web Layout for Hosting Company

Blending Options-Stroke

Web Layout for Hosting Company

Take the following tool

Web Layout for Hosting Company

and create the shadow represented in the next picture, colored in CCCCCC

Web Layout for Hosting Company
Web Layout for Hosting Company

on the layers

Web Layout for Hosting Company

Make two copies of the recently created layer and place them the way it is demonstrated in the picture below:

Web Layout for Hosting Company

Choose now the next tool

Web Layout for Hosting Company

and draw a vertical stripe colored with CCCCCC too.

Web Layout for Hosting Company

on the layers

Web Layout for Hosting Company

Make two copies of this layer this time and place them again the way you may see below:

Web Layout for Hosting Company

Introduce now the advertising text, keeping the demands from the table below:

Web Layout for Hosting Company

( Full, Business, Start)

Web Layout for Hosting Company

(Lorem ipsum dolor, Amet, consectuer)

Web Layout for Hosting Company

($25.99, $35.99, $55.99)

Web Layout for Hosting Company

Take now a brush of small size, but with sharp edges and white color to draw several small dots on the picture.

Web Layout for Hosting Company

Introduce now the photo and place it, like it is shown in the image below:

Web Layout for Hosting Company

Make two copies of the layer with the photo on it and place everything the same way it is shown below:

Web Layout for Hosting Company

Take the following instrument

Web Layout for Hosting Company

and represent the panel reserved for the menu’s buttons on the site’s header.

Web Layout for Hosting Company

Blending Options-Gradient Overlay

Web Layout for Hosting Company

Gradient’s parameters:

Web Layout for Hosting Company

Insert one more photo on the central panel of the site’s header:

Web Layout for Hosting Company

Take the next tool

Web Layout for Hosting Company

and choose the right cliché from the next table:

Web Layout for Hosting Company

its color is 69CB10.

Web Layout for Hosting Company

Blending Options-Drop Shadow

Web Layout for Hosting Company

Take the next instrument

Web Layout for Hosting Company

and represent a kind of button:

Web Layout for Hosting Company

Blending Options-Gradient Overlay

Web Layout for Hosting Company

Gradient’s parameters:

Web Layout for Hosting Company

Insert another photo on the panel of the site’s header:

Web Layout for Hosting Company

Introduce the text now on the site’s header panel, but be attentive with the demands requested in the next table:

Web Layout for Hosting Company

(Everything you need)

Web Layout for Hosting Company

(for internet activity)

Web Layout for Hosting Company

(Precise and inpartial approach, 24 x 7 support online chat)

Web Layout for Hosting Company

We have to introduce now on the header’s panel a circle colored in EB3D07 which is possible to draw with the following instrument

Web Layout for Hosting Company

.

Web Layout for Hosting Company

Blending Options-Drop Shadow

Web Layout for Hosting Company

Select the same instrument used before to draw a flare having the color FAD1C4.

Web Layout for Hosting Company
Web Layout for Hosting Company

Take the next instrument

Web Layout for Hosting Company

and choose the cliché indicated in the next table with the red color.

Web Layout for Hosting Company

of white color

Web Layout for Hosting Company
Web Layout for Hosting Company

Take the shown tool here

Web Layout for Hosting Company

and represent this time two triangles of white color.

Web Layout for Hosting Company
Web Layout for Hosting Company

Represent one window now designed for the searching system, situated next to create button earlier. This operation may be done by choosing the instrument from here

Web Layout for Hosting Company

.

Web Layout for Hosting Company

Blending Options-Inner Shadow

Web Layout for Hosting Company

Blending Options-Bevel and Emboss

Web Layout for Hosting Company

Blending Options-Stroke

Web Layout for Hosting Company

On the searching panel we should insert the titles of the button and of the window:

Web Layout for Hosting Company

(DOMAIN SEARCH)

Web Layout for Hosting Company

(GO!)

Web Layout for Hosting Company

Insert after that an opening colored in white on the panel reserved for the menu’s buttons. Select the following tool

Web Layout for Hosting Company

for this manipulation.

Web Layout for Hosting Company

Blending Options-Stroke

Web Layout for Hosting Company

Gradient’s parameters:

Web Layout for Hosting Company

Make four copies of this layer:

Web Layout for Hosting Company

Write now the titles of the buttons situated on the site’s menu.

Web Layout for Hosting Company
Web Layout for Hosting Company

Blending Options-Drop Shadow

Web Layout for Hosting Company

Take the next instrument

Web Layout for Hosting Company

and try to draw several small circles inside the openings on the panel reserved for the menu’s buttons, keeping the next parameters for each one:

Web Layout for Hosting Company

The blue one:
Blending Options-Gradient Overlay

Web Layout for Hosting Company

Gradient’s parameters:

Web Layout for Hosting Company

Blending Options-Stroke

Web Layout for Hosting Company

The green one:
Blending Options-Gradient Overlay

Web Layout for Hosting Company

Gradient’s parameters:

Web Layout for Hosting Company

Blending Options-Stroke

Web Layout for Hosting Company

The orange one:
Blending Options-Gradient Overlay

Web Layout for Hosting Company

Gradient’s parameters:

Web Layout for Hosting Company

Blending Options-Stroke

Web Layout for Hosting Company

The red one:
Blending Options-Gradient Overlay

Web Layout for Hosting Company

Gradient’s parameters:

Web Layout for Hosting Company

Blending Options-Stroke

Web Layout for Hosting Company

The silver one:
Blending Options-Gradient Overlay

Web Layout for Hosting Company

Gradient’s parameters:

Web Layout for Hosting Company

Blending Options-Stroke

Web Layout for Hosting Company

The flare for all of them should be the same (the copied one), created with this tool

Web Layout for Hosting Company
Web Layout for Hosting Company

Fill 0% on the layers:
Blending Options-Gradient Overlay

Web Layout for Hosting Company

Gradient’s parameters:

Web Layout for Hosting Company

The last step includes writing the name of the new site:

Web Layout for Hosting Company

(Hosting)

Web Layout for Hosting Company

(Company)

Web Layout for Hosting Company

(BEST PLACE ON THE WEB FOR YOU)

Web Layout for Hosting Company

Finished!