#mine: tutorials

2. Then I did a Vibrance layer, this raises the intensity of the colours. However, this layer is almost optional. There are some scenes in my original gif set where this layer doesn’t make a difference due to me using a Gradient Map later on.

3. After that, I adjusted the colours a bit with Selective Colour layers. In this gif set, it mainly achieves to give some areas of the gifs more contrast (the red layer, yellow layer and the black) but also to make the blues pop more (blue and cyan). I like to use several Selective Colouring layers so that I have more control if I need to adjust specific colours/layers later on.

4. Now the most important layer in this colouring is the Gradient Map. When you set up a Gradient Map, you will notice that every colour on the left side of the Gradient will mainly show up on the dark parts of the scene, and the colour on the right will mainly show up on the light parts of the scene. So, since I wanted the orange for example on light areas, I set it to the right. The Gradient Map layer is set to “Multiply”. I love this setting when I want colours to strongly show up on light areas of a scene.

The light/darkness ratio wasn’t the same on every scene of my gif set though; I adjusted the Gradient Map on every gif to make the colours look cohesive in the overall set. Here is an example for the Paul gif:

And Alia:

And thats all about the colouring itself! :)

I have one more important note though, my colouring here is very reliant on the light/contrast of the scenes! So, a very important aspect of this colouring is to use the right scenes. It will simply not look the same on scenes that don’t have a lot of bright parts in them. Here is an example: Irulan is one of my favourite characters so I wanted to include her pretty cape scene, but her scene in the trailer is very dark, so I couldn’t include her :(. An opposite setting to Multiply is “Screen” but not even Screen could emulate the look, so I had to drop her gif.

Multiply

Screen

Chapters:  

There are a few methods but I´ll be quickly going over only two.

easy png method

brush method

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.  png method

Open the image you want to use and choose a ripped paper png, one of the transparent ones, like these ones I made.  

Either drag the png over to the other window, or copy and paste it. Adjust it to the width of your image by pressting ctrl + T or strg + T. 

Once you´re done hit enter.

If your blog has any other color than white, you´d have to adjust the paper stripe to the color of your blog so it blends seamlessly

ii. brush method

find brushes you like, like these ones.

load the brushes you want to use into photoshop (as always google is your friend if you don´t know how to do it) Choose the color you want to use for the paper effect (preferably the one you use on your blog)

add a new layer to your document, and use the brush as big as you need it so it fits the whole width of your image. 

Click once on the new layer as high or low as you want the paper effect to be. And that´s it!

I’m going to break this tutorial into 3 sections: organizing the panels, creating the comic book “look”, and adding the sound effects.

1. Creating the Panel Layout

1. Start by deciding how you want your “layout” to look. These really don’t have to be too fancy: usually I’ll just do rows of 1 or 2 panels, but if you need help getting a rough idea of what a layout might look like here are all my comic book edits. Again, nothing too fancy (unless that’s what you want). 

It’s probably best to plan which gifs are going in which panels in advance but I kind of make it up as a go.

2. Create a new psd and start in video timeline mode. Then using the rectangle tool, draw the rectangles based on your desired layout:

3. Create the gifs you will use for each panel. (Note: It’s important that the # of frames in your gifs are all the same.)  Make sure the gif is in video timeline mode & is converted to a smart object. No need to sharpen yet - we will do that later. These are the four gifs I will be using (one per panel):

The framerate is a little fast right now but that’s ok - I will fix this at the very end.

4. Now, you want to drag your gifs onto the psd.Use a clipping mask (ctrl + alt + G) to attach the gifs to the “panel boxes”. To resize your gifs within the panel you can just use ctrl + t.

So this is where we should now be at:

4. Final step is to add borders. So click on the rectangles, and then click on add layer style -> stroke to add a border. Personally I like the borders a little thicker to make it look more “comic book-y”. So I use a 5px stroke with position set to center:

And this is what our gifs should look like now:

So now we’re done with the setup, and we can move onto styling.

2. Styling the Gifs

1. Start by just applying your usual sharpening settings (I used a surface blur & smart sharpen).

2. After that, add a poster edges filter to the gifs. You can do this by clicking on filter -> filter gallery -> artistic -> poster edges:

These are the settings I used for this gif, but I do tweak them a little depending on the set (I’d recommend playing around with it a little until you find the setting you think works nicest for whatever scene you are giffing):

3. Click on the little arrow next to it and adjust the opacity. I usually like to set it to 50%:

4. Now, to add the halftones click on filter -> pixelate -> color halftone. These are the settings I recommend using: 

5. Click on the little arrow next to the halftones filter and adjust the blending options. I recommend setting opacity to no higher than 50%. You can use overlay, soft light, or darken - again, I usually play around with various setting until I find whatever I think looks nicest. These were my settings for this particular gifset:

So now our psd looks like this:

6. Final step is to add some coloring - I went for a bright & greenish coloring, so this is what I ended up with:

And now the gifs are complete. All that’s left is adding sound effects.

2.1 Save and Reopen (Optional)

A thing I like to do before adding sound effects is to save my gif and then work with the gif as a fresh psd. My photoshop starts to get really slow once I add all these filters. Adding the sound effects requires analyzing every single frame and this is a pain when photoshop is being slow. I find saving my gif and working with that instead makes photoshop much more tolerable so I do recommend these quick steps:

1. Save your gif. this is what it looks like currently:

2. Open your gif in photoshop:

3. Switch to timeline mode & convert to smart object:

4. Save as a new psd, which we will now be working on.

Ok, now onto the sfx!

3. Adding Sound Effects

For the sound effects there are actually two parts here: getting the sound effects and then animating them:

3.1 Getting/Making Sound Effects

First step for adding sound effects is to get the actual png images you will use. I actually got all my sound effects off the a:tla comics. This process is pretty straightforward:

1. Open the online comic book (I recommend comiconlinefree(.)net), find the sound effects you want and take a screenshot (I use snipping tool for this). For this particular gif, I am using the ‘shing’ sound effect from the bottom panel:

2. Open the screenshots in photoshop, and use the pen tool click on each letter, then right click 'layer via copy’. You should now have a separate layer for each letter.

3. Highlight all of the individual letters, right click, and convert them into a smart object. Then add stroke (I used 3px):

You can also use layer style -> color overlay if you want to change the color.

And I repeated the process for the swish sound effect:

Now that we have our sfx, it’s time to add them to the gifs!

3.2 Animating the Sound Effects

Ok, this step is definitely the most tedious. I recommend doing this one panel at a time. So let’s start with the first one.

1. Using the timeline feature, go frame by frame until you’ve decided where you want your sound effect to start. This is the frame I’ve decided I want the sound effect to start on:

2. Now drag the sound effect onto the psd and use transform (ctrl + t) to resize accordingly:

3. Add a layer mask (layer -> layer mask -> reveal all). Using the rectangular maquee tool, draw a rectangle around the panel the sound effect will be in:

Then right click -> select inverse. Now, with your layer mask selected, click on the paint bucket tool. Set the color to black and click on the psd. Unlink the layer mask from the layer by clicking on the link symbol in between them. Your layer mask should now look like this:

This will prevent your sound effects from flowing outside the panel.

4. On the videotime, click on the arrow to the left of where it says ‘Layer 30′. Then click the little clock to the left of ‘Transform’. It should now look like this:

5. Move a couple frames ahead. Click on the diamond by the transform button:

Now, use transform (ctrl + t), to resize/rotate/move your sound effect to where you want it to be in this frame:

6. Move a couple frames forward and repeat:

Continue doing this until your sound effect animation is over.

7. Repeat steps 5 and 6 for the other sound effects you want to add. This is how I animated the ‘swish’ sounds in the 3rd panel:

8. Now our gif should look like this:

9. Final step: save your gif, reopen and adjust the framerate (if necessary). And this is our final product:

And we’re done! Then you can just repeat for every other gif in the gifset!

for the images, i usually just start a new canvas (so instead of opening the image you want to use directly in photoshop, you hit CTRL + N / or go to File -> New) and type the size i need. then drag the main picture in (or if you don't want to save the picture in your computer, you can go on pinterest or wherever you get your pictures from and click right -> copy image -> then back in photoshop hit CTRL + V to paste it).

note: i like the use the highest quality for my pictures, so i get them from pinterest, i usually do a reverse google search (drag the image into google images) and save the one with the highest resolution.

then you can drag it, rotate it, crop it etc. etc. to make sure it fits in the canvas the way you want it to. i suggest saving the picture and then dragging it into photoshop from your folders simply because once you let go of it, if you later decide to change it's dimension it will lose resolution.

for the text we have some options, and i just spent like an hour explaining the hardest one just to realize i could make it so much easier so... lemme re-write this real quick lol

do your text however you want it (font, size, placement etc.) in your "main" panel / first panel.

note: i usually put all my text layers in one folder to make the next step easier if i have more than one line of text.

right now my text / panel looks like this:

and i'm very neat with my layers, but you don't have to be, really. just make sure everything's in one folder.

the next step is one of my most hated... guidelines (and you can skip it, really, you'll see why). make sure you have the ruler visible (CTRL + R).

i know there's more than one way of doing this, but i just... drag them around. this is why it's super helpful to have your text all in one folder, for me at least, because you're gonna "guide" yourself after the corners of your layers (no idea how to explain this better, you'll see in the pictures). so drag two (or more) guidelines in your first panel, around where you want your text to be (you can move them around later, this is just to have an idea of what's gonna happen) (for better precision, hold SHIFT while you draw them). it will look like this:

then with your text folder selected, hit CTRL + T so you get the blue "border" around it. in order for this to work better, make sure each individual text layer is set to Paragraph Text (if it's not, right click it -> convert to paragraph text). you'll have this:

take your blue rectangle and make sure the sides are perfectly aligned with your guidelines. normally they should snap to the guidelines pretty easily, so that shouldn't be hard. if they don't snap perfectly, you can move the rectangle around with your arrow keys once you have it close to where it should be. eventually, it should look like this:

notice how the right side and the top are exactly on the guideline.

now, this is the easy part. go to Image -> Duplicate... and duplicate your current layer. this will create an entirely new panel exactly like the one you just made, with your guidelines in the same place and all your other layers. you can then drag another image instead of the one in your "main" panel. like this:

now, obviously, if you're gonna change the content of your text, it will move around slightly. so take into consideration if your text is different, it's impossible for it to be in the exact same place, so it's up to you later to move it as you please to make it look similar. at least, you'll have it in the same area.

to be fair, you don't really need the guidelines if you do it like this, but i found that it's easier for me to work if i have them... so i thought i'll give you this option as well. this is why i said you can skip the guidelines step.

but let's say you decide to make some simple posters like these:

your text will be exactly the same, the placement will be exactly the same, all you need to do is duplicate your first panel and replace the picture.

as dumb as it might sound, i always go the harder way and do everything manually instead of duplicating my layers, but that's because i'm an idiot.

This colouring tutorial will only use Curves layers (as this is the only layer I use to brighten or darken or add contrast to gifs), and Selective Layers for colouring. Dark scenes don’t do well with being saturated or vibrant because the overall darkness and contrast will make gifs look overly saturated. In my opinion, with dark gifs or gifs overly yellow/green/red/blue etc, it’s best to cancel out the colouring and get the cleanest gif by not making it overly vibrant.

Explanation: My first layer will be a Curves layer to brighten the gif and add white values! By white value, I mean the area on the gif which will have a lightness value of white — meaning it will be completely white. What I will essentially be doing is brightening an area of the gif enough that, if there weren’t any already present, there would now be areas of pure white. 

Action: I do this by going into Layer > Adjustment Layer > Curves. Once I have my curves layer, I select the lightest pipette tool:

Once I have this selected, I click on the area of the gif which I want to be completely white. In this case, I have clicked on a section of the sky which is brightest. Because the area I clicked over was a dim yellow in the original gif, the curves layer will not only brighten to make the value white, but also counteract the yellow tones in it. 

The result is this:

Action: Next, I will do the exact same thing but selecting the black values pipette, on the Curves layer and I will click over an area I want to be made completely black:

Explanation: Wherever I click with this pipette, will be made black and will also cancel out any of the colours in the shadows I click over. So if the area I clicked over was predominantly a dark blue, those blues would be cancelled out and the gif would be made more red.

My next move will be to brighten the gif one more. If you look at this gif (after our two Curves layers), you will notice that the sky/clouds still look predominantly greenish:

So I add another Curves layer:

The result is this, with the gif being much less green/blue and more red.

Action: My next Curves layer is a simple brightening layer.  

Explanation: I always pull from the top corner of the Curves layer, as opposed to in the middle. The reason being is that if you imagine all the values as going down in a straight line, like the Curves line, it means that all the values stay proportionate to each other. The white values will be brightened the most, the deep values will hardly be brightened at all. What this means is that the contrast of your gif will remain the same, even as it is being brightened. If your Curves line instead looked like an arch, pulled up from the middle, your gif would begin to look more flat, as the white values remain untouched, and the mid values are brightened. While this is not a bad look necessarily, or a wrong way to color, it’s not the look I am going for today.

If you look at the gif right now, it’s overall pretty cool-toned. For example, if you look at the clouds you can see they have an overall pretty blue tinge to them:

Even though I hate having yellows and reds in my gifs I want to get rid of the overall coolness of the background. What I am going to do is warm up the background using the Curves layer, to make the clouds more of a true neutral grey, and then cancel out overly red and yellow tones using Selective Layers.

Action: I’m going to select the middle pipette on the Curves layer, which will affect most of the tonal values in the gif, and click around on the gif until I get the effect I want:

Once I’ve done this, the background will be more warm, but unfortunately so will the already warm tones. So while our background may look simply less blue and more red, the red tones in Loki and Thor’s face will be overly red and I will have to cancel them out.

To cancel this out, I will add two Selective Layers. One for the yellow tones, and one for reds. First I will do my Yellow tones:

And then my Reds:

I set both of the layers’ opacity to “Color”.

I brighten the gif once more:

And my result is this so far:

My last adjustment is another Curves layer, this time to add some contrast and darkness. 

Explanation: I drag down only a little bit, and from in the lower mid section of the curve for two reasons. If I dragged from the highest point of the line, I would darken the white values, making them grey instead and flattening out the gif. If I drag from the lowest corner, I will in turn add more black values, which while an easy way to darken a gif, can add more noise. Instead I want to overall darken the middle values of the gif — this will darken the gif without upping the contrast, and instead give the gif a nice gradient of values, meaning the noise won’t be as bad. 

And your end result is this:

And that’s how you get from this to this:

So just a bit of housekeeping before we start: - I’m using Photoshop 2020 (I can send a link if you need one) - I use the KM Player (again I can send a link if you need one) - Try to get your episodes in 1080p or 720p, the higher the better because yay we love quality! (I can help you find links if you need them)

1. Open your Photoshop, KM player and capture folder.

I like to have my KM player open over my capture folder so I can see the screens captures as they happen but that’s just me :’) lol look at all the tiva gifs I’m still spiralling y’all anyway

2. Open the file that you want on the KM player.

Click on the open file option and find the one you want, then press open! Find the scene you want and pause it there (hehe look at happy tiva on their moped wow blissfully happy fools)

3. Setting up your frame extraction. While on your KM player, press “ctrl + G” to open up this dialogue box. These are the settings you are going to want to use (they will stay the same every time you open it so you don’t need to keep changing them every time).

For the extract to box, choose your capture folder that you already have open. Image format, and size to extract, make sure they are on those settings, they are the defaults anyway. Numbers to extract set it to continuously so we can get all those pretty pretty frames. Now your frames to extract, your gifs will look the prettiest if you have it set to capture every frame, you can do every second frame but I wouldn’t recommend it. 

4. Let’s get those frames! The frame extraction box will stay open unless you click the x but seeing as we want it open, let’s keep it :D so we are on the scene that we want (I normally put it back a few seconds so I can start my capture at the point I want my gif to start at) that sentence didn’t make sense but stay with me for this.

Press play on your scene and when it gets to that part that you want to gif, press start on your frame extraction box and you should see the frames coming up in your capture folder (why I like to have it open lol there is a method to my madness). Then when you have reached the end of the part you would like in your gif, just press the stop button and you frames will stop being captured. (Depending on how many frames you are capturing, you might get a delay on your KM player, now this part is important, the frames that it captures are from what you can see on the screen (which will be lagged from the audio that you can hear) so keep capturing the frames you want from what you can see not what you can hear. But this will only happen when you are capturing a lot of frames so it shouldn’t really be a problem, it could just be my KM player who knows.)

I’ve stopped my KM player capture and have got all my frames that I have just captured (yayayay frammmeeesssss)

5. Sorting your frames. Okay so I know we have just gone through a lot to get those frames however there are way too many of them (and some at the end which I definitely don’t need in my gif lol what even is that a computer?? no thanks). For my gifs, I generally have between 30-40 frames. Anything more, to me, feels long and doesn’t...flow? Idk how to explain this one but you get a feel for when your gif should end, but I’ll come to that more later. Anything less than 30 is perfectly fine too, I think the lowest I’ve ever gone is 16/17 but it honestly depends on you and your preferences :)

This part is pretty easy, so I click on the first capture so it opens in a new window. I then scroll through with my arrow key to see how the frames look together, then delete from both ends for the parts I don’t want. This step will help a lot before we put it into Photoshop as the more frames that you load into it, the harder PS has to work, the poor baby :(

Now I’ve only got the frames that I want which will make my gif! (you can delete frames later in PS so don’t worry if you’re an indecisive fool like me who sometimes ends up with 50 and sulks because I want them all but tough Liv you can’t have them all, make a decision for once in your life)

6. Let’s get those delicious looking frames into Photoshop :D

On your PS, go to file > scripts > load files into stack. This should then open this dialogue box.

Go ahead and click that browse button and find your capture folder with all your lovely frames in it.

Select all of them and press okay.

They will pop into your load layers box and just click okay on that one too.

Just give it a few seconds and they will appear in your PS like this (wooooo we’re doing it, we’re really doing it!!!)

7. Frames to layers. When will the technical terms stop, captures to frames to layers WHY PS WHY :’( I’ve actually had to remind myself how to do this step because I have an action that does it for me because I am hella lazy oops

Let’s go ahead and click that lovely looking button that says “create frame animation”. Yours should now look like this with the timeline at the bottom instead. 

If you don’t have that, go to window > timeline. Make sure that it has a tick next to it and it should come up.

Next click on the super sexy little three lines which opens this wonderful options box, and click on the “make frames from layers” option. (ha omg i’ve just realised you can see my action in there which I’m following oooopppppsssssss, I really can’t remember these steps because I haven’t done them in so long ANYWAY)

We’re starting to look like a gif YAYAYAYAY but we’ve still got more to do.

For whatever reason, when we put our frames to layers they are backwards (wtf ps???) but no worries, we can sort it! Get back to those sexy three lines and click on the “reverse frames” option and hopefully we will be in the right order.

If you want to, have a little press of your play button now and your gif should be MOVING AHHHHHHHHHHHH

BUT WE STILL HAVE MORE STEPS TO DO GAAAHHHHHHH (actions people, get yourself some actions!!) I can do a tutorial on those too because wow I forgot how long this all took wow *wipes sweat from brow*

ONWARDS FELLOW GIFFERS.

Those three sexy lines are back again but this times let’s go to the “flatten frames to layers” option.

Over on the right, your frames should look something like this, depending on how many frames you had got. If you scroll down in this section, you can delete all the frames which have you episode names on them by using the little dustbin icon, we only need to keep the ones labelled “frame 1, frame 2, frame 3″ etc.

Scroll back up to the top of that section and click on your highest layer (just leave it highlighted because it’s our top layer and we want to keep that one highlighted so that anything we do to our gif will all be affected) again terrible sentence but just click on the top one. Also, make sure you are on the first frame in the frame animation tab too.

8. Frame delay. So our gif is looking pretty good right now but our delay isn’t.

Let’s click those sexy three lines again (seriously what are they so beautiful for) and click on the “select all frames” option. 

With all your frames now highlighted, click at the bottom of any of the frames where it says “0 sec.”, which opens up the little dialogue box and there are options there for you to choose from but give the “other” a click.

Which should open this lovely looking box! Now, your frame delay is completely up to you and your personal preference. I like to use 0.07 but that is by no means the only option. Anywhere between 0.05 and 0.1 are all fine to use, it really depends on what you like. I would suggest playing around and seeing what feels right for you. Just click okay when you’ve decided.

9. Resize your gif. Tumblr has very specific dimensions that we need to follow otherwise it messes up our gifs.

These are for the width of your gif. The height can be anything you choose. Please make sure you follow them otherwise tumblr will ruin all your hard work. I’m going to use 268px for this tutorial.

Head on over to your image > image size.

And it should open this hella sexy beast of a dialogue box. In this PLEASE make sure the little chain symbol is highlighted because it’s keeps your gif correlated(?) idk it keeps it looking fab.

Pop your 268 into the width box and it should automatically adjust the height box to keep your gif looking correct(?) (I’ve lost all words today but it keeps it looking how we want it to). Then click the okay button.

Your gif will looks like it’s “shrunk” and it has because we have changed the size to a smaller one, but just press “ctrl and the + symbol” on your keyboard to zoom it back in. (ctrl and the - symbol zooms back out)

The gif has a nice “feel” to it, it flows well so I’m keeping all the frames I used before. You can delete frames as necessary.

NOW OUR GIF IS THE RIGHT SIZE SO LET’S SAVE THAT BAD BOY WOOOOOOO!!!!

10. Save your psd file. 

Go to your file > save as, then choose your folder to save your file in. You can name it whatever you want to, I normally just go with 1, 2, 3, 4 etc because I’m basic and lazy but everything is neatly in their own folders lolol

Your psd file should be sitting nicely in your folder now.

11. Save for web. We’ve got our psd file, so now we need our gif file.

Head on up to your file > export > save for web.

And this sexy beast of a dialogue box should open. These are the settings I use, and I know there are other options out there but these are the ones that work for me at the moment. 

A few things to point out here: - Perceptual and pattern. I like these so that’s what I use but there are other tutorials out there which use others so shop around to see what is best for you. - Leave your colours as 256. - Make sure your looping options are set to forever because we don’t want our gif to stop playing at any point.

This bit here. Tumblr has a limit on gifs of 5M. This gif is just under 1M so we are completely fine to use it. If your gif is over 5M then it won’t play when it’s uploaded. If you make a gif over 5M, take some frames out and it should bring the size down. Only 540px gifs should be reaching towards the 5M, our 268px gif shouldn’t get close to it.

Then click your save button and it should open yet another dialogue box. Find your folder with your psd file in it and save it in there because we like to be organised ;D

Adobe Photoshop Tutorial: The Basics for Beginners [YouTube Link]

Adobe Photoshop Tutorial: The Basics for Beginners [YouTube Link]

How to Turn a Video into a GIF in Adobe Photoshop [YouTube Link]

Tips on how to make HQ gifs [Tumblr Link]

More Gif Tutorials and Resources on: @itsphotoshop

Now, my tumblr header is fairly simple since I only threw in images I found on google and on deviant art together until I was happy with it like so:

All these photos I found online and some of them already have a transparent background so it wasn’t hard to just put them all together. Make sure the images you find are all in HD or else it would look blurry and pixelized if not. It would take so long to explain it one by one hence why I recommend knowing the basics on how to use and edit in photoshop. But if you already know how to use photoshop then this wouldn’t be too hard to understand.

Once I am happy with how it looks, I then select all the layers (click a layer then ctrl+alt+A) and then group them (ctrl+G) and then convert to smart object (right click and you’ll find it):

so it would become one and it would be easy for me to add filters where in this case I used smart sharpen & camera raw filter.

After adding my filters I then go to the timeline and add a gif overlay where in this case is a snow and just out it on top of the image as you can see in the red arrow lol. Next, I just added an empty layer and then a border using the brush tool which is like an ice freeze kinda effect. anyway, I found the brush on brusheezy and just played around with it. I then just did the save for web legacy (Ctrl+Alt+Shift+S) and saved my gif.

For the YouTube gif:

Here’s the template i made for it. it’s just a bunch of gifs & photos on top of each other. the loading & click file you see are both gifs i found on google, just search up youtube loading gif or mouse cursor click gif and it will show up. the bottom you see is a screencap of the youtube black screen you see when a video loads. i just set the opacity to 50% so it looks transparent. as for combining them together here’s are some better tutorials on how to do that:

Adding a GIF to an Image in Photoshop [YouTube Link]

Animation on Photoshop [YouTube Link]

mine is slightly different because i’m using the video timeline instead of the frame animation one but all you have to do is open the gif in Photoshop select all the layers, group them and then convert frame animation to video timeline 

then I drag the group to youtube header aka the template I made to just add the gif and a screenshot of that gif under the template. you arrange them like so and viola you get this:

i then just added a fade transition on the youtube template screen where the screenshot ends. and that’s about it.