Register a SA Forums Account here!
JOINING THE SA FORUMS WILL REMOVE THIS BIG AD, THE ANNOYING UNDERLINED ADS, AND STUPID INTERSTITIAL ADS!!!

You can: log in, read the tech support FAQ, or request your lost password. This dumb message (and those ads) will appear on every screen until you register! Get rid of this crap by registering your own SA Forums Account and joining roughly 150,000 Goons, for the one-time price of $9.95! We charge money because it costs us money per month for bills, and since we don't believe in showing ads to our users, we try to make the money back through forum registrations.
 
  • Post
  • Reply
AntiPseudonym
Apr 1, 2007
I EAT BABIES

:dukedog:
Finally born from the depths of the Game Development Megathread over in Cavern Of Cobol, it's the oft delayed pixel-art thread! This is just a good general place for all of us to brush up on our pixel-art skills, share our creations and get some good old honest C&C.

So what IS Pixel Art? Isn't all digital painting technically 'pixel art' since it's done with pixels?

No. This is pixel art:

Source: Dan Fessler

While this is NOT pixel art:


Pixel-art specifically refers to working with each pixel individually and choosing each color carefully, rather than working on a wide canvas with unlimited colors. Color and canvas-size restrictions are normally self-imposed, but adhering to them is what sets pixel art apart and gives them their unique style. There is a fair bit of wiggle-room as to where the boundaries lie between pixel-art and other forms and what tools are acceptable, but as a general guideline if you're not spending a majority of your time zoomed in to 4x or above, working with a single-pixel brush and carefully managing your color palette, then you're probably not doing pixel art.

If I do something at a higher resolution/color limit then just downscale it, does that count?

Yet again, no. What makes pixel-art stand apart is the process, and the effect that has on the final product. When each pixel and color matters, the way you go about creating your art changes significantly, as well as teaching you new ways to approach certain problems. Not to mention rescaled art tends to just look fuzzy, and when you're working with such small resolutions every single pixel should be absolutely deliberate as even the smallest changes can have a huge effect on the final piece.

So is pixel-art only useful for creating hipster retro 2D games?

No, pixel art isn't just restricted to sprite/tile based games. It can be used for low-fi 3D and general art pieces quite well. Both are worth exploring even if you don't plan on making a 2D game, as they really make you think about every element and can pose some interesting challenges with expressing form in limited spaces and working with a limited palette.

Some examples of non-2D-game pixel art:


Source: Elk from Pixeljoint (And yes, that IS pixel-art)


Source: Kenneth Fejer

TERMS:

Anti-aliasing:
Anti-aliasing is the practice of 'softening' hard edges by placing transitional color pixels in between areas that have a hard change between two colors. Without anti-aliasing, curved surfaces can look incredibly choppy/pixellated, which may or may not be the intent. However, be wary of any 'automatic anti-aliasing' in your art package, as it may blow out your color budget by introducing subtle color changes that are difficult to pick up. It's generally recommended to do all your anti-aliasing by hand.

It's also possible to over- or under-antialias, that can make shapes look incredibly hard or way too soft. It's generally recommended to keep anti-aliasing to a single pixel-width, any more than that will just look blurry.



Banding:
Banding is when you have transitional colors (Like a gradient) that have consistent and noticeable widths. This can normally be solved by dithering the two colors together, adjusting the width of the color band at certain places to break it up a bit, or just being lazy and adding an additional transitional color or two. Or even do both!



Stepping:
Stepping/banding generally occurs when two separate rows of pixels line up and create very blocky-looking pixel groups. This can generally be avoided by ditching a few pixels on one of the rows in order to break up the groups.



Pillow-shading:
Pillow-shading can generally be summed up as having the shading get darker towards the edges of an object, which gives objects a 'pillowy' appearance. Doing this means generally means that the object loses a lot of depth an definition, and can make your art look incredibly amateurish. Make sure you work with a clear and defined light-source, and have a good understanding of how light affects 3D surfaces.



Sel-out:
Sel-out is one of those annoying terms that doesn't have a definitive definition and thus can mean different things to different people. It stands for 'selective outlining', and can mean one of 3 things:



- Using different outline colors on different parts of the sprite rather than using a single flat color. Sometimes can have lighting on the outline to help define the form.
- Only outlining certain parts of the sprite to bring focus to them or to differentiate materials.
- Anti-aliasing the edges of a sprite to blend in with a neutral background color in order to reduce the hard edges of the sprite.

