0

Okay, so I am a Web Developer and I want to learn how to make 2D assets for the old school browser game I'm working on. I'm not an artist, and my skills in that area are very poor. I'm not even sure if that's the right place to post that question.

I want to have the terrain and the buildings separated so that I can create different layouts for the terrain. The buildings would have different versions for their levels. You get the idea.

The thing is, I don't know even know how to explain what I want to learn in a simple google search. Can you help me out by pointing me to good tutorials or maybe listing some examples for software I need to learn? I have some experience with 3D Blender but here we're talking about pure 2D.

Anyway… I would use any information you can give me on what I need to do in order to achieve similar results to the images below.

Screenshot from KhanwarsScreenshot from Imperia Online

7
  • 3
    Imagine.... "I'm an artist but I'm not a programmer. In fact, my programming skills are very poor. I've can create some simple HTML. I want to make a browser game. Where do I start?" -- can you see how nearly impossible it is to provide any answers or direction? There is a valid reason being an artist is a profession. Just like programming it can take years to learn effectively. There aren't any shortcuts or "quick fixes". It's not rocket science by any means, but to create the detailed and professional artwork in your samples, you'll need years of practice and probably formal education.
    – Scott
    Aug 23 at 1:23
  • I never said I was looking for a quick solution. I'm asking for a good way to get started. And no I don't think I need to be a professional or have an education in an area in order to do a very specific thing (because that's what I'm trying to do here). I obviously don't aim at the quality of the examples I provided .. I gave them as an example for the PoV and the overall layout. I just need a tip from someone, who can do such a thing, on where I should start from.
    – Rafy
    Aug 23 at 1:48
  • Sorry I didn't mean to come across as snarky. My point was, This is far, far, far too broad of a question. You start by drawing. There's no tutorial that's going to show you how to draw. In addition, one could use any of a hundred different software packages. You'll need to understand lighting, perspective, foreshortening, isometrics, etc. It's not an "easy" answer.
    – Scott
    Aug 23 at 1:53
  • My question is broad because I still can't formulate what I mean very well. Also when you say drawing do you mean like on a tablet or using a mouse?
    – Rafy
    Aug 23 at 1:56
  • 1
    Artwork isn't a systematic thing. It's ephemeral in nature and can't really be taught. You can teach the aspects used, as I've mentioned - lighting, perspective, etc. But you can't really teach art or learn it from a tutorial. And no one here knows how adept you are at drawing or creating artwork. You could draw on a tablet, or with a mouse or with a pen and a piece of paper. You could create vector artwork or work exclusively with pixels, or mix the two. Unlike programming languages, there's no procedural formula everyone uses. That's kind of my point.
    – Scott
    Aug 23 at 1:59
1

I will attempt an answer here, but the question is really very broad. It's almost asking how to draw which is far too broad a topic.

It's possible to create such images using a scanned pencil or digital sketch. I'm not going to go into details on how to sketch or draw. That's something you would have to learn if you want to do this from scratch. It's far too broad a subject for a tutorial. Suffice to say that anyone can learn how to draw, but if you have no idea, a drawing class would help. Another possibility is to employ an artist to do the basic sketching. I'll let you decide if you think it's something you could manage yourself. If not, the answer is still valuable as it can give you brief overview of possible processes.

I also assume a basic familiarity on how to use a raster image editor such as GIMP/Photoshop. If this is something you are not familiar with, there are tutorials online.

Here's a very rough example of how you could go about it, assuming you already have a nice sketch to begin with. Looking at the examples posted, the style itself is quite loose, not quite pixel art but very close to it. It definitely has a painterly aspect to it.

Here's the basic setup:

Draw a sketch of a building and reduce the resolution in steps using a raster image editor such as Photoshop/GIMP, increasing sharpness and levels until you have something that looks like this example below. Zoom in so you can see the individual pixels. You want quite a high contrast look, don't worry about highlights or shading so much at this stage. The visibility of the basic darker outlines is more important. Don't worry about the fuzziness either at this stage, it will be fixed as you create the artwork.

enter image description here

