Message me to have access to 82 gifs of Simone Ashley in Bridgerton S3 Pt 1. Simone is Indian Tamil. Please cast her correctly. All of these gifs were made by me. You are free to use them as long as you do not claim them as your own. Please do not add to other gif hunts. I do not have a problem if you use them in crackships, but you have to ask for my permission first and give me credit. Like or reblog if you save or use any of them.
A few people have asked me for a gif tutorial, so here we go! As a disclaimer, there are many parts of gif-making that are subjective, and this is just my personal process/preferences. If anyone is confused about a particular step, or wants more in-depth info about something, just message me!
Tools:
✧Laptop/computer
✧Adobe Photoshop 2024
✧External Hard Drive (mine is 250GB)
✧Video Downloader (I use the Video Downloadhelper extension on Firefox)
PHASE ONE: Make Animated Gif
1. Download high quality video
This is very important! You should download the highest quality of the video you can find. I use the free Video DownloadHelper extension on Firefox, but it doesn't download audio sometimes (it could be me not using it properly, or they want you to pay to get audio). No audio is fine for gifs, but if I'm doing a video edit, I either need to record the audio separately with Quicktime or use a free online downloader for youtube, twitter, or instagram videos.
For this gif, I downloaded an HD interview from the F1 website with the Video DownloadHelper extension on Firefox.
Tip: Make sure your video file is an .mp4 -> photoshop can struggle with .mov files bc they're larger
2. Import: Video Frames to Layers...
File -> Import -> Video Frames to Layers... -> Open your video -> Selected Video Range -> Make Frame Animation
If photoshop has to load a while to make the frames, it means you should select a smaller portion of the video to animate.
Tip: If you discover that there are duplicates of every frame or that there are way too many frames for the portion of video you want to gif, you may need to re-import and check the "Limit to Every _ Frames" box, and write in "2". This will import every other frame of the video and get rid of duplicates or too many frames.
Once your frames are imported, make sure you're working in the "Motion" workspace by going to the top to Window -> Workspace -> Motion.
Now, all your frames should appear at the bottom in the Timeline. Make sure that the box in the left corner is set to "Forever", and now it should play the frames and loop back to the beginning each time.
3. Choosing your frames
I usually aim for around 60 frames total for a gif, but sometimes I'll go under or over that number. This particular gif is 55 frames in total. In general, I want my gif to be around 3 seconds in length bc under that feels too short and over that starts to be a large file size. Totally subjective, though! (edit: I have started to experiment with up to 80 frames for some gifs, which comes out to about 4 sec.)
Play through your frames and if you want to delete some, select them and click on the trashcan icon, which you can see in the screenshot above. (If you don't delete them this way, you'll have issues later.)
4. Set Frame Delay
Once you're happy with your frames, select all of them and click on the part that says "0.02", then go to "Other..." I usually choose 0.05 or 0.06, to land my gif around 3 seconds, but it depends on the video and how many frames you have. This particular gif is set to 0.06 because it looked good and brought me to around 3 seconds.
You can always choose a delay and if you don't like it, go back and change it! Just do what looks good to you.
5. Convert to Video Timeline
Click on the symbol that looks like 4 lines stacked, and choose "Convert to Video Timeline". Now is usually when I play through the gif to see what the speed is looking like/if I like the frame delay and it's landing somewhere around 3 seconds. If not, you can just Undo and adjust anything when it's still in the frame animation stage.
Next, scroll through the Layers on the right side and delete any layers that don't have the "eye" symbol next to them -> these are frames you deleted in the frame animation stage, but they need to be deleted in the timeline stage as well. Lastly, select all your remaining layers (which should all have the "eye" symbol) so they're all highlighted.
6. Convert to Smart Object
With all layers selected, go to the top to Layer -> Smart Object -> Convert to Smart Object. Ta da! You have a gif.
I always make sure to save my file at this point (you can do it before, but it just depends on how fast you work). Remember to frequently save your progress while gif-making: sometimes, photoshop gets overwhelmed and quits while you're mid-color correction 🥲. You never want to start over from scratch...
Now, some people like to crop & resize their gifs first. Or do sharpening before color. Or color, resize, then sharpen. It's really up to you. The order I like to do is Color, Sharpen, Crop, Resize, Export.
PHASE TWO: Color & Sharpening
(the fun part!)
1. Brightness/Contrast
So here's where we start getting into the really subjective stuff. I always use the Brightness/Contrast and the Selective Color adjustment layers to do my coloring. I rarely touch the contrast bc that can be adjusted in selective color, but almost always, the gif needs overall brightening.
Tip: Even when I think a video looks bright to my eyes, sometimes I post the gif and they look dark once they're in the app. My advice is to always brighten a little bit, even when you don't think it's needed...
Here shows the very subtle shift in brightness I did for this gif. It can be a lot more intense depending on the video quality/lighting. The difference will also look a lot more stark after the color layer is applied.
2. Selective ColorNext is color. This is totally up to you and what looks good to your eyes. Make sure you have any software turned off that might change the color of your screen (like a nighttime filter or something that removes blue light).
I use selective color bc you can adjust the levels of cyan, magenta, yellow, and black in each color channel independently. This is how I adjust the specific color of red that Charles and Carlos wear, or the amount of cyan in the blacks, etc. The "Neutral" layer effects the whole image, so I'll sometimes add some yellow there if I'm wanting a warmer image, or I'll add or remove black to brighten or darken the mid-tones.
Just play around! Sometimes, I'll take the slider from +100 to -100 back and forth just to see what it's doing to the gif. And I frequently turn on and off the color layer to see what the gif looked like before and after color. (I've found that most F1 content is really magenta-skewed, which you may not even notice until you've corrected it out).
Above is Color vs. No Color.
It might look extreme to you presented this way, but when the whole gif is colored, no one questions it! As long as there's consistency across gifs, that's all that matters. I frequently copy and paste my adjustment layers onto another gif from the same interview/video so the look stays consistent.
Above is Color w/ Brightening vs. Without.
This gives you a better idea of how much of a difference that Brightness/Contrast layer makes.
3. Sharpening
I got my Sharpening routine of choice from this tutorial on gif-making. To be honest, I don't know if it's the best sharpening procedure bc I haven't taken the time to in-depth compare to other ways of doing it, but it looks good to me! So I've stuck with it. (edit: I've also added a Reduce Noise filter to my sharpening routine. But as always, just do what looks nice to you!)
I copy and past the sharpening from my other gifs onto new ones so I don't have to do all the steps again. There are quicker ways of doing this, like using quick actions and stuff, but how I do it is fast enough for me.
If you want to figure out your own Sharpening routine:
With the gif layer selected, go to the top to Filter -> Sharpen -> Smart Sharpen. It will bring up this window:
Here you can play around with the amount, radius, noise reduction, etc. and see what you like.
I also add a Gaussian Blur effect, which you'll find under Filter -> Blur -> Gaussian Blur.
^All of your Sharpen and Blur effects will stack up underneath your gif layer like this. To adjust the opacity of one of these effects, double click on its adjustment/slider symbol to the right, and it'll bring up the Blending Options window.
If there's any sharpening or blurring layer you don't like, you can easily drag it into the trashcan symbol to get rid of it.
Above is a visual of Sharpened vs. None.
You can really tell with the difference in the Snapdragon logo on either shoulder. But I also personally love how much more Carlos' eyes pop to me on the Sharpened side.
As you can see, it's up to your preference. Sometimes, I really love gifs I see that aren't sharp, but rather really smooth and almost painterly. It's up to the gif-maker!
PHASE THREE: Crop & Resize
1. Cropping
Go to the toolbar on the left and choose the Crop Tool. Above where it says "Ratio", you can choose from preset ratios that photoshop has, or you can make your own. I like to use the presets, or at the very least, clear numbers that you can apply to a whole gifset. Free transforming without a ratio makes it nearly impossible to maintain consistency across a gifset.
If it isn't already, uncheck "Delete Cropped Pixels". This will allow you to move the gif around inside the cropped area later if you want to adjust what's in frame. It also gives you the option to increase the frame later, if you want. You can also click the gear icon next to "Delete Cropped Pixels" and change how you view the gif during cropping.
When you're done, click the check mark or hit Enter. Now, you've got a cropped gif!
2. Resizing
Go to the top to Image -> Image Size...
Make sure you have Pixels selected. For the Resample tab, I have it set to Automatic here, but sometimes I'll use Bicubic smooth or sharpen, depending on what I'm doing. Here's a cool post that compares the different settings. Just experiment with it.
(edit: I no longer change the resolution to 150. I've found that increasing the resolution, and therefore the size, before ultimately resizing down to 540 px means you are compressing even more (the larger something is, the more it has to be compressed within 540 px). I now leave the resolution at 72, which is what it's set at originally, and if the image composition allows it, try to crop in as close to 540 px as I can get so that when I resize, there's the least amount of compression happening.)
If I know a gif is going to be the full width of a tumblr post, I'll resize the width to 540 pixels (the height doesn't matter). But if I make a portrait-style gif which will be sharing a row with another gif, I'll resize anywhere from 270 px -> 350 px. If it's smaller than 270 px, tumblr will enlarge the gif and it'll look bad. If it's wider than 270 px, tumblr might reduce its quality a bit and it won't look as good. But personally, I prefer that if someone clicks on the gif to enlarge it, it looks better enlarged, so I usually will leave it around 345 px as long as the file isn't too big.
PHASE FOUR: Export (last one!)
Once you're happy with everything about your gif, it's time to export. (Remember to save your progress frequently!)
Go to the top to File -> Export -> Save for Web (Legacy)...
^It'll bring up this Save window.
These are the settings I like to use for gifs. You'll find a lot of differing opinions out there about Adaptive vs. Perceptual/Pattern vs. Diffusion, but you should always have "GIF" selected, "Transparency" checked with "No Transparency Dither" selected, Looping set to "Forever", and Colors set to "256". I like "Bicubic Sharper" for my Quality tab, but there are whole tutorials just about comparing those settings. The best thing to do though is to try them out and compare for yourself.
(edit: I've discovered that if a gif is slightly too large and I don't want to shorten it or resize it down, I can try to reduce the colors from 256 to 128 to get it under the limit. I'll never go below 128, and sometimes I will go to 200 or 170 to try to eliminate as little color variety as possible, but often there is not a noticeable difference in your finished gif. But always compare, of course, to make sure.)
On the bottom left is where the size of the gif is shown -> tumblr requires gifs 10MB and under, but in my experience, gifs load/play best on tumblr when they're around 6MB. I always leave a little growing room as well, bc it might say 5.8MB in this window, but after it saves, the file will have grown a little bit and will likely be over 6MB at that point. (edit: I now regularly post gifs that are around 9.5MB and tumblr seems to be able to handle it better.)
AND THAT'S ALL!
If you've made it this far...congratulations! haha
I know this is a whole lot of information and you might be feeling overwhelmed! But I hope, if anything, this shows you just how complex gif-making can be, and how it is absolutely an art! No one should be stealing anyone's gifs, as a lot of hard work and love goes into the process.
This doesn't include things like adding text to a gif, or more complex adjustments and corrections like masking or key frames. But I'm happy to do more of these if there are specific questions people have.
Let me know what you're curious about or if something is unclear! And happy gif-making! ❤️
about the tutorial: just one about dark scenes in general would be great :)
sure :) here's a tutorial on how I work with dark scenes:
before we start, it's important to mention that working with dark scenes is so much easier when your video/ screencaps are high quality. I personally refuse to gif dark scenes unless I have 4k quality footage lol.
my general coloring tutorial is here in case you want check it out!
alright, let's start! after resizing and sharpening my gif, here's what we're working with:
STEP 1: levels. I use the pipette tool to select the lightest and the darkest parts of my gif, it's a great guide that helps to neutralize the overpowering color:
in this case, the lightest part is the little white dot in the corner of his eye and the darkest one is around his hair (if there are many dark shadows in my gif, I just click on a few darkest looking spots and see how it adjusts the coloring and lighting of the gif and just pick the one I think looks the best). basically, this layer is a good guide on how to make the overall look more natural if there is one obvious dominant color and we want to get rid of it (for example, my gif has quite a lot of blues, but it's not too crazy, so I won't need to adjust that much):
and this is what we've got just after using the levels adjustment:
the gif is lighter and the blue was reduced a little bit, the scene now has more green and red undertones. sometimes I mess with the settings myself if I don't like the way it looks, but in this case I'm pretty happy with the automatic adjustments and I didn't even have to do that much!
STEP 2: curves. I do the same thing that I did with the levels, using the pipette tool to select the lightest and the darkest parts and also pull the rgb curve to the middle to brighten my gif even more:
and here's the result after setting the curves layer opacity to 37%:
STEP 3: brightness and exposure layers. next up, I just want to brighten the character a little bit more, but not the background, so I'm adding a brightness/contrast layer and an exposure layer, here are my settings:
but since it adjusts the whole gif and I don't want that, I select the mask on my brightness layer and pick the eraser tool. I erase the part of my gif that I don't want to be affected by this adjustment, I colored that part bright pink so it's obvious:
and then I do the same with the exposure layer.
in my gif the character is not moving that much, so it looks pretty natural when I brighten just him. here's where we're at:
STEP 4: selective color and gradient map. I'm happy with how bright it is, but I do want to deepen the shadows here and just mess with the coloring itself, so next up I'm gonna use a couple more layers.
here are my settings for selective color layer, opacity set to around 40%:
and here are my settings for a gradient map to deepen the shadows:
and here's the result:
ADDITIONAL STEP: I sometimes like to add another layer and just put some soft color gradient to one side of the gif.
in this case I used a soft blue color, set to lighten, 62%:
I'm not very good at tutorials and I put this together pretty quickly, but hopefully this was somewhat helpful, let me know if you have any questions! <3
* public. austin butler , masters of the air ⸻ ( #298 ) , click on the source link below to be redirected to the gifs. all the gifs were meticulously crafted from scratch by our team. we kindly ask you to respect our work by not claiming it as your own, refraining from editing, and not redistributing them. lastly, if you find these gifs helpful or plan to use them in the future, we would greatly appreciate it if you could like and reblog this post.
— ☆ gimme a plot where muse a and muse b have been broken up for a little while, but one day muse a asks to meet up and confesses that they never told their parents that they broke up and they need muse b to pretend they're still together and go to some family event with muse a. cue pretending to still be in love, arguing about why they broke up in the first place, fake kisses that turn hungry, all the yearning and pining, one of them still being in the love with the other !! the possibilities are endless
— ⁺ 𝐄𝐁𝐎𝐍 𝐌𝐎𝐒𝐒-𝐁𝐀𝐂𝐇𝐑𝐀𝐂𝐇 , 1977 [ #760 GIFS ] THE BEAR S2 / ebon moss-bachrach is white, please cast accordingly and use appropriately. all of the gifs have been created from scratch by me. to access the gifs please click the source link. do not edit, claim as your own or add into your own hunts! time and effort were spent into making these gifs, a like or a reblog would be much appreciated!
[ ! ] commission work: to view commission info, click here
custom colors? double, nay, even triple spaced text? format your tumblr text any which way you want with the free space generator by luna!
HOW TO USE
write or paste your text into the text field!
in the bar at the top you'll find the tumblr formatting options, custom colors + a few other fun bits and bobs
when you're satisfied, just hit the GET CODE! button, which outputs your text as html! you can skip right to step 5, unless:
if you also want double- or triple-spaced text, simply hit DOUBLE SPACE IT! or TRIPLE SPACE IT! right above the code. this only works after you've generated the code.
copy your code and then go into the settings menu of your tumblr post. under "text editor" you can choose the html editor and paste your code in there.
and done! add any images you'd like and you're ready to go!
please message me if there are any issues with this generator!
consider a little like or reblog if you've found this useful ❤️
Ever thought about subtitles? Want to learn how to make them? Look no further 'cause here's a tutorial all about them! I'm gonna show you my process of making subtitles on Photopea, but these tips can also be useful for Photoshop users as well. I hope you find this helpful!
FONT
I use a font that's already in Photopea (yaay no need to download anything!) called Open Sans. It's a pretty neutral font and I really love using it for subtitles. I always set the font to Extrabold Italics. Looks the nicest in my opinion!
Here's how it should look like at the top of your workspace:
Locate the font on the left tab, then find the extra bold setting on the right tab.
SIZE
The font size will depend on the width of your gif. For a full-width gif (540px) you can get away with something bigger, but if you have a two-column gifset for example, you'll need to make it smaller. For big gifs, my go-to is either 20px or 25px. Depends on how I'm feeling.
Here's an example to better show you.
Something you also want to keep in mind when subtitling is to have a nice gap between the bottom of the gif and the text itself. "Oh, but how can I find that?" I hear you asking. By turning on distances!
By turning on distances, you can see how big the gap is between the bottom and the text. In this example, I have it set to 15.
If you don't want to forget, you can always add a ruler and line it up with the bottom of the text. Then the rest of your subtitles (if you're making more), all go in the same place. To turn on the ruler function (if you haven't already, go to View > Rulers. You'll now see numbers on the top and the left side of your workspace. Simply drag from the top and a blue appears.
Now any text or shape will snap to that line automatically if you move it around. Now that's neat!
To finish this section off, here are the distances I use for each gif size. As you'll notice, I move the text down a little bit the smaller the gif becomes. But in the end, it's all up to you.
540px — 15
268px — 12
177px — 10
SPACING
What I like to do is increase the tracking so that there is a bit of space between the letters. I put it at 81%, but if you want the spacing to be wider that's cool too!
SHADOWS & OUTLINES
Shadows.... Very scary. But they don't have to be!
Here we have plain text. On its own, can be kinda hard to read. What we need to do in order to fix that is to add some shadows to make the text pop more.
Right-click on the text layer and open up blending options. Then check the drop shadow box and click on it. Set everything to 0, except for opacity (100%) and size (10px). Now you have a shadow all around the text.
Next to the drop shadow, click on the + sign to duplicate it. Change the angle to 137° and set the distance to 1px. Make sure to lower the size to 0.
Now duplicate that layer by clicking the + sign. Everything is exactly the same here, but change the distance to 2px.
Do this once again, changing the distance to 3px. Don't go over 3px, as the shadows will start to look weird!
Now the shadows are all done! This is how it looks
COLORS
Something that's pretty common is to use white and yellow for subtitles (if there are two people speaking for example). You're more than welcome to use those colours, but something I personally like to do is incorporate the subtitles with the gif so that it looks more cohesive. I always pick my text colour after the base gif is finished. Let's take a gif from this Indiana Jones set I made a few months ago as an example:
he looks so good in this movie aND FOR WHAt-
No subtitles... But that is all about to change (oOoOooO)
Write out your text like normal and select the text layer. Go to the character tab (looks like Tt) on the right side to open up it up. Click on the colour box (in this case it's white) so that the color picker appears.
Here's what the screen looks like after all that clicking we did
Then you chose... but chose wisely... (lol I'm gonna shut up now)
After I have my colour picked, I drag the dot around to make it lighter. I don't want it to be super bright, so I drag it towards the top and middle to get a bit of grey. That way, it looks a little muted as well as lighter which is what I personally like.
My tip here is to find the most dominant colour in your gifset if you want your subtitles to look cohesive! Here I've picked a colour, the brown wall behind him because it pops against the greyish tones on his blazer. Here's the final result!
We've now reached the end of this tutorial. I hope you've learned something new and that this makes you want to make MANY subtitles from now on. If you have any questions, don't be afraid to send me and ask. Also TAG MEEEE (#userlace) if you make something, I'd LOVE to see what beautiful gifs you make <3<3<3
this template is a simple template for promo or pinpost. it requires knowing basic knowledge of clipping masks and overlays. it includes a psd and everything marked.
remember to reblog if you save/use.credit has to be visible on your carrd/doc if you use. (reblog, not like. please.)
consider donating through paypal or buy me a coffee through ko-fi.it truly helps me a lot. i am currently in the need of some cash so if you can spare a dollar, that would be great! if not, please just spread the art!
🧨 ⏤ JORDANA BREWSTER in D.E.B.S. ( 2004 ) . IN THE SOURCE , you will find four hundred & fifteen gifs ( 415 ) please don’t claim these gifs as your own bc i made them <3 . like & reblog if you plan on using them or just enjoy them !
tw : flashing lights , kissing , drinking , violence , weaponry .
☆˚— click the source link to find #47 gifs [268x150] of kaylee kaneshiro (kaylee bryant) in santa clarita diet ˚s01 [episode 3]. all gifs were made by scratch so don’t edit or repost. please like and/or reblog if you found them useful.
free template made from scratch and fully customizable. even when text, colors, and images can be changed easily, you’ll need to know how to use the clipping mask and how to change the bending option of each layer.
credits: poppins as the font used.
as usual, don’t claim this as your own and reblog if you find it useful.