# Introduction Pixquare is the most powerful and feature-rich pixel art editor for iOS devices (iPhones and iPads). It also supports MacOS devices with Apple silicon, but some features and operations are not as optimized. Created with a dedication to pixel art, Pixquare has a clean and spacious design that is friendly to both professionals and beginners. [Interface and Gestures](/interface-and-gestures/overview) [Tools](/tools/overview) [Timeline and Layers](/timeline-and-layers/overview) [Palette](/palette/overview) [Additional Features](/additional-features/overview) [Settings](/settings/overview) [Gallery](/gallery/overview) [Pixquare File (.px)](/pixquare-file/overview) [Themes](/themes/overview) [Misc](/misc/overview) [Pixquare's official website >](https://www.pixquare.art/) # Overview Pixquare design principle is simple: Only show what's absolutely needed and only at the right time and right place. The result is a very clean and intuitive user interface. We will truly feel like the UI is assisting us to create beautiful pixel art instead of fighting against us. ### Interface Let's familiarize ourselves with the basic structure of Pixquare UI to know where things are. [Read more >](/interface-and-gestures/interface) ### Gestures and quick actions Pixquare utilizes the touch screen to enable us to use gestures and quick actions to perform many operations faster than the traditional tap-n-click approach. [Read more >](/interface-and-gestures/gestures-and-quick-actions) ### Keyboard shortcuts When a keyboard is connected, it opens up even more utility for shortcuts. So let's dive in and see all the supported shortcuts of Pixquare. [Read more >](/interface-and-gestures/keyboard-shortcuts) # Interface The interface of Pixquare contains many areas. A few of them are permanently visible on the screen, however, to give us a clean workspace, the majority of them are either collapsible or completely hidden when not used.

Those in blue are permanent elements of the UI, the white ones can be collapsed, and the green components can be hidden if not used. A lot of UI elements in Pixquare can be resized and dragged around so that we can organize the workspace however we see fit. Look for the drag icon ![](/files/8Qrn4NKcDYRySBhNOzJ9) and the resize icon ![](/files/s6pe9I0VwlrshxtFutO4). ### 1. Toolbox Here is the container of all the tools we can use in Pixquare: Move, Brush, Eraser, Line, Shape, Selection, Color Bucket, Eye Dropper, Additional Tools, and Color Picker. Some of them can be activated using [quick actions](/interface-and-gestures/gestures-and-quick-actions#quick-actions). [Read more about tools >](/tools/overview) ### 2. Settings This is only the entry for the settings panel. It also has the back button and save button (only needed if auto-save is not enabled) [Read more about settings >](/settings/overview) ### 3. Size and opacity sliders Tools like brush, eraser, line, and shape can have adjustable stroke size and opacity, so these sliders allow us to change those settings. It also houses the undo/redo buttons (which can be done with [gestures](/interface-and-gestures/gestures-and-quick-actions#gestures)) The little button in the middle is to activate the quick eye dropper. ### 4. Symmetry tool Pixquare supports symmetry (or mirroring) on vertical and horizontal axes. When expanded, we use this window to manage the axes (add, remove, change coordinates or color). This can be hidden in the settings. [Read more about symmetry tool >](/additional-features/symmetry) ### 5. Reference images Sometimes we will need to constantly look at some images as reference, so Pixquare allows us to import them as floating windows right inside its UI. Expand this component to manage the images. [Read more about reference images >](/additional-features/reference-images) ### 6. Gesture pad Working with an iPad means that a lot of the time, we won't have access to a keyboard. To compensate for that limitation, Pixquare offers the Gesture Pad to somewhat substitute the keyboard shortcuts. We can customize what each gesture does. ### 7. Color palette Color/palette management is super easy in Pixquare with this component. We can add/remove/reorganize colors, all in this little panel. We can also import palettes from a variety of sources, like Lospec, images, files, etc. Pixquare also allows us to generate a ramp of colors to add to our palette. [Read more about palette management >](/palette/overview) ### 8. Timeline/layer panel Pixquare is ideal for both static artwork as well as animation, that's why it combines the layers and animation frames into 1 panel. Layer and animation management are all done in this panel. [Read more about layers/frames >](/timeline-and-layers/overview) ### 9. Preview Oftentimes, we'll want to quickly glance at the artwork in a smaller size to get how it looks overall. We can expand this window to do that. In this window, we can zoom and pan the preview. The window itself can be resized and dragged around. Tapping on the preview will navigate the main canvas to that point. Preview also has an option that keeps the center of itself and the main canvas in sync. Preview will play the animation along with the main canvas, but if we tap the Play button of the preview, it will play the animation independently from the main canvas. ### 10. Contextual menu Depending on what's happening on the canvas, this menu will show/hide automatically. The intention of this dynamic design is to let users know exactly what they can do with the current state of the canvas without needing to do anything, and the fact that it will only show up when needed helps keep the workspace clean and clutter-free. Depending on whether you have [left-hand mode](/additional-features/left-hand-mode) enabled or not, the contextual menu will show up on the left or right edge of the screen. We'll go into more detail about this menu in several sections for specific parts of the app. # Gestures and quick actions ### Gestures Here is the list of all supported gestures in Pixquare: * Pan canvas - Two-finger pan * Zoom canvas - Pinch * Fit canvas to screen - Quick pinch ([configurable](/settings/canvas#quick-pinch)) * Rotate canvas - Rotate ([configurable](/settings/canvas#canvas-rotation)) * Undo - Two-finger tap * Rapid undo - Two-finger hold * Redo - Three-finger tap * Rapid redo - Three-finger hold * Finish current tool - One-finger double-tap * No-UI mode - 4-finger tap * Select a canvas grid - Pencil double-tap * Navigate to the next frame - Left swipe ([configurable](/settings/drawing#swipe-to-navigate-frames)) * Quick eye dropper - Long press one canvas by finger or pencil ([configurable](/settings/drawing#quick-color-picker)) * Pencil double-tap (action will match with system configuration for pencil) * Pencil squeeze (either tool customization or quick palette) * Adjust size/opacity - Three-finger slide ([configurable](/settings/drawing#three-finger-slide)) ### Quick actions #### 1. Apple Pencil Pro squeeze actions

If you're equipped with the Apple Pencil Pro, which supports the squeeze gesture, you can activate some quick actions with that gesture. While hovering the pencil on the canvas, squeeze the pencil to show the menu. There are 2 modes for this gesture: tool customization and color palette. {% hint style="info" %} For more fluent flow, you can squeeze, hold it, hover over the buttons, and release it to trigger a selection. {% endhint %} #### 2. Quick tools

In between the size and opacity sliders, there is a small square. If we tap and hold that square, the eye dropper tool will be activated until the touch is released. The eye dropper is not the only tool that we can use, we can customize the tool in Settings > Drawing > Slider quick tool #### 3. Panel resize

Most panels in Pixquare (timeline, palette, and gesture pad, etc.) can be resized. Look for a little triangle at the corners, drag on that triangle to size the panels. #### 4. Slider bookmark

Size and opacity sliders can add bookmarks so that next time we can quickly jump back to a preset size/opacity. * To add a bookmark, tap on the slider knob, then the "+" button * To remove a bookmark, tap on it twice and then the "-" button #### 5. Color drop {% embed url="" %} Artwork by [Mossy](https://x.com/MossyPixe) {% endembed %} The color box at the top right corner can be dragged into the canvas to perform a [bucket-fill](/tools/color-bucket). The same thing can be done directly from the palette. However, for the palette, we need to long-press and then drag instead of just dragging. #### 6. Canvas 100% zoom

When tapping on the preview button, it will expand the preview window. However, we can also hold that button to quickly zoom the canvas to 100% and set it to be at the center of the screen to gauge how it looks in real size; release the button, and it will zoom back to the previous zoom scale and position. #### 7. Drawing tools as an eraser When using drawing tools (brush, line, shape) with 0 opacity, these tools will act as an eraser. So a quick trick is to drag the opacity slider down to 0 and use these tools to do custom erasing that the regular eraser cannot do easily. #### 8. Quick zoom level

At the bottom info bar, we can tap the zoom scale info to expand the quick zoom level options. #### 9. Brush size board

If we swipe sideways on the size slider's knob, a board with all the sizes will appear. If we find the slider is hard to select a specific value, this will solve that problem. ### Image drag-n-drop for other apps Pixquare supports image drag-n-drop from other apps. Read more on iPadOS drag-n-drop [here](https://support.apple.com/en-vn/guide/ipad/ipadaa83b207/ipados). Depending on where we drop the image, different actions will be performed. * On canvas: a new reference layer will be added using the image * On the reference image panel: a new reference image will be added * On the gallery screen: the image will be imported as a new artwork # Keyboard shortcuts Pixquare supports a fully customizable keyboard shortcut system. To access the full list of available shortcuts, go to Settings/Keyboard. If you have any action that you want to be shortcut-able, please feel free to let me know. # Overview

At the top right corner are the powerful tools that we can use to sketch amazing pixel art. ### Move Move, resize, scale, flip, or even clear the content. [Read more >](/tools/move) ### Brush The most basic and most needed tool to create pixel art. There is a lot of customization for this tool: 5 stroke types, pressure sensitivity, contour, dithering, etc. [Read more >](/tools/brush) ### Eraser Similar to the brush, but to remove instead of adding content. [Read more >](/tools/eraser) ### Line Create straight lines or beautiful curves. It comes with a lot of customization as well. [Read more >](/tools/line) ### Shape Drawing rectangles or perfect circles by hand is such a tedious (sometimes impossible) task. Let the Shape tool help us with that. [Read more >](/tools/shape) ### Selection An advanced selection tool to enable us to make complex selections: 5 selection types and 5 selection modes. [Read more >](/tools/selection) ### Eye dropper Quickly pick a color on the canvas. [Read more >](/tools/eye-dropper) ### Additional tools Pixquare has even more tools specialized for pixel art: * [Color replace](/tools/additional-tools/color-replace) * [Color adjustment](/tools/additional-tools/color-adjustment) * [Level adjustment](/tools/additional-tools/levels-adjustment) * [Outline](/tools/additional-tools/outline) * [Text](/tools/additional-tools/text) * [Custom objects](/tools/additional-tools/custom-objects) * [Color helper](/tools/additional-tools/color-helper) * [Anti-aliasing (AA)](/tools/additional-tools/anti-aliasing-aa) * [Post-processing](/tools/additional-tools/post-processing) * [Color remap](/tools/additional-tools/color-remap) * [Modifiers](/tools/additional-tools/modifiers) ### Color Picker Picking a color is super easy with Pixquare's 4 color picker types, as well as the ability to drag a compact sticky version of it around the canvas. [Read more >](/tools/color-picker) # Move

