#mine: tutorial

Chapters:

how to make a basic gradient

adding colors with brushes

softening & adjustments

What you´ll need:

any version of photoshop (I use CS6, mine is in german because I bought it years ago in germany) 

very basic photoshop knowledge 

i.  how to make a basic gradient

Open a new document in your desired size. 

There are several ways to make gradients. I always use the new fill layer option, right next to the new layer or new group buttons on the right side.

Click on it and select the second option.

Adjust the angle however you wish, and then click on the gradient to bring up the next window

Select any colors you want by clicking on the little droppers highlighted above. I used #ff27f2 on the left and #d58dfa on the right. Once you´re done click OK until your new gradient is on your document.

ii. add colors with brushes  

add a new layer & select a big brush with no hardness and low opacity.

select any color to paint with, I´ll be using  #e50051 &  #770dfa & plain white. Start painting on that new layer in slow strokes. You can add as many colors as you want. Mine now looks like this:

Now we merge our layers by selecting them, then righ click and selecting merge 

iii. softening & adjustments 

Go to filters -> blur > motion blur 

Depending on the gradient you´ll have to select different variables, but for this one I used the numbers below:

Sometimes I add Gaussian Blur too to blend it even more, but didn´t do that for this gradient. 

Now for the adjustments I only added a brightness and vibrance layer. This is the finished gradient:

📌 DISCLAIMER: I am working with Windows, I don’t know if it’s the same on a Mac.

WHAT YOU NEED 

✔ adobe photoshop + a few basic tutorials if you don’t even know where to start: x / x / x (also google is your best friend) ✔ potplayer to extract your frames ✔ full hd videos (I t*rrent mine from here. The videos HAVE to be at least 1080p or the gifs won’t be as good)

Once you’ve got everything downloaded and installed, open PotPlayer and load the video to what you want to gif

To extract your frames press CTRL + G and this window should pop up (mine is in Portuguese, but everything should be in the same place so don’t worry)

You’re going to create a new folder where your frames are going to be saved, put it in a place you have easy access to. You can do that by clicking on the three dots here to select a directory. You need to create a new folder for every separate gif, or else all the frames are gonna end up together. 

Once you created and selected your folder, make sure your settings look like this. It HAS to be Every 1 ms because you need to capture every single frame, or your gif is going to end up choppy.

Press START

Now you’re supposed to press PLAY on the video up until you have all the frames you want saved, HOWEVER, on my laptop it always ends up laggy so I came up with an alternative. After you press START go back to the video and long press F until you have all of your frames (this will capture frame by frame and will NOT lag - at least I never experienced it). When you’re finished, press CTRL + G again to bring up the window then click STOP/LEAVE.

If you go to the folder you creater earlier you’re going to see all the extracted frames! We’re done with PotPlayer, now we move on to photoshop.

Open photoshop, go to File > Scripts > Load Files Into Stack and this window is going to pop up. Click on Browse go to your folder with the extracted frames, select all files (or only the ones you want). Make sure those little text boxes are unchecked.

After you’ve selected them click OK, the frames are gonna load (and it might take a while if you got a lot of frames or if your computer is slower like mine). It should look like this by the end (if you don’t have the Timeline, don’t worry). 

Now it gets a little tricky because you have to do a lot. Get it converted to a timeline, into a smart object, reverse frames, set time frame, etc but luckily for you I already have an action that does all of it very quickly!!! What is an action? It’s like a preset, and just like the name says: you record a set of actions in photoshop and then you can save it and use in other files. 

download the action here

To load it go to Window > Actions and something like this will pop up. 

Click on the three lines then on Load Actions and select the one you downloaded. The new little folder is named “gif”, click on convert frames and then on the little play button, it will run the action and do everything for you automatically.

Now let’s crop! Press C on your keyboard or click the little crop button on the toolbar. 

Choose how you want it cropped, when you’re finished click Enter

Go to your actions again (it’s that little triangle that looks like a play button on the right toolbar, or just go to Window > Actions / F9 ).

Now you can choose the 540px gif size or 268px, press play and it will convert it to you automatically (if you want another size go to Image > Image Size). There’s also two options to sharpen your gifs, you can choose either one and they’ll look fine it’s just a matter of taste. After you’re done, your file should look like this:

