sharing the theme i’ve been using on my main blog, which a couple of anons have asked for (some of them a while ago, sorry!!). finally got around to polishing it up!
single column theme with a left sidebar and optional right sidebar that includes sections for updates, a featured project, and site info. geared towards writeblrs, but of course anyone can use! includes a sidebar image, icon, project image, five custom links, four post sizes, any google font, custom title, and iconsax icons. the audio player is the “light accent” color, which doesn’t show up in the preview for some reason! icons and sidebar image in preview via unsplash. (full list of credits here.)
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 :]
Can you please do a blending/overlay tutorial!?!?!
ohhh i can definitely give you some tips on how i do it!
so, assuming you know how to make gifs and use the timeline/smart object gifs, this is how i usually go about it. I use photoshop cs5, for reference.
i'll use this recent gif from my don’t blame me gifset as an example:
1. Choosing what to blend
It's much easier to blend 2 gifs together when at least one of them has dark areas. Two bright gifs don't usually work as well, but it's still doable with some work. For example these 2 moments are both mostly dark, so it makes things easier:
2. Bringing 2 gifs together
To put 2 gifs on the same canvas, what I usually do is:
In one of the gifs, I select the size I want with the crop tool (540px by 400px in this case). You then drag the resize box how you want it on your gif. This will resize and crop your gif.
Then I go to the other gif and do the same thing. With that resized and cropped layer, I right lick on it, go Duplicate layer... and then choose to send it on my other gif's document. When both gifs are on top of each other you can start moving them around and blending them.
3. Blending options
Photoshop has multiple blending options that will give you many different results. What works best for blending gifs is usually the option Screen. This is what I get when I put these 2 gifs on top of each other, with the top group with the left gif set to Screen. Make sure the Screen layer is always on top.
I like to put the gifs in groups, it makes things easier (and tidier) further down the road, but it will work anyway with the smart object gif layers. For this particular gif, groups were not 100% necessary, but for more complicated gifs with different colorings, it's definitely a must in my book.
4. Layer masks
As you can see, this works, but there are definitely parts I would like if they didn't overlap, especially on the right ride. You can easily remove unwanted parts by painting them out with a Layer mask. In this particular case I want to remove the right side of the left gif, so I selected that group and made a layer mask by clicking on the icon at the bottom of the layers window. You'll get a white window next to your layer name. Select it. You then want to use a very soft brush and paint in black what you want to remove.
These layer masks act as "alphas" to drive the opacity of the layer. What is white will be at 100% opacity, and what is black will be at 0% opacity. You can definitely brush in some gray if you want an in-between look. Here I went full black.
This is the result I get after masking out the unwanted right part. Now I only have that one gif showing on the right side, instead of a blend of the two:
5. Painted layer
So you can see other characters still showing through on the left side of the gif. You can definitely go and paint the parts you want to remove on the right group as well, but if your layer masks overlap, it can create some transparency in your gif and we don't want that. Instead, I create a new empty layer by clicking on the icon, and put it in between the two groups. This layer doesn't need a different blending mode. With a soft brush and the black color, I go paint where I want to mask the right gif, so it doesn't show on the left side.
I played with that layer opacity because I liked to still see some of the right gif's details peeking through. Here's the result:
6. Final touches
At this point I will usually sharpen both gif layers and make the coloring, and then I will adjust the layer masks if I feel like I need to. In this case I thought it was fine as it was so I didn't change anything.
For this one I simply put the coloring on top of both gifs because it worked fine for this example, but you can also have a different coloring for each gif if you want. Just make sure you put the two different colorings in their respective gif groups. Remember that the top folder should always be set to Screen for the blending to work, even with coloring layers/groups inside that "main" gif group.
And that's pretty much it! This one was quite simple, but it's incredible what a screen layer and some layer masks can do :) I hope it helps!
Also, @usergif has an amazing tutorials directory for more resources if you need! I always find great tutorials there.
Hello!! A couple years ago I posted this tutorial for making gifs with a moving overlay effect. In the two and a half years since I made that tutorial, I've learned some new tricks for this gif effect but most importantly I've learned how to explain things better.
For that reason, I've created this new and improved tutorial for my overlay gif effect. The basics are the same but it's simpler, I go into more detail, give better explanations, and have more comprehensive instructions.
The easiest way to do this effect with this method is to use smart objects and work in timeline. For this tutorial, I’m assuming you know the basics of giffing like cropping, resizing, colouring, etc. If you need help with this I’d suggest you look at some other tutorials and guides!!
First, we’re going to start off with three things.
1. A completed gif converted into a smart object that is going to be the base gif. I'm going to call this "gif1". You’ll want this gif to be at least 3 seconds because it needs to last as long as the overlay plus a little bit of extra time in the beginning.
This is the base gif I’ll be using in the example (except I trimmed it so that I could meet the size limit).
2. A second completed gif converted into a smart object that is going to go over the base gif. We’re going to call this "gif2". This gif should be at least 2 seconds but I’ve made it work with shorter. Gif2 needs to be the same dimensions or bigger than gif1.
This is the gif I'll be using in the example (except I trimmed it so that I could meet the size limit).
3. An overlay in video form. These can be found on tumblr and youtube by search for overlay or transition packs. For this example, I'll be using an ink drop overlay I found on youtube.
Step 1: Turning the overlay video into an overlay gif
Most overlays aren’t going to instantly fit the gif effect you’re trying to achieve right away. This is the overlay I got from youtube and as you can see it’s too slow and needs a crop/resize to be usable.
To fix it, I sped the frame rate up, cropped the overlay, and resized the overlay so it fits over my base gif. I also sharpened the overlay (500% amount, 0.3px radius) so that the edges were smooth. This is the new overlay gif and the one I’ll be using for the gif effect.
A tip: I also like to add a brightness/contrast layer to get rid of the grey on the overlay gif. Because we’re working with blending modes to achieve this effect, any parts of the overlay that are grey will be a blended mix of gif1 and gif2. If you think this will look good for your gif effect then don't worry about it!
Another tip: try to get the entire overlay movement to fit into a 2-3 second window. Anything longer than that will likely be cut off when you have to trim your gif to meet the upload size limit and it would suck to only have half of the overlay.
Step 2: Creating the gif effect
Drag a copy of gif2 and a copy of the overlay gif onto the gif1 canvas. I like to use Ctrl+Shift+V so that the layers are pasted in the same position as they were on the previous canvas. MAKE SURE that both overlay layers are in the same position on the canvas. If one of the overlay layers is higher/lower/etc. than the other then the effect won't work properly.
Then, make a second copy of the overlay and invert it (Ctrl+i). These are the layers you should have:
Before you go any further, trim gif2 and both overlay layers so they are all the same length.
Now, we need to rearrange the layers and set blending modes. The top layer should be whichever overlay goes from black to white. This is because when we change the blending modes, the white part of this layer will disappear and look like its being replaced by gif2. In this case, that is the overlay (inverted) layer. Then we want gif2, the other overlay layer, and then gif1.
A tip: this process can be done the other way where the top layer is the overlay that goes from white > black however, you are much more likely to have an error where there is a grey/black line around the overlay effect in your final gif. In order to avoid that, I always use the black > white layer on top.
Next, set the top overlay layer to darken. You should only see the black part from the overlay and gif2 should fill in the white part. Here’s how that looks in my example.
Next, select the top overlay layer and gif2 and convert both layers into one smart object. Your layers tab should look like this now.
Now, set the new layer’s blending mode to lighten and the overlay layer’s blending mode to darken. Once you do this, you should be able to see gif1 as well as the overlay gif.
Step 3: Timeline and exporting
At the moment, gif1 is still significantly longer than the overlay gifs. Since this gif is just over 10 mb (which is pretty small for this effect) I’m going to trim about 1/4 of a second off the end of gif1 and then drag the overlay layers so they all end at the same time.
Now you’re free to export the gif! This is the finished effect for the example gif!
A tip: sometimes, when I convert to from timeline to frames, the gif becomes a little longer and slower. It has to do with different frame rates across the videos and photoshop but I'm not smart enough to understand it. If that happens, just set all the frames with the overlay layers to 0.04 speed instead of 0.05.
And we're finished! I hope that was helpful and made sense. If you have any questions feel free to drop them in my inbox or send me a message!! <3
as requested! this is a super super detailed tutorial for the a-z of gifmaking basics, starting from getting photoshop & downloading hq movies/videos alll the way to tagging & scheduling your gifsets on tumblr for max interaction. if you’ve wanted to get into gifmaking but feel intimidated or you don’t know where to start, this is the tutorial for you!!! making gifs might seem overwhelming at first, but with practice, it’s quite easy to get the basics down. for reference, this post is up to date as of nov. 2020. please rb if this helps!
hi folks! i’ve gotten a few messages on how i make my gifs, on what tutorials i used, etc. so i decided to make my own (since i didn’t use one) in hopes of helping a few people get their footing on how to make gif icons from scratch! this tutorial has been made with the assumption that you have prior knowledge of using photoshop (e.g. like smart filters), but please don’t be afraid to ask me any questions if you need anything explained or you’re a lil confused. however, do bare in mind that i am no photoshop genius, and have never become more advanced than what i required for my needs. anyways, without further ado, the tutorial on how you can make something like the above can be found below the cut. please like or reblog if you found this useful in any way!
~i do not claim any of the scripts, fonts or icons used on this html unless stated. full list of credits in the html. ♡
i am accepting theme commissions. for more information, dm me on here or on @lizzies. making content/resources is my main source of income on the internet, so if you’d like to support me, buy me a coffee?
idk how to explain, but how do you make gradient text but in reverse colors with exclusion effect?
You explained it fine! I’m going off the assumption that you mean something like these:
I actually go for Difference instead of Exclusion. They do very, very similar things, so much so that I’d go so far as to say they’re near-identical, but if you play around with blending modes enough and compare those two in particular, you’ll find that Exclusion produces a lower contrast than Difference. But we’ll be working with white base text here—they’re actually-identical where white is concerned—so you’re welcome to pick whichever.
Once you have your font/s picked out and know where you want to place your text, set it to Difference (or Exclusion) so that it looks something like this:
From there, it’s pretty much verbatim what I talked about in my original gradient text tutorial. We’re still going to double click on our text layer, then click on the Gradient Overlay tab of the Layer Style window that pops up, keeping in mind that we should pick colors that complement the gif and/or the overall set.
The only difference here is that we’ll also be playing around with the blending mode of the Gradient Overlay. The blending modes I tend to stick with are Linear Burn, Color Burn, Multiply, and Hard Light, but I’ve used Vivid Light and Linear Light as well.
This was my final product after setting my gradient to Multiply:
What blending mode you use is up to you, yes, but it ultimately depends on the background behind your text. Because of how both Difference and Exclusion work, some areas of your text can be harder to read, gradient or no. I recommend having your Layer Style window just a little to the side of your gif so that you can see for yourself what the different options (and colors, too!) look like as you scroll through them.
As an example: I didn’t like how light the middle of my text looked here, so I ended up deciding on a darker green for my gradient.
hiii, do you remember which font were you using in your yennefer graphic in this tutorial (/post/646109102224916480/hi-long-time-lover-lover-first-time-asker-of)? Or the one that says "your lovely bottom" on jaskier edit?
A pro of me pretty much saving everything ever as a PSD and then never deleting any of the fancy-schmancy ones is that I have every font I’ve used in the last couple of years on hand. The font in the Yennefer gif is Hello Stockholm—a long-time favorite that I constantly go back to—and the font in the Jaskier gif is Arkipelago.
I was asked to do a tutorial on my old mobile layouts where I had a gif as both my icon and header, so here we are! I also uploaded a PSD here that you can use either as a template or as a guide/reference point in case you get lost somewhere along the way.
You’ll need Photoshop and basic knowledge on how to make gifs using the timeline.
Hi!! First of all I wanted to say that you’re so talented and your gifsets are really amazing!! :) I was also wondering if you could please make a tutorial on how you made the gradient effect in the text of your “Boys will be boys, but girls will be women” Stranger Things gifset, it’s really pretty. Thank you in advance!!
Hi, darling! Thank you so much! I love, love, love gradient text. It’s such a fun way to add a pop of color to black and white gifs (like here and here) and also a fun way to make already colorful gifs even more colorful (like here and here). And it’s really simple, too.
After you’ve added your text, you want to double click on your text layer so that you pull up the Layer Style window. Then you want to click on the Gradient Overlay tab.
It’s really a matter of preference from there. You can choose any colors and any number of them, any gradient style, etc. (For colors, though, I will add that you want to try to pick something complementary. In that Stranger Things set, I chose a yellow-orange-pink gradient because I had a theme going with those particular colors.)
I tend to use either two or three colors in a linear or radial gradient, and scale it anywhere between 100-150%. Again, though, it’s all a matter of preference. Go wild with it, honestly. Play around with colors and the various settings until you find something you think suits your gif (or edit or graphic) best.
Here’s what my gradient looked like:
And here are the fonts I used, if that was something else you were curious about.
As a point of reference, here are some other gradients I’ve used for text:
I hope that helps!
ETA: Here is a tutorial on how to do gradient + difference text, and here is a tutorial on how to get white outlines of the text.
uh hi. it's me again. I'm really sorry to bother you but how are able to make your gifs so clean and clear? ive been a gif creator for years and now recently ive been having a lot of trouble with pixels.
Never a bother! I’m always happy to help when and where I can.
I briefly touched on all of this in my FAQ but I really, truly do live by these steps when I gif, so I feel it bears repeating here as well, and with a little more detail.
Always, always work with HD footage. 4K (2160p) isn’t necessary, but I would say that 1080p definitely is. I think you can get away with giffing 720p if you absolutely need to, but the bigger your gif, the more necessary it becomes to work with footage that’s both high quality and high definition. Screen recording is fine—it’s something I used to do myself, though I’ve since stepped away from it—but you get the very most out of any given footage by clipping videos directly from a download or through screencapping.
Be sure to size your gifs correctly. It’s not as noticeable on mobile/the app, maybe, but on desktop under-sizing or over-sizing will take away from the quality of the gif. Your gifs might look blurry, pixelated, extra grainy, or even a combination of those things. For reference, here are the official sizes for photosets:
Sharpening is key. I’d even go a step farther and call it more important than sizing; sizing alone doesn’t get you very far in the “crisp and clear” department, though I’d caution that there is such a thing as oversharpening. Personally, I prefer to add Gaussian Blur to soften things up, but below are all the different methods of sharpening.
(You can find my sharpening settings and process here.)
Use the best possible Save for Web settings. I mean “best” in the most general sense of settings that are optimal, but also best suited for you and your gifs specifically. Like most other things, some of it comes down to personal preference: selective vs adaptive, pattern vs diffusion, which to pair together.
Where Pattern places pixels in a grid, Diffusion results in an effect that’s more randomized. And as per the Adobe site:
[Selective] creates a color table that favors broad areas of color and the preservation of web colors. This color table usually produces images with the greatest color integrity.
[Adaptive] creates a custom color table by sampling colors from the spectrum appearing most commonly in the image. For example, an image with only shades of green and blue produces a color table made primarily of greens and blues. Most images concentrate colors in particular areas of the spectrum.
Examples of each different setting under the cut.
The differences between Selective and Adaptive can range from minor to major, so while the differences here are, admittedly, pretty tame, that won’t always be the case. Because of how colors are processed, it’s something you’ll find to be dependent on a particular scene/gif. How light or dark it is, how many colors there are, how many shades of those colors exist within the gif, et cetera.
I myself favor Adaptive + Pattern, but will go back to Selective + Pattern if a gif calls for it—sticking with Pattern because I feel it produces the “cleanest” results. But I know loads of gifmakers whose preference is Diffusion, and others yet who will regularly switch between the two, so there’s no real “right” or “wrong” here, so long as the rest of your settings match up with these ones, I think:
Hi!! I really love this https://anya-chalotra.tumblr.com/post/656163240457469952/a-bit-of-both-i-suspect-the-same-as-you edit of yours and was wondering which fonts you used in this! thanks! Hope you have a nice day!
Hi there! Thank you so much! The primary font is MADE Soulmaze, and for the smaller text I used Tw Cen MT.
Hi!! I really love this https://anya-chalotra.tumblr.com/post/656163240457469952/a-bit-of-both-i-suspect-the-same-as-you edit of yours and was wondering which fonts you used in this! thanks! Hope you have a nice day!
Hi there! Thank you so much! The primary font is MADE Soulmaze, and for the smaller text I used Tw Cen MT.
hi Ava would you mind sharing what fonts you used in this edit? /post/674008497324785664/i-understand-now-how-special-she-is-when-chaos
Hi! The script font is good ol’ Hello Stockholm, which, if no one already guessed from the dozens of times I’ve used it, is an all-time favorite—and probably one of my most used fonts to boot. The sans serif font is Multicolore, though I’ll add as a little sidenote here that I’ve been bouncing back and forth between that and Tw Cen MT as my go-to “supporting” fonts.
Hi! I love your tutorials, and I may also have a question 😊 I've been making gifs recently, but I am having trouble with Tumblr showing them correctly. For example, I work on them in photoshop and then post them on Tumblr via desktop and they look fine when it comes to brightness. However, when I look at them on the mobile app, they are so dark, it bothers me. If I adjust the brightness of my phone (which really hurts my eyes LoL) they look fine again, however when I put it back to the lower brightness it's darker again, while other people's gifs do look brighter than mine. How do you ensure the correct brightness without losing quality? I've seen brighter gifs, but when I look at those on PC they are super grainy. Thanks in advance for the help!
Hmm. I’ve never actually paid much attention to the brightness of gifs, or at least not in a comparative desktop-vs-mobile light. That could be because I so rarely use the app (and often as a last resort, because I truly hate the mobile experience) but something I do keep an eye on is colors and colorings, just because something that drives me bananas as an editor is the fact that colors can look anywhere from mildly to wildly different between screens.
A general piece of advice I’d give to you or any creator—and I emphasize any, because I’d give the same advice even if someone isn’t experiencing this specific issue or something similar to it—is to save your gifset as a draft instead of posting it straight away, if you don’t already do as much. This allows you to see how the gifset looks on both screens, and make adjustments accordingly.
Now, in terms of advice that’s specifically brightness-oriented, I would probably recommend... the backwards of a lot of people? Because I use Curves to do everything. Literally everything: brightening, adding contrast, even color correcting if Color Balance isn’t quite getting the job done for me. I used to use Levels, but never do anymore unless I’m trying to create a silhouette. I never use, or so much as look at, Exposure. And the only time you’ll see me use Brightness & Contrast is to actually lower the brightness for scenes that are on the too-bright side of things.
You might find you like other adjustment layers better, which is more than fine. I’m a firm believer in there being no one particular or exclusive way of doing anything in Photoshop. But since I keep my computer at max brightness and keep my phone near or at min brightness, and I haven’t seen much of a difference (beyond colors) in how my gifs look, I thought I’d give a quick rundown of what I do in case you’d like to try it out.
My ‘base’ layers tend to look like this:
Curves (for brightness or brightness and color correcting)
Color Balance
Curves (for a little bit of extra brightness and some contrast)
Curves (for contrast; sometimes disabled if a scene already has a decent amount of contrast, or if the first Curves layer does double-duty)
And this is what my Curves layers typically look like:
The trick to using Curves without making things too grainy, I’ve found, is to avoid any extremes. Instead of tinkering with that first Curves layer on the far left, I a) adjust the opacity of the layer as I see fit, and b) duplicate it when a scene is still dark and calls for some added brightness.
Alternatively: The droppers on the left side will do a lot of the work for you in both the brightening and color correcting departments if you know what you’re doing. (And, like anything in Photoshop, it really is just playing around with it until you get a feel of how it works.)
When picking the brightest point of a scene doesn’t brighten it to my standards, I go for the brightest point on or near a character’s skin (typically around the nose and forehead area; wherever the light hits them) or hair, if they have lighter hair like Ciri and Geralt do in The Witcher.
Here’s a quick Before and After look:
There’s obviously no 100% guarantee of retaining The Most Perfect Quality, especially when uploading on Tumblr, but as long as you’re working with HD footage (1080p or 2160p), sizing your gifs correctly, and choosing the right Save for Web settings, ensuring brightness shouldn’t mean loss of quality.
If you’re still experiencing issues with it, feel free to let me know! I’m always happy to work with people one-on-one.
hi ava !! i love all of ur edits so so much and they give me a lot of inspiration! one of the problems i have is fonts though so i was wondering if u have any favorite fonts u could share? thank u !! 💓
I have an absurd number of fonts downloaded—I’m literally like a child that’s been left unattended in the toy aisle at the store, I see any font that’s remotely aesthetically pleasing and I download it before I’ve even fully thought it through—and I love probably a similarly ridiculous number of them, so I’m going to narrow it down to fonts I’ve used in gifsets and also a couple of stragglers I thought were worth including.
SERIF
Abril Fatface (used here)
Arastin (used here)
Didot (used here, here, here)
Dubiel (used here)
Encorpada
Florence
Mermaid
Nouvelle Vague (used here, here)
Perla (used here)
Pistilli (used here)
Red Velvet (used here)
Vogue (used here)
SANS-SERIF
Arial (I know everyone has this installed by default, but I use it often and in so many different ways, like here and here and here, and even just for quotation marks like here)
