How to draw a sprite sheet in the Adobe Illustrator

adobe, adobe illustrator, sprite sheet, sprite, спрайт

I'm tired of testing GameDev processes with triangles and rectangles. It's boring and uninteresting, so it's time to blow something up. But where do you start? - you ask. And my answer is, you need to draw a sprite explosion, to be precise, then draw a sprite sheet for the explosion, which will represent the explosion animation.

But how to do that? - I was puzzled by this question. After studying several forums and video tutorials, I decided to collect the information received into one lesson on my website. So we have the following technical task for this lesson:

1. Draw some sprite pictures, from which we will make a sprite sheet for the explosion animation;
2. Build the sprite sheet itself and save it as a PNG file;
3. Do it all using Adove Illustrator software.

Draw sprite pictures step by step

Note. Also, if you are not interested in reading the step-by-step manual, then I suggest immediately referring to the video tutorial at the end of the article, everything is clearly described, shown and explained.

Step one

Create a canvas file for sprite images with parameters 20 x 20 pixels. These are the pictures we will use in the next tutorials on GameDev in Qt to implement bullet explosions. We will draw explosions.

Step two

Now create a rectangular mesh on the canvas that will separate our pixels. In this case, it is necessary to set the grid parameters such that its width and height will be equal to the width and height of the sprite, and the number of vertical and horizontal dividers should be made to the number of pixels in height and width, respectively. Also, don't forget to remove the stroke and make the background transparent, we don't need an extra white color in the sprite image.

Step three

Select the Live Paint Bucket tool and left-click a Live Paint Fill group from a rectangular grid. Live Paint fills with the selected color the area bounded by separators, as well as an outline or stroke. Since the grid divides the canvas pixel by pixel, each rectangle will be one pixel, which we will fill with color using Fast Fill.

Step four

After we draw all 15 sprite images, create a new project in Adobe Illustrator. Which will contain all 15 sprite images and will be 15 images wide and one image high. That is, we will draw all the pictures in one row. We will also place the rectangle on the entire canvas. Don't forget to remove the stroke and make the background transparent.

Step five

Next, create a contour mesh in the Rectangle, consisting of one row and 15 columns for all sprite images.

Step six

And now, by going to the File menu item, using the "Place" item, add all the prepared sprites to the project.

Step seven

Now we finish creating the sprite sheet by saving it as a PNG image with a transparent background. After saving the resulting image, let's check it how it looks in a regular image viewer.

Also, the entire lesson is presented in the following video tutorial below.

Video tutorial