Today I want to share with you some workflow tips in Inkscape from my own experience. I hope they will help to simplify and accelerate the process of creating your new art.

Use sketches

It’s mush easier to create drawing based on a sketch (enough detailed, so you can develop it further), than to draw immediately in Inkscape only using an image from your head. It’s good for some experiments (when you don’t know what you’re going to create), but not for the exact result you want to get. As for me, I create pencil sketches and then make them digital (scan, photo).

In Inkscape you can Import your sketch using File > Menu or just using Drag and Drop. The pop up dialogue will offer you to link (put a link to reference outside the SVG-file) or embed your image (as a stand-alone object). If you link the sketch, make sure to not remove image from it’s folder, otherwise Inkscape will loose it. If you embed it, then your SVG-file size will be significantly increased.

Flip the image or object

When you work for a long time on something, there comes a point when you stop see the mistakes in your work. You probably feel that something isn’t right, but you can’t find what exactly. You have lost sharpness and freshness of vision. The best way to avoid mistakes in you proportions or volume is to flip the image (to change the usual angle).

In Inkscape you can Flip object Horizontally, by using the Flip Button on the Tool Controls Bar or pressing H key on you keyboard.

As you can see at the example picture, there are some issues with proportions, shapes and coloring.

Background color

Inkscape has white as a default canvas color. But white and black colors are very contrast. If you create a game character on white background, then most likely it’ll have unsuitable colors for it. Instead, you can use grey color or the background of your game.

To change page background color in Inkscape, you need to go to File > Document Properties (Page Tab). Here are some codes of grey colors: light grey (999999ff), grey (717171ff), dark grey (262626ff) and deep grey/almost black(101010ff). My background color is set to 99999ff0.

In order not to change background color every time you open a new document, you can change the default Inkscape template (\Inkscape\share\templates). Make sure to save a copy of default.svg file before making any changes, just in case.

Paste Style

Inkscape has a great option, that can help you speed up the process of coloring - Edit > Paste Style (Shift + Ctrl + V). For example, if you have many objects that need to be colored in the same way, just copy one with desired result to your clipboard and use this option.

Easy color adjustment

If you have several objects in one color and you may want to adjust their colors later, you can unite them Path > Union and then change the color of all at once. After you are done with colors, just go Path > Brake apart (It only works, if you objects do not overlap). Another way, is to set up a good object structure using Layers (Shift + Ctrl + L).

Bonus

And here is some bonus tip: I came up recently, that Inkscape can apply color to the object thought Ctrl+V, if I have a color code in my clipboard. That’s really helpful for me, because I very often apply colors from the online color palettes, before I find the right one.

That’s all for now! If you like the tutorial, please, share it :)

* Download this tutorial in PDF

Let’s continue our ‘How to draw in Inkscape’ series with a candle tutorial. At the beginning we'll use basic shapes, gradually modifying them to fit our needs using Nodes Tool (F2) and path operations. Then we will prepare some art for simple flame animation. So, let’s do this!

Though I’ll be using Inkscape to show the process, the principles given below can be more or less applicable to drawing process in any other vector editor. This is not the only way, it's just how I do it.

Candle

1. First of all we need to grab Rectangle Tool (F4) for base shape of our candle. It’s much easier to draw using simple shapes than to draw from the scratch on your own.

2. Convert rectangle to path (Shift + Ctr l+ C), round out the bottom line and make the upper edge slightly slanted. Add aditional nodes to get a better result.

3. As our candle burns, the wax begins to melt. Let's add this detail to our candle to make it look more realistic.Take Bezier Tool (Shift + F6) and form a shape using ‘from node to node’ method. Also, do not forget about the wick, which can also be drawn using Bezier Tool or a Pencil.

My pencil smoothing is set to 50%. With this setting, hand line is more curved, smooth and have a less number of nodes, so it’s much easier to edit its paths.

