RSS Feed
Sponsored by the National Association of Photoshop Professionals. Learn More
Creating an animated banner with ImageReady 7
This week I am going to show you how to create a simple animated web banner with ImageReady 7. The last couple of release of Photoshop/ImageReady have been injected with some nice features to make it easy to create web elements.
Create a new document. The first thing you will notice I a new feature in IR 7. Preset doc sizes. Choose Web Banner and click ok.
Add some text.
Now, to animate it. Using the move tool, drag the text all the way to the right and off of the page. Hold down the shift key to constrain the baseline.
In the animation palette, Click duplicate frame.
With frame 2 selected, drag the text into its ending position, the center of the document.
You will now see the 2 frames.
We now need to generate the in between frames showing different stages of the animation.
The good news is that Image Ready can create the in between frames automatically, there are called tween frames. Open the drop down in the animation palette by clicking on the little arrow at the top right and choose tween.
Choose Previous and add 5 frames.
See how IR has created all the frames for us.
Press the play button to preview the animation.
The only problem is that we would like it to pause at the end of the animation for a little while so the viewer can read the message.
Click on thelast frame where it says “0 sec” and change it to 5 seconds.
Press the preview in browser button.
Now view your animation in the web browser with all the vital statistics of your animation.
Lastly Adjust your optimization until you are happy (subject for another tutorial)
Choose save optimized to save your animation and publish to the web.
That’s all for this week. For those of you heading to Mac World NY this week, have a good time and don’t spend too much money! See you at the cafe www.photoshopcafe.com
1 Comment
RSS feed for comments on this post. TrackBack URI
Leave a comment
Photoshop Tutorials
Design Effects
Corey shows how to use the luminosity of an image to create a cool design effect and spice up your simple photos.
Stylized Comic Book Effect
Using this effect, you can transform anyone into a comic book character with a halftone, saturated look.
Text Shape Layers
Converting text into shapes allows you to distort the text as you like while retaining straight, clean edges.
-
More Design Effects
Corey takes this image and adds some cool design effects.
-
It’s Curtains For You
Creating Cool stage Curtains as a Background Effect.
-
Animated Snow
Celebrate the holiday season by learning how to use Photoshop to create falling snow over your favorite holiday image.
-
Retro Text
Corey goes back a few decades in style and explains how to create this groovy text design.
-
Chrome Logo in After Effects CS4
Using After Effects 3D layers and light sweep effect to create this text that moves in 3D space. -
Flash CS4 Deco Tool
Having fun experimenting with Flash CS4's Deco Tool. -
Patterns and Shapes in Adobe Illustrator
This tutorial is based on an advertisement that uses patterns and shapes to create a unique design effect. -
Redefined HTML Tags
This tool in Dreamweaver allows users to redefine an existing component of HTML.
Measuring in Vanishing Point
In Vanishing Point, you can take advantage of the new measurement tools by measuring something in three dimensions. You simply grab the Measure tool (R) and click between two points. Then in the top of the dialog, enter an establishing value in the Length field. This value will be what all other measurements will be based on. You can then render these measurements to Photoshop from Vanishing Point’s flyout menu. TIP: You may want to use a blank layer before going into Vanishing Point because when measurements are rendered, they appear on the currently active layer.
Lillian said on — November 16, 2008 @ 5:29 pm
Great Tutorial, very helpful.