Synfig Studio :: Documentation - User contributions [en]

Doc:Brushes

2019-12-31T14:51:49Z

Hellocatfood: /* A combinaison of feature */ spelling mistake

{{Title|Brushes}}
{{Category|Manual}}
{{Category|Tutorials}}
{{Category|Tutorials Intermediate}}
{{TOCright}}
{{NewTerminology}}


== Introduction ==

The Outlines that you can draw with Synfig are formed by a rounded brush. The brush is defined by a radius that you can modify by its brush editor widget. This tutorial explains how to make brushed outlines that would improve sustantially your artwork.

== What do I need to use brushes? ==

=== A brush image ===
Well, for the moment Synfig hasn't any brush image included so you'll need to do them by your self or grab from the free resources (insert link here to those resources).

Here are some examples of brushes:

{{l|Image:Soft-wheezy-asymetric-brush.png}}
{{l|Image:Wool-ball-brush.png}}
{{l|Image:Soft-triangle-brush.png}}
{{l|Image:Tictactoe-brush.png}}
{{l|Image:Rhomb-fuzzy-brush.png}}
{{l|Image:Big-soft-brush.png|128px}}

These pictures are all licensed as public domain. Feel free to use them in your projects.

Brush images can just be any kind of image file that allows transparency (PNG, TIFF, GIF). The more resolution your image has, the bigger your brush size can be without pixelisation. Huge file sizes would take synfig more time to render,though. Find the balance between both options of quality and speed.

Anyway, you can use anything that is visible under synfig as a brush. See below.

=== A combinatson of feature ===

Brushes are not a primary feature of Synfig. They are obtained from the combination of the following features:

