Tumgik
#i had to resize these for tumblrs file limit so they might not be the best quality.
getakichi · 7 months
Text
Tumblr media Tumblr media Tumblr media
animations from chief production director / character designer toco yatabe.
287 notes · View notes
brotherconstant · 5 months
Text
GIFMAKING TUTORIAL: PHOTOPEA (for Windows)
Tumblr media
Screencapping
Gif Width/Size Limit/Ezgif
Loading Frames
Cropping and Resizing
Rasterize/Make Frames
Sharpening
Coloring (not detailed. Links to other tutorials included)
Exporting
Obligatory Mentions: @photopeablr ; @miwtual ; @benoitblanc ; @ashleysolsen Definitely check out these blogs for tips, tutorials and resources, they're a gold mine. Finally I recommend browsing the PHOTOPEA TUTORIAL / PHOTOPEA TUTORIAL GIF tags. DISCLAIMER: English is not my first language and I'm not an expert on what I'm going to discuss, so if anything's unclear feel free to drop another ask.
1. SCREENCAPPING -> PotPlayer (the one I use) or MVP or KMPlayer
INSTALL PotPlayer (tutorial)
Play your movie/episode and press Ctrl + G. The Consecutive Image Capturer window will pop up. Click Start to capture consecutive frames, Stop when you got what you needed.
Where it says "Image Type -> Format" I recommend picking PNG, for higher quality screencaps.
To access the folder where the screencaps are stored, type %appdata% in windows search, open the PotPlayerMini64 folder (or 32, depending on your system) and then the Capture folder. That's where you'll find your screencaps.
Tumblr media
Admittedly MVP is a lot faster but I prefer Potplayer because it generates (at least in my case) higher quality screencaps. MVP kind of alters the hue and it made it harder for me to color my gifs. Still, if you're interested in how to use it, I recommend this tutorial.
As for KMPlayer, every tutorial out there is outdated and I couldn't figure out the new version of the software.
2. GIF WIDTH/HEIGHT, SIZE LIMIT, EZGIF OPTMIZER
At this point you should already know how big your gifs are going to be. Remember the ideal gif width(s) on tumblr are 540 px / 268 px / 177 px. These specific numbers take into account the 4 px space between the gifs. No restrictions on height. Here are some examples:
Tumblr media Tumblr media Tumblr media Tumblr media
You can play around with the height (177x400, 177x540, 268x200, 268x268, 268x350, 268x400, 540x440, 540x500, 540x540 etc) but if you go over the 10 MB limit you'll either have to make your gifs smaller/delete some frames.
OR you can go on ezgif and optimize your gif, which is usually what I do. The quality might suffer a little, but I'm not really (that) obsessed with how crispy my gifs look, or I'd download photoshop.
Tumblr media
Depending on the gif size, you can decrease the compression level. I've never had to go over 35. It's better to start at 5 (minimum) and then go from there until you reach your desired ( <10mb) gif size. Now that I think about it I should have included this passage at the end of the tutorial, I guess I'll just mention it again.
3. LOAD YOUR FRAMES
File -> Open... -> Pick one of your screencaps. The first one, the last one, a random one. Doesn't matter. That's your Background.
File -> Open & Place -> Select all the frames (including the one you already loaded in the previous passage) you need for your gif and load them.
(I recommend creating a specific folder for the screencaps of each gif you're going to make.)
WARNING: When you Place your screencaps make sure the Crop tool is NOT selected, especially if you've already used it and the width/height values have been entered. It will mess things up - I don't know why, could be a bug.
You can either select them all with Ctrl+A or with the method I explained in the ask: "when you want to select more than one frame or all frames at once select the first one, then scroll to the bottom and, while pressing Shift, select the last one. this way ALL your frames will be selected".
WARNING: Depending on how fast your computer is / on your RAM, this process may take a while. My old computer was old and slow af, while my new one can load even a 100 frames relatively fast, all things considered. Even so, I recommend ALWAYS saving your work before loading new frames for a new gif, because photopea might crash unexpectedly. Just save your work as often as you can, even while coloring or before exporting. Trust me, I speak from experience.
Now you can go ahead and delete the Background at the bottom, you won't need it anymore.
4. CROPPING AND RESIZING
Right now your screencaps are still smart objects. Before rasterizing and converting to frames, you need to crop your gif.
Technically you can rasterize/convert to frames and then crop, BUT if you do it in that order photopea will automatically delete the cropped pixels, even if you don't select the "Delete Cropped Pixels" Option. Might be another bug, unclear. Basically, if you crop your gif and then realize you cropped a little too much to the left or the right, you can go ahead, select the Move Tool (shortcut: V) and, after selecting ALL YOUR FRAMES, move them around on your canvas until you are satisfied. You won't be able to do this if you rasterize first and then crop, the excess pixels will be deleted. I don't know why, I found out by accident lol.
CROPPING
(Cropped pixels: the gray/opaque area outside of the selected area. That area disappears once you press enter and crop, but the pixels are retained, so you can move the frames around and reposition them as you like. In this case I could move the frames to the left and include Silver's figure [curly guy in the foreground] in the crop)
Tumblr media
After deleting the Background, you will need to select all your frames (using the Shift key), use the C shortcut on your keyboard to choose the Crop tool. Or you can click on it, whatever's more convenient. Once you do that, a dropdown menu is going to appear. You need to select the "FIXED SIZE" option, as shown in the following screencap.
Tumblr media
Once you do that, you can type in your desired width and height. Do not immediately press enter.
Tumblr media
Your work area should now look like this. Now you can click on one of the white squares and enlarge the selected area until the edges are lined up. You can then move it around until it covers the area you wish to gif.
WARNING: to move the big rectangle around, you're gonna have to click on a random point of the work area, PREFERABLY not to close to the rectangle itself, or you might accidentally rotate it.
Tumblr media
See? When your cursor is close to the selected area it turns into this rotating tool. Move it away until it reverts to your usual cursor, then you can start moving the rectangle. Press Enter when you're satisfied with the area you selected.
RESIZE
This isn't always necessary (pretty much never in my case) - and it's a passage I often forget myself - but it's mentioned in most of the tutorials I came across over the years, so I'd be remiss if I didn't include it in mine. After cropping, you'll want to resize your image.
IMAGE -> Image Size...
Tumblr media
This window will pop up. Now, should the values in the Width and Height space be anything other than 540 and 400 (or the values you entered yourself, whatever they might be) you need to correct that. They've always been correct in my case, but again. Had to mention it.
5. RASTERIZE & MAKE FRAMES
Now that your screencaps are cropped, you can go ahead and convert them.
LAYER -> Rasterize (if you skip this passage you won't be able to Sharpen (or use any filter) on your frames at once. You'll have to Sharpen your frames one by one.
Photopea doesn't feature a timeline and it's not a video editor, which makes this passage crucial. When you select all your smart objects and try to apply a filter, the filter will only by applied to ONE frame. Once you rasterize your smart objects and make them into frames, you can select them all and sharpen them at once. Unfortunately this also means that you won't be able to - I don't know how to explain this properly so bear with me - use all smart filters/use them in the same way a photoshop user can. For example, you can sharpen / remove noise / add noise / unsharp mask... but you can't act on those filters in the same way a photoshop user can. When you work on smart objects you can change the blend mode - which is critical if you decide to use a filter like High Pass. If you simply apply a high pass filter on photopea you won't be able to change the blend mode and your gif will look like this (following screencaps). Or rather, you will be able to change the blend mode by clicking on the little wheel next to "High pass" (circled in green in the 2nd screencap), but you'll have to apply the filter to each frame manually, one by one.
Tumblr media Tumblr media
Then you can rasterize/make into frames, but it's extremely time consuming. I did it once or twice when I first started making gifs and it got old pretty soon haha.
Layer -> Animation -> Make frames. This passage will add "_a_" at the beginning of all your frames and it's what allows you to make a (moving) gif. As I said in the ask, if you skip this passage your gif will not move.
6. SHARPENING
Some people prefer to color first and sharpen later, but I found that sharpening filters (more or less) dramatically alter the aspect of your gif and already brighten it a bit (depending on your settings) and you may end up with an excessively bright gif.
Now, sharpening settings are not necessarily set in stone. The most popular ones are 500/0.4 + 10/10, which I use sometimes. But you may also need to take into account the quality of the files you're working with + the specific tv show you're giffing. I've been using different settings for pretty much every tv show I gif, especially in the last couple months. Some examples:
Tumblr media
followed by
Tumblr media
OR
AMOUNT: 500% RADIUS 0.3px followed by AMOUNT: 20% (or 10%) RADIUS 10px
You'll just need to experiment and see what works best for your gifs.
Some gifmakers use the UNSHARP MASK filter as well (I think it's pretty popular among photopea users?) but it makes my gifs look extra grainy, makes the borders look super bright and it clashes with my coloring method(s), so I use it rarely and with very moderate settings. Something like this:
Tumblr media
Again, depends on the gif and on what you like. I've seen it used with great results by other gifmakers!
REDUCE NOISE
Sometimes - and this is especially the case for dark scenes - your gif may look excessively grainy, depending on how bright you want to make it. Reducing noise can help. Keep it mind, it can also make it worse and mess up the quality. BUT it also reduces the size of your gif. Obviously, the higher the settings, the more quality will suffer.
Tumblr media Tumblr media
These are my standard settings (either 2/70% or 2/80%). It's almost imperceptible, but it helps with some of the trickier scenes.
ADDING NOISE
Tumblr media
Adding noise (1% or 2% max) can sometimes help with quality (or make it worse, just like reduce noise) but it will make your gif so so so much bigger, and occasionally damage the frames, which means you won't be able to load your gif on tumblr, so I rarely use it.
You'll also want to create ACTIONS which will allow you to sharpen your gifs much faster.
HOW TO CREATE AN ACTION ON PHOTOPEA
The Action Button (shaped like a Play button as you can see in the following screencaps) may not be there if you're using photopea for the first time. If that's the case click on the magnifiying glass next to "Account" (in red) and type "actions". Press Enter and the button should immediately show up.
Once you do that, click on the Folder (circled in yellow)
Tumblr media Tumblr media
and rename it however you like.
Tumblr media
now click on New Action (circled in red). now you can press the Recording button (circled in green)
Tumblr media
Now
FILTERS -> Smart Sharpen
Tumblr media Tumblr media
and you can enter your values. Then you repeat this passage (WITHOUT pressing rec, WITHOUT pressing new action or anything else, you just open the smart shapen window again) and, if you want, you can sharpen your gif some more (10%, 10px, or anything you want.)
Maybe, before creating an action, experiment with the settings first and see what works best.
When you're satisfied, you can PRESS STOP (it's the rec button, which is now a square) and you can DOWNLOAD your action (downwards facing arrow, the last button next to the bin. Sorry, forgot to circle it) .
Tumblr media
You need to download your action and then upload it on your photopea. When you do, a window will pop up and photopea will ask you whether you wish to load the action every time you open the program. You choose "Okay" and the action will be loaded in the storage.
When you want to sharpen your gif, you select all your frames, then you click on the Play button, and select the Action, NOT the folder, or it won't work.
Tumblr media
Actions can also be created to more rapidly crop and convert your frames, but it doesn't always work on photopea (for me at least). The process is exactly the same, except once you start recording you 1) crop your gif as explained in step 4, 2) convert into frames. Then you stop the recording and download the action and upload it. This won't work for the Rasterize step by the way. Just the Animation -> Make Frame step.
7. COLORING
Now you can color your gif. I won't include a coloring tutorial simply because I use a different method for every tv show I gif for. You normally want to begin with a brightness or a curve layer, but sometimes I start with a Channel Mixer layer to immediately get rid of yellow/green filters (there's a tutorial for this particular tool which you will find in the list I mention in the link below)
[Plus I'm not really an authority on this matter as my method is generally... fuck around and find out. Two years of coloring and I still have no idea what I'm doing. 70% of the time.]
Simple Gif Coloring for Beginners -> very detailed + it includes a pretty handy list of tutorials at the bottom.
8. EXPORTING
Now you can export your gif. Some gifmakers export their (sharpened) gifs BEFORE coloring and then load the gifs on photopea to color them. I'm not sure it makes any difference.
FILE -> EXPORT AS -> GIF
Tumblr media Tumblr media
(not colored, just sharpened)
As you can see, unlike photoshop the exporting settings are pretty thread bare. The only option available is dither - it sometimes help with color banding - which, and I'm quoting from google for maximum clarity:
"refers to the method of simulating colors not available in the color display system of your computer. A higher dithering percentage creates the appearance of more colors and more detail in an image, but can also increase the file size."
SPEED
When you export your gif, it will play at a very decreased speed (100%). I usually set it at 180/190%, but as for every other tool, you might want to play around a little bit.
GIF SIZE/EZGIF OPTIMIZER (See Step 2)
And that's it.
P.S.: worth repeating
Save your work as often as you can, even while coloring or before exporting.
349 notes · View notes
freensrcha · 2 years
Text
GIF MAKING IN PS
i've never done anything like this before so hope it makes some kind of sense.
so before you get into making gifs first thing so will need is some sort of editing software (i use ps 2022) and some raws obviously. most of the shows i gif are on yt so its pretty easy to get them and you can use any kind of yt to mp4 converter.
so once you have all of this i guess we can get started!!! on a daily basis i do not follow all these steps because you can easily turn them into actions on ps, which means that it would take just seconds. so although it may look lengthy its pretty simple
Tumblr media
the first step to making gifs is importing the raws. you first want to go to file>import>video frames to layer. this will open up your file explorer from where you can choose your desired file. you may want to make sure your file isn't an mkv one but an mp4 before you do this. also if your raws are large, perhaps a whole episode or longer than 30 minutes, it might help to trim it down beforehand to make it easier to work with.
Tumblr media
once you select your file, this window will open up. here, you can move the sliders to select the exact part of the clip you want for your gifs. (when files are larger, it would be more difficult to capture smaller parts of the clip using the sliders) although optional, selecting the limit to every 'x' frames will help reduce the size of your gifs while not making it look too choppy. i do 'every 2 frames' for regular scenes and leave it unchecked for anything in slow-mo. more than 2 usually makes the entire thing look sped up and choppy so i wouldn't recommend it. although it depends on the raws ideally you want something around 80 frames for one gif.
Tumblr media
once you press okay on the above step, your workspace will open up and from here we can start making the gif. the first step would be to set the time delay. this is two ensure that the gif doesn't look sped up. for this you want to first select all the frames as shown above.
Tumblr media
next, you can click on the downward arrow on any frame to change the time delay. i usually prefer 0.07s which you can set in other...
Tumblr media
once you've set the time delay, you have to convert the frames into timeline as shown above.
Tumblr media
now that you have your timeline as seen on the left side, all you have to do is convert everything into a smart object. for that you have to first select all the layers using the shortcut Ctrl+Alt+A and then right-click on the layers followed by convert to smart object
Tumblr media
now you can see that the many layers have been converted into one layer making it easier to work with. the next step is to resize the gif. the original dimensions would make the gifs too large to fit tumblr's size limit, this can be done by going to image>canvas size
Tumblr media
to ensure that tumblr does unnecessarily crop your gifs you want to make sure width is always 540px if there's going to be only one gif in a row. the height can be anything depending how you want your gif to look.
Tumblr media
you can adjust the gif onto the new canvas using Ctrl+T to transform the layer. always ensure the height and width are linked to make sure you don't squeeze the image weirdly.
Tumblr media
after resizing the gif, i next sharpen the gif (which is my least favourite part). you can sharpen by going to filter>sharpen>smart sharpen while the noise filter is in filter>noise>add noise
Tumblr media
although i don't always stick to the same sharpening, these are the settings i use the most.
Tumblr media
once i'm done with the sharpening i like to soften the first smart sharpen filter. for this i change the blending option of the first filter to 80%. this is entirely optional.
Tumblr media Tumblr media
once sharpening is done, you can colour and edit however you like using any of the adjustment layers. i mostly prefer curves and selective colour. these are the curves i used for this particular gif to remove the purple/redness it had going on. in RGB mode the white slider adds brightness and the grey one darkness/contrast. then you can individually use the red, green and blue modes to adjust the colours. i only used selective colour here to adjust the skin tones a bit so i haven't added that.
Tumblr media
once done with colouring all you have to do is export the gif from file>export>save for web (legacy)
Tumblr media
in the last window you have to make sure your looping is forever and that your gif is below 9.5MB. although tumblr says max gif size is 10MB, at least for me nothing over 9.5MB uploads.
Tumblr media
and THAT'S IT (i say after a whole one page essay) your gif is ready!!! honestly i don't know if this is the easiest or most convenient method but this is just how i do it. also i use actions for everything other than colouring so it isn't as time consuming as it looks. you can also set shortcuts for importing and exporting to save time. this can be done from edit>keyboard shortcuts
since you made it to the end here is an extra bit on captioning
Tumblr media
you want to start with a normal text layer and center it at the bottom of the gif. i use arial bold italic in size 16. next to make it look better we can add an outline and shadow to it through the layer style. and you can open up this window either by clicking the fx option at the bottom right or double-clicking the text layer.
Tumblr media Tumblr media
these are the settings i use for the stroke as well as the shadow
now it is ACTUALLY the end!!!
89 notes · View notes
carduelisc · 2 years
Text
Making Dinosaur Plushies!
Tumblr media
Hi, I am Ria and I revived my tumblr. You might have stumbled over the cute dinosaur plushie picture and want to sew one of your own? You can do that! I‘ll tell you how I did mine :)
I found the sewing pattern for our dinosaurs during one of my late night, sleep avoiding pinterest scrolls. It was kindly provided by VirginieLaTeste under the following link:
Now, some of you may know that I work as a media technician at a university makerspace. This means I usually work with machines like laser cutters, 3D printers and embroidery machines. I wanted to find out if I could make a plushie, using the gadgets that I have and share my experience with my students.
So the first thing I did was open the sewing pattern in a vector program. I used Inkscape for this, as its free and open source. I used the path tool to trace the sewing pattern. I also designed some extra spines for the back. Having the images vectorized is necessary for the next step, putting the fabric into a laser cutter. I discovered that laser cutting minky fabric instead of using scissors gives me the advantage of not having to deal with loose hair everywhere, since I only nick the fabric from the back. Plus, since minky is made from polyester, due to the heat the fabric doesn‘t fray. Since my image is now also in vector format, I can scale and resize the sewing pattern to my needs. So what I naturally had to try next was pursuing how big or small can I actually make my dinosaurs? My only limitation in this case was the size of my laser cutter, which is 430x720mm in dimension, for the smallest dino it would only depend on my sewing skills :D
Tumblr media
Tumblr media
After I cut the fabric, I used an embroidery machine for the litle dinosaur scales. I designed my embroidery file with a program called hatch embroidery designer. This program is not free, but theoretically you could do such an easy design also with an inkscape plugin called inkstitch. For embroidery I used a sandwich technique - embroidery felt on the back of the fabric and wash away embroidery foil on top of the fabric. this makes for cleaner embroidery since the minky hair is pressed flat under the foil and doesn‘t show in the stitches. For the biggest dinosaur I also tried appliqué technique for the scales and eyes, which makes the dino very soft to the touch.
Tumblr media
Sewing the dinosaurs wasn‘t easy. I think felt or other fabrics might be favourable for first time projects because minky fabric is really a nightmare to sew with a sewing machine. I needed lots of pin needles because the fabric kept sliding over itself and didn‘t stay in place and sometimes the machine ate my fabric, which is frustrating. But I gained experience and after some getting used to, my dinosaurs were ready. The smallest dinosaur fits just the palm of my hand, I was sewing him by hand, which took about an evening.
I hope you guys have fun making your own!
Tumblr media Tumblr media Tumblr media
28 notes · View notes
taeyungie · 2 years
Note
Hello! How are you? I'm sorry to disturb you, but I discovered your Tumblr profile not so long ago and I love your gifs, they're so beautiful! I wanted to ask you how you make them, what programs do you use and how to do them in order to upload them on Tumblr and make them work. I used to upload myself lots of gifs back in the day, but they were so bad and I always had problems with them not moving on the post.
I hope I'm not bothering you with this question. Thank you in advance for your response and I hope you have a great day!
oh, hello! 🥰 i'm doing alright! thank you sooooooo much for appreciating my gifs, it really means a lot to me 🥺 of course i will help you, as much as i can and don't worry you could never bother me!
first things first, i will provide you with some links to tutorials, my own gif making process was built on a bumpy road and by a method of trial and error LOL but don't worry if it happens to you too yeah? we're here to learn. here is my tag where i post or reblog photoshop/gif related stuff (there is not a lot but i will have to reblog all the tutorials i have in my likes, but that for later LOL) personally i use photoshop cc which i downloaded here, but in the tutorials i will leave for you you'll have a lot more of the versions and links to choose from. i use avisynth to resize my gifs without losing quality (download and tutorial) and a software called topaz denoise and clean which is a plug-in for photoshop, for quality control of my gifs, to get rid of ugly noise (download). and here is a tutorial how to use both in order to sharpen gifs properly. here is the first tutorial i would like you to check out, it's most similar to my own process because it includes both things i just mentoned, next two tutorials i recommend are this and this, they are amazing and everything here is basically covered, with exception there is a different process to it than mine because i rarely use screencaps to upload clips into photoshop, but it's a great way as well so definetely give it a try because you might like it more. as to why your gifs did not move after uploading, there might be a lot of reasons, starting from too large file (the limit is now 10mb) or lack of loop on the gif etc., but hopefully these tutorials will help you figure out what went wrong, i'm sure they will answer all your questions! 💞
here is also some additional tutorials for coloring: 1, 2, 3, 4
and something that might help with the issue you mentioned: 1
if you had any more questions in the future i will be always happy to help 🥰 have fun! thank you again and have a wonderful day as well please! ❤❤❤
9 notes · View notes
cherry-bomb-ships · 2 years
Note
How do you make good quality gifs? What tools do you use, and what's your process?
Aww are you saying my gifs are good quality? Thank you Lex! 🥺💝 Now I apologize in advance if I got a bit carried away here but I do really love explaining how I make things! I find it fun! :3 So I made a gif just for this post so I could show my step-by-step process! Enjoy, I hope this was helpful and please feel free to come back at ANY time with more questions! :3 Here's my process for how I made this gif here:
Tumblr media
So I suppose step 1 would be downloading the source of whatever you wanna gif as an mp4. I already had all the Crash 4 cutscenes downloaded, but back when I got them off Youtube I used this website here. It can also be used for mp3s! Just make sure you've got your uBlock Origin ;3
Next I'll pop it into my video editing software of choice, Movie Studio Platinum. It's a simple but efficient editing software and I mostly chose it cuz it's a one-time purchase and not a subscription, plus I got it on sale for only $50. Right now its full price is $99 but its still a very good program and even has a cheaper alternative (albeit with less features.) Go check 'em out, I've been using em for years and have been pretty happy with it.
Anyways, with the mp4 in the timeline, I'll highlight the moment I want saved in the Loop Region, and then render it as a sequence of images. Here's what that looks like (this might be hard to understand if you've never used the program but well. There you go :P )
Tumblr media
The bottom line here is I turned a clip into a sequence of images, and while this is my preferred way to do it, you can also make gifs out of mp4 clips, so it's up to you on how you wanna do it!
Next is the fun part- finally making the gif! One of my favorite gif making websites was actually taken down recently, so I've been using EzGif.com for a while and it's pretty quality, plus I already used it to optimize gifs after making them so it's nice as a one-stop shop of sorts :3
Once I upload the images onto the site, it will automatically take me to the page seen below, where it will ask how many frames I've uploaded I want included in the gif (uhh, all of them, duh), and at what speed I want it to go at, called the Delay Time. I think the normal delay time of 30fps gifs is about 3 or 4, but I like making mine a little bit slowed down so you can really savor the animations.
Tumblr media
At this point the gif has been created, and I'll make some little last minute tweaks to the colors. For this one I raised the brightness and contrast just a little bit.
The gifs are usually pretty big when first made (this one started at like 20mb) and Tumblr's limit is, I believe, only 10mb. I like to shoot for making my gifs around 5mb cuz the smaller they are, the quicker they load and smoother they run. I'll usually start with downsizing it - this gif I downsized from 1280x720 to 720x405, and that already cut the file size in half! I might resize it more if I feel like I need to do so, but next I'll optimize it with lossy compression and that typically gets the job done. I typically only have to set the compression to between 10 and 30 and it compresses it the rest of the way. All that's left is to download my finished gif, and voila!
Tumblr media
Thanks for reading, I hope this was helpful and again, feel free to ask any more questions you may have! :3
3 notes · View notes
uitzinnigmp3 · 3 years
Text
Tumblr media
hello all! so i’ve been making gifs on my sad little ipad air 2 for almost 2 years now, and i’ve learned quite a lot in those times, often through trial and error. i know there’s lots of people out there wanting to learn how to gif, but not being able to afford a laptop, or not being able to download photoshop, etc. so i thought i’d share what i’d learned about giffing on iOS devices! note: i don’t have and have never had an iphone, so i am not certain about what works for them, but i guess that anything which works on an ipad, will also work on an iphone! so with that said, let’s get into it :)
this is going to be quite a long and image-heavy tutorial, so i’ve put the rest under a read-more :)
you will need:
an iOS device (not sure how this works on all devices, but i think as long as it’s still receiving software updates, you’ll be fine!)
app: inshot
app: vont
optional: a VPN
youtube app or download folders (will be explained!)
these are all the steps i go through when making a gif and the apps/websites i use for them. in this post, i’ll be explaining all of them:
choose & download video (youtube/mega/gdrive)
trim & crop video (photos app)
colour & overlay (inshot)
text (optional) (vont)
convert video to gif (ezgif)
resize (optional) (ezgif)
post! (tumblr site)
without further ado, let’s get into it!
1. CHOOSING AND DOWNLOADING THE VIDEO
there are two ways to find and download a video to gif: through youtube or through download links like mega or google drive. here, i’ll be explaining both of them.
1.1. downloading via youtube
first, find the video that you want to gif. always make sure the quality is high enough! 1080p is the best, and you should always try to find it. 720p is also doable but really the minimum, anything below that is basically not worth it. 
copy the link of the video you want to gif, then go to https://yt1s.com/en130 to download it. (you may need an adblocker to block the popups, but clicking them away works as well, for the rest the site is super clean!)
paste the link into “search or paste youtube link here” and press convert, then in the drop down menu, select the highest quality possible (preferably 1080p, as said before). 
Tumblr media
press “get link” and then press “download”. a popup will appear, asking you to press download again. if you press this, an arrow symbol will appear next to the search bar at the top. press this symbol, select the video, then press the “send” symbol and choose “save video”. the video is now saved to the photos app!
Tumblr media Tumblr media
1.2. downloading via download folder
download folders work in a pretty similar way to downloading youtube videos, the hardest part is just finding the folders! for this, i recommend either asking some friends or mutuals (especially if they make high quality gifs – very likely that they’ll have some hq torrented shows or movies) or look around on several download or logoless twitters, like downloadinhd, logolessdesires or logolesspro. these accounts do often compress the files, so the quality might be a bit lower than it should be, but it’s definitely better than nothing! 
both mega and google drive folders work basically the same way: select the file you need and find a download button somewhere. after this, it’s basically the same steps as the last part – find the video in the download part next to the search bar and save to photos.
TIP: if mega stops you from downloading because you’ve exceeded the download limit, you can use a vpn to mask your IP address! some free ones are windscribe, justvpn and urbanvpn, but if you have some money to spare, there’s excellent paid ones like expressvpn, surfshark or freedome.
2. TRIMMING AND CROPPING VIDEOS
we’ve found all the episodes or videos we want to gif! cool, now it’s time to find all individual scenes so that we can start editing. to trim and crop the videos, you don’t need a new app, this can just be done in the normal photos app! 
if you already have an exact scene in mind, you can just go to that timestamp immediately, but if you’re still not sure, just scroll through the video to find some good ones. to trim the video down to the scene that you want, use the edit function and move the arrows at both sides of the video to the exact start and end point of your scene. if you want to be more accurate, press and hold the arrows to lower the timespan that they are editing at that moment. 
Tumblr media
after you’ve trimmed the scene you want, go to the cropping setting and choose a predetermined ratio to crop the video in – this way, all the gifs you crop will be the same size. i usually use 9:16, 4:5 or 3:4, but anything works!
Tumblr media
3. EDITING (COLOURING/OVERLAY) editing!
now we’ve done the boring stuff, we can start having fun !! we’re gonna start colouring the video now and optionally adding an overlay, which we’re going to do with the app “inshot”, which you can download just from the app store! this app has a pro-version which unlocks some of the editing options and removes ads but it works just fine without – i would only consider buying it to remove the ads but just putting your device in airplane mode fixes that as well, so it’s not really worth it imo! this app does both editing and overlays, so i’ll be explaining how both of those work. 
first, start by pressing “create new video” and choosing the clip you just trimmed and cropped.
Tumblr media
3.1. editing and colouring the video
all actions to edit the video can be found at the bottom. first, start with slowing down the video to about 80-60% of the original speed, it looks much smoother and nicer in a gifset! 
after this, you can start colouring, by going to filter > adjust at the bottom. this gives you a new set of actions to use. 
Tumblr media
first, put up the sharpness to about 20-30, depending on what looks best. don’t go much higher than this though, it won’t look great lmao.
then play around with the brightness, contrast and saturation. you can do a lot with these already: to make a black and white gif, for example, turn down the saturation completely and up the brightness and contrast a bit, it’ll look great already! if you’re not satisfied yet, though, don’t worry, all will be fixed in the next step.
we’re getting to curves now! they are the best thing in this app and pretty good for a photoshop replacement as far as i know. for this part, i can’t really tell you how to do it, you’ve just gotta play around with it for a while and get a feel for it! it takes some time, but practice definitely pays off.
Tumblr media Tumblr media
3.2. adding an overlay
to add another video to the video you’re editing, press the “PIP” (picture in picture) action in the main menu. choose the video you want to insert and also slow this down to about 80-60% of the original speed. try to make sure both videos are about the same length, so you won’t have to trim it down again after you’re done. 
Tumblr media
after this, size the video and move it to where you want it, then use the “mask” function to make sure only the part of the video that you want to see is shown. dragging the little symbol at the edge (shown below) lets you “blend” the edge of the video so it’s less of a line, more of a gradual transition
Tumblr media
optional: you can also use the blend function on the PIP video to make it blend with the base vid! it doesn’t always look nice but there’s loads of different options to work with.
once you’ve positioned, masked and blended the video how you like it, you can edit it in the same way as the base video! once again, choose filter > adjust and follow the same steps used for the other video.
Tumblr media
once you’re satisfied with the entire video, press the “send” icon at the top right, make sure the resolution is set to 1080p, and save! now you’re done colouring, it’s time for the next part (which is optional but very fun): adding text to your video.
Tumblr media
4. ADDING TEXT
this is my favourite part! for adding text to your gifs, download the vont app from the app store. once again, this app has a pro version, but unless you really need to add more than 4 textboxes per gif, the free version works fine! the ad problem can again be fixed by just putting your device in airplane mode, and even the four textboxes per gif problem can be worked around by clever placements and multiple sentences in one box. now, let’s start!
open the app and press the video icon at the bottom, then choose “load new video” and select the video you edited in the previous step
Tumblr media
press anywhere on the video; a pop-up saying “add text” will appear. press this and type the text you want in the textbox that pops up
choose the font you want in the “font” menu - there are not going to be any fonts in the “my fonts” section when you start, these can be downloaded from various font packs readily available on tumblr (i recommend checking @fontarchive out for something to start with! if you would like more, feel free to hmu, i am sure i have some links laying around)
to download a font, get a dropbox link or any other link, press a download button somewhere on the page and it will be saved to the “files” app
to add the font to the vont app, find the font in your downloads, open the file, press the send icon at the top and then choose “open with vont”
the app will give you a button saying “add to vont”, press this button and you’re done!
Tumblr media
change the size of the text with the “size” button, then slide it around or use the “move” option to position it to where you want it (tip: use “layout” to get a text to be positioned exactly in the middle)
you can tilt the text as well, and curve it to form a circle if you want (make sure to swipe the actions menu, the curve option will show up!)
Tumblr media Tumblr media Tumblr media
use the “style” option to change the colour, drop shadow, stroke, background, spacing and blending option of the text (another tip: always add a drop shadow to the text! it makes it so much easier to read, and if you change its colour, it can be part of the colouring of the set as well)
Tumblr media Tumblr media Tumblr media
when you’re done, press the send icon in the bottom right corner. first, press “save project” – this will save your progress in the app itself, so that if you notice something wrong after you’ve saved the video, you can always go back to change it. after that, press save video, and the video with text will be saved to the photos app!
Tumblr media
5. CONVERTING TO GIF
now we’re done with the fun parts sadly, here comes the tedious part lmao: converting videos to gifs! this is one of the last parts, we’re almost there :)
open the website https://ezgif.com/ and go to the “video to GIF” tab in the header
upload your gif in the “Select video from your computer” box (then press “upload video”)
under the video, there is a drop-down menu to choose the size. now this depends on what size your gif is going to be in the gifset, but if you want only one gif per row, choose the 540xAUTO option (this also has “for tumblr” behind it, so it’s easy to find slfjdslk) if you are going for more gifs per row, just leave the setting as is, we will fix this next
under that is the frame rate option. i usually switch between 12 and 20 FPS, depending on the size of my gif in the end (it has to be under 10Mb for tumblr to upload it to a post)
if you’ve done this, press convert to GIF and longpress the converted gif to save to your photos app!
Tumblr media
6. RESIZING (optional)
we’re almost done, just hang in there!! now we’re going to resize the gif if needed. this is because if you want to put multiple gifs in one row, they need to be a certain size, otherwise tumblr will compress the gifs and they will show up in a much lower quality. this post shows exactly what the dimensions should be per amount of gifs per row!
to resize the gifs, you can stay on ezgif, but this time choose the tab at the top that says “resize”
upload the gif in the “upload image from your computer” box
fill in only the width dimension (the height one is not needed!) and press “resize image”
once again longpress the resized gif to save it to your gallery
Tumblr media
7. POSTING 
the final part! this part i also love, especially because i love editing the caption hehe, though deciding what to tag the post is not my favourite part lmao. for this part, a tumblr app is not recommended, as it does not have the different post types needed for a gifset, so we’re doing it on the website!
go to the tumblr website and log in
press the new post button and choose “photo”
upload your gifs to the post
if you have a laptop available, save the post as a draft on your apple device, and edit the caption and tags further on that laptop (it works much better!)
if you don’t, editing on mobile works fine as well, but it won’t let you add html captions (so the nice colourful gradients some people have, etc) but it’s obviously not required to do that, so this works fine as well!
tagging the post can be quite tricky, my go-to strategy is tag all the characters, ships and fandoms first, and then tag all sourceblogs that apply (some general ones are bbelcher, chewbacca etc. but there’s tons of sourceblogs for almost every fandom out there if you know how to look for them!) and lastly, tag some friends who will definitely like the post, so that they will surely see it :) it’s also smart to use a tag for your creations like mine, mygifs, *mine etc. so that you can easily find them all back!
when you’re completely satisfied with your caption and tags, press post, and.. you’re done!
i really hope i’m able to help people with this ! i spent a lot of time on this so even if you won’t use it, i would very much appreciate a signal boost <3 if anyone has any questions feel free to send me an ask or a dm, i’d be happy to answer all your questions! 
lots of love and happy giffing, sas <3
55 notes · View notes
rizahawkais · 4 years
Note
Hi Nia! You're gifs are so pretty! Is it possible for you to show how you get your WandaVision gifs too look so clear and hd? And how do you do your colorings too? (specifically the wanda maximoff in episode 3 gifset ITS GORGEOUS) I'm new to giffing and all the tutorials are kind of old. It's okay if you don't want to though! I understand it may be time consuming.
omg no! never feel intimidated to ask!! i don’t mind at all!
so, i’m going to show you how i made and coloured this gif
Tumblr media
mostly bc it’s the only gif in that set w text and i’m going to share my text settings too!
tutorial is below :)
WHAT KIND OF VIDEOS ARE BEST?
.mkv files (the bigger the better BUT i usually think anything above 5 gb is excessive and unnecessary for an episode of television BUT for a movie worth it) itunes downloads (logolesspro on twitter, hd-source on tumblr, live-action-raws on tumblr have some DEPENDING on what you’re looking for) (also, there’s a chance that if you search "show/movie hd download tumblr” you’ll find a tumblr with its itunes download available)
THAT IS IT NO OTHER TYPE OF FILES MAKE YOUR GIFS LOOK GOOD
- my suggestion is always if its new (like just came out the past month) t*rrent it! it’ll be downloaded quickly and .mkv files look the best! BUT if not check the sources above see who has the BIGGEST file if they even have what you’re looking for and then if not then you look to t*rrenting!!
here are the wandavision files i use so you can see!!
Tumblr media
SCREENCAPPING
-if you have windows use potplayer! i have a mac so i can’t show you how to use it and it’s not available for me :( HOWEVER back when i had a windows potplayer was the best method in screencapping!!
-I HAVE A MAC! so i use mpv!! (go to mpv.io and follow the directions) BUT DON’T DOWNLOAD THE LATEST ONE (it has a bug that skips frames) try each before the latest one bc from what i heard different ones work differently for everyone!! and i don’t know which one i use (yikes!) THERE ISN’T THAT MANY I PROMISE AND IT’S WORTH IT BC MPV IS THE BEST (i used to use adapter but they didn’t take impressive screencaps in my opinion and it was evident in my gifs you can see it too! )
create a folder for your screencaps! and make sure to rmb the directory order! now we want to create a text file on our built in textedit app on mac! type up all this down below (i like jpg but you can replace jpg w png if you want) AND SAVE THE FILE AS mpv.conf THIS IS IMPORTANT SO DON’T FORGET IT! save it somewhere you’ll find easily and NEVER delete it until you don’t use mpv anymore
Tumblr media
just in case you don’t know what to insert after, go to your screencaps folder
Tumblr media
now you want to open mpv and go to the corner towards mpv -> preferences and they’ll tell you that there is no .conf file SO GO LOOK FOR THE TEXT FILE WE JUST MADE AND DRAG IT TO THE FOLDER THEY OPENED FOR US AFTER SAYING THERE IS NO .CONF FILE
(i learned all this from @kylos tutorial!! so if any of what i just said about setting up mpv makes NO SENSE to you check out their tutorial at kylos(.)tumblr(.)com/post/178497909311)
now we can screencap!
so let’s find the scene we want RIGHT BEFORE and MAKE SURE SUBTITLES ARE OFF
Tumblr media
i pause and then press (option/alt + s) and then SCREENCAPS ARE BEING TAKEN!! and to end the screencaps being taken you once again press (option/alt + s)!!
Tumblr media
now we want to delete the excess frames! and put it all into one folder!! DO NOT DELETE FRAMES IN THE MIDDLE OF WHAT YOU WANT TO GIF!! WHEN YOU SKIP FRAMES IT WILL BE NOTICEABLE!!
Tumblr media Tumblr media
MAKING THE GIF
this method isn’t used that much BUT I LOVE IT so this is how i put my frames in! first i check to see the size of my frames: 1920 x 1080
Tumblr media
so i create a NEW file on photoshop with those dimensions w these settings
Tumblr media
now i set my tool on photoshop to path selection tool bc if you have it set on smth like move tool or crop tool at the end you might end up moving or cropping frames you don’t want to!
Tumblr media
ok so now we select ALL our frames and drag it on top of our new file on photoshop and the MOMENT we see our first frame in photoshop JUST KEEP CLICKING ENTER until all the frames are loaded!!
Tumblr media
you can do file -> scripts -> load files into stack but it is WAYYY slower in my opinion!
now i crop out the excess BUT i don’t resize the gif yet! the dimensions wandavision is filmed in is 4:3 so i go to crop and set the settings to this:
Tumblr media
MAKE SURE IT’S ON RATIO SO WE’RE PRESERVING THE ORIGINAL SIZE JUST CUTTING OFF THE BLACK EDGES!! We are going from 1920 x 1080 to 1440 x 1080 this is the dimensions after i cropped
Tumblr media
WE ARE KEEPING THE QUALITY BY NOT CHANGING THE DIMENSIONS OF ANYTHING INSIDE !!
now we want to go to actions and create an action!! open up actions w one of these two depending on what your dash looks like!!
Tumblr media Tumblr media
so we create an action with this button on the bottom of actions and we’re gonna title it making a gif and hit record!!
Tumblr media Tumblr media
NOW LET’S GOOOOO!!
1. make sure you have timeline on your dash!
Tumblr media
2. create frame animation (if you see create video timeline just click the arrow next to the button to see your other option which is frame animation!!)
Tumblr media
3. now let’s meet our best friend!! the little bar in the top right corner that has all the commands for making our gifs and MAKE FRAMES FROM LAYERS
Tumblr media
4. WE HAVE TO SHARPEN OUR GIFS NOW BUT TO DO THAT WE NEED TO CONVERT TO A SMART OBJECT SO NOW WE ARE GOING TO CONVERT TO VIDEO TIMELINE there are two ways: the button in the bottom left corner or the button in the top right corner w all the other commands!
Tumblr media Tumblr media
5. select -> all layers DON’T MANUALLY SELECT THEM ALL BC THE ACTION WILL ONLY SELECT THAT SAME NUMBER OF FRAMES SO IF THERE ARE MORE FRAMES YOU WON’T GET THEM IN THE SMART OBJECT!!
Tumblr media
6. filter -> convert for smart filters
Tumblr media
7. NOW WE SHARPEN!! (filter -> sharpen -> smart sharpen) i sharpen twice!! first, make sure we are on legacy w more accurate and remove gaussian blue! the first sharpening will be 500% with 0.4 px radius. NOW SHARPEN AGAIN (filter -> sharpen -> smart sharpen) also w legacy, more accurate and remove gaussian blur BUT this time 10% with a 10.0 px radius!
Tumblr media Tumblr media Tumblr media Tumblr media
8. it’s hd now!! so let’s flatten frames into clips!! go to the top right magic button again!! and you should see a pop up saying layers are being made
Tumblr media Tumblr media
9. now we convert back to frame animation w either the bottom left button or our magic top right command center!
Tumblr media Tumblr media
10. make frames from layers
Tumblr media
11. select all frames w our magic command button
Tumblr media
12. set the animation delay to 0.05 THAT IS THE BEST ONE ALWAYS ALWAYS ALWAYS only use 0.06 when the character is moving really fast in the video itself and it makes the gif itself look awkward BUT NEVER GO ABOVE 0.06 it’ll look slow and laggy and we don’t want that and don’t go below 0.05 bc then it’ll be tooo fast and we don’t want that either!
Tumblr media Tumblr media
13. now delete the very first frame on the timeline bc it is an oversharpened duplicate of the second frame! end the recording w this button!
Tumblr media
this is what your action should look like expanded! if you made mistakes on the way and it shows up you can just click the specific step and press the trash can on the action tab to delete in from the order!!
Tumblr media
NOW AFTER LOADING YOUR FRAMES AND CROPPING THE EDGES OF YOUR FRAMES IF YOU NEED TO JUST PLAY THE ACTION AND THEN YOUR GIF WILL BE MADE FOR YOU!!!!
now i delete some unnecessary frames in the beginning and end and this is what my gif looks like (the size was 46 mb and the limit is 10 mb so the dimensions of the gif are 540 x 405 to get it to 5 mb BUT I HAVEN’T CROPPED IT YET SO THIS IS ME CROPPING JUST TO SHOW YOU WHAT IT LOOKS LIKE)
Tumblr media
CROPPING THE GIF
in my opinion if you want your gif to look hd you shouldn’t crop before you sharpen!! i believe that if you crop before you sharpen you don’t allow photoshop to sharpen all the pixels whereas if you crop beforehand there is less to work with!!
dimensions is all up to you!! just make sure to go by tumblr rules!! 540 is the max width and if you want to make two gifs per row then my suggested width is 268 and for three gifs per row my suggested is 177 px! Just have the right width and the length can be whatever you want!!
now i’m going to crop my gif to 540 by 590!!
Tumblr media Tumblr media
NOW THIS IS WHAT MY GIF LOOKS LIKE!
Tumblr media
COLOURING BASICS
let me show you the best adjustment tools in my opinion and a brief explanation for what they do!!
brightness/contrast: pretty simple increase/decrease the brightness/contrast BUT one of my techniques for when i first start colouring a gif is i select all my frames and do nothing to the settings of the adjustment but i set the layer to screen LIKE THIS
Tumblr media
curves: ik others use curves to change brightness/contrast w the squiggly thing BUT i like it to set a white point and black point, this is also a technique i use when i first start colouring a gif when screen doesn’t look good for me SO you use white point to select a pixel on the gif to set as the lightest color on the gif (setting the white point) and you use black point to select a pixel on the gif to set as the darkest colour on the gif (setting the black point) usually the white point makes it TOO bright and that’s why we use the black point to counter it and same goes for when i use screen with brightness/contrast, it gets too bright so i use black point to counter it below is the button for white point and the button for black point, respectively they are shaped as color picker tools
Tumblr media Tumblr media
vibrance: generally, i never use this except for color p*rn sets but they work really well in making colors seem more strong
hue/saturation: like vibrance, i never use this except for color p*rn sets but this adjustment is to help change the colors or hue of a color for example: turn blue into purple or turn a blue into a little lighter shade of blue
color balance: I ALWAYS USE THIS!! except for in black and white gifs BUT THIS IS MY GO TO AND IF I DON’T USE IT MY GIFS ARE JUST BLAND i feel like color balance is what essentially balances the colors on your gif and adds dimension to it, it makes your gif go from looking way too yellow to a more golden neutral look and it is an essential adjustment in my opinion
channel mixer: i rarely use channel mixer BUT it is so so useful when you are working w a dark scene just play w the settings and all of a sudden all the blue in a dark scene will be a little more yellow and red and your scene will kind of just look brighter and more visible
selective color: THIS IS ALSO AN ESSENTIAL this helps SPECIFIC colors pop you’re working on a scene where there is too much red on someones face you use this tool to remove the magentaness from the yellow section OR when you feel someones face is TOO yellow and needs more blush you add more magenta in the yellow section of selective color
gradiant map: gradiant map is perfect when you’re lazy if you feel like your gif looks more neutral and you want some red in it but you don’t want to mess with any other adjustments just set a red to black gradiant on soft overlay with a very low opacity and BOOM slightly red but not too much red added!
NOW TO COLOR THE GIF!
today i have decided to start with a brightness layer set on screen
Tumblr media
and this is what we got!
Tumblr media
now that’s a little to bright and washed out in my opinion SOOOO to counteract it, i’m going to use my black point tool in curves and i’m going to select this point on the gif (it’s better to choose smth in the background and not smth that’s paid attention to such as monica’s hair or either of their eyelashes)
Tumblr media
now my gif looks like this! the base color is complete!
Tumblr media
now i think i need to balance all this yellow and red! SOOOO WE GONNA USE COLOR BALANCE!!
i think the best way to use color balance is to keep swinging the balancer until you see what you like and then keep going midtones i think i want more red and i don’t want a cyan midtone and then for shadows i think i want more cyan to counter the redness of the gif but highlights i don’t touch that much NOW HERE ARE MY SETTINGS SO YOU CAN SEE
Tumblr media
and this is what my gif looks like
Tumblr media
now you can stop here if you want but in my opinion i think the gif looks a lil too dead still SO IMMA USE SELECTIVE COLOR
i think there needs to be a lot lot more RED so i amp up the yellow magenta and black in the red! but i also think the yellows need to be LESS RED so i remove magenta from the yellow! and bc there’s some cyan and blue bc of monica and the flowers in the background im going to make the cyans more cyan and the blues a lil more black! i’m going to remove some yellows from the magenta!! and i add more black to the neutrals and black!! i think it’s always important to add more black to neutral and black bc it adds more depth to the gif by not just making it a bunch of bright colors and having dark colors to contrast to!! my settings are below!
Tumblr media
and the result!
Tumblr media
now let’s see everything together!
Tumblr media
and the before and after!
Tumblr media
I HOPE MY COLOURING EXPLANATION MADE SENSE!! if not you can always ask me more questions i don’t mind!!
ADDING SUBTITLES
we want to grab the text tool!
Tumblr media
make a text box from anywhere in the middle from the left to right edge. this is so we can make sure our text is centered and will be in the same place for when we have sets w more than one gif w text!
Tumblr media
type your text out and make sure you highlight the whole text so that all the settings apply to EACH character! you can find the alignments (for center) in the paragraph tab!
Tumblr media Tumblr media
now lets right click on the text layer and go to blending options! add stroke and drop shadow!
Tumblr media Tumblr media Tumblr media
now drag it to the desired height you would like and make sure to keep it in mind for when you have more than one subtitled gif in a set!
Tumblr media
NOW TO MAKE SURE THE TEXT STAYS IN PLACE AND THE BLENDING STAYS YOU HAVE TO CONVERT TO SMART OBJECT!!
Tumblr media
if you want to only have the text applied to certain frames instead of all frames, select the frames you don’t want by clicking the first frame in ur don’t want section ON THE TIMELINE and WHILST HOLDING SHIFT click the last frame of ur don’t want section and then toggle the eye switch next to the text layer
now you see the text
Tumblr media
now you don’t
Tumblr media
tip: use opacity to fade the text in and out!
the text is going to be on all my frames so i don’t need to toggle the eye but i just wanted to show you just in case!!
now here’s my FINAL RESULT
Tumblr media
save for web (file -> export -> save for web) 
your gifs have to always be under 10 mb! so, if your WAYYY overboard YOU HAVE TO DELETE FRAMES! or you can divide the gif in two and have two gifs instead of one! however, if you plan on going the deleting frames route MAKE SURE YOU DELETE FROM THE BEGINNING OR END OF YOUR SELECTION i promise you that most of us won’t notice that your characters dialogue is being cut off BUT WE WILL NOTICE IF FRAMES ARE BEING SKIPPED so, don’t delete frames in the middle of ur gif!! idc how little you do it IT WILL RUIN YOUR GIF AND I SAY THIS FROM EXPERIENCE i would delete every fifth frame to cut down my gifs and that may seem like not that big of a deal BUT IT IS my gif looked choppy and poor so it is way better to cut from the end/beginning of the gif
ANOTHER LAST PIECE OF ADVICE in the bottom left of when the save for web menu shows up THERE’S A PREVIEW BUTTON click on it! it’ll show you your gif on your default browser and show you what it’ll look like once uploaded! this is perfect to check the speed of ur gif and the colouring and to notice if there’s a problem with your subtitles or maybe there’s an obvious jump in frames you never noticed before!! i always use preview bc the built-in photoshop viewer of ur gif shows the colors differently and the speed is NEVER ACURRATE!
I USED THESE SAVE SETTINGS!! many say to use selective pattern but i DISAGREE and i think these save settings are the ✨ best ✨
Tumblr media
OK NOW THAT IS THE END OF THIS VERY LONG GIF TUTORIAL!! I HOPE THIS IS WHAT YOU WANTED!! IF YOU HAVE ANY QUESTIONS DON’T BE AFRAID TO ASK I SINCERELY DON’T MIND!! JUST DON’T BE RUDE OR ANYTHING BC PPL HAVE BEEN RECENTLY :(
I WISH YOU ALL THE LUCK AND FUN IN YOUR GIFFING ADVENTURES !!
405 notes · View notes
Text
GIF Making/Sharpening/Colouring Tutorial
hi all! i’ve been asked many times to talk about how i sharpen and colour my gifs so today i will be doing a step by step tutorial on how i do
what you need: 
photoshop (i use a constantly updating one)
a video of some kind
space in your computer
difficulty: medium 
before:
Tumblr media
after:
Tumblr media
step one: download a video that is 720p-1080p
this is a fairly simple step, however, DO NOT DOWNLOAD IN 4K. what this tends to do is make the frames longer and blurrier whenever you’re attempting to sharpen them than they actually are. i usually pull videos from youtube or use quicktime to screen record videos. there are also lots of resources for videos that are kept on google drive.
step two: in photoshop, go to file - import - import frames to layers
to import frames to layers, you want to have a .mp4/.mov of some kind. i prefer the quality of mp4 over mov because it tends to create better spacing between frames, but mov still looks good!
Tumblr media
step three: in import frames to layers, pick the relative part you want to gif.
only pick the first gif you want to make. a lot of times photoshop will run slower on older computers due to the processors within the computer. if you stick to only giffing one at a time, your computer won’t slow down as much.
Tumblr media
step four: create the frames, but don’t select “limit to every __ frames”
many people do this and will limit to every 2 frames. while this used to be needed because of tumblr only allowing a 1mb limit back in the day, the limit on gif size has increased to 10mb. the chances of you making a gif that is 10mb is pretty small unless it is large with a lot of frames. if you’re wondering why your gifs aren’t as smooth, it’s usually because you are limiting frames.
step five: make all of your frames .03/.05 sec long 
usually at this step after creating the frames they will come out to be .04secs or .02secs long. if you save a gif at this level it’ll look too fast. instead go to the far right of the timeline and select the three lined box, in this box you will see an option that says “select all frames.” after pressing it all of the frames will be selected and you can go to where it says .02/.04 and change that time. click “other...”, then type in .03/.05. you can chose to change this at your discretion and personal taste. this is just what i NORMALLY do.
Tumblr media Tumblr media Tumblr media
step six: now you want to crop and resize your gif as well as remove frames
these are the different proportions that i usually use:
for large full-width: 540x270
for 8 gif edits: 270x152
for longer looking full-width: 540x230
for full body: 270x330 or 270x300
for headers: 700x374
to crop, select the crop tool and get rid of any black edges or any part you don’t want of the image. then go to edit - image size. either do 540px or 270px and adjust the canvas size afterward based on if you had to input the width or the height to get the start of the proportion you want. this is also where you can test your gif to see if the frames are too many and can delete whatever you don’t want.
Tumblr media Tumblr media Tumblr media
step seven: creating a timeline 
now that you have the start of your gif, you would think we would move onto colouring, wrong. now we have to make your framed gif into a timeline one instead. in the animation toolbar there is a button next to where it says “forever” and you will click this button to convert the animation to timeline.
Tumblr media
step eight: sharpening the gif
okay now this is where it gets a little trickier. what you want to do is go to the top and pick select - select all frames after this all of the frames will be reselected. then click filter, convert for smart filters. this will make your animation all into one single layered smart object. 
Tumblr media Tumblr media
after creating this smart object go back into edit and select smart sharpen. the settings i use are pictured below but i will also list them out here: amount: 500%, radius: 0.4px, reduce noise: 50%, shadows and highlights: fade amount: 0, tonal width: 50%, radius: 1px
Tumblr media Tumblr media
now, click onto the layer you just sharpened. then right click and select duplicate layer. the shortcut for this is command+j. add a guassian blur to the object of 1px. then, make the layer 22-33% opacity. what this does is blur how sharp the effect is to make it seem more natural and clear.
Tumblr media Tumblr media Tumblr media
step nine: colouring
now that the gif is sharp, we can actually colour it. whenever i colour the first thing i do is make a selective colour layer. within this layer you want to go to neutrals first. change these settings based on how you want the environment and colours to look. less black makes the scene lighter, more makes it darker. also go to the white and black categories within the selective layer. i tend to put the black at nearly 100% depending on how dark the scene is, (if it is lighter i usually don’t want to darken it too much), because what this does is keep the noise out from the darker areas of the gif. i almost always also always put white and -100% black to get rid of any black that might be within the white parts of the gif to take the noise out.
Tumblr media Tumblr media Tumblr media
after this, i always add a curve layer to brighten and harden the gif. i then add another selective colour gif and adjust according to what just makes the gif look sharper/more colourful. obviously settings are going to be different for everyone, but i almost always use these at the beginning for a good base gif. after this selective colour layer in this scene i added a levels layer and defined more of where i wanted the light to go and the darkness/neutral light shifts. next i added a colour balance layer and changed midtones/highlights/shadows to sort of warm up the gif as well as make certain colours more defined. i then placed a vibrance layer to let the colours other than black and white stand out more. after this i added in another selective colour layer and i used this to brighten the cyan of the dress as well as change some of the red and yellow in the skin to make it darker and more defined. for some reason there was a hue of a blue shadow around the dirt and i wanted it to be black so i went to hue/saturation and changed the blues to being 100% black instead of blue so that the shadow would look darker.
Tumblr media Tumblr media
finally, as with any of my gifs, i added an exposure layer the settings for this layer are in its screenshot below. very rarely do i ever change from these settings but you can play around with them as you please
Tumblr media
step ten: saving the gif
i was asked many times how i save my gifs and the settings i use so here is how. to save, go to file - export - save for web (legacy). (it may take a moment for your gif to be ready to save but don’t worry this is normal.)
Tumblr media
make sure that within the save for web you have perceptual and diffusion selected for how you save your gif. at the bottom you also want to have bicubic sharper as the quality of the gif. as long as your settings look like mine, you’re good to save!
Tumblr media
step eleven: you may or may not need this step
occasionally, photoshop will play a trick where even though you saved your frames as .05secs it changes them automatically to .07secs per frame instead. to check this, reopen your gif, convert it to a frame animation, then look to see. you can easily just change the .07 back to a .05 and save for web again right after then replace the slower gif with the faster one
Tumblr media Tumblr media
and thus we have:
Tumblr media
225 notes · View notes
jemelle · 4 years
Text
how i make gifs
 @robins-gf​ asked if i could make a tutorial on how i gif, so here’s my best shot! this is just going to cover the physical act of gifmaking; if you want to know how to download videos and make your gifs as high-quality as possible for uploading, i’d suggest this tutorial!
this is also a photoshop exclusive tutorial because that’s what i have. a good windows link for photoshop is here!  download 7zip and you should be able to open the file (still looking for a good mac link though) 12/13/20 unfortunately this link no longer works
[edited to say: i forgot cuts were a thing when making this post lmao, so the rest of it is under the cut to save y’all from having to scroll through it]
Tumblr media
1. record your video. the shows i watch are all on netflix, so i record individual clips, although i know some people have entire videos downloaded. be aware that itunes goes black if you try to record it. if you don’t know how to screen record, google [your operating system] + screen record
Tumblr media
2. open photoshop and click file -> import -> video frames to layers, then select your video
Tumblr media
3. select the part of the video you want and click ok. if it’s a long portion, you’ll want to click “limit to every 2 frames,” but because i’m only capturing a small moment, i’ll leave it unclicked
Tumblr media
4. your workspace should look something like this! if there are frames you don’t want, now’s your chance to delete them: just select the frame in the timeline at the bottom and click the garbage can icon
Tumblr media
5. after you’ve trimmed your gif, you need to change the frame rate (otherwise it will go really quickly)
click the three little bars at the top of the timeline and hit “select all frames,” then click the little arrow below any individual frame and change the rate. my go-to is 0.07, but you might want to fiddle around depending on length
Tumblr media
6. with all the frames still selected, click “convert to video timeline” (in the bottom left of the timeline)
Tumblr media
7. once your frames have been converted, click select -> all layers, and then click filter -> convert to smart filters
Tumblr media Tumblr media
8. now technically at this point you’ve made a gif (remember to save it!) but i’m guessing at least some of you are interested in how i edit my gifs, so to start out, i add a bunch of adjustment layers (if you can’t see the adjustments panel in your workspace, click window -> adjustments)
my first step is usually levels, just to brighten the gif. sometimes i add curves or vibrance on top of that, and then i usually finish things out with a selective color layer. this is the part of the tutorial where you really want to rely on trial and error more than anything else.
9. once you’ve recolored your gif, you’ll want to crop and resize it. 9/10 times i crop my landscape gifs to 16:9 and my portrait ones to 4:5, but that’s totally up to you.
after cropping, i click image -> image size to resize the gif. my go-to is usually 300 or 600 pixels, depending on how many gifs i want to have in a row, but as long as it doesn’t exceed the tumblr size limits, you should be able to upload it
Tumblr media
10. to export your gif, click file -> export -> save for web. i can’t remember if i had to change my settings from the default, but you should make yours match mine
Tumblr media
11. et voila! you now have a completed gif to proudly post everywhere! i hope this was helpful, and if you have any questions or would like tutorials on specific things (captioning, adding text, etc.) please let me know!
33 notes · View notes
miloloveswrestling · 4 years
Text
How to gif ~
(a very partial tutorial)
Hey everyone, I’m Milo, fandom contributor since 1887. It had been brought to my attention that some of you might want to learn how to do gifs so I’m here to share the knowledge. Of course it’s only how I do gifs, and it’s not the only way, probably not the simplest way but heh, it’s mine.
First of all: you need to choose the couple of seconds you want as a gif. Seriously, it’s half the work. Think about how your gif will loop, what the first image (and thumbnail) will be and most importantly: work with your platform of choice’s limitations. 1 gif at a time on twitter, 440×220 min, 10 gifs on tumblr, 500px wide, 5Mo, etc.
Material:
Giffing Tool: a powerful tool, free of use but if you have a couple bucks to spare, it’s Pay What You Want.  
Photoshop: The portable CS4 version by Majax31 exists. It’s old but it  does a tremendous job, also, it’s light, ready to use and easy to find.  It’s still not legal though. I happen to use Photoshop CS4.  
Let’s say you want to gif a close-up of some Pro Wrestling Noah boys like any other sane person. Well, excellent choice!
Pause your vid a couple of seconds before the right moment, open Giffing Tool. GT works as a way to record your screen.
New > Hold your click to select the zone
Play your vid, don’t move anything. It looks like nothing is happening but GT is recording. When the scene you want is finished, tap esc and GT will compile your gif, give it a bit of time. The closer you are from the actual size you want, the less time it will take.
In GT’s window, you select the length of your gif a bit better (1), click the size to avoid losing quality in an unwanted resize (2) and save it with the appropriate icon (3, shortcut is S). Step 2 is super important, you need the actual size to be the same as the size your gif will get out. If GT change the size, you will lose quality.
Saving with GT takes time, you can continue to use your computer normally while it does, be patient.
Tumblr media
If you bought the full version of Giffing Tool, you can decide to resize your gif here and be done with it! But if you didn’t GT will add a banner you might want to cut with Photoshop or of course you might want to play with colors, size and decide on all the frames you want or don’t want, to the next level with you!
So yeah, now’s the time to edit your gif in photoshop! Hooray! After a lot of trials and error, I found some secrets to make this work. First open Photoshop then it goes like this:
File > Importation (down there) > Video frames to layers
I don’t know about the newer versions of Photoshop but you’ll need to write the name of your gif (with the extension) in the File Name to find it, it will not appear otherwise. Write it when you’re already in the right folder. By the way I remember now that you need Quicktime for this to work but it’s a pretty basic log so I guess this shouldn’t be a problem. Anyway, import it even if it does not appear (as long as you have the name of the file right, it will work): [Mark frame animation] must be checked in the next window and we’re good!
Now comes some work with Photoshop. Before you get started, you’ll need to get the animation window (Window > Animation). You only have to get it once, it stays in your setup for later uses. In that window you can check your gif frame by frame, delete duplicates (fair warning though, deleting too many duplicates will make your gif lighter but also will alter its rhythm, again, trials and errors, test everything!), decide on how fast you want your gif,
Another warning: what you change on the first image of your gif will apply to all the frames. If you wants to change only one, select the one and the layer associated with it. If you wanna change only the first, duplicate it (first icon in 2).
1/ You must use that tool to select the part of the image you’ll need. If you didn’t pay for Giffing Tool, you can use that tool to cut the banner they add. Once your image is selected, use Crop (here Recadrer). With Image Size (here Taille de l’image) you can resize your image depending of your platform’s limitations (on tumblr 500px wide).
2/ The animation window as I already said is super useful, you can delete, duplicate, move around frames.
Tumblr media
3/ Don’t get there too fast but this is where you can edit colors and light. Experimentation is key here. Only one thing I can add: remember to select the first frame in the animation window if you want your edit on all frames. BUT put your edit on an empty layer on top of all the other layers in the layer window. If you know nothing about photoshop, a word on layers: here Layer/Calque 1 is hidden, you can make it visible by clicking the empty square next to the preview. If you do that then do the same on Layer 2, layer 2 will hide layer 1. The layer on top is always the one showing first. You can also erase some parts of a layer to show the one under it. Everything is possible in photoshop! Add a frame on the first layer so it shows on all the other layers! Add stickers! Most importantly: try things! fail! learn from it and do it again! If you have questions, I’ll answer them as best I can.
Last thing I’ll add is how to save your gif. You need to use Save for Web... in the file menu. You’ll get a preview, on the upper right corner, change the second setting as GIF.
Tumblr media
1/ Check the format
2/ This is where you can check the size of your gif, super important depending on where you want to publish it.
3/ Save... You did it!!!!
It might sound complicated but it really isn’t that much, all the work you’ll do the first time will be useful forever, you’re learning a new skill but thankfully that skill is super easy to remember. And allows all sorts of awesome things! A whole new horizon is opening!
@kazuchikaokada​ 😌 i’m not sure you’re gonna learn much with all that ‘cause your gifs are already so nice?! it depends a lot on vid quality I guess but really you’re probably already doing all that? Maybe if you don’t use photoshop yet it could give you a whole new set of possibilities?! Anyway, sorry if this didn’t help, I hope it’s still useful for someone out there anyway!
10 notes · View notes
hearttoshu · 5 years
Note
hi!! i just started out making gifs and bc yours are so lovely, i was wondering if you had any advice?? ty!! 🥰
yes of course ! under the cut ! these are just some tips,,, i might do a full blown gif tutorial if someone really wants me to lol 
video quality: 
i feel like the most important thing that people may not know is that when you’re making gifs, esp. for tumblr, the video quality is super important ! downloading the best quality videos is always the way to go :))
i use 4k video downloader for youtube videos and the rose bay for broadcast vids (these are tp files though so you need specific video processing software to run them) 
1080p or better is what i always use but if i’m desperate i’ll use a 720p vid too :’)) 
downloading directly from youtube is often better quality than twitter or insta vids so if you find a vid from there, looking for its youtube equivalent is mostly better in terms of quality !
video processing: 
i don’t recommend using a video processor until you know how to make gifs in just photoshop ..? idk when i first started gifmaking it caused a lot of confusion and you don’t need them to make decent gifs necessarily 
if you do though it’s avisynth for windows and vapoursynth for mac, vapoursynth has more options / tools in terms of denoise and sharpening but i don’t use it so i wouldn’t be able to tell you much
what they do is resize your video files to a smaller size, video sizes are huge usually ! but tumblr optimizes for very specifically small gifs (which is why downloading the best video possible is so important, when you reduce the file size you lose quality, so having the best quality video ensures the quality is as nice as possible) and these processors allow you to use tp/ts files as well as select 30fps vs. 60fps, and they reduce the file size for you, minimizing the reduction in quality better than just photoshop 
sizing:
remember tumblr sizes are 540px wide for one gif, 268px wide for two gifs in a row, and 177px / 178px / 177px for three in a row !
coloring & adjustments: 
gifmakers spend a majority of their time here because original videos are very rarely how you view gifs
find your own style and what you like and experiment lots ! coloring is fun and no two people do it the same way so test out everything and see what adjustments do what!
levels adjustments and exposure can be your best friend in terms of avoiding wh*tewashing ! if you keep saturation and vibrance high that helps a lot too ! 
again i think trial n error are the best ways to learn how you want to color ? there’s literally no limits in photoshop, you can do a whole heck more than you think !
sharpening:
i know a lot of people use topaz for cleaning and sharpening and i have like… not patience for topaz but it is honestly really helpful in certain instances
topaz denoise is what i usually use if i have to, it cleans up any noise or grainy gifs but it also removes details so it’s important to be very careful
i also just like photoshop’s smart sharpening function..? it has a noise reduction adjustment built in so it can help if you have no patience for topaz like i do 
frame rate delay:
i was legit just talking about how important frame rate delay is on twt lol
for 60fps vids the frame rate delay i use is 0.02 or 0.03, the slower (so bigger) your frame rate delay is, the possibility of the movement being slower and blurrier is higher as well
for 30fps i usually use 0.05 but 0.04 works too (sometimes i think the movement is too fast but this is one of those personal preference things)
i hope that was helpful anon… sorry for writing you an essay LOL
11 notes · View notes
obisanyas · 5 years
Note
hello meredith! your winona ryder gif pack was gorgeous, and it made me wonder if you would ever be willing to do a giffing tutorial? i'm trying to learn how to make my own resources, and i would love to be able to make gifs in the same high quality/gif pack style you do them in! hope you're doing well, and thank you for taking the time to read through this message!
thank you so much !!! i did .... not really think any of my gifs were good enough to illicit a request for a tutorial ASJDKF but what i do is fairly simple, i’ve included steps under the cut. i don’t know how well versed you or anyone else is in ps and making gifs, so this is a very comprehensive tutorial that goes through each painstaking step. 
first i make sure my download is in 720/1080p, preferably the latter as it just makes for better gifs. usually i use download (mega) links from logoless accounts, but sometimes use piratebay, and those are pretty much a guarantee for good quality video. if i’m downloading from youtube, i use 4k video downloader as an app on my computer. 
i then open imovie, or whatever the equivalent would be for a windows computer, and begin clipping. usually my clips are around ~20-40 secs of just my faceclaim to keep it simple when im importing. don’t worry if you get a pop up that tells you it will take a long time, but make it smaller if you get the one telling you frames will be limited to 500. 
then, i open photoshop and select import > video frames to layers > my file ... after that, i use the little sliders that show up to bring in a part of the clip, it should look like this when you open it if you have the essentials & timeline as part of your ps
Tumblr media
then, i resize my gif. if there’s black bars around your video, crop it down to whatever section of the actual video you want in the ratio of 16:9. if there are no black bars, chances are your video is already in that ratio. in that case, resize it! i personally use 245x138, but you can use whatever suits your fancy. 
then i retime my gif, by clicking on the three white bars over in the corner of the timeline. once you click on that, select ‘ select all frames ’ now, all of your frames should be selected. then you can click on any one of those frames ( specifically, the little drop down area by what would read 0.04 ) and your screen should now look like this 
Tumblr media
change that 0.04 to 0.07, and then click the leftmost corner of the timeline box. it looks like this. 
Tumblr media
it might take a while to load, but that’s okay. now you’re in timeline mode, and this is where things get more creative. first, select all your layers on the side of the screen. these formerly were your frames.  
Tumblr media
with either the first or last layer selected, command + shift + select the opposite of whatever the layer you had selected was — ex. if you had the first layer selected, then choose the last one, and vise versa. now all your layers should be selected. 
right click with all layers still selected, and choose the label that says ‘ convert to smart object ’
now it’s time to sharpen. you can either use actions ( here’s a tutorial for that, an old one but it all still works the same, and feel free to im me if you need additional help! ) or you can choose to sharpen yourself by going to filter > sharpen > smart sharpen. another good thing to use is filter > blur > gaussian blur. now, i don’t really have good ideas or settings for these because this isn’t how i make gifs. if you want the action i personally use, come to me off anon and i’d be more than happy to give it to you. if you don’t care and want any good actions, i recommend just hunting through the tags on blogs like yeahps or itsphotoshop. 
now comes the fun part ... and the tricky part. coloring. first, i always adjust the levels of my gif. i do this by doing layer > new adjustment layer > levels. when that pops up, pick the dropper icon that has the white coloring. then, select the spot on your gif you want to be white. in my case, it’s the white on winona’s shirt, but it could be brightness from a window, a particularly shiny spot on a forehead, snow ... whatever. 
Tumblr media Tumblr media
that brings you from the first gif to the second gif. better, but still not pretty. now, experiment with all the other types of adjustment layers that there are. i can’t really adequately explain what a specific gif needs unless i .... see it, so if you ever need help coloring a specific scene, feel free to message and and i’d be more than happy to help you out, though i am ... far from an expert. with all the adjustment layers added, my gif goes from this 
Tumblr media Tumblr media
and there you have your gif ! to get it to be that length instead of the entirety of what you imported, drag the grey bars of your timeline over to shorten the gif. only whatever is between them shows up as the gif. so, instead of mine spanning the entire thing, when i exported, it looked like this 
Tumblr media
after that, go to file > export > save for web. make sure your gif is under 3mb, because that’s the limit for tumblr. 
and that’s that! if you need anything else, lmk!
19 notes · View notes
michietuts · 6 years
Text
How to Use Avisynth For Gif Making
This detailed tutorial will show you how to use avisynth to convert, resize and crop videos in high quality for gif making. This is not a tutorial on how to make gifs in photoshop. I have also made a video tutorial in case you are a more visual/auditory learner.
Things you will need:
Windows OS
Avisynth installed with the video and plugin folder from this post.
*Optional* review original setup post (This may be hard to understand)
Photoshop or program that can export gif from video
Video
Patience
*WARNING PICTURE/GIF HEAVY*
This may seem like a lot, but when you practice, the process goes by much faster than what it may seem now.
Step One: Open your video with the .Bat file-
After every file is placed correctly and Avisynth is installed, you want to drag your video file into one of the .bat files in the video folder.
Tumblr media
You will probably not use the .bat files that are highlighted in red, but if you want me to explain their uses, message me.
.Bat Files Highlighted in Green: 
Normal.bat
Drag .ts/.tp video files into it
Creates 17 second video with original dimensions 
You will have to Crop and resize in photoshop
Normalwebm.bat
Drag .ts/.tp video files into it
Creates 17 second video
You can crop video and resize using Html Resizer
Normalwebmrange.bat
Drag .ts/.tp video files into it
Creates a custom trimmed video
You can crop video and resize using Html Resizer
Reencode.bat
If you make a mistake when saving your avs.avs script, edit and save it, and then double click on this bat to convert it to an .avi file
x264Lossless.bat
Drag any video file into it (.mp4, .mkv, .avi, etc)
Creates 17 second video with original dimensions 
You have to crop and resize in photoshop
Use this if you got an error using the other .bats
x264Losslesswebm.bat
Drag any video file into it (.mp4, .mkv, .avi, etc) 
Creates 17 second video
You can crop video and resize using Html Resizer
Use this if you got an error using the other .bats
*NOTE: You will usually get an error with the normal .bats if your .ts/.tp file is not mpeg-2 format so use x264Lossless .bats for those videos.*
I use Normalwebmrange.bat most of the time.
Tumblr media Tumblr media
Drag your video into the .bat you want to use. After opening your video with whichever .bat you want, a command prompt window will pop up. Here you enter the start timestamp. This is where you want your video to start. For normalwebmrange.bat, it lets you choose what time you want the video to end too. The rest of the .bats make a 17 second clip from your start time. 
*NOTE: Make sure you type the timestamp in HH:MM:SS format*
After the the command prompt is done (it takes about 40-60 seconds ), Google Chrome will open the resizer.html and here you will resize and crop your video
Step 2: Resizing and Cropping-
Tumblr media
In the Resizer you want to choose your gif size. By default it is set to 268px width by 350px height. You can set the width to any of the the Tumblr sizes and have the height be whatever you want. Then drag the lower right corner to scale the video and drag the video to fix the position. The opacity slider helps you to better visualize what your video will look like cropped.
Tumblr media
After cropping and resizing the way you want, you need to choose a Preprocessor:
None
Use this if you are using files that are not .ts/.tp files
QTGMC 30
Keeps original frame rate
QTGMC 60
Doubles frame rate which produces a smoother gif
*NOTE: I would use this option for 178px and 268px width gifs because more frames = higher file size. You might go over the Tumblr 3MB limit with bigger gifs*
Fast vs. Slow
Fast of course takes less time but is lower quality
Slow takes a lot longer but it is higher quality
Sometimes there is not a lot of difference in quality between the two. Test and see which one you like better. I use qtgmc 30 slow most of the time because i love placebos ): 
Tumblr media
Then choose one of the three resizers: resamplehq, debilinear, and dithertools. I normally choose “debilinear” because it makes the video sharper than the other options.
Tumblr media
Choose your desired options, add extra sharpening if you wish, and copy the text in the white box. If you want to crop in Photoshop instead, Do not copy the last line of text
Close the Html Resizer and the program Avspmod should open if it has not already done so
Step 3: Avspmod Trim Video and Save Script-
Tumblr media
Paste the text that you copied from the resizer in google chrome (on line 17)
*SUPER IMPORTANT NOTE: PLACE A “#” BEFORE QTGMC ON LINE 17. IF YOU DO NOT, WHEN YOU TRIM, AVSPMOD WILL FREEZE AND STOP RESPONDING*
And then if you selected QTGMC 60 in the resizer, remove the “#” from line 7. This will make sure that your video moves smoothly.
Tumblr media
Now trim your video. Click on the up arrow in the bottom left corner to show your video, and then scrub through the video to find where you want your gif to start and end. Press the home key on your keyboard (or go to Video > Trim Selection Editor > Set Selection Startpoint) to set the start, and then find where you want to end and press the end key on your keyboard (or go to Video > Trim Selection Editor > Set Selection Endpoint).
In the trim editor make sure you have my settings shown in the above, then click on line 8, and lastly press “Apply”
remove the “#” from qtgmc and save the script by pressing CTRL + S and close out of Avspmod
*NOTE: ONCE YOU REMOVE THE “#” DO NOT CLICK ON YOUR VIDEO AGAIN OTHERWISE AVSPMOD WILL FREEZE*
Step 4: Wait for VirtualDub to Process and Open the Output in Photoshop-
Tumblr media
After you close Avspmod, Virtual dub will start to process your video. If you want to see the progress, click on the virtualdub icon in the taskbar go to View > Show Status Window and you should see the current frame being processed, the time that has elapsed, and the estimated time it will take to finish.
*NOTE: IT USUALLY WILL TAKE 1-3 MINUTES TO CONVERT. Mine took longer because I had multiple programs running and I was screen recording*
After VirtualDub is done processing, you can find the output video in the folder titled “temp”
Tumblr media Tumblr media
Here is your video.avi file. Now you can open it in Photoshop, color it, use topaz, etc, and then you can export your gif. 
*NOTE: If you want to run this process again, rename the video.avi file to something else so that it doesn’t get deleted*
Final Gifs:
Tumblr media
These two gifs will be in my Edit Gallery. You may use/edit them as you please. I have put psds of the un-altered gif frames in my Tutorial Resource Folder
Thank you for reading this crap. I hope that you guys could understand. Ask me any questions and Have Fun Gif Making!
97 notes · View notes
lesbianelsas · 3 years
Note
Really like the look of your Catwoman Hunted gif set! The colors pop, the gifs are sharp, the files aren't huge. Would you maybe share how you made it? :) Thank you!
Thank you for saying that! I was actually not super satisfied with them, so it's a relief that someone thinks they're nice :')
As for the process, I gif with photoshop. I actually didn't do a lot with them at all, but I'll elaborate more below:
I wanted to keep the coloring pretty close to the original, so I actually didn't change that at all. So this what my layers look liked, which is far more simple than I usually do it for live-action stuff, where I do fiddle a bit with coloring usually:
Tumblr media Tumblr media
And most of that was basically increasing the contrast & brightness until I was happy with it. The exposure was the same:
Tumblr media
The reason I sometimes use exposure specifically is because it's a lazy (?) way to bring out the extreme lights and darks lol. So exposure really brings out the light and offset the dark, to give an image more contrast/punch.
As for the sharpness: I just do the usual "smart sharpen" at radius 0,3px with remove gaussian blur + more accurate.
Tumblr media
But, I made the gifs 600px wide, which is wider than tumblr's normal 540px width for gifs. That might seem like a strange decision! I just find that for animated stuff, normal sharpening & size makes gifs seem a bit too sharp or crispy, and I don't like the look of that. So if you make the gifs larger than normal, the tumblr resizing* makes them automatically look sharp in a smooth pleasant way. The only risk with making gifs larger than normal, is of course, the file size limit.
(*except tumblr resizing on mobile, I've never been able to figure out how to make anything nice on mobile dashboard at all, except keeping the file size really low i guess)
I would have taken a width of say, 650px or more, but these gifs were a bit long because they were action scenes, plus I wanted to keep the frame rate of the original to really maintain the fluidity in the gifs. So I had to make do with 600px :p.
I think that's it? Thank you again for the message haha. x
0 notes
minhyukie · 7 years
Note
A giffing tutorial would be great! I'm not at home atm and its been a while since i tried giffing so i dont have any specific qs to ask yet but i think i struggled with how to put them into frames? I think they sometimes froze and wouldnt move haha but yeah thx for much for the links and advice! I also rly struggled with finding good basic tuts so thats why i came to ask ^^
PLEASE DO A TUTORIAL ON GIFFING BC I SUCK AT IT SO MUCH PLEASE
fkdsjlfds alright!!! hopefully this is able to help u guys i know im not the best at explaining this but hopefully this will give you an idea :-) im going to do it using only photoshop (no kmplayer/vlc or any other software) and i use photoshop cs5 so depending on what version u have things might look a little different but it’ll be the same concepts!! anyway here’s a crash course in making a gif for the first time
1. get the video!! 
this seems like a simple step i know but if u wanna just use photoshop and not any other software as well it’s a LOT easier if you download a shortened clip of the gif! usually i download clips between 3-10 seconds long in order to make sure i get the whole scene i want. the two best websites to trim and download into an mp4 in one step are clipconverter and video-download, they both work for youtube videos and vlive and a lot of major video websites! and of course downloading the highest quality of video available (preferably 1080p or 720p) will make your gifs look nicer
2. importing it into photoshop
file > import > video frames to layers ! i believe u need quicktime installed for this to work properly!
Tumblr media
since your clip is already pretty short, you should be ok by just keeping it from beginning to end! if for some reason you were unable to shorten it or if you want to shorten it even more, you can select the range. dont limit the frames though! it will make the gif look choppy and less fluid!
3. adjust frames/timing
you should now see all of your frames in the animation bar at the bottom (if u dont see an animation bar go to window > animation and make sure its checked) and all of the frames as their own layers off to the right! on some part of the animation toolbar you should see something that looks like this:
Tumblr media
when you click on the four lines with the arrow, you should see a list of options! play through the frames you have and determine if you need to delete any of them at the beginning or end and u can do so by selecting the frames u wanna delete and under those options select delete frames. once u have just the frames you want for the gif, select all frames and then on any frame click on that 0.04 with the arrow and for the delay, select “Other” and put in 0.05s (or whatever value u want but usually 0.05s looks the best once you save it!)
4. cropping
Tumblr media
you can adjust the cropping size options at the top (it will look Something like this but it’ll depend on your version of photoshop!)
Tumblr media
the width dimensions for tumblr are 540px for one gif, 268px 268px for two gifs next to each other and i Believe 177px 178px 177px for three gifs next to each other! so here i’ll assume i’m doing a 268px width gif and you can set the height to whatever you’d like. if you set the resolution to 1px/cm like it shows right there, it’ll automatically crop and resize the gif for you!
so at this point with the cropping and timing it’ll look something like this:
Tumblr media
5. convert to smart object + sharpening
Tumblr media
this might be where u had a problem with the frames freezing? so first using that menu in the animation toolbar convert to timeline animation! then, after this, select all of your layers on the righthand side and then right click convert to smart object!
Tumblr media
after u convevrt to smart object it should only show as one layer! u should still be able to preview and play through the gif, if it’s frozen then u messed something up with the timeline animation part! so to sharpen here were the settings i used to use:
filter > sharpen > smart sharpen
Tumblr media
a lot of people use 500% and 0.3px … personally i never liked that but its up to u to play around with it!!
here’s what the gif looks like after this:
Tumblr media
if you compare this to the one above this one looks much nicer!
6. coloring
ok honestly i dont even Know enough to give u a coloring tutorial but that’s pretty much the only step remaining for ur basic gifmaking! honestly a lot of the time i only use brightness/contrast and color balance unless im trying to make a compilation set where everything looks super different but it’s mostly up to u to try different things out and see what looks good :-) or! you can find psds online where other people have shared their coloring settings!
7. saving settings
honestly the only important thing is that ur gif Has to be under 3 mb or it won’t play right on tumblr! other than that u dont really have to worry about anything here as long as your settings look something like this
Tumblr media
and then ur done! u have a gif! :-D
Tumblr media
i know i use a lot of words fdmsfds but trust me once you’re able to get through it once you’ll be able to go through the whole process in minutes!! and there are lots of other ways to go about these methods as well (tbh i dont even really do this anymore) but this is a good starting point and as u can see the gifs look pretty nice (in my . humble opinion)
happy gifmaking !!! and again if u had any more questions about this or anything else let me know!!
20 notes · View notes