6 ways to make a banner

Table of contents:

6 ways to make a banner
6 ways to make a banner

We frequently see banners on the web. They are usually found at the top of a site's pages. Most often you see the name of the company and its logo, sometimes it is advertising or sometimes a mixture of the two when it comes to a commercial site. A banner can be informative, attractive and incentive, you want to keep the Internet user visiting your site. We are going to show you some ways to create a banner.


Method 1 of 6: Use Photoshop

Make a Banner Step 1

Step 1. Open a new document

Define the size of your banner: There are a number of standard sizes for banners. For our examples, we will start on the basis of a so-called “classic” banner: 468 pixels by 60 pixels.

NB: this is a standard size, but there is nothing mandatory. If you need a particular dimension, choose it

Make a Banner Step 2

Step 2. Choose the background color

Choose a color that matches the colors of your site.

  • Click on Foreground color to bring up the spectrum and choose your color.
  • With the Paint Bucket tool, fill the background of the banner with the selected color.
Make a Banner Step 3

Step 3. Create a new frame

Fill it with a darker color to make the text and logo stand out. You now want this frame to be proportional to the banner, and centered.

  • In this new frame, select an area that will be slightly smaller than the original banner and fill it with the chosen color.
  • Center the filled area. Select the entire frame by doing CTRL-A (on PC) or Command-A (on Macintosh).
  • From the Frame menu, select Align Frame to Selection> Vertical Centering. Repeat this manipulation, but with Horizontal Centering. In the end, you will have everything centered, horizontally and vertically.
Make a Banner Step 4

Step 4. Add your logo

To do this, open your logo image file, copy it and paste it on your banner where it will appear as a new frame. Optionally, adjust the size. At the same time press CTRL-T on a PC or Command-T on a Macintosh and use the handles to resize the document to the desired size. To keep the proportions during resizing, you must also hold down the Shift key.

Make a Banner Step 5

Step 5. Add a company or website name

To do this, choose the tool Text, select your font and type your text. If you have the wrong font size, change it as explained in the previous step.

Make a Banner Step 6

Step 6. Add additional elements

Sometimes a logo and name is enough. Other times, to attract more attention, you will have to add text and / or illustrations. To do this, create a new frame, which will allow you to make all the necessary adjustments without modifying the already existing frames.

Make a Banner Step 7

Step 7. Clean up

Adjust the logo, title and all elements to the millimeter, then save the banner.

Method 2 of 6: Use Microsoft Paint

Make a Banner Step 8

Step 1. Open a new document

Start by creating a document.

Make a Banner Step 9

Step 2. Draw a banner in the desired size

You can choose the size you want or click here to see a choice of banners.

Make a Banner Step 10

Step 3. Use the Paint Bucket Tool to fill your banner with the color you want

This allows you to have a colored background. Choose the color that best matches those on your site.

Make a Banner Step 11

Step 4. Add photos, images and text

Click on the pad To stick on or, from the menu, choose Paste from.

  • Locate where the image you want is located and click on the button. To open.
Make a Banner Step 12

Step 5. Resize your image if necessary

Click on the pad Resize, then choose Pixels. Set the height of your banner.

  • Move the image to the desired place.
  • Put as many images as you want (… and who can fit!).
Make a Banner Step 13

Step 6. Add your name

To do this, use the tool Text (button marked with an "A"), type your name or whatever.

Make a Banner Step 14

Step 7. Make your banner bigger

Use the tool To select and draw a rectangle around your banner. This rectangle should be the desired final size. Then click on Enlarge.

Make a Banner Step 15

Step 8. Once done, save your project

Method 3 of 6: Use Microsoft PowerPoint

Make a Banner Step 16

Step 1. Open a new blank PowerPoint document

Position the page at 100%

Make a Banner Step 17

Step 2. Draw the background of the banner

Use one of the standard banner sizes or whatever size you want.

  • Click on the pad Shapes and choose a rectangle.
  • Give it the desired size and fill as you want. You can use a predetermined color or choose a particular color from the “Fill Color” menu, select Fill Effects or click on the button Shape Styles and choose a pre-recorded filling.
Make a Banner Step 18

Step 3. Add a photo or logo

You can add photos, logos or all kinds of images to your banner. We will take a “clipart” drawing as an example. Click on the button Picture and choose the type of images you want to insert. Add your image, resize it and place it in your banner.

Make a Banner Step 19

Step 4. Add text or other elements

Put your company name, slogan or any other information to complete your banner.

Make a Banner Step 20

Step 5. Select the banner

From the Edit menu, choose Select all or press CTRL-A (on PC) or Command-A (on Mac). Important: Make sure your banner is exactly as you want it and that there are no unwanted elements!

  • Right click on any part of your banner except text, then choose Save as … remembering to select the image format (eg JPEG).
Make a Banner Step 21

Step 6. Save your banner

Open it to verify that it is exactly as you want it. You can then use it as many times as needed!

Method 4 of 6: Use online banner makers

Make a Banner Step 22

Step 1. Visit one of the following sites:

BannersABC.com, Addesigner.com, mybannermaker.com, etc. For more sites, search on Google. There are many, many different banner makers out there. Take the time to compare and choose the one that works best for you.

Make a Banner Step 23

Step 2. Add text and images

Simply follow the instructions and manipulations that the site gives you to create your banner. They often have an image bank that you can tap into. Otherwise, you can import images created or recovered by you.

Make a Banner Step 24

Step 3. Create your banner

Once you are done, you will find an "Export" function which will ask you in which folder or tree structure and in what format (JPEG is ideal) to download it. Follow the instructions, save, download. Then you can use it as many times as needed.

Method 5 of 6: Create an avatar that matches the banner

Make a Banner Step 25

Step 1. This is not mandatory

However, you may need an avatar that matches your banner in order to use it on forums.

Make a Banner Step 26

Step 2. Use the resize feature

It is available in most graphics software. Reduce your banner to get a smaller one.

Otherwise, you can create small banners with the elements of the big one. So you can create a mini banner with your logo or image or just a mini banner with the name of the company. In all cases, they must remain legible

Make a Banner Step 27

Step 3. Your avatar should be small

48 by 48 pixels is the standard size.

Make a Banner Step 28

Step 4. Save your avatar

Method 6 of 6: Add a banner as a signature for forums, for a site, etc

Make a Banner Step 29

Step 1. Create an account

Use an online photo sharing site like Photobucket, Flickr, Tumblr or any other site.

Once the account is created, you can upload your banner, avatar and any other image to the site

Make a Banner Step 30

Step 2. Get the HTML code for each image

You just have to paste, for example, the code of your banner to make it a signature for a forum, to illustrate a site or whatever else you want.


  • Go to forums or other sites to see sample banners!
  • On your computer, have a variety of fonts available to you.
  • It is practice makes perfect !


  • Making a banner takes time and therefore patience!
  • In case you upload your photo to Photobucket and use PowerPoint for your banner, the photo is saved in EMF format, which format Photobucket does not recognize. To convert it, be sure to save the photo (step 9) in JPEG or-g.webp" />
  • To keep it in the best conditions, save it as a 24-bit bitmap drawing and make a copy in JPEG and-g.webp" />

Popular by topic