Appstore Blogs
First impressions are important and to make your game stand out from the crowd, decent visuals are a must. There are more freely available game assets than ever, but sometimes you want (or need) something custom. Not to worry! It's quite easy to get decent looking art using free software and minimal art skills.
In this post, I'll show you how to create a few basic vector sprites, pixel art drawings, and even some 3D modeling. We'll only use free software available for all operating systems. Let's get started!
Colors
No matter which of the available art styles or tools you’ll be using, you need a proper color palette. Creating one without inspiration or a sample can be really difficult, especially if you’re less artistically talented.
Luckily, there are some great websites like Flat UI Colors, which is often used for web design, but also works for game art. If you’d like a more retro selection of colors, check out Lospec’s palette list. I’ve crafted my own color palette below, which you’re free to use in your own projects:
Vector art
The main advantage of using vector art as opposed to bitmap art is that it scales up indefinitely. If you’d like to support retina displays or larger DPI displays in the future, vector can save a lot of time. Inkscape is free software that allows you to do just that. Its workflow is similar to software used by professionals and it's a great tool to get started with.
Open up Inkscape and you'll be greeted by a blank canvas. On the left, you'll see a range of tools including a rectangle tool, a circle tool, pen, and text tools. Let's start by creating a basic character for our game!
Character
In order to keep things simple, we're not going to worry about limbs, posing, or animation. A slime character is good choice to start with. Select the circle tool, hold CTRL / CMD, and click and drag to create a perfectly round circle. In the menu bar select "Path" and then "Object to Path" to change the circle object to an editable shape, this way we can change the circle to have a flat bottom.
Select the node select tool, click the circle, and drag the bottom handle up (hold CTRL / CMD to move only on a single axis). While you've got the circle selected, click any color on the bottom to change its color, in this case we'll go for a green color.
Using the “node select tool” you can easily change shapes
It's important that tile textures loop seamlessly. If they're placed next to each other, players may have difficulty realizing that it’s the same tile being repeated.
In this case, it'll be easier to work using a grid. Click "View" and select "Page Grid" (or press #). Now if you hover over grid lines, Inkscape will let you know when you're working on the grid. Click the rectangle tool, hold CTRL / CMD, and create a square. Select the created square and change the color to brown.
Select the curves/lines tool. Make a zig-zag pattern on the square by clicking on the far left, then a bit to the left and top, then back down again etc. Once you're done, select both the newly created line and the square, then click "Path" and select "Division.” Now you can select a different color for the top part - select green to make it look like grass.
Create a zig-zag wave, make sure it loops horizontally.
Using the above mentioned tools, you’ll be able to add a highlight on top, create another zig-zag wave under the grass part for shadows, and even add some dirt texture using randomly placed circles. Experiment!
Add a highlight on top, shadows under the grass, and random circles for detail.
Adding a background to your game can give a good feeling of depth. Start by creating a large rectangle and giving it a light blue color. Select the curves/lines tool again, click once (on the left side of the rectangle), and create a zig-zag pattern like before. Unlike before, click and drag on each point you place to create a smooth curve. Once you reach the far end of the rectangle, make sure you stop at the same height as you started to create a seamless background.
Once done, select both the background rectangle and the new wavy line, and click "Path" and then "Division.” Make the lower part of the rectangle a slightly darker color than the top part. Presto! Now you've got wavy hills.
You can also add multiple wavy lines which are different in height for more layers.
Using the circle and rectangle tool, you can create really basic tree shapes and a sun. Try to experiment using these basic shapes. Backgrounds don’t require a lot of detail.
Instead of trees, you add triangles (pyramids) and cacti for a desert scene.
Pixel art
There's a whole range of free software that allows for pixel art drawing. Some of my favorites are MS Paint (included with older versions of Windows), Paint.net, GIMP, and the in-browser pixel editor by Loscpec. The best one depends on your personal preference, try them all and see which one you like best.
It's often thought that pixel art is the easiest of all the options for visual art. It might be easy to get started, but it's incredibly hard to master.
Tile
Larger sprites mean more work to get proper results, so let’s start out small. Draw a small 16 × 16 rectangle and apply a brown color. Place several random pixels within the rectangle in both a slightly lighter and a slightly darker color. Try some 2 × 2 squares too!
Rectangle, dots, grass layer, shadows and highlight detail on top.
Fill the shape and add a couple of eyes (try cross-eyed to add a cute effect). Add shading similar to the grass tile and a couple of random dots for texture. You can stretch the sprite a bit to add a second frame of animation for walking or jumping.
Try to create additional frames, or create a coin for the user to pick-up using similar shading and drawing techniques.
3D models
You have probably already heard of Blender, a free and open source tool for 3D modeling. I would like to introduce you to a different piece of software though: SketchUp has recently added an in-browser version which is free and requires no installation. The downside is that the free version doesn’t allow exporting to file formats other than SKP (SKP files are compatible with Unity Engine (2017.3+) however).
Head over to https://app.sketchup.com/and create a (free) account to save models you’ve created. Creating a house is a great way to start, so let’s begin!
House
First, we’ll need a main shape for the building and we’ll start adding details. Select the “Rectangle” tool and click and drag in the scene view to create a new flat rectangle. While dragging, SketchUp will tell you when the shape is a perfect square.
Create a flat shape first, then extrude.
Next, select the “Push/Pull” tool. Click and drag on the flat rectangle to extrude the shape and create a cube. Use the “Line” tool to draw a line on top of the cube, dividing it in two.
Select the “Move” tool, click the line and then move up. Now you’ve got a roof shape! Using these few tools, you’ll be able to add more details to the roof later on (like an overhang), but let’s keep it simple for now.
If we were playing Monopoly, this would be enough to convey a house.
Adding doors and windows is just as easy. Select the “Rectangle” tool again and click on the side of the house to draw a door and window shape. Select the “Push/Pull” tool, which we used to create the cube before. Click inside the door and window(s), then push in by moving your mouse inwards. You’ll (hopefully) end up with a house similar to the one on the left.
Use the tools you’ve learned to add even more details!
Using these few basic tools, you can add more details like a border, overhang, and even a chimney. Experiment with alignment and what the tools do. You’ll also find tools to create circles and arcs - try adding some columns!
Vehicle
Similarly to creating the house, we’ll start with a long rectangle. Use the “Push/Pull” tool to extrude the shape and create a box to sculpt our vehicle out of.
Use the “Line” tool to draw (click and drag to place a line) a crude car shape on the side. Select the “Push/Pull” tool again and push away the top part, leaving only the shape of the vehicle. Select the whole vehicle (CTRL / CMD + A) and then hit G to create a component. This will make sure that if we add wheels, they won’t be merged with the body of the vehicle.
Click and drag using the “Push/Pull” tool to remove the top shape.
Next, we’ll create wheels. Select the “Rectangle” tool again and you’ll notice it opens a few different options including a “Circle” tool. Select the tool, click the side of the vehicle, move your mouse, and click again to create a circle. Use the “Push/Pull” tool to extrude the circle and create a wheel shape.
You can copy and paste any shape, but components won’t merge with other planes.
Select the wheel and press G to create a component. Now you can copy and paste the wheel along the sides of the car. You can use the “Move” tool to rotate wheels, too. Select a wheel and hover over it to reveal red crosses on each side. Click a red cross to rotate the wheel on the given axis.
You can use the “Offset” tool to easily create windows and hubcaps. Select the tool (hidden under the “Push/Pull” tool) and click any edge to create an offset edge on the inside or outside of the shape.
Trees
As a final example, let's create a tree. Start off with the “Circle” tool, click on the axis origin point, and create a circle shape on the floor similar to how we created rectangle shapes before. Extrude it upward so you’ll get a trunk.
Select the whole top of the cylinder by double clicking the top. Then press S to scale the shape, hold CTRL (CMD), and click and drag one of the corners in. This will shape the trunk so it’s narrow on the top and wide on the bottom.
Select the top, press S and scale to narrow the shape.
Select the trunk and press G to create a component. Using the “Polygon” tool click on the top part and create a flat polygon shape, use the extrude tool and narrow the top to create a similar shape as to the trunk.
Starting to look like a tree.
Use the “Push/Pull” tool on the bottom of the newly created shape, then select the bottom and scale it down again (shown on the right in the image above).
What’s a tree without colors? Select the “Paint” tool,choose a green color, and click the tree while holding SHIFT to color it. Then, double click on the trunk, select a brown color, and click while holding SHIFT again to color just the trunk.
Final tree model, try to experiment with various shapes and sizes.
Final words
Creating art for games is all about experimenting, getting inspired, and messing around. Take your time to get familiar with various tools and choose the one that feels right. There’s no mistakes, just happy little accidents.
