The PxR Spriting Encyclopedia

[SassySnivy]

[Apologies for making such an official-sounding, self-proclaiming title. In no way am I trying to pass off my word as "the word of law," so to speak.]

.:~*The PxR Spriting Encyclopedia*~:.

The expansion of a pixel art subforum on a message board is a wonderful thing: it allows all sorts of pixel artists and spriters to come together and share their work amongst each other.

However, pixel art and spriting aren't as simple as copy + pasting Venusaur's flower on Blastoise's back. No, pixel art is a fantastic form of artwork: it takes precision, good attention to detail, and most importantly, patience. The misplacement of a single pixel can affect the whole piece.

There's a lot to cover for the world of pixel art, but let's start out with the most basic question:


.:~*What is Pixel Art?*~:.
I will do my best to avoid going on a huge, long-winded tirade and simplify it enough to get to the point.

First, let's define what pixel art isn't.

If you're aware of the digital, graphic world, you're aware that basically any image or just a visual in general, when viewed on a digital device, is converted into pixels. Everything you see on your phone screen, computer monitor, HD TV, etc. are all made up of pixels.

The fact that an image contains pixels definitely does not make it pixel art, however. Pixel art needs to follow some pretty specific criteria.

First, pixel art is not defined by what it's made up of, it's how it's made.

http://th00.deviantart.net/fs71/PRE/f/2012/106/8/e/8e95d96332772e879870c89d83329a22-d4we68o.png (http://th00.deviantart.net/fs71/PRE/f/2012/106/8/e/8e95d96332772e879870c89d83329a22-d4we68o.png)
Let's use this wonderful piece of digital art, for instance, courtesy of MusicalCombusken (http://musicalcombusken.deviantart.com/) of DeviantART. (Previous members of Pokemonelite2000 forums would probably know her better as Anastasia-R.)

Upon zooming in...
http://i.imgur.com/n6sfLAN.png
You'll notice that yes, it is handmade, digital artwork and contains pixels; but it's far from being pixel art.

"If the pixel art loses the sense of the importance of the pixels which construct it, then I don't think it can be called pixel art. It is when the pixels hold importance to the nature of the work which defines it as pixel art."
--Alex HW, Pixel Joint
This phrase should be pretty self-explanitory. If the significance of the individual pixel itself has been lost, it really almost can't be considered pixel art. You're aware of the brush tools, blur tools, smudge tools, and the like that you can find on more advanced digital art programs, correct? Those tools use automatic anti-aliasing (more will be explained of this term later on).


"Any tool that places pixels automatically (which means the computer makes decisions about the placement of pixels rather than the artist) is generally frowned upon in pixel art. Remember, pixel art is all about control."
--cure, Pixel Joint

Okay, so now that we have that out of the way: at the same time, just because it's made in Microsoft Paint does not make it pixel art. Remember: pixel art emphasizes on the individual pixels and the artist's deliberate placement of them. This isn't to say that you can't use things such as fill or line tools, however; it's how you make it, not what you make it with. Keep this in mind!


.:*~So, What Does Pixel Art Have to do With Spriting?~*:.
In most spriting communities, it has EVERYTHING to do with spriting. Most sprites that you will see are pixel art; however, this doesn't exactly imply that it HAS to be pixel art to be a sprite. Technically, a sprite is classified as a 2D image / set of images that are meant to serve a certain purpose...namely, some type of placement in a game. However, delving into this really isn't the point of this thread. So if you're a self-proclaimed spriter, don't think this doesn't apply to you! It has everything to do with you.

[SassySnivy]

.:*~So...How do I Start?~*:.

.:*~What Program Should I Use?~*:.
There are a MULTITUDE of different software you can use: most people merely use Microsoft Paint, and that is plenty enough to make pixel art. However, there are other programs that support transparency and layering that can make spriting more convenient; programs such as Photoshop, Paint.NET, GIMP, and the like. There also exist advanced programs which exist SOLELY to make pixel art; for example, Graphics Gale and Aseprite. Graphics Gale allows for several advanced features that will make pixel art much more convenient, and it is made purely for pixel art. There exist several other programs like this that are made by either independent companies or developers. Once again, this isn't the point of this paragraph, so do a little research and find the program which you prefer most. Don't be afraid to try something new! It may be your new default program.