* {{l|Duplicate Layer}}
* Link to Spline (what uses the following convert types):
** {{l|Convert#Spline Vertex|Spline Vertex}}
** {{l|Convert#Spline Tangent|Spline Tangent}}
** {{l|Convert#Spline Width|Spline Width}}

Strictly the Link to Spline feature is not needed but it would help on make several conversion types and linking.

== The Idea ==

The idea of brushes is to use the Duplicate layer feature with the Link to Spline (automatic or manual) feature given by the conversion types.

When you link a vertex to a spline (or a tangent or a width) it converts your parameter to the following sub-parameters.

* spline "Spline"
* bool "Loop"
* real "Amount"

There are other particular parameters for tangent or width that will be revised in other section.

spline "Spline" is the spline where the parameter (vertex, tangent or width) is linked to. In the case of the vertex it means that the vertex lies on the spline given by its "Amount" parameter. When Amount is 0.0 the vertex position is the Spline begin. When Amount is 1.0 the vertex position is the Spline end. When Loop is "on" values outside the [0.0, 1.0] range are forced to be in that range by eliminating the integer part of the number. <tt>(It needs a better explanation)</tt>

On the other hand the Duplicate layer allows duplicate the render of everything that is below it as many times as the Index value node indicates. Also if you link any parameter to that Index one the parameter is modified according to the index before it is multiple rendered by the Duplicate layer. It allows apply some kind of transformation to the layers at the same time you duplicate them.

Combining those two features (Link to Spline and Duplicate) you can achieve the emulation of brushes in synfig.

== The procedure ==
As of Synfig 1.0.2 (November 27, 2015), much of the process for creating a brushtroke effect has been simplified because scale and rotate functions have been integrated into group layers. The following steps will guide you through the process:

# If you have not already done so, create an outline (path) for the brush to follow.
## Click on the {{l|Spline Tool}}.
## Under the {{l|Tool Options Panel}}, select "Create Outline" if it is not already selected. You may wish to de-select all other "Layer Type" options as well.
## Lay as many or as few vertices as you wish.
## In the bottom-left corner of the {{l|Tool Options Panel}}, click "Make Spline" (gears icon).
## Edit the spline to your content by adding or removing vertices and moving tangent handles.
# Import the "brush" you would like to copy by clicking '''File->Import...''', then selecting the corresponding image file.
#*Alternatively, you may use an existing shape within your project, although this may require an additional step. Place the object(s) to be used as a brush in a {{l|Group Layer}} or {{l|Switch Group Layer}}. If you want your brush to rotate to follow the contour of the path, it is necessary that the objects be in a group layer or switch group layer because most objects do not have a rotation (Angle) parameter but groups do. (Some objects also lack an origin parameter.) After creating the group layer, move the origin handle to the object's center (ctrl-click and drag the origin handle) so that they both move together. These steps are not necessary if you import an image because imported images are created within a switch group layer.
# Select both the group layer containing your brush and the spline layer. Click the group's origin handle (green circle), then right-click on the spline (not on a handle) and select '''Link to Spline'''. To test that you have done this correctly, move the group's origin handle and it should be confined to the spline and rotate so that it is always tangent to it. You are still free to rotate the group layer and it will continue to correspondingly rotate as you move the origin along the spline's path.
# Put the group layer with your brush inside another group layer. Call this new group layer "Clones" or something similar for easy reference.
# With the group layer ("Clones") selected, adjust the scale handle (orange circle in the {{l|Group Transformation Widget}}) so that the brush is as large or as small as you desire. You can also return to this step later.
# Click the group layer containing your brush (not the "Clones" layer). Right-click it and select '''New Layer->Other->Duplicate'''. (Alternatively, click in the menu bar '''Layer->New Layer->Other->Duplicate'''.) This creates a {{l|Duplicate Layer}}, which is ''not the same as duplicating the layer''. Do not simply click "Duplicate Layer" below the Layers Panel.
# Click the Duplicate Layer you just created. Under the parameters, expand "Index (Index 1)" and edit the values "From", "To", and "Step". These correspond to the portion of the spline to be traversed as well as the density of the brushstroke. For the "From" and "To" parameters, 0 corresponds to the start of the spline and 1 corresponds to its end. The number of duplicates to be made is equal to floor((To-From)/Step). A smaller "Step" parameter corresponds to a denser brushstroke while a larger one makes it more sparse (and possibly easier to render). For this tutorial, it is suggested you use From=0, To=1, and Step=0.02, which will create 50 copies along the entire length of the spline, although you are encouraged to modify these values to see their effects.
# Open the {{l|Library Panel}}. Expand "ValueBase Nodes" and select "Index 1", which should correspond to the value node you just edited in the Duplicate Layer. Make sure "Index 1" remains selected throughout the following step.
# Click the group layer containing your brush (not "Clones"). Within the {{l|Parameters Panel}}, expand '''Transformation->Offset'''. Right-click "Amount" and select "Connect". (Note that the Transformation and Offset parameters must be expanded. The Amount parameter there is ''not'' the same as the top-level Amount parameter, which is equivalent to the layer's alpha channel.) This connects the "Amount" parameter (the position along the spline) with the value node associated with the Duplicate Layer. This should create many copies of the brush along the length of the spline. You will notice that these copies are not rotated, which will be accomplished in the next and final step. If you do not wish for the brush to rotate as it traverses the path, you are done.
# Still within the group layer's Parameters Panel, expand '''Transformation->Angle'''. Right-click "Amount" and select "Connect" (make sure "Index 1" is still selected in the Library Panel). (Note that the Transformation and Angle parameters must be expanded. The Amount parameter there is ''not'' the same as the top-level Amount parameter, which is equivalent to the layer's alpha channel.) This automatically associates the duplicates' angle with the tangent to the spline. If you have done all of the above steps correctly, your brush will follow the spline and its angle will change with it.

At this point, you can modify any parameters and the brushstroke will update dynamically. You can turn off the Spline Layer to hide it, add vertices, modify tangent handles, and change the "From", "To", and "Step" parameters.

== Further steps ==

It is possible to make more fancy things with this procedure like make random angled brushes or random spread brushes stamps along the outline. But this is part of an Advanced uses of Brushes tutorial.

== Examples ==

{{l|Image:Test1-1.png}}

A Star layer.
You can see that seems to be a bug there with the feather and zoom in and out combinations.

{{l|Image:Test1-2.png}}

A simple stroke.

{{l|Image:Test1-3.png}}

A angled pen.
And this is the brush image:

{{l|Image:Brush002.png}}

{{l|Image:Test1-4.png}}

The same but not rotated.

{{l|Image:Test1-5.png}}

Other brush example. And this is the brush image:

{{l|Image:Brush001.png|128px}}

This is the sifz file used to render the examples:

{{l|Media:Test1.sifz|Sample file link}}

You need to modify the zoom parameter in the group layer and the b-amount value node to modify the density of the brush to achieve same values than in the examples.

Canvas

2019-12-19T23:16:47Z

Hellocatfood: Added description of how to create a canvas

{{Title|Canvas}}
{{Category|Glossary}}
{{NewTerminology}}


A canvas is simply an ordered list of layers. When you {{l|Group}} a set of layers, you are making a new Canvas, putting the grouped layers into that new canvas, removing them from the Canvas they were previously in, and replacing them with a new {{l|Group Layer}}. The new {{l|Group Layer}} has a parameter called {{Literal|Canvas}} which has the new {{l|Group Layer|}} name as its value.

Canvases can be {{l|Export|exported}} (the name must not contains space or :#@$^&()* characters) , which adds them to the {{l|Canvas Browser Panel}}, from where they can be edited separately in their own workarea.

Sub-canvases can in turn be exported from these new workareas, building up a tree of canvases.

[[File:Canvas 1.0.png|900px|thumb|center|The {{l|Category:Canvas_Window}} showing the actual {{l|Canvas}}]]

== Creating a new Canvas ==
Canvases can be created by right-clicking on the Canvas parameter of a Group layer and choosing Export Value.

In the dialogue that appears enter a name for your new canvas.

The canvas will now be created in the Canvas Browser to the right of the screen. Double-clicking on the canvas name will open the canvas, which contain all of the layers that are part of the original Group

==See also==
{{l|Canvas_Properties_Dialog}}

Dev:Build Instructions

2018-09-26T07:25:03Z

Hellocatfood: updated forum link

{{Title|Build Instructions}}
{{Category|Manual}}


Some information may be outdated, please have a look in the forums at the [https://forums.synfig.org/c/development/building-synfig build thread] to get fresh data...

== Scripts provided with the source code ==

Within the source code we provide two automatic package scripts. They are used to generate the library independent packages for Linux or Mac OSX. Since the scripts ship all the needed libraries in a single package the size of the packages are higher compared to the typical deb or rpm package. That's not the case for dmg package for OSX because in general they bundle all needed libraries in the dmg image.

You can find those scripts under the ''autobuild'' folder from the source code. There are usage instruction inside each script allowing resuming builds (reusing the current downloaded libraries) and specific options to just compile and build the binaries without package them.

Note that for Fedora 24 (at least), you must define a password for root user in order to run ''synfigstudio-linux-build.sh'', otherwise su authentication failure will occur.
If needed add it with ''sudo su -'' then ''passwd''

===Staged boost library===
To use the autobuild scripts with a staged boost library, you will need to define environment variables:
$ export BOOST_ROOT=/my/boost/path
$ export CPLUS_INCLUDE_PATH="$CPLUS_INCLUDE_PATH:$BOOST_ROOT/include"
$ export LD_LIBRARY_PATH="$LD_LIBRARY_PATH:$BOOST_ROOT/lib"

===Debug build===
Consider, that you can run in the following way to enable debug:
$ DEBUG=1 ./synfigstudio-linux-build.sh

In this case you can combine debug with other modes:
$ DEBUG=1 ./synfigstudio-linux-build.sh quick # just invokes "make install" for every component
$ DEBUG=1 ./synfigstudio-linux-build.sh synfig # builds synfig-core only
$ DEBUG=1 ./synfigstudio-linux-build.sh synfigstudio # builds synfig-studio only

== Notes ==

* If you are using the released versions instead of GIT, none of the libtoolize or autoreconf steps are necessary. For released versions, "./configure && make && sudo make install" should be enough.

* If you are using packages for synfig's dependencies, you want the '''development packages''' not the main packages. Check below for your distribution's packages.

* Please read the {{l|Dev:Source code|source code}} page to check out the latest code. Please also check the {{l|Download|download page}} and the {{l|FAQ}} to find out about any issues that you may run into along the way.

* Some Linux/BSD distros (Like Gentoo Linux) have a pkg-config that doesn't look in /usr/local/lib/pkgconfig by default. So if you are installing in anywhere other than the system pkg-config path, please run "export PKG_CONFIG_PATH=/usr/local/lib/pkgconfig" or similar before building or installing anything.

* Don't use automake 1.4, there are problems with it.

* Using automake 1.9, 'make install' seems to re-link and re-install all the synfig core modules every time whether they have changed or not. If you intend to build code repetitively you can export export CXX="/usr/bin/ccache /usr/bin/g++". This allows to not rebuild the already build modules so they taken from the cache.

* After you obtain the source code using the git repository, you obtain a single 'synfig' folder where the three main modules (etl, synfig-core and synfig-studio) are up to date. '''The trunk folder has been removed in the git tree'''. Please modify the build instructions for other platforms.

* If you want to test a particular branch of the repository do the following:
<pre>
~/synfig$ git branch -r
</pre>
You'll obtain a list of the remote branches that exists in the repo. For example:
<pre>
origin/HEAD
origin/genete_bones
origin/genete_canvasview
origin/genete_master
origin/genete_onionskin
origin/genete_scale_reverse
origin/genete_setup_dialog
origin/genete_svg
origin/gerco_opengl
origin/master
origin/uiomae_opengl
origin/zelgadis_cia
origin/zelgadis_master
</pre>

Then to properly checkout a remote branch you have to create a local branch to track a particular remote branch and checkout it. For example:
<pre>
~/synfig$ git branch --track test_canvas origin/genete_canvasview
~/synfig$ git checkout test_canvas
</pre>

Your code is ready to be built on that branch.

* The CVS requirement is only because the autopoint program run by autoreconf needs CVS. You can avoid the need for CVS by disabling the translation/gettext stuff in configure.ac.

* If you don't want to install to a system-wide directory using sudo, run something like these commands before starting:

<pre>
prefix=$(pwd)/install
export PKG_CONFIG_PATH="$prefix/lib/pkgconfig"
export PATH=$(pwd)/synfig-core/src/tool/.libs:$PATH
export CXX="/usr/bin/ccache /usr/bin/g++"
</pre>

** export PKG_CONFIG_PATH="$prefix/lib/pkgconfig" allows to find the linking libraries.
** export PATH=$(pwd)/synfig-core/src/tool/.libs:$PATH allows synfigstudio find the correct * libraries to render the icons for the toolbox etc.
** export CXX="/usr/bin/ccache /usr/bin/g++" allows to use the cache to avoid rebuilding.

And when you run ./configure, run it with <pre>--prefix $prefix</pre> and don't use sudo when you do make install.

* See the automatic building script attached.

== System-specific instructions ==
Please update them including the new GIT repo.

* Gentoo: {{l|Dev:Gentoo Ebuilds|ebuilds}} are available for both release versions and GIT
* MacOS X: {{l|Dev:Building_On_Mac_OS_X|instructions for building}} with the GTK+ Aqua port are available.
* PCLinuxOS: {{l|Dev:PCLinuxOS build instructions|build instructions}}
* Windows: {{l|Dev:Building on Windows|instructions for building}} with {{l|Dev:Mingw_installation|mingw}} in {{l|Dev:MSYS2_Build|MSYS2}} are available.

==System wide build Instructions==

=== ETL ===

ETL is a template library, there is nothing to build really, it just needs to be installed.

'''Requires''': autoconf automake 
* Debian: build-essential autoconf automake libtool
* OS X: already included with Mac OS X

''Type the following commands at the directory where you cloned the git repo''
<pre>
$ cd synfig/ETL
$ autoreconf --install --force
$ ./configure
$ sudo make install
</pre>

=== synfig-core ===

'''Requires''': ETL (etl-dev, already installed if you successfully built etl), libxml++, libsigc++, libltdl, libtool, gettext, autopoint (part of gettext-dev), cvs, boost-program-options 
* Debian: etl-dev libxml++2.6-dev libsigc++-2.0-dev libltdl3-dev libtool gettext cvs autopoint
* Fedora: ETL-devel libxml++-devel libsigc++20-devel libtool-ltdl-devel libtool gettext-devel cvs
* Gentoo: dev-cpp/ETL dev-cpp/libxmlpp dev-libs/libsigc++ dev-util/cvs
** If you are using ./configure --prefix="$PREFIX" to configure synfig, do not install dev-cpp/ETL.
*OS X use glibtoolize instead of libtoolize, as Apple renamed it.

'''Note''': libpng isn't required to build synfig, but if you build synfig without PNG support and go on to build synfigstudio, that step will fail (because the build process for synfigstudio uses synfig to create .png icon files). The package is libpng12-dev on Debian or media-libs/libpng on Gentoo.

'''Note''': the 'configure.ac' file in the synfig-core directory doesn't work with libtool version 2, as shipped with ubuntu 8.10. To work around the problem until a proper fix is found, comment out line 622 or thereabouts (it says "AC_CONFIG_SUBDIRS(libltdl)") by putting a "#" at the front of the line. The line is required for older versions of libtool, as shipped with other distributions. DO it straight with this command:
<pre> sed -i 's/^AC_CONFIG_SUBDIRS/# AC_CONFIG_SUBDIRS/' synfig-core/configure.ac </pre>

'''Optional''': libpng, libmng, libjpeg, libfreetype, libfontconfig, libopenexr, libavcodec, libmagick++, vimage (MacOS only, proprietary) 
* Debian: libpng12-dev libmng-dev libjpeg62-dev libfreetype6-dev libfontconfig1-dev libopenexr-dev libavcodec-dev libavformat-dev libswscale-dev libmagick++9-dev
* Gentoo: sys-devel/libtool media-libs/libpng media-libs/libmng media-libs/jpeg media-libs/freetype media-libs/fontconfig media-libs/openexr media-libs/tiff
*Ubuntu (since Jaunty): Same libraries as Debian but do not use libmagick++9-dev, use graphicsmagick-libmagick-dev-compat instead.

'''Runtime''': encodedv (from libdv), ffmpeg, convert (from imagemagick)
* Debian: libdv-bin ffmpeg imagemagick
* Gentoo: media-libs/libdv media-video/ffmpeg media-gfx/imagemagick

''Type the following commands at the directory where you cloned the git repo''
<pre>
$ cd synfig/synfig-core
$ ./bootstrap.sh
$ ./configure
$ make
$ sudo make install
</pre>

''Note'':

* Don't use --enable-half, it is slow.
* If ETL was installed in a non-standard directory using --prefix=<location>, it suffices to run the configure script with an updated PKG_CONFIG_PATH environment variable. E.g.: PKG_CONFIG_PATH=${PKG_CONFIG_PATH}:/my/install/prefix/lib/pkgconfig ./configure --prefix=/my/install/prefix

=== synfig-studio ===

''Requires'': ETL (etl-dev, already installed if you successfully built etl), synfig (libsynfig-dev, already installed if you successfully built synfig-core), gtkmm >= 2.4, gtk >= 2.0, glibmm, libsigc++, libltdl, libtool, gettext, cvs, intltool, libboost >= 1.53, libcairo >= 1.12 
* Debian: etl-dev libsynfig-dev libgtkmm-2.4-dev libgtk2.0-dev libglibmm-2.4-dev libsigc++-2.0-dev libltdl3-dev libtool gettext cvs
* Gentoo: virtual/ETL virtual/synfig dev-cpp/gtkmm-2.4 dev-libs/libsigc++ sys-devel/libtool
** If you are using ./configure --prefix="$PREFIX" to configure synfigstudio, do not install virtual/ETL or virtual/synfig.
''Optional'': fonts (for the images), [http://www.fmod.org FMOD] (version 3.x, proprietary)
* Debian: ttf-freefont ttf-dejavu ttf-dustin
* Gentoo: freefonts dejavu

''Type the following commands at the directory where you cloned the git repo''
<pre>
$ cd synfig/synfig-studio
$ ./bootstrap.sh
$ ./configure
$ make
$ sudo make install
</pre>



== finalizing ==

Depending on where you installed synfig to, you might have to tell your system where the libraries can be found. That can be done via the following command:

<pre>
$ sudo ldconfig
</pre>

== Build script examples ==

If you want to build a binary for testing or debugging proposes you can run one of the following scripts:

The binaries are installed at $(pwd)/install/bin. Alter the script according to your preferences.

Your system must satisfy synfig's build requirements, the script won't do it for you. Also be sure what git branch are you building each time. In some cases you'll need to make clean on each folder first.

Be sure that '''you have ccache installed''' on your system because you will get errors otherwise.

=== Linux ===
<pre>
#!/bin/sh
CPUS=4
prefix=$(pwd)/install
export PKG_CONFIG_PATH="$prefix/lib/pkgconfig"
export PATH=$(pwd)/synfig-core/src/tool/.libs:$PATH
export CXX="/usr/bin/ccache /usr/bin/g++"
# Uncomment this line if you want to use ccache
# export CXX="/usr/bin/ccache g++-snapshot"

cd ETL &&
autoreconf --install --force &&
./configure --prefix $prefix &&
make --debug=b install &&
\
cd ../synfig-core &&
./bootstrap.sh &&
./configure --prefix $prefix --enable-optimization=0 --enable-debug &&
make --debug=b -j $CPUS install &&
\
cd ../synfig-studio &&
./bootstrap.sh &&
./configure --prefix $prefix --enable-optimization=0 --enable-debug &&
make --debug=b -j $CPUS install
</pre>

With libboost no standard installation to /personal/boost/install/path/ :

<pre>
#!/bin/sh
#move to synfig folder (to get the script out from git)
cd synfig
CPUS=2
prefix=$(pwd)/install
export PKG_CONFIG_PATH="$prefix/lib/pkgconfig"
export PATH=$(pwd)/synfig-core/src/tool/.libs:$PATH
export CXX="/usr/bin/ccache /usr/bin/g++"

cd ETL &&
autoreconf --install --force &&
./configure --prefix $prefix &&
make install &&
\
cd ../synfig-core &&
./bootstrap.sh &&
./configure --with-boost=/personal/boost/install/path/boost_1_55_0 --enable-optimization=0 --prefix $prefix --enable-debug &&
make -j $CPUS install &&
\
cd ../synfig-studio &&
autoreconf --install --force &&
intltoolize --force --copy &&
./configure --enable-optimization=0 --prefix $prefix --enable-debug &&
make -j $CPUS install
</pre>

=== Mac OSX ===
<pre>
#!/bin/sh
CPUS=4
prefix=$(pwd)/install
export PKG_CONFIG_PATH="$prefix/lib/pkgconfig"
export ACLOCAL_FLAGS="-I $prefix/share/aclocal"
export PATH=$(pwd)/synfig-core/src/tool/.libs:$PATH
# Uncomment those line if you want to use g++ instead of the native clang
# compiler and preprocessor
#export CXX="/opt/local/bin/ccache /usr/bin/g++"
#export CPP="/usr/bin/cpp"
export CPPFLAGS="-I/opt/local/include"
export LDFLAGS="-L/opt/local/lib"

cd ETL &&
autoreconf --install --force &&
./configure --prefix $prefix &&
make --debug=b install &&
\
cd ../synfig-core &&
./bootstrap.sh &&
./configure --prefix $prefix --enable-optimization=0 --enable-debug &&
make --debug=b -j $CPUS install &&
\
cd ../synfig-studio &&
./bootstrap.sh &&
./configure --prefix $prefix --enable-optimization=0 --enable-debug &&
make --debug=b -j $CPUS install
</pre>

Skeleton Deformation Layer

2018-05-27T22:14:44Z

Hellocatfood: Removed gendered words

{{Title|Skeleton Deformation Layer}}
{{Template:TOCright}}
{{Category|Layers}}
{{Category|Distortions}}
{{NewTerminology}}


I'm a Draft please help me to be efficient ...




{{Title|Skeleton Deformation Layer}}
{{Category|Layers}}
{{NewTerminology}}

{{l|Image:skeleton deformation icon.png|64px}}

== About Skeleton Deformation Layers==

{{l|Skeleton Deformation Layer}} is for raster deformation (pixel level) and can be used to image layers or whatever is in the context of the skeleton deformation layer (the rendered result of what's below it).

Skeleton Deformation acts like a normal "raster" layer (i.e. Blur, Warp), it is a raster deformation.

The Skeleton Distortion layer allows to set the distortion area and mesh resolution.

The {{l|Layers Panel}}'s Show/Hide checkbox of the Skeleton Deformation Layer activate/deactivate the deformation and the visibility of the distortion area.

==Parameters of Skeleton Deformation Layers==

The parameters of the Skeleton Deformation Layers are:

{|border="0" align="none" style="border-collapse" cellpadding="3" cellspacing="0"
|-style="background:silver"
|'''Name'''||'''Value'''||'''Type'''
|-
||{{l|Image:Real_icon.png|16px}} {{l|Z Depth Parameter|Z Depth}}
||0.000000
||real
|-style="background:#eeeeee"
||{{l|Image:Real_icon.png|16px}} {{l|Amount Parameter|Amount}}
||1.000000
||real
|-
||{{l|Image:Integer_icon.png|16px}} {{l|Blend Method|Blend Method}}
||Composite
||integer
|-style="background:#eeeeee"
||{{l|Image:Integer_icon.png|16px}} {{l|Blur Layer|Type}}
||Fast Gaussian Blur
||integer
|-
||{{l|Image:Bones_icon.png|16px}} {{l|Bones|Bones}}
||
||list
|-style="background:#eeeeee"
||{{l|Image:Vector_icon.png|16px}} Point 1
||
||vector
|-
||{{l|Image:Vector_icon.png|16px}} Point 2
||
||vector
|-style="background:#eeeeee"
||{{l|Image:Integer_icon.png|16px}} Horizontal subdivisions
||32
||integer
|-
||{{l|Image:Integer_icon.png|16px}} Vertical subdivisions
||32
||integer
|}

== Usage of the Skeleton Deformation Layer ==

=== Set the distortion area ===

The Skeleton Deformation Layer's bound rectangle define the distortion area. You can modify it by dragging the handles of the first and second corners ({{literal|Point 1}} up left and {{literal|Point 2}} down right).

=== Build the skeleton ===

To setup the bones of the Skeleton Deformation Layer, first, deactivate the deformation unchecking the {{literal|Show}} checkbox of from the {{l|Layers Panel}}. Now you can move the first bone using its {{literal|Origin}} handle, change its orientation with the {{literal|Angle}} handle and its length using the {{literal|Local Length Scale}} handle. Right click in any handle of bones and choose {{literal|Create Child Bone}} to create another bone and adjust it with its handles. Any child bones will follow recursively his parents position.

Once setup the armature, control the influence. Enable {{l|Width Handle}} ({{shortcut|Alt|5}}) and set the influence area for each bone.

=== Reset the Pose ===

Once you have terminated to setup the bones of your skeleton, from the {{l|Layers Panel}}, right click on the {{l|Skeleton Deformation Layer}} and from the contextual menu choose {{literal|Reset Pose}} to create the initial pose (without deformation) of the skeleton.

Now you can animate your skeleton !

=== Video Howto ===
* [https://www.youtube.com/watch?v=M8zW1qCq8ng Bone-driven Image Distortion (part 4)]

{{Template:SkeletonDeformPartDisappear}}

== Specific parameters for Skeleton Deformation Layers ==

Some of the parameters of Skeleton Deformation Layers are common parameter that are shared for several types of Layers. Click on the links to see their definitions. Only the particular parameters for the Skeleton Deformation Layers are described here.

=== Bones ===
The {{literal|Bones}} parameter is a list of Bone elements.

The parameters of a {{literal|Bone}} are:

{|border="0" align="none" style="border-collapse" cellpadding="3" cellspacing="0"
|-style="background:#C0C0C0"
|'''Name'''||'''Value'''||'''Type'''
|-style="background:#"
||{{l|Image:Type_string_icon.png|16px}} Name
||Bone 1
||string

|-style="background:#eeeeee"
|| {{l|Parent Parameter|Parent}}
||No Parent
||bone_valuenode

|-style="background:#"
||{{l|Image:Type_vector_icon.png|16px}} {{l|Origin Parameter|Origin}}
||0.00000, 0.00000
||vector

|-style="background:#eeeeee"
||{{l|Image:Type_angle_icon.png|16px}} {{l|Angle Parameter|Angle}}
||0.00°
||angle

|-style="background:#"
||{{l|Image:Type_real_icon.png|16px}} {{l|Local Length Scale Parameter|Local Length Scale}}
||1.00000
||real

|-style="background:#eeeeee"
||{{l|Image:Type_real_icon.png|16px}} {{l|Bone Width Parameter|Bone Width}}
||0.10000
||real

|-style="background:#"
||{{l|Image:Type_real_icon.png|16px}} {{l|Recursive Length Scale Parameter|Recursive Length Scale}}
||1.00000
||real

|-style="background:#eeeeee"
||{{l|Image:Type_real_icon.png|16px}} {{l|Tip Width Parameter|Tip Width}}
||0.10000
||real

|-style="background:#"
||{{l|Image:Type_real_icon.png|16px}} {{l|Z Depth Parameter|Z Depth}}
||0.00000
||real

|-style="background:#eeeeee"
||{{l|Image:Type_real_icon.png|16px}} {{l|Length Setup Parameter|Length Setup}}
||1.00000
||real

|}

==== Name ====

==== Parent ====

==== Origin ====

Coordinate of the {{literal|Origin}} of the Bone.

==== Angle ====

Angle of the Bone.

==== Local Length Scale====

==== Bone Width====

==== Recursive Length Scale====

==== Tip Width====

==== Z Depth ====

This parameter can be used to change the 'depth' (order) of a Bone in a Skeleton Layer.

==== Length Setup ====

=== Point 1 ===
The parameter {{literal|Point 1}} is a Vector point defining the upper left corner of the distortion area.

=== Point 2 ===
The parameter {{literal|Point 2}} is a Vector point defining the bottom right corner of the distortion area.

=== Horizontal Subdivisions ===
Horizontal definition of the meshes. This integer value affect the distortion quality.

=== Vertical Subdivisions ===
Vertical definition of the meshes. This integer value affect the distortion quality.

== See also ==

* {{l|Cutout_Tool}} to select a piece of the composition by adding a mask.
* Vector art specific {{l|Skeleton Layer}}.

File:Tux.png

2014-12-22T23:40:30Z

Hellocatfood:

File:Gradient.png

2014-12-22T23:40:19Z

Hellocatfood:

Blend Method Parameter

2014-12-22T23:39:25Z

Hellocatfood:

{{Title|Blend Method Parameter}}
{{Category|Parameters}}
{{NewTerminology}}

The various compositing methods available for Layers in Synfig. (''What compositing/blending is.'')

By default, {{Literal|Blend Method}} parameter is {{Literal|Static}}. To animate it over the time, right click on it and choose {{Literal|Enable animation}}.

In the following descriptions, 'A' refers to the color on the layer with the blend method setting, and 'B' refers to the color on the layers beneath it. Note that in almost all layers, the alpha channel of the colors will have a scaling effect on the blending. The 'amount' parameter will also have a scaling effect. In most descriptions these 2 details have been glossed over.

In the examples that follow a gradient (A) is blended on the image of Tux penguin (B). The transparent areas are indicated with the checkerboard pattern.

A) [[File:gradient.png]] & B) [[File:tux.png]]

The currently available blend methods are:

==Composite==

This blend method is the default option, it simply displays the content of the layer. This blend mode is similar the layer blend mode '''Normal Mode''' often found in 2D programs.

[[File:Composite.png]]

==Straight==

This blend method looks similar to the previous one, except that the objects under a ''straight''-object will be invisible. So if there is a more or less transparent object on the ''Straight mode'' layer, the objects on the layers underneath won't show through it.

More precisely, the resulting color is "(A-B)*amount + B". So if amount is 1 the result is A and if amount is 0 the result is B. In particular, if amount is 1 and A is a very transparent color, the resulting color will also be A; despite the fact that A is very transparent, none of B's color is used.

[[File:straight.png]]

==Onto==

If a layer is set to the ''Onto'' blend method, only the parts of the layer that are over a not transparent area will be visible.

Precisely: this is the same as the Composite blend method except that the transparency of the resulting color is set to be the same as the transparency level of layer B.

[[File:onto.png]]

==Straight Onto==
This method is a combination of the two methods above. E.g. if an half-transparent object is set to ''Straight Onto'', it will only be visible over a non-transparent area, and the non-transparent part under that object won't be visible.

Precisely: the resulting color is "(X-B)*amount + B" where X is A but with its transparency set to A's transparency times B's transparency.

So if amount is 1 the result is A, but with its transparency multiplied by that of B, and if amount is 0 the result is B. In particular, if amount is 1 and A is a very transparent color, the resulting color will be a possibly more transparent version of A; despite the fact that A is very transparent, none of B's color is used in the result.

(Yuck. Are these 'precisely' comments useful?)[Yes!]

[[File:straight onto.png]]

==Behind==

This blend method makes the layer visible over transparent areas, and invisible over non-transparent areas, giving the impression that the layer is behind the other layers. It is often used for the "Shade" effect layer, to make a drop-shadow effect.

Precisely: this is the same as the composite blend method, but with A and B swapped. B is composited onto A instead of A being composited onto B.

[[File:behind.png]]

==Screen==

This blend method is similar to the '''Screen Mode''' often found in 2D programs. It combines the colors of the ''screen mode layer'' and the ones behind it, and gives a lighter result in general.

[[File:screen.png]]

==Overlay==
This is similar to '''PhotoShop''' - layer blend mode '''Overlay Mode'''

Precisely: define 3 new colours: RM = A * B; RS = 1-(1-A)*(1-B); RET = A*RS + (1-A)*RM then blend RET onto B as in the Onto method above(!)

Any idea what that is aiming to do? Or what the layer does in this '''PhotoShop''' program?
This appears to emulate the effect of a cross-fade between the two layers if they are set to equal amounts - i.e like 'add', but maintaining the overall brightness of the image

[[File:overlay.png]]

==Hard Light==

This is similar to '''PhotoShop''' - layer blend mode '''Hard Light Mode'''

For each of red, green and blue, if the component is in the top half of its range then calculate X=1-(1-(2A-1))*(1-B), otherwise calculate X=2AB, then blend X onto B as in the Onto method above.

Is this aiming to make bright colours brighter and dark colours darker?

[[File:hard light.png]]

==Multiply==
This is similar to '''PhotoShop''' - layer blend mode '''Multiply Mode'''

Precisely: the resulting colour is (((A*B)-B)*amount+B). The calculation is performed independently on red, green, and blue components. When amount is 0, this simplifies to B. When amount is 1 it simplifies to A*B.

[[File:multiply.png]]

==Divide==

''Describe me''

Precisely: the resulting color is (((B/A)-B)*amount)+B.

When amount is 0, this becomes simply B.

When amount is 1, this becomes B/A.

A very small quantity is added to A before dividing by it to avoid a divide-by-zero condition. This causes the divide blend method to bias toward positive values, but the effect is really negligible.

[[File:divide.png]]

==Add==

''Describe me''

Precisely: the resulting color is (B + A*A.alpha*amount). The calculation is performed independently on red, green, and blue components. The resulting color's alpha is B.alpha.

[[File:add.png]]

==Subtract==

''Describe me''

Precisely: the resulting colour is (B-A). The calculation is performed independently on red, green, and blue components.

[[File:subtract.png]]

==Difference==

''Describe me''

Precisely: the resulting colour is the absolute value of (B-A). The calculation is performed independently on red, green, and blue components.

[[File:difference.png]]

==Brighten==

''Describe me''

Precisely: for each of the red, green, and blue components, compare A's value with B's value and use the higher of the pair.

[[File:brighten.png]]

==Darken==

''Describe me''

Precisely: for each of the red, green, and blue components, compare A's value with B's value and use the lower of the pair.

[[File:darken.png]]

==Color==

''Describe me''

Precisely: the resulting colour is obtained by adjusting B to have the same U and V values as A, while keeping Y the same.

http://home.comcast.net/~pxegeek/synfig/straight.png + http://home.comcast.net/~pxegeek/synfig/synfigtux.png = http://home.comcast.net/~pxegeek/synfig/color.png

As this example looks just like the saturation one, perhaps a yellow gradient instead of a white one would be more illustrative

http://home.comcast.net/~pxegeek/synfig/yellowgradient.png + http://home.comcast.net/~pxegeek/synfig/synfigtux.png =
http://home.comcast.net/~pxegeek/synfig/coloryg.png

==Hue==

''Describe me''

Precisely: the resulting colour is obtained by adjusting B to have the same hue as A.

[[File:hue.png]]

==Saturation==

''Describe me''

Precisely: the resulting colour is obtained by adjusting B to have the same saturation as A. Saturation is the magnitude of the [http://en.wikipedia.org/wiki/YUV UV vector].

[[File:saturation.png]]

As this example is so similar to the 'Color' blend example, here it is with a yellow gradient -

http://home.comcast.net/~pxegeek/synfig/yellowgradient.png +
http://home.comcast.net/~pxegeek/synfig/synfigtux.png =
http://home.comcast.net/~pxegeek/synfig/saturationyg.png

==Luminance==

''Describe me''

Precisely: the resulting colour is obtained by adjusting B to have the same Y (luma) value as A, while keeping U and V the same.

[[File:luminance.png]]

==Alpha over==

''Describe me''

http://home.comcast.net/~pxegeek/synfig/straight.png + http://home.comcast.net/~pxegeek/synfig/synfigtux.png = http://home.comcast.net/~pxegeek/synfig/alphaover.png

==Alpha Brighten==

[[File:alpha brighten.png]]

==Alpha Darken==

[[File:alpha darken.png]]

File:Screen.png

2014-12-22T23:37:14Z

Hellocatfood:

File:Alpha darken.png

2014-12-22T23:36:59Z

Hellocatfood:

File:Alpha brighten.png

2014-12-22T23:36:54Z

Hellocatfood:

Blend Method Parameter

2014-12-22T23:36:10Z

Hellocatfood: Added more screenshots

{{Title|Blend Method Parameter}}
{{Category|Parameters}}
{{NewTerminology}}

The various compositing methods available for Layers in Synfig. (''What compositing/blending is.'')

By default, {{Literal|Blend Method}} parameter is {{Literal|Static}}. To animate it over the time, right click on it and choose {{Literal|Enable animation}}.

In the following descriptions, 'A' refers to the color on the layer with the blend method setting, and 'B' refers to the color on the layers beneath it. Note that in almost all layers, the alpha channel of the colors will have a scaling effect on the blending. The 'amount' parameter will also have a scaling effect. In most descriptions these 2 details have been glossed over.

In the examples that follow a gradient (A) is blended on the image of Tux penguin (B). The transparent areas are indicated with the checkerboard pattern.

A) http://home.comcast.net/~pxegeek/synfig/straight.png & B) http://home.comcast.net/~pxegeek/synfig/synfigtux.png

The currently available blend methods are:

==Composite==

This blend method is the default option, it simply displays the content of the layer. This blend mode is similar the layer blend mode '''Normal Mode''' often found in 2D programs.

[[File:Composite.png]]

==Straight==

This blend method looks similar to the previous one, except that the objects under a ''straight''-object will be invisible. So if there is a more or less transparent object on the ''Straight mode'' layer, the objects on the layers underneath won't show through it.

More precisely, the resulting color is "(A-B)*amount + B". So if amount is 1 the result is A and if amount is 0 the result is B. In particular, if amount is 1 and A is a very transparent color, the resulting color will also be A; despite the fact that A is very transparent, none of B's color is used.

[[File:straight.png]]

==Onto==

If a layer is set to the ''Onto'' blend method, only the parts of the layer that are over a not transparent area will be visible.

Precisely: this is the same as the Composite blend method except that the transparency of the resulting color is set to be the same as the transparency level of layer B.

[[File:onto.png]]

==Straight Onto==
This method is a combination of the two methods above. E.g. if an half-transparent object is set to ''Straight Onto'', it will only be visible over a non-transparent area, and the non-transparent part under that object won't be visible.

Precisely: the resulting color is "(X-B)*amount + B" where X is A but with its transparency set to A's transparency times B's transparency.

So if amount is 1 the result is A, but with its transparency multiplied by that of B, and if amount is 0 the result is B. In particular, if amount is 1 and A is a very transparent color, the resulting color will be a possibly more transparent version of A; despite the fact that A is very transparent, none of B's color is used in the result.

(Yuck. Are these 'precisely' comments useful?)[Yes!]

[[File:straight onto.png]]

==Behind==

This blend method makes the layer visible over transparent areas, and invisible over non-transparent areas, giving the impression that the layer is behind the other layers. It is often used for the "Shade" effect layer, to make a drop-shadow effect.

Precisely: this is the same as the composite blend method, but with A and B swapped. B is composited onto A instead of A being composited onto B.

[[File:behind.png]]

==Screen==

This blend method is similar to the '''Screen Mode''' often found in 2D programs. It combines the colors of the ''screen mode layer'' and the ones behind it, and gives a lighter result in general.

[[File:screen.png]]

==Overlay==
This is similar to '''PhotoShop''' - layer blend mode '''Overlay Mode'''

Precisely: define 3 new colours: RM = A * B; RS = 1-(1-A)*(1-B); RET = A*RS + (1-A)*RM then blend RET onto B as in the Onto method above(!)

Any idea what that is aiming to do? Or what the layer does in this '''PhotoShop''' program?
This appears to emulate the effect of a cross-fade between the two layers if they are set to equal amounts - i.e like 'add', but maintaining the overall brightness of the image

[[File:overlay.png]]

==Hard Light==

This is similar to '''PhotoShop''' - layer blend mode '''Hard Light Mode'''

For each of red, green and blue, if the component is in the top half of its range then calculate X=1-(1-(2A-1))*(1-B), otherwise calculate X=2AB, then blend X onto B as in the Onto method above.

Is this aiming to make bright colours brighter and dark colours darker?

[[File:hard light.png]]

==Multiply==
This is similar to '''PhotoShop''' - layer blend mode '''Multiply Mode'''

Precisely: the resulting colour is (((A*B)-B)*amount+B). The calculation is performed independently on red, green, and blue components. When amount is 0, this simplifies to B. When amount is 1 it simplifies to A*B.

[[File:multiply.png]]

==Divide==

''Describe me''

Precisely: the resulting color is (((B/A)-B)*amount)+B.

When amount is 0, this becomes simply B.

When amount is 1, this becomes B/A.

A very small quantity is added to A before dividing by it to avoid a divide-by-zero condition. This causes the divide blend method to bias toward positive values, but the effect is really negligible.

[[File:divide.png]]

==Add==

''Describe me''

Precisely: the resulting color is (B + A*A.alpha*amount). The calculation is performed independently on red, green, and blue components. The resulting color's alpha is B.alpha.

[[File:add.png]]

==Subtract==

''Describe me''

Precisely: the resulting colour is (B-A). The calculation is performed independently on red, green, and blue components.

[[File:subtract.png]]

==Difference==

''Describe me''

Precisely: the resulting colour is the absolute value of (B-A). The calculation is performed independently on red, green, and blue components.

[[File:difference.png]]

==Brighten==

''Describe me''

Precisely: for each of the red, green, and blue components, compare A's value with B's value and use the higher of the pair.

[[File:brighten.png]]

==Darken==

''Describe me''

Precisely: for each of the red, green, and blue components, compare A's value with B's value and use the lower of the pair.

[[File:darken.png]]

==Color==

''Describe me''

Precisely: the resulting colour is obtained by adjusting B to have the same U and V values as A, while keeping Y the same.

http://home.comcast.net/~pxegeek/synfig/straight.png + http://home.comcast.net/~pxegeek/synfig/synfigtux.png = http://home.comcast.net/~pxegeek/synfig/color.png

As this example looks just like the saturation one, perhaps a yellow gradient instead of a white one would be more illustrative

http://home.comcast.net/~pxegeek/synfig/yellowgradient.png + http://home.comcast.net/~pxegeek/synfig/synfigtux.png =
http://home.comcast.net/~pxegeek/synfig/coloryg.png

==Hue==

''Describe me''

Precisely: the resulting colour is obtained by adjusting B to have the same hue as A.

[[File:hue.png]]

==Saturation==

''Describe me''

Precisely: the resulting colour is obtained by adjusting B to have the same saturation as A. Saturation is the magnitude of the [http://en.wikipedia.org/wiki/YUV UV vector].

[[File:saturation.png]]

As this example is so similar to the 'Color' blend example, here it is with a yellow gradient -

http://home.comcast.net/~pxegeek/synfig/yellowgradient.png +
http://home.comcast.net/~pxegeek/synfig/synfigtux.png =
http://home.comcast.net/~pxegeek/synfig/saturationyg.png

==Luminance==

''Describe me''

Precisely: the resulting colour is obtained by adjusting B to have the same Y (luma) value as A, while keeping U and V the same.

[[File:luminance.png]]

==Alpha over==

''Describe me''

http://home.comcast.net/~pxegeek/synfig/straight.png + http://home.comcast.net/~pxegeek/synfig/synfigtux.png = http://home.comcast.net/~pxegeek/synfig/alphaover.png

==Alpha Brighten==

[[File:alpha brighten.png]]

==Alpha Darken==

[[File:alpha darken.png]]

File:Luminance.png

2014-12-22T23:26:57Z

Hellocatfood:

File:Saturation.png

2014-12-22T23:26:42Z

Hellocatfood:

File:Hue.png

2014-12-22T23:26:24Z

Hellocatfood:

File:Darken.png

2014-12-22T23:26:10Z

Hellocatfood:

File:Brighten.png

2014-12-22T23:25:59Z

Hellocatfood:

File:Difference.png

2014-12-22T23:25:29Z

Hellocatfood:

File:Subtract.png

2014-12-22T23:25:08Z

Hellocatfood:

File:Add.png

2014-12-22T23:24:55Z

Hellocatfood:

File:Divide.png

2014-12-22T23:24:39Z

Hellocatfood:

File:Multiply.png

2014-12-22T23:24:17Z

Hellocatfood:

File:Hard light.png

2014-12-22T23:23:43Z

Hellocatfood:

File:Overlay.png

2014-12-22T23:23:27Z

Hellocatfood:

File:Behind.png

2014-12-22T23:23:08Z

Hellocatfood:

File:Straight onto.png

2014-12-22T23:22:41Z

Hellocatfood:

File:Onto.png

2014-12-22T23:22:23Z

Hellocatfood:

File:Straight.png

2014-12-22T23:20:30Z

Hellocatfood:

Blend Method Parameter

2014-12-22T23:19:57Z

Hellocatfood: Added new screenshots

{{Title|Blend Method Parameter}}
{{Category|Parameters}}
{{NewTerminology}}

The various compositing methods available for Layers in Synfig. (''What compositing/blending is.'')

By default, {{Literal|Blend Method}} parameter is {{Literal|Static}}. To animate it over the time, right click on it and choose {{Literal|Enable animation}}.

In the following descriptions, 'A' refers to the color on the layer with the blend method setting, and 'B' refers to the color on the layers beneath it. Note that in almost all layers, the alpha channel of the colors will have a scaling effect on the blending. The 'amount' parameter will also have a scaling effect. In most descriptions these 2 details have been glossed over.

In the examples that follow a gradient (A) is blended on the image of Tux penguin (B). The transparent areas are indicated with the checkerboard pattern.

A) http://home.comcast.net/~pxegeek/synfig/straight.png & B) http://home.comcast.net/~pxegeek/synfig/synfigtux.png

The currently available blend methods are:

==Composite==

This blend method is the default option, it simply displays the content of the layer. This blend mode is similar the layer blend mode '''Normal Mode''' often found in 2D programs.

[[File:Composite.png]]

==Straight==

This blend method looks similar to the previous one, except that the objects under a ''straight''-object will be invisible. So if there is a more or less transparent object on the ''Straight mode'' layer, the objects on the layers underneath won't show through it.

More precisely, the resulting color is "(A-B)*amount + B". So if amount is 1 the result is A and if amount is 0 the result is B. In particular, if amount is 1 and A is a very transparent color, the resulting color will also be A; despite the fact that A is very transparent, none of B's color is used.

[[File:straight.png]]

==Onto==

If a layer is set to the ''Onto'' blend method, only the parts of the layer that are over a not transparent area will be visible.

Precisely: this is the same as the Composite blend method except that the transparency of the resulting color is set to be the same as the transparency level of layer B.

[[File:onto.png]]

==Straight Onto==
This method is a combination of the two methods above. E.g. if an half-transparent object is set to ''Straight Onto'', it will only be visible over a non-transparent area, and the non-transparent part under that object won't be visible.

Precisely: the resulting color is "(X-B)*amount + B" where X is A but with its transparency set to A's transparency times B's transparency.

So if amount is 1 the result is A, but with its transparency multiplied by that of B, and if amount is 0 the result is B. In particular, if amount is 1 and A is a very transparent color, the resulting color will be a possibly more transparent version of A; despite the fact that A is very transparent, none of B's color is used in the result.

(Yuck. Are these 'precisely' comments useful?)[Yes!]

[[File:straight onto.png]]

==Behind==

This blend method makes the layer visible over transparent areas, and invisible over non-transparent areas, giving the impression that the layer is behind the other layers. It is often used for the "Shade" effect layer, to make a drop-shadow effect.

Precisely: this is the same as the composite blend method, but with A and B swapped. B is composited onto A instead of A being composited onto B.

[[File:behind.png]]

==Screen==

This blend method is similar to the '''Screen Mode''' often found in 2D programs. It combines the colors of the ''screen mode layer'' and the ones behind it, and gives a lighter result in general.

[[File:screen.png]]

==Overlay==
This is similar to '''PhotoShop''' - layer blend mode '''Overlay Mode'''

Precisely: define 3 new colours: RM = A * B; RS = 1-(1-A)*(1-B); RET = A*RS + (1-A)*RM then blend RET onto B as in the Onto method above(!)

Any idea what that is aiming to do? Or what the layer does in this '''PhotoShop''' program?
This appears to emulate the effect of a cross-fade between the two layers if they are set to equal amounts - i.e like 'add', but maintaining the overall brightness of the image

[[File:overlay.png]]

==Hard Light==

This is similar to '''PhotoShop''' - layer blend mode '''Hard Light Mode'''

For each of red, green and blue, if the component is in the top half of its range then calculate X=1-(1-(2A-1))*(1-B), otherwise calculate X=2AB, then blend X onto B as in the Onto method above.

Is this aiming to make bright colours brighter and dark colours darker?

[[File:hard light.png]]

==Multiply==
This is similar to '''PhotoShop''' - layer blend mode '''Multiply Mode'''

Precisely: the resulting colour is (((A*B)-B)*amount+B). The calculation is performed independently on red, green, and blue components. When amount is 0, this simplifies to B. When amount is 1 it simplifies to A*B.

[[File:multiply.png]]

==Divide==

''Describe me''

Precisely: the resulting color is (((B/A)-B)*amount)+B.

When amount is 0, this becomes simply B.

When amount is 1, this becomes B/A.

A very small quantity is added to A before dividing by it to avoid a divide-by-zero condition. This causes the divide blend method to bias toward positive values, but the effect is really negligible.

[[File:divide.png]]

==Add==

''Describe me''

Precisely: the resulting color is (B + A*A.alpha*amount). The calculation is performed independently on red, green, and blue components. The resulting color's alpha is B.alpha.

[[File:add.png]]

==Subtract==

''Describe me''

Precisely: the resulting colour is (B-A). The calculation is performed independently on red, green, and blue components.

[[File:subtract.png]]

==Difference==

''Describe me''

Precisely: the resulting colour is the absolute value of (B-A). The calculation is performed independently on red, green, and blue components.

[[File:difference.png]]

==Brighten==

''Describe me''

Precisely: for each of the red, green, and blue components, compare A's value with B's value and use the higher of the pair.

[[File:brighten.png]]

==Darken==

''Describe me''

Precisely: for each of the red, green, and blue components, compare A's value with B's value and use the lower of the pair.

[[File:darken.png]]

==Color==

''Describe me''

Precisely: the resulting colour is obtained by adjusting B to have the same U and V values as A, while keeping Y the same.

http://home.comcast.net/~pxegeek/synfig/straight.png + http://home.comcast.net/~pxegeek/synfig/synfigtux.png = http://home.comcast.net/~pxegeek/synfig/color.png

As this example looks just like the saturation one, perhaps a yellow gradient instead of a white one would be more illustrative

http://home.comcast.net/~pxegeek/synfig/yellowgradient.png + http://home.comcast.net/~pxegeek/synfig/synfigtux.png =
http://home.comcast.net/~pxegeek/synfig/coloryg.png

==Hue==

''Describe me''

Precisely: the resulting colour is obtained by adjusting B to have the same hue as A.

[[File:hue.png]]

==Saturation==

''Describe me''

Precisely: the resulting colour is obtained by adjusting B to have the same saturation as A. Saturation is the magnitude of the [http://en.wikipedia.org/wiki/YUV UV vector].

[[File:saturation.png]]

As this example is so similar to the 'Color' blend example, here it is with a yellow gradient -

http://home.comcast.net/~pxegeek/synfig/yellowgradient.png +
http://home.comcast.net/~pxegeek/synfig/synfigtux.png =
http://home.comcast.net/~pxegeek/synfig/saturationyg.png

==Luminance==

''Describe me''

Precisely: the resulting colour is obtained by adjusting B to have the same Y (luma) value as A, while keeping U and V the same.

[[File:luminance.png]]

==Alpha over==

''Describe me''

http://home.comcast.net/~pxegeek/synfig/straight.png + http://home.comcast.net/~pxegeek/synfig/synfigtux.png = http://home.comcast.net/~pxegeek/synfig/alphaover.png

Blend Method Parameter

2014-12-22T23:10:57Z

Hellocatfood: /* Composite */

{{Title|Blend Method Parameter}}
{{Category|Parameters}}
{{NewTerminology}}

The various compositing methods available for Layers in Synfig. (''What compositing/blending is.'')

By default, {{Literal|Blend Method}} parameter is {{Literal|Static}}. To animate it over the time, right click on it and choose {{Literal|Enable animation}}.

In the following descriptions, 'A' refers to the color on the layer with the blend method setting, and 'B' refers to the color on the layers beneath it. Note that in almost all layers, the alpha channel of the colors will have a scaling effect on the blending. The 'amount' parameter will also have a scaling effect. In most descriptions these 2 details have been glossed over.

In the examples that follow a gradient (A) is blended on the image of Tux penguin (B). The transparent areas are indicated with the checkerboard pattern.

A) http://home.comcast.net/~pxegeek/synfig/straight.png & B) http://home.comcast.net/~pxegeek/synfig/synfigtux.png

The currently available blend methods are:

==Composite==

This blend method is the default option, it simply displays the content of the layer. This blend mode is similar the layer blend mode '''Normal Mode''' often found in 2D programs.

[[File:Composite.png]]

==Straight==

This blend method looks similar to the previous one, except that the objects under a ''straight''-object will be invisible. So if there is a more or less transparent object on the ''Straight mode'' layer, the objects on the layers underneath won't show through it.

More precisely, the resulting color is "(A-B)*amount + B". So if amount is 1 the result is A and if amount is 0 the result is B. In particular, if amount is 1 and A is a very transparent color, the resulting color will also be A; despite the fact that A is very transparent, none of B's color is used.

http://home.comcast.net/~pxegeek/synfig/straight.png + http://home.comcast.net/~pxegeek/synfig/synfigtux.png = http://home.comcast.net/~pxegeek/synfig/straight.png

==Onto==

If a layer is set to the ''Onto'' blend method, only the parts of the layer that are over a not transparent area will be visible.

Precisely: this is the same as the Composite blend method except that the transparency of the resulting color is set to be the same as the transparency level of layer B.

http://home.comcast.net/~pxegeek/synfig/straight.png + http://home.comcast.net/~pxegeek/synfig/synfigtux.png = http://home.comcast.net/~pxegeek/synfig/onto.png

==Straight Onto==
This method is a combination of the two methods above. E.g. if an half-transparent object is set to ''Straight Onto'', it will only be visible over a non-transparent area, and the non-transparent part under that object won't be visible.

Precisely: the resulting color is "(X-B)*amount + B" where X is A but with its transparency set to A's transparency times B's transparency.

So if amount is 1 the result is A, but with its transparency multiplied by that of B, and if amount is 0 the result is B. In particular, if amount is 1 and A is a very transparent color, the resulting color will be a possibly more transparent version of A; despite the fact that A is very transparent, none of B's color is used in the result.

(Yuck. Are these 'precisely' comments useful?)[Yes!]

http://home.comcast.net/~pxegeek/synfig/straight.png + http://home.comcast.net/~pxegeek/synfig/synfigtux.png = http://home.comcast.net/~pxegeek/synfig/straightonto.png

==Behind==

This blend method makes the layer visible over transparent areas, and invisible over non-transparent areas, giving the impression that the layer is behind the other layers. It is often used for the "Shade" effect layer, to make a drop-shadow effect.

Precisely: this is the same as the composite blend method, but with A and B swapped. B is composited onto A instead of A being composited onto B.

http://home.comcast.net/~pxegeek/synfig/straight.png + http://home.comcast.net/~pxegeek/synfig/synfigtux.png = http://home.comcast.net/~pxegeek/synfig/behind.png

==Screen==

This blend method is similar to the '''Screen Mode''' often found in 2D programs. It combines the colors of the ''screen mode layer'' and the ones behind it, and gives a lighter result in general.

http://home.comcast.net/~pxegeek/synfig/straight.png + http://home.comcast.net/~pxegeek/synfig/synfigtux.png = http://home.comcast.net/~pxegeek/synfig/screen.png

==Overlay==
This is similar to '''PhotoShop''' - layer blend mode '''Overlay Mode'''

Precisely: define 3 new colours: RM = A * B; RS = 1-(1-A)*(1-B); RET = A*RS + (1-A)*RM then blend RET onto B as in the Onto method above(!)

Any idea what that is aiming to do? Or what the layer does in this '''PhotoShop''' program?
This appears to emulate the effect of a cross-fade between the two layers if they are set to equal amounts - i.e like 'add', but maintaining the overall brightness of the image

http://home.comcast.net/~pxegeek/synfig/straight.png + http://home.comcast.net/~pxegeek/synfig/synfigtux.png = http://home.comcast.net/~pxegeek/synfig/overlay.png

==Hard Light==

This is similar to '''PhotoShop''' - layer blend mode '''Hard Light Mode'''

For each of red, green and blue, if the component is in the top half of its range then calculate X=1-(1-(2A-1))*(1-B), otherwise calculate X=2AB, then blend X onto B as in the Onto method above.

Is this aiming to make bright colours brighter and dark colours darker?

http://home.comcast.net/~pxegeek/synfig/straight.png + http://home.comcast.net/~pxegeek/synfig/synfigtux.png = http://home.comcast.net/~pxegeek/synfig/hardlight.png

==Multiply==
This is similar to '''PhotoShop''' - layer blend mode '''Multiply Mode'''

Precisely: the resulting colour is (((A*B)-B)*amount+B). The calculation is performed independently on red, green, and blue components. When amount is 0, this simplifies to B. When amount is 1 it simplifies to A*B.

http://home.comcast.net/~pxegeek/synfig/straight.png + http://home.comcast.net/~pxegeek/synfig/synfigtux.png = http://home.comcast.net/~pxegeek/synfig/multiply.png

==Divide==

''Describe me''

Precisely: the resulting color is (((B/A)-B)*amount)+B.

When amount is 0, this becomes simply B.

When amount is 1, this becomes B/A.

A very small quantity is added to A before dividing by it to avoid a divide-by-zero condition. This causes the divide blend method to bias toward positive values, but the effect is really negligible.

http://home.comcast.net/~pxegeek/synfig/straight.png + http://home.comcast.net/~pxegeek/synfig/synfigtux.png = http://home.comcast.net/~pxegeek/synfig/divide.png

==Add==

''Describe me''

Precisely: the resulting color is (B + A*A.alpha*amount). The calculation is performed independently on red, green, and blue components. The resulting color's alpha is B.alpha.

http://home.comcast.net/~pxegeek/synfig/straight.png + http://home.comcast.net/~pxegeek/synfig/synfigtux.png = http://home.comcast.net/~pxegeek/synfig/add.png

==Subtract==

''Describe me''

Precisely: the resulting colour is (B-A). The calculation is performed independently on red, green, and blue components.

http://home.comcast.net/~pxegeek/synfig/straight.png + http://home.comcast.net/~pxegeek/synfig/synfigtux.png = http://home.comcast.net/~pxegeek/synfig/subtract.png

==Difference==

''Describe me''

Precisely: the resulting colour is the absolute value of (B-A). The calculation is performed independently on red, green, and blue components.

http://home.comcast.net/~pxegeek/synfig/straight.png + http://home.comcast.net/~pxegeek/synfig/synfigtux.png = http://home.comcast.net/~pxegeek/synfig/difference.png

==Brighten==

''Describe me''

Precisely: for each of the red, green, and blue components, compare A's value with B's value and use the higher of the pair.

http://home.comcast.net/~pxegeek/synfig/straight.png + http://home.comcast.net/~pxegeek/synfig/synfigtux.png = http://home.comcast.net/~pxegeek/synfig/brighten.png

==Darken==

''Describe me''

Precisely: for each of the red, green, and blue components, compare A's value with B's value and use the lower of the pair.

http://home.comcast.net/~pxegeek/synfig/straight.png + http://home.comcast.net/~pxegeek/synfig/synfigtux.png = http://home.comcast.net/~pxegeek/synfig/darken.png

==Color==

''Describe me''

Precisely: the resulting colour is obtained by adjusting B to have the same U and V values as A, while keeping Y the same.

http://home.comcast.net/~pxegeek/synfig/straight.png + http://home.comcast.net/~pxegeek/synfig/synfigtux.png = http://home.comcast.net/~pxegeek/synfig/color.png

As this example looks just like the saturation one, perhaps a yellow gradient instead of a white one would be more illustrative

http://home.comcast.net/~pxegeek/synfig/yellowgradient.png + http://home.comcast.net/~pxegeek/synfig/synfigtux.png =
http://home.comcast.net/~pxegeek/synfig/coloryg.png

==Hue==

''Describe me''

Precisely: the resulting colour is obtained by adjusting B to have the same hue as A.

http://home.comcast.net/~pxegeek/synfig/straight.png + http://home.comcast.net/~pxegeek/synfig/synfigtux.png = http://home.comcast.net/~pxegeek/synfig/hue.png

==Saturation==

''Describe me''

Precisely: the resulting colour is obtained by adjusting B to have the same saturation as A. Saturation is the magnitude of the [http://en.wikipedia.org/wiki/YUV UV vector].

http://home.comcast.net/~pxegeek/synfig/straight.png + http://home.comcast.net/~pxegeek/synfig/synfigtux.png = http://home.comcast.net/~pxegeek/synfig/saturation.png

As this example is so similar to the 'Color' blend example, here it is with a yellow gradient -

http://home.comcast.net/~pxegeek/synfig/yellowgradient.png +
http://home.comcast.net/~pxegeek/synfig/synfigtux.png =
http://home.comcast.net/~pxegeek/synfig/saturationyg.png

==Luminance==

''Describe me''

Precisely: the resulting colour is obtained by adjusting B to have the same Y (luma) value as A, while keeping U and V the same.

http://home.comcast.net/~pxegeek/synfig/straight.png + http://home.comcast.net/~pxegeek/synfig/synfigtux.png = http://home.comcast.net/~pxegeek/synfig/luminance.png

==Alpha over==

''Describe me''

http://home.comcast.net/~pxegeek/synfig/straight.png + http://home.comcast.net/~pxegeek/synfig/synfigtux.png = http://home.comcast.net/~pxegeek/synfig/alphaover.png

File:Composite.png

2014-12-22T23:09:50Z

Hellocatfood: Composite blend mode

Composite blend mode

Doc:Gimp2synfig

2014-12-19T13:50:00Z

Hellocatfood: Updated screenshots

To simplify the work of animating my cartoon about a mouse, a plug-in for the [http://gimp.org/ GIMP] raster editor has been written, to allow the direct exporting of multi-layered images to corresponding layers of the 2D animation package Synfig.

The plug-in registers itself in the GIMP image menu <image> > File > Export > Synfig.

[http://i.imgur.com/C8wKUtkl.png http://i.imgur.com/C8wKUtkl.png]

There are export options you can choose. If the field "output path" is empty, the synfig canvas will be kept in the same directory as the initial picture.

[http://i.imgur.com/958wQ5P.png http://i.imgur.com/958wQ5P.png]

Here is the result:

[http://i.imgur.com/pYFAxCll.png http://i.imgur.com/pYFAxCll.png]

[http://i.imgur.com/kgOufoSl.png http://i.imgur.com/kgOufoSl.png]

At the top you can see the initial image in Gimp, and at the bottom the same image imported into Synfig.

You can download the [http://akhilman.googlepages.com/synfigexport.py synfigexport plugin here].

To make it work, gimp must support Python, and the most recent version of Python must be installed on your computer.

To install this plug-in, simply put the file in ~/.gimp-*/plug-ins/ and make it executable (chmod +x synfigexport.py), then restart gimp.

This program is licensed under Creative Commons Attribution 3.0 Unported License. Distribution and updating of the code is appreciated.