Step-By-Step Spriting

Started by SorceressKyrsty, June 10, 2010, 11:31:46 am

Previous topic - Next topic

SorceressKyrsty

Hi everyone 'w')/

I do a lot of pixelling for games and things all the time, and I like to think I'm getting pretty good at it.
I happened to basically do a step-by-step picture series when seeking critique (VERY IMPORTANT) so I thought I'd post it :3.

Now, if what you're spriting is something that people know of, etc, GET A REFERENCE. It's the most important item you'll have.
It can really affect how your work turns out.

I had help with this sprite because I was having difficulty with the shape. However, if I post another topic, I will go over pixel tracing, a handy technique and can be almost invaluable.

Today I'm spriting the Final Fantasy VIII airship, the Ragnarok.
This is my reference:
Spoiler: ShowHide


Step One: Basic Shape
I suck at copying, so my much more skilled friend Archeia_Nessiah did a basic sketch for me.
You might think this is sort of cheating, but...oh well!

Now, once that's done, we FINALIZE the lineart. In order for it to be sexy, the lineart should be 1px. Just one dot. More than that looks unprofessional and sketchy.

Now we create a palette of the colours we're going to use. I used silvers, blacks, reds and oranges for the Ragnarok. A lot of the time you'll have to play around with colours, but having a palette to reference is very handy and saves time :3

(Palette is in the top corner)
Now, start shading were the shadows would be. Shadows should come first during shading because highlight can be overpowering and you'll lose your place.
I started with the windows.

In order to give your work a professional quality, create a dark tone of all your different hues and change the lineart of the different areas.
This makes your shadows and lineart blend. BLACK IS A BIG NO NO. Black detracts from your sprite and dulls your colours.
Even when creating 'blacks', use desaturated blues and purples. It will look black but will not have the same affect that black does.
This is what I had after version 1:


But there's WAY too many colours here. It's too busy, and it looks pillow shaded.
Pillow shading its filling the area around the lineart with a dark tone and then the middle having a highlight, rather than paying attention to where your light is coming from. It looks horrible and should be avoided at all costs.

Now I sought critique and started redoing my shading. Critique is GREAT. Sometimes we fail to see flaws in our own work that others won't miss. Don't be afraid of seeking critique!

So, I played around with it, messing with the windows, etc:

Spoiler: ShowHide





I'm still not quite satisfied, and will probably work on it more later. I spent almost five hours on this.
Artwork is something to be appreciated, and time usually means you've worked hard and put quality into it.
This is what I have:


Now the sprite itself is too big to go in my game, so I resized it by 50%. This is easy. You can use paint for it and not get any horrible artifacts. You just need to have a white background, select and cut the image. Now go to the little icons underneath your tool and brush options and select the lower one. This creates transparency. Paste, and then resize by 50% using shrink/skew.
Deselect and then shrink your overall canvas. You're done!

And this, my friends, is the Ragnarok in action:



Don't be shy at posting questions/queries :3
The sound of a bubble popping.

Valdred

awesome. Could you make one for xp humans?

Dweller

Dwellercoc
Spoiler: ShowHide


Dweller

I tried to follow your tutorial step by step to sprite a Sword. I´m very happy with the final results:

Spoiler: ShowHide


I have a lot of work to improve my spriting skill but I feel like I "lvl up" after this try.
Dwellercoc
Spoiler: ShowHide

DeathLock

@SorceressKyrsty: Great work, although try some anti-aliasing to have a smoother surface. And never re-size anything like that, it just makes it look compressed and ugly.

@dwellercoc: The scanned image should only be a guide, don't work on it directly. First off, work on the outline [1 pixel point is enough], fill it up with the basic color. The final product you have looks blended and hard to see the shading properly [don't save your images as a JPG, it's hard to make out the shading and makes it look blended and horrible].


SorceressKyrsty

@DL: Yes, I know about the resizing, but by that point I was over working on it and didn't feel like respriting at a smaller size.
I probably should anti-alias that...might do that later.

@dwellercoc: I probably should of detailed better. DeathLock covered it pretty much perfectly, though.
The sound of a bubble popping.

Diokatsu

This is really cool. Dio gives his approval.

WhiteRose

Quote from: earthnite on August 03, 2010, 06:09:50 pm
if you import the picture in your game and get rid of the white background and then resize it using Microsoft Office Picture Manager the results are much better.

You shouldn't even have a white background at all once you've created the lineart of the original sketch, assuming you're working with an image type that allows transparency such as .png.