Creating web banners with Adobe Photoshop


Using the Internet to promote and sell products and services is called marketing. These strategies and tactics are reflected within online marketing plan including advertising payment per click, ads on web pages, mass mailings, etc.

Among the ads on websites there are elements called banners that seek to display a message, advertise or be the initial face of a web page, graphic banners are found in all web sites, and is probably one of the first tasks to be performed to implement a website. Although Adobe Photoshop is meant to be a photo editor it is much more versatile than that. This software is a good choice for both beginners and professionals who want to create simple web graphics.

In this article we are going to learn the basics of creating web banners


Here are some essential guidelines for the design and implementation of a banner for a Web page:

  1. To prioritize the information. Do not give ALL the information; think what the main message is and which one the secondary. The first must have its space to communicate, and that the other information is only temporary. It is recommended that the overall design of the banner starts with a mockup on paper, before bringing the design in Adobe Photoshop. This initial draft can also be arranged with the customer. The example shows a simple design of a banner is made, but there are cases where that is required to make banner more complicated designs or perform them in quantity, so instead of remaking a final banner is better correct errors in the draft.


  1. Contextualize. Use images and colors to support the message. The background image of the banner should leave very limited target audience to whom it is addressed. Consider it important to know and use the color palette of the company which is making the banner. Should a palette of colors that should be used compulsorily have not, consider the meaning of the colors so that it conforms more to the type of business or organization.
  2. Size and Weight. As seen in the article “CREATING WEB GRAPHICS WITH ADOBE PHOTOSHOP”, It is important to know the size of the area where an image is placed on a web page, and know if the web application will be accessed from smarthphones, tablets and / or desktops, since in some cases it is convenient to work with the image in different size and weight.


  1. The color is key. By taking into account the personality of the brand, you have to think about all aspects of the image. Bright and bold colors can capture the public’s attention, but it could also seem rash; the muted tones exude sophistication, but could be overlooked. Each color has a different implication and can bring nuances to a message, you should consider what each color to ensure that they do not convey the wrong message, among the most used colors are:
  • Red: energetic, sexy, bold
  • Orange: creative, friendly, young
  • Yellow: sunny, optimistic
  • Green: organic growth
  • Blue: professional, quiet, trustworthy
  • Purple: spiritual, wise, evocative
  • Black: credible and powerful
  • White: simple, clean, pure
  • Pink: fun and flirty
  • Brown: rural, historical and constant
  1. Choose the background. You must find a fund that matches the remainder. Even use white as background if enough contrast or looking for a transparency effect.


  1. Choose the logo. You should use the logo of the company or organization, and must respect your corporate identity. Therefore variants should be permitted for use. If you create a logo, it considers that a logo is often the first impression of a company, which may affect brand perception of a customer, purchasing decisions and in general their attitude towards a product.


  1. Fonts and colors. Usually just one or two fonts to compose a text correctly. 2 fonts, one for the name of the company (mainText) and one for the secondary text (secondaryText) was used in the example. White background was used in both cases as it contrasts with the background of the banner.



  1. Flexibility. Adapt the banner to common formats, to be accessible easy Google search:
  • Steals pages (medium rectangle) 300 × 250/300 × 300/200 × 200 px
  • Banner (full banner) 468 × 60 px
  • Mega banner (leaderboard) 728 × 90/980 × 90 px
  • Skyscraper 100 × 600/120 × 600 px
  1. Create partnerships with something already known. In the use of colors, shapes and letters you can use combinations that create positive associations. These associations often call the user’s attention. You are careful when creating such designs that are too similar to popular advertisements for major brands because they can cause a lawsuit.



  1. visited as of 2015-06-16.
  2. visited as of 2015-06-16.


Leave a Comment

Your email address will not be published. Required fields are marked *