Skip to content

Update context-bar.md, add dynamics.md and brushes.md #49

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Aug 14, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 67 additions & 0 deletions brushes.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
# Brushes
To view available brushes, select any painting tool and click on the brush type option in the [context bar](context-bar.md).

![Context bar example](brushes/contextbar.png)

## Brush types

![Brush type menu](brushes/brushtype.png)

The top three buttons are the three brush types. By default, it is set to the round type. The square and line types have a context bar option that changes the angle, in degrees.

![Brush angle option](brushes/brushangle.png)

## Custom type brushes

The bottom button saves the current brush you are using as a custom brush. After you have saved a brush, the menu will display it in the brush menu.

![Custom brush shown in brush type menu](brushes/custombrush.png)

If your brush is saving blank, you likely saved the brush with incomplete parameters.

## Custom pattern brushes

![Custom brush being created and used](brushes/patternbrush.gif)


You can create a custom brush from a pattern by going to *Edit > New Brush* or by pressing <kbd>Ctrl+B</kbd>. You can then choose to copy or cut a portion of the sprite. Upon first selecting the brush, the pattern will be a direct copy of the copied portion. If you select a color, the entire brush shape will become that color.



When using a pattern brush, a dropdown on the context bar can control how the pattern is drawn.

| | | |
|-|-|-
| *Pattern aligned to source* | Aligns the pattern to the location it was copied/cut from. | ![aligned to source example](brushes/alignment1.gif)
| *Pattern aligned to destination* | Aligns the pattern to where it was placed. | ![aligned to destination example](brushes/alignment2.gif)
| *Paint brush* | Acts like a regular brush. | ![no alignment (paint) example](brushes/alignment3.gif)


## Brush Parameters

![Parameters menu](brushes/parameters.png)

You can set the parameters a new brush is saved with by clicking on the dropdown next to the "Save Brush Here" button. To edit/overwrite a brush's individual parameters, click the dropdown next to it, unlock it, and then click "Save Brush Here" (in the dropdown) to save it and overwrite the old parameters.

If a parameter is enabled, the corresponding option is saved.

| Parameter | Description
| -------- | -------------
| ***Brush:** Type* | Saves the brush type.
| ***Brush:** Size* | Saves the brush size.
| ***Brush:** Angle* | Saves the brush angle.
| ***Color:** Foreground* | Saves the foreground color with the brush. The foreground color will be switched to this when the brush is selected. Only works for type brushes.
| ***Color:** Background* | Saves the background color. The background color will be switched to this when the brush is selected. Only works for type brushes.
| ***Color:** Image Color* | Saves the color(s) of the brush. Only works for pattern brushes.
| ***Ink:** Type* | Saves the [ink](ink.md) type.
| ***Ink:** Opacity* | Saves the ink opacity.
| ***Extras:** Shade* | Saves the [shade](shading.md) gradient.
| ***Extras:** Pixel-Perfect* | If enabled, it will save the state of pixel-perfect mode, not enable pixel-perfect mode outright.

----

**SEE ALSO**

[Context Bar](context-bar.md) |
[Dynamics](dynamics.md) |
[Ink](ink.md)
Binary file added brushes/alignment1.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added brushes/alignment2.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added brushes/alignment3.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added brushes/brushangle.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added brushes/brushtype.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added brushes/contextbar.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added brushes/custombrush.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added brushes/parameters.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added brushes/patternbrush.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
153 changes: 131 additions & 22 deletions context-bar.md
Original file line number Diff line number Diff line change
@@ -1,51 +1,160 @@
# Context Bar

(*Work-in-progress*)

The context bar shows specific options for the active tool. It also
changes depending on the state of the active document, e.g. when we
move the selection.
changes depending on the state of the active document (e.g. when the selection is moved). You can find the context bar directly above the [sprite editor](sprite-editor.md) view:

![Context bar](context-bar/contextbar.png)
![Context bar location](context-bar/contextbar.png)

## Pencil-like tools
## Pencil tool & other painting tools