Now it’s time to do your coloring and bring it to life ✨

You’re free to edit/color your gif however you want. On the Layers section click on this little button

And you’ll get a lot of options. You can see on the image which ones I’ve used. Now this is purely a matter of your tastes + the scene you’re giffing. Each scene will have different colors, lighting, etc. I’m not going to go too much into it, you can play with it and see what each option does, it’s fun to explore. 

After you’ve done your coloring, it’s time to save your gif.

Go to File > Export > Save For Web (Legacy) (if you have an older version of photoshop I think you just go File > Save for Web).

You’ll get this window (it might take a while to load, be patient 😢)

These are my settings. Sometimes I change from Selective Noise to Adaptive Noise or Selective Diffusion or Adaptive Diffusion it really depends on the gif and what looks good. But I find that most of the time Selective Noise works the best.

Also, super important, make sure your gif is less than 10MB or you won’t be able to upload it to tumblr, you can always check the size on the left corner here.

 The final product:

IMPORTANT: If you’re doing a gifset make sure all your gifs are the same size by width and height or your gifset will be blurry. It can’t be one 540 x 400px and another 540 x 405px

Remember to be patient with yourself, I’ve been working with photoshop and making gifs for 10+ years now and there’s still a lot I don’t know and a lot to improve. Everything I learned was from googling way too much, tumblr tutorials and just clicking on stuff to see what it does. My gifs still don’t look perfect, and it definitely didn’t look good at all when I first started out. Keep practicing and searching, you can do anything 🌹

i. screencaps/photos

So the first thing you need to create your icon is an image. Most of the icons I make are fandom icons and so I would need a screencap, but if you are making a celebrity icon then you can just use the image you want. I wouldn’t say there are any rules per say but I do generally stick to these suggestions:

Always use the highest quality picture possible. I generally create my own screencaps and I only ever use 1080p or 720p, but you can find some good quality screencaps here, here and here. If you are using a celebrity picture I recommend HQ appearances or photoshoots.

Try to pick an image that is easy to work with when it comes to cutting so no complicated hair styles, accessories etc. I always make sure the subject of the icon is in the foreground of the image and I try to make sure that no body parts are cut because then you can end up with a weird looking icon.

an example of a good image is:

an example of a bad image is: 

with the alexis screencap you can see her full face and most of her body whereas with the mickey screencap a lot of his arm and head has been chopped off. you can see below how this effects the overall icon:

ii. cutting/removing the background

okay, so now that we have our screencap/image picked out then it is time to start removing the background. I personally like to remove the full background before I crop or resize my icon but I know a lot of people crop their image down first. Anyway, open up your screencap in photoshop.

Once I have opened up my screencap I duplicate the background image twice. Then I delete the initial background layer and make layer two invisible. Layer two is just a backup layer in case something goes wrong with my main layer.

Now onto the cutting. There are several ways to cut the background off an image and I know people have their preferred ways so if you find another way easier then please feel free to use that way. For me, I like to use the Quick Selection Tool

The settings for my quick selection are as below:

I normally do my cutting in two stages, doing one half of the image first and then the other half. So using the quick selection I draw around the body of the person I am making the icon of. I normally have to zoom in and out of the image  and use both the + and the - to adjust the selection and make sure I am not chopping of chunks of the person but eventually I should have a selection like this:

I then cut the part of the selection to remove the background and then repeat the process with the other half of the image. You should be left with just the subject and no background:

Now that I have removed the background, it is time to start cropping my image. I like to make my icons 250x250 as they can then be used on more platforms. However you can make them whatever size you want, the tumblr recommended size is 128x128.  When making my icons I like to try and get enough of the subject but also leaving space so you can see the background. I normally crop just above or below the waist as I find this is the perfect place to crop. As you can see below.

Once I have cropped my image into the square I then resize the image so it is 250x250 and then it’s time to finally start the fun stuff.

iii. colouring and adding a background

This is definitely my favourite part of making an icon. I always enjoy making the colouring and thinking about backgrounds etc.

So when it comes to colouring I always start with some brightness but not too much brightness as I don’t want the icon looking too exposed. I always start with a curves layer as that is my favourite way to brighten up an image and I love working with curves and adjusting them to fit the image. Along with curves, I also like to add some brightness and contrast as I like to make my icons as bright and vibrant as possible. I don’t normally use levels, I have never really got a good grasp on using levels properly so I avoid them if I can. When adding brightness to your icon there are some key things to remember:

