g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Natural Living
Folklore and Mythology
Distance Learning

All times in EST

Clairvoyance: 08:00 PM

Full Schedule
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor


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

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2018 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 features
Adobe Portfolio First Look by Justin Seeley

Social Media Graphic Templates


Archives | Site Map


Past Issues

Note: BellaOnline uses cookies to help provide a consistent user experience. Our advertisers may use cookies to help customize ads. Please contact us with any question about our cookie use.

Summertime Foods
Corn on the Cob
Burgers on the Grill
Apple Pie


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

BellaOnline Editor