ASEPRITE (Allegro Sprite Editor)

As a Linux user, I am always looking for new professional quality tools that are open source and, preferably, cross-platform. ASEPRITE (Allegro Sprite Editor), is now one of those tools. Mac users, you will not be disappointed either. This is saying a lot when shareware like Graphics Gale and costly Cosmigo Pro Motion are used from professional pixel artists only support Windows.

I would like to pick that I do not know anyone who buys shareware (Graphics Gale) anymore or let alone a whopping $78 (DRM limited use) / $1500 "unlimited number of users at a single customer site or location" for Pro Motion. If that is not a kick in the balls, Pro Motion also charges for upgrades at half price... First of all, who buys a tool for a dying art medium (despite how much I love drawing pixel art) these days at such a high rate or even be charged to upgrade to a new version?

I can't rip on Pro Motion enough for being a bastard of a lost business cause. At least with buying comercial software like Photoshop, you're buying a cutting edge tool for the digital art industry (though I'd berate its value as well with GIMP out and GIMP 3.0 coming) where you can earn that cash back through investing into career paths. Also, Photoshop at least has support for Mac. This tells me the developers had some sort of mindset that some of us are seeking professional work on different platforms.

While this may be old news to some of you, Allegro Sprite Editor is the perfect example that these type of commercial software should just go away. It has pretty much all the features Pro Motion and Graphics Gale do and is free / open source / cross-platform (as if this wasn't a plus enough for me).  I'm more than happy to hit that donate button for an awesome under-appreciated piece of development software like ASEPRITE. Surprisingly, I almost feel as if I'm doing it out of spite (even though that's not my real intention) because of the backwards business model of Pro Motion.


I just tested out ASEPRITE 9.1 and I have to say I am really impressed. I have always drawn game/pixelated graphics in wonderful GIMP, but it really lacked in the animation department and was not really specialized for this type of art. I am not an expert in animation, but I have been putting off learning how to do this with pixel art for quite some time for this exact reason.

I recommend checking out Allegro Sprite Editor if you are a pixel artist, new to pixel art (free means no risky investment),  or just curious about 2D game art. Especially when your development environment is anything but horrendous Windows, it can be annoying rebooting / switching between virtual machines (my laptop can only take so much). My fellow pixelated Mac and Linux users, your prayers have been finally answered.

Graphic Design 101: Image File Formats

There are a handful of image file formats, but only a select few we use for certain purposes. New ones pop up now and then, but not often enough to worry much about being up to date with all of them.

For graphic designs (raster), we typically use PSD (Photoshop Document) and XCF (eXperimental Computing Facility for GIMP) especially when working with layers. Think of these file types as "workstation" formats. You don't publish them, but you modify and back them up for future versions or derivatives.

"But PNG is the best format ever!". No, a PNG (Portable Network Graphic) is a lossless (doesn't lose quality) image format for raster/pixel graphics. It is widely used, but not for everything. It cannot do animations (single layered) like a GIF and can be unnecessarily large for photos (unlike JPG/JPEG).

Use JPG/JPEG (Joint Photographic Experts Group) for photos and generally large graphics with lots of detail. It is best used for images under 128x128 or with a very low color count (under 16 colors) for best file size optimization. Don't forget to backup your original as a PSD or XCF so you can convert to a lossless image format if needed. JPG is meant to compress in file size through stretching and interpolating calculations, making it a primary candidate for photos with millions of color. You can adjust the quality level from 0-100% for compression. 100% quality isn't necessary as 70% typically does just fine with most photos, but it is better than using a PNG if you must.

GIF (Graphics Interchange Format) are a lot similar to PNGs with two major exceptions. They are animated and they have a color limit of 256. This is why you avoid drawing in a GIF opposed to a PNG or (preferably), a PSD/XCF file. I always have ran into trouble drawing in GIFs (the color palette appears fixed sometimes even if you don't exceed the limit). You could be drawing in an orange-red and end up drawing brown (at least this behavior is in GIMP).

If you want to modify a JPG/JPEG or a GIF that you don't have access to their original format, export them to a proper format (PSD/XCF). You will be able to use all the color and layers (or even animation frames) you want. Export them to whatever desired (with the proper format in mind) when finished.

Now we all (for the most part) heard and may even know what these formats are. But what about those vector formats?

SVG (Scalable Vector Graphic, open format) and EPS (Adobe Illustrator's Encapsulated PostScript) will save both vector points (you will lose the ability to modify them in any non-vector format). The good news is, they also handle layers and animations. I want to advocate though, to use SVG over EPS. SVG has actual support on Internet browsers these days (though I'm not sure about the notorious IE), making it a possible new image format to post. Of course, if you ever design an image in SVG format, you can always export it to PNG or JPG (which you probably should do anyway for compression).

Graphic Design 101: Let's Start From The Beginning

There seems to be a lot of misconception of graphic design these days. Perhaps being unable to attend courses for basic education behind this field makes people naturally defensive and aggressive to those who try and help their self-taught "skill". I love interjections I get that I'm self righteous for stepping on people's toes and breaking their little hearts for their creations. Well, as I have been taught from every art community/college course, art is not meant for the faint of heart if you want to make something on a respectable level. But this marks the path to a new series of tutorials! I been itching to write something vaguely useful these days since my HTML5 starter tutorials.

If you feel that you want to criticize what I'm about to say, first stop to think and blame where I learned it from. College (Digital Foundations 101), the world, other graphic designers (career and certified, not hobby and self taught).

Let's begin with some background information about what a graphic designer is and what not is. While you would think this is common sense, it generally isn't to amateurs.

A graphic designer by definition is not a graphics editor. I cannot stress enough how much people take a picture (mostly stolen from a website) and apply a series of filters and special designs to it destructively and call themselves a graphic designer. I think I seen this mostly in "banners" for signatures (forums, game sites, etc.). PLEASE just stop it. You are to create what you want, but you are NOT by any means given the title of "graphic designer".

If you modify only photos that you take (via your own camera and not someone else's), you're not a graphic designer, you're a photographer. If you do this but don't take your own pictures but someone else's, your a photo editor with the crutch of not having any full potential in talent and vandalizing other's work. It's fine to do this for practice at home, alone, in a dark basement, but to publicly announce this (and claiming it) is blatantly plagiarizing.

A graphic designer DESIGNS their OWN graphic, hence "designer" and applies a series of non-destructive editing to it for modularity, simplicity, and speedy modifications for future derivatives (whether for yourself or your "team").

Now some of those raster/pixel artists (I, myself am one) use to be considered part of graphic designers in the older age of digital art, but this no longer holds true as vector art and layering came to our existence with improved non-destructive image manipulation.

But what is a graphic; what dictates its definition; what is it meant for? A graphic is an image of representation (like any form of art) created for the purpose of being flexible enough for varying canvas such as pictures in a magazine, a book, a poster, a billboard (try scaling to that resolution with pixel art!), websites (banners, logos, etc), the Internet, general computer images (IE: icons on your desktop), etc. The beauty of a vector graphic is that it can scale to any size without ever losing its quality. Scaling (small to large and vice-versa) a raster/pixel graphic will create interpolation, causing blurry pixelated blocked artifacts everywhere. Frankly, it's a dying art type (thus the small communities and scarce job opportunities). Pixel art that is mostly used in only games is even disappearing (3D is a good description of a more complicated vector graphic).

It can even be plausible (though border-lined today honestly) to create high resolution digital painting and airbrushing to be considered a graphic. But unless you're not designing it to be somewhat modifiable through something like layers, it's not a graphic. But even today this is border-lined a graphic due to its limitations opposed to vector art and 3D rendered images.

You make vector art through applications (primarily) Adobe Illustrator and Inkscape, but not excluding some tools in Photoshop and GIMP. They are typically called anchors and points, or sometimes Bezier curves (GIMP's vector calculation). All a vector is a point and a calculation of a line/curve to the next point, forming a "graphic" or image of representation.

You can even be a graphic artist using traditional methods, such as scanning your RAW pencil/pen drawings and tracing (my preferred way) over them with vectors in Illustrator or Inkscape. But all in all, it all comes down to conversion to vector, or a type of flexible art form (3D modeling/vectoring is another example).

While I will agree it's sad to regurgitate a lot of information that should be common sense to amateur graphic designers, but it had to be done. Next tutorial will introduce you to image file formats, how they're used, what they're meant for, and some myths. We'll get to the good stuff (graphics) after we buckle down on some of this background information.