How To Create A Banner For Your Webpage Using Photoshop

Probably one of the biggest visual boosts you can give to your website is a creative banner that grabs the viewers attention.  I created my banner in Photoshop by following a few easy steps.

First, open Photoshop and click FILE–>NEW.  Change the name of the new project to whatever you like.  The width, however, should be the fixed size of your website.  (If you don’t know how to make your site a concrete size, click on the DIY link below before going on with this tutorial.)

So, if your site is 800px wide, make sure the banner is the same width.  I usually use anywhere from 150-300 for the height.  Be careful though- you don’t want the site banner taking up half of the page height wise.

Next, click on the TEXT option on the sidebar. (Next to the arrow below).

Once you do that, click anywhere on your whitespace for a period and a cursor to show.  This is where your text will begin.  Don’t worry if it’s not exact or it goes off the designated whitespace.  You can use the MOVE option in Photoshop to move the layer around.

So, type whatever you want your site name to be.  On my example below, I also changed:

  1. the font
  2. the size
  3. the color

(Marked by the numbered arrows below)

Obviously, this example doesn’t add much pizazz– there is a lot that can be done to a banner such as vertical text, background color, images, etc.  I suggest you take some time and create a banner that will draw people to your site.

The final cluster of steps is to add it into our html.  I enclose the image in a div that I call banner, but it’s up to you if you choose to do so.  This is what your html should look like (of course with your own name, height, and width included).

As long as the width of your banner is the same size as your fixed width, it should appear at the top middle.  Just a reminder: put the banner ahead of everything else so it appears at the top.

There are the barebones for creating a website banner in Photoshop.

-Christina Ranalli


~ by christinaranalli on October 30, 2011.

One Response to “How To Create A Banner For Your Webpage Using Photoshop”

  1. This post was a great explanation of making a banner. It did not disappoint, everything was concise and written well. The pictures were perfectly shaped and sized.

Comments are closed.

%d bloggers like this: