hi! yes, of course. i’m going to show everything using this shane gif, since i had to delete the pitt episodes from my laptop because i ran out of storage :(
quick warning before we start: i honestly don’t know what i’m doing most of the time. i mostly just follow other tutorials and hope for the best. this is also my first ever tutorial, so that adds another layer of “i don’t know what i’m doing”
sooo
first, i resize the gif. for these, i used 540x480. i sharpen it like i normally do, and these are my gif settings. this is how it looks with just sharpening
i don’t do a lot when it comes to coloring. i usually just increase the brightness/contrast, then add a curves layer and use the auto option. for this one i also add a selective color layer with these settings:
levels layer:
another selective color layer:
and this is how the gif looks after coloring:
for the background coloring, i always follow this tutorial because it explains things way better than i ever could.
after following @buddiesblr ’s tutorial, my gif looks like this:
next, i convert the gif to a video timeline and put all the gif layers into a folder to make things easier to manage
then i add a new transparent layer and choose the gradient tool. i make the gradient go from the background color to transparent
i'm adding the gradient only on the sides, bottom, and top of the gif, avoiding the middle. if i accidentally color too much (like his face or another important part), i just use the eraser tool to clean it up.
this is how the gradient layer looks like without the gif under it:
and with the gif:
once i’m happy with the gradient, i add the borders. i select the rectangle tool and use these exact settings, with the color set to white. i create the rectangle and make it 20 pixels smaller than the gif width, and much taller than the gif height (i usually set it to 600 pixels)
i make sure the rectangle is centered, then drag it down so i have space at the top to write without cutting off the letters that i will add later
i change the rectangle layer to difference
and now it looks like this
next, i right-click on the rectangle layer, go to blending options, and add a color overlay. i wanted a color that would pop against the blue in the gif, so i chose this pink
then i add shadow
before adding the text, i right-click on the rectangle layer and rasterize it
then i add a text layer. the font i used for this gif is amalfi coast, with these settings
i'm adding the exact same effects as the border: set the layer to difference, then add color overlay and drop shadow with the same settings. now it looks like this
i center the text, then select the rectangle layer and use the eraser tool with these settings
to erase only the part of the rectangle that goes under the text, so nothing overlaps
and that’s it! this is how the final gif looks:
if you have any questions at all, feel free to ask. you can send another ask or just message me. i know this isn’t the best tutorial, and i’m really bad at explaining what i’m doing, but i hope it still helps a little💙
Hello hello! I love talking about gifmaking, so thank you for giving me the chance to ramble.
Instead of a detailed step-by-step walkthrough, I will link tutorials and resources written by the wonderful Tumblr creators on here along the way. Everyone has their method and preferences, and there’s no right or wrong way to make gifs. I’m going to share techniques and resources I picked up along the way that work best for me—they may or may not be suited to your preferences, but I hope you’ll find some helpful things here.
(Warning: screenshot/image heavy)
USEFUL TUTORIALS AND RESOURCES
Here are some tutorials and resources that I found very useful when I got back into gifmaking:
Gifmaking tutorial using video timeline by @hope-mikaelson is identical to my own process
Gifmaking and coloring tutorial by @kitty-forman, whose process is very similar to my own
Giffing 101 by @cillianmurphy, an incredibly detailed tutorial that covers everything you need, including a step-by-step guide to using HandBrake
Gifmaking and coloring tutorial with 4K HDR footage by @sith-maul, another incredibly detailed tutorial with many useful tips
Gifmaking tutorial by @jeonwonwoo, incredibly comprehensive and covers so many aspects of gifmaking from basics, sharpening, captioning, and text effects
Gifmaking/PS tips and tricks by @payidaresque
Action pack by @anyataylorjoy, the Save action is especially a true life-saver
@usergif and @clubgif are amazing source blogs with many tutorials on gifmaking, color grading, and gif effects, can’t be thankful enough for the members for their work curating and creating for these blog!
TOOLS
Adobe Photoshop CS6 or higher, any version that supports video timeline. @completeresources has many links to download Photoshop, have a look!
Photopea is a free alternative to Photoshop, but it has a slightly different UI, check out these tutorials for gifmaking with Photopea
HandBrake or any other video encoder, especially if you’re working with .MKV formats
4Kvideodownloader for downloading from YouTube, Vimeo, Instagram, etc.
OBS Studio or any other similar screen capturing software. To prevent duplicate frames in gifs that prevents your gifs from looking smooth, try to match the recording frame rate (FPS) with the source.
IMPORTING FOOTAGE AND WORKING IN VIDEO TIMELINE
I work exclusively in video timeline instead of importing video frames to layers or loading files into stack. For videos that don’t require converting/encoding using HandBrake, especially ones that are already in .MP4 format, I tend to open the video directly on Photoshop, and trim the videos around directly.
As mentioned above, this gifmaking tutorial using video timeline is exactly how I make gifs. I find it more efficient, especially if you’re making multiple gifs from the same video/the same scene with little to no change in lighting conditions You can simply slide around sections of gifs you want to save, and they will all be the same length.
Another thing also covered in the tutorial linked is the ability to change video speed in video timeline mode. Right click on the video and set the speed before proceeding with cropping/resizing. This is also very useful when you’re making blended gifs where you need the footage to have the same length.
Slowing footage down.
As mentioned in this post, changing the FPS before slowing down the gif results in smoother gifs. Doubling the frame rate before slowing down your gifs usually yields the best result.
Speeding footage up.
I love using this to speed up slow motion B-rolls to make the speed slightly more natural. It will result in nice, smooth gifs:
(B-roll footage, normal broadcast speed)
(200% speed)
Subject won’t stay in frame?
Another feature of the video timeline mode. Keyframes are your best friend. This tutorial by @kangyeosaang covers everything you need to know about panning gifs. I use this technique regularly, it’s a life-saver.
COLORING
Here are some coloring tutorials I found very useful:
Coloring tutorial by @brawn-gp beloved, their coloring style is second to none
Mega coloring tutorial by @yenvengerberg, for stylized /vibrant coloring
Understanding Channel Mixer by @zoyanazyalensky
Coloring rainbow gifs by @steveroger, which delves deep into Channel Mixer
I tend to go for neutral-saturated coloring in general, especially for minimalist gifsets with no effects (blending/isolated coloring/overlays etc.), but the possibility is endless for stylized coloring. Here’s what my adjustment layers look like for the example gifs above.
The base footage for this Charles gifset is incredibly desaturated. I started with a Curves layer to bring contrast to the gif, as well as do some color-correcting to bring the base footage to a more neutral tone. To bump contrast, I also like to add a black and white Gradient Map layer with a Soft Light blending mode at 10%-30% opacity:
The Vibrance layer is then used to lift the saturation of the base footage, with the Selective Color, Hue/Saturation, and Channel Mixer layers to help remove the green/yellow tint to his skintone.
An underrated adjustment layer/preset in my opinion is the Color Lookup. You can layer in pre-loaded .LUT color grading presets to help speed up your process. For this gif, it’s simply a base preset Soft Warming Look to achieve a warm, pink-tinted tone.
In hindsight I feel like this gifset is too saturated, his skintone is skewing very red/pink, I could’ve bumped down the lightness of the reds with a Selective Color layer or a Hue/Saturation layer. Try to err on the side of neutral for skintones. Experiment with layer orders—there’s no right or wrong! Remember that each layer build up on the one before it.
The base footage of the Jalen gif is already quite nicely color-graded, but it’s still muddy and underexposed. As with the Charles gif, I started with a Curves layer to bring the gif to a better baseline contrast. Then I focus on brightening the gif with the Brightness/Contrast and Exposure layers.
The Hue/Saturation and Selective Color layers are to color-correct Jalen’s skin tone—it’s something I spend most of my time coloring gifs and focus a lot on, especially when color grading BIPOC skintones. Putting a Vibrance layer, upping the Vibrance and Saturation, and calling it a day would make his skintone skew very, very yellow/orange.
Focus on the reds and yellow for skintone, play around with the Saturation and Lightness sliders, use the Hue slider with caution.
It can be tricky to achieve the right skin tone when working with sports footage vs the higher quality, higher dynamic range footage of films or TV shows, but I try to keep it as close to the subject’s natural skintone as possible.
Here are some of tutorials with tips and tricks on coloring BIPOC:
How to fix orange-washed characters by @zoyanazyalensky
How to prevent pink-washing and yellow-washing by @jeonwonwoo
Coloring tutorial by @captain-hen
Changing lighting conditions?
Fret not—this is why I love working in video timeline. I’ll take this gifset as an example: it’s a deceptively difficult one to color. The footage is 720p and the sunlight shifts throughout the video, so matching across gifs was tricky.
My solution was to split the clips in sections with consistent lighting, and apply adjustment layers to the individual sections before applying general color grading layers on top of everything.
We can make use of the Fade Transition effect for sections where the lighting changes within the gif section we want to color.
(without vs with Fade on the Brightness/Contrast layer)
The difference is subtle in this example, but the brightness in the right gif is noticeably more consistent throughout. You can also add the Fade Transition effect to the beginning for a fade in, of course.
SHARPENING AND OPTIMIZING GIF QUALITY
This tutorial by @anya-chalotra covers everything you need to know about optimizing gifs for Tumblr.
Sharpening.
Sharpening is essential to making crisp gif images. Here’s another ask I answered re: my own sharpening settings and maximizing gif quality.
(base footage, unsharpened)
(color graded, unsharpened)
(color graded, sharpened)
The final gif is sharpened with Smart Sharpen, 500% at 0.3px and 10% at 10px (my standard sharpening settings).
Here are some tutorials and resources on sharpening:
Sharpening process by @anya-chalotra
Sharpening tutorial with added gaussian blur by @haleths
Sharpening action by @daenerys-stormborn
Size your gifs for Tumblr correctly.
This is essential: full width gifs are 540px wide.Two side-by-side gifs should be 268px wide. Here’s a handy post on gif size guide for Tumblr.
Incorrectly sizing your gifs will take away the quality of your gifs: undersizing your gifs will especially make them grainy, blurry, and /or pixelated, and won’t display correctly on many people’s desktop theme. Oversizing usually isn't as dramatic as undersizing, but it will make the gifset glitch when displayed, and the file size will be unnecessarily bloated.
Work with HD footage if possible.
Media fandoms (films/TV shows) are luckier than us in the sports trenches—we have to work with what we have. Broadcast footage is usually subpar: lacks contrast, pixelated, very desaturated, the list goes on. But it’s possible to still make high quality gifs from subpar footage. Here are a couple of tutorials to mask low source footage quality:
low quality video ➜ “HD” gifs tutorial by @nickoffermen
Sharpening low quality footage by @everglow-ing
(This gifset I made is from a 480p footage with horrendous lighting conditions and colors, and the end result is decent I’d say)
Save for Web (File > Export > Save for Web (Legacy) or Ctrl + Alt + Shift + S) settings.
I default to Adaptive + Diffusion but also use Adaptive + Pattern from time to time. Any combination of Adaptive or Selective + Diffusion or Pattern will give you a good result. In my experience some gifs will need the Selective color table for the colors to display correctly.
Here are my default settings:
SAVING AND EXPORTING FOR TUMBLR
Converting to frames and adjusting the gif speed.
If possible, avoid exporting your gif and reopening it to adjust the frame speed. I used to do this sometimes when I’m lazy, I have to admit, but this is where this Action as mentioned at the beginning comes in very handy. It converts all visible layer into smart object, then converts it back to frame animation.
Step-by-step:
1. Select all layers
2. Right click > Convert to Smart Object
3. Go to the Timeline menu (≡) > Convert Frames > Flatten Frames into Clips
4. Go to the Timeline menu again (≡) > Convert Frames > Convert to Frame Animation
5. In the same menu (≡), select Make Frames from Layers
6. Delete the first frame (it’s a duplicate) then set your frame speed
Now you can adjust the frame speed before exporting it (Save for Web).
Pay attention to the source framerate.
The frame delay of 0.05 s is usually the default to make gifs for TV shows and films, and it is preferred by most gifmakers. This stems from the fact that most movies and TV shows are 24 or 25 FPS. This may not be the case for all source videos: you might get 30 FPS footage, and sports or gaming footage can be 50 or 60 FPS. Gif speed also depends on the FPS of your original file. Play around with gif speed and see what feels most natural to you.
My rule of thumb is the frame delay Photoshop gives you + 0.01 s. For example, 50 FPS footage will give you 0.02 s frame delay (25 FPS gives you 0.04, 30 FPS gives you 0.03, etc.), so set it to 0.03 s. I usually err on the side of a faster frame delay for smoothness in in-game sports footage, anything else (interviews, press conferences, B-rolls) can get away with being slowed down. Again, experiment and see what you think looks best!
Keep gifs under the Tumblr file size limit (10 MB).
Cut down the number of frames. My gifs are usually around 60-70 frames for 540px full-width gifs, but depending on the coloring, sometimes you can get away with more. 268px gifs can go up to 200+ frames.
Crop your gifs. Remember to keep full-width gifs at 540px wide, but if necessary, you can crop the height. My go-to sizes are 540x540, 540x500, 540x450, and 540x400.
Amp up the contrast of your gifs. Flat colors like black cut down gif size.
The Grain filter or Noise filter, though beautiful for aesthetics or simply necessary sometimes to mask low source footage quality/pixelating, may bloat your gif size.
Play your gifs back before exporting.
Pay attention to duplicate frames or glitches, you might need to get rid of them!
Hope this is helpful! Don’t hesitate to send an Ask or DM if you need any help, I will happily answer all your questions and send over PSDs. (I’m also on Discord—just shoot me a message if you need my tag!) Happy creating :]
Hello anon! Thank you so much!! ❤️
All the little doodles I added to this gifset were downloaded from free png sites like pngtree and pngimg.
Here's the link to the TV png I used : (TV PNG)
Link to the film reel png : (Film Reel) (I combined multiple copies of this to make the reel effect)
the sword, crown and magic wand doodles are all from those png sites too! You can simply search for what you want and download :)
This circle effect was made solely using photoshop shapes/overlays so if you want a tutorial for it let me know!
hi hi hi <33 what fonts did u use on ur barbie gifsets i'm truly in love and i'm SO inspired
Hi, lovely! In descending order:
Multicolore (8pt, 6pt)
Sherlock (120pt, 24pt)
Tw Cen MT (10pt) set to Regular
Those out of the way, I’ll add that I am extremely finicky when it comes to typography, which mostly means that I go through a multitude of different fonts and font combos. I think I had roughly a dozen or so other fonts picked out for the title and annotations alike, so I’ll go ahead and list some of those as well. Great fonts to have even if you don’t end up using them for a Barbie-themed set.
Aaleyah — for “Barbie” title
Avenir (set to 35 Light) — for annotations
Barbie (one of the actual OG Barbie fonts)
Baroneys — for “Barbie” title
Buryland Script — for “Barbie” title
Daylight & Moonlight (set to Light) — for “Barbie” title
DK Sensory Overload — for date
Journey to Thailand — for “Barbie” title
Karla — for annotations
Lobster Two — for “Barbie” title
Montserrat — for date and annotations
Roboto — for annotations
Telegrafico — for annotations
TrashHand — for date
Wired Pop — for “Barbie” title
You can find more examples for a bunch of these fonts here and here.
This quick tutorial will go over how to make gradients, from simple gradients to multicolor ones.
give this tutorial a like/reblog if it helped you out
end result & tutorial under the cut
if questions should arise, feel free to send a message!
Chapters:
how to make a basic gradient
adding colors with brushes
softening & adjustments
What you´ll need:
any version of photoshop (I use CS6, mine is in german because I bought it years ago in germany)
very basic photoshop knowledge
i. how to make a basic gradient
Open a new document in your desired size.
There are several ways to make gradients. I always use the new fill layer option, right next to the new layer or new group buttons on the right side.
Click on it and select the second option.
Adjust the angle however you wish, and then click on the gradient to bring up the next window
Select any colors you want by clicking on the little droppers highlighted above. I used #ff27f2 on the left and #d58dfa on the right. Once you´re done click OK until your new gradient is on your document.
ii. add colors with brushes
add a new layer & select a big brush with no hardness and low opacity.
select any color to paint with, I´ll be using #e50051 & #770dfa & plain white. Start painting on that new layer in slow strokes. You can add as many colors as you want. Mine now looks like this:
Now we merge our layers by selecting them, then righ click and selecting merge
iii. softening & adjustments
Go to filters -> blur > motion blur
Depending on the gradient you´ll have to select different variables, but for this one I used the numbers below:
Sometimes I add Gaussian Blur too to blend it even more, but didn´t do that for this gradient.
Now for the adjustments I only added a brightness and vibrance layer. This is the finished gradient:
I know you've been asked this before I just can't seem to find the answer. How do you export your gifs so that they come out so smooth?? They're beautiful! Mine always come out super grainy.
Hey, thanks! It really depends on the gif itself, but my usual go-to for making sure that the gifs come out as 'clean' as possible is to try and limit the color range I use for the gifs (gif format has a 256 color limit) so the tones blend in a nice gradient.
As for the export settings, I usually go for 'pattern' dithering (just personal preference, I know a lot of gif makers use 'diffusion') and then for color reduction algorithm I just see which one looks the best for each gif (and also depends on the final file size).
For example, in my latest gif set, I used these settings:
For this gif specifically:
The wonderful Ava goes into great detail explaining a lot of what I'm talking about in this post, so make sure to read through it with examples to see what I mean!
