#*tutorials

there are many ways to get the same results and i'll use various methods usually just based on what i'm feeling at the moment. some of it is a little convoluted, but hopefully this will give you a rounded idea of how it all works so you feel more comfortable playing around with your own colouring

NADJA

this is the base gif with zero colouring adjustments, just resized and sharpened.

unless the base gif is already very bright, which doesn't often happen because directors nowadays are allergic to light, the first layer i add is always a brightness/contrast layer. i don't adjust any of the sliders, i just change the blending mode to "screen", and then adjust the opacity if needed. this gif was pretty dark, so i left it at 100%,

my next layers are always curves to even out the white and blacks. i use two curves layers, one for white and one for black. i used the white drop-picker and selected just below the lightshade on the lamp behind her, and for the black drop-picker i selected her hair near her neck which gives us this

it's already looking much better, it's not as green tinted, but i want to make the red of her dress pop a bit more. in order to do that without making her face too red, i'm gonna remove some of the yellow. so next i'm gonna add a selective colour layer, and under the yellow channel i moved the yellow slider to -5 and the black slider to -52. now

now that the yellow is reduced, i add another selective layer, and under the red i move the cyan slider to -66 and the black slider to +29. now the red of her dress pops and her face is still a realistic tone. when i first made the gif, i added the red selective layer first, then added another selective layer under it and adjusted the yellows to offset it. you can always shift layers around or add a new layer underneath as you go.

voila

TOMMY

here is our base gif

this scene is better lit than the nadja one, but i prefer bright and colourful gifs, so i'm gonna once again add a brightness/contrast level and keep it at 100%

and then the curves layers to even it all out. since there isn't a spot that is immediately noticeable as white, you can hold the alt button with the white dropper selected and it will highlight all the white/very near white pixels. you can also zoom real close in to select specific pixels. i selected a from the white area around his chin/mouth. the same process works for finding a black spot with the black dropper, and for that i selected from a dark spot in his hair

the curves layers evened it out but also made the gif a bit more red and warm toned, and since i've decided i want the end result to be more blue/green, so i'm gonna add a colour balance layer. in the shadows channel i moved the cyan/red slider to -16, and the yellow/blue slider to +11

now the gif already looks great, it's bright, skin tone is accurate, he's not washed out, but like i said i like my gifs colourful, so i'm gonna add two more selective colour layers. in the first i'm gonna adjust the greens, bringing the magenta slider to -87, and the black slider to +81. in the second layer i'm gonna adjust both the blues and cyans, because when you see blue in a gif it's rarely ever straight blue or straight cyan, so always adjust both. (you could adjust the blue and green in the same layer, but i prefer to do them separately in case i need to move the layers around)

now finally i'm gonna add a hue/saturation layer because i think the blue of his suit is too blue when the sky behind him is more cyan. (also, since you only have 256 different colours to work with, you don't want too many different colours otherwise it will distort the colouring.) in the blue channel i move the hue slider to -12 to make the blue a bit more cyan, and i also move the saturation to +38 to make it pop more

and voila

RHAENYRA

here is the base gif (this one is going to get very convoluted and imo best exemplifies what colouring gifs is like most of the time)

as always, a brightening layer set to screen

now the curves layers. for the white i clicked on her hair at the top of her head, and for the black i i clicked in the shadows to the left of her.

but as you can see, while it added contrast, it also made the gif more green tinted than it was. you could click around more, or manually adjust the red, green, and blue lines on the curves until it looks better but i decided to add a channel mixer layer instead. in the green channel i set the greens to -95, and in the blue channel i set the blue to -97

next i wanted to add a little contrast, but i find that using the contrast in brightness/contrast can saturate it too much, so instead i added a levels layer. first i adjusted the bottom bar, moving the right slider to 230 which reduces the overall brightness of the gif, so when i adjust the top bar it doesn't brighten the gif too much. on the top bar, i moved the right slider to 212, and the left slider to 9

now, i'd like it to be not exactly warm toned, but less cool, and while i could use colour balance or a photo filter, i'm instead going to add a gradient map, using the default gradient pink 08, and setting it to blend mode soft light at 50% opacity

next i just want to increase the blacks a little, so i'm gonna add a selective colour layer and under black i'm gonna set the black slider to +10

it's still not as warm as i'd like, so i'm gonna add a colour balance layer, in the midtones setting the cyan/red to +10 and the yellow/blue to -5

we're almost done, but i want to make her dress pop a bit more, so first i'm gonna add another selective colour to bring the yellows down a bit, setting the black slider to -15

and finally one more selective colour layer, in the reds, setting the cyan slider to -50, the yellow slider to +10, and the black slider to +15

voila

NATALIE

here's the base gif

as always the brightness/contrast layer set the screen

now the curves layer. for the white, i zoomed in and selected a pixel on her cheek under her right eye. for the black i the dark spot just above her head

now she's very yellow, so i added a channel mixer layer. in the red channel i set the reds to +88. in the blue channel i set the reds to +10

she's still a little too yellow for my liking, so i'm gonna add a hue/saturation layer, and under the yellows i'm gonna adjust the saturation to -60

finally, i want her to be a it brighter, so i'm gonna add another curves layer, but instead of using the drop, i'm going to manually adjust it. the two points along the line are where i selected it and then i dragged until it looked how i wanted. i start with the upper dot, which made it brighter and moved the line into an arch, and then selected at the lower end of the line and dragged in back closer to centre to add some darkness and contrast

voila

and that's how i do my colouring. it's generally all trial and error, using a layer to fix one thing and then needing another layer to fix something the previous layer did.

play around, have fun, see what works for you and what doesn't. it will take a while for you to develop your own method and style, and even then you'll come across scenes that make you question if you have any sills at all. you do, directors just hate us

THE BASICS

AN INTRODUCTION

first off, the gifset in question is based on this gifset by @/eddiediaaz and i got permission from them to explain the process. i won’t be sharing the template because it’s a near replica of theirs (that isn’t shared to the public) and i don’t feel comfortable doing so, but you can recreate it by yourself just like i did!

also, ESL, so please pardon any mistakes.

THE FONT

Circular ST (Medium & Black). download it here & here.

CLIPPING MASKS

clipping masks are the way i put images and gifs inside of shapes. i used that method in the first and second gif of the Spotify gifset as you can see here. what does a clipping mask do? basically, it links two or more layers together in a way it follows the “shape” of your base layer. ie, everything that is shown follows the “shape” of your main layer and nothing more. your base layer can be anything: a shape, an image, a gif, a text, an adjustment layer, really everything. let’s see an example:

CLIPPING MASKS & SHAPES

the original image (Gun 'n' Roses logo) is intact, as in, it’s not cut like a circle, something that cannot be undone. instead, everything outside the limits of the blue circle is just hidden. if i delete the base layer (the circle layer), the original image will appear as it originally is, as an rectangle. talking about layers, let’s see my layers panel (some things are in Portuguese, but i think you can understand):

notice the little arrow pointing downwards to the “circle” layer. that is the clipping mask symbol. the base layer always needs to be below what is being clipped. if the base layer is deleted, the chain is broken and every layer clipped will now act independently and have its original shape. you can have as many clipped layers as you want. you can also have multiple chains going on in a .psd, each one with its own base layer. to clip a layer, you just need to press ctrl+alt+G or cmd+option+G while having the layer you want to clip selected (NOT your base layer). or, you can go to LAYER > CREATE CLIPPING MASK.

CLIPPING MASKS & TEXT

let’s see the same example, but with text instead:

A TIP

because adjustment layers are clippable, you can completely gif by using clipping masks. this is very useful when you have more than one gif inside a canvas and don’t want an adjustment layer to affect everything besides a certain layer/element.

let’s take my first gif of the Spotify gifset as an example.

the circle is the base layer. the “Carol smiling” layer is my gif converted to a smart filter. above that “Carol smiling” layer, there is a black and white gradient map and two color fills of white so i can achieve the coloring you see. all those layers are clipping onto the circle layer, making my now b&w gif have the shape of a small circle as well. those layers are in a folder in the .psd of my first gif, so i don’t have multiple files sitting on my PC to assemble just one gif. i could have giffed that small gif separately and pasted it onto my canvas as well, but i like to do this way so i can adjust everything i want in real time instead of redoing a gif over and over every time i want to change something.

HOW TO MAKE EACH GIF

all gifs are 540x540px.

THE FIRST GIF

the first gif has 6 elements. the elements are: a big gif serving as a background (a close-up of Carol), a smaller gif inside a circle (a b&w gif of Carol smiling) as a profile picture and four static images for the featured artists. i giffed as i normally do (loaded screencaps, resized the gif, sharpened the gif, etc) for my background gif. to achieve the coloring, i’ve added a gradient map (layer > new adjustment layer > gradient map) purple to pink. to the profile picture, i made a 160x160px circle in the top left corner. the color of it doesn’t matter. the next step is a matter of taste: i giffed the smaller gif in the same .psd thanks to clipping masks that i explained earlier, but you can do it in a separate canvas too. for the featured artists, i made four circles with 98x98px each. for the images, i had to check Spotify for their selected PFPs. after that, i googled “[band/artist] spotify” to find the images. the PFP of bands and artists in the Spotify app are displayed in black and white, so you might have to make them b&w if you happen to find them only in color. to make the artists PFPs pop a bit more, i transformed them into smart filters and added a bit of sharpening to them (intensity 10 x radius 10). you can adjust the colors and the brightness if you want, too. the sizes of the texts in the gif are: 58px (username), 20px (top artists of the month), 15px (name of the artists), 12px (only visible to you + show all + profile) and 11px (following and follower numbers).

