Difference between revisions of "Color Editor Dialog"

From Synfig Studio :: Documentation
Jump to: navigation, search
m (Made stylistic changes)
m (Text replace - '[[' to '{{l|')
Line 1: Line 1:
 
<!--Categories-->
 
<!--Categories-->
[[Category:Dialogs]]
+
{{l|Category:Dialogs]]
  
  
Line 6: Line 6:
 
The color dialog has two sections: one for the color itself and another for the alpha channel (the opacity of the color). The color section allows changes to the color channels and shows the hexadecimal representation of the color. This hexadecimal representation does not include the alpha channel.
 
The color dialog has two sections: one for the color itself and another for the alpha channel (the opacity of the color). The color section allows changes to the color channels and shows the hexadecimal representation of the color. This hexadecimal representation does not include the alpha channel.
  
[[Image:Color1.png]] [[Image:ColorDialog1.png]] [[Image:ColorsDialogYUV1.png]] [[Image:ColorTest1.png]]
+
{{l|Image:Color1.png]] {{l|Image:ColorDialog1.png]] {{l|Image:ColorsDialogYUV1.png]] {{l|Image:ColorTest1.png]]
  
 
You can set the color you are editing using two methods: RGB composition (red, green and blue channels) or YUV composition (luma, hue, saturation, U and V channels). Select one of the tabs to make the modifications using the method you prefer.
 
You can set the color you are editing using two methods: RGB composition (red, green and blue channels) or YUV composition (luma, hue, saturation, U and V channels). Select one of the tabs to make the modifications using the method you prefer.
Line 18: Line 18:
 
Here are some examples of what happens when a color channel value is set to values beyond its natural scope.
 
Here are some examples of what happens when a color channel value is set to values beyond its natural scope.
  
[[Image:Color2.png]] [[Image:ColorDialog2.png]] [[Image:ColorTest2.png]]
+
{{l|Image:Color2.png]] {{l|Image:ColorDialog2.png]] {{l|Image:ColorTest2.png]]
  
[[Image:Color3.png]] [[Image:ColorDialog3.png]] [[Image:ColorTest3.png]]
+
{{l|Image:Color3.png]] {{l|Image:ColorDialog3.png]] {{l|Image:ColorTest3.png]]
  
[[Image:Color4.png]] [[Image:ColorDialog4.png]] [[Image:ColorTest4.png]]
+
{{l|Image:Color4.png]] {{l|Image:ColorDialog4.png]] {{l|Image:ColorTest4.png]]
  
[[Image:Color5.png]] [[Image:ColorDialog5.png]] [[Image:ColorTest5.png]]
+
{{l|Image:Color5.png]] {{l|Image:ColorDialog5.png]] {{l|Image:ColorTest5.png]]
  
[[Image:Color7.png]] [[Image:ColorDialog7.png]] [[Image:ColorTest7.png]]
+
{{l|Image:Color7.png]] {{l|Image:ColorDialog7.png]] {{l|Image:ColorTest7.png]]
  
[[Image:Color6.png]] [[Image:ColorDialog6.png]] [[Image:ColorTest6.png]]
+
{{l|Image:Color6.png]] {{l|Image:ColorDialog6.png]] {{l|Image:ColorTest6.png]]
  
[[Image:Color8.png]] [[Image:ColorDialog8.png]] [[Image:ColorTest8.png]]
+
{{l|Image:Color8.png]] {{l|Image:ColorDialog8.png]] {{l|Image:ColorTest8.png]]
  
[[Image:Color9.png]] [[Image:ColorDialog9.png]] [[Image:ColorTest9.png]]
+
{{l|Image:Color9.png]] {{l|Image:ColorDialog9.png]] {{l|Image:ColorTest9.png]]
  
[[Image:Color10.png]] [[Image:ColorDialog10.png]] [[Image:ColorTest10.png]]
+
{{l|Image:Color10.png]] {{l|Image:ColorDialog10.png]] {{l|Image:ColorTest10.png]]
  
 
In all the examples the blend method of the horizontal rectangle was "composite".
 
In all the examples the blend method of the horizontal rectangle was "composite".
Line 44: Line 44:
 
In the following examples you can see that negative alpha values and bigger than 100% alpha values composited with other layers produces very interesting effects. If someone want to explain why those effects are produced, please edit this page! :)
 
In the following examples you can see that negative alpha values and bigger than 100% alpha values composited with other layers produces very interesting effects. If someone want to explain why those effects are produced, please edit this page! :)
  
[[Image:Color11.png]] [[Image:ColorDialog11.png]] [[Image:ColorTest11.png]]
+
{{l|Image:Color11.png]] {{l|Image:ColorDialog11.png]] {{l|Image:ColorTest11.png]]
  
