Commit 7a105a19 authored by Wolthera van Hövell's avatar Wolthera van Hövell 🛍

Rearrange the contents of the images folder for translatable images.

Doing this in the draft branch for now. Still need to update the contributor's readme.

Fixes T10805
parent ca23c1c8
......@@ -4,7 +4,7 @@
File Not Found (404)
.. image:: /images/en/color_category/Kiki_cLUTprofiles.png
.. image:: /images/color_category/Kiki_cLUTprofiles.png
:alt: Image of Kiki looking confused through books.
This page does not exist.
......@@ -296,6 +296,7 @@ latex_additional_files = [
locale_dirs = ['locale/'] # Where the PO files will be stored at
gettext_compact = False # optional.
gettext_additional_targets = ['image'] # allows images to be translatable
figure_language_filename = "{path}{language}/{basename}{ext}"
......@@ -146,14 +146,14 @@ Images
Use the image directive for images without captions::
.. image:: /images/en/sample.png
.. image:: /images/sample.png
:width: 800
:align: center
:alt: an image.
And figure directives for images with captions::
.. figure:: /images/en/sample.png
.. figure:: /images/sample.png
:figwidth: 800
:align: center
:alt: an image.
......@@ -162,14 +162,14 @@ And figure directives for images with captions::
The latter gives:
.. figure:: /images/en/sample.png
.. figure:: /images/sample.png
:figwidth: 800
:align: center
:alt: an image.
A caption -- notice how the first letter of the caption in the directive is aligned with the :figwidth: option.
Images should go into the ``/images/en`` folder. By using ``/images`` instead of ``images``, sphinx will know the filepath isn't relative.
Images should go into the ``/images`` folder. By using ``/images`` instead of ``images``, sphinx will know the filepath isn't relative.
In-text Markup
......@@ -21,33 +21,33 @@ Colors are pretty, and they're also *pretty* fundamental to painting. When paint
Naturally, the first thing we do is organize the colors, usually based on what we see in nature. For example, we tend to order hues in the order that they appear in a rainbow, and we think about brightness of values as a tonal range from white to black. Of course, nature itself is tied to physics, and the order of hues and the concept of brightness has everything to do with the wavelength and energy of light as it bounces around and eventually enters our eyes.
.. image:: /images/en/color_category/Krita_color_mixing_natural_order.png
.. image:: /images/color_category/Krita_color_mixing_natural_order.png
:align: center
In the case of *traditional media*, we order the colors (**hues**) by how they result from mixes of other colors, starting with the *subtractive* **primary colors**: cyan, magenta, yellow. Mixing each primary color with each other reveals three secondary colors: violet, orange, and green. Mixing between those colors creates tertiary colors, and so on - the variations of hues between each named color are practically limitless! Thinking of colors in this way creates a circle of hues that artists call *"the color wheel"*! Each one of these hues can be made **lighter (tint)** or **darker (shade)** by mixing with white or black, respectively, and any color can be made **less saturated** (more gray or muted) by mixing with another color on the opposite side of the color wheel.
.. image:: /images/en/color_category/Krita_color_mixing_traditional_order.png
.. image:: /images/color_category/Krita_color_mixing_traditional_order.png
:align: center
In the digital world of computers color is treated similarly, and we order colors by the *way the screen generates them*; each **pixel** of color on our screen is produced by combining *super tiny* red, green, and blue lights of varying intensities. Unlike mixing paint, where light intensity is subtracted by pigment and mixing all the colors together produces a muddy brown or gray, *mixing lights is additive* - no light at all is obviously black, and mixing all of the colored lights produces white. As such, we can make a list of possible primary color **intensities**:
.. image:: /images/en/color_category/percentages_red.svg
.. image:: /images/color_category/percentages_red.svg
Shown above is a table of different intensities of red light. Our screens can certainly create a lot of shades of red, but we only start to see *the power of pixels* when we add in the other primary colors, green and blue, and show the colors of light that are produced when they are added together! For example, here's a table showing various mixes of red and green:
.. image:: /images/en/color_category/percentages_red_green.svg
.. image:: /images/color_category/percentages_red_green.svg
But that's just red and green, what about blue? I guess we can make *even more tables* to show what happens when different amounts of blue are added into the mix:
.. image:: /images/en/color_category/percentages_red_green_blue.svg
.. image:: /images/color_category/percentages_red_green_blue.svg
This way of ordering colors is probably familiar to you if you have used some programs for making internet applications, like Flash. In fact, if we had made 6 samples instead of 5 per "channel" (that is, per each primary color), we'd have gotten the `216 websafe colors <>`_!
Showing the colors in a bunch of tables just *feels wrong*, though, doesn't it? That's because, while our tables are *2D*, as we are mixing *three* primary colors, color can be thought of as *3D*! It’s a bit odd the first time you think about it this way, but you can actually stack these tables based on the amount of blue and they become a **cube**!
.. image:: /images/en/color_category/Rgbcolorcube_2.png
.. image:: /images/color_category/Rgbcolorcube_2.png
:align: center
......@@ -55,7 +55,7 @@ This cube is not filled with water, or sand, or even *concrete*, but colors! Col
There are many more color models. For example, if we were to balance our cube on the black corner, the white corner would be right under our finger at the very top of the cube. And as geometry and maths would have it, if we were to cut the cube in half as we balanced it, the line from the white point at the top to the black point at the bottom would be the **grayscale**.
.. image:: /images/en/color_category/Rgbcolorcube_HSI.png
.. image:: /images/color_category/Rgbcolorcube_HSI.png
:align: center
......@@ -28,7 +28,7 @@ Indexed Color
In older programs, the computer would have per image, a palette that contains a number for each color. The palette size is defined in bits, because the computer can only store data in bit-sizes.
.. figure:: /images/en/color_category/Kiki_lowbit.png
.. figure:: /images/color_category/Kiki_lowbit.png
:figwidth: 453
:align: center
......@@ -45,7 +45,7 @@ However, this is not available in Krita. Krita instead works with channels, and
Real Color
.. figure:: /images/en/color_category/Rgbcolorcube_3.png
.. figure:: /images/color_category/Rgbcolorcube_3.png
:figwidth: 800
:align: center
......@@ -41,14 +41,14 @@ The following results come from painting:
Even though all groups had the same assignment, each group's result looks different.
.. figure:: /images/en/color_category/Krita_2_9_colormanagement_group1.png
.. figure:: /images/color_category/Krita_2_9_colormanagement_group1.png
:figwidth: 500
:align: center
Group 1 had vermillion red, citron yellow and ultramarine blue to their disposal. This means their triangle looks nice and red, but their circle's green is muddy. This is because ultramarine is too dark of a blue to create nice greens with.
.. figure:: /images/en/color_category/Krita_2_9_colormanagement_group2.png
.. figure:: /images/color_category/Krita_2_9_colormanagement_group2.png
:figwidth: 500
:align: center
......@@ -56,14 +56,14 @@ Group 1 had vermillion red, citron yellow and ultramarine blue to their disposal
Group 2 had magenta red, citron yellow and cerulean blue. Magenta is a type of red that is closer to pink, opposed to vermillion, which is closer to orange. However, their green looks nice because cerulean is a much lighter blue.
.. figure:: /images/en/color_category/Krita_2_9_colormanagement_group3.png
.. figure:: /images/color_category/Krita_2_9_colormanagement_group3.png
:figwidth: 500
:align: center
Group 3 had vermillion red, citron yellow, emerald green and cerulean blue. They didn't mix their green, and thus ended up with a purer color.
.. figure:: /images/en/color_category/Krita_2_9_colormanagement_group4.png
.. figure:: /images/color_category/Krita_2_9_colormanagement_group4.png
:figwidth: 500
:align: center
......@@ -103,7 +103,7 @@ Color managed workflow
Knowing this about these spaces of course doesn't give you an idea of how to use them, but it does make it easier to explain how to use them. So let us look at a typical color management workflow:
.. figure:: /images/en/color_category/Krita-colormanaged-workflow_text.svg
.. figure:: /images/color_category/Krita-colormanaged-workflow_text.svg
:figwidth: 800
:align: center
......@@ -126,7 +126,7 @@ Therefore, without a profiled monitor, you actually don't know what the actual c
So what does this mean?
.. figure:: /images/en/color_category/Krita-colormanaged-workflow_krita_text.svg
.. figure:: /images/color_category/Krita-colormanaged-workflow_krita_text.svg
:figwidth: 300
:align: right
......@@ -152,7 +152,7 @@ An ICC profile is a set of coordinates describing the extremities of the device
Matrix Shaper profiles.
These are delivered alongside Krita. Matrix shaper profiles are made by setting parameters and interpolating between these to get the exact size of the color space. Due to this, Krita's color space browser can give you a lot of information on these profiles. Such profiles are also preferable as working space.
.. figure:: /images/en/color_category/Kiki_matrix_profile.png
.. figure:: /images/color_category/Kiki_matrix_profile.png
:figwidth: 500
:align: center
......@@ -161,7 +161,7 @@ Matrix Shaper profiles.
cLUT profiles
These are fairly rare, and primarily used to describe printer profiles, such as CMYK. cLUT, or Color Look-up Table profiles store far more data than Matrix shaper profiles, so they can hold data of little particularities caused by, for example, unexpected results from mixing pigments. This is a far more organic approach to describing a color space, hence why a lot of programs that don't care for color management much don't support these.
.. figure:: /images/en/color_category/Kiki_cLUTprofiles.png
.. figure:: /images/color_category/Kiki_cLUTprofiles.png
:figwidth: 500
:align: center
......@@ -188,7 +188,7 @@ LUT docker and HDR imaging
.. figure:: /images/en/LUT_Management_Docker.png
.. figure:: /images/dockers/LUT_Management_Docker.png
:figwidth: 300
:align: center
......@@ -200,7 +200,7 @@ You can set the workingspace of the image under input color space, and the displ
Component, exposure, gamma, whitepoint and blackpoint are knobs which allows you to modify the display filter.
.. figure:: /images/en/color_category/Krita_HDR_1.svg
.. figure:: /images/color_category/Krita_HDR_1.svg
:figwidth: 800
:align: center
......@@ -216,7 +216,7 @@ This means that there's potentially blacker blacks than screen black, and white
The LUT docker allows us to control this display-filter and modify the distortion. This is useful when we start modifying images that are made with scene referred values, such as HDR photos, or images coming out of a render engine.
.. figure:: /images/en/color_category/Krita_HDR2.svg
.. figure:: /images/color_category/Krita_HDR2.svg
:figwidth: 800
:align: center
......@@ -310,7 +310,7 @@ Webcomic
.. image:: /images/en/color_category/Krita-colormanaged-workflow_webcomic.svg
.. image:: /images/color_category/Krita-colormanaged-workflow_webcomic.svg
:width: 800
:align: center
......@@ -332,7 +332,7 @@ For the final for the web, convert the image to sRGB 8bit, srgbtrc, do not embed
.. image:: /images/en/color_category/Krita-colormanaged-workflow_print.svg
.. image:: /images/color_category/Krita-colormanaged-workflow_print.svg
:width: 800
:align: center
......@@ -350,7 +350,7 @@ You can set the advanced color selector to transform to a given profile via :men
.. image:: /images/en/color_category/Krita-colormanaged-workflow_games.svg
.. image:: /images/color_category/Krita-colormanaged-workflow_games.svg
:width: 800
:align: center
......@@ -28,7 +28,7 @@ On-canvas mixing techniques are ones where multiple colors are combined directly
.. image:: /images/en/color_category/Color_gloss.gif
.. image:: /images/color_category/Color_gloss.gif
:align: center
......@@ -40,22 +40,22 @@ We can mix even more easily with glazing when we set our brush's **flow** to a l
Furthermore, we can combine glazing with various **blending modes** to achieve different, interesting effects. For example, glazing with the **multiply** blending mode to create nice shadows:
.. image:: /images/en/color_category/Color_gloss_example_1.png
.. image:: /images/color_category/Color_gloss_example_1.png
:align: center
Staring with line art and base colors.
.. image:: /images/en/color_category/Color_gloss_example_2.png
.. image:: /images/color_category/Color_gloss_example_2.png
:align: center
Using a semi-transparent brush that's set to multiply, we can add colored layers to suggest shadows and mid-tones. The multiply blending mode will darken and interact with each base color differently.
.. image:: /images/en/color_category/Color_gloss_example_3.png
.. image:: /images/color_category/Color_gloss_example_3.png
:align: center
Then, using a brush with low flow (~0.30), we can pick the resulting colors and lay down more layers. Not only does this help you define the different planes and forms that are so crucial for creating a sense of depth and three-dimensionality, it also gives quite a nice, painterly effect!
.. image:: /images/en/color_category/Color_gloss_example_4.png
.. image:: /images/color_category/Color_gloss_example_4.png
:align: center
......@@ -64,7 +64,7 @@ Continue with a lower opacity and flow to create even smoother gradients. Make y
.. image:: /images/en/color_category/Color_mix.gif
.. image:: /images/color_category/Color_mix.gif
:align: center
......@@ -72,7 +72,7 @@ Smudging
If you *remove all paint from a smudge brush*, you get a simple-yet-powerful smudge effect:
.. image:: /images/en/color_category/Color_smudge.gif
.. image:: /images/color_category/Color_smudge.gif
:align: center
......@@ -83,12 +83,12 @@ Scumbling
**Scumbling** is similar to glazing, except instead of having a semi-opaque layer, we use layers of **textured** or **patterned** paint.
.. image:: /images/en/color_category/Color_scumble2.gif
.. image:: /images/color_category/Color_scumble2.gif
:align: center
Like most painting programs, Krita allows you to pick a :ref:`option_brush_tip`, which can be used to create a textured effect like that of scumbling.
.. image:: /images/en/color_category/Color_scumble.gif
.. image:: /images/color_category/Color_scumble.gif
:align: center
......@@ -110,7 +110,7 @@ Krita, like almost every art and graphics program, has a :ref:`color_picker_tool
And still, there is more to this little tool than meets the eye! Not only can you configure Krita's color picker to sample from the average color of a **radius** of pixels, Krita's Color Picker also has a unique **blending** feature: a powerful and intuitive tool for off-canvas color mixing!
.. image:: /images/en/color_category/Krita_cpb_mixing.gif
.. image:: /images/color_category/Krita_cpb_mixing.gif
:align: center
......@@ -131,7 +131,7 @@ The Digital Colors Mixer
Somewhat hidden away in the **Dockers** menu (:menuselection:`Settings --> Dockers --> Digital Colors Mixer`), this can be a useful tool for off-canvas mixing. The Digital Colors Mixer looks a little bit like an audio mixing board that you'd see in a recording studio, but instead of mixing music it mixes colors! It contains 6 independent **color mixers** that mix your current brush color with any color of your choosing.
.. image:: /images/en/color_category/Digi_colormixer.png
.. image:: /images/color_category/Digi_colormixer.png
:align: center