Hyperlinks through this page for your quick-reference needs <3

None of this stuff is really written to be read sequentially, just jump around to what you want to read!
And much more to come!!!


tldr; I am going to slowly be adding various blog posts about different glitch-art techniques and visual effects here!

video credit to eerroneouss on instagram

While Im not much of a tutorial-maker, hopefully I can compile some of the tricks I use into some byte-sized snipits of info you all could use to get into glitchart. Considering the limited time I have to create glitchart and edits myself now, I really want to inspire people to create their own works. I have been surprised by the amount of questions and requests I've received regarding different techniques/tutorials. And I wouldn't be lying if I was also using this page as a personal diary of all the things I learned. I started making glitchart with nothing beyond a copy of photoshop and audacity and an ancient online sonification tutorial. Slowly I built up what I know soley by experimenting over the course of a few years. I don't exactly want to forget what I've learned either - a lot of these techniques are a weird combination of tricks that I stumbled upon by complete accident. That's the joy of glitchart though, it should be accidental! That being said, I hope these techniques assist your process or help with some stylization but I strongly encourage you to experiment and most importantly, have fun!
A lot of this stuff is gonna be pretty trivial but I don't want there to be any barrier to entry with this medium, I hope you all find it helpful!

Also, if you have any questions / think I did a shit job writing parts of this feel free to message me on discord or instagram (@omnidisplay for both) <3.



Before we dive into individual techniques, it's important to learn how to utilize your glitched assets to create stylized and coherent final pieces. While you're welcome to just glitch shit and call it a day, I personally work to highlight the interesting parts of a glitch while hiding the more grating and unpleasant artifacts. A lot of this is just basic image editing skills, but I think it'll be relevant to demonstrate what I often do to turn a fwuarked original into a polished work.

Now, a lot of these tricks and techniques are going to be very biased - this is going off a style I've personally developed over time, don't take these as hard rules for glitchart (there are no rules when it comes to glitchart) but rather little recommendations of ways in which you can improve the clarity of your work.

Everything that I'm going to mention here will (if applicable) have information for both Photoshop and GIMP. While I mainly use Photoshop for all my work, I still have massive respect for GIMP and believe that glitchart shouldn't be gate-kept behind any software. Hell, you could patch things up in MS paint for all I care!


Probably one of the most distinctly recognizable final touches of my personal styles, dithering is responsible for that classic "pixel art" look of images. In short, dithering is a computers way of forming gradients with limited colours - it'll create the illusion of unique shades with patterns akin to that texture in newspaper prints (although that's called half toning, but it's a similar idea!). As old computers had limited colour palettes, dithering was often used in pixel art to add shading and depth to images - contributing to that now classic look.

The kind of dithering we're going to focus on is ordered dithering, more specifically, Bayer Matrix dithering. This type of dithering has a much sharper pixel-perfect aesthetic that pairs especially well with animations (which we'll get to). If you want to see the difference between dithering algorithms, wikipedia has a wonderful visual summary

Before we begin, do note that I purposefully work in low resolutions, 540x540 or smaller, as to maintain a pixel-arty low-fidelity look to my images. I do not scale my works until the very end! Because of this, the dithering is significantly more noticeable. If you're following these steps and can barely notice the dithering patterns unless you zoom in super close, you're working with too big of an image!


For this demonstration, I'm going to be working with this simple rose image I stole off google.

To start, select Image > Mode > Indexed Color and click ok on "flatten layers". You should see a popup set of options like the one pictured below;

From here, make sure to set dither to "Pattern", this corresponds to the Bayer dithering mentioned above. Cycle through the local/master palette modes to your taste, they all have a slightly different way of picking colours. Lastly, you can enter a number of colours you want to restrict the palette to - play around with this until you get the desired clarity vs retro balance you want. As a tip, you can also press the up/down arrows while the colours textbox is highlighted to bump the value up and down one.

Look at that cool dithered rose!
Now you'll notice that photoshop doesn't let you do anything with this dithered image, all the tools are grayed out! We need to convert it back to RGB before we can do anything.
Also, if you want to bring the dithered image back into your original project, click the little lock on the dithered layer, copy it and spam control Z to get back to your pre-dither state and paste the layer back in.

A trick I'll often do to enforce flatter colours with dithering with just on shaded areas is to run the dithered image through a second dithering pass. This second pass will have less colours and dithering turned off. Doing this averages the dithered pattern colours to other existing ones - creating solid blocks of colour.

