#ps tutorials

First, we must notice that skin colours (even paler ones) are shade variations of yellows and reds. If we check the hex code colour/colour pointer on the colour wheel, we will see that Candace's skin colour is at the intersection between red and yellow, and is on the lighter/less saturated part.

Here, I am deepening/saturating the blues of her clothes by creating a Hue/Saturation layer, changing from Master > Blues and adjusting the Hue and Saturation values. Colour theory basics: opposing colours on the colour wheels will give a more significant idea of contrast; the bluer colours will appear colder, and the warmer colours will appear hotter and, therefore, more saturated.

In this second step, I am creating a Selective Colour layer, focusing on the Reds. I want this to be highly reddish for now, so I'm lowering the Cyans to the minimum values I can. Notice how the colour wheel pointers went down, meaning we are in a redder, more saturated and more precise zone. The darker the skin, the redder its colours will be in pictures.

Thirdly, I am now creating a Colour Balance layer. Since I want to adjust the warmer colours (e.g., Reds), I am adding more reds, magentas, and yellows.

The exact process I did for Candace's clothes, I'll do for her accessories. Her accessories blended too much with her skin tone (hex code-wise and I imagine that for the normal eye, too). So, to make the yellows on her accessories pop and be more different from her skin, I created yet another Hue/Saturation layer and changed from Master > Yellows, altering the Hues, Saturation and Lightness values.

Now that we have the image's primary colours (blues, reds, yellows) separated, it is time to deepen/saturate the reds. So here, I made another Selective Colour layer, also focusing on the Reds. Notice that now I'm also increasing the Cyan values. Why? Because Cyans make the reds look darker, and I want exactly that. So everything will increase in value.

To further deepen these colours, I created a Curves Layer and tweaked each RGB curve. I made the blues lighter; meanwhile, the greens and reds went darker. Again, colour theory! Notice on the colour wheel that her skin is extremely red and saturated. This is precisely what I want. Why? Well...

... Because now, by using a Selective Colour layer again, I can make her skin magentaish. Pure magentas are rare in pictures, even fantasy/2D characters. Generally, you will find variations of purples, pinks or reds, but magentas are more difficult to find. Therefore, they're easier to work with/edit. Even if the character had magenta colours, we could've isolated them beforehand, too. This step guarantees that my PSD will solely focus on her skin tone, basically.

Our final step is to create another Hue/Saturation layer and change the setting from Master > Magentas. We will decrease the Saturation and Lightness values and slide the Hue bar to the right. And now, check the colour wheel: it's a beautiful dark brown! It's popping a lot against the yellows and blues. ~

This is where we started vs where we finished!

So there you have it! A speedy but hopefully informative tutorial on how colouring PSD works and how you can quickly love your characters a bit more when doing edits and graphics for them!

Again, please consider reblogging, liking this post, and/or supporting me on ko-fi if this helped you! That way, I can keep bringing you tutorials like this faster and more effectively. ~

Create your canvas, make your shapes and align them in the positions you want them to be in. Then get the gifs you plan on filling your shapes with created on standby.

Things to keep in mind before starting: 1. Many of you may have already learned through experience that photoshop has a tendency to create duplicate frames when you are working with multiple gifs on one canvas. It typically occurs when you don't have the same number of frames in all the gifs that you're combining onto your canvas, or rather, your clips are not perfectly aligned. OR when you are working with keyframes, but this time we will have an exception to that rule for what're doing so I won't be discussing the 0.03-interval rule here but if you're curious, it's fully explained this this tutorial by nik on usergif.

To be on the safe side, load in the same number of frames for all gifs. I usually just load in however many frames for each, and then I trim the clips on both ends to be the same, but they have to be exact. If even a single integer is out of place in timeline, you could still risk getting duplicate frames at the end. 2. When making an edit like this, you have to consider the amount of time you have from start to end to make the transitions and rationally plan them out in the space you have available. The more shapes you use, the more frames your gifs will need to be composed of.