It's normally better to avoid this term altogether because of how muddy it is, and as such it almost always causes arguments. I'd recommend going with Flat/Shaded/Partial/Anti-Aliased outlines to avoid confusion.

PROGRAMS:

You can pretty much use any digital painting program that allows you to work on a pixel level, although some are more geared towards pixel-art in general and can make your life a whole lot easier.

  • GraphicsGale: (Windows Free/$25 USD) This is my personal program of choice. It's fairly minimal, but has good support for indexed palettes, animation and limits you to just the pixel tools you'll need. The free version should do you just fine, although the professional version allows for saving animated GIFs.
  • ProMotion: (Windows Free/$75 USD) I'll admit I haven't used this very much since the interface feels incredibly awkward to me, but it does have a good number of incredibly powerful features. The ability to draw on tiles and have a tilemap update in real-time seems like it would be worth the price of admission alone.
  • Pixen: (OSX Free) A highly regarded pixelling app for the Mac guys. It's open source, too!
  • ASEPRITE: (Windows/OSX Free)
  • mtPaint: (Windows/Linux Free)
  • MSPaint: Of course, good old MSPaint is perfectly viable for making pixel-art in. The tools are a bit limited, palette management can be a bit awkward at times, and animation isn't supported. However it's probably already on your system and you're probably already familiar with it, so it's a great place to start!
  • Photoshop: As the go-to program for digital painting, it had to get a mention. Pixel-art in Photoshop is do-able, but Photoshops palette management tools aren't very good for pixel-art, and it can be a bit awkward to do animation with when compared to packages more tailored for pixel-art. Make sure you're using the pencil tool, and work with a palletized image so you don't accidentally blow out your color budget.

TUTORIALS AND RESOURCES:
  • PixelProspector has a huge list of tutorials and links that's definitely worth a look through.
  • One of my favorites from the list is Derek Yu's (Of Spelunky fame) which does a really nice job of going through pixelling a large sprite step-by-step.
  • PixelJoint - "What is pixel art": Basically this OP except about a million times better and more in depth. Definitely recommended to everyone.
  • Way Of The Pixel topic on theory: Some more advanced techniques in here (Reducing banding, getting the most out of low resolutions, etc), probably not best to start with but a lot of great, in-depth tips.

AntiPseudonym fucked around with this message at 14:46 on May 2, 2012

Adbot
ADBOT LOVES YOU

AntiPseudonym
Apr 1, 2007
I EAT BABIES

:dukedog:
[post reserved for showcase]

Jewel
May 2, 2009

Oh good, it's here! You said you weren't going to, so who's gonna create the contest/s?

Here's some stuff I've done recently!



Testing a tileset for game I was planning (This is the tileset)



Small tileset for SA gamedev contest



Little sprite for a friend

Edit: Oh gosh while I'm here, this seems like the perfect time to post one of my favorite pixel art works (NOT MINE):



Made entirely in MSPaint, and has only 15 colors!

Jewel fucked around with this message at 14:48 on Apr 20, 2012

quiggy
Aug 7, 2010

[in Russian] Oof.


Oo, a pixel-art thread. Maybe I can finally learn some tips so my stuff doesn't look like rear end.

For actually useful content, may I suggest adding Pixen to the list of good image editors? It's Mac-only but is pretty much the greatest thing ever. Plus it's open source!

AntiPseudonym
Apr 1, 2007
I EAT BABIES

:dukedog:
I keep forgetting not everyone uses Windows! Added.

Triangle
Jul 30, 2011

Heh. If I was actually unchill, I would be using all caps and/or exclamation marks in my posts, but I am chill. Clowns like you make me laugh, that's what clowns do. Added to my ignore list.
I used to do some pixel art for fun. These things are like 3 years old and embarrassing.







Jewel posted:


Edit: Oh gosh while I'm here, this seems like the perfect time to post one of my favorite pixel art works (NOT MINE):



Made entirely in MSPaint, and has only 15 colors!

I really dig the color limitation side of pixel art. There are some p.neat tricks you can do with pixels

(3 colors + black)

duck monster
Dec 15, 2004