Lastly, let's talk custom palettes. You can enforce a custom colour palette by selecting "custom" in the palette dropdown. From here you can click on individual tiles to pick the colours to compose this palette. You can also export/load palettes from this!

If you're struggling for to find inspiration for your own palettes, try websites like!
Additionally, I made a set of palettes to use with the stardust gallery, you're welcome to download and use them;

Omni's "moonlight" colour palette ACT file downloads: Basic Extended 256 Colour

Here's what our rose looks like with the moonlight palette loaded;


Dithering in GIMP is extremely similar to photoshop, you also simply go Image > Mode > Indexed. Then, set the Color dithering mode to "Positioned" for the Bayer-Matrix style dither. Then, play with the number of colours / custom palettes!

Then, in order to start working with filters again, change the image mode back to RGB.

GIMPs dithering has one major difference from Photoshop - GIMP doesn't merge the layers. This is a double-edged sword - while it dithers and preserves every layer individually, it also samples every layer for the colour palette (instead of the composite image). This means that you can get some really awful colours for your dithered image, caused by other (often unseen) layers. For example, this is how GIMP will dither this lain image (the one I'll be using as an example in the next section);
To remedy this, duplicate your project with Ctrl+D, click an empty space in the layers box and select "New From Visible". Then, delete every layer except for the newly created composite one. Dither and copy this layer into your original project.

Doing this will instead make GIMP dither the image above to look much more consistent;

For the remaining stylization tricks, I'm going to be working with this photoshop file, feel free to download and play around with it.


Check out this cool glitched image of Lain! Seems a bit harsh though, right?
One trick we can use to restore some coherence to our glitched image is blending it with the source material. Pasting in our original lain image and using the blend modes on the top of the layers stack let's us mix the two images together in interesting ways.

In all honesty, I know nothing about how each blend mode actually works - so I just encourage you to cycle through them until you achieve a blend that looks good!

With our original image "hard light" blended into our glitched version, we now have a clearer image;
But nothing is stopping us from using blend modes like "subtract" to create stranger results!


Our image, even after blending, still has a ton of noise and unwanted artifacts. Especially the background! We want to focus on glitching Lain and it would be a pain to paint out that entire background. However, one thing that is handy (that comes with this asset and style) is that backgrounds and unwanted artifacts are often much darker than the main image. We can utilize this contrast with the levels adjuster, cranking up the shadows end of levels will average out those darker pixels into a solid matte-black background - removing the noise and better highlighting our glitched Lain image.

Photoshop has the advantage of adjustment layers, a type of layer that will apply to the visible composite of everything below it. One of these adjustment layers being for levels. You can add it by clicking the little semicircles icon on the bottom of the layer stack and selecting "levels". From here, drag the leftmost arrow on the histogram towards the center - notice how shadows in the image average out and become black.
You can also post the rightmose white slider over to average out highlights into pure white.
To (destructively) apply levels to an individual layer you can go to Image > Adjustments > Levels
Just upping the shadows with levels a little bit instantly cleared out the weird noise in the background. This is especially helpful if you end up dithering your image, PS/GIMP will try to preserve the "detail" of this noise all the same, which can lead to some pretty ugly dither texture on your image. Worse still is that this texture is no longer darker than everything else - making it a real eyesore!
Dithered, without levels
Dithered, with levels

Unfortunately, GIMP doesn't have adjustment layers. In order to achieve a similar effect, we'll have to do a little work-around. Similar to what we did for dithering a composite image, we need to click in the layers box and select "New From Visible". From here, go to Colors > Levels. The popup levels adjuster is very similar to photoshop, just pull the leftmost black arrow towards the center. This levels effect will apply to just the composite image layer you just made, meaning that you'll have to redo this process if you change anything about your pre-levels image.
GIMP does have the cool advantage that you can use levels while in the "Indexed"/Dithered image mode - and it'll snap the shadow levels to your palette.


Now we have a cool piece going, but I'm not exactly a fan of the turd-brown colourscheme we have. We could of-course use a custom palette for our dithering, but that doesn't give us a ton of interactive control of colourizing our image in an interesting way. Instead, gradient-maps are a great method of colouring our image! As you could imagine from the name, gradient maps map different brightness levels of an image to a gradient. Photoshop gives a ton of control over the gradient we're mapping to with its gradient-editor, allowing us to completely change the look of our image.

