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.

Related articles:

  1. How to Create Simple Navigation Menu Bar using Photoshop Here we will create a simple navigation menu bar that...
  2. Making a simple Mirror effect in Photoshop Let’s get on with making a simple mirror effect in...
  3. How to make a Simple Birthday Banner using Photoshop We learnt how to install new fonts and use them...
  4. Simple Web Photo Gallery using Photoshop We will see here how to create a simple web...
  5. Photoshop Tips: Designing frames for your favourite images Step 1: Create a new image with width of 600px...

Leave a Comment

Previous post:

Next post: