✚ ⠀┄┄ resources needed: alight motion pro (can be achieved without pro by watching ads!)
𐂯 𓈒 tutorial requested by @japloga ... continue under the cut!
┈ ˳ᴗ ᴗ) ｡ OO1, setting up your project :
once you've downloaded alight motion, you must create your project! there are multiple settings available, but here is what is needed for this specific tutorial: a transparent background, a 1:1 canvas ratio (specifically for non-pro users due to the watermark), and a 12 fps frame rate.
┈ ˳ᴗ ᴗ) ｡ OO2, setting up your text/font :
now that your project is open, click the plus button in the bottom right corner of your screen. it should open a tab of options. directly above the plus sign should be a button labeled "text". click that!
input your desired text and play around with the settings! there are many ways to customize your text in alight motion, not just through these settings, but that will be discussed later after the effect tutorial, just to keep things less overwhelming. for non-pro users, try your best to keep your text as far as possible from the watermark so cropping is easier. once you've done that, extend your text duration to 2 seconds (if it isn't already)!
alight motion has a wide range of preinstalled fonts; my favorites being averia sans libre, henny penny, mystery quest, im fell english, fontdiner swanky, kosugi maru, gamja flower, and other fonts you may be familiar with if you use metadata fonts for rentry. if your desired font is not available, you must download it to your device and unzip the file before importing it:
┈ ˳ᴗ ᴗ) ｡ OO3, applying the effect :
this is the tricky part of the tutorial! confirm the changes to your text and click on the button in the bottom right corner that should say "effects". press add effect. at the top of the effects page, look for the search button and search "text transform", then select standard settings! we only need to change 3 or 4 things, so watch the video below carefully.
if you find that the letters in your text are moving too far apart or too closely, it can be adjusted by changing the offset settings. in the video, i used -5 for x and 5 for y in the offset as an example, but it all depends on the selected size of your text. note that your x and y should be additive inverses of each other, so if your x is -3, then your y would be 3. if your x is -7, your y should be 7, and so on! do not be concerned with the speed of your effect, it will be changed later.
for those who want to customize your text further with gradients, strokes, outlines, or shadows, go back to the tab with the effects button and begin experimenting with these options! this is not just for text as well, images can be edited to have a border and drop shadow too. (p.s., i recommend using border instead of stroke for outlining text!)
┈ ˳ᴗ ᴗ) ｡ OO4, exporting the project :
feel satisfied with your project? it's time to export! unselect your layer of text and click on the green export button at the top right of your screen. choose the GIF option, but don't click export just yet! click the arrow on the right to manage the settings of the gif. this allows you to change the final frame rate and resolution size to minimize the overall size of the gif. changing the resolution is completely optional, especially if you plan to import this text onto a larger sized graphic, but its very important you change the frame rate to 'low"! this will slow the speed of the effect and minimize your project to approximately 6 fps, ensuring no duplicate frames.
heres an example of what i was able to come up with after experimenting & exporting! if you feel that this speed is too fast still, you can change the speed of the gif on ezgif.com. for those who did this without pro, you can also crop the alight motion watermark off on ezgif as well!
i hope this was helpful? if you have any questions, feel free to comment and i'll try my best to help!!! also very sorry this tutorial took me like... a week? idk. tumblr was NOT agreeing with me when i made the first draft of this.... good luck and have fun editing <3!!
i've been wanting to share a gif-making tutorial for a long time, and since i recently hit 5000 followers i'm finally posting it!! i've collected a lot of resources and learned a lot of tricks over the years, and i'm very happy to finally share them with you all. i've included an overview of my full gifmaking process, as well as downloadable PS actions, PSDs, sharpening, and more, so hopefully this is helpful to both beginners and experienced gifmakers alike!! ✨
here is a folder of all the resources from this tutorial. all of them will also be linked individually below, along with any other websites and software that i recommend!
Video Downloaders/Resources
The first step of gif-making is to get your hands on a video file for the content you want to gif. The reality is that the most reliable way to access high quality versions of movies & tv shows is through t*rrenting, and in order to t*rrent, you need a paid VPN. I will recommend free alternatives for everything where at all possible, but a couple of investments will save you a lot of effort and give you access to waaaaay more stuff.
VPN (paid) - I use Surfshark, any paid VPN should work, find whichever has the best deal
T*rrent client - i use qBitt*rrent
Magnet link sites: Eztv, ThePirateBay, uIndex, 1337x, LimeT*rrents, T*rrentLeech
Video Guidelines: I usually use files that are 1080p quality. I used to use 2160p quality files almost exclusively, but it takes way longer, and with a good quality 1080p file, the result is basically just as good. In order to find a good file, check the file size before you download it. For a 1 hour tv show episode, you want a file around 3 or 4 GB. Anything under 1 GB won't give you a good result.
More options for downloading other kinds of videos:
Video DownloadHelper (paid) - download directly from video platforms! you get a couple downloads for free, but the paid version is worth it for me. Pros: works instantly so you dont have to wait for the t*rrent file to be posted, works on lots of sites, pay once/no subscription. Cons: no embedded subtitles.
Dropout-dl (free) - Command line downloader for Dropout.tv. Pros: free, works instantly, embedded subtitles, and always creates a separate searchable subtitle file. Cons: very technical setup. For this one, you will also need Docker.
VideoProc Converter (free version) - good for downloading YouTube, and extracting embedded subtitles from video files (5 minute limit on the subtitle thing)
Screencaps
The next step is to convert your video to screencap images.
mpv
sample mpv.conf file
I use mpv to make my screencaps because it's the most efficient, in my opinion. In order to set it up, you have to edit the settings in the "mpv.conf" file. Mine is located here: C:\Users\[username]\AppData\Roaming\mpv. I've linked a sample of the settings I use above. I recommend changing the screenshot-directory to a different folder for your screencaps. I organize my screencaps in numbered folders to keep track of them.
Image Software
I use Photoshop CS6 version, from this link:
birdyresources photoshop
more (free) photoshop links
The other software you can use is Photopea. There's lots of tutorials for that on photopeablr!
Importing Screencaps to Photoshop
In Photoshop, go to File -> Scripts -> Load Multiple DICOM Files. Then, paste the file path of one of your screencap folders into the pop-up.
Creating Gif Smart Object
First off: if your screencaps have a black border anywhere, crop it out, making sure that "Delete Cropped Pixels" is selected.
Next, there are a bunch of steps to be able to work with your screencaps in Photoshop. I have all of those steps saved as Actions.
download all my photoshop actions
how to use my actions
For a full description of how my actions work, how to use them, and a description of every action, I created a separate post just for that! It was a little too long to include here lol. It's not necessary to read the whole thing; feel free to just start using the first action and figure it out with trial and error if you want!
Coloring Layers
It's kind of hard to describe the coloring process, so I've provided several PSDs of gif colorings that you are free to use!
coloring PSD folder
Here's a list of the adjustment layers I usually use, in the order I add them: Exposure, Levels, Curves, Brightness, Vibrance, (then i make a new folder for just the coloring layers) Channel Mixer, Color Balance, Hue/Saturation x many, Selective Color x many
If you take a look at the Louis file in the PSD folder, than you can see all the layers I used to go achieve this coloring:
Add captions
Next, add captions and anything else you want on your gif. This is the font I use for captions:
Arial Rounded MT Bold
Here are the text settings I use. In order to add Layer Styles, right-click on your text layer and click 'Blending Options'.
Export and fix gif speed
Now that the gif is ready with all of the right layers, export it by going to File -> Save for Web. (This takes a while to load as photoshop is putting everything together.) These are the export settings I use:
When the window pops-up, make sure to change the looping option to forever, and then you can save your gif. I also highlighted the area where it shows the final file size of the gif. This needs to be under 10MB, or else tumblr won't allow you to upload it.
This result is good, but when you first export it, the speed of the frames is wrong.
In order to fix the speed: open the .gif file in Photoshop, select all the frames, and change the speed to 0.05 seconds. Repeat the Save for Web step, and overwrite your previous .gif file when you save it. (You can also double check that the gif loops 'Forever' at the very bottom.)
And here's our final gif!
Repeat these steps as needed for the rest of the gifs in the scene. Remember to check out my action pack to save a lot of time on repeated steps!
Here's some additional tips and tricks for giffing to make your life easier:
Tips for skin tone
I often spend a lot of time ensuring that the skin tones of the people in my gifs look natural. It's very important to represent people's skin tones accurately, and it's not acceptable to whitewash or colorwash people of color's skin tones.
Here are some tutorials I've found very helpful:
fix orange-washed characters
channel mixer tutorial
A lot of shows these days have really pale and muted palettes, so Vibrance really helps to add saturation and dimension. If the subject looks too pale/whitewashed, increase the saturation and deepness of the Yellow and Red colors using Selective Color layers.
this is the before/after impact of two layers, Vibrance and Red Selective Color:
If the subject looks too yellow or orange, neutralize these tones using Selective Color and Hue/Saturation layers:
before/after:
Tips for recoloring
I recently posted a small tutorial that goes over my recoloring process, such as in the example below of changing the background from neutral yellow to blue. It also goes over some more complicated gif effects.
coloring + moving film strip tutorial
Other tips and tutorials
For Curves layers, I don't use the eyedropper method. I just click on the line to adjust it myself, making the darks darker and lights lighter. This gives the gif a lot more dimension and contrast.
Selective Color tutorial - change the color of shadows
Text effects tutorial
Usergif tutorial directory - tutorials for basically anything you want to learn!
Every gif is different - sometimes, even two shots of the same person in the same scene can have drastically different lighting and color-grading from each other. I recommend playing around with the values in the adjustment layers a lot to fit your gifs as needed. You can also reduce the opacity of layers to lessen their effect, or duplicate layers to increase their effect. (I often reuse coloring layers and make these changes, so it's a real method!)
THANK YOU SO MUCH for reading my gif tutorial, I hope it was helpful to you!! My goal is to spread the love and resources for gifmaking far and wide, so everyone can make gifs as beautifully and easily as possible. I hope you have a nice day and don't hesitate to send me any questions you might have about any of my tutorials or resources! 🥰
My GIF Making process: Screen capturing using MPV player, Organizing files, 3 Sharpening settings, Basic Coloring PSD + Actions set
This is a very long post so heads up.
I’ll try to be as thorough and true as much as possible to the way I make my gifs (I already use Photoshop Actions which I’ve long since set up but now for this tutorial I’m reviewing them to show you the exact steps I’ve learned to create my gifs 😃) and present them to you in a semi-coherent way. Also, please bear with me since English is my second language.
First things first. Below are the things and tools we need to do this:
Downloaded 4K or 1080p quality videos (let’s all assume we know where to get these—especially for high definition movies and tv series—so this post doesn’t get removed, okay? 😛)
Adobe Photoshop CC or the CS versions can work as well, but full disclosure I haven’t created gifs using the CS versions since 2020. I’m currently using Adobe Photoshop 2024.
mpv player. Use mpv player to get those frames/screenshots or any other video player that has a screen grabber feature. I’ve used adapter for the longest time but I’ve switched to mpv because the press to screenshot feature while the video is playing has been a game changer not to mention ultimate time saver for me. For adapter you need to play it in another video player (like VLC player), to get the start and end timestamps of the scene you want to gif which takes me ages before I can even open Photoshop.
Anyway! Please stop reading this post for a moment and head over to this amazing tutorial by kylos. She perfectly tells you how to install and use mpv player, both for Mac and Windows users.
One thing I have to share though, I had a tough time when I updated my MacOS to Sonoma since MPV is suddenly either duplicating frames or when I delete the duplicates the player seems to be skipping frames :/ I searched and found a solution here, though it didn’t work for me lol. My workaround for this in the meantime is decreasing the speed down to 0.70 then start screenshotting—it’s not the same pre Sonoma update but it works so I’ll have to accept it rather than have jumpy looking gifs.
Now, after this part of kylos’ tutorial:
you can continue reading the following sections of my gif tutorial below.
I want to share this little tip (sorry, this will only cater to Mac users) that I hope will be helpful for organizing the screenshots that MPV saved to the folder you have selected. Because believe me you don’t want to go through 1k+ of screenshots to select just 42-50 frames for your gif.
The Control + Command + N shortcut
This shortcut allows you to create a new folder from files you have pre-selected. As you can see below I have already created a couple of folders, and inside each folder I have selected screenshots that I want to include in one single gif. It's up to you how you want to divide yours, assuming you intend to create and post a Tumblr gifset rather than just one gif.
Another tip is making use of tags. Most of, if not all the time, I make supercorp gifs so I tag blue for Kara and red (or green) for Lena—just being ridiculously on brand and all that.
Before we finally open Photoshop, there's one more thing I want to say—I know, please bear with me for the third? fourth? time 😅
It's helpful to organize everything into their respective folders so you know the total number of items/frames you have. This way, you can add or delete excess or unnecessary shots before uploading them in Photoshop.
For example below there are 80 screenshots of Kara inside this folder and for a 1:1 (540 x 540 px) Tumblr gif, Photoshop can just work around with 42-50 max number of frames with color adjustments applied before it exceeds the 10 MB file size limit of Tumblr.
Sometimes I skip this step because it can be exhausting (haha) and include everything so I can decide visually which frames to keep later on. You'll understand what I mean later on. But it's important to keep the Tumblr 10 MB file size limit in mind. Fewer frames, or just the right amount of frames, is better.
So, with the screenshot organization out of the way, let's finally head over to Photoshop.
Giffing in Photoshop, yay!
Let’s begin by navigating to File > Scripts > Load Files into Stack…
The Load Layers window will appear. Click the Browse button next.
Find your chosen screenshots folder, press Command + A to select all files from that folder then click Open. Then click OK.
After importing and stacking your files, Photoshop should display the following view:
By the way, I'll be providing the clip I've used in this tutorial so if want to use them to follow along be my guest :)
If you haven't already opened your Timeline panel, navigate to Windows > Timeline.
Now, let's focus on the Timeline panel for the next couple of steps.
Click Create Video Timeline, then you’ll have this:
Now click the menu icon on the top right corner then go to Convert Frames > Make Frames from Clips
Still working on the Timeline panel, click the bottom left icon this time—the icon with the three tiny boxes—to Convert to Frame Animation
Select Make Frames From Layers from the top right corner menu button.
So now you have this:
Go and click the top right menu icon again to Select All Frames
Then click the small dropdown icon to set another value for Frame Delay. Select Other…
The best for me and for most is 0.05 but you can always play around and see what you think works for you.
Click the top right menu icon again to Reverse Frames.
I think Photoshop has long since fixed this issue but usually the first animation frame is empty so I just delete it but now going through all these steps there seems to be none of that but anyways, the delete icon is the last one among the line of feature buttons at the bottom part of the Timeline panel.
Yay, now we can have our first proper GIF preview of a thirsty Lena 😜
Press spacebar to watch your gif play for the very first time! After an hour and half of selecting and cutting off screenshots! 😛 Play it some more. No really, I’m serious. I do this so even as early (lol) as this part in the gif making process, I can see which frames I can/should delete to be within the 10 MB file size limit. You can also do it at the end of course 🙂
Now, let’s go to the next important steps of this tutorial post which I’ve numbered below.
Crop and resize to meet Tumblr's required dimensions. The width value should be either 540px, 268px, or 177px.
Convert the gif to a Smart Object for sharpening.
Apply lighting and basic color adjustments before the heavy coloring. I will be sharing the base adjustments layers I use for my gifs 😃.
1. Crop and Resize
Click on the Crop tool (shortcut: the C key)
I like my GIFs big so I always set this to 1:1 ratio if the scene allows it. Press the Enter key after selecting the area of the frame that you want to keep.
Side note: If you find that after cropping, you want to adjust the image to the left or another direction, simply unselect the Delete Cropped Pixels option. This way, you will still have the whole frame area available to crop again as needed and as you prefer.
Now we need to resize our gif and the shortcut for that is Command + Opt + I. Type in 540 as the width measurement, then the height will automatically change to follow the ratio you’ve set while cropping.
540 x 540 px for 1:1
540 x 405 px for 4:3
540 x 304 px for 16:9
For the Resample value I prefer Bilinear—but you can always select the other options to see what you like best.
Click OK. Then Command + 0 and Command + - to properly view the those 540 pixels.
Now we get to the exciting part :) the sharpen settings!
2. Sharpen
First we need to have all these layers “compressed” intro a single smart object from which we can apply filters to.
Select this little button on the the bottom left corner of the Timeline panel.
Select > All Layers
Then go to Filter > Convert for Smart Filters
Just click OK when a pop-up shows up.
Now you should have this view on the Layers panel:
Now I have 3 sharpen settings to share but I’ll have download links to the Action packs at the end of this long ass tutorial so if you want to skip ahead, feel free to do so.
Sharpen v1
Go to Filter > Sharpen > Smart Sharpen…
Below are my settings. I don’t adjust anything under Shadows/Highlights.
Amount: 500
Radius: 0.4
Click OK then do another Smart Sharpen but this time with the below adjustments.
Amount: 12
Radius: 10.0
As you can see Lena’s beautiful eyes are “popping out” now with these filters applied. Click OK.
Now we need to Convert to Frame Animation. Follow the steps below.
Click on the menu icon at the top right corner of the Timeline panel, then click Convert Frames > Flatten Frames into Clips
Then Convert Frames > Convert to Frame Animation
One more click to Make Frames From Layers
Delete the first frame then Select All then Set Frame Delay to 0.05
and there you have it! Play your GIF and make sure it’s just around 42-50 frames. This is the time to select and delete.
To preview and save your GIF go to File > Export > Save for Web (Legacy)…
Below are my Export settings. Make sure to have the file size around 9.2 MB to 9.4 MB max and not exactly 10 MB.
This time I got away with 55 frames but this is because I haven’t applied lighting and color adjustments yet and not to mention the smart sharpen settings aren't to heavy so let’s take that into consideration.
Sharpen v1 preview:
Sharpen v2
Go back to this part of the tutorial and apply the v2 settings.
Smart Sharpen 1:
Amount: 500
Radius: 0.3
Smart Sharpen 2:
Amount: 20
Radius: 0.5
We’re adding a new type of Filter which is Reduce Noise (Filter > Noise > Reduce Noise...) with the below settings.
Then one last Smart Sharpen:
Amount: 500
Radius: 0.3
Your Layers panel should look like this:
Then do the Convert to Frames Animation section again and see below preview.
Sharpen v2 preview:
Sharpen v3:
Smart Sharpen 1:
Amount: 500
Radius: 0.4
Smart Sharpen 2:
Amount: 12
Radius: 10.0
Reduce Noise:
Strength: 5
Preserve Details: 50%
Reduce Color Noise: 0%
Sharpen Details: 50%
Sharpen v3 preview:
And here they are next to each other with coloring applied:
v1
v2
v3
Congratulations, you've made it to the end of the post 😂
As promised, here is the download link to all the files I used in this tutorial which include:
supercorp 2.05 Crossfire clip
3 PSD files with sharpen settings and basic coloring PSD
Actions set
As always, if you're feeling generous here's my Ko-fi link :) Thank you guys and I hope this tutorial will help you and make you love gif making.
P.S. In the next post I'll be sharing more references I found helpful especially with coloring. I just have to search and gather them all.
here is the colouring tutorial i promised to go with my beginner's gifmaking tutorial.
to save image space, i've written up a simple explanation of how each adjustment layer works here, so i'm just going to over my colouring for these 4 different gifs.
as always, very image heavy underneath
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
hii angles, i recently got an ask on my [ screencap account ] asking for a tutorial for my moving grain pictures that i use for almost everything. this is my first tutorial, so i hope it's clear! i use PHOTOPEA to edit, but i'm guessing for photoshop users it may be the same. this may also be a long way around it, but it works efficient enough for me :)
BEGINNER FRIENDLY! ★☆☆☆☆
firstly, you'll want to load in any picture you want to create a moving grain for, if this is an edit, make sure the text is ABOVE the picture, most grain actions and sharpening tools tend to make text look awful, in my opinion, but that's up to you! ( layer, not player. *facepalm* )
EDIT: make sure you filter these pictures with NO grain.
second, duplicate the picture edit as many times as you want, i tend to go for four, it seems like the perfect amount for the edits i make, but you may like more or less.
third, select all layers EXCLUDING THE TEXT LAYER and go to layer > animation > make frames. this will turn your picture into ‘moving’ frame pictures like a gif.
fourth, i personally use my own action for photopea, but in the case of just wanting a moving grain, you'll want to select all those for layers EXCLUDING the text layer. this is where you'll add any sharpening if you'd like it. to get a grain though go to filter > noise > add noise and find a level of noise you're comfortable with.
fifth and final, you're free to save your work! remember to save it as a gif, or you will not get the moving grain. <3
DISCLAIMER: everyone colors their gifs differently, but this is how i choose to color mine. i don't care if it's incorrect or i'm doing something wrong, but this is the way i like to do it. and no, this tutorial does not include the use of the channel mixer because i still don't know how to work it lmao!
let's get started!
you will need:
any version of photoshop will do
basic photoshop knowledge
STEP ONE:
after you've done all the necessary steps to create your gif (i have a handy dandy gif making tutorial here), the first thing i like to do is add a curves layer. it should look like this when you open it.
then, what you'll want do do is click on the third dropper thing (idk what it's called) on the left hand side of the panel. i've highlighted in red.
doing this will find a white point in your gif and sort of neutralize the colors, i guess. idk really how to describe it? so then what you'll want to do is to look for any white point in your gif. for example, this is what my gif looks like and i will be clicking on the white part of the guy's blazer. when you hover over the gif, the dropper thing will come up and then all you have to do is click on that white point. you'll also have to adjust this accordingly to your desired scene.
for this scene in particular, there really isn't much of a difference, but i promise it's there!
STEP TWO:
next, what i like to do is add an exposure layer. it should look like this when you open it.
and these will be my settings. you'll have to adjust this based on how bright or dark your scene is.
now there's a slightly more of a difference to what the gif looks like.
STEP THREE:
next, i like to add a levels layer. it should look like this when you open it.
and these will be my settings. again, you'll have to adjust this based on how bright or dark your scene is.
we're staring to get somewhere now!
STEP FOUR:
next, i'm going to add a selective color layer with these two settings. again, adjust as necessary. this part is completely optional, however, i still wanted to throw it in here for reference.
STEP FIVE:
finally, i'm going to add a brightness/contrast layer with these settings. adjust as necessary.
and then, you're finished! you can obviously keep going and add more to it, but is what i'd like to call a base psd. which is something you can use to build off of, and then go into the more in-depth coloring.
if you have any questions or concerns at all, don't hesitate to reach out! like/reblog if this tutorial helped you at all. <3
so i've seen some coloring tips going around that talk about levels on dark scenes and i've giffed a lot of dark scenes (tom hanks i am looking directly At You) and i consistently use levels, so i wanted to offer some tips. (assuming you already know the basics of turning clips from your video files into gifs in photoshop)
we'll use this gif (from my most going through it guy of all time set) as an example:
here's the gif with no coloring on it whatsoever:
it's very dark, (@ tom hanks why do you hate me personally)
so first thing's first, we make it so we can actually see his face. i started with a boatload of exposure:
3.5 to even get this image to a point where i could see what i was working with, but this is just the foundation. i want to get this lighter but i don't want to blow it out so i'll add some more light with a brightness/contrast layer:
as you can see i upped the brightness to 35, and i've got the whole scene lighter without losing picture quality. however, because i can see the way i'm going to want to mess with/correct the colors i want to bring some more light into the picture.
this time i use curves:
sometimes i'll do an auto curves layer to lighten things up, but auto curves was doing strange and unwelcome things with the colors and contrast so i did a lighter curves layer instead. I did this a grand total of three times. you can see the effect of the next two lighter curves layers below:
now that i've got enough light in the gif that i feel comfortable messing with depth and colors i'm going to add a selective color layer, which you can see below:
so i'll do all of my selective color in one layer. this is mostly just a personal preference. you can do one color per layer if you want to track the differences. below are my selective color settings for this gif:
+1 in black and +2 in neutral serve to put some depth back into the image.
but wait, we're not done in curves! this is a gray point curves layer to tone down all that blue in this scene. (middle eye dropper is gray point) i set the magnification to 2000% in order to find a gray pixel to use as my base gray. so now we bring some of that ruddiness back into his face but you still have the blue light in the train
so for me this still lacks depth and i'm not really happy with the colors yet so we're going to go into levels now to bring some more depth into the gif. i started with a simple increase contrast levels that softens some of the pink that the gray point layer brought out and gave us some more depth.
next i added a black point levels layer, which you do pretty much the same as a the gray point curves layer, except this time you'll want to look for a pixel to be your baseline black (top eye dropper is black point)
with this layer i've finally gotten his clothing and the background about where i want it but his face looks kind of green. with this gif i was able to resolve that with a saturation/vibrance layer:
this adjustment is more subtle, but it reduces that green in his face and makes the background and his clothes look richer. here's the final product
as you can see, just because a scene is dark, it doesn't mean you should avoid levels layers. if you can bring enough light into your scene without losing quality, you can use levels to really enrich your colors while still ensuring that your subject is visible in the gif.
- an editing program with a timeline (I’m using Adobe Photoshop) & familiarity with keyframes
- the Figtree font family [Google / Adobe Fonts]
- my PSD template [download]
For less experienced editors, I made a simple PNG overlay [download]. This tutorial will cover the PSD.
🙏 If you use either template, please link back to this post in your caption. 🙏 You can also tag #userreputayswift, I’d love to see what you make! :)
Animating Your Choices
Open the template and make sure Window > Timeline is checked. Press play ▶︎ on the timeline and you'll notice some of the graphics are already animated. Compare this with the final gif and you'll see we have some adjustments to make:
For this gif, we're going to hide the "Relationship Up/Down Arrows" and "Timed Choice" folders (click the corresponding eyeballs 👁️ over in the "Layers" window).
Now decide which choice your character is going to SELECT and click the arrow > next to that folder in the timeline:
This will open the folder. Now press the arrow > next to the image layer within this folder and you'll see all the keyframes I've added. Keyframes tell the program you want your graphic to do/look like THIS at THIS particular part of the timeline:
For the choice you're SELECTING, make sure the Playhead is positioned at or before the 100% opacity keyframe. Drag your cursor over both "OPACITY" keyframes and press "Delete."
Your gif should now look like this:
Getting closer, but we want to get rid of the glow around the UNSELECTED choices.
Open one of the choices you AREN'T SELECTING with the arrow >, then press the arrow > next to the image layer within this folder. This time we're going to highlight and delete the "STYLE" keyframes:
Repeat this with the remaining UNSELECTED choice and you're done!:
If you need to adjust WHEN these animations play, use the arrows > to open all the necessary choice folders and layers, hold CTRL and drag your mouse over each keyframe, then use your cursor to move them to the left or right in the timeline:
Animating Other Elements
Let's say you want to make the Gems glow when your character makes a Premium Choice. To achieve this effect, open (>) and select the "Style" keyframes on your Premium Choice. Then right click and press Copy. Center your Playhead with the first keyframe.
Then, scroll down and open (>) the "Gems" folder and the "Gem Count" layer inside. Click the Stopwatch ⏱️ to create a new keyframe at the Playhead, then right click the keyframe and Paste.
The glow should sync up with your Premium Choice:
You can use the same Copy and Paste method to replace the Relationship Down/Up Arrows with your own icons:
Go to File > Place Embedded > and open your desired icon. Then repeat the same steps as above to copy the keyframes from the "Relationship Up Arrow" or "Relationship Down Arrow" layer onto your icon layer:
If the sizing is off, delete ONLY THE "TRANSFORM" keyframes and center your Playhead with the first "Opacity" and "Style" keyframes.
Click the Stopwatch ⏱️ by "Transform" and shrink and position your icon in the top left of your canvas. Then center your Playhead with the last "Opacity" keyframe, click the Stopwatch ⏱️, and use your arrow keys to position your icon at lowest point you want it to reach.
To make the icon rise, simply swap the positions of your first and last "Transform" keyframes in the timeline:
Failing A Timed Choice
For this effect, we want the "Timed Choice" folder to be visible 👁️. Then, if you want your character to successfully make a choice before the timer runs out, just follow the steps in the Animating Your Choices section.
If you want them to FAIL, we don't need any of the keyframes currently on the choice buttons. Change the text on your speech bubble and choices before proceeding.
Now, drag the Playhead to the start of the timeline. Over in the Layers window, select your bottom choice, then hold CTRL or SHIFT to select all the visible bubbles and choices. Right click and select "Merge Layers":
These elements should no longer be animated:
In the timeline, open (>) the "Timed Choice" folder, click the arrow > next to "Timed Choice Meter," and copy the "Style" keyframes onto your new merged layer (as we did in the Animating Other Elements section).
You can stop here, or you can add a couple more keyframes to make the merged layer fade away. Center the Playhead on the central "Style" keyframe and press the Stopwatch ⏱️ next to "Opacity". Then, move the Playhead over to the last "Style" keyframe and set the "Opacity" to 0% in the "Layers" window.
And you're done!
That should be enough to get you started! Are there easier ways to do this? Probably. Feel free to send me an ask if you have any questions 🫡
