[Adobe Photoshop]: How to make a Simple GIF Text


The Program we will use is obviously Adobe Photoshop and I will be discussing this sort of simple text animation that fades in and fades out. It is sometimes a good design for a website but too much of it can make your browser slow if your computer is slow of course and it can be used in videos as well for a nice introduction. Well the output of our discussion is the image below or the GIF below and it is the simplest of GIFs. It is quite simple to make this one. Fading text is better than a blinking text that looks like an advertisement besides your favorite websites or some. When our Professor introduced us Flash It is hard in some part and I think Photoshop is good for simple GIF. So bare with me!


In creating that kind of GIF I used 400 x 250 dimensions and here we go again with the large images! Barely you can see the instructions though.

And then click on the window tab and click Animation so we can see the Timeline/Frame or something like that and I changed the background to a gradient black and purple. Sorry I don’t know what does it called hahaha.

Now the Timeline will show up below the work space and you should click the button below that message to convert it to Frame animation.

Now will be advancing the image yet I will still discuss what you should do. As you can see in the image below that it has two frames. In the previous image once you click the Convert into Frame animation there will be only one frame showed in that box so to duplicate your current Frame you must click the Icon to the right of that circles thingy and you will have two frames now.

Okay in the image below I inputted a text so as you can see again in the Frame animation window the Second frame also has the text “Wapow” so in order to hide it in the Second frame and all the frames. Once you click the eye icon beside the text’s layer it hides it all into other frames.

Now don’t look the image below if you didn’t finish this paragraph or you’ll get confused. Like I said when you click the layer visibility in the First frame the text “Wapow” will be hidden into other frames so in order to show the text in the Second frame. Select first the Second frame and then click again the eye icon beside the text’s layer to show it up in the second frame and it will not show up in the first frame. The purpose of getting the first frame without a text is because our GIF animation will be starting with just a background.

Okay before we continue I noticed that are Frame hop is 10 seconds before it goes to the next frame so to adjust it click the 10 seconds below the thumbnail of the frame and for a smooth frame per second is set it to no delay.

I noticed again that our GIF will be moving only once and when the final frame ends our GIF will stop so in order to loop it forever you can see the image below that you must click that once button and click the Forever or you can specify on how many loops before it stops. In a video setting it must not loop but it must animate once.

Okay now we adjusted the loop and the Frame hop we can continue and I will introduce you to the button “Tween” and its icon is that circles thingy beside the duplicate button.  Tween is used to create frames for like how the next frames will be before the next original frame to appear or First frame shows up and there will be transitions before the Second Frame appears and quite confusing don’t you think? Once you see the image after we applied the tween you’re gonna understand it but first once you clicked that tween button a prompt will show up and ask you how many frames will be created before the Second frame shows up! and i choose 10 frames to add before the actual Second frame show up.

There you have it! The image below will tell you about the tween effect. It added frames between our Original First Frame and Second Frame with fading in text see the image below and look at the Frame animation window.

Now we have made the text to fade in so how about fading out? We’re gonna use the same process again. Duplicate the Last Frame and then set the text’s layer visibility and hide it again so when you tween it again the text will be fading out!

Now the image below will show you that your tween is correct when the added frames is fading out. You now know how to tween right?

Now the final process! It is not the ordinary way of saving a picture so how do you save a GIF image? Click File tab and find “Save for Web & Devices” and click and click OK then Tada! your work is finished! and for the output go back to introduction and you will see it again.

Thanks for reading!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s