What you need before you start

A banner is a horizontal image, usually wider than it is tall, that sits at the top of a webpage, social media profile, or printed material. You can make one in any tool that lets you resize a canvas and add text or images — that includes free programs like Canva, GIMP, or even Microsoft Word if you already have it.

Before you open anything, decide three things: where the banner will live (a website header, a Facebook page, a printed poster), how wide and tall it needs to be, and what you want it to say or show. If it goes on a website, the site usually tells you the exact dimensions in pixels. If it's for print, measure the space in inches. If it's for social media, each platform has standard sizes — Facebook cover photos are 820 by 312 pixels, for example.

Write down what text must appear on the banner and gather any images or logos you want to use. Have those files ready on your computer before you start. If you don't have images yet, you can search for free stock photos on Unsplash, Pexels, or Pixabay, read them, and use those instead.

Key Takeaways

  • Start by knowing the exact width and height your banner needs to be, because different platforms and uses require different dimensions.
  • Create a new document at that size in Canva, GIMP, or another design tool, then add a background color, image, or gradient as your base layer.
  • Add text on top of the background, making sure it is large enough to read and positioned so it does not get cut off at the edges.
  • Save your finished banner in the right format — JPG for photos, PNG if you need a transparent background, or PDF if it will be printed.
  • Test the banner in the actual place it will appear before you consider it done, because colors and text size look different on different screens.

Set up your canvas at the right size

Open the design tool you chose. In Canva, click "Create a design" and search for the exact type you need — type "Facebook cover" or "website banner" and Canva shows you preset sizes. In GIMP, go to File > New and enter the width and height in pixels. In Word, go to Insert > Shapes, draw a rectangle, and right-click to set its exact dimensions.

If you are making a banner for a website you built yourself or for a client, ask them for the exact pixel dimensions. If you are making one for a social media platform, look up that platform's current banner size — these change sometimes, so search "[platform name] banner size 2024" to get the current numbers. Write the dimensions down so you do not forget them halfway through.

Once your canvas is the right size, you have a blank rectangle. This is your working space. Everything you add from here on will fit inside this rectangle, so nothing will get cut off or look wrong when someone views it.

Add a background that makes your message stand out

A banner needs a background so text and images have something to sit on top of. Your options are a solid color, a gradient (one color fading to another), a photograph, or a pattern. The background should not be so busy or bright that text becomes hard to read.

In Canva, click the background area and choose a color from the palette, or upload an image. In GIMP, go to Edit > Fill with FG Color (foreground color) to fill the canvas with whatever color you have selected, or go to Filters > Render to add a gradient or pattern. In Word, right-click the rectangle and choose "Format Shape," then pick a fill color or image.

If you use a photograph as your background, make sure it is large enough that it does not look pixelated when stretched to fill your banner. A good rule: if the photo is at least as wide as your banner width in pixels, you are safe. If you use a very dark or very light photo, add a semi-transparent colored layer on top of it so text will show up clearly — this is called an overlay.

Add and position your text

Click where it says "Add text" or the text tool in your program. Type the words you want to appear. Make the text large — banners are often viewed from a distance or on small screens, so text that looks readable on your computer screen might be too small for someone scrolling on a phone.

Position the text so it sits in the middle or upper area of the banner, not crammed into a corner. Leave space around the edges — text that touches the very edge of the banner can get cut off depending on how the banner is displayed. If your banner will appear on a website, the site might add padding or crop slightly, so keep important text at least 20 pixels away from the edges.

Choose a font that is straightforward to read — sans-serif fonts like Arial, Helvetica, or Open Sans work well for banners because they are clean and clear. Avoid thin or decorative fonts that become hard to read when made small. Pick a text color that contrasts with your background — dark text on a light background or light text on a dark background. If you cannot tell whether text is readable, step back from your screen or view it on your phone to see how it looks from a distance.

Add images or logos if you need them

If your banner should include a logo, company image, or decorative graphic, insert it now. In Canva, click "Upload" and choose the image file from your computer. In GIMP, go to File > Open as Layers. In Word, go to Insert > Pictures. Position the image so it does not overlap text in a way that makes text hard to read.

Resize the image by dragging its corners — hold Shift while dragging to keep the image from stretching out of proportion. Make sure the image is not so large that it takes up most of the banner and leaves no room for text. A common layout is a small logo on one side and text on the other, or a background image with text overlaid on top.

If the image has a white or colored background that does not match your banner, you may need to remove it. In Canva, this is usually automatic. In GIMP, use the "Select by Color" tool to select the background, then delete it. This works best if the image background is a single solid color.

Save your banner in the right format

Before you save, take a final look. Make sure text is readable, nothing is cut off at the edges, and the overall look matches what you wanted. Zoom out or view it at actual size to see how it will appear to someone else.

Save the file in the format the place where it will appear requires. For websites, JPG works for photos and PNG works if you need a transparent background (no white or colored box around your design). For print, PDF preserves the exact layout and colors. For social media, JPG or PNG both work. In Canva, click "read" and choose the format. In GIMP, go to File > Export As. In Word, right-click the banner and choose "Save as Picture."

Keep a copy of the original file in your design program as well — Canva projects, GIMP .xcf files, or Word documents. That way, if you need to change the text or colors later, you can open the original and edit it instead of starting over.

Test the banner where it will actually appear

Upload or place your banner in the actual location where people will see it — the website, the social media page, the printed material. Look at it there. Colors often appear different on different screens, and text size looks different depending on the device someone is using to view it.

On a phone, does the text still look large enough to read? On a desktop, does the banner look stretched or squashed? If something looks wrong, go back to your design file, make the change, save it again, and upload the new version. This step catches problems that are invisible until the banner is live.

If the banner will be printed, print a test copy on regular paper first. Check that colors match what you expected and that text is sharp and readable. Printer settings can change how colors appear, so a test print is worth the paper.

Frequently Asked Questions

What is the difference between JPG and PNG?

JPG is smaller and works well for photographs and complex images with many colors. PNG is larger but can have a transparent background, which is useful if you want to place your banner on top of different backgrounds. For most banners, JPG is fine. Use PNG only if you specifically need the transparent background.

Can I use a banner I found online?

Only if it is labeled as free to use or you have permission from the person who made it. Most images and designs online are copyrighted. Free stock photo sites like Unsplash and Pexels let you read and use images without asking permission. If you are unsure, search for "free to use" or "creative commons" images instead.

Why does my text look blurry?

Text looks blurry when the font size is very small or when you have zoomed in too far while editing. Make the text larger, or zoom out to see it at actual size. If it still looks blurry after you save and upload it, the program may have compressed the image too much — try saving as PNG instead of JPG, or increase the quality setting when you export.

How do I make text readable over a photo?

Add a semi-transparent colored layer between the photo and the text. In Canva, add a shape, fill it with a dark color, and reduce its opacity to 50 percent. In GIMP, create a new layer, fill it with color, and lower the opacity. This darkens the photo just enough that light-colored text becomes readable without hiding the photo entirely.

What if my banner looks different on my phone than on my computer?

This is normal — different devices have different screen sizes and resolutions. Make sure text is large enough to read on a phone screen, and test the banner on an actual phone before you consider it finished. If text is too small on mobile, go back and increase the font size, then save and upload again.