#completesources

Making a gif

(remember about the tumblr width dimensions: 540px / 268-268px / 177-178-177px, depending on how many gifs per row. That way you’ll definitely get the best result when your gif is posted. Visual:)

GIF (width: 268px) 

from:

to: (PSD is used)

to:

Basics of adding subtitles

1) make sure your settings look like this:

You will need rulers and automatic snap for evening out your text.

2) the type tool

click on the type tool > click on the gif > type your text

Move your text using this tool:

It should snap to the middle of your gif, and if not, make a new guide

(134px is the middle of the gif aka half of 268px, yeah?)

The text you see is already edited. Make sure your character tab is open and use the settings you want. These are my settings for the text: (depending on the size of the gif, they’ll be different)

3) shadow and stroke

Go back to your layers tab (I reopened the gif, so the PSD aren’t here). Find the ‘fx’ at the bottom of the window and click ‘drop shadow’.

This window will pop up:

We’re interested in stroke and drop shadow.

Move the window to the side so you can see the effect of your settings changes.

These are the settings I used:

and stroke:

result:

We’re like... halfway there. We need the text to fade out and another text to fade in. You calm out there? If not, message me, we’ll talk this through. If yes, let’s go.

Fade in/out effect when using Smart Object

We’re using SO if you made your gif in my way aka using my tutorial. Nothing to go ‘!!!’ about, you’re good.

Logically thinking, when you want your text to fade in or fade out smoothly, you need it to dis/appear, not to ‘poof’ abruptly. To make that happen we need to focus on putting the text on the right part of the gif, duplicating layers and the opacity of them.

- changing the durability of the text

By playing the gif 

find a moment when the character stops talking. 

This 

is your text layer on timeline. We need to cut it to the point you found. So you have to move the little blue thingy

to this point.

result:

Doesn’t look good, does it? Let’s make it smooth.

- duplicate layers

Easy. 

right click on your text layer > duplicate > ok (document is where your text will be duplicated)

Make 4 of these layers. (tip: mark two layers by clicking on one, then pressing shift on your keyboard, and clicking on the other one, then duplicating both at once). 

Layer on the top in the layers window is the layer on the top in the animation window, and so on.

- opacity / fade out

Fading out means something going from 100% opacity to 0% opacity. To make it happen on a gif, we’ll use 4 layers and each will have 25 percent points less.

Layer on the top is the last layer that will disappear, and the bottom text layer is the first one. So we need to change the opacity in all 4 text layers to these:

Press enter after you’ve change the opacity!

Let’s go back to the animation window. We have our 4 layers. We want them to fade out. So we move the blue thingies in a way that will allow this to happen:

result:

The whole thing that Tony says is ‘I have to protect the one thing that I can’t live without. It’s you.’ We’re lacking the ‘it’s you’, so let’s go!

Duplicate one layer to get the same text.

(it has to be on the top)

Change the text and move the blue thingy to this:

Find the point where the character says the words that are in your text layer, then again move the blue thingy (the left one):

The opacity of this text is 25%, which is great. We need 3 more layers with 3 different opacity settings. Do the same thing as with the first text, but this time from 25% to 100%, not from 100 to 25, so duplicate and change the opacity.

Again, we have to move the blue thingies to make the layers create the fade in effect:

result:

To save your text layer and have it available to use on other gifs so that you won’t have to make the text layers and edit it again and again, duplicate one layer to a new document:

change the opacity to 100%, make it last the whole timeline, and save (ctrl+shift+s) as PSD 

To use it on another gif, make your gif, edit it, and then open (ctrl + o) the PSD. Duplicate the PSD document to the gif document and edit as you please.

Videos

To make good quality gifs, you need videos with good quality. Best one for you would be 1080p, so always check if the video you want to gif is available in such quality:

I use this website to convert videos from YouTube. Select the formats to MP4 and highest quality:

Then convert, and download.

You can use videos from YT or movies you have on your computer. The movies also should be in the best quality possible. For example, this is the movie I’m gonna use for this tutorial:

You can learn about torrents somewhere else, or contact me about that. I suggest visiting YT, though, they have good tutorials for torrenting movies.

PotPlayer

After you’ve installed PotPlayer, it’ll be for the best if you add it to your taskbar or wherever else you consider it easy to click and use.

1) Open the video

In this tutorial, I’ll be working with Spider-Man: Homecoming, so I open it in the program.

2) Settings

After pressing CTRL + G, this window should show up:

Make sure your settings look like that:

Storage is where your caps will be stored. It’ll be easier when you’ll create a folder on your desktop, and then set the storage setting to it:

3) Taking caps (image capture)

Play the movie on the scene you want to gif, and pause it.

Now, click Start on the CIC window

and play the movie. Click Stop after taking the caps you need.

Your caps should be in the folder you chose in the storage setting

You can also have your movie playing and click start/stop whenever you want (if you know the movie/clip enough to know when to take caps).

Turn off PP after you’ve taken caps you need.

You can take as many caps as you want to, and then sort them into folders:

Photoshop: making frames into a gif

After you’ve installed it (search for tutorials how to properly install it, it takes unpacking and simple installing to do so; I’m more of a self-taught person and I can’t remember how I did it). Again, it’ll be easier  for you to have PS in the task bar.

Open your PS,

then try to follow these steps:

[ window > animation - opens the animation window on the bottom ]

1) File > Scripts > Load multiple DICOM files > choose a file