Oh god, I still remember being a kid with an Amstrad 6128 and being proud of the fact I could draw on my home brewed pixel-by-pixel art program a seriously round sphere with 3d hilights. The trick was in learning to count the curve.

:sigh: I hate being old.

Internet Janitor
May 17, 2008

"That isn't the appropriate trash receptacle."
Here are a few things from a recent project:




And assets from something older that I've been thinking about dusting off again:



Internet Janitor fucked around with this message at 18:15 on Apr 20, 2012

Haud
Dec 6, 2007

World's Worst Interview
Thanks for this thread and tutorials! I've finally gotten up the gall to make my own game (something I've always wanted to do and finally have the programming proficiency to make happen), and the big hurdle for me is going to be the art.

This may seem like a stupid, basic question, but what is a good resolution to use for this kind of thing? One video I watched had a guy develop a sprite at 512x512 and then scale it down to 32x32 when he was done, but the second link you posted said to go as small as possible. So let's say I am creating the hero, should he be 32x32?

Internet Janitor
May 17, 2008

"That isn't the appropriate trash receptacle."
Haud: Start by deciding a screen resolution and then sketch some concept screenshots to get an idea of how big things are in relation to each other. For RPG-like things I often go with something like 24x16 (taller than wide) sprites on a 320x240 display.

Humboldt Squid
Jan 21, 2006

I would love to get back into pixel art if I ever manage to find the time. I did sprites for "You can't evolve" during the SA gamedev contest a few years ago http://labtanner.com/gamedev/index.php?title=Team_Top_Percentile , but didn't save any of my work from it when I changed computers :I
The only pixel arts I have are these two masks I made like three years ago

Haud
Dec 6, 2007

World's Worst Interview

Internet Janitor posted:

Haud: Start by deciding a screen resolution and then sketch some concept screenshots to get an idea of how big things are in relation to each other. For RPG-like things I often go with something like 24x16 (taller than wide) sprites on a 320x240 display.

Sounds as good a place as any to start. Thanks!

Pfhreak
Jan 30, 2004

Frog Blast The Vent Core!
I'm excited for this thread because I am a terrible programmer-artist, and everything I touch turns to awful in my hands. Also, I'm working on a roguelike that's going to need a number of sprites and I'm tired of colored squares.

dizzywhip
Dec 23, 2005

Humboldt squid posted:

I would love to get back into pixel art if I ever manage to find the time. I did sprites for "You can't evolve" during the SA gamedev contest a few years ago http://labtanner.com/gamedev/index.php?title=Team_Top_Percentile , but didn't save any of my work from it when I changed computers :I
The only pixel arts I have are these two masks I made like three years ago

Hey you're in luck my friend, I still have the project files saved (I was the programmer on the project if you don't remember). I'm at work but I'll upload them when I get home.

Edit: Here you go, this is all the art from You Can't Evolve.

dizzywhip fucked around with this message at 06:49 on Apr 21, 2012

Pfhreak
Jan 30, 2004

Frog Blast The Vent Core!
Guys, I made my first sprite ever. I needed 3 'cpus' for robots. First up, the science cpu -- increasing energy efficiency. So I stuck a giant glowy fuse thing on it.




Ok, so I'm not entirely thrilled with the result. Some feedback would be appreciated (how do I make not lovely curves, for example, where do the highlights/shadows belong?)

Edit: Here it is slotted into my placeholder ui for context:

Pfhreak fucked around with this message at 17:50 on Apr 22, 2012

The Golden Gael
Nov 12, 2011

Haud posted:

Thanks for this thread and tutorials! I've finally gotten up the gall to make my own game (something I've always wanted to do and finally have the programming proficiency to make happen), and the big hurdle for me is going to be the art.

This may seem like a stupid, basic question, but what is a good resolution to use for this kind of thing? One video I watched had a guy develop a sprite at 512x512 and then scale it down to 32x32 when he was done, but the second link you posted said to go as small as possible. So let's say I am creating the hero, should he be 32x32?

Awesome that you're creating your own game! I've been doing it for about eight years now and while I'm not necessarily the best at programming nor pixel art, it's something I quite enjoy. Playing the finished product always puts a smile on my face. :)



This was a scene I did as production for a game I made back in 2009. It doesn't hold a candle to my new work, but it's all I can conjure up at the moment. I'll see what new stuff I'm happy enough with to post later!