{% embed url="" %} Artwork by [chili](https://x.com/ryviolie) {% endembed %} With the Move tool, we can move content around, resize, rotate, skew, or perspective transform it. There are a few things to note: * Move tool can work with multiple layers of the same type at once but cannot work with multiple layer types at the same time. Read more about layer types [here](/timeline-and-layers/layer-types). * Move tool can work with multiple frames at once too. * Move tool can work with folder. * When the Move tool is selected, if there is an active selection, it will work with that selection, if there is no selection, it will automatically select all the content of the selected layers and work with that content. * A few options are only available when the Move tool is active: * Clear content * Flip vertically * Flip horizontally * There are 3 transform modes: scaling, skewing, and perspective. ### Snapping We can enable snapping for the Move tool, if enabled, it will snap the rotation to multiples of 90 degrees (0, 90, 180, 270) and content movement will snap to the content boundary of other layers. ### Rotsprite Rotsprite is a content rotation technique that preserves clean edges. Pixquare has its own implementation of rotsprite which is more performant but does not work as well as the [original rotprite](https://info.sonicretro.org/RotSprite). ### Precise move

Sometimes moving content using touch drag is not very precise. On desktop, we usually use arrow keys to move content directionally, so to simulate that, Precise move was implemented. # Brush

This tool is simple, wherever we put or drag on the screen, it draws pixels there, but it does come with the most customization of all tools. ### Brush types

We have 3 brush types with different utilities. #### Regular brush This is the simplest one, it draws solid strokes onto the canvas, using the properties of [stroke types](#stroke-types). #### Spray Instead of applying a continuous line like the regular brush, this brush type "sprays" random spots on the canvas using the current [stroke type](#stroke-types). This brush type is pressure-sensitive. We can adjust the intensity and the spray size of this brush type. #### Spray with opacity Same as the [spray](#spray) type, only that it will also randomize the opacity of each stamp. ### Pixel-perfect

Everyone wants smooth and sharp lines, this option is to assist with that. When pixel-perfect is on, Pixquare will make sure that the drawn stroke won't have "jittery" pixels. ### Stabilizer If our hands are shaking (from hunger probably :D), we can turn up the stabilizer to reduce the jaggedness of the strokes. {% hint style="info" %} 0 means no stabilizing {% endhint %} ### Watercolor

This option is on by default, and when it's on, **translucent colors** (opacity < 100%) will blend with the existing colors. If this option is off, the new color will replace the existing ones on the canvas completely. Watercolor is not available in [indexed color mode](/misc/color-modes#indexed). ### Pressure sensitivity {% embed url="" fullWidth="false" %} Apple pencil supports pressure sensitivity so Pixquare takes advantage of that to add the functionality to its toolset. With this option on, the size of the stroke will be dynamic based on how hard you're pressing on the screen. A few things to note: * When this is on, a sub-menu will appear so that you can adjust the pressure curve range * The pressure curve range manifests based on the current size of the brush * If the touch is not from a pencil, it won't register the pressure. ### Contour {% embed url="" %} The contour brush will auto-connect the last and the first point of a stroke, then fill the area encapsulated by the stroke. ### Dithering {% embed url="" %} Dithering is the pixel art term for painting intertwining patterns between 2 colors. In Pixquare, the dithering brush uses the current color as 1 color and transparent as the other color. It relies on pressure to determine the pattern. Pressure 0 means all transparent, and 1 means it's all the current color. {% hint style="info" %} If we want the pattern to stay constant, we can drag both the lower bound and upper bound of the dithering intensity to the same value. There are also presets of all possible dithering patterns that we can select as well. {% endhint %} When Contour is on, dithering will be disabled. ### Stroke types

#### Round and square These are just the shapes of the brush tip, circle or square #### Spray and spray with opacity These will put random pixels within the radius of the brush. The only difference between them is that spray with opacity will also randomize the opacity of the new pixels. We can also adjust the intensity of these 2 stroke types. #### Jumble This stroke type will jumble and mix the existing pixels inside its radius. If we want to randomly reorder some pixels in an area, this is perfect for that. #### Blur Blur brush applies a simple radial blur (3x3 size) to the pixels. #### Custom Create and use custom shapes of the brush yourself or import it from other sources. [Read more >](/tools/brush/custom-brush) {% hint style="info" %} Jumble and Blur stroke types are not available in spray brush type. {% endhint %} # Custom brush

Unlock your imagination and capability with the custom brush system. If the basic round and square brush cannot do the job, we can use the custom shapes with the custom brush stroke type. ### Create custom brush

To create a custom brush, we first need to make a [selection](/tools/selection#what-is-selection), then tap the + button in the custom brush panel to add a custom brush to the current collection. {% hint style="info" %} The alpha values of the selection will be used to determine the shape of the brush. {% endhint %} ### How to use #### Regular brush When used with the [regular brush](/tools/brush#regular-brush), we have 2 types of alignments: * Aligned: each instance of the custom brush will be placed next to each other in a grid * Continuous: Same as the regular square and round brush, but with the custom shape. #### Spray and spray with opacity Spray the custom shapes instead of the basic round and square shapes. ### Brush collection

Custom brushes are saved into collections. The "default" collection is added automatically. To create a new collection, select "Create". When adding a new custom brush from the selection, it will be saved to the current selected collection. ### Import/export Pixquare's custom brushes are saved as ".pxbr" files. We can share these files with other users. We can find these files in collection folders in Files apps at "On my iPad (or iPhone) > Pixquare > custom\_brushes" To import brushes, we simply copy the collections to this location. {% hint style="info" %} .pxbr files at the top-level folder "custom\_brushes" folder without being in a collection will not be shown in Pixquare. {% endhint %} # Eraser

Eraser works identically as brush, only that it removes content instead of adding. There are a few options that are missing for the eraser tool like watercolor or jumble stroke type because it doesn't apply when erasing content. {% hint style="info" %} If we lower the opacity of the eraser, it will only reduce the opacity of the content instead of removing it. {% endhint %} [Read about how the options work for brush >](/tools/brush) # Line

Use this tool to create straight lines or curves (max 2 control points). This tool has the watercolor option and 2 stroke types. These are the same as brush's watercolor and round/square stroke type. We can also adjust the size and opacity of the line as well. [Read more about watercolor >](/tools/brush#watercolor) [Read more about round/square stroke type >](/tools/brush#round-and-square) ### Straight line

Draw a straight line by putting the pencil down at the start point, then drag it to the endpoint. The line will be drawn from the start point to the endpoint. The line will be [pixel-perfect](/tools/brush#pixel-perfect). #### Perfect angle

If we're doing isometric pixel art, it's very useful to keep the lines at certain angles. Enable this option and the line will always be at one of these angles: 0, 30, 45, 60, 90, 120, 135, 150, 180, and so on ### Curve

{% embed url="" %} Draw a curve by putting the pencil down at the start point, then drag it to the endpoint. At this step, curve appears to work like a straight line, however, it's not finished yet. We can add a maximum of 2 control points to a curve, so now we can start tapping or dragging the first control point, and then repeat for the second control point. {% hint style="info" %} If we're satisfied with only 1 control point, we can finish the curve by: * If we have [Only draw with pencil](/settings/drawing#only-draw-with-pencil) on, finger double-tap at any time. * If the option is off, while the pencil is still on the screen for the first control point, finger double-tap. * If we're drawing with a finger, lift our finger and tap again at the same coordinate. This can be applied with the pencil as well. {% endhint %} # Shape

Similar to the [line](/tools/line) tool, the shape tool helps us quickly draw basic shapes: rectangles and ellipses. This tool has the watercolor option and 2 stroke types. These are the same as the brush's watercolor and round/square stroke type. We can also adjust the size and opacity of the line. [Read more about watercolor >](/tools/brush#watercolor) [Read more about round/square stroke type >](/tools/brush#round-and-square) There is not much to say about these 2 shapes, except the 2 options that it has. ### Perfect ratio

If this option is on, the drawn shapes will always be squares (for rectangles) and circles (for ellipses). ### Filled

Shapes are hollow by default, however, we can turn on this option to fill the area inside the shapes. ### Drag mode We have 2 options: * Corner-corner: drag a shape from 1 corner to the opposite corner * Center-corner: drag a shape from the center to a corner, the opposite corner will be the mirrored coordinate of the dragged corner through the center # Selection

### What is selection? {% embed url="" %} In a graphical software context, a selection is an area that has been selected. Changes will only be applied to this selected area. This helps prevent any unwanted changes to the remaining of the working space. In Pixquare, the selected area will be marked with an animated dashed line surrounding the area. Pixquare has an advanced selection tool with 5 selection types and 5 selection modes. ### Selection types

* Box - Drag to select a rectangle area * Ellipse - Drag to select an ellipse area * Lasso - Draw a stroke to select the area encapsulated inside the stroke. This works similarly to the [contour brush](/tools/brush#contour), but instead of filling color, it selects the area * Polygon - Tap or drag to set the corner of a polygon, it will connect those points and then select the area surrounded by the polygon. * Magic wand - Tap to select all the pixels with the same color. It has 3 options: contiguous, tolerance, and sampling mode which work in the same way as the color bucket's options. * [Read more about contiguous >](/tools/color-bucket#contiguous) * [Read more about tolerance >](/tools/color-bucket#tolerance) * [Read more about sampling modes >](/tools/color-bucket#sampling-mode) ### Selection modes

* Replace (individual) - When a new selection is made, it will replace the previous one. * Add (Union) - When a new selection is made, it will combine with the previous one. * Subtract - When a new selection is made, it doesn't select the new area, instead, it will deselect that area from the previous one. * Intersect - When a new selection is made, only the pixels that belong to both the new one and the previous one remain selected. * Exclusive - The opposite of Intersect, when a new selection, only pixels that either belong to the new one or the previous one (but not both) are selected. {% hint style="info" %} When there is an active selection, we can simply tap on the canvas to deselect {% endhint %} {% hint style="info" %} We can use the "Select all" option to quickly select all the content of the current layer {% endhint %} ### Marching ants opacity Sometimes the marching ants (the animated line around the selection) can be distracting. To mitigate that, we can adjust its opacity with the slider in the Selection tool option panel # Color bucket

Use the color bucket if we want to quickly fill an area with a color or a gradient. This tool has the watercolor option. [Read more about watercolor >](/tools/brush#watercolor) ### Options The color bucket comes with a few customizable options. #### Contiguous {% embed url="" %} If the Contiguous option is on, only pixels that are contiguous (connected) to the original pixel will be affected, if it's off, it will affect all pixels on the entire canvas regardless of whether they are connected. When Contiguous is enabled, we have the option to select which corners are counted as connected. #### Tolerance {% embed url="" %} Adjust the **Tolerance** to allow "wiggling room", meaning that if the 2 colors are within the tolerance range, they will be counted as an identical color. Tolerance will behave differently in different [color modes](/misc/color-modes): * RGB: It will compare the RGB channel values * Indexed: It will compare the indices in the palette ### Fill modes

#### Solid color This mode will simply use the current color to fill, nothing special. #### Linear gradient {% embed url="" %} This will fill the area with a linear gradient. After adding the anchor colors, drag the pencil from the start point to the endpoint of the gradient. We can also select to use dithering instead of a smooth interpolation. [Read more about dithering >](/tools/brush#dithering) For the no-dithering option, the colors between the selected colors are different in different [color modes](/misc/color-modes): * RGB: RGB values will be interpolated. * Indexed: The palette indices will be interpolated. {% hint style="info" %} Linear gradient also has the "Perfect angle" option which will snap the angle to increments of 45 degrees {% endhint %} #### Radial gradient The same as the [linear gradient](#linear-gradient), except that it's radial instead of linear. The center of the gradient will be the start coordinate. ### Sampling mode There are 3 modes for sampling. #### Selected layer This is the default mode for the color bucket tool. In this mode, it simply uses the content of the selected layer to fill. #### Sampling layer This is also called the referencing layer in some other software. When turned on, a box will appear, we can long-press drag a layer (from the layer panel) to this box to make it the active sampling layer. Once set, the color bucket tool will use the active sampling layer to determine fill boundaries instead of the selected color in the layer panel. This is particularly useful when we want to separate the outline and the color layers. #### Visible layers In this mode, anything that is visible on the canvas will be used at the sampling content. # Eye dropper

Use this tool to pick a color from the canvas. We can either tap or drag. When dragged, a preview popover will show up with a zoomed-in of the area right underneath the pencil to help us pick the pixel more easily. This can also be activated by [long pressing on the canvas](/settings/drawing#quick-color-picker) or [holding the little square in between the sliders](/interface-and-gestures/gestures-and-quick-actions#quick-eye-dropper). The eye dropper can only work with the content on the canvas, for reference images, there is a different way of picking colors. [Read more >](/additional-features/reference-images) ### Only selected layers When this option is enabled, they eye dropper will only pick colors from selected layers instead of all layers on the canvas. ### Palette match Automatically select the closest color from the active palette. Really handy when we want to work with a limited color count and in indexed mode # Presets All tools in Pixquare have a lot of settings that we can config for various purposes. However, switching between the configs is often tedious an time-consuming. That's where tool presets come in handy

* To save a new preset, configure your tool and select that tool, open the preset panel, then tap Save new. * To switch to a preset, simply tap on that preset name. * To remove presets, tap on the edit button. After that, a delete button will appear on the right-hand side of each preset. Tap it to delete a preset. Select Done to finish. # Additional tools Along with the fundamental tools above, Pixquare also provides some other advanced tools to help you with your pixel art creation. ### Color replace Quickly replace colors on a specific collection of layers and frames. [Read more >](/tools/additional-tools/color-replace) ### Color adjustment Shifting HSV and RGB values of a specific collection of layers and frames at once. The alpha channel can be shifted as well. [Read more >](/tools/additional-tools/color-adjustment) ### Level adjustment Adjust/remap the brightness of the sprites with level adjustment. We can adjust R, G, B all at once or individually. [Read more >](/tools/additional-tools/levels-adjustment) ### Outline Outline the content of one more layer/frame. You can select which corners to outline. [Read more >](/tools/additional-tools/outline) ### Text Compose some text with properties (size, font, color) and Pixquare will rasterize that text and insert it as pixel data onto the canvas. [Read more >](/tools/additional-tools/text) ### Custom objects Copy/paste is neat, but it's tedious sometimes. How about saving content into collections and then pulling them out anytime, anywhere we want? [Read more >](/tools/additional-tools/custom-objects) ### Color helper Building a palette can be really challenging; that's when the Color helper comes in to help us. [Read more >](/tools/additional-tools/color-helper) ### Anti-aliasing (AA) Soften the edges with anti-aliasing. We can enable auto-aliasing so it applies the effect directly to our stokes in real-time. [Read more >](/tools/additional-tools/anti-aliasing-aa) ### Post-processing Similar to game post-processing, this really brings our work to life with some cool visual effects. [Read more >](/tools/additional-tools/post-processing) ### Color remap Use this when we want to switch palette, or simply map all colors to the current palette to clean up our sprites. [Read more >](/tools/additional-tools/color-remap) ### Modifiers Inspired by Blender's modifier system, Pixquare implements its own system to fit the pixel art world. [Read more >](/tools/additional-tools/modifiers) # Color replace

Replace colors on the canvas with other colors.

Color replace comes in 2 modes: Canvas and Drawing tools. * Canvas: apply the color replace immediately to the canvas * Drawing tools: It makes the drawing tools (brush, line, shape) into a color replacer, so that instead of applying the active color onto the canvas, it will apply the current color replace parameters onto the canvas as we draw. #### 1. Colors to be replaced This is the color on the canvas that will be replaced. When this color box is active (bigger), besides its own color picker, it will also take color from the palette, the main color picker, and the eye dropper. #### 2. Replacing colors This is the color that will be used to replace the existing color. When this color box is active (bigger), besides its own color picker, it will also take color from the palette, the main color picker, and the eye dropper. #### 3. Tolerance [Read more about tolerance >](/tools/color-bucket#tolerance) #### 4. Layer/frame selector Whether to apply to selected layers, visible layers, or all layers. #### 6. Preview toggle If this toggle is one, the changes will be displayed live on the canvas. {% hint style="info" %} Keep in mind that if we're replacing colors on many layers and frames with Preview on, it might lag. If that happens, we can turn this off, select color, and turn it on again to see the effect. Repeat this to avoid lag. {% endhint %} ### Demo video {% embed url="" %} Artwork by [UEVOXEL](https://twitter.com/UeVoxel) {% endembed %} # Color adjustment

Sometimes we want to shift the color values on our artwork to create effects or balance the colors. Use color adjustment to do that.

#### 1. Tone selection Select which tone to apply the adjustment: highlight, mid-tone, shadow, or all, #### 2. Color space Whether to adjust using HSV values or RGB channels. #### 3. Value sliders Slide these sliders to adjust the corresponding values: hue, saturation, value, red, green, blue, or alpha. #### 4. Layer selector Whether to apply to selected layers, visible layers, or all layers. {% hint style="info" %} This is not available in [indexed mode](/misc/color-modes#indexed) because it will apply directly to the palette instead of individual pixels. {% endhint %} #### 5. Frame selector Whether to apply to selected frames or all frames. {% hint style="info" %} This is not available in [indexed mode](/misc/color-modes#indexed) because it will apply directly to the palette instead of individual pixels. {% endhint %} #### 6. Preview toggle If this toggle is on, the changes will be displayed live on the canvas. {% hint style="info" %} Keep in mind that if we're adjusting colors on many layers and frames with Preview on, it might lag. If that happens, we can turn this off, adjust values, and turn it on again to see the effect. Repeat this to avoid lag. {% endhint %} ### Demo video {% embed url="" %} # Levels adjustment

This tool lets us quickly remap the shadow/highlight values of the pixels. It works in the same way as other graphical programs.

* Histogram: showing the current shadow/highlight distribution of our selected contents. * RGBA channels: Select which channels to apply the adjustments. * Gamma, Input, Output: The params for the adjustments. For more info, we can read [here](https://helpx.adobe.com/photoshop/using/levels-adjustment.html). # Outline

Adding an outline to our existing content can be a tedious and time-consuming task. We can use this tool to add an outline to our content with many customizations quickly.

#### 1. Outline color The color of the outline. When this color box is active (its color picker is shown) it will also take the color from the main color picker and palette. #### 2. Ignored colors Tap the + button to add the current color to this list. If a color is in this list, it will be treated as being transparent. #### 3. Corners Select which corners to outline here. #### 4. Alignment Whether to outline outside or inside of the content. #### 5. Watercolor [Read more about watercolor >](/tools/brush#watercolor) #### 6. Preview If this toggle is one, the changes will be displayed live on the canvas. {% hint style="info" %} Keep in mind that if we're outlining on many layers and frames with Preview on, it might lag. If that happens, we can turn this off, select the setup, and turn it on again to see the effect. Repeat this to avoid lag. {% endhint %} ### Demo video {% embed url="" %} # Text

Use the text tool to add rasterized text to our artwork.

#### 1. Text Enter the text we want to add to our artwork here. #### 2. Font Select the font for the text here. #### 3. Font import Pixquare can import our fonts to use directly, no need to use another app to install fonts to our device. Tap this button and browse to the font file to import. #### 4. Size Select the font size here. {% hint style="info" %} We can drag the text < Size > to increase/decrease the value. {% endhint %} #### 5. Text color Use this to pick the color for our text. When this color box is active (its color picker is shown) it will also take the color from the main color picker and palette. #### 6. Preview Turn this on to see how the text will look once added. The text will scale up and down in sync with the canvas zoom level. ### Demo video {% embed url="" %} Artwork by [chili](https://x.com/ryviolie) {% endembed %} # Custom objects

Custom objects allow us to save our contents in neatly organized collections so that we can pull them out and use them later. This is quite similar to copy/paste, however, we can save as many objects as we want and they are also saved between app sessions. We can also share our objects as `.pxpc` files. Custom object collections are saved in `portable_contents` folder within [Pixquare's folder in Files](/gallery/manage-files-via-the-files-app). 1. Collection selection 2. Add the selected object to the current layer 3. Available objects 4. Add object. We need an [active selection](/tools/selection#what-is-selection) for this to work. {% hint style="info" %} We can also long press on an object and then drag it to the canvas to add. {% endhint %} {% embed url="" %} Artwork by [chili](https://x.com/ryviolie) {% endembed %} # Color helper

### 1. Colors At the top of the panel are the generated colors based on the selected color. We can choose the categories to generate from these: * Complementary * Analogous * Triadic * Tetradic * Shades, tints, and tones * Hue, Saturation, and Luminance ### 2. Color count For some categories, the color count in the ramp can be adjusted using this stepper. ### 3. Auto-update When this option is enabled, the base color of this helper will sync with the selected color. We can turn it off so that the colors remain unchanged when we change the primary color, and tap on the sync button to manually sync the color once. # Anti-aliasing (AA)

Adding anti-aliasing pixels manually is a nightmare and could take hours. With this tool from Pixquare, we can do that with just a few taps. 1. Mode: 1. Canvas: apply AA to the existing content on the canvas 2. Drawing tools: apply AA to the new content added using tools 2. New corner combination: Use this to config a new corner combination (see number 3) 3. Corner combinations: The current set of combinations to apply AA 1. How the corner combination works: for any particular transparent pixel, if all of its surrounding pixels corresponding to the black box have color, AA will be applied to that pixel. 4. Intensity: Higher values give AA pixels higher opacity 5. Preview 6. Tap this to expand the layer/frame selection to apply AA # Post-processing If one is familiar with post-processing from game engines, he/she will feel right at home with this one. Post-processing is a non-destructive effect that we can apply to the canvas to enhance it's visual. Pixquare supports many effects that we can apply simultaneously, and we can add as many effect as we want. {% hint style="info" %} Even though we can apply multiple effects simultaneously, we cannot apply the same effect more than once. {% endhint %} Note that the order in which we apply the effects will yield different final result. {% hint style="info" %} Post-processing will have different results on the working canvas and the exported image. Size multiplier is the deciding factor of how big/small the differences are. {% endhint %} All effects have a toggle for "Pixel-independent". Pixel-independent means the app will use the screen's pixel as the unit, and inversely, pixel-dependent means it will use the canvas pixel as the unit when doing calculation. ### CRT

This effect simulates the effect of the retro CRT display. The options for this effect are quite self-explanatory, so we won't go into their details. ### Vignette

This effect darkens the edges of the canvas ### Bloom

Add some glow around the bright areas of the canvas. * Threshold: This will determine which color is categorized as bright. Color with the lightness (in HSL space) above the threshold will be bright. Only bright pixels can contribute the the bloom color. * Radius: The bloom blending radius. In other words, how far a bright pixel can have an impact on other pixels. ### Round pixel

Turn square pixels into round ones. * Contiguous: if this option is on, contiguous pixels with the same color will be connected and their adjacent edges won't be rounded * Background color: fill color for the gaps * Intensity: corner radius for the rounded pixels # Color remap Quickly remap the colors of our artwork to match a palette

### Color count We can adjust the color count of the palette right here to remove similar colors ### Palette selection We can choose any palette to map the content. Note that the list will only show saved palettes, so if we want to use a particular palette, make sure to save it first. ### Also update palette When this option is enabled, it will also replace the current palette with the palette we're using to remap. {% hint style="info" %} For indexed mode, this option is always on {% endhint %} # Liquify Fun tool to warp your content

Use the Liquify tool to freely warp our pixels around smoothly. These are the available operations: * Push - Push the pixels in the direction of our strokes * Expand - Push the pixels outward from the touch position * Shrink - Pull the pixels toward the touch position {% hint style="info" %} Pixels that are closer to the touch position will be affected more {% endhint %} #### Size Adjust how big the brush tip is, similar to brush size. When Pressure sensitivity is enabled, the size will be linearly mapped to the range of 0% - 200% of the current size. #### Intensity How much the tool should affect the pixels. When Pressure sensitivity is enabled, the intensity will be linearly mapped to the range of 0% - 200% of the current value. # Modifiers Similar to Blender's modifiers Modifiers are dynamic effects that will be applied to the file. They take effect immediately after being added. When enabled, they apply the effect dynamically to the file. We have the option to apply them. When applied, the modifiers are removed from the file, and the effects are now permanent to the file. ### Animation speed multiplier Speed up or slow down the animations with this modifier to see how they look. * To make the animations go twice as fast, we can set the multiplier to 2 * To make them go slower, set the value to 0.5 # Color picker The color picker is being used in many places throughout the app. However, the main color picker (the one that will expand if we tap on the color box at the top right corner) has the most functionality, so this page will mainly talk about that color picker. In other places, a few options might be missing, but it still works in the same manner as the main one. The color picker has 4 picker types (HSV, HSL, Wheel, and RGB) and 2 states (full-size and compact). For each type, the panel and the sliders will be utilized to select different values to composite a color. {% hint style="info" %} The main color picker works in sync with the [palette panel](/palette/overview). {% endhint %} ### Full-size color picker

#### 1. Picker type Select the picker type here. #### 2. Quick color selection For the main color picker, this will display the history of selected colors. For other places, it will display the colors from the palette. Some won't have this at all. #### 3. Hex code This field will display the hex code of the current color. We can tap on this to input our hex code, once entered, the color will be updated to match the entered code. #### 4. Indicator Just an indicator on the panel to help us visualize where the current color is. #### 5. Drag knob Only the main color picker has this. Drag this to convert the picker to the compact form and move it around the canvas. #### 6. Value text The values for the current color. Depending on the active picker type, these will display different value sets. #### 7. Value sliders Use these sliders to adjust each channel individually. #### 8a. Current color It displays the current selected color. #### 8b. Previous color It displays the previously selected color. ### Compact color picker

Same as the full-size one, just that many elements are hidden to make the picker smaller. For the main picker, when it is in this form, it becomes sticky, meaning it will remain on the screen at all times and won't auto-dismiss. #### \* Customization Tap on the ... button to show some customization: * Full size: * Bigger: make the color box bigger for easier selection * Palette match: automatically select the closest color from the active palette. Really handy when we want to work with a limited color count and in indexed mode. * Compact: * Whether to show a panel or sliders. * Whether to include the slider for the alpha channel. # Overview

Layers and frames are at the core of Pixquare workflow, so let's dive in and learn about what types of layers/frames are available and what we can do with them. {% hint style="info" %} We can drag the little bar at the top right of the panel to resize this panel. {% endhint %} ### Layer types Pixquare provides several layer types for us to play around with: regular layer, reference layer, and tilemap layer. [Read more >](/timeline-and-layers/layer-types) ### Layer operations With those layers, let's learn about what operation we can perform with them. [Read more >](/timeline-and-layers/layer-operations) ### Frame operations There are many things we can do with frames to create fluent animation. Some operations can speed up our workflow tremendously. [Read more >](/timeline-and-layers/frame-operations) ### Cel operations Layers and frames, together they create cels. So let's learn about what to do with cels. [Read more >](/timeline-and-layers/cel-operations) # Layer types

### What is a layer? {% hint style="info" %} For those who are familiar with graphical software, this section might be skipped. {% endhint %} Imagine we're holding a stack of clear plastic films and a bunch of markers. We take them out of the stack one by one and start drawing on each film separately, then at the end, we stack them up again. Now we look at that stack and see only one drawing resulting from all of our separate doodles, one on top of another, the one above will cover a bit (if not entirely) the one below. That's the real-life representation of layers. Each layer is a plastic film, and in Pixquare, we're doing the same thing, stacking layers on top of each other to create a final image. Pixquare provides several layer types: regular layer, reference layer, and tilemap layer. ### Regular layer This is probably the most used layer type. With this layer, we can draw on them with [tools](/tools/overview). There is not much more to it :D. ### Reference layer Sometimes it's useful to have a reference image while sketching. And it's even better if that image can be right on the canvas so it's easier to see or even trace along if needed. The reference layer is here to help with that. We can import images from our device into Pixquare as a displayable reference layer right into the canvas and manage them in the layer stack. As this is only for referencing purposes, we cannot draw on this layer. However, we can [rasterize](/timeline-and-layers/layer-operations/reference-layers-operations#rasterize) it to make it a regular layer and start doodling on it. {% hint style="info" %} When importing a GIF, its frames will line up with the artwork's frame {% endhint %} ### Tilemap layer When developing a game, a common task is to create a tileset to build the in-game world. To make the tiles connect seamlessly, we need some special assistants. The tilemap layer is designed to support this as it has some special properties that make creating repeated patterns easier. There is a complicated system that comes with the tilemap layer, we can read more about the tilemap/tileset system [here](/misc/tilemap-tileset-system). ### Group This is not a layer per se, but it is a super useful element to help organize the layer stack. Similar to a file system folder, a group is just a container of other layers and groups. Using groups, we can build clean and intricate hierarchies of layers which makes navigating complex artwork a piece of cake. # Layer operations There are a lot of maneuvers built around the layer system. This page will provide us with guidance on the operations we can perform on all layer types. For specific actions on each layer type, please see the sub-pages. [Regular layer's operations >](/timeline-and-layers/layer-operations/regular-layers-operations) [Reference layer's operations >](/timeline-and-layers/layer-operations/reference-layers-operations) [Tilemap layer's operations >](/timeline-and-layers/layer-operations/tilemap-layers-operations) [Group's operations >](/timeline-and-layers/layer-operations/groups-operations) ### Selection {% embed url="" %} Most operations will only affect the selected layers, so before going into the fun stuff, let's learn how to select the layers. There are 2 selection modes: individual and multi-selection. The default mode is individual in which when we tap on a layer, it will select only that layer. Multi-selection mode, as the name suggests, will allow us to select multiple layers at once.

To enable multi-selection mode, tap on the "Select" button on the top row, next to the lock button. In this mode, when we tap on a layer, it will toggle the selection status of only that layer, it won't un-select the other ones. There is also a check box on the left to toggle all layers at once.

To exit multi-selection mode, tap the "Done" button. ### Contextual menu {% embed url="" %} Artwork by [Mossy](https://x.com/MossyPixe) {% endembed %} To bring out the [contextual menu](https://docs.pixquare.art/timeline-and-layers/pages/GEh0IaKc8PQMO1ETEVBS#id-10.-contextual-menu) for layers, you can: * Tap on the selected layer one more time * The contextual menu will auto-show if more than 1 layers are selected ### Re-arrangement {% embed url="" %} To rearrange layers, select them, then long press on one of the selected layers (or just the layer if we select only one) and drag to the desired position. An indicator will appear to let us know where the new location is. If we select multiple non-consecutive layers, they will be placed right on top of each other at the new place with the relative order among them preserved. ### Removal

To remove layers, select them, then tap on the remove layers button. A confirmation alert will show up, confirm it and they're gone. ### Visibility {% embed url="" %} Artwork by [UEVOXEL](https://twitter.com/UeVoxel) {% endembed %} Visibility determines whether or not a layer will be rendered on the canvas. * To toggle the visibility of a layer, tap on the eye icon of that layer. * To toggle the visibility of all selected layers, tap on the eye icon of one of the selected layers. * To toggle the visibility of all layers, tap on the eye icon of the top row. ### Lock status When a lock is locked, we cannot change the content of that layer anymore. This is to prevent accidental changes. The way we toggle lock status is the same as [visibility](#visibility), except that we're using the lock icon instead of the eye icon. {% hint style="info" %} When a group is locked, all of its children will be locked as well, regardless of their individual status. {% endhint %} ### Renaming/Opacity/Color/Blend mode

To perform any of these actions, [activate the contextual menu](#contextual-menu), then select Properties. * To rename, tap on the edit icon next to the layer name * All layers' opacity can be adjusted, including groups. Adjust the opacity using the slider. * To better visually differentiate layers in the layer panel, we can set the color for individual layers. * To remove that color, set it to transparent color. * The color only affects the layer row in the panel, it won't have any effect on the content. ### Copy/paste

We can copy/cut and paste one or more layers/groups in Pixquare. To copy/cut layers, long-press and drag the layer name, 2 boxes will appear: one for copying and one for cutting. Drop the dragged layers into the corresponding box to perform the operation. {% hint style="info" %} If we drag a selected layer, it will perform the operation for all selected layers, whereas if an unselected layer is dragged, it will operate on that layer only. {% endhint %} # Concepts There are a few concepts that we need to understand before we learn to apply them in Pixquare. In general, they do not have much difference between pixel art and other forms of digital art. ### Alpha-lock If a layer is alpha-locked, we can only draw on pixels that already have non-transparent values of that layer. This has the same effect as a [selection](/tools/selection) of all non-transparent pixels. ### Blend mode Layers can have special blend modes that dictate how they blend (combine) their colors with the ones below them. If you want to learn more about the details of how blend modes work, you can give this [wiki page](https://en.wikipedia.org/wiki/Blend_modes) a visit. Currently, Pixquare supports these modes: * Normal * Darken * Multiply * Color burn * Lighten * Screen * Color dodge * Overlay * Soft light * Hard light * Difference * Exclusion * Hue * Saturation * Color * Luminosity ### Masking

There are 2 types of masks: cropping and clipping. * Cropping mask: when a layer becomes a cropping mask of another one, its RGB values will be ignored, only the A channel is used to determine the alpha channel of the cropped layer by multiplying the cropping mask's alpha with the cropped layer's alpha. * Clipping mask: when a layer is clipped by another one, its alpha will be multiplied by the other layer's alpha, the RGB values are still used. In other words, the clipped layer's content will only show inside the clipping layer's content. # Regular layer's operations ### New empty layer(s)

Use the New Layer button to create a new layer(s) * If we have only 1 selected layer, the new layer will be placed on top of the currently selected layer. * If we have multiple selected layers, a new empty layer will be placed on top of each selected layer. * If a folder is selected, a new empty layer will be added to the top of that folder's children. ### Duplicate layer(s)

Use the Duplicate Layer button to duplicate selected layer(s). * If we have only 1 selected layer, the duplicate layer will be placed on top of the currently selected layer. * If we have multiple selected layers, a duplicate layer of each selected layer will be placed on top of them. ### Alpha-lock

To toggle the alpha lock of a layer, [activate the contextual menu](/timeline-and-layers/layer-operations#contextual-menu), then select Alpha lock.

When a layer is alpha-locked, there will be a lock icon to the right of its name, we can tap this to unlock it. ### Layer fx

There are cases where we want to apply some effect to our layer's content dynamically, meaning the effects automatically change when the layer's content changes. For that, we can use layer fx. Pixquare supports 4 fxs at the moment: Color Overlay, Outline, Anti-aliasing, and Pattern overlay. To apply the effect permanently to the layer, we can choose to rasterize the fxs. ### Blend mode

To set the blend mode of a layer, [activate the contextual menu](/timeline-and-layers/layer-operations#contextual-menu), select Blend mode, and then select the desired mode. ### Masking

To set the masking property of a layer, [activate the contextual menu](/timeline-and-layers/layer-operations#contextual-menu), select Masking, and then select the type of desired masking. If the selected layer is already a mask layer, selecting Masking will remove the masking property and make that layer a regular layer again. ### Layer merge

Layers can be merged into a single layer. To merge 2 or more layers, select at least 2 layers, the [contextual menu](https://docs.pixquare.art/timeline-and-layers/layer-operations/pages/GEh0IaKc8PQMO1ETEVBS#id-10.-contextual-menu) will show up automatically with the option Merge, select it, and you're done. {% hint style="info" %} If a layer has masks, the merge option will be available even if only 1 layer is selected in the contextual menu. Performing a merge for this layer will merge the masks into the main layer. {% endhint %} ### Content copy/cut Along with the layer contextual menu, a [clipboard](/misc/clipboard-copy-paste) contextual menu will also appear at the bottom with 2 options: Copy and Cut. # Reference layer's operations ### New reference layer

Use the New Reference Layer button to add a new reference layer. We'll have 2 options of where to select the image: Photos and Files. After selecting the image from its source, a new reference layer will be added to our layer stack. ### Rasterize {% embed url="" %} A reference layer is not a drawable layer, it's just an image on the canvas. However, you can convert that image into a regular layer and start drawing on it. To do that, [bring up the contextual menu](/timeline-and-layers/layer-operations#contextual-menu), then select "Rasterize", we'll have the option to apply this to the current frame or all frames. When rasterized, the image's resolution will be scaled to match the current size of it on the canvas, in most cases, we'll see the image becomes pixelated. ### Original size When imported, the image and the canvas might have different sizes, however, Pixquare will try to scale it down so that it fits inside the canvas. If we want to scale it back so that 1 pixel of the image is the same size as 1 pixel of the canvas, we can select the "Original size" option in the [contextual menu](/timeline-and-layers/layer-operations#contextual-menu). # Tilemap layer's operations ### New tilemap layer

Tapping on the New Tilemap Layer will bring up a dialog like in the screenshot. Here we can configure our new tilemap layer. We'll have to choose the tileset. An artwork can contain many tilesets, we can pick an existing one or create a new one. A few notes: * We can import existing external tilesets, they can be .pxts or image files * Convert selected layer: check this option if you want to convert the current selected layer into a tilemap layer * Only selected area: convert only the selected area, ignore the rest of the selected layer * Keep arrangement: auto assign the tiles to the new tilemap so that it has the same content as the current selected layer. * Allow duplicate and empty: Whether the new tileset will keep all empty and duplicate tiles or only keep 1 for duplicates [Read more about tileset >](/misc/tilemap-tileset-system) ### Duplicate tilemap layer(s), alpha lock, and content copy/cut We do these operations the same way we do them with regular layers: * [Duplicate](/timeline-and-layers/layer-operations/regular-layers-operations#duplicate-layer-s) * [Alpha lock](/timeline-and-layers/layer-operations/regular-layers-operations#alpha-lock) * [Copy/cut](/timeline-and-layers/layer-operations/regular-layers-operations#content-copy-cut) # Group's operations ### New group

Use the New Group button to create a new group. * If we have only 1 selected layer, a new empty group will be added. * If we have more than 1 selected layer, all of them will be moved to under the new group. ### Merge If a group has more than 1 layer, it is mergeable. To merge a group, [activate the contextual menu](/timeline-and-layers/layer-operations#contextual-menu), and select Merge. After merging, the group is still there, however, all of its children are now merged into 1 layer. # Frame operations ### What are frames? {% hint style="info" %} For those who are familiar with frame-by-frame animation, this section might be skipped. {% endhint %} An animation is a collection of static images being shown one by one rapidly to create the illusion of movement. Each of those static images is a frame. ### Selection There are 2 selection modes: individual and multi-selection. The default mode is individual in which when we tap on a frame number, it will select only that frame. Multi-selection mode, as the name suggests, will allow us to select multiple frames at once.

To enable multi-selection mode, tap on the "Select" button on the top row, this button is hidden if we have only 1 frame. In this mode, when we tap on a frame, it will toggle the selection status of only that frame, it won't un-select the other ones. There is also a check box on the left (2) to toggle all frames at once.

To exit multi-selection mode, tap the "Done" (1) button. ### Navigation/animation

1. Go to the first frame 2. Go to the previous frame 3. Play animation loop 4. Drag this button to scrub through the frames 5. Go to the next frame 6. Go to the last frame ### Add new / remove

1. Remove selected frame(s) 2. Add a new empty frame after each selected frame 3. Duplicate the selected frame(s), the new frames will be added after each selected one ### Onion skin

Onion skin is the option to show the previous and next frames on the canvas to allow us to use them as the reference to draw the current frame. Tap the button to toggle onion skin on/off. Onion skin has a lot of [customization](/settings/animation) that we can mess around in the settings. ### Contextual menu To bring out the [contextual menu](https://docs.pixquare.art/timeline-and-layers/pages/GEh0IaKc8PQMO1ETEVBS#id-10.-contextual-menu) for frames, you can: * Tap on the selected frame number one more time * The contextual menu will auto-show if 2 or more frames are selected ### Duration

A frame will stay visible as long as its duration allows before switching to the next one. If we want a frame to show shorter or longer, we can edit its duration by [activating the frame contextual menu](#contextual-menu) and then selecting Duration. We can now adjust the duration of the selected frames. We can also set the duration by setting the FPS as well, and Pixquare will calculate the duration to achieve that FPS. {% hint style="info" %} You can change the value by dragging the text < Duration > {% endhint %} ### Tagging

A tag is a collection of consecutive frames. It's the same concept as [layer group](/timeline-and-layers/layer-types#group), but only for frames. Once a tag is created, the animation will only loop inside the selected tag when you hit play. Tagging is very useful if we want to save multiple animation clips in a single file. To tag a range of frames, select the start frame and the end frame (we can select any frame in between as well, but that won't matter). The Tag button will show up in the contextual menu. Tap it, give it a name, and select a color if needed. {% hint style="info" %} To modify an existing tag, we can tap on the selected tag again to bring up the property board of that tag. {% endhint %} ### Copy/paste

We can copy/cut and paste one or more frames in Pixquare. To copy/cut frames, long press and drag the frame number, 2 boxes will appear: one for copying and one for cutting. Drop the dragged frames into the corresponding box to perform the operation. {% hint style="info" %} If we drag a selected frame, it will perform the operation for all selected frames, whereas if an unselected frame is dragged, it will operate on that frame only. {% endhint %} # Cel operations

### What are cels? In Pixquare's timeline panel, we have layers (y-axis) and frames (x-axis), together they create a grid of cels. So a cels is an intersection of a layer and a frame. ### Selection To select a cel, simply tap on it :D. ### Cel opacity When we set the opacity for a layer, all its cels will inherit that opacity by default. However, we can set each cel's opacity individually. To do that, tap on a cel twice to show the contextual menu, then select Opacity to adjust. If we want to remove the individual opacity and use the layer's opacity, select the remove button next to the slider. ### Cell z-index It's not common, but occasionally, we want the cel to have a different/elevated z-index from its layer. To adjust a cel's z-index, tap on it twice to show the contextual menu, then select Z-index option. Cels with custom z-index will have a z symbol above their dots. ### Custom Data Sometimes it's useful to attach some extra custom data to each cel. To attach a string to a cel, tap on it twice to show the contextual menu, then select Custom data option, and enter the string. Cels with custom data will have a document symbol above their dots. ### Linking

Cels of the same layer can be linked together. When linked, they will have the same content, so editing one will affect all of them. This is particularly helpful with static objects/backgrounds of animation clips. To link cels, select the layers and frames. This effectively selects the cels. If we want, we can enter the multi-selection mode of the layers and frame, then tap the individual cels. The [contextual menu](https://docs.pixquare.art/timeline-and-layers/pages/GEh0IaKc8PQMO1ETEVBS#id-10.-contextual-menu) will show up with a Link button, tap it to link the selected cels. {% hint style="info" %} Note: when linking, the content of the first cel will be chosen to be the content for all linked cels {% endhint %} ### Linking when duplicating frames

If we take a closer look at the layer row, we'll see a button to the left of its name. This button has 2 states: * Unlinked (2 dots): When duplicating a frame, the new cel of the layer won't be linked. * Linked (a long dot): When duplicating a frame, it will automatically link the new cel of this layer. ### Unlinking To unlink cels, select them and the Unlink from the [contextual menu](/timeline-and-layers/frame-operations#contextual-menu). ### Copy/paste

We can copy/cut and paste one or more cels in Pixquare. To copy/cut cels, long press and drag the cels, 2 boxes will appear: one for copying and one for cutting. Drop the dragged cels into the corresponding box to perform the operation. # Overview The palette is where we keep and organize the colors for convenient use while drawing. It resides at the bottom of the screen and can be detached. Besides the main functionality of storing colors, the palette also has a lot more to offer. {% hint style="info" %} In [indexed mode](/misc/color-modes#indexed), the palette is the most important component of an artwork because it dictates how the artwork looks. {% endhint %} ### The basics [Learn about the basic functionalities of the palette >](/palette/the-basics) ### Gradient generator Sometimes it's quite handy to be able to generate a gradient from 2 colors. By using the gradient generator built right into the palette, we can easily do that. [Read more >](/palette/gradient-generator) ### Shading Oftentimes, we need to add shades to objects to bring them to life. Shading is a powerful tool to help us add shades to the object efficiently. [Read more >](/palette/shading) ### Lospec integration Early in the development, a few users requested me to add Lospec palette import. So I did, and now we can import from thousands of available palettes from Lospec. [Read more >](/palette/lospec-integration) ### Importing palettes In addition to Lospec palette, Pixquare can import palettes from files and images as well. [Read more >](/palette/importing-palettes) ### Palette sorting Just a quick way to reorder our palettes by color values. [Read more >](/palette/palette-sorting) ### Other operation [Learn about other operations we can do with the palette >](/palette/other-operations) # The basics ### What do we have here?

1. Load built-in palettes or saved palettes 2. Save the current palette 3. More button 4. Edit button. We got here by tapping on the selected color one more time 5. Add the current color to the palette Pixquare palettes can have up to 255 colors for indexed mode and unlimited colors for RGBA mode ### Reorder colors We can reorder colors within the palette by long-pressing on a color and then dragging it to the new position. {% hint style="info" %} When we reorder colors in [indexed mode](/misc/color-modes#indexed), we'll have the option to remap the canvas indices to keep the colors the same on the canvas {% endhint %} # Gradient generator

In the palette panel, tap the ... button, then "Generate gradient"

1. Color space to interpolate the values: RGB or HSV 2. Step direction 1. Inside - Simply interpolate from the first to the second color 2. Outside - Either go down to 0 then loop to 1 then to the second color or go up to 1 and loop back to 0 then to the second color. 3. First color 4. Second Color 5. Number of colors in between the 2 colors 6. Preview **Ignore source colors**: if this option is enabled, the source colors (#3 and #4) will not be added to the generated colors. After tapping Add, the gradient will be added to the current palette at the position of the selected color. {% hint style="info" %} When we add the gradient to the palette in [indexed mode](/misc/color-modes#indexed), we'll have the option to remap the canvas indices to keep the colors the same on the canvas {% endhint %} # Shading

In the palette panel, tap the ... button, then "Shading" ### What is shading? The main component of shading is a color ramp from the palette. What shading does is replacing pixels that have colors in the ramp with adjacent colors. The new colors will be determined by the direction (forward or backward). Pixels with colors not in the ramp will be ignored. ### How to use shading {% embed url="" %} To select the color ramp, we'll need to select the 2 ends of it from the palette. If we want to replace the ramp, clear it first with the Clear button. To flip the direction, tap on any color of the ramp. Tap on the Enabled/Disabled button to toggle shading on/off. When enabled, shading will affect all drawing tools: brush, line, shape, color bucket. # Lospec integration In the palette panel, tap the ... button, then "Load from LOSPEC"

Lospec is probably the most popular source for palettes. That's why Pixquare integrates Lospec API right into the app so that we can import a palette in just seconds. To import a palette from Lospec, tap Load from LOSPEC, then enter the palette slug. Hit search, Pixquare will download the palette if available and display a preview. Select Load to import. {% hint style="info" %} The slug is the last part of the URL of the palette. The slug of this palette is "**sweaft-64**" {% endhint %} We also have the option to auto-save the loaded palette as well. # Importing palettes In the palette panel, tap the ... button, then "Import/Load"

Pixquare can import/load palettes from these sources: * .px files * .aseprite files * Images (png, jpg, etc.) * Current artwork * Selection (only count the selected frame) For the first 3 options, we can browse from the Files or Photos app. If an image contains more than 254 colors, only the first 254 colors will be imported. The same is applied to the current artwork option. # Palette sorting In the palette panel, tap the ... button, then "Sort"

Pixquare can sort our palettes in ascending or descending order by one of these values: * Hue * Saturation * Light * Value * Red * Green * Blue * Alpha {% hint style="info" %} When we sort the palette in [indexed mode](/misc/color-modes#indexed), we'll have the option to remap the canvas indices to keep the colors the same on the canvas {% endhint %} # Color placement We can customize where the color are placed on the palette

By default, the palette will have the "Packed" placement mode. In this mode, all colors are placed next to each other and fill the entire width of the palette panel. However, we can select "Anywhere" to have our own custom color placement to suit our needs.

In this panel, we can customize how many static columns we want the palette to have instead of it having a dynamic column count along with the palette size. The box with "x" means an empty space. We tap on each box to flip its status. In this panel, we can long press and drag to re-order the colors as well. Tap "Apply" to set this color placement to the active palette. # Color reduction Quickly reduce the color count of our active palette

This tool only removes the colors from the palette without affecting the content on the canvas, if we want to also map the colors to the new palette, we need to use [Color remap](/tools/additional-tools/color-remap) ### Color count Adjust the number of colors here. When reducing the count, it removes similar colors. ### Remove unused colors Use this option to clean up any colors that are not used on the canvas. # Other operations ### Lock/unlock If a palette is locked, we cannot remove colors within that palette. However, we can reorder and add more colors When opening an artwork with a non-empty palette, the default setting is to lock the palette. We can toggle the lock status manually if needed. ### Clear It's quite obvious :D, if we select Clear, it will remove all colors of the current palette. # Overview In addition to other popular tools like [brush](/tools/brush) or [eraser](/tools/eraser), Pixquare's also equipped with a few more advanced features that can be turned on when needed. ### Symmetry (mirroring) Whether we want to create repeated pattern, optically mesmerizing artwork, or just 2 side of a symmetrical object, the Symmetry tool can help with that. [Read more >](/additional-features/symmetry) ### Reference images Add images in floating windows to use as reference while sketching with this feature. [Read more >](/additional-features/reference-images) ### Left-hand mode For lefties, this feature will flip the layout of the UI so that it feels great with the pencil in your left hand. [Read more >](/additional-features/left-hand-mode) ### Handy joystick When drawing with one hand, the other hand is mostly free, so why not use it to trigger some quick actions with the joystick? [Read more >](/additional-features/handy-joystick) # Symmetry Symmetry is both beautiful and time-saving. It was one of the most requested features in Pixquare's beta phase. Most software offers mirroring with 4 symmetry lines: 1 vertical, 1 horizontal, and 2 diagonals. Pixquare goes 1 step further and offers as many groups (not lines, read further down this page to learn more) as your heart desires. ### Flip the switch Symmetry tool is disabled by default, so we'll need to enable it first. To enable the symmetry tool, go to Settings > Features > Symmetry tool ### What's a symmetry group? Instead of working with individual symmetry lines, Pixquare works with multiple lines crossing at a shared center. It'll divide the canvas into smaller fragments and then do the symmetry magic in each fragment. Each cluster like that is a group. In Pixquare, we can add as many group as we want ### How to use {% embed url="" %}

1. Position and rotation drag knob - drag these to adjust the position and angle of the lines. Only the selected line in the panel has these 2. On/off toggle - Symmetry lines can be temporarily turned on/off 3. Current position of the line 4. Line color - tap on this box to change the line's color 5. Number of lines/fragements 6. Symmetry mode: mirror or rotate 7. Reset the position to center and angle to 0 8. Add new line and remove the selected line # Reference images Reference images are different from the [reference layer](/timeline-and-layers/layer-types#reference-layer). Instead of being a layer on the canvas, reference images are floating windows within Pixquare workspace, but it has nothing to do with the canvas. To turn on reference images, go to Settings > Features > Reference images.

1. Active reference images. 2. Imported images. We can import as many images as we want and only display a few of them 3. Edit button - use this to remove imported images 4. Add button - We can import images from either Files or Photos. To pick colors from the reference image, we can long-press + drag on the image. {% hint style="info" %} If we tap on the active images, a toolbar will show up with the minimize button and we can drag the bar to re-position the image. {% endhint %} # Left-hand mode To enable left-hand mode, go to Settings > Features > Left-hand mode.

Artwork by [@UeVoxel](https://twitter.com/UeVoxel) # Handy joystick

To enable this joystick, go to Settings > Features > Handy joystick After enabling it, we'll see the list of actions. We can add up to 6 actions to the joystick. {% hint style="info" %} Some actions have the "Reset after" option, when this is enabled, releasing the joystick will revert the effect of the action and vice versa. {% endhint %} To reposition this joystick, long-press on it and then drag it to the desired position. # Overview Set preferences to best fit your workflow. ### General We can find some fun options here. [Read more >](/settings/general) ### Canvas Canvas grid, guide line, languages, etc. [Read more >](/settings/canvas) ### Drawing Customize the canvas interactions. [Read more >](/settings/drawing) ### Animation Mostly about [onion skin.](/timeline-and-layers/frame-operations#onion-skin) [Read more >](/settings/drawing) # General

### 1. Auto-save This option is on by default. When enabled, Pixquare will detect changes in the artwork and save them automatically. {% hint style="info" %} If we're trying something new and afraid that it could ruin our work, temporarily turning this off might be a good solution. {% endhint %} ### 2. Color mode Pixquare supports RGBA and Indexed color modes. We can convert the file between these 2 modes here. When converting from Indexed to RGBA, it uses the current palette of the file as the source. ### 3. Toast notification At the top of the screen, there is a toast notification that will show up quite often to notify us of what's going on. If that becomes a distraction for us, we can simply hide it away with this option. ### 4. Menu label duration Same as the toast screen, when the [contextual menu](https://docs.pixquare.art/settings/pages/GEh0IaKc8PQMO1ETEVBS#id-10.-contextual-menu) appears, each button will have a label to tell us what it does. We can customize how long that label will stay on the screen here. ### 5. Layer panel position The layer panel (timeline) can be docked into 3 positions on the screen: bottom, left, and right. We can choose the position here #### 5.1 Layer-only panel If we're familiar with Procreate's layer panel, we can enable this option to have a similar panel in Pixquare. This new panel will appear on the side of the screen. This panel will show all the info of layers with bigger preview images and the rows won't have frames like the main panel. This is particularly useful if we're not working with animation. In that case, we can even ignore the main panel and only use this. #### 5.2 Expanded width By default, the layer panel leaves enough space at the bottom for the palette and gesture pad (if enabled). When working with long animations, having a longer timeline to show more frames really helps with the workflow. To expand the timeline to take the entire width of the screen, enable this option. Note that this option is only available when the timeline is docked to the bottom position. ### 6. Undo/redo buttons These are the buttons under the slider to undo/redo actions. We can enable or disable them here. Because we can already undo/redo by 2-finger/3-finger tap, we can disable these buttons if we want to clean up the UI a bit. ### 7. Undo/redo gestures You can 2-finger tap and 3-finger tap to undo/redo by default, but if we don't want that, we can disable that here. ### 8. Opacity slider The color picker can already pick the alpha channel values for our colors. This slider is only a quick way to adjust that without needing to open the color picker or only to change the opacity temporarily without changing the base color. Because of the fact that the opacity slider is not a crucial part of the UI, we can also disable it to make the UI cleaner. ### 9. Indices start at 0 Frames and tiles are numbered starting from 1. However, a few users prefer them starting at 0 instead. Well, turn this on and 0 is the new 1. ### 10. Export button on canvas In some cases, we need to export frequently. To reduce the number of taps we need to export, we can add an export button to the canvas with this option. ### 11. Languages Pixquare is localized in multiple languages, the default language is the language of your phone, and if not available, it will use English. If the default language is not what you want, you can change it to one of the other supported languages. ### 12. Stats

Pixquare automatically records a few stats while we draw, so we can check these stats anytime. ### 13. User guide Just a link to this guide :D ### 14. Export artwork Export the current artwork. For more info on exporting, see [this page](/pixquare-file/exporting). This button will be hidden when [#id-9.-export-button-on-canvas](#id-9.-export-button-on-canvas "mention") is enabled ### 15. Stateful bottom panels Enabling this option will make the timeline and palette panel keep their scrolling position after being collapsed, but will also make the app less performant. It's recommended to let the system determine when to enable/disable this option. # Canvas

### Pixel grid If this option is on, when zooming in above some certain threshold, the pixel bounds will be shown. #### Threshold Adjust the threshold to dictate when the pixel will show. The bigger the threshold, the more we have to zoom in before the grid will appear. ### Canvas grid Use this option to customize the checkerboard pattern on the canvas (colors, size), or turn it off completely. This config is saved with the file, so it will reset each time we create a new file, but it gives us the ability to customize the canvas grid for files individually ### Canvas border Just a border around the canvas. The border color can be customized. We can turn this off if we find it distracting. ### Tiled mode This is different from [Tilemap/tileset system](/misc/tilemap-tileset-system). When enabled, we can tile the entire canvas in any configuration we want. It's like making our canvas temporarily a tile. This can be useful when we want to create some beautiful pattern. ### Clip reference layers Reference layers by default can display outside of the working canvas. Turn this option on to clip any content of the reference layers outside of the canvas. ### Guide line The canvas grid is great, but it's rendered below the content. If we need a grid to help us with the compositing of the content, we can turn this option on. When turned on, we can tap on the edit button to change the settings for guide line. Similar to the [canvas grid](#id-2.-canvas-grid), this is saved with each file [Read more about guide line >](/settings/canvas/guide-line) #### Show in preview Enable this option if we want to show the guide line in the little preview of our canvas ### Canvas rotation With this option on, we can rotate the canvas with 2 finger twisting gesture. {% hint style="info" %} If we want the canvas rotation to snap to 0, 90, 180, or 270 degrees, turn on the "90-degree snapping" sub-option. {% endhint %} ### x00% zoom snapping Turn on this option to snap the zoom scale of the canvas to whole numbers (100%, 200%, 300%, and so on) ### Layer flash When a layer is selected, its content on the canvas will quickly flash to indicate the selected content. If this appears to be distracting, we can turn it off here. ### Quick pinch Turn this on if we want to have a way to quickly fit the canvas to the edge of the screen by quickly pinching on the canvas. ### Drawing preview size threshold On supported devices, when we hover the pencil over the screen, a live preview of pixels will be shown on the canvas to show us how it will look when applied. Some users find it annoying when the preview is shown even for small sizes; this setting was added so that we can dictate when the preview is shown: only when the size is equal to or bigger than the threshold. ### Cursor This is similar to a mouse cursor on desktops, but for pencil hover. When this option is enabled, a dot will appear underneath our pencil. This can be helpful when we use the iPad as a drawing pad for an external display. ### Canvas resize This is where we find the current size of the canvas. If we need to resize it, we can do that here too. [Read more >](/settings/canvas/canvas-resize) ### Canvas flip With the [move tool](/tools/move), we can flip the selected content. But what if we want to flip everything on the canvas horizontally or vertically? We do that layer by layer, frame by frame with the move tool, or we can use this option and everything will be flipped in a finger snap. ### Reset layout Pixquare allows us to customize its UI however we'd like, but sometimes we overdo it and just want everything to return to its original position and size. Use this button to do that. # Guide line

There are 3 types of guide line, each serves a different type of drawing. We can change the line color for all types * Grid: create a rectangle grid on the canvas * Isometric: create a isometric grid * Perspective: create up to 3 perspective points. We can adjust the position, line count, and color of each point. # Canvas resize

1. Origin coordinate - The coordinate of the top left corner of the new canvas respectively to the current one which has the origin at (0, 0) 2. New size 3. Quick position button - Use these to quickly align the current canvas with the new one 4. Drag nodes - We can also drag these nodes to adjust the size and origin of the new canvas besides entering the numbers at #1 and #2 5. Rescale content - Also resize the canvas content to the new size 6. Lock aspect ratio - Keep the width/height ratio while resizing the canvas {% hint style="info" %} Because canvas resizing is not undoable, we can turn off auto-save before resizing, if the result isn't what we want, we can simply exit the file to revert it back to the original size. {% endhint %} # Drawing

### Only draw with pencil If we have an Apple Pencil, it's recommended to turn this on to prevent any unwanted stray pixels coming from our fingers or palms. When this option is on, drawing tools won't accept finger touches. When this option is on, we can use finger touch to do other things. #### Quick layer selection Selecting a layer in the [timeline panel](/timeline-and-layers/overview) can sometimes be slow. Enable this option to select a layer by simply tapping on the content of a layer. #### Swipe navigation Another utility functionality for the finger touch is to swipe left, right, up, or down on the canvas to navigate among frames (left-right) and layers (up-down). #### One-finger canvas pan Usually, we need 2-finger drag to pan the canvas, but optionally, we can enable this to pan the canvas with just 1 finger. {% hint style="info" %} This option and [#swipe-to-navigate-frames](#swipe-to-navigate-frames "mention")cannot be enabled simultaneously as the gesture will conflict with each other {% endhint %} #### Quick shape While drawing, we can use your finger to tap 1 time on the canvas, that will triggers some special effects on the tools. * Brush/eraser: Toggle line mode * Straight line: Toggle perfect angle * Shape: Toggle perfect ratio ### Cursor mode When drawing with the finger, it's hard to see what's underneath our finger, so we have this mode to ease that pain a little bit. When activated, there are 2 new things on the canvas: a cursor and a mouse pad. * The cursor is our drawing position now instead of our fingertip. * The mouse pad is used to toggle drawing status. We have 2 options for this: tapping and holding. When drawing is off, dragging our finger will move the cursor; when it's on, along with moving the cursor, it will also apply drawing. ### Quick color picker There are multiple ways of triggering the eye dropper: [the eye dropper tool](/tools/eye-dropper) itself, the [quick picker button](/interface-and-gestures/gestures-and-quick-actions#quick-eye-dropper), and this option. When this option is on, long pressing on the canvas will trigger the eye dropper as well. This option does come with some customization. #### Finger Whether or not to enable this for finger long-press #### Pencil Whether or not to enable this for pencil long-press #### Activation time How long do we have to hold the touch to trigger the eye dropper? Adjust that here. #### Allowable travel Adjust this value to limit how far the finger tip or the pencil tip can travel and still count as a long-press instead of a stroke. ### Quick shape Similar to Only draw with pencil's [quick shape](#quick-shape), but this time, instead of tapping on the canvas, we keep our pencil/finger in place for a certain period of time to trigger. * Brush/eraser: Apply stabilization * Straight line: Poly-line * Shape: Toggle filled We can enable/disable individual tools for this one. ### Opacity slider This is simply for us to hide/show the bottom slider on the canvas, which controls the opacity. ### Select previous tool after eye dropper After picking a color, we usually want to start drawing with that new color instead of staying on the eye dropper tool. Enable this option to switch back to the most recent draw tool after triggering eye dropper. ### Paste at original coordinate Depending on our preferences, Pixquare will paste the clipboard content at the center of the current screen or the original coordinate of the copied/content. ### Slider quick tool Please see this in [quick actions](https://docs.pixquare.art/settings/pages/TzrOWOv0MgzP52xQy2xD#id-2.-quick-tools) ### Snap to guide lines and grid If this option is enabled, our drawing touches will be snapped to the corners of the guide lines or the canvas grid, if any of them are enabled. If both the guide lines and grid are enabled, guide lines will have higher priority. ### Three-finger slide Three-finger slide one the canvas to adjust the brush size and opacity. * Up/down to adjust size * Left/right to adjust opacity ### History #### Undo/redo buttons This is simply for us to hide/show the undo/redo buttons underneath the slider on the canvas and use the gesture only. #### Undo/redo gestures Similar to the above but now we will disable/enable undo/redo gestures (2 and 3 finger tap). We can also adjust the rapid undo/redo rate #### Optional items Here, we can customize whether some actions are counted in the undo/redo stack. #### Clear Clear the current undo/redo history. # Animation

### Frame navigation looping If this option is enabled, if we're on the first frame and we try to select the previous frame (either via the header button or swiping), it will select the last one. The same applies to the last frame. ### Manual navigation ignores tags Enable this option so that when we navigate the frame (top buttons on the timeline panel or [Drawing](/settings/drawing#swipe-navigation)), it will ignores the tags. ### Onion skin 1. Backward count - How many of the previous frames will be displayed 2. Forward count - How many of the next frames will display be displayed 3. Opacity - The opacity of the closest frame to the current frame 4. Opacity step - The amount of opacity will be deducted each frame away from the current frame 5. Per layer - Whether or not to only show onion skin for the selected layers 6. Looping - Whether or not to loop the last frame to the first frame or vice versa 7. Backward tint - Tint color that will be applied to previous frames 8. Forward tint - Tint color that will be applied to next frames {% hint style="info" %} If we don't want any tint, we can set those colors to white. {% endhint %} # Overview

This is the first screen we will see when opening the app. It will display the files that we have and also have a few other options that we can interact with. For creating, importing, and exporting .px files, please see [Pixquare file (.px)](/pixquare-file/overview) ### File operation Similar to a regular file system, Pixquare's gallery also lets us do a few basic actions to its files. [Read more >](/gallery/file-operations) ### Preview and sorting How we want to display the file and how we want to sort the files. [Read more >](/gallery/preview-and-sorting) ### Storage location Do you know that Pixquare can save our files directly to iCloud so that we can sync and access them from multiple devices? [Read more >](/gallery/storage-location) ### Manage files via the Files app iOS already has a very powerful file system app, Files, so let's use it instead of trying to reinvent the wheel. [Read more >](/gallery/manage-files-via-the-files-app) ### Misc [Read about some other minor things in Gallery >](/gallery/misc) # File operations To open the menu for a file, we can long-press on it or swipe to the right on that file. We can select multiple files with the same gesture. These are the actions you can perform on the selected files: 1. Rename 2. Copy 3. Duplicate 4. Cut 5. Delete 6. Export. [Read more >](/pixquare-file/exporting) 7. Share this .px file. For example, sending it via email or AirDrop. 8. Open the location of this item in the Files app 9. Info of the artwork {% hint style="info" %} After tapping copy or cut, a Paste button will appear at the bottom right corner of the window. Navigate to the new location and tap Paste to paste the file. {% endhint %} {% hint style="info" %} We can also long-press + drag on the files to quickly move them into a folder {% endhint %} # Preview and sorting ### File preview

The gallery supports 3 types of file previews: * Icon - Display a thumbnail of the file's content * Large icon - Like icon but the thumbnail is bigger * List - It doesn't show the thumbnail, files are displayed in a vertical list ### File sorting

We can sort the files in the gallery by the files' names, modification date, or file size. We can also select the order to be ascending or descending. # Storage location Pixquare supports 2 storage locations: local on the device and on iCloud Drive

The iCloud option is great when we plan to use Pixquare on multiple devices as it auto-syncs the files so that we can work on the same files on different devices. # Manage files via the Files app

### Managing misc files iOS provides us with a very powerful file management tool, the Files app, so we should utilize it to manage unimportant files of Pixquare like custom brushes, custom objects, timelapse data, etc. These files are always saved locally on the device and won't be synced with iCloud. ### Managing .px files {% hint style="danger" %} IT'S NO LONGER RECOMMENDED TO USE THE FILES APP TO MANAGE .PX FILES ANYMORE. PLEASE DO SO DIRECTLY IN PIXQUARE TO AVOID VARIOUS ERRORS. {% endhint %} All Pixquare files are available in the Files app. To access them: * Local storage: Files > On My iPad > Pixquare * iCloud: Files > iCloud Drive > Pixquare After done with the Files, refresh Pixquare (kill the app and reopen it) so that the app can re-fetch the files. {% hint style="info" %} Please do not change the folder name of any folder on the top level of Pixquare (e.g. "artworks", "themes", etc.). Otherwise, the app will not be able to recognize these files. {% endhint %} # Misc ### Create folders

Create folder to make it easier to manage files. ### Clear timelapse recording

Timelapse data are stored locally on the device which takes up storage. If we want to free up some space, we can clear the timelapse data. Note that we'll lose the recorded timelapse progress. ### Auto back-up system

We can turn on auto backup and configure this system so that it automatically saves backups of your files. * Time interval: how often the system should make a backup * Back-up count: how many back-up versions it should keep * Storage: where it should save the back-ups, either on-device or iCloud To restore a file to its previous state, swipe right/long-press on that file, then select the "i" button; there will be a "Restore" option in the pop-up. # Overview Files ending with ".px" extension are Pixquare's proprietary binary format. Pixquare can open and interact with these files. In this section, let's learn about how to create px files, what the limitations of this file format are, and how to convert it to other more popular formats. ### Create/import There are many ways we can create a .px file, either by creating a new file in Pixquare or importing from other formats. [Read more >](/pixquare-file/create-import) ### Limitations Learn about the max canvas size, max number of cels, and other limitations for .px. files. [Read more >](/pixquare-file/limitations) ### Exporting We can convert .px files to many other format so that we can share our work to social media and other platforms. [Read more >](/pixquare-file/exporting) # Create/import

### Create new empty files To create a new empty .px file, tap on the + button, then Artwork.

1. The file of the new file 2. The dimensions (canvas size) of the new file 3. Some presets for the new artwork (recent and saved) 4. [Color mode](/misc/color-modes) for the new file 5. The palette to be used for this new artwork ### Import files When we import a file from other formats, Pixquare will convert it to .px files and add the new file to the current location. We can select files from the Files or Photos app. The supported formats for importing are: * .px files * .aseprite / .ase files * .psd * Images (png, jpg, etc.) * GIF For .aseprite and .psd files, we'll have the option to import as .px or the original file format. When importing the files in their original format, some features like auto-save, time-lapse recording, and auto-backup will be disabled. {% hint style="info" %} We can also select "Clipboard" to import whatever image/content in the clipboard if available {% endhint %} ### Import sheet We can import sprite sheets and turn them into animated .px files. Similar to [importing files](#import-files), we can use the Files app or Photos app as sources, but only images are allowed to be imported. After selecting an image, this screen will show up:

We can use the parameters to adjust how we want to divide the sheet up. Once imported, we'll see each grid turned into a frame with the default duration of 100 ms. # Limitations There are a few limitations to .px files ### Canvas size Depending on the available memory (RAM) that our devices have, the canvas size will be limited as the following: * Less than 1.5 GB - 800 x 800 * 1.5 GB to 2.5 GB - 1200 x 1200 * 2.5 GB to 3.5 GB - 1500 x 1500 * 3.5 GB to 4.5 GB - 1800 x 1800 * 4.5 GB to 6.5 GB - 2000 x 2000 * 6.5 GB to 8.5 GB - 2500 x 2500 * More than 8.5 GB - 3000 x 3000 ### Number of cels The number of cels is the product of the number of layers multiplied by the number of frames. Similar to [canvas size limitation](#canvas-size), this will be determined by the available memory of our devices. The number is not a specific number like canvas size, but if you're curious, here is the equation: ``` canvas width * canvas size * 4 * number of layers * number of frames < 10% of RAM in bytes ``` After reaching this limit, we will see the add frame or add layer button being greyed out. # Exporting There are 2 entry points for us to export a .px files: * [In the General tab of settings](https://docs.pixquare.art/pixquare-file/pages/SbCxZiHXO09YWVX7IR14#id-8.-export-artwork) * [In file actions](/gallery/file-operations)

### File extension We can export to these formats: * PNG * BMP * JPEG * GIF * MOV * Sprite-sheet * ASEPRITE * PSD * Timelapse When selecting a particular format, it will give us a different set of parameters that we can adjust to fit our purpose. {% hint style="info" %} When PNG is selected for an [indexed](/misc/color-modes#indexed) file, we also have the option to export it as an indexed PNG. {% endhint %} #### Timelapse exporting When we draw in Pixquare, the app will automatically record the changes so that we can export the timelapse of the progress any time we want. The data for the timelapse video are stored in `timelapse_videos` folder. We can clear this in the [gallery settings](/gallery/misc#clear-timelapse-recording). ### File name The name of the exported file ### Layers Pixquare supports exporting with dynamic layer sets. We can select to export only visible layers, all layers, or only selected ones. We can also select layers individually if the previous two are not what we want. {% hint style="info" %} When exporting PNG, we can also select `Individual PNGs` to export each layer into a separate PNG file. {% endhint %} ### Frames Same as layers, we can also select precisely which frame to export. We can either select all frames or pick out the frames that we like. {% hint style="info" %} PNG is a static image, for that reason, when exporting to PNG, we can select only 1 frame. If we select more than 1 frame, each frame will be a PNG file. {% endhint %} ### Size multiplier Pixel art canvas sizes are usually much smaller than other art styles, that's why if we export images with the same canvas sizes, the results will be blurry and not suitable for sharing on social media. This is where the size multiplier becomes a lifesaver. Use this option to scale up our work. For example, if we work on a canvas size of 32x32, this is tiny. If we want to share this on Twitter, we probably want the images to be close to or above 1000 x 1000. For this reason, we should put in 40 for the multiplier. With that, the result will be 1280 x 1280, and that's perfect for a Facebook or Twitter post. ### Animation direction For animated formats (GIF and MOV), we also have the option to choose the direction of the animation for the [selected frames](#frames). We can choose forward, backward, or ping-pong (forward then backward) ### Sheet layout For the sprite-sheet export type, we can select 1 of the 3 options for the layout: * Rows - frames are aligned in a row, side-by-side * Columns - frames are aligned on top of each other in a column * Packed - frames are placed inside a "n x n" grid. The size "n x n" will be determined based on the number of frames we have * Custom - we can set how many columns the sheet should have, then the number of rows will be determined based on that. ### JSON type For the sprite-sheet export type, we can select the associated JSON file layout. Select "None" if we don't want the JSON to be generated. For more info on which type is appropriate for a specific game engine, we should read the documentation of that engine. ### Paddings For the sprite-sheet export type, we can add padding to the output: * Border padding: add padding to the sheet border * Inner padding: add padding in between the frames * Individual frame padding: add padding surrounding each frame ### Speed multiplier For the time-lapse format, we can select how fast final video will be. Pixquare FPS for time-lapse videos is 24 and this will stay constant, so depending on the multiplier, Pixquare will repeat or skip frames. ### Additional options #### Only selected area When we export a file in the settings panel, if there is a selection on the canvas, we can check this box so that it will export only the selected content instead of the entire canvas. #### Triming Check this box to automatically trim the transparent pixels from all edges. #### Pixquare footer

If this option is checked, the exported images will have a footer to show some info about the artwork as well as the "Made with Pixquare" mark. ### Share screen

After exporting, we'll be redirected to the Share screen, here we can decide what to do with the exported file, whether to save it to Photos, send an email, or post to Twitter, whatever we want. # Binary specs In this section, we'll learn about the binary specs of .px files so that anyone can decode the file for various purposes. {% hint style="info" %} Disclaimer: There are a lot of backward compatibility details in the files, but for the sake of simplicity, they will be ignored and only the latest specs are available here. {% endhint %} ## How to decode ### Models without header These are pretty simple, their sizes are pre-determined, so just consume data and decode the values one by one to fill the properties of the models ### Models with header All headers contain a field to specify the length of the model. Use that field to determine where the model ends. We'll see that there are properties within the models that have default values. If we reach the end of the data for the model, but there are still fields that need values, simply use the default value in this case. ## Data types These are some simple data types. .px files use little-endian byte order. ### Primitive types These are notated similarly to Swift data types * `UInt` - A n-bit unsigned integer * `UInt8` is an 8-bit unsigned integer * `Int` - A n-bit signed integer * `Int16` is a 16-bit signed integer * `Float` - A n-bit float * `Float32` is a 32-bit float * `Bool` - A boolean value, 1 byte * `OptionSet` - A set of `true` (1) - `false` (0) flags using each bit of the `UInt` type * `OptionSet` has 8 flags. So`0b10010001` has `1 << 0`, `1 << 4`, and `1 << 7` flag set * `DumbString` - UTF8 data of a string * `String` - A string * The first 2 bytes are a `UInt16` to specify the length of the String * The remaining is the UTF8 data of the string * Don't ask me why there is a `DumpString` in the first place * `[Type]` - An array of Type * The first 8 bytes are a UInt64 to specify the length of the Array * The rest are the elements * `Type[n]` - n consecutive value of `Type` * `UInt8[3]` - 3 consecutive UInt8 ### Composite types #### Coordinate ``` Int32 x-value Int32 y-value ``` #### Size ``` UInt32 Width UInt32 Height ``` #### Rect ``` Coordinate Origin Size Size ``` #### ARGBColor RGB channels are alpha pre-multiplied ``` UInt8 R-value UInt8 G-value UInt8 B-value UInt8 A-value ``` #### BlendMode ``` UInt16 0 - Normal 1 - Multiply 2 - Screen 3 - Overlay 4 - Darken 5 - Lighten 6 - Color dodge 7 - Color burn 8 - Hard light 9 - Soft light 10 - Difference 11 - Exclusion 12 - Hue 13 - Saturation 14 - Color 15 - Luminosity ``` #### Corners ``` OptionSet 1 << 0 - Top left 1 << 1 - Top 1 << 2 - Top right 1 << 3 - Right 1 << 4 - Bottom right 1 << 5 - Bottom 1 << 6 - Bottom left 1 << 7 - Left ``` ## Models Most models in this section have a header. Pixquare uses ID for everything. {% hint style="info" %} All sizes specified in the headers are in bytes and the size doesn't include the header {% endhint %} ### CustomData Store some custom data set by the users #### Header (16 bytes) ``` UInt64 Total size of this model UInt8 Data type 0 - String ``` #### Content ``` Depending on the data type value in the header, the content will be different String - 0: String The string data ``` ### FrameContent The color data of a cel. #### Header (32 bytes) ``` UInt64 Size of this model UInt8 ID length UInt32 Uncompressed color data length Width x height x pixel length (4 for RGBA and 1 for indexed) UInt32 Color data length OptionSet Backward compatibility. Always 0b00000001 ``` #### Content ``` DumbString ID, the length is specified in the header [Byte] Compressed color data using zlib compression. After decompressing, it will be in the form of [ARGBColor] ``` ### TilemapFrameContent The alignment of a tilemap cel. #### Header (32 bytes) ``` UInt64 Size of this model ``` #### Content ``` String ID Size Tile size [UInt16] Alignment of tile on the canvas. NOTE: for this array, the UInt64 at the beginning is for size in bytes, not element count. UInt16.max is for unassigned tiles ``` ### Frame A frame of the artwork. #### Header (32 bytes) ``` UInt32 Size of this model UInt8 ID length UInt8 Content ID length ``` #### Content ``` DumbString ID, the length is specified in the header Frames with the same index have the same ID UInt32 Duration Frames with the same index have the same duration Bool Selected DumbString Content ID, the length is specified in the header This is the ID of the `FrameContent` for `Layer` and `TilemapFrameContent` for `TilemapLayer` Float16 Opacity Value from 0 to 1 is the actual value 2 means using the opacity of the Layer Default: 2 Int16 Z-index Default: 0 [CustomData] Custom datas set by the users ``` ### SymmetryLline #### Header (16 bytes) ``` UInt32 Size of this model UInt8 ID length UInt8 Backward compatibility. Always 0b00000011 ``` #### Content ``` DumbString ID, the length is specified in the header ARGBColor Color Bool Selected Bool Enabled Float32 x-value of the origin Float32 y-value of the origin Float32 Rotation angle in radians UInt8 Segment count UInt8 Symmetry type 0 - Mirror 1 - Rotate ``` ### Tag #### Header (16 bytes) ``` UInt32 Size of this model UInt8 ID length UInt8 Name length ``` #### Content ``` DumbString ID, the length is specified in the header DumbString Name, the length is specified in the header UInt16 Start frame index UInt16 End frame index Bool Selected ARGBColor Color UInt8 Direction 0 - Forward 1 - Backward 2 - Ping-pong UInt16 Loop count ``` ### Tileset #### Header (32 bytes) ``` UInt32 Size of this model ``` #### Content ``` String ID String Name Size Tile size [[Byte]] Compressed color data of each tile using zlib compression After decompressing, it will be in the form of [ARGBColor] UInt16 Tiles per row Default: 6 ARGBColor Grid color Default: Black ``` ### Fx #### Header (16 bytes) ``` UInt64 Total size of this model UInt8 Fx type 0 - Color overlay 1 - Outline 2 - Anti-aliasing 3 - Pattern overlay ``` #### Content ``` Depending on the fx type value in the header, the content will be different Color overlay - 0: Bool Enabled ARGBColor Color BlendMode Blend mode Outline - 1: Bool Enabled Corners Corners ARGBColor Color [ARGBColor] Ignored colors Bool Outside/inside true - outside false - inside Bool Is water color on Anti-aliasing - 3: Bool Enabled [Corners] Set of corners Float32 Intensity Pattern overlary - 4: Bool Enabled [UInt8] Uncompressed color data of the pattern. The data is in the form of [ARGBColor] Size Pattern size Float32 Opacity BlendMode Blend mode ``` ### Entry Represents an entry in the artwork (layer, group, etc.), but doesn't have any actual data of the entry. #### Header (16 bytes) ``` UInt32 Total size of this model UInt8 Entry type 0 - Regular layer 1 - Group 2 - Reference layer 3 - Tilemap layer ``` #### Content ``` UInt8 ID length DumbString ID This ID is the same as the ID of `Layer`, `ReferenceLayer`, `Group`, and `TilemapLayer` ``` ### Layer A layer with all data. #### Header (32 bytes) ``` UInt32 Size of this model UInt8 ID length UInt8 Name length OptionSet Backward compatibility, always 0b00001111 ``` #### Content ``` DumbString ID, the length is specified in the header This is the same ID as the one in `Entry` DumbString Name, the length is specified in the header [Frame] Frames of this layer Float16 Opacity Bool Visible Bool Locked Bool Selected Bool Alpha-locked BlendMode Blend mode Default: Normal Bool Linked Default: false [Entry] Cropping masks, sorted in the actual order A higher index means being above Default: [] [Entry] Clipping masks, sorted in the actual order A higher index means being above Default: [] ARGBColor Color Default: (0, 0, 0, 0) [Fx] Fxs Default: [] ``` ### Group A group with all data. #### Header (32 bytes) ``` UInt32 Size of this model UInt8 ID length UInt8 Name length OptionSet Backward compatibility, always 0b00001111 ``` #### Content ``` DumbString ID, the length is specified in the header This is the same ID as the one in `Entry` DumbString Name, the length is specified in the header [Entry] Child entries, sorted in the actual order A higher index means being above Float16 Opacity Bool Visible Bool Content locked Bool Selected Bool Alpha locked Bool Expanded Default: true [Entry] Cropping masks, sorted in the actual order A higher index means being above Default: [] [Entry] Clipping masks, sorted in the actual order A higher index means being above Default: [] ARGBColor Color Default: (0, 0, 0, 0) ``` ### ReferenceLayer A reference layer with all data #### Header (32 bytes) ``` UInt32 Size of this model UInt64 Data Length UInt8 ID length UInt8 Name length ``` #### Content ``` DumbString ID, the length is specified in the header This is the same ID as the one in `Entry` [Byte] PNG data of the reference image Length is specified in the header DumbString Name, the length is specified in the header Float16 Opacity Bool Visible Bool Selected Rect Bounds Float32 Rotation angle in radians Default: 0 ARGBColor Color Default: (0, 0, 0, 0) OptionSet Flip axes 1 << 0 - Set if flipped horizontally 1 << 1 - Set if flipped vertically Default: 0 ``` ### TilemapLayer A tilemap layer with all data #### Header (32 bytes) ``` UInt32 Size of this model ``` #### Content

String        ID, this is the same ID as the one in `Entry`
String        Tileset ID
String        Name
[Frame]       Frames of this tilemap layer
Float16       Opacity
Bool          Visible
Bool          Locked
Bool          Selected
Bool          Alpha-locked
BlendMode     Blend mode
              Default: Normal
Bool          Linked
              Default: false
ARGBColor     Color
              Default: (0, 0, 0, 0)

### Stats Contains data like time spent on this file, stroke count, etc. #### Header (16 bytes) ``` UInt16 Total size of this model ``` #### Content ``` UInt32 Time spent in seconds UInt32 Stroke count UInt32 Number of undos Default: 0 UInt32 Number of redos Default: 0 ``` ### CanvasGrid ``` Size Grid size ARGBColor First color ARGBColor Second color ``` ### GuideLine #### Header (14 bytes) ``` UInt32 Backward compatibility, always 0 UInt16 Total size of this model UInt8 Guide line type 0 - Grid 1 - Isometric 2 - Perspective ``` #### Content ```markup Depending on the value of guide line type in the header, the content will be different. Grid - 0 and Isometric - 1: Size Size ARGBColor Color Bool Visible Bool Show in preview Perspective - 2: [Float32] An array of x-values of perspective point coordinates [Float32] An array of y-values of perspective point coordinates [UInt32] An array of line counts for each point [ARGBColor] Colors of each point Bool Visible Bool Show in preview ``` ### Post-processor #### Header (16 bytes) ``` UInt16 Total size of this model UInt8 Processor 0 - CRT 1 - Vignette 2 - Bloom 3 - Round pixel ``` #### Content ``` Depending on the processor value in the header, the content will be different CRT - 0: String ID Bool Pixel-independent Float64 Scan line intensity (0-1) Float64 Glow intensity (0-1) Bool Enabled Vignette - 1: String ID Bool Pixel-independent ARGBColor Color Float64 Intensity (0-1) Bool Enabled Bloom - 2: String ID Bool Pixel-independent Float64 Threshold (0-1) Float64 Intensity (0-1) Float64 Radius (0-1) Bool Enabled Round pixel - 3: String ID Bool Contiguous ARGBColor Background color Float64 Intensity (0-1) Bool Enabled ``` ### Modifiers #### Header (16 bytes) ``` UInt64 Total size of this model UInt8 Modifier 0 - Animation speed multiplier ``` #### Content ``` Depending on the modifier value in the header, the content will be different Animation speed multiplier - 0: String ID Bool Enabled Float32 The multiplier (2 means twice as fast, 0.5 means 2 times slower) ``` ### PaletteOrganization #### Header (16 bytes) ``` UInt16 Total size of this model UInt8 Organization type 0 - Packed 1 - Anywhere ``` #### Content ``` Depending on the organization type in the header, the content will have different data Packed - 0: Empty content Anywhere - 1: Size The width and height of the board [Bool] The arrangement that fits into the size above. true - empty space false - color space ``` ### Artwork This is the data of .px files. #### Header (64 bytes) ``` UInt64 Total size of the file UInt8 Length of `id` UInt16 Backward compatibility. Always 2 The rest of this header is unused ``` #### Content ``` DumbString ID, the length is specified in the header Size Canvas size [Entry] Entries at the root level of the artwork Sorted in the actual order A higher index means being above. [Group] Groups [Layer] Layers [FrameContent] Frame contents [ARGBColor] Palette [ReferenceLayer] Reference layers Default: [] [[Byte]] PNG data for reference images Default: [] [SymmetryLine] Symmetry lines Default: [] [Tag] Tags Default: [] [Tileset] Tilesets Default: [] [TilemapLayer] Tilemap layers Default: [] [TilemapFrameContent] Tilemap frame contents Default: [] UInt8 Color depth 0 - RGB 1 - Indexed Default: RGB Stats Some stats of this file Default: Empty stat, everything is 0 UInt8 Ignore this byte CanvasGrid Canvas grid config Default: 16 x 16, 2 gray colors GuideLine Guide line config Default: 16 x 16 Grid with blue color [Post-processor] Post-processors Default: [] PaletteOrganization The palette organization Default: Packed Bool Should record timelapse Corners Tiled corners Default: 0 [Modifier] The modifier Default: [] ``` # Timelapse specs (.pxtl file) If you're not familiar with the basic models or how .px\* file encoding works, please revisit [Binary specs](/pixquare-file/binary-specs). ### TimelapseFrame ``` UInt32 Signature, always 0xffffffff, if it's not, this is a legacy frame. We do not discuss legacy frame here, I guess we'll just ignore this timelapse file. Size The canvas (or frame in this context) size UInt32 Color data size in bytes [Byte] Compressed color data using zlib compression. The size of this data chunk is the previous value. After decompressing, it will be in the form of [ARGBColor] ``` The .pxtl is just a series of `TimelapseFrame` ones after another. We simply decode them until we reach the end of the file. # Custom object (.pxpc files) If you're not familiar with the basic models or how .px\* file encoding works, please revisit [Binary specs](/pixquare-file/binary-specs). ### Custom object Contains the data for custom objects #### Header (16 bytes) ``` UInt32 Total size of this model UInt16 Backward compatibility, ignore this ``` #### Content ``` UInt8 Color depth 0 - RGBA 1 - Indexed Size Content size [UInt8] Depending on the color depth, this will contain different data. RGBA - in the form of [ARGBColor] Indexed - [Index] NOTE: There is no length prefix to this array. The size is known using the Content size and Color depth field, so no need for it [ARGBColor] The palette ``` # Integration With the published [Binary specs](/pixquare-file/binary-specs) of .px file, we can decode and integrate Pixquare's files into many workflows. This page lists all the supported integrations developed by the Pixquare user community. ### Godot Importer ### Unity Importer # Overview Pixquare default UI is a retro, pixelated theme to make it more resonated with the art it creates. However, many users would prefer a modern look to the tool, or maybe they just do not like its grayscale color scheme. Don't worry, we are not stuck with that default UI because Pixquare UI is fully customizable, so we can make it into something that looks and feels completely different. ### How to use [Learn how to use custom themes >](/themes/how-to-use) ### How to contribute We can also contribute to the theme collection so that other users can have more choices when it comes to putting on some different cloths for Pixquare. [Read more >](/themes/how-to-contribute) ### Available themes Here are some available themes at the time of writing:

# How to use

To get to the theme settings, we have 2 entries: * On [Gallery](/gallery/overview) > Gear icon > Theme customization * On canvas > Gear icon > Theme ### Types of theme #### Pre-built These themes are already packaged and ready to be used out of the box. All we need to do is to download them. #### Custom Our own theme, we build it. If we'd like, we can also package and ship it so other users can so it too. ### Download In this tab, we can download the available pre-built themes to use. Tap the dropdown to see what themes are available, and tap 1 of them to download. After downloading, it will be listed in "Available themes". Selecting a theme here will apply all assets of that theme. See below to learn about the assets. ### Colors Expand the dropdown to select a theme to apply the color scheme. We can also adjust the colors using the panel below the dropdown. Once edited, the Presets will switch to Custom. ### Images Similar to [colors](#colors), we can select the images from any theme to use, or select Custom to use our own images. Images that are not provided by the theme will use the equivalent from the Default theme. To use our own images, go to the Files app > On my iPad/iPhone > Pixquare > themes > Custom > images, if the folder is not there, create them manually. After that, we can add our images to this folder. For a list of required images, we can check [this doc here](https://github.com/pixquare/themes/blob/main/theme_structure.md). ### Font Same at [images](#images), only the folder path for custom font is now Files app > On my iPad/iPhone > Pixquare > themes > Custom > font. Place your .ttf file in there. # How to contribute This is quite easy. If we follow the guide to use our Custom theme and create one. We can package them using [this structure](https://github.com/pixquare/themes/blob/main/theme_structure.md). After that, either submit a PR if we know how to use Git. If not, we can send an email to , or join [Pixquare Discord server](https://discord.gg/5stJz4cDGM) and call out Son Nguyen, he'll take care of the rest :D. # Overview Here we can find info about some other things that don't fit into any section above, but keep in mind that they're not less important, it's quite the opposite, some stuff in here is at the core of Pixquare. ### Color modes It's important to pick the correct color mode when we start a new artwork as it will determine how we work for the rest of the process. [Read more >](/misc/color-modes) ### Tilemap/tileset system We learned about the [tilemap layer](/timeline-and-layers/layer-types#tilemap-layer) earlier, but how to use it with the tileset system is another thing. So let's learn about that here. [Read more >](/misc/tilemap-tileset-system) ### Clipboard (copy/paste) Learn about how to copy and paste content in Pixquare. [Read more >](/misc/clipboard-copy-paste) # Color modes

When creating a new artwork, we'll have the option to choose which color mode to use like. ### RGBA In this mode, colors on the canvas are saved as RGBA data. With this, each pixel is independent of each other and the palette. The color palette in this mode is only a quick way of selecting a color, no more no less. In this mode, we have more freedom in what we can put on the canvas. However, because all pixels are independent, we do not have as much control over them. When we want to change something, we must do that on the pixel level. ### Indexed In this mode, the canvas doesn't contain RGBA colors, instead, it contains indexes that will be mapped to the color with the same index in the palette. For example, if the first color of the palette is red, every pixel on the canvas that has the index 1 will be red, and when we draw, we don't paint FF0000 to the canvas, we paint number 1 on the pixels. Because of this, we cannot just draw any color onto the canvas, but only those that are in the palette. This limits our freedom, however, it gives us control of the pixels. Now if we want to replace colors, we simply need to replace the palette and the entire canvas will be updated as well. The palette in Pixquare has a max color count of 254, so this is also another limitation of the indexed mode. {% hint style="info" %} Blend mode and layer opacity still work in indexed more, so theoretically, we have more than just 254 colors {% endhint %} # Tilemap/tileset system Before we can do anything with the tileset, we need to create a tilemap layer first. See how we do that [here](/timeline-and-layers/layer-operations/tilemap-layers-operations#new-tilemap-layer). {% hint style="info" %} Note that we can only operate with the tileset/tilemap system when the tilemap layer is selected. {% endhint %} ### Know the tileset window

1. Tools (on the left side) - similar to regular drawing tools, but for tiles 1. Move 2. Brush 3. Eraser 4. Tile bucket 5. Eyedropper 2. Actions (Top bar) 1. Panel resize 2. New empty tile 3. Duplicate tile 4. Remove tiles 3. Option panel 1. Top bar 1. Tileset name 2. Edit name 3. Merge tileset 4. Export tileset 2. Reorder mode 1. Move - move the dragged tiles to the new position, shifting all tiles in between 2. Swap - Swap the position of the source and target tiles, and the in-between tiles remain in the same positions 3. Multi-tile placement: If multiple tiles are selected, this determines how the brush and bucket will place them onto the tilemap. 1. Random 2. In-order 4. Arrangement 1. Packed - Tiles are tightly placed from left to right, top to bottom 2. Anywhere - We can insert gaps between tiles to better align with the custom arrangements 5. Tiles per row 6. Auto new tiles - If this options is on, new tiles will be added automatically to the tileset and the tilemap as we draw onto unassigned tiles on the tilemap 7. Canvas grid customization 8. Remove duplicates - Remove any duplicate tiles and only keep one; the placements on the tilemaps will update to the only remaining tile as well. 9. Remove empties - Remove all empty tiles; the placements on the tilemaps will be removed too. ### Assign tile to the tilemap #### Manual placement To assign tiles to the grid on the canvas, we need to first select the tile(s). Tap on a tile to select it. To select multiple tiles, tap on the box next to the More (...) button, then tap on each tile to toggle its selection. The selected tiles will have a border around them. Now select a tile tool (brush or tile bucket) and then draw the tiles onto the canvas. When multiple tiles are selected, we can choose to a placement strategy: random or in-order. We can also move the assignment around with the move tool. If there is an active selection, it will move all tiles selected by that selection, if there isn't one, it will only move 1 tile at a time. Removing an assignment is the same as assigning tiles, but we need to select the eraser button instead of the brush/tile bucket. {% hint style="info" %} We can use the tile eyedropper to select a tile on the canvas, similar to how we pick a color using color eyedropper. {% endhint %} #### Auto new tiles When auto new tiles option is enabled, we can just draw on the canvas and new tiles will be added automatically ### Reorder tiles To reorder tiles within the tileset, we need to long-press on a tile **and** then drag it to the new position. If the dragged tile is one of the selected tiles, it will move all selected tiles together. The assignment on the tilemap grid will be updated automatically to match the new order. ### Import/Export There are 2 supported file types for tilesets: * `pxts`: Pixquare's own tileset file format, for effortless transfer within Pixquare * `png`: For better compatibility with other software and game engines We can also convert regular layers into tilemap layers. To do that active the contextual menu, then tap "New tilemap layer". #### Tileset exporting

To access this menu, select the "..." button of the tileset panel, then "Export" These tinkerings are only needed for `png` format. We can select "Individual PNGs" to export the tiles into individual pngs instead of in one sheet. #### Tileset importing

We can import tilesets when we create new tilemap layers. And again, `pxts` file will just work, while png importing will require tinkering like the above image. #### Tileset merge Tap on the merge icon to start the process. We can only merge tilesets with the same tile size. When merging, the receiving tileset will have the tiles of the merged tileset while the merged tileset remains unchanged. ### What else? That's it, we can now start drawing and see the magic of the tileset system. {% hint style="info" %} We can animate tilemap layers just like regular layers. {% endhint %} {% hint style="info" %} If we hold the tileset button, it will temporarily toggle the canvas grid on/off {% endhint %} # Clipboard (copy/paste) Copy, cut, and paste options are all in the [contextual menu](https://docs.pixquare.art/misc/pages/GEh0IaKc8PQMO1ETEVBS#id-10.-contextual-menu). {% embed url="" %} Clipboard are shared across artworks, so we can copy from 1 artwork an paste into another one. ### Copy/cut The copy and cut options will be available when there is an active selection (using the selection tool or move tool to select all content) or when the layer contextual menu is shown. After tapping copy or cut, the content will be saved in the clipboard, ready to be pasted. ### Paste After copying/cutting, the option to paste will show up, tap it to paste. {% hint style="info" %} We can set where to paste the content in settings. [Read more >](/settings/drawing#paste-at-original-coordinate) {% endhint %} ### Clearing clipboard Once the content is saved to the clipboard, it will remain there to allow us to paste it multiple times. However, if we want to clear it, we can tap on the Clear option to remove the saved content. If we copy/cut again, the new content will replace the current one. # Deep link Pixquare supports this deep link for new file template. If you need deep link for something else, please feel free to contact me. * pixquare://app.pixquare.art/new-file?name=**\**\&colorDepth=**<0 or 1>**\&width=**\**\&height=**\**\&lospecSlug=**\** * All params are optional * colorDepth: 0 is RGBA, 1 is indexed