.:*~The Importance of File Types~*:.
The main thing I want to go over here is to beware the evil JPEG (Joint Photographic Experts Group) file type. JPEG is wonderful for photos because it reduces the file's space used but also doesn't really change the picture aesthetically. However, when it comes to pixel art...JPEG files are the devil. They will ruin the quality of your pixel art. JPEG originated pretty much solely for photographs and the like.

If you'd like to upload your picture somewhere, save it as PNG (Portable Network Graphics). However, I've heard that PNG takes up a bit more space on your computer. I save all of my "work space" files as 24-Bitmap (most image uploaders will convert this file type to JPEG), and have seperate .PNG files purely for uploading individual images. Since I started using Graphics Gale, though, most of my files are by default saved in .gal format.


.:*~Starting the Actual Artwork~*:.
So how should you start? There are several ways to go about starting your pixel art piece, the following three being the most commonly used ones:

1.) Line Art
http://i57.photobucket.com/albums/g209/phototekcub/krizzakenmynicca.gif
Many pixel artists will first sketch out a rough outline of what they want to make. They then refine the outlines to create a line art of sorts. From here, they add the colors and shading. It's a very simple-sounding method, and is the preferred method of novices and beginners. It's also rather convenient when you are going for a less realistic approach.

1a.) Pixelling Over a Scanned Image
Pixel-overs are the traces of the pixel art world. However, if you are best with drawing out a concept on paper, scanning it, and refining it in your preferred program, this is a very useful method. Make sure to go over and thicken the lines in your sketch so it will appear relatively well when you go to shrink the image (if that's what you plan to do).

2.) Blocking
http://i57.photobucket.com/albums/g209/phototekcub/junglestages.gif
As you can see in the image above, there are also several artists that prefer to "block" in the basic shapes and colors and refine it along the way. It is most convenient for more realistic pieces and/or scenery.

[SassySnivy]

.:*~Pixel Art Terminology and Jargon~*:.



1.) Anti-Aliasing | v., n. | "a technique used to add greater realism to a digital image by smoothing jagged edges on curved lines and diagonals." --Dictionary.com


2.) Banding | v., n. | When pixels line up together, or "hug" each other. Banding is frequentlly used with deliberately shaded sprites.
http://img199.imageshack.us/img199/3227/spelunky4.png


3.) Color Ramp | n. | A group of colors that can be used together; a palette. Typically arranged according to the lightness and darkness of the colors, also by the hues.
http://i57.photobucket.com/albums/g209/phototekcub/straightramp.png


4.) Contrast | n. | The difference between the bright or darkness of two colors, and how large or small this difference is.
http://i.imgur.com/9hZDn2y.png


5.) Custom | adj. | A sprite or pixel art made completely on your own. Is very commonly referred to as "scratching" or "scratch spriting" in most Pokemon communities. ((opinion: That term makes me die a little on the inside, it sounds a little amateurish)) Said terminology originates from the saying to make something "from scratch."


6.) Dithering | v., n. | The process of placing pixels in a deliberate, repetitive manner--commonly in a checkerboard pattern--to create a certain texture effect and/or to smooth the space between two colors. This is relatable to cross-hatching or stippling in more traditional art media.
http://i57.photobucket.com/albums/g209/phototekcub/ditherreduxgif.gif


7.) Edit | v., n. | A sprite or a pixel art piece that has been edited from something made by a different party.
http://i.imgur.com/JOHrIUS.png


8.) Gradient | n. | A gradual change from one color to another. Usually refers to color ramps that have too many colors, little contrast, and/or lack of hue-shifting.


9.) Hue | n. | The actual color on the color spectrum. For example, red, orange, green, blue, yellow, and the like are classified as hues.


