hi! do you know how to add the new fonts to post text? ive been trying to add a particular word in a sentence to be in a new font but I want the rest of the sentence to remain small text font without the new font on it. hope this was clear enough and thank you ^-^l
hi nonny - if you want to change the font in a post on the dash you will need to use tumblrs ‘npf’ attributes - here’s a tutorial that will explain how!
if you want to change certain words in sections on your theme, keep reading and i’ll show you how to create something like this -
where only select words pick up the new font style. it only takes a few steps ( below the cut! ) you don’t have to use bold or italic and you can style the font however you like! you can also include multiple styles!
a theme containing a combination of windows 95/98 aesthetics. windows 95 windows, windows 98 background and icons. a live preview can be found at @windows9800! download it here!!
features:
500px posts
unlimited custom pages
a custom scrollbar resembling classic windows scrollbars
optional “search box” on tagged pages
customizable background/window title-text color
unique icons for all post types
btw i’ll be posting updates to @windows9800, so it would be wise/turn on notifications for that blog.
how to make text in captions gradient or multicolored
I was asked by the lovely @an-idiot-in-a-trenchcoat about how I got the gradient caption to this edit, so I decided to make a mini tutorial! This is my first time doing something like this so if there’s anything that’s confusing, feel free to send me an ask and I will do my best to clarify!
We’re going to learn how to do something like this today:
i'm sure there's several of these already out there, but here's a rundown of how i make the gradient text for my gifset captions! (example)
𖥻 tutorial below cut <3 | screenshots + bold/italic/small/color text included for my fellow adhders who can't sit through long blocks of text
websites used: color picker, text colorizer, text replacement
step #1: pick your colors (optional)
when making gradient text for a caption, i usually use an image color picker to get exact hex codes! this just helps me match everything even better than i could when manually inputting colors! (this is completely optional, but i like doing it, so i thought i'd include it here!)
step #2: making your gradient
now the fun begins! open the text colorizer linked above, and enter the text you want to be a gradient into the text box:
(all caps is by no means necessary! i'm just doing it to make the gradient stand out even more, since i'm going to have a decent amount of text in my caption.)
after entering your text, choose the type of color effect you want using this drop-down menu! color effect is essentially the type of gradient/how many colors it uses, etc. play around with this to find the one you like best!
i'm sticking with horizontal gradient, but you can choose whichever one you like! (there's also a solid color option if you want to just use a color that isn't available in the tumblr text options.)
after color effect, you can choose your colors using this section - if you did use the color picker from step one, you can just paste the hex codes into the boxes.
if not, click on the colored bars, and this hue picker will pop up:
drag your mouse around in the left box to choose your color. the bar on the right can be used to modify shade.
(these are the colors i'm using)
skip over the "additional text settings" section (these options mess with the html code and cause issues when you try to use it on tumblr) and check the preview to make sure you like how your gradient looks.
if you're having a bit of trouble seeing the gradient properly, you can scroll back up to "additional text settings" and turn on bold to see it better. just make sure you turn it back off before copying your code.
now you're ready to copy your code!
after making sure any additional text settings are returned to their default/unchecked states, scroll down and copy the HTML code (NOT the BBcode). select the text and copy it using command/ctrl + C or right click and click "copy".
step #3: replacing
the text colorizer used here is great, but it does add unneeded semicolons to the html code that mess with tumblr's settings and cause formatting problems.
open the text replacement site (linked at top), and paste the code you copied into the text box:
in the "replace this:" box, type ;
(leave the "with this:" box blank)
click "replace text". skim over the new code to make sure the semicolons are gone (sometimes you've got to click "replace text" a couple of times for it to work), and then either click "copy to clipboard" or select and copy the text manually.
step #4: writing your caption
now that you've got your code, open tumblr and make a new photo post. look in the top right-hand corner of your screen, and make sure "legacy editor" is turned on. if it isn't, click the toggle to turn it on.
next, you need to make sure your text editor is set to html. to do this, click the little gear in the top right corner of the new post. select "html" from the drop-down menu next to "text editor", and then close the settings.
[07.27.23 update: if, like me, you're stuck using the new editor, you can still set your post type to html, and gradient text will still work. the post editor will just turn your files into code when you're editing, and you'll have to fix the spacing in between your gifs (if you're using this for a gifset caption) in the preview tab. it looks super weird and alarming at first, but it does still work with the new post editor.]
upload your gifs and then move down to the caption. open the html tab and then paste your code! once you've done that, click on the preview tab to check how it looks.
my gradient looks pretty good, but i'm going to bold the text to make it more visible. here's how to use html to do that:
<strong>code goes here</strong>
here is a list of other html codes you can use to stylize your text! (they use <;b> for bold text, this is another way to do it, either method works fine!)
if you want to have another line of text under/above your code you need to add <br> at the end of the top line to create a line break (just pressing enter won't work). here's an example of how to format that:
text text text<br>
text text text<br>
text text text
write the rest of your caption, and then you're done! here's my end result and my final code:
i hope this was helpful! feel free to send me an ask if you have any questions! happy giffing <3
[Plain text start: Nyan Cat Rentry graphics. Post contains graphics, stamps, and dividers. Art credit goes to @/meltinii (link) For @/fluffettis's 2k event. A rainbow edit. Character is Nyan Cat. Free to use with reblog and like. No reposts. Inspo okay. .Plain text end]
some quick info:
↳ this is specifically for the screencapping method. i use mplayer osx extended to get my caps, but there are a few other programs you can use as well. i’ll specifically be going over mplayer here.
↳ i’m using ps 24.4.1 on a 2020 m1 macbook air
[tysm to @kyubinz for looking this over and adding some things ily]
☆ feel free to send me an ask/message with any questions you have! ☆
「 setup 」
1. finding videos
one big thing to remember is that the overall file size of your video will impact the quality of your gif. the larger, the better. i almost never use anything below 1080p, and try to use 2160p whenever i can. 4k video downloader is the program i use for downloading videos from youtube, it’s free to install and works great! because of how large some files can be, i always store any media on my hard drive. i highly recommend using one if you plan to keep lots of files on hand.
.mkv files are best, but .mp4 works fine as well (.mkv files are usually bigger aka better quality).
2. getting your screencaps
after downloading mplayer, go to the top bar and click file > open. open the video you’ll be screencapping.
you can either drag the little time indicator or using the arrow keys on your keyboard to move to the spot you want to capture. the > key can also be used to move forward frame by frame. to start capping, pause the video and press shift + cmnd (ctrl if you’re on windows) + s to take a screencap. i usually just hold it down until i’ve gotten all the screencaps i need.
by default, screencaps go right to desktop. you can set up a folder for them to go to automatically by going to settings > general and then selecting a spot in the menu under “interface”, but i just let them go to desktop and then sort them into individual folders so they’re easier for me to find while i’m giffing. in general, i try to stay under 80 frames so my gifs fit into tumblr’s 10mb image size limit.
3. importing screencaps into photoshop
to import your caps into ps, go to file > scripts > load files into stack. this window should open:
click browse, and navigate to the folder with your caps in it. select all of the caps you want to import, and then click open.
click ok to create a file with your caps, and then wait until it’s finished loading your caps into the layers tab. once they’re loaded in, this is what your screen should look like:
(if you aren’t seeing the timeline at the bottom of your screen, go up to the top bar and go to window > timeline)
click create frame animation, then go to the hamburger menu at the top right of the timeline and select make frames from layers. once your frames have loaded in, select the same menu again and click reverse frames. play through your gif to make sure everything looks good.
if you were to save your gif at the speed it’s set at now, it would be way too fast. to fix this, you have to set the frame delay. do this by selecting all your frames in the timeline using shift click, and then clicking (on any frame) where it says “0 sec”. select other from the menu that comes up, and you should get this popup:
the general rule of thumb for gif frame delay is 0.05 seconds. there are some cases — certain animated movies or video games, for example — where other delays are best, but for the most part, 0.05 is what you want to use (0.05 can slightly slow gifs, and sometimes using 0.04 better matches the clip's original timing. this is really a "train your eyes" thing, and picking the best delay gets easier as you gif for longer). you can set this by typing the number into the text box and then hitting the ok button or enter on your keyboard.
at this point, i’d go ahead and save your file. you can go to file > save in the top bar, or just hit cmd/ctrl + s on your keyboard.
「 making your gif 」
1. sizing
after your frames are ready, the next thing is to size your gif. to crop your gif, press c on your keyboard to open the cropping tool. white borders will show up around your gif.
before doing anything, i would suggest making sure “delete cropped pixels” is unchecked. this will allow you to drag your gif around later if you want to reposition. you can find this option at the top of your screen. drag the borders on either side until you have the area you want selected. mine looks like this:
once you’re happy with your selection, hit enter on your keyboard to finalize it.
the tumblr image guidelines require gifs to be 540px across (here’s a post detailing this). to change your gif’s image size, go to image > image size in the top bar. you’ll get this popup:
instead of setting the width right to 540, i’ll be setting it to 544, and then trimming down the edges using canvas size. this makes the quality just a little better, and also prevents any weird borders being made around your gif on the off chance photoshop decides to add them. this isn’t necessary at all, you can absolutely size right to 540, but i just like doing this. if you choose to do this, open canvas size right after you set image size (image > canvas size in the top bar), and trim your width down to 540 and your height down a few pixels as well.
2. sharpening & other filters
sharpening is essential for good-quality gifs. the first step to this is converting our timeline from frame animation to a video timeline. select this little icon in the bottom left of your screen:
this is what your timeline will look like now:
you can use the little slider with mountains on either side to change the width of your frames in the timeline for easier access when editing. now that we’ve got all this set up, we can sharpen! i use this action pack to sharpen my gifs in addition to a few of my own settings (here is a video on how to install actions into photoshop). go to window > action in the top bar if you aren’t seeing the action tab.
i’ll be using the sharper action from the pack. to use an action, select it from the list and press the little play button at the bottom of the panel to apply it.
in addition to this, i usually also add unsharp mask at 50% amount with a 0.5px radius:
there are a few other filters than can be helpful when giffing:
a. add/reduce noise
noise (aka grain) can be added with “add noise”. go to filter > noise > add noise.
these are the settings i usually use, but the amount depends on the gif (i don't ever go over 3.5 for the most part):
(if you want a grain effect but moving noise doesn't work for the gif, you can also add a grain overlay and then mess with blending mode and layer opacity until it looks how you want)
reduce noise can be used to remove some of the pre-existing grain on a clip. go to filter > noise > reduce noise. here are my settings:
leaving reduce noise on its own at 100% is a bit too much, so double click this icon and change the opacity (i usually do around 45):
b. gaussian blur
if your clip is a bit pixelated, gaussian blur can help with smoothing it out a bit. go to filter > blur > gaussian blur. my settings are 1 pixel radius w ~20% opacity (this changes based on the gif).
3. coloring
time to color! i want you to keep in mind during this section that everyone likes different colorings, and this is just my process! please don’t feel pressured to follow exactly what i’m doing, the best way to find what you like is to just mess around and experiment!
i like to start off with lighting adjustments: brightness/contrast, levels, exposure, and curves.
a. brightness/contrast
i usually start out with this first, just because brightening the gif right away helps me start thinking about how i want to color! here are my settings:
b. levels/curves
levels and curves can either be used interchangeably or together. i usually use levels to adjust lighting and curves to adjust color values, but i’ll go over using both for lighting as well as using curves for adjusting color values.
for both of these adjustments, i use the eyedropper tools to pick out white and black points. for levels, the top eyedropper tool to the left of the graph is used to pick out a black point. i do this first. use the tool to pick a spot on your gif that you want to be the base for black values. for me, that’s the shadow inside rey’s hood. the bottom eyedropper tool picks white point. use the tool to pick a spot on your gif that you want to be the base for white values. i chose the outside of rey’s hood. make sure you’re doing this on a new levels adjustment layer.
now, on to curves. you can either use the same eyedropper method or manipulate the graph directly. using the eyedropper is the same as levels, so i’ll just go over graph manipulation.
shade lightens as you move to the right along the x-axis of the graph — black is the far left, white is the far right, middle is the midtones. generally, i don’t work with midtones.
i’m going to use levels for this gif’s lighting, and curves to adjust color values. here’s how to do that:
curves can be used to adjust the amount of a certain color in different lighting areas of a gif. for example, i can specifically decrease the amount of green in the gif’s whites. to edit these values, select the rgb drop-down menu and adjust them one at a time. here are my final graphs:
c. exposure
this one’s pretty straightforward. the exposure slider adjust general exposure. the offset slider adjusts how dark your dark points are, and gamma correction can be used to lighten/darken scenes as a whole. here’s my settings:
d. color balance
color balance is used to adjust overall tint of a clip. this is in general pretty simple, but i do want to point out that using the shadow and highlights tabs in addition to just the midtones can really help. here’s my settings:
e. channel mixer
channel mixer is one of my favorite tools in ps, especially for coloring scenes that are a pain in the ass without it. to avoid taking up too much space, here’s a great tutorial covering channel mixer. here’s my settings:
[at this point, i’m noticing my gif is still a bit darker than i’d like it, so i’m adding just a bit of brightness/contrast to fix it. there’s also a patch of blue over one of rey’s eyes, so i’ve used a hue/saturation layer to get rid of that bit and masked it to her eye. i’m not going to go over masking here, but there are lots of great tutorials out there!]
f. selective color
selective color can be used to adjust the amount of specific colors within a color. for example, if i were to go into the red tab and take out cyans, the reds would become more red. if i were to add yellows, the reds would become more orange, etc etc. this can be especially good for color manipulation. for this gif, i’d like to make the background more blue, so i’m going to use selective color to do this. here’s my settings:
g. color lookup
color lookup uses 3dlut files to remap gif colors (it’s a preset — think instagram filter or something similar). i don’t always use these, but when i do, i almost never leave them at 100% opacity. color lookup is great for giving gifs a film-type look if you want to do that, it’s got loads of different options. here’s my settings (adjustment layer is set to 20% opacity):
atp i’m pretty much done with coloring! i usually end up doing a few extra little lighting adjustments at the end. for this gif, i added some brightness/contrast at +8. i’ve also noticed that my gif’s looking a bit grainy, so i’ve added some noise to lean into it. this is usually the way i fix it, but you can definitely do reduce noise/gaussian blur as well if you don’t want a grainy look.
here’s my fully colored gif + a process gif (fast images warning):
「 saving gifs 」
1. frame rate
one thing you may have noticed is that my gif is looking a bit choppy. photoshop has a tendency to mess with frame delay after gifs are converted to video timeline. here’s how to fix that.
select all of your layers and convert them to a smart object (right click > convert to smart object). next, click on the hamburger menu in the top right of the timeline and go to convert frames > flatten frames into clips. now we need to change the timeline from video timeline to frame animation. click the little 3 boxes symbol in the bottom left corner of the timeline:
go to the hamburger menu again and select make frames (this is the same one you used earlier), then go through your frames and delete any duplicates. the first frame usually needs to be deleted specifically. once you’ve done that, set the frame delay back to 0.05 the way you did earlier.
2. exporting
once you’re happy with how your gif looks, go to file > export > save for web (legacy).
these are my export settings, but feel free to experiment with the menus where i have selective and diffusion selected, different settings work best for each gif. in general, most gifmakers only use selective/adaptive and diffusion/pattern because they generally work the best for tumblr. before saving, make sure your looping option is set to forever:
gif size for tumblr has a 10mb limit. my gif is under this, so i don’t need to make any changes, but if yours is over, you can either delete some frames from the beginning/end of your gif and/or adjust the height of the gif (width needs to stay 540px so your gif doesn’t get stretched/compressed on tumblr, but height is fair game).
here's my final gif!
happy giffing, and please don’t hesitate to send me any questions you have! ♡
Use these sizes for Gifs & Edits, for the best display of your creations. (▰˘◡˘▰)
268 | 268 / 177 | 178 | 177 / 540 pixels
with a 2 mb file size limit for gifs.
**updated feb. 23, 2017 : it’s now 3 mb for gifs. wheeee ヽ( ´ ∇ ｀ )ノ
Footnote 1: There are height limits too but they’re not as important since ppl don’t often make graphics in those sizes, but the 540 x 810 max for photo posts is the one that will come up the most. And so you know, the white little spaces (margins) between gifs are 4 pixels.
Footnote 2: In the triple set, if you don’t use the 178 pixel width for the middle piece, it will be blurry. This is slightly new adjustment by Tumblr to compensate for the leftover pixel. 177 x 3 = 531 then + 8 for the margins = 539. 1 extra pixel. Phew math, hard.
Footnote 3: About 24-30 frames usually can be stuffed into full width gifs, 30-70+ in double and triple gifs. I don’t recommend skipping frames, unless it’s really warranted. Skipping frames is gauche.
Footnote 4: There are some stubborn graphic-makers who still stick with the old dimensions, (245/160/500). Largely this is to do with the lack of theme help from Tumblr to adjust to the new sizes they forced on us a couple years ago. However, Tumblr supports the gifs with the new sizes on the dash now, so it’s actually better to use the new sizes. - What happens within the dashboard is infinitely more important than on blog pages. The dash and tag pages are where the majority of notes come from. (ﾉ◕‿◕)ﾉ*:･ﾟ✧･
This is part 2 of my own personal gifmaking guide. Please read Part 1 to learn about how I capture the sequential screencaps to make my gifs.
Once you have your screencaps, open Photopea. They have a very simple guide on how to make animations in their help guide. I will be going into much more detail.
Note: ***Tumblr has a limit of 10mb for the filesize of each gif, and recommends no wider than 540 pixels. If your gif is wider than 540 pixels Tumblr will resize it, and it will cause the quality to be reduced, and also take much longer for the gif to load in your post.***
1. RENAME CAPS:
First things first. Rename all of your caps that you will be using for a gif to have the prefix _a_ on your computer. Select all and right-click on the FIRST file and select Rename (windows) and type _a_. Windows will add the numbers.
For most gifs, try not to have more than 60 frames as it will make the gif too large to upload to Tumblr. I usually aim for 45-50 frames max for most of my gifs.
2. IMPORT FRAME #1:
Drag and Drop _a_ (1).png into Photopea. Rename the layer from Background to _a_ (1)
3. IMPORT IMAGES:
Select all the rest of your images from the folder on your computer, and drag and drop ON TOP OF the image (not the layers section). Make sure the file you grab to drag/drop is the next one in the sequence (so _a_ (2).png in this case. Otherwise they will be out of order. If you do it right, you will see the layers section on the right get populated with your caps in reverse order, with 1 at the bottom and the last one at the top.
4. RASTERIZE:
Next, select all of the layers (on the right, by holding CTRL and clicking on each layer), go to Layer > Rasterize. They are currently Smart Layers, and if you keep them this way the sharpening will not apply (for some reason, I have no idea why that is)
5. CROP:
Next, crop your gif. This tool is on the left menu. You do not have to have all the layers selected for this, it will crop all layers together. Move the blue lines at the edges until the frame is cropped how you like. Be mindful of the character moving in other frames; you may want to check your other layers to make sure nothing important gets cropped off in another frame. Once the blue lines are where you want them, click the checkmark at the top right to finish the crop.
6. RESIZE:
Resize your gif so that it is 540 pixels wide. Go to Image > Image Size in the top menu. Make sure you choose "Bicubic Sharper" as the resample mode. Once this is done, you will see your image is tiny, so go to the Zoom tool (on the left menu, the magnifying glass near the bottom) and select Fit the Area at the top of the screen so you can see what you are doing.
7. SHARPEN:
Next is sharpen. Select all your layers again (on the right), then go to the top menu: Filter > Sharpen > Smart Sharpen. The default settings here are for 150%, and that is good for most things.
8. ADJUSTMENTS
This is the tricky part. You now need to adjust the brightness, contrast, exposure, color balance, and saturation. This will vary from gif to gif how much to adjust these values. I will show how I adjusted this one and you can apply that to whatever gif you are making.
For starters, since this show is SO DARK, you will need to brighten it. There are many ways to do this, but I found the method that works best for me is adjusting the Levels.
First off, in order to make adjustments, make sure you scroll all the way to the top of your Layers panel and make sure only the TOP LAYER is selected. Otherwise the adjustments will only be applied to whatever is BELOW the selected layer. You want all of them.
8a. ADJUST LEVELS
Next, go to Layer > New Adjustment Layer to pull up all your adjustments. For this first example we will use Levels, which is the second from the top.
You will see a histogram like this one:
This is a lot of information about the image, but pay attention to where the curve starts and stops. On the left, you see a "0". That is your dark point. This image is slightly washed out so I need to move that adjustment to the right so that the little square is just below where the curve starts. The third number is "255" and this is your bright point. The images are very dark so most of the graph is shifted to the left (dark) so in order to brighten, move the third square (the white one) so that the second square (grey one) is just at the edge of where the curve drops off on the right.
You can now see the numbers changed. Moving the first dark square will enhance your contrast, and moving the THIRD square will enhance your brightness. It is usually not necessary to move the second square, but you can experiment with this by moving things around and seeing how it affects your image. After this, it may be necessary to also increase the Exposure and Brightness if it is still not bright enough, but most of that can be done here.
8b. ADJUST COLOR BALANCE
Again go to your Layer > New Adjustment Layer > Color Balance to get this tool. This is a neat one with A LOT of variables, so play around with it to get the colors to look how you want. A lot of the raw video tends to have a bluish or greenish cast to it, so you just move the sliders to get rid of the cast and make the colors look how they are SUPPOSED to.
In this case there is a very slight greenish cast to the pictures so I will adjust that slider to compensate. The Range (at the top) you can select Shadows, Midtones, or Highlights, depending on where the color cast is located. Usually I stick to Shadows but sometimes will use Midtones if the color cast is really bad. Make sure Preserve Luminosity is checked.
8c: ADJUST SATURATION
Layer > New Adjustment Layer > Hue/Saturation. This will brighten up your colors. This tool is VERY COOL in that you can select color families to selectively increase or decrease the saturation of. Under Range you can choose Master, which is all colors, or choose only Red, Yellow, Green, Cyan, Blue or Magenta. The slider at the very bottom (when a single color is selected) allows you to set the range of colors to. I chose Master and increased the saturation of all colors, but be careful as this can make skintones look VERY orange. So select other colors in the Range to adjust single colors only.
With this tool you can also change the HUE (which is changing the overall colors to a different color, like shifting all the reds to orange) and Lightness (which may or may not be necessary if you did the Levels correctly)
If you need to go back and change something in your adjustment layers, you can do so by clicking on the white box in the Layers section next to whatever you need to adjust.
There are many other Adjustment Layers you can play with, so have fun and experiment!
9. ADD YOUR WATERMARK AND TEXT
Next, you can add a watermark if you have a premade file, by dragging and dropping it on the image. Then move it around to where you want it, resize it if needed, and change the opacity if it is too bright. Make sure this layer is the TOP layer.
To add text (for subtitles or effects) simply click on the Text icon in the left menu (the T) and click anywhere on the image and start typing. You can change the font, color, size, and style in the menu on the top. Move the text around by using the Select tool (arrow on the left) Again make sure this is the TOP LAYER so that it will be present over the entire gif.
10: EXPORT YOUR GIF
File > Export as > GIF
A pop up dialog will appear and you can change some settings here if you want. I usually don't. Pay close attention to the filesize (at the bottom) and make sure it is under 10mb. Keep the quality at 100%. And most importantly MAKE SURE DITHER is checked! This will prevent compression artifacts from ruining your gif.
I am making this for @errruvande but I thought maybe others could use this guide to. This is my own personal workflow on how I make my gifs. Everyone has their own way of doing it, and there is no right or wrong way, but I have found this works best for me, with my limited tools and since I do not have photoshop.
Please note I am not an expert lol! There are people out there making far better gifs than me, and many other gifmaking resouces on Tumblr that are probably better than mine.
Keep reading below >>>
So there are two ways that I have found that work for capturing video. If you have the discs like I do, using a program like Videobyte BD-DVD Ripper works really well to grab video clips from Blu-Rays and DVD's. I recommend only using Blu-Rays if you have them. since DVD's are much lower quality.
However I have noticed the videos I captured with this program tend to be dark and have some compression artifacts, even when rip to an MKV with high quality settings. So I use a different method which I feel produces higher quality video captures.
I use Windows Screen Recorder (I have Win11 but this will work for all versions of Windows) with the quality settings set to High. In order to do this, go to Settings > Gaming > Captures and set the following:
Make sure the Video Quality is set to High, set your Screenshots folder, turn off Audio (you don't need it), and keep the frame rate to 30 fps.
For Windows 11 press WIN + ALT + R to activate the screen recorder. There is usually a bit of a delay so make sure you start a few seconds before the scene you want to capture. And try to keep the length of the capture below about 90 seconds; the shorter the better.
So, for those of you with Photoshop, you can import your video directly into the program and make your gif from there. But I found that Photopea really does not like videos, and will stall and crash if I load a video directly. So I have to capture sequential screencaps to make my gifs.
I use VLC Media Player. There are a few others out there that take sequential caps, but I have not been able to get them to work myself.
Download and install the latest version. Then go to your settings to set up the Sequential Caps function. They have a great guide on their website here but I will reiterate it in this post.
Go To Tools > Preferences and then at the bottom of the screen select the All radio button to show all settings.
Select Video from the left menu. Scroll down about halfway until you see the Snapshot section. Choose the folder where you want the caps to go.
3. Then, under Video on the left, expand the Filters list.
4. Check the "Scene Video Filter" from the list.
5. Then scroll down on the left menu under Filters and click on Scene Filter. This will open up the settings for that particular filter.
6. Set the Image Format to PNG.
7. Then for the Recording Ratio, change to "1". The Recording Ratio is the frame interval. So for example, if it was set to "300" (with a 30fps video), then it would take one cap every 10 seconds. Setting it to "1" will make it take a cap once per frame.
8. None of the other settings need to be changed.
9. One more important setting, otherwise this will not work! Close the menu, and go back to Tools > Settings and leave it on Simple. Go to the Video section and MAKE SURE the output is set to "Automatic". This is important because if it is not on Automatic the Scene Filter won't work!
Then just open your video with VLC. VLC will automatically take the screencaps while the video is playing. If you pause the video, it will stop taking caps.
NOTE: For smoother gifs, change your playback speed to be slower. Go to the top menu > Playback > Speed > Slower (fine). The more you click this the slower the video will playback, and that means more caps will be taken over that time frame. I usually set it to 0.75x, but if you want even smoother gifs for really short clips, you can set it even slower than that.
Your screenshot folder will look like this:
Then we are done with this part and onto Photopea! Which I will go into detail in another post: PART 2
Hello folks! As someone who never did any celebrations nor tutorials for giffing, I decided it's finally the time now. So thank y'all for putting up with my horror shenanigans, 8k is just amazing and I hope y'all will keep enjoying my blog and posts!
PHOTOPEA GIF TUTORIAL
Moving to Photoshop after years of using Photopea, I can say while they both work very similarly, they're also different. Photoshop is far superior, you can still make very HQ and nice gifs in Photopea too!
This post aims to show you my personal way of making crispy gifs while also covering the basics of getting the frames and uploading them to Photopea. (If you're looking for more detailed beginner tutorial, there's plenty of those out there, amazingly done!)
Photopea is completely free, video player is completely free, downloading movies is completely free. Only thing it'll cost you is your time.
WHAT YOU'LL NEED:
- photopea
- potplayer
- good quality movie file ( i go for the highest GB ones, above 10gb is amazing. Sometimes I get 40gb and prefer 1080p source. Note that higher file doesn't immediately mean higher quality - if the movie looks weird just download another one)
GETTING THE FRAMES:
Once you get your source file and open it via PotPlayer, find the scene you want to gif. Using D and F keys you can go backwards or forward by single frames. When you get the perfect frame where you want the gif to start, I always go back 10 frames because PotPlayer tends to cut those out. It's better to get more frames than you need as you can always delete those extra ones later on.
I'll be giffing scene from Longlegs alongside the tutorial.
PRESS CTRL + G. This will open the frame capturing window. Fix the setting to match these:
and press "START". Click back on the PotPlayer to bring focus back on the window and hold or press the forward key - F - to play the scene and capture the frames. You can see the frames number going up on your other window. If it stays on 0 you're not capturing anything. Once the desired scene is over, press "STOP" on the frame capturing window and voila - you have your frames in your selected folder. Delete any extra or unwanted ones. The amount of frames usually sits between 40-80 depending on what ratio you'll use later on for the gifs to fit the 10mb Tumblr upload limit.
Now it's time to open PHOTOPEA.
FILE > NEW: you have to write down the exact dimensions of your frames. This action will create a new file with single background. Go back to
FILE > OPEN AND PLACE > SELECT ALL YOUR FRAMES and upload them. Depending on the size of the frames, this could take a while or even lag your browser. Make sure to not click anywhere within the app before all frames are done uploading.
Now lets finally make the gif. The following were my most used gif making steps in general, play around other options and find out what works - every gif or scene is different!
Delete the original empty layer at the bottom and then select all the frames (clicking the first/last layer and then click the last/first layer while holding shift to easily select all) and by pressing CTRL+G, group them. Select all layer again and
RIGHT CLICK (on the layers) > RASTERIZE
LAYER (on the upper taskbar) > ANIMATION > MAKE FRAMES
Now your frames should have _a_ in their names. CREATE NEW LAYER
and select all your frames again.
CROP the whole project to whatever ratio you want, Ill be using 64x44 ratio for wider gif.
By pressing ALT+CTRL+I open the RESIZE window. Tumblr gif dimension is 540px wide max (heres tutorial for other dimensions and why correct sizing is important) so using that and "bicupic sharper" option under resample, resize the gif.
Now you have the base gif done.
Its dark, muddy and unclear. We sharpen it and give it the clear crispy look using noise.
FILTER > NOISE > ADD NOISE and set the Amount to 1% and select monochromatic
FILTER> SHARPEN > SMART SHARPEN > 150% amount with 1px radius
FILTER> SHARPEN > SMART SHARPEN > 50% x 10px
Now its time to bring the gif to life. Create NEW ADJUSTMENT LAYER. This is where all the editing options are.
For this specific gif Im doing:
BRIGHTNESS/CONTRAST
+50 brightness, +10 contrast
VIBRANCE
+20 vibrance, +10 saturation
HUE/SATURATION
master -50 , red +50, cyan +50, blue +50
(the reason i tune all colors in master down by 50 is to mute them all down. Adding back on colors you want is making them stand out way more! It works on gifs with dominant few colors but if the gif is very colorful, you're better off leaving this option out completely and rather work with selective colors. As I said, try it out and see!)
another layer of BRIGHTNESS/CONTRAST
+20 brightness
CURVES(those are something I didnt use much in Photopea as in general youre just fine with brightness and selective color. Just move the point on the curve and see what it does! For this gif I went with Curves like these and it enhanced the gif nicely.)
another layer of SELECTIVE COLOR > black: black: +2%
Now Im satisfied with the gif and want to save it. Clicking
FILE > EXPORT AS > GIF
will open this window:
Make sure the quality is at 100%, the size in darker numbers lower than 10MB. Speed in Photopea is quite tricky for some reason, but 180% - 190% is the "normal 100% speed" of the gif.
Enjoy giffing and feel free to ask anything if unclear!
janainaart
turnnoffyourmind
vaporwave
baratheonpilled
snowghoul
yousharknotpass
romaincrisis