3. If you're trying to get the same effect as in my Final Girl edit, where the black & white is default, and the color phases in and out, my goal here is for the color to be visible for at least 10-15 frames each gif, so with 3 gifs, I figured around 65-70 frames would be a good range.

For my first gif, I intentionally loaded in my gamble of 68 frames. For the other two, I loaded in all that was capped in the folders, moved the clips into the positions I wanted them to be in, put them in their designated layer masks, and then trimmed the clips on both sides to match the initial 68-frame clip. ❗️Remember that they have to be exactly aligned like this and all other trimmed off clips deleted before you start your key-framing❗️

Next you wanna make a group for each gif (highlighted in yellow for visibility) to put your coloring adjustments into with a layer mask for their designated shapes, which should look like this in your layers, and like the below in timeline once aligned with the rest of the clips.

I also just tucked the shape layers into the coloring groups to clean it up. But if you plan on creating frames for the gifs, I suggest you move those layers to the bottom and keep them until the end when they can be used for borders, but if not you can make new shapes later.

Assign a black & white gradient map to each gif with a clipping mask on top of your coloring groups.

Now lets say you're not pleased with the outcome of the black & white like for mine, it desperately needs brighting and contrast.

Add your brighting adjustments as needed, and give every adjustment its corresponding layer mask like below.

Next, duplicate both your gif layer and your coloring group, then select both duplicates, as well as your new b&w color adjustments and convert them into a smart object together.

You should now have your original gif + original coloring group, and one single black & white gif on top.

Do this with the rest of the gifs! If you want, you can also combine your original gif and coloring group into a smart object so you have one colored gif, and one black & white counterpart for each.

Now we add the key frames!

You're going to be adding opacity keyframes to your black and white gif layers only. Decide which gif you want the color reveal to start with, and what your reveal pattern is going to be.

I chose to reveal the color of my first gif 11 marks in, which means I need to add a key frame at the 10th mark as well. This is because we don't want a literal "fade-out" effect, we want the change to be immediate. The first key should be at 100% opacity, and the second at 0%. You shouldn't have to worry about duplicate frames upon conversion because all keyframes will only be 1 integer apart.

Once you've decided where your next reveal will start on your second gif of choice, repeat the process.

Then you have to add more 2 more key frames to the prior gif to transition it back into black & white. This needs to occur simultaneously as the next gif transitions into color. Where one starts, another ends, and where one ends, another starts, etc.

Follow this process until you have 2 pairs of keyframes on all your gifs (your final gif should only have 1 pair). Whether you want the transitions to be evenly spaced is your choice and I think it looks cleaner that way. For my final girl set, I was trying to simulate an analog effect similar to making a player selection in an old video game so they were placed methodically to be "jumpy". But play with the keyframe intervals between each gif to get them to look the way you want.

Your keyframes should look like this in the end for reference:

Circling back to adding borders, it's the same keyframe process, but on new shape layers on 0% fill +stroke to serve as the border (if you deleted your shapes earlier). Try adding an "outer glow" blending option to make the border more prominent. Then, make sure the opacity keyframes on the shapes align with the keyframes on the gifs.

WATERMARK 1: URL/TRACKED TAG

the most common watermark for people is usually 'thisismyurl.tumblr.com', 'thisismyurl | tumblr', 'thisismyurl' - at least, this is assumed for most people as the best way to watermark.

but if you're like me and constantly want to change your url, you know that there's a good chance a watermark on a gif 3 months ago could be completely different to one now. this is why people are turning to tracking tags.

tracked tags change less frequently, if at all. it's smaller, which makes it more subtle. if you want to go the extra mile like me, you can create a blog under your tracked tag (eg. i track tuserlucie) which means you can reblog anything with your watermark to the blog, showing that it is yours.

placement is key though ! here's 3 different ways you can place it.

NOTE: opacity has not been altered on any of these. depending on how it looks with your gif, opacity looks best at 10-30%.

Font settings: Momcake, thin, 10pt, #ededed.

each of these placements have different advantages.

the first placement (top left) is the one i personally use. it's centered right on the middle but not too high up.

