Taylor Swift Graphix

Tutorials

Adding A GIF To A Graphic

Posted by Tanya on August 18, 2011 at 10:20 PM

Hello! & Welcome to my very first tutorial!

Just reminding all of you that this tutorial is is for Adobe Photoshop CS5. If you use any other program, I'm really sorry, but I won't be much help. This is going to be a very basic tutorial. Nothing fancy. Trying to keep it simple. 

 Anyway! Here is what you do...(To view pictures larger, just click on them.)

 

1.) First create your graphic. Make sure you leave a space on your graphic where you would like GIF to be placed. We will use this graphic as an example:

 

 

2.) Next, go to the top of your screen to "File" -- "Open." Then go to the file where you saved your GIF. Click on it, then press "Open."

 

3.) Now, the GIF should be open in your workspace on Photoshop. You will notice that the GIF isn't "moving" while sitting in your workspace. Make sure your "Animation" window is open. If it's not, go to the top, press "Window" -- "Animation."


 

4.) Once you open your "Animation" window, you will see the different slides at the bottom that make up your GIF. If you press the play button, you will see your GIF animate.


 

5.) As you can see, the GIF is way too large for what we are using it for. To resize the image, go to the top and select "Image" -- "Image Size..." A box will come up & you type in what dimensions you would like to image to be. It might take a few times of pressing to get it the right size that you want. Just be patient with it. But, for this graphic I made the GIF size 180x95.


 

6.) The next step is to highlight all the layers in the GIF. First, make sure that the first frame of the GIF is selected in the "Animation" window. Next, go to your "Layers" window, click on the first layer, then hold shift, scroll to the last layer of the GIF and click on it. All of the layers should now be highlighted in blue.


 

7.) With my GIF, there are 17 layers. Yours might be larger or smaller depending on how long of a clip you have. Now that all the layers are highlighted, make sure your "Move" tool is selected. Go directly to your GIF in your workspace, hold down the left click on your mouse, and drag the GIF right into your graphic.

 

8.) Now you can move the GIF image around anywhere you would like on your graphic. But, when you are doing so, make sure all the layers of the GIF are highlighted in your "Layers" window. Also, in my graphic I am putting text over top of my GIF. If you also wish to do that, make sure your "Text" layer is above all of your GIF layers.


 

9.) Now that the GIF is placed where you would like it to be, you will have to go into your "Layers" window and select the first layer of the GIF. Now that only one layer is selected, you can add an easy "border-like" effect to it if you would like, or even a glow around it. I am going to make a border. What you do is, go to the top and select "Layer" -- "Layer Style" -- "Outer Glow..." A window will pop up and you can select and color that you would like and drag the size to whatever you want. For mine, I made the blend mode: screen, opacity 100%, noise 0%, technique: softer, spread 20%, size 5%, range 50%, and jitter 0%. (For other colors I recommend putting the blend mode: normal.)


 

10.) Now that there is a "border" around the GIF, we can get to animating! What you do first is go to the "Animation" window at the bottom of your workspace and click on the button that kind of looks like a post-it note. That's the duplicate button. Once you duplicate that slide, go to your "Layers" window, and click the empty box to the left of the next layer of your GIF. An "eye" icon will appear so that the layer is now visible. You will notice that GIF on your graphic will now be the next frame of the GIF.


 

11.) Repeat step #10 until you have reach the end of your GIF layers. This might take some time depending on how long of a GIF you have. So, please take your time and be patient!

 

12.) Now all of your frames for your graphic should be complete! If you would like to see your graphic as an animation, you can press the play button & watch it move! To save your graphic so that the GIF will still be animated, go to the top and select "File" -- "Save for Web & Devices..." A window will pop up, just press "Save." And you're done!


 

13.) Here is the final result after it's all done!:


 

I hope this tutorial was helpful to all of you who read this. If you have any extra questions, I will try my best to answer them. I'm not a professional at Photoshop, but this is how I add my GIFs to my graphics. I apologize if this tutorial was confusing, but it's the best way I can explain how to add the GIFs to a graphic. Anyway, I hope you all have fun with your graphic making & have a swiftastic day!

 lovelovelove,

- Tanya

Categories: Adding GIF

Post a Comment

Oops!

Oops, you forgot something.

Oops!

The words you entered did not match the given text. Please try again.

Already a member? Sign In

10 Comments

Reply Kiki
12:38 PM on April 15, 2012 
Thanks Tanya! That program on my computer has very similar controls and I think I've gotten it pretty well done, but I have to finish it later. I'll show you it when it's done.
Reply Tanya
9:26 PM on April 17, 2012 
Kiki says...
Thanks Tanya! That program on my computer has very similar controls and I think I've gotten it pretty well done, but I have to finish it later. I'll show you it when it's done.

Aw, I'm happy that it helped! :) I look forward to seeing your graphic!
Reply havpeace13
12:06 PM on July 13, 2012 
do you know ow to add a gif with photoshop elements10 because thats what i have and i cant figure it out???
Reply Tanya
2:06 PM on July 13, 2012 
havpeace13 says...
do you know ow to add a gif with photoshop elements10 because thats what i have and i cant figure it out???

I'm sorry, I've only ever used Photoshop CS5. :( Maybe you can search a tutorial for Photoshop Elements 10 in Google? That might help you out! :)
Reply NewYorkRed
6:46 AM on October 26, 2012 
Hey I'm fro TC and I adore your graphics, thanks for the tutorial!
Reply Tanya
4:55 PM on January 13, 2013 
NewYorkRed says...
Hey I'm fro TC and I adore your graphics, thanks for the tutorial!
Thanks so much! & you're welcome! Happy to help out! :)
Reply Ashleytheswiftie13
8:02 PM on January 21, 2013 
Thanks so much for the tutorial
Reply Tanya
10:26 PM on January 25, 2013 
Ashleytheswiftie13 says...
Thanks so much for the tutorial
You're welcome!
Reply Emma (Swifty fan13)
7:41 PM on May 2, 2013 
I would LOVE to o that but does it give you're computer a virus??
Reply Tanya
10:06 PM on May 7, 2013 
Emma (Swifty fan13) says...
I would LOVE to o that but does it give you're computer a virus??
By adding a gif to your graphic? No, it won't do that, You don't have anything to worry about. :)