Getting that "cartoon" feel

Moderator
Posts: 608
Joined: 2002.04
Post: #1
I would like my game to have cartoony graphics, but I can't figure out how to go about converting a "normal" graphic into cartoon-like graphic? I like the style that w_reade had in MAFFia, so maybe he could give me some pointers?
Quote this message in a reply
w_reade
Unregistered
 
Post: #2
I'd be delighted, but I've got to rush off now; will post in a few hours.
Quote this message in a reply
Apprentice
Posts: 5
Joined: 2009.01
Post: #3
I like the graphics in Whacked (kinda half realistic), so I'd go for that.

http://www.gamasutra.com/features/20021115/fig_02.jpg

I have no idea how you would go about creating the graphics, but exagerating (spelling?) features and using bright colors seem to give some cartoonish feel.

.johan
Quote this message in a reply
w_reade
Unregistered
 
Post: #4
ARRGH!

massive post, somehow eaten. Grrrr Mad.

I'll try to summarize. Various things I have learned/heard/discovered:

Bright colours good, saturated colours better. When you colour anything, start off by filling areas with bold colours or gradients, up to the colour-clash point, and then work at muting them with the burn tool or an airbrush on darken, until they harmonise. It's easier to remove colour and brightness than to add them.

It shouldn't all be an explosion in a candy factory, though, you do need a bit of contrast Wink.

Backgrounds seem to need texture and blur - maybe 1.5 pixels or so, nothing ridiculous - and a bit of shading work (use dodge/burn). Leaving flat colours usually just looks bland, with occasional exceptions in some areas. In addition, since most of the colours are quite bright, the game objects need to work extra hard to stand out, and a bit of artificial depth-of-field does no harm at all.

Foreground items should have a crisp black antialiased outline (MAFFia objects didn't due to DSD limitations); you should generally have a thinner and perhaps slightly lighter antialiased line for interior details. Try to keep ground texture to a minimum - the crisper and cleaner they are the better they'll stand out, and they'll feel more punchy and kinetic Rasp.

In all cases I suggest you keep the lines to a minimum. With eyes etc. you can't help but have quite a few lines, but don't add lines for the sake of it. You can be surprisingly expressive with very few lines, and it's worth it for general impact. You might be able to get away with it in the background, since it gets blurred anyway and won't draw the eye too much if you're sensible :-).

[aside - do you know the faces program? It just fills a screen with subtly different stickman heads, and displays a surprising emotional rangle for a few circles and lines. If anyone knows what it is, let me know - I'd be interested. Anyway, yes. You don't need lots of lines to look right.]

Finally, a step I have found useful in the past, although I forgot to do it this time:

KPT Grime Layer at 5% opacity, then 0.5 pixel Gaussian Blur. Take care with your mask - try applying the filters only inside the outline (contract the mask channel selection by 1 or 2 pixels). It's barely noticeable but it just makes everything seem lessÖ sterile.



ÖerÖ I'll let you know if I think of anything else.

hth
william

[oh, yeah, and I don't know that much about cel shading but I'm looking into it at the moment and I'll let you know if I do anything interesting with it]
Quote this message in a reply
Member
Posts: 328
Joined: 2002.04
Post: #5
w_reade has all very good tips :-)

Picking up a couple of how-to cartooning or animation books at a local library or bookstore is a great starting point, too. If you can't draw a cartoony character, nothing you can do in photoshop will make it look cartoony. Exagerated features are key, but so are more subtle things like lines of motion and, if your character is animated, key principles like squash and stretch. Also, make sure that the whole world you create has a consistent feel, including interface screens and even your game's icon...

But mostly just what w_reade said Wink
Quote this message in a reply
Founder
Posts: 1,139
Joined: 2002.04
Post: #6
You might also try Ari's "Design Computer Arcade Graphics." Somewhat old, it still is good for sprite creation.

Create a cartoon character.

1. Pencil sketch --> buy book if needed
2. Scan
3. Use Photoshop or better yet, Illustrator (freehand/Canvas) to make paths
4. Use Photoshop to colorize.
Above is how most Japanese manga is made.

I also agree that you should use the blur tool and saturated colors. Also, it is good to have a black outline (or dark shade) around the character. About graduation....

Time to use your brain. Close your eyes.

1. Make a black circle.
2. Now make a smaller circle with say red. Have about 3 or so (depends on the style) pixels of the black border showing.
3. Now in your red circle, you need 2 other colors, a highlight color which is the same color as the red, but lighter and a shadow color, again the same, but darker.
4. Think about where the light falls on the object. Color that side with the light red and the opposite side with the darker side. don't blend the colors (if you do, you get a 3d rendered look) but have strong contrast areas between the three shades of red.

Now apply this concept to the rest of your art, and you have cartoons.

Ok, now the REALLY easy way. Get a 3d program with a toon renderer or Flash rendered. Render using that system and you get nice cartoon effects.

BTW... It is also easy to get a photograph, and reduce colors, play with the image and soon you get a cartoon.

Carlos A. Camacho,
Founder
iDevGames
Quote this message in a reply
Moderator
Posts: 608
Joined: 2002.04
Post: #7
Thanks for the good tips, all. My graphics look much improved Love
Quote:Originally posted by Camacho
Ok, now the REALLY easy way. Get a 3d program with a toon renderer or Flash rendered. Render using that system and you get nice cartoon effects.
I have been thinking about getting a 3D program for some time. I go to the front page, read the article about Strata, think "Oh wow, they have a toon render, lets check them out.", go to their site, love the looks of it and then see the price Shock $449?!?!?!? This won't do. Is there any 3D program that has a toon render that is cheaper?
Quote this message in a reply
Founder
Posts: 1,139
Joined: 2002.04
Post: #8
Look at Hash at $199 or Carrara Basic (don't know about toons though.) or get low end Strata and perhaps buy the toon renderer. Also try Cinema 3D Go.

The investment you put into a 3d app, WILL pay for itself over time. Trust me.

Carlos A. Camacho,
Founder
iDevGames
Quote this message in a reply
Post Reply