exmarx
Feb 18, 2012


The experience over the years
of nothing getting better
only worse.
Awesome thread idea :)

Here are some other tutorials:
Technical, "what is pixel art"
More theoretical

some of mine:



Triangle
Jul 30, 2011

Heh. If I was actually unchill, I would be using all caps and/or exclamation marks in my posts, but I am chill. Clowns like you make me laugh, that's what clowns do. Added to my ignore list.

Exclamation Marx posted:



This poo poo is neat

Jewel
May 2, 2009

Exclamation Marx posted:



This is rad, I like the colors!

Exclamation Marx posted:

Technical, "what is pixel art"

This is really really good, and it should be added to the OP.

Sotsa
Jul 21, 2008

Furious birdnipples.

I read this thread and had to make something.
It took a lot of time and my wrists hurt, but it was fun.

Is there any easier way of tesselating? i've been doing it by hand and it takes forever.

bomblol
Jul 17, 2009

my first crapatar

Sotsa posted:


I read this thread and had to make something.
It took a lot of time and my wrists hurt, but it was fun.

Is there any easier way of tesselating? i've been doing it by hand and it takes forever.

I might be misinterpreting you, but f you mean like for tiles, the pixel art editor Pickle has some pretty great features for that that I don't know if I've seen elsewhere. You can nudge the image one pixel in a direction with a press of the arrow keys and so it helps greatly for making smooth looking tiles. There could be stuff like this in other programs, but I'm an amateur so I'm unaware.

Physical
Sep 26, 2007

by T. Finninho
I have a 2D shooter game demo that I'd like some better art for. Does anyone have some pixel art they'd like to share?

Internet Janitor
May 17, 2008

"That isn't the appropriate trash receptacle."
Physical: You could use these, from a game I wrote many years ago:





AntiPseudonym
Apr 1, 2007
I EAT BABIES

:dukedog:

Sotsa posted:


I read this thread and had to make something.
It took a lot of time and my wrists hurt, but it was fun.

Is there any easier way of tesselating? i've been doing it by hand and it takes forever.

It's looking good! I really dig the rocks in the background, and there's some pretty good detail in there.

Although I think you might be relying on dithering a little too much, especially since there's such a high contrast between the different shades. There are a couple of options you could try to fix this:

- Drop the contrast between the different shades a bit.
- Experiment with different patterns to make the dithering look less regular
- Or just ditch the dithering altogether.

I'd probably recommend the last one, honestly, since dithering tends to look pretty messy except in very select circumstances.

I think adding a little bit of red to the middle shade of grey would help bring the image together a little more, too.

Shindragon
Jun 6, 2011

by Athanatos
Pixel art? Don't mind if I do. Most of these are old, way before I learn that Graphics Gale existed.



I never did finish this, but this took like a week in PS. I literally drew every line, instead of ya know copy pasting a tile.


(prototype, yeah when I first started pixel art.. really bad at it)

Sotsa
Jul 21, 2008

Furious birdnipples.

AntiPseudonym posted:

It's looking good! Although I think you might be relying on dithering a little too much.

I hear you. I just got totally lost in the (dithering?) seems like it was named tesselating in the op. I'm also not very used to picking my colours carefully, as i'm used to changing them underways.

I have a big hardon for dithering/tesselating though, so I'll probably keep doing it. But i discovered some ways of making texture with pixels, like on the (sorta) wooden cross inside my borg thingy.

SSH IT ZOMBIE
Apr 19, 2003
No more blinkies! Yay!
College Slice
Oh, hey, a pixel art thread. I have tons of that. From every one of my incomplete projects.








Powering up my old PC to pull some older stuff off. Huzzah.

Edit: Older stuff





Edit: Also, thanks for Pixen. I have a Mac and did not even know about it. Been using GIMP, which I am so used to now...it has a pencil tool, pallate, multiple views(so you can work zoomed up while still looking at a zoomed out version), grid, layers, etc. It works a lot better than photoshop for pixel work.


There's also
http://tilestudio.sourceforge.net/

SSH IT ZOMBIE fucked around with this message at 06:40 on Apr 25, 2012

SSH IT ZOMBIE
Apr 19, 2003
No more blinkies! Yay!
College Slice

Shindragon posted:

