Fatpaint User Manual - How our Graphic Design Software and Image Editor works

This manual explains the most important concepts and features of our online graphic design application. Far from all features are explained, so we recommend that you watch the tutorial videos, otherwise it will be difficult for you to fully understand the editor. About objects About graphical objects About effect objects About utility objects About object grouping About the paint tool About the Rich Text editor Start Fatpaint Press to start the free web app. Nothing to download, no sign-up. Objects Objects are the individual elements that can be created on a page. These elements have a type that belong to one of the categories “Graphical”, “Effect” or “Utility”. The chosen Object, is the object that is selected and has the input focus. It is marked with a green border around the object's thumbnail in the “Objects” panel. To choose an Object, you can press on it on the canvas (if it's graphical) or press on it's thumbnail image in the “Objects” panel. All objects have individual properties, which are the properties you see on the “Object” sub panel, at the bottom of the Tools panel. When changing between different objects, the “Object” panel changes accordingly, depending on the object type. The set of properties are the same for all Graphical Objects, and will differ for each object type of the other categories. It's possible to open multiple “Object” panels on screen. Just click with the mouse on the object you want to edit, and select “Open the object panel” action in the menu. Graphical Objects The graphical object types are: Text, Image, Vector Drawing, Vector Clipart and Panel. Graphical objects are created mostly using the tool “Graphical objects”, the last icon on the “Tools” panel. Objects can also be created via the “Objects” editor window menu. It's also possible to duplicate existing objects by pressing the “Duplicate” button on the “Object” panel or by clicking with the mouse on the source object and selecting “Duplicate” in the menu. Graphical Objects have a Content, which is where the actual image data is placed, and each Content type, e.q, vector, bitmap image, text and so on, have their own editors which are accessed from within the “Content” sub panel (inside the Tools panel), mostly inside their own tab-pane. For image objects, these are the “Layers” and “Paint” tab-panes. To change the Content properties (image data, size, layers, etc., depending on the type), you need to choose an apropriate tool or the "Move and transform content" tool (icon number 2). You can also press Ctrl+E or press directly on the Content panel, even though it is faded (you can also press on a tab inside of it). When the Content panel is enabled, we say the editor is in Edit mode. When the editor is in Edit mode, it's not possible to change the properties in the "Object" panel. So when you need to do something on the Object, you have to leave Edit mode by choosing the tool "Move and transform" (first icon), or by pressing Ctrl+E, or by pressing on the faded "Object" panel or one of its tab-pane. So basically, press the first tool icon for enabling the Object panel, allowing you to change the object, and the second tool icon is for enabling the Content panel, allowing you to change the content of objects, such as layers, drawing, painting and writing text. Graphical objects can be moved to another page, just choose the page number on the “P1″ tab in the “Object” panel. Graphical objects can mask or be masked by other graphical objects. When a graphical object masks another object, the graphics on the destination object that is outside of the mask graphic, is hidden. So if f.ex. you have a black circle image and you use it to mask a white square of the same size, the end result will be a white circle (if the circle is positioned on the center of the square). This is because any parts of the square that are outside of the circle, will be hidden. Masks can only be applied to graphical objects that are on the same object hierarchy level. So, if the white square from before was a child of another object, the circle must also be under the same parent object. Graphical objects have a “Blend mode“, you can find it in the “P2″ tab of the “Object” panel. The blend mode only has any meaning when the object is covering another graphical object. So the blend mode decides how the object blends with the background. The blend mode can also be set on the layers of Image objects, and on the paths of vector drawing objects. Graphical objects can be a Master object. When duplications of a master object are created, or when using Copy and Paste (Ctrl+C and Ctrl+V), these new mastered objects will follow the changes made to the master. So changes to the master object will cause the duplications to change as well, unless the equivalent property on the duplicate object, was previously modified. So the changes you make on the mastered object, will not be overwritten when changing the equivalent property on the master. When choosing the “on all pages” chekbox of a master object. The object will automaticaly be created on all pages. Effect Objects These are the effect object types: Blur, Shadow, Bevel, Glow, Color, Gradient Bevel and Gradent Glow. It's possible to add effects to all graphical objects. To add an effekt at the Object level, just go to the “Effects” tab in the “Object” panel. For the object types Image and Vector drawing, effects can also be added at the Content level. For Image content, effects can be added to the Layers (Ctrl+L), in the “Effects” tab. With vector drawing content, effects can be added to paths (Ctrl+D), in the “FX” tab. Effect objects are for the most created from with the “Effects” or “FX” tab, but can also be created from the “Objects” editor window menu. They can be re-used multiple times on multiple objects and object contents. This is also a very strong and usefull feature that you should be using often in your projects. Changing the effect will change the end result of all objects where the effect has been applyed.

Utility Objects

These are objects that help the user. At the moment there is only the Guide object type.
The guide is used to help with the placement of graphical objects on the page. On the menu "Objects->Add", you can create a new guide.

Grouping objects

It's possible to select multiple objects by holding the Shift or the Ctrl key down while pressing on the object thumbnails. When multiple graphical objects are selected, their position in the canvas can be moved. Objects can also be deleted as a group.

To scale muliple objects as a group, each individual object need to be moved inside a Parent graphical object. Most often, the Panel object is the one used as a parent because it don't have any content, it only has the option of setting the background color. When scaling the Parent object, all it's Childrens objects, will scale as well.

A Parent object is a graphical object that contain one or more graphical objects (Childrens). Children objects can themselves be a Parent object for other graphical objects, thus, its possible to create a hiearchy of objects, one inside another. This is a very usefull feature when doing graphical design.
The graphical parts of a children object that is outside the parent object's area are hidden.