Similar to levels, a gradient map can be applied as an adjustment layer in Photoshop. From here, double-click on the gradient rectangle in the properties tab to open the gradient editor. By default, (usually a b/w 2-colour gradient) the leftmost end is mapped to black and the rightmost to white. Double-clicking the little coloured boxes under the gradient will allow you to change the colours. Clicking under the bar anywhere else will add a new marker for another colour.
double click the gradient here :^)
You can be boring and just add a black to single colour gradient for just a monochromatic look.
Or you can get quite creative. Notice my sudden jump to black in the middle of the gradient, this is done to map the midtones used for Lain's eyes to a darker colour and make them stand out.
GIMP is capable of applying gradient maps as a filter, but I suck at it sorry :^). Here's their documentation on their gradient stuff xd


All this looks cool but still feels a bit... flat. After all this cleanup and colour mapping it still just feels like picture of lain with a glitchy image over it. We want her to feel glitchy, she needs some texture herself! A great way of achieving some glitching distortions is with a displacement map. To add a displacement map in PS, go to Filter > Distort > Displace and then select a photoshop file to use as the map, whatever the current composite image from the file is will be the contents of the displacement map, images with a lot of contrast will result in harsher distortions.
Here is the result of me displacing to a random other project file I had.
Wow! That looks cool but feels a bit random (because it is). If you want the distortions to feel more like they're associated with your glitched base, use that glitched base as the map!
For a moment lets hide our blended lain image to reveal that glitchy goodness underneath, keeping all the filters on to maintain lots of contrast.

Save our project in this state, and then unhide our lain image. Dont save again, we want to use the fwarked project preview as our displacement map! Now, we can apply a displacement map to our lain overlay - using this project as the map file.
This will result in a distorted Lain that feels properly glitched by the surrounding moshed texture with little blocks coming off her shoulders that match the surrounding texture.
Now that's starting to look great!
Lastly, let's throw some dithering on it to bring this whole project together; One thing to be wary of when dithering is sometimes you're not getting pure blacks, notice the slight red hue of the bg here. This can be fixed by enabling "force black/white" in the PS dither controls or by adding levels after dithering.

Displacement maps are actually nicer to work with in GIMP, giving you interactive controls of the intensity and source images. To apply a displacement map in GIMP, go to Filters > Map > Dispace, select the layer you want to displace by in for Aux1/2 input and play around with the intensity sliders. The Aux input can be from any open file, so if you want to displace by something other than a layer in your current project, open the image in a new project tab and it'll show up as an option.


Recall at the very start I mentioned that I work in 540x540p and scale up to 1080x1080 as my last step. We want this scale to remain pixel-perfect, meaning no blurring or aliasing that would break the retro feel. To do this, I use "Export as" (under File). From here, we can tell Photoshop to scale the final result up 200% (or more). From here you also need to set the resample mode to nearest neighbor, this integral to preventing any blurring or aliasing. Also, make sure you're only doing whole number scales (no 150%'s) - otherwise you'll get weird distortions from only parts of the images being stretched.

In GIMP, go to Image > Scale Image, set the image to your desired scale (remember whole number scales only, you might have to use a calculator) and set interpolation to none, which does the same thing as Nearest Neighbor in PS.

Well, that was a lot of information! Remember, this isn't a ruleset for how you should edit your glitchart, just some tips for stylization under the framework of how I make my edits. Hopefully some part of this was helpful and have fun!

Here is the final product, I ended up preferring the original image more than the displaced one (but it did make a good example);



Using animation is a great way to make a glitch feel lively and dynamic, and it just looks plain cool! A lot of the same principles mentioned above still apply to animations, you can blend with the source material, apply filters etc - so I encourage you to read the fundamentals writing first if you haven't already.

As some simple ways you can create the basis for a basic animation, you can apply glitches to a series of frames or a video, you can repeat a glitch with different parameters/intensities to give movement to the glich, or, if your glitch has a degree of random/noise to it, you can just repeat it as-is. Also, you totally can do a combination of these things!

Here are some examples of old pieces I've made with these different bases;
Variation of intensity to make the glitch feel like it was stretching out. I also utilized the random noise of this effect and made a couple frames at max intensity to give the illusion of movement from the lines changing about.
Simply utilizing random variation in the glitch to acheive that staticy vibe :)

I'll eventually write another article going into depth with the actual techniques I use to make my animations, especially as I mainly use AE now for most of them. So stay tuned <3.