Set up some layers in your software (this is for GIMP, but would be similar in Photoshop): A bottom layer filled white. A transparent layer above that (I've named this layer Colour). And the sketch layer above that, with the layer blending mode set to "Multiply".

enter image description here

Select the Colour layer, use the Pencil tool, set to a 1px brush, and paint solid color pixels to fill it in. Something like this example below. Here I have partially coloured part of the image, the steeples and part of one tower. The screen capture shows the different layers separately, and with the background layer hidden.

enter image description here

Note how the pencil sketch layer is combined with the coloured pixel layer when the background layer is hidden, but only in areas where there are coloured pixels, leaving the rest of the image transparent.

Obviously to do something like this effectively you still need to know about shading and lighting to get a good result, again art classes will help with that. Also this whole process is tedious, and very manual. But starting with a simple sketch, and then colourizing it is a good way to break it down into manageable steps.

Anyway . . .

Continue to paint and colour in the whole image. From time to time, hide the background layer to check your work as you paint. Also zoom to 100% from time to time to check what your work looks like at actual size.

It's also possible to work with multiple color layers if you want to keep some of them separate. It's up to you if you want to do this or not. Might be helpful for example if you want to apply an effect to just one section/object, say to darken or lighten it, etc.

When you have finished, hide the background layer and Export as PNG with transparency. Also save your work in your applications native file format (XCF for GIMP, or PSD for Photoshop) if you want to work on it again in future. This will preserve all the layers.

1
  • Thank you for putting all of this together for me! This was what I was looking for.
    – Rafy
    Aug 24 at 22:28
1

This will not answer your question, but probably will solve your problem.

Do not waste time learning stuff that takes YEARS to do it properly. Focus the time to polish your programming, story, interaction.

Hire or associate with a designer or illustrator.

3
  • Sure that's always an option. I will probably end up doing something like that. The thing is the theme of the buildings/uints is Roman Empire and there are plenty of images online I can use as examples. Also I have a decent understanding of Roman architecture and things like armor/weapon style. But maybe you're right .. I should make some placeholders and actually work on the thing I'm good at and find someone who knows what he's doing.
    – Rafy
    Aug 23 at 9:43
  • @Rafy you may find that having a reference image of everything you need online and having a cohesive whole from same angle, same lighting, palette and style is a entirely different ballgame. Plus you have no ownership of those images.
    – joojaa
    Aug 23 at 9:59
  • Nevertheless, I will try to post a small, tiny workflow on how something cohesive might be done. Just give me a bit of time... I have quite some work now :o)
    – Rafael
    Aug 23 at 21:07
0

Personally I don't agree that everyone should concentrate on one thing and hire/team up with other people for different disciplines: while this is true for a lot of situations, not necessarily for all of them. I know quite a lot of coders who also create beautiful graphics for their games, I know a lot of artists who are able to write code or make music for their projects. Plus with graphics there are a lot of styles that are more approachable for people with less experience (different lo-fi styles).

If you're interested in games graphics you totally can hack through a lot of situations and you won't need years and years of learning before starting — especially if your goal is to make assets, not to learn everything about making art. Since you know some Blender you can use 3d as a base for forms and lighting and paint over with textures and details in any 2d app. You can use photo manipulation and filters to 'destroy' the photo look of your 3d bases. These are legit techniques that artists use all the time. For instance you're saying that your references are "pure 2d" — well I'm 100% sure they aren't — they are paintovers over 3d bases.

I'm not saying you can completely ignore learning any basic artistic skills like composition or color theory but at early stages it's possible to compress them to a set of rules to follow and with experience and time comes understanding.

A common issue with beginner artists is inability to evaluate their work. With coding it's more straightforward because (on the base level) you have a working code or not working code — art doesn't work this way. For feedback I'd recommend you to look for game artists with communities around them — maybe ask on different game artists / artists discord servers or subreddits.

For technical stuff there are courses aimed for game artists like, say, Ctrl Paint, there are artists who provide payed feedback sessions to their patrons (there are a lot of artists on Patreon) or create courses + feedback sessions. There are a lot of options but you'll have to do some research. Well, doing a research will be a very important skill — there are a lot of free content on Youtube but it's important to take some time in looking for different options and filter the terrible ones out. For example searching YT for "isometric paintover" gave me this video with the person talking and showing adequate stuff.

Good luck!

2
  • Thank you for the detailed answer! It helps.
    – Rafy
    Aug 24 at 22:26
  • After watching the video about implementing 3D into 2D I feel like this is a great workaround for me as perspective is really the most challenging thing, for me at least. Thank you again!
    – Rafy
    Aug 24 at 22:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.