#finally using 540px width

[donahdevotees]

Welcome to the donahdevotee's gift exchange, the event where selfshippers get to celebrate their fem f/o's and share their creativity with one another! (Sign up form is at the bottom of this post, please read through the guidelines before signing up!)

This gift exchange will cover art, writing and moodboards! So if you're not inclined towards art or writing you can still participate to share some love for other people's ships and have some love given to your own! On that note; all skill levels are welcome, as long as you're giving it your all, you're welcome to join!

Obviously the very basic requirement is to have a fem f/o! Your ship with her can be romantic, platonic, familial, queerplatonic, fwb, what have you! Every ship is welcome and so is every fem f/o! (If you headcannom your f/o as fem in any way, she is welcome as well!!)

GUIDELINES:

Art must comply with the rules of tumblr. A width of at least 540px wide, max file size is 20MB, please keep that in mind! If you’re drawing nsft art for your Giftee (You both must be 18+, minors are only allowed to create sfw works) you should censor it to post it. You can send the uncensored art to your Giftee!

Fics must be at minimum 500 words, no cap on the maximum however, go wild! (If you want to make a graphic to go with your fic, go for it! But it’s not mandatory <3)

Aesthetics/Moodboards should have a minimum of 4 graphics/images. You can make multiple for your giftee if you'd like! (Be considerate of eyestrain and/or flashing/etc. if using gifs!)

If you wish to back out at any point please let us know as soon as possible so we can work on a backup gift for your giftee, try not to leave it until the last day of the event!

Content that is NOT allowed: Self harm, Non-Con, Incest, Minors doing anything even remotely sexual, Pedophilia, Bestiality, Racist depictions or Fetish content.

Content that IS allowed: Anything else your Giftee has stated they’d enjoy. Character death and gore is allowed, smut is allowed. Everything MUST be tagged appropriately. If you aren’t sure; tag it!

SCHEDULE:

Nov 1: Sign ups open

Nov 10: Sign ups close at midnight

Nov 11-12: Participants are matched up!

Nov 13-14: INFO about your Giftee will be sent you via DM's

Nov 28: First check-in!

Dec 12: Second check-in!

Dec 23: FINAL DEADLINE, have all gifts submitted by midnight!

Dec 26-30: Post those gifts!!

Dec 31: List of participants and their gifts posted with links!

HOW TO SUBMIT YOUR GIFT:

Option 1: Submit your artwork/fic/moodboard to this blog via the submit button!

Option 2: Send a google drive/google doc link for your gift to this blog through an ask or the submit button!

Option 3: Email your artwork/fic/moodboard to donahdevotees@gmail.com!

With your submission please include your selfship url just to ensure we don't have any mix ups! If you would like us to post your gift for you please mention that as well as we'd be more than happy to!

HOW TO POST YOUR GIFT:

You can post the gift directly to tumblr or post a link to your gift!

If you are posting your gift yourself please ensure you use the tag: #donahdevotee's gift exchange 2024 and also tag this blog and the blog of your giftee in your post!

You do have the option to ask the admins of this blog to post your gift on your behalf, where you and the giftee will both be tagged!

[eddiediaaz]

Hello! I was wondering if u wouldn’t mind sharing a tutorial on how u making ur gif boarders? post/714133310754979840

hiii, yeah of course!

there are multiple ways to do it i'm sure, i'll share the two methods that i use the most. first tho, you need to create your selection for that border. (rest of tutorial under the cut, i use photoshop cs5 for reference)

in that example gif, the border is 10px away from all sides, and my gif dimension is 540px wide (width) and 440px tall (height). if i want a border that's 10px away from all edges, i need to remove that number from the dimension numbers.

540 - (10 + 10) = 520px for the width 440 - (10 + 10) = 420px form the height.

once you have your numbers for your gif, select the rectangular marquee tool. under style choose "fixed size" and enter the width and height in pixels (don't forget to add the letters "px" if they're not there).

once you have the numbers, click wherever in the canvas. this will create a selection with the right dimension. you can then move the selection around (with the mouse or arrow keys) until it's centered.

you can definitely draw the shape by hand without bothering with numbers if you want, but i like knowing that the border is the same ratio as the gif.