Do not use too many brightness layers. it is nice to have a bright vibrant icon but do not overdo it as the icon will end up looking to overexposed. it always depends on the subject(s) of the icon and also the initial brightness of the icon. for example I often find I don’t need to add as many brightness levels when i’m working with a sitcom screencap compared to a drama show.

Always make sure you never whitewash any person of colour in your icon. Brightness layers can be great but they can also make someone look very pale which we do not want to do. The simple way to ensure you don’t whitewash is to use layer masks, that way you can adjust the brightness of clothing etc. and erase the brightness from the persons skin.

Once you have finished adjusting the brightness we can move onto the colours. I like to try and make my icons have a slight pink/red/yellow tint to the people. To make these adjustments I tend to stick with selective colour, vibrance and colour balance.

Here is what my icon and layers looks like now that I have added the colouring:

Once I am happy with the colouring and how my icon looks, I merge all the layers together and then I sharpen my icon. These are the sharpen settings I use for my icons, nice and simple: 

Now, it’s time to think about my background.

When I am making icons I usually make the same icon with three different colours. I try to think about the background colours that will look good with the screencap so I try to match it up with elements like clothing, hair etc. For this icon the first colour I am going to use is yellow.

With my background I always like to make it a gradient, I think it adds some dimension to the icon and makes it look really good.

The first thing I am going to do is pick a yellow foreground colour while leaving the background colour white:

Once I have picked my foreground colour, I go to layer > new fill layer > gradient and click ok. I then proceed to make my gradient using the yellow foreground and then a lighter version of the foreground: 

and there we go, that is my basic background colour. To change things up a little I sometimes change the direction of the gradient so instead of top to bottom it might go left to right like this: 

or I might make it a radial gradient. If I am using a radial gradient I always make sure the lighter colour is in the centre and then I normally make the scale bigger so it’s a softer more subtle gradient like this:

this was achieved by upping the scale to 155.

now you can either stop there or you can add another level. for me when I am sharing icons I have made for a pack, I try to make three different designs and that is when the next part comes in.

iv. textures and doodles

for me, I love textures on an icon as I think it gives it a little something else. I use all sorts of textures and have spent a long time collecting them over the years. some good places to find textures are:

@peytonsawyers​

@argetnallison​

@hisources​

@allresources​

deviantart

unsplash

I like all sorts of textures for my icons, but I mainly use nature, grunge or paint textures as they always look nice in the background. From my experience I find black and white textures work best when it comes to getting them to settle into the gradient as I don’t like the texture to stand out too much and it also means I don’t have to look into adjusting layers etc so that it fits with the background colour. So if the texture I like is colour, I then simply put a black and white gradient over the top.

Once I have picked out the texture I like, I paste it onto my background and then adjust the blending mode and opacity. I normally go for soft light but it all depends on the icon and the texture. With icons that have a lighter background you might need to adjust the blending mode, and it can also depend on the b&w ratio on the texture. Here you can see the difference just the background can make, the texture is set to soft light with 100% opacity in both yet the texture is more prominent in the second icon.

Alongside textures, I also like to use doodles just as an added little design feature so the icons look different. I don’t really like huge doodles, just small simple ones that fill up some space on icons, doodles such as crowns, hearts etc. 

I normally just use doodle brushes set to white, and I’ve found these by simply searching for them around tumblr and deviantart. I’m pretty sure the resources blogs listed above also have doodles.

and that is it. my tutorial is officially done. I hope it covers everything and helps you with your own icons. It is pretty long and has a lot of detail so feel free to send me a message if you have anymore questions.

i’ve been giffing for about over six years and it’s only very recently that i feel i’ve got a grasp on a pretty good method, for me at least. if you’re reading this you probably have prior knowledge already but this tutorial is also going to go over the basics as if you know nothing. → this is just how i do everything and my ordering process, there are way better gif-makers out there but i know how finicky the process can be so i wanted to give out all my tricks! it might seem like a lot but it becomes second nature easily. (let me know of any broken links and or questions.) just to note i use windows not mac.

