You are Here:
Step-By-Step Spriting

Author (Read 3322 times)

Step-By-Step Spriting
« on: June 10, 2010, 05:31:46 PM »
 

SorceressKyrsty

  • Trained Member
  • *
  • 41
    Posts
  • LV: 6
  • Gender: Female
  • Bwup.
    • View Profile
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:
(click to show/hide)

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:

(click to show/hide)

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.
 

Re: Step-By-Step Spriting
« Reply #1 on: June 10, 2010, 06:41:56 PM »
 

Valdred

  • Ethereal Devastator
  • ****
  • 256
    Posts
  • LV: 13
    • View Profile
awesome. Could you make one for xp humans?
 

Re: Step-By-Step Spriting
« Reply #2 on: June 13, 2010, 11:43:23 PM »
 

Dweller

  • Ethereal Devastator
  • ****
  • 334
    Posts
  • LV: 44
  • Gender: Male
    • View Profile
    • Subir de Nivel
Very good example
Dwellercoc
(click to show/hide)
 

Re: Step-By-Step Spriting
« Reply #3 on: June 14, 2010, 12:27:23 AM »
 

lonely_cubone

  • Transcended Spirit
  • ***
  • 227
    Posts
  • LV: 6
  • Gender: Male
  • OMG IT'S A CUBONE
    • View Profile
This is really helpful. Thanks!
 

Re: Step-By-Step Spriting
« Reply #4 on: June 14, 2010, 05:07:50 PM »
 

Dweller

  • Ethereal Devastator
  • ****
  • 334
    Posts
  • LV: 44
  • Gender: Male
    • View Profile
    • Subir de Nivel
I tried to follow your tutorial step by step to sprite a Sword. I´m very happy with the final results:

(click to show/hide)

I have a lot of work to improve my spriting skill but I feel like I "lvl up" after this try.
Dwellercoc
(click to show/hide)
 

Re: Step-By-Step Spriting
« Reply #5 on: June 14, 2010, 06:58:22 PM »
 

DeathLock

  • Astral Trancist
  • *****
  • 586
    Posts
  • LV: 53
  • Gender: Male
    • View Profile
@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].

 

Re: Step-By-Step Spriting
« Reply #6 on: June 16, 2010, 01:47:06 PM »
 

SorceressKyrsty

  • Trained Member
  • *
  • 41
    Posts
  • LV: 6
  • Gender: Female
  • Bwup.
    • View Profile
@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.
 

Re: Step-By-Step Spriting
« Reply #7 on: June 23, 2010, 01:01:22 AM »
 

Diokatsu

  • Wind God
  • Lexima Warrior
  • *******
  • 2805
    Posts
  • LV: 52
  • Gender: Male
  • Fuck yes.
    • View Profile
This is really cool. Dio gives his approval.
 

Re: Step-By-Step Spriting
« Reply #8 on: August 04, 2010, 12:09:50 AM »
 

earthnite

  • Transcended Spirit
  • ***
  • 194
    Posts
  • LV: -53
  • Gender: Male
    • View Profile
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.
i ran to the shimmering light in the darkness--only to find a freight train coming my way
 

Re: Step-By-Step Spriting
« Reply #9 on: August 04, 2010, 12:15:46 AM »
 

WhiteRose

  • Trying to code in Ruby
  • Moderator
  • Lexima Warrior
  • ***
  • 2347
    Posts
  • LV: 127
  • Gender: Female
  • <3
    • View Profile
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.