How to create simple website/blog header using Photoshop

Here are some simple steps where you can create a simple banner/header for your web site or a blog

Come lets start creating it,

Step 1: From the file menu, click new which will popup the following window and provide the details as mentioned below.

clip_image002

Step 2: This will now open up a new window where we will be creating the banner ,

a. Create a new layer

b. Click the rectangular marquee tool or press M.

c. Draw a rectangle to your required size and fill some colour using the “Pain bucket tool” (see the screenshot below)

clip_image004

Step 3: Create a copy of the rectangle layer, here for example Layer1 where we have created a rectangle box and move it to the bottom of the banner as below.

clip_image006

Step 4: Now type the name of your business using the text tool.

clip_image008

Step 5: Your banner is now done. Oops do you feel that this is not what you have expected? Fine, come lets add some more effects to the banner.

a. Select the text layer and right click where you can see the window shown below,

b. Click the Blending Options menu item

clip_image010

c. You will be taken to the screen shown below.

clip_image012

d. You can adjust the Distance, Spread and Size menu items according to your desire. But its better to leave it as default . Click OK you will see your text as below,

clip_image014

Still feel something is missing? Ok lets proceed,

Step 6: Create another layer and add some text, for example “10010” and repeat the text to the end of the banner as show below,

clip_image016

Step 7: From the Layers window reduce the “Opacity” to say 34%.

clip_image018

Step 8: Now duplicate the text layer “10010” and drag it to the bottom of the banner. Now your banner will be shown as below,

clip_image020

Step 9: Now save the image as a .jpg file and use it wherever you want to.



Meet the Author

Ravi Shankar

A Software developer and blogger who is always looking to provide technical help to the wider community.

0 comments… add one

Leave a Comment

Get your free copies of the following tech guides by joining the Digital Answers mailing list.