Adventure Game Studio

Creative Production => Critics' Lounge => Topic started by: on Sun 14/08/2011 22:25:45

Title: Speech Icons[art]
Post by: on Sun 14/08/2011 22:25:45
I present you my lich!
(http://i56.tinypic.com/w6pdvs.png)
He probably looks really ugly because I am really a newbie at drawing.
Can someone give me some tips so I can make better drawings.
(that picture is a view for the lich when he is talking)

here is one more picture of a fat kid that I will use in my game.
(http://i54.tinypic.com/ke9eol.png)
Title: Re: Speech Icons[art]
Post by: Darius Poyer on Mon 15/08/2011 00:12:43
this is a great resource for different pixel-techniques:
http://www.wayofthepixel.net/pixelation/index.php?topic=8110.0

The odd thing about art is that its largely from experience that you improve and only general advice will be useful to you. That thread is good for that, general advice that is.
Title: Re: Speech Icons[art]
Post by: on Tue 16/08/2011 20:42:25
Quote from: Darius Poyer on Mon 15/08/2011 00:12:43
this is a great resource for different pixel-techniques:
http://www.wayofthepixel.net/pixelation/index.php?topic=8110.0

The odd thing about art is that its largely from experience that you improve and only general advice will be useful to you. That thread is good for that, general advice that is.

Sorry for late answer I read it yesterday. It's really complex (for me), but there are some helpful tips. :)
Thanks  Darius.
Title: Re: Speech Icons[art]
Post by: SpacePirateCaine on Wed 17/08/2011 14:13:33
Hey Bogdan - I'd be glad to give some advice, but I'd have to know just what you want to accomplish. How cartoony/realistic/stylized do you want your art to look? There are a lot of different ways to go about pixel art. At the moment you have some character portraits that are mostly flat colors with black lines to show features, sort of like the work of Matt Groening (The Simpsons, Futurama, Life in Hell). If this is the type of style you want, I would suggest mostly just deciding where you can leave lines out and let the human mind do the rest of the work in filling in the picture for you.

If you're looking for help with shading, that's a completely different set of skills. Let us know what you want to do with it, and I'm sure you'll get a lot of useful pointers.
Title: Re: Speech Icons[art]
Post by: on Wed 17/08/2011 22:57:58
Alan Ford(the comic) is one that has most affected my drawings(and I want my characters to look like those from Alan Ford)
http://www.graferkon.hr/Alan_Ford_kolor_naslovna_1_ver_2.JPG (http://www.graferkon.hr/Alan_Ford_kolor_naslovna_1_ver_2.JPG)
Here's a picture of one example I liked from clone wars(star wars cartoon, that cartoon network made)
(http://www.behindthevoiceactors.com/_img/chars/char_8.jpg)

So, probably what I would have to do is draw more detail on my pictures, and shading...
And try to practice more... but if you can find me some tips, I would be very grateful. (I apologize for my english sometimes,It's not my main language)
Title: Re: Speech Icons[art]
Post by: Anian on Wed 17/08/2011 23:48:57
As much as those SW drawings are stylized, they have anatomy behind them or at least learn to draw from simple shapes onwards. Take some of those SW chracters and try for example to draw a skull from that Count Dooku example you dug up. Just practice and start from the baics shapes to complicated ones, rest of it is just pracitce.

Alan Ford is a little too stylized and complicated for you to learn drawing on.
Title: Re: Speech Icons[art]
Post by: on Thu 18/08/2011 13:52:00
(http://i1193.photobucket.com/albums/aa346/Bocalion/dooku.jpg)
I've used the original picture as a template and drown over it. Then I tried few times again without template and it was very hard.
(that terminator eye on Darth Tyranus is there because... I don't know why xD)
I will try to practice and later try to add shading, maybe it will look better then.

EDIT: I added some shading.
(http://i1193.photobucket.com/albums/aa346/Bocalion/dooku2.jpg)
Title: Re: Speech Icons[art]
Post by: SpacePirateCaine on Thu 18/08/2011 17:08:52
Okay Bogdan, now I have an idea what it is you're trying to accomplish. As in any project, it's always best to establish what you're trying to do with it before you start, or you can get lost along the way.

It seems to me that what you want is flat coloring, so the shading really wouldn't be necessary in this case. There's plenty of art that is flat shaded and looks awesome, like the Clone Wars picture that you showed previously. I'm not familiar with Alan Ford, but I'm looking at some of it, and I think that it's also accomplishable, though you may need to sacrifice some of the more detailed hatching and other black line techniques if translating down to a smaller resolution.

Edit: Couldn't get to sleep, so decided to put together a quick sprite to demonstrate how you can achieve detail with pixel thickness. Used Alan Ford art as reference
(http://i558.photobucket.com/albums/ss21/SpacePirateCaine/alanford.gif)

Note - This will require a lot of trial and error, but if you stick to it, it doesn't actually take that long. If you do want to work on art of this type, however, the most important thing will be to think about your shadows and not be afraid to do some messy pixeling.

But I digress. I'll take your Count Dooku sprites as an example. The first thing that happened once I opened up your sprites in my art program of choice is that I noticed that you saved your picture as a JPG. This will mess up your color palette a lot - Despite the colors of his skin and beard being essentially all one tone to the naked eye, you actually have a ton of separate colors that are one or two points away on the RGB scale. Since you're likely to be working in 16-bit color, this isn't really that much of an issue, but it's inconvenient. Believe me, when you start animating, this is going to save you hours of work. I suggest GIF or PNG files. You can also save as BMPs, but they have no compression, so the files are much larger than they need to be and though I haven't seen it recently, I seem to recall the AGS forums killing BMPs completely back when I joined.

Now, back to the picture itself. The art is simple and very expressive. You've translated it well to a small scale, too. With black on light colors, the pixels tend to stand out very prominently, leading the picture to look somewhat blocky. If you are being very generous with the black pixels, setting varying thickness, etc., this isn't necessarily a bad thing but since your lines are thin (as per the subject material), there's a technique that some pixel artists like myself employ called "Selective Outlining" or "Selout", which uses varying degrees of darkness on your outlines in order to create the illusion of smoothness.

For reference:
(http://i558.photobucket.com/albums/ss21/SpacePirateCaine/dooku.gif)

I apologize, I was a little sloppy with my selective outlining, to be honest, but I was rushing a bit and there was an earthquake right around when I finished, so I thought I'd just get it done and send it along for you to take a look.

I also have a 'shaded' version, which just adds some basic shading to the flat colors. Your original shaded image's contrast is way too low to be immediately noticeable. A lot of pixel artists, including myself, will tell you that contrast is your best friend. If it's not noticeable, it's often considered a waste of color count (and we love to keep the color count low). Note how the shaded version I threw together has only one tone, which is arguably much darker than the original skintone, but when applied doesn't seem that different? When two colors that are of relatively high contrast are put together, it helps to emphasize the transition from light to dark, and with a small-scale image like this, you ought to make every pixel count.

I apologize, the palette on much of the beard and the flat skintone is broken due to the original JPG, but I hope that this at least gives you an idea. The tutorial that Darius linked jumps right into the thick of it and is a bit technical - I'd suggest something a little more 'friendly', like this one (http://www.yarrninja.com/pixeltutorial/chapter12.htm). I also learned a lot when I was just starting out from Mr. Colossal's site, Kafka's Koffee, though he seems to have changed the format.

Just don't rush, I guess is the best advice I can offer. Spend hours on a single sprite until it feels just right. Unless you have a strict deadline, there's nothing wrong with fine-tuning a piece of pixel art until it's ready.

Sorry if this is a little hard to follow, I may re-read and edit this later.
Title: Re: Speech Icons[art]
Post by: on Thu 18/08/2011 22:03:18
Thanks man, you don't know how much you actually motivated me. Today I read like 20 tutorials about pixel art, and drawing sprites, and my head is full.  :o
But now I'm just practicing to improve my drawings. By the way, I have saved it in JPEG. format because I read somewhere in the forums that posting in PNG was not good. I'm not sure maybe I just got it wrong. Anyway, thanks a lot again.
I still don't understand that "selout" technique, maybe I'm just not into the pixel art enough so I could understand it. But I think It's probably just practice and practice...
Title: Re: Speech Icons[art]
Post by: Khris on Fri 19/08/2011 07:33:15
Quote from: Bogdan on Thu 18/08/2011 22:03:18By the way, I have saved it in JPEG. format because I read somewhere in the forums that posting in PNG was not good.

It's the other way around. JPEG is only good for photos, with pixelart it creates artefacts. Just look at your avatar pic, it's full of small spots and bleeding colors.

Selout means you don't have a consistently colored (e.g. black) outline but let lighting and structure influence the color at times.

(Also please don't quote the entire post directly above yours.)
Title: Re: Speech Icons[art]
Post by: on Fri 19/08/2011 12:14:10
@Khris: Thanks. You cleared out some things for me.
Now this is the speech icon I used for one character in my game:
(http://i1193.photobucket.com/albums/aa346/Bocalion/ford1.png)
and I tried selout on him
(http://i1193.photobucket.com/albums/aa346/Bocalion/ford2.png)
Although I'm 100% sure I made a mistake when I drew that "selout". I'm not sure what kind of mistake.

Maybe this outlines I used were too bright?
Title: Re: Speech Icons[art]
Post by: SpacePirateCaine on Fri 19/08/2011 16:55:07
Okay, a little more about Selective Outlining, then. The ideas in the newest edit were not completely off base, but you did get a bit carried away. In this case, there are three things that you want to keep in mind. You have attempted to apply the selout technique on every section of every line, which has lead to a lot of long lines with little dots at either end. The concept is there, but the execution needs a little work. Also, in your implementation of the selout, you've created a lot of double pixels - the idea with selout is to keep your lines nice and thin, so a diagonal doesn't need a pixel joining their edges.

The other issue is, once again, contrast. You've got a whole lot of colors that are very, very similar. After reducing your palette to 256 colors, I noticed that you have four skintone colors, when you only visibly have three (Light, shaded, outline), and you have five shades of gray for the hair, when you probably once again only need three. We can work on palette economy later on, but I've made one minor change with contrast: making your second shade much, much darker so that it's visible. I was very conservative about contrast on my first few sprites as well, but I learned to start getting comfortable with high-contrast images and feel a lot better about the quality of my sprites now because of it.

(http://i558.photobucket.com/albums/ss21/SpacePirateCaine/th_ford2.gif)

I've made a few minor adjustments to your sprite - which, incidentally, is a great start on human anatomy, and I think one of your better portraits - in two ways: one using the selout techniques I mentioned previously, and another using line thickness instead (Sloppy at the moment, but I only spent an hour on it, sorry). Let me know which one feels better to you, and which you want to cultivate as your spriting style, and I'll be happy to lend a hand on either.
Title: Re: Speech Icons[art]
Post by: on Fri 19/08/2011 18:36:00
Dear Caine, I read your post maybe 10 times, and examined all the drawings, and I'm still in some sort of confusion about pixel drawing. I thought that when you are drawing in pixel art you must follow the rules so your drawing becomes better. I was really trying to apply selout on every line, because I thought that is important thing I must do, but it seems not. I watched your drawings and seen that you drew some pixel at random place, but when you zoom out later you see they actually really fit in and the picture looks really realistic and good. So after this I realized that I should increase the contrast as you said, and stop selouting every line, and try to improvise a bit to make a drawing better. And the double pixel part was clear to me too, when you explained me.
Both techniques look great, the outline looks easier.

One thing totally off topic I wanted to ask you, what drawing program do you use Caine? I've seen your works, and I see you are pro with pixel art drawing, so you probably now what's the best choice for pixel art drawing.

Thanks a lot. :)
Title: Re: Speech Icons[art]
Post by: SpacePirateCaine on Fri 19/08/2011 19:30:06
It's all a matter of finding the art style that you like the most and practicing it a lot. I've been doing pixel art for about 10 years now, and though I'm by no means a professional pixel artist, it's the one hobby aside from playing games that I actually have the time, energy and inspiration to put the effort into. Certainly when you're doing art you should follow "the rules" as fits the piece of art that you're working on, but you have to understand the rules as well in order to create the results you're looking for.

As you said you'd like to start with the more standard cartoon-shading type art, I'd be happy to give you some pointers in that area.

As far as art programs, it's all a matter of preference. My weapon of choice is GraphicsGale, by Human Balance. Best 20 dollars I ever spent, hands-down. Of course, just use whatever art program you're most comfortable with. The main tools you need when doing Pixeel art, in my opinion, is a precision 'pencil' tool, layers, easy-to-navigate frames for animation purposes and a persistent Preview window, so that even when you're zoomed to 1000%, you can still see the image as it will look without magnification.

There's a pretty comprehensive list of good paint programs stickied at the top of the critic's lounge (http://www.adventuregamestudio.co.uk/yabb/index.php?topic=32234.0).
Title: Re: Speech Icons[art]
Post by: on Fri 19/08/2011 20:18:28
(http://i1193.photobucket.com/albums/aa346/Bocalion/cyclops.png)
Cyclops also known as Scott... what do you think? (I tried "selout" a bit different way, because you complimented my palette last time, so this time I drew with less colors). I focused on shading. And I focused to make the least of "double pixels"- well there are a few, but it doesn't ruin the drawing, does it?

By the way, I am using Adobe Photoshop CS. I am not sure is that a good choice for pixel art, but since I used Photoshop for a very long time, I really don't want to change environment(I have used GIMP too, because of GIF animations, but Photoshop is better I think).
Title: Re: Speech Icons[art]
Post by: SpacePirateCaine on Sat 20/08/2011 11:12:49
Bogdan, well done! Good progress in only a few days. Keep practicing at this and you'll see your work getting better and better.

I'd suggest looking at some basic cartooning tutorials if you want to improve your anatomy, and study some pictures of peoples' faces with dramatic lighting to get a good idea of proper human facial shading, but I think you've made some good progress with contrast and color selection.

I'm actually not seeing any selout on this image - I also realized that I may be using the wrong term for what I'm trying to teach you as well. Essentially what I'm suggesting is the use of multiple colors on your outlines, varying them to create a smoother-looking single-pixel line. It looks fine without even so, and varied-color outlining is just one technique of coloring your image.

You said you did focus on shading, though, so I think you definitely accomplished what you were trying to. And don't worry about using every technique every time!