Week 9 | Animated Button

Animated Button Timeline in Photoshop CS6

*****THE VIDEO TUTORIAL IS MUCH EASIER TO WATCH AND CREATE THAN THE WRITTEN INSTRUCTIONS**

PS CS6  Animated Button TUTORIAL

  • Complete the tutorial – ANIMATED BUTTON IN PHOTOSHOP CS6 listed above
  • Create a folder in DropBox called: PS CS6  AnimatedButton
  • Title your image: date_yourname_PS_CS6_AnimatedButtonv1
  • Inside that folder place your PSD file AND GIF file of the tutorial.
  • Leave a comment on week 9 Monday with a link to your DropBox folder.
  • Upload your animated GIF to IMGUR and provide me with the link.
  • Leave a comment with a link to your DropBox folder AND Imgur animated GIF.
  • Go to Imgur, copy the HTML code, go back to your homework post, click on the TEXT view (not visual), and  paste the HTML code for your animated GIF.

 

Glow Animated Button in Photoshop CS6

VIDEO

ANIMATION TIPS! 

To set the duration of the animation, at the far right corner of the Timeline, you’ll find the Work Area end point, which you can drag to the last keyframe that you created.

TimelineEndPoint Animated Button in Photoshop CS6

And finally, if you want your animation to loop, rather than just play once, under the Timeline menu at the top right, you can choose to loop the playback.

TimelineLoop Animated Button in Photoshop CS6

Once your animation is complete, you can either render it out as a video with the Render option at the bottom of your Timeline, or you can save it as a Gif for use on the web. Under the File menu, you’ll find the Save for Web option. Once you select Gif, at the bottom, you can choose wether it plays back once, or forever. Don’t worry if the preview looks choppy. Once it’s saved, you’ll have a nice, smooth animation.

SaveForWeb Animated Button in Photoshop CS6


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:

  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.

DESIGN RESOURCES
Standard Web Banners
Banner Ads: Excellent Examples for Inspiration


Designing a simple website banner with a logo TUTORIAL

banner_1

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

Homework | Week 9  

FINISH THE IN-CLASS TUTORIALS

  • Simple website banner with a logo
  • Animated banner ad

BANNER ADS

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

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.

WORD AS IMAGE

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
  • Sound Added for extra credit

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.

SAVE YOUR ANIMATED GIF WITH SOUND

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

PS CS6  Animated Button TUTORIAL

    • Complete the tutorial – ANIMATED BUTTON IN PHOTOSHOP CS6 listed above
    • Create a folder in DropBox called: PS CS6  AnimatedButton
    • Title your image: date_yourname_PS_CS6_AnimatedButtonv1
    • Inside that folder place your PSD file AND GIF file of the tutorial.
    • Leave a comment on week 9 with a link to your DropBox folder.
    • Upload your animated GIF to IMGUR and provide me with the link.
    • Leave a comment with a link to your DropBox folder AND Imgur animated GIF.
    • After uploading the animated GIF to Imgur, copy the HTML, go to your WordPress homework post, click on the text view and paste the HTML.

Word as Image

The following is due on Friday:

  • Dictionary Word Definition for Each Word
  • Thesaurus for Each of Your Three Words
  • Research – with comments for each piece of research
  • Inspiration – with comments for each inspiration
  • Mind Map
  • Three Sketches of Each Word
  • Color Sketches of Each Word
  • Photoshop Iterations
  • Final Photoshop PSD Files
  • Final Photoshop JPG Files
  • Word document description – 500 words
  • All three words animated
  • Sound added to all three words
  • A DropBox link to ALL files and project paper

All of the above should be uploaded to both Flickr, Imgur and your project page. Final Three Words Animated

 DUE DATE: Week 10  

LETTER A TUTORIAL

Complete the animated timeline LETTER A tutorial

 

19 thoughts on “Week 9 | Animated Button

    1. MISSING FROM YOUR WORD AS ART PROJECT PAGE
      Photoshop Image Iterations (the still image, not the animations)
      Final Photoshop JPG Files

    1. All your research, inspiration, sketches and color sketches need to be on your project page. Not just links.

      MISSING FROM YOUR PROJECT PAGE
      Word Document
      Animated word
      Animated word with sound

    1. MISSING FROM YOUR WORD AS ART PROJECT PAGE
      Photoshop Image Iterations (the still image, not the animations)
      Final Photoshop JPG Files

      Always add a link to DropBox at the top of your project page.

    1. WORD AS IMAGE
      All three words saved from your PSD files should be up on your website. None are there, only the animations.
      DropBox link should be at the top of your project page.

      MISSING FROM YOUR PROJECT PAGE
      Photoshop Iterations
      Final Photoshop JPG Files (the print image, not the animation)

Comments are closed.