Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Elegant Website Header

Elegant Website Header


Creating a navigation header for a gift gallery

Start by creating a rounded rectangle using rounded rectangle shape tool.

image 1

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

image 2

image 3

Duplicate the layer. Place it on the other side. Change the color.

image 4

Create a shape as shown using pen tool.

image 5

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

image 6

image 7

image 8

Duplicate the layer. Scale down and remove the layer style.

image 9

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

image 10

image 11

Ctrl+Click the layer thumbnail to get the selection. From select menu apply modify>>contract. Contract the selection by 2 pixels. Create a new layer and apply a black to white gradient in linear mode.

image 12

Change the layer mode to screen.

image 13

Insert a few relevant images.

image 14

Create a search bar on the bottom left.

image 15

Type navigation links on the bottom of the header.

Elegant Website Header Tutorial: Final Result

Place the gallery logo in the center.



Author's URL: EZPhotoshop
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 "Elegant Website Header"

Only registered users can write comment

No comments yet...