#mytutorial

import your video that you'd like to gif

you'll navigate to file > import > video frames to layers. a box will pop up asking you to go to wherever you have your video saved. you can use some downloader online if you'd like for your videos (be careful!), or you can use vlc media player, a free software. (if you'd like a tutorial on that, let me know!) click on whatever video you'd like to import and import it.

2. select the part of the video to import for your gif

another pop-up will come up and it will look something like what's below. no clue if the settings will look like that for you, but that's okay. you'll use the two little black arrows(?) at the bottom of the video player to select whatever part of the video you'd like to gif. the left-hand-side will change to "selected range only" once you do that. make sure that "make frame animation" is clicked. I don't know if photoshop changed this, but for me, I can only import 500 frames at one time. a warning box will pop up when you hit "OK" if you have more than 500 frames. you'll learn over time how many frames a scene probably takes up, and for bigger scenes, you'll need a few files to gif everything you'd like.

3. clean up what you imported to be the exact layers you wanna gif

once you hit okay, your screen should look something like this.

because you clicked "make frame animation", you'll see the frame animation at the bottom as well as all the layers on the right-hand-side. here's where you'll start deleting layers that you don't want in the gif because usually you'll have a few frames that are from the previous or following scene depending on what parts you chose.

I want to delete the first 13 layers because they are from the scene before. so I'll select all 13 layers on the right and hit the trash can. a box might pop up and ask if you want to do that action. you'll say yes.

your animation timeline at the bottom of the screen will look something like this now.

you'll select all those blank layers in the timeline and hit the trash can. if another box pops up asking if you want to do that, just hit yes again.

you'll do the same thing at the end of the timeline with the latter layers. delete what layers are from the following scene of what you wanna gif, and then delete the blank frames in the timeline below.

4. create your gif

your screen should look like this. (lol @ me making a gif of my favorite scene again.) you'll have the entire clip you want to gif in the timeline as well as your layers.

now, you'll want to crop your gif to whatever size you'd like. pressing c will get you to the crop function, and you'll drag the sizes of the canvas to get rid of any excess black space on the bottom of the images.

if you know how many pixels/inches to take off for the image (I do after doing it enough times), control + alt + c will get you to the "canvas size" pop-up. it usually defaults to inches; I change it to pixels. if you know the exact dimensions you'd like, you'd put them here and hit "OK".

so now your gif will look like this.

before you actually "form" the gif, you'll have to change the time between each frame. you'll select all the layers in the timeline at the bottom and click the little downward arrow on one of the layers. this is entirely up to preference, but I usually hit "other..." and use either 0.06, 0.08, or 0.1 seconds depending the scene. I've found it doesn't really change the file size of the gif, but it does make the scene go slower or faster depending. you can play around with it and see what you prefer.

technically, you are done with your gif now. you'd just have to resize your gif to whatever size you'd like and save it for web. however. I'm going to show you what more you can do to your gifs to make them just a little better.

5. spice up your gif

with the timeline layers still highlighted/selected, you'll click the little button with three lines on the right-hand-side of the timeline and click "convert to video timeline".

the timeline will change to this and all the layers on the right-hand-side will now be visible, as seen by the eye icon being clicked for all of them.

you're going to select all your layers on the right.

then, navigate to filter > convert to smart filters. a pop-up might come up. just press OK. your timeline and layers will now look like this.

you can do loads of things with the layer on the right now. you can apply sharpening filters, gaussian blurs, whatever you'd like honestly. you can find all these options under filters (> sharpen (or > blur)). here's how you find smart sharpen. it's best to just play around with filters to see what you like best. (I can also provide some guidance if you'd like.)

for instance, I created an action for sharpening my gifs, and you'll see on the right-hand-side all the filters that I applied to my gif. this makes the gif look crisper and/or smoother.

you can also play around with the coloring of your gifs by clicking the (half) circle icon. loads of options will pop up, but the one I'll show you today will be the curves option. (make sure you have selected the top-most layer of your layers to apply the curve or whatever else to every layer - it sort of acts as a filter over-top of everything.)

the curve box will pop up, and you'll click the diagonal line to adjust the color/brightness curves applied to the image.

each curve you apply to a gif will make the gif look slightly different, and curves usually can't be applied from one gif to another unless you are making a gif of the same scene across multiple gifs. you learn best by just playing with this filter to see what makes the gif look the best, and the curve will adjust as you move those small squares on the line/curve; so you'll see all your changes as you work on them. the before and after the curve is below.