4. Select all melted wax nodes (except for the two top extreme nodes), make them smooth and adjust their position. There are many kinds of candles, their shapes and their colors. Here you can experiment for yourself, or use the most common colors like I did.

You can download SVG-file with color palette for practice here

5. Create a small hollow under the wick using Ellipse Tool (F5) and fill it with darker color. Lower the shape on several steps pressing Page Down key. Let’s add a shadow under the melted wax to make it more visible. Duplicate the original melted shape (Ctrl + D), fill it with darker color and position it under (Page Down) and slightly below the melted wax. Duplicate the candle shape, select melted wax shadow and go to Path > Intersection.

6. The next step is to add even more melted wax - this time it’ll be drops. Use Ellipse Tool to create oval shapes and place two of them along the edges of the candle. Select these two, candle shape and go to Path > Union. The third oval in the middle of the candle remains as it is.

7. To make the candle stand out, we’ll add an outline shape. Duplicate twice the candle shape (Ctrl + D), scale the upper one down, select both and use Path > Difference. Fill the result with darker color. Now let’s add the shadow under the middle drop. Duplicate it, fill it with darker color, place it under (Page Down) and slightly below the original shape.

8. The final touch is adding highlights to all convex portions of candle. For melted wax use the same technique as we used for candle's outline shape. For drops use either Bezier Tool or Pencil. It depends on what tool you prefer.

Candlestick

1-2. Draw a circle or an ellipse (F5). Form candlestick shape using rectangle and Path > Difference operation.

3-4. At such angle (side top view) we can see the inside of the candlestick. To show this through our drawing, create an ellipse and squeeze it like shown on the picture above. Then, you can either place it on top of the bottom candlestick shape or place it behind it and curve the upper line of bottom candlestick shape with Nodes Tool. I chose the second way (see video process).

5-6. To create a candlestick handle, use two ellipses and Path > Difference operation.

7-9. Coloring process includes three steps. To show the inner part of the candlestick use darker color. Reuse original shapes for adding volume (scale them down or use path operations with new created shapes).

Candle Flame and simple flame animation

Candle flame consists of one simple shape, created either with Bezier (bottom nodes are smooth) or with Pencil Tools. The inner two shapes are duplicates of the first one, only scaled down and filled with different color. In some cases, you’ll need an additional nodes adjustment for shapes of the flame. The smallest shape is the most bright, because it’s a light source.

Simple flame animation can be achieved through drawing 3 types of the flame - these will be our frames. Additionally, for more vivid flame we could add some glow at the background. Here our glow is an ellipse with 50% of opacity (RGB: 255,212,39) and Radial gradient with transparent extreme nodes.

Combining all elements together, you can end up with something like this:

It should be noted that the smaller the size is, the more realistic the flame looks.

Video process

Here is a video process of creating a candle. Take a look, if you got stuck on something.

That’s all for now! Please, post your results in the comments. And if you like this tutorial, please, share it :)

* Download this tutorial in PDF

buy

1. Use shades of grey as a color palette. Many artists use grayscale in order to add good volume without distracting on choosing colors. Color is added later. It also helps to achieve a good color contrast between objects.

2. The more different colors you choose, the more difficult to focus on the image. Very often, colors are used to highlight objects that represent an area of interest on the image. If image is overflowed with different saturated colors, a viewer will have to make an effort to make out your image properly.

3. It's important how colors combined with each other, rather than their number. Make sure that your colors create a good combination. If not - select from adjacent colors (using color wheel) or play with their saturation and brightness (HSL color model). In Inkscape, you can deal with it using Fill and Stroke dialogue (Shift+Ctrl+F)

4. Use color palettes. Before coloring I often visit www.colourlovers.com in search of inspiration. But this is just your starting point. It's a rare case when all the colors from the palette will be useful to you or will be suitable for combinations the way you like. In most cases, all colors from one palette do not work well together.

