The Elements of Design
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.
Examples
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:
- 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.
- Use animation, but sparingly. You don’t want to irritate the viewer.
- The animation should not interfere with the design or message.
- The animation should loop no more than ten times.
- 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.
- When designing a banner, it’s important to understand the importance of branding, so make sure you use the company logo in some way.
- Make sure your message and call to action is on the first page in case the user decides to stop the animation.
- Use bright blue, green and yellow colors. Avoid red.
- Some words that can improve your click through ratio (CTR) are: Click here, submit and free.
- Make sure the banner links to the page that has the information mentioned on the banner. Don’t make them hunt for it.
DESIGN RESOURCES
Standard Web Banners
Banner Ads: Excellent Examples for Inspiration
#1 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.
#2 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.
#3 DO NOW Buttons, Bars & Tabs
Techniques for creating navigation elements.
Watch video and complete button tutorial. View it here.
#4 DO NOW Ribbons and Banners
Watch video and complete tutorial. Ribbons and Banners
#5 DO NOW Tiled Backgrounds and Seamless Textures
Tiled Backgrounds and Seamless Textures
Watch video and complete tutorial.
#6 DO NOW Shadows
Shadows
Watch video and complete icon tutorial.
Week 11 | Homework
Delicious
On your del.icio.us account tag three Web Sites that focus on Photoshop
- Photoshop Buttons, Bars, and Tabs in Web Design
- Creating Photoshop shadows
- Tiled Backgrounds and Seamless Textures
Complete Tutorials
- #1 Designing a simple website banner with a logo TUTORIAL
- #2 How to Create an Animated Banner Ad
- #3 DO NOW Buttons, Bars & Tabs
- #4 DO NOW Ribbons and Banners
- #5 DO NOW Tiled Backgrounds and Seamless Textures
- #6 DO NOW Shadows
http://www.youtube.com/watch?v=WTIKj0xVg64
Project Page
Homework
Delicious
homework week 9: http://www.kailarogers.org/homework-week-9/
project: http://www.kailarogers.org/msu/fall-2014/adobe-creative-suite/photoshop-project-1/
delicious: https://delicious.com/kailarogers
dropbox: https://www.dropbox.com/sh/mmq5msa5393006t/AACMsP3tuxEhKDbHPfzaNXFVa?dl=0
https://www.dropbox.com/sh/7ueqpfgs6cxdz9t/AAC1DMHPoW6sW5M1opOSJKtSa?dl=0
flickr: https://www.flickr.com/photos/rogerskaila/
youtube: https://www.youtube.com/channel/UCdFuzcORRHsL0rvWWU5Jmkw
Homework week 9 – http://www.gregorypein.org/?p=124
Sorry about that
http://michellepanama.org/week-9-homework/
https://www.dropbox.com/sh/anxlxpxt5n22tuv/AACAiRpuA-rvbtcZcGLL3r3-a?dl=0
http://michellepanama.org/msu/fall-2014/adobe-creative-suite/photoshop-project-1/
http://www.stephanieapgar.com/about/fall-2014/adobe-creative-suite/photoshop-project-i/
http://www.stephanieapgar.com/homework-week-9/
https://delicious.com/stephaniemay862
https://www.dropbox.com/sh/oalfqd8hfpnvqec/AABncgfeabtF-5tzCe73BNO2a?dl=0
Homework week 9-http://www.matthewaddonizio.org/week-9-homework/
DropBox- Project 3 https://www.dropbox.com/home/Word%20Animation%20Project
Project 3- http://www.matthewaddonizio.org/msu/fall-2014/adobe-creative-suite/illustrator-project-3-letter-animations/
Delcious- https://delicious.com/manizi
Imgur – Button – http://imgur.com/lPkqXro,PYfHRvK,zZ7u3ev,j43t837#3
Homework Week 9- http://lindseytaylor.com/week-9-wednesday-homework/
Photoshop Project 1- http://lindseytaylor.com/msu/fall-2014/adobe-creative-suites/photoshop-project-1/
Dropbox- https://www.dropbox.com/sh/igf8p0mobjge6p4/AABLDAkYN7f5VgJPOjZPyTJ4a?dl=0
Delicious- https://delicious.com/lindseyehrlich
Photoshop Project 1- http://www.gregorypein.org/?page_id=112
Dropbox- https://www.dropbox.com/sh/yk3bs9n31qy4rp2/AAC6Ht2N6MIiY9ve3zWLa5xZa?dl=0
Homework
Project Page
Dropbox
dropbox
https://www.dropbox.com/sh/nuw86yrygbzda2i/AABLrrcLTxVKrq6IkhmnNl6La?dl=0
homework
http://www.kyungminkim420.com/week-9-homework/
delicious
https://delicious.com/kimk23
project
http://www.kyungminkim420.com/msu/fall-2014/adobe-creative-suites/photoshop-project-1/
http://melissamshea.com/week-9-homework/
https://www.dropbox.com/sh/jap3li4da8th438/AABP5iRbKiojflSkVGOTKyaPa?dl=0
https://www.youtube.com/watch?v=RmE7baAEC_E&feature=youtu.be
https://www.youtube.com/watch?v=Tmq_uAWKOYc&feature=youtu.be
https://www.youtube.com/watch?v=q-iFMTGknzY&feature=youtu.be