Keyboard Shortcuts
You can customize the keyboard shortcuts or the combination of keys + mouse wheel (or mouse movement) from Edit > Keyboard Shortcuts menu option or Ctrl+Alt+Shift+K key (or ⌥⇧⌘K on macOS).
There is a general overview of the default keyboard shortcuts in the Quick Reference page.
Menus & Commands
In these sections you will find a way to assign a key to every action/command in Aseprite that is accessible from the menu bar and other commands that are not part of the main menu but are still accessible for advanced users (e.g. «Set Ink Type» is not associated to any menu or has default keyboard shortcut, but you can assign a key from the «Commands» section).
Remember to use the search field in this dialog to filter and find a specific command.
Tools
In the Tools section you will find a way to see and change the keys associated with each tool from the Tool Bar. There are two main considerations:
- Two or more tools can share the same key. In this case pressing the key multiple times will switch/go through all the tools that have the same key assigned. E.g. U key is assigned to the
Rectangle and 
Filled Rectangle by default, so pressing one time will select the Rectangle tool, and pressing it a second time will switch to the Filled Rectangle. - There are two ways to select a tool:
- A regular way to change the active tool, it’s when you press a key and the active tool changes so all the following mouse buttons will interact with that tool. E.g. pressing the P key switches to the
Pencil tool, or the H key selects the 
Hand tool as the active one, so then you can pan the sprite editor just dragging it with the left mouse button + moving the mouse without pressing any other key.
- A regular way to change the active tool, it’s when you press a key and the active tool changes so all the following mouse buttons will interact with that tool. E.g. pressing the P key switches to the
An alternative quick way (identified as «(quick)» in the Keyboard Shortcuts dialog) where the tool is active while you keep the key pressed (and then Aseprite returns to the previously selected tool when you release the key). This happens with the Alt key to select the 
Eyedropper tool or the Space bar key to select the Hand tool temporarily. Here an example of how the Hand tool looks in the configuration:
Action Modifiers
These actions depend on a specific context in Aseprite, for example when you have a selection tool, or you are scaling a selection, etc. The given keys are the default options.
The following is the list of contexts and the possible actions inside that context:
- Freehand Tool: When the Pencil tool is active.
- Straight Line from Last Point: Use the Shift key to create a straight line from the last painted pixel with the brush.
- Angle Snap from Last Point: Add the Ctrl key to snap the angle of that straight line.
- Auto Select Layer: If you press the Ctrl (or ⌘ on macOS) you’ll select the layer that is above the cursor with a single click.
- Square Aspect: You can use the Shift key to create a square or a circle.
- Draw From Center: You can use the point where the mouse was pressed as the center of the shape when pressing the Ctrl key, e.g. to create an ellipse specifying the center (instead of both corners).
- Rotate Shape: Pressing the Alt you start rotating the shape.
- Move Origin: You can press the Space key to move the whole shape to a new position before releasing the mouse button, just in case the origin was not specified correctly.
- Add/Subtract/Intersect Selection: These options are explained in the Selecting section.
- Snap To Grid: Pressing Alt the selection will snap to grid.
- Lock Axis: You can use Shift to lock the movement in the X or Y axis only.
- Copy Selection: With Ctrl key you can copy the selection if you press it before you start moving the selection.
- Fine Translating: When you are moving the selection, pressing the Ctrl will start a fine-tuning movement (not only pixel by pixel, but by subpixels).
- Maintain Aspect Ratio: Press Shift key to keep the ratio between width/height intact.
- Scale From Center: Scale from the center (or current pivot position) using the Alt key.
- Fine Scaling: When you are scaling the selection, pressing the Ctrl will start a fine-tuning scaling (not only pixel by pixel, but by subpixels).
- Angle Snap: You can use the Shift key to snap the angle to angles of 26.6°, 45°, 90°, etc.
Keyboard + Mouse
You can configure to trigger some special actions when a key is pressed and the mouse wheel is moved (or the mouse itself is moved in a specific axis):
Aseprite 1.2.27 (Windows)
Sprite Editor: Rectangles/Ellipses/Lines (4 shortcuts)
Square aspect/Angle snap
Sprite Editor: Tools (37 shortcuts)
Rectangular m arquee
Elliptical m arquee
Replace foreground and background
H and (pan/scroll)
Mo v e / Select layers
C rop / Canvas size
Color bar (5 shortcuts)
Switch foreground / background
Timeline (10 shortcuts)
Add Layers/Frames/Cels to selection
Select Layers/Frames/Cels content in canvas
Copy Selected Range of Layers/Frames/Cels in Timeline
Copy or move Selected Range of Layers/Frames/Cels in Timeline
Show popup menu
Show Layers/Frames/Cels properties
Set loop section
Switch onion skin
Timeline: Animation control (15 shortcuts)
Play / Stop animation
Go to first frame
Go to last frame
Frame p roperties
New empty frame
Duplicate linked cel
G o to frame number by number / tag
Timeline: Layers (7 shortcuts)
Select next layer
Select previous layer
N ew layer below
New layer via copy / cut
Timeline: View (7 shortcuts)
Show / Hide timeline
Show / Hide palette editor
Timeline: Grid (3 shortcuts)
Show / Hide grid
Show / Hide pixel grid
S nap to grid (on/off)
Timeline: FXs (6 shortcuts)
H u e / Saturation
Timeline: Layer visibility (7 shortcuts)
Hide / Show layer
Change layer opacity %25
Change layer opacity %50
Change layer opacity %75
Change layer opacity %100
E xpand / Collapse layer group
Please enable JavaScript
Table of contents
- Sprite Editor: Draw
- Sprite Editor: Editing
- Sprite Editor: Selection
- Sprite Editor: Transformation
- Sprite Editor: Rectangles/Ellipses/.
- Sprite Editor: Tools
- Color bar
- Timeline
- Timeline: Animation control
- Timeline: Layers
- Timeline: View
- Timeline: Grid
- Timeline: FXs
- Timeline: Layer visibility
Program information
Program name:
Aseprite 1.2.27 (Windows) (Imaging)
Aseprite is a image editor focused primarily for pixel art drawing and animation. It features various tools for image and animation editing such as layers, frames, tilemap support, command-line interface, Lua scripting, among others. Aseprite is developed by Igara Studio S.A..
Web page: aseprite.org
Last update: 7/4/2022 7:17 AM UTC
How easy to press shortcuts: 89%
Updated: Updated program information. (2 updates.) 7/1/2022 4:56:38 PM New program added.
7/4/2022 9:06:50 AM Updated program information.Aseprite 1.2
Aseprite – отличная программа для создания пиксельной графики и ее анимирования. Многие разработчики пытаются внести в свой графический редактор возможность создавать анимации, но чаще всего это реализовывается не лучшим образом. В данной программе все наоборот, и анимирование — один из самых больших плюсов Aseprite. Давайте рассмотрим это и другой функционал подробнее.
Создание проекта
Настройки создания нового файла выполнены максимально просто и удобно. Не нужно ставить множество галочек и заполнять строки, включая дополнительные настройки. Все необходимое выставляется буквально в пару кликов. Выберите размер холста, фон, цветовой мод, соотношение пикселей и начинайте работу.
Рабочая область
Главное окно разделено на несколько частей, каждая из которых может изменяться по размеру, но нет возможности свободного транспортирования. Это совсем незаметный минус, поскольку все элементы расположены крайне удобно, и даже после перехода с другого графического редактора привыкание к новому не затянется надолго. Одновременно может работать несколько проектов, а переключение между ними осуществляется через вкладки, что достаточно удобно. Кто-то может не найти окна со слоями, но оно здесь есть и находится в разделе с анимацией.
Цветовая палитра
По умолчанию в палитру входит не много цветов и оттенков, но это можно исправить. Под ней находится маленькое окно, в котором, перемещением точки настраивается любой цвет. Активный отображается под окном настройки. Более детально настройка осуществляется нажатием на числовое значение цвета, после чего откроется новое окно.
Панель инструментов
Здесь нет ничего необычного, все как в стандартных графических редакторах – карандаш, пипетка, заливка, возможность рисовки спреем, перемещение объектов, рисование линий и простых фигур. Было бы лучше, если б после выбора цвета пипеткой автоматически выбирался карандаш, для экономии времени. Но не всем пользователям так будет удобно.
Слои и анимация
Слои находятся в одном месте с анимацией для комфортной работы. Это помогает быстро задействовать необходимый слой в создании картины. Добавление кадров осуществляется нажатием на плюсик, а каждая точка обозначает отдельный кадр. Есть панель управления и возможность редактирования скорости воспроизведения.
Настройка анимации осуществляется через специальное меню. Там есть и визуальные параметры, и технические, например, воспроизведение с определенного кадра и редактирование позиционирования.
Горячие клавиши
Горячие клавиши — очень удобная вещь для тех, кто работает в программе много и часто. Если удается запомнить сочетание клавиш, то это значительно увеличивает производительность во время работы. Не приходится отвлекаться на выбор инструментов, зуммирование или настройку других параметров, поскольку все делается нажатием на определенную клавишу. Пользователи могут сами настроить каждую клавишу под себя для еще большего удобства во время работы.
Редактирование параметров
Данная программа отличается от других подобных графических редакторов тем, что здесь присутствуют обширные возможности настройки многих параметров, начиная от визуальных и заканчивая различными техническими настройками, которые делают пользование софтом намного легче. Если что-то пойдет не так, в любой момент можно вернуть настройки по умолчанию.
Эффекты
В Aseprite есть набор встроенных эффектов, после применения которых изменяется состояние изображения. Вам не нужно будет вручную добавлять кучу пикселей для достижения определенного результата, поскольку все это делается просто применением эффекта на необходимый слой.
Достоинства
- Хорошо реализована функция анимирования;
- Поддержка нескольких проектов одновременно;
- Гибкие настройки программы и горячих клавиш;
- Красочный и понятный интерфейс.
Недостатки
- Отсутствие русского языка;
- Программа распространяется платно;
- В пробной версии нельзя сохранять проекты.
Aseprite – хороший выбор для тех, кто хочет попробовать себя в создании пиксельной графики или анимировании. На официальном сайте присутствуют уроки, которые помогут новичкам освоиться в программе, а профессионалы могут попробовать демо-версию данного софта, чтобы определиться с приобретением полной версии.
3 — A Basic Aseprite Animation
This article was supported by Patreon! If you like what I’m doing here, please consider supporting me there 🙂 Also, this is the part 3 of a series of articles, read the whole series here.
What is an animation?
The breakdown of an animation An animation is an illusion of movement caused by a sequence of images played in a specific order that shows progressive phases of that motion. Our job as animators is to make that sequence look as convincing as possible.
The timeline
The fist thing we need to understand is the timeline. It’s a way to represent multiple images in a single file. Each column is a complete image and has a number assigned to it, we call it a frame.
The Aseprite timeline. You can see that the frame 9 is selected and 10 is empty. The easiest way to create a new frame is to press ALT+B. This will make an empty frame right in front of your currently selected frame, and select it. You can change the selected frame by clicking on it or by pressing the ‘ , ’ and ‘ . ’ keys (look for the ‘<’ and ‘>’ symbols, it’s easier to remember like this.
The preview window Experiment by drawing some colors on multiple frames and hitting play (Enter). You can also preview your animations using the preview window that can be toggled by pressing F7. You are probably thinking “There’s no way I’ll remember all these shortcuts” and that’s OK. Memorizing shortcuts takes some time and muscle memory, but know that mostly everything can be done using only the mouse. When you can’t remember a shortcut look for that command in the menus or in the Aseprite official quick reference.
A very simple animation
There are many techniques on how to animate, the order you should draw the frames and how to optimize everything, but for now I’ll try to explain the simplest technique I know: a straight-ahead animation of a bouncing ball.
“Straight-ahead” means we’ll draw one frame directly after the other, as opposed to drawing all the important poses of the animation first and then the middle ones. Start with a 32×32 file with a palette of your choosing.
An example of a straight-ahead animation In a pose-to-pose animation you draw the key frames first and then fill the gaps
The first frame for this animation I like to call the “Still”. It serves both as a concept art, to define the style of your animation, and as the resting position of this sequence. Frame 1 — Still
You need to pay attention to the amount of details you’ll be adding to this frame, because the next ones will be following the same style. After this is done we can duplicate this frame (ALT+N) and just move it upwards 4 pixels. Like this:
Frame 2 And now for the next frames, make it go up 3 pixels, then 2, 1 and let’s hold it in place for one frame before reversing it.
All frames We made a little bouncing animation! Well, it’s not very good yet, but we’re going to improve it.
A very simple bouncing animation
Timing
While cleverly using timing is a complex subject and could even have a whole tutorial dedicated to it, I’ll focus now on the simple technical aspect of it and let you experiment for now.
Accessing frame options So let’s add some timing. The ball stops when it hits the ground, waits for a little while and then magically jumps up again.
To increase the duration of a frame, right click on a frame’s number and choose Frame properties. Then you can type how long you want the frame to last. Let’s try 300 milliseconds for this.
Remember you can also select multiple frames to change their duration at the same time. This can be especially useful to speed up or slow down a whole animation at once.
Squash and Stretch
Here’s my old tutorial about squash and stretch, it can be used as a quick reference if you need it A simple thing we can do here to improve this animation is to add some squash and stretch, a really cool technique to make the movement seem more fluid and natural. It consists in elongating or flattening the moving object in the direction of the movement while keeping the volume.
Let’s duplicate the first frame and squash it horizontally while flattening it a little vertically, so we can keep the total volume. Keeping the volume is very important so your object doesn’t look like it got smaller or bigger. Of course that’s a rule we learn to break as we get more experienced, but for now let’s stick to it. This is also called an “anticipation frame” and it’s mostly used to make the movement happening on the next frames look more intense.
Squashing to anticipate the jump
Now let’s duplicate and change the frame right when the ball hits the ground in a similar way, maybe making it even more exaggerated.
Contact with the ground
The last thing is to stretch vertically (always flattening horizontally) the first frame of the jump and the last frame of the fall, when the ball is at their fastest. And we are done! Let’s see our result: An improved bouncing animation A bouncing loop, made by removing the still and anticipation frames
Saving the animation
While saving the file in the .aseprite format will preserve the animation, you will probably want to export your animation to post it online or to use it in your game. Online, the easiest way is to save your image as .gif, using the File>Export… command. Just check the Export for twitter if you want to change the last frame’s duration to 1/4 of the duration so it loops perfectly even after Twitter converts it to MP4. When exporting for games you will usually want to save as .png, as usual, but the animation will have to be broken down in a sprite sheet or image sequence. To save it as an image sequence, simply export the file to .png format with a number in the end of the file name, like “bounce00.png” for example. This will create multiple files, like “bounce01.png”, “bounce02.png” and so on. Some game engines will need the file in the sprite sheet format. You don’t need to do that manually, just check File>Export Sprite Sheet and play around with the settings, you can change a lot of parameters there.
Now what?
Next, I would recommend experimenting more with the timeline and to try making other animation tests. You can look on my tutorial gallery and select a tutorial of your interest and try to mimic it.
Another idea is to try the classic beginner’s exercise of making an animated flour sack walking and jumping around. Just keep the resolution and color count low for now, so things don’t get overcomplicated.
For further reference you should also check the Animator Survival Kit, probably one of the best books on animation ever made. Keep reading the part 4 here!