#finally using 540px width | Explore Tumblr posts and blogs

billysjoel · 7 months ago

Note

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 💙

#answered #Anonymous #gif tutorial #gifmakerresource #typography tutorial #overlay tutorial

24 notes · View notes

aashiqeddiediaz · 2 years ago

Note

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.

177 notes · View notes

quokki · 2 years ago

Text

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:

youtube

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:

youtube

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

#gif tutorial #tutorial #giffing #fxb #resources #Youtube

188 notes · View notes

bluebudgie · 2 years ago

Text

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!

#i did not proof read this #budgie plays gw2 #gif

70 notes · View notes

apparently-artless · 4 months ago

Note

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.

#art answers #reply #anon #artsresources #tutorial #gif tutorial

7 notes · View notes

fascinationstreetmp3 · 1 year ago

Note

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!

#ask #gif tutorial #kinda. i suck at explanations so maybe this isnt the best LOL #if you need me to clarify anything pls lmk! i always wanna help people learn new stuff if i can

22 notes · View notes

footballandshit · 1 year ago

Text

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!! 💞

#ice talks #ice posts #anon #wondershare filmora #filmora x tutorial #gif tutorial

10 notes · View notes

vindicia · 2 years ago

Note

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:

youtube

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! 💖

#answered #anonymous #gif tutorial #i guess

2 notes · View notes

hue-kangz · 4 months ago

Note

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!

#Asks #anon

1 note · View note

garniers · 2 years ago

Text

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 ]

#rpc #rph #rp theme #premium theme #**premiumgarniers #**codesbygarniers #**100notesclub

137 notes · View notes

granadaholmesdaily · 1 year ago

Text

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?

#if you have any questions let me know #adventures in gifmaking

61 notes · View notes

starkked · 7 years ago

Photo

I was just trying to be like you.

#marveledit #spidermanedit #spider man homecoming #peter parker #i actually did a much bigger photoset first but after i was finally done i realized i used 500px width instead of 540px...old habit #guess thats what happens when you dont use photoshop for half a year #mine*#mine***

7K notes · View notes

misty-quigley · 2 years ago

Text

Hi so I’ve had a couple of anons asking me how I make my gifs (some specifically hsmtmts gifs lol) so I’ve decided to write up a tutorial of the basics of how I make my gifs. I’m going to try and make it as detailed and clear as possible - but I have been pretty busy with uni and stuff so if I miss anything or anything isn’t clear just lmk and I will do my best to clarify. I’m going to try and include any resources or other tutorials which may be useful as I go along. This is going to be quite long and detailed so tutorial follows under the cut. For some basic steps I know of good tutorials for - I will link tutorials rather than re-explaining :)

Before we begin with the tutorial part bear with me there are a couple of screencaps which I took out of sequence because I forgot to take them at the step I did it - and the final gif colouring result looks kind of different from the rest of the screencaps because when I was adding the gif to the gifset I was making it for I decided it needed to be brighter because the s3 scene was much brighter than the s2 gif I made for this tutorial (none of this really matters, just explaining the slight discrepancy in some of the caps).

1. SOFTWARE

To make all of my gifs I use Photoshop CS5 (this is the version I use). Any version of Photoshop should work with the methods in this tutorial and you can find a masterlist of cracked photoshops here

2. FINDING HQ VIDEO

When making gifs I always use 1080p video - but not all 1080p is created equally. Generally remux files and larger file sizes will produce better quality screencaps so this is what I search for when giffing. I know a lot of gifmakers who swear by using 4k, but personally I find 4k is more trouble than its worth in my opinion (screencaps always come out weird on my computer - like with a full on green tint, and they take forever to download). For HSMTMS in particular I like to use the release labelled 1080p SALT.

In terms of finding videos, this is a good guide on downloading.

3. SCREENCAPPING

I use mpv player to take screencaps for my gifs. This is a tutorial on how to use and install mpv. When taking your screencaps make sure you have continuous screencaps and no frames are skipped or duplicated. These missing/extra frames will make your gif look choppy and the animation won’t be smooth.

