How to create fantastic Pixel Art for your games and apps

how do you start with pixel art on? Fortunately is pixel art one of those rare occasions when it really is as easy as it looks. This is pixel art...

Pixel Art has a certain retro appeal that harks back to the 8, 16, and 32-bit console era. Today, however, it's more likely to be found in a variety of indie and mobile games and is currently enjoying something of a resurgence. It's a fantastic way to bypass the technological limitations that come with being an independent developer and mobile hardware. This way, you can do less work and reduce your file sizes—but instead of looking cheap, it feels like a conscious stylistic choice. Add in some chiptune music and a unique color palette and you have a great aesthetic that will turn heads on the Play Store.

Another attraction of pixel art is how she challenges you to work within her limitations. Since the images are so small, this forces a somewhat impressionistic approach. How can you make a pixel or two instantly recognizable as a charismatic smile or a dagger sticking out of an opponent? Here lies the true art of the format and that is why some of the achievements in games like Superbrothers: Sword & Sworcery or the newer one Hyper Light Drifter  so impressive.

how to start

With that in mind, you can decide that pixel art would be a good direction for your own project. In this case, how do you start? Fortunately is pixel art one of those rare occasions when it really is as easy as it looks. This is pixel art...

At the beginning you only have to select a drawing program of your choice. I use GIMP since it's free, but you could just as easily use Photoshop or even MS Paint. However, I'd recommend using something more complex than MS Paint, as it can be handy to have access to features like layers and transparencies (as we'll see later). There are some dedicated pixel art programs that you can also work with, but these are generally not required. However, Aseprite is a good option.

Regardless of your choice of software, you'll then select the pen tool and make sure it's set to draw individual pixels at 100% opacity. Now zoom in on your image to the point where you can clearly see the square pixels as you draw. It is really that easy!

Now you can start drawing freehand or place each pixel individually. Note that when drawing things like circles, it can pay off to look carefully at the patterns of your pixels (two on top, one across, three on top of one across, four on top of one across, etc.) as this will produce a more consistent and controlled look Image. The good news is that it's very easy to undo any mistakes you make, so there's no reason not to experiment.

What you end up with is a basic outline for whatever you're trying to draw in blocky pixels. Don't worry about adding lots of detail until later—just experiment with getting the shape and proportions right first. This is the hardest part, especially with a lot of characters.

I like to use an outline for my paintings, but a lot of people don't bother and draw in block colors. Do what works for you, but note that each method has pros and cons; Outlines make it easier to distinguish details, but can get annoying as your images get smaller and running out of pixels!

Adding details and shading

Once you are happy with your outline or silhouette, you can add the individual details until you have a complete picture. The more details you add, the more impressive your characters will look. At the same time, however, you must avoid making your image seem too cramped. It is important that you start with an outline that is the right size - and remember that the other objects in your game world must also be relative.

Now that you have your details, just add the colors you want with the fill tool. However, this can look a bit flat at first, so you'll most likely want to add some sort of lighting afterwards.

To do this, simply imagine a light source for your character, and then select two or more additional shades to add to your color palette. You need at least one for shadows and one for highlights. Make sure all the shading appears on the same page, and think of the outlines that would be naturally created by the shapes you draw if they were XNUMXD. I use lots of shadow on one side and then just a thin strip of light on the other to bring out highlights, but again, the key is to experiment and see what works for your own personal style.

Remember that you are drawing characters and objects for games. That means you have to think carefully about your light source. Creating a very obvious shadow effect on the right hand of your sprite can look odd in some contexts - especially if you flip your sprite while it's going in the opposite direction! Keep this in mind as you create your image and consider making your lighting more subtle or casting it overhead instead.

Export your image

Once you're done, you can save and export your image. Of course we have to be careful at this point because the picture is actually winzige will be . There are also a few other things to keep in mind when using your art in your games.

First, make sure to auto-crop your image so there are no white areas around the edges. This is useful for your collision detection and also helps you not to make your image unnecessarily large. However, you may want to create a "sprite sheet" instead, meaning you'll add each frame of animation to a single file. This makes the overall file size smaller and keeps it easier to organize. In this case, cropping is less important since you'll do it later in your chosen IDE.

You also need to make sure the background is transparent so that characters move around in your game world, rather than big white squares with characters drawn on them. In Gimp you do this by selecting "Layer" from the menu, then "Transparency" and "Add Alpha Channel". From there you can erase your white background and let your image float above nothing.

If you export your image, you can do so at the actual file size if you plan to use it in a game. In Unity you can choose the 'Pixels Per Unit' for each individual sprite, making it easy to blow up your image as big as you want while still benefiting from the small file size.

Conversely, however, if you plan to share your images online, you want them to appear larger. So go to 'image', then to 'image size' and increase the size. Make sure you have Interpolation turned off or Preserve Hard Edges selected (depending on your software). Otherwise the picture will appear blurry.

7 Pixel Art Tips

Finally, a few tips to get you on your way to mastering the pixel art should help...

1. Keep the big picture in mind

As you zoom in and carefully edit each pixel, it can be difficult to imagine what your image will look like when it's finished. Because of this, it's important to zoom out from time to time. Or better yet, try the navigation tool (available with most art programs) which allows you to view a reduced perspective on your canvas and also jump to specific points.

2. Use the Magic Wand Tool

You can select an entire region or color using the Magic Wand or Color Selection tools. This way you can then only draw on that area was in turn, ensures you can draw freely without worrying about crossing the lines. Alpha Lock is another tool you can use to do this.

3. Add antialiasing

Antialiasing is a computer graphics term intended to soften the appearance of pixels, usually by reducing contrast and adding more transition colors. PC gamers will recognize this as a graphical option that can be toggled on and off to improve performance.

In our case, antialiasing is an effect that we can mimic to make our images look a little more authentic. To create the effect, just find the points where you have a sudden contrast, and then introduce those transition colors along the edges. The idea here is not to make a smooth gradient, just make the transition appear a little less strong. I added some antialiasing to Link here so you can see the difference:

Here you will also learn something about Pixel Art: It requires a lot of patience!

4. Use levels

Most art programs allow you to use layers, which means you can make images appear in the background and draw on them without affecting that layer. You can also change the transparency of individual layers, etc.

This allows us to take an image we want to work with, scale it all the way down (keeping the correct aspect ratio), and then trace it with the pen tool. That's how I did this portrait of Gary...

5. Try filters

while the best pixel art Edited 99% by hand, there are a few filters that can make your life a little easier depending on your ambitions. For example, Gimp has a blur filter called "Pixelize" that does exactly what it says on the tin. You can use this to add extra antialiasing to your existing image, or you can use it to "cheat" and turn a regular image into something a little more like pixel art looks. The sharpening tool can also be a handy resource.

6. Look for inspiration

The best way to at pixel art Getting better, like most things, is about keeping trying. However, doing some research and looking online for inspiration can also be very helpful. In particular, looking at existing examples of "reference sprites" can be helpful, especially if you want to quickly create items like chests, trees, and the like. 'The Spriter's Resource' is a great site to find spritesheets from all your favorite old games. Looking at sprite sheets can also be very handy when trying to animate your characters, as it gives you a reference for the biomechanics of walking, running, and jumping (biomechanics refers to the way our arms and legs move). legs move while we move).

And of course there's plenty of inspiration on Deviant Art and Pinterest, as well as a ton of great games right on the Play Store. Some excellent examples are: Superbrothers: Sword & Sworcery, Pewdiepie: Legend of the Brofist, VVVVVV (so to speak), Sonic the Hedgehog 1, 2 & CD and terraria.

7. Be original

Während pixel art looks amazing on a regular basis and the potential for experimentation is endless, it's important to make sure you work to ensure yours doesn't look contrived. There is one at the moment Quantity pixel art, so it's all too easy to just use a generic one pixel art-Create a look and call it a tag. If you want your game to look unique, you need to think outside the box and try to come up with your own style. How about, pixel art to combine with another style, such as cyberpunk? Experiment, try new things and create pixel artthat is somehow unique to you. use pixel art as a medium to express yourself and bring your imagination to life – after all, that’s what art is all about!

Share your thoughts with us!