Well, these tricks for making frames don't mean anything until you actually know how to compile your glitched frames into a cool gif! Thats what the majority of this section is going to be about, getting stuff and imported and exported through PS/GIMP in a way that you'll have good looking gifs.


Alright, I have a bunch of cool glitched frames from a scene in SEL, now I want to stitch them together to create a sweet animation.
In other words, I want to get from this...
to this...


Before any of this, make sure you have the "timeline" window open!

To turn our folder of images into a frame-by-frame animation in photoshop you...

Go to File > Scripts > Load Files into Stack and select your files (shift click/drag select)...

In the timeline window, click "Create Frame Animation" (this may be the default button, otherwise click the arrow). Once the timeline is created, click the 3 lines on the far left side of the timeline editor and select "Make Frames From Layers"

You should now have a nice timeline like this;
A couple things to note

Photoshop is also capable of importing videos!

Just use open with!!!
With this, Photoshop will instead use the "video timeline", which acts somewhat like a rudamentary Premeire Pro (or any video editor really) timeline. Adding other layers (other videos, images, adjustment layers) will show up as a layer on the timeline too. You can adjust when it's visible by dragging the borders of the layer in the timeline editor.
This timeline also has basic keyframing tech, but that's something we'll have to touch on later!

In all honesty this is what I mainly do now, I mosh videos or work in AE to get my glitches, and import them into photoshop for some final touches.

Importing in GIMP

Go to File > Open As Layers and select the your files (shift click).
That's it! GIMP handles animations very differently (and a lot simpler) than photoshop, every single layer is a frame. You have no control over whats visible on each frame, GIMP simply goes up each layer on succession and makes them visible.
A majority of the control of how the GIF is render will come from the export params, which leads us to...


If you plan on working with gifs, dithering is inevitable. Gifs only support a maximum of 256 colours, meaning that dithering is often used when creating them. But the typical dithering for GIFs is ugly! The GIFs you find on giphy and tenor typically use noisy dithering algorithms like Floyd-steinberg which is why they often look fuzzy. So once again, we're going to focus on using that nice and clean bayer matrix dithering for our exporting.

I'm only going to talk about how to export and some of the quirks of each interface, I strongly recommend you read the dithering section of this guide if you haven't already.

Exporting GIFs in Photoshop

Everything we need to dither and export our gif is in the "Save for Web" dialogue. Navigate to File > Export > Save For Web (Legacy) to open it. From here you should see a window like the one below;
To get that nice bayer matrix dither, set the dither mode to "Positioned" from the 2nd dropdown. Similar to the dithering controls for still images, you can also change the method in which photoshop picks the colours from the first dropdown (play around with this to get your favourite!) and the number of colours to dither by is controlled from the colors dropdown.

The colour table section is extremely similar to the static dithering menu, you can click on colours to edit the palette. Additionally, you can click the 3 lines to import a custom palette.

Exporting GIFs in GIMP

To enforce our own dithering scheme for GIFs exported from GIMP, we have to dither beforehand, in the exact same fashion that you dither still images. Navigate to Image > Mode > Indexed... and dither how you'd like.
After dithering, go to File > Export As... and in the export dialogue, change the file ending to .gif.

After this, GIMP will provide you with the GIF export dialogue, make sure to check "As Animation" and play with the parameters below.

Frame disposal 99% of the time should be replace (one frame per layer), this will make every frame assigned to one layer and one layer only. Combine will progressively stack layers for every frame, if you have a gif with transparency this will result in being able to see old frames below the current one.
With Replacement
With Combine

And that's it! Now you have a cool dithered gif of your glitchart! If you want to get from this back to a video, make sure to reference these ffmpeg commands I also have posted.


Compiled below are assorted commands I often use for making my works and converting them into nice post-friendly formats

ffmpeg, imagemagick and other cli tools are absolutely your friend when it comes to this medium. You shouldn't expect nice GUI programs to nicely handle and convert files in the ways you need for glitchart, especially when it comes to preserving pixel-perfect videos!


Note that I'm assuming that you already have ffmpeg installed and ready to go. All of these commands work the same regardless of the OS you're using

A ton of the work I do is in gif form originally, so I need a nice way to convert from gifs to video while preserving crisp-pixels!

Lets start with the basic, ol' reliable command and break it down;