5. There are cold and warm colors. It’s a good practice to combine both types of color. The coldest color is deep blue, the warmest is yellow. The more yellow shade of color you have, the warmer your color will be and vice versa.

6. Represent distance through color. The closer object has more saturated colors. The further one, is bright/light and dim. Good example is saturated background and saturated character of a platformer-game. It'll be very difficult to distinguish the character on such background, particularly in action. And another issue, if we have saturated background and dim character, then our area of interest will be background, not the character.

7. Convey the mood. Emotions can be described through colors. Bright, saturated colors describe positive emotions, joy and movement. Negative emotions, sadness, represented through dark tones and less saturated colors.

8. Pure white & pure black: use pure white for very bright and reflective surfaces or effects. Use pure black for an outline. For shadow, it’s better to use dark purple or dark blue with 20-30% of opacity.

9. Take care of the details later. This tip can be applied to creation of outline and adding color. Place the main colors on the drawing, and then proceed to details and adding volume.

10. Always check the result at the actual device. It might look good at your monitor, but each monitor has different color display setting. Actual device (if you create an art for your mobile game) will show you colors in action. Of course, ideally you should calibrate your monitor, but it can be challenging task to perform.

Inkscape

• Pick colors from image. You might want to use colors from a reference photo or other image. Color Picker (F7) will help you in this. Select the object you want to fill with color, and click on the desired color from the reference with Color Picker. Click and hold Shift to fill the stroke with color. Also, this tool has a useful function - averaged color. When you click and drag with Color Picker, you will see a circle. If you have two or more colors inside this circle, you'll set an average color for your object.

• Inkscape has a great set of color extensions, that might help you to achieve the desired result (Extension > Color). For example, More Saturation, Brighter or Grayscale (for checking added volume or good color contrast) - there are many of them for your experiments.

Duplicate (Ctrl+D) your object before applying extensions to it. After applying one, and pressing Ctrl+Z Inkscape most likely will complete its work incorrectly. Duplicating is also a good practice in order not to lose the original objects.

• Color palettes and swatches. Inkscape has a huge amount of preset palettes. You can find them, when you click on the black arrow to the right of the Swatches panel. There we can also change the width and the size of the panel. Most often we see an Inkscape Default palette, but there are many variations. Any color palette can be a good starting point, rather than direct guide to use only specified colors.

That’s all for now! If you like the tutorial, please, share it :)

* Download this tutorial in PDF

When you prepare your character for animation, you split it to a number of segments. Each segment has its own name. When you have several of such segments, it’s ok to name them randomly. But when you have several dozens of segments, random naming can make a huge mess in your files.

Here are some tips to help you avoid this mess:

• Specify Left or Right — when you have paired segments you need to specify which side they are to distinguish them. But it’s up to you where the right or left side is: from your point of view or from the point of view of your character.

The first way (from your point of view) is easier and faster because you don't have each time to put yourself in the place of the character.

• Add numbers to names of replaced segments — when you have several segments for one part of the body in different positions/states (f.e. positions of hands, mouth, eyes and feet), you can add number to their names (00, _01, _02) instead of describing their position (opened, _closed).

• Name segments as you wish, so you could understand their meaning, and do it constantly. Sooner or later, it will speed up and automate your workflow.

That’s all for now! If you like the tutorial, please, share it :)

* Download this tutorial in PDF

Today we take a look at process of creating a scroll. This may be a scroll with a magic spell or treasure map as an ingame element or an icon. Such tools as Spiral Tool, Pencil Tool and several path operations will help us in this.

Though I’ll be using Inkscape to show the process, the principles given below can be more or less applicable to drawing process in any other vector editor. This is not the only way, it's just how I do it.

Basic shape

1. Take Pencil Tool (F6) and draw one side curve line. You can also use Bezier Tool (Shift + F6) and ‘from node to node’ method as well...

