Up Next
Up Next

How to Create a Website Banner

Mychelle Blake
Website designer at computer

One of the first things a website visitor sees is the banner, or header, image. If you want them to stay on your page and continue to use the site, make sure your banner reflects your website's goals.

What Makes a Great Website Banner

Since the top of the screen is an important part of a site's "real estate" consider how your banner will work in your website design. Some tips for an effective banner image include:

Banner Composition

Since mobile friendly websites are a must, consider that a slimmer header design will work best. A big and flashy banner heavy with text and images might look great on a desktop but will require a lot of customization for mobile. Some best practices to go by are:

  • Go for a simple design that conveys information immediately to the audience.
  • Use minimal text and restrict it to calls to action, company name, and brand messaging.
  • Don't be afraid to be creative with the small space!
  • You can use animation to spice up your banner, but use it wisely and keep in mind how it will look on mobile.

Banner Size

You will need to make sure your header image looks good no matter what size screen is used. The best practice is to use responsive design for this.

  1. You will first need to decide on what screen size overall you are designing for, which typically is 1024 x 768 pixels or more. If you go with a slimmer design, a typical height might be 60 to 120 pixels.
  2. Using CSS, media queries, and mobile-friendly design principles, you can then adjust how your banner displays on smaller standard sizes, such as:
    • Smartphones: 768 pixels or less
    • Tablets: 768 pixels or more
    • Small to Medium Sized Laptops: 992 pixels or more
  3. Make sure you test your banner out at the various sizes by viewing the site on smaller devices or using online developer tools. Make adjustments as needed with CSS and your image file if need be.

Banner Creation Tools

There are several options to create your banner image. Your choice depends on your level of programming and software knowledge.

Coding Your Banner

If you are experienced with HTML and CSS you can create a beautiful banner without any software. The benefit is no other software is needed and you don't have to make edits to the image using software to get it right for mobile. Of course, if you don't know how to code, this option is much more difficult.

Adobe PhotoShop

Adobe Photoshop is one of the most widely used image creation programs by design professionals. The benefit of using Photoshop is that the program is incredibly rich with tools to make amazing images. The drawbacks are the learning curve and the $9.99 a month price, although there is a free 30-day trial. Another option is Photoshop Elements, which has fewer features but should have everything you need to make a great banner. Elements is a one-time price of $99.99.

Adobe Spark

Another quality Adobe product is Spark, which has a free banner maker online. The premium version is $9.99 per month and allows you to use additional image creation features for websites and social media. It is easier to learn than Adobe's Photoshop product.

Canva

Canva is a popular site that also has a free banner design page. Their banner layouts are designed for social media, but you can customize them for use on a website. Canva is free, and you can use your own images or pay for stock photos from their library for about $1 per photo.

Other Free Tools

There are several other free image creation tools that can be useful for banner creation including Gimp, Pixlr Editor, and Fotor. They all have similar features and personal preference is largely based on which screen interface you prefer. Gimp must be downloaded for use while the others are available online only.

Making the Perfect Website Banner

Always remember when creating a banner to focus on showcasing your site's identity in a clear, immediate way to hook the viewer. Keeping your design mobile-friendly to include all types of devices will also be critical to your success.

Was this page useful?
How to Create a Website Banner