the second placement (top right) is probably the most popular. corners mean people can kind of tuck the watermark away where it doesn't seem obvious. the fourth (bottom right) effectively does the same.

the third placement (bottom left) is 100% the most effective. it sits in a point exactly where it's noticeable, making it less desirable for reposters. on the right opacity too, you hardly notice it.

WATERMARK 2: ICONS/SIGILS

this is an idea that i've seen used mostly by nik @cal-kestis , but is a great and creative way to do it !

an icon or sigil makes your gif totally unique to you. and it's something cute on there which is different to having to put text on there.

(i've put it in orange for the purpose of seeing it)

but you can see here, it doesn't need to be anything special. i've just used an oval shape plus the initials of my url and that's it !

but a sigil can be anything. it doesn't need to have text; it could just be an image. it could just be your icon. either way, it's a cute little alternative to using text.

here's the different options that i preference in action.

SIGIL - bottom right corner

URL - bottom middle

TRACKED TAG - face/body

RESOURCES

here's some resources to use if you want to start watermarking !

FONTS:

Momcake (this one was used throughout all the text watermarks !) Cocogoose Lemon milk Bebas Quicksand PSD

VERSION I

This is by far the easiest method, but it only works on scenes that have a very different background color than the object you want to stay colorful. Green and blue backgrounds work best if you’re creating a set with bw blackground + people in color. Try to stay away from scenes that have a lot of red tones in the background, as this method will not work. 

This the gif we’ll be starting out with, I already used my basic brightening settings on it using Curves and Brightness/Contrast. 

Create a Hue/Saturation (ctrl + u) adjustment layer on your gif in timeline.

In the drop-down menu where it says master by default you are going to pick each color that’s not the color you want to stay (in my case it’s red) and lower the saturation to -100. (I used the yellows on the picture below as an example, but I set it to -100 on greens, cyans, blues and magentas as well)

Your gif should look like this now:

You can see that besides from the girls’ red cape everything is black white, however, the red is looking washed out and not as bright as it should, so in that same Hue/Saturation layer pick Reds and slide the Saturation to the right until the remaining color in your gif is vibrant enough. 

And you basically have your finished gif right here! Of course, you can make more adjustments with a Selective Color layer, but this is the gist of color isolation on a gif. 

Now as I said, this method only works with scenes that have a big contrast between the background and your object; but if you’re like me and are determined to make your own life harder, you will want to include scenes in your set that cannot be colored with this method. 

VERSION II

This method is for scenes that won’t work with the first version, and have very little to no movement. 

This is my starting out gif; once again I have already did the basic coloring of it, but as you can see the wall behind Kate is very similar to her skin color. 

Using the version 1 method gets you this; not much has changed because of the majority red tones the background has, but if you were to set Reds to -100 too, Kate’s skin would become bw too. (i left cyans on 0 instead of -100 to preserve her dress’s color.) 

As this obviously doesn’t work, we aren’t even going to create a Hue/Saturation layer at this stage. Instead, you want to make a Black & White adjustment layer (alt + shift + ctrl +b)

Now you have a fully black & white gif. Selecting the layer mask of the Black & White layer, you’re going to start painting over Kate with the Brush tool (B). I have my brush set to 0% hardness and 100% opacity. 

This is how your gif should look now:

As you can see it’s almost perfect, but on the left side of her head you can see the wall’s color in some frames. To correct this, you’re going back to that same layer mask but set the brush to 60% opacity and have your brush set to color white (the percentage is up for preference really, I set mine between 50%-80% depending on the colors) 

And we’re done with the color isolation on this gif! To finish it off I used a Hue/Saturation layer and set Reds and Cyans to +10 to make her stand out more then put a Selective Color layer so her skin isn’t orange washed and changed her dress to a deeper blue.

VERSION III

Our starting gif for this version has a few ladies in red in the background, multiple people that I don’t want in color, and it also has a lot of movement. (we are going to work on everything being bw except for Kate)

You are going to repeat the same steps as you did in VERSION I, in the Hue/Saturation layer I set the Yellows, Greens and Cyans to -100. This is how your gif should look now:

Now you are going to repeat the steps of VERSION II. Make sure you are at the starting point of your gif in the timeline window, and paint over Kate in the Black & White layer mask. You don’t have to be as precise here, I actually like to go around my object with my brush set to 50% opacity, just so we won’t have black spots as we move the mask later. [You may think, what was the point of the previous step, if we are going to have a black and white layer anyways? And you’re right, it’s not absolutely necessary, however, it helps that you don’t have to be as careful painting over Kate, as the grass around her is already bw.] 

As you can see, the layer mask only works in the very first frame, then half her body becomes black and white as she is no longer in the range of the mask. 

To correct this, we are going to be using the timeline’s keyframes feature. On the Black & White layer in the timeline window, click on the down pointing arrow on the left. What’s important to us here is the Layer Mask Position option. 

You are going to start slowly sliding that red line that allows you to see your gif move (but not play it) and when you see that Kate is out of the range of the layer mask you are going to click on that little clock symbol of the Layer Mask Position option

Using the Move tool (V) and the left and right arrows on your keyboard, you are going to nudge the layer mask to follow Kate’s body and repeat this step as many times as you need. This is how my timeline ended up looking:

and here’s the finished gif:

As you can see, some pink is still visible around her dress, but it’s very muted. If that small bleed through bothers you, you can always use the little scissor icon in the timeline, split the black & white layer every time there’s movement and adjust the layer mask on every single layer - but that’s very tedious and time-consuming, so I’d rather recommend choosing scenes with little to no movement and a contrasting background so you can get away with using version I or II. 

As an example here’s a screenshot of the timeline of a set where I couldn’t use keyframes; I had 34 copies of the bw layer, and it still had spots where the background wasn’t perfect. So be kind to yourself (unlike me) and just choose easier scenes :D

I hope this was clear and I could help, if you have any questions left don’t hesitate to send an ask or message me <3 

Please like/reblog if you found this useful, and happy gifmaking! 

BEFORE YOU START:

make sure your video is at least 1080p, i always use 1080p video for my gifs, i think mkv works better than mp4, but it works either way.

filesize can be really big like almost 30gb if you’re giffing from a movie, so it’d be better if you have an external drive to save your files.

i use potplayer to screencap, pls download it from their official site, you dont want to get virus on your laptop.

i use photoshop cc 2019

STEP 1: LOAD YOUR SCREENCAPS IN

go to File > Scripts > Load Files Into Stack then a window will show up tell you to choose your files

STEP 2: CONVERT VIDEO TIMELINE

click “Convert video timeline” then click three little boxes on the left corner in the pic.

STEP 3: REVERSE YOUR SCREENCAPS

once you converted to video timeline, 

1. click three little lines highlighted by red box, then click “make frames from layers”

2. click three little lines again then click “select all frames”

3. click three little lines again then click “reverse frames” (cause when you converted your screencaps to video timeline, it’s reverse, so you need to do this step to reverse it back)

STEP 4: CHANGE YOUR GIF SPEED

i think .05 works the best since .04 is too fast and .06 is too slow.

STEP 5: CROP AND RESIZE

most of my gifs are 540x610px or 540x400px, but sometimes i do 540x540px too. whatever you choose, pls make sure that width is 540px. in this tutorial, i go with 540x400px.

once you cropped your gif, go to Image > Image size > set width to 540 pixels and height to 400pixels, it should change to 400px automatically when you typed 540 into width but if not type 400px manually.

then click okay and click three little boxes on the left corner.

STEP 6: SHARPENING

go to Select > All Layers, and click three little lines on the right > convert to smart object.

after you converted your gif to smart object, go to Filter > Sharpen > Smart sharpen.

my personal sharpening setting has six layers in total, we’ll be adding two smart sharpen layers first.

layer one: amount: 500%, radius: 0.4px, remove: gaussian blur 

then click okay and add another smart sharpen layer.

layer two: amount: 10%, radius: 10px, remove: gaussian blur

then click okay

next, go to Filter > Blur > Gaussian Blur > set radius to: 0.3px then click okay.

then add two more smart sharpen layers and one more gaussian blur layer

layer 3: amount: 500%, radius: 0.3px, remove: gaussian blur

layer 4: amount: 5%, radius: 5px, remove: gaussian blur

blur layer 2: radius: 0.3px

i ususally do step 1 to 6 with action so it saves me a lot of time since once you made an action, you only need to click play action.

STEP 7: COLORING

before we start, i wanted to say that there is no correct way to color gifs, so my coloring process may not be suitable for everyone. and i dont use psd, i color every single gif by hand since every gif has different lightning.

i ususally go from 1 to 5

1. Brightness/Contrast

i usually only adjust contrast unless the gif is super dark, my contrast is usually around 20-40 depending on the gifs.

2. Levels

levels is basically lifesaver and where you make most dramatic change here, like if the gifs is super dark or yellow, this is where you fix them.

i use black dropper to click on the darkest part in the gif and white dropper to click on the lightest part in the gif.

and remember that some scenes are just really dark, don’t over do it, it’ll make your gif look terrible.

before/after Levels:

you can see that we remove the ugly yellow and brighten it.

3. Vibrance

i only adjust Vibrance, usually around 20-35, sometimes i’d adjust saturation too. and pls DO NOT OVER SATURATE IT, over-saturated gif will look lousy and terrible if youre not making smaller gifs like 268x268px

4. Color balance

i like my gifs look white/blue/cold ish, and here is where i cast the spell i mean make adjustment.

5. Seletive color

most of the time i only mess around with color black and white here, black: to add more contrast, white: to make white even brighter. sometimes i’d adjust color red too, if a charater’s face is too red, adjust color red’ cyan.

STEP 8: EXPORT YOUR GIF 

go to File > Export > Save for Web (legacy)

make sure your gif is under 10mb since 10mb it’s tumblr’s gif size limit, and you can only post ten gifs in a post.

my save settings is usually Selective and Diffusion, and make sure transparency is checked. 

here’s the result:

primeiro de tudo, você deve escolher a foto que deseja pra sua header e abrir um novo arquivo (ctrl+n) com o tamanho 1000x500. 

feito isso, você posiciona a foto que escolheu, no meu caso eu escolhi uma obra de claude monet e apliquei o psd peek a boo da peach coloring junto do future friends da soleiledits e ficou assim:

pra adicionar a textura de torn paper existem dois modos, eu vou ensinar com a ferramenta de pincel. pra isso você precisa ter brushs com ponta torn paper (aqui você encontra uma pack com eles) e cria uma nova camada. com a camada que você criou selecionada você carimba a parte de baixo da sua header deixando ela assim:

primeira parte completa, é só salvar em png e se você quiser pode usar assim mesmo. no meu caso, eu quis que ficassem caindo uns brilhinhos. nessa pack você consegue baixar as overlays de gifs que eu usei, eu usei a 028. você precisa abrir a linha do tempo. em janela > linha do tempo

depois disso, você abre a overlay que você deseja e posiciona em cima da sua header pronta. assim:

vai ficar preto mas nessa configuração você consegue arrumar isso, escolhendo divisão:

pronto, desse jeito o que ficará visível no seu gif será apenas as bolinhas. você também precisa ficar atente nessa configuração da linha do tempo com as camadas, se não, o tempo do gif ficará errado então tenha os dois do mesmo tamanho assim:

feito isso, você salva o seu gif mas não como salvaria um arquivo normal. você precisa salvar para web para que ele possa se movimentar, alt+shift+ctrl+s

vai abrir essa tela quando o gif carregar e são com essas configurações que eu salvo. 

E PRONTO!! depois de salvar, o seu gif fica assim e você pode usar ele como sua header no seu perfil do tumblr <3333 espero que tenham entendido, qualquer dúvida é só me falar que eu prometo tentar ajudar!