Update docs for v1.0 (#81)

* Change the favicon to the new icon

* Update some info in the timeline

* Move z-index to the cel page

* Document blend modes and clipping masks

* Mention the palette file extension change

* Document layer effects and add Palettize and Pixelize in the list of image effects

* Create cli.md

Should add more info, such as use cases examples, how to use on each OS and an example of a .bat/.sh script that automates exporting.

* Update project.md

* Clarify the description of palettize effect

* Fix typo in cli.md

docs/concepts/cel.md

@@ -11,4 +11,7 @@ In Pixelorama, the term "Cel" (from [celluloid](http://en.wikipedia.org/wiki/Cel
 Cels can be found in the timeline. They are the square buttons you can click to edit. You can select/deselect multiple by holding the <kbd>Control</kbd> key and left-clicking individual cels, or hold the <kbd>Shift</kbd> key and left-click a cel to also select all of the cels between the one that was clicked and the one that has been selected last.
 
 ## Linked cels
-You can also right-click cels to link them together. Linked cels share the same image data, meaning that if you make changes to one linked cel, the changes are shared with all other linked cels. Keep in mind that, as of right now, linked cels are layer-local. You cannot have cels linked that belong to different layers, only different frames. Linked cels are marked with a green outline.
+You can also right-click cels, that belong to a pixel layer, to link them together. Linked cels share the same image data, meaning that if you make changes to one linked cel, the changes are shared with all other linked cels. Keep in mind that, as of right now, linked cels are layer-local. You cannot have cels linked that belong to different layers, only different frames. Linked cels are marked with a colored rectangle behind their preview.
+
+## Z-Index
+Z-index can be edited through the cel properties, and it is used to change the ordering of individual cels independently of the layer they are in, making them appear behind, or in front of other cels in different layers. The default value of 0 means that the cel's ordering is the same as its layer's. Positive values move it to the front, and negative values move it to the back.

docs/concepts/layer.md

@@ -13,7 +13,45 @@ Right now, there are three types of layers. Pixel layers, group layers, and 3D l
 Pixel layers are the default and most straight forward type of layer. Their cels contain regular raster image data, in which you can normally draw and manipulate pixels. Pixel cels are the only types of cels that can be linked right now.
 
 ### Group layers
-Group layers are used solely for organization and their cels are empty and do not hold any actual data. They can be used to group common layers together, and they can expanded and collapsed from view in the timeline.
+Group layers are used solely for organization and their cels are empty and do not hold any actual data. They can be used to group common layers together, and they can expanded and collapsed from view in the timeline. Right now, they do not affect blending or masking.
 
 ### 3D layers
-The cels of 3D layers contain 3D mesh, lighting, camera and environment data, that are being rasterized based on the size of the canvas. They can contain lights, such as directional lights, spot lights and point lights, and a variety of primitive meshes, including boxes, capsules, spheres, cylinders, prisms, planes and even text. Importing custom .obj models is also possible.
+The cels of 3D layers contain 3D mesh, lighting, camera and environment data, that are being rasterized based on the size of the canvas. They can contain lights, such as directional lights, spot lights and point lights, and a variety of primitive meshes, including boxes, capsules, spheres, cylinders, prisms, toruses, planes and even text. Importing custom .obj models is also possible.
+
+## Blend modes
+The blend mode of each layer determines how its colors blend with the colors of the layer directly below it. Pixelorama supports the following blend modes:
+
+| Name      | Category | Description |
+| ----------- | ----------- | ----------- |
+| Normal | Normal | The blend layer colors are simply placed on top of the base colors. |
+| Darken | Darken | Keeps the darker colors between the blend and the base layers. |
+| Multiply | Darken | Multiplies the numerical values of the two colors, giving a darker result. |
+| Color burn | Darken | Darkens by increasing the contrast between the blend and base colors. |
+| Linear burn | Darken | Darkens the base colors based on the value of the blend colors. |
+| Lighten | Lighten | Keeps the lighter colors between the blend and the base layers. |
+| Screen | Lighten | Lightens the colors by multiplying the inverse of the blend and base colors. |
+| Color dodge | Lighten | Lightens by decreasing the contrast between the blend and base colors. |
+| Add | Lighten | Lightens by adding the numerical values of the two colors. Also known as linear dodge. |
+| Overlay | Contrast | Like Screen mode in bright base colors and Multiply mode in darker base colors. |
+| Soft light | Contrast | Similar to Overlay, but more subtle. |
+| Hard light | Contrast | Like Screen mode in bright blending colors and Multiply mode in darker colors. |
+| Difference | Inversion | Subtracts the blend color from the base or vice versa, depending on the brightness. |
+| Exclusion | Inversion | Similar to Difference mode, but with less contrast between the colors. |
+| Subtract | Inversion | Darkens by subtracting the numerical values of the blend colors from the base. |
+| Divide | Inversion | Divides the numerical values of the base colors by the blend. |
+| Hue | Component | Uses the blend hue while preserving the base saturation and luminosity. |
+| Saturation | Component | Uses the blend saturation while preserving the base hue and luminosity. |
+| Color | Component | Uses the blend hue and saturation while preserving the base luminosity. |
+| Luminosity | Component | Uses the blend luminosity while preserving the base hue and saturation. |
+
+## Layer effects
+Layer effects are image effects that are being applied to the layer in a non-destructive way. This means that they do not directly modify the image data, which allows artists to disable and enable them at will, without having to worry that their work will be modified in a permanent way. They are only being applied on [export](../user_manual/save_and_export), and they can be previewed in the canvas, if "Display Layer Effects" is enabled, under the View menu. Each layer can contain multiple layer effects.
+
+To add a layer effect, you can click on the "FX" button in the layer area of the timeline. A window will appear, that lets you add, remove and change the order of layer effects. You can also change the properties of each effect. For a list of all available layer effects, see [image effects](../user_manual/image_effects#list-of-image-effects).
+
+:::info Layer vs image effects
+The difference between layer effects and image effects, is that layer effects can only be **applied per-layer** and are **non-destructive**, while image effects can be applied to **multiple cels** at the same time, and are **destructive**. Also, as of right now, layer effects cannot be animated.
+:::
+
+## Clipping mask
+Clipping masks can be used to draw the content of the layer only on top of the non-transparent pixels of the layer directly below. In other words, the layer below the clipping mask is what controls the visibility of the content of the clipping mask. You can make a layer be a clipping mask by right-clicking the layer button in the timeline, and toggling "Clipping mask".

docs/concepts/project.md

@@ -4,14 +4,13 @@ title: Project
 sidebar_label: Project
 ---
 
-In Pixelorama, the term "Project" refers to the entire sprite, which contains all of the frames it might have. Each project can be saved as a `.pxo` file. Multiple projects can be opened in Pixelorama at the same time, with each one having its own tab.
+In Pixelorama, the term "Project" refers to the entire sprite, which contains all of the frames and layers it might have. Each project can be saved as a `.pxo` file. Multiple projects can be opened in Pixelorama at the same time, with each one having its own tab.
 
-A Project contains the following properties:
-- A set of frames for animations, along with their duration, animation tags and FPS, as well as multiple layers. Frames and layers intersect and create [cels](cel), which are the editable images themselves of the project.
-- A [size](../user_manual/transforming/#scale) - width and height - in pixels.
-- A name.
+A project contains the following properties:
+- The image data of each individual [cel](cel).
+- The properties of the project itself, such as its name, size and FPS (frames per second).
+- All of the properties of frames, [layers](layer), cels, animation tags, [guides](../user_manual/user_interface/canvas/#rulers-and-guides).
 - [Brushes](brush) that are local to that specific project.
-- [Guides](../user_manual/user_interface/canvas/#rulers-and-guides) - lines that help you draw.
 
 ## Saving a project
 See [this page](../user_manual/save_and_export/#saving) to learn how to save a project.
@@ -20,11 +19,11 @@ See [this page](../user_manual/save_and_export/#saving) to learn how to save a p
 Pxo files are Pixelorama's custom file format that saves the entire content of the project. It cannot be opened in other image editors.
 
 ### File structure
-The file essentially consists of two lines. The first line is all of the project's metadata, such as project name, size, number of layers, number of frames, tags, [project brushes](brush/#project-brushes), fps etc. They are stored in JSON form, so they can easily be read by other software.
+The file format is essentially a .zip file in disguise. It contains a `data.json` file, and an `image_data` folder. The `data.json` file contains all of the project's metadata, such as project name, size, FPS, and the metadata of layers, frames, cels, etc. They are stored in JSON form, so they can easily be read by other software.
 
-The second line contains all of the image data as buffers. First, all of the image data for every [cel](cel) is being stored. It starts from the very first cel, which is equivalent to the bottom-most layer and the first frame, then it continues for every layer from bottom to top and once it reaches the final layer, moves on to the next frame, where it again starts from the bottommost layer and continues saving up to the top. After all of the cel image data has been saved, the image data of the project brushes are saved if the project has any.
+The `image_data` folder contains all of the image data. It contains another folder called `frames`, which in turn contains a folder for each `frame` of the project, and each frame folder contains the image data of every [cel](cel) that belongs to that frame. To preserve a non-destructive workflow, the cel image data are not affected by layer blend modes and layer effects. If the project has [brushes](brush), a `brushes` folder is also created, containing all of the brush image data. If you have enabled the option to include the blended images, the `image_data` folder will also contain all of the final image data for each frame. A final image is composed of every cel, with the layer effects applied to each cel, blended together into a single image, taking the blend modes of each layer into account.
 
-So, in order for a software to read the data of a pxo, it first reads the first line as a JSON object, and then it loops through the buffers, which all have the same size as the project size, until it reads all the frames and layers. After that, if there are more buffers, they correspond to the project brushes, the size of which is stored in the JSON object.
+In order for a software to read the data of a pxo, it has to open it as a zip file, and then it has to read the `data.json` file, and parse it as JSON object. Then, it either has to loop through the all of the folders included in `image_data/frames`, where each folder contains the cel data for each frame seperately, or, if the final blended images are included and that's all we care about, it just has to loop through all of the images inside the `image_data` folder, where each image corresponds to every frame of the project, and import them.
 
-### ZSTD compression
-During save, you are given the option to select ZSTD compression. If you do, this will reduce your pxo size, but if your project is large and has a lot of content in it, it may take some time to save and load it. Saving projects with ZSTD compression is currently unsupported in the Web version. If you are writing software that supports .pxo files, make sure to detect if the files are compressed first.
+### Include blended images
+During save, you are given the option to select if the blended images will be included in the exported file. If enabled, the final blended images are also being stored in the pxo, for each frame. This makes the pxo file larger and is useful for importing by third-party software or [CLI exporting](../user_manual/cli). Loading pxo files in Pixelorama does not need this option to be enabled.

docs/user_manual/cli.md

@@ -0,0 +1,39 @@
+---
+id: cli
+title: Command Line Interface 
+sidebar_label: Command Line Interface
+---
+Pixelorama offers a Command Line Interface (CLI), allowing you to use some of its features, such as project [exporting](save_and_export), from the command line. The CLI can be used to automate tasks easily. It can only be used on desktop platforms, such as Windows, Linux and macOS.
+
+## Options
+For the full list of the system options, you can refer to [Godot's documentation](https://docs.godotengine.org/en/stable/tutorials/editor/command_line_tutorial.html). Only the options that have the green checkbox icon in their description can be used in Pixelorama.
+```
+Usage:
+        Pixelorama.x86_64 [SYSTEM OPTIONS] -- [USER OPTIONS] [FILES]...
+
+Use -h in place of [SYSTEM OPTIONS] to see [SYSTEM OPTIONS].
+Or use -h in place of [USER OPTIONS] to see [USER OPTIONS].
+
+Some useful [SYSTEM OPTIONS] are:
+--headless     Run in headless mode.
+--quit         Close pixelorama after current command.
+
+
+[USER OPTIONS]:
+
+(The terms in [ ] reflect the valid type for corresponding argument).
+
+--version, --pixelorama-version         Prints current Pixelorama version
+--size                                  Prints size of the given project
+--framecount                            Prints total frames in the current project
+--export, -e                            Indicates given project should be exported
+--spritesheet, -s                       Indicates given project should be exported as spritesheet
+--output, -o                            [path] Name of output file (with extension)
+--scale                                 [integer] Scales up the export image by a number
+--frames, -f                            [integer-integer] Used to specify frame range
+--direction, -d                         [0, 1, 2] Specifies direction
+--json                                  Export the JSON data of the project
+--split-layers                          Each layer exports separately
+--help, -h, -?                          Displays this help page
+
+```

docs/user_manual/image_effects.md

@@ -5,6 +5,10 @@ sidebar_label: Image effects
 ---
 You can apply multiple image effects to an image, to easily and quickly affect its content, without modifying it pixel by pixel. The image effects can be found under the Image menu.
 
+:::warning
+Image effects are **destructive**. This means that, once they are applied, they directly modify the image data, and the only way to reverse this change is by undoing. If you want to use a non-destructive workflow, use [layer effects](../concepts/layer#layer-effects) instead.
+:::
+
 ## List of image effects
 | Name      | Description |
 | ----------- | ----------- |
@@ -16,6 +20,8 @@ You can apply multiple image effects to an image, to easily and quickly affect i
 | Invert colors | Inverts the colors of the image. Can choose whether this affects the red, blue, green or alpha channels, or multiple at once. |
 | Desaturation | Desaturates the colors of the image, turning them to grayscale. Can choose whether this affects the red, blue, green or alpha channels, or multiple at once. |
 | Adjust Hue/Saturation/Value | Adjusts the hue, saturation and the value of the colors of the image. |
+| Palettize | Limits the number of colors of the image to the colors of the currently active palette. Each color is being mapped to the nearest color in the palette. |
+| Pixelize | Pixelates the image by combining its pixels into larger squares, containing their average color. |
 | Posterize | Limits the number of colors of the image to the posterization level. Can also set an optional dither intensity. |
 | Gradient | Generates a gradient. Its colors can be modified from the gradient edit, by clicking on the colored area to add new color steps. Clicking on the color steps with the left mouse allows you to change the color of that step, and right clicking on a step, removes it. Gradients can either be linear or radial, and they can optionally be dithered and/or repeated. You can also generate step gradients by changing the interpolation type to constant. |
 | Gradient map | Converts the colors of the image into a gradient, based on their lightness. Darker colors are mapped to colors on the left side of the gradient, and brighter colors are mapped to colors on the right side of the gradient. |
@@ -29,4 +35,4 @@ By default, image effects will affect only the selected area of the cel(s). If t
 
 :::tip Affecting multiple cels at once
 By default, image effects will apply in all of the currently selected cels. It is also possible to make them apply to the entire selected frame, to all frames of the project, and to all projects as well, by selecting one of these options from the option button found next to the "Only affect selection" checkbox, in the dialog of the image effect you wish to apply.
-:::
+:::

docs/user_manual/palettes.md

@@ -127,16 +127,15 @@ You can import any image as a palette and extract colors from it. Every color fr
 
 | Format | File extension |
 | -------- | --------  |
-| Pixelorama palette | .tres |
+| Pixelorama palette | .json |
 | GIMP GPL | .gpl |
 | PAL | .pal |
 | Image palette | .png, .bmp, .hdr, .jpg, .jpeg, .svg, .tga, .webp |
-| Pixelorama old palette | .json |
 
 :::caution file extensions
 Palette format detection uses file extensions to determine how to parse palette formats. An incorrect extension will result in an import error.
 :::
 
-:::caution pre-0.9 pixelorama palettes
-Palettes created in versions of Pixelorama prior to 0.9 have to be reimported. The save format was changed from `.json` to more Godot-compatible `.tres`.
+:::caution pre-1.0 pixelorama palettes
+Palettes created in versions of Pixelorama prior to 1.0 cannot be reimported. The save format was changed from `.tres` to `.json`, due to security concerns. In order to convert an old palette to a new one, you can export it as an image from version 0.11.4, and import that image to the newest version.
 :::