How to Design A Glossy Header
The first thing you need to do is to create a new document. For this tutorial I went with a width of 800px, since the lowest screen resolution you generally design for is 800px wide, and a height of 120px. This would be good for a heading for your site.
Create a new layer and fill the whole area with any colour. Change layer properties to gradient overlay with 100% opacity with the following setting: #2272B1 - #18508F. IMAGE PREVIEW
Step 2Create a new layer and select the upper half of the whole area with the rectangle marquee tool and fill with white. Set the opacity to 5% and to overlay in layer style blending options.
Step 3This is where the gloss really gets made. Add a new layer and fill the whole area with white. Set to overlay 100% opacity then select color overlay set to overlay 70% opacity and colour #FF0000. Then add a pattern overlay, go to the stripes pattern set and then choose the black and white one and set opacity to 1%(IMAGE PREVIEW). You should have something like this: image
Now we will create the text. Simply add using the text tool your website title with the following setting: Font; Trebuchet, Size; 30pt - for first two words - and 14pt for the last .com. Set the first word to itallic and the second to bold itallic. I would also use anti aliasing crisp. This is of course up to you and can be changed around. Next add the following layer blending options. Gradient overlay: IMAGE PREVIEW F8F8F8 - EFEFEF - FBFBFB - EDEDED and stroke, outside 1px and colour #6FC3FF.
Step 5Now this is for the drop shadow effect. Duplicate your text layer. Put the layer under the previous one so it is below. Then go to layer blending options fill opacity 0% color - opacity 50% and overlay and colour overlay black.
Step 6Now make a new layer and using the shape tool make a round rectangle over the top of the text with reounded edges around 10 px. Make it so it goes about 10px from top and bottom of overall height. Also have extra space from the text and rectangle on the left and right sides of the text. Set the layer blending options to: Fill opacity 0% , opacity 67%, gradient overlay with the following settings: IMAGE PREVIEW. You should have something like this: Preview
Step 7Now we add the finishing touch. Create a new layer and a rectangle about 70% of the width of the text and filled with white. Also make it from the top of the shape we create down to about 10px below the text. Now go to filter - blur - motionblur and make an angle of 0 and pixel width 203. Then go to layer blending options and select opacity 17% and make it overlay. Then if you wish, rasterize the layer open up the layers list and click the shape we just made (layer name shape 1 probably) while holding ctrl which should bring a dotted line outlining it. Then go to select, inverse and click delete button. This deletes all the shape we just made which is outside of the round rectangle we made.
You should now have something like this: Preview If not download the psd here and see what you have done differently. Thanks for reading the tutorial. If you need any help please leave a comment and I will try and answer it. Also if you wish to post your outcomes please leave a link in the comment. No copying of this tutorial is allowed. Writtent by Michael Clarke.


Write a comment