I have not quite standard pencil settings, I set its smoothing to 50%. With this setting, my hand line is more curved and have a less number of nodes, so it’s much easier to edit paths.

... duplicate created curve line, move it to the side so you could imagine two sides of the scroll and scale it down a little. Grab Nodes Tool (F2) and connect two top and two bottom nodes using “Join selected endnodes with a new segment” button at the Tool Controls Bar. Curve the upper line a little.

2. Take Spiral Tool (F9) and create two shapes at the top and at the bottom of the scroll to get the effect of a curled paper. Adjust the Spiral shapes with Inner and Outer handles using Spiral Tool (F9) or Nodes Tool (F2).

3. Draw other curled paper elements using Pencil Tool: the front bend and the back one. According to the angle at which we see the scroll, the back bend is barely visible, so there is no need draw it entirely. A hint of it’s presence will be enough.

Coloring

4. We will use warm colors which have nothing to do with the color of the new paper. However, in such colors the scroll looks more ancient. Convert spirals to paths (Shift + Ctrl + C) and complete their shapes with Pen Tool to make their paths closed.

You can download SVG-file with color palette for practice here

5. The light is coming from the top left, so we should add highlights and shadows to the top of the scroll and to the front bend. You can learn more about Highlights and Shadows from my earlier tutorial. The darkest color from the palette will help us to make scroll stand out. Select all scroll elements, duplicate them (Ctrl + D) and go to Path > Union. Scale the object up, fill it with dark color and ‘Lower it to Bottom’ (End key). ‘Simplify the Path’ (Ctrl + L) to get rid of unnecessary nodes and then adjust the shape.

More details

6. In addition to special color palette we need to add some torn places to make the ancient scroll. Grab Bezier Tool (Shift+F6) and draw triangular shape. Duplicate this shape and create difference with edge of the scroll using ‘Difference’ path operation. Grab the original triangular shape, scale it down and create difference with outline. Use this method to create torn places anywhere on the scroll where you like.

Treasure map

7. It’s very easy to create a small treasure map. For this we need to create a cross using two rectangles. Also we need one line with dashed pattern. We can set pattern to the path in Stroke Style tab in the Fill and Stroke Dialogue (Shift+Ctrl+F).

Magnifying glass

8. Basic elements of the magnifier are circles and a rectangle with rounded corners for a handle. Use Ellipse Tool (F5), Rectangle Tool (F4) and Difference operation to form magnifier. Don’t forget to add a highlight for the glass.

Video process

Here is a video process of creating a scroll. Take a look, if you got stuck on something.

That’s all for now! Please, post your results in the comments. And if you like this tutorial, please, share it :)

* Download this tutorial in PDF

buy

Though I’ll be using Inkscape to show the process, the principles given below can be more or less applicable to drawing process in any other vector editor.

Basic shape

1. Create basic shape with Ellipse Tool (F5) and squeeze it from above. Use Rectangle Tool (F4) for the neck.

2. Unite created paths through Path > Union. Grab a Bezier Tool (Shift+F6) and draw basic cap shape using ‘from node to node’ method. With Node Tool (F2) make nodes of the neck more smooth.

3. Draw another ellipse for potion liquid. We did not make it back to back, in order to show some wall thickness of the bottle. Draw two wavy shapes at the top and at the bottom of the potion.

Make sure that the shapes are closed paths and they are bigger than the ellipse

Use Path > Intersection to adjust their shape. Add different bubbles with Ellipse Tool. Make upper nodes of the cap smooth.

Coloring

4. In order to depict the glass we use shades of blue. But you can also use shades of gray, green or dark blue colors for this.

You can download SVG-file with color palette for practice here

Add a volume to cap by duplicating, scaling down its shape and coloring it with lighter color. Fill the liquid shapes with three colors, from light to dark.

5. Let’ add more volume to our bottle. Mostly we’ll need duplicates of basic shapes, Bezier Tool (Shift+F6) and Path > Intersection function to create shapes, which we will fill with darker colors. The upper light stroke-like object is needed to add depth, which we'll get by placing cap right behind it.