(if your gif is quared, you don't have to bother with numbers, you can just select "fixed ratio" in the style and enter 1 in both width and height, for a perfect square ratio. and then you can draw a box with the marquee tool until you reach the desired size.)

FIRST METHOD: LAYER STROKE

with that selection still on, create a new empty layer. this is where the stroke will go.

then go to the top menu: Edit > Stroke...

a stroke settings window will pop out, where you can choose the thickness in pixels, as well as the color and blending mode (i usually leave it at normal and edit the layer's blending mode if i want, instead). you can't edit these settings later, so be sure of what you want (which is why i usually prefer the second way).

this is what a white 1px stroke border looks like:

SECOND METHOD: LAYER STYLES

i prefer this way, because you can later edit the color and thickness of the border if you want.

so, still with that selection activated from earlier, go to Layer > New Fill Layer > Color Fill. pick whatever color, this doesn't matter at all, we won't actually use that color fill. put the Fill of that new color fill layer at 0% opacity.

now that this layer is basically transparent at the moment, double click on it to enter the layer style options.

click on the Stroke option at the bottom and enter your desired values for size and color. you can change this later if you wish.

and this is what a white 1px stroke looks like with this method (looks basically the same yeah lol, but this method gives more flexibility)

CENTERING THE BORDER + FINAL TOUCHES

to make the border more interesting than just a white 1px stroke, you can change the layer's blending mode, as well as giving it more styles, such as: outer glow, inner glow, gradient overlay, color overlay. and don't hesitate to play with the blending modes for each of these layer styles too!

here's an example of settings with outer glow, inner glow, and a gradient 2px stroke:

to make sure the border is centered, here's a quick tip: select the stroke layer and the move tool. then with the keyboard, do Ctrl + A, it will make a selection of the canvas. then, click on these symbols at the top. it will center your layer horizontally and vertically.

and that's it :)

[billysjoel]

hi, this edit is cool, would you please tell me how do you make the circle shape and text like that in the second gif?

https://mikelogan.tumblr.com/post/727834848573669376/forgiveness-is-warm-like-a-tear-on-a-cheek-think

hi!! i'm so sorry this took me so long to answer, but i've hardly been on my desktop for the last couple months and haven't been giffing. finally getting around to this and thank you for the kind words!

in this tutorial, i'll show you what i did as well as another way to achieve the same effect:

once you've made your gif and colored it the way you want, you can get the circle effect one of two ways. i'll show you how i did it first and then a more "normal" way lol

i actually had this circle texture laying around and for whatever reason, i decided to use that. so i popped that onto the canvas and used ctrl+T to center it both vertically and horizontally

then i used a glitter texture over the top of the circle layer and applied a clipping mask so that the glitter only shows up on the circle and not the entire gif. to do this, make sure your glitter (or whatever texture you decide to use) layer is ABOVE the circle and then right-click on the glitter layer and select "create clipping mask." you should see this lil arrow on the layer now:

as a quick note about textures/overlays: chances are that if you just google "glitter texture png" or something similar, you'll find tons, but the png portion is important because pngs have transparent backgrounds. this wouldn't work if the circle texture was a jpeg because its background is not transparent and the overlaying of the glitter texture would appear on every pixel, basically just taking the shape of the entire jpeg rather than just the circle.

i have a resources (basically anything downloadable, from overlays to actions to psds) tag on my gifmaking sideblog as well as one specifically for textures and overlays. i also utilize the websites freepik, pngegg, and pngwing for pngs (especially freepik).

to make the glitter layer the same pink/purple color i used, i ended up using a hue/saturation layer above it and also applied a clipping mask to that layer so it only affected the glitter layer. this step is totally optional depending on the coloring you're going for. you might be happy with the glitter texture exactly as it is. you could also skip the hue/saturation layer and instead apply a color overlay to the glitter layer, select the color you want, and set it to screen or another similar blending mode. to do this, double-click on the glitter layer, select color overlay from the menu, choose whatever color you want, make sure the opacity is set to 100%, and adjust the blend mode to whatever you think looks best.

the "normal" way to do the circle would just be to use the ellipse tool (right-click on the rectangle tool and choose ellipse) and input your desired dimensions. to get a perfect circle, the width and height have to be the same as one another. then you'd continue on with the rest of the process.

for the text, create your main text layer. these were my settings for a 540px canvas:

i also added a drop shadow to the layers with these settings (double-click the text layer to bring up this menu):

then i duplicated the text layer 6 times. select the first duplicated layer (the second line), use ctrl+T and your arrow keys (i only used the down arrow) to move the text down the desired amount of space. i made sure i moved each line down exactly 25 pixels, which is equal to 25 presses of the down arrow. i just think it looks nice when they're equally spaced. with each subsequent layer, i just dropped the opacity.

starting with the original text layer, i used: 100% -> 80% -> 60% -> 40% -> 20% -> 10% -> 5%, but this was just my personal preference.

anyway, that's pretty much it! but if you have any additional questions on this tutorial or any other set, just send me a message and i'll do my best to get to it much quicker than this one 💙

[aashiqeddiediaz]

Hey, I love how you did the B/W strip + the text effect on your margaret atwood set, would you be willing to do a tutorial? 🙈

Hey Nonnie, thank you! Sorry this is a little late, but I did manage to hang onto this PSD for you.

We'll be making this gif:

This tutorial assumes basic knowledge of gif-making, Photoshop, and coloring. I’ve only described the text tutorial in this, but you can reach out if you have any questions.

(This is a different version of my gradient text tutorial, but the same principle applies!)

Tutorial under the cut:

Couple things to note beforehand:

There is a lot of trial and error involved when doing any sort of effect, and this is no exception! You might have to play around with the colors and the settings before you find something that looks good and readable and that fits your set!

This text effect works better on big gifs (540px width) that have quite a bit of movement below the shape so you get that effect.

For this effect, I find that a simple font works better than a cursive one, but play around with what you like.

We're going to start with this gif:

First, I'm going to add my text and center it. For this text, I used the font, Solar vesta Serif, with these settings:

Note: when you do letter spacing + underline, sometimes, the space after the last letter can lead the underline to stretch a little too far past the letter, making it look like the underline isn't centered properly.

To get past this, I just select the last letter separately, and put the VA setting to 0-10, depending on the font/letter.

We're also going to add a drop shadow here itself, and this is fully up to preference, but I used this:

All of that should give us this (yeah, it's the simplest thing because I'm lazy and I like easy things xD nothing too fancy)

Next, we're going to draw our rectangle around the letters. I like to keep even spacing around all the letters on all sides (in this gif, it's 4px on all sides) but just eyeball it initially, and then adjust accordingly.

I changed the fill to white (this color isn't important, I just used white because it's easier to show) and moved the layer in the back so the text is on top. It should all look like this:

Next, we're going to add a gradient map between the rectangle and the text later. I simply used a black and white gradient, and my gif now looks like this:

Here are the settings:

Next, we're going to delete that white box - the layer mask - next to the gradient map. Just click that and press delete (or right-click > delete layer mask). Your layers should look like this:

Now, we're going to add the rectangle as a layer mask. While pressing Ctrl, we’re going to hover our mouse over the square box next to Rectangle 1. Your cursor should show a white box with a dotted border. Click the square box with that dotted cursor and you should get a dotted selection line all around the box, like so: 

Next, we're going to select our gradient map layer, and then create a new layer mask. At the bottom of the layers panel, you should see a box with a circle in it (denoted with a red arrow). Click that - make sure you have your gradient map layer selected, or you'll end up putting the mask on the wrong layer.

The black and white will disappear, leaving you with just the box again. It'll look like this:

Now, just hide the rectangle layer so it looks like this;

And you're done! This is my final gif:

Once you get this basic thing down, you can play around with it all. For example, I like to adjust my gradient sliders so they emphasize the colors:

You can also just change the colors;

Unlike my previous text effect, we're not going for inverse X-ray effect, so for this, I like to make sure the lighter shade of the gradient is on the lighter parts of the gif, and same with the dark shade.

(If that's confusing, here's a side by side comparison of what the "X-ray" effect vs normal color effect looks like)

Anyway - it's fully up to you!

Because of the effect I was going for, I didn't add a drop shadow underneath the rectangle itself, but you always can if you want to make that a little bit more 3D.

You can also do this with any other shapes, too, with the same procedure.

Hope this helps, Nonnie! Let me know if you have any questions.

[quokki]

Full giffing process - tutorial (*≧ω≦*)

Due to little demand, i will be going thru my complete process for making gifs. so this will cover all the basics i hope! keep in mind this is just the way I personally do things! please feel free to send me asks or dms if you have any doubts or questions!

☆☆☆☆☆☆☆☆ DISCLAIMER: Everything I know about giffing, I've learned from other tutorials, including the VapourSynth Resources I'll be using in this tutorial so I'll leave links to those tutorials I've used here as well!

In Depth Giffing Tutorial (link here) How to use VapourSynth (link here) ☆☆☆☆☆☆☆☆

(o´▽`o) I'm a windows user so idk if this works exactly the same on mac!

First things first, you will need:

☆ 4k video downloader (download it here!) ☆ Vapoursynth (32bit download / 64bit download) ☆ Photoshop (download it here! -64bit version only)

Okay! The first thing you need to do is make sure you're working with the highest quality material possible to ensure a decent looking gif!

I'd say the minimum quality needed for decent gifs is 1080px. But if you really want to gif that low quality 2 frame milisecond of your fave, i respect that

☆ lives / streams and tiktoks are typically not very high quality ☆ for stage performances such as music shows, ts/tp files are preferred but those can be really hard to get a hold of (this is a whole deeper level of giffing hell and more of an advanced class topic so nevermind this for now!) ☆ those occasional 4k facecams on youtube work fine tho! ☆ for mvs, variety shows etc, you can download the video with good quality from youtube using 4k video downloader

_(:3 」∠)_

Now let's talk about tumblr and it's pre-requisites for a good looking gif post :D

Tumblr can be sooooo annoying about gifs okay.... I find it's best to plan my whole set before I actually start doing anything but hey that's just me. Some things to keep in mind are: dimensions, file size, number of frames and post layout!

☆ Dimensions

You have 3 main options here and it's all about the width!

☆ 1 collumn: single gifs! these should be 540px wide ☆ 2 collumns: split that in half! 268px wide so there's a lil breathing space between the gifs! ☆ 3 collumns: 3's a party! 177px for each gif please

You can go crazy on the height but the width should mostly stick to one of those 3 unless you want tumblr to pull and squeeze your gif around like a piece of gum.

☆ File Size

This is really important because tumblr has a single image size limit of 10mb. Which means that every single gif you make has to be under that size or you won't be able to post it. The other thing about this is that the dimensions, number of frames and ammount of varying colors throughtout your gif will greatly impact on the final file size. Basically, the larger the dimensions and the more frames it has, the bigger the final file will be. Later on I will show you how to check your gif's final size before exporting it!

☆ Number of frames

This has more to do with the length of your gif, the longer it is, the bigger the final file will be. Typically gifs should be under 3 seconds long. So if you are making a set, try to break the moments you want to include in your set by increments of up to 2 - 3 seconds each, otherwise it might not fit all into one single gif. The number of frames is also extremely important when making combined gifs but that's for another tutorial.

☆ Post layout

If you want to make a cool looking gifset (where some gifs are larger in dimension than others, or when you want to have a single gif followed by a line of 2 gifs next to each other), then it might be worth it to plan out the layout before you start making the gifs. This way you ensure you won't have to remake gifs down the line because they don't fit together the way you wanted to.

☆ﾐ(o*･ω･)ﾉ

Timestamping

For this step, you will go through the video you want to gif from and you will just write down all the sections you want to use, down to the exact seconds. Example: 02:30 - 02:32.

(^◕ᴥ◕^)

VapourSynth (VS) - Clipping the video

I know VS can look pretty intimidating with it's bare coding and all but I promise it can be your friend. You just have to set it up correctly and pay close attention whenever you're using it. This software is a must for giffing, it will do all your cropping, resizing, sharpening and denoising for you, making sure your gifs look good. It is also indispensable when giffing ts/tp files because it deinterlaces those files so you can clip them.

First, let's set it up. This is the most annoying and difficult part of this tutorial so make sure you pay full attention to every single step!

☆ step 1) download a version of VS here (link).

☆ step 2) unzip the file on your desktop area.

☆ step 3) open the folder and find the file named "vapourscript (drop video file on me)" - make a shortcut of that file and move it to the desktop.

☆ step 4) find the folder named "gifs" - make a shortcut of that file and move it to the desktop.

☆ step 5) drag your video file you want to gif from and drop it on top of the "vapourscript (drop video file on me)" shortcut on your desktop.

☆ step 6) enter the timestamp input, in the first line it will be the starting of your timestamp, in hours format, then hit enter. in the second line enter how long your timestamps lasts, in seconds, also in hours format. then hit enter and let the code run.

☆ step 7) the resizer tab should now load on a web browser, then you will set the dimensions of your gif on the top left corner. you can also adjust the position of your gif within the video screen and zoom in if wanted.

☆ step 8) choose the preprocessor, denoise and sharpening options on the left and tick the boxes on. I usually just stick to the settings i'm using in my video down below.

☆ step 9) now in the VS box, go to file > load, choose the script saved in the gifs folder.

☆ step 10) copy the code from the resizer into the code in the vs screen, under the designated line.

☆ step 11) alter the code exactly like I did in my video down below. save it. this is now your default vs script for clipping your gifs. what you are doing by adding the hastag and the quotation marks is you're disabling those sections of the code. the reason you do that is in case you want to run the preview before exporting. this is because those lines involve some heavy graphic processing which can make the computer slow. I will talk about the script in more detail later on.

☆ step 12) i don't usually use this option but you can also preview your gif and set specific frames to start and end your gif. This is around the 4:30 mark in the video.

☆ step 13) time to export your clip! now you will temporarily remove the marks you added to disable the code and then go to script > encode video. in the popup box, you will select the option "export to MOV", then start so that you can use that video file in photoshop later.

☆ step 14) after you are done exporting, close the encoding box and then close vapoursynth, never agree to save the script when closing it, or that will override your default script.

☆ step 15) now you need to rename the encoded file for your gif. go to the gifs shortcut folder you created on your desktop, then go to output. this is the folder where VS will save all your encoded files. but everytime it saves the file with the same name so you need to come to this folder and change the name for every gif file you encode before you clip a new one, otherwise VS will just replace the previous clip with the new one you just finished.

Here's a detailed walk through of each step in this video tutorial:

IMPORTANT

After you are done processing your first clipped file, now you have your default script already built in VS, so whenever you run it to clip more videos, this script will already be in your VS screen. So now all you need to do whenever you want to clip more files (to make more gifs) is to adjust the dimensions, positioning and zoom of the video in the resizer screen and then change a few numbers in your script! then run encode to save the clipped file.

☆ To make new clips: go thru steps 5- 7, also do 8 if you want to mess with the denoise and sharpening filters again, but I don't really know much about how those work so I can't help you with this.

Now what you need to alter in the code, each time you are making a new gif: after you run VS and change the settings in the resizer to what you want, you need to change the zoom numbers and the video positioning in the code.

you need to replace the numbers in the VS script on the left so they match the numbers in the resizer on the right.

Do step 12 if you want to set specific frames to clip. Then steps 13 - 15 and you are done! You need to do all this every single time you want to make a new gif.

Now let me talk a bit more about some of the lines in this script:

☆ line 14: #video = core.std.Trim(video, a, b) this line is to set specific frames to trim your video section, your final encoded file will be only the frames inbetween the numbers you input here. a = first frame, b = last frame. you will need to run the preview option in VS in order to see every single frame of your clip and select your first and last frame. I usually do this in photoshop later instead so I don't bother with it on VS unless i'm making combined gifs, in which you need all the clips to have the exact same number of frames. the hashtag at the beginning of this line means that the script won't follow this command when executed. so if you want to include it, you need to remove the hashtag before encoding your file.

☆ line 18: #video = haf.QTGMC(video, Preset="Slower", TFF=True) this line is for the preprocessor option in VS, that tool is mainly only used when giffing ts/tp files because you need to deinterlace them before you can use them on photoshop. so you will only need to remove the hashtag and enable it when giffing those types of files. when im giffing those files, i usually always keep it with this setting:

I don't really understand much about this so I never mess with it. If you want to know more, I believe there's more info about it in the tutuorials I linked at the beginning of my post.

☆ line 22: video = descale.Debilinear(video, 786,442) this line is for the zoom of the video screen. you just need to match what you have in your VS script to what you end up with in your resizer.

☆ line 25: video = core.knlm.KNLMeansCL(video, 1, 2, 4, 2.5, channels="YUV") this line is for the denoising filters, in my case I always use KNLM and this is what it's line looks like. I know you can change those numbers to change the filtering settings but I never messed with it so I'd usually just have it like that.

☆ line 27: video = fun.FineSharp(video, sstr=2.5) this line is for the sharpening, in my case I always use FineSharp and this is what it's line looks like. I know you can change the number to change it's settings but I never messed with it so I'd usually just have it like that.

note: lines 25 and 27 (which have to do with denoise and sharpening) are the ones within quotation marks in your default script. I believe the quotations work in a similar way as the hashtag, in which the script only executes the lines when the quotations are removed. Which is what you do everytime you are about to encode your clip, otherwise they stay on. I think you should also remove them if you want to test how they affect your gif in the preview screen but i think these filters also require heavier graphic processing which my computer can't handle well so I never do that.

☆ line 30: video = core.std.CropRel(video, left=303, top=16, right=215, bottom=26) this line is for the positioning of your video screen within the gif dimensions. you just need to match what you have in your VS script to what you end up with in your resizer.

ʕ •̀ o •́ ʔ

Photoshop (PS) - let's make a gif!

Now that we have clipped and preprocessed our video file, it's ready to go to photoshop!

☆ step 1) after you have opened PS, go to File > Import > Video Frames to Layers. Then choose the clipped file you created through VS.

PS should open a box like this:

Keep those options ticked and hit OK

☆ step 2) now you need to go to Window > Timeline to bring up the timeline tool box. This window will always be necessary when making gifs. Let's take a look at it, I've marked down all the important buttons you will need:

timeline menu: there are several commands in here, you will need to use some of them later on.

convert to video / frame timeline

play controls to watch your gif

trash can to delete selected frames. (when deleting frames, first delete them here and then delete it's matching layers which are still there after deleting the frames)

frame delay time: this is where you set the time for how long that frame will be visible in your gif

☆ step 3) remember how I mentioned the preview option in VS and how i don't usually use it to trim the frames of my clip? That's because I usually do that at this step of the process, in PS. Notice how each frame is also a layer, and when a frame is selected, the matching layer has the eye symbol next to it turned on. So now you should play your gif and see if there are any frames you don't want to keep, then delete the frames and it's matching layers.

Since we applied sharpening filters back when we were clipping the video on VS, your clip should probably already look pretty decent even before the next steps, so steps 4 - 9 are optional. The coloring part of my video has been sped up.

☆ step 4) click on the timeline menu and select "Select all frames", then go to the select menu at the top of the PS screen and select "All layers". Now click on button 2 of the timeline at the bottom left, switching from the frame timeline to the video timeline.

☆ step 5) before you do anything else, make sure the blue holder is at the beginning of the track before you do anything else. Then go to Filter (at the top of PS) and select "Convert for smart filters". This will convert all the layers into one single layer.

☆ step 6) now make sure the layer is selected, then go to Filter > Sharpen > Smart Sharpen. A box will open with several options:

I usually keep the amount to around 30, I don't touch on radius and you can also mess with reduce noise if you think your gif is looking too sharp. Hit OK when you're done.

Since this is a filter applied to a smart object (the converted layer that contains all our layer - frames), this means you can turn this filter on or off as long as the layers are in the form of a smart object. You can also go back to it and alter it's settings (like I've done in my video down below)

☆ step 7) now while making sure the blue holder is still at the beginning of the track and the layer is selected, click on the timeline menu that i mentioned above. Then go to Convert Frames, then select Flatten frames into clips.

☆ step 8) again go to the timeline menu, Convert Frames, but now select Make Frames from Clips. Now click on the button at the bottom left of the timeline box, to convert the video timeline back into a frame animation. Then hit continue in the pop up box.

☆ step 9) now you are back to the frame timeline screen from before, but now the first frame is empty. You need to delete that first frame and then check the final frame because sometimes PS also creates another empty frame at the end at this point.

☆ step 10) PS also created a new layer under the layer 0, where the filter is still applied, you can delete this new layer as well. Now for organizational purposes, select all remaining layers (that contain your frames) and group them (you can see how in the video).

☆ step 11) This step is also optional, now I like to add the coloring to the gif. I have a separate tutorial exclusively on this topic. You can check it here:

☆ step 12) This is the time when I also add my signature. This is optional. You need to have the signature layer(s) on top of all the other layers. I usually have it in all black or all white, with lowered opacity of around 40%.

NOTE:

When adding elements (such as a signature) to a gif, it's important to always make sure you have the first frame selected, otherwise PS can move your newly added elements around the canvas on different and random frames. This also applies to anything in the layers pannel that has specific opacities. It's best to already add the elements with the final wanted opacity with the first frame selected.

Exporting + Delay time

☆ step 13) To export: go to File > Export > Save for web (Legacy). PS will open this box:

First I just use the exporting screen to test the delay time of my gif, and to check the gif's final size.

About the size: The final size is displayed at the bottom left. Remember it needs to be under 10mb. If it's above that, then you will have to go back and delete frames and test again until the size is within the limit.

About the delay time: To test the delay time, hit that play button and the gif will play at it's default delay time. If it's too fast or too slow, you will hit cancel and change the delay time (at the next step).

For actual exporting: The highlighted box at the top right of the screen is very relevant now. Make sure the first box has the GIF option selected. At the next box, you can select either perceptual, selective or adaptive. I usually like to use adaptive. At the next box you need to choose either diffusion or pattern. I like to use pattern. Tick the transparency box and then select either pattern or diffusion transparency dither.

Once you are satisfied with all aspects of your gif, hit save to export your final gif.

To fix the delay time: After you have exited the export box, go back to your timeline, click on the menu button at the top right and select "Select all frames". Then, on any random frame, click at the small arrow next to the numbers under the frame. Select the option "Other". That will open a pop up box to alter the delay time. To test it again, use the export box explained above. Once you are satisfied, save your gif! I've also altered the delay time in my video to show you the process.

☆ step 14) After your gif is done and saved, I'd suggest to save your psd file if you added any coloring to it. This is so you can reuse the coloring later in other gifs without having to redo it all. This is useful if mking a set of gifs from the same moment / video.

Here's a detailed walk through of each PS step in this video tutorial:

I hope this tutorial is helpful! Feel free to send me any asks if you have doubts or need extra help! (つ≧▽≦)つ

[bluebudgie]

Oh hi. I heard it's gifs tips'n'tricks time.

View this as a little addition to this post I made a while back.

This time I thought I'd take you through my gif making process. It'll be very specific to Photoshop CS6 but maybe some of you will find parts of it helpful regardless.

And since our biggest nemesis appears to be ~The Tumblr 10MB File Size Limit~ I decided to go for the absolute worst premise for a gif: Lots of stupid wobbly particles and gw2 bloom and transparency effects. Because huge gifs love these.

Aah, a horrifying amount of those in this single scene. Perfect!

Let's start with a little timelapse video, and I'll get into the details with screenshots below then.

So this actually went smoother than expected? Not super much fiddling needed in the end, but here's how it went in detail:

Load the raw footage into photoshop.

You can do this in two different ways: What I do is simply drag & drop the video file into the program and it'll open with a video timeline and some rudimentary video editing options.

What you can also do is File -> Import -> Videoframes to Layers and select your source video, which will give you a timeline of separate still image frames instead.

It comes down to preference, I used both methods in the past but nowadays I find the video timeline more intuitive.

Cut the footage to roughly the right length.

From experience I know that most of my gifs are around 3-4 seconds long. This can of course vary depending on different factors. Don't get too attached to the exact seconds you selected, you might have to shave off a bit depending on how evil the file size decides to act.

Optional: Change footage speed

Depending on the gif and its purpose, I slow the footage down. I usually do this for the visual effect (especially nice for showing off animation details) but it also has the practical side effect that it can help with file size. Say you want a gif that loops after 4 seconds. At 100% speed your gif will move at your original framerate (in my case 60 fps); if you slow it down but keep the same length in seconds it'll logically use less frames. That's less data to blow up the size! Yey.

Crop the image.

Now this is probably one of the most crucial parts when it comes to your final file size, and your gif looking nice on tumblr. Since the tumblr dashboard displays images at a width of 540px, you want this to be your absolute minimum image width to ensure a crisp image. If I can, I'll make the gifs larger (I like starting at a minimum of 600px and then reduce the image dimensions if needed).

With that in mind.... choose your image crop wisely.

A "widescreen" image like this will be the most merciful in terms of file size, but might not always be what you want in terms of composition.

Given tumblr's very vertical nature, this kind of approach will look great in posts (if it fits your image composition of course), but at 540px minimum width tends to be a file size monster.

For the gif I'm attempting to make here I opted for a more square approach. The subjects of the scene fill out the image's space nicely, and it's still a nice size for tumblr posts overall. Let's see what the file size will say about this.

Replay your footage after cropping to make sure you didn't accidentally cut off any motion you didn't mean to cut.

Next up: optional colour corrections

I tend to crank up the saturation for gifs way, way more than I ever would for regular screenshots since I find that often the limited web palette can make them look fairly dull. But like everything else so far, this greatly varies depending on the scene you're showing.

Note that colour correction can increase or decrease file size depending on what exactly you're doing. The more different colours you have, the larger your file size will be.

Reduce image dimensions

Since my original video footage was fairly zoomed out, the cropped area only left me 575px of width to begin with. In an earlier attempt (that I absolutely did not fail to capture and therefore had to record the whole thing a second time) I tried to leave it at these dimensions, but the 10MB size limit did not like that so now I knew better and immediately reduced the width to 560px.

Note: After you've changed the video's dimensions it won't let you edit the speed anymore (for some reason), so make sure you've got that settled.

After all the adjustments are done it's time for the moment of truth...

File > Save for Web...

This beautiful window will open and...

Aww almost.

But honestly? That's not bad at all. I've had completely different disasters to deal with in the past (starting somewhere in the mid 20MB, good luck trying to make use of every size-reducing trick you've got up your sleeve).

Before I do any adjustments to shave off the last few KB though, I preview the gif to make sure it loops correctly. I want the Chak to sway seemlessly. Turns out it didn't, so I back out of the window to remove a few frames from the footage. And when I open the "Save for Web" window again....

Well that's anticlimatic. Apparently those few frames were enough to get the file size where I need it. (Note: Sometimes Tumblr likes to be a little b* and pretends your file is too big when you're this close to the 10MB limit. It be like that.)

While my gif journey theoretically ends here, I want to at least show you a few more things that could have helped if I had needed to get the file even smaller.

So this dithering thing I keep making a big deal of...

It can make or break a gif. In my experience this is so, so crucial to the final file size and quality of the gif.

In my own very amateurish words, dithering is a way to emulate colours that aren't actually part of the images colour palette. This is especially needed for in-game transparency effects like fog, glowy stuff, or smooth gradients. And that is part of why I chose this hell scene of all the ley line glow and the typical gw2 bloom that's particularly bad in this area.

PS CS6 offers you three different kinds of dithering techniques: Diffusion, pattern and noise.

My go-to is diffusion dithering, which has adjustable quality levels.

In my opinion it's generally the type of dithering that's often the least noticeable and creates the smoothest looking images. Unfortunately, it's also the one that creates by far the largest file sizes. Another downside is that it doesn't work super well with heavy DoF/fog etc. effects and is prone to really ugly banding, especially visible the more you decrease the quality. It looks awful for this particular scene. (Look at the glow around my asura's headpiece if you don't know what I'm talking about. Or... just the entire background.)

Both noise and pattern dithering will get you smaller file sizes, luckily.

I've never used noise so far (it tends to look messy in my opinion), but pattern gets the job done! Especially for gradient heavy gifs it's a lifesaver. It's definitely more noticeable than the diffusion dithering on static parts of the gif, but it absolutely makes up for it by not having any ugly banding effects. This is also what gave me the neat little 9.99MB file size in comparison to the diffusion dithering's 15.31MB.

Last but not least, if fiddling with the dithering or image dimensions doesn't help you get below that magic 10MB mark...

Limit the colour palette

You can either manually colour edit your image to use less colours for a more artistic approach, or you can let Photoshop limit the palette to its best abilities.

Additionally you can double click each individual colour to replace it how you see fit. (I've done that in the past when Petthri's yellow eye colour got erased and I had to bring it back manually.)

In this gif's example, reducing the palette from 256 to 128 colours has brought the file size down from 9.9 MB to about 8 MB. It can have a big effect, but doesn't always in my experience.

SHOW US THE GODDAMN GIF ALREADY!!!

Not the best quality gif we've ever seen on tumblr, but given the extremely unfavourable source material I think it turned out alright. I have to admit I'm actually surprised it worked at all.

Oh well! This got long (once again). I hope this was at least a little bit helpful to someone out there. Happy gif making!

[fascinationstreetmp3]

hi sorry if this has been asked before, but i've been looking on your faq page for aska regarding your gifs? especially how yo make them - I'd like to create some too but it's so complicated😅

i use photoshop (not paid for lmao i downloaded a version off here years ago from like. 2016) + kmplayer + if it's game gifs, i use nvidia shadowplay to record

i'll put this under a cut because of images/length

i open my footage in kmplayer, and use the frame extraction function over the timespan of the clip i want to gif. these are the settings for that:

normally for games, i record in 60fps and extract every 2nd frame, but sometimes i extract every frame and scroll through to delete duplicates made from stuttering etc. for everything else like movies/tv, i extract every frame. normally, i try to go for around 100 frames, but you can have more or less depending on your final gif size, and also you can always trim your gif down when you're in photoshop, but more frames = longer import time

then in photoshop i go to file > scripts > load files into stack and select all the frames i want to go into the gif i'm making

for the method i use, you need a version of photoshop with timeline animation, and make sure the timeline i displayed (window > animation)

now the next part has a lot of little steps, but they're fairly easy to get the hang of once you've done it enough. it's basically muscle memory for me now but i still do sometimes do things in the wrong order lmfao

anyway. the steps are as follows:

click 'create video timeline'

click the 3 little boxes in the bottom left

in the right menu, choose 'make frames from layers'

when thats loaded, open the menu again and choose 'reverse frames'

click the last frame and change from 5 seconds to no delay

make sure you choose 'forever' instead of 'once' in the bottom left

select all frames (you can select the last one, then scroll back to the first and shift click to select them all, or just click 'select all' in the menu, i'm just used to doing it the first way for some reason lmao)

in the right menu, choose 'convert to timeline'

then select all the layers (can use shift click again)

and finally go to filter > convert for smart filters

here's a very small shitty gif of the process for a visual aid (a gif of a gifmaking guide... wow)

now you have a gif, basically! but you still need to resize and sharpen and edit, etc. i've posted about some of the things i do before but not really in detail because i mess around every time and don't always do the same things. and you don't have to do much! just do whatever looks good to you :')

tumblr's gif dimensions are 540px width for wide gifs, 268px width for two small gifs, and three small gifs are 177px for the two outer gifs, 176px for the middle one (don't ask me why they did that)

once you're done with that, you can export the gif by going to file > export > save for web (legacy). these are usually my settings:

but i might change the colors to 264 if it's a smaller gif, or even to 64 if there are less colours and i can get away with it. for example in these gifs, i only used 64 colours since they were pretty brown/monochrome anyway, but something a lot more colourful would look terrible with 64 colours

the gif needs to be max 9.99MB, but if it goes over, you can always adjust it in the next step. once it's exported, i open it again

select all the frames and click the little arrow on one of the frames, then change the timing. i almost always use 0.05, but you can experiment with what you like the look of

then if the gif's over 9.99mb i just delete frames from the beginning and/or end until it's under the limit. then export it the same way as before (overwrite the old one or save it as a new file if you like) and you're done!

[footballandshit]

how i make gifs using filmora x (for anon ❤️)

read under the cut!

hey!! thanks for reading this! just a few notes before i explain about my editing process:

filmora x works very differently from photoshop. it's a video-editing software anyways, so treat it like that!

always use high-quality sources!! most of my issues with grainy gifs come from using low-quality sources. so, i always ensure to use sources at 1080p, at least!

if i'm creating multiple gifs from one match, i usually download the entire match (which is a hugeeee file 😵‍💫 but it's so worth it!!). but if it's only a scene or two, i screen record them! i have an astro supersport subscription and a beinsports account, so i don't have an issue screen recording clips, as their content are always in high-quality! but if you're using other sources or streams, then do ensure the quality is good!!

if the only available source is of low-quality, my trick is to make smaller gifs! for smaller gifs, i usually keep a 1:1 or 4:3 size ratio, and post them side-by-side in a single post - usually two in a row!

general colouring stuff applies here as well, you can check out the photoshop guide i've linked in the ask!

remember, there isn't one "correct" way to gif, you can gif however you like!

and now without further ado:-

step one: adjust video settings, speed and length after importing the clip into filmora, setting the aspect ratio, resolution and frame rate according to preference, the first thing i'd do is to adjust the speed of the clip. i like to slow them down, so i usually go for a 0.5x speed. you can always adjust the speed to your preference!

i like to keep my gifs within a 3 to 5-second length, depending on the content, so i'll trim the clip or adjust the speed as desired. if the clip is shaky, i usually add stabilization at about 10%, but you can adjust as you like! here's an example of a clip before and after speed reduction:

step two: auto-enhance once the clip is at your preferred length, size and speed, now it's time to make it look pretty! in filmora, there's an 'auto-enhance' feature, so i usually begin with that, setting it somewhere between 50% to 100%. here's an example of how it looks like before and after auto-enhancing at 100%:

step three: colour correction head over to 'advanced colour correction', where you can use either the given presets, or manually adjust to your liking. i always manually adjust them!! you can also start off with a preset and make additional manual adjustments as I did below! what i did here was to darken it, then adjust the colour enhancement, white balance (hue and tint), colour (exposure, brightness, contrast, vibrance, saturation), lighting (highlight, shadow, black, white), and hsl (for this example, i adjusted only the red).

you can also save your adjustments as custom presets so that you can use them again in the future!

here's a quick look at how i do the colouring! from the before and after colour correction examples, you can see that this is the important part of the whole process!!

step four: sharpen once i'm satisfied with my colouring, i sharpen them by adding the 'luma sharp' effect (usually at 50% or 70% alpha and 50% intensity)

here's how it looks like before and after sharpening:

step five: final touches and exporting before i export, i make some final tweaks to the brightness, contrast and saturation, etc., ... and voila!! there also many other effects available for you to add (grainy effect, blur effect, etc.) so feel free to play around!

once you're satisfied with your result, it's time to export! now, video-editing softwares HATE gifs. you can always just export as gif from filmora directly, but i don't really like the way it turns out 😭 so, i export them as video (.mp4) and use external gifmakers (like ezgif!) to convert them from video to gif!

aaaand that's all!! here's a comparison of the original clip vs the end result!

final note: remember to size your gifs correctly for tumblr (540px for full width, and 268px for half), and keep each gif within the size limit of 10mb!! if you find that your gifs exceed the size limit, try reducing the number of frames or removing duplicate frames, increasing the contrast, or you may also crop the height if necessary.

if you have any questions about making gifs using filmora, feel free to reach out! thank you for reading, mwah mwah!! 💞

[apparently-artless]

hi art! i saw your tutorial for hd gifs so thank you! im starting my giffing journey and i wanna know what you mean with resizing the gif to 1080p? can you show me how you crop 540px and 268px gifs and then resizing them back to the 1080p height? i couldn’t seem to do it properly when i tried myself 🥹 tysm!!

Hello, anon! Were you the one who sent the previous ASK? If so, then I'm glad that you saw my reply. ^^

Sorry if my explanation about the resizing part was a bit confusing. Here's a more detailed explanation. (￣▽￣*)ゞ

Sample Image:

Dimensions: Width: 1920px, Height: 1080px

As you can see, the original height of the image is 1080p.

And then, I will crop this image to 540 x 268. I will only use these as ratios and not the actual resolution. This means the actual dimension will not be 540px by 268px so as not to make the image smaller in terms of size. Like I explained before, it's better to preserve the actual size of the image you're using and just reduce the size when you are already exporting the GIF.

After cropping, the dimensions of this image are now 1920 x 952 (originally 1920 x 1080).

Since the height changed from 1080 to 952, I will revert the height back to 1080. Preserving the dimension by keeping the aspect ratio locked, I will change the height from 952 to 1080.

Then click OK. The width doesn't matter. Just focus on the height of 1080px.

Final dimension of the image: 2178px by 1080px. When I say final, this only applies to the editing stage. Once you export the GIF, you can just change the width to 540px then the height will automatically change to 268.

Hope this helps! Also, just a reminder that this is just my preference and something that I am very particular about.

Of course, you can just retain the previous dimension (1920px by 952px). Since 952px is not that far with 1080px. I guess I would be more particular if there was a drastic change in the height.

If you will be following my sharpening style, then it's best to stick with this practice as well. You did mention that you are still starting your giffing journey so feel free to experiment with the dimensions and the values when sharpening your images. My style is, of course, just one of the many ways you can make your edits look more HD. There are gif makers out there who are using different techniques and probably better ways.

Feel free to use mine as a guideline of some sort. Because to be honest, the sharpening style I explained is just me exploring whatever the hell I can explore in Adobe PS. In other words, I am just winging it. XD So feel free not to follow my suggestions to a tee.

[slowestlap]

i have to shoot my shot and ask - HOW on earth do you make your gifs so crisp. they're so clean its literally out of this world!!!!!! when your gifs are on my dash i almost always know its you just by the QUALITY of the gif. help a girl out!!!

Hii! Thank you!! <3 I'm happy with the way my giffing process now goes but it's taken years and a few different fandoms and stumbling upon good tutorials which is why i decided to make one of my own too.

I still love figuring out new things to try and hopefully you can get some new tips to your process from me too. Under the cut is a long af post about gif making, focusing on some basic stuff and sharpening/coloring tips.

________________________

WAY TOO LONG INTRO

Before i get to the photoshop part, the base stuff is super important: You can't turn a very bad video into great gifs since there's only so much photoshop can do BUT you can turn a good video into great gifs. So, obviously the original video quality matters a lot.

I religiously stand by the correct tumblr size dimensions (see example, the numbers mean the width. Height doesn't really matter). However in 3 column sets i’ll sacrifice that one pixel and would make them all 177px. The empty space between gifs in 2 column sets is 4px, in 3 column sets it's 4px + 4px.

Since tumblr can only properly handle 540 gif pixels in the same row, sets with two wide gifs side by side can be laggy to scroll by. So for example, 268px gif will not be as sharp as 540px gif (if you click on it to see it bigger), since it legit has only half of the pixels, but if you plan to post 2 gifs in the same row, the 268px will look better on the dash in the gif set since it’s correctly sized for the best dash result.

I download videos when i can (dl is always better than screen recording), so that's youtube, instagram/twitter etc. Streaming sites/broadcasts i have to screen record and i use OBS to do it. It's the best i've tried for hq recording. I record with 60fps and use display capture. OBS is a heavy program, as is photoshop, so a good enough computer is also super important imo. I used to make gifs with a laptop of 4gb ram/128gb emmc and lost my mind after all the crashing and spent 1k€ on a new one. Basically, have as much performance as you can afford, and editing experience will be much much more pleasant. Of course gifs can be done with an average computer too, it'll just likely be slower and clumsier and you need more patience 😫

Also, i've gotten rid of the urge to be the first to post a gif set when new content drops. I'm not the fastest, i always do every coloring from the scratch. I save to drafts to see how it looks like on mobile, i go back to ps to correct the things that don't look right (too dark/bright, too green/yellow/red, too slow/fast), i make the changes, then save to drafts again and then post. I'd rather post a set i'm happy with than to post quickly knowing i could've made it look better with just a bit more time. (It'd bother me and i'd go back and re-color for my own peace of mind 😅) And i just wanna say it's totally fine when people make gifs of the same stuff!! The more the merrier, no need to think only the first to gif something somehow now has the rights to that moment. I just never get the best result if i try to hurry, so i’ve stopped trying to get my sets out asap. I’ll post when i’ll post.

________________________

SHARPENING

All these words and i haven't even gotten to the point yet 🫣 But fine tuning the details won't work if they don't have a proper base at first. Which!!! Finally brings us to your question:

I'm not sure if the order really matters but the main steps i do in this order: once the layers have been converted to video timeline and video timeline is converted into a smart object -> smart sharpen -> crop -> resize -> coloring

I like to sharpen things first, to me it makes sense to do it before resizing because after resizing you've already lost some pixels, so feels better to sharpen when you still have all the original pixels.

All the above steps (sharpening, cropping, resizing) will affect how the gif looks, so i do the coloring as the very last thing so i can better see how the end result will look.

To me sharpening and coloring go hand in hand, and you use both of them to get the best result. Sharpening obviously does what it says but good coloring will help to make the gif look cleaner and smoother too.

Finally, examples!! The key to a sharp result in my process is 2 sharpening layers. The main layer and the second layer.

Enjoy looking at judgy max f i giffed last year and chose to use as an example here. The source video quality was 1080px and i screen recorded with OBS.

I use photoshop CC2019 so cannot guarantee that these will work the same way in other ps versions. As always, it's about fuckin around and findin out 🙏🏻

__________________

1. Example with resizing done, but no sharpening or coloring (blurry and ungood)

2. Example with resizing and main sharpening layer (already much better)

3. Example with second sharpening layer included (more depth, dark spots are darker, almost too strong of an effect but coloring will fix that)

4. Example with all of the above + coloring (the final result)

5. The final result as a gif

And how did we get that result?

Main sharpening layer settings (yes, it’s in finnish but i think the options are in the same place in every language):

Because the sharpening is quite heavy, I double click on this thingy (red circle) in the layers panel to lower the opacity to 50-70%

The middle layer is gaussian blur, which i’ve set to 0,2.

So basically i intentionally oversharpen the gif and use the opacity function and blur to soften the effect. Dumb or smart, who knows not me, but it’s working for me so i’m rolling with it.

The top layer is the second sharpening layer. A godsend trick i’ve learned along the way: (the difference between the example photos 2 and 3 above)

(I've created an action, so i just gotta push one button and it'll run thru these sharpening settings, ie. i don't have to manually click thru these every time, saves crazy amount of time)

Wasn't sure at which point i'll mention this so i'm just putting it here: when saving the gif for web, i almost always use adaptive and diffusion.

________________________

COLORING

I’m not gonna go thru every coloring thing in my process since this is already so long hsdkfjdkjgkd but i’ll give some info on what i usually do and some tips i've found helpful.

My style is quite natural and i prefer colder tones. I hateeeee overly green/yellow/red skintones that are caused by bad lighting so I always try to correct that. The below stuff is more or less what i did to color that example gif too. (Everything is down to preference, these are just the way i like to color)

My most commonly used coloring layers:

Curves. Utilize the eye dropper tools, pick white eye dropper and click on a white spot on the gif (not pure white tho since it won’t do anything) and it will turn that spot to 100% white and correct the other colors at the same time. Black eye dropper will turn a dark spot you picked to 100% black. It can be super effective, just try a spot, undo, try another spot, undo, until you find what looks good. If you like the result but it’s too strong, lower the layer opacity. And of course you can just simply drag the curve up and get brightness that way. There are times when the eye droppers won't work nicely but it's always worth a try.

Levels. Works similarly to curves, they are basically the more efficient brightness/contrast combo.

Color balance. No gif of mine has been made in the last 3 years without dragging the blue in the midtones to the right. I also often drag the green to magnetas side. 

B&W gradient map. I set the blending mode to soft light and lower the layer opacity. Gives the gif a bit more depth and pop to the dark/light parts.

If the dark parts in your gif are too dark, for example details around eyes look messy but you don't want to lower the contrast, then try adding light colored gradient map (light yellow-white or light blue-white etc) and set it to soft light and play with opacity. It will give light and brightness to the gif without making things blinding and not losing much contrast.

Photo filter. I’m almost always going for cold blue and 10-20 setting. (Orange filters can give a nice effect too, if you want to bring some warmness to the gif.)

Vibrance. Always adding at least a little bit, helps colors to pop and makes skintones look nicer.

Selective coloring. Just drag them sliders to left and right to see what works, that’s really the best advice i can give. If you want reds to pop, go to red and play around. If you think the white spots are a bit blinding, go to white and then slide the bottom one (black) to the right. If you want some more contrast, go to neutral and slide the bottom one (black) to the right. Same with black (black).

Also, i don't like to do too much with one layer. I tend to do different colors with different selective coloring layers, so if needed i can lower the opacity and it will only affect that one color. Also it's handy to duplicate layers if you really want a certain color to pop, one layer often isn't enough in that case so duplicate it and if it's too strong then play around with opacity.

(Left image below). If you want to correct overly yellow/green skintones, go to yellow and you can try these settings. Then lower the layer opacity to see what looks good. 

(Right image). If you struggle getting rid of very red tones, you can use hue/saturation layer, go to red and just drag the middle slider to the left. (This is also a good tip with POC, when you think their skintone is overly orange/red but you are afraid of white washing. This setting will usually correct the orange and red tone without taking the dark/black color away.)

______________________

THE END

Wheew this is what happens when you give me an opprtunity to talk about giffing 😅 I hope it was easy to follow, feel free to ask if i was unclear about something!! And hopefully you got to learn something new. 

Also these are obviously just my way of doing things, not the Only Correct way, do whatever you like and enjoy and don’t worry too much if other people do things differently. Most important thing is to have fun creating 🫡

[waterpoofs]

Improving the detail of Stable Diffusion outputs... and why I'm not going to bother

A couple of people have commented on the sharpness/cleanness/detail of some of the Stable Diffusion images I've posted here, so for those trying to improve their Stable Diffusion game, here's a note on the workflow that creates that kind of detail. I'm also posting it as a way of saying: I'm not going to bother continuing to do this.

Step 1: 512x512 txt2img output

100 steps, with CodeFormer at 0.8, CFG at 7

You can just leave the computer generating hundreds at a time in the backgroung, with a variety of prompts using the "prompts from textbox" script

Step 2: 960x960 img2img output

This is the largest my computer can reliably generate without running out of GPU memory

100-150 steps (adjusted for denoising), depending on how clean the original is

seed remains the same (with seed resizing set to 512x512)

denoising set to 0.2-0.5 depending on how clean the original is and if there's some prompt tweaking

These have to be done one at a time, but you can churn through them like a production line with fairly little distraction from whatever else you're doing

I think Step 1+Step 2 is effectively the same as the "Hires fix" option in txt2img? But it allows you to delete all the duds instead of wasting time generating higher res versions of everything.

Step 3: 2x upscale

I save up lots of step 2 outputs to do as a batch resize

Using 4xValar + SwinIR at 0.5 visibility

No GFPGAN or Codeformer. Sometimes I have these on when upscaling an individual image, but the problem is the strength that is suitable varies with every image -- what is perfect for one ends up ruining another -- so it's not suitable for batch resizing

Step 4: inpainting

Faces and gear inpainted at 0.2-0.3 visibility to improve detail, or at higher visibility to correct things you're not happy with.

That last step is where most of the effort is, and I certainly haven't been bothering with step 4 on everything I've been posting. Steps 1-3 are easy and the computer can mostly run them in the background. Step 4 can involve several rounds of masking different areas and writing localised prompts. It does improve the results, especially when you view the full size image on a high res screen, but it's a bit more fiddly and it takes time that I shouldn't keep spending on this frivolity.

And besides, it's barely noticeable at the scale of a tumblr post. Here's four sets of images, in the sequence of those 4 steps, laid out at tumblr's 540px dashboard width. Click them to open the full size lightbox on a 4k monitor and you'll see a clear difference between each of them: the final images have better details and fewer glitches, the gear has better textures, and the faces seem more real. Scroll past them in your dashboard, or view them on mobile, and the improvements become barely perceptible after step 2. So you'll understand why I'm not going to bother doing any more like that.

As the technology keeps developing, and people keep training better models, I might occasionally out of curiosity dip back into doing some higher effort images. But for now, I've simply filled up my tumblr queue with hundreds of those Step 2 images, and I'll be leaving it at that.

Would you have bothered with those final steps?

Do you prefer to see three posts a day of the Stage 2 images, or one post a week of finely tuned ones?

[vindicia]

your gifs are so pretty and I esp love your scenery gifs, can I ask how you get vids of scenery of some games like uncharted when your character and their big head is always in the way? I feel like I can only get it to work with first person games :( your blog is so beautiful btw <3

Hey! firstly thank you so much for the nice message! 💕

I'd be happy to explain to you what I do because you're absolutely right, nathan drake's (beloved) big head does love getting in the way, to not even mention the companion npcs who just love walking right into the shot you're trying to gif 🙃 i'll share some of my tricks under the cut!

One of the things I'd first like to show you, though, that in most of my scenery gifs, the full footage does include the playable character in the shot (in the case of third-person games). As an example, in this uncharted set i made recently, this is what the full shot of one of those gifs looks like:

I use the PS5's built in recording system to record video in 1080p, making the width 1920px which is a lot bigger than a dash-wide tumblr gif (540px); because of this, even if the character is in the shot, you can make a gif of the scenery without too much trouble. Like in this shot, i can crop out to only keep the lower right corner, and the final gif will still be big and sharp enough to work!

However, sometimes the character does indeed get in the way, and one of the tricks i use is showcased in the gif above: turning their back to whatever part of the scenery you want to gif. You get the least wide part of the character in the frame. Also, lot of games tend to use many idle animations, sometimes causing rogue arms to flail around in your desired scenery shot. this positioning usually negates all of that!

Also, some third-person games allow you to zoom in, I believe naughty dog games sometimes do by pressing the 'aim' button when you're not holding a weapon; this sometimes allows for a good wide shot without a character in it, too. but that takes a little experimenting based on the game you're playing!

One of my favorite tricks, that may or may not work based on the game you're playing and the environment your character is in, is basically backing your character up as close to a wall as possible, and then moving you camera up against the wall as well. This can make the character completely disappear, potentially leaving you with a beautiful wide scenery shot. is kind of hard to explain, i hope this video i conveniently have of me doing this in the last guardian explains it a bit (with me Struggling because this beloved game's controls are so wonky). there is a wall right behind me and i'm moving the character up against it:

hope that kind of gets across what i'm doing - of course this only works if you have something like a wall to back into.

those are pretty much my tips and tricks for gaming scenery gifs i've discovered over the years! i hope this helps, if you have other questions please let me know! 💖

[hue-kangz]

hi!! i wanted to know if you'd be willing to make a tiny tutorial / explanation on your sizing for gifs and how you get such good quality?? i just started making gifs yesterday and i fear i have a lot to learn....

OMG thank you for thinking I'm worth asking something like this but believe it or not I just started making gifs myself, about a month ago! I wouldn't feel confident enough to give you a tutorial but I can give you all the info I've learned and the tutorials I use!

First for gif sizing the only metric that matters is width: 540px for 1 gif by itself | 268px for 2 gifs next to each other | 177px for 3 gifs next to each other. Height doesn't really matter, also gifs should be less than 10MB in size as that's Tumbr's limit.

This is the tutorial I've used for sharpening I liked this one 'cause it has the usual 2 filters I saw other gif makers suggest plus an additional layer and so far I like it the most. The main thing is also to always try to download the highest quality video too, 1080p at least, but if your computer/laptop or whatever you're making gifs on can handle higher quality videos you can download those too (I use this website to download videos off YouTube, but there are others too, use what you prefer!)

And this is the tutorial I've used to blur text/logos on my sets. I saw some other methods but this one was the easiest/simplest for me to understand. But not everyone cares even if you don't blur stuff to start, some of my first sets I didn't blur anything and they did better than I could have expected.

Finally, to go back to Tumblr's limit I learned this the hard way at first but it's important to keep in mind the number of frames in your gif (I always set my limit at 180 or less frames in a single gif, otherwise it ends up over 10MB), BUT another way to try and reduce MB size when exporting on Photoshop (assuming you're working from PS) is changing up the settings to make the file smaller without having to cut too many frames if it still ends up a little big. You won't always have to do this if you use less frames (using the default settings is fine which for me are selective/diffusion) but it's helped me a few times not have to cut anything even if it ends up a little over 10MB originally.

For example from my last set:

This is what my export settings were, the quality can change between using selective or adaptive, or diffusion or pattern (these are the common choices). For this set I chose adaptive and pattern and it gave me the smallest MB size without losing the quality. I don't change much else. I also set my quality bar to bilinear instead of bicubic 'cause I just prefer it and I saw some other gif makers have it at that setting too so I just leave it like that.

I hope some or any of this is useful to you! I also find it helpful that if none of these tutorials are what you want there are a ton of resources here and on YouTube too that I read when I see them or watch if I need to see examples, it's definitely a learning process but I've been enjoying it and I hope you do too!

[garniers]

AUGUSTUS: RPG THEME PACK

[ live preview ♡ $10 on payhip ] After several delays on my end due to changing my mind about the aesthetic and general feel I was aiming for, I am delighted to finally introduce you to Augustus: RPG Theme Pack! Crafted with a whole lotta love and an absurd amount of pseudo-elements and borders, this theme pack over here encapsulates everything I would use for my own roleplay group and is heavily inspired, as per usual, by the works of Oscar Wilde. More specifically Lady Windemere's Fan.

I know the play is theoretically a comedy, but staying true to my storytelling essence I put the theme together with videogames such as Resident Evil and Dark Souls in mind. I have my dear siblings to thank for the inspiration and unwavering support of my late-night coding sessions and my god-awful posture. Once again you have proven yourselves to be the muses behind everything I create and everything I put out there (that's addressed to the zombies, by the way.)

You will find everything you need to know about Augustus on the Live Preview, there is a detailed list with the elements of the theme pack and a couple of extras I took the liberty to add.

Features

540px posts

Full-width header (+ an optional fade-in header menu)

4 Sidebar sections

Footer with both a statistics and pagination section

Optimized for Beta Editor (+ also Legacy Editor compatible)

A navigation page

A character masterlist page

A PSD folder with the graphic canvases (for optimal resolution)

Terms + Conditions

Please do not redistribute / claim as your own

Please do not remove credit

[ Check my Terms Of Service for more information ]

[granadaholmesdaily]

Hi there!

There are many different ways to make gifs but this is what I do:

For Granada I have the DVDs so I use them but you can download them online; try to get the best quality available.

I use KMPlayer to take the screencaps (it's free to download).

Press ctrl + g to start taking screencaps in KMPlayer when you play the video.

Then I put the screencaps into Photoshop but you could put them into free software such as photoscape (drag screencaps into animated GIF section and safe them as a GIF; make sure you choose the right speed).

In Photoshop; file > scripts > load files into stack; then select all the screencaps you need for a gif.

GIFS have to be 268px in width to look look on tumblr (if you want 2 gifs side by side). For large GIFs they are 540px in width.

Then I mess with the colouring and brightness etc. and add subtitles if necessary.

You have have to make sure the timeline is visible (window > timeline).

In the timeline there is a little button menu on the right; make frames from layers, then reverse frames (otherwise your GIFS will play backwards).

Finally; file > save for web > gif (GIFS have to be under 5MB in size to keep their quality on tumblr).

Then I put them into photoscape to get the speed right (you can do it in Photoshop alternatively).

These are the basic steps I do, I'm sure other people have different (and easier?) methods. If you don't want to change the brightness or mess with the colours it's a lot easier because you can use free software. Hope this helps!

Going through with the Granada Sherlock Holmes marathon I'm on, and today I'm watching The abbey grange episode. And within the first 10 minutes, my heart is already shattered by Holmes' and Watson's silent communication and reaction to the lady's story of her husband's alcohol addiction. I never made any gifs yet, but now I really want to get into it to capture that emotion on Jeremy Brett's face. Those who make Granada gifs - how do you do it? I've done video editing before in Shotcut with my own recorded material, just never made gifs. Do you download the clip you want from youtube in mp4, edit it in a video editing programme, and then export it in gif format?

[thetwobosses]

Somehow it took me until now to realize that I could use a pinned post for easier linking to some of my main blog pages for mobile users (I only ever use desktop Tumblr where they're all accessible from my theme, so no wonder).

I also got major whiplash from realizing that not only have I had an About page I hadn't looked at in aaaages, but that it mentioned me having started playing the Saints Row games 'last year'. That last year... was 2013 xD