10.) Hue-Shifting | v., n. | The process of shifting over the hue, saturation, AND luminosity as you go up or down in your color ramp.
http://i57.photobucket.com/albums/g209/phototekcub/rampredone.png


11.) Isometric | adj. | A perspective "in which a three-dimensional object is represented by a drawing (i·somet·ric draw·ing) having the horizontal edges of the object drawn usually at a 30° angle and all verticals projected perpendicularly from a horizontal base, all lines being drawn to scale." --Dictionary.com
See the image below:
http://img244.imageshack.us/img244/5473/isofg5.png
It is coming from a very uniform perspective. Specifically, 2 across and 1 down.


12.) Jaggies | n. | Jargon that refers to the jagged lines in a sprite.
http://www.derekyu.com/images/extras/curved_jag.gif


13.) Light Source | n. | The location, or "source" from which light originates from. This can also include the size of the source of light as well, and much more rarely, the color.


14.) Luminescence | n. | Commonly referred to as a color's "value" or "brightness." It describes how dark or light a color is. The lower the luminescence, the darker the color; on the other hand, colors with a higher luminescence are closer to white.


15.) Non-Isometric | adj. | A non-uniform perspective that is basically most commonly used in pixel art. You will typically see non-isometric pixel art much more often than isometric pixel art.


16.) Pillow Shading | v., n. | A shading process in which all of the light is focused in the very middle. Heavily frowned upon because it is incorrect and fails to show three-dimensional depth.
http://i57.photobucket.com/albums/g209/phototekcub/frontalpillow.png


17.) Pixel Cluster | n. | The connected grouping of a certain color of pixels.
http://i.imgur.com/A3DykQV.gif


18.) Pixel-Over | v., n. | Tracing in the pixel art world, essentially. Tracing over an image while taking the elements of pixel art into consideration. Traces can be from either your own or another party's work.


19.) Readability | adj. | How well a sprite or pixel art can be "read" without basically squinting. Something with a good readability has the least problems with representing an object.
http://upload.wikimedia.org/wikipedia/commons/e/e3/Michelangelo%27s_David_-_halftoon.pnghttp://upload.wikimedia.org/wikipedia/commons/e/ef/Michelangelo%27s_David_-_Bayer.png
Both images are the same, but the one on the left has a lower readability.


20.) Recolor | v., n. | The process of changing the colors of a pixel art piece; mainly spriting in particular.
http://img339.imageshack.us/img339/7764/sonicw.png


21.) Saturation | n. | How concentrated or "watered down" a color is. A color with a high saturation is very vivid and sometimes bright (for instance, take a look at the old MS Paint's default color palette); a color with a low saturation, on the other hand, looks more grayish.
High Saturation:
http://i57.photobucket.com/albums/g209/phototekcub/dragons.gif
Low Saturation:
http://i57.photobucket.com/albums/g209/phototekcub/dragons.gif


22.) Scratch | v., n. | (See "custom.")


23.) Selective Outlining | v., n. | The process of "shading" lineart; coloring certain areas of line art appropriately based on how far or close it is to the lightsource.
http://www.derekyu.com/images/extras/lucha-selout.gif


24.) Shading | v., n. | Without it, pixel art is almost nothing. Without it, art is almost nothing. Shading is typically referred to as being the process one uses to add depth to an image, by adding lighter and darker colors, or "shades" where appropriate.


25.) Texture | n. | To give an image the illusion of texture is giving it the appearance of having some type of feel / consistency.
http://img.photobucket.com/albums/v198/tumble_weed/material.gif


.:*~Common Terms in Pokemon Spriting Communities~*:.

While I originally did not intend on adding these, this is a Pokemon forum that can be catgorized under a "typical Pokemon spriting community;" thus this is intended to inform those who are unfamiliar with the jargon used.

Please take note that while these are associated with the Pokemon spriting community, they do not have to refer to the practice of SPRITING them, specifically. Fusions, for instance, are common in the entire Pokemon fan art community. Mainly sprites, however.