in this instance for the colors and brightness of this scene, I would do more filtering and coloring to adjust how bright it is and to tone down all the greens and yellows (damn yellows!) in the scene. at the end of those adjustments, the gif will look something like this. I added a selective color filter, played around with the yellow in the gif, and then added another curve to make the darker parts a little darker.

6. save your gif

prior to saving your gif, you'll want to resize it to something reasonable. you'll note that I didn't resize until this point - I just cropped the scene. this is to ensure you are working with the most pixels for the editing/filtering process. you lose clarity when you size down, so you want to save all re-sizing for the final steps.

when you resize for websites like tumblr, the widest you should ever really make your gifs is 500 pixels. the width of the dashboard is 500 pixels and anything wider will get compressed by tumblr. compression = bad for gifs, so we want to avoid that at all costs.

you can use the short cut control + alt + i to get to the image size screen. it should automatically be in pixels - if not, change it. keep all the things at the bottom checked if not already checked, and change the width to 500 pixels.

now, you'll save your gif. the shortcut to save for web is control + alt + shift + s, or you can go to file > save for web. it might take a few seconds for the gif to load, but this will pop-up.

important things to go over. you'll want to change "looping options" to "forever".

also, you're gonna want to look at the file size of the gif.

you'll see that this gif is 2.208M, which is a little too big for best optimization for tumblr (less than 2.0M is best to prevent compression - though it could be 3.0M now based on things I've read. so ideally, just keep your gif size below 3.0M or else tumblr will compress the crap out of it.) in order to change the file size of the gif, you can go back and make the canvas smaller, so crop more off from the top or bottom of the gif; get rid of frames from the gif itself, which will involve you going all the way back to the beginning and deleting frames before you converted to smart filters; or just think of other crafty ways to make the file size smaller. for this example gif, however, we are good to save it.

the "save optimized as" box will pop up, and you'll just navigate to where you wanna save your gif and done.

7. celebrate your achievement

you did it! you made your first gif!

8. practice, practice, practice

I've been making gifs on and off for years, and I'm just learning the little details to make my gifs way better with different filters and blurs and everything else (because photoshop is powerful). the first few gifs will be bad or difficult to do, but after you make ten, twenty, thirty (or gif a really, really long scene), you'll be so much better. then, you'll get a feel for what looks good for your style - color filters, vibrancy, curves. after that, you can add captions on your gifs (can give tutorial if needed) or add static images to overlay (also can give tutorial) or even do fun things like these here, here, here, and here.

The process:

(Note: this is in RGB color mode) 

Curves has a number of buttons and other things contained within it, but today we’re just going to focus on the eyedroppers:

