Advertisements

Stephen Amell / Arrow GIF Making Tutorial Using Photoshop CC   1 comment

Fuck-Cancer

Hey all, since people on Twitter and on Tumblr keep asking me how to make GIFs, I’ve decided to make a Stephen Amell / Arrow GIF tutorial. Normally I would post it on Tumblr, but I figured it would reach more people here. 

Everyone makes GIFs differently, but here is how I make mine. I’m also on PC, if you’re using a Mac GOM player won’t work for you, so you need to find a method to make your screencaps. If you’re able to make them just skip to the GOM player part. 

What you need: 

  1. GOM Player – You can download it here
  2. Photoshop CC – You can get a free trial of Photoshop CC for a month. Click here

What you need to know: 

  1. Tumblr GIF sizes: For big GIFs the size is 500p x 500p. For GIF sets, people normally use 245p x 245p, for GIF sets that have three small GIFs in a row, one next to each other the size is 160p x 160p. Tumblr will not accept GIFs that are over 2mb in size. You’ll be able to upload the GIF, however it won’t play.
  2. GIFs on Twitter: On twitter the size of your GIF needs to be 500p. Anything below that will look distorted. I think the maximum size for GIFs on Twitter is 3mb.
  3. GIF colouring & PSDs: Keep in mind that Arrow is a dark show, which makes colouring the GIFs harder. You can colour your own GIFs (which I’ll show you how to do below) or use PSDs which you can find on tumblr. You can search “Arrow PSDs” on Tumblr and you should be able to find some. I prefer to colour my own GIFs.
  4. Video size: Keep in mind that the video size you should be using should be either 720p or 1080p. The higher the quality, the better your GIF will look. Sometimes people GIFing in lower resolutions will use darker PSDs.

Keep reading after the jump! 

Let’s get started shall we? I’ll start by GIFing a scene from Stephen Amell on Reel Side

Open your video with GOM Player. You could always open your video directly in Photoshop, but I don’t like doing that and this is my tutorial lol. 

1

Go to the scene you want to GIF hit pause, then hit Ctrl+G, the screencap menu will pop up and here are the settings you should set, for GIFs. Make sure your “Burst Interval Sec.” is at 0.05 (this is the speed for normal GIFs), “Quality” should be at 255 and for Burst Capture Image you can set it to the amount of frames you want. I just keep my settings like the ones below and just delete the frames I don’t want. Also, make sure to check in which folder your screencaps are going to go. 

2

Start by playing the video and hit the “Burst capture” button. Once the scene is done, close GOM player. 

3

Open photoshop, click “File” scroll down to “Script” and select “Load Files into Stack…”

4

It will bring you to a browse button so you can go find your screencaps on your computer. Select all the ones you want to use for the GIF. The above menu should pop up, click “Ok” and let Photoshop load the layers. 

5

 This is my screen after doing the steps above. You can see all my screencaps loaded on the sidebar on the right. You guys ready? We’re going to go through a series of steps now, it might seem complicated at first but once you get the hang of it, you’ll do it automatically. Click on the “Create Frame Animation Button”. One screencap will load. 

6

Click on the little button where the red arrow is, a menu will pop up, click on “Make Frames From Layers”. All your screencaps will load at the bottom. 

7

Click on the button again and then click on “Reverse Frames”. For some reason, Photoshop, always loads frames in reverse order. Again, click on the button and this time click “Select all Frames”. 

8

Now that all your frames are selected, click on the little downward arrow at the bottom of a frame where the speed is, it should be written “0 sec.”. Click “Other” 

9

Another menu will pop up to let you chose your speed. If I’m making a GIF at normal speed I’m going to enter 0.1. Choose your speed and click “OK”. Still following me? Let’s continue 😉 

10

See the button at the bottom that says “Once”? If you keep the “Once” setting, your GIF is just going to run one time and stop. You want a GIF with a loop. So click on the “Forever” button. At this point if you click the play button arrow at the bottom you should see your GIF animation. 

11

I’m going to crop my GIF first, so I’m going to click on the crop button on the left and then crop my GIF according to what I want in the frame. Once I’ve select the area I want cropped out, I’m going to click “Crop”. 

1

This is what my GIF looks like now. I think it’s a little too fast, so I’m going to go back to the step about speed and set my speed to 0.15. 

2

This is my GIF at 0.15. I like the GIF speed now, however, look at the colouring. It’s kind of meh right? We’re going to go change the colour. At this point you could just add a PSDs over it, but like I mentioned I like making my own. Also, I probably should have used a different video to do make a tutorial, as this one is dark. But too late. 

Still with me? Okay, let’s keep going. 

12

13

14

15

As you can see from above, I went to play in the curves, colour balance, selective colour and I also went in the brightness/contrast. All of these are available where the red arrow is. You can see all the changes I’ve made in the sidebar. Also note that in selective colour, you go colour by colour changing the tone as you go. Choose what looks best to you. 

3

This is my  GIF now. It’s a little greenish, but since this is a tutorial and it’s already taking me forever I’m going to let it be. If you wanted to stop at this point and not add text you could click on “File” and then “Save for Web”. 

16

A menu will pop up, make sure the setting are as above. Check the size of your GIF to make sure it’s the correct size to be uploaded on Tumblr or Twitter. If it isn’t, go back and delete some frames. I wasn’t going for a square GIF, if so I would have cropped it as a square. I wanted a GIF with a width of 500p, so if you look where the “W:” is I entered a width of 500p. If I would have done a square crop the “H:” would have automatically re-adjusted to 500p as well, once I entered 500p for the width. 