Pixel art? Don't mind if I do. Most of these are old, way before I learn that Graphics Gale existed.


I actually kind of like that, it's a really awesome run cycle.

.TakaM
Oct 30, 2007

Wooo pixel art!
Here's some of my stuff, it continues the common theme of most of it being unfinished. :p

Here's one of my oldest things:

For some reason when I played animal crossing I said to myself "you know what this game needs? to be on the snes."
I dunno, but this was the first tileset I made and some of it still looks alright.

This one's pretty old too:

I drew this for no reason, I just felt like drawing a pre-fight thing for ken, obviously never finished.


I made these tiles for a PDA game where you draw lines to direct special liquids, can't remember the name of the game and I dunno if it ever came to be.
Pretty simple stuff but I still quite like it, it has a nice feel I think.


A few years old, I made this for a secret santa thing on a pixel art forum (Pixelation, I highly recommend the place, really cool smart guys and you can learn a lot about the medium there)


I made this for a thread over at pixelation, we made mockups for heaps of games as if they were on the original Gameboy. thread if you're interested


The tiles I've probably spent the most time on, and at no point were these for any game of any sort, just boredom, if anyone wants these tiles let me know and I'll post them.


Some various sprites I've made, the last one is the the main character in the game I'm making with a friend:

It's called Fetch Quest and that's where you start off the game, the beach still isn't animated and the dog doesn't have a real jump anim yet, but you get the idea.


Really cool stuff by the way guys, I'm glad to see there are some pixel artists here and all the charming graphics. :)

Shindragon
Jun 6, 2011

by Athanatos
Wait are you the one who did Fetch Quest? Dude your stuff is hellla awesome. Really like the animation style you have.

I will admit, my run cycle is basically from references from the Scott Pilgrim game and Megaman X's running cycle. I forgot the Scott Pilgrim's sprite artist name, but his animations have a sort of "bounce" to them if you made call it that.

And yeah the not shading was intentional I was going for an NES retro style look. Still haven't' figure out if I should go all the way with it on my game though that I'm working on.

.TakaM
Oct 30, 2007

Thanks man, FQ still has a long way to go but it's nice to see some people know about it.

I think it was Paul Robertson (just search his name on youtube and watch everything) who did the graphics for Scott Pilgrim, definitely not a bad reference to choose.
Not shading can be a smart choice, it allows you to work faster and if you decide you want shading one day it's pretty easy to just add it in.
It's why FQ has very little shading :ssh:

.TakaM fucked around with this message at 10:41 on Apr 25, 2012

Rupert Buttermilk
Apr 15, 2007

🚣RowboatMan: ❄️Freezing time🕰️ is an old P.I. 🥧trick...

.TakaM posted:


The tiles I've probably spent the most time on, and at no point were these for any game of any sort, just boredom, if anyone wants these tiles let me know and I'll post them.

The moment I saw this picture, I immediately thought 'Isn't there a goon with a part of this picture as an avatar? Wasn't that person's name... (scroll up) Ah-HAH!"

Seriously awesome work, man (or girl).

Internet Janitor
May 17, 2008

"That isn't the appropriate trash receptacle."

.TakaM posted:



Friggin' amazing. I really like the washed-out feel of the palette. If I was going to criticize anything, I'd say the cobblestone walls don't really "pop" and produce a sense of depth- creating a harder baseline to separate them from the grass they touch or adding a subtle gradient that is darker at the base of the wall and lighter at the top might help.

I'd be curious to see the tileset- you've done a very good job of making the grid less visually apparent, and I'm interested to see how you organized your tiles.

AntiPseudonym
Apr 1, 2007
I EAT BABIES

:dukedog:

.TakaM posted:

Some various sprites I've made, the last one is the the main character in the game I'm making with a friend:

It's called Fetch Quest and that's where you start off the game, the beach still isn't animated and the dog doesn't have a real jump anim yet, but you get the idea.

Really cool stuff by the way guys, I'm glad to see there are some pixel artists here and all the charming graphics. :)

Holy crap man, your stuff is amazing. Animation, colors and lines are all perfect!

So seeing as I started this thread, I should probably share some of my stuff, huh? This is all stuff for a game that I'm working on at the moment, all very WIP (Although C&C would be greatly appreciated)

Main character:



