~Spriting Faq~ - Printable Version

~Spriting Faq~ - Printable Version

+- The VG Resource (https://www.vg-resource.com)
+-- Forum: Archive (https://www.vg-resource.com/forum-65.html)
+--- Forum: July 2014 Archive (https://www.vg-resource.com/forum-139.html)
+---- Forum: Creative Zone (https://www.vg-resource.com/forum-86.html)
+----- Forum: Spriting and Pixel Art (https://www.vg-resource.com/forum-14.html)
+----- Thread: ~Spriting Faq~ (/thread-6701.html)

Pages: 1 2 3

~Spriting Faq~ - mozzy - 05-22-2009

Thanks to Shawn for the suggestion!

Post commonly encountered questions with their answers in this topic, and I'll add them to the first post, which will be stickied for all to see.

After this topic is sticked with the faq, anyone who posts a question thats in the faq, or didn't attempt asking in the faq topic will get a warn + the topic will be deleted.

Q:What's pillow shading, and what's so terrible about it?
A: Pillow shading is a term for shading that assumes that the 'light source' for a sprite, the all-important marker used as a reference for where shadows should be, is located inside the sprite itself:
[Image: PillowExample.png]

See how the sprite on the left looks like a flat circle, and the sprite on the right looks more like a sphere with depth? The sprite on the left shows why pillow shading is a poor way to shade. Shadows are intended to show depth, so we can tell more about a shape than just its outline; pillow shading, however, doesn't.
Keep in mind, sometimes you'll pillow shade unintentionally. Just try to remember where your light source is, and keep an eye out for it.

RE: ~Spriting Faq~ - Shawn - 05-22-2009

Ily, Moz. [Image: kiss.gif]

RE: ~Spriting Faq~ - Omega - 05-22-2009

whats so bad about pillow shading?

RE: ~Spriting Faq~ - Omegakyogre - 05-22-2009

The thread, it is so bare.

What's pillow shading, and what's so terrible about it?
Pillow shading is a term for shading that assumes that the 'light source' for a sprite, the all-important marker used as a reference for where shadows should be, is located inside the sprite itself:
[Image: PillowExample.png]

RE: ~Spriting Faq~ - Shinigami Seika - 05-23-2009

Is it better to do the outline with a darker colour then the inside or black?

RE: ~Spriting Faq~ - GrooveMan.exe - 05-23-2009

I had a bunch of old shit that I used as visual aides when explaining things, feel free to butcher these into something more useful.
[Image: hueshift2go9.png]

RE: ~Spriting Faq~ - Vipershark - 05-23-2009

why is dithering so awful and lazy
and if you ever use it then use it extremely sparingly

RE: ~Spriting Faq~ - Adam - 05-23-2009

And, once again, Vipershark is wrong!

Dithering is something that takes practice. You should use it in areas that texture would need to be applied- not like a glass texture, more like a sand or wood texture. More gritty things make dithering look better. Arachne from Pixeljoint and TIGSource explained it quite well:

Quote:Dithering can look jarring if it's not used right. That's all, as far as I know. It's just a matter of knowing what it does so you can choose what's most appropriate in different cases.

a) Dithering adds texture. More difference between the colors makes for a rougher texture. So dithering doesn't work very well for smooth or slimy surfaces. In this case, your octopus seems textured a bit like sandpaper in some parts.

b) Regular dithering patterns can make surfaces look plane. This can look out of place on curved or organic objects. Random pixels can break that grid and make the object look less uniform and angular, but it's also more noisy. However, if the colors are too different, you might end up with very pronounced single pixels, which will look bad in either case.

Pixeljoint has many examples of dithering used correctly- Here's a few:

http://pixeljoint.com/pixelart/19806.htm
http://pixeljoint.com/pixelart/5646.htm
http://pixeljoint.com/pixelart/34152.htm
http://pixeljoint.com/pixelart/32454.htm

-Dex

RE: ~Spriting Faq~ - Torres. - 05-23-2009

Holy fuck!!!!!!!!!!!!!!!!!!! The last three are sprited?????!!!! *faints*

If someone would make a faq on animating I would make one on something else

RE: ~Spriting Faq~ - Cobalt Blue - 05-23-2009

GIF Animation Tutorial for Dummies
by Metaru

1)google "Unfreez". Download. (Disclaimer: you can use any program you want/can, i'll use unfreez for this because its simple, small and free)

2)Open MSPaint or you Graphic edition program of preference.

What is an Animation?
3)An animation its nothing but a sucesion of images wich are showed at a certain speed thus creating the optical ilusion of movement. Lets say we want to create a simple animation of a ball bouncing on the floor. so for that, we need a ball, and a line that represents the floor.
[Image: s6oodh.png]

4)Since we know that an animation is a sucesion of multiple images, we need to draw each stage of the ball from when it floats in the air, falls and touches the ground create the ilusion of movement. each one of these images will be known as Frames. save them as 1, 2 and 3.
[Image: s6oodh.png]

