An online promotional banner is often the first thing a user will see when they visit a website. How this big chunk of screen space is used can say a lot about a website. Many websites overlook the importance of website banners and see them as nothing more than a quick advert, “just get something up”.
A badly designed web banner doesn’t just look lazy it gives off a vibe of unprofessionalism. A website is like a shop front on the high street. Imagine a luxury furniture shop with one window boarded up, and “sale now on” written in spray paint.
Creating nice looking web banners and adverts is actually a much simpler process than you might imagine. In this article, I will demonstrate how I create a simple yet effective web banner in Photoshop in only a few minutes. I am using Photoshop however, these techniques are not software specific and can be carried over into any design software.
Before I create a demo web banner lets look at a few points to consider when making a banner or an Ad for a website.
Clarity VS Creativity
It’s about finding the right balance between creativity and clarity, we want our content to be interesting and jump off the screen, but we also want people to be able to clearly read and understand our message.
Finding the right balance depends largely on the context of the content for example: if we want to promote an idyllic holiday getaway we would put much more emphasis on making sure it looks attractive with a great photo and the text should complement the photo without being too “loud”.
Conversely, if we wanted to make an advert for something more urgent such as a time-limited offer, the text and the clarity of the message would take paramount over the style, we don’t need to dazzle our audience with fancy pictures.
Try to imagine your target audience can only view the image for a millisecond and ask yourself, what they would remember?
What size is a website banner?
The exact dimensions will vary depending on the theme you have installed for your website. If you are using a WordPress site you can find this out in the theme’s documentation.
It is vital we know the exact dimensions of the image before we begin, this will determine the entire composition of the image and will govern the choices we make during the design process. The last thing we want to do is finish the design, have it ready to go and then realise we need to crop out a portion of the image potentially ruining the whole design and wasting time.
Knowing the dimensions also means we don’t need to export content that is too big. The content will only get scaled down to fit the website’s template. This is overkill and it makes the file sizes bigger than they need to be which in turn increases the load times of the website.
If there is no size limit and the template allows the image to stretch full width responsively. You need to then consider your audience. For example are the majority of your users coming from a phone or a tablet. If that is the case a massive 2000 + pixel image is probably unnecessary.
I personally consider 1920 pixels wide a safe limit. You can use bigger images but you need to be aware of file size and compression.
Generally speaking, your audience will not be scrutinizing and making judgments about your site based on the compression of an image. Your audience will, however, get frustrated if your site takes ages to load because you want to have all your photos at full quality.
The necessary quality of an image also depends on what type of site you have. Is it a photography site? – the user may be willing to wait a bit longer because they are there for the photos. Is it a large information based site? – The user is not necessarily there for pretty pictures and may get frustrated quickly.
Reports claim users expect a website to fully load in 3 seconds. And mobile users are the most impatient.
Load times are crucial for websites, people are incredibly impatient when it comes to surfing the internet. We are all guilty of this: you click on a site and it drags, one-bit loads randomly at a time and you get fed up and click back.
There are many possible causes for a slow loading web page but the most common cause is poorly sized and poorly compressed images.
What is the best file size for web images?
Sadly it’s not as simple as just: 500×500 pixels = 1mb for example. The exact file size is influenced by not only the dimensions but also the amount of detail in an image. For example, if we had a photo and converted it to black and white, the colour version would have a bigger file size. This is because there is far more data in the colour photo, these differences are much more noticeable when you start compressing your images.
Personally, I am very harsh with compression I go as low as possible. If I have a front-page ad say 1200 x 400 pixels, I would aim to get it lower than 200kb and I would keep going until the loss in detail is obvious.
Every image is different so there is no recommended file size. You also need to consider how many images you have on the page. If you have a slider with 5-6 images you would need to be more precise with the file sizes. If you only had 2-3 images you could afford to be a little bit more relaxed.
What about DPI ?
Please Remember – DPI (dots per inch) only affects print resolution. DPI has no impact what so ever on the resolution of a pixel image. You only need to worry about the pixel dimensions.
Photos & Composition
We don’t necessarily want to use the best photo, instead, you should look for a photo with “empty space”. This basically means any photo that has an area which is flat and has very little contrast, for example, a clear blue sky. This gives us a clean area to place the text with as little distractions as possible thus making sure our message is easier to read.
Above is an example of bad text placement, black or white it doesn’t matter the text is not easy to read. There are simply too many distractions in the photo behind the text.
You don’t always need to use photos with big empty spaces but it is a lot easier and it looks better. If you have a photo which doesn’t have a nice empty space for the text you can always add an overlay to make the text easier to read.
In the image above I added a layer of black over the photo, this layer was set to about 50-60% opacity. This reduced the bright areas and allows the white text on the layer above to be much more readable.
There are several other ways to make the text stand out:
- A solid shape
- A gradient
- Drop Shadow
- Text Colour
It is shocking how many websites – even some of the biggest companies ignore this basic design principle. If you want your website to look professional and stand out from the crowd this is a great place to start, I see it everywhere and personally, I find it distracting.
Guides make your life much easier, and they only take a second to set up, we use guides because it makes it is much easier to align and evenly space out elements. It is also important to plan for any navigation elements on the site which might overlay the image such as arrows and page numbers.
Photoshop has a snap utility which works fine most of the time but things can get a bit more difficult when we have lots of layers and objects.
Aligning and snapping content to the guides is a much easier and more reliable way of making sure our elements are correctly aligned.
You probably sick of my ranting by now so let’s put these tips into practice.
This is not strictly a step by step Photoshop tutorial, this is more of an insight into my workflow. Because of this, some steps may be missing.
What am I going to make?
I thought I would try something different and make something I haven’t done before. I am going to make an advert for a live music event.
To get the necessary photo I headed over to flickr and searched for images with zero creative commons this means they have no copyright restrictions.
If you are going to get a photo from flickr always double check the author intended the work to be public domain. I checked and it was clearly stated in the description, I will credit the photographer at the bottom of the article.
I am making up these variables but let’s pretend our website banner needs to meet the following requirements:
- 1200 x 400 pixels
- No bigger than 100kb
- Allow room for navigation elements. < > arrows etc
- A call to action
- Look exciting but not over the top
I am going to pretend I have a boss to answer to, so I am going to try a couple different versions.
So let’s get to it.
First, I am going to make a new file with the dimensions 1200 x 400 pixels, remember the DPI doesn’t matter, so I leave it on the default.
Next, I am going to create a set of guides to help me arrange my composition.
New Guide Layout
Remember we need to make space for those imaginary navigation elements so first of all, I give it a generous 50 pixel margin, in all directions. I also add three columns because I think it breaks up the wide layout nicely.
I also add one row, this gives me a horizontal line through the centre this will be useful for aligning things to the middle of the image.
I can go back and change the guides at any time.
Import the photo
Next, I copy and paste the photo into the Photoshop file.
Top Tip! – Convert the photo into a smart object. Smart objects allow you to resize the image without losing the original dimension. This means I can shrink the photo and scale up again later if I change my mind.
I scale down and move the photo to give me a rough idea of what I want it to look like.
Creating the Text
What strikes me first is the nice clean space on the right-hand side this is definitely the best place for the text.
The text I am going to use will be “Live Bands this October” and then for the call to action I am going to use “get your tickets now”.
The font I chose was Impact – I don’t have a huge amount of space, so I went for a font which was a bit narrower but still nice and bold.
I want my text as big as possible, so I crank it up as far as possible. With space being so limited I am also going to reduce the line height. The next line of text “this October” is also as big as the container will allow.
Well, it’s not that exciting yet so a little colour would help offset the monochrome photo. I also notice the text is not clear enough, so I add a gradient underneath on a new layer which darkens the photo slightly.
Call to Action
This is a separate piece of text, therfore I will make it on a new layer.
I am not happy with the font on this bit, it makes the text too blocky, so I am going to find a thinner font which is easier to read. It took a while but I finally settled on a font I liked.
I add a little box around to make it look more like a button. It also separates it from the other text.
So this is my basic web banner, not the most exciting thing in the world but it serves it’s purpose.
Remember previously how I explained the importance of putting text over empty space. Well, below I have made two variations where the text is in bad places, notice the difference.
I actually like the centre design but the image distracts too much in my opinion. To improve these designs I would need to make the text more readable. I would do this by adding a layer of semi-transparent black underneath like I demonstrated previously.
Save for Web
Fortunately, because this photo is black and white the file size is not too big. I can still get the file size down to under 50kb with almost no loss in detail at all.
This banner would load extremely fast despite being fairly big.
So that’s how I make a very basic web banner in a nutshell. This a very generic banner with no specific theme so below I have a few variations to suit different genres etc.
Sometimes you need to take a step back and remind yourself your audience are probably not design snobs. Nobody will be as harsh or as critical as you yourself and chances are, they will probably only look at the ad for a split-second.
If you have enjoyed this article I have another post on Graphic Design for Beginners – In this post, I explain many of the concepts used to create this image.
I also have another post that demonstrates a few mistakes to avoid when designing your own web banners: https://monstabot.com/design-mistakes-that-ruin-banners