Inkscape Tutorial: Spiro Swirls |
|
It took a long wait, but Inkscape 0.47 was released on 24 November 2009. It has taken over a year of intensive development and refactoring, but Inkscape is slowly growing up. We use several vector applications at VSD, but as strong supporters of Open Source software, Inkscape holds a special place. We put up with some of its quirks and try to use the program wherever possible, as it has some seriously cool features. One of the new additions to Inkscape is the possibility to use Spiro curves (Cornu spirals), which were introduced to the design world by Raph Levien. In this tutorial I demonstrate the basics of Spiro curves in Inkscape at a slow pace and use it to create smooth flowing swirls.
This tutorial assumes no prior Inkscape knowledge, so it may be a tat slow if you are already familiar with Inkscape's interface and the more advanced features such as the path editor.
I know... I should have made a start button so you determine when the video rolls... it is not there (yet).. please have some patience while contents load. Feel free to comment if you have further suggestions for improvement or have questions about the techniques shown.
File size: 7 MB The video starts automatically - just give it some time to load. Pause the tutorial at any time with the control bar just below it.
|
Newsflash
We are very proud that the Spiro Swirls Tutorial for Inkscape has gained such popularity. Today, 28 January 2012, over 140,000 viewers have visited this page and our statistics show that it is still the most popular tutorial on this site. This tutorial is suitable for Inkscape version 0.47 and 0.48. Thank you all for viewing and providing feedback. We do our best to make this site the best beginner resource site for Inkscape. |
© 2009-2011 Very Simple Designs.
Powered by Joomla!. Valid XHTML and CSS.
Comments
Glad you liked it. I hope you did find the overview page for all tutorials, as there are more Inkscape goodies posted there.
Cheers,
Syllie
Muchas gracias!! muy buen material.
Thank you very much! very good stuff.
why I don't have this drawing mode option? I can not create "spiro path". Please help me with that.
Thank you.
tysiula
First of all, you must have Inkscape version 0.47 or higher installed (I just checked the 0.48-dev version and it is in there as expected).
The Spiro path can be either directly created using a path tool (such as the Bezier Tool
Another option is to add it later to a path via the menu Path > Path Effect Editor (Shift+Ctrl+7). You then select Spiro Spline from the drop down list, and press the Add button to apply it.
If you still cannot find it, at least let me know what operating system you work on and what version of Inkscape you use - so I can look to other possible causes.
I hope this helps.
Cheers,
Syllie
Help please?
I am not 100% sure what you mean, but I'll give it a shot.
If you are talking about the triangle that makes the "pattern" along your path, it is drawn in the upper left corner of your document (the top left corner of the paper).
It is ONLY visible if you have applied a pattern to the path. For example: use the bezier tool and set the Shape to "Triangle In", or have added "pattern along a path" manually through the Path Effect Editor.
If a pattern is applied to a path, you can edit the pattern "on-canvas" by clicking on the "edit-on-canvas" symbol in the Path Effect Editor - it LOOKS like the Node Tool, but it is the icon in the Path Effect Editor, when you select "Pattern Along Path" in the Effects List.
I hope this helps. If not, please try to be a bit more specific.
Cheers,
Syllie
i spent like 2 hours trying to figure out where the little triangle was.
this helps a lot
Oh and great tut
The video tutorial is made as in .swf format, so as soon as you play it is is already downloaded to a temporary folder on your pc.
If you use Firefox you can also use Tools > Page Info. Then go to the Media tab and pick the .swf file from the list. Then use the Save As button.
Please let me remind you about our TOU tho: "Tutorials from this site may NOT be redistributed in any manner. If you would like to put them up in a forum or some other place, contact us first."
Cheers,
Syllie
If the easiest way is to group elements through the menu Object > Group (Ctrl+G).
If you like fancy borders, also try the tutorial that specifically handles that: verysimpledesigns.com/.../...
Cheers,
Syllie
I am glad the tutorials are of help. And getting feedback on them is great, as it helps us to fine-tune our path.
Inkscape has come a long way and it has features that are not available in the big commercial programs, tho it lacks a few they have too. I find that I can do almost all vector work exclusively in Inkscape.
Cheers,
Syllie
Thank you.
In the tutorial I first cut the path to the clipboard. If you have troubles with this step I suggest you just do a copy and delete the path afterwards.
Step 1: Copy the path that you want to use as pattern (Ctrl+C) to clipboard.
Step 2: Select your path and add the Path Effect Editor > Pattern Along Path effect to your path.
Step 3: Select the effect in the effects list.
Step 4: Use the paste path icon
Now the path that you copied to the clipboard is used as pattern in the Pattern Along Path Effect.
Step 5: You can still edit your path: click on the edit-on-screen icon
Step 6: Look in the UPPER LEFT corner of your DOCUMENT (the paper shape that is drawn on screen). You should see YOUR pattern in green and you can edit it.
Step 7: If the pattern does not show up on the path, it may simply be too big, too small or too awkward in shape. Try resizing it while in edit mode and see if this helps.
Step 8: If you are happy with your results: delete the original pattern that we copied in step 1
I hope this helps!
Cheers,
Syllie
i was following a tutorial on youtube and did everything that the guy said and it didn't work. so i googled for my problem and found that this person had the same problem. i've gone through all the steps in the reply and it doesn't make any difference. i've still just got the skinny line.
anyone know the mac work-around here?
As I do not work on a mac myself, I cannot really help you with this, but I do know that for version 0.47 there were quite some problems copy-pasting items. I linked to a few posts with solutions and work arround in comment 118 on this thread: verysimpledesigns.com/.../...
Also there were quite some regressions introduced with Inkscape 0.48, the developers are working hard to get those issues solved - but it looks like we need to have some patience before 0.48.1 will be released. I must confess that the problems with 0.48 have take some joy of working with Inkscape away - so I am really hoping for a speedy release of that version.
Cheers,
Syllie
First of all thank you very much for your wonderful tutorials. I got interest again for Inkscape to spend 'free' time and I could learn the basics from you. By the way after seeing your comment I've installed 0.48.1 stable version (was 0.46 with me) but this seems to be very slow to start up and process, compared to 0.46!
anyway expecting more tutorials,
best wishes
vinay
I have a mac as well, so perhaps the mac version is the problem.
Everything else works great.
This was my very first time drawing something! Loved it!
What am I missing?
Dick
I am sorry you are having troubles. The Bezier Tool can be a bit difficult to handle sometimes, but with a bit practice you'll get the hang of it.
Most important to get the spiro kicked in properly is that your bezier path already has some "flow", is a smooth curve. If you create "cusp" (corner) nodes, it will keep them like that. Also it is very important to create a few nodes on a path, I noticed that with 3 I often just get an elegantly shaped partial circle.
The easiest way to change your path in a smooth flowing path is to select all nodes and use the auto-smooth option:
1. Select the node tool
2. Select all nodes, either by rubberband selection or by hitting Ctrl+A
3. Press the auto-smooth button on the Node Tool - Tool Control Bar
This should kick the spiro immediately.
I'll use this technique also in the basic shape creation for the doodle heart in the Sketch and Hatch tutorial and in the Paisly Motif tutorial, even tho the shape for the Bezier Tool is set to None, where I use Triangle In in this spiro swirls tutorial.
If you use the "highlight path"
I hope this provides a bit more insight.
Also, I saw you posted 2 similar comments, I only published one as I assume you did not know that the comments were moderated before publishing.
Cheers,
Syllie
This tutorial is made with Inkscape 0.47, which is the latest stable release.
Inkscape version 0.48 is not released yet. The development is currently in the "chill phase". The actual release is expected possibly in May 2010.
However, if you are a daring user, and not afraid for working with an unstable version: user testing is HIGHLY appreciated. I run the development version on Ubuntu and I get daily updates from the repository. Also for Windows there is an option to grab nightly builds. See for more information:
inkscape.org/download/?lang=en under the section "Development Versions".
To quote the website:
Quote:
Bugs can be reported at: bugs.launchpad.net/inkscape
Inkscape is awesome because users like you and me are testing and reporting!
Cheers,
Syllie
I did not know the Bezier tool can do such wonderful things along with path effects.
Many Thanks.
Rajen.
What operating system are you on please? There are some issues with Mac OS X (Leopard / Snow Leopard).
I could re-write an excellent forum post, but I rather direct you to the source:
InkscapeForum.com: cut & paste
InkscapeForum.com: Mac Snow Leopard?
I hope this helps, if not please give me a bit more info and I try to help you further.
Cheers,
Syllie
The result of conversions between different vector editors is always a bit tricky as one or the other may not have the specifications implemented in full. The more complex a drawing, the more the chance that something will not turn out right. And as eps not only supports pure vector but also rasterization, this may also be cause of troubles.
However, to share your vectors between these programs, conversion is NOT needed. Both Corel Draw and Illustrator can read svg files. I tested it specificallly for spiro this morning:
Versions used:
- Inkscape 0.47
- Corel Draw 11 (Dutch version, with all patches applied)
- Illustrator CS4
I suggest you do the import in .svg and then save/export from the 2nd editor in the format required.
I hope this helps.
Cheers,
Syllie
I believe Syllie already answered this up higher in the comments. Please check comment: verysimpledesigns.com/.../...
Totally Awesome!!
I've put up my results in wallpaper format if anybody would like 'em: bit.ly/bmYKjs
I had a look at your spiro swirls and they look awesome. I like the glow effect that you applied.
All comments on the tutorials are moderated (keeps the spam low) so it takes sometimes a while before they appear. I deleted the double post.
Cheers, Syllie
I hope this helps,
Syllie
Sometimes it is good to keep in mind that as long as the Spiro effect is active, the curve will be treated and pushed into the spiro shape as soon as you move a node.
The trick is to use the spiro effect to get a nice swirl, and then to remove the spiro effect by applying the "object to path" option (under the path menu).
The path with then be fixed in its current shape, the pattern and spiro are applied permanently. It also removes the option to quickly edit the path as spiro, but it will prevent unwanted changes as described.
The part in the video where I duplicate and mirror a swirl shows exactly what the can happen and how to apply above technique.
I hope this helps,
Syllie
I managed these within 20 minutes
Thank you again for your wonderful tutorial and blog ☺
Cheers,
Syllie
I eventually figured out to how draw the spirals. But the triangle in the corner is impossible to manipulate.
For a start it is so small that it is only barely visible.
I can't seem to select either.
It might just be that I've been using gimp for ages, but inkscape is the most frustrating piece of software that I've ever tried to learn.
I think I know what you mean. My mate Dakka is an experienced GIMP user and Inkscape drives him nuts too. I have been using both vector and image editors for quite some years and I sorta know where each of the programs strenghts and weaknesses are. The main thing to keep in mind is that a vector is an object on its own and it does not blend in with the neighbouring pixels. So try to find the shapes in your designs, chop them in "primitives" (the circle, rectangle etc) and construct your drawing from those.
I agree with you on finding and editing this tiny control shape on the drawing. I find it irritating that it initially appears at the top left corner of the document (why not at the top left corner of the path bounding box?). And size is irrelevant as it is a vector.. but bleh. Unfortunately.. that is what you get with the default settings - I cannot help that.
But what you can do is draw your OWN shape, cut (or copy) it to clipboard (Ctrl+X or Ctrl+V), select the path with the pattern effect and then "paste" your own shape. The technique is demonstrated in the video.
If you are an absolute Inkscape beginner, you may find the Cartoon Fish tutorial helpful, as it shows these techniques too - but it is fully written with lots of screenshots. Also the Kokeshi Doll tutorial is targeted at new vector/inkscape users. My mate Dakka tested them all (swore at some of the earlier versions) and was able to complete them.
I hope this helps,
Cheers, Syllie
I have figured out how to select/edit the pattern triangle thing, only to stumble upon the next step where you create another pattern for the swirl to follow... Every time I Copy the new pattern, I Cut it, reselect the swirl, then click "Paste" in the "Path Editor" box, only to get a message that says there's nothing on the clipboard. I've seen your reply to João's comment, and tried to follow those steps but I still get the same result... So what could I've done wrong? :(
I am sorry about my slow response to your question.
I am not sure what is going on - but I know there are some problems copy / pasting with Inkscape 0.47 on the Mac. If you are working on the Mac you can find workarounds in the Inkscape FAQ.
I suggested to use the copy action to avoid losing the source object (so cutting is not required then). The extra object can be deleted afterwards.
I hope this provides some new insight.
Cheers,
Syllie
I start by clicking the bezier tool, 'create spiro path', and 'triangle in', but when I try to draw, it's not swirly, they're just straight lines.
I've been trying for almost an hour, but it just won't work.
Drawing bezier curves can be a bit hard at first. The trick is to click AND keep the mouse buttondown AND drag the mouse to the new point and only to release the cursor after that action.
If you simply click on the canvas, the Bezier tool will assume you meant a "corner node" (a cusp node) and the spiro action cannot kick in.
A way out is to select all the nodes (just draw an selection window around it or hit Ctrl+A - both actions with the node tool selected) and then use the Auto-Smooth nodes button. That will smooth the nodes and spiro will kick in immediately. This technique is demonstrated in the video, but also in the sketch and hatch tutorial.
There is a short instruction on how to draw bezier curves.
Good afternoon!
How do I download your video? So I won't be online on Internet.
Thank you for your attention, help and understanding!
Gustavo Reis
It is not really a video but a flash file. Instructions on how to get it local are given one of the comments above.
here is my final outcome.
Thanks gyz
That looks quite impressive. Thanks for sharing your result.
Cheers,
Syllie
this is probably the first [graphics] tutorial that made me laugh! congratulations
a bit dull to follow without any sound, but very to-the-point useful regardless.
thank you Syllie,
good luck with WP machinery
and thanks for embracing inkscape
Thanks for your feedback. I am not sure what causes the laugh.. must be Inkscape messing up my design - or me figuring out that I mirrored my design at some stage.
WP is not Joomla. This site uses Joomla. For a reason
WOW!
This tutorial is what I need for my t-shirt design. Thank you!
here's my result (made after pausing the vid midway
works excellent with gradients
very happy here with my first artwork with inkscape lol
I love pinks and purlples and with the green you made it very vivid.
I want to emphasize 2 things only:
- this is not a site for religious discussions;
- I respect people and their believes in all their colours (whether they are Islamic, al-Kitāb or not)
Obviously you are a person of intelligence and open to debate, so I am wondering how you got the context wrong and found it necessary to take offense. Please refer to the dictionary (as English is not my native language I used the Cambridge dictionary) and read the word in its proper contexts: i.e. "the skill of performing tricks to entertain people, such as making things appear and disappear and pretending to cut someone in half" - which is not easily confused with either divine or arcane powers.As this is my website and I decide what will be published or not - I consider this discussion closed. No one need to comment on this further, it will be ignored.
merci merci , merci C'Est Vraiment Un bon tuto ... SI JE NE same pratique Pas de l' anglais grâce aux J'Ai réussie " bulles " ajoutées à faire joli dessin de l'ONU !
Vous verrez le NE suis Pas de voiture JE NE PAS douée et au Québec je ne sais faire ... Pas ALORS croyez moi sur parole ! : P et merci à la tutrice !
I am going to have to upgrade before i can give this a whirl.
Great tutorial and well set out also, thank you
i love it!
thank you so much!!!
it's much better than photoshop dan corel draw...
There are many ways to customise the Inkscape workspace and it is easy to hide and show toolbars and other elements.
From your description it seems that the Tool Controls Bar is not visible. Use the menu View > Show / Hide > Tools Control Bar to unhide it.
For your information: in the screen shots on this website I have all elements under the Show / Hide menu enabled and my 'view' is set to default (the 3rd options from the bottom in the view menu).
Also.. the 'cartoon fish' tutorial shows use of the spiro swirl but uses screenshots with explanatory notes.
I hope this helps.
Cheers,
Syllie
but one question, I have downloaded this tutorial, but when I played it I couldn't see it as on the web, it's shown so small
It is an flash file at a specific size (height=591, width = 801). Any other size will show it blurred. The size is kept small on purpose - as we do not all live in a place where internet bandwidth is available unlimited or cheap.
Cheers,
Syllie
Ruth
Some people like video tutorials others like the written part. I myself prefer the latter that is why most tutorials on the site are in that form. There is no written version of the spiro swirls tutorial on this site, but the same techniques are used and explained in the cartoon fish tutorial. You may want to explore that part.
Cheers,
Syllie
Your Spiro tutorial is very inspirational. Thanks.
Thanks a lot!
The little triangle appears at the top of the document (the paper that shows in the background). Try to follow the instructions in comment 37 of this post
I hope that helps, let me know how you go.
Cheers,
Syllie
Glad you liked the tutorial. You're right - the spiro path controls the look and feel of your path, and when you convert it to a normal path (Path > Object to Path), as demonstrated in the video, the control is fully back to you. It is a very powerful technique with many applications.
Thanks for your feedback!
Cheers,
Syllie
Thanks
This link provides some tutorials that may be useful for the community: augustoschwartz.blogspot.com
[edit by Syllie: the tutorials at this link are in Portugese]
You forgot to include a link to your result, but I checked out your website.. and there it was!
Very cool!
Thank you for sharing the result.
Cheers, Syllie
I am sorry you have troubles finding the spiro option when working with the Bezier tool.
Please make sure that you work with Inkscape 0.47 or higher. And please check out this Inkscape tutorial too as it shows how to use spiro with the bezier tool step-by-step (instead of a video): Sketch and Hatch.
I hope this helps.
Cheers,
Syllie
Is it right if include link to your tuts in my post about 'inkscape tutorial around the web'
Including links to the tutorials is perfectly fine :)
The terms are pretty clear to me and read that you can use our designs as long as credit is given (link back). If that is not desired then we can be approached for a commercial license.
The tutorials are not to be reproduced, but we are allowing translations - the more people benefit.. the better. I do like to see the final product tho.
At the moment I see quite a few people "ripping off" the designs. Basically they follow the tutorial, create a very very similar product (almost a 1-to-1 copy) and then put that up in their Zazzle / Red Bubble stores. I don't understand that.. how hard is it to take up a design and ADD something of yourself to it - some of the results that are posted back to the site show more originality!
To my eyes this behaviour comes pretty close to ignoring the "please do not claim this design as your own". But I guess there always be copy cats. At least some of those mention that it is the result of one of my tutorials.
Anyways.. linking to the site is always ok :)
Cheers,
Syllie
Anyway, here's a solution to the problem with flipping a duplicated path element that has 'Pattern Along Path' effect. The reason the shape changes is because the source pattern does not flip with the object. One solution would be to set the width in the effect settings to a negative value, eg. if the width is 1 then set it to -1. In effect this will flip the pattern, thus fixes the shape.
Another solution would be to group the object before flipping it. But then if you ungroup it, the shape will still change.
So the former solution would probably be better if you want to maintain the effect.
Thanks again for the tutes! Keep'em coming!
Cheers!
i want to inkscape softwear
Google is your friend: inkscape.org
Inkscape is a fantastic vector editing program - and it is available for free.
Cheers,
Syllie
Simplification always deforms a bit, but it should not change the shape significantly.
Did you fix the results of the spiroswirl before your simplification? Path > Object to Path? This step sounds a bit funny, but it basically applies the spirocurve permanently to your path.
If you ran the simplification on your path with the spirocurve still applied, then your original path will simplify and next the spirocurve will still deform to that simplified path. With greater effects of course.
I hope this gives you some further insight.
Cheers,
Syllie
Super tutorial! Very informative! Thanks for sharing!
Inkscape Rulz
The time you use to show the options is excelent and the video it's very easy to follow.
The little triangle appears at the top of the document (the paper border that shows in the background). Try to follow the instructions in comment 37 of this post
I hope that helps, let me know how you go.
Cheers,
Syllie
Je debute avec Inkscape et ça ma bien servi
Merci encore
Thanks again
I'm glad you enjoyed it. The tutorial is made with freeware (did I mention I love open source and freeware apps?) and it is called Wink. You can get it here.
I hope that helps.
Cheers,
Sylvia