the programmer art thread

[BlinkOk]

ok i'm starting this thread to try and impart some very basic and simple lessons that i have learned in my time pursuing graphics for games.
i know you could prolly go to another source to get this information but i thought it would be cool to have one thread that documented all the simple "tricks" that artists use to produce their graphics.
i hope other artist types step in as well because i am by no means a polished artist.
ok enough blah blah blah. here's the first tip.

when creating shadows or highlights for a surface it is always a good idea to "hue shift" and then select a darker or lighter shade. by "hue shift" i mean select a colour "across" the palette before selecting a darker or lighter value.

in the example above i might select a hue towards the red spectrum if i wanted to produce a shadow or i might go towards the yellow if i wanted a highlight. i don't really matter which way you go, the point is you are adding "colour" to your composition which always adds interest

now i reckon this could turn into a really valuable thread for you programmer types who aspire to create their own game graphics . it just depends on you artists out there. i prolly only have about 4 or 5 more so i'll really need some help here.

[Viza]

Ooh, nice idea Blink. Unfortuantely I don't have much time to make a very graphical post, but I hope this written tip still helps:

To produce 'lowlights'/highlights on the edges of a shape:
-Grab the desired shade of the highlight/lowlight using the above method by Blink.
-Select the shape that you want to highlight with the cursor tool.
-Click on the brush tool (the shape should still be selected)
-Select the brush mode: 'Paint Selection' (brush mode can be found in the options tab window)
-Colour outline of object with darker shade to create a darker depth.

This has proven handy to highlight objects without destroying sorounding images.... I hope that made sense.

Viza.

[renderhjs]

quickly copy clean rasterized vector shapes (from flash?) to photoshop:

use this daily because I am sick of depressing OS dialogues (export, settings, open,convert)

[BlinkOk]

experiment with different types of outlines and drop shadows as well as colours.

i find that for titles most font spacing is too sparse between letters and especially between lines. don't forget to experiment with character and line spacing when you introduce new fonts into your game.

[mr_malee]

view -> snapping -> snap to pixels

modify -> shape -> expand fill

[samvillian]

on that expand fill thing, can't you do the same with dragging a square and pushing down arrow? or up arrow for that matter.

I like this thread already. I just said to myself yesterday that i need to learn to draw. And trust me, I really do. It's funny cause i can copy things perfectly, meaning i have the ability to do it, but i dont have the artistic bone.

[BlinkOk]

silhouette

when developing your characters it is always good idea to look at the character in silhouette.
if the silhouette looks like a shapeless blob then you will prolly need to do some more work to give your dude shape and character.
look at these uber cool silhouettes from team fortress for example. you can almost tell what they do by their silhouette.
look at how and where the human forms are exaggerated to describe what they do

[The Helmsman]

Yes! Team fortress II definitely is a perfect example on how to make great looking characters!

[M0nolith]

great thread! very interesting and helpful, especially if you fail at graphics like me

I demand MOAR!

[Never_land:(]

smooth figures
this is a great thing if you want to make your drawings less pointy

[Never_land:(]

shading


this is the shading blinkok was talking

[Never_land:(]

you need to draw a lot of lines to cut the object and shade

[samvillian]

must.....resurrect.....good.....thread!

Good way to make clouds:

1) make a light blue background

2) Make a circle with a radial gradient on it going from white to transparent.

3) ALT drag to make copies of them to make clouds. You can stetch them to make it fit the shapes you want. WORKS BETTER IN PHOTOSHOP THEN FLASH, yes it makes flash really slow...

this is what i made using this technique (better than photoshops clouds imo)




DONT BE SHY. Post something pointless or whatever, maybe it'll help someone right?

[renderhjs]

good article regarding web 2.0 look:
Destroy The Web 2.0 Look’ @ Future of Web Design, New York

[hatu]

good article regarding web 2.0 look:
Destroy The Web 2.0 Look’ @ Future of Web Design, New York

I don't really understand the bad rep 2.0 gets. It's easy to do and looks fairly professional and good.
If you're not a professional or skilled designer, it's actually one of the better styles to choose. Sure it makes you look lazy and unimaginitive but it beats looking like a fool who makes ugly pages or games in styles he can't definitely pull off.

[renderhjs]

@hatu: web 2.0 look is one way of communicating but not the only one wich is why I primary posted the link. Dont think of it as a bad or good thing what matters in the end is if you like it

[AzraelKans]

Back on topic. heres a trick I use to get nice looking highlights using nothin but good ol' flash.

Create the shape you want (or grab the shape from a vector image)

Break it, use a gradient fill if you like.

Make a duplicate and use a gradient fill with all whites using values alpha 0 to alpha 80 then alpha 0 again, the alpha 80 area will be the highlight

Make a symbol of it (f8) and place it on top of the original logo

Use ADD instead of normal as the drawing method.

To make it look like a bloom effect add blur filter on the highlight. (a small 5*5 low quality blur will do )

Coolest thing about ADD highlights is that they ADD each other, the more you put on top the merrier (or blurrier) it gets! look at this example:



img 1-First example, boring ordinary typefont with gradient
img 2.-Add one highlight, not bad.
img 3.-Duplicate the logo movieclip and use ADD instead of normal then place the highlight on top it gets interesting nice color too.
img 4.-Duplicate another highlight, place it on top (is a bit too much I know), but it looks completely different than the original! And quite more interesting. Save that to a PNG and we have our stylistic type art done!

Replace my crappy name with your game logo, awesome!

[ImprisonedPride]

WORKS BETTER IN PHOTOSHOP THEN FLASH,

Filter -> Render -> Clouds

[samvillian]

i knew someone was gonna say that. so i prepared a long speech. uh hum:

i like mine better.

[Al Capwn]

Hot Tip: I've learned from making my most recent game to Never Ever Use Straight Gradients for textures, Especially if You Make Them in Flash!

Forreal though. If you are going to do something like metal or wood or something sheeny, don't use the gray to gray gradient in flash. Get into photoshop, and throw in some noise and blur it (motion preferably). This actually makes the object seem textured instead of lame and shiny.



This is just fill > add noise > motion blur