Learning how to sprite! (Unfinished)

+8
BDB
Leo
spritefan2
SᗡN
Rapidfir3Pho3nix
Face
Mr Lange
Mistah_Jayden
12 posters
Go down
Mistah_Jayden
Mistah_Jayden
Spritan
Spritan
Age : 33
Number of posts : 2010
Registration date : 2009-04-06
Location : New York City

Learning how to sprite! (Unfinished) Empty Learning how to sprite! (Unfinished)

3/30/2014, 6:00 pm
Yes, you fuckers NEED to learn how to sprite. You call yourselves sprite animators, complain on how limited it is but you can't sprite. Go figure.
Even worse that I consistently get hunted down, to "help" people sprite. I'm tired of it. Therefore I'ma teach you guys the basics of spriting and you guys are on your own from there. Cool? Cool.
I don't need to get into the basics on what sprites are and etc right? If you're here you know what that is, so i'm going to skip the introductions.
If you want an intro, here you go.
https://www.youtube.com/watch?v=7mqAZ06dwKU

I will try to do about two sections a day.

Credits so far
Simon Cottee
2DKiwi

Table of Contents

Section  - Programs & Sprite Tools
Section  - Workflow
Section  - Spriting necessities
Section  - Pixel Coordination
Section  - Building Characters
Section  - Fix my Sprites! (Sprite Editing)
Section  -
Section  - Custom Poses
Section  - Shading
Section  - Sprite Tips


- Programs & Sprite Tools -

  Every artist finds a workflow for their routines. Every artist has a preference for certain tools. They stick with them often because it’s the most comfortable and satisfying way for them to work, but sometimes it’s because it’s the only way they know how to work. If you're stuck on Paint because it’s all you know, read on to discover the options you have for speeding your work up, making the process more enjoyable, and getting better results. Many beginners start their pixelling hobby with basic programs like MS Paint*. It has the standard tools for working with individual pixels that you need, but the features that most pixel artist want are the ability to work with transparency, a good way to control the color palette, a good selection tool, a way to save to GIF or PNG with transparency, and a way to animate. A program with Transparency and layers is a definite if you want to learn how to sprite.

Good programs consist of Paint.NET, GraphicsGale, Photoshop, GIMP, ASESprite.

Paint.NET is my personal favorite because I personally find it easier than the rest. It's a perfect mixture of paint & Photoshop in it's core. It has Blending settings, layers, effects, transparency, an easy workspace and has it's own save file PDN. Which is the format I normally save my unfinished business in. So if you're used to paint. Paint.NET is a free and much better alternative to things like GraphicsGale and PS.

Paint.NET screenie

One of the best picks is GraphicsGale, which handles color palettes, layers and animation pretty well and helps you visualize pixels on a grid very nicely. In fact, it comes with a pretty large set of tools that help in several different ways. This instantly makes it an enormous step up from Paint, and should ideally be the first program you learn to pixel with. (The free version doesn’t let you save as .GIF though, only PNG, so if you do use it, animations have to be exported frame-by-frame.)

GraphicsGale Screenie

Then there's Photoshop. If you have it I'd suggest you stick with it, if you're already comfortable with it because it's multi-purpose and you'll be able to bang out many stones in one run. One reason being that working with it for pixel art helps you learn it for when you want to use the program later on for other forms of art. But more importantly, it opens up the option of building your pixel art the fast way: by first drawing your illustration at full size, then shrinking it down to sprite size and cleaning it into exact pixels. Available shortcuts like these and many others makes it a tool with numerous helpful uses and options you might not have thought about trying. Tons of ways to play around with PS to benefit your sprites so if you can you should go with this.

GIMP is like Photoshop but a free alternative. May take some getting used to or it'll be natural for you to use. Either way it's a great program, you can even edit your sprite effect easier with Gimp and take away it's transparency for you to further edit it.




- The Workflow -


You’ve got your programs set up, you’re in the pixeling mood, and you’ve got an hour or two of uninterrupted time to blow. You’re ready to start, and you want to keep that arty mood going as long as you can without little things like crippling eye strain wearing you down. Here’s a few guildelines to help you spend hours working with tiny dots while preserving your eyes and getting the best results.

