Pixelation
Critique => 2D & 3D => Topic started by: figurestone on October 21, 2009, 12:59:36 pm
-
Hi guys,
A friend and I are building a Flash game and I'm designing the ships and all the graphics.
I'm pretty new to pixel art, especially working on such as small scale. So I could really use some advice on how to bring out the detail of the designs and really make them "pop", as my partner in crime likes to say!
My current method of creating the graphics is to draw the ship in vectors using Flash, scale it down and take it into Photoshop to start pixel pushing.
Ship 1.12c
(http://img14.imageshack.us/img14/2166/112csprites.png)
http://img14.imageshack.us/i/112csprites.png/
This is the most finalised of our ships, we are quite happy with version A.
We'll be posting more soon.
Help me make the best use of my pixels!
Thanks in advance,
Will
-
Mega problems. I'm afraid you're not understanding pixel art. What you've posted isn't pixel art at all. Version A has over 256 colors in it. And even though you've posted a PNG, a format supporting indexing, your image is not indexed, and on top of that the image data was once in JPG format.
I also see no evidence of manual pixeling. Version A looks like photoshop stuff scaled down. If you're confused, you have much research to do.
Get'chya some (http://www.wayofthepixel.net/pixelation/index.php?topic=3467.0)
-
Mathias, a simple "this needs to be in low spec" would be sufficient, no?
I see no clear evidence of JPG artifacts either, where did you get this claim?
Figurestone: I think that some more work steps would be appropriate and a move to the low spec forum. Right now it's hard to see where the detail attention kicks in, though I can see from the three different versions that there is probably some sort of small-scale detail attention in your workflow.
-
Hi all
Just to introduce myself and jump into the conversation -- I'm figurestone's developer partner, the tech and design lead. I'm a UI and game programmer but I've studied fine art, worked in graphic design for web and print, and have a clue about what makes a game look good having been playing them every day since 1984, and building them for the last few as well. So I thought I'd join in. ;) I've been trolling these forums anonymously for a couple of years now just to see what people were up to, and have been very impressed.
@Mathias, appreciate your input but figurestone is producing according to my technical spec, which takes precedence over arbitrary limitations. I do agree with two things you've said though, yes less colours could well do the same job (better, even); and scaling things down from a larger source image is a no-no. This may seem obvious, but figurestone's workflow needs some overhauling, which is why he's here. He is a graphic artist by profession but is dipping his toe into pixel art for the first time. Having just looked at your pixeljoint portfolio I do not think you have room to be cutting *anyone* down, particularly not on a forum where there are people who have been practising pushing pixels (professionally) for a quarter of a century.
@Gil, thanks, when you say more work steps, presumably you mean a larger number of snapshots through the process? ???
PS. Just read the sticky at top of the low-spec forum and I see what the difference is. Thanks for clarifying, guys.
-
Having just looked at your pixeljoint portfolio I do not think you have room to be cutting *anyone* down, particularly not on a forum where there are people who have been practising pushing pixels (professionally) for a quarter of a century.
:n: You should value the merit of the feedback itself, not of the artist giving it. I'm sure Mathias didn't intend to piss you guys off and though you're clearly somewhat upset, reacting in that way makes me feel much less comfortable with giving you any critique.
-
Mathias, a simple "this needs to be in low spec" would be sufficient, no?
I see no clear evidence of JPG artifacts either, where did you get this claim?
No. He needs help in coming to understand just what pixel art is, if he's mistaken these sprites so far for pixel art, by it's typical definition.
JPG artifacts, just a side-issue, but since you asked. GO HERE (http://img43.imageshack.us/img43/1308/112cspritesnuked.png) for a version with brightness boosted and blown up to 400%. You'll notice the obvious 8x8 jpg artifacts. Bad because it means the artist is possibly degrading his image qualtiy as he works. Should be avoided at all costs. Though, I assume Figure only saved it in jpg for some presentational reason.
@Mathias, appreciate your input but figurestone is producing according to my technical spec, which takes precedence over arbitrary limitations. I do agree with two things you've said though, yes less colours could well do the same job (better, even); and scaling things down from a larger source image is a no-no. This may seem obvious, but figurestone's workflow needs some overhauling, which is why he's here. He is a graphic artist by profession but is dipping his toe into pixel art for the first time. Having just looked at your pixeljoint portfolio I do not think you have room to be cutting *anyone* down, particularly not on a forum where there are people who have been practising pushing pixels (professionally) for a quarter of a century.
Hi, NickZA, welcome to the party.
Hehe, Ironically, I disagree with both of your agreements, since they're both misunderstandings -If this isn't intended to use a controlled palette, having less colors is no longer valid. The ship is gray and yellow. If anything, it could use more colors, since precise index colors aren't even a consideration now who cares about color count? It's irrelevant.
For full color work, starting at 200 or 400% and scaling down to 50 or 25% is a brilliant way to get high detail into a small peice without monotonous manual detailing.
Cut down, what? Don't be silly. Leave those sensitivites behind when seeking honest feedback, grasshopper.
-
Yes, welcome to our party, little buddy.
You are one of those unfortunates who believes that your abstract definition of a thing is what is important. Sadly it's not. Money makes the world go round, and we are engineering a product here. The results are what count, not the definitions you cling to. Probably the only thing of relevance there is that this thread is now in the low-spec forum, where it belongs.
Sadly, you are mistaken -- using less colours typically means a better degree of control in my opinion, and I am sure in the opinions of most on these forums, including yourself I would think since you were rambling on about it! Or perhaps you would like to argue with yourself? Since I notice you don't exactly work in 16M colours yourself? Thus far figurestone has used as many colours as he likes because the spec does not define a maximum on colours. I would welcome other opinions on less vs. more, of course.
As for scaling down, you conveniently chose not to "educate" us as to the point at which it is appropriate to scale down. Or do I presume then that you do all your work at a larger size, then the last step of your workflow is to scale everything down? Would you care to enlighten us, since you were just complaining that his work was scaled down, and now you are telling me that you do that yourself?
And, hehe, ironically it stings when someone insults your rather "low-spec" work, eh? I noticed you had nothing to say about that. :y: But enough of this... we're here for crit and not for a flame war. Cool your jets, buddy boy.
-
My dad can beat up your dad.
-
Could be. But my intellect can beat up your intellect.
-
@rikfuzz: Touché. But you didn't come in here breaking balls unnecessarily, and talking yourself in circles. You came in with valid input, that's the difference. Your critique would be welcome, if you still care to offer it.
-
(Ok, I went back and actually read your post, #6, this time. Yesterday I spent a portion of the day with my 13 year old nephew, your "intellect" reminds me of him. Needless to say, he can be rather annoying when he wants to be. Only one thing in response to your subjective expressions - some control may benefit you, I'd hate for you to shoot yourself in the foot simply due to unnecessarilly vindictive outbursts in the face of criticism. If you insist on continuing, please just PM me.)
Figure, if you're not the secret benevolent split personality of nickza, why not post some more ships? Now that the misunderstanding is cleared up, your work can be critiqued in the right context.
Version A is my favorite, it's the most interesting. From the looks of it I'd say the two lower "wings" protruding are rotatable jets for navigation. And it looks like the large dome on top can raise and lower. Will it be broken up into separate parts and animate via code?
-
Woah guys! I just came here to draw some spaceships and get some advice :P
Yep, I apologise for posting this in the wrong area. Typical n00b mistake.
What I am creating is not exactly pixel art, I am however wanting to incorporate some of the fantastic techniques that you guys use to make the work outstanding at such a small scale.
I don't want to get into a debate over what is and isn't pixel art, I just want to know what looks good and what doesn't. :y:
Thanks for the comments Mathias, Gil and Rickfuzz. It is all appreciated.
I'm used to tough critism, eh Nick? :lol:
The image I posted initially was from my work PC (so, was probably a copy of a copy)... so there is a chance it could have been saved as a JPEG at one point, hence the artifacts.
Gil, if you would like to see the steps taken to get to where the graphic currently is, I'm happy to show and receive advice along the way.
PS. My dad can kick all your dad's arses!
-
Mathias, we toyed with the idea of having articulated ships with joints and moving parts etc. But we decided to scope down on some "non essential" parts of the game so we could get something released on time and "on budget".
I will post more designs for crit tomorrow (I am currently posting from a mobile phone; very limited unfortunatly!).
-
Haha. Welcome. Thank you for being resonable. I apologize to you if anything I've gleefully typed up has offended you.
I for one would like to get to know your workflow. I may learn something new. If you expound, I'll reciprocate and see if there's something I can dig up, and relate the workflow I used as well. Might be helpful.
-
I would love to see the workflow yes, as I feel (Nick touched on that) that might be the area that needs work. The end result is not bad and the vectors -> small scale -> detail touch-ups is a valid workflow, so I'd be happy to offer some advice there. In some cases automated palette reduction could be a step to consider. I'd have to see some in between stages first though.
And Mathias: these guys are obviously new and the original post mentions specifically that the author doesn't consider this pixel art, but a close neighbour where the end touch-ups are very much in the same spirit. A simple indication of the low spec forum WOULD have been sufficient and I feel that the whole flame war thing is not the way to go for a more seasoned member like yourself. Critique may be harsh, but I think your discussions could be more civil (peace and love, you know?)
NickZA: I notice you have a passion for our little world of pixel art, so I advice you take it easy on your first posts. I'm sure you'd like to stick around a bit, so it might be wise not to get baited into a flame war as easily. I'm sure you have tons of good advice to give and I'd hate to see you leave again on bad terms because of a silly discussion with a less-polite newer member like Mathias.
-
Well, as I can't post my workflow images yet I might as well write it out.
1. Pencil thumbnails to begin with, very rough and flat (monochrome) hopefully to get an interesting shape that works on this level.
2. A few more pencil variations of the thumb, slightly bigger and more detailed. Some shading/relief sculping to show the 3D qualities of the ship. Main focus should still be the overal shape of the ship but detail ideas can't hurt now right?
3. At this point I took the scan into Flash and vectored over it. In this case we selected 1 design from step 2 and made a few black silouettes on white to refine the overall shape. Some variations arise out of this.
4. We then selected the best design from the previous step and I added gradient to show the 3Dness.
5. I then added some detail and colour to the design.
6. Here I reduce the ship to the 'ingame' size and import into photoshop **I think this is where I must be going wrong, I am designing the overall design at 200% (or more) the actual size, so detail is lost in the process!**
7. I then play with the rasterised version, adding detail, bringing out highlights and 'carving in' indentations.
I'd love to hear some of the processes you guys have to create your work and suggestions to improve my own.
-
Yes, I think that you should either work in full size and downscale to the right size or downscale to the right size, then add detailing. Right now, you're not maximizing the detail phase. Lots of artist prefer to stay in full size until the end, which works fine too. It does have an added bonus of being able to work faster and slightly sloppy. On the other hand, you'll never got access to the nitty gritty detail working full size.
The work on the silhouette during concept stage is obviously a very good step. I feel though that with this ship, the silhouette is actually a fair bit better than the actual inside details. I'd add a bit more to it. I can understand the dome shape, but the half circle thing sticking out is a bit bland. Maybe mix up the detail a bit there. Exposed machinery or some different material would have worked better. I like the lower half and the bridge piece, though I feel that, again, the dome shape might be slightly bland.
Here's a sample of hand-made pixel level detail. Some of it works, some of it doesn't. It's just a proof of concept that pixel level details can enhance parts of the image. I obviously didn't think about the ship design, I just slapped some detail on to show something.
(http://www.game-designer.org/art/pixelart/edit/112csprites.png)
-
This party blows, I'm leaving.
(Gil, PM'ed you)
-
@Gil, some good points there!
The work on the silhouette during concept stage is obviously a very good step. I feel though that with this ship, the silhouette is actually a fair bit better than the actual inside details.
I agree there could be more done with the disk, and I think the arms/nacelles have a certain flatness to them; but this may be hard to clear up considering how brightly the energy "windows" on the nacelles glow. What do you think?
I really like your extra detail on the rear section. I personally would think about toning down the strength of those lines/panels slightly just so the contrast is not so great, but I do love it. I'm not sure about the chevron effect on the arms, but let's get figurestone's opinion?
You've also hardened the highlight running along the equator of that hemisphere which strengthens the form. I knew there was something wrong there but I hadn't been able to put my finger on it.
@figurestone, did you notice the very sort of flat section along the front of your bridge window? I think that might be where a rescale is evident, needs a bit of touching up.
PS. Gil, your diplomatic words are well-taken and believe me, that thought occurred to me several times before I hit the sack last night. I've got enough respect for these forums and most of the people here that this wasn't my idea of the ideal honeymooon, either. :lol: Well, live and learn, I guess. My insulting Mathias' work was a dirty punch, just for the record. I will not do that again.
-
Gil, its such a subtle change but it really adds a lot to the ship. Thanks for that!
Here's a few images showing the process:
(http://img88.imageshack.us/img88/8427/steps.jpg)
-
And another ship I'm trying to make sexy!
Nick's mock up to show relief etc.
(http://img10.imageshack.us/img10/773/thumbnick.jpg)
My full scale version and mini
(http://img88.imageshack.us/img88/7746/5a05.png)
And the sprite with a little pixel work.
(http://img269.imageshack.us/img269/2798/5a05sprite.png)
-
Interesting process. I think the main problem is the vectoring step (4).
The outer shape's nice (though I find it a little bit odd you chose the shape with very small 'holes' in, as these completely disapear when shrunk down to size, tho could be fixed after) but the shading, is really very bland and predictable and there's only one accent colour. If there were thrusters or something you could use it as secondary lightsource for some nice edge lighting etc. Also it's quite dark, without edge lighting, the outer edge is quite hard to discern on a black background.
Another problem I have, is I don't really understand if the yellow parts are lights, windows, or markings. Lights should glow, windows could have detail and/or glow a little and markings should share the shade (dark/lightness) with whatever it's marking.
Hope this helps!
Many thanks
Rik
-
If I may expound on your advice Rik, the one thing that grabs me is your mention of the yellow parts. What say we have them shed some light on the adjacent hull? A good example is here: http://www.strekschematics.utvinternet.com/shipgallery/shipgallery1/akira.jpg
...Because we can't have the glow going off into space; not only would that not happen in open space (as there is little or no gas to refract light) but for speed reasons we want to avoid non-opaque pixels for faster blitting, and a glow that goes off into space would have to be alpha pixels.
I asked Will (figurestone) to tone down the tips of the nacelles, because they were pulling focus away from the main hull and I wanted them to look as though they are lower than the main body of the ship. Unfrotunately it didn't quite work, because now they look like yellow hull paint rather than glowing energy ports. So this is kind of my fault in a way. Can anyone suggest how to tackle this effectively? ???
I also very much agree on the predictability of the hull shape, hoping we can address this but it is more a matter of underlying design / surface relief than pixel work, even.
EDIT: I also want to point out that I see that rear opening in the hull as being a very nice opportunity for all kinds of deep, dark exposed machinery (perhaps a shield generator or the like?) in the rear of the hull. Shadowy, chunky components deep beneath the outer shell. I hope this didn't come across sounding too weird. :blind:
-
A nice quoted post from Helm on highlights in pixel art. It's these specular highlights that you need to focus on in the last detailing step. I hope that makes sense. I might post more later, this just occurred to me.
Excellent points, supergoat.
Another useful point to be made about bitmap INGAME graphics is that they hardly ever miss an apportunity to pronounce dents and general volumetric shifts on objects, with contrasting highlights. For the longest time when I was starting out with pixel art, since I came from a comic art background where we usually shade from pure white light ( white paper ) to pure dark ( full ink ) I was having trouble convincingly suggesting volumes in pixel art. I did everything right, in theory. The stuff I drew were lightsourced, the colours were ok, the shapes registered well in general. After going back to studying Speedball II and Cadaver and the like, I realized what I was doing wrong, or rather, not doing much of: I was working from a middle shade, towards darkness, and that was it. If there were brighter spots, they were on large areas, where a lot of direct light would hit. I practically had no idea of the power of highlight, especially of the sharp type. A sharp highlight is that which might go two or even more steps up from the body of colour it's highlighting, on colour ramp, and which usually is extra accented by darker pixels than the body of colour around it too.
Let's say I was trying to draw some cracks on a dented metal wall, right? (zoom in on these)
(http://www.locustleaves.com/bitmap1.png)
This would be the old helm. Technically, this is not wrong. There's variations of lightness, there's the information that cracks are there, but it looks dull and lifeless. Studying bitmap brothers I understood that anywhere where's an edge, there's highlight! Obivously this has a lot to do with what type of material you're trying to shade, but in pixel art, especially game art, clarity is important, so this effect should be overstressed a bit.
(http://www.locustleaves.com/bitmap2.png)
Likeso. For every contour, an edge highlight. But this isn't all I learnt by the bitmap brothers. I also learnt the importance of pushing the contrast far more than you would in other media, to travel the complete range from pure black to pure white. Now, they don't do this as much as I do (my usage has evolved for other reasons to be even more harsh) but the theory's there, and it's more to do with the needs of game art than it's to do with realistic representation of reality. Again, this is about clarity and how fast the eye can proccess information and detail. Where there's EDGE, which in gameplay can possibly mean unreachable area and the like, you need to give the brain the tools to work out what it's looking at fast. So more sharpening and contrast is good.
Another thing that the brothers taught me was the importance of the traditional 75%, 50% and 25% ordered dithers as means to suggest texture and inter-shade buffering. Now my examples use 16 shades of gray which is insanely rich for this sort of stuff, but if I were to use say, 5 shades between black and white, by doing bodies of ordered dither, I would be able to fake and convey both rougher terrain, and more importantly, an extra 5 lightness levels between my original 6, and if I used 25% and 75% patterns, 24 different lightness levels between pure black and pure white, using only 5 colour slots. This is a great strength to have, and the brothers put it to use constantly.
(http://www.locustleaves.com/bitmap3.png)
-
If I may expound on your advice Rik, the one thing that grabs me is your mention of the yellow parts. What say we have them shed some light on the adjacent hull? A good example is here: http://www.strekschematics.utvinternet.com/shipgallery/shipgallery1/akira.jpg
...Because we can't have the glow going off into space; not only would that not happen in open space (as there is little or no gas to refract light) but for speed reasons we want to avoid non-opaque pixels for faster blitting, and a glow that goes off into space would have to be alpha pixels.
Sorry, yes that's exactly what I meant. It'd look terrible to have the glow go over the background. Although you might consider using alpha edges to avoid that 90s pre-rendered look since you're using Flash (IIRC).
-
@Rik
Do you mean like this ship in http://www.candystand.com/play/cronusx (http://www.candystand.com/play/cronusx)? It happens when they do bitmap rotation without applying bitmap smoothing. If they were smart and pre-cached all the directional frames on start up, this ship would not only look smooth but the game would run marginally faster. Let me know if I'm rambling on about something totally different to what you meant, though.
You'll be pleased to know I've already done the necessary code prototyping to ensure the above won't happen to our sprites.
@Gil ... Thank you for bringing the Bitmap Brothers into the topic... I hate to sound like I am the only person who still raves about those guys. They remain my ultimate visual heroes. Regardless of the fact that times have changed, they consistently produced mind-blowing graphics. And I know Helm's work from long browsing, so that puts it in an even better context. Also this effect was exactly what I saw last night on your changes to to ship 1+12 (the first one).
-
@Rik
Do you mean like this ship in http://www.candystand.com/play/cronusx (http://www.candystand.com/play/cronusx)? It happens when they do bitmap rotation without applying bitmap smoothing. If they were smart and pre-cached all the directional frames on start up, this ship would not only look smooth but the game would run marginally faster. Let me know if I'm rambling on about something totally different to what you meant, though.
No, that's not what I meant. I meant where you have pixels blending into black, on top of a red planet you'd get a thick dark pixely outline, unless you're careful or have the edge blending into alpha, but if your ship is going to rotate, there's more important things to worry about... Rotation will bring about horrible (blurring) artifacts if you're rotating AFTER scaling down, so in that case I'd advise to doing ALL your detail in 2x before making your rotations, rather than doing the final touching up at 1x.
-
Great stuff Rik. It never crossed my mind to incorporate any reflected glow from the thrusters.
Excellent quote from Helm. :y:
-
Rik... thanks for that tip. You might have just saved us a lot of time there!
Once I can start prototyping stuff in game it will be easier to see just what will and will not become an issue.