Online Business Classes Web Page

Online Business Classes Web Page
In this step by step tutorial you will learn how to create a colorful layout for Online business.

Let’s start working by creating a new file (File>New) that would have 766 x750 px and 72 dpi

Then select the Rectangle Tool (U) to make the site’s background.

Online Business Classes Web Page

Select these parameters by making a mouse click on the layer we work with on the layers’ panel:
Blending Options>Gradient Overlay

Online Business Classes Web Page

Gradient’s parameters:

Online Business Classes Web Page

 

Online Business Classes Web Page

Using the same tool, try to make the central panel of the site’s page. Its color is white.

Online Business Classes Web Page

Use next the Rounded Rectangle Tool (U) with a radius of 2 px to represent the primary layer reserved for menu’s button situated on the site’s header.

Online Business Classes Web Page

 

Online Business Classes Web Page

The layer’s parameters: Blending Options>Gradient Overlay

Online Business Classes Web Page

Gradient’s parameters:

Online Business Classes Web Page

 

Online Business Classes Web Page

 

Online Business Classes Web Page

Select the previous instrument Rounded Rectangle Tool (U) with a radius of 2 px to represent a highlight on the button that would have white color.

Online Business Classes Web Page

The layer’s parameters: Fill 17%

Online Business Classes Web Page

 

Online Business Classes Web Page

 

Combine in a group all the layers composing the menu’s button of the web site (press Ctrl button for marking out the necessary layers and keep pressed the left mouse’s button when moving the marked layers on Create a new group selection).
Make five copies of this new group and choose Free Transform option to place the copies the way shown below. The four copies of the button must be left the way they are, but the parameters of the fifth one should be changed.

Online Business Classes Web Page

The parameters for the changed button: The first layer: Blending Options>Gradient Overlay

Online Business Classes Web Page

Gradient’s parameters:

Online Business Classes Web Page

The highlight’s parameters: Fill 49%
Blending mode-Color Dodge
Blending Options>Gradient Overlay

Online Business Classes Web Page

Gradient’s parameters:

Online Business Classes Web Page

Introduce the buttons’ titles on the site’s header:

Online Business Classes Web Page

 

Online Business Classes Web Page

Next we shall draw the logotype’s symbol of our site. For the beginning take the Rectangle Tool (U) and represent the basic elements, colored with #00E5E1 and then press Alt button to erase with the same instrument the unnecessary parts of the drawn elements.

Online Business Classes Web Page

 

Online Business Classes Web Page

Use the same tool to represent the second part of the logotype. In this case we should represent a stripe, but the Free Transform selection should be used for turning over the element on the necessary angle. Press Alt button when erasing the unnecessary elements and don’t forget that the color is still the same.

Online Business Classes Web Page

 

Online Business Classes Web Page

Insert the inscription containing the site’s name, following the demands from below:

Online Business Classes Web Page

 

Online Business Classes Web Page

It’s time to draw the primary layer reserved for the banner. In this case we’ll apply the Rounded Rectangle Tool (U) with a radius of 10 px.

Online Business Classes Web Page

The layer’s parameters: Blending Options>Gradient Overlay

Online Business Classes Web Page

Gradient’s parameters:

Online Business Classes Web Page

Blending Options>Stroke

Online Business Classes Web Page

 

Online Business Classes Web Page

Try to draw next a small highlight of white color on the bottom part of the banner, selecting the Ellipse Tool (U) for this operation.

Online Business Classes Web Page

The layer’s parameters: Fill 11%

Online Business Classes Web Page

Next choose the Line Tool (U) (width 1 pt) of white color to represent a net made up of crossing lines (pressing SHIFT button).

Online Business Classes Web Page
Online Business Classes Web Page

Select next parameters for the made layer: Fill 20%
Blending mode-Soft Light

Online Business Classes Web Page

Take the Custom Shape Tool (U) and choose the star’s pattern out of the next table:

Online Business Classes Web Page

 

Online Business Classes Web Page

The layer’s parameters: Blending Options>Drop Shadow

Online Business Classes Web Page

Blending Options>Gradient Overlay

Online Business Classes Web Page

