Week 6 | PS III | Ramapo College | Fundamentals of Interactive Media

******NOTE: ALWAYS BRING A BACK UP OF ALL YOUR FILES IN TO CLASS ON A FLASH DRIVE. ALSO, PLEASE BRING IN HEADPHONES TO EACH CLASS SO THAT YOU CAN REVIEW VIDEOS WHILE DOING IN-CLASS ASSIGNMENTS.*******

When Saving Images: Save as:

Example: 2015_Smith_John_AccessingTools_v1
Tag your images in Flickr with the following tag:

fundamentalsinteractivemediaramapo2015

A STORY OF MIXED EMOTICONS

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

TUTORIAL #1: Designing a simple website banner with a logo

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>New. 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.

TUTORIAL #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 6 | Homework

FINISH THE IN-CLASS TUTORIALS

DELICIOUS

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

Designing Banner Ads in Photoshop
Animated Banner Ads
Animating Timeline

and write a note in the Delicious comments section about why you think each one would be a good resource for this class.

PS PROJECT I

Photoshop Major Project I:

Web Banners

Photoshop Major Project is due at the BEGINNING OF CLASS on week 9 on March 16th..

Client:

YOU CAN CHOOSE TO USE The American Red Cross OR CHOOSE ANY OTHER NONPROFIT OF YOUR CHOICE.

CLIENT BRIEF:

Create 6 website banners to support the Internet marketing efforts of the American Red Cross (ARC) which highlight Hurricane Sandy. ARC has a recognized brand with specific font, color and sizes. Access their various logos and design specifics here.

You have free reign to design the composition as you would like. Focus on online donation, a second idea here, text treatments that promote recovery efforts, blood donations, co-brand one of your banners with MSU, or any other American Red Cross banner ad that specifically focuses on New Jersey and Hurricane Sandy.

American Red Cross Brand Guide

Review their brand guide carefully to give the web banner the correct voice, imagery and look and feel.

The above image links are meant as a reference and NOT for you to directly copy. You can get more inspiration here. For this project, you will need SIX completed composition images of your designs (6 different designs) that includes the ARC’s logo and follows their design brand which will be used in a series of web banners. You will also need to create a Word document that explains your concept rationale. The Word document may also have some sort of image/images integrated into it.

Develop a concept for this project.
Submit JPG images sand .PSD files for each of the SIX web banners, as well as your Word doc. Your Word doc should be at least 250 words (roughly one page) in length. Include your concept statement with your rationale for design, the process you went you through to achieve your result, and a breakdown and explanation of the elements of your design.
Use Photoshop CS6 to create a series of SIX unique concept-based web banners. You can use logo images found on the Red Cross brand identity web page. Be consistent with your designs. Make them look like they were designed specifically to focus on New Jersey and Hurricane Sandy. You are communicating one message, the Red Cross is helping victims of Hurricane Sandy and needs YOU to get involved by either supporting them, donating blood or volunteering.
NOTE: At least one of the six designs must include an image.

DELIVERABLES:

Save the file as LastName_FirstName_ARCBannersv1 (change to v2 and v3).jpg .

Finished .JPG of your web banners should include the following:

Website banners in six sizes. See standard web banner sizes here. Create one of each size: Leaderboard, Square, Skyscraper, Rectangle, Button and Full Banner
A logo and phone number and/or url on all banners

A Word document (250 words) that includes the following: