C'est la Reine des Dragonne

So, in my little Intro To Giffing thing, I explained that I use frame animation because I like to micromanage my gifs, and that I sharpen frame-by-frame. By the feedback in the reblog tags, that's an insane thing to be doing. I'll not be dissuaded, but I'll share how to make insanity easy.

Starting with your gif, (details of how to start are in aforementioned post) you're going to use Smart Sharpen. Not regular sharpen.

I mean. You could, if you wanted to, but default sharpen sharpens everything as a blanket; smart sharpen is... smarter? You've got a bit more control, basically.

It's harder to see the difference on mobile, btw. It's much more obvious on desktop. This example is a bad one but I'm too slapdash to go back and find another scene. Regular sharpen actually probably would be fine for this scene, but in busier scenes it'll make ALL the details sharper, and we don't want that.

(Side note, you can absolutely use regular sharpen and then Edit > Fade Sharpen for greater control that way. That's how we used to do it back when dinosaurs roamed the earth. But smart sharpen turns it into a one-step process)

So, photoshop action! I use actions for sharpening, noising and blurring - I'll share mine, but again, this is how to do it for yourself.

If you don't have Actions, go to Window > Actions. It'll appear in your workspace and it looks like this:

So, go ahead and go down to the little folder to create a new set of actions - you can see mine's just the default Set 1, but I've made a new one because actually it turns out I am insane for tutorial purposes.

Once you've made the little folder, click the square with the plus in it and name it whatever you want - presumably, something along the lines of Sharpen.

Upon creating the action, you'll see the little circle button turns red - it's recording! It's going to record everything you do in Photoshop while this is red.

So, with your newly imported and sized and flattened baby gif and with Frame 1 and Layer 1 selected, go up to Filter > Sharpen > Smart Sharpen.

You'll get a little pop up box with some settings in it. Play with the settings as much as you like - mine will change occasionally, but broadly speaking, this is roughly where they are.

Amount is for... the amount of sharpening. You can whack it right up to max - sometimes it's fine, sometimes it burns. You're usually safe to have this pretty high.

Radius is the radius of the sharpening. It begins looking horrifying the moment you go over 1.0. At around that point, you'll start seeing finer details actually start to blur in the worst possible way.

Reduce Noise is exactly what it sounds like. There's no harm in having this fairly high, but I don't like to lose too much texture because gifs have a habit of banding if things are too smooth.

I don't change these settings even for each gifset - I usually leave it until it bugs me for one particular set, and then I'll futz around.

So, now you've got your sharpening settings set. That's exciting! Once you hit OK, you'll see your action has updated accordingly

Now, to tedium!

Click on Frame 2 in your Timeline and Layer 2 in your Layers. Then, you can either go back to Filter and the most recent thing you did will be at the very top. It won't give you the settings pop-up again unless you go down to Sharpen > Smart Sharpen again.

Or, marginally quicker: Ctrl + Alt + F.

It should now be kind of obvious why we flatten the frames to layers rather than working with the 'video group' folder in your Layers tab - the action is literally going to read Select layer "Frame 2" every time you run this action, so if your second layer is called TVShow-EP01-04345, the action won't work. The whole purpose of creating this action is so you can use it with every gif you ever make.

So, continue this particular nonsense until you reach the end of your gif. As much as it's a particular pain in the hoop, you probably want a fairly long gif for this one so that you can get all of the tedium out of the way in one go.

That being said, it's not the end of the world if you've only got a short gif for now. We can add to actions, I'll go onto that.

For now: Frame 3, Layer 3, Ctrl + Alt + F. Frame 4, Layer 4, Ctrl + Alt + F. Etc etc ad nauseam.

At a certain point, you'll perhaps once or twice - or a dozen times - mis-click a layer or frame and it's tremendously annoying.

Not to worry! Click the square (Stop) to the left of the red Record button to stop recording your actions. Then click on the step that was wrong and then click the little bin to get rid of it.

Then go back to whatever your most recent (bottom) action is, ensuring you've got it selected. Now click Record again, and resume.

This is also how you can add to an action later on, if you're later creating a longer gif: you'd be able to run the Action, it'd stop when it ran out of actions, then just click Record, click your next frame and layer, and Ctrl Alt F, and on your merry way you go.

Continuing on. Keep going until you've finished your gif, and you're done! Hit Stop, and your first action is complete! Yay!

So, if you've done this for 300 frames, you'll be able to run it on any gif up to 300 frames without issue. If you run it on a gif that's less than 300 frames, you'll get this error message:

Just hit Stop, it's fine: the action's basically telling you "hey, the action can only find Frame 50 and Layer 50, there's no Frame 51!" - it's completed everything up to that point.

If you've done up to like 300 and then you've imported something with 350 frames, you can run the action and it'll just stop at 300. Then, open your actions, press record, and just do the 50 manually. Then your action will henceforth go to 350.

I know there are giffers who use actions for their colouring and other setting up basics, but I do all of those manually - there's not really a limit to what you can use them for. I use it for sharpening, noising and blurring as previously mentioned. I rarely use the blur - usually if I'm making something complex that requires layering, but anyway.

So, all this sort of comes to nothing if you'd rather not make your own, because here's a link to a Drive folder with all three actions in.

Sharpen goes to frame/layer 390, Noise to 294, Blur to 92.

Load Files Fast action opens up a folder where you put your own screencaps in and loads the caps in PS and makes it into a smart object. You will need to configure this yourself since it uses my own folder. Click on Load Files Fast, select "Record" button and then choose File > Open, navigate to the folder that you use to store your screencaps, select the first cap, click on the "Image Sequence" option on the bottom right of the dialog box and then click "Open". It will then ask you to specify the frame rate, I use 25, then click OK. Then you click on the "Stop" button and your action is saved. [video on how here]

After it is put into a Smart Object, I use one of my crop presets I've made. To load them into Photoshop, click on the down arrow next to the crop bottom, click Load Tool Preset and select my preset.

Then I choose a sharpening I want to use. I'm either use 'high pass' or the 'sharper w/o grain' one.

OPTIONAL - Brighten action, brightens the scene using 'Screen' mode. I use these for really dark scenes.

After that I color the gif and add text if needed.

If I want to change the frame delay, I use the 'frame delay' action and set my delay to 0.04 and then save the gif!

STEP ONE:

load your gif into photoshop with your preferred method of doing so (i have a tutorial here on how i do mine). after you resize/crop your gif, you'll want to convert it to a smart object. this is basic photoshop knowledge, so i'll be skipping how to do it for the sake of time.

STEP TWO:

after your gif has been converted to a smart object, open your actions and then you'll want to create a new set. i'm naming mine "action tutorial" for the purpose of this tutorial. you can choose whatever name you want for it!

STEP THREE:

your new set should be automatically highlighted after you highlight it. do not unhighlight it. you will then want to create a new action. again, name it whatever you desire, but i will be choosing "gif sharpen action tutorial" for the sake of this tutorial.

hit the record button and photoshop will start the recording process.

STEP FOUR:

next, you want to go to filter > smart sharpen and adjust it to these settings when the window pops up:

after you hit OK, go back to filter > smart sharpen and that window will open again. you now want to change it to these settings:

hit OK again and then you can hit the stop button to stop recording because you're pretty much done at that point. since this is a basic sharpening, i won't go any further with any more settings unless someone requests it.

FINISHED PRODUCT WITH COLORING:

this tutorial assumes basic gifmaking knowledge, and my process entails cropping and sharpening prior to coloring. here's our base gif:

my first step when coloring is always a brightness/contrast layer set to screen without changing any of the values. here's what that looks like:

this layer brightens up the gif significantly -- in this case, so much so that i might drop the opacity down to 75%-85%. i find this step most helpful when working with really dark scenes, which is why we'd decrease the opacity on this one as it's already well-lit.

my next step is always a curves layer utilizing the black and white eyedroppers:

on the left-hand side you'll see those three eyedroppers. click the top one (black) and then click on the blackest part of the gif. then click on the third one (white) and zoom in and click the whitest pixel -- in this case, it was a highlight on one of carla's earrings. the white eyedropper didn't change things much, but the black one did and it helped to eliminate some yellow tint.

please note that you can always try multiple different points. undo is your friend here, but undoing the white eyedropper if you do it in the same order as i do will undo both eyedropper selections. as in, if you're happy with the black eyedropper but want to redo the white one, you'll actually need to redo both. photoshop 🤷‍♀️

next comes selective color! this first selective color layer is to adjust the blacks and neutrals (and occasionally whites in an especially tinted scene). i almost always make the blacks blacker and neutrals a little lighter, but you need to be very careful with the neutrals when giffing people of color! don't white- or color-wash!! you can find more in-depth tutorials on this on @gifmakerresource (my resource/tutorials blog)!

here are what these adjustment layers look like:

also note that some of this really just comes down to personal preference. i love cool colors (blues, greens, purples) and prefer my gifs to have a bit of a blue tint to them and sometimes that means neutralizing some of the reds and yellows in general and in the neutrals of a gif. again, please just be conscious of how this can affect skintone when giffing poc!

these three adjustment layers are the basis of every coloring i make. here's the difference between our uncolored, base gif and these adjustments:

while what we've done has brightened the scene and added contrast, we've kept judy's skintone virtually the same. the reason i point this out so much is because i've seen an uptick in colorwashing lately with all the people of color in the pitt and i would love that not to happen in more fandoms! while i don't think anyone is setting out to purposely colorwash, when it's not something you're aware of or paying much attention to, it happens very easily. just be conscious and when it doubt, don't be afraid to ask for help, look for resources, or even pull up photos of the actor or actress to get a better idea of their skintone!

from here, what i do varies depending on the scene. i would like to emphasize and make things more blue (again, personal preference) so here's how i go about that!

i'll use another selective coloring layer and select the blue and cyan dropdown menus:

what this means is we're isolating the blues and cyans in the scene and enhancing the cyans and blues within those colors. selective coloring is my absolute favorite adjustment layer and how i achieve my "unique" sets where i fuck around with colors and focus on usually two specific colors. i highly recommend playing around with these adjustments as that's the best way to understand how you can manipulate colors in a gif! like on these layers, if i were to adjust the magenta sliders, moving it to the left will add green and moving it to the right will add magenta within the blues and cyans.

anyway, now we have this:

the right half of this is the base gif. the left half is divided further in half horizontally, with the top quarter showing the blue adjustment layers and the bottom quarter before the blue adjustments. it's subtle but i <3 blue 🩵

honestly, this could be it, but i like a bit more contrast, so i'm adding a gradient map adjustment layer. i set it to black and white and to soft light and reduce the opacity to 40%

one more thing i want to do is neutralize the yellows a bit more, so with a selective color layer set to yellow, this is what i have:

btw, to change the layer colors on the eye/visibility, right click in that box and select the color you want. this helps keep the layers organized if i need to adjust something for some reason.

here's our final before & after! could i keep messing with this? absolutely, but this is what i would save as a psd to use for future scenes/episodes!

1) Creating your gifs

