Wednesday, May 9, 2018

Amateur tips and tricks about art and sprites - Part 1

Today I'll talk a bit about some tips and tricks that made me, an utter art newbie, manage to draw some at least presentable 2D sprites and art. In this first part I will quickly do some broad strokes on the topics, and then in the following parts I'll go into detail about some of them and what I specifically used to make PPG. Now let me make it very clear, I'm 100% an amateur and I know it. This will be "by a beginner, for beginners". All I want to do here is to maybe inspire other beginners like me that think they will never be able to draw anything that they definetly can if they have the dedication. Let's do this.

[DRAWING SOFTWARE]


Go with simple and free. I mean, what are we even going to do with photoshop or other professional tools? I mean sure you can use it if you're confortable enough with it, but if you're trully an amateur, you won't know how to use 90% of its functionality.




Now there are many simple drawing software out there, but I personally used both Paint.net and Aseprite. Paint.net because I was already familiar with paint (I mean who never messed around with paint at some point?) and because it has good additions like layering (very important) and simple effects (very helpful) built in. Aseprite because it is simply excellent for 2D sprite animation and very easy to use. Aseprite has an old free version you can use (although the paid version is very cheap and highly recommended).

Every single piece of sprite art in PPG was draw using Paint.net, and every single frame of animation was animated in Aseprite.


[RESEARCH AND SEARCH ENGINE SKILLS]




You read that right. If you are an amateur (like me) you HAVE to spend a lot of time (like I did) researching and looking for things to help you draw something, perhaps even BEFORE you draw your first pixel. Well, at this point in time-space, we have some excellent free tools to help us with just that, like google, bing, youtube, duckgogo, etc. This is where your "google-fu", or in other words, your searching skills will come into play for the benefit of your learning.

OK, so what to search for?
  • Tutorials: No brainer here. We're newbs, we need tutorials, simple as that. Use search terms like "sprite art tutorial", "simple 2D art", "sprite art", "easy spriting". There is no two ways about it, a lot of time will be spent not only LOOKING for decent tutorials, but also READING/WATCHING said tutorials. You will need to learn about colors and shading, about sprite smooth lines and anti-aliasing, about minimum amount of sprite details, etc. Research and study, it can't be helped.
  • References: Professional artists frequently use references for their work, so why shouldn't we? What do I mean by reference you say? Easy. What do you want to draw? A slime? OK, open a new tab right now with google and type "slime 2D" and click on images. Done. Lots of simple and nice slimes that you can use as reference when trying to draw your own. You can save one of those images, open it up with your choice of software, and then try to draw some simple shape like a ball or something, put one or two dots for eyes, choose a color, go wild.
  • References #2: Oh wait, you want to draw a cute sprite girl? Sure, you know the drill. Google "cute sprite girl". Hmmm. There are some sprite results, but also a lot of vector art and other types. Like I mentioned before, this is where your google skills will have to shine. For instance, change the search term to "cute sprite 16 bit girl". Better, right? Don't feel discouraged by an initial result, keep refining your search.
  • References #3: Tought it was over eh? Nay. What I'm saying here is: Observe and look at sprite art. Go, just look at it. Look at sprite sheets from classic games like mario, sonic, zelda, bomberman, street fighter. Try to look for how the artists drew the outiline, if even there is one at all! Look for colors used, open it up on the software and check the colors, the shadings. Try to notice how many small details are visible in cerain types of sprites. Can you tell how many toes or fingers a sprite has in a certain art style? I mean just look above at the pokemon battler. Notice how her "fingers" amount to basically 2 or 3 pixels, yet it doesn't seem wrong or anything. Notice how the shape of her breasts in her shirt is expressed only by a brighter shade of the shirt color, etc. Start looking hard at sprites and put them under a microscope (or the zoom function of your drawing software).

[DRAW AND DRAW SOME MORE, BEGIN WITH SIMPLE AND SMALL AND LIMITING]

Limiting yourself to a specific canvas size is very, VERY good at the start, and in the context of games, can very commonly be 8x8, 16x16, 32x32, 32x64, 64x64, etc. Pick one and start drawing small things with simple shapes and simple colors and shading: 




Notice a pattern between the 2 examples I found with some quick google-fu and my own icons for the power-ups in PPG? Generally speaking:
  1. Very small and simple shapes/outlines.
  2. Keep the same canvas size whitin their own set (in my case, 32x32).
  3. Few simple colors (ranging from 2 to 4), that break down into: 
    1. Darker outline color.
    2. Simple fill color.
    3. A little darker shade of the fill color for shading.
    4. A little lighter shade for reflection/shine (in the 1st example white is used)

Start with a simple shape/outline of a ball, a pyramid, a sword, a shield, a heart, a treasure chest, a coin, etc. Symmetry is easier, specially at the begining, like in the example of Pixie's girl sprite above. Notice how the pokemon battler is all asymmetric and fluid looking, while my own is symmetric and stiff. But that is just how we newbs have to start. Almost all characters and monsters in PPG (Pixie included) are made in a canvas of width 32, height 64. The blocks and scenario are almost all made in 32x32. 

Lastly, draw, then look for some references of sprites about what you want to draw, then draw some more, then look at more art, and then draw even more, repeat ad infinitum. Don't worry too much at the start and don't be afraid to just begin, instead of wasting time thinking too much before even puting a simple pixel on the screen. Make that digital pencil move, click it, 1 pixel appears, keep going, make a line, make a curve, close it down, paint bucket it, keep going. Just practice. Draw ugly little deformed things with simple ugly colors, that barelly resemble what you actually wanted to draw. But just keep doing it. Eventually, you will reach a point where you can tell that you improved, and by that point will certainly have draw something you can feel confident about.

And that about sums this part up. I know it kinda feels like generic explanations, but like I prefaced, this was more of a set up to following parts but also to set your mentality to just go right now and get some things done. 

See you next time!

No comments:

Post a Comment