or When You Don't Have Video to Gif Feature in Your Photoshop and Had to Improvise
Difficulty: ★★★☆☆
Cost: free (if you do already own a computer :D)
OS: MacOS
Computer Skills: intermediate (basic command line knowledge is required - hence the difficulty)
This is basically my typical gif-making process - I'm not saying it's the right way or the easiest way :D
So here are we go!
Required software
For this method you need two things:
1. Video editor of your choice (i'm using CupCat and I will be showing it's features here but any video editor will do)
2. CLI tool Gifski
You can download it using Homebrew from your terminal:
brew install gifski
(if you don't have Homebrew installed - here is their official site with the guide)
Preparing videos
For this one I'm assuming that you already have the video file from which you want to make gifs from (if you want a guide on how to use cli on mac for downloading videos/part of the videos from youtube (and other socmed) and how to make your life easier with simple script files - let me know!)
My whole process is very simple - cut video in parts (this is the most time-consuming part) then convert them to gifs.
What I usually do with the video:
Cut length
I try to cut parts that are 2-3 seconds long (smaller - looks strange when looped, longer - produces heavier gifs)
Change dimensions
For horizontal video footage I typically use 4:3 ratio, for vertical - 3:4. These are the most optimized dimentions that look good on both desktop and mobile devices.
Occasionally I use 1:1 but it's rare.
Text
If I need subtitles in my gif I add text to the video.
I use default text, font Arial Bold, colored text with black stroke.
Color correction
Sometimes I like to play with some contrast/color adjustments - I also do this to the video footage.
When I'm done with preparing the clip I use standart settings for export. I recommend putting all clips from a gif set to one folder created for this set so it'll be easier to find them from the command line.
Creating gifs from mp4 files
After I prepare all the clips I go to the folder where I exported them, right click on this folder and choose Services > New Terminal Tab at Folder.
(I will be using this gif set as an example.)
Here I have 7 clips, CapCut named them in order of exporting - it would be useful for the cli command (as they have short and repeatable names).
Next step is using the command to create a gif from mp4:
gifski --fps 20 -o "0307.gif" "0307.mp4"
The options are:
--fps 20 - the number of frames per second (i usually use 20)
-o - the name of the output file
last option is the name of the input file
Note that I use quotes for file names because the rest of the files have brackets in them and they'll be confusing for the command line.
Of course it's not very convenient to type command for every gif separately so what i'm doing is:
open text editor (i recommend Sublime Text - but really anything will do)
paste my command, then follow it by " && \" (&& for telling the cli that there will be next command after this one, \ for the new line)
duplicate the first line for all the clip parts each one on a new line (changing the names of input and output files)
So I get something like this:
And then I just copy all this and paste it in my terminal window. (Note that the last line doesn't have the && \ ending - it's because it is the last).
And so now I have my gif set!
All I need to do after this is to check the sizes of my gifs and remake them if necessary.
Size optimization
Tumblr is only allowing gifs which are 10MB and lower. So if a gif turned out larger I usually use these methods of optimization:
1. Make it shorter.
As I've mentioned earlier the most optimal duration of a video clip is 2 to 3 seconds. If a gif turned out large I try to cut my clip a little bit.
Also I sometimes split it into 2 or more parts.
2. Try to lower fps.
Fps (or frames per second) is the number after "--fps" option. I use 20 for most of my gifs but I can lower it to 15 or even 12 if necessary.
Note that the less the number the more jittery the gif may appear. And I won't recommend lowering it below 11-12 because of that.
3. Lower the video quality.
As I've said earlier I'm using standard settings in CapCut to export my video clips - namely 720p quality.
If I want to preserve length and smoothness of my gif I can try and export my clip using quality 480p. Yes it will make it less sharp but in a gif set it can actually look just fine (especially on mobile devices).
So here is it! Thanks for making it to the end! I hope some of this stuff was helpful for you <3
Hello! I was wondering if you still the dimensions for this post https://www.tumblr.com/mikelogan/764597806101053440/tj-mikelogans-halloween-2024-event-day-17-poc-in
hi! i can do you one better and provide you the template i made!
the post in question
MEDIAFIRE DOWNLOAD
but if you don't want to download the template for any reason, the dimensions in order (right to left, top to bottom) are as follows:
rectangle 1: 177px x 216px
rectangle 2: 178 x 250
rectangle 3: 177 x 216
rectangle 4: 177 x 280
rectangle 5: 178 x 246
rectangle 6: 177 x 280
let me know if you have any additional questions, i'll be happy to help!
hi! your Schitt's Creek gifset is absolutely stunning!!!
Would you please consider posting a tutorial on how you made the the first two gifs colouring and paper cut lines
Hi!! Thank you so much!! And so sorry for the late reply! For the coloring, I have a tutorial already here which I used to color these gifs (although I mostly did them frame-by-frame for this set).
Here is a brief tutorial on the ripped paper effect:
You will need a ripped paper brush (I found all of mine on deviantart). You could also use a png it just gives you less precise control.
Basic knowledge of Photoshop and layer masks
Tutorial under the cut:
1. Gif Prep
First, put the completed gifs together. The completed, total dimensions in this case will be 540x540.
My first gif (blue colored gif) was 350x540. I like to make the gif a bit bigger than it's actually going to be so I can crop it with the ripped paper effect. I put that gif in the center of my canvas.
*Also sidenote: I actually colored the gif AFTER cropping it to avoid having to color unnecessary parts.
2. Ripped Paper
Next, I use the ripped paper brush to create the effect on both sides of my gif. I do that by adding a layer mask to my gif group. For the brush I had, I did the top and bottom separate and then I had to fill in the white gap in between.
That left me with this:
3. Ripped Paper Outline
I also wanted to make it pop more by adding a white border. To do this, I just used the same brush but this time I added it as a white color to a normal layer. This layer MUST be underneath the original layer!
Also, for this I did the exact same brushes with the same size and positioning, but then I used the arrow keys to offset them a little with the gif.
*You'll note that here, I only needed the two ends to be white (my paper brushes) so I didn't fill the middle in. You can play around with it to see how you like it.
That gives us this:
4. Add the other gifs
Then, you just add the other gifs underneath all of those layers. In this case, I one gif but split it in half and put the upper half on the top and lower half on the bottom. Add the coloring, and voila!
5. Adding the white ripped lines
For this gif, I used a singular white line. I used the same paper brushes to get the effect. (Same effect as the second gif, I just found this one first on my computer lol).
To get a singular ripped line, first position your gifs the way you want them.
Next, I do the exact same thing as I did above when I created the new layer except this time instead of separating each side by a lot, I put each ripped paper side right next to each other.
This can be a little tricky to explain with the brushes I'm using so bear with me. You'll see in the image above, the normal layer mask I made a lot bigger, but I wanted it skinnier to fit my gifs. So using a layer mask and my same paper brush set to black, I started with either the top or bottom and cropped it. I just messed with this until it looked good.
Hello!! I've been reading through some of your gif tutorials and I was wondering if you could go over the cropping and resizing steps in detail. I'm not sure I understand what resizing does/when in the giffing process it should be done, since we can just crop the screencaps using "fixed size". But I read that it helps with the overall quality? I hope I got my point across. And thank you for all your resources, I really appreciate all your work!
hi anon! so when it comes to giffing, cropping and resizing are two different things. related, but different!
"cropping" is when you take a gif that you've made and cut out parts of the image. i'm actually working on a gifset at the moment that you sent this ask, so here's a screenshot of what it looks when i'm cropping it:
as you can see, when you're cropping, you're taking out things from the image—so, in my case, i'm cropping the image to help take out that logo in the top corner and to center the subject in the middle of the gif.
like you said, you are able to crop with a "fixed size". however, the problem with that actually comes from what you can upload on tumblr. tumblr's upload limit for gifs is 10MB, and if what you have cropped exceeds that/is too big when you go to save your gif, you simply can't post it on tumblr.
that's where "resizing" comes in! on tumblr, there's a few different sizes that show your gifs best, depending on the type of gifset you're making. here's this graphic that i usually refer to when i'm giffing (from this post) that has all of the sizes that tumblr will show at their best quality:
these all refer to the width of the gif you're making. the height doesn't really matter all that much, so long as you're able to stay under that 10MB limit when you export the final gif.
of course, you can try to use the "fixed size" cropping tool to make your gifs this size right off the bat but that becomes a different problem. let me show that same screenshot from before, but instead with me cropping with the "fixed size" tool set to 540x540 (which is how big i want the gif to be in the end):
see how big of a difference that makes? that's not what i want my final gif to look like—it's way too zoomed in, and you can't really tell what's going on in it. and, while it's not clear in this image since i'm cropping an anime gif, when you're giffing live action movies/tv or music videos or anything that has a real person in it, the quality gets kind of rough because of the way it's cropped when you do it like this.
as for your question about when to do all this, my entire gif process starts with me cropping and resizing it. so, with this gifset i'm working on, i crop my gifs to show what i want them to show in the gif itself, and then i resize them so that they can be posted on tumblr (so, again, under 10MB).
Hi! In this tutorial, I'll be teaching the basic techniques in my 'You are Jeff' x Christine graphic gifset!
This was a request by @wormpool! I'm not a professional at this, though, so my Photoshop techniques are very basic and even a little roundabout at times, but this is the way I make things. This isn't a difficult gifset to achieve. It is TIME CONSUMING, though.
I'm also not gonna be teaching coloring here, as I have taught my process here before.
Because I decided to teach the basics first, this tutorial is divided in three parts:
This is part one where I'll teach the basics. Here is part two, where I teach how to make the speedometer gif and adjacent. Here is part three where I teach how to make the red, Jackson Browne gifset.
I RECOMMEND THESE ARE READ IN ORDER, AS ONE ASSUMES YOU KNOW WHAT I AM TALKING ABOUT IN THE OTHER PARTS.
If anyone is curious as to how to make any other one of these graphic gifs, let me know and I'll make a separate tutorial for it!
You will be learning how to make these two gifs first:
Which are the basis for 90% of the entire graphic giset. I will be calling them first one and second one respectively on the tutorial, to spare images.
Anyway, let's get to it!
[all tutorials]
Intro:
First of all, I'd like to say that most of the fonts employed on the gifset were default system fonts, them being:
⋆ Trebuchet MS.
⋆ Times New Roman.
⋆ Tahoma.
⋆ Arial Black Italic.
All available on Windows, except for Biró script free, which I used for the handwritten parts. Here's where I got it. The problem with this font is that it only contains the letters, so all the periods and commas used were usually Tahoma.
That being said, Biró script is one of my favorite free fonts of all time simply because it looks SO MUCH like regular handwriting, in a way most handwriting script fonts aren't able to achieve.
Ok, second of all is that this tutorial assumes you know how to make gifs. I have a tutorial for this as well, which starts by discussing the best programs for grabbing frames and goes all the way into the gifmaking proper. Armed with knowledge, this is really all you have to know to learn how to make this, I’ll be teaching everything else.
Third of all is that the film in question does not need to be super high resolution for this gifset to work. Because you’ll be making smaller gifs that will be within a bigger gif, it won’t seem low-rez at all. This works wonderfully with my Christine release specifically, because this movie is not an easy movie to sharpen.
Last, the main thing I have used in this gifset is the rectangle tool. I used that for EVERYTHING. So I will first be teaching you how to use the rectangle tool when it comes to gifsets, as more or less a basic step.
I'd also like to say that the very first gif on the gifset, this one:
Was made using a tutorial by @clubgif, which is here. I just didn't round the borders and made my bg black and white with a bunch of noise on top. The line on top of the word 'motorbikes' was made using the line tool.
Ok, now let's get into the basic steps!
P.S: There is a rounded rectangle tool already, I just forgot about it. I will not be using it for this tutorial, but you can!
Step 1: Open your frames on Photoshop, like you would a normal gif you’ll make. You can also have the gif done already for this step, as it's what I'll be doing by using one of my Arnie ones.
Because I’ll only be teaching you how I used the rectangle tool, you don’t need to have any more gifs for this step or worry about anything else atp.
This is my workspace:
Step 2: Take the rectangle tool
And draw a rectangle of whatever size you want on the canvas. In my case, it'll be one that will cover most of it, like so:
(I have my 'properties' window on my sidetab, and you can make sure it shows by going on window>properties).
Now, don't worry if the rectangle isn't perfectly symmetrical, you can fix it by altering the dimensions up there.
Step 4: Shape your rectangle. In the middle there, below the size settings, you'll see a white rectangle with a red line crossing it, a black rectangle with a gray one in the middle and a 0px beside it. This is basically where the magic happens. The white with the red is irrelevant for all of what we are doing here, as it fills up the rectangle with a solid color, but the one beside it is the border of the rectangle. It doesn't show now because the px. is set to 0. I usually set it to 1. Then, I click on the rectangle with a gray one in the middle and set the color of that to white, like so:
You have a rectangle now! On top of your figure! Yay!
The thing is that it's not rounded and a rounded rectangle is what I used for basically 90% of my gifsets. To achieve that, you basically go down here and set all the borders to 10, 20, 30, 50px, whatever you want! Most of mine were 10 or 20, like so:
Now, if you want one side of your rectangle to be sharp, all you have to do is de-select the icon in the middle of the round dimensions where it says 20px and you can now manually alter them, without all being affected, like so:
If you saved your gif like this, it would literally look like a gif with a white rectangle on top. As long as your rectangle is on top of everything, it shows no matter what.
Step 5: Now that I taught the basics of how to work your rectangle, let me show how I made the borders. Basically, you'll create a new layer under the rectangle and on top of the layers you already have, and paint bucket it black. Or red. Whatever color you want, I'll go with black for this one. You should have something like this:
And your layer tab should look like this:
(remember I'm using a pre-made gif, otherwise it'd say frames over there). Now, you right click your rectangle and select resterize layer:
After resterizing, your layer will no longer be considered a shape by photoshop, but just a bunch of lines over the canvas. This means you can no longer edit the shape to be whatever you want, so make sure your shape is perfect and in place. Now, select it using the magic wand tool. After that, click on the black layer underneath, and delete the selection, like so:
Now your gif shows! Then, so the rectangle doesn't show anymore (unless you like the white border, your call), delete it, and you'll have a perfectly black border (or any color), on top of your original gif. Cool, huh? This is what the gif looks like now:
As you can see, I wasn't lying when I said this is the basis for like 90% of everything I made. All my gifsets were basically a rectangle with the gif underneath.
Step 5: So... How did I make the first one? The canvas is a black box, which I showed how to do already, but the gif is only on the side.
Ok, let me reverse engineer this: This is the time for you to decide the dimensions of your canvas. In this tutorial canvas and gif are different things. Canvas is the black thing and gif is the small thing. Easy, I promise.
The way I decide the size of my canvas is by selecting my crop tool and going here:
This here is gonna decide the size of your cropping for you, basically. In the case of this specific gif, it's 540 and 326. Every canvas was 540 in width and whatever in height, because I found out it mostly doesn't matter on tumblr anymore.
Let's say you only have the gif open, like in the first tutorial I made, and you have nothing else, not even the rectangle. You can literally drag the crop box with the dimensions around and make a transparent canvas around your gif, like so:
Because the dimensions are already selected, they will always be the same. Then, you do basically every step I mentioned before: Rectangle around the gif where you want the gif to show, black layer, resterize rectangle layer, delete selection with the black layer selected, until you have this:
Then, you basically create your design the way you want! For a basic, one gif graphic set, this is as simple as it gets, and it lets you create really cool stuff. For example, the second one is just two of these gifs I just taught, one on top of the other.
Bonus step: To get the rectangle on top of both, like here, with the writing, you make another rectangle, and select the box with the red line crossing it:
Then, you select the color, in this case white:
Make sure the border section is the one that has the red line across it now, cause we will not be using it, and it affects it sometimes cause Photoshop is v specific.
Now, I usually like to make the text layer separated from the rectangle layer for multiple editing reasons (it's difficult to edit text that is on top of the rectangle, but if you try to use the text tool on top of it, it'll basically try to force you to merge the two), so I resterize this layer right away tbh. Then, I add text:
You can also make all of this in another canvas, then add that on top (like literally: New canvas>paint bucket it white>text tool to type what you want>merge layers>copy>add on top of your gif layers). Honestly, Photoshop is pretty forgiving nowadays, but this is how I did most of the ones I did on my gifs. I also used the rectangle tool to frame my texts, same thing as I taught, I just didn't delete it in the end. All rectangles, babey.
Part two will be concerning how I made the Christine Speedometer gifset:
and part three will concern the Jackson Browne, all red, triple gif gifset.
Part 2. | Part 3.
hi! your recen orange zendaya gifset from 2 days ago is absolutely gorgeous wow!!! i was wondering if you would please consider doing a tutorial on how you made the text's overlay on the first gif (where it spells 'zendaya')? it is just so pretty (as is the rest of the gifset of course!) <3
hi!! :) first of all thank you so much that means a lot! 🥺
i will definitely show you my settings, but there are already some great tutorials i would recommend looking at for similar effects, and i honestly don't have much else to offer above those (see here)
but here's a screenshot of my settings i used for this specific effect
i set the text (my font i used is lostar) to difference, then in the blending options i did gradient overlay:
easy aaah gradient header tutorial
(no one requested)
earlier, i made this cutesy header for the mobile version of my blog, and i really wanted to share this basic technique, even though no one asked because i think it turned out super cute! (✿◡‿◡)
here is the product:
Tutorial below!!! ✨🤍
If you want to make this, you need to have some basic Photoshop understanding and you should know how to make gifs (even though this can work with photos as well!!!)
Make your gif!
Note: if you want to make the perfect-sized header, crop using the 16:9 ratio and resize, maintaining proportions, and set width to 640px
Make a new layer and fill it using the color of your blog, using the Paint Bucket Tool (G). This will be you background layer. Move it under your gif+coloring layers as in the picture below:
3. Group the gif and the coloring + add layer mask to the group
4. Now, fun part. Select the layer mask, by clicking on it and select the Gradient Tool (right click on the Paint Bucket Tool icon!) and select this gradient
Usually it's called "Foreground to transparent". In this case, make sure your selected foreground color is black.
Then, I used these gradient settings:
So, you should have your layer mask selected. Drag the gradient tool over your gif and adjust it like this:
Now, the concept is that you leave enough solid color at the bottom so that the effect will be smooth enough.
