diff --git a/brushes.md b/brushes.md new file mode 100644 index 0000000..432385d --- /dev/null +++ b/brushes.md @@ -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 Ctrl+B. 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) diff --git a/brushes/alignment1.gif b/brushes/alignment1.gif new file mode 100644 index 0000000..f44f0ca Binary files /dev/null and b/brushes/alignment1.gif differ diff --git a/brushes/alignment2.gif b/brushes/alignment2.gif new file mode 100644 index 0000000..eba59bb Binary files /dev/null and b/brushes/alignment2.gif differ diff --git a/brushes/alignment3.gif b/brushes/alignment3.gif new file mode 100644 index 0000000..35f8f2c Binary files /dev/null and b/brushes/alignment3.gif differ diff --git a/brushes/brushangle.png b/brushes/brushangle.png new file mode 100644 index 0000000..40de3d6 Binary files /dev/null and b/brushes/brushangle.png differ diff --git a/brushes/brushtype.png b/brushes/brushtype.png new file mode 100644 index 0000000..356b09b Binary files /dev/null and b/brushes/brushtype.png differ diff --git a/brushes/contextbar.png b/brushes/contextbar.png new file mode 100644 index 0000000..ac0ef63 Binary files /dev/null and b/brushes/contextbar.png differ diff --git a/brushes/custombrush.png b/brushes/custombrush.png new file mode 100644 index 0000000..dbfb575 Binary files /dev/null and b/brushes/custombrush.png differ diff --git a/brushes/parameters.png b/brushes/parameters.png new file mode 100644 index 0000000..d0bf3df Binary files /dev/null and b/brushes/parameters.png differ diff --git a/brushes/patternbrush.gif b/brushes/patternbrush.gif new file mode 100644 index 0000000..a12ea5f Binary files /dev/null and b/brushes/patternbrush.gif differ diff --git a/context-bar.md b/context-bar.md index eb0fd5f..bb19d04 100644 --- a/context-bar.md +++ b/context-bar.md @@ -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 Ctrl+Alt 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) \ No newline at end of file diff --git a/context-bar/brushangle-change.gif b/context-bar/brushangle-change.gif deleted file mode 100644 index 32e752a..0000000 Binary files a/context-bar/brushangle-change.gif and /dev/null differ diff --git a/context-bar/brushangle.png b/context-bar/brushangle.png index 79f688c..6a1aa0f 100644 Binary files a/context-bar/brushangle.png and b/context-bar/brushangle.png differ diff --git a/context-bar/brushsize.png b/context-bar/brushsize.png deleted file mode 100644 index 303f539..0000000 Binary files a/context-bar/brushsize.png and /dev/null differ diff --git a/context-bar/brushtype.png b/context-bar/brushtype.png index 43b1009..615061c 100644 Binary files a/context-bar/brushtype.png and b/context-bar/brushtype.png differ diff --git a/context-bar/contextbar.png b/context-bar/contextbar.png index 59c770b..c11479b 100644 Binary files a/context-bar/contextbar.png and b/context-bar/contextbar.png differ diff --git a/context-bar/dithering.png b/context-bar/dithering.png new file mode 100644 index 0000000..726f9be Binary files /dev/null and b/context-bar/dithering.png differ diff --git a/context-bar/eyedropper.png b/context-bar/eyedropper.png new file mode 100644 index 0000000..33e0844 Binary files /dev/null and b/context-bar/eyedropper.png differ diff --git a/context-bar/gradient.png b/context-bar/gradient.png new file mode 100644 index 0000000..d3f5bf3 Binary files /dev/null and b/context-bar/gradient.png differ diff --git a/context-bar/move.png b/context-bar/move.png new file mode 100644 index 0000000..06b3446 Binary files /dev/null and b/context-bar/move.png differ diff --git a/context-bar/movingselection.png b/context-bar/movingselection.png new file mode 100644 index 0000000..9f674e7 Binary files /dev/null and b/context-bar/movingselection.png differ diff --git a/context-bar/opacity.png b/context-bar/opacity.png new file mode 100644 index 0000000..8c94a70 Binary files /dev/null and b/context-bar/opacity.png differ diff --git a/context-bar/paintbucket.png b/context-bar/paintbucket.png index 96e9c8d..24c652a 100644 Binary files a/context-bar/paintbucket.png and b/context-bar/paintbucket.png differ diff --git a/context-bar/pencil.png b/context-bar/pencil.png index 35807d8..451bb02 100644 Binary files a/context-bar/pencil.png and b/context-bar/pencil.png differ diff --git a/context-bar/pixelperfect.png b/context-bar/pixelperfect.png new file mode 100644 index 0000000..4c0ab19 Binary files /dev/null and b/context-bar/pixelperfect.png differ diff --git a/context-bar/selection.png b/context-bar/selection.png index f1026ad..553befa 100644 Binary files a/context-bar/selection.png and b/context-bar/selection.png differ diff --git a/context-bar/text.png b/context-bar/text.png new file mode 100644 index 0000000..2f8799b Binary files /dev/null and b/context-bar/text.png differ diff --git a/context-bar/tolerance.gif b/context-bar/tolerance.gif new file mode 100644 index 0000000..b35fabc Binary files /dev/null and b/context-bar/tolerance.gif differ diff --git a/context-bar/transparent.gif b/context-bar/transparent.gif new file mode 100644 index 0000000..15a4fbe Binary files /dev/null and b/context-bar/transparent.gif differ diff --git a/dynamics.md b/dynamics.md new file mode 100644 index 0000000..43121a5 --- /dev/null +++ b/dynamics.md @@ -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) + + diff --git a/dynamics/contextbar.png b/dynamics/contextbar.png new file mode 100644 index 0000000..f4ce8ff Binary files /dev/null and b/dynamics/contextbar.png differ diff --git a/dynamics/dynamics.png b/dynamics/dynamics.png new file mode 100644 index 0000000..77da691 Binary files /dev/null and b/dynamics/dynamics.png differ diff --git a/dynamics/minmax.png b/dynamics/minmax.png new file mode 100644 index 0000000..d4df55a Binary files /dev/null and b/dynamics/minmax.png differ diff --git a/dynamics/thresholds.png b/dynamics/thresholds.png new file mode 100644 index 0000000..dad5014 Binary files /dev/null and b/dynamics/thresholds.png differ diff --git a/ink.md b/ink.md index 411bbd4..c2d0a19 100644 --- a/ink.md +++ b/ink.md @@ -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) diff --git a/move-selection.md b/move-selection.md index e4a3dee..4283731 100644 --- a/move-selection.md +++ b/move-selection.md @@ -4,7 +4,7 @@ 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 @@ -12,3 +12,20 @@ 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). + + + + diff --git a/move-selection/contextbar.png b/move-selection/contextbar.png new file mode 100644 index 0000000..9f674e7 Binary files /dev/null and b/move-selection/contextbar.png differ