6. The final step is to add highlights to our highly reflective surface. Use Ellipse and Bezier Tools (Shift+F6) for it.

Different sizes

You don’t always need a large or highly detailed object. If it’s an icon or a game object, you need to consider how its details look at small sizes. In our example, the bottle can’t be called highly detailed, but in smaller sizes its parts are quite well readable and recognizable.

How can you track changes at smaller sizes of the object in Inkscape?

• View > Duplicate Window duplicates window in which you are working on. Working area in duplicate window can be zoomed out. So you can use primary window for detailed work while keeping watch over how the work looks in small size.

• View > Icon Preview allows you to see selected object or area as an icon of different sizes.

• Another great way to see how the object will look in different sizes is to create its clones. Go to Edit Menu > Clone > Create Clone. The clone of the object will appear right above the original. Then you can duplicate this clone or create new clones following the same way. Set clones to the desired size and change color or shape of the original.

When you ungroup the original object (if it is a group), clones will unlink automatically. To avoid this, you should use Node Tool (F2) for selection or work in group itself (Ctrl+Left Mouse Button).

Variations

By modifying the shape of the vessel or the type of its neck you can get many bottle variations. Also don't forget to experiment with color of potion. You can also add some additional features like smoke or boiling animation (if it’s meant for game or cartoon).

Video process

Here is a short video process of creating bottle with potion. Take a look, if you got stuck on something.

That’s all for now! Please, post your results in the comments. And if you like the tutorial, please, share it :)

Buy Potions Pack inspired by this tutorial | Download this tutorial in PDF

buy

Character for animation consists of a number of segments. Joints are the most tricky part, that must overlap correctly, in order animation didn't look bad. And that’s something that every newbie will face in animation.

So what should we do to make character look good in any pose?

1. Mark the center of the joint with a horizontal line
2. Draw a circle or elipse shape to fit the edges
3. Divide arm into several parts with rounded, semi-circle edges
4. If character has any feature (like shadow or an outline), it should be taken into account, before splitting up the character

Note: we can also hide bad joints overlapping with different character’s accessories, like collar or gloves.

That’s all for now! Please, post your results in the comments. And if you like the tutorial, please, share it :)

* Download this tutorial in PDF

This time we are going to look at the process of creation cartoon gems. We’ll be using basic shapes and then modify them for our needs.

Note: Though I’ll be using Inkscape to show the process, the principles given below can be more or less applicable to drawing process in any other vector editor.

Sparkle

The surface of our gems is highly reflective and we need to show it through sparkles. Almost every sparkle or shine can be represented by white lines or a star-based shape. So let’s create one shape, that we will use later.

1. Grab a Star Tool from the Tool Box. Set its ‘Corners’ setting to 4, and ‘Spoke ratio’ to something about 0.131 (The last setting may vary, as I adjusted it using a handle on the shape itself). Draw a star shape.

2. Duplicate (Ctrl+D) the result, rotate and scale it uniformly (holding down the Ctrl key).

Purple gem

Basic shape

Purple gem has an easy distinguishable diamond shape.

1-2. Create a square (F4), rotate and scale it down a little, just to make it look like a diamond shape. Make sure to convert object to path (Shift+Ctrl+C)

3. Duplicate the result (Ctrl+D). Take a Node Tool (F2) and remove the lower node.

Note: after deleting the lower node, the path between two remaining middle nodes will become curved. To make it straight, select these both nodes and click “Make selected nodes corner” at the Options Bar.

Then select two middle nodes and insert a new node between them by clicking on the appropriate button at the Options Bar. After that, remove the left node.

4-5. Duplicate the resulting shape four times to fill the entire diamond-like shape. The ’Align and Distribute’ dialogue (Shift+Ctrl+A) will help you in this.

Coloring

