Banners Made Using Photoshop

Banners are a very important aspect of the visual appeal of a website. It is wise to periodically change the banners on your site to prevent it from becoming stagnant. This article will give a brief overview of how to accomplish this in Photoshop.

Banner Size

  • Banners need to be as small as possible to save bandwidth
  • Banners should not be wider than 960 pixels, or taller than 350 pixels if it can be helped
  • If the banner can be made even smaller and still be visually appealing with the rest of the site, do it!
  • The more that's going on in the banner, the larger the file size. All the image data in the banner is being saved

Creating the Banner

  1. To set up basics, go to Photoshop, go to file> new, make sure the color mode is always “RGB” and the resolution is always set to “72”. Then enter the dimensions of the banner you would like to use.
  2. For the background, try to make it as less busy as possible. The less busy, the less information the image has to retain, ultimately leading to a smaller file size to save on bandwidth. However, some banners are designed to be very decorative or adhere to a specific style, which is fine, but keep in mind a lower compression may have to be used.
  3. As for text, this isn’t too much of an issue. Just don’t have multiple paragraphs on a banner. Not only does this create a larger file size, but banners should display quick messages/phrases etc that don’t make the reader read for too long. The more text you have on a banner, the more information needs to retained on the image format, rendering a larger file size.

Saving the Banner

1. When you are ready to save the banner, ALWAYS use the file > save for web & devices. This will bring up a new window that shows the original banner image on the left of the screen, and a preview of how the banner will look like after being saved on the right side of the screen.

Make sure to select the correct file type (JPG, GIF, or PNG) on the top right. The descriptions of these can be found below:

  • JPG: For most banners, the JPG format will be used. If the banner is photo heavy with many color variations and gradients, then using JPG is the most optimal image type to use. It allows for selection of compression which can help lower file size and retain image quality.
  • GIF: If a simple banner is created with a plain background and text with very little color differences/gradients/shadows, then the banner should be made in the .GIF format. The .GIF format works great with minimal color differences and relatively flat graphics, rendering a small file size. Gif also has the ability to have transparency, but should generally be used for simple transparency only. PNG works better for cleaner transparency.
  • PNG: If the banner needs cleaner transparency, then the banner should be saved as a PNG 24. The PNG file format is the most bandwidth heavy, so use this only when needed. PNG’s are generally not used for banners because it incorporates a lossless compression, leading to the highest quality along with a sacrifice of much larger file sizes. I highly discourage using PNG’s for banners for bandwidth purposes.

2. When you have determined the file type you’d like to save your banner as, follow the instructions below for the chosen file type. For the best optimization, the file size 70-100k, or lower if you can. The file size can be seen on the lower left side of the right image. The lower the file number size, the better.

  • JPG: When saving as a JPG, make sure “optimized” is checked and make sure to also play with the quality slider. As you lower the quality, more compression will be used on the image, lowering the quality while also lowering the file size of the image. Use your best judgment to find a balance of the quality of the image and its file size. The preview of the image will adjust on the fly according to your adjustments in quality.
  • GIF: When saving for GIF, using the default settings is fine for GIF 128 Dithered is fine. If transparency is needed make sure “transparency” is checked off.
  • PNG: For PNG, use PNG-24 and make sure “transparency” is checked off if needed. Notice the file size of the image. If it is very large, then you may want to consider the JPG format.