Here's a guide for those of you that have really high resolutions and have trouble spriting. This is from one of my spriter pals tips so I'll go ahead and and put his advice here.

http://prntscr.com/35mfq0

When you’re drawing on paper, you don’t just look at the one line you’re working on all the time. You’ll make a few lines, stop and take in the whole image to see if that line looks right in relation to everything else or if you need to adjust it.

In the same way, working up close with pixels is important in the micro area, but in the macro area (seeing if the pixels you added to the eyebrows blend into the top of the eye softly enough, etc), you need to constantly go back and forth to check if the pixels you added actually had the effect that you anticipated they would. You can be surprised what a pixel that’s one shade too dark can mess up.

Some artists might not have an eye for that level of subtlety, but it comes when you have both experience and the interest in not settling for “okay enough”. (A side note: pixeling is one area in life where it doesn’t hurt to be a perfectionist. That’s the nice thing about pixel art: if you finish a sprite and then a month later you’re not satisfied with it anymore, you can just pick up where you left off and refine it again and again.)

In Photoshop and Gimp, you can have a sprite open in one window and magnified to 500% while also having the same document open in a second window at 100% size. The changes you make in one window instantly show up in the other. This lets you glance back and forth while you pixel instead of stopping, zooming out to check your pic and its blending, then zooming back in again. In Photoshop CS, you do this by Window > Arrange > New Window For __[your current document]__

Finally, on the subjects of your eyes, we come to..

Many painters and other artists begin their work on neutral color backgrounds to help get a good sense for the colors and shades they use. Pixel artists can do something similar to help them get a good sense for the light-blending of screen pixels.

Pixels are made of light. When you’re working with colors made of light, you shouldn’t be working on a white background. The light intensity of the white competes with the brightness of the pixels, plus over time, it becomes like working in front of a giant flashlight. Keep the background dark, to let the light of pixels stand out, and keep the background a neutral color to let the color of pixels stand out.

Try to explain to your roommates why you wear sunglasses in front of a bright monitor indoors
Of course, if none of these options are possible, there's always a last resort for your eyes.

So that means just work on black, right? Not exactly. Especially not if your sprite uses outlines. Remember, you want to let your pixels naturally blend their light, and that includes the edges of your outlines. On a black background, you get an odd effect where the light of your outlines is diminished and the high contrast between a no-light background and a light-emitting sprite can throw your eye for a loop. For building a sprite, the ideal background is darker than your darkest outline, but bright enough that some light is produced to soften the outline edges.

The end result of building a sprite on a good background is a sprite that will look good on any background — including a moving one (if you’re working on an animated sprite for a game). I myself usually work on a dark grayish-green background to simulate some color contrast, kept dark enough that the light source on my figures stand out as much as possible so I can focus on it as much as possible.



- Spriting necessities -


Now that you have chosen the program you feel comfortable with, we can start on the actual sprite stuff but first, there are a lot things you need to understand if you really want to be a successful spriter.

Anatomy - You need to learn the human anatomy. If you can understand the muscle structure and how the body is. Spriting human/humanoid sprites will be a breeze. You'll be able to make any pose you wish because you can vision how it would look like and not worry if it's proper or not. It will also increase your shading capabilities by a lot because the human body are one of the first things you should learn to shade. It will take tons of practice and observation, In spriting observation is key. One way to do it is to always keep a reference sheet. Like this back when I was learning the leg structure. Example of Leg reference

References -  That's right reference like hell. Anything you don't understand from a sprite let's say muscle structure or detailed clothing, whatever it is. If you can't do it, learn from it.This something I've posted on my spriting forum a while back. Referencing from sprites, observing it and understanding what was done is how you're going to improve vastly. Don't copy and paste it. Trace and try to memorize it. As you trace and memorize different things it'll become natural to you and you'll be able to do it with your eyes closed. Don't take what I said out of context though, this does not mean you can take someone's sprite then edit it to call your own.

Learning how to sprite! (Unfinished) Difference_between_reference_and_copying______by_mistah_jayden-d60h4sv

Here are examples of my workspaces and regardless of how good I am, even when I can do sprites out of nothing I still put a crapton of references. From Old sprites to Drawings, sprites from different games doesn't matter.

Example 1
Example 2


