Week 9 | Wednesday | Web Banners


Banner Design for the Web

Advertising is everywhere, and with Google ad words, Facebook ads, and sponsored Twitter tweets, advertising on the Web is the future. Many site generate 100% of their revenues directly from banner ads.


CSS Remix
The ads on CSS Remix are displayed along the top of the site and blend in well with the site listings.

Design Bombs
Design Bombs displays their 125px ads on the left-hand sidebar. The ads fit in with the other gallery listings on the site.

Behance Network
The  Behance Network website design has small sponsor boxes down the right-hand column that display ads next to their content.

  • Know what you want to say.
  • Create a call to action, something to make the viewer want to click on your ad for more information.
  • Design for horizontal or vertical .

Here are some useful design tips:

  1. When you design your ad, keep it simple and clear, free of clutter with a message that’s easy to read. It must jump out from the rest of the message.
  2. Use animation, but sparingly. You don’t want to irritate the viewer.
  3. The animation should not interfere with the design or message.
  4. The animation should loop no more than ten times.
  5. Keep file sizes small. It’s important that your animations load quickly. While Flash creates great animations, it can also create large files. For this reason it’s better to use compressed JPEGs or GIF files.
  6. When designing a banner, it’s important to understand the importance of branding, so make sure you use the company logo in some way.
  7. Make sure your message and call to action is on the first page in case the user decides to stop the animation.
  8. Use bright blue, green and yellow colors. Avoid red.
  9. Some words that can improve your click through ratio (CTR) are: Click here, submit and free.
  10. Make sure the banner links to the page that has the information mentioned on the banner. Don’t make them hunt for it.

Standard Web Banners
Banner Ads: Excellent Examples for Inspiration

Designing a simple website banner with a logo TUTORIAL


  • Complete the tutorial – listed below
  • Title your image: date_yourname_PS_WebsiteBanner
  • Create a folder in your DropBox titled: Website Banners
  • Inside that folder place your PSD file AND jpg file of the tutorial.
  • Post it to Flickr and to your website.

Follow the below steps to create the above website banner :

Step 1 : Creating the banner size
Open a new file by clicking on File>Open. Make the file size width of 780px and height of 120px. You can go till 140px for the height. You can make a banner flexible according to your design.

Step 2: Giving the background color
Create a new layer. Name it bgcolor. Give a background color by doing the following:

  • Change the foreground color to #E4D1B8.
  • Click on the  Paint Bucket Tool seen in the tools panel on the right.
  • Click on the canvas with your mouse. Your background color is now changed to the new color.

Step 3 : Giving the inside background color
Create a new layer. Name it insidecolor. Select  Rectangular Marquee Tool seen in the tools panel on the right. Make the rectangle size width of 760px and height of 100px inside the background. Fill it with color # C64866 using the paint bucket tool.

Step 4 : Creating the logo background
Create a new layer. Name it logobkg. Select Rectangular Marquee Tool. Make the rectangle size width of 120px and height of 100px. Put the rectangle in the left side of the banner. Fill it with black color # 000000.

Step 5 : Creating a logo using the custom shape tool
Create a new layer. Name it logo. Choose the  custom shape tool seen in the tools panel on the right. Click on the Shape drop down menu seen on the top toolbar. Click on the arrow and select Ornaments. Look for the ornament which is in the banner.

Drag it in the logo space and position it so it comes in the middle of the logo background. Now you have a temporary ornament as a logo which can be replaced with your company logo if needed.

Step 6 : Creating the vertical lines in the banner
Create a new layer. Name it band. Select Rectangular Marquee Tool. Make the rectangle size width of 7px and height of 120px. Put the rectangle in the middle of the banner. Fill it with color # E8B0BD. Make four copies of the layer band.

Step 7 : To make a copy, right click on the layer and click on duplicate. A screen named Duplicate Layer will appear.

Enter name of the layer as band copy. Click on OK. Do the same with band copy2, band copy3, band copy4. Place the bands properly in the banner.

Step 8 : Creating the Logo Border
Create a new layer. Name it border. Select Rectangular Marquee Tool. Make the rectangle size width of 20px and height of 100px. Fill it with color # A63D56. Put the rectangle on the right of the logo background. Make a copy and place the new rectangle on the left of the logo background.

Step 9 : Creating the dashed lines
Now select the  Horizontal Type Tool (text tool). Type” _________” using the hyphen key. Place it on the top of the banner. Make a copy, right click on the layer and click on duplicate. Place it at the bottom of the banner.

Step 10 : Adding your Company Name
With the text tool  type your company name or website name with the color # FCF3E5.

How to Create an Animated Banner Ad

  • Complete the tutorial – listed above
  • Title your image: date_yourname_PS_AnimatedWebsiteBanner
  • Create a folder in your DropBox titled: Website Banners
  • Inside that folder place your PSD file AND GIF file of the tutorial.
  • Post it to Imgur and to your website.

NOTE: When you open up the timeline, you need to hit “Create new video timeline.” After the standard CS6 timeline pops up (the one that looks similar to AE/Premiere) there will be a button on the lower left hand corner that looks like three small squares next to one another. Clicking that will open the CS3 style animation panel.

Homework | Week 9 | Wednesday


  • Simple website banner with a logo
  • Animated banner ad


Create a banner ad campaign for any existing New Jersey nonprofit of your choice using five different banner ad dimensions from the standard web sizes. You will be required to animate TWO of the five ads.

A few New Jersey nonprofit suggestions:

  1. Covenant House New Jersey
  2. Eva’s Village
  3. Community Food Bank of New Jersey 
  4. Little Kids Rock
  5. Also check out Charity Navigator which ranks charity. Sort the search by rankings. Four stars is the top ranking, reputable nonprofits.
  • List the name, mission and URL of your chosen NJ nonprofit
  • Research – with comments for each piece of research
  • Inspiration – with comments for each inspiration
  • Mind Map
  • Sketches of Each of the Five Sizes
  • Color Sketches of Each of the Five Sizes
  • Photoshop Iterations
  • Final Photoshop Files

The above are due on Monday, week 10. The two animated ads will be due on week 10 Wednesday.


On your del.icio.us account tag three Web Sites that focus on Photoshop CS 6,

  • Designing Banner Ads in Photoshop
  • Animated Banner Ads
  • Designing for the Web

and write a note in the Delicious comments section about why you think each one would be a good resource for this class.  *Make sure you also add the tag: msuadobecreativesuite2013-01 AS WELL AS add additional tags.


All listed below should be uploaded to both Flickr, Imgur for your animate GIF and your project page.

  • Final Three Words Animated
  • 500 Word Document Description – this must be on your website as well as printed on paper
  • A DropBox link to ALL files and project paper
  • ADD Sound to your PSD file

Resource on adding sound in Photoshop

  • In the Photoshop animation timeline, the last line in the timeline is called AUDIO.
  • To add audio, click on the music  note button.
  • Add file.
  • Select file.
  • You can fade the audio in and out.


  • File > Export
  • Render Video
  • Use all the default options
  • Save it to your desktop
  • Create a YouTube account
  • Upload the MP4 video file
  • In YouTube, click on share, click on embed, choose the size you want, click copy
  • Go to  your project page, click on TEXT view for your posts (not the visual view), paste the code and hit save. The video file will appear on your post.

 DUE DATE: Week 10 Monday

39 thoughts on “Week 9 | Wednesday | Web Banners

    1. MISSING
      top five – bottom five

      Research, inspiration and student critiques missing.
      Definition, mind map

    1. ALL of your images should be on this page, not just links.

      dictionary definition
      mind map

      animated button

Leave a Reply

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