Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Designing a Navigation Header for a Portal

Designing a Navigation Header for a Portal


Create a rectangle using rectangular shape tool.

image 1

Double click the layer to open layer style window. Apply settings as shown.

image 2

image 3

image 4

image 5

Duplicate the layer several times and place as shown in the image below. Duplicate the layer again. Remove gradient overlay layer style. Fill it with white color and move it to the top as shown.

image 6

Create some rounded rectangle using rounded rectangle shape tool. Apply same layer style.

image 7

Create a circle using elliptical shape tool.

image 8

Double click the layer to open layer style window. Apply settings as shown.

image 9

image 10

Similarly create more circles and apply same layer style.

image 11

Create some divider lines using line tool. Type link names over the big rounded rectangles.

image 12

Create a shape as shown using pen tool. Move this layer below all the layers in layer order in layer palette.

image 13

Insert any image and place it on the center.

image 14

From "Filter" menu select "Blur>>Motion Blur ". Apply settings as shown.

image 15

Change the layer mode to "Vivid Light".

image 16

Type "searchbar.com" in big size. Reduce the opacity to 10%.

image 17

Insert a magnifying glass cutout and place it on the right. Play around with layer modes.

image 18

Duplicate the "search" text layer. Move this layer right above the magnifying glass layer in layer order in layer palette. Press Ctrl+Alt+G to create a clipping mask. Insert company name and place as shown.

Designing a Navigation Header for a Portal Tutorial: Final Result



Author's URL: Aviva Directory
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Designing a Navigation Header for a Portal"

Only registered users can write comment

No comments yet...