How to make a banner for your website or myspace

1 - I can do better 2 - Jury's out 3 - Pretty darn good 4 - Splendiferous 5 - Awesometastic by 14 people | Log in to rate

Ranked #1,556 in Tech & Geek, #35,863 overall

Making a banner on your own pc

I make my own banners because I just don't want any text at the bottom that detracts from my message. Making a banner on your own computer really isn't that hard, if you know your way around an image editing program.


What you need to make a banner on your PC at home

To make a banner like that I need three things:

  1. An image that sets the tone
  2. An image editor. I used the open source (free) image editor GIMP.
  3. Text to use. In this case a quote

Size: Step 1 to make your own banner 

Decide on the size you want your banner to be. Image sizes for the web are measured in pixels (px). The above is the normal width: 180 px wide. That is as wide as I'd recommend you go, though some banners are 468px wide.

The height is less important. Here are the standard horizontal banner sizes:

  • 728 x 90
  • 468 x 60
  • 234 x 60
  • 336 x 280
  • 300 x 250
  • 180 x 150
  • 125 x 125
  • 88 x 31

Vertical banners come in the following measures:

  • 120 x 600
  • 120 x 240
  • 160 x 600

Open your image editor and create an image of the size you want to use.

Save your image on your computer right away in the image format your editor uses by default. Name it for the banner size you just created.

That way you will have a basic image to get back to if things go wrong. Save in between too, any time you're half way happy with the results.

Using your signature image to spice it up - step 2 to making your banner 

Whether it's a picture of you, or your logo, or the product you want to promote - a banner will look a lot better with a picture on it.

Open the picture in your image editor and then copy paste it into your banner image.

Resize the just pasted image so that it comes out well in your banner. In GIMP this is done by going to the layer menu and selecting 'scale layer'.

If there is too much around the image, go back to the original and crop only the part you need. Save that part as a new image before doing anything else.

Copy paste the new image into the banner again. Rinse and repeat till you like the result. SAVE as your starting banner with a new name

The result 


I made a 468 by 60px banner. I rotated the basic picture aside from making it small enough to (almost) fit.

Background: step 3 in making your banner 


Chances are your banner is looking a bit lumpy. There's your picture and a lot of empty space to the right (or left). You want the background color to match the image you started out with. In my case, because I picked a picture with a white background, I decided - just for kicks - to use one of the colors in the image for the background. I went with a light blue from the eye of the squid.

This is what the color picker in your image editor is for. Find the color you like, and give the rest of your image that background color. It may be necessary to look at the layers of your image to be able to give the rest of the picture a background color at all.

If you get stuck trying, save the image as jpeg (jpg) and reopen it. Now it should be possible to give the white space left a color.

Again: save without extension with yet another filename. Your image editor will give the image an extension on it's own and no information will be lost.

Add text: step 4 in making your banner 

Of course I've already been adding text. Here's how... [The image here is the same one as in the previous module, but shrinked by squidoo]

Adding text can be done in any image editor. It should be possible to edit the following:

  • Font

  • Font size

  • Font color
Choose a font that fits the style of your website, blog or myspace page: whatever you're making the banner for.

Choose a font size that is as big as you can make it while still having the text fit your banner.

Choose a color for you text which has a good light-dark contrast with the background. For a dark background it's always safe to go with white text. If you think the contrast is too big, you can always toggle transparency.

With less transparency the dark background you choose will show through the letters, making them darker and giving less contrast.

Don't give the text a contrast with the background that is only based on color. Dark red letters on a dark green background for instance will not only be ugly, but it will also not be legible by people who have red-green colorblindness. But dark red letters on a light green background can be read by anybody: it's not just a color contrast, but also a light-dark contrast.

 

featured lens 2010 Christian Calendars, Bible Organizers and Year Planners

Diaries and Biblical Engagement Planners, Calendars and Christian Date Books. If you want your daily reminders of your faith in your date book. If you want your kids to grow up with bible verses literally on the kitchen wall. If you want your year...

featured lens Uplifting Spiritual Quotes Xmas Gift Ideas

Who doesn't love spiritual quotes? These are some ways to turn spiritual inspiration into a great gift. I think these bracelets, posters, silver hangers, candles, plaques, books and frames are adorable, cute and inspiring. I hope you do too. Buy th...

featured lens Spiritual pictures and photos

This is a lens devoted to my spiritual pictures - the ones I use to promote my websites. I want to honestly know what you think of them, and I want your ideas for improvements. But you can also just add whatever fun or weird title to them that you wa...

featured lens Spiritual Quotes Wall Calendars and Desk Calendars

I love spiritual quotes - I want them around all the time... These calendars have a quote to make you think for each month. In color and black and white. Buy a spiritual calendar in the UK (Amazon)

featured lens Spiritual Cards - with and without quotes

This is a collection of spiritual cards from various traditions. They inspire, guide and help you interpret your day. I especially love the cards that contain spiritual quotes.

Any questions about making a banner? 

submit
Show All

Explore related pages

Christmas Photo Effects
With Photo Effects, it has never been easier to create one of a kind images whic...
Pimp Your Images - Using Free Online Image Editors
You may have already got some free images from some of the sites I list on Free...
Standard Banner Sizes
I have made this lens for my own reference when I need to make new banners for m...
Katinka's Squidoo Answer Deck
Learn how to get your lens found in google, how to make your lenses look good, h...
Spiritual friends - thanks for supporting my spiritual blog
Sharing with you all a collection of blogs - in various languages - that have su...
Introduction to blogging videos
This lens is a video tutorial on how to blog. That is: the best youtube videos a...

Related Topics

Create a Lens!