Using each of these tells Photoshop “this is where the image should be white (#FFFFFF), black (000000), and 50% grey (808080).” Photoshop then takes that information and makes changes to the RGB channels in Curves accordingly. You can eyeball this and pick whatever pixel you want to set as the white/grey/black points, but Curves has a nifty way built in to help you find the white and black points.

Finding the black and white points:

If you hold down alt and move the black slider little by little to the right, the image will turn white and you should see black pixels gradually appear. These are the darkest pixels in the image, and are probably where you should set the black point.

You can do the same with the white slider (hold down alt and move it to the left little by little), and it’ll show you where the brightest pixels in the image are. 

Now that you know which pixels are closest to white and black, you can use the eyedroppers to set the white and black points. Here’s what it looks like with those both set:

Finding the grey point:

So finding the grey point is a little bit trickier, since there’s no slider for it in Curves (afaik anyways). I’ve created a Photoshop action (you can download it here) that speeds up the process. Here’s what the action does:

Creates a layer and fills it with 50% grey

Sets the grey layer to Difference blending mode

Creates a new Threshold adjustment layer

Groups the two layers together

This group of layers essentially works in the same way that slider trick did, except it’s for grey pixels. If you don’t see any pixels on screen, don’t worry. Increase the value in Threshold by 1 until you see pixels pop up. Those are the pixels that are 50% grey (or closest to it). You can mark these with the Count tool (or if you’re low tech like me, just hold a finger over the spot lol) and come back with the grey point eyedropper to sample it (turn off the layer group visibility first).

Now that we’ve got each of those points identified, we can white balance the gif (you can delete the grey balance group now that it’s not needed). Here’s how I set mine + what the Curves layer looks like:

Using the eyedroppers will make changes to the RGB channels. You can resample or adjust these individually by hand if the result isn’t quite to your liking. I also like to adjust the tone curve to create more contrast:

Curves is a great starting point for making color adjustments. I’ll often add a vibrance layer and call it a day:

We'll start by doing the following: the base gif, crop and color it and then little gifs that go in the polygon. I cropped them at 540px even though I knew I was going to use them smaller, because I just wanted to make it able for photoshop to run, but still have a big enough image that I could fiddle with when framing.

Here's how it looks so far:

My layers panel is a mess, so we'll ignore that part for now. We have the base colored gif and stacked on top of it should be the smart objects of the other tiny gifs.

NOW we'll click on the polygon tool and draw your shape.

Things to note: - if you don't have the polygon tool, just right click on the rectangle tool over rotate, in the left toolbar. - When you click on it, the settings may be to 99 sides and then in configurations "star" may be checked. Change that to 6 sides and uncheck "star".

- Remember to pick a fill! Preferably the color of your gif.

We're going to repeat this process as many times as you want, mine looked like this when I was done:

But I'm not giffing a show fortunate enough to have scenes for all the honeycombs. Besides, it would look cluttered. So I selected some of the combs (which polygon will generate 1 layer) and put them in a folder, the others in another folder.

With the ones that AREN'T going to become little gifs, you can rasterize and duplicate. Play with the settings.

I have a layer set on difference, where I changed all the combs to be grey. Another one with the orange set to color. Another one with the orange set to overlay. ANOTHER ONE with a 0% fill but a stroke in light yellow and 1pt.

Here's how it's looking. The one with a stroke I moved a little to the left and a little up, so you can see it.

Now the combs that ARE going to be gifs. Set them on normal, 100% fill.

(Duplicate this rasterized layer, turn off visibility, save for later. )

We have shapes! You know what we're going to do now. Turn on the visibility of the little gifs, put on top of this layer, right click and select "Create clipping mask."

Now they're all bound to this shape.

Time to resize, organize, erase parts of your gifs, add more color, etc, etc, etc

One more step:

Remember that duplicated layer of the tiny gifs honey comb? Turn it back on, put it under everything, turn fill down to 0% and then double click. Drop shadow, yellow:

You'll see I also added some glow spots. That's easy to achieve, use a soft brush on a transparent layer on top of everything and brush with a light color, layer set to either "overlay" or "hard light."

Now we add text and it's done!

first things first: have your gif ready; size and sharpen wise. i don’t know how many of you make your gifs but in my opinion coloring should be the last thing you do.

ok, lets take a look at my initial gif:

i start by making myself some questions: (1) is it brighten enough? (2) are the colors ok? (3) is it vibrant enough? (4) do i like the contrast? (5) do i like the color palette?  → these questions will help me guide my coloring process and how i want my gif to look like in the end

for example here i can see that the brightness is close to what i like, the colors mostly match (there isn’t an excess of red, green or blue), but it isn’t vibrant nor contrasting enough, and this color palette looks all over the place in my opinion. with this in mind, my focus will be on those steps. so let’s start with some adjustments:

1. curves

ah, my best friend in the entire world. this can help with the brightness and the color correction, so i always start with this adjustment. all you have to do is select the blackest and whitest point in your gifs with the pointers shown below

in my case, this is what that correction looked like: like i said before, the color balance is pretty ok, but it did bring out a bit of contrast and vibrance (here i can add another curve adjustment if i feel like it). in this particular example it didn’t do much, but this could be a life saver in unsaturated gifs or weirdly colored footage (like the vides haas makes)

2. vibrance/saturation

this adjustment should be used with caution, because it can ruin skin color (specially the saturation). but it can also do wonders if you feel like your gif is looking dull. in most cases i use the vibrance, but in this particular gif i felt like seb’s skin color was off, so it told me it needed more saturation than vibrance. think of vibrance like a less exaggerated adjustment to what saturation is.

*i usually use saturation with skysports footage tho.

here’s how my gif is looking so far:

3. color balance

ok, color balance is definitely a personal choice. there’s not much behind my thought process here, because i usually just toggle every slider until i like what i see. in this particular gif i used these settings: 

be careful here, because you can easily over-do it. my rule is that i don’t go past -10 or +10, unless i’m doing an aesthetic gifset.

* in many gifsets i don’t use this adjustment, because the color correction with the curves usually is enough

4. levels

ok now levels: i use this adjustment as a replacement for contrast/brightness, because i feel like i have more control. from left to right is the darkest parts to the brightest parts of the gif. for personal reasons i usually move the first slider (0) more towards to the right, because it adds contrast to it. then i move the other two according to it.

now this is what that looked like:

ok so with that, we fixed the brightness and contrast of the gif. when i was taking the screenshots it looked like i hadn’t done much, but in reality it did do a lot. here’s a gif of every adjustment, in order:

quite a lot has changed already, as you can see (ignore the quality, this is just because they are exported like this, your gif will not look like this)

-

so let’s take a look at your current gif: i would say this is good to post if you like the colors.

but like i said in the beginning, i don’t particularly like the color palette. this is where selective color and hue will pay a big part

5. selective color

my second best friend: selective colors. again, this is personal preference, but personally i’m not that huge fan of yellows and greens, and i like my blues a bit more teal-looking. there’s no green in this gif, that’s why i didn’t change it, but usually i always do something with it.

here i increased the magentas on seb’s suit, and try to see if i could change the shade of blue of the umbrella behind him. the red was to fix a bit of seb’s skin that was altered with the saturation adjustment.

*IMPORTANT: ALWAYS make sure you keep the original skin color of the person you’re making the gif of, specially if its a poc. we don’t wanna see white-washed people.

like you see here, my blue is now more teal-ish, and the aston martin suit looks better. 

but wait... what do i do with the yellow that i don’t like? i could use the selective color to change it, but i decided that i was going to fully colorize that shade of yellow, and to do that i had to use this next adjustment:

6. hue/saturation

in my mind i saw that it could look very pretty if i tried to turn that yellow to pink, so it would go with the am suit. i changed the yellows quite a bit (-102, -44 and +45 is a lot imo), and while i was in it, i decided to make the blues more teal.

now voilà, i like this color palette now. also the gif somehow looks cleaner because all the colors where clashing with what i was trying to portrait.

very important here is that thankfully this coloring didn’t change seb’s skin tone, but it can happen when you change the hue of the reds or the yellows, so be careful there. heavily changing the hues can also make the gif more pixelated, so there needs to be some balance.

7. additional steps: levels2 and gradient map

now my gif was looking very pretty but on a whim i decided to add two steps: add another levels adjustment, and add a gradient map (the gradient map was put with multiply at around 30%). these steps were not really necessary but i liked how they looked like.

9. final result and comparison

so with all of that we went from:

to this:

pretty neat huh

10. some extra tips

- this was a gif made from a screen recording, but downloaded footage will have better colors to start with

- the more hq your gif is, the better the colors will look like

- coloring isn’t something thats done “good” or “bad”, we all have a personal taste when it comes to colors and such. the most important thing to me, is that you try to experiment with every adjustment, because that helps with finding your aesthetic. i don’t have one way of coloring, i just do what i feel is right for every gifset i’m making. 

-

so yeah, thats it for today! sorry for my english in some parts hahah, oh and also i’m here for any questions you may have, either via dms or asks... i might not know much but i’m always happy to help

For this gif you basically need to make two separate gifs, colour them, do all the things you usually do. You now have gif #1 and gif #2. Your gif #1 will be the base gif and gif #2 is the one that will be appearing, just like in my edit, young Aleksander is the base gif and red Aleksander is the one that appears.

Select the frames of both of your gifs. Then copy the frames of gif #2 and paste them on the frames of gif #1 with the "paste over the selection." Then group all the layers of the gif #2 so its easier to navigate, like here.

And then you basically decide yourself on which frames you want your gif #2 to appear. Just make sure that your gif #2 folder is selected on your layers panel.

As you can see on the screenshot above, the opacity of my red aleks gif is 40% on the 12th frame. On the first 10 frames I have 0% opacity for it, on 11th frame its 30%, on 13th frame its 50% and so on. Here you're given the full reign of how you want your gif #2 to appear, gradually or fast, how many times you want it to appear, if you want it to cover the gif #1 fully or you want to have them mixed together which means that your gif #2 will be half transparent, its all about how you change the opacity of it.

I also added the transition when the gif appears and disappears. To make it, choose the first frame where gif #2 starts appearing, and also go to your gif #2 folder on the layers panel and choose the corresponding layer to that frame like on the screenshot below.

Then go to the Filter -> Blur -> Motion blur, choose the distance of 30px like here

Then repeat the same for the next frame and its' corresponding layer, but set the distance of 20px. And then again, but with 10px distance. But also, play with the distance and see how much you like it and for how many frames you want it to last. I always like to "close" the gif with the motion blurs as well, so I do the same thing but with the last three frames of the gif.

So first up, I’d recommend any non gradient stuff you want in the post be done first. You can leave it in rich text mode and use the Tumblr interface to edit it how you want. I’ll show you how to make all these same edits in the code later, but doing this step now is just a lot easier :) 