SECOND GIF

for the chart, i created a black rectangle (490x308px) that i set its blending mode to lighten (thus making it transparent) and i added an internal white stroke. i added the text and the little squares next to the top 6 numbers. the font sizes are: 17px (top tracks this month), 11px (only visible to you), 14px (song title, show all, top 6 numbers), 13px (artist/band, album title, length of the song). i added the album covers — that i made b&w — by clipping images onto 32x32px squares. for the coloring, i added a gradient map (dark purple > light purple).

THIRD GIF

there are three types of playlists in this gif: a Spotify original playlist, a playlist made by a user and a Mix. you don’t have to follow this formula if you don’t want to, but in the case you do, here’s how i did it: browse Spotify for an original playlist of theirs. chances are, if you google the playlist’s name, you can find its cover on Google Images. at least, i found the “All Out 80s” cover that i used in my gifset. you can also create your own. for the user playlist, just pick four songs and find their (album) covers, also on Google. create a square canvas on Photoshop and make four squares, each in one quadrant of the canvas. paste your images onto your canvas and clip the images to each square. then, add a gradient map (black + whatever color you want) to all those images and title your playlist (font size: ). save that collage as a PNG and load to your gif canvas or merge all the layers+transform into a smart filter and drag the smart filter layer onto your gif canvas. now, the trickiest one. while you can invent your own Mix, i wanted to use a real one, but i had no idea on how to find them. thanks to reddit, i discovered that, if you search “made for you” on Spotify, you will find their Mixes! some of them are very whacky and specific! i just picked the Mix that made the most sense for Carol from that (gigantic) list. before doing the next step, i would advise you to google the name of the Mix you picked to see if you are able to find the cover of it with good quality. i wasn’t able to find mine (Karaoke  Mix), so i just screenshotted my Spotify app, pasted that screenshot into Photoshop and cut the Mix cover and pasted that onto my canvas. the quality wasn’t great, so i transformed the cover into a smart filter, added a bit of gaussian blur and then sharpened it (intensity 10 x radius 10). the color wasn’t what i wanted either, so i used Hue/Saturation to change the hue. because the original image for the Mix was smaller than i wanted and i stretched it to make it bigger, the quality of the text and the Spotify logo was botched. i painted over the Mix cover and created a text with the font i linked earlier to replace its now pixelated title. i also painted over the little Spotify logo, found a logo in the internet and pasted over the Mix cover about the same size of the original logo. to achieve the “3D effect” of the gif, i made my b&w gif, the base. then, i duplicated all layers and added a gradient map (black > pink) and merged all the layers of that duplicate. i made a second replica of my gif, now with a different gradient map (black > blue). i set both replicas to the ligthen blending mode. you will notice that the replicas will "disappear" and only the original b&w gif will remain. if you move the replicas a bit, that colored border will appear. this doesn't work much in very bright gifs without a lot of dark areas, btw.

FOURTH GIF

this gif used an altered (by me) version of this template. (i changed the fonts to match the rest of the gifset, too.) for the color text effect, you will have to gif with the timeline bar. take your gif’s length and do the math to find how many frames are ⅓ of it. take your lyrics’ layer and cut it into three equal parts or close to it by using the scissors icon in the timeline panel. in each third, change the color of just one line, line by line. when you play your gif, the colors of the lyrics will change like in Karaoke. you can do the same thing with frames iirc, though. i explained the timeline method because that’s the one i used in this gifset and use in general gif making. for the coloring, i added a gradient map. to make the colors pop a bit more, i add two gradient maps: the first one is in black and white, the other is in color. that adds depth to the blacks and darker colors of the gif.

FIFTH GIF