After finishing my screencaps I put them all in folders and move the folders to my desktop (but it can be anywhere you easily can access the folder) to import into Photoshop.

4. IMPORTING SCREENCAPS TO PHOTOSHOP

Open Photoshop. Open the Menu path "File > Scripts > Load Multiple DICOM files” and select the folder where the screencaps for your gif are.

5. CROPPING AND RESIZING GIFS

Click the ‘Crop’ button on Photoshop (the little button shown in the screenshot below). Typically I like to use a preset so that all the gifs in the set I make are the same size. For this set I used the 4x5 crop preset because that is what I typically use.

Position the crop where you want the gif (typically I like the character in the center).

Then push enter (or the tick next to the crop buttons) to confirm your crop.

Use the keyboard shortcut Ctrl + Alt + I to resize your image. This will bring up a little pop up like this:

Resize your gif accordingly based on the width. It is important to use the correct dimensions for the size of the gif you wish to make. These are summarized in the below image.

When you change the width to the correct size (e.g. in this case 540px) the height will automatically change as well.

Click Ok to resize.

6. ANIMATING YOUR GIF + SHARPENING

There are quite a lot of steps to turning your frames into a timeline animation. They are covered in detail in this amazing gif tutorial (which is the main one which helped me learn to gif).

It would be useful to have a read of how the process works, but to speed things up for myself I use a Photoshop action (shared here) I made that does all these steps for me plus my sharpening😊 (Here is a tutorial explaining how to create & install Photoshop actions)

I just highlight the word animate click the play sign and it does all the tedious steps in a couple of seconds. Note it is important to keep the reverse frames one unticked as shown in the screencap otherwise your gifs will move backwards

After that runs through we have our gif in timeline mode sharpened and ready to colour :)

7. BASIC COLOURING TECHNIQUE

My basic colouring process is very simple and honestly it may shock some people but I primarily colour my basic scene gifs using only the curves and vibrance adjustment layers. There a few reasons for this – 1) The curves tool is a powerful tool and you can do a lot with it 2) Less adjustment layers = better quality gifs 3) This works for me and it is what I find easy. Essentially, I like to keep things simple where ever possible.

First I add a curves layer by clicking on the highlighted adjustment layer

This gives you a menu that looks like this:

The great thing about Curves is that Photoshop will do a lot of the work for us if we use the eyedropper tools.

First I click the white eye dropper – then I pick a white point on the gif and see how it goes. This can take a few times to get right and often I will try a few times to see which I like best.

For this gif I selected the white light in the background but it looks a little green to me

After I have selected my white point I will usually do the same thing except with picking a black point of the gifs. I don’t always pick a dark point it kind of depends on how much I like what Curves has done with the white point and if I think the gif needs more contrast.

For this gif I picked a black point of the area behind Ricky. This is what the gif looks like now with the dark point chosen:

This looks a little better to me than just the white point – but the screencap still looks kind of yellowy and dark to me. So what I do now is I go into each colour channel for the curve and manually adjust it to my liking.

Since this gif is yellow I start in the blue channel and add more blue. I do this by changing the drop down menu on the curves screen from RGB to blue. This gives me something like this to work with:

Essentially I adjust the amount of blue in the gif by sliding the white arrow down the bottom up or down to add more or less blue to the gif. For this gif I am going to slide white arrow at the bottom to the left to make the gif more blue (i.e. neutralise yellow). If I think I have added too much blue I slide it back to the right to add yellow back in.

This is what I adjusted it to and it already looks a lot better

I am actually pretty happy with the overall colouring of this for the moment and I don’t think I need to go into the red and green curves. But I will briefly explain what they do/how they work by showing what some adjustments to these curves looks like.

Red curve – here is our starting point

Dragging the curve to the left will introduce more red into the image

Dragging it back to the right will take out red (the gif will become more cyan)

Green curves: this is our starting point

Dragging the green curve to the left will add more green to the image

Dragging it to the right will take green out (adding pink/magenta)

So after I am happy I have coloured the image in curves If I want the gif to be a little brighter I go back to the main RBG Curves screen and drag the white arrow a little up to the left to add some additional brightness