20

If you’re making a GIF set, you’re going to want to save your layers so your colours remain the same throughout the GIF set. To do that, you need to make a PSDs file. Select all your layers on the right side bar (don’t select the frames). Click the “Layer” button at the top and go down and click on “Duplicate Layers”.

21

A drop down menu will appear, click “New”, then add a name. I’m going to name mine SA Reel Side. 

22

This is my screen now. The first tab still contains my GIF, the second tab is the PSDs colouring layer. What you want to do is save it. 

23

If I were making a GIF set and just wanted to keep using the colouring I’d keep the tab open. Since we’re not doing this, just click on the “x” in the tab. It will ask you if you want to save it, click “Yes”. Save it where you want on your computer. We’ll come back to this later. 

You guys still here? Alright let’s add text to the GIF. 

24

Since there isn’t actual audio for this scene I used the text “Hi, my name is Stephen Amell”. To add text you need to click on your first frame at the bottom. This is the one you’ll be writing the text on. Then you want to select the text tool in the left sidebar. After that you’ll want to choose a font and size. For a GIF set I usually use “Arial” and “Bold Italic”, the size always depends. In case you guys wanted to know, the font closest to the Arrow font in Trajan Pro 3. 

25

Now that you’ve added your text your GIF looks okay, but you’re going to want to make your text pop. Select the “fx” button in the right sidebar as shown above. 

26

A menu is going to pop up, select “Stroke”. In the stroke menu adjust the size of the stroke you want to add. I chose 3p for this. You can also choose your colour, it’s normally black, but sometimes I just want it to be grey. Hence the grey setting above. You want the rest of your settings to be the same as above. Then click “Ok”. 

4

This is my GIF now. As you can see, I could have made the text smaller and if I was actually going to post this GIF anywhere, I would have. But since this is a tutorial, you get the gist of it ;). 

5

Above I switched the font to Trajan Pro 3 and added a “Drop Shadow” effect to my text, I also moved my text to the centre of the GIF, just so you can see how you can play around with things. Trajan Pro 3 is a font you have to purchase. However, you can find loads of free fonts here

If you just wanted to make one GIF and not use PSDs you’ve used before or pre-made ones you can stop here. If not, please keep reading. 

27

Remember those PSDs layers I talked about earlier? Let’s go back to that. I just went and did all the previous steps, without colouring my GIF and it legit took me about 1 minutes. Once you get used to doing all those steps it will take you the same amount of time. 

Oliver---Soldier

This is the GIF I just made. I did a square crop so it’s 500p x 500p. I also put it at a rate of 0.2. Keep in mind that when you’re making GIFs that are this big the maximum amount of frames you can use is between 10 to 15 frames. If you go over the mb limit for Tumblr or Twitter you’re going to have to go back and delete frames either at the start or at the end of the GIF.

The colour’s pretty crappy, right? Arrow is a dark show and tough to colour. What I’m going to do is use a previous PSDs that I made for another Arrow GIF set I made. 

14

I’m going to use the PSDs I made for the above GIF. I had saved the PSDs as I showed you how to do earlier.

28

To do this go to “File” and the “Open”. You can go choose the PSDs you saved earlier. 

29

This is what my screen looks like now. The GIF I was working on is called “Untitled” because I didn’t save it yet. Don’t be like me, save your GIFs. Sometimes Photoshop crashes and you lose your stuff. My colouring layer is called “Oliver Death 3”. Lol, I love how I name my PSDs

30

Go to “Layer” and click “Duplicate layer”.

31

In the “Document” drop-down menu you can choose your GIF. Since I obviously haven’t saved mine yet, it’s still called “Untitled 1” so I’m going to select that. Once you’ve done that, click on your GIF tab at the top. “Untitled” in my case. 

32

Your GIF should now have the colouring you just added to it. 

Oliver---Soldier2

This is what my GIF looks like now versus the version above without the PSDs colour layer. I’m still not 100% satisfied with it, so I’m going to go play with the colouring some more following the steps I showed you guys earlier. 

Oliver---Soldier3

I added brightness, colour balance, selective colour and this is my GIF now. I like the colouring, so I’m going to stick with that. 

33

I can also make it black & white by adding a black & white filter and adjusting the brightness & contrast as well as the hue & saturation. 

Oliver---Soldier--Black-&-White

So that’s pretty much it. This probably sounds like a crazy amount of work, but with practice it shouldn’t take you all that long to make a GIF. Making a normal GIF with a PSDs I’ve already made usually takes me about 5 minutes. Making one with new colouring takes me a bit longer. It’s going to be a lot of trial and error. I learned how to make GIFs from a tutorial similar to this one a few years ago. It’s no longer available. However,  I’ve added a lot of stuff I’ve learned over the years in my tutorial.  

Sorry for the typos, grammatical errors I might have made, but I’ve been working on this post for 3 hours now and I’m seeing double. I probably would have made like 20 GIF sets in that time lol

Advertisements

Posted October 25, 2015 by justfp in Arrow, Stephen Amell

Tagged with , ,

One response to “Stephen Amell / Arrow GIF Making Tutorial Using Photoshop CC

Subscribe to comments with RSS.

  1. Pingback: Our GIFs From Outlander Season 1 – Part III (128 GIFs) | Outlander Online

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: