Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Professional Mobile Portal Web Layout (Part 1)

Professional Mobile Portal Web Layout (Part 1)

Browse Pages: 2  3  > >>

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

image 1

Blending Options-Gradient Overlay

image 2

Gradient's parameters:

image 3

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

image 4

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

image 5

image 6

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

image 7

image 8

image 9

Fill 0% on the layers.

Blending Options-Gradient Overlay

image 10

Gradient's parameters:

image 11

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.

image 12

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

image 13

Fill 0% on the layers.

Blending Options-Gradient Overlay

image 14

Gradient's parameters:

image 15

We have to represent now an ornament on a new layer, reserved for the site's header.

sing 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:

image 16

Fill 0% on the layers, having the Opacity of 80%.

Blending Options-Stroke

image 17

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

image 18

Fill 0% on the layers and keep the Opacity on 80%.

Blending Options-Stroke

image 19

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.

image 20

Professional Mobile Portal Web Layout (Part 1)



Author's URL: Adobetutorialz.com
Browse Pages: 2  3  > >>
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Professional Mobile Portal Web Layout (Part 1)"

Captcha