[[Image:Color12.png]] [[Image:ColorDialog12.png]] [[Image:ColorTest12.png]]
+
{{l|Image:Color12.png]] {{l|Image:ColorDialog12.png]] {{l|Image:ColorTest12.png]]
  
[[Image:Color13.png]] [[Image:ColorDialog13.png]] [[Image:ColorTest13.png]]
+
{{l|Image:Color13.png]] {{l|Image:ColorDialog13.png]] {{l|Image:ColorTest13.png]]
  
 
== The sample file ==  
 
== The sample file ==  
  
 
This is the file that I've used to produce the color effects.  
 
This is the file that I've used to produce the color effects.  
[[Media:ColorTest.sifz]]
+
{{l|Media:ColorTest.sifz]]

Revision as of 18:25, 7 September 2009

Languages Language: 

English • français • italiano • română • русский


{{l|Category:Dialogs]]


The Color Dialog

The color dialog has two sections: one for the color itself and another for the alpha channel (the opacity of the color). The color section allows changes to the color channels and shows the hexadecimal representation of the color. This hexadecimal representation does not include the alpha channel.

{{l|Image:Color1.png]] {{l|Image:ColorDialog1.png]] {{l|Image:ColorsDialogYUV1.png]] {{l|Image:ColorTest1.png]]

You can set the color you are editing using two methods: RGB composition (red, green and blue channels) or YUV composition (luma, hue, saturation, U and V channels). Select one of the tabs to make the modifications using the method you prefer.

All the RGB channels and alpha values can be modified using the triangular sliders or the numeric input. In all cases the value can be between 0 and 100. RGB values, and alpha values as well, can actually be higher than 100 and lower than 0. If you set RGB values higher than 100 it produces a shifted color with transparency. Same happens if values are lower than 0. You can create an object with a color with alpha = 200. Then if you apply it over another layer with alpha = 100 and use "alpha over" as the composition method. You will then obtain a composited alpha of -100 (-100 = 100-200). Anyway the alpha value will be truncated to be in the [0,100] interval when the image is rendered because images cannot hold negative alpha or bigger than 100% (Are you sure?).

On the other hand, YUV channels can only be set using the triangular sliders. It would be a good feature if those channels could also be modified by their numerical values.

Examples of RGB channels outside [0,100]

Here are some examples of what happens when a color channel value is set to values beyond its natural scope.

{{l|Image:Color2.png]] {{l|Image:ColorDialog2.png]] {{l|Image:ColorTest2.png]]

{{l|Image:Color3.png]] {{l|Image:ColorDialog3.png]] {{l|Image:ColorTest3.png]]

{{l|Image:Color4.png]] {{l|Image:ColorDialog4.png]] {{l|Image:ColorTest4.png]]

{{l|Image:Color5.png]] {{l|Image:ColorDialog5.png]] {{l|Image:ColorTest5.png]]

{{l|Image:Color7.png]] {{l|Image:ColorDialog7.png]] {{l|Image:ColorTest7.png]]

{{l|Image:Color6.png]] {{l|Image:ColorDialog6.png]] {{l|Image:ColorTest6.png]]

{{l|Image:Color8.png]] {{l|Image:ColorDialog8.png]] {{l|Image:ColorTest8.png]]

{{l|Image:Color9.png]] {{l|Image:ColorDialog9.png]] {{l|Image:ColorTest9.png]]

{{l|Image:Color10.png]] {{l|Image:ColorDialog10.png]] {{l|Image:ColorTest10.png]]

In all the examples the blend method of the horizontal rectangle was "composite".

In the examples you can notice that negative values for an RGB channel ("overdesaturated") combined with alpha set to an intermediate value affects light colors more than dark colors. On the other hand RGB channel values greater than 100 ("oversaturated") affects dark colors more than light colors.

Examples of Alpha channel outside [0,100]

In the following examples you can see that negative alpha values and bigger than 100% alpha values composited with other layers produces very interesting effects. If someone want to explain why those effects are produced, please edit this page! :)

{{l|Image:Color11.png]] {{l|Image:ColorDialog11.png]] {{l|Image:ColorTest11.png]]

{{l|Image:Color12.png]] {{l|Image:ColorDialog12.png]] {{l|Image:ColorTest12.png]]

{{l|Image:Color13.png]] {{l|Image:ColorDialog13.png]] {{l|Image:ColorTest13.png]]

The sample file

This is the file that I've used to produce the color effects. {{l|Media:ColorTest.sifz]]


Languages Language: 

English • français • italiano • română • русский