Technique for these kinds of Foiliage?


#1

I know, I know, it’s angry birds ref, but I am very curious to learn how the artists crafted that foilage (the various bushes protruding as sprites throughout the level).

link to Ref

Did they use two layers in illustrator, and then apply masked brush strokes in photoshop?

I have been scouring the interwebs to no avail, and would be very curious to hear if you guys had any input.


#2

For context, this is what I was able to “figure out” so far, but not close to the kind of brushed (but still looks like it was achieved with vectors) look that the ref achieves.

Link to my Result


#3

I don’t quite understand the question. It’s just some jagged shapes with two colors–you can jut paint it like you would anything else. What exactly is stomping you about it?


#4

because it’s not actually that simple.

Look at how the sprite achieves its look-- it looks like there are three swatches involved, two vector shapes, and perhaps the inner vector bearing a stroke? Or perhaps they’re using outerglow with high opacity.


#5

Why do you assume the art is done with vectors? Is it some known fact that Angry Birds’ artists do their in-game assets with vectors?

When I zoom in on the reference image, I see basically this:

There are two main values–one is the foreground blades of brass with lighter value, and then the background blades of grass of a darker value.

There are also two more values used for the outlines. The background blades layer have the darkest value used for the outlines, and the foreground blade’s outlines are only slightly darker than the local value of the foreground blades.

So essentially, you have four values.

Darkest - Outlines of the background blades of grass
2nd darkest - The local value of the background blades
3rd darkest - The outlines of the foreground blades of grass
lightest - The local value of the foreground blades of grass.

And that’s it.


#6

Probably not AI vectors, but yes, using Paths in Photoshop-- I don’t know if there are any Rovio artists on these boards, but they were very influenced by Flash games’ aesthetics which do use vectors.

When I zoom in on the reference image, I see basically this:

There are two main values–one is the foreground blades of brass with lighter value, and then the background blades of grass of a darker value.

There are also two more values used for the outlines. The background blades layer have the darkest value used for the outlines, and the foreground blade’s outlines are only slightly darker than the local value of the foreground blades.

So essentially, you have four values.

Darkest - Outlines of the background blades of grass
2nd darkest - The local value of the background blades
3rd darkest - The outlines of the foreground blades of grass
lightest - The local value of the foreground blades of grass.

And that’s it.

I guess what I am trying to figure out is how that outline was achieved. The outline looks almost painted in, but it looks very smooth, like it was created with a stroke or vectors.

If you’re interested, I’d invite you to try to replicate that sprite with your own technique in photoshop or AI and see that its trickier than you describe.

But only if you’re interested. :wink:


#7

I used to be the studio art director at iWin (casual game publisher/developer), so I’m quite familiar with casual game art and development.

I can’t think of any reason why you’d have to use vector to do this kind of style. I don’t see any reason why anyone with halfway decent drawing skills can’t paint everything you see in Angry Birds with just about any basic raster art program, using just the basic painting brushes. The main reason to use vector is for scalability, and in game art, you usually create the art assets at the highest resolution you’d need them (depending on what platforms the game will potentially be published on), and I have never come across any situation where using vectors was necessary in the production pipeline (except for maybe GUI-related assets).

But if you simply “enjoy” the process of using vector art programs over raster, then sure, you can try to replicate the Angry Birds look in a vector program. But you can just as easily do it with a raster art program. Angry Birds is not exactly high-end game art–any halfway decent artist should be able to do it.

If the Angry Bird artists did use vector art programs, then I suspect they like how easy it is to create the smooth curves needed for that style.

I personally don’t use vector art programs since I have no use for them for the stuff I do. But like I said, if you simply want to replicate the look, you can easily do it with raster-based art programs–you don’t have to do it with vector.

You might want to read these links:
http://gamedev.stackexchange.com/questions/30111/why-dont-more-games-use-vector-art

http://www.cocos2d-iphone.org/forum/topic/13511


#8

I’m not sure I am using the term vector correctly, I am using Photoshop’s path tool for example (which is ultimately creating a raster image, but the paths themselves are scalable) and I guess the point I was trying to make is that those sprites are very clean, I’m not sure how an artist could achieve those smooth lines with a brush for example.

Btw, I am very familiar with iWin and it’s cool you worked there. I sent you a message that I think is more relevant as a PM.


#9

Just use the standard round brushes. Set the spacing to 0, and then just paint. Same with the eraser when you need to clean up edges. And remember, you can always work big so when resized down to the display size, the details will look more crisp.


#10

This thread has been automatically closed as it remained inactive for 12 months. If you wish to continue the discussion, please create a new thread in the appropriate forum.