Proportions -  An absolute MUST. If you want to sprite let's say LSW sprites, one of the things you're going to have to do is make sure you get the sprite proportions correct. What do I mean by that? When making sprites or poses, especially for animating purposes they have to be in the same scale for it look smooth. Before starting to sprite/edit, get in a habit of duplicating your sprites. Before you edit something make a copy of it so that you have the original to reference off of. Also, set lines to help you keep the sprite's proportions intact.

YungBlaze Example





- Pixel Coordination -



As silly as this sounds, for your sprites to look good, your pixels have to be well placed. How so? Now in this example, the line to our left is jagged and has unneeded pixels cluttering the line. As the one to the right is clean and straight forward. - Pixel Placement Example

Another example here. It's almost clear as day. The left sprite has a cluttered outline as to the one in the right does not. Things like these you'll begin to gain an eye for as you continue to sprite. Sorta like a Pixelgan. - Pixel Placement example 2

Refrain from cluttering your outlines, it should only be cluttered as you make a sketch. - Sketch example


- Building Characters -

The worst subject so far, but I really need to do this. “I just can’t think up a good character!” Nine times out of ten, you’re not going to just sit there, muse, and come up with the end-all character of characters. Oftentimes, ideas start with an inspiration: a catalyst for creativity. Admit it, if you have a few characters, at least one was thought up while you read or watched or heard some form of media and decided “Hey! That’s cool!” Creating things is easy when you have something to draw from, isn’t it? It’s definitely a good way to start off a character, but it has it’s faults; if you find some factor in some media interesting, odds are others have as well, and odds are still that they may create a Character X just like your Character Y. It’s fairly unavoidable. Elemental characters are often good examples of how a single shared idea- fire, for example- can create overwhelming similarities. How many pyro-kinetic characters have spiky up-do hair, a brash attitude, and an overwhelming amount of red-and-orange in their features or attire? There is a word for this; it’s spelled C-L-I-C-H-É. Creating good characters may be tough, but in the long run it's completely worth it. Whether it's a Fan character or a complete custom character doesn't matter, the amount of effort poured on to it is what makes a character, a character. So I'm going to teach you guys the rules of making a character, so that we avoid seeing the Garbage Kirby & Sonic FC flying around as of recent. If you get offended by what I say, that's not my problem. Make a better character.
Before I get into depth about what makes a character I'm going to list the obvious don'ts. If it applies to your character then you have already failed my test.