then you’re gonna want to go to this website to make your two color gradient text:

http://jsfiddle.net/j7vLfbw1/22/

you just have to paste your text, choose your colors, and click run, then copy the code that appears underneath :)

for choosing your colors, you can make them exact colors from your post if you like! clicking on the color options will give you this:

but if you click show colors this window will appear (I am on a Mac, I don’t know what it looks like on PC)

If you have your art or gifs or whatever you are posting open on your screen you can click the eyedropper in the bottom row and select a color right off the image. If you have a hex code or rgb value, you can go here in the window to enter it:

you can get the hex code of a color in photoshop, or you can go to https://html-color-codes.info/colors-from-image/ and upload your image :) I’m not using the hex codes of the photo for this example, because I think brighter colors will be easier to see for this purpose.

once you have your code copied you can go back into your post and switch to the HTML editor

If your gradient text is the first thing in the post, put your cursor at the beginning of the blob of code you see and paste, likewise if it’s going to go at the end. If you want it somewhere in the middle, look for the text right after where you want to put your gradient text, and follow the tags backwards (to the left) that don’t have forward slashes (they look like this <>) until you get to one with a forward slash, like this </> 

</> this is a closing tag, <> this is an opening tag, so you’ll want your gradient text code to appear in between the closing tags of the previous thing and the opening tags of the next thing.

