Professional Mobile Portal Web Layout


In this tutorial, we will learn how to make a professional template from scratch.

Create a new file that would have 1024×955 px and 72 dpi. Choose now the Rectangle Tool (U) to represent the background of next web - site to be.

Professional Mobile Portal Web Layout

Blending Options-Gradient Overlay

Professional Mobile Portal Web Layout

Gradient’s parameters:

Professional Mobile Portal Web Layout

Applying the previous instrument, represent a stripe on the lowest part of the background, colored in 0F2F47.

Professional Mobile Portal Web Layout

Using the same Rectangle Tool (U), mark out those places under the sections’ titles from our site (the colors’ codes are shown below).

Professional Mobile Portal Web Layout
Professional Mobile Portal Web Layout

Using the same instrument, try to represent a shadow under the layer reserved for the section’s title.

Professional Mobile Portal Web Layout
Professional Mobile Portal Web Layout
Professional Mobile Portal Web Layout

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

Professional Mobile Portal Web Layout

Gradient’s parameters:

Professional Mobile Portal Web Layout

Make three copies of the new made layer. The first two copies we’ll keep the same, but the third one needs to be processed with Free Transform option, changing its size by stretching it along the colored stripe.

Professional Mobile Portal Web Layout

Make two copies of the processed copy and apply different parameters to our new copies.

Professional Mobile Portal Web Layout

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

Professional Mobile Portal Web Layout

Gradient’s parameters:

Professional Mobile Portal Web Layout

We have to represent now an ornament on a new layer, reserved for the site’s header.
Using the Ellipse Tool (U), create a circle firstly and then press the Alt button applying simultaneously the Rectangle Tool (U) to cut out the lowest part, selecting the next parameters:

Professional Mobile Portal Web Layout

Fill 0% on the layers, having the Opacity of 80%.
Blending Options-Stroke

Professional Mobile Portal Web Layout

Select the last instrument to represent one more ornament, having an elliptical shape.

Professional Mobile Portal Web Layout

Fill 0% on the layers and keep the Opacity on 80%.
Blending Options-Stroke

Professional Mobile Portal Web Layout

Using the Ellipse Tool (U), we need to draw now a circle’s part colored in 1C5683, the way it is indicated in the picture.

Professional Mobile Portal Web Layout
Professional Mobile Portal Web Layout

Applying the Rectangle Tool (U), we have to create the primary layer reserved for the site’s menu, situated on the site’s header.

Professional Mobile Portal Web Layout

Fill 0% on the layers.
Blending Options-Drop Shadow

Professional Mobile Portal Web Layout

Blending Options-Gradient Overlay

Professional Mobile Portal Web Layout

Gradient’s parameters:

Professional Mobile Portal Web Layout

Select the previous tool to create one more layer reserved for the menu’s panel.

Professional Mobile Portal Web Layout

Fill 0% on the layers.
Blending Options-Drop Shadow

Professional Mobile Portal Web Layout

Blending Options-Gradient Overlay

Professional Mobile Portal Web Layout

Gradient’s parameters:

Professional Mobile Portal Web Layout

Select the same Rectangle Tool (U) to draw the button now:

Professional Mobile Portal Web Layout
Professional Mobile Portal Web Layout

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

Professional Mobile Portal Web Layout

Gradient’s parameters:

Professional Mobile Portal Web Layout

Make three copies of the new layer and the last two copies must be corrected, applying the Free Transform option:

Professional Mobile Portal Web Layout

The other one should be corrected too with Free Transform option, changing its parameters:

Professional Mobile Portal Web Layout
Professional Mobile Portal Web Layout

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

Professional Mobile Portal Web Layout

Gradient’s parameters:

Professional Mobile Portal Web Layout

Take the Line Tool (U) to represent those dividing, horizontal stripes colored in 345C7A.

Professional Mobile Portal Web Layout

Fill the site’s sections with the appropriated pictures.

Professional Mobile Portal Web Layout

Write the site’s name now, keeping the demands from the tables below:

Professional Mobile Portal Web Layout

(Mobile Portal)

Professional Mobile Portal Web Layout

(mobile world’s Novelties)

Professional Mobile Portal Web Layout

Write now the titles reserved for the menu’s buttons of the site.

Professional Mobile Portal Web Layout

(site blog)

Professional Mobile Portal Web Layout

(the other buttons)

Professional Mobile Portal Web Layout

Insert also the titles of the site’s sections, applying the demands from the next table:

Professional Mobile Portal Web Layout
Professional Mobile Portal Web Layout

Fill the sections with the appropriate text:

Professional Mobile Portal Web Layout
Professional Mobile Portal Web Layout

Write the rest of the text for other sections:

Professional Mobile Portal Web Layout

(Lorem ipsum dolor sit amet.)

Professional Mobile Portal Web Layout

(the main text)

Professional Mobile Portal Web Layout

(Praesent vestibulum molestie)

Professional Mobile Portal Web Layout

(the green text)

Professional Mobile Portal Web Layout

(the titles of the sections’ text’s paragraphs).

Professional Mobile Portal Web Layout

Select again the Rectangle Tool (U) to draw now three rectangles colored in 4B86B0, and apply the Ellipse Tool (U) to draw three small circles colored in 25E217.

Professional Mobile Portal Web Layout

Using the Custom Shape Tool (U), choose from the table below the necessary cliché, that one indicated below:

Professional Mobile Portal Web Layout

And picture out a star of white color near the logotype:

Professional Mobile Portal Web Layout
Professional Mobile Portal Web Layout

Make six copies of the new made layer and apply the Free Transform option to make it smaller a little and place it the way it is shown in the next picture.

Professional Mobile Portal Web Layout

Finished!