I've prepared a color palette for the purple gem in advance. But you can use any colors that you like.

Note: you can download SVG-file with color palette for creating your own gems here.

6. Fill the lower planes with darker color, and the upper ones - with lighter.

7. In order to add a volume to our gem, we need to highlight the edges (as they are the closest gem's part to the viewer). Grab the Bezier Tool (Shift+F6) and draw a star-like shape over the edges using ‘from node to node’ method

8. Also, with Bezier Tool create light and reflected light. Draw couple of circles with Ellipse Tool (F5) for the light as well.

9. To make our shape more readable, scale up the original diamond shape, place it at the bottom (End) and fill it with the darkest color from the palette.

10. The final touch is to add a shine to our gem. Grab our preset sparkle, fill it with white color and place it where you think the light hits. And that’s all!

Green gem

Basic shape

Green gem is a little bit more complex than the purple one because of a large number of corners.

Note: the number of corners may be different, as the original shape itself. I encourage you to experiment with forms and colors. Using the same principles of adding color and volume, you can create various versions of gems.

1. Grab a Star Tool and change it’s mode to Regular Polygon at the Options Tool, then set its corners setting to 8. Draw a polygon.

2. Duplicate (Ctrl+D) the polygon and scale it down uniformly and around rotation center (holding down the Ctrl + Shift keys). Make sure to convert both object to path (Shift+Ctrl+C)

3. Duplicate (Ctrl+D) the larger polygon and make of it a triangle by deleting unnecessary nodes. Adjust the peak node, so that the edges of triangle matched the corners of the smaller polygon.

4-5. Duplicate the triangle as many times as needed and align them as shown in the picture above.

Coloring

Actually, the coloring is almost the same as for the other gems (see purple gem coloring). There is a picture above to guide you through this process.

Blue gem

Basic shape

Blue gem is even more complex, as its form is volumetric by itself (the viewer can see the upper plane of the gem).

1-2. For the basic shape we need a Polygon Tool with 5 corners set. Flip the result vertically (V) and convert object to path.

3. Add more nodes to the top path...

Note: In our example, it’s better to add nodes via ‘Insert new nodes to a selected segments’ button at the Tool Options Bar (after selecting Nodes Tool). Nodes will be added right in the middle of each segment. In our case, push this button twice after selecting top path nodes.

... and place them slightly above.

4-5. Duplicate this shape three times and adjust nodes as shown in the picture.

Coloring

The coloring is almost the same as for the other gems except for one step:

9. Earlier we used a dark color for the outline. This time we will use light outline and supplement it by a darker part at the top.

Video process

Here is the video process of creating the crown. Take a look, if you got stuck on something.

That’s all for now! Please, post your results in the comments. And if you like the tutorial, please, share it :)

Buy Gems Pack inspired by this tutorial | Download this tutorial in PDF

buy

Today we are going to create a cartoon crown. We’ll be using basic Inkscape tools for creating shapes, Fill and Aligning dialogues and preset color palette, which I prepared up in advance.

Note: Though I’ll be using Inkscape to show the process, the principles given below can be more or less applicable to drawing process in any other vector editor.

Basic shape

1. Grab the Bezier Tool (Shift+F6) and draw basic crown shape using ‘from node to node’ method. We’ll use this shape for the front part of the crown
2. Place nodes in the right places and modify paths with Edit Nodes Tool (F2)
3. Open ‘Align and Distribute’ dialogue (Shift+Ctrl+A) and align nodes, if it’s necessary
4. Take Ellipse Tool (F5) and draw circle on every peak. Hold down the Ctrl key while drawing to make them perfect
5. Create two more triangular shapes with circles at the peaks for the back part of the crown
6. Create a rectangular shape for convex part of the crown

Note: At the point of constructing basic shape we should find out, at which angle we are looking at the crown. If it’s lower than vanishing point, the bottom line of the crown will be convex, if above - this line will be concave. Moreover, from this view point we should see the inner part of the crown. These laws of perspective can be also applied to back elements of a crown. Note that the circles behind were drawn smaller than the front ones.

