Sprite Tutorials :)

View previous topic View next topic Go down

Sprite Tutorials :)

Post by Ace on Fri Oct 22, 2010 4:12 pm

As an experienced sprite designer and animator, I understand it takes work to get to the point of designing any character you want out of tiny squares of light, so below are the most useful tutorials on the web for teaching you the basics of what I know, if you decide you want to do some characters yourself. Smile


Tutorial 1: Outlines

[You must be registered and logged in to see this link.]

I can personally attest that when you learn how to draw pixel outlines (particularly curvature and angles), you have mastered the ability to use pixels as your virtual 'pencil'. You can then grasp how to 'draw' in pixels as you would with a pencil stroke. Unlike an ordinary pencil, you can't really drag your hand across the paper with pixels and achieve anything decent -- especially at so small of sizes -- but, instead, you must practice getting a sense for the very few different patterns of lines that pixels can make in the form of curvature and angles. Pixels aren't very precise, but when you learn how they work, they can do anything you want them to do. Just remember -- pixels should be thought of as diagonal lines (similar to polygons) and should be used as such when drawing curves on small sprites such as this one. Their mass fills them out and they appear as a dot on your screen. Japanese people call them dots. Pixel art is, essentially, dot art, and dots are like blobs of light that blend and blur into one another like ink. They're fun to play around with when you learn how to use them this way. Smile




Tutorial 2: Shading

[You must be registered and logged in to see this link.]

Although there are different styles of shading that you can use on your outlines (including the lack of an outline altogether), a good sense of the 3D shape of your object really helps here. In my opinion, Capcom sprites (especially Ryu or Sagat from the Street Fighter Alpha series) are the best way to learn how to shade. Also, an important note about Capcom sprites is that they only use 16 colors -- including transparency -- so, if you want amazing looking sprites, take it from me, sometimes less is more.





Tutorial 3: Selective Outlining (Selout)

There aren't many awesome tutorials out there for this aspect, but the site listed above has a thing called a 'Scyther' that isn't bad at all at illustrating exactly how to perform the technique. Rather than posting a link to that same site, I will post an edited version of the image itself:

[You must be registered and logged in to see this image.]

As you can see in the image above, the black arrows point to where "selout" occurs and the red arrows point to where we've preserved the outline. We have effectively "selected" parts of the outline to bring more definition to the shape of our sprite.

The "selout" can be done in multiple levels as well:


[You must be registered and logged in to see this image.]

In the above image, the blue arrows point to the 2nd level of the "selout" process, which is essentially "rounding" your sprite's edges into the foreground or background with lighter or darker colors. Since lighter colors pull forward, and darker colors push away, you effectively achieve a 3D sense very quickly in your sprite.

Also, another purpose of the "selout" process is to achieve some sense of anti-aliasing (which simply means we're trying to get rid of the jagged-edge look of our sprite). This applies to the inside of the sprite just as much as it applies to the edges of the sprite. As you can see on the forehead, especially near the eye and the horn, the lighter pixels butt up against a darker set of pixels, but, in order to achieve the anti-aliasing effect, there is a middle color introduced between the two (which is simply one of the colors already used in the sprite that happens to be of a similar intensity and hue).

The wing is a perfect example of an anti-aliased line. If you look at the pink/purple arrows, these point at the transition of our line as it follows a 'smooth' wavy arc. If you look very closely however, some pixels do not even exist (i.e. they are blended in with the color the line is currently touching). As you can see, the line on the wing actually represents a very very thin flowing (convex) ridge along the contour of the wing itself. What the line actually represents is the shadow cast by this thin tiny ridge with respect to the light source against the wing/claw. Ultimately, anti-aliasing is meant to smooth the transition between two colors on rounded surfaces. NOTE: NEVER apply anti-aliasing to hard/angular edges such as the exact edge of a rock face. A 'good' sprite is one that looks convincingly like what it's supposed to be. Rocks have hard edges, and are more reflective, so if anti-aliasing is applied, it looks like the rock is more of a pillowy-cloud than a hard and jagged rock. Just stuff to keep in mind.




Tutorial 4: Animation

I will write this tutorial up myself when I get the time to do so. For now, go play with Graphics Gale. Test out the stuff you've learned here and try drawing an animation of some sort yourself. You'll be surprised at what you can do already. Smile
avatar
Ace
Admin

Posts : 60
Join date : 2010-09-20
Age : 33
Location : LA, United States

View user profile

Back to top Go down

Re: Sprite Tutorials :)

Post by safwat1995 on Sat Oct 23, 2010 2:31 pm

Thank you, extremely useful!

safwat1995
Admin

Posts : 2
Join date : 2010-09-18

View user profile

Back to top Go down

Re: Sprite Tutorials :)

Post by Ace on Sun Aug 11, 2013 7:21 pm

Pixel Art Tutorial -- Everything you need to know to get started right.

[You must be registered and logged in to see this link.]

_________________
[You must be registered and logged in to see this link.] [You must be registered and logged in to see this link.] Online Fighting & Roleplay Game
avatar
Ace
Admin

Posts : 60
Join date : 2010-09-20
Age : 33
Location : LA, United States

View user profile

Back to top Go down

Re: Sprite Tutorials :)

Post by Sponsored content


Sponsored content


Back to top Go down

View previous topic View next topic Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum