How to Create an Animated GIF Fade in Photoshop

One of our friends recently asked how to make an animated GIF fade in Photoshop. As we are known to do, we whipped up a little tutorial.

To fade an animated gif in photoshop you use keyframes and tweens. Keyframes are the layers that you want to fade between and a tween is the automatically generated frames between these.

Click on any image below to see a larger version.

Step 1: Create Two layers that you want to fade between

These are your keyframes.

Step 2: Open the Animation Panel

(If the animation panel that opens doesn’t look like this, but rather is the timeline panel, select “Convert to Frame Animation” from the drop down menu on the panel (top left box).

Step 3: Set your layers in frame 1 and frame 2

1. Turn off the Second Layer in Frame 1.
2. Create a New Frame.
3. Turn off the First Layer in Frame 2.
4. Turn on the Second Layer in Frame 2.

It will look like this:

Step 4: Select both layers and click Tweens Animation Frames

Step 5: Choose 3 for the frames to add

Step 6: Choose timing

The three new frames (tweens) will be between the two frames you initially created (keyframes). Select these and change the timing to create a smooth fade.

NOTE: Changing Tweens

If you need to change the way things fade it’s best to delete all fades and start from the two keyframes.

Download a PDF of this Tutorial >

Depth of Information and Digital Mediums

We were out today when someone asked us what we do. We told them we have an IT & design consulting firm. They pressed us again, yes, but what is it that we do? Well, we build things — sometimes websites, sometimes corporate tools, we build whatever is best for a company to communicate their information to their staff or customers. She thought for a moment and then launched into how bad their new system is and that no one can use it and that people were even quitting over it.

The thing that I find interesting about this is how rarely the depth of digital media is used. It’s not like a brochure that has to have a hierarchy and logical order and be read in entirety from left to right. You can present something very simple, in this example let’s say you have a form to fill out, and make it more complex as needed. You can then take whatever information you have gathered and change the output based on who will see it—like when you go to Starbucks and mutter that you want a mocha, to stay, skim milk in the middle size and the barista yells down the line “For Here, Grande, Non-Fat, Mocha” he or she changes the input of your information to better fit the recipients.

The depth of information is the information behind the simplicity, it’s there for people that need it and hidden for those that don’t. Take this diagram, the situation is a form that a patient needs to fill out to have a lab test run:

Depth of Information Graphic

Local First Utah MiniBrochure

Local First MiniBrochure

Local First Utah MiniBrochure — Front

Local First Utah MiniBrochure — Back

Visit Local First Utah to learn about Buying Close By, Preserve Community.

Visit The MiniBrochure.com to learn more about this piece of collateral.