logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
European Travel
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel


dailyclick
All times in EST

Full Schedule
g
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor

g

Fade In – Fade Out Photoshop Animation


Now that we have planned out how we will build our blinkie animation in PhotoshopR, we are ready to get our hands dirty. Open Photoshop and create a new project window that is 150 x 50 pixels at 72 resolution. From the previous tutorial, we will have eight layers in our project. Four layers contain graphics and four contain text.

As in the FlashR version, our Photoshop version's first animation will be a fade-in and fade-out of the designer’s name. Basically, a fade-in animation is created with two frames in the Animation Palette. To create these frames, we will work with the Designer’s Name layer in the Layers palette.

  1. Open the Animation Palette (Window – Animation). Click on the toggle button at the lower right corner to convert to Frame Animation. You will see one frame in the palette. This frame is created from the layers in the Layers palette. Any layer that has it’s Visibility turned on will be part of this frame. We have all four graphics layers turned on, so their contents are visible in the frame. But, we need to turn off the visibility for all of the text layers.

    This is the first of the two frames that we will use to build our fade-in animation. At the start of this animation, we do not want to see the designer’s name.

  2. We want each frame of the fade-in animation to be .1 second in duration. So let’s use the drop-down list under the frame to set the duration to .1 sec.

  3. Now we will add the second frame. From the Animation Palette menu (top right corner), click New Frame. Photoshop will duplicate the first frame. For this frame we want to turn on the visibility for the Designer’s Name layer. This will tell Photoshop that we want this layer to be visible at the end of the animation.

  4. Now we can use these two frames to create the fade-in. Select both frames and click Tween from the palette menu. In the Tween dialog box, set the Tween With drop-down list to Selection and set the Frames to Add to 20. Set the Layers section to All Layers and keep all Parameters checked. Click OK and Photoshop will add the 20 Tween frames to the animation. You will have a total of 22 frames in the Animation Palette. Click on Frame 1 in the palette and then click on the Play button to view the animation. The designer’s name should fade in over the 22 frames.

  5. We want the designer’s name to be visible (or static) on the blinkie for one second. With the last frame selected, add a new frame. For this new frame (Frame 23), set the duration to 1 sec.

  6. Now we want to fade-out the designer’s name. Add a new frame (Frame 24) and set the duration back to .1 sec. Next, add another new frame (Frame 25). On Frame 25, turn off the visibility for the Designer’s Name layer in the Layers palette.

    Select Frames 24 and 25 in the Animations palette and click Tween from the palette’s menu. We want to keep the same settings as we used from the last Tween. Click OK and Photoshop will add the 20 Tween frames. You will have a total of 45 frames. Test the animation.

    The next part of the blinkie animation will be the words “Designer for”. We want the first word to be visible for 1 second. Then we will make the first and second words visible for another second.

  7. Add a new frame to the Animation palette. On this frame (Frame 46), turn on the visibility for the Designer layer in the Layers palette. This will make the word “Designer” visible on the blinkie. Set the duration for this frame to 1 sec.

  8. Add a new frame (Frame 47) and turn on the visibility for the for layer. The duration is already set to 1 sec. So, both words “Designer for” will be visible for 1 sec.

    Save your project file as blinkie1.psd. In the next tutorial, we will create a Shape and Motion Tween for our blinkie.

Join us in the Digital Art and Design forum.




Add Fade+In+%96+Fade+Out+Photoshop+Animation to Twitter Add Fade+In+%96+Fade+Out+Photoshop+Animation to Facebook Add Fade+In+%96+Fade+Out+Photoshop+Animation to MySpace Add Fade+In+%96+Fade+Out+Photoshop+Animation to Del.icio.us Digg Fade+In+%96+Fade+Out+Photoshop+Animation Add Fade+In+%96+Fade+Out+Photoshop+Animation to Yahoo My Web Add Fade+In+%96+Fade+Out+Photoshop+Animation to Google Bookmarks Add Fade+In+%96+Fade+Out+Photoshop+Animation to Stumbleupon Add Fade+In+%96+Fade+Out+Photoshop+Animation to Reddit



 



RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


For FREE email updates, subscribe to the Digital Art and Design Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.

g


g features
Designing a Montage Layout SVG Cut File

Review - 21-Day Drawing Challenge

How to Print and Cut Clip Art in Silhouette Cameo

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor