Square Header for a Website
Tutorial in Basics, Designing, Drawing, Web
The 95% of the times we find headers that occupy the whole width of the website. It came to my mind the idea of creating a square header, with its buttons to the flanks and base. It has a very simple design, but it will help you creating different ones, more interesting and originals.
Open a new document, 530×380px, and white background.
Create a ((New Layer)).
Choose color #96aed6 as the foreground.
Select ((Rounded Rectangle Tool)) and trace a rectangle as the one you see below.
Double click the layer and apply ((Layer Styles)).
((Drop Shadow)).
((Inner Shadow)).
((Stroke)).
Accept the changes.
You can add some shadows using ((Layer Styles)). You won’t get the desired effect.
So use this HORIZONTAL DIVIDER, apply it outside the rectangle in order to create the shadow and make it fade when it reaches the corners.
Write the title of the page. I used the font Cooper Std.
Stand in the text layer and go to ((Layer))-((Layer Style))-((Blending Options)).
((Drop Shadow)).
((Gradient Overlay)). Use these colors: #cdd9de and #f8fafb.
Accept the changes and the new text will look like this.
Trace 3 selections as seen on the following image. Each in a different layer.
Fill them in with color #5a77a7.
Double click the layer to apply ((Layer Styles)).
((Drop Shadow))
((Outer Glow)).
((Stroke)).
Accept the changes.
To apply the same ((Layer Styles)) to all the selections, simply right click the name of the layer you applied ((Layer Styles)) to and choose ((Copy Layer Styles)). Then right click the name of the layer and choose ((Past Layer Styles)).
Finally, add the names to the buttons using the same font and ((Layer Styles)) you used for the header title.
Done!