Coloring

7. We’ll be using preset Orange-Yellow color palette in order to not distract on choosing colors.

8. The front part of the crown is, definitely, closer to the viewer. That’s why it should be lighter. By coloring back triangles and circles with darker colors, we show that they are placed behind other shapes

Adding volume

9. Right now our drawing looks pretty plain. To fix it, we need to show wall thickness of the crown. Duplicate basic shapes, change their color and move them horizontally and vertically, if it’s needed.

10. Golden balls can be modified by using this technique - Highlights and Shadows: 7 steps to make your object more realistic

11. On the picture above you can see that every finalized shape consists of duplicates of the initial shape. Slightly different, but still almost the same. So, keep that in mind.

Variations

Don't forget to experiment with different shapes. Using the same principles of adding color and volume, you can create various versions of crowns. You can also add some textile parts or gems to your crown.

Note: We’ll look at the process of creating gems in the next tutorial

Video process

Here is the video process of creating the crown. Take a look, if you got stuck on something.

That’s all for now! Please, post your results in the comments. And if you like the tutorial, please, share it :)

Buy Crowns Pack inspired by this tutorial |Download this tutorial in PDF

buy

You can download the "3D eyeball" source file here: SVG contains finished 3D eyeball + palette for creating your own.

That’s all for now! Please, post your results in the comments. And if you like the tutorial, please, share it :)

buy

There are two ways to install plug-ins in Gimp and Inkscape. The first is to copy it to the appropriate folder in the working directory of the program. This is a really simple way and most people use it. Also, this method is described in most guides how to installing plug-ins. Unfortunately, it has several disadvantages:

1. If you have different versions of programs (e.g. the stable and development versions), you have to install the same plug-in two places in order to use it
2. It’s possible to lose all installed plug-ins when removing or updating your software
3. Also, all data will be lost in case of system reinstall

Let's see how we can avoid these issues.

Besides installing to the working directory of the program, Gimp and Inkscape support installing plug-ins into a special (user) directory. Installing plug-ins in this folder allows you to avoid the issues described above. And that’s the preferred way to install plug-ins.

Unfortunately, to find this folder is not always easy: it depends on your operating system and on the method of program installation. Here are some tips where you can find a directory for user plug-ins.

Inkscape

Windows

User plug-ins are placed in the application settings directory of the current user. Path to this folder depends on the version of OS: in Windows XP and earlier - it will be: C:\Documents And Settings\<User Name>\Application Data\inkscape\extensions. For Windows Vista and later - C:\Users\<User Name>\AppData\Roaming\inkscape\extensions.

Where <User Name> is your user name in the system. Please note that the examples are given for the systems installed in the C drive.

If you encounter problems with finding this folder, you can execute a command start %APPDATA%\inkscape\extensions at the command line. And it will lead you to the desired folder.

Linux and OS X

Usually, directory with user plug-ins can be found at the following location: /home/.inkscape/extensions

Gimp

Everything will be much easier with Gimp. You can customize location of plug-ins and select a priority for its loading. To see which paths Gimp looks for plug-ins by default, you need to go to Edit > Preferences > Folders > Plug-ins and find one path which differs from the working directory of the program - this will be a directory for user plug-ins. You can also add your own paths.

Of course, everyone decides for himself where to install plug-ins. The purpose of this tutorial was to show an alternative and more safer method to install them.

That’s all for now! Please, post your results in the comments. And if you like the tutorial, please, share it :)

* Download this tutorial in PDF

Highlights and Shadows - it’s something that you add to the character after creating the whole outline and filling with solid colors. They really help to make your character’s shape more readable and 3D-dimensional.

Note: We’ll be using Inkscape to learn the basics.

Basic shape