Regardless of how much I've tweaked it, I'm still not happy with the run. He just looks kinda stiff and lifeless to me. The jump is a combo jump/fall animation, it doesn't look quite so jerky in-game.



The background is still very much WIP and likely to change completely. As a matter of fact I'm thinking of revising the entire style and going for something a lot simpler; it doesn't tile very well and simple things end up taking a lot of work for not much payoff.

Edit: Oh and this isn't mine (And I can't remember where it came from), but this is a really useful reference for run animations:

AntiPseudonym fucked around with this message at 14:48 on Apr 25, 2012

exmarx
Feb 18, 2012


The experience over the years
of nothing getting better
only worse.
^I'm fairly sure the runcycle's by ptoing or Helm

.TakaM, you don't have a gallery at PJ or anywhere do you? Also can you post the elephant that used to be your avatar at Pixelation? :3:

Triangle, Jewel posted:


Thanks :shobon:

and a WIP mockup

SSH IT ZOMBIE
Apr 19, 2003
No more blinkies! Yay!
College Slice
Is it just me, or is Pixen a touch buggy? Sometimes if I use the select and move tool, and am playing an animation, it starts flashing or chopping. Or if you have a zoom on an animation, add and remove a frame, when the animation hits the frame the preview window will size down unzoomed and then resize to your zoom.

One time it would't let me draw until I used the select tool, selected something and then unselected it.

It's definitely pretty cool though.

Edit: Just finished this in Pixen

SSH IT ZOMBIE fucked around with this message at 05:54 on Apr 27, 2012

SSH IT ZOMBIE
Apr 19, 2003
No more blinkies! Yay!
College Slice
Out of curiosity, how long does it take most people to draw a sprite doing a a walk cycle?
I wish I could get faster.

Edit:

.TakaM posted:

Wooo pixel art!
Here's some of my stuff, it continues the common theme of most of it being unfinished. :p

Some various sprites I've made, the last one is the the main character in the game I'm making with a friend:

It's called Fetch Quest and that's where you start off the game, the beach still isn't animated and the dog doesn't have a real jump anim yet, but you get the idea.


Really cool stuff by the way guys, I'm glad to see there are some pixel artists here and all the charming graphics. :)


http://www.youtube.com/watch?v=R6xZOKO58wk&list=UUyRzLTuzFnTEaClQyt_7Aew&index=1&feature=plcp You sir...need to finish this.

SSH IT ZOMBIE fucked around with this message at 06:27 on Apr 27, 2012

AntiPseudonym
Apr 1, 2007
I EAT BABIES

:dukedog:

SSH IT ZOMBIE posted:

Out of curiosity, how long does it take most people to draw a sprite doing a a walk cycle?
I wish I could get faster.

Putting in a couple of hours a night, about a week. Although I'm horribly, horribly slow at still quite out of practice.

... and I'm STILL not happy with my walk cycles. :argh:

edit: Also the character I'm working on is probably overcomplicated, which is slowing me down.

.TakaM
Oct 30, 2007

Thanks guys, here are those rpg tiles, anyone's welcome to use them for anything however they want:
wave anim
Not exactly a full tileset or anything, but there you go.
I quite enjoy making tilesets, coming up with versatile and efficient tiles seems to scratch an itch. Here are some old mockups using that Link sprite and some obnoxious effects layered ontop:




Someone could make a walk engine out of them I guess.

Run anims are something that always takes me a few different attempts before really being happy with the result, and my general philosophy for animation is to just make it look smooth, I'm not much of an animator to be honest, I could never do what Paul Robertson makes look easy. But I do think for animations that the player is going to see all the time should have a high frame count, you just have to worry about it looking floaty.

I don't have a pixeljoint account, this thread is probably the largest deposit of my stuff on the internet, and I think the odds are good that Fetch Quest will be finished, but it's still a bit of a hobby project that we fluctuate working on, right now we're doing a fair bit of work on the first part of the game and it's going well. We plan on releasing a chapter one demo whenever that's ready.
Thanks again guys

.TakaM fucked around with this message at 04:36 on Apr 28, 2012

Adbot
ADBOT LOVES YOU

SSH IT ZOMBIE
Apr 19, 2003
No more blinkies! Yay!
College Slice

"Where the drugs at?"

  • 1
  • 2
  • 3
  • 4
  • 5
  • Post
  • Reply