Page Header Bar

This tutorial with guide you through how to make a header bar for your website and is only limited by your imagination:

This tutorial takes in to account that you know the basics of Photoshop.


Grey Header Bar


Transparent Coloured Header Bar


Bright Colourful Header Bar



Open Photoshop and create a new image, 800x40.


Fill Layer 1 with a light grey to white gradient from top to bottom.


Using the Polygon Lasso Tool create a section like this:


Go to Select » Modify » Smooth then set to 20px. This should give you something like this:

As the selection is touching the edge it doesn't smooth it.


Create a new layer and fill it with white and apply these blending options:


Blend Mode Colour set to #000000



Blend Mode Colour set to #D5CFCB



Highlight Mode set to #FFFFFF

Shadow Mode set to #4B3F36



Blend Mode Colour set to #FFFFFF




You should now have something like this:


Now you can duplicate this tab and repeat it or create new shapes. You can also add other effects and text. If you want to make it a bit more colourful you can use the same blending options but with colours.