After colouring with Curves I add in a Vibrance layer (highlighted adjustment layer)

Typically I set the vibrance somewhere between 50 and 60.

This is what the gif looks like now:

At this point I also have another quick look at the gif and see if I think I need to go back into curves and tweak the colouring a bit and add a bit of extra brightness. When I add in the Vibrance I find it easier to see if there is any underylying colours I want to go back and neutralise/adjust in my curves layer again.

This is what I end up with after making my adjustments post vibrance layer:

Another step I do sometimes is grabbing the black slider on curves and dragging it just a little bit to the right to add some depth and contrast to the gif. As s2 of hsmtmts is really dark I didn’t do it for this gif because I don’t think it needs it. But I will show an example of what this might look like:

This is basically it for my basic colouring. Of course there are a lot of different steps to making my colourful gifsets, but this is just a basic tutorial for the way I gif standard scenes so I will move on to subtitling gifs.

8. CAPTIONS

My go to subtitle font is Arial Rounded MT Bold. I have Faux Italic and Faux Bold Selected for this. I like bigger font sizes because I have bad eyesight so usually I will opt between 20 – 24 pt font size

I click the T button to add text then I type out my caption.

Obviously we don’t want our text here so I align it to the bottom and centre of the gif I do this by first selecting the move tool then going ctrl + a (this selects our gif as the boundary for our alignment). You will know this is done based on the border that comes around the gif (also please ignore that drop shadow and outline settings have already been applied here lol – I added this in because I forgot to screen cap/ explain this part initially)

Then I align my text using the following menu buttons:

Next I Ctrl +D to remove the selection (you need to do this to be able to nudge your text up for the next step). This is the result of the alignment:

Now I nudge the caption up by selecting the text layer and pushing ctrl + shift + up

This is the result:

This looks ok, but I always add an outline and dropshadow to make the text more readable. To do this I go into the blending options for the text layer. You can do this by right clicking the layer and selecting blending options or by double clicking the layer (but not on the text).

First I add Stroke with these settings

Then I add Drop Shadow with these settings:

9. SAVING GIFS

To save your file use the keyboard shortcut Ctrl + Alt + Shift + S to open the save for web settings. You will get a screen like this. The settings shown in this screen are my typical save settings (except it should say ‘Forever’ on looping options)

However, Tumblr’s gif limit is 10mb so the size of this gif is too big to upload (it is nearly 12 mb) so we have to go back in the timeline to shorten the gif a bit so we can upload it to tumblr.

I do this by dragging the red preview thingy (idk what else to call it) around till I find a point where I feel the gif has a natural end. Then I grab the timeline bar thingy (idk what it’s called but the silver gray bar at the end of the gif) to the red bar to shorten the gif.

Now press Ctrl + Alt + Shift + S again to save your gif and make sure you set the Looping Option to ‘Forever’. Sometimes I have to shorten the gif a few times to get it under 10mb - but luckily I got it first go this time :)

Now your gif is saved but there is still one step left to do. Photoshop has a glitch where it automatically sets gif speed to 0.7 after saving from the timeline function – we don’t want that! The gifs look very slow and are not very smooth.

So what we do is we open the gif that we just saved and this will open in the frame format. All we have to do is select all frames and set the gif speed to 0.5 – I also have this in my action so I go back to the actions and highlight the line that says ‘set frame speed’ and play the action through

Then we just save the gif again as we just did 😊

This is the end result:

and what the gif looks like without any colouring or text:

One other helpful tip:

If you are giffing from the same scene you can do your colouring and text manually as per the tutorial on the first gif for the set and then drag what you did across to the second (after cropping, resizing and animating it). All you need to do is drag the colouring outside to a different window then highlight your adjustment layers + text and drag them to the new canvas off of the gif (If you drag it on top of the gif it will place it where you put it. Make sure to go off the canvas to so it will keep you positioning/alignment of the text you made 😊)

Basically - you drag the text, curves, vibrance (and any other layers you need) to the gray area of your photoshop document and your colouring will be applied and your text will be placed in the same position as your source doc.

