How can I create graphics similar to this?

gobachoaf · Apr 2015

HI guys, I am currently working on graphics for a mobile game I am making. I have some skill in vector, mostly through Inkscape, but I am trying to use Illustrator more. The thing is despite what program I use I can't figure out how to create something in the style I desire. I would like it to look something like this...

I can create the vector objects, like the saws,door, and chest pretty well, It is just the background and foreground in which I am lost. I notice they have a texture to them, with various colors, and almost a hand drawn look. Can this be accomplished in Illustrator, or will I need to use Photoshop? If so, how can I go about getting something similar to this. Are there any tutorials for work in this style, because I haven't been able to find any? Any information would be great. Even if their are any vector tutorials in this cartoon style, that would be nice too,since I can always improve. Thanks in advance!

gobachoaf · Apr 2015

Come on guys, any ideas?

Justin Meisse · Apr 2015

They probably used some sort of textured brush or overlay. You'll probably get more help if you post your attempts or explain exactly what you're having trouble with.

To answer your question about photoshop, yes you'll probably need some sort of pixel based image editor for game development.

There is also a section of the forum devoted solely to 2D art which might be a better place to look for help: 2D Art Showcase & Critiques

Shadownami92 · Apr 2015

You could also make use of cleverly overlayed gradients in Illustrator or Inkscape. I know that you can get a bit of texture into your gradients in Illustrator as well when you use gradient meshes, though it would probably need to go into the game engine as raster graphics for the gradient meshes.

Combine that with some in engine lighting/post processing and you could be good to go. Lots of 2d engines nowadays support 3d particle effects, post processing and lighting effects.

KeirKieran · Apr 2015

Yeah, but it would be vastly easier to use a raster type program, like Photoshop.

Justin's right; you're going to need to get into Photoshop or something similar eventually. Might as well go for it now.

PhattyEwok · Apr 2015

One of the biggest ways you can help yourself out is to just try and do it and then post your progress in the WIP. You'll get a lot more feedback that way from people.

Joebewon · Apr 2015

From what it's looking like, they made a background image re-using symbols and shapes.
Then the foreground is a pattern made probably in Photoshop, and like Justin said you could use some textures or texture brushes on your pattern to get that effect.

Also, it's not the exact style but hope this helps!
http://gamasutra.com/blogs/MuirFreeland/20150204/235732/Animating_2D_Sprites.php

RN · Apr 2015

For the overlay option you can use a paper texture image with a certain blend mode, like multiply or overlay, and adjust the opacity to something you like.

http://graphicburger.com/12-paper-textures/

How can I create graphics similar to this?

Replies