DONT

  • If your fan-character has any relation with the canon characters AT ALL, that MUST be eliminated asap. Your character should not be made to revolve around Goku's life, be his pupil or some garbage like that. Keep your character away from any canon story line at all costs. It's fine for your character to know that the canon character exists, and maybe interact with them once in a blue, but that's it. Let's not make Sonic's evil asscheek have grown up with Sonic all his life, became evil and depressed because Sonic stole Amy. In fact most Sonic FC, look like hairy ass cheeks. Sad isn't it.?

  • Cliché. This step repeats itself alongside every other step in the creation process, for there is always room for hackneyed ideas. Sometimes, you may not, within your own creative limits, be able to avoid a little bit of overused something. That’s okay; no one is perfect or perfectly original, and anyone who claims to be can come see the Dreamer. Rhetorical challenge aside, the main idea in this is that you should, within all power, avoid overused factors. Even if a drop of cliché runs onto your creative masterpiece, the remaining originality should dwarf it to nothingness, or you can bend it into something original. In terms of rooting out cliché, you may want to check with someone to see if they think ability X, name Y, or species Z is overused. Asking another person frees your project from its creator’s personal bias. Like we know all pyromancers are named Blaze, Blitz, Flare, have spiky hair, harsh attitudes, try to be badass and have their color schemes associated with red. IE: Sirnik the Hedgehog, Blaze the Hedgehog, Anything the Hedgehog, An extra Mario brother, Evil Recolored Gokus, the list will never end.

  • Know the damn canon Universe. If you're making a Sonic character and you want him to be some type of Emerald Guardian, DO NOT replace Knuckles. Do not alter the canon world to benefit your hideous creation.

  • Don't create useless characters. What do you mean Jay? So many of you are guilty of making a character strictly to talk shit, or a skimpy ass slut character to be nothing but eye candy and to serve as a sex slave/wife for your main character. Cut that shit out. Likewise don't make a character that's made to help a main character finish it's main quest and nothing more. Useless, uselessness everywhere.

  • Never recolor. When you make a shitty recolor of a canon character (of anything actually) not only are you giving me permission to want to rip your skull from your face, but you're basically ending a battle that never begun. I will stress this recolors are effortless and effortless characters are garbage. Green Sonics named Larradonic to ugly Vegeta recolors are bad.

  • Do not give your character traits or things that don't belong. Don't give a Hedgehog super sayian hair, (it's done) Don't give a rodent tits and an ass like JLo's that's freaking nasty. IE: All these atrocious Sonic characters with so many spikes sticking out their assholes and always have a tendency of having two colors that don't mix. Vic.

  • The damn powers. Stop being cliche and stop being overpowered. Making all these hedgehogs as fast as Sonic, as strong as Goku, powers of a Super Sayian and a Kryptonian combined. Just stop. In fact here's the perfect example and I will burn this hideous Bio into your mind so that you learn not to make some shit like this ever. It's so bad I couldn't stop laughing. WARNING: This example is terrifying and if you're super effective towards stupidity, you're going to get wrecked. Also I pray for you as you read this.

    Spoiler:
     Cry yet? Because I'm laughing my ass off. That is a PERFECT example of what not to do. And this guy is 25 years old. Isn't that just tragic.?


DO IT


So then with that being said,

  1. The first step to making a good character is to Avoid cliche. Making a Sonic FC? Don't make a hedgehog, an echidna, or a two tailed fox. Making a Kirby FC? Don't make it a Kirby unless you know it's gonna look good, and by that I mean your ass better sprite like Jesus.

  2. Now that you've gotten the wiff of what you want to do, The second step is to Choose a theme. So here’s what you do: brainstorm. Throw out as many ideas and concepts as you can. Write down- yes, write- every idea you can, no matter how realistic or far-fetched. Chose totally different concepts, or let them branch from each other. There’s almost nothing you can’t write down: emotions, colors, occupations, activities, random nouns, random adjectives, interesting anythings. Stick to things that interest you, not what everyone else thinks is cool, and avoid references to established media or concepts, for now. Search the web. Go on Wikipedia and hit random links; whatever you find that interests you, log it. You can even base your character off the lyrics of a song, while minding cliché, of course.

    [WILL continue later]


Last edited by Mistah_Jayden on 4/4/2014, 7:05 am; edited 15 times in total
Mr Lange
Mr Lange
Administrator
Administrator
Age : 33
Number of posts : 1576
Registration date : 2010-04-19
Location : The Land of Waldos

Learning how to sprite! (Unfinished) Empty Re: Learning how to sprite! (Unfinished)

3/30/2014, 6:19 pm
This goes in Tutorials. Very good so far.
Face
Face
Spritan
Spritan
Age : 34
Number of posts : 13011
Registration date : 2010-04-29
Location : Returned-ed

Learning how to sprite! (Unfinished) Empty Re: Learning how to sprite! (Unfinished)

3/30/2014, 6:24 pm
Oh I Am so up in this Bitch! I was just talking to Some one About Paint.net today.Since I have it And Have used it Alil I work with that.

LETS DO THIS!
Rapidfir3Pho3nix
Rapidfir3Pho3nix
Administrator
Administrator
Age : 29
Number of posts : 4906
Registration date : 2009-01-23
Location : Hollow Bastion
https://www.youtube.com/channel/UC0ntn5nE-2rEXLA8GQ7mtsAhttps://rapidfir3pho3nix.deviantart.com/https://discordapp.com/channels/142444698311589888/142444698311589888https://twitter.com/rapidfir3animshttps://www.facebook.com/Rapidfir3Pho3nix/https://www.twitch.tv/rapidfir3pho3nix

Learning how to sprite! (Unfinished) Empty Re: Learning how to sprite! (Unfinished)

3/30/2014, 7:06 pm
AWESOME!!!

OH man I'm so pumped now!!!
SᗡN
SᗡN
Spritan
Spritan
Age : 32
Number of posts : 1844
Registration date : 2011-07-19

Learning how to sprite! (Unfinished) Empty Re: Learning how to sprite! (Unfinished)

3/30/2014, 7:14 pm
Uh oh! Jayden is about to cut ass!
spritefan2
spritefan2
Spritan
Spritan
Age : 31
Number of posts : 64
Registration date : 2011-01-10
Location : Orange, CA

Learning how to sprite! (Unfinished) Empty Re: Learning how to sprite! (Unfinished)

3/30/2014, 7:34 pm
Spoiler:


Ooooh... Looking forward to diving into all these tips and ur wisdom when I have the time <3.
Leo
Leo
Administrator
Administrator
Age : 26
Number of posts : 9153
Registration date : 2009-05-23
Location : Brazil

Learning how to sprite! (Unfinished) Empty Re: Learning how to sprite! (Unfinished)

3/30/2014, 7:44 pm
the more i study spriting, the more i realize how close it is to painting. for my entire life i've had people telling me that it was like drawing and i could never really get anything decent done. now i know why.

anyway, this is pretty nice so far. can't wait for the next sections of it!
Mistah_Jayden
Mistah_Jayden
Spritan
Spritan
Age : 33
Number of posts : 2010
Registration date : 2009-04-06
Location : New York City

Learning how to sprite! (Unfinished) Empty Re: Learning how to sprite! (Unfinished)

3/30/2014, 8:27 pm
Well I added some more content. Hopefully this will help you guys a bit more.
Face
Face
Spritan
Spritan
Age : 34
Number of posts : 13011
Registration date : 2010-04-29
Location : Returned-ed

Learning how to sprite! (Unfinished) Empty Re: Learning how to sprite! (Unfinished)

3/31/2014, 3:00 pm
- Pixel Coordination -

OH GOD Achilles heel #1

GrrrrrrrrrRAWWWWWWAR Stay determine face!
Mistah_Jayden
Mistah_Jayden
Spritan
Spritan
Age : 33
Number of posts : 2010
Registration date : 2009-04-06
Location : New York City

Learning how to sprite! (Unfinished) Empty Re: Learning how to sprite! (Unfinished)

3/31/2014, 9:34 pm
You guys should also suggest things you may want me to cover if it isn't on the table of contents. Or if something I explained isn't clear to you let me know and I'll fix my wording.
BDB
BDB
Administrator
Administrator
Age : 28
Number of posts : 3515
Registration date : 2008-11-04
Location : Canada eh!
https://www.youtube.com/channel/UCMuXjF_iQpAu8knfObJU2EA

Learning how to sprite! (Unfinished) Empty Re: Learning how to sprite! (Unfinished)

3/31/2014, 10:32 pm
How do I make recolor of sonic
Mistah_Jayden
Mistah_Jayden
Spritan
Spritan
Age : 33
Number of posts : 2010
Registration date : 2009-04-06
Location : New York City

Learning how to sprite! (Unfinished) Empty Re: Learning how to sprite! (Unfinished)

3/31/2014, 10:42 pm
Very Funny. I'm laughing my ass off.
RnR
RnR
Spritan
Spritan
Age : 28
Number of posts : 245
Registration date : 2011-08-12
Location : In some deep cave near the coast of China

Learning how to sprite! (Unfinished) Empty Re: Learning how to sprite! (Unfinished)

4/1/2014, 11:41 pm
Alright, lets see a section on colors. Tell us why it is necessary to have basic knowledge of Hue, Value, and Saturation.
Mistah_Jayden
Mistah_Jayden
Spritan
Spritan
Age : 33
Number of posts : 2010
Registration date : 2009-04-06
Location : New York City

Learning how to sprite! (Unfinished) Empty Re: Learning how to sprite! (Unfinished)

4/3/2014, 6:59 am
Ah right, I had forgotten about that lol.
I'll probably post up two more sections today. 3 if I'm feelin' nice.
NS01
NS01
Spritan
Spritan
Age : 30
Number of posts : 6075
Registration date : 2009-09-07
Location : UK england

Learning how to sprite! (Unfinished) Empty Re: Learning how to sprite! (Unfinished)

4/3/2014, 11:50 am
Great tutorial so far. I use GraphicsGale from here on and have only been creating sprites for quite a while. xD
Mistah_Jayden
Mistah_Jayden
Spritan
Spritan
Age : 33
Number of posts : 2010
Registration date : 2009-04-06
Location : New York City

Learning how to sprite! (Unfinished) Empty Re: Learning how to sprite! (Unfinished)

4/4/2014, 7:06 am
Thanks, I updated it a little I'll continue it later.
AlexTGS
AlexTGS
Spritan
Spritan
Age : 27
Number of posts : 244
Registration date : 2013-05-05

Learning how to sprite! (Unfinished) Empty Re: Learning how to sprite! (Unfinished)

4/4/2014, 10:03 am
[b]So then with that being said,


The first step to making a good character is to Avoid cliche. Making a Sonic FC? Don't make a hedgehog, an echidna, or a two tailed fox. Making a Kirby FC? Don't make it a Kirby unless you know it's gonna look good, and by that I mean your ass better sprite like Jesus.

Now that you've gotten the wiff of what you want to do, The second step is to Choose a theme. So here’s what you do: brainstorm. Throw out as many ideas and concepts as you can. Write down- yes, write- every idea you can, no matter how realistic or far-fetched. Chose totally different concepts, or let them branch from each other. There’s almost nothing you can’t write down: emotions, colors, occupations, activities, random nouns, random adjectives, interesting anythings. Stick to things that interest you, not what everyone else thinks is cool, and avoid references to established media or concepts, for now. Search the web. Go on Wikipedia and hit random links; whatever you find that interests you, log it. You can even base your character off the lyrics of a song, while minding cliché, of course.

[WILL continue later][i]


Nice I really found this part to be a cool add on to the tutorial
xKAreloadedx
xKAreloadedx
Spritan
Spritan
Age : 31
Number of posts : 1522
Registration date : 2010-07-20
Location : I forgot...

Learning how to sprite! (Unfinished) Empty Re: Learning how to sprite! (Unfinished)

4/4/2014, 10:39 am
hmmm this is great Very Happy

Makes me want to redo My kirby's whole design though...

Damn you Jayden!
Face
Face
Spritan
Spritan
Age : 34
Number of posts : 13011
Registration date : 2010-04-29
Location : Returned-ed

Learning how to sprite! (Unfinished) Empty Re: Learning how to sprite! (Unfinished)

4/4/2014, 3:00 pm
Oh god I was praying he wouldn't use that char I made As An Example. Also He brings up A good point I don't know the Original or (Cannon as the kids say today) Story of this guy...I should look that up.
Mistah_Jayden
Mistah_Jayden
Spritan
Spritan
Age : 33
Number of posts : 2010
Registration date : 2009-04-06
Location : New York City

Learning how to sprite! (Unfinished) Empty Re: Learning how to sprite! (Unfinished)

4/4/2014, 3:03 pm
Well editing the sprite doesn't entirely mean it's in that specific game's universe unless you'd want it to be.
I had like 2 sections done but the site messed up and I lost it all. Soooooo I'm gonna just continue tomorrow
Rapidfir3Pho3nix
Rapidfir3Pho3nix
Administrator
Administrator
Age : 29
Number of posts : 4906
Registration date : 2009-01-23
Location : Hollow Bastion
https://www.youtube.com/channel/UC0ntn5nE-2rEXLA8GQ7mtsAhttps://rapidfir3pho3nix.deviantart.com/https://discordapp.com/channels/142444698311589888/142444698311589888https://twitter.com/rapidfir3animshttps://www.facebook.com/Rapidfir3Pho3nix/https://www.twitch.tv/rapidfir3pho3nix

Learning how to sprite! (Unfinished) Empty Re: Learning how to sprite! (Unfinished)

4/4/2014, 3:09 pm
Protip: Type out everything in Notepad or something first then copy/paste
Mistah_Jayden
Mistah_Jayden
Spritan
Spritan
Age : 33
Number of posts : 2010
Registration date : 2009-04-06
Location : New York City

Learning how to sprite! (Unfinished) Empty Re: Learning how to sprite! (Unfinished)

4/4/2014, 3:15 pm
Yeah I'll do that, thanks bro.
Back to top
Permissions in this forum:
You cannot reply to topics in this forum