#glitch effect tutorial

note: credit to this tutorial which was very helpful when i was making the set but i didn't feel it explained how to do the b&w gif and that's what took me a while to figure out, so if anything on this tutorial isn't clear, that one should also help. this will be slightly different because in my set i made it so the glitch faded into each other and i've added my own flare to it but the basic technique is the same.

create 2 gifs the same size, you can add whatever colouring, sharpening etc you like, one in colour, one in b&w (you can do 2 in colour but for the purpose of this i'm doing one b&w to show how to do both versions).

i'm going to do the b&w gif fading into the colour gif on this tutorial (bc that's just what i started editing first) but obviously if you're making a full set decide which gif you want to fade into which because the first part of the gif will have the glitch effect on the end and the second will have it at the beginning so it will matter for the final outcome of your set

PART 1 - B&W GIF

if you edit in frame animation, you must convert your b&w gif to the video animation timeline otherwise the colours will not show up on the glitch effect. you can do this by clicking the lines menu above the frames

i usually colour in frame animation because it plays quicker to preview how it will look and then convert to video to add my sharpening at the end but it's personal preference how you create your gifs.

hold control + select all of your frames > right click > convert to smart object

all of your frames, colouring etc should all be in one frame now, select it > click the lines menu above the animation timeline again > convert frames > flatten frames into clips

you should now have a longer list of layers that make up each frame of your gif

this is because we need to convert back to frame animation to edit the glitch effect onto individual frames. if you don't flatten the frames to clips the gif will not play when it's converted because 1 layer will equal only 1 frame. it may seem long winded to go back and forth but it makes sure all your colouring is already included in the frames when you make it glitch. if you add the colouring afterwards it will change the colour of the glitch effect or turn it black and white and it won't be very visible (if anyone has an easier way i'm very happy for suggestions, i was just figuring this out as i went and found the glitch didn't work on the b&w gif any other way for me!!)

now we go back to the 3 lines menu > convert frames > convert to frame animation

if you get this pop up, press continue. it's fine because we have each of our frames in their own layers now

your frame animation timeline will initially load with just one frame

go to the lines menu again > make frames from layers

now all of the frames will load, but they will be at 0 seconds (except the first frame) and we need to make them all run at a playable speed, so go back to that same lines menu above the timeline > select all frames > select under any frame where it says 0 sec. > other > i usually put in 0.05 but do whatever works for you

PART 2 - ADDING THE GLITCH EFFECT

pick a frame about 5 from the end, select it and select the corresponding layer with the eye icon next to it to show it's the one visible

right click > duplicate layer (or just press control + J)

then on the copy of the layer right click > blending options (or double click)

in the advanced blending section, untick R > ok

make sure the move tool is selected

