[GCompris-devel] Artwork Guidelines

[Karl Ove Hufthammer]

On 07. feb. 2015 11:31, Timothée Giet wrote:
> and including a link to the artwork guidelines proposal:
> http://timotheegiet.com/gcompris/artwork-guidelines.html
>
> As you can read I'll start on February 16th, so if you have comments 
> about the guidelines please tell me about it before this date.

I just sent you the following e-mail via your Web site, but as I’m not 
sure it will reach you (due to SPF spam protection), here it is again, 
via ordinary e-mail. The GCompris-devel list is also CC’d, in case other 
people have any comments.

These are my opinions, and of course style is subjective, but I’ll try 
also provide *reasons* and arguments for them.

01 - Simple style

I agree. A cartoony style works well, and is very appropriate.


02 - No external outlines

Very much disagree. Having no outlines makes the objects seem very flat, 
lack depth, and they don’t stand out from the background, due to lack of 
contrast. It removes the difference between background (scenery) and 
foreground objects, making it all ‘the same’.

One thing that *doesn’t* look very good, though, is the completely black 
outlines for much of the current GCompris graphics. Black is too strong. 
But having thick outlines the same colour as the inner object but 
slightly darker works very well. For example, compare this (black outlines)

http://www.how-to-draw-funny-cartoons.com/images/duck-drawings-008.jpg

with this (coloured outlines):

http://www.how-to-draw-funny-cartoons.com/images/duck-drawings-009.jpg

The outlines should be quite thick. This makes the object seem more 
solid, appropriate for a kids’ game. Thin, hairline-type, outlines (and 
strokes in general) tend to make objects look fragile, stiff and formal, 
and should be avoided.

This it too thin:

http://www.drawingcoach.com/image-files/cartoon_chick_st5.gif

This is OK (and much cuter!):

http://www.how-to-draw-funny-cartoons.com/images/puppy-drawing-009.jpg


03 - Colored internal details lines

I agree. Don’t make the lines too thing, though (see above).


04 - Flat colors for hard objects

I’m on the fence here. I really dislike overuse of gradients. On the 
other hand, having only solid colours makes it very difficult to add 
depth to the graphics. Compare this (no depth):

http://www.how-to-draw-funny-cartoons.com/images/duck-drawings-003.jpg

to the following versions

http://www.how-to-draw-funny-cartoons.com/images/duck-drawings-004.jpg
http://www.how-to-draw-funny-cartoons.com/images/duck-drawings-006.jpg
http://www.how-to-draw-funny-cartoons.com/images/duck-drawings-008.jpg

You *can* get away with avoiding gradients by having a few well-placed 
solid coloured ‘shadows’, e.g. the crescent-shaped darker shape at the 
lower left side of the last image. Here’s another example where shapes 
in one lighter colour and one darker colour is used to add depth:

http://thumb101.shutterstock.com/display_pic_with_logo/322090/225357373/stock-photo-freshly-baked-golden-crescent-shaped-croissant-with-a-happy-toothy-smile-cartoon-style-225357373.jpg

Still, I think some *subtle* gradients may improve the graphics.


05 - No shadows

I’m not sure what my thoughts are here (though see above comment on 
solid ‘shadows’/highlights.


06 - Soft colors

Well, this is the opposite of what’s traditional in children’s software. 
I do agree that *too* saturated colours look terrible. E.g., this is bad:

http://www.primarygames.com/holidays/st.patricksday/games/hide-n-seek/images/game1.png

But these are OK:

https://lh6.ggpht.com/5KGEpRh-1H_24E5DZO8NHT5047WSMOZJFGl7nQSz--m07VA15VhlMwaUXmrT2hKJVB4=h900
http://www.nicoland.co.uk/img/page3.jpg

And using only pastel colours doesn’t work very well:

http://www.ekomini.com/visu/game_ekominiville_3.jpg

My thoughts are that you should avoid extremely saturated colours, but 
having only pastel colours is equally bad. Since it’s a game, and in 
particular a kids’s game, it *needs* to be colourful. But I guess 
colourful but in a restrained way, so that the screen doesn’t feel too busy.


07 - SVG format

Very much agreed.


A final suggestion. Do you know the concept of ‘staging’? Take a look at 
this image:

http://www.clker.com/cliparts/8/6/d/2/12161376851595770453lemmling_Cartoon_elephant.svg.hi.png

It’s competently drawn, but it doesn’t work very well, because of the 
point of view. If an object instead is drawn so that it works even if 
was rendered as a silhouette, it’s much quicker and easier to ‘read’. 
Take a look at the image below *heading 3* (‘Staging’) at

http://www.87seconds.com/en/video-marketing-blog/read/the-12-basic-principles-of-stunning-animation-video

for a nice illustration of the concept.

Here are a few other nice examples, including two videos:
http://craigbowman.com/animation/principles-of-animation-part-ii. And an 
explanation: 
http://en.wikibooks.org/wiki/Traditional_Principles_of_Animation/Staging

I think this is a useful guideline to follow when designing the GCompris 
graphics.

-- 
Regards,
Karl Ove Hufthammer