5)Now, Open Unfreez, and Click and drag the images in the proper order-otherwise your animation will not make any sense-.
[Image: 2118fx5.gif]

click on Make Animated GIF and voilá, you created an animation.
[Image: 55qb7q.gif]

6)Now you're wondering why it looks so silly. Its because the while the animation is indeed working and you see movement, there is no transition between the end of the animation and the start. in order to create a proper loop animation you need to conect the end with the start of the action. in this case is easy, because all you need is a frame for when the ball goes up again after bouncing, and for that you can use again the 2nd frame of our current animation. open unfreeze again, drag either the 3 frames you created first or the animation gif you created, both work, and then add again a copy of the frame 2. click on Make Animated GIF again and the animation will be complete.
[Image: 2emcvo5.gif]

7) now there is one last factor that you need to know if you plan to work on something more elaborated. this is the Frame Delay or Frame Speed and its often displayed as #/100(miliseconds), wich is basically how long a frame is displayed untill the file displays the next one. while you can indeed set the frame delay to 0(in wich case the frame would simply not appear) you must be aware that most browsers(such as Firefox, IE and Opera) will not be able to render anything below 3/100.

Conclusion:
This tutorial is aimed basically for those who want to learn the core mechanics of animationg using the GIF format. understanding this is just the first step, the rest is up to your own practice and learning.

RE: ~Spriting Faq~ - Torres. - 05-23-2009

Great tutorial. Up in a rep

RE: ~Spriting Faq~ - Vipershark - 05-23-2009

can you do a tutorial for something besides unfreez
I'd rather not have to save every individual frame as a separate file
is there a good gif maker where you can just copy and paste your frames from a spritesheet instead of saving each one

RE: ~Spriting Faq~ - GearThepat - 05-23-2009

you can also animate in Gimp, you make each frame of the animation into layers,

Layer 1
Layer 2

each is an frame, and when you're done with it, you change the extension to gif.

RE: ~Spriting Faq~ - triptych - 05-23-2009

if you're okay with just switching to something other than paint

download graphicsgale from their site and get the keygen by CORE because every other keygen is a trojan or doesn't work.

or buy it if you dont want to cheat

RE: ~Spriting Faq~ - Cobalt Blue - 05-24-2009

(05-23-2009, 09:35 PM)Slowshark Wrote: can you do a tutorial for something besides unfreez
I'd rather not have to save every individual frame as a separate file

Its not a "unfreez" tutorial. its meant to explain the most basic concepts of how to create an animation. basically every gif animation progran works in the same way, with the obvious specifical methods.

(05-23-2009, 09:35 PM)Failshark Wrote: is there a good gif maker where you can just copy and paste your frames from a spritesheet instead of saving each one

No Gif program will read and understand every sprite from an image and compile it into a gif. such thing has to be done by hand. some more elaborated/complex softwares allows you to select and copy the specific parts of an image and re arrange them as an animation.

yes, as terrible it may be, you have to do it by hand.