This is the context bar for the Pencil tool:

![Context bar for pencil tool](context-bar/pencil.png)

The first elements are Brush type/shape:
The context bar for most painting tools looks similar to this, with a few options added or removed.

### Brush type, custom brushes, & brush angles

See the [brushes section](brushes.md).

### Brush size

The brush size (in pixels). To quickly change the size of the brush, you can use <kbd>Ctrl+Alt</kbd> and drag.

### Ink

![Brush type](context-bar/brushtype.png)
See the [ink section](ink.md).

The brush size (in pixels):
### Dynamics

![Brush size](context-bar/brushsize.png)
See the [dynamics section](dynamics.md).

And the brush angle:
### Pixel-perfect mode

![Brush angle](context-bar/brushangle.png)
Enables/disables pixel-perfect strokes.

It's useful for line brush type:
![pixel-perfect mode example](context-bar/pixelperfect.png)

![Selet brush angle](context-bar/brushangle-change.gif)
### Opacity

![opacity example](context-bar/opacity.png)

While it isn't an option in the pencil tool, you can find the opacity option in some of the other painting tools. This changes the transparency of the tool, with `100%` being fully opaque and `0%` being fully transparent.

## Selection tools

![Selection tool](context-bar/selection.png)
![Context bar for selection tools](context-bar/selection.png)

See the [selection section](selecting.md) for selecting and the [rotation section](rotate.md) for rotating and pivot.

### Transparent Color & Transparent Color Options

The Transparent Color option allows you to change the transparent color for the selection.

![Transparent color example](context-bar/transparent.gif)

In the Transparent Color Options, you can change whether the transparent color in the selection is opaque or transparent. Shown above is transparent mode.

## Moving selection

(*Work-in-progress*)
![Context bar when moving the selection](context-bar/movingselection.png)

See the [move selection section](move-selection.md).

## Eyedropper tool

![Context bar for eyedropper tool](context-bar/eyedropper.png)

See the [eyedropper section](eyedropper.md).

## Paint Bucket

![Context bar for paintbucket tool](context-bar/paintbucket.png)

### Tolerance

![Tolerance example](context-bar/tolerance.gif)

The paint bucket tolerance adjusts if a similar color will be filled, with `0` being only the exact color will be filled and `255` being all colors will be filled.

### Contiguous mode

Contiguous mode toggles between only selecting connected pixels of the same color or all pixels of the same color.

### Extra options

|||
|-|-|
|Stop at grid| When in Contiguous mode and when the grid is enabled, stop filling at a grid line.
||

|||
|-|-|
|Refer active layer| Fills based on the active layer.
|Refer visible layers | Fills based on the visible layers. The filled area is still on the active layer, so the visible layers act as masks.
||

|||
|-|-|
|4-Pixel Connectivity| When in Contiguous mode, don't treat diagonal pixels as connected.
|8-Pixel Connectivity| When in Contiguous mode, treat diagonal pixels as connected.
||

## Gradient tool

![Context bar for gradient tool](context-bar/gradient.png)

The Gradient tool has the same options the Paint Bucket has, along with these extra ones.

### Gradient type

Toggles between a linear and radial gradient.

### Dithering options

![Dithering options](context-bar/dithering.png)

- No dithering
- Bayer Matrix 2x2
- Bayer Matrix 4x4
- Bayer Matrix 8x8

## Text tool

![Context bar for text tool](context-bar/text.png)

### Font selector

Picks the font to use.

### Font size

Changes the font size. Depending on the font, some font sizes may have the `*` symbol next to them, indicating that the size is to pixel scale with the font.

### Font formatting

Changes the font formatting. Options:

- Bold
- Italic

- Antialias - Toggles antialising, which smoothes out the text.
- Hinting - Toggles hinting, which aligns the font to the pixel grid.
- Ligatures - Toggles ligatures.

## Move tool

![Context bar for move tool](context-bar/move.png)

![Moving selection](context-bar/selection.png)
Selects layers based on which layer the clicked content is on.

## Eyedropper
## Slice tool