1. Create a basic shape with ellipse tool (F5). Hold down the Ctrl key while dragging the mouse down to get a perfect circle

Flat color

2. Fill the circle with flat color and remove the stroke

Flat color - the color which doesn't have any shading. We’ll be using a grayscale (shades of grey) as our color palette. This way will help us practice adding depth to our drawing while not distracting on choosing colors.

Light source

3. Decide where the light source is. Duplicate the circle (Ctrl+D), scale it down and place it in the direction to the light source

Light source - is where the light comes from. It could be a desklamp, The Sun or any other object that emits light (there is always at least one source of light, otherwise we can't see anything). Knowledge of its location influences the whole drawing.

Shadow

4. Duplicate circle with flat color twice. Move the upper duplicate slightly to the side. Change it’s color for more readability. Select both circles and go Path > Difference

Shadow - is a part of an object which doesn’t receive enough light or light is missing at all.

Highlights

5. Duplicate the light elipse, scale it down and squeeze a little (it has almost round shape). Place it at the very edge

Highlights are placed where the light hits the most convex and closest to the source part of the object.

Cast shadow

6. Now our sphere has a sense of depth. To indicate that the object is located on a plane or a surface, it’s necessary to add a shadow underneath it - the cast shadow. Duplicate circle with flat color, squeeze it and place under other circles.

The location of the light source affects the cast shadow. The further the light source is - the longer and less detailed the cast shadow will be.

Reflected light

7. Repeat the 4th step to create a reflected light. Place it on a sphere near the surface.

Reflected light - the light that reflects from the plane or surface back onto the object, what makes the shadow side a little bit lighter at the edge.

That’s all for now! Please, post your results in the comments. And if you like the tutorial, please, share it :)

* Download this tutorial in PDF

buy

1. Make sure that all images in your sequence have the same size.
2. Open Gimp and add images as layers File > Open as Layers (select all the images you want in your gif-animation)

3. The lower layer is the first frame of your animation, so make sure that layers are in correct order
4. Go to File > Export

5. Enter the desired name with .gif at the end and press Export
6. Mark ‘As animation’ and ‘Loop forever’ checkboxes
7. Set ‘Delay between frames’ to about 500 milliseconds or choose your own value by trial and error

That’s all for now! Please, post your results in the comments. And if you like the tutorial, please, share it :)
* Download this tutorial in PDF

The first thing we need to do is to create the basis for our puzzle - a path wich will cut our image to pieces. For that we need to download and install special extension for Inkscape by Neon22, that creates jigsaw shaped pieces (How to install extension in Inkscape). After installation, we can find it here: Extension > Render > Lasercut Jigsaw.

My image has 1000x700px resolution. So I launch the extension and set my width and height parameters

Note: 1000 height and width is the maximum

The next thing we need to decide, how many puzzle pieces we want to create. I chose 5 pieces across and 3 pieces down. Then Press Apply.

What we now have - is a group of paths. In order to proceed, we need that each puzzle piece was closed and has its own path. So we ungroup the puzzle template (Shift+Ctrl+G several times), select all curving lines and go to Path > Combine or press Ctrl+K.

Selection Tip: Select all (Shift+A) and then, holding down the Shift Key, deselect the border shape

Now they all became one object. Then we select it and the remaining border shape and go to Path > Division or press Ctrl+/

Note: Make sure that the inner object is on top (go to Object > Raise to Top or press Home key). Otherwise, it won’t work

Save your template as an svg and move to Gimp. Open there your initial image, go to Tools > Paths and import our svg by right clicking on the Tab. Further, we need to download special plugin for Gimp by devolonter (How to install plugins in GIMP).

After installation, go to Filters > Paths > Cut to pieces, сhoose directory and press OK. And Voila! We have our image cuted to jigsaw puzzle pieces!

That’s all for now! Please, post your results in the comments. And if you like the tutorial, please, share it :)
* Download this tutorial in PDF