I’ve shared a bunch of glitch-art posts on this blog, including this recent list of iOS glitch apps, so I thought it would be cool to share a little tutorial on how to create your own glitch art using an incorrect editor technique. For a lot of us, glitch-art is something we create with the help of an app, so I think it’s a good idea to give this technique a shot to get a better idea of what’s really happening to your work.
Animals Within Animals describes the incorrect editing technique as “editing a file using software/hardware intended for a different form of data”. For the purposes of this tutorial, we’ll be using a text editor to make tweaks to image files. Although it’s basically the same technique, I’m going to break this down into two tutorials. One using a basic text editing program (and a bit of prayer) and the other, which I HIGHLY prefer, using a program called ImageGlitch that lets you see your glitches as they occur. Then at the bottom, I’ll include a few tips.

• Image Glitch Generator
• Glitch Screen Image
• Image Glitch Effect Photoshop
• Glitch Image Tool
• Image Glitch Gif Generator

Method #1: Text editors
This glitch technique can be done with any computer and requires only requires a simple text editing program like NotePad (for PC) or TextEdit (for Mac).

Image Glitch Generator

Find images of Glitch. Free for commercial use No attribution required High quality images. This video to learn how to create image glitch effect using only CSS.Download Source Code:Videos.

1. Glitch Image Generator for iOS is now available. Glitch Image Generator ver 4.0.0.
2. All of us can remember glitch effects from our TV sets! Learn how to create one of the coolest effects for your website and also catch the examples with pure CSS.
3. ‎ImageGlitcher is a highly flexible yet easy to use image editing tool that allows you to add a unique and high quality glitch effect to any image you like. Get that popular digital glitch aesthetic typically associated with 80s-inspired cyberpunk designs, without compromising the overall quality.

1. Find an image you’d like to work with and change the extension to “.txt” (ie “goatse.jpg” would now be “goatse.txt”. If you don’t want to damage the original image file, it’s a good idea to duplicate it before changing the extension.
2. Open your new .txt file in a text editor (note: the more simple the editor the better, avoid Microsoft Word or advanced editors for best results)
3. Scroll down a bit and start making a few changes to your file, then save.
4. Change the extension back to “.jpg” and take a look at your work. This is a trial and error thing, so if you don’t like what you see, keep editing.

Notes:

• This technique doesn’t allow you do see your changes in real time, so it’s a good idea to save and view your work frequently to get a feel for how your edits are changing the piece.
• On some computers you can change your .txt file back to .jpg while the text editor is still open… this will allow you to see preview your images after each save without having to constantly switch your extension (see the image above to get an idea of how you can preview your work while editing)
• Most image files contain vital info at the top of and bottom of the file, so that’s why I recommend scrolling down before making changes.
• Different size files give very different types of effects. I find that medium size files, around 500 pixels wide, tend to yield more dramatic effects than larger files.
• Different files yield different results. Try playing with .PSD, .JPG, .GIF, .PNG, and other image files to see the different effects. Be sure to change the extension back to whatever file type it was before you began incorrect editing.
• OK, maybe it is kind of fun to use rich text editors (like Word)… they tend to do weird things with the formatting, but I suggest starting off with a basic text editor so you can have more control over your tweaks.

Method #2: ImageGlitch

For this technique you’ll need the ImageGlitch app for your Mac. ImageGlitch allows you to see your changes in real time (!!!) and doesn’t require any extension changing.

1. Open your image using ImageGlitch
2. Scroll down a bit (maybe halfway down the page) and make a change.
3. If the image breaks, undo it (duh!).
4. Try deleting data in some places and adding more data in others.
5. Save your work when you are done.

Glitch Screen Image

Notes:

• Different files yield different results. Try playing with .PSD, .JPG, .GIF, .PNG, and other image files to see the different effects. I seriously can’t stress how awesome PSD files are for editing (see the image below).
• For a variety of different effects try saving a file as a different extension as what you started with and then open that new save and edit in ImageGlitch. (ie “goatse.jpg” gets edited and saved as “goatse.gif” which then gets edited and saved as something else)

Examples:

a glitched PSD file: For this file I found that different areas of the text controlled very unique features… I found the area near the middle controlled various RGB settings, so I could move the blue to the left and yellow to the right. Near the very bottom I found I was able to do the more traditional “move everything from this point in the data to the right or left” type thing that you usually do with JPG files.

a glitched JPG file: The more traditional type of data bend. I moved the image to the right a bit by adding data, then back left by deleting data, etc. Near the bottom I typed out “0000000 0000000” and then copy/pasted it about 20 times, which created the awesome gradient pattern.

Cool, that’s it. Now you have a grasp of one of the fundamental databending techniques. Don’t stop there. Try it out with different types of media (audio files in text editors, image files in audio editors, etc). For more details, I highly recommend checking out Animals Within Animals databending primers (from 2005!) and Daniel Temkins’ big list of guides from around the web.

With this app, you can glitch your own images by dragging an image into the browser window. Use the sliders in the control panel to alter the glitched parameters. The image updates in real time.

This app corrupts some bytes in an image. Because of the way JPEG encoding works, the corrupted file still shows a corrupted image. It was inspired by soulwire’s experiment in Flash.

Image Glitch Effect Photoshop

This tool was created by Georg. He is always happy to learn about the things that people are creating with his tools. You can follow him on Twitter or explore the source code of this app on GitHub.

There also exists a desktop version of this web app, which you can download here.

Glitch Image Tool

If you like the glitcher, you can check out some of Georg’s other JavaScript experiments.

Image Glitch Gif Generator

Please note: javascript and modern browsers are required for this app to work.