Tips and Tricks for Making Amazing Pixel Art

For discussing and sharing all forms of artwork related to the game

Moderator: Staff

User avatar
BigPapaN0z
Artist
Posts: 123
Joined: Sun Jan 16, 2005 7:19 pm
Location: Indiana
Contact:

Tips and Tricks for Making Amazing Pixel Art

Postby BigPapaN0z » Wed May 11, 2005 8:07 am

Just thought I would lend a helping hand.  I know Tyler made a post about Tsugumo's pixel tutorial; and it's a good starting point; but it's a bit dated and the main purpose of it is observation more than anything.  So with that in mind, I figured I would help open some eyes for anyone that would like a bit of instruction/information/inspiration.

SpriteArt
Gas 13 Gallery (Click English in the left nav box unless you can read russian :D)
Zoggles
My purrty Pixels (Check out his 16 color Dragon on the Misc page! :bow: )

I'll update this list as I find more great pixel art sites.  Keep em tuned in and if you have any good pixel sites, drop me a line so I can add them here!

-BPN
Last edited by BigPapaN0z on Thu May 12, 2005 12:48 am, edited 1 time in total.
[img:256:64]http://www.allacrost.org/staff/user/bigpapan0z/bpn_allacrost_sig.png[/img]
User avatar
gorzuate
Developer
Posts: 2575
Joined: Thu Jun 17, 2004 3:03 am
Location: Hermosa Beach, CA
Contact:

Re: ATTN: All Spriters

Postby gorzuate » Wed May 11, 2005 10:57 pm

BigPapaN0z wrote:My purrty Pixels (Check out his 16 color Dragon on the Misc page! :bow: )


Site not found? :eyebrow:
Image
User avatar
BigPapaN0z
Artist
Posts: 123
Joined: Sun Jan 16, 2005 7:19 pm
Location: Indiana
Contact:

Postby BigPapaN0z » Thu May 12, 2005 12:48 am

Guess I should verify I entered all the links before heading to bed next time.  :)  Thx Phil  :D
[img:256:64]http://www.allacrost.org/staff/user/bigpapan0z/bpn_allacrost_sig.png[/img]
Sylon
Artist
Posts: 760
Joined: Wed Apr 27, 2005 1:03 pm
Location: Cheyenne, WY

Postby Sylon » Thu May 12, 2005 5:12 pm

These links lead to a web of other links that are also helpful.  BPN, thanks a lot!  This stuff is great.  Some of the pixel art these people make are really freaking amazing!
-[Sylon Shanings]-, A Servant of Allacrost.
I owe my allegiance to Roots and only Roots! Hail to the dictator!

"DAD GUMMIT I NEEDA GET MY TORUS DOWN." - Sylon's art jabber
User avatar
Rain
Musician
Posts: 1525
Joined: Sun Aug 08, 2004 6:43 am
Location: Granz

Postby Rain » Mon Jun 06, 2005 12:16 pm

http://www.freewebs.com/moriryuu/main.html

This guy is amazing!  The dragon is absolutely incredible;  'bout shit myself when I saw that sprite.  I think we can get close to that quality.  I have full confidence in you guys!   :approve:
'When Zeon lost his powers, he fell to Earth, and created a giant crator where he hit. His moan destroyed the mountains and the crater was buried by the debris.'

(of Zeon)

Image
Sylon
Artist
Posts: 760
Joined: Wed Apr 27, 2005 1:03 pm
Location: Cheyenne, WY

Postby Sylon » Wed Jun 15, 2005 7:14 pm

ATTENTION ALL SPRITERS AGAIN--

I figured people could use this because it has helped me design my battle sprites very effectively--but only since I don't have a scanner!  And my digital camera isn't fit for this work.

NO SCANNER?  Tired of estimating and resizing digital photos?  COPY AND PASTE THIS TO YOUR DRAWING PROGRAM (40 kb .PNG image) http://www.allacrost.org/staff/user/sylon/GridPaper.PNG

It's GRAPH paper for drawing on.  What you do is, print it out from MSPaint or whatever, and then draw things!!  This could work if you are... :huh: ...A GOOD DRAWER!  Draw trees, awesome scenery, battle sprites for me to colorize with pixels!

On the printed paper, EACH of the big squares are 64 x 64 pixels.  The smaller ones are 8x8, and the smallest squares represent 1 pixel.  There are 40 squares (pixels) per inch on the paper.  MUCH room for drawing large images to implement in game.

STEPS:

STEP 1:

Pick a space of pixels on the paper, like, a 64x64 area or 32x32.  Draw something cool on it!  :D

STEP 2:

Wherever your lines intersect with the pixel squares, FILL IN those pixels with your pencil.  If it confuses you as to which square it intersects, just pick one square to fill in using your gut artist feeling.  :approve:

STEP 3:

Plot the pixels of your finished drawing onto your computer, and start the coloring!

TIPS:

Use a thin pencil like a .5 or .7 millimeter graphite mechanical!!  There are those .2 millimeter PENS out there but you want to be able to sketch into the paper first.  The tiny squares are barely visible though, but if you print them out darker, you might not be able to distinguish them from your own pencil lines on the paper, so I purposely colored the grid to be printed with light gray ink.  I tried printing it darker but I couldn't distinguish it well.

If you don't want to color the image after you plot in the pixels into your computer, send it to me and I'll do it if I have time!  And if Roots allows.

My scanner doesn't work, but I did it at the lab in college and man it stunk because I had to erase pixels as well as darken them in for definition when I wanted to make my scanned image clearer.  It would help to have one and to mess around with the scan settings and magnification levels--I just got unlucky and quit.

If you have a scanner you don't really need the "graph paper way of doing things"--just draw the outline of your character--make sure the lines are solid enough so when you scan the paper those lines show above your draft lines (sketching/measurement/erased lines).  Make sure the settings of the scanner allow your drawing to show clearly enough for you to pixelize.  Then experiment with bordering your scanned image with pixels.
-[Sylon Shanings]-, A Servant of Allacrost.
I owe my allegiance to Roots and only Roots! Hail to the dictator!

"DAD GUMMIT I NEEDA GET MY TORUS DOWN." - Sylon's art jabber
Sylon
Artist
Posts: 760
Joined: Wed Apr 27, 2005 1:03 pm
Location: Cheyenne, WY

Postby Sylon » Mon Feb 06, 2006 2:04 pm

ATTENTION ALL SPRITERS DOUBLE AGAIN--

If you have Macromedia Flash:

For battle sprites, you can draw concept art, without coloring it, then take a digital photo of it or scan it, open up the jpeg or bmp in Flash and trace the lines of the concept art.  Then fill it in with Flash colors, fill in shadows and highlights.

Then you go to file-->export-->export image, and export the image as a .png file, and specify the width and height that you want Flash to export it as.  Whichever dimension is LONGER, you will want to cram that dimension down to fit precisely within 64x64 pixel tiles.  For example, my export image dimensions say "1000 width by 600 height".  I'll re-type the width only so that it fits in multiples of 64 below 512.  I'll put say, 256.  Then, the height will automatically get constrained in comparison to a 256 width so the image is scaled proportionately.  If I make the width 257, the image will still be scaled proportionately, but there will be a lot of leftover space in the image and your monster will take up too many unnecessary battle tiles.

Then take the exported image and modify it pixel by pixel with bitmap program.  Use the 3 flat shades to help, obviously.  And remember to get rid of the anti-aliasing of the edges that Flash will cause automatically.

This technique can obviously be used for art other than battle art too.
-[Sylon Shanings]-, A Servant of Allacrost.
I owe my allegiance to Roots and only Roots! Hail to the dictator!

"DAD GUMMIT I NEEDA GET MY TORUS DOWN." - Sylon's art jabber
User avatar
Jetryl
Artist
Posts: 1485
Joined: Fri Aug 26, 2005 7:35 am
Location: Southern Minnesota, USA

Postby Jetryl » Tue Apr 25, 2006 3:34 am

Random tidbit. I may post more of these; these are usually in response to some C&C asked of me over at wesnoth. Credit for the scanned images in this one goes to Andrew Loomis, Writer of Good Books™.

This is a common mistake I used to make, and one to be avoided.

Image

Return to “Artwork”

Who is online

Users browsing this forum: No registered users and 5 guests