1.) Advanced Recolor | n. | Recoloring in a sense that demands more time spent and effort. For example, recoloring something not only to have a specific color, but specific pattern(s) as well.


2.) Devamp | n. | In subject of the goal, devamps are exact opposites to revamps. The method, however, is debatable. Devamps tend to be more effective when made entirely custom, or very, very heavily edited from an existing sprite.


3.) Disguise | n. | By common definition, a type of advanced recolor in which the artist recolors one Pokemon to have the color scheme of another.


4.) Fakemon | n. | A fan-made monster based off of the Pokemon franchise.


5.) Fusion | n. | A term commonly associated the creation of a new Pokemon by combining two existing ones.


6.) Retype | v., n. | Redesigning a Pokemon so that it fits a different typing / type combination.


7.) Revamp | n. | Whether by editing or making from scratch, this typically refers to making an older version of a Pokemon sprite look new and with the updated proportions and changes. For instance, by taking the sprite from Gold and editing, tweaking, and reshading (or just entirely remaking it as is) it to give it the appearance of having came from Ruby and Sapphire would count as a valid revamp.


8.) Splice | n. | (See "Fusion"). Synonymous to fusions. Tends to have a very, very slightly different connotations, however. Splicing refers mostly to the act of copying and pasting parts from one sprite onto another.

[SassySnivy]

.:*~Pixel Art "Do"s and "Don't"s~*:.
Given all of the information above, you likely now have a much better grasp of what pixel art is. However, with great knowledge comes great responsibility. It's good to know how to do something, but you also need to know how to do it right.


.:*~Anti-Aliasing~*:.
Anti-aliasing, as briefly described above, is the method of manually adding "buffer" pixels / colors to smoothen jagged edges out. Advanced programs such as Photoshop, or the newer versions of Microsoft Paint, will have tools (i.e. brush tool) that will automatically anti-alias around the brush stroke. In pixel art, anti-aliasing needs to be applied by hand.