SORRY FOR SPELLING AND GRAMMAR ISSUES, i really pushed myself and i struggle with articulation. 

things you will need/learn: (it’s all free!)  →the ones in bold are essential.  —adobe photoshop; i use cc2020 which you can get here: [x] —mpv; (a frame captures, i’ve used pretty much every type over the years, even ps’ inbuilt one but this is my favourite & this tutorial on how to use/dl it is the best) [x] —***at least 1080p footage; if you don’t have any you can still use this frames folder to follow along with me :) [x]*** —4k video downloader [x] —a megasync account [x]

actions: —@kylos tumblr sharpening; (these are just my favourites you can use any you find/make really but this makes your gifs look even more hq) [x] —@kylos twitter sharpening: [x] —@rory-amy tumblr/twitter save; (i just use the save action out of this pack and it’s a LIFESAVER) [x] —if you’re not sure how to put these into your ps i’ll show you how later on in this tutorial. 

how to learn colouring + how to add subtitles correctly + how to make hq twitter gifs: —all later on in this tutorial with links to my own resources and might have my twitter watermark by mistake. 

*what this tutorial isn’t including: —how to t*rrent. —how to upscale footage. —how to make multiple gifs/gifset are crop them the same way/move frames over to a new document; (i’m just focusing on how to make one simple gif) —how to use gradient/html text for captions but here’s a great tutorial on it. [x]

i just want to give a big shout out to @kylos because all her tips are just amazing and top-tier!!!

‧͙⁺˚*・༓☾ ☽༓・*˚⁺‧͙  ok now onto the good stuff!  ‧͙⁺˚*・༓☾ ☽༓・*˚⁺‧͙

★ how to load in and sort out your layers: [1/2] ★ —once you’ve dl the frames or gotten your own you’ll need to load them into ps like this;

when load layers pops up, you can select individual files (for a more complicated set this is good) but i prefer to just use the folder option. now select your captures folder from wherever you saved it. depending on how many frames/how hq they are will effect how long the loading time is. it can really vary.  —ONE THING YOU SHOULD NEVER DO: is take EVERY OTHER FRAME when making your gifs this destroys the flow of them and is an older method to gifs that isn’t needed. 

—if your ps is brand new you’re going to have to add some stuff, which i’ll show you how to do. — first go to window and select TIMELINE and ACTIONS. then move your ADJUSTMENTS bar up and close the tab it came from since you won’t need those. (if you ever do, just click workspace and then RESET ESSENTIALS) and next you’re going to click on your timeline bar, then CREATE FRAME ANIMATION. — *your screen should now look like this:*

—then on your timeline bar at the right top corner there’s three little lines, click that. then select MAKE FRAMES FROM LAYERS and after SELECT ALL FRAMES and next REVERSE ALL FRAMES. (depending on the ps you use your frames might be like mine and need to be reversed, just click the play icon on your timeline to make sure). —i always play through the gif before doing anything and i noticed the gif frames are a bit long for my taste so i’m going to press my shift key and then select up to frame ten by right clicking (they should now be highlighted) and click the trashcan icon on the TIMELINE bar to delete them. you can trim your gifs at the end doing this if the mb is too high and your gif doesn’t load when uploading. currently tumblr is up to 10mb and twitter is around past 15mb.  —after deleting your frames you then need to SELECT ALL FRAMES again and then CONVERT TO TIMELINE.

★ how to crop your gifs: ★ ***here is when i like to do it: (4th icon on the bar on your left)*** —however, you can do this before or after, just as long as it isn’t after making it a SMART OBJECT or sharpening.  —there should now be a new a bar on top of your gif and next to RATIO is where you should put your dimensions in (as in width:height) 

—there are tumblr dimensions but i find you can be more lax with them, i like to change it up a lot but for now i make square gifs around 450px x 450px and rectangular ones around 500px x 340px but it’s up to you. if you’re really struggling and see a set with a size you want to use yourself you can study the size of it by inspecting its elements on desktop, and rounding up. but i would recommending doing it yourself. making your own style is the fun of it!!! —for twitter the best size is 600px x 600px. this is a square, sometimes frames can’t just fit neatly into this shape/sizing so find what’s best or copy my tumblr dimensions if you’re struggling. 

