Evgenii Legotckoi
Evgenii LegotckoiOct. 17, 2015, 4:42 p.m.

How to draw a sprite sheet in the Adobe Illustrator

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

We recommend hosting TIMEWEB
We recommend hosting TIMEWEB
Stable hosting, on which the social network EVILEG is located. For projects on Django we recommend VDS hosting.

Do you like it? Share on social networks!


Only authorized users can post comments.
Please, Log in or Sign up

C ++ - Test 004. Pointers, Arrays and Loops

  • Result:60points,
  • Rating points-1

C ++ - Test 004. Pointers, Arrays and Loops

  • Result:50points,
  • Rating points-4

C++ - Test 001. The first program and data types

  • Result:73points,
  • Rating points1
Last comments
JonnyJoMarch 30, 2023, 11:57 a.m.
Qt/C++ - Lesson 021. The drawing mouse in Qt Евгений, здравствуйте! Только начал изучение Qt и возник вопрос по 21ому уроку. После написания кода, выдаёт следующие ошибки В чём может быть проблема?
Алексей НиколаевMarch 26, 2023, 9:10 a.m.
Qt/C++ - Lesson 042. PopUp notification in the Gnome style using Qt Добрый день, взял за основу ваш PopUp notification , и немного доработал его под свои нужды. Добавил в отдельном eventloop'e всплывающую очередь уведомлений с анимацией и таймеро…
Алексей НиколаевMarch 26, 2023, 9:04 a.m.
Qt/C++ - Lesson 042. PopUp notification in the Gnome style using Qt Включите прозрачность в композит менеджере fly-admin-theme : fly-admin-theme ->Эффекты и всё заработает.
NSProjectMarch 24, 2023, 2:35 p.m.
Django - Lesson 062. How to write a block-template tabbar tag like the blocktranslate tag Да не я так к примеру просто написал.
Evgenii Legotckoi
Evgenii LegotckoiMarch 24, 2023, 10:09 a.m.
Django - Lesson 062. How to write a block-template tabbar tag like the blocktranslate tag Почитайте эту статью про "хлебные крошки"
Now discuss on the forum
BlinCTApril 1, 2023, 5:16 a.m.
Нужен совет по работе с ListView и несколькими моделями Спасибо, сейчас займусь этим.
NSProjectMarch 31, 2023, 2:55 a.m.
Проверка комментария принадлежит он пользователю или нет DRF (Django Rest Framework) Здравствуйте! Сегодня я столкнулся с такой проблеммой. Существует модель комметариев. Где их соответственно достаточное количество. Все они выводятся при помощи запроса ajax (axios). Так ка…
PisychMarch 30, 2023, 2:50 a.m.
Как подсчитать количество по условию? Да! Вот так работает! Огромное Вам спасибо! ........
Evgenii Legotckoi
Evgenii LegotckoiMarch 29, 2023, 4:11 a.m.
Замена поля ManyToMany Картинки точно нужно хранить в медиа директории на сервере, а для обращения использовать ImageField. Который будет хранить только путь к изображению на сервере. Хранить изображения в базе данных…
Виталий АнисимовJan. 29, 2023, 3:17 p.m.
Как добавить виртуальную клавиатура с Т9 в своей проект на QML. Добрый день. Прошу помочь, пишу небольше приложение в Qt. Добвил в свой проект виртуальную клавиатуру от Qt. Но как добавить в него возможность изменения Т9 никак не могу понять.

Follow us in social networks