So to start off you're going to create your gifs in separate canvases. I work in timeline mode and I add my sharpening and colouring, and I put both gifs in groups (explained here).

Here are my gifs on separate canvases. For reference, I've called the one on the left "grocery store" and the one on the right "parents".

You'll then want to copy and paste your gif groups onto the same canvas. This is what my canvas and layers panel looks like once that's done. From here, you're ready to start the ripped paper effect.

2) Ripped paper overlay

For this step, you want to obtain your ripped paper overlay. You can find various ripped paper textures/overlays using google, but I used these overlays by @peytonsawyers !

You open up the overlay you want to use, and either copy and paste or just drag it onto your gif canvas. You can then resize and rotate the texture and orient it where you want.

I then drag the ripped paper layer so that it's placed between my two gif groups. I also hid the top group just so that I can see the overlay, but this is only temporary. Your canvas and layers panel should now look like this:

2.5) Filling in the overlay

So as you can see we have an issue because the ripped paper doesn't cover the entire area where we want our top gif to show. To fix this, I just use a white brush at 100% hardness and paint in the area that needs to be covered, making sure the ripped paper layer is selected (this doesn't have to be perfect, just make sure that the entire area is filled.

Now this is what it should look like:

3) Masking the top gif

Use the command (or ctrl) key and click on the thumbnail in the layers panel for your ripped paper layer (the square highlighted in white in that last screenshot). You should get a marching ants selection around the ripped paper like so:

Now reveal your top gif group (by clicking on the eye icon), and make sure you have the group selected in the layers panel. You should still see the selection around where your ripped paper is, like so:

Now go to the bottom of your layers panel and click on the little mask icon:

And now you should get a mask on your top group in the shape of the ripped paper, and you should be able to see both gifs simultaneously on the canvas:

If the black and white areas on your layer mask are flipped after you click on the mask icon, just click on the layer mask and use the command + i (ctrl + i) keys to switch it back so that you can see both your gifs.

4) Final touches

Now if you're happy with the result so far, you can absolutely stop here. However, I wanted to show the uneven rip (like how when you rip a piece of paper you can see some white bits on the edges).

To do this, select your move tool (shortcut: click the v key on your keyboard) and making sure your ripped paper layer (NOT the mask) is selected, use your arrow keys to move it slightly until it shows between the two gifs.

It currently looks a little too clean for my liking, so I like to move it slightly up/down as well so that it looks more uneven and natural. If your overlay is too small, just use the transform function (command + t or ctrl + t) to resize it so that it fills the canvas. This is what mine looks like after I mess around with it:

And you're done! If you want to adjust any colouring, just go into the gif group and you can edit the layers from there.