hi! I was wondering how you changed the background colour of a gif like you did for the first eddie gif in this tutorial (/post/718882826968334336/hi-alie-how-are-you-i-was-wondering-if-you-could)?
heyyy!
what i do is usually pretty simple: create a new gradient map adjustment layer, choose your colors, and select a blending mode that works the best for your gif. then with a soft brush in black, click on the layer mask thumbnail on that gradient map layer and erase parts where you don't want the color (like on characters). if the character is moving you can use keyframes, here's a good tutorial by @usergif / @fionagallaqher explaining keyframes for masking.
with the gradient map adjustment layer, you usually want the first color of your gradient to be black, and the second color to be the actual color you want.
you can leave the blending mode to normal/pass through if it works for you, or you can change it to color (or try other blending modes, see if it creates and effect you like). here are a few examples with the same black to pink gradient:
for this particular gif here, i've actually used a gradient fill layer because i wanted a gradient instead of one color. but i did the same thing: i chose my 2 color for my gradients, changed the blending mode to color, and erased the layer over his body with a layer mask. what's cool with the gradient fill layer is that you can use as many colors as you want, and you can also choose the actual angle of the gradient, compared to with a gradient map layer where you pick the one color and that's it.
the downside with the gradient fill layer is that the math is not the same as a gradient map layer, so it pretty much only works well when you choose the color blending mode. as you can see here it looks wacky with the same blending mode examples:
there are multiple ways to change a background, this is just two of them. here are more tutorials about changing a background's color:
i’ve updated my giffing process (tutorial coming soon i promise lol) so i’ve also updated my previous action pack to reflect those changes! quick shoutout to @redbelles for literally changing my life love u meg you giffing queen
this pack includes two actions for that will take you all the way through sharpening after you’ve cropped and resized and a save action 💜
If you download, please like or reblog. Explanations for each action are under the cut, and as always if you have any questions please let me know!
do not re-upload/claim as your own.
action pack
note: the two sharpen actions operate under the assumption you are cropping with ‘delete cropped pixels’ UNCHECKED and have cropped and resized your file before using them
if this does not apply to you, see my other pack which contains the same sharpen settings but gives you the additional scripts action
i. sharp & sharper: both of these actions are meant to be used directly after you have cropped/resized your image. it converts your frames to a smart object & sharpens them.
iii. save: this action is meant to be used directly after you have finished coloring. it converts all visible layers to a smart object, converts back to frames and then sets timing to 0.05 so that all you have to do is then export the gif.
MCUFAM'S 30K CELEBRATION ICON PACK: 100+ COLOURFUL ICONS
Current icons include the following characters: Gamora, Thor Odinson, Natasha Romanoff, Tony Stark, Bucky Barnes, Steve Rogers, Carol Danvers, Loki Laufeyson, Wanda Maximoff, Peter Parker, T’Challa and Valkyrie.
Download here: Mediafire. Please like/reblog if using!
Thank you so much for the support AND your awesome content! I was thrilled to icon this gorgeous woman. Hope you enjoy!
Icons are under the cut and on my icon page.
Please like or reblog if you use.
Icons are 200 x 200. Circle icons are a cut out with a transparent background, save them on desktop to maintain the look. Square icons can be saved on mobile or desktop with no difference.
Want an icon? Take part in my Sarah’s 3k Followers Icon Palette Celebration!
It’s been a while since I made a coloring tutorial, and I thought it would be useful if I made a full tutorial on how I make my gifs. I will go over:
how to screencap
making your gif in ps
sharpening
coloring that gif
putting subtitles on a gif
saving that gif
you will need
a hd copy of the episode/movie you want to gif
potplayer (or kmplayer)
a version of photoshop (I use CC)
a sharpening action
A psd or patience to color your own gif
end result:
Everything will be under the cut. Warning: this will be picture heavy and text heavy. English is my third language so there will probably be some mistakes in here.
If this is the first time using photoshop, your startpage will look pretty blank. I’ll show you what you need to make visible to gif.
Click on “window”. The screencap I made of the settings is pretty big so click here if you need to see it.
Not seen in the picture but useful: actions, properties, character, paragraph
STEP 1: THE FILE
Okay first of all, you’ll need your file. I recommend downloading µtorrent, then going to a torrent site (like rarbg.to) and searching for your episode or movie. ALWAYS choose 1080p and web dl if possible (web dl means logoless) Example: wynonna earp s01e01, then in your search results, look for one that has both 1080p and web dl in the title. 720p is also good.
You can also find twitters that post logoless episodes and movies, this is better if you don’t like using torrents or if you live in a country that gives you fines for torrenting (I’m lucky, Belgium doesn’t care). If you want a list of a bunch of twitters that share logoless episodes and movies, message me off anon so I can link you privately.
STEP 2: CAPPING
When you have your file, download potplayer (or kmplayer). Open the program and open the file you want to cap.
Search for the moment you want to gif. Tip: hover over the playline thing to see what scene is at what time. Normally it looks somthing like this:
Press ctrl + g when you have the moment you want This window opens:
Change your settings to mine ^^. I made a new folder in my Pictures folder where all my caps go bc it’s easier to go to. It’s up to you where you save all of them, but I suggest you pick one you can easily access. Click start.
Click escape and start your video. Pause again when you have what you wanted (this can be a whole scene or a moment, depends on what kind of gifset your making). Press ctrl+g again and click “stop”, then close.
Now go to the folder where you saved your caps. I always make another new folder inside that one, put all the captures in there (unless I’m doing a scene, then I’ll make 6-8 new folders and distribute all the captures in those folders. Note that with the 3mb limit you’ll be able to use about 60-120 captures per gif, sometimes more. You can always delete layers of your gif in case it goes over 3mb)
Tip: make all your screencaps before opening photoshop. If you’re making a general character/ship gifset, that can take a while, but it’ll save you time if you seperate the two actions.
After you have taken all your caps, open photoshop. You can download it on any photoshop tumblr like yeahps or itsphotoshop. I cannot give you the link to mine because it doesn’t exist anymore, but I got it from kickass (rip).
STEP 3: OPENING AND MAKING THE GIF IN PS
We have our caps and our ps open, but now we have to open those captures in photoshop. Do not use ‘open’, but Files > Scripts > Load multiple DICOM files
I know a lot of people choose ‘Load Files into Stack’ but Load Multiple DICOM files is SO much faster.
This window will open
Now you go to the folder where you saved all your caps, choose the file with the screencaps for 1 gif and open it.
It might take a little bit for everything to load, especially if there’s a lot of screencaps, so just wait.
When you have everything, click on “Create video timeline”. It might be called something different if you have another version of PS, but whatever it says here:
(I know I know, I make pretty arrows lmao)
Then click those 3 boxes on the left side
Next step is ‘make frames from layers’, after that click “flatten frames into layers”
STEP 4: CROPPING
Obviously our gif doesn’t have to be as big as it is in ps right now, so we’ll crop to make it smaller. For this, you need to know the dimensions Tumblr uses:
540px for 1 gif in a row
268px for 2 gifs next to each other
177px - 178px - 177px for 3 gifs in a row (this is something annoying à la tumblr, and because it’s hard to predict which gifs you’ll put in the middle when cropping, I make them all 178px in width and then crop the ones I won’t use in the middle to be 177px after)
You can choose to use the old dimensions which are 500px, 245px and 160px.
These are the widths, you can choose the heights yourself. For this gif I’ll be cropping 268 x 150
This is the cropping tool
click it and you’ll see this on the topbar of your screen. Type in your dimensions
Then crop as you wish. This is my result.
STEP 5: CHANGING YOUR IMAGE SIZE + SHARPENING
The gif is way too big at this moment, so go to image > image size, this window opens:
Click “okay” and your gif will be a lot smaller. Use ctrl + “+” to make it bigger
This is what our photoshop looks like right now
These steps look like A LOT of work but as soon as you’re used to the steps, it’ll take you about a minute to do all of this.
Next is sharpening. I use a sharpening action made by ilanawexler but it’s pretty complicated, so I do not recommend it if you’re a beginner. I will however explain it fully here. Note: I had to do something different than the directions the blogger gave, so what I get might not work for others and you might have a different outcome
Select all your frames (from 1 -)
then click “convert to videotimeline” (it’s possible it’s called differently in your ps)
when you did that, add two layers on top of your other layers
Select all your frames (frame 1 to layer 2), right click and click “convert to smart object”
Then, go to your actions. If you just downloaded your action, you have to add it.
When that’s done, open the bobbiesdraper sharpen and click “action 2″. Thn click the play icon
It’ll a LOT of stuff, but just let it be.
Warning: if you changed anything to the frames in the timeline section, this won’t work. I noticed that if I delete frames or change the delay, ... before sharpening, it won’t work.
If it worked, you now have this
I’m not sure if it’s normal, but I now have twice the frames I had before, but only the SECOND amount is sharpened. So I delete frame 1-35 now in the timeline section.
This is my gif after sharpening (you can use this to practice coloring or to follow along with my coloring tutorial below)
this psd automatically sets the delay for your gif to 0,05, I always change it to 0,06 (sometimes 0,07). Just select all your frames, then click on the 0,05, ‘other’ and choose whatever you like. The max I would go is 0,08 (0,07-0,08 is the speed the episodes go btw when you watch them)
STEP 6: COLORING
Now the fun part!! You can either choose to use a psd (here are my psds) or you can color it yourself.
For this tutorial, I’ll be doing a basic coloring. (that means: steps I always use to start my colorings).
We start with curves. For this gif, these are the settings: (this is a pretty bright gif so for darker scenes you’ll have to use more, but don’t start with too much, build it up)
then some levels to give the gif more depth
I usually enter 10 for the black (unless it’s a very dark gif) and I’ll move the arrow of the white to where the little line starts.
Some brightness
Some black selective color (I always enter 10, unless it’s a dark gif)
Color balance (also usually start with this, unless it’s a blue gif, then I’ll move the arrows to red, magenta and yellow). If the gif is VERY yellow, I’ll add more in cyan and blue.
Then I’ll add a vibrance layer, +100 vibrance.
This is what I have now (with a pretty watermark). These are the layers I will always start with.
You can stop here, but I like to add some more to my gif so I’m continueing
I like adding more blues so I’ll add a selective color layer: (you can also decrease magentas is the “blue” ones to make the blues more cyan)
For blondes, I like making their hair stand out more so I’ll add a selective color layer for the yellows:
Of course, there’s a lot of yellow in the skintone so chances are the skin will look very yellow now, I add a color balance layer and change the highlights. (In darker gifs you might need to change the midtones instead)
Some magentas to make the lips stand out
and some contrast
That’s all for coloring. This is what my gif looks like right now:
STEP 7: SUBTITLES
If you want to add text, click this icon
these are the settings for my text
Then we’ll add some other adjustments to make the text more visible:
click on the fx icon
then click ‘stroke’
click okay, and click on the FX icon again, then click “drop shadow”
when you added all your adjustments, duplicate the textlayer and delete the first one (if not, your adjustments will only show on 1 layer instead of the whole gif)
If your text isn’t in the middle of your gif. Click your text layer, then click this icon
then in your topbar, adjust with these tools
this is what the text looks like now:
here is the psd for the text
STEP 8: SAVING
Of course, you have to save your gifs. Go to File > Save for web and this window will open
Make sure your settings look like these:
Make sure this number isn’t above 3 mb
That’s all!!! If you have any questions, you can always come ask me. I’m sorry if this wasn’t clear, but I hope it made atleast a bit sense.
hi alie! how are you? i was wondering if you could explain, or link a tutorial that does, how you did the first gif and the checkmarks on this (/post/713604672591659008/pscentral-event-14-your-url-insp) beautiful gifset please?
hello!! i'm good, thank youuuu ♡ and yeah, sure i can! i didn't follow any tutorial for this gifset, so i'm gonna try to explain my process as best as i can.
the first gif is fairly easy, it's just a bit time consuming. the second one for the animated checkmark uses some keyframes. i use photoshop cs5, which is rather old, so hopefully my directions still work for more recent ps versions!
tutorial for these two gifs under the cut:
gifs in text
i'm gonna assume you already have basic gifmaking knowledge, so i'm gonna start from this base gif already colored:
i started by finding a big and very thick font that i liked. for this gifset i used a font called barle. i placed my text the way i wanted it, but i used one text layer per letter, because i wanted one different gif per letter. once i had my 9 text layers placed, it looked like this:
then, you need to create a group with a layer mask for each letter. for this, i simply hold the ctrl/command key and click on the letter layer's thumbnail. it will create a selection of the letter.
with this selection on, i click on the folder button to create a new group, then on the add layer mask button. it will create a group with your letter where you can put anothet gif in.
then you just need to rinse and repeat for every letter.
once you have all of your letter groups done, you can select all of the text layers and put them in another group. we'll use these layers again later.
then you just need to bring your second gif onto this canvas and put it in the right group/folder. i usually just bring a smart object gif onto my main canva, slide it in the right folder, then resize, sharpen, and color the second gif in there.
you can just drag this layer once it's inside the group to position it the way you need it. and also use ctrl+T to resize it (drag the corners while holding shift to keep the right propertions). once the gif is positioned, you can go ahead and disable the E text layer you used to create the mask (but don't delete it!). i kept the coloring very minimal since it's a black and white gif, and the layers should look like that:
and this is the gif so far with the first E done:
then you just need to do the same for all other letters, pretty straight forward! for the first D letter, i wanted eddie's face to show instead of using a different gif, so i simply put a black and white layer in that D group. my gif looks like that at this point:
then what's missing is the outline, and it's pretty easy to make. go back to the text layers you created at the beginning. enable them all, and make sure they are on top of everything else. double click on that first text layer to bring in the layer style options, and add a 1px stroke with the color and blending mode you want. I went with yellow and the hard light blending mode. these are my settings:
back to the layers panel, keep the text layer's opacity at 100%, but bring the fill to 0%. this will make online the online show up on the gif.
to apply this setting to other text layers, you can right click the first text layer and select "copy layer style". then select all of the other layers and right click one of them and go "paste layer style". once all the text layers have their outline it should look like that:
to move the outline a bit, make sure they are in a group and select this group (i renamed mine "outline"), then just nudge it by a few pixels with the arrows on your keyboard. i transformed the outline group by about 4px left and up on mine. i also duplicated the whole group because i wanted a deeper color for the outline.
and this is my final result!
animated checkmark
starting with my base gif, i added some animated text and a little box for the checkmark to go in (drew a shape with the rectangle tool and gave it a stroke, the same way i did it for the previous gif):
for the actual checkmark, you can try to find a brush or shapes to download, but i didn't feel like looking it up lol, so i drew the shape myself with a regular brush that comes baked in with photoshop. the best way to draw a custom shape, in my opinion, is to draw the shape as a layer mask on a color fill layer. that way you can always change the color or add layer styles later (like i did).
so on my canvas, on top of everything, i created a color fill layer (layer > new fill layer > solid color) with whatever color i wanted (you can change this later if you need). you will get a new color fill layer, with a layer mask already attached to it. i put this layer at 75% opacity so i can see the gif under it and it's easier to draw the shape in the right spot:
i then selected the layer mask thumbnail and the brush i wanted to use, one of them (not sure i remember which one, sorry haha!):
with the black color selected, just go ahead and draw a checkmark where you want it on the canva. you can always use the brush in white to erase it and start over with the black color if you're not happy with it. but once you have a checkmark you like, it should look like this:
now you just gotta invert the mask so the checkmark is colored, to do this just click on the color fill layer mask you just drew on and hit ctrl/command + i. the mask will get inverted and it will look like this:
then you can add whatever layer style you'd like to the checkmark (and put the layer opacity back to 100% if you want). i added a gradient and a drop shadow to mine, and changed the blending mode from normal to difference to make it match with the text, so now it looks like that:
animation time! this is where you need to use a bit of keyframes, but i promise it's not complicated.
for this animation i wanted to mimick a checkmark being drawned. when you draw a checkmark, you usually do it in 3 steps right? your startung point, then a line down, and then another line up to the end point. it's what i tried to mimick here.
to animate it that way, you need to draw a shape that will hide the checkmark and then move it around to mimick the drawing animation. to do so, create a new group (i've named mine "checkmark") and add a layer mask to this group. you also need to unlink the mask by clicking on the little chain icon next to the mask thumbnail:
now the next steps are a bit of trial and error until you get what you want, i'm gonna try to explain it as best as i can (bear with me haha):
1- go to where you want the animation to start, aka where you want the checkmark to start appearing. for me it was a few frames after the start of the gif.
2- then, with a black brush that wasn't too big nor too soft, i brushed a bit over the checkmark to erase it for now (you may have to go back and edit this after the animation is done). no need to do a huge shape, just big enough to cover the checkmark. if you go back to the move tool and click on the mask thumbnail you have just created and click and drag in the canva, you should be able to move the mask around. this is what you want for steps 5 and 7. basically, on your mask thumbnail on the checkmark group, what is brushed in black will erase what's in the group, and the white part will reveal what's in the group. for now just make sure the shape you just drew is covering the checkmark.
3- once the checkmark is hidden, click on the stopwatch icon next to layer mask postion to start the animation. this will automatically create a keyframe where your cursor is on the timeline (the yellow diamond)
4- once your starting point is done, you want to go a bit further on the timeline with your cursor.
5- then move the mask shape so it reveals just the smallest part of the checkmark (make sure you click the checkmark group mask thumbnail first before moving the mask). once you move the mask with the move tool, a new keyframe will automatically appear where your cursor is on the timeline (another diamond). make sure you drag the shape down the checkmark to mimick it being drawn.
6- go a bit further again on the timeline, where you want the animation to end.
7- and move the shape again to reveal the checkmark (make sure you click the group mask thumbnail first before moving the shape). again, a third keyframe will be automatically created. i dragged the shape up from the bottom of the checkmark to mimick the drawing of the checkmark.
your animation should be done here after these 2 movements, so play it in a loop and see if you are satisfied with the animation you have created. if you don't like it you have options:
you can go back to the group layer mask and edit it with the black or white brush;
you can also go back to each keyframe by positiong your cursor over it and move the mask around in a different way;
and you can select the keyframes (yellow diamonds) and move them around on the timeline. if you push the keyframes closer together, the animation will be faster, and if you space them out more, the animation will take longer. it's up to you!
this animation thing is really just trial and error. you could probably do the same animation with a checkmark you find online, as long as the image file is in a group and the animated mask is applied to the group. and don't forget to unlink the mask before animating a movement or it won't work properly!
and this is what my animation looks like:
that's about it, i hope that was clear enough omg. never realized how hard it is to explain these things in english lol. let me know if you have any questions! ♡