***note: when cropping your gif you can get weird transparent lines around it. → to get rid of those when cropping your gif, you have to: crop inwards a bit, (or as much as you want) and move the cropping square/shape a bit into the middle. 

now, make sure you go to IMAGE on top bar select and put in your gif dimensions.***

‧͙⁺˚*・༓☾ ☽༓・*˚⁺‧͙  

★ back to your layers: [2/2] ★ —now go to your LAYERS bar and select every frame with an eye icon next to it, right click and select on top of them and select CONVERT TO SMART OBJECT. this should leave all the frames you have deleted earlier and those have no eye icon, you can select those akin to how you did it on your TIMELINE bar, just use the trashcan icon on your LAYERS bar or just select DELETE LAYERS when right clicking. 

★ how to insert and use actions: ★ —to do this you need to locate your actions folder. so, go to your adobe photoshop file, right click on the ps icon and then click ‘FILE LOCATION’ then search in it for ACTIONS. next if your action(s) are downloaded go open another file explorer tab:

then drag and drop it like this:  —if it says administer permission is needed click yes.

—once you’ve done this head back into ps to use the ACTIONS, first to sharpen, then to save: —you’re going to click the arrow icon on the sidebar on the left side to your LAYERS and then the three lines as shown here: 

—you’ll see where it says SELECT HERE, do that and then click the arrow icon below it and just click continue if you get the make layers error, this won’t affect anything. (sometimes gifs can glitch at this stage but just undo or you may need to restart your gif.)  —ok now your gif is sharpened! if you think it’s too much you can add gaussian blur from the FILTERS bar at the top but i just prefer to lower the opacity by double clicking the bars next to the word SMART SHARPENED which has now appeared x2.  —for me gif colouring at this stage is hard because playing the gif in this mode blurs it and i like having the individual layers so this is where the action pack (save) comes in handy! *it also saves you from having to open your gif at the end and adjusting to 0.07 sec bug to 0.05 gif speed the action auto does it to 0.05 for you (which i’ll explain next.) just select the action the exact way you did sharpening. just scroll down to where it says save.  —now your ps should look like this (this is a good point to save, but i’m the worst and do it after i colour usually.)

adjust the gif speed by double clicking the numbers if you want to change it from 0.05 speed but even if your gif is short making it anything more slower or even faster can mess up your flow. the best range imo is around 0.04-0.06, although i usually never stray from 0.05. i also like to put do not dispose on all the frames (which you again can do by shift clicking or the three lines on your timeline to get select them all and then any frame right clicking to do that should work for both things.)

★ how to colour (basic not colourful): ★ —now this is the best part for me, however it’s the most tricky and vague in a way. one psd (your saved photoshop document that contains your colouring and usually the gif too) might not work for the next gif even if it’s the same film or ‘footage’ and getting your own style can take a long, long time. you can use other peoples psds but i find making your own is the most rewarding. but! i have studied those psds given out and incorporated them into my own style over time.   —*so, what i have decided to do is just that. i have made a base psd for this gif for you to study. but i really recommend looking at other tutorials to teach you how to do that. i’m just gonna get you started, which i hope no one minds. i did try and make it less my very blue-toned grunge style and more ‘normal’. [x] —note 1: select all of the adjustment layers on the side and then to put them into a multi-set just select DUPLICATE LAYERS and put them onto your document/next gif. be smarter than me and don’t name randomly or keyboard smash your psds, sorting out your psds makes life so much easier trust me and you can reuse them!!! (i keep ALL of mine in folders in my documents and then they are sub-dived).  —note 2: i like to go more extreme and lessen the vibrancy/saturation and then constantly edit and mess with the opacity rather than being subtle, there’s so many ways to do this. so again, it’s just messing around. however, even if you all your frames selected sometimes this can bug out and mess up one of the frames. so, keep watch on that and either undo or just duplicate the new version of your adjustment layer and delete the bugged one. 

*if you do want me to make a how to on my colouring that goes more in-depth/colourful please let me know.

★ how to add perfectly in the middle subtitles: ★ —here i’m going to give you my subtitles with its settings preset, but edit it to your own liking! [x] —if you’re loading it in, different sizes/factors effect your subtitle placement and your text can looks random like this: 

so what you’re going to do this: drag it into the place you want and then make sure your text bar looks like this: 