Gradient’s parameters:

Online Business Classes Web Page

Blending Options>Stroke

Online Business Classes Web Page

 

Online Business Classes Web Page

Write now the slogan on the made banner:

Online Business Classes Web Page

 

Online Business Classes Web Page

Insert the section’s title:

Online Business Classes Web Page
Online Business Classes Web Page

Insert the rest of the text, reserved for the web site.

Online Business Classes Web Page

Lorem ipsum dolor sit amet (an inscription made on the site’s header)

Online Business Classes Web Page

consequat (an inscription on the header too)

Online Business Classes Web Page

 

(the heading)

Online Business Classes Web Page

the basic section’s text:

Online Business Classes Web Page

the links

Online Business Classes Web Page

the categories’ text

Online Business Classes Web Page

Now we shall create the primary layer of the entry panel, applying the Rectangle Tool (U).

Online Business Classes Web Page

The layer’s parameters: Blending Options>Gradient Overlay

Online Business Classes Web Page

Gradient’s parameters:

Online Business Classes Web Page

Blending Options>Stroke

Online Business Classes Web Page
Online Business Classes Web Page

Make two copies of the last made layer and select Free Transform option to change the copies’ sizes, placing them as it is indicated below:

Online Business Classes Web Page

Create the windows now reserved for leading in the information, selecting the same Rectangle Tool (U) with a radius of 4 px and having the white color.

Online Business Classes Web Page

The layer’s parameters: Blending Options>Stroke

Online Business Classes Web Page

 

Online Business Classes Web Page

Make a copy of the last made layer and choose again Free Transform option to place the copy on the next panel as it is shown next picture:

Online Business Classes Web Page

Next we shall draw a button, made with the Rounded Rectangle Tool (U) and a radius of 5 px.

Online Business Classes Web Page

The layer’s parameters: Blending Options>Gradient Overlay

Online Business Classes Web Page

Gradient’s parameters:

Online Business Classes Web Page

Blending Options>Stroke

Online Business Classes Web Page

 

Online Business Classes Web Page

Make a copy of the button’s layer and select again the Free Transform option to place the copy the same way demonstrated next image:

Online Business Classes Web Page

Using the already applied instrument, Custom Shape Tool (U), we can represent another small star.

Online Business Classes Web Page

The layer’s parameters: Blending Options>Drop Shadow

Online Business Classes Web Page

Blending Options>Gradient Overlay

Online Business Classes Web Page

Gradient’s parameters:

Online Business Classes Web Page

Blending Options>Stroke

Online Business Classes Web Page

Gradient’s parameters:

Online Business Classes Web Page

 

Online Business Classes Web Page

Copy out the last made layer and select this time the Delete Anchior Point Tool to erase the unnecessary top points. The Convert Point Tool will be helpful for making the corrections on the element’s shape. We should also change the parameters of the copy - layer:

Online Business Classes Web Page

The layer’s parameters: Blending Options>Gradient Overlay

Online Business Classes Web Page

Gradient’s parameters:

Online Business Classes Web Page

 

Online Business Classes Web Page

Put together next all the star’s layers to form a single one (press Ctrl button to mark out the necessary layers and press CTRL+E combination of buttons). Make a mouse click on the same layer on Add a Mask option that may be found on the bottom part of the layers’ panel and select the Brush Tool (B) of black color to clean out those zones of the star coming outside the edges.

Online Business Classes Web Page
Online Business Classes Web Page

Insert now the rest of the inscriptions situated on the panels and on the lower banner.

Online Business Classes Web Page

Client

Online Business Classes Web Page

 

Login

Online Business Classes Web Page

Username and Password

Online Business Classes Web Page

Lost password and Advanced

Online Business Classes Web Page

Login and Search (inscriptions on the buttons)

Online Business Classes Web Page

Lpsum dolor (an inscription on the lower banner)

Online Business Classes Web Page

blandit sed (inscription on the lower banner too)

Online Business Classes Web Page

The last stage includes writing the site’s copyright, keeping the demands from the next table:

Online Business Classes Web Page

 

Online Business Classes Web Page

The web site is finished!

View full size here.