finesources

here's the uncolored gif, just sharpened.

the lighting tints them almost entirely yellowish/green. thankfully there are ways to fix this...

i always start with my lighting adjustments in this order: curves, levels, and exposure.

i made the tiniest adjustments just to give my gif the contrast i wanted and darken the black points, which helps keep the file size low.

next, i added a brightness/contrast layer and set the layer to "screen" with 50% opacity. this is a neat trick that can brighten a gif without actually tinkering with the brightness or contrast sliders at all. they're both still set to 0.

next, i began manipulating the colors with a channel mixer layer to minimize as much as of that green hue as possible. i'm gonna be honest, this can take patience and time. moving the sliders even the tiniest bit under each output channel (red, green, and blue) can have pretty drastic results. so i did just enough to give me something i could work with before moving on to other tools.

this helped a lot with the green, but it desaturated the gif quite a bit so i continued onto selective coloring. i focused mainly on the reds to give a bit of life back to their skin without going overboard because i knew the next adjustment layer was about to do the most heavylifting thus far...

the tool i'm referring to is color lookup. this is not something i use very often, but it can absolutely bring the colors in a gif back to life. it remaps the colors in your gif and color grades them using something called lookup tables (LUT), basically acting like a preset.

i typically try this adjustment layer as a very last resort if something is horribly color graded. the preset i chose for this is 3Strip, but there are several to choose from that could work for whatever look you're going for.

normally, this layer at 100% opacity would be way too intensely saturated for most gifs, so i usually lower the opacity down to 20% or 30%. but in this gif's case, 100% is actually kinda saving it's entire life lol. is it a bit too pink? sure. i probably could have lowered it down to maybe 80% and it would have been fine. but i personally like the saturation here, so i left it at full opacity and moved onto color balance to further tweak some of the midtones and hightlights.

the last layer was a vibrance layer bumped up to 30%. overall, there are definitely some more adjustments i could have made. there is still a lot of greenish/yellow tones in their clothes and jimin's hair that i probably should have spent a bit more time fixing, but i didn't want to stray too far from where i was at this point because it's clearly a lot better than where it started.

voila! i hope you found this interesting and picked up a couple tricks. basically: channel mixer and color lookup are the two layers i only whip out for emergencies. i refuse to depend on them, but man, they can come in clutch.

another note about color lookup layers: they're a bit of a nuisance bc they cannot be copied or dragged to other gifs for some reason if you're trying to apply the same coloring to multiple gifs of the same scene. you have to remove the layer from your PSD group, copy your layers to your other documents, then manually add it back to each group. it slows me down every time lol.

as for the sliding effect i used to show off the before and after, i learned to do that from this tutorial! (make sure to disable your timeline shortcut keys when using the keys to move the vector mask or this won't work.)

step one: picking what to blend!

so for this, i picked a close-up shot of sharpay and one that was further back. i feel like this is a good way to go about blending in a lot of scenarios, but whatever works for you!! i also picked the close-up based on her dialogue, which i used as text on the gif!

step two: coloring

for the fully colored gif, i colored it as i normally do. if anyone needs a more in-depth basic coloring tutorial, let me know! but one tip that i honestly forgot about until looking at this again was that i added a gradient map layer and set the colors to black and pink (ff00a2) but then changed the opacity to 20% and set the blending mode to soft light. it gives the gif a little more pinkness to it!

for the black and white gif, i just added the same coloring from the colored gif and added a gradient map layer set to black and white.

step three: one document

now that your gifs are colored, you can put them in one document. these gifs are cropped to 540x540 and resized to the same. to do this, just convert your gif and coloring layers into a smart object and copy and paste. also make sure your gifs have the same amount of layers!

step four: blending

so now decide where you want to place your gifs. for this i placed the colored gif in the front (to the right) and the b&w in the back (to the left). it looks like i expanded them to make them look how i wanted. (i did make this a while ago!) but feel free to play around with it! make sure you hit shift and then expand with your mouse where the transform boxes come up!

within the layer order, the b&w gif should be on top of the colored gif. so while you have the black and white gif selected, create a layer mask. then use the brush tool (make sure foreground color is black and background color is white) and start erasing the middle and any harsh lines. my brush size was around 166. this is another great tutorial on the gradient method if you find it easier!

step five: adding pink color

now you're going to create a new layer and place it above the colored gif. set the brush color to pink (ff00a2). i usually like to make the brush size bigger for this. start using the brush on the edges and in the middle. then create another new layer and place it above the b&w gif. use the brush all around the edges and the middle. you then have to set the new layers to "color" so the pink is brighter and just pops better.

here's a pic of my layer order if that helps!

aurora borealis headers

9 headers with a ripped paper effect and a moving star texture. you'll be able to save them as .webp but they're originally in .gif format! (if you want to keep them that way just use this converter.

orchid headers

6 static, curved headers with an orchid, designed to be used without an icon (but you can use them however you want)

meteor headers

6 curved headers with a moving start texture. same as the aurora borealis headers, in tumblr-mandated .webp format.