—since this is also an adjustment layer you can get the same bug of it being fixed on one frame only and then the rest are how it used to be. so, just duplicate it into a new file like this: 

—and after duplicating it back onto your main gif and get rid of the old one.it should be good. (again, this is just my own learned solution) —this is also applicable to twitter watermarking which i’ll mention later on. 

now that you’ve done all of that and hopefully saved your gif it’s time to export it!

the save settings i use:

★ how to make hq twitter gifs: ★  —read this tutorial, already linked above but: [x]  —if you’ve read everything above then making a hq twitter gif won’t be a hard adjustment, you just need to change and add a few things. —first: make sure it’s 600px x 600px (you can change this but to get the best result) —second: use the twitter sharpening action!!! you can adjust this, but twitter can really repress the quality if you use just the tumblr one, or your preferred method. although some footage needs you to lower the sharpening or else it can look like a lot, but don’t be afraid it’s an easy fix! —if you’re adding subtitles make them a bigger than you would for tumblr just make sure it doesn’t go through the bottom left side of your gif. —before posting, make sure you have watermarked it! which you can only do on the top left/right corner and bottom right or else it’ll get covered up! you can also place in somewhere else if you’d like it’s up to you. —the video of me making a gif will be one for twitter so if you’re unsure about anything from this or the entire tutorial hopefully it clears that up. :) 

it should look something like this, just in your style!:

#1 :     artbreeder

the  first  thing  you’re  going  to  need  to  do  is  make  an  account  on  artbreeder.     it’s  completely  free !     pick  out  some  reference  celebrities  of  who  inspires  your  original  character.     for  example,     for  serena  her  looks  are  inspired  by  natalie  portman,  dianna agron,     and  emilia  clarke.

while  it  may  seem  confusing  at  first,     you  start  with  one  image  and  sliders  come  up  to  the  side.

these  toggles  help  you  edit  the  image.     the  best  thing  to  do  is  get  a  neutral  expression,     unless  you  have  a  muse  who  is  smiling  often,     or  frowning  often . . .     but  even  then,  reface  app  seems  to  focus  a  lot  on  the  eyes  and  can  fix  the  expressions  so  long  as  they  aren’t  too  extreme.

here’s  the  artbreeder  piece  i  made  of  my  oc,     serena.

now,     all  you  have  to  do  is  download  the  reface  app  on  your  phone,     then  search  gifs  within  the  app.     i  personally  choose  to  copy     &     paste  the  gifs  into  a  private  discord  server,     and  i  screencap   /   hoard  them  there.

Basic coloring & color enhancement

The first thing I do when coloring a gif is adjust the curves. What I do depends on the gif itself, but I generally brighten the gif, add contrast, and (sometimes) do some baseline color correction. 

For this particular gif, I’ll just focus on brightness and contrast because we’ll be doing much more color correction later.

Notice that I’ve shifted the input slider on the left. This really helps with the contrast, so what these settings will vary between scenes.

Anyway, now I have this:

Already looking better, right? I want to do a little more color correction here, so I’ll add a vibrance layer, then a Hue/Saturation layer. 

I chose this particular moment to gif because one of my favorite things to do when coloring is to enhance the background colors of a gif to really make it pop. 

In this scene, the background is yellow, green, blue, and cyan (in the trees and sky) and it contrasts beautifully with David’s sweater. I want to highlight that!

So, I’ll select yellow from the dropdown and increase the saturation, then repeat that for green and cyan as well.

That gives me this:

I’ll then brighten it up just a smidge with a brightness/contrast layer (seriously, just a smidge) and mess around with a selective color layer.

In this case, I’ll select ‘red’ from the dropdown and increase the magenta and black by just 2-3 points, remove about the same amount of yellow. This contours David’s face a little bit and evens out his skin tone. 

I’ll select ‘yellow’ next, where I’ll increase the cyan and black, but remove some yellow. This will make the trees more green. I’ll do the same thing after selecting ‘green’ from the dropdown, then cyan.

Last (but not least), I’ll select ‘black’ and increase the blacks.

Now I have the final product:

Ultimately, the key here is to identify the colors that you want to enhance.

I used this method for this gif and this gif in my relationship tropes set, for example (I also used a little bit of the next method in the corners, but it’s mostly done with selective color and hue/saturation).

