website promotion banner
eturnkeys
Your Ad Here
Photoshop  Home Photoshop Web Layout Online Photo Portfolio
rss

Online Photo Portfolio

Author: Adobetutorialz.com More by this author
Browse Pages: << <  1  2


image 1

The layer's parameters: Blending Options>Drop Shadow

image 2

image 3

Create a new layer (Create new layer) and try to represent several small white points, applying the standard brush of small size, that must be of one more color also - #D7FF00 (place the points' layer lower than the layers reserved for the site's sections, but upper than the site's title).

image 4

Insert the titles for the site's sections, keeping the demands from the next tables:

image 5

About us

image 6

(the sections' titles of black color).

image 7

We need now to create the menu on the site's top:

image 8

image 9

Crate one more new layer (Create new layer) and use on it the Pencil Tool (B) to represent the pictograms near the buttons of white color.

image 10

image 11

Applying the last tool, we must create a dividing vertical stripe

image 12

Make a copy of this new made layer and apply the Free Transform option to place the copy exactly the same way indicated next picture:

image 13

Both dividing stripes must have the same parameters:

The layer's parameters: Blending Options>Outer Glow

image 14

image 15

Take the Rounded Rectangle Tool (U) to represent the primary layer of the button that must be placed lower than the section itself. Choose this time the white color.

image 16

image 17

The layer's parameters: Blending Options>Drop Shadow

image 18

image 19

Make a copy of the last made layer and select the Free Transform option to minimize the copy a little, applying for the layer also the color #6DD800

image 20

The layer's parameters: Blending Options>Stroke

image 21

Using the Rectangle Tool (U), try to make a highlight on the number's plate. The color is #A9DB7C. Insert a top on the upper part of the highlight with the Add Anchior Point Tool. The shape must be corrected with Convert Point Tool

image 22

Press Alt button and make a mouse's click between the highlight's layer and the button's green layer for the highlight to be applied in the limits of the button's green layer:

image 23

image 24

Combine in a group now all the layers composing the section's button (Press Ctrl button and mark out the necessary layers and press the left mouse's button to take the marked layers on Create a new group option). Make two copies of the last made group and select the Free Transform option to place the copies under the corresponding site's sections. Change the basic colors of the copies: the first copy - #F0920D; the second copy- #5191AD. The highlights' colors should be changed too: the orange button - #F6C073; the blue button- #89B4C7 (Blending Options>Stroke is the same with the basic button's color).

image 25

Insert now the titles for the sections' buttons:

image 26

image 27

Apply the same parameters for all the buttons' titles:

The layer's parameters: Blending Options>Drop Shadow

image 28

image 29

It's time to represent now the primary layers reserved for the pictures, using the Rectangle Tool (U) and the white color.

image 30

The layers' parameters are the same: Blending Options>Drop Shadow

image 31

image 32

Insert the pictures in the recently made sections:

image 33

Now we'll represent a double dividing stripe, choosing the Rectangle Tool (U). The left stripe should have a green texture, but the right one - a white one:

image 34

The layers' parameters for the left stripe: Fill 0%

Blending Options>Pattern Overlay

image 35

The parameters for the right stripe: Opacity 70%

Fill 0%

Blending Options>Pattern Overlay

image 36

image 37

image 38

Make a copy of this new made layer and choose again the Free Transform selection to place the copy the way demonstrated below:

image 39

Insert the necessary text in the site's sections:

image 40

(the bold text)

image 41

(the usual text)

image 42

(the underlined text)

image 43

Introduce also the navigating buttons and the links on our picture:

image 44

(<…123…>)

image 45

( Read more link)

image 46

Try to picture out a circle situated on the right lowest corner, colored with #FFD40F, having the instrument Ellipse Tool (U)

image 47

The layer's parameters: Blending Options>Drop Shadow

image 48

Blending Options>Stroke

image 49

image 50

Online Photo Portfolio Tutorial: Final Result (Click to enlarge)
Click to enlarge

Representing the site's page came to end!




print this page tell a friend subscribe to newsletter subscribe to rss
Rate this Material: Bad 1 2 3 4 5 Excellent
Browse Pages: << <  1  2

Add comments to "Online Photo Portfolio"