You can give that command a keyboard shortcut.

This window shows up:

It’s important your folder with caps is on your desktop, so that the access to it is easier:

Click OK. The more caps you try to open at once, and the bigger they are (better quality), the longer it takes to open them. Don’t try to open more than 150 caps at once, it may work, but it’ll lag your PS and may even ruin a bit of your gif.

This is how it looks now:

As you can see, on my right I have specific tabs. I set them myself in the most comfortable for me way, but with time you should find your own way to set them to suit your liking. My tabs look like that:

I only use history, actions, and adjustments. Of course, there’s also a tab with layers and paragraphs (text):

2) Convert to frame animation

4) Make frames from layers

For that command, you can also set keyboard shortcuts. 

result:

5) Select all frames > set the time delay

(again, you can have a shortcut for this)

Make sure all the frames are selected, then:

For almost normal speed, choose 0,05. 0,04 can make your gif a bit too fast. The bigger the number (0,06 or 0,07), the slower the gif.

7) Convert to timeline

Make sure the frames are still selected.

8) Select > similar layers

(again, you can set a shortcut for this)

9) Convert to smart object

Right click on one of the selected layers:

Choose convert to smart object. Result:

Photoshop: editing a gif

There comes the fun part. The most important thing is dimensions. Be sure to stick to tumblr width dimensions: 540px / 268-268px / 177-178-177px, depending on how many gifs per row. That way you’ll definitely get the best result when your gif is posted. Visual:

1) cutting/cropping

To crop your gif, use the crop tool.

Now, it’s important your gif has the proper size. The bigger the dimansions, the bigger the gif’s size. The maximum size you can post is 3MB. Use this bar to set your crop tool:

5x2 (make sure it says ‘cm’, not ‘px’) is what I use for 540px gifs. For the 268 gifs I use 5x3, 9x5, 11x7 or any other sizing that I think looks good. We’re gonna use the 11x7 for a 268px gif.

advice: to check if the gif looks good, click on different places in the animation bar:

2) size

image > size or Ctrl+Alt+I:

We’re making a 268px gif (width), but I’m gonna make it 230px so it won’t stretch in the post.

Ctrl + + will enlarge your view:

Make sure the thingy says “100%” so that you have the 100% accurate view of your gif.

3) sharpening

You can either experiment yourself or use actions. Search for actions that you like here, and download the action (make sure to like/reblog the post of the action maker)

Opening downloaded actions: 

Choose the actions you want to load (it should be in the downloads folder). 

Using/playing an action (make sure your gif is selected):

before:

after:

4) editing

This is the fun part when all you can do is to experiment. I’ll show you in parts what I do with that gif, but the fun part is when you try it, yeah?

I use these adjustments: brightness, curves, vibrance, and selective color.

After all of these, the gif looks like that:

5) Saving 

Make sure the looping option says “forever”:

you can play your gif to check if it looks like you wanted:

And save the gif:

(wherever you want, preferably on your desktop)

so, before editing:

after editing:

P.S. To cut your gif after making it, you can move that thingy:

wherever you want.

P.S. 2. Clean up the mess after making gifs. Delete the caps and clean up the trash folder.

That’s basically it. Advanced gif making takes using layers, brush tools, and the eraser tool, playing with colors, and a lot of other stuff.

As you can see, it takes time, patience, energy, and having the movies you want to gif. It’s fun, but it’s a lot of work.

First step, pick the screencap/pic. I’m gonna go with this:

I’ll crop it, position it and resize it. The dimensions I use when I’m working on my icons is 400x400 but that’s up to you. It looks now like this

My next step is to add the background colour. I add a new layer and start to paint on it using the brush tool (hardness should be at 100%). This is one of the parts that requieres the most pacience IMO. I normally just paint this amount

Then I zoom in (400% usually) to paint around the silhouette, like this

Once I painted around the silhouette (and in this case filled the tiny spaces there were between Emma and Killian), it looks like this

And now the only thing left to have the bg ready is to fill the spaces left on the layer,

Next, I add my PSD below the BG layer and I have this

Every time, I like to change the colour of the clothes, and play a little with the hair colours. For that, I go to the PSD, add a new layer and go here

and change it to “color”. I pick the brush tool again, and start to paint (I like to add one layer for the clothes, and another for the hair). More often than not, I don’t quite like how the colour I picked for each thing looks like, so I play around with the selective color. After I’m done I have this

I’m almost done, now the only thing left is the background effect. There are two things I like to do:

1) I go to  layer > new fill layer > gradient and this pops up

I leave the settings as they are and this appears

Clicking on the gradient box I have this window now

I go to the tiny pink boxes

and change the colour of both of them to white. After pressing OK I’m back to the first box and where it says “linear”

 I change it to “radial” and now it looks like this

But since their faces are covered I select the mask next to the gradient

select the brush tool making sure the colour of the brush is black, and start to paint on them to get rid of the white, and this is the result

2) For this effect is the same layer > new fill layer > gradient process but when this pops up 

I change “normal” to “soft light”. I click the gradient box

and select the black and white square

now the icon will look like this

But one of these layers is usually not enough for me, so I duplicate the gradient layer and click here (on the copy)

so when the gradient window pops up I go here 

and in this case make the angle 180°, but I usually change. So the icon looks now like this 

The only left thing to do is change the dimensions of it (I often go with 100x100 or 160x160), add some sharpening and my icons are ready