Tutorial #8: Make Your Own Animations - Focus Fanatics
Ford Focus Forum
HomeContact UsAbout UsGalleryDiscussion ForumsMarketplace



Go Back   Focus Fanatics > Off-Topic Discussions > Photos & Camera Fanatics

Photos & Camera Fanatics Post your photoshop, photography artwork or camera tips and tricks here.

Search This Forum | Image Search | Advanced Search    
FocusFest Ford Focus Tire & Wheels FocusFanatics Merchandise

Reply
 
Thread Tools Display Modes
Old 07-23-2004, 03:09 PM   #1
gthang
NY's Most Wanted
 
gthang's Avatar
 
Join Date: Jun 2003
Fan#: 102
Location: I'm somewhere where I don't know where I am...
What I Drive: DUH!

Posts: 1,036
FF Reputation: 5 gthang Good Standing Member
Buy-Sell-Trade Rating: (0)
Tutorial #8: Make Your Own Animations

TUTORIAL #8: Animations!

Here, everyone!

Enjoy this Animations tutorial.

Step one: Make a multi-layered image in Photoshop/ImageReady, and save it as a PSD. The layers should resemble how you want the animation to look. Animations for smilies are pretty straightforward. To practice, use the Smiley below to look at how it is set up.


Step two: In the Toolbox, click the Jump To ImageReady button (the last button, on the bottom)

Step three: When ImageReady finishes loading, the image will appear. There’s a few ImageReady exclusive tools that you can use to further enhance the animations. There’s a Rounded Rectangle Marquee tool, and a few others. If you need to, use them.

Step four: When all your layers are the way you want them, it’s time to start animating!

Step five: The Animation palette should be visible (if not, go to WINDOW >> ANIMATION). If you notice, the animation palette shows only one frame. To create the animation, we will need to duplicate the current frame. There’s a button on the Animation palette that does this (tooltip: Duplicate Current Frame). Click that.

Step six: Once the frame is duplicated, change the visibility of the duplicated layer to invisible (using the Layers palette, just like Photoshop). The layer that you want to have visible after the first should be visible. For each animation change (i.e. move from one point to another), create a new frame, and make the corresponding layer visible. Some animations, such as typewriter text, can be done by keeping each layer visible for the next frame.

Step seven: TO make the animation more seemless, you have to “tween” it. The button, on the Animation palette, is labeled “Tweens Animation frames”, and shows a series of circles. Click that button, and you can use the resulting dialog to set tweening options. You can tween with the next frame, last frame, determine how many frames to add, and what characteristics of the frame (Opacity, Position, or Effects) you want to have tweened.

Step eight: After clicking OK in the Tweening dialog, you will see some frames added. For smilies, you don’t need to. Open the GIF below in ImageReady to see how it’s set up. Notice that below each frame in the Animations palette, there’s a time. Normally it’s “0 sec.”, but this can be changed to anything. You can have “No delay”, 0.1 secs., or 10 secs between frames. You can specify “OTHER” if you want a delay longer than 10 seconds. If you’ve opened the animated GIF, take a look at the delay between each frame. Sometimes, it can be a tenth of a second, and other times, it will be just a full second.

Step nine: Once you’ve set the delays, it’s now time to preview the work. Minimize the Animations palette (I’ll explain why later), and go to IMAGE >> PREVIEW DOCUMENT. The image will start to play. If you minimized the Animations palette, the animation will play faster, because the program doesn’t have to use up memory to highlight the currently playing frame (especially true for animations with lots of frames). To stop the animation, go to IMAGE >> PREVIEW DOCUMENT again.

Step ten: If you’re satisified with the result, save it, first as a PSD (FILE >> SAVE AS...), then again as a GIF (FILE >> SAVE OPTIMIZED AS...). If you’re not satisfied, play around with the timing and tweening, or even the layers, and preview the document again.

If you’re still not satisfied, ask here:

Here’s an animation I made especially for this tutorial:


Attached Images
 
gthang is offline  
    Reply With Quote
Reply

Bookmarks & Social Networks

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Competition: Make my car look awesome spacegravity4me Photos & Camera Fanatics 48 07-21-2009 04:18 PM
Road surfaces that make you slow down gthang Ford Focus & General Car Chat 14 01-23-2007 12:37 AM


All times are GMT -5. The time now is 02:13 AM.


Copyright 2002-2014 FocusFanatics.com. All Rights Reserved : Terms of Use : Privacy Policy : Advertise Information : Site Map

Focus Fanatics Ford Focus Forum offers many fun ways for you to engage with other Ford Focus Owners from across the world. Whether it be about the aftermarket performance modifications, technical how-to's, European tuned suspension or awesome fuel economy similar to the Acura TLX or Fiesta ST. You can find all Ford Focus and Focus ST related information here. Join our Ford Focus discussion forums and chat with local Focus enthusiasts in your area.