Tumgik
#I think I really like that colouring; sometimes you have to choose between 100% vibrance or less grain
kimtaegis · 2 years
Photo
Tumblr media Tumblr media Tumblr media Tumblr media
❤️🖤❤️ (cr. namuspromised)
2K notes · View notes
kerasines · 3 years
Text
GIF Tutorial for Beginners
People keep asking me to teach them how to make gifs and I end up writing them long confusing messages, so I figured maybe it’s time to just write up an actual clean tutorial instead! This is supposed to be for total beginners! (Or people who want to switch to a new process that I’ve curated and streamlined over 8 years of making gifs.) I’ll try to keep this as barebones as possible, and won’t include all the advanced stuff I usually add. I hope it’s easy enough to follow, and I’ll include some links at the end for more stuff. I really do think it’s better to make a few simple gifs before doing more complicated stuff though, just to get used to it!
There will be three sections in this tutorial: #1 Basics - How to make a gif in PS at all #2 Sharpen - How to use sharpen/denoise filters in an easy way #3 Colouring - Just a few very basic adjustment layers
What you need:
A video (most common formats should work, although .mkv doesn’t always)
Photoshop (I use PS CC 2018 - this one because I'm morally opposed to Adobe’s subscription model - but versions aren’t super different from each other)
In the end, you should hopefully be able to make something like this:
Tumblr media
This is gonna be so long. Sorry. You can make a gif with just part #1! The rest is just to make it look better.
#1 Basics
If any of the tools/functions aren’t where they should be for you, your best bet is googling it, you might need to change something in your preferences!
Make sure to save your PS file... often. PS has a tendency to crash, especially on laptops.
First, you need to get the video file. I recommend a shorter video, a few minutes long, if it’s longer you might want to cut it into shorter parts beforehand. This is just because PS’s video import tool sucks.
I chose the Butter MV, specifically Jungkook’s body roll at 1:24 because that’s what I want to look at for the duration of this tutorial. No further questions, thanks.
1. Open PS, go to File > Import > Video Frames to Layers
Tumblr media
2. In the little pop-up, choose the part of the video that you want to gif. This will import every frame of the video into PS as a layer, so it has to be a relatively short part, or it’ll take ages (and gifs can’t be that big anyway). Now you can also see why it’s almost impossible to select the correct part if the video is too long.
The little controls at the bottom are for trimming, the one in the middle just for the preview. Make sure “Make Frame Animation” is selected! Then click OK.
Tumblr media
3. Now you have your layers, and you have a frame animation! On the right are your layers, that’s where we’ll apply the colouring etc. later on. On the bottom, that’s your timeline or frame animation - that’s what the gif will be in the end! So if you delete frames, the layers will still be there, but they won’t show up in the gif. If you click on a frame, you can see the little eye checkmark on the layer that’s currently visible.
Tumblr media
4. The timeline controls at the bottom that are relevant right now: set to “forever” so the gif will loop, you can play the animation with the play button, and you can delete the selected frame(s). The number on each frame is the speed of the gif, depending on the video I usually set it to 0.05 or 0.06 (photoshop lies to you when you play the animation, the only way to test this is to open the finished gif, preferably on tumblr or wherever you want to upload it).
Tumblr media
5. As you can see, the animation starts a bit before the actual part that I want, so go ahead and delete all the frames in the animation that you don’t want! You can delete the corresponding layers too if you want, to make the PS file smaller, but it has no influence on the gif. (Hold Shift to select multiple frames as usual)
6. Next, we’re gonna crop the gif however we want! You can do this with the crop tool in the left sidebar, but with gifs like this where there’s a lot of moving parts, I sometimes just use the selection tool in the left sidebar, like so:
Tumblr media
When you click on different frames, the selection stays, and you can check to make sure Jungkook doesn’t suddenly go out of frame if you crop it like that!
Tumblr media
At this point, make sure the selection/crop isn’t smaller than you want the gif to be! For tumblr, what matters is the width (in pixels) of gifs. In the end, the width dimensions on tumblr should be 540px (1 gif per row), 268px (2 gifs per row), or 177/178px (3 gifs per row). Anything else will lead to very shitty resizing!
For this gif I’m going full sized, meaning 540px wide, so I made sure my selection isn’t smaller than that.
Then just go to Image > Crop, and it’s done!
Tumblr media
7. Check to see if this is what you want, then resize: go to Image > Image Size to resize the picture. Make sure the little “link” between Width and Height is active (to keep the same aspect ratio), then set the width to 540px or whatever you chose. I always set the resample option to Bicubic.
Tumblr media
Once that’s done, set the zoom to 100% right above the timeline, to see what it really looks like.
Tumblr media
Almost done! A little note about the sizing: width is the important part for tumblr, but if you want to make a whole gif set (especially with more than 1 gif per row!!!) make sure to make all the gifs the same height, otherwise they won’t line up and tumblr will do whatever it wants.
I ended up making mine 540 x 400 and ended up with this:
Tumblr media
8. Time to save the gif!! Go to File > Export > Save for Web (OR just use the shortcut Ctrl + Shift + Alt + S) (or whatever it is on Mac).
In the pop-up, you can change things about the gif, but most things should already be the way you want it (Image size, Looping option forever). Selective should be the default, just like the rest.
You can choose between Pattern and Diffusion, some gif makers swear on one or the other, I go back and forth.
On the bottom left, you can see the size of your gif. Keep an eye on that! I believe Tumblr allows every single gif to be up to 10mb, but I try to keep mine under 5mb or close to it, because I think tumblr adds compression if it gets closer to 10mb?? Anyway back in my day you couldn’t upload anything over 1mb. You’ll never know our struggles.
Tumblr media
Then just save it, and that’s it, you made a gif! Well done!! Here’s the end result:
Tumblr media
:)
#2 Sharpen
There are countless ways out there to make gifs as smooth and clean as possible! Here I’ll show you the easiest way, but it also provides a good basis for other methods. The main difficulty is that you you need to sharpen the layers, but you don’t want to 100 layers one by one. So what we’re gonna do is convert the layers into a Smart Object, which functions as one layer!
1. Convert the frame animation timeline to a video timeline with the little button right underneath on the left:
Tumblr media
It should look like this, and I’m sorry but I can’t explain this one because I’m not an expert here, but you can just ignore it:
Tumblr media
2. Select all layers: Select > All Layers, or just manually. 
Then right click on the layers > Convert to Smart Object. Now there’s only one layer left, but don’t worry, the frames are still there!
Tumblr media
3. De-noise! It reduces noise, takes away some of that grain. More necessary in some videos. It also makes it less sharp, so I do this one first. Filter > Noise > Reduce Noise
Tumblr media
My default settings are, Strength: 6, Preserve Details: 60, Reduce Color Noise: 45, Sharpen Details: 25, Remove JPEG Artifact: No. But you can play around, especially with the strength, and see how the little preview looks. Don’t apply too much of it! Or it will look weirdly smooth with no details in the end.
Tumblr media
4. File > Sharpen > Smart Sharpen. 
Settings: I usually have mine at Amount: 500, Reduce Noise: 5, and Radius at either 0.2 or 0.3, depending on the video. I’ll actually do 0.3 here, because I find it a bit blurry otherwise. If you sharpen more, it can quickly get grainy.
Tumblr media
The difference isn’t huge, but here’s a little before and after denoise & sharpen:
Tumblr media
5. Technically you can just save it as a gif (save for web) as shown above now, or you can convert it back to a frame animation, which I’d recommend especially if you use certain other sharpening methods (I’ll show you how to convert it back at the end of the colouring part), but for now, let’s go straight to the next part:
#3 Colouring
Now, you CAN do this part right after part #1, still in frame animation, without a smart object. I prefer it like this because sometimes PS acts weird, but if you want to skip the smart object stuff: select all frames, and add the adjustment layers at the very top, above all the other layers. (It only affects selected frames; and it only affects the layers under it.)
The adjustment layers should be above the layer tray, and these are the ones we’ll use today: Brightness/Contrast, Curves, Vibrance, Color Balance, Selective Color.
Tumblr media
All of these are optional! You can do one, or all, or any combination. This is just the very most basic for me to get a gif to a point that I like. I’d recommend sticking to these for a start, but once you get the hang of it, definitely feel free to play around! It’s fun! Every gif maker has different preferences here, too, so there’s tutorials for everything.
1. Curves: Just click Auto, tbh. You can play around, but Auto works fine for me as a start, just to brighten or darken some parts as a base.
Tumblr media Tumblr media
2. Brightness/Contrast: Usually videos are a bit dark, and contrast can help to make it seem sharper AND cut down on gif size, so I usually just up both of them a bit (but not too much! Or it’ll look cheap). Here I put them at B: 19, C: 23
Tumblr media Tumblr media
3. Vibrance: I love very vibrant and colourful gifs, so I usually up the vibrance (and sometimes the saturation). This one is already very vibrant, so I only put +5, but if you try to colour, say, a very moody tv show, this can help wonders, especially if you want to work with the colours more later.
If you prefer less vibrant gifs, you can also lower the values here!
Tumblr media
4. Color Balance: getting a bit more complicated now. Often, videos will have a slight yellow or green or blue tint, and this is where you can correct that. This video is a bit yellow, so I added +17 Blue. It was still too warm, so i added -11 Cyan as well. This neutralized the yellow tint, but I wanted some of the reddish tone back, so I added -5 Magenta. I usually do a similar process like that, depending on the tone. 
Instead of Midtones, you can also do this for Shadows and Highlights individually.
Tumblr media Tumblr media
5. Selective Color: now this is the most complicated, but also the most fun to play around in my opinion! Be careful here, if you do something too extreme it’ll look like shit or make the gif super grainy. I some rough goals in mind here: make the blue hair as blue as possible, make their skin tone a bit less pale, and enhance the black and white (which I always do).
You choose a colour at the top, and then add or subtract cyan/magenta/yellow/black values for that colour.
Skin tone: yellow and red. For this gif, I just added black to both, making them darker. Sometimes, if you change one or both those colours for a different part of the gif (for example, if I wanted to make the background less yellow, I’d subtract yellow from the yellows - but then I’d add yellow to the reds, to make the skin tone natural again.)
Tumblr media Tumblr media
Blue hair: Just ramp up the cyan for the blues. Be careful with putting anything to +100, but here it’s already so bright that it should be fine. His roots are more purple, so I changed the magentas by adding cyan and black, and subtracting magenta and yellow. It’s not super clean, but fine for our purposes.
Tumblr media Tumblr media
Black/white: depending on the gif, I often either add or subtract black to the whites. Adding makes the highlights less blinding, a bit darker, and flatter (I like to do that if one side of the face is bright white in the sunlight, for example). Subtracting creates contrast, makes it brighter, can wash it out. It can also lessen the gif size, and here it’s mostly just the tracksuit instead of important details, so I subtracted black. For the blacks, I almost always just add a bit of black, to make it more intense. Just like adding contrast, this can make the gif seem sharper and less grainy.
Tumblr media Tumblr media
And done! 
6. You could just save it as gif now, but as I said, I prefer to convert it back to frame animation timeline first, if only because I like to let it play through before I save it, and it works better for me there than in the video timeline.
Select all frames, then click the little menu on the top right of the video timeline > Convert Frames > Flatten Frames into Clips
Tumblr media
7. When you scroll down to the bottom of the layers now, the old smart object + adjustment layers should be at the bottom, under all the new layers. Delete the old ones, we don’t need them anymore.
Tumblr media
8. Convert the timeline back to frame animation, by clicking the little button at the bottom left of the video timeline:
Tumblr media
9. Click on the menu top right of the timeline again > Make Frames from Layers
Tumblr media
10. Now, just some potential cleaning left to do. Sometimes, there’s a doubled or empty frame or layer at the beginning or end, just delete those as necessary. The timing of the frames is probably off, too, just select all frames and set the delay time to 0.05 (or whatever).
Now your done! Save as gif, and you should get this:
Tumblr media
I included some bonus links and tips after this but tumblr ate that whole part so I guess it’s going into a separate post. (Here is is)
Anyway, I tried to make this as easy to follow as possible for beginners, but feel free to send me an ask for clarification anytime. Hope this helps, now go make gifs and have fun!!
224 notes · View notes
keepyourlife · 4 years
Text
pale colouring tutorial by ragnaroeks
alright alright! miss ana, @delacourr​, asked me to do a little colouring tutorial on how i do pale colouring on my gifs. i am going to do this for three examples, one animated, one a live action film and one for a two colour gif with writing in it.
i use photoshop cc 2018 which is set in german, but i will try to translate everything. english is not my first language, so please forgive me for any grammar mistakes.
this is a very long post, so i am putting this under a cut
now, for the live action film i used a scene from a something i am working on right now: pretty woman.
this is what our gif will look like without colouring and sharpening:
Tumblr media
and this is what it will look like when i am finished:
Tumblr media
these are 120 frames set to 0,02 speed.
let’s start. the first thing i do is that i start with a “levels” layer. setting this highly depends on what scene you are using. this is a rather bright scene so my settings are like this:
Tumblr media
the gif will look like this:
Tumblr media
now i am going to use a “curves” layer. here i normally click on “auto”, photoshop will now set it to an automatic setting. this helps me a lot, in this case it doesn’t change too much. it’s always up to you, but don’t overdo it. i chose these settings:
Tumblr media
the gif looks like this now:
Tumblr media
what i am doing now is something i do for almost all my gifs. i am choosing a gradient map. choosing the right colours it will give your gif a very nice look. for this one i chose a black&white map, with black being the foreground and white being the background layer. these are my settings:
Tumblr media
i set the distort to diffuse glow, which i always use for gradient maps. the opacity is set to 71%. i normally have mine set to somewhere between 50-75%, depending on what looks best. the gif will look like this now:
Tumblr media
next thing we want to do is a “vibrance” layer. these will, as the name says, control the vibrance of the gif. in pale colourings these are normally not as extreme and i used these settings for this gif:
Tumblr media
this will make the gif look like this:
Tumblr media
the next is “selective colour” and this is one of the most important. it will let you control the colours in this gif and potentially make them lighter, darker or manipulate them as a whole. i use a new selective colouring for each colour. the first thing here are the white tones:
Tumblr media
this looks like a little, but it will show in the gif:
Tumblr media
the next thing i do are the black tones. now here it is important to be careful. in a bright gif like this it will brighten up the black tones a little. but in a mostly dark gif it will make the whole dark areas look like there’s a very light white layer over them, which in 80% of the gifs i did looked not so good.
Tumblr media
the gif:
Tumblr media
almost invisible, i know.
now, next thing i do are the grays and these are the most important. they will change the whole gif, not just a certain area. my settings for the grays:
Tumblr media
and the gif will now look like this:
Tumblr media
it’s already a little brighter. in this case i am adding a “fotofilter”, this can look good, but be careful and don’t overdo it. it highly depends on your gif as well.
Tumblr media
the gif looks like this:
Tumblr media
now, i wasn’t quite satisfied, so i added some more light into the grays:
Tumblr media
then i sharpened the gif and our final result looks like this:
Tumblr media
great, now this is for a bright scene.
now, the next will be one of the two colour gifs with writing in it. unfortunately, i do not know how to describe it differently. the original gif looks like this:
Tumblr media
and our final result is this:
Tumblr media
first step is, again, a “levels” layer:
Tumblr media
you will want to make this as bright as possible for the writing to be seen, but not too bright, as it will make the gray areas look a little weird. next thing we do is a “curves” layer. still, our only goal here is to make the writing stick out as much as possible without making it look too weird.
Tumblr media
the gif looks like this now:
Tumblr media
the next thing is a “vibrance” layer again, it won’t do a lot, depending on what colour and brightness the writing already is.
Tumblr media
the gif:
Tumblr media
and now “selective colouring” here is important to make the white areas brighter so they will stand out later:
Tumblr media
and the gif is this now:
Tumblr media
and now to the most important part. to make like two coloured we require a “gradient map” again. the colours you use are up to you, i am going to use pastel blue and white here. blue will be the foreground and white the background colour:
Tumblr media
this time we let it stay at 100% and at “normal”. the gif will look like this:
Tumblr media
at the bottom we still see the flag, but we do not want that so we will create a new layer and just use black to draw this part out. be careful to put this layer underneath the adjustment layers, so your layers look like this:
Tumblr media
and the finished gif is this now:
Tumblr media
great! you can do this with a lot of things, not only writings, though this is easiest and looks best. here are some other examples, where i used this technique:
Tumblr media Tumblr media Tumblr media
now our last gif is a scene from frozen 2:
Tumblr media
the finished gif will look like this:
Tumblr media
again, we start with a “levels” layer. now, with animated scenes it’s a little easier to make the whole thing brighter. these are my settings here:
Tumblr media
and the gif looks like this:
Tumblr media
the next step is adding a “curves” layer. here i went with clicking on “auto” again, which resulted in this:
Tumblr media
and the gif will look like this:
Tumblr media
now, the next thing is “brightness/contrast” and this is really mostly to make this even brighter, i normally don’t do much on the contrast. in this case it looked better.
Tumblr media
and it will make my gif look like this:
Tumblr media
now i added a “levels” layer once again, but did not do much on it:
Tumblr media
see? not much, but i thought it looked better:
Tumblr media
next thing, i always put this after my general lightning settings, is a “vibrance” layer.
Tumblr media
my gif:
Tumblr media
and now, my best friend the “selective colour” layers. this time i started with the black tones, mainly so kristoff’s clothing here will not look too bright, as this looks really bad on dark tones in pale colourings.
Tumblr media
barely visible maybe, but it did make a difference to me when creating this:
Tumblr media
in-between all the selective colouring layers i put a “gradient map” in black and white again, mainly to have this a bit more “monochrome” look i like on my gifs:
Tumblr media
i set this to 47% opacity this time, which looks like this:
Tumblr media
so, to continue with the selective colouring layers, my next one here was the change the gray tones and make them brighter, as i thought the background here got a little too dark with my last layer.
Tumblr media
and this is what it looks like now:
Tumblr media
way better, if you ask me.
my next step was to change the “pink” tones a little, they’re especially visible on kristoff’s face here.
Tumblr media
yes, i pretty much just turned them as bright as possible. this is the result:
Tumblr media
the next thing i wanted to change a little were the butterflies in the background here. they’re very purple, but i wanted them to look a little brighter and with a little touch of pink.
Tumblr media
and the gif:
Tumblr media
the yellows were next and here those changed his hair and the sleeves. i didn’t change any of the colours in general, i just put more brightness into it.
Tumblr media
and the gif:
Tumblr media
and the very last step, on the reds, was to make his skin a little brighter, just a touch:
Tumblr media Tumblr media
now, this is my finished and sharpened result:
Tumblr media
so, that’s pretty much it! i do not normally have a special system i follow, it’s pretty much lightning - contrast - colours. don’t be afraid to also work with colour lookups sometimes, those can be a nice extra to your gif as well, depending on the scene. i think my best pieces advice would be these:
- selective colourings are your best friends. in general colouring, be it pale or pastel or vibrant, they always are. but especially in pale colourings the white, gray and black will definitely help make your gif look nice without being too bright
- please avoid using scenes with too much darkness. there are scenes that can be used, like this one from spiderman: far from home
Tumblr media
where you have an all black background (there was some green, but this can be easily removed), but gifs with too much different colours in a dark scene will make a pastel colouring very difficult and maybe make it look too grainy. an example from my early days:
Tumblr media
you see it yourself, it’s very grainy and pixel-y (and badly screencapped and badly sharpened, but that’s not the point)
- do not overdo it with the brightness in both the levels and brightness/contrast layers. i did this as well in my early days, making my gifs look very dull and gray in the end, we do not want that. try to work with selective colouring there
- if a scene just doesn’t want to look good with your colouring, remove it. i don’t know if others experience this, but in pale colouring i have noticed that even some of the brighter scenes with not a lot of details will sometimes just not work. it’s frustrating, but try to use another scene instead
ah, if someone wants the psds, just ask, i guess?
sooo, i hope this was helpful? i am not good at explaining things in english. if there are any more questions, please do not hesitate to send me an ask or a dm!
66 notes · View notes
bathroombreaks · 3 years
Note
Hello! Do you have a tutorial on colouring the way you did for the rainbow gifset and the yellow & blue one?
hey! i didn’t before, but i wrote one under the cut for you! hope it helps :)
a couple of warnings before we begin: 1. i don’t use psds, i colour from scratch every time, i just always use the same steps so i can’t give you exact numbers for things, it’s just whatever i think looks best for a given gif; 2. i don’t actually know anything technical about photoshop, all that’s behind my decisions with layers and values is knowing from experience that it usually looks good like that, i don’t have technical knowledge to back it up; 3. i’m not gonna include pictures because my pc can’t handle running photoshop and a browser at the same time, but i will try my best to make this as detailed as possible (i’m sorry if i make it too detailed or not enough, i’m trying my best). now onto the actual tutorial!
my first layer is always exposure. i usually put -0,002 for offset and 0,90 for gamma correction. what value i choose for exposure depends on how bright the scene is, but it’s usually between 0,75 and 2,5.
after that, i do brightness, if i think it’s necessary. sometimes upping the exposure too much isn’t worth it because it makes whites and sometimes even just light colours way too white. in those cases, i’m just better off leaving it at a lower exposure and adding a brightness layer after it with a value between like 20 and 50.
next is levels. idk what things are called here, i just put 10 in the first arrow and something between 0,8 and 0,9 in the second and i do not mess with the third. all this in the rgb part, i don’t mess with specific channels in this layer. i do this bc i like my gifsets to have like defined blacks/darker tones, but if you don’t, you can just skip this.
after levels comes colour balance. i know some people swear by it, but i gotta be honest, i don’t use it in every gif. i only use colour balance if the tone of the gif is too far off from what i want. it depends a lot on the scene/show, but usually i wanna go from something green-tinted to more blue, just bc i like blue better, so i usually just put a blue value between 10 and 25 on all options (shadows, midtones, highlights). i like oranges/yellows/reds to look warmer, so i usually also add a little red in at least shadows. but this isn’t rocket science, i just mess around with the arrows until i think it looks pretty/easier to get where i want.
since you specifically asked about my rainbow gifs, i’m gonna admit here that i totally cheat on those. usually, i’ll purposefully choose a shot that is very still and/or very easy to manipulate into the colour i want (blues to greens and vice versa, blues to purples and vice versa, yellows to greens, reds to oranges, etc. etc.) so, depending of which of those two situations i have, i do one of these:
a. if the background colour is easy to convert, i’ll just use a hue/saturation layer to change it (or even selective color if it’s like really easy and i don’t wanna bother with making a separate layer for it). i just mess around with the arrows in the colour the gif does have until it changes to the colour i want.
b. if the scene is very still, i just paint the background. i just pick the colour i want, paint over the background and then set the layer to hue or color. that’s it. that’s my big trick. lol
ok, so, after i have the background colour i want, i add selective color layers. usually at least two, sometimes more. the first layer i use to mess with reds and yellows for the skin tone, whites if there’s a lot of brightness in someone’s face (usually put the blacks in a value between 25 and 75) and the greys and blacks in case the gif looks too dark (also only mess with the black values, but never more than positive or negative 10 in greys and no more than negative 1 or positive 10 in black). second layer i do minor adjustments on skin tone and really up the values on the colour i want. like, pushing the values to 100 upping it hahah for rainbow gifs, i usually add like between 2 and 5 layers after that just upping that colour.
once i’m happy with the selective color layers, i add another levels layer. once again, 10 on the first arrow on rgb, but something between 1,10 and 1,30 on the second. i also change the blue channel. i like skin tones and colours in general looking more on the warm side, so i go a bit overboard with it on those selective layers sometimes and it ends up just being very orange, so i use levels to scale that back a little. i put 10 on the first arrow in the blue channel, between 1,10 and 1,30 in the second and then between 1,45 and 1,25 on the third.
after that, i add a brightness layer, if necessary. same values as before.
the last step is vibrance. i don’t mess with saturation values, usually, only vibrance. i never go below 50 or over 100, but pretty much always it’s 80.
and that’s it! sorry this “tutorial” was so messy, but i hope it was still somewhat helpful :)
5 notes · View notes
infinitylester · 5 years
Text
GIF TUTORIAL
i’m finally getting around to giving the people what they want!! i hit 2.5k like 3 weeks ago and asked you guys what you would like me to do in honour of that...the resounding answer was ‘gif tutorial’ !!!! 
so!! in true dnp fashion i’m merely here to give the people what they want and the people have demanded a gif tutorial, so here it is!
we’ll be learning to how to create this gif right here!
Tumblr media
please keep in mind that this is how i make gifs!! everyone does things slightly differently and what i say and do may not match up with other people or your own personal style and that’s okay! editing is all about creative freedoms and you may use this as a basic starter so that you can branch into your own thing or you might really like how i do things and use the same methods. point is, it’s perfectly okay either way!!
right so!! let’s get the basic bullshit out of the way! i use ps cs6 but it’s basically all the same, so this should work perfectly fine no matter what ps you use. 
1. we’re firstly going to choose our video to gif. for this tutorial, i’ve chosen pinof 10! pick a moment you like and get the timestamps from when the moment starts and finishes. i usually get a second before and a second after to make sure i’ve got it all!!
Tumblr media Tumblr media
2. we’re now going to copy the url of the video and go to clip converter. clip  converter basically is going to give us an mp4 version of our little timestamps so that we can put them into photoshop and make gifs from them! paste the url of the vid into clip converter and press enter once. once you’ve done that follow my settings and press start
Tumblr media
(of course you can name it whatever you want and put whatever timestamps you want in!!)
once it’s done converting, it’ll give you a download of your mp4 clip, which you’ll click! 
3. now open your photoshop. go to file, import, video frames to layers, like shown and select your video
Tumblr media
once you’ve done that, put these settings in and trim the clip to your liking (the little black place holder things trim the clip!) 
Tumblr media
4. okay so!! we now have our gif imported and open on photoshop! we have to make it much smaller because right now it’s like...huge (that’s what she said hehehe)
simply click on image at the top of your computer and press ‘image size’, like shown
Tumblr media
then make your settings like shown
Tumblr media
5. so that’s done!! now, we have to change the pace of our gif to be a bit slower. i make my gifs real slow apparently but,,,,,personal preference man. click on the first frame of your gif and then scroll to the end of the frames of your gif. hold the shift button and click the last frame. this will select all your frames. press the little arrow thingy near the time of the frames. this will allow you to change the pace of your gif. press other and change the timing of the gif to whatever you want! i make my gifs like 0.07 normally but for this gif, i made it 0.09 because they’re moving so fast and it was giving me whiplash. anything under 0.1 is great!!
6. cropping time! you don’t have to crop your gif if you’d like, but mine is a little big for me, so i’m going to and show you how to do that! so basically press the cropping tool and put in the measurements you’d like, as i’ve done.
Tumblr media Tumblr media
7. now we’re ready to convert our gif to the timeline method! select all your frames again, like before, as well as your layers. selecting your layers is the same as selecting your frames, so nothing new there, don’t worry! once everything is selected, press this lil guy.
Tumblr media
once our gif is in the timeline method, right click your layers that should all be selected and turn them into a smart object, as shown!
Tumblr media
8. righty-o! we’ve done all the boring, dumb shit! time to use an action to make our gif look a little nicer and sharper! i really can’t be assed showing you how to use an action in here because i suck and this is long as fuck as it is but!! i am nice enough to link you to a basic tutorial on how to use actions and how to download them! you can find that here! right so, i use a certain action on all my gifs and then edit it slightly, which i’ll show you! you can find a download for the action i use here !!! 
i play that action and now my gif looks much nicer! however, it’s not quite the way i like it, so i push the gaussian blur layer to the bottom and i adjust the strength of it to this!
Tumblr media
9. i lied. now we’re up to the fun part!! colouring!! colouring is my best friend and i love her dearly!! technically you could stop now and save your gif and be done but....that’s boring as fuck!
right so, colouring really, truly is your own preference, loves. you can do whatever you like, you do NOT have to follow what i put here. this is simply the colouring i chose for this gif. i do literally whatever i feel like every time i make a gif, so it’s forever changing!
i gave a bit of thought to what kind of colouring i’d do in this tutorial. did i want to do something extra basic and like...no colour changing? did i want to do something wildly vibrant? and then i decided not to do either of those things! so today, i’m going to teach you how to create a soft, almost pastel blue/purple colouring for the ap room *cough* set *cough*!! 
firstly, here is the adjustment panel where all the tools you need for colouring reside !!
Tumblr media
we’re firstly going to start with the boring crap,,,,,so i lied again....oops. firstly, we’re going to adjust the brightness, the levels and the curves. here are my setting for each, if you’d like to copy them!
Tumblr media Tumblr media Tumblr media
here’s how the gif looks without all our colour layers!
Tumblr media
10. and now all that crap is done, i promise it’s actually the fun stuff!! selective colour is where all the magic happens! i sometimes do two, three or even four selective colour layers, depending on just how heavy the colour changing is going to be in my gifs, as well as using hue/saturation, colour balance and gradient maps!!
firstly, we’ll start off with our first selective colour layer! here are my settings for it (sorry for all the pics rip)
Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media
once you’ve got all those sorted, onto a hue/saturation layer! this basically drastically changes the colours, if you’d like it to but it’s not quite as accurate or smooth as a selective colour layer, so i only really use it for small things or if the colour i’d like can be acchieved nicely with it. i didn’t change anything in the master setting, but here are my settings for the things i did change!
Tumblr media Tumblr media
aaaaaaaand now we do another selective colour layer! i’ll just show you the layers i did change...everything else, leave as is!!
Tumblr media Tumblr media
11. next is a few gradient maps and a layer of vibrance!! i promise, we’re almost done!! i add a bunch of probably unnecessary bullshit to my gifs but i like how it looks with all the extra stuff so!!! yeah!! make your first gradient map black and white, as shown and set the opacity to 10%
Tumblr media
next step is to create a vibrance layer! when making a bright, colourful gif, i use about two or three vibrancy layers. i never EVER adjust the saturation, only the vibrancy. adjusting the saturation makes everything too heavy and it just looks kinda icky to me. the first layer, i normaly adjust the vibrancy to 100% and the rest being between like 20-50%, depending. i just thought i’d tell you guys because that’s vital if you’re making bright gifs! 
we however are not, so i only adjusted the vibrancy to +14%, leaving the saturation alone....nasty saturation !!!
aaaaaaaaaaaaand finally, we are up to our last adjustment layer!! it is yet another gradient map oops. this gradient map is a light golden colour and i downloaded it in a pack somewhere ages ago. i do not remember where and i know that photoshop’s default gradient maps don’t have something like it so if you’d like, you can definitely just skip this last layer!! it’s not vital, i just think it gives the gif a nice touch! 
for reference, the gradient map looks like this and i set it to 6% opacity!
Tumblr media
12. that’s it!! the gif is complete! go to file, save for web and press on that! you might have to wait a little bit for it to load...photoshop is a really shit program sometimes, guys. once it loads you’ll see all these confusing settings. simply copy what i have here!
Tumblr media
this is also the moment i realise my gif is over 3mb and go to fucking smack my head against a desk. tumblr basically has a thing against gif makers and will NOT allow gifs over 3mb to play once posted. this can be fixed though! i’ll show you how to shorten a gif right now because well...if you followed this tutorial, you’re stuck in the same boat as me and need to know how to fix it!!
so basically save your gif as is right now! now, we’re going to open the gif we just saved into photoshop. go to file, open and select your gif. it’ll open as a frame animation which is perfect! now, delete whatever frames from the start and end that you think you can live without. never delete frames from the middle because that’ll just disrupt the gif altogether. the less frames, the better!!
i got my gif down to 40 frames by deleting the first 15 frames of the gif and the last like 6 or so. now go back to ‘save for web’ and save this shorter gif as a whole new gif! this should be under 3mb. if it is not, go cancel the save and delete some more frames!
once that’s done....you’re done!!! congratulations!! you’ve made your very first gif, my dear!!!! here’s the finished labour of your hard work!! 
Tumblr media
i hope i wasn’t too confusing and i hope you now have a sound understanding of how to make a gif! if you’d like me to make another tutorial on something specific related to gifmaking or even to do with edits and edit-making, just send me an ask and i’ll see what i can do for you! happy giffing, loves!!
125 notes · View notes
head-and-heart · 6 years
Text
The 100 Highlights - “Eden” (5x01)
Hey there fam! I’m starting this series in honour of the new season of The 100 that is now airing. Basically, it will function similar to review of the episode, except I will be pointing out the highlights of the episode - the things that I liked (not what I was critical of).
In light of 5x01 airing, it has become increasingly clear to me that - no matter how good an episode is - it is too easy for this fandom to get caught up on the negative aspects of it. (And yes, that includes myself sometimes.)
Being critical is good - it is a part of consuming fiction - but it is also important to recognize the positive aspects of literature as well. If not for anyone else, than for your own sanity. So that sparked the purpose of this series: for me to take a step back and think about what I enjoyed about the episode, and then share it to spread a little positivity in fandom. 
I intend to do this for every episode of Season 5, and possibly for later seasons as well (assuming we get renewed) depending on how it goes. 
So, for my first post, I will be talking about “Eden”. 
In no particular order:
The camera following the Ark and speeding down to Earth as the very first shot of the season was pretty cool and really captured the atmosphere of the episode as well as what the heart of the show seems to be: the connection among people even when they are apart, and the ways in which they fight to get back to each other.
Looking back, the cinematography of this episode was honestly stunning. The dull and bleached colour pallet of the scorched Earth versus the vibrancy of Eden is a shocking contrast and there were so many beautiful shots throughout the episode.
Loved the little callbacks to past places and characters - like the stones where they signalled to Luna, Jasper’s goggles, the stick from L.exa’s throne, Maya’s iPod, the rover, etc - it shows how all these people are still very present in Clarke’s mind (and how they are indirectly keeping her alive, keeping her centered).
The attention to detail was really strong in this episode (see above point) with all the props and the music choices (eg. playing the CL theme when Clarke finds L.exa’s throne). Due to this it ensured that, in spite of the time jump, the heart and history of The 100 remained present.
Seriously, there were sooo many cool shots. The shot of Clarke driving as the dust/lightning storm approaches was super neat. I loved how they depicted what life on Earth looks like after Praimfaya, the devastation of the planet. And also the shot of her staring into the flames as she burns the bodies of the villagers was stunning.
Having the entirety of the first 27 minutes following Clarke (and narrated almost solely by her) really nailed home the impact of her isolation and was, not to mention, a very bold storytelling decision
Music was used expertly in this episode. Tree Adams did such a great job at pinpointing when the music was needed, and when the episode was better served by using it liberally (and, on occasion, not at all). In the shot of Clarke sorting through Arkadia, the music is very light, the most prominent sound the whistling of the wind, as if to accentuate the fact that the world has gone completely silent following Praimfaya. It is also used as an homage to old characters who have passed, such as Maya, or L.exa, which I appreciated.
The scene where Clarke finds Jasper’s things was absolutely beautiful, and Eliza killed the scene with her acting. When I watched 4x13 last year I was disappointed to find that the scene where Clarke found Jasper’s suicide note was cut from the finale (it was in the leaked scripts) because I thought it meant Jasper’s memory would be forgotten. In retrospect, I’m happy that they did it this way instead, when Clarke is completely and utterly alone, and she can finally allow the emotions to hit her properly. There were so many amazing callbacks to characters from previous seasons who are no longer around anymore.
“Anyway ... in case this is the last time I get to do this, I just wanna say .. please don’t feel bad about leaving me here. You did what you had to do. I’m proud of you.” We’ve all had over a month to mentally and emotionally prepare ourselves for this line, since the trailer came out, but it remains just as beautiful as the first time.
There’s just something so badass about Clarke driving through an empty post-apocalyptic wasteland, listening to EDM on one of the last remaining pieces of tech on planet Earth. Clarke finding Maya’s iPod was the gift I didn’t know I needed.
Kudos to the makeup department for depicting their female lead realistically after almost dying of dehydration and radiation burns in the desert - sometimes this is not easy to find on a CW show.
Clarke’s frequent radio calls/narration offers up a fresh and interesting way of telling the story in this episode, revealing how Clarke has grown and reflected over the years.
There were soooo many parallels to previous episodes (eg. Clarke rising out of the water like Octavia in 1x01, the irradiated dining room in the village visually paralleling Mount Weather in 2x16, Clarke confronting her map like she did in the very first episode of the series, the shot of her face through the flames as she burns the bodies of the villagers is very reminiscent of 3x12, and everything to do with Madi and Clarke parallels the Blakes. And, of course, Charmaine’s “it means we’re not alone” is an obvious callback to Clarke’s words in the Pilot.)
No emotional beats are missed in 5x01. Clarke finding the child on the step outside the church is just one example of a gutwrenching moment in this episode that emotionally impacts us just in the way that all good media should.
“I’ve lost track of how many bodies we’ve burned since reaching the ground. God, this would be so much easier if I knew you were alive, if I knew I was going to see you again.” My Bellarke heart is singing!
Clarke gushing about berries. Enough said.
The filming of Clarke’s encounter of Madi pays homage to the horror genre, with her appearing suddenly in between the trees, or in the window frame. While not scary, it holds the same mood as 3x12 and 4x07 did - two episodes most strongly associated with typical horror films. I really enjoyed the mystery and intrigue associated with the way they approached Clarke meeting Madi.
By displaying Madi as fearful of flamekeepers, it demonstrates an alternative perspective to the Grounder faith that we haven’t gotten to see before: resistance. It also shines a light on the brutality of the conclave system in a way that is rarely addressed in the show (but perhaps should be).
Clarke performing surgery on herself? SO ! BAD ! ASS !
Clarke’s drawing of Madi was beautiful. And the little girl’s smile after seeing it? Precious.
Clarke spearing a fish? I’m turned on.
They did the absolute MOST gorgeous transition this show has ever done in this episode. And you all know which one I’m talking about. When Clarke is looking up at the stars and says, “What about them? Do you think they’ll come down too?” AND THEN IT SMOOTHLY SHIFTS TO THE ARK, BELLAMY STARING OUT THE WINDOW LOOKING DOWN AT HER AS SHE LOOKS UP AT HIM - BOTH UNKNOWINGLY. And the MUSIC. The music, oh god. Everything about it was stunning. The camerawork, the music, the thematic implications of it all. I just can’t be coherent about how amazing that transition was. Lemme go watch it another five times before I continue.
Raven beating Echo. Raven laughing. Raven. 
The dynamic among the space squad is really intriguing, and Jason Rothenberg communicated so much with so little. With just a few short scenes and lines of dialogue we can perfectly understand everyone’s role on the Ark, the tension between Bellamy and Raven, the uncertainty of Echo paired with the internal struggle of Monty, the way Emori has so seamlessly fitted herself into the group, and how Murphy has just as easily removed himself from it. It’s fascinating to me to watch how these characters interact with each other; how things have remained constant, and how they have shifted.
The fact that “Murphy” is considered one of their chores on the Ark will never not be funny (and equally heartbreaking???).
“Seconds?” “Yeah right, I choose Murphy.” I will never be over Monty’s poor, cute, little hopeful face here. It was adorable.
The Murphy and Bellamy fight scene was a blessing in every single way. First of all, Bellamy being cheeky is my lifeblood. Second of all, Murphy’s story this season is super intriguing to me. And third of all, Bellamy holding Murphy in a headlock as he forces him to admit he’s not worthless is a scene I never would have imagined I would need this much.
“You know what I think your problem is? You like being the hero; only up here, there are no heroes.” I LOVE this line because of how it delves into Murphy’s psyche and also displays him in a different way than Murphy typically is. It shows that, deep down, he really does care about more than himself. When he has so much time to wallow in his own self-loathing, he feels he needs to live up to his own expectations, and he acts out. If he can’t be a hero, then he’ll be what he knows he can be. A dick.
Also ... “there are no heroes” = “there are no good guys”. I love my otp
Bellamy is the biggest dad and I am LIVING for it.
“I’ll make sure it’s my only choice.” Cue Kate’s Bellarkean death.
“Non-violent offenders with me?” “Yeah, both of them.” Okay, I’m sorry but I’ll never stop laughing about this.
“Relax, McCreary. You’re still my favourite mass-murderer.” I loved this little exchange because it hints at the dynamic between all of the Eligius crew. Again, Jason does so much with so little words. It clearly indicates just how different these prisoners are from The 100 - how dangerous. Also ... is Zeke a mass murderer, then?
Monty and Harper’s scene together was enlightening. I’m so excited for Monty’s journey this season, and it makes complete sense for him to go in this direction. What’s intriguing is that him and Harper have almost shifted places from where they were in Season 4, where Harper wanted to give up and Monty was insistent on the need to keep fighting. He brings up a good point now: “No one should have to be that strong.” Because isn’t that the whole truth? I also really appreciated the callback to Monty’s mom, as well as Jasper, as there was a serious concern as to whether those deaths would just be swept under the rug because of the time jump. I’m happy to see that my concerns were for nothing.
Emori and Raven’s friendship is EVERYTHING. 
Nothing is brighter than Raven Reyes’ smile and that’s a fact.
Lindsey and Richard continue to have stunning chemistry and they both feed off each other so well, no matter how you see their relationship.
Ending the episode with the single shot of the fight ring in the bunker and Octavia (and her “royal guards”, so to speak) observing blankly from above was absolutely chilling. And the best possible way to lead into the next episode. 
Hope you enjoyed reading my highlights! Feel free to share some of your own. I’ll be back sometime next week following “Red Queen”.
77 notes · View notes
pedronfriends · 6 years
Text
Gif-making process!
I have no fancy graphics for this post, just a run-down by request.  Keep in mind:
There are probably 10000000 ways to make gifs, this is my way.  It’s not the best, but it works for me.
I’m using Photoshop CC.  I wish I could use PS6, but it doesn’t have the mp4 import ability.  There are other programs that can edit/chop a movie file, but I’m too lazy to learn a new program so PShop CC it is.
I don’t have set rules, because each gif is different and special since the lighting and pacing is always different and special.
I use a PC not a Mac
Work with the largest files you can!  It’ll make for better quality when you size them down.
If any part of this is confusing/needs more detail, let me know!
Okay, process with screenshots under the cut!
ACQUIRING THE GIFFABLE MEDIA
I import the movie into PS.  Again, there are free programs you can do this on, this is really just about slicing and editing, like chopping a film reel to get the parts you want.  All very technical.  
Below I have the timeline showing, and you can see it’s still in video and not frames just yet.
I want to chop this for all the giffable Pedro Parts, so I use the little scroll nub and the scissors too, which I highlighted in yellow!
Tumblr media
[click for bigger]
Then it’s really just scrubbing through the video, and chopping it up into little bits and pieces.  (God I hope this isn’t illegal). Using the scissors tool, and scrubbing to a place I want to cut, you can see what happens to the video when I cut it.  Also, you can see on the right, it creates a new layer in the layers box.
Tumblr media
[click for bigger]
I delete chunks of video that have no Pedro, leaving me with a set of little sliced up chunks of video that are all-Pedro. A bunch of little chopped up video, each one a different layer.  Like so:
Tumblr media
[click for bigger]
This part is tedious and your computer needs to be able to scrub through video, which can get laggy and gross.  Just fair warning (again, probably an easier way to do this on a program made to chop videos up).
The next part is also tedious - 
SAVING THE VIDEO AS ANIMATED FRAMES
Now I have a bunch of video bits.  Some super-long, others iddy-bitty but that’s okay.  As long as when you save each bit, the frames don’t exceed like 200+ frames, then you can still work with it without your computer kerploding.
Here is the tedious part 2 in steps:
Delete all clips except the one you want to save first.  
Alt-Crtl-Shift-S - to Save for Web
Switch to gif format, with whatever settings you like best for you.  Play around, honestly.  (my settings screenshot is below)
If you lose detail due to millions of colours, don’t save yet. Go back to the file and use the crop tool to crop the video to the particular thing you want (in my case, close up on Pedro). This is the nice thing about having a big file; even if you crop, you still have a big file to work with.
Save the gigantic ass, raw gif
Then Crtl-Z EVERYTHING until you return to having all clips.
Repeat the above process for each clip, until all clips are converted/saved as gifs.
Here are my initial gif settings.  Please note the size - I cropped this clip to focus on Pedro, but the file is still fairly big.
Do not play the gif in this window! It’s too big and your computer will cry. 
Tumblr media
[click for bigger]
EDITING EACH GIF
So now you’ve done that above process over and over...and over...and over and you have a bunch of raw gifs! Yay!  This to me is the fun part.  When you open each gif, it is unique and needs its own care.  Sometimes if you’re in the same scene, then you can use the same settings.  Other times, it takes heavy filters to make it look right.  
Things you want to play with:
The lighting
The colouring
The frame count
The pacing
Open up a gif in PS:
Tumblr media
[click for bigger]
FRAMES:
As you can see above, it’s all frames, and each frame is on a separate layer.  At this point, you can start figuring out how many frames you want in this gif.  The rule is: LESS IS MORE.
So if I can get away with 15 frames, awesome.  But I’ve gone up to about 70 frames depending on the scene. The longer the gif, the bigger the filesize.
One way to keep a scene but eliminate frames is to delete every second frame, or every third frame.  If I have a super-long scene (over 100+ frames) then I delete every second frame.  If it’s only like 80 gifs, I’ll delete every 3rd frame.  
I also edit the scene to its core ‘moves’.  No wasted frames of Pedro staring meaningfully at something before he moves!  No matter how ‘important’ I think his staring is! Ultimately in a gif, no one will care.  
So yeah, less is more.  Keep a gif from 12 - 70 frames.  
Tumblr media
[click for bigger]
FILTERS:
There is absolutely no set way to do this. Use an RPHelper’s PSD filter file if you like (I’ve downloaded a few), or try your own experiments.  Filters I like to use, but I don’t use all of them at the same time:
Exposure
Colour Lookup (check out the preset settings in the 3DLUT File)
Colour Balance  (or Curves)
Vibrance
Just hit that little button on the layers toolbox, choose one, go to town. Have fun playing!  Find the filters you enjoy using and perfect them.  Do what you like.  Everyone has their own preferences and process, it’s artistic creative license.
JUST MAKE SURE to put the filters at the TOP of all your layers!!  Or else you’ll be left with a mess of trying to switch layers/filters on and off midway.
RESIZE:
Make is as small as you want.  This is self-explanatory.  Since I use these for RP, I size them down to 270px x ~150px.  
Tumblr media
[click for bigger]
Now you can see how your filters look at the gif’s intended size!  If you don’t like it, Crtl-Z and play around with your filters until you’re satisfied.  Remember once you get some filter settings you like, you can always drag those preset filters into your other gif files!
And finally -
Tumblr media
[click for bigger]
PACING:
Select all your frames and hit that little ‘v’ to set your time.  Depending on the gif, my times vary from between 0.05 - 0.1 seconds.  The shorter the gif, the slower it needs to be.  The longer the gif (ie more frames) the more you can speed it up.  
The only way you’ll be able to test pacing, is when you save it.  If you play it and don’t like the pacing, then go back and fuss around with the frame timing.
This is my settings for the final gif save.  Remember this is where you can play the gif to check for pacing.  Make sure the looping playback is set to ‘Forever’!
Do the Alt-Crtl-Shift-S to save for Web and you’re done!
Here are my save settings for the final gif.  Again, play with these settings to account for gif size, etc.  
Tumblr media
[click for bigger]
And here’s the final result. 47 frames, at 0.1 seconds per frame.  I used filters Exposure, Vibrance and one of the Kodak presets in Colour Lookup. It’s kind of grainy but I don’t really care because these are for my own use (and anyone else who wants to use them).  I’m not winning any prize or award for this lol!
Tumblr media
Good luck!
7 notes · View notes