Modernized Header Layout
Photoshop Tutorial
Summary:
The header is an important feature of any interface, because it contains most of the links and buttons to navigation. In this step-by-step tutorial, we will learn how to create a modernized header layout for your website design or graphic user interfaces.
Step-By-Step Instructions:
Start by creating a rectangle using rectangular shape tool.
Double click the layer to open layer style window. Apply settings as
shown.
Ctrl+Click to get the selection. Contract the selection by 6 pixels.
Create a new layer. Apply Black to white gradient. Change layer mode to
"Lighten" for this layer.
Ctrl+Click to get the selection. Contract the selection by 6 pixels.
Create a new layer. Apply Black to white gradient. Change layer mode to
"Exclusion" for this layer.
Double click the layer to open layer style window. Apply settings as
shown.
Select and duplicate all the layers. Press Ctrl+E to merge. Scale down
vertically.
Change the layer mode to "Linear Light". Place it on the top. Duplicate
and place it on the bottom.
Select and duplicate the layers again. Press Ctrl+E to merge. Press Ctrl+T.
Right Click and select distort. Adjust the nodes to get the shape as shown.
Change the layer mode to "Screen".
Duplicate, rotate and place on each corner.
Select and merge all the layers. Duplicate the layer. Squeeze it vertically
and move the layer below all the layers in layer order in layer palette.
Type " % " repeatedly. Scale down horizontally.
Move this layer below all the layers in layer order in layer palette.
Place it on the top. Duplicate and place in the bottom too.
Create a circle using elliptical shape tool.
Double click the layer to open layer style window. Apply settings as
shown.
Select and merge all the layers. Duplicate the layer and scale down a
bit. Press Ctrl+U to open hue/saturation window. Apply settings as shown.
Change the layer mode to "Hard Light".
Similarly create buttons for the navigation links and place as shown.
Also create connectors in similar fashion.
|