Children objects can either exist inside the Parent object or inside the Parent object's content. When inside the content, effects added to the parent object will also be applied to the childrens. This is because effects only apply to an object's content, so if the childrens are inside the content of the parent, the parent's effects will be applied on the childrens as well.

To add effects on multiple objects, set the children objects property “Inside content” of each children object. That property is found in the “Object properties” panel, tab “P1″.

There is a special circumstance where effects can be applied to childrens that are not inside the content of their nearest parent, as long as in the parent hierarchy, one of the childrens/parents further up the hierarchy are inside the content of it's parent. This is probably the hardest concept to understand, but luckly, it's a feature you'll probably never will need. Under this circumstance, the checkbox “on object” of the effect's bar in the “Effects” tab in the “Object properties” panel, will be set.

The paint tool

For Image objects, it is possible to paint with a brush. Just choose a paint tool in the tools panel to start painting. An image object will be added automatically if necessary. Pressing "Ctrl+P" will take you directly to the tab "Paint" of the "Content" panel. Press the brush dropdown box to choose a different brush, there are many to choose from. You can also create your own brush sets.

In the “Paint” panel, there are 8 palettes (8 radio buttons). On each palette you can have different settings for the brush and the paint mode. Each of the paint tools and the eraser can point to a different or the same palette. They remember the one they point to when you switch between the tools.

By default, palette 1 is given to the paint tools (brush, airbrush, pen, bucket fill) and palette 2 is given to the Eraser tool. So, by default when pressing the Eraser tool, palette 2 will be selected, and when choosing one of the paint tools, palette 1 will be selected.

Always when choosing no color (the white box with a red line a cross it) in the Color Picker tool, the mode will be set to “Erase”. And when in the “Erase” mode and a color is picked, the mode will be set to “Normal”.

When using the stylus of the tablet (the part you normaly paint with), the last used paint tool will be picked (By default, the brush tool). When using the eraser of the tablet, the Eraser tool will be used.

So if you want to erase with some color, select the Eraser tool, choose the palette you want and pick a color.

Paint with effects

Go to the Layers tool (Ctrl+L) and add effects. Then go to the paint tool and choose "Apply layer effects and colors" in the dropdown box "Mode". When you do this, the effects will disappear and it will be possible to paint the effects on the layer.

If you have painted and then leave the paint tool, the layer you painted on will be Merged. When this happens, new graphics data are created for the layer, and all the effects and colors you might have added will no longer be on the layer. This happens because all graphics on the layer have been merged (Frozen), and a new bitmap have been created for the layer.

Next to the "Effects" tab in the Layer tool, you'll find the "Colors" tab (its considered to be an effect), and it is also possible to paint with it, just like painting with effects. After a merge, the values you may have set under the "Colors" tab, wil also disappear.

As a rule of thumb, when graphical objects, layers and other things will get Merged or converted to an Image. The effects attached to the layers will be removed.

Clone painting

Below the tool icons you'll see 2 radio buttons. Press the "Clone" radio button. Pick the clone palette you want an choose from where you want to clone by setting the "Source" drop down box. If you select "Image", you'll be able to pick an image from the internet, your local drive or the Fatpaint image collection. If you select "Image object" you'll be able to pick an image object already on the page. Use the palette to store different clone sources.

Before you start painting, you need to set the clone position. Press on the source image thumbnail or move the cursor to a location on the canvas and press the letter "c". The are different ways to do the cloning. Scroll down the panel where the source thumbnail is and take a look at the options.

Removing background of an image

The easiest way to remove the background of an image (white or another color) is to use the Magic Wand selection tool with the Scope set to "Object Content" and with an appropriate tolerance value. Press "Shift+A" while pressing on the canvas, to add to the selection. Sometimes it's better to select the graphics you want to keep and then invert the selection. On the tutorial video "Design for t-shirt", you can see how I do it. Experiment adding a little of expansion and blur to the selection before you erase, to smooth out the edges of the remaining graphics. A value of 1.1 on both is enough in most cases. If you are erasing the background of silhouettes, you can instead add a little of blur on the object and it will become nice and smooth.

You can also use the Paint Bucket tool with its "Mode" set to erase. Press the Erase tool icon and set the "Tool" drop down box to "Paint Bucket". Then just press on the canvas the places you want to remove. If too much or little is being removed, you'll need to adjust the tolerance value.

Alternatively, do the same by pressing on the Paint Bucket tool icon and set the "Mode" drop down box to "Erase" or pick an empty color (the small box with a red line, inside the Color Tool window). Then just press on the canvas the places you want to remove.

Advanced features of the Paint Bucket tool

If the checkbox "Post adjustment" is set, you'll be able to adjust tool parameters even after you pressed on the canvas. The operation will be performed again automaticaly with the new settings.

Sometimes it's a good idea to add a little blur or glow when working with the Paint Bucket tool. Glow: Just set the glow values X, Y and Strength and uncheck the "Inner" checkbox. If the before mentioned "Post adjustment" checkbox is set, it will be much easier to find the correct settings to get the result you want.

The Rich Text editor

Text objects have a tool for editing rich text. Just choose the "Move and transform content" tool (second tool on the "Tools" panel). You can also use the Text tool and press on the text object in the canvas that you want to edit.

Each individual letter or letter selection of the text can have its own independent color, size, font and other properties. Just select the text you want to modify and choose the values you want. The prefered way of changing the font or color of the whole text object, is to do it from outside the Rich Text editor. By double clicking on the image thumbnail of the text object, the Font Dialog window will appear. The advantage of changing the font from there is that the text will resize itself automaticaly so the whole text continues to be visible. This resizing is necessary because fonts differ in size.