ffmpeg -i input.gif -pix_fmt yuv420p -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" -sws_flags neighbor -b:v 50M output.mp4
We can ignore the -pix_fmt yuv420p junk, thats just for the mp4 encoding. What matters here is the -vf, -b:v and -sws arguments. The weird /2 then *2 truncate for the scale factor clips off weird pixels and generally makes ffmpeg happier to convert. Second, the -b:v __M argument is specifying the bitrate we want to export at, a higher number means better quality at the expense of a larger file-size. Lastly, -sws_flags neighbor tells ffmpeg to maintain pixel-perfect clarity, meaning no aliasing or blurring of the pixels.

The effect of -sws_flags neighbor isn't particularly noticeable now, but it will be if we scale the gif. I usually make my gifs in 540x540p, and scale them to 1080x1080p for instagram videos, and I need that scale to simply double-up the pixels and not lead to any weird blurring. We can slightly modify the command above to get that *2 scaling, just remove the /2!
And ofc you can also do *3+ instead if you're working even smaller!

ffmpeg -i input.gif -pix_fmt yuv420p -vf "scale=trunc(iw)*2:trunc(ih)*2" -sws_flags neighbor -b:v 50M output.mp4
The difference can be very slight, but I promise adding the neighbor flag helps greatly with preserving a pixel-artly or harshly digital look. Here's a comparison of two videos with and without the neighbor flag, can you spot the difference?
If our gif has transparency, ffmpeg will automatically fill in the alpha with white. If we want to preserve transparency to layer things together, we have to use a different video format - in particular quicktime. Quicktime has the advantage of supporting an alpha channel, disadvantage being .mov files are fucking massive - nearly double the file size compared to mp4 (with the same convert params). So make sure to clean up your test-renders when you're done with them :)

ffmpeg -i base.gif -c:v qtrle -pix_fmt argb -b:v 50M -vf "scale=trunc(iw)*2:trunc(ih)*2" -sws_flags neighbor
Again, most of this can be ignored as just encoding garbage. But do take particular note of the -pix_fmt argb flag; the a in argb is telling ffmpeg to add an alpha channel to the output!

One last misc ffmpeg trick...

If you want to pull all of the frames out of a video, you can use this command;

ffmpeg -i *.mp4 -qscale:v 2 output_%03d.jpg
This is very helpful if you have a technique for images but want to animate it, or if you want to make a gif from a video clip. (tip: you can use GIMPs "import as layers" and shift click to get every frame batch loaded)


Again assuming you already have imagemagick installed

While a ton of these tricks can be done just in PS/GIMP etc, they can be helpful in a pinch or for batch-image manipulation. Also, as I am far from an expert, I'd recommend you read the ImageMagick docs to learn about this powerful tool. But here are some commands I occasionally use!

ImageMagick Dither Image or Gif

convert -colorspace gray -ordered-dither o8x8 input.png output.png

convert -colorspace gray -ordered-dither o8x8 input.gif output.gif

This command is what I call "ping-ponging" a gif, it will stitch a reversed version of a gif on it's end - causing the animation to bounce back to the starting frame. This is super helpful for lazy loops.

convert input.gif -coalesce -duplicate 1,-2-1 -loop 0 pong.gif

Without the "pong" effect;

With the "pong" effect;

If you want to convert the frames you just extracted into a gif, you can use ImageMagick for that too. Although, I don't usually recommend this method as it gives you far less control over how the gif is made.
Also note that (for some reason) many image previewers dislike how these gifs come out and may render them weirdly.

convert -delay 1 -loop 0 *.png output.gif
The *.png is targetting all pngs in the folder you're currently in, so make sure to cd into the right spot. This ofc also means that you can change that file ending to match with other formats!

You can also add dithering during this process...

convert -colorspace gray -ordered-dither o8x8 -delay 1 -loop 0 *.png output.gif

If you have a gif with transparency, you can use this command to quickly add a background colour. Just replace #000000 with whatever colour hex code you want.
Note that this is designed for fish-shell, this may require some tweaking for bash, powershell etc.

for f in *.png
  convert -colorspace gray -flatten -background "#000000" -ordered-dither o8x8 $f $f


This command is designed for powershell, if you're sonificating a series of images and want to batch-convert them to png, you can use this command. (post on sonification to be written soon maybe)

Get-ChildItem *.raw | Rename-Item -NewName { $_.Name -replace '\.raw$','.tiff'}
# then you can run...
convert *.tiff %03d.png