inkscape tutorials

TRACE MARIE CAT'S HEAD

noreply@blogger.com (Unknown) — Thu, 12 Mar 2009 14:20:00 +0000

Foreword

Disney has numerous famous characters. And one of cutest disney character in my opinion is Marie Cat, from the “Aristocats” movie. In this tutorial, I'll try to show you how to do manual trace to the Marie Cat's low resolution picture source with powerful inkscape's live path effect feature. For those who are cartoonist wannabe, check this tutorial out!

Main Idea

The idea behind this tutorial is to trace Marie Cat's low resolution picture with bezier path in every single line we've found. Then give all the bezier paths the powerful inkscape's live path effect until match what we need. Read the rest of this post if you so curious :)

Step 1

Get this marie cat's low resolution picture below first.

Then import (ctrl+i) to your inkscape working area.

Step 2

Then make an ellipse, color it green, then do butterfly technique to make our “brush” in future step. Do not know what is butterfly technique yet? Check this post.

Step 3

Then begin manual trace. Give every single line we've found in marie cat's head with bezier tool (b) and polish it with edit path tool (F2). Considering in the picture below, we give the right side of marie cat's face four lines. The suggestion for you: don't make a continuous line one, but make short lines. Because continuous line will affect different result than short lines in the end.

You see, in the picture below I have finished nearly all line I've found in the marie cat's head. And I give every single line with different color to make sure that none of them continuous one.

Step 4

This is the main part in this tutorial. Copy the “brush” shape, then open the live path effect dialog (ctrl+shift+7). Pick one of the short lines, give it “pattern along path” effect then apply. Then click the paste path icon to make the “brush” go along the short line. If you think that the shape too much thick, then set the “width” lower to make the shape thinner.

Then repeat the step in every single line like this..

And the picture below shows us when the “pattern along path” effect already applied to all lines

Step 5

Then, we must do union command (ctrl++) to make them a single complicated shape. I give it red fill because red color always easy to grab our sight. After that, drag it to the right direction.

Step 6

Coloring step. Duplicate (ctrl+d) our complicated shape first, then color it yellow. Then break apart that yellow shape (ctrl+shift+k). After the yellow shape has broken into pieces, then we can start coloring. And don't forget to remove every unnecessary shapes.

(hint: set the opacity of duplicated yellow shape to 50% before break it apart. With this way we can identify where unnecessary shapes more easy).

and the result will be like this..

Step 7

Making eyes.
Make two circles, one of them bigger than rest. Center it properly. Place it to the eyes area. Select the outer circle with the blue shape and do division command (ctrl+/) to make the blue area of marie's eyes. Then select the inner circle with the blue shape and do division command again to make the black area of marie's eyes.

Step 8

Give the eyes their colors. And make one pink colored ellipse then place it above the mouth to give marie cat's a nose. Finish.

alternative style...

Conclusion

This tutorial want to proves you that inkscape -despite the version number hesitate major new user- have powerful live path effect feature and very useful for those who are cartoonist wannabe.

UNDERSTANDING BUTTERFLY TECHNIQUE

noreply@blogger.com (Unknown) — Thu, 19 Feb 2009 17:51:00 +0000

One of the most frequently used technique by graphic designer is mirroring and duplicating. Because mirroring combined with duplicating is the only way to make each side of our work being symmetrical. In this tutorial, I'll try to explain a bit about how combination of both two basic techniques used in certain way when we works in inkscape to make our custom symmetrical shape. Hope this tutorial worth for beginner inkscape user. Enjoy! (Get PDF Version here).

The Main Idea

The main idea in this tutorial is to make a half butterfly wing-like shape first, then duplicate and mirror it to make the simple butterfly shape.

And there is a step by step instruction....

Step One

Make a shape just like picture below with bezier tool (b).

Step Two

Pick the shape, then edit the nodes (f2) to make it like picture below.

Step Three

Now, we need to make the right side straight. To accomplish this step, simply drag a guideline from the left document ruler.

Then make a rectangle. Now lets snap the rectangle's left side to the guideline.

After that, punch the butterfly wing shape with this rectangle (ctrl+-). And now the butterfly wing shape will be like this...

Step Four

Half way done. Then duplicate the butterfly wing shape (ctrl+d). After that, drag it to the right. Don't forget to hold the ctrl button to do constrain dragging.

Step Five

Flip the right butterfly wing shape horizontally (h), then snap it to the guideline.

Step Six

Last step, select both and weld them together (ctrl++).

And below another examples using “butterfly technique”...

Conclusion

The butterfly technique (duplicating combined with mirroring) is only way to make a symmetrical shape in each side. If you practice it a lot, you'll improve your skill.

Get PDF version here

ABOUT

noreply@blogger.com (Unknown) — Thu, 19 Feb 2009 17:39:00 +0000

sorry for inconvenience. this page in building progress.

WISHLIST

noreply@blogger.com (Unknown) — Thu, 19 Feb 2009 17:37:00 +0000

Are you inspired with javanese pattern?
Or can't live without colors, shapes and compositions?
Or just wanna know how to make this and that?
Just post your suggestion in the comment section below
about what should be the next tutorial.
And I will make the tutorial JUST FOR YOU!

ADVANCED

noreply@blogger.com (Unknown) — Thu, 19 Feb 2009 17:34:00 +0000

Inkscape tutorials list for advanced user:

trace marie cat's head

INTERMEDIATE

noreply@blogger.com (Unknown) — Thu, 19 Feb 2009 17:34:00 +0000

Inkscape tutorials list for intermediate user:
ultra cool pixel tux logo

BEGINNER

noreply@blogger.com (Unknown) — Thu, 19 Feb 2009 17:28:00 +0000

Inkscape tutorials list for beginner user:
understanding butterfly technique
make an ubuntu by your own

ULTRA COOL PIXEL TUX LOGO

noreply@blogger.com (Unknown) — Wed, 18 Feb 2009 15:45:00 +0000

Accidentally, I've found very cool idea that maybe worth to implemented into old
tux logo design. Basically this idea inspired by pixel style clipart sample from some clipart stock site. And our goal in this article is to alter an old fashioned original tux logo
becomes that I suggest to call it “ultra cool pixel style tux logo” :).

Main Idea

The main idea in this article is to make a bunch of 1x1 square that have a perfect gaps between them, horizontally and vertically. And after that, we will eliminate some of them. This tutorial basically a simple one, but need much patient to make it done.

And there is a step by step instruction....

Step One

Make 1x1 square first (r), then duplicate it 13 times (ctrl+d). To check that you already have 14 squares, check to the bottom of your inkscape screen.

Step Two

Duplicate it again for 5 times. It mean we now have 84 squares already.

Step Three

Then duplicate it again to reach for about 8400 squares. Don't be shock. Before doing this, I suggest to close all other running application, no matter whether you have a good computer or not. Because inkscape will try hard to render all 8400 squares. Another suggestion is make your displaying mode to outline (ctrl+numpad 5 or alt-v-d-o). And try to divide duplication step to chunks. For example, do it like this: 84 squares X 10 (ctrl+d) X 10 (ctrl+d) = 8400 squares.

Step Four

Open up the row and columns dialog (object > rows and columns). Pick all these squares, then set the dialog like this: Rows: 84, Columns: 100, Equal height: yes, Equal width: yes, V & H align: center, V & H Spacing: half size or third four of your single square, then click arrange.

Step Five

Import the tux logo (ctrl+i), then place it to the bottom most (end).

Step Six

Begin to eliminate unused squares. Use zoom in command (z-click) and pan around it (shift+right drag) for better result.

Step Seven

Make some enhancement and detail work in hands and eyes if you need, then remove the old logo. Done!

Finished work

Conclusion

Duplicating other idea to make brand new work it's not a sin. Just feel free to make it!

Get PDF Version here

MAKE AN UBUNTU LOGO BY YOUR OWN

noreply@blogger.com (Unknown) — Tue, 17 Feb 2009 17:40:00 +0000

Foreword

Ubuntu is one of the big and famous gnu/linux distro in the world. Everybody who use linux for their desktop needs 99,9% know this distro. Ubuntu has unique yet simple logo design. In this article, I will explain how to make an ubuntu logo by your own hands. Enough talk, just fire up your linux box and start your lovely inkscape program, then have fun! (Get PDF version here).

Investigation

The ubuntu logo implemented a very basic rotating technique. It consist of one 120 degree punched donut shape and three circle surrounding the main donut shape that punch the main donut shape too. Another simple things is it using just three different color. To make this logo, we just need 9 circles and 3 rectangles. Quite simple isn't it? Lets do it!

Step One

Make a three circles (e-drag+hold ctrl) with three different size. Select all these circles (ctrl+a) then align them (ctrl+shift+a) to horizontal and vertical axis. We call this three circle as group A. This group will be the main donut shape in the future.

Step Two

Make two circle again, then align both them to horizontal and vertical axis, and make them a single group (ctrl+g). We name it group B. This group will be circles that surrounds the main donut shape.

Step Three

Make a guideline between smallest and medium size circle of group A. Place group B like picture below, then align it to the horizontal axis of the group A.

Step Four

Duplicate the group B twice (ctrl+d). Then pick one of duplicated group B with the biggest circle of group A (F1-click-shift click). Open the transformation dialog (ctrl+shift+m), set to rotate counter clockwise for about 120 degree. Repeat the sequence, but rotate it clockwise for about 120 degree. Leave the rest just like picture below.

Step Five

Pick all these objects, then do ungroup command (ctrl+shift+g).

Step Six

Now we make the main donut shape. Pick the smallest and second circle on group A.. Do difference command (ctrl+-). To make sure that the medium circle already punched, Color it red. Then punch the donut shape with all biggest circle of group B, one by one.

...and will look like this...

Note: Make sure the puncher object placed top most (home) and always pick it first.

Step Seven

Flip all remaining objects vertically (ctrl+a, then V). Then make a rectangle. Align it to the vertical center axis of biggest circle. Duplicate it twice, and rotate it like step four.

Step Eight

Punch the donut shape with all three rectangles, like step six. And the result will like this...

Last Step

Break the donut shape apart (ctrl+k). Select the donut shape and rotate it 90 degree clockwise. Then color it with hot yellow (ffcc00ff),orange (ff6600ff) and red (ff0000ff) one by one (ctrl+shift+f) just like picture below. For very last step, remove the outline biggest circle, and replace it with grey square.

Conclusion

Rotating technique is quite nice and even make some bang when implemented with another technique. In this case, ubuntu guy really do it!

SVG Source

PDF Version