now using the arrow keys on your keyboard move that layer either left or right as many notches as you like (i've started out with 10 here)

hold control > select both the visible layers

right click > merge layers

now move onto the next frame and corresponding layer and repeat the same process (i have no idea why my ps decided frame 46 doesn't exist so ignore that dkjddj)

if the frame(s) below is still visible, just click the eye to hide it so only the one you're working on and it's copy layer are showing

this time i've moved the layer 6 notches to the right as below

keep going until you get to the end of the animation. you can move each layer as much as you like either side just play around with your gif and do whatever you think looks good! if you want to do more than the last 5 frames or less than them, do that too! just remember that we are also going to put a glitch on the coloured gif then combine them, so the final glitch effect will be longer

when you're done, you might have to go back to the first frame on your animation and hide all of the layers you've just edited because on mine they all visible so the gif won't play

then go back to the end of the gif and make the right layer visible on the right frame again (hopefully this makes sense)

so far, the gif should play something like this

to make it smoother i picked a few frames earlier in the gif, before the start of the glitch at the end to add the same effect to the first frame i edited was number 32 (layer 'frame 45'), so i'm going to add it to frames 25 and 26 as well

then i selected the last frame and layer > filter (at the top of the screen) > blur > motion blur

then pick another frame and corresponding layer > filter > noise > add noise

do this to a couple of frames of your choice with the glitch effect on too, it makes it a little more grunge-y which i think fits with the concept that it's supposed to be glitching/broken

now it looks like this, subtle but in my opinion notably smoother

go to the left side of the screen under the frame timeline and click the convert to video timeline button

once i've converted it back to the video timeline, i like to select all of my layers again > right click > group from layers (or select all and control + g). i'm going to rename this b&w so it doesn't get confusing later

STEP ONE: PREPPING

First of all, you’re going to make your two gifs with whatever coloring and sharpening etc. you usually use. I like to use this effect when I’m transitioning to a sad gif so I make one gif black and white. You also need to make sure you don’t use too many frames per gif because you’re going to be combining them in the end. The caps I’m using here are 20 frames each so when put together it’s a total of 40. I use anywhere between 20-30 depending on the scene. Here I’ll be using these two gifs I’ve made:

Now that you’ve made your gorgeous gifs, you’re going to convert to frame animation so your workspace should look like this:

STEP TWO: DUPLICATE

The first thing you’re going to do now that you’re ready to get to work is select the frame and corresponding layer that you want to make the glitch effect on. I like to use four frames for the glitch effect myself so here I’ll start with frame 17. NOTE: Make sure to pick frames at the end of the gifs you’re using so that it flows well!

You’ll know what layer corresponds with the frame you’re working on based on the little eye icon.

Once you’ve chosen the frame and layer you want to start on, you will right click on the layer and choose duplicate layer.

This window will then pop up and all you will have to do is click ok.

The result will be that you now have two layers with the eye icon!

STEP THREE: GLITCH EFFECT

If you’re still with me, congrats, you’ve reach the part of the tutorial you’re actually interested in! So, now that you have your duplicate layer, you will right click on that layer and select blending options. The layer style window will then pop up.

The only thing you need to care about here is the advanced blending section. Here, you will go to the channels area and untick the R box.

Your preview will now be a turquoise color instead of grey.

Now here’s where the party starts. Once you’ve done the above, click ok and you’re now free to move the duplicate layer however you want! I like to go for subtle so I usually move the frames slightly to the right and left. However, feel free to get dramatic with it and explore how you want the gif to glitch. My layer here has been moved to the right.

STEP FOUR: MERGING LAYERS

Now that you’ve successfully made your first glitch effect frame to your satisfaction, you’re going to merge the layers so that there is no duplicate layer anymore. Right click on the duplicate layer and choose merge down. Voila, you have only one layer for your frame again!

STEP FIVE: ADD NOISE (OPTIONAL)

This step is optional, and not necessary tbh if you don’t want to do it, but I like it for aesthetic reasons. With the layer you just merged still chosen, go to filter > noise > add noise.

Pick how much noise you want to add and press ok. I usually just add 5% noise.

STEP SIX: RINSE AND REPEAT

Once you’ve done everything above, you’ll repeat steps two through five with all the frames you want to use for the glitch effect. Do this with the second gif you made as well! TADAH you have achieved the glitch effect of your dreams!

STEP SEVEN: THE FINALE

If you’ve made it with me this far, congratulations and get those notes babyyy! The last thing you have to do now is just put it alllll together. Ok so now you’re going to convert your gifs back to video timeline and convert the layers into a smart object. I know most of us know how to do this, but for those that are just beginning to get the hang of photoshop here is what you do. Click on the convert to video timeline button on the bottom left corner circled here.

You will now select all of the layers and right click on them and click on convert to smart object. 

Boom, one smart object coming right up.

Repeat this with the second gif and once both of the gifs have been converted to smart objects, drag one of them over to the other gif and adjust it so that it is aligned with the canvas. Your timeline will now show your gifs stacked one on top of the other.

You’re going to drag the top clip over to the right until it starts at the end of the first clip. 

You have successfully made your complete glitch gif. From here, you will convert back to frames (I use an action to do this) and adjust the timing of the gifs to .05. Save your gifs and congratulations, you’re DONE.

If you’re still reading, thank you for taking the time to read and/or follow this tutorial. If you would like a video tutorial, I would be willing to make one if enough people feel like they need it. I’ve already shown how to make this on video chat in discord so doing it again won’t be a problem lol. 

Please feel free to tag me in your creations made using this tutorial with my tracking tag #tuserdi. I would also appreciate it greatly if you shared this tutorial by reblogging it so that others may find it and learn as well!

1. Choose your two images! For this gif, I used a random foggy forest photo, and one of a person on a dock!

2. Make your canvas---the best width for gifs on tumblr I’ve found tends to be 540 pixels! Copy and paste in your images onto two separate layers and resize them as you’d like.

3. Since this simpler version only uses two transition glitch frames (one of them repeated), duplicate each of these image layers twice, so you end up having three identical layers for both images.

On one of your duplicated layers, select all of the image [ctrl+a].

4. Here’s the fun part: find the “Channels” tab (usually on the “Layers” window, or find it under the “Window” tab and activate it), click it. Now, highlight only the “Red” channel.

Should look something like that, and be black and white when you look at your canvas.

5. Nudge your selected layer to the left or right a bit. I usually use the [ctrl+shift+left or right arrow keys] command to do this. Make all of the channels visible again to see your creation!

6. Repeat the previous step with all of the duplicated layers (not the layers with the base images), nudging the channels in different directions and different amounts to give a variety!

7. To get those off kilter rectangles, use the “Rectangular Marquee Tool” (which I just call the rectangle select tool) and select a random horizontal rectangle on one of your duplicated layers. Nudge those rectangles to the left or right like you did in step 5. Repeat this step a bunch all over your canvas to get something like the mess below!

8. That looks like a terrible mess. Awesome. Do this same thing to all of your duplicated layers, again varying what directions and amounts of movement you do!

9. ANIMATION TIME. Bring up the “Timeline” window (or “Animation”, or whatever it’s called in your program). “Create Frame Animation”. Make it so you have eight frames to work with by clicking that little square with the folded corner button.

10. Change the times to what I have above if you want to match my gif’s timing, with 3 seconds for the base frames. and 0.08 seconds for the transition glitch frames. Feel free to change this up!

11. Select the second frame, and make your first glitchy layer visible (keeping the base image layer visible to fill in the transparent spots). Do this on your fourth frame, too. On the third frame, make this glitchy layer invisible and make your second glitchy layer visible. Repeat this for your second image and the 5th, 6th and 8th, and 7th frames in that order.

That was confusing. Does the image help? (Ignore my terrible handwriting, I’m doing this with a mouse.)

12. Under “File” find “Save for Web...” and save it! Now you should be able to upload your finished gif to Tumblr using the “Upload Photos” or “Insert Photo” options~