Friday, April 17, 2015

How to create a simple header banner graphic design for your website

This time I will show you how to create a simple header banner graphic design using Photoshop.

1.) Lets start creating a new file and I named it web header ( you can name whatever you want), then set the value for your width and height (It depends on the values of the width and height of your website). Click OK.

2.) On the Layers channel create a new layer (double click the layer name if you want to change its name) and fill it with white color.

3.) Click on add Layer Style on the Layers channel and click on Gradient Overlay.

4.) On the Gradient Overlay; set the opacity to 25%, angle -10, and set the style to Radial.

5.) Click on the Rectangle Tool and Click on the shape layer (second image).

6.)Click and drag in your document window. It will create a new shape layer and make sure it covers the entire width of the document, like on the image below. If you want to change the width and height of the shape: click Edit menu > Free Transform.

7.) Click again add Layer Style and then Gradient Overlay. Set the Opacity to 45%, Angle 90, and set Style to Linear.

8.) Now let's add a text, click on the Type Tool. Click on the document window and type the name of your website or any name you want.

9.) After Typing the text, we will now add a shadow behind the text. 
Click on the text layer on the layer channel and click on add Layer Style > Drop Shadow. Set the Opacity 50% and Angle -90. Check the box on stroke and set the size to 1px (second image).

10.) Now as you can see we are almost done, this time let's add some reflection of the text.

11.) Let's duplicate the text layer. On the Menu bar, go to Layer > Duplicate Layer then click OK.
Drag down and place the duplicate text layer below the main text layer.

12.) Click the Move Tool, then click the text and drag it downwards. Make sure that two texts are aligned with each other.

13.) We need to flip the duplicate text so that it will look like a reflection. On the Menu bar, go to Edit > Transform > Flip Vertical.

14.) Let's add some effects.
Change the Fill to 0%

Double click the duplicate layer to edit the Layer Effects.
Remove all the effect and check the Gradient Overlay. Click on the Gradient to open its Editor and choose the second preset Gradient.

Set the Opacity to 15% and Check the Reverse.

You can adjust the Gradient if you click and drag up or down.

And we are done! Here is the final look of the header banner that I've made, with few adjustments.

Hope you had fun and enjoyed creating your first header banner for your website.
Just a tip: don't be afraid to change the values of the Layer Effects, explore and experiment on it, you might discover its true power. ;)


  1. Thanks for this very useful info you have provided us. I will bookmark this for future reference and refer it to my friends. More power to your blog.
    Graphic Design Services | Rochester NY Graphic Design

  2. create your own website the leader in Web Design Services. Our websites are mobile, search engine, and user friendly. Our web designs convert your site visitors into leads.