Anti-Aliasing is a wonderful tool to use; however, you need to be able to know just how to use it...and how much. Below is an excerpt from a thread on Pixel Joint (linked to in the thread's credits section) related to how much anti-aliasing to use and not use.

Too much AA (over-anti-aliasing)- You only want to use as much AA as is necessary to smooth the edge. If you use too much, the edges can look blurry, and you lose the crispness of the line.
http://i57.photobucket.com/albums/g209/phototekcub/aablur.png

Too little AA- Here the artist has used single pixels to ease the transition, but he has only succeeded in blunting the jagged edge a bit. He could have made a much smoother transition by using longer lines of pixels to show a more gradual transition:
http://i57.photobucket.com/albums/g209/phototekcub/underaaa.png

AA banding- When segments of AA line up with the lines they're buffering, AA banding occurs. For a better understanding of AA banding, be sure to read the section on banding.
http://i57.photobucket.com/albums/g209/phototekcub/aaband.png

--cure

That should be a good transition into the next section...


.:*~Banding~*:.[
Banding is when pixels line up together, or "hug" each other. Banding is frequentlly used with deliberately shaded sprites. it tends to happen often during the shading process. Below are a couple of common examples of banding:
http://i57.photobucket.com/albums/g209/phototekcub/huggingreduxpng.png
http://i57.photobucket.com/albums/g209/phototekcub/fatpixelsreduxpng.png
Banding should be avoided at all costs, simply because of it looking completely unattractive. Banding can be very sneaky and creep up on us when we least expect it, but don't worry yourselves with this at the time.


.:*~Jagged Line Art ("Jaggies")~*:.
Jagged lines are both a good and bad thing. First, let's look at it in a positive light in a way it can actually be helpful--something that a lot of beginning pixel artists tend to avoid or just overlook.
http://i.imgur.com/FQTHp9v.png
See this? This happens most often when you are trying to make a curve, particularly a large curve. Adding the jagged line right at the end, when zoomed out, helps make it look more natural and curvy, and less polygonic. However, when making these you should also balance it out with a little bit of anti-aliasing, because despite all your efforts, without anti-aliasing / selective outlining, you will either have a curve with an obvious jagg or a curve that looks too polygonic.

Now, let's analyze how it can be a detrimental element to our pixel art. These reasons should be pretty apparent just by looking at these images, so I will take less time explaining them.
http://i57.photobucket.com/albums/g209/phototekcub/jaggiesreduxgif.gif


.:*~Dithering~*:.
Dithering can be beneficial for sure: it is used to ease the transition between colors in an innovative manner--without having to use an extra color or colors as a buffer. Despite the fact that dithering can be difficult to use effectively; by intermediate pixel artists, dithering in general tends to be viewed as a taboo. This isn't an entirely accurate viewpoint. Dithering, additionally, can be used to create a type of texturing; and is also commonly used when you are forced to preserve colors (having a limited palette). Here's yet another slight excerpt from the same Pixel Joint thread, because cure explains dithering fantastically here.


Dithering consists of different patterns of pixels. It's typically used to ease the transition between two colors, without adding any new colors to the palette. It's also used for creating texture. In the days of CRT monitors, dithering was especially useful as the screen would actually blur the dithered area and obscure the pattern. Now that crisp LCD monitors are the norm, the patterns are no longer as easy to hide, meaning dithering is not as versatile as it once was. Even so, dithering still has its uses.

The most common form of dithering you'll see is a 50/50 dither, also known as a 50% dither or a checkerboard pattern.
http://i57.photobucket.com/albums/g209/phototekcub/ditherreduxgif.gif

As shown in the example above, you can create various other patterns to further buffer between a full color and a 50% dithering pattern.
These patterns are often easier to spot than a 50% dither though, so be careful!

Stylized dithering is another technique, and is characterized by the addition of small shapes in the pattern.
http://i.imgur.com/Rsbnq.png

Interlaced dithering allows for two dither regions to hug each other. It is called interlaced dithering because the two dithers weave together at the borders. This type of dithering allows you to blend dithers together to form gradients.
http://i.imgur.com/vtdqe.png

Random dithering is a less-common form of dithering, and isn't generally advised, as it adds a lot of single-pixel noise to the image. While it has some usage in very small doses, random dithering is something you'll often want to avoid.
http://i.imgur.com/e95b0.png

As useful as dithering is, it's often misused by inexperienced artists.

--cure

Too much dithering should be avoided, especially if it's just standard dithering. Doing such can add an unnecessarily rough appearance to what it's being applied to. If you really need to use so much dithering, you'd be best off adding a buffer color instead.
http://i57.photobucket.com/albums/g209/phototekcub/ditherfield.png

The below image shows an effective amount of dithering (right) versus excessive dithering (left).
http://i57.photobucket.com/albums/g209/phototekcub/bunniesredux.png

The amount of dithering to use should depend on the contrast of your colors and/or the size of the palette you're working with. It's best determined on a case-by-case basis.


.:*~Pillow-Shading~*:.
Ah, pillow-shading...one of the most taboo, if not THE worst taboo technique to use in the pixel art world. Pillow-shading is a type of shading that you will want to do your best to avoid AT ALL COSTS.


"Shading by surrounding a central area with increasingly darker bands. Pillow-shading is bad because it pays no attention to the light source, and conforms to the shape of the area rather than the form it represents of how light affects it."
--cure, Pixel Joint

Pillow shading is more often than not an amateur mistake. Sometimes, though--like banding--pillow-shading can be sneaky and pop up even when you don't intend for it to. Pillow-shading is commonly paired with banding.
http://i57.photobucket.com/albums/g209/phototekcub/pillowshaderedux.png http://i57.photobucket.com/albums/g209/phototekcub/frontalpillow.png


.:*~Selective Outlining~*:.
Selective outlining, sometimes referred to as "Sel-out"ing is mainly used for sprites that have a definite outline / line art. It is the process of shading the lineart manually in order to conform with how the light hits that area of said line art.

Using only colors for outlines versus using colors AND black for the outline is something that is mostly based on personal preference and is a highly debatable subject.

[SassySnivy]

.:*~Color Basics~*:.
I will not go into color theory, because that is a broad enough area itself and branches out to basically all forms of art.

First of all, be adventerous: don't be afraid to create your own colors rather than play it safe and use only colors used on, for instance, official Pokemon sprites. Spriting is about trial and error: making mistakes until you get it right!


.:*~Hue-Shifting~*:.
Hue-shifting applies all three of the digital elements of a color (minus the RGB values): hue, saturation, and luminosity! However, simply referring to it as "hue-shifting" is shorter, catchier, and easier to remember.

hue-shifting is the process of shifting over the hue, saturation, and luminosity as you go up or down in your color ramp.
http://i57.photobucket.com/albums/g209/phototekcub/straightramp.png

http://i57.photobucket.com/albums/g209/phototekcub/rampredone.png

Ultimately, warmer colors tend to be used with higher saturation and for brighter tones, while cooler colors are used a lot with lower saturation and for darker tones. This is just a rule of thumb with hue-shifting, but there are always exceptions.

Quote from Pixel Joint:

Hue-shifting refers to having a transition of hues in a color ramp. A color ramp without hue-shifting is known as a straight ramp. In straight ramps, only the luminescence changes, while in hue-shifted ramps both hue and luminescence will (usually) change.
http://i57.photobucket.com/albums/g209/phototekcub/straightramp.png

http://i57.photobucket.com/albums/g209/phototekcub/rampredone.png

The first color ramp is a straight green ramp. The second image is a green ramp with hue-shifting applied. When using hue shifting, bend your highlights toward a certain color (yellow, in the example above), and move the darker colors toward a second color (I chose blue in the above example). Hue-shifting is used because straight ramps are usually boring and don't reflect the variety of hues we see in reality, and hue shifting can add subtle color contrast within a ramp.

--cure

[SassySnivy]

.:*~Conclusion and Final Notes~*:.
.:*~Conclusion~*:.
This guide was purely intended to go over the basic, yet utterly important elements of spriting. Overall, pixel art takes lots of patience, attention to detail, precision, and mistakes. Yes, you heard that last one right: art is about making mistakes and learning from them. This is why critique is the most important factor to help an artist improve. Do not be ashamed to post something because you think it is inferior: we do not bite and will not judge you. Art is about being humble and accepting of others' input and feedback.

If you approach art with a patient and persistent heart, your efforts will surely be rewarded.

.:*~Side-Notes~*:.
I felt the need to make this guide because of the fact that we are trying to expand this sub-board and get more people to post their art. While there are several other guides out there that explain things one-hundred times better than I have, this is meant to be a comprehensive and relatively easy-to-understand guide. This thread is very subject to change and be added on to when it is necessary. As a result, your feedback and questions are greatly appreciated. I also felt as if merely linking you guys to the two threads I have heavily referenced from wouldn't give the same effect. Even if I had to paraphrase about half of the content here, there's something about creating something yourself that gives it a certain charm.

I have tried to make this post seem as professional as possible, including an introduction, conclusion, footnotes, and complete references and credits. Any bit of content that is directly quoted is stated as such; minus the fact that the content in post three is put in a large quote. This is to separate it from the rest of the post and an attempt to give it a more organized appearance. Anything that is a direct quote ends with "--<username>."

Note that the fact that I used these two wonderful references hopefully shouldn't make you feel as if I am just parroting back whatever these people say. I've been wanting to create one of these mega-threads since this morning for everyone here's reference and hopeful understanding. Anyways, please do not let this doubt my credibility in what I am telling you. While I'm really not trying to sound egotistical or over-confident, I have been into pixel art for almost a decade. Simply put, it's what I'm passionate about.

Even if I do have the tendency to go on long hiatuses.

Thank you for reading. I hope you all enjoy reading this as much as I enjoyed creating it.


.:*~Credits~*:.
Dictionary.com (http://dictionary.reference.com/) for a couple of definitions. The reason of using this is due to the fact that it defined said term(s) much better than I could have.
This thread has been heavily referenced from the following threads:
"The Pixel Art Tutorial (http://www.pixeljoint.com/forum/forum_posts.asp?TID=11299)" by cure, at Pixel Joint Forum (http://www.pixeljoint.com/forum/).

"SPRITING DICTIONARY (and resources) (http://www.vg-resource.com/thread-13868.html)" by Gors, at The VG Resource (http://www.vg-resource.com/index.php) (formerly known as The Spriters Resource).

The images that I have used all originate from the aforementioned two threads, unless otherwise stated. I also recommend reading the following thread, that elaborates more on the things mentioned here in a step-by-step tutorial fashion.

"Noobtorials (http://www.pixeljoint.com/forum/forum_posts.asp?TID=5692&PN=1)" by Hapiel, at Pixel Joint Forum (http://www.pixeljoint.com/forum/).


.:*~Edit Log~*:.
February 27, 2014
-Updated the side notes / disclaimer.
-Added more terminology and Pokemon spriting community-esqued jargon.

------------------------------------------------



I'll compile a list of PXR-made pixel art-based tutorials here! ^^

ZrowNoodles' basic animation tutorial (http://www.pokemoncrossroads.com/forum/showthread.php?1507-General-Spriter-s-Showcase!&p=128877&viewfull=1#post128877)

[Dash]

This is really cool and it was nice of you to post this Speed-X! I went over the threads and can tell that this isn't copy and pasted, so that makes it alright I guess. Make sure that anything you did quote had the original poster like on the 3rd post and other posts, since you did state that they are quotes and aren't yours at the least. Otherwise, unless any art mod or anyone else disagrees, I'll be pinning this.

[SassySnivy]

Thank you. I've updated the disclaimer and one of the sources. I'll also mention that unless it has the following conditions...

Any bit of content that is directly quoted is stated as such; minus the fact that the content in post three is put in a large quote. This is to separate it from the rest of the post and an attempt to give it a more organized appearance. Anything that is a direct quote ends with "--<username>."
...then it is from me.

Therefore pretty much everything in the third post is from me. Actually, the vast majority of this guide is from my own word; it's that I used these two guides to use as a reference as to the things I needed to go over. Many of the images were very valid and applicable to this guide (some of them I will most likely replace with my own images later on), so they were used.

Thank you very much! :>

[Braixen]

This is a great guide, I am sure many new sprite artists will appreciate its contents. I do not personally sprite but a very dear friend of mine does for a game and I've learned to appreciate this medium a lot. :)

[Suicune's Fire]

Absolutely fantastic, Speed. :] I'd expect nothing less from you, of course! It's extremely helpful and I'm glad we have such a damn experienced spriting member on this forum! :D I'm so happy you returned. <3

NOW STAY FOR GOOD.

And I'll CERTAINLY use this as a reference. Whenever I want to learn how to do something new, or even something I've done many times before, I refer to your work to help me. XD Have for years now.

Thank you so much for posting this! You're utterly amazing and more. <3


~SF.

[SassySnivy]

This is a great guide, I am sure many new sprite artists will appreciate its contents. I do not personally sprite but a very dear friend of mine does for a game and I've learned to appreciate this medium a lot. :)
Thank you! Oh geez, I spent almost three straight hours on this. ._.||| But even if just one person were to find it helpful...just ONE...I'd be totally happy with it. :3c I hope plenty of people read through this!


I'd expect nothing less from you, of course! It's extremely helpful and I'm glad we have such a damn experienced spriting member on this forum! :D I'm so happy you returned. <3

NOW STAY FOR GOOD.

And I'll CERTAINLY use this as a reference. Whenever I want to learn how to do something new, or even something I've done many times before, I refer to your work to help me. XD Have for years now.

Thank you so much for posting this! You're utterly amazing and more. <3


~SF.
Oh, you. X3c I'm glad you got something out of this!!

Whoa, seriously? ._. Well...I don't know what to say! I feel honored. :> Thank you and you're welcome!

[Suicune's Fire]

Oh, you. X3c I'm glad you got something out of this!!

Whoa, seriously? ._. Well...I don't know what to say! I feel honored. :> Thank you and you're welcome!

YES I DID AND I WILL CONTINUE TO REFER TO IT. <3

Ahaha yes of course! xD You are an inspiration for me. c: No worries at all! :D /delayed response.

[SassySnivy]

Well then Im glad I could make something relatively useful, even if half of it WAS reiterated. XD

When I get some time, I need to remember to make a few edits to this guide....

[Suicune's Fire]

Hey, Speed-X I want to know how to use the 8-bit mode in GraphicsGale. I've tried to use it before; I think where I went wrong was that I had to select my own new colour square to be able to add a new colour. Is this correct? Also, when I tried to copy and paste something that was 24 bit into an 8-bit file, the colours changed. There weren't even close to 256 colours, so that wasn't the issue; it literally changed the colour of the pixels in there... Or maybe it was using a 24 bit palette caused this to happen when I exported it as a PNG. I don't remember. xD It was that Miranda pixel art I did a while back.

Point is, I think using 8-bit might be a bit more efficient, especially when keeping track of the amount of colours you're using, so do I have to do that with the palette? Click on the individual squares to add new colours, and "replace" one of the black squares already there?

P.S. Half the images on the front page have been stolen by photobucket. x:

Thanks. c:


~SF.

[ray_quazaa]

Speed-X Also, PXR can host some of the images. That'll get you around photobucket issues!




http://i.imgur.com/yFjG27b.png
http://i.imgur.com/I3itcRq.png

[SassySnivy]

Oh, thats just wonderful...looks like Cure hosted all of those images on PB and they all now are expired. Awesome. Let me go ahead and find a cached version of this page and I'll host the images on imgur. XD Thanks for telling me, ray_quaa!za

[Suicune's Fire]

Oh, thats just wonderful...looks like Cure hosted all of those images on PB and they all now are expired. Awesome. Let me go ahead and find a cached version of this page and I'll host the images on imgur. XD Thanks for telling me, ray_quaa!za

.__. I think you missed my post entirely... xD I only just realised that when I tried to tag you I accidentally put an underscore. Flip.

[SassySnivy]

Oh...yes, I think I did miss your post. My bad! I'll look over it.

Normally you want to use 8-bit when you're working with just one sprite for that canvas. (if your canvas is like a sprite dump, you may want to start a new file and just work on your pixel art there; that way you won't have other colors in the way) In order to create another color, double-click one of the black squares (make sure its not a square that contains a black you're already using!) and it will bring you to the custom colors window.

Also, if you want to paste something into a file in which you have 8-bit mode on, just turn it back to 24-bit mode and paste the image there; get the colors from the image you need (or whatever you may be doing) and then switch it back to 8-bit. 8-bit mode makes editing colors much, MUCH simpler. The image you pasted most likely has colors that aren't already in that palette on your palette window, so it will try to find the closest colors when it's pasted onto the canvas.

Using 8-bit mode is SO much more efficient, but you'll frequently have to go back and forth. x] Also, do you have your tools' hotkeys set up? It also makes things flow so much more smoothly. Just go to File > Preferences.

Also, dunno if you noticed it but there's a magic wand-esqued tool that will select all clusters of a color (whatever color you highlighted when you right-clicked the image). it's really convenient; also, if you then go to Edit > Fill (My hotkey is set up as Ctrl+2), you can fill all instances of the selected color with whatever color you are currently using. Cool, amirite?

[SassySnivy]

Hey guys, I wanna add a really awesome resource for anyone is more interested in color theory / how colors work in pixel art!
Pixel Joint: "COLORING 'I don't get it' " (http://www.pixeljoint.com/forum/forum_posts.asp?TID=10695)

And here's a pretty neat tool if you're having a little trouble with hue-shifting. Obviously since it works off of an algorithim you should take it with a grain of salt...but it really gives you some interesting options! It's fun to play with.
Color Ramp Creator (http://www.pixelfor.me/crc/F0000032)