(*Work-in-progress*)
See the [slices section](slices.md).

## Paint Bucket tool
---

(*Work-in-progress*)
**SEE ALSO**

![Paint bucket](context-bar/paintbucket.png)
[Workspace](workspace.md) |
[Drawing](drawing.md)
Binary file removed context-bar/brushangle-change.gif
Binary file not shown.
Binary file modified context-bar/brushangle.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed context-bar/brushsize.png
Binary file not shown.
Binary file modified context-bar/brushtype.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified context-bar/contextbar.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added context-bar/dithering.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added context-bar/eyedropper.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added context-bar/gradient.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added context-bar/move.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added context-bar/movingselection.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added context-bar/opacity.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified context-bar/paintbucket.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified context-bar/pencil.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added context-bar/pixelperfect.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified context-bar/selection.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added context-bar/text.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added context-bar/tolerance.gif
Binary file added context-bar/transparent.gif
44 changes: 44 additions & 0 deletions dynamics.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
# Dynamics

The brush dynamics menu can dynamically change the size, shape, or gradient of a brush stroke. It is most useful when using Aseprite with a pen, but you can also use it with a mouse.

When using any painting tool, you can access the dynamics menu in the [context bar](context-bar.md).

![Context bar example](dynamics/contextbar.png)

Once opened, the menu looks like this:

![Dynamics menu](dynamics/dynamics.png)

The left column (Pressure) is for use with a pen, and the right (Velocity) is for use with a mouse.

Only one of these can be selected per row. You can have multiple rows selected at once.

## Sensor Thresholds

![Sensor thresholds example](dynamics/thresholds.png)

The sensor threshold controls what an amount of pressure/velocity does to the stroke.

Moving the handles to the right makes the smallest amount of pressure/velocity required greater, making the stroke less sensitive. Moving the handles to the left makes the smallest amount of pressure/velocity required smaller, making the stroke more sensitive.

The spacing between the handles also affects sensitivity, with the handles being closer making the stroke more sensitive, and the handles being farther making the stroke less sensitive.

## Min/Max values

![Min/max example](dynamics/minmax.png)

The minimum and maximum setting values set the bounds of the sensor threshold. For example, if the size setting was selected, and the min was `1` and the max was `16`, then the lowest amount of pressure/velocity would change the size to `1`, the highest to `16`, and any amount of pressure/velocity in between the highest and lowest would change the size to somewhere between `1` and `16`.

## Stabilizer

The stabilizer toggle helps stabilize the stroke by drawing it a certain number of pixels away from the cursor.

----

**SEE ALSO**

[Context Bar](context-bar.md) |
[Brushes](brushes.md)


Binary file added dynamics/contextbar.png
Binary file added dynamics/dynamics.png
Binary file added dynamics/minmax.png
Binary file added dynamics/thresholds.png
3 changes: 2 additions & 1 deletion ink.md
Original file line number Diff line number Diff line change
Expand Up @@ -52,4 +52,5 @@ special ink for pixel-art.
**SEE ALSO**

[Drawing](drawing.md) |
[Shading](shading.md)
[Shading](shading.md) |
[Context Bar](context-bar.md)
19 changes: 18 additions & 1 deletion move-selection.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,28 @@ After [selecting](selecting.md) a part of the [active cel](cel.md),
you can move the selected area of pixels dragging-and-dropping with
the mouse or using the arrow keys:

![Move Selection](move-selection/move-selection.gif)
![Move selection example](move-selection/move-selection.gif)

If you are moving a region of pixels from the
[background layer](layers.md#background-layer) the selection will be
cleared with the active
[background color](color-bar.md#background-color). If you move a
transparent layer, the region will be cleared with the transparent
color.

When moving a selection, you can find transform options in the [context bar](context-bar.md).

![context bar example](move-selection/contextbar.png)

- X-position
- Y-position
- Width
- Height
- Rotation
- Skew

These values can be edited through the context bar or by [transforming](transformations.md).




Binary file added move-selection/contextbar.png