Ok so that is my super basic gif tutorial - if anyone has any questions feel free to ask!

1K notes · View notes

aashiqeddiediaz · 2 years ago

Text

gradient text tutorial

This tutorial is for @ladynephthyss but y’all can have it too xD

We’ll be adding text so the final gif looks like this:

This tutorial assumes basic knowledge of gif-making, Photoshop, and coloring. I’ve only described the text tutorial in this.

Tutorial under the cut:

Couple things to note beforehand:

There is a lot of trial and error involved when doing any sort of text, 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!

This tutorial is inspired by the difference text effect in these tutorials: one and two by @anya-chalotra (highly recommend checking those out!), just done a different way.

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

Find fonts that have bold shapes or some width to them, so you can see the movement.

This is my starting gif, after sharpening and coloring.

First, I position my text where I want it. (this can be moved around later, I just like to get an idea). Remember what I said about fonts? Try to use ones that are thick for this effect so you can see the gradient/movement underneath the letters. I’m using Intro.

It doesn’t matter what color the text is at this stage, I just do white text so I can see it:

Then, add a gradient map in the color you want your text to be. For this one, I chose black and purple. The more contrast there is in your colors, the better it looks. You’ll be able to change this later though, if you don’t like the way it looks.

This is how it looks with the gradient map:

Now, we’re going to go over into our layers panel, and where we have the white box (the layer box), we’re going to select and delete that...

...so it looks like this:

Then, while pressing Ctrl, we’re going to hover our mouse over the T in our text layer. Your cursor should show a white box with a dotted border. Press the T in the text with the specialized cursor, and you should get a dotted line all around the letters, like so:

(I’m not able to get a screenshot of the cursor for some reason but I hope the instruction made it clear!)

Then, make sure you have your gradient map layer selected, and press the layer mask button (shown by a white arrow in the below image - it looks like a white rectangle with a black circle in the middle.)

This is what it should look like:

Right now, it’ll look like some solid color (which depends on your gradient). This is because we still have the text layer visible. Once we press the eye icon next to the actual text layer to hide it, you can see that this is what it looks like:

(You can also delete the text layer, but I don’t, just because if I decide to put these two words on two lines, or change their spacing or whatever, I don’t want to have to make a new layer. I can just edit that one before re-masking.)

As you play your gif, you’ll see that this is what the whole movement looks like:

You can see that the movement of him lifting the glass to drink his tea shows through the text, too. Almost like a weird color X-ray type thing, where the lighter color shows on darker shades of the gif, and the darker color shows on the lighter part of the gif.

Note: sometimes, depending on the way your gradient is made, you might get text that looks like the picture below. Just hit the reverse button (shown with a white arrow), and you should get the text looking like it does above.

This is the basic way to do it. Now, we can easily edit this, if we feel like there’s too much purple and not enough black. To do that, we go into the gradient, and change the slider positions of the colors. This is purely an aesthetic preference, but I’ll show you how to do it below:

For example, I moved those sliders so there’s more black and less purple, and the gradient feels more like two colors only, instead of all the various hues of dark purple/gray-purple.

This is what the gif looks like:

In the gif before this one, the black was more of a muted gray. In the one directly above, you can see that it looks much more striking. So play around with that until you find something you like.

It still doesn’t look very visible to me, so I’m going to add a drop shadow underneath (again, this is a preference thing). You’d do it just like you would with a regular text layer. Right click the Gradient Map layer and select Blending Options. Add a drop shadow.

This is what mine looks like:

And that’s it! You can keep playing around with the whole thing until you’re happy with it. You can even keep changing the color, and the great thing about that is you’ll be able to preview it as you change it to see what works with your scene. For example, I tried white and black text here:

And that’s it! Feel free to drop me an ask if anything’s confusing! Happy giffing!

#zee's tutorials #tutorials #gif tutorial #typography #gradient text #photoshop tutorial #resources #ps help #dailyresources #completeresources #itsphotoshop #allresources #dailypsd #userisha #userdahlias #alielook

471 notes · View notes