like in the Top Playlists gif, i wanted for my Daylist to be real as well. to achieve that, i listened to my Carol Danvers companion playlist (that you can listen here) for a long time until my Daylist refreshed itself. (Daylists refresh in certain times of the day — don't worry, Spotify will tell you when.) then, i just copied what it told me — the title and the genres i listened to generate such a Daylist, plus the genres i should check it out. you can invent your own Daylist if you want, but because it is generated by AI, i find very difficult to mimic its crazy titles, but you can try! you can also search in the web for other people’s Daylists if you want, but usually people don’t tell you what they listened to to get those playlists and nor what was recommended for them to listen to and i, at least, find that information important for the gifset. be aware that Daylists aren't available for every country yet (like in mine), but i found a way to work around that. the browser Opera GX offers a free "VPN" — not exactly a VPN, but it works close enough — so you can set your location to the US and listen to in-browser Spotify. i recommend not log into Tumblr while using Opera's VPN as there is a myth (that could easily be true!) that Tumblr terminates people's accounts that use a VPN. font sizes: 43px (daylist title), 13px (text), 12px ("daylist" & "made for"). for the flare effect, i searched for flare overlays on YouTube and downloaded one of those videos with 4K Video Downloader, a free software. i loaded the overlay into Photoshop and added a gradient map (purple > pink) over it, thus changing its color. i pasted the overlay onto my b&w gif and set its blending mode to screen. voila!

so first thing’s first, we need to get our gif loaded into photopea for us to start with. here’s a screenshot of my gif after i loaded in all the frames and cropped it to the size i wanted (540x400):

from here, we can start coloring! for those of you who haven’t read my coloring tutorial from a couple years ago, my method is more or less very similar to how it was back then. i still do the layer > adjustment layer > brightening/contrast step (though for this gif, i changed the opacity of the layer to 30%) and the layer > adjustment layer > levels, which i have set to these numbers in the pop up:

and doing all of that leaves us with our gif looking like this:

(i know the difference is very minimal but this tutorial is an entire process, give it a minute lol)

but now we get to the fun part: getting rid of that damn green filter.

in my original coloring tutorial, i used a channel mixer layer because i was following a method similar to this tutorial. while that tutorial is great for yellow-tinted scenes (i still use that method to this day), over the years, i realized that it wasn’t as great for green-tinted gifs. this is how i started to play around with another adjustment layer known as color balance.

color balance does exactly what it sounds like it does: it balances the colors of your gif. since we’re trying to balance out all the green that’s happening in this gif, it makes sense to use this adjustment layer. go to layer > adjustment layer > color balance (visual below):

and you’ll get a pop up similar to the channel mixer adjustment layer, but just a bit different. this part of the tutorial requires for you to play around with this adjustment layer—the settings that you are going to use for any gif you make are gonna be different no matter what you’re giffing, so play around with the different settings to see how they mess with the colors of your gif until you get something that neutralizes the green for the gif you’re working with. for my gif here, these are the settings i used for the shadows, midtones, and highlights:

and in doing so, now my gif looks like this (with a before/after):

we’re only three adjustment layers in and it’s already MUCH better than what we had. color balance tends to do most of the work for us in getting the green filter out, so now we can do the rest of our coloring process (whatever that looks like for you) to finish the gif. here is the fully colored + sharpened gif:

and that’s it! a simple tutorial, but it’s immensely useful when giffing with weird green-toned scenes.

a couple things before i stop this tutorial: in some cases, sometimes you’ll need to combine a color balance layer with a channel mixer layer, but (at least in my gif experience) that’s few and far between. color balance is more or less the only layer i really need to use when trying to get rid of green tones, but sometimes scenes need a little extra touches with the channel mixer layer to help neutralize the gif a bit more so it’s easier to color later on in your coloring process. but, again, those are few and far between.

📺 Working with a video file in Photoshop

① Import your video file.

Select File > Import > Video Frames to Layers...

A pop-up window now prompts you to select a video file. Choose your video.

ⓘ If you used Avisynth, this should be your resized video clip. This file is located in the Avisynth "temp" folder and is named video.avi.

② Select the intended range of your gif.

To prevent loading in an excessive amount of frames, I suggest adjusting the range on your video clip.

To do so, drag the two sliders underneath the video bar in the Import Video To Layers pop-up window—but don't worry about being overly precise. You'll be able to edit with frame granularity soon.

Click OK.

③ Double-check your workspace.

After clicking OK, your video will load into Photoshop as a series of frames.

Your workspace should look something like this:

If you don't have the frame timeline at the bottom of your workspace, select Window > Workspace > Motion.

④ Save your file as a PSD.

To prevent losing your work thus far, select File > Save! I recommend saving your work as a .psd file.

ⓘ Note that .psd files are fairly large—mine are usually >100 MB in size. You may want to consider deleting your .psd file after finalizing and exporting your gif.

🎬 Working with frames

First, delete any frames that you don't want included in your final gif. To delete a frame, follow these steps:

Select the frame.

Drag the frame into the trashcan icon below the frame timeline.

If you'd like to delete multiple frames at once, use Shift + Click to select contiguous frames or Ctrl + Click to select non-adjacent frames.

Now, let's set the frame delay! The frame delay is the amount of time between each frame of your video. The larger the number, the slower your gif appears (and vice versa).

① Select all of the frames.

To select all of the frames in the frame timeline, do the following:

Click the hamburger icon right above the frame timeline.

Click Select all frames.

This highlights all of the frames on the frame timeline.

② Set the frame delay.

To set the frame delay on all of the frames on the frame timeline, do the following:

Right-click the current frame delay setting. (By default, the frame delay in my workspace is 0.03.)

Click Other... This launches the Set Frame Delay pop-up window.

In the Set Frame Delay pop-up window, enter your preferred frame delay in the Set Delay field. I recommend a value between 0.03 and 0.06 seconds.

Click OK.

I prefer setting the frame delay to 0.05 seconds, which is a little slower, but this value is a matter of personal taste.

Try experimenting with frame delay to see what speed you like best!

🎨 Coloring basics

There's no real rules when it comes to coloring your gifs. Everyone has a different style because everyone has a different idea of what looks aesthetic!

Generally, you should consider the following when doing your coloring:

How do I preserve (or restore) the subjects' skintone?

How do I ensure that there's enough contrast between the subjects and the background?

If working with a gifset: How do I make coloring consistent between gifs of the same scene?

Everything beyond that is just personal style. 😁

Adjustment layers are used to color PSDs. This type of layer applies visual adjustments to the entire frame timeline without permanently changing the frames themselves. You should be able to find adjustment layers (click Adjustments) on the right-hand side of your workspace.

I usually use these adjustment layers for the following purposes:

Curves and Levels for fixing light and contrast.

Hue/Saturation for increasing and reducing the saturation of specific colors. This is particularly helpful for correcting skintones (Red and Yellow).

Selective Color for adjusting the appearance of specific colors. Like Hue/Saturation, this helps a lot for correcting skintones. I also use Selective Color to adjust the black point.

When you add an adjustment layer, make sure it's placed above your frame layers like so:

For more details on Photoshop layers, see Layer basics (Adobe).

Here's how my workspace looked after I added all of my adjustment layers:

However, remember that not every screen displays color the same way. My computer monitor tends to make images appear brighter than my phone does; my laptop screen increases the saturation of reds.

You are responsible for making an effort to preserve the skintone of your gifs' subjects. But due to the difference in screen displays (as well as the relatively low quality of most base video clips), there's not a 100% perfect approach. I think most people are understanding so long as it's clear that there's been a good faith effort.

Resources

Here are some resources that I've found really useful:

Anti-Whitewashing Tutorial for Pale and Pastel Gifs by fadenet (Note: While the tutorial is specific to pastel gifs, the advice on preserving skintone is always relevant. 👍)

A couple of general gif-making tips for anyone trying out the craft! by mercymaker

If you'd like some ideas for coloring PSDs, try looking through presets like those on wasirauhlpsds or odairannies for inspiration!

As with anything, practice makes perfect! 🤓

🖼️ Exporting a .gif file

Once you're happy with your coloring, it's time to convert all of these frames into a .gif file.

① Navigate to Save For Web.

Select File > Export > Save For Web (Legacy).

This launches the Save For Web pop-up window.

② Set your Save For Web settings.

In the Save For Web pop-up window, select the Optimized tab at the top of the preview box.

From left-to-right and top-to-bottom in the Preset box, I recommend using the following settings:

GIF.

Selective.

Colors: 256 (the maximum).

Diffusion.

Dither: 100%.

Select Transparency.

Matte: #ffffff (white).

No Transparency Dither.

Deselect Interlaced.

Web Snap: 0%.

Lossy: 0.

Select Convert to sRGB.

Preview: Monitor Color.

Metadata: Up to you!

You should also make a note of how large your .gif file is (displayed in the bottom left corner of the preview box). This gif is fairly big at 7.6 MB. The maximum file size that Tumblr accepts is 10 MB (as of May 2025), but I recommend trying to keep a .gif file between 3 MB and 6 MB in size.

Once you're ready, click Save... This launches a pop-up window that will prompt you to save your .gif file to your machine.

Congratulations, you've just made a gif! 🥳

Fonts used in first gif:

Pea Wolfe Tracks — link here

King & Queen — link here

Fonts used in second gif:

Kiera — link here

Post — link here

Ellianarelle's Path — link here

Heina's hurry — link here

I used a light leaks/film texture, ripped paper textures, folded paper textures, and transparent pngs (arrows + post-it notes + smiley face).

We'll start with this gif.

Make your gif! The gif here is 540x600px. I color and sharpen it to my liking. Go to image > canvas size > change height from 600 to 770px. I left the anchor in the middle, though it doesn't really matter.

I drag and drop my folded paper texture and change the layer order so it's under my gif. Then I change the blending mode on my gif to Screen so the texture shows through the gif, but I keep the texture at 100% Opacity and Fill.

Now I move my gif around and add my ripped paper textures. I wanted to give it a sort of poster-like feel to it, so I made more room on the bottom for my main text and ended up with something like this. Blending mode is set to Lighten for the ripped paper textures.

I then use layer masks to hide what I don't want shown and add my light leaks/film texture. Blending mode on light leaks/film texture set to Pin Light, Opacity: 50%, Fill: 70%.

I use Levels and Brightness/Contrast adjustment layers to darken the gif up a bit more, then I add a patterned paper texture. Blending mode for patterned paper texture set to Lighten, Opacity: 100%, Fill: 75%. Result:

Now on to the text!

I'm going to be honest here, a lot of this was clicking around until I settled on something I liked. There's three layers to create this text effect. The font used here is King & Queen.

For the first text layer, the font color is set to black (#000000), font size: 87 pt, leading: 80 pt, tracking: 25.

Layer styles used here are stroke and drop shadow.

Text Layer 1

Stroke settings:

Size: 1px

Position: Outside

Blend Mode: Hard Light

Opacity: 40%

Overprint: unchecked

Fill Type: Color

Color: #5911ed

Drop Shadow settings:

Blend Mode: Difference

Color: #2d5ba8

Opacity: 85%

Angle: 70°

Use Global Light: checked

Distance: 7px

Spread: 0%

Size: 6px

Contour: Cone - Inverted

Anti-aliased: unchecked

Noise: 0%

Layer Knocks Out Drop Shadow: checked

Blending mode for text layer set to Overlay, Opacity: 100%, Fill: 85%.

Warp text settings:

Style: Wave

Horizontal: checked

Bend: +60%

Horizontal Distortion: +10%

Vertical Distortion: 0%

With all those settings applied, the first text layer looks like this:

Duplicate the layer, clear all layer styles, and change the color for the second text layer to white (#ffffff). All other text settings (including warp settings) should stay the same. The only layer style then applied to this text layer is stroke.

Text Layer 2

Stroke settings:

Size: 1px

Position: Outside

Blend Mode: Difference

Opacity: 100%

Overprint: unchecked

Fill Type: Color

Color: #d48f16

Blending mode for the second text layer is set to Difference, Opacity: 90%, Fill: 100%. Nudge the second text layer a bit so the first text layer is a little more visible or move to your liking.

With both those layers active, it looks like this:

Duplicate the second text layer, clear layer styles, and change the color of this third text layer to a dark grey (#1a1919). Again, all other text (and warp) settings should stay the same.

Layer styles applied to this layer are stroke and gradient overlay.

Text Layer 3

Stroke settings:

Size: 1px

Position: Outside

Blend Mode: Difference

Opacity: 100%

Overprint: unchecked

Fill Type: Color

Color: #d48f16

Gradient Overlay settings:

Blend Mode: Difference

Dither: unchecked

Opacity: 100%

Gradient: #cd3f00 > #ffdb5d

Reverse: unchecked

Style: Reflected

Align with Layer: checked

Angle: 90°

Scale: 100%

Blending mode for the third text layer set to Exclusion, Opacity: 100%, Fill: 100%. I also moved the third text layer around, down and to the right a few pixels to give it that 3-D Word Art effect.

With all three text layers active:

Next are the arrows.

Take your transparent pngs and place them to your liking. Blending mode for these is set to Difference, Opacity: 100%, Fill: 100%.

Command + click on an arrow thumbnail to select all the pixels in that layer. This is why the image must be transparent!

With that selection made and on a new blank layer, right click the selection and click on stroke. Settings for that are width: 2px, color: white, location: center. Move that a couple of pixels over.

Do this for all arrows for a total of 6 layers for arrows. I group them together to keep my workspace clean, then I duplicate my arrows group with no further changes made to the second group to get what you see in the final gif.

Next is the smaller text. It's three separate text layers for each word, so I can move each of them around to my liking.

Font used is Pea Wolfe Tracks, font color: white (#ffffff), font size: 24 pt, leading: 6 pt, tracking: 25. Bold and italic options checked. I set the blending mode to Difference, Opacity: 100%, Fill: 100%.

And that's it! That concludes the tutorial for this gif!

Now on to this gif.

We'll start with the background gif. There are three separate gifs. You could make them one gif, but I wanted the option to order them differently if I needed to.

All gifs in the background are the size of the canvas: 540x770px. Color and sharpen to your liking, but keep them all black and white. To get the blurry effect go to filter > blur > guassian blur. Set radius to 7.0 pixels. Add this to all three gifs.

Then I add two folded paper textures. Blending mode for one set to Lighten, Opacity: 60%, Fill: 100%. The other set to Screen, Opacity: 70%, Fill: 90%.

I found this tutorial a while back for a halftone effect. They include links to the halftone pattern used here as well as textures and gradient maps not used here.

I'm only using the halftone pattern here.

Pattern fill settings:

Angle: 66°

Scale: 8%

Link with Layer: checked

I also added a gradient overlay layer style to the halftone pattern which gives the gifs the color you see above.

Gradient Overlay settings:

Blend Mode: Overlay

Dither: unchecked

Opacity: 100%

Gradient: #0059ac > #a33600 > #e6b801

Reverse: unchecked

Style: Linear

Align with Layer: checked

Angle: -100°

Scale: 100%

Now on to the square shapes with rounded corners. In the interest of keeping this tutorial short(er), I found this tutorial on youtube that explains how to make squares with rounded corners.

I set my stroke size to 6px, stroke color to white (#ffffff), and fill to no color. I don't use the stroke layer style to make the borders of the shape like in the video! I'm only linking the video to show how to curve corners with square shapes.

Note: Be sure you know how big or small you want these to be and how they're going to fit on your canvas in order to make all the shapes and edit them. It can be tedious to change the settings.

Duplicate and resize to your liking.

In this instance, I wanted to make three squares total, so I had to duplicate twice and resize until I had something I liked.

Settings for the shapes used here are:

Innermost shape: W: 200px, H: 280px, corners: 50px

Middle shape: W: 220px, H: 300px, corners: 60px

Outer shape: W: 240px, H: 320px, corners: 70px

Once I have the size I want for all three shapes, I group them together to make a set and duplicate that group twice, then adjust each set on the canvas for my layout.

What the sets look like all together:

Colors used: orange #e47100, blue #0062d1, yellow #ecac00

To add color to the shapes, either change the color of the shape itself or use layer styles. I used layer styles.

Note: I didn't add the colors until the end after I knew what gifs went where and what color scheme I wanted, but I don't want to add more images than I need to here.

To keep this short, I found this tutorial on youtube that explains how to wrap text around a shape. However, I wanted the text to align on the outside where the white line is and not the green line (left image):

So I created another shape just inside the innermost square and used that as a path for my text (right image). Adjust the text to your liking until you have your text where you want it. Refer to the video tutorial if you need help moving the text along the path!

You don't need the shape path once you have your text where you want it, so use the layer visibility tool to hide it. You can hide your other shapes too so you can work with your text.

Do not delete your shape path!

I duplicate it once I start working with my "jock" text since all the sets are the same size. The "loser" text has to be worked a little differently, but we'll get to that later.

For the princess, jock, and loser text, there are two text layers to create the overall effect. For both layers, font used is Kiera, font color set to white (#ffffff), font size: 60 pt, blending mode set to Normal.

I added a gradient overlay layer style to the first text layer which I'll call the base layer. Opacity for this layer is 100%, Fill: 100%.

Base Layer

Gradient Overlay settings:

Blend Mode: Normal

Dither: unchecked

Opacity: 100%

Gradient: #f0b002 > #e7f0fd

Reverse: checked

Style: Diamond

Align with Layer: checked

Angle: 90°

Scale: 100%

The second text layer is your stroke and drop shadow layer. For this layer, opacity is set to 100%, Fill: 0%.

Stroke and Drop Shadow Layer

Stroke settings:

Size: 2px

Position: Outside

Blend Mode: Linear Light

Opacity: 100%

Overprint: unchecked

Fill Type: Color

Color: #0064cb

Drop Shadow settings:

Blend Mode: Difference

Color: #fb7c00

Opacity: 100%

Angle: 30°

Use Global Light: checked

Distance: 5px

Spread: 0%

Size: 0px

Contour: Linear

Anti-aliased: unchecked

Noise: 0%

Layer Knocks Out Drop Shadow: checked

End result looks like this:

When I make my shapes visible again (minus the one I used as a path), I get this:

The shapes are clearly in the way of the text, whether they're above my shapes layer or under it. I use layer masks to hide what I want, so the text is legible. It looks cleaner this way and I wanted the text to be a part of the shape itself. I do that for each rounded square.

Now on to my smaller gifs. I like to crop, resize, sharpen, and color separately because my laptop and Photoshop would kill me if I tried to do it all on one canvas. I use the size of the middle shape for my gifs (220x300px), so I can have a little wiggle room when adjusting. I then use a layer mask to hide the parts of the gif that are outside of the shape.

A quick way to do this is to command + click on the thumbnail of the innermost square. With that selection made, I got to my gif layer and add a layer mask. Sometimes you need to invert it. Use command + i with the layer mask selected (not the gif) to invert the layer mask.

I repeat this process with my Steve and Robin gifs. I have to go back and forth with all the layer masks to hide parts of the gif/shapes I don't want for each set. It's kind of a long process, but not all that difficult. I label and group my layers together as I work to keep things clean and it helps me keep track of what I edited and what needs to be edited when it comes to things like this.

The picture below shows where I hid the bottom right corner of Nancy as well as the shapes that make up her set using layer masks. I also did this with the Steve and Robin sets, hiding the bottom left corner of Steve.

Similar text settings used for jock. The gradient overlay layer style for this base layer is different than that of princess because of the positioning of the text. Again, same as princess, two text layers are used here. Blending mode, opacity, and fill for both are the same as the princess text layers as mentioned before.

Base Layer

Gradient Overlay settings:

Blend Mode: Normal

Dither: unchecked

Opacity: 100%

Gradient: #007aec > move bottom middle dot to 80% > #e7f0fd

Reverse: checked

Style: Diamond

Align with Layer: checked

Angle: -140°

Scale: 100%

Stroke and Drop Shadow Layer

Stroke settings:

Size: 2px

Position: Outside

Blend Mode: Linear Light

Opacity: 100%

Overprint: unchecked

Fill Type: Color

Color: #a05700

Drop Shadow settings:

Blend Mode: Difference

Color: #ffba00

Opacity: 100%

Angle: 30°

Use Global Light: checked

Distance: 5px

Spread: 0%

Size: 0px

Contour: Linear

Anti-aliased: unchecked

Noise: 0%

Layer Knocks Out Drop Shadow: checked

Image 1: We start with Robin.

Image 2: To make the loser text, I had to create a new path.

Image 3: I make it so the text is on the inside of the path instead of the outside. (Hint: Refer to video tutorial if you don't know how to do that.) I then adjusted the tracking between the letters in the word "loser" so they didn't look so squished together.

Image 4: Then I use layer masks to hide the parts of the shape I don't want shown.

You can then hide the path or delete it. You only need it if you want to adjust the placement of the text. I keep it (hidden) just in case.

Text settings for loser are just like those for princess. Blending mode, opacity, and fill are also the same.

Base Layer

Gradient Overlay settings:

Blend Mode: Normal

Dither: unchecked

Opacity: 100%

Gradient: #eb6400 > #e7f0fd

Reverse: checked

Style: Diamond

Align with Layer: checked

Angle: 90°

Scale: 100%

Stroke and Drop Shadow Layer

Stroke settings:

Size: 2px

Position: Outside

Blend Mode: Linear Light

Opacity: 100%

Overprint: unchecked

Fill Type: Color

Color: #e1a900

Drop Shadow settings:

Blend Mode: Difference

Color: #0068de

Opacity: 100%

Angle: 30°

Use Global Light: checked

Distance: 5px

Spread: 0%

Size: 0px

Contour: Linear

Anti-aliased: unchecked

Noise: 0%

Layer Knocks Out Drop Shadow: checked

Next are the post-it notes! This is probably the easiest part of making this gif. You just have to repeat this process for however many post-it notes you're making.

Image 1: To start, place your transparent post-it note where you want it. You can also rotate it if you'd like.

Image 2: Then create a text layer and write what you want. Font used here is Post. I wanted this text underlined to give emphasis, so I click on the underline option. I also adjusted the leading because I wanted more space between the word and the line. Rotate the text so it looks like it's written on the post-it note. Note: It looks better if you choose a font that looks handwritten.

Image 3: I wanted another line to give emphasis to the "Dingus!!" text and make it seem more handwritten. I use the line tool to create another line.

Image 4: Then I adjust that line to my liking.

Fonts used for notes: Post, Ellianarelle's Path, and Heina's hurry

Repeat this process for all post-it notes!

That finishes the tutorial! (And I hit the 30 image limit lol.) I hope this helps. If you have any further questions, feel free to send an ask or IM and I'll try to answer to the best of my ability.

for starters here is the mega folder with all of my fonts and pngs! below is my semi-updated giffing process along with some of my actions<3

my process is pretty much the same as my old tutorial but now i've changed how i export gifs! my basic process is outlined in the gif below and and i've added 3 of my actions i use almost every time i gif in this google drive! (explanations below) :]

so after i know what clip i want, i put it into vapoursynth (download tutorial) and once that's saved i screencap it. what i do for screencapping is open the mov in mplayer osx extended and hold down shift+command+s but i know there's way easier ways to do it that i haven't figured out yet lol (tutorial i just found here)

once the screencaps are all on my desktop i delete any extras on either end of the clip i want and put them in a folder just so it's easier to load them in to photoshop. to do that, on the home page of photoshop go to file -> scripts -> load files into stack, then from that menu browse -> select all the screencaps you want to use for the gif and click open then ok

after they're all loaded into photoshop this is where i use my first action which just shortcuts all the way to the sharpening being done. once that's done i go to image -> mode -> 16 bits/contrast. this can help if the background is super pixely or anything like that. then i mess around with sharpening if i feel like it's too much. usually i'll change the opacity of the second sharpen layer to 50 and/or change the settings of the first sharpen layer like 200 to 150 or 0.3 to 0.2, whatever i feel like looks best. something i've also learned over the years is that sometimes you let noise do the heavy lifting and don't worry about making it look too sharp. if the gif is still a little bit unsharpened (?), the noise will make it look fine

then i do coloring which is the fun part! like i said, my process is more or less the same as my old tutorial so i'll just skip over that part and if you want more details feel free to check that one out. once i'm done with that i combine it all to a smart object, add noise (usually 1-1.5 these days), and then use my second action!