When the subjects aren’t moving as much, I use another method: literally coloring the gif like I’m a kid with a coloring book. 

(I did that for this guy.)

Coloring with the pen tool

For this example, I’m gonna throw it back to another iconic moment in television history:

After doing the basic curves and removing some of the yellow and cyan (because they REALLY love their cyan in this genre of television), I’m going to break things down starting from this:

The first thing I’m going to do here is color the background. 

So I’ll add a new layer and set it to color.

Then I’ll select the pen tool, set it to 0% hardness, and literally just start coloring with the color of my choice. 

I usually choose something within the actual gif - believe it or not, I got this blue from using the eyedropper tool to grab the color of his backpack strap. I just selected a color a little less grey on the scale:

So, after coloring around him (avoiding where he moves so he doesn’t get blue skin like that dabadie dabadie video), I get this:

Not bad, but you can see the areas around his head are a little too yellow. So I’ll use a color balance layer to add blue to the midtones and highlights. I might do a smidge to the shadows, but not for this one.

(Notice the color balance layer is beneath the color layer.)

This gives me this:

It’s subtle, but it makes the area around him blend into the colored layer a bit better. EXCEPT, now Scott’s a liiiittle too blue...

I want that color balance layer to apply to everything but his skin... and I’ll do that by applying a layer mask. 

With the color balance layer selected, click the button to create a mask (it’s the one with the lil circle in the middle of the rectangle).

So your layer should look like this:

Click on that second rectangle to select the mask, then use the eraser tool to erase the color balance over only his skin.

That’s how we get the final product of:

It takes some practice and a lot of trial and error. Much of the time, I literally just sit here and fuck around with the sliders until I like how the colors look. It’s definitely not an exact science and will vary greatly between scenes.

But that’s my general, basic process.

1. first when i look for a picture i usually try to find images that have somehow full body shots but you can choose any picture you want. 

for this tutorial i’ll be using this one. i consider this one an easy one to cut out the background, i usually use the pen tool, i made this tutorial many years ago on how i do it. the little different things i do now is i magnify the image to 800%, i cut the image before resizing so even if there’s a few mistakes they wont be noticeable after cropping especially around the hair, also i keep the feather radius to 0! so after cutting the background it’ll look like this. [but you can use any methods you like using]

2. add the background color you like.

i usually try to choose a color that feel calm, for this one i choose this yellowish one. sometimes i choose the color from the background of the original picture, and again i choose it before cropping but you can choose yours after cropping! it’ll look like this.

3. crop your image.

i try to keep the original image centered but you can position it as you like. i crop my icons to 150x150! looks nice so far.

4.add some lights to the background.

 under the image using the same color i add a new layer set it to screen/color dodge/overlay/softlight what ever usually fit with me and i add little color to the side of the lighting of the original image in here it’s in the right! and the layer set to screen!

5. add a texture to the background. [optional] 

if you like to add a little touch to the background which is something i love to do i usually add a texture between the background and the lighting layers and set it to either screen or softlight. or whatever you feel fit! in here i used this texture by @evenstarss​ after cropping and set it to screen and opacity to 50%. and you’re almost done!

6. set the coloring feels to the icon.

before starting coloring i always do this one little step to make the image feels like part of the background and not something that is pasted in it. with black as the front color and the color of your background as the back color use gradient map and lower the opacity to something between 15-20%. this step helps a lot in making it looks smoother. i lowered it here to 16%

7. color your icon.

now you have reached the last step of coloring your icon, you can either go wild or try to keep it as simple and warm as you can. i usually go for the later using very few tools. these are my usual steps the setting usually varies depending in the overall coloring of the icons

a.firstly i use the curves tool to brighten it a bit (sometimes also to add a little bit of contrast) and add little redness to the icon.

b. using color balance to increase the redness: 1, 2:

c. using selective color for more warm feeling 1, 2, 3, 4:

d. vibrant to make it pop more:

e. one final touch i wanted the background to pop up more so under the image layer i add a vibrant layer my layers box usually looks like this. :

--other variation of the icon:

other icons example using the same technique:

I used these stroke settings:

And then I added a pink gradient overlay to the layer to make it match the gif! I also created a layer mask and erased the parts of the border where I wanted the text to be: