Pixel art online tutorials

dale_coop

Moderator
Staff member
Hi guys,

Because I am not good at drawing, I'v started searching for examples of simple pixel arts, or tools or tutorials.
I found some interesting online ones :
https://lospec.com/pixel-art-tutorials
 

Kasumi

New member
Tutorials:
It's linked in the above list, but just to have it standalone: http://pixeljoint.com/forum/forum_posts.asp?TID=11299 (I consider it THE intro pixel art.)
Post by FrankenGraphics and Myself about Pixel art: http://forums.nesdev.com/viewtopic.php?f=21&t=16999 (My post starts out a bit ranty, I guess. But the end piece of it does analysis of NES background art.)

Tools:
I-Chr: https://kasumi.itch.io/ichr (Disclaimer: I wrote it. :D I genuinely believe it's actually one of the easier ways out there to see graphics you made in a ROM, tools-wise. It also has a forum topic here if you have questions.)
NES Screen Tool: https://shiru.untergrund.net/software.shtml (Simple art program that will force NES restrictions on you.)
NiGo-CHR: https://retrodaddy.itch.io/nigo-chr (Not the most user friendly program, but it's built from the ground up for NES and has some pretty advanced features.)

Misc:
VGMaps: http://www.vgmaps.com/Atlas/NES/index.htm (Ripped maps of LOTS of NES games. Useful for study. I recommend checking out RoboCop3, Mighty Final Fight, and Star Trek as far as games on there that aren't super famous, but still have good graphics.)
Detailed post I wrote on NES graphical restrictions: https://pixelation.org/index.php?topic=10784.msg115062#msg115062
Shorter infographic I made:
bFrf20m.gif


FrankenGraphics' Blog: https://frankengraphics.com/ (Not quite tutorials, but some good thoughts on NES graphics design.)
M-Tee's Blog: http://www.mteegfx.com/ (Not quite tutorials, but some good thoughts on NES graphics design. Some of the meaty info is pretty far back in the blog.)

surt's Open Game Art Gallery: https://opengameart.org/users/surt (He allows some of his work to be used freely, so you can use his awesome art for your own games! Make sure to carefully read the terms of each set you use, though!)
surt's Gallery: http://pixeljoint.com/p/2254.htm (Does a lot of retro pixel art, some of which is NES restrictions.)
Ptoing's Gallery: http://pixeljoint.com/p/2191.htm (Does a lot of retro pixel art, some of which is NES restrictions.)
ryumaru's Gallery: http://pixeljoint.com/p/3304.htm (Does a lot of retro pixel art, though more Game Boy focused than NES.)
 

opt2not

New member
This was my go-to tutorial back when I was starting out in pixel art. I still refer to it today:

http://www.petesqbsite.com/sections/tutorials/tuts/tsugumo/
 
Is there a good tutorial for the NES Screen Tool? I found one video which didn't really show much. I've played with it and not having a ton of luck with it making sense yet.
 

Mihoshi20

Member
Tengen Games North said:
Is there a good tutorial for the NES Screen Tool? I found one video which didn't really show much. I've played with it and not having a ton of luck with it making sense yet.

I found this one just the other day by accident, wasn't even looking for a tutorial on it or YY-CHR but here it was anyways. Just scroll down to about the middle of the page to where it starts specifically talking about NES Screen Tool or use the search for text on page and search for 3. Nes Screen Tool, but it might be helpful to simply read the entire page. It really helped me in understanding the metasprite portion of NESst which was a little confusing at first given the tools poor documentation.

https://www.atelier-betoux.com/2015/07/1-4-nes-graphic-tools/
 

digit2600

Member
www.2dwillneverdie.com

this site is amazing. lots of tutorials, tricks, tips as well as an excellent links section.

the first stop I'd recommend from the links section is to "so you want to be a pixel artist"...

there's enough content and links to keep anyone busy and productive for days.
 

NamelessSeeD

New member
This has got to be the most obvious bone-headed question but am I understanding that the maximum height of a character sprite as it appears in a game should be no more than 32pixels by 16pixels?

I have a collection of (original) sprites from a webcomic I use to run that I'd like to re-purpose, but they're huge. Easily twice as tall.
 
NamelessSeeD said:
This has got to be the most obvious bone-headed question but am I understanding that the maximum height of a character sprite as it appears in a game should be no more than 32pixels by 16pixels?

I have a collection of (original) sprites from a webcomic I use to run that I'd like to re-purpose, but they're huge. Easily twice as tall.

You can go bigger. Editor has dropdown for 8x8 tile max size (64x64 pixel), though it appears to glitch at that size (7x7 tile works). So you could have 64x16 pixel sprites (6x2 tiles), just have to remember not to exceed 64 tiles on screen (or tiles will vanish).
 

WolfMerrik

New member
Regarding Pixel editors:

What are some that people use?

I have been desperately looking for one that allows me to load a background/reference image (much like in an image program when doing an SVG trace)
I have had no luck in finding one so far sadly.
 

dale_coop

Moderator
Staff member
I use a classic (and free) Paint.NET with a custom palette (and I set the default parameters to disable aliasing and using pixelate, for all the tools I use)

Paint_net_NESMakers_edition.png
 

Kasumi

New member
WolfMerrik said:
Regarding Pixel editors:

What are some that people use?

Aseprite.
2pLrdNB.gif

Layer, Add reference layer. Just be aware you can only resize it using the move tool. (The four arrows icon shown in the gif) Then just add another transparent layer above the ref layer (layer, new layer) and get to work!

Paint of Persia allows a similar workflow, but isn't really as good. Still free, though! Graphics Gale has a concept of layers, but it's layers can't be a different size than the pixel resolution. Also free, though.

But I prefer Aseprite. Aseprite is very worth the money. If you have any Aseprite questions, free free to ask.
 

WolfMerrik

New member
Kasumi said:
Aseprite.
Layer, Add reference layer. Just be aware you can only resize it using the move tool. (The four arrows icon shown in the gif) Then just add another transparent layer above the ref layer (layer, new layer) and get to work!

This looks like EXACTLY what I was looking for!
You seriously rock Kasumi!
 
Top Bottom