Java-Gaming.org    
Featured games (81)
games approved by the League of Dukes
Games in Showcase (498)
Games in Android Showcase (115)
games submitted by our members
Games in WIP (562)
games currently in development
News: Read the Java Gaming Resources, or peek at the official Java tutorials
 
    Home     Help   Search   Login   Register   
Pages: [1]
  ignore  |  Print  
  ::Pixel art resources thread::  (Read 26855 times)
0 Members and 1 Guest are viewing this topic.
Offline zingbat

Senior Member




Java games rock!


« Posted 2005-03-24 10:00:25 »

This thread has links and tips for people who are interested in doing some pixel art.

This is not just cool for 2d and mobile games, its also cool for application icons and buttons that use images. Even if we aren't artists its good to have some basic knowledge of pixel art because, well, we ain't going to get an artitst just to do a couple of icons for us.

I have been digging in this stuff for some time and found some cool tuts that will make even the biggest art noob do presentable pixel art.  Cool

Forums:

http://drilleddice.azuretek.com/pixelerate/
http://www.pixeljoint.com/forum/

Important sites:

Skip this for more noobe like easy tuts.
Check the links section on this site. Lots of excellent pro tuturials. There are also cool resources available.

http://www.spriteart.com/main.html

Sites with basic tutorials:

http://www.idigitalemotion.com/tutorials/guest/pixel/pixel.html
http://www.pixelfreak.com/tutorial/index.html
http://www.orangepixel.net/developers/articles/mobile.graphics.htm

More advanced tutorials that focus illumination, sketching, outlines and proper anti-aliasing for images with a few pixels:

http://www.natomic.com/hosted/marks/mpat/index.html
http://www.19.5degs.com/element/832.php
http://www.gjdesigns.dk/tut02.shtml

Good freeware tools:

Google for Graphics Gale Free and Screen Hunter Free

Old Amiga games from where you can obtain nice pixel art with a screen grabber or something. If you download the WinUAE emulator you can then find adf disks with games on this sites:

http://www.back2roots.org/
http://amigos.amiga.hu/ancientoys/c.html

Check for Chaos Engine, Shadow of the Beast, Eye of the Beholder, Cadaver, Magic Pockets for some examples.

Artist sites:

http://users.erols.com/mjonesgraphics/Dragonseyrie/index00.html
Offline zingbat

Senior Member




Java games rock!


« Reply #1 - Posted 2005-03-24 10:15:22 »

A text tutorial speacking of proportions:

Pixelart Guide / Howto
By Brian Poulsen <brian@fuz.dk>
---------------------------------------

Introduction:
-----------------

Though I don't think it needs all that much of an introdution I thought I would make one anyways.

Pixelart is a still growing trend or style. Pixelart mostly reminds me of the time when Commodore
64 was THE thing to have.
It was chunky and had very few colors. I don't know if pixelart getting more and more popular has
something to do with the overall fashion trends. But around here retro style clothes is gonna be
the big thing this sommer. Even our national soccer team is now dressed in some Retro styled Hummel
shirts. Ohh well .. back to the pixelart deal.

Hey I want to start doing pixelart.. What do I need ?
-----------------------------------------------------

One of the nice things about pixelart is that you can actully use any application that has the pencil
tool. However a program which has layers and a few tools, can be a big advantage.
A good idea is to pre define some brushes ( if possible ), with the most used shapes, such as lines,
corners and whatnot.

So if I was to make a pixelized version of [insert object here] how much should I scale it down ?
-------------------------------------------------------------------------------------------------

My answer would be that it pretty much all depends on how big(small) you want it. If you've seen my
pixelized apartment, I started out by making the couch. And from there on I tried to make the
livingroom area the size it would be if the couch was that size. So I started to draw some lines, but
quickly realized it wouldn't be as easy as I had first thought. So I decided to measure my couch and
compare that size to the size I had made it in pixels. It turned out I had made the couch about
1 pixel = 4 cm ( about 1.5 inches ).

From there on I measured the length of each wall and the height to the sealing. As I took the project
quite seriously and wanted a good result I decided to measure everything.