pasting where the cursor is placed above will put the gradient in between the second and third line of text. If you click preview it will look like this:

Now for the part you’ve probably been waiting for: how the heck do I edit this blob of code? I’ll tell you a bit about the relevant HTML tags and they will be put in bold so you can pick them out easier :)

Each letter of your gradient text will be between its own <span></span>

If you want to place a line break in your gradient text, find the first letter you want to go on a new line in the code and trace it backwards (to the left) until you reach a <span> and place <br> right before it. 

For non gradient parts of your text, a similar idea applies, find the words you want on a new line, trace it back to a closing tag (</>) and place <br> right after that closing tag. 

For the rest of the tags, you will need to insert an opening tag before and a closing tag after. to turn your first line of gradient text:

<span style='color: #4d22b4'>t</span><span style='color: #4e21b1'>h</span><span style='color: #4f21ae'>i</span><span style='color: #5121ac'>s</span><span style='color: #5221a9'> </span><span style='color: #5421a7'>i</span><span style='color: #5521a4'>s</span><span style='color: #5721a2'> </span><span style='color: #58219f'>a</span><span style='color: #5a209d'>n</span><span style='color: #5b209a'> </span><span style='color: #5d2098'>e</span><span style='color: #5e2095'>x</span><span style='color: #602093'>a</span><span style='color: #612090'>m</span><span style='color: #62208d'>p</span><span style='color: #64208b'>l</span><span style='color: #652088'>e</span>

into italics, add <i> before the first <span> and </i> after the last </span>

Now your text is italic!

Here are all of the tags for the other styling you are able to do with the rich text editor. They follow the same rules of how to put them in your code as the italics:

<b></b> bold

<i></i> italics

<h2></h2> headline

<a href=“”></a> link (put your url link in between the quotation marks)

<strike></strike> strikethrough

<p></p> another way to put text on a new line (it’s the paragraph tag)

<ol><li></li></ol> ordered list (1,2,3,4, etc.) <ol></ol> goes around the entire block of text that will be in the list, a different <li></li> goes around each individual list item. the same principle applies for unordered (bulleted) lists

<ul><li></li></ul> unordered list (bullets)

<blockquote></blockquote> indented text

I applied some of these to my blob of gradient text so you can see what it looks like :)

And there you have it! There are plenty of other little things you can do with HTML, but these are all the ones that Tumblr lets you change in the rich text editor. If there’s anything else you’d like to know how to do, my asks and dms are open for questions!!

bonus tips: 

Once you switch to the HTML editor, you can’t switch back to rich text or you will lose your gradient and possibly some other formatting, so leave it in HTML mode once you’ve started!