How the Style Editor works
OUTPUT AND INPUT PINS
1. About
The Style Editor is a node-based filter graph editor that allows you to build complex styles using filter
nodes and connections. Every node has one or more Input and Output pins, except for Generator
nodes, which have no input pins. !
Note: a filter node, or node, is a construction element in the Style Editor that represents a basic filter,
a built-in style or a style created by a user.
!
There are 5 different pin colors that correspond to 5 different kinds of connections:
!
!
White: Image pins
Blue: Palette pins
Yellow: Curves pins
Green: Stroke pins
Purple: Vectorial pins (which are generally used as stroke directions)
In the Style Editor, each filter shows which pins can be connected to it. On the sides of the filters, you
can see the edges in different colors: most of them are white/white, but some specific ones show the
number and type of input pins.
!
2. How to use the pins
!
Any kind of pin can be connected only to a pin of the same color.
!
•
•
An Input pin can only receive only one input connection. But, from one Output pin, there can be as
many output connections as you want.
!
Nodes can have any number of input and output pins.
!
•
•
Generators do not have input pins but you will not find any of these nodes without at least one
output pin.
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
•
!
•
If a node has more than one input pin, the first one is always the primary input pin that must be
connected. This is usually an image input pin, but not always. The other pins on the node do not
need to be connected. The pin type does not matter, since the second input pin can also be an
image input pin, but the connection still remains optional, because it is a secondary pin, not the
primary one.
In other words, except for the primary input pin (which is required), connecting the other pins is
optional. The node will work fine without those other connections, but will use its default values for
the pins that are not connected to any other nodes.
!
The Result Filter is able to add new input pins to itself dynamically.
!
•
3. Creating a style in the Style Editor
Open an image and then go to Pro on the Donut widget then click on the Editor icon. You are now in
the Style Editor’s Workspace.
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
You will see the default connection line between the Image Source and the Result Filter in the Editing
pane.
!
Next Select a style, we chose Building Blocks/Simple Styles/Random Painter. Drag and drop this style
into the Style Editor workspace.
A filter node will appear. You must connect the primary Input and Output pins to other pins of the
same color to make the filter graph work.
!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Connect the Image Source's Output pin to the Image Input pin of your node by dragging out an
arrow with your mouse from the Output pin to the Input pin. The Input pin will be highlighted.
!
Then, by dragging an arrow from the Output pin to the Result Filter, which is docked on the right side
of the graph editor, connect the node to the already existing Layer #1. The area that represents this
layer in the Result Filter is highlighted.
!
!
!
!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Note: When you first load an image, you always see it in the Compositing viewport unchanged
because no filter is acting on it yet. Because there is no active filter or style yet, a default connection
line appears in the Style Editor. This default direct connection line will disappear when you connect a
node between the Source and the Result Filter, and new connection lines will appear between each
added and connected node as you work. !
Right-click on the Random Painter filter and select to add a second style after it. Click ‘Insert After’ and
select the style you want to add. We chose Building Blocks/Simple Styles/Texturizer.
!
The Texturizer filter will be automatically linked: Random Painter's output pin will be connected to the
Texturizer's input pin, while the Texturizer's output pin will be automatically be linked to the Layer #1
result filter. (You could have also dragged and dropped the Texturizer filter in the workspace, then
you should have connected the two filters manually by drawing the arrows from the input to output
pins).
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!
Click on the nodes in the workspace, and in the Settings pane on the right you can personalize the
selected filter node by dragging the slider. We have changed the Random Painter's brush family to
‘Eraser Chalk 01’ and also modified the brush sizes. !
We will now insert a new filter: ‘Outlines with Scanned Brushes’. When connecting the filter or style, you
can decide whether to create a new layer above or beneath the previously created Layer#1.
!
Drag and drop the new ‘Outlines with Scanned Brushes filter’. Link the Image Source Output to the
Outlines with Scanned Brushes style’s Input and then connect its Output to the Result Filter. A
highlighted area will appear under or above the existing Layer #1, which lets you know where the
new layer will be inserted. We chose to connect the new filter above the previous ‘Random Painter’.
!
Note: The Result Filter represents the layers that you can find in the Compositing view on the right
side in the Images and Layers pane. When there is a single layer, the Result Filter is displayed as an
undivided column. When you have two or more layers, the Result Filter will be divided vertically into
the same number of parts. You can create new layers for your results by adding them in the
Compositing view or in the Style Editor.
!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
If necessary, change the new filter’s properties in Settings. We changed the Detector type to ‘Sketch2’,
the brush family to ‘Chalk 06’ and decreased the Brush width. To have a preview of the new outlines,
click ‘Render Preview’ in the Brush Selector window. As for the ‘Random Painter’, we have changed
again the brush sizes and increased the number of layers and strokes.
!
You can insert as many styles and filters as you want. We added a third layer, above the other two:
‘Reveal original’.
!
Also, if necessary, select the upper layer and change the Layer Blending Mode in the Settings pane
on the right. The result is immediately displayed in the Preview window.
!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
When you are done, you can switch back to the Compositing pane (click the Home button in the
center of the Donut Widget) and see the result. The layers that you have created in the Style Editor
will be listed in the Layer browser.
!
Here is the final image:
MADE BY PHOTODONUT
WWW.PHOTODONUT.COM
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!