I often see a pixelization as a challenge. How small can I infact make the object, where it's still
recognizable. 32 x 32 ( the standard icon size for windows and mac OS 9. Take my cigarette boxes..
They are all made in  32 x 32. All the objects in my Network diagram is 32 x 32.

Any advice before I start?
--------------------------

When I make pixelart I draw in a 3D kind of style ( AKA Copland Style ). This way everything looks
more like an object and not just a picture.
And drawing everything as if you looked at it head on, is not all that of a challenge. So yes it
could be a good way to start. But I'd still say, draw it in 3D.

Start out with simple objects which are not too complicated. Find an old shoebox or something like
that. It's squared and doesn't really demand all that much. If you start doing something too
complicated you might get frustrated and loose interest. Maybe your patience isn't cut out for it.

The apartment projects was actually one of the very first things I made, so I kind of broke my own
advice. When you first get a hang of it, everything will take less time, believe me on that. the
livingroom took about the same time as I used for the rest of the apartment.

As another advice, study other peoples work. you'll quickly catch all the small details. Like which
angles are good to use. I use the angle 2 pixels horizontal one up, 2 pixels horizontal etc. etc.
using the clean 45 degree angle will cause you some problems.. believe me.
I experimented a lot at the beginning and came to the conclusion that a 27.5 degree angle is by far
the best.

I want to give my objects shadow to add life. Any "rules" I should use ?
------------------------------------------------------------------------

Keep the shadows consistent. By that I mean, if you throw a shadow to the right, don't start making
shadows to the left. It will look strange.
Study real life objects with shadows on it. An example: An object that throws its shadow to the right
will always be lighter on the left side ( front side or whatever you'd call it ).

You didn't mention [insert subject here]. got any tips about it ?
----------------------------------------------------------------------------------

If you feel there's something I didn't mention feel free to email me <brian@fuz.dk> and I'll do my
best to answer your question. I'll add it to this guide.

Related links.
-------------------

Pixel zentrum < http://www.pixelzentrum.de>
Site focused on pixel art. the site has some very nice pixel brushes

Icon Factory < http://www.iconfactory.com>
The home for icons. Look at the icons for OS 9.2 >. They are all pixel style.
The icons for OS 10 ( OS X ) is more vector and picture like.
There's a wonderful icon tutorial. Icon creation and pixel art is basically the same.

E Boy < http://www.eboy.com >
A Wonderful collection of pixel art.

Also you might want to check out my link section. It has other links there as well.

PS... I might make this graphical eventually ( with pictures etc. ). People have bugged me about this
guide for a while now so I thought I would
just go ahead and post it and then add graphics later.
Offline kevglass

JGO Kernel


Medals: 164
Projects: 23
Exp: 18 years


Coder, Trainee Pixel Artist, Game Reviewer


« Reply #2 - Posted 2005-03-24 10:22:31 »

I'll happily make this stick, good work. Could you possibly move the tutorial to a webpage and link it here as a resource, just to keep things consistant.

Kev

Games published by our own members! Check 'em out!
Legends of Yore - The Casual Retro Roguelike
Offline zingbat

Senior Member




Java games rock!


« Reply #3 - Posted 2005-03-24 11:54:17 »

Heres a tutorial on my own. Im glad i have remenbered myold Amiga tricks with all these tutorials.

Some important terms in pixel art: pixel art, sprite art, outline (sketching), outline (illumination), expanding, filling, shadows, 2:1 lines, 1:2 lines 1:1 lines, 2:1:2 lines, texturing, proportion, shading, light source, intensity, pillow shading, equidistant shading, gradation, anti-aliasing.  

General steps on doing pixel art on complex subjects:

1. Research and document your research on colour, texture, perspective, form (proportions) and anatomy (what parts compose)  of your subject. If possible draw each anatomical part separatly first to study it.

2. Choose your tools. The minimum is the pencil and some layers are helpful to try things before commiting to it. If layers are not available save often diff versions of your sprite.

3. Sketching the subject on black on white then fixing outline pixels on your outline lines to look more pleasant. Using the apropriate 2:1, 1:1, or 1:2 lines when necessary.

Hint: If you are having trouble working with a small canvas (for ex. 32x32 or 16x16) use a bigger one like 128x128 or 64x64, then shrink it down to half the size twice, BUT make sure you correct the pixel colors in every step. For example : draw in 64x64; shrink to 32x32; correct pixels; shrink to 16x16; final correction.

4. Choose the colors to use. Options are mixing strong pastel colors with strong neon colors, but its allways simple and less risky to use strong pastel collors.

Some pastel colors: yellow=255,245,155; blue=136,168,262; brown(176,128,96); red=208,100,89; green=145,186,188.

5. Choose textures to use. Not all textures are good for pixel but other pixel art can provide cool textures. Some fotographs images are also cool. The texture painting tool and the gradient paint tool is very useful in here.

6. Determine the size of each pixel for the proportions. For example the number of pixels in a side of a bench versus its real size.

7. Pick up a light source or sources and light intensity for shading and stay concistent with it.  If, for example a big tile, has a light source like a tourch lightshould adjust itself to the bumps of the tile and the distance to the light source (some knowledge of 3d graphics and lighting is good in here). Avoid pillow shading -- light source is in the observers position.

Setup a palete with color gradations. Use an indexed color image format. Use quaddratic color gradations for intensity changes -- that is halve color intensity and had a certain intensity constant to draw a darker shade  outline.

8. Work with the outlines.

8.a. Soften the outlines by reducing/increasing the intensity of interior outlines so that they blend better with the rest of the sprite. Also take in consideration different cases where an outline meets others.

8.b. Gradate outline pixels according to the lighting model you have choosen by changing intensity of the outline pixels slightly.

8.c. Remove outlines completely (usually interior outlines) if they don't add anything to the artistic appeal of your sprite.

8.d. Antialiase your sprite contours and outlines. Take in consideration that the classic algorithm doesnt work well for pixel. Check this page for a better solution:

http://www.natomic.com/hosted/marks/mpat/aa.html

9. Thats it.

Anything you want add just post it.
Offline zingbat

Senior Member




Java games rock!


« Reply #4 - Posted 2005-03-24 12:01:13 »

Quote
I'll happily make this stick, good work. Could you possibly move the tutorial to a webpage and link it here as a resource, just to keep things consistant.

Kev


Sorry i don't have an homepage of my own but if you can copy anything in here to your own homepage and change it to be more presentable, there is no problem with me. Wink
Offline kevglass

JGO Kernel


Medals: 164
Projects: 23
Exp: 18 years


Coder, Trainee Pixel Artist, Game Reviewer


« Reply #5 - Posted 2005-03-24 12:52:56 »

Geeeeez, someone give the man a homepage! Smiley

Kev

8: Undefined index: online
File: /home/jgo/public_html/Themes/default/Display.template.php (main sub template - eval?)
Line: 151