Full Circle THE INDEPENDENT MAGAZINE FOR THE UBUNTU LINUX COMMUNITY
INKSCAPE SERIES SPECIAL EDITION
INKSCAPEINKSCAPE VolumeVolume OneOne Parts 1-7 Full Circle Magazine is neither affiliated, with nor endorsed by, Canonical Ltd. Full Circle Magazine Specials About Full Circle Find Us Full Circle is a free, Website: independent, magazine http://www.fullcirclemagazine.org/ dedicated to the Ubuntu family of Linux operating systems. Forums: Each month, it contains helpful http://ubuntuforums.org/ how-to articles and reader- forumdisplay.php?f=270 submitted stories. IRC: #fullcirclemagazine on Full Circle also features a Welcome to another 'single-topic special' chat.freenode.net companion podcast, the Full Editorial Team Circle Podcast which covers the Another serial, another compilation of articles for your magazine, along with other convenience. Editor: Ronnie Tucker news of interest. (aka: RonnieTucker) Here is a straight reprint of the Inkscape series, Parts 1-7 from [email protected] issues #60 through #67, from self-confessed non-artist Mark Webmaster: Rob Kerfia Crutch – if he can do it, so can you! Please note: this Special Edition (aka: admin / linuxgeekery- is provided with absolutely no Please bear in mind the original publication date; current [email protected] warranty whatsoever; neither versions of hardware and software may differ from those Editing & Proofreading the contributors nor Full Circle illustrated, so check your hardware and software versions Mike Kennedy, David Haas, Magazine accept any Gord Campbell, Robert Orsino responsibility or liability for loss before attempting to emulate the tutorials in these special or damage resulting from editions. You may have later versions of software installed or Our thanks go to Canonical and the readers choosing to apply this available in your distributions' repositories. many translation teams around the content to theirs or others world. computers and equipment. Enjoy!
The articles contained in this magazine are released under the Creative Commons Attribution-Share Alike 3.0 Unported license. This means you can adapt, copy, distribute and transmit the articles but only under the following conditions: You must attribute the work to the original author in some way (at least a name, email or URL) and to this magazine by name ('full circle magazine') and the URL www.fullcirclemagazine.org (but not attribute the article(s) in any way that suggests that they endorse you or your use of the work). If you alter, transform, or build upon this work, you must distribute the resulting work under the same, similar or a compatible license. Full Circle Magazine is entirely independent of Canonical, the sponsor of Ubuntu projects and the views and opinions in the magazine should in no way be assumed to have Canonical endorsement. full circle magazine HHOOWW--TTOO Written by Mark Crutch IInnkkssccaappee -- TThhee SSVVGG FFiillee FFoorrmmaatt
magine giving instructions to someone in order for them to Vector graphics, on the other draw a picture of a house. The hand, consist of a series of I chances are that you would instructions. “Draw a red circle with describe geometric shapes and a radius of 10 units, centered at their relative positions. “Draw a big coordinates X,Y. Now draw a blue red rectangle about half the width line from the top left corner of the of the page, roughly in the middle page to the bottom right.” That red and a little wider than it is tall. Now circle could have a radius of 10 put a grey triangle on top of it inches, or it could be 10 miles, that’s a little wider so it overhangs meaning that, unlike raster images, at the edges...” The same vector graphics can be scaled with instructions would work for any no loss of quality. size of canvas from a postage stamp to a billboard.
You’ve just imagined the world of vector graphics. one in particular is an open format, “tags” in a similar manner to HTML When you take a photo or defined by the W3C – the same files. There's a
full circle magazine #60 18 �������� � HOWTO - INKSCAPE uses SVG as its primary file format, works, but it's got one other trick which makes it a great tool for up its sleeve which elevates it Useful Links: creating or editing SVG files, but beyond the inherent smoothness Inkscape: http://www.inkscape.org which also places a limitation on and simplicity of pure vector Inkscape User Forum: the program's capabilities. With graphics: it also has some support http://www.inkscapeforum.com serious work now underway on for raster images. At the simplest Tango SVG Icons: defining version 2.0 of the SVG level, it's possible to include a http://tango.freedesktop.org/ format, Inkscape should, hopefully, raster image in an SVG file, then W3C SVG Working Group: be able to make some ground on draw lines and circles over it, or clip http://www.w3.org/Graphics/SVG/ its proprietary competition over it into an odd shape using an SVG the coming years. path. But raster images can also be used as fill patterns in SVG files: ...brought to life with some SVG Next month we'll have our first The HTML-like structure of SVG Inkscape ships with a few of them filters touch of Inkscape. Stay tuned! files, together with their origins at by default, and I've personally used the W3C, have made them the the sand texture (which looks like official standard for vector the noise or snow on an un-tuned graphics in the web world. It has television) to help simulate stone, taken a long time, but most web ash, bricks, and even a cornfield! browsers now natively support SVG files, and it's possible to mix them Going further still, SVG has a directly into HTML files – ideal for concept of filters – mathematical inline graphs or maps. The operations that can be combined hierarchical structure of tags is also and applied to the rasterised pixels open to being modified by in your final image. The image is Javascript in the same way as still made up of vectors, but once HTML content, allowing for anyone those vectors have been drawn, with some web development skills filters can create all sorts of grungy Whether you want to draw icons to create interactive graphics. As is raster effects which would usually for an application using Inkscape, often the case, however, specific require a program like GIMP or graphs for a website using support varies between browsers, Photoshop. Just look at how a little Javascript, or abstract art using a and some more advanced features filtering can turn some semi- text editor, SVG is a powerful and Mark has been using Linux since of the SVG format may not display random vector blobs into an flexible format that promises even 1994, and uses Inkscape to create in the same way in all of them. explosive fireball: more in the years to come. So grab two webcomics, 'The Greys' and 'Monsters, Inked' which can both be a copy of Inkscape using your found at: So SVG is great for diagrams, Some simple vector blobs... package manager and get drawing. http://www.peppertop.com/ interactive charts, and even artistic
full circle magazine #60 19 �������� � HHOOWW--TTOO Written by Mark Crutch IInnkkssccaappee -- PPtt11
efore you skip on past natural artist, why not have a try Let's begin by getting a copy of On first launching Inkscape, this tutorial thinking it's anyway – you might surprise Inkscape. It's in the repositories of you'll be presented with a blank not for you, I'm going to yourself. If art comes naturally to most desktop Linux distributions, working area, surrounded by a B let you in on a little you, then you've already got a so just use your normal package variety of toolbars, and a menu bar secret: I can't draw. If you give me head start, but, hopefully, you'll be installer. These tutorials will be at the top of the window (or at the a pencil and paper, or sit me in able to pick up some Inkscape- based on the 0.48 series, which has top of the screen if you're using front of The GIMP with an specific tricks and tips along the been the stable version for some Unity on a recent Ubuntu release). expensive graphics tablet, then I'll way. time now. The exact arrangement of the easily be bested by a four-year-old. toolbars can be modified to a Yet, somehow, I'm one of the limited degree: you can show and artists for a regular webcomic. So, hide them using the View > how does a fat-fingered cave Show/Hide menu, and you can painter like me manage to produce switch between three predefined artistic works? I use Inkscape. layouts using the Default, Custom, and Wide options at the bottom of Inkscape is no replacement for the View menu. For these tutorials, an artistic eye, or three years at art I'll be using the Custom layout school, but, if your problem is (which is badly named, as it doesn't largely one of hand-eye let you customise it at all), with all coordination, then it offers you the toolbars visible, and resulting something that pencils and The in a main window that looks GIMP don't. It gives you the something like that shown left. opportunity to tweak and modify every line and shape that you draw Now, let's draw - until you're happy with the result. something. From the If your hand-drawn lines are close, Toolbox (which runs but not quite what you'd imagined, down the left regardless of your Inkscape gives you the time and screen layout), click on the Circles tools to alter them, rather than and Ellipses tool (left). having to throw them away and try again. So, before you dismiss this Move your cursor back into the tutorial because you're not a working area and you should
full circle magazine #61 24 �������� � HOWTO - INKSCAPE notice that the pointer has you've drawn. To re-select your Above those two swatches, changed to indicate that you're ellipse just click on it with the you'll find a whole load more using the Circle tool. In the Circles and Ellipsis tool still active. swatches stretching the width of working area is an outline that the window. This is referred to as represents your page – although As well as the dotted line, you the color palette. Click on a swatch Inkscape will happily let you draw should see two small squares and a in the palette to set the fill color of outside its boundaries - which small circle on the edge of your the currently selected object, and provides you with a large area for ellipse. These are referred to as SHIFT-click to set the stroke color. rough work, reference images or “handles”, and are a graphical way At the far left of the palette is a anything else that you don't want for you to modify some of the swatch with a cross through it to appear on your printed page or properties of your objects. Try which can be used to set the fill or exported image. Click within the moving one of the square handles stroke to transparent. Try setting page, and drag to the right and by dragging it with the mouse: it the fill to transparent and giving downwards to create an ellipse, changes the radius of the ellipse in the stroke a color. Now play with releasing the mouse button when one direction. The second square the circular handles and the you're happy with its size and handle changes on the other Segment and Arc buttons – it shape. Yours will probably be a radius. should be a bit clearer why the different color, but we'll sort that latter is so named. out shortly. The circle is a little different – Let's give your ellipse a little it's actually a pair of circles on top color. Select it and look down to Finally let's move of each other. They allow you to the bottom-left of the Inkscape the ellipse around on turn your circle into a segment or window. There you will find a pair the page. For this you'll an arc. Try dragging one round the of colored swatches labelled Fill need to click on the outline of the ellipse. Now drag and Stroke. Fill shows the color Select tool, which is the first the other. Inkscape tries to guess that is used to draw the inside of button in the toolbox and looks whether you want a segment or an your ellipse, while Stroke shows like an arrow (left). arc, so will flip between the two the color that is used to draw its Your ellipse should have a modes as you move the handles. outline. You can right-click on the With this tool enabled, you can dotted line around it, indicating You can switch between them number next to the Stroke swatch move an object simply by clicking that it's currently selected. Many manually using the buttons on the to pick from a few standard sizes if and dragging it. When an object is operations in Inkscape only work Tool Control Bar, just above the your stroke is too thick or thin. selected using the Select tool, on the objects that are currently drawing area. Clicking on the third you'll see a dotted line around it, selected. The quickest way to de- button will put the handles on top but rather than the small square select everything is to click on a of each other once more, returning and circular handles we saw when blank section of the working area, you to a full ellipse. the Circle tool was active, you'll away from any of the objects
full circle magazine #61 25 �������� � HOWTO - INKSCAPE see some arrow-shaped handles can drag the little cross around to object down and up by one work using the File > Save (or Save arranged around the outside of change the center of rotation; position at a time. As...) menu. There's a pop-up menu the dotted line. SHIFT-click on it to return it to the in the save dialogue that lets you middle of the object. A single click choose between various formats. on the ellipse will switch back and For now just choose Inkscape SVG, forth between the resize and the first item on the list – I'll cover rotate modes. some of the other options in a future instalment. A double-click will switch you to Sometimes you might need to the Circle tool, letting you gain get a closer view of the objects you access to the small square and create – or zoom out for an Dragging these arrows will let circular handles once more. Try overview. We'll cover that in detail you change the width and height rotating an ellipse using the Select in a later article, but for now you of the ellipse. Although they may tool, then double-click to access can simply use the plus (+) and seem to have the same effect as the square handles and change the minus (-) keys on your keyboard to the small square handles you used ellipse using them. Back to the zoom in and out, and use the earlier, they're subtly different. Try Select tool and change the width scrollbars to move your view clicking on the ellipse a second and height using the arrow around. time, as though you're trying to handles. See, I told you they were select it again. The handles change different! Now you know how to create to a different collection of arrows, ellipses, segments, and arcs, and a small cross appears in the If you draw a few more circles change their colors, and adjust the center of the object. and ellipses and move them thickness of the stroke. You can around, you'll soon find that they move them around on the page can overlap or obscure each other and nudge them up and down in as though they're stacked on top the stack of objects you've created. of one another. When you select an You can zoom in and out and move object with the Select tool, you'll around the canvas. Next time we'll find a group of four icons which let introduce some other shapes, but you move your objects up and even with just ellipses, segments, down so that they appear in front and arcs, you can start to make Mark has been using Linux since By dragging the arrows at the of or behind other objects. The some simple images: although it's 1994, and uses Inkscape to create corners you can rotate your object. first and last buttons will make not really the right season for it, two webcomics, 'The Greys' and The handles at the sides let you your object jump to the back or how about drawing a snowman. 'Monsters, Inked' which can both be found at: skew it. Try playing with them to front of the stack, whereas the http://www.peppertop.com/ get a feel for how they work. You second and third let you nudge the Finally, you should save your
full circle magazine #61 26 �������� � HHOOWW--TTOO Written by Mark Crutch IInnkkssccaappee -- PPtt22
ast month, we learned purposes depending on what how to draw ellipses using you're doing in Inkscape at the the Circle tool. But you time that you press them, but, very L may have noticed that we broadly speaking, they usually didn't actually draw any circles, have the following effects: despite the tool's name. You may CTRL: Lock or snap some aspect of have got close by adjusting an the operation ellipse by eye, but that's not quite SHIFT: Affect the center or the same as drawing a perfect starting point for an operation circle. The secret to drawing a perfect circle is actually the secret An “operation” in this case to making the best use of Inkscape refers to drawing, rotating, in general: you need to use the skewing, or otherwise keyboard. manipulating an object. Let’s look at each of these keyboard Inkscape has a huge number of modifiers when used with our keyboard shortcuts and modifiers. Circles and Ellipses tool. Last month, I mentioned using the find that you can no longer move the small circular control Plus and Minus keys to zoom in and smoothly adjust the width and handles (to turn your ellipse into a out, but there are hundreds more height of the ellipse, but rather segment or arc) while holding the listed on the Inkscape Keys and that it snaps to fixed ratios of 1:1, CTRL key. You'll find that the Mouse Reference – the URL is at 1:2, 3:1, and so on. So the answer handles snap to particular angles, the end of this article, but you can to the question of how to draw a defaulting to 15°. You can change also get to it directly via the Help circle is simply to hold down CTRL that value via the File > Inkscape menu in Inkscape. Such a large whilst drawing an ellipse. Preferences > Steps dialog, where number of shortcuts can be you can choose from a selection of overwhelming, so I'm just going to As well as locking the ratio other angles via a drop down list, introduce them a few at a time, Select the Circle tool by clicking when you first draw an object, the although the default is a good starting with the CTRL and SHIFT its icon, or by pressing the “e” key CTRL key can also be used to snap choice for most uses. keys. (for ellipse) or the F5 key. Now your subsequent edits to defined hold down CTRL while you drag an values. Try selecting your ellipse Now try selecting an These keys serve different ellipse out onto the canvas. You'll with the Circle tool active, then ellipse using the Select
full circle magazine #62 18 �������� � HOWTO - INKSCAPE Pt2 tool (previous page, pointer icon), Now let's consider the SHIFT point. small square and circular handles, then clicking a second time to key. Try holding it down while like those on the ellipses. The two enable the rotation and skewing drawing a new ellipse. Notice that You can also combine the CTRL square handles are used to adjust handles. Hold down CTRL as you it's being drawn relative to the and SHIFT keys. Press both as you the width and height. Hold SHIFT rotate your object, and you'll find center of the ellipse, rather than draw with the Circle tool in order as you move them to constrain that the same snapping action the corner. One of the most to create a perfect circle drawn out your changes to just one direction occurs. It also happens for common uses for the SHIFT key in from its center point, or while you or the other. The circle handle, like skewing, but that's a little less Inkscape is to change the starting rotate your ellipse to rotate it in that on an ellipse, is actually a pair obvious with an ellipse, so we'll or reference point for an 15° steps around the opposite of handles on top of one another. come back to that one a little later. operation. corner from the rotation handle. Move just one of them (or hold CTRL whilst moving either of Click on the ellipse again to Select an ellipse using the Let's finish this month with a them), and you'll get nice switch back to the move and scale Select tool, then hold SHIFT as you new shape: there's only so much symmetrically-rounded corners to handles. If you try dragging your resize it with the arrow handles. you can draw with circles and your rectangle – like a quarter of a ellipse around, you'll find that the Notice how the reference point for ellipses so we'll create some circle. Move both of them and CTRL key locks you to only your actions has switched to the rectangles and squares instead. you'll get an elliptically-rounded horizontal or vertical movements. center of the ellipse. Try pressing corner instead. If you want to go Now, try resizing with the arrow and releasing SHIFT while you're in For this, we'll use the back to perfect 90° corners, simply handles, and you'll discover that the middle of resizing the ellipse to Rectangle tool (shown SHIFT-click one of the circular the CTRL key locks the aspect ratio make it more obvious. You don't left. Press F4 or “r”). Start handles, or use the button at the of your ellipse – you can make it have to press these modifiers right by clicking on the button in the end of the Tool Control bar (just bigger and smaller, but it will keep at the start of an operation, you toolbox, then drag your shape out above the canvas). the same ratio of width to height. can press and release them at any on the drawing canvas, just as point. The only thing that matters you've been doing with ellipses. If you use a mouse with a is whether they're pressed when You should now have a nice wheel, then the CTRL key has you release the mouse button. rectangle: another feature: hold it down as you scroll the mouse wheel in Click the ellipse to switch to order to quickly zoom in and out of rotation mode, and hold SHIFT your document. While you're while you rotate or skew using the playing with the mouse wheel, try handles. You should see the small using it to click and drag the cross that indicates the rotation canvas around – a much faster way center jump to the opposite corner to pan around your drawing than or side from the handle you're using the scroll bars. moving, and your ellipse will rotate or skew around that reference Notice how your rectangle has
full circle magazine #62 19 �������� � HOWTO - INKSCAPE Pt2
The CTRL and SHIFT keys work in a very similar way with the Rectangle tool as they do with the CCOODDEEWWOORRDD Circle tool: hold down CTRL while Every number in the grid is 'code' for a letter of the you draw your rectangle to alphabet. Thus the number '2' may correspond to the constrain it to fixed ratios if you letter 'L', for instance. All - except the difficult codeword want to create a perfect square, or puzzles - come with a few letters to start you off hold down SHIFT if you want to draw from the center outwards rather than corner to corner.
Of course you can change the color of the fill and stroke for your rectangles – just as we did with ellipses last month. You can also use the Select tool to move, resize, rotate, and skew them – and if you hold down CTRL while skewing a rectangle, it's a lot more obvious what's happening than it is with an ellipse.
Now that you can create rectangles and squares, why not enhance that snowman you drew last month by adding a hat and pipe?
Useful Links: Keys and Mouse Reference: http://inkscape.org/doc/keys048.h Mark has been using Linux since tml 1994, and uses Inkscape to create Solutions are on the second last page. two webcomics, 'The Greys' and 'Monsters, Inked' which can both be found at: Puzzles are copyright, and kindly provided by, http://www.peppertop.com/ The Puzzle Club- www.thepuzzleclub.com
full circle magazine #62 20 �������� � HHOOWW--TTOO Written by Mark Crutch IInnkkssccaappee -- PPtt33
ere's a riddle for you: rectangle, which has had its selection to toggle scale/rotation an ellipse: “...drag inside the ellipse when is a circle not a corners rounded using the small handles.” The status line is telling for arc, outside for segment.” So if circle? More specifically, circle handles. you that clicking your selected you were wondering about H which of these two object will toggle between the Inkscape's seemingly random circles is a circle, and which one Often it's quite obvious what scale handles and the rotation & switching between segments and isn't? type of object you're working with skew handles. arcs, it turns out not to be random in Inkscape, but as your drawings after all. Keep the pointer inside become more complex, and as you In fact much of what has been the boundary of the ellipse if you begin to use more and more tools, verbosely described in the want to create an arc, and outside it's easy to lose track. Some previous two articles can be found if you want to create a segment – features only work with particular written far more succinctly in although you can always switch types of objects, so it's handy to be Inkscape's status line. With the using the toolbar buttons if you able to tell at a glance exactly Circle tool selected you're told to end up with the wrong type of what you've got selected. Inkscape “Drag to create an ellipse. Drag object. They may look the same, but reveals that information – and a controls to make an arc or they're not. If you double-click on whole lot more – in the status bar segment. Click to select.” In this As well as these handy tips, the each of them to make their edit at the bottom of the window. case “drag controls” is Inkscape's status bar also houses a few other handles visible, you can start to Here's the relevant part of the terminology for moving the small things that you should become see a difference. status bar when each of these square and circle handles. A similar familiar with if you want to make “circles” is selected with the Select line when the Rectangle tool is the most of your time with tool: selected suggests you can “Drag Inkscape. At the far left are the fill controls to round corners and and stroke swatches that were resize.” introduced back in the first part of this series. In theory you can click Hovering the mouse pointer and drag on them in order to over the various handles also change their colors, but I've always provides valuable information in found that to be an imprecise and The one on the left is the true From that information it's quite the status line, including this gem awkward approach. Next month circle, created by holding down obvious that the two circles are when you use the circle handles on we'll look at the Fill and Stroke CTRL while drawing an ellipse. The different. But that image has been other is a square, created by edited a little; the text actually holding CTRL while drawing a reads “Ellipse in layer Layer 1. Click
full circle magazine #63 19 �������� � HOWTO - INKSCAPE Pt3 dialog which is a much better way are all related to layers. I'll be information. Be warned, however, (easy to remember because it to pick colors that aren't present in covering layers in a later article, that Inkscape's choice of the looks a little like a star) or SHIFT- your color palette. but there are three things worth bottom-left of the page as the F9. Dragging out a shape on the knowing about them at this stage: origin point is different to the SVG canvas will produce either a convex The stroke thickness offers an specification's use of the top-left polygon or a concave, star-like, equally useless facility to click and • If you're familiar with layers in corner – it's not a distinction that drag in order to change its value. GIMP or another graphics program, will affect most people, but it does For most quick changes a right- layers in Inkscape work in a similar mean that if you're a programmer click on the number to bring up the way. type who wants to edit the SVG file context menu is a much better directly, these values are almost option. • Clicking the eye button is another useless to you. of the many ways to make your The spin-box labelled with a objects disappear from the screen The last Inkscape-specific cryptic “O:” lets you set the opacity – in this case by hiding the layer widget in the status bar is a zoom polygon. You can switch between of your selected objects. It's shown they're drawn on. The icon changes spin-box which shows you the the two modes using the first two as a percentage, so 100 is the norm to a closed eye in this case and you current zoom level, lets you set a buttons on the tool control bar. for a completely opaque color can simply click it again to display specific value by typing or using whilst 0 will render your objects the layer once more. the up and down buttons or pick Depending on which mode completely transparent. Inkscape from a few standards via a context you're using, you'll see either one has lots of ways to make your • If the lock icon looks like a closed menu. There are so many other or two small diamond-shaped objects transparent, which can be padlock, then your layer is locked zoom tools, including the CTRL handles. These let you adjust the a real problem for new users. You and you won't be able to draw plus scroll wheel and the +/- keys size, rotation and, for concave can set a value in this box by typing anything new onto it. Click the icon which I've described previously, polygons, the spoke ratio. By directly, by using the up and down again to unlock it. that I doubt you'll ever use this holding various modifier keys as buttons at the side, or by right- widget. Finally there's a handle to you move them, you can also clicking to bring up a rather coarse resize the window. adjust several other parameters five-step context menu. I usually (have a look at the status bar for use the context menu, at least as a Let's finish this month by the details) – although I usually starting point, and, if nothing else, To the right of the status text is introducing another drawing tool prefer to change them using the it provides a fast way to get back a pair of fields which show the X to your arsenal: the Stars and spin-boxes in the tool control bar. to 100% opacity when you're in and Y coordinates of your mouse Polygons tool. It's got an icon in danger of losing your transparent pointer, relative to the bottom-left the tool box and can also be The only parameter that can't objects. corner of the page boundary. You activated using the asterisk key be changed via the diamond can't modify these in any way, The eye and lock icons, and the other than by moving your mouse, pop-up menu that follows them, as they're just there for
full circle magazine #63 20 �������� � HOWTO - INKSCAPE Pt3 handles is the number of corners To go back to the question that on your polygon, but the other started this article, you now have a CCOODDEEWWOORRDD advantage to using the spin-boxes third way to create a 'circle' – draw is that, like the spin-boxes on the Every number in the grid is 'code' for a letter of the alphabet. a convex polygon with a large Thus the number '2' may correspond to the letter 'L', for instance. status bar, they each have a number of corners. It's not a context menu that you can access All - except the difficult codeword puzzles - come with a few particularly good way to draw a letters to start you off with a right-click. These context circle, and it's certainly not menus are tailored to each spin- efficient, but it does reinforce the box separately, with descriptive fact that objects in Inkscape aren't titles to provide you with a little always what they seem. Keep an insight into the effect they'll have. eye on the status text.
The best way to get a feel for Why not use this new tool to the Star tool is simply to play with add some stars to the background it. Try different combinations of of your snowman image from the values in the spin-boxes. If your previous articles. The same tool objects start to get a little out of will also let you replace those control just click the button at the circles that we right of the tool control bar – the used for the eyes one that looks like a small broom – and mouth with in order to 'clean up' the slightly parameters back to sensible randomised defaults. To give you some idea of convex polygons what you can achieve simply by – far more tweaking the parameters for the authentic as Star tool, this image contains six lumps of coal. identical polygons which differ only in the settings in their spin- boxes:
Mark has been using Linux since 1994, and uses Inkscape to create two webcomics, 'The Greys' and Solutions are on the second last page. 'Monsters, Inked' which can both be found at: Puzzles are copyright, and kindly provided by, http://www.peppertop.com/ The Puzzle Club- www.thepuzzleclub.com
full circle magazine #63 21 �������� � HHOOWW--TTOO Written by Mark Crutch IInnkkssccaappee -- PPtt44
his month, we're going to your palette at once (even if it of the window. You may dock the look at setting colors for takes up more vertical space), or dialog to the right-hand side of the our objects. So far we've are happy to use the scrollbar Inkscape window, or move it into a T applied colors to the fill when you need to access the more window of its own, by dragging it and stroke of our objects by distant colors. using the grey title bar at the top. clicking and SHIFT-clicking on the palette at the bottom of the If you want to use your own At the top of the dialog are screen. You can also set either to palette – perhaps to fit in with a three tabs for setting the Fill, the transparent by using the leftmost corporate color scheme or to Stroke Paint, and the Stroke Style. palette entry – the one with a integrate with other icons in an The first two offer almost identical cross through it. You've probably application – you can drop a GIMP options, so we'll just discuss the already discovered the scroll bar palette file (.gpl) into your Fill tab and you can extrapolate that usually lives between the .inkscape/palettes directory, or from there. palette and the status bar, and into /usr/share/inkscape/palettes which lets you scroll through the if you want it to be available to all full collection of colors in the users on your computer. palette, but have you noticed the tiny little button to the right of the The palette is great palette area – the one that looks for quickly selecting a like a small “<” character? Clicking color for your fill or on that presents you with a pop-up stroke, but what if you want a menu of palette options (far right). color that's not present in the palette? That's where the Fill & Most of this menu is taken up Stroke dialog comes in. There are by a list of palettes you can use. various ways to open the dialog, Try switching between a few of including the button on the them to see how they look. Then Commands toolbar, selecting an play with the Size and Width sub- object then picking 'Fill and Stroke' menus to find a swatch size that from the right-click context menu, you're comfortable with. Finally, pressing CTRL-SHIFT-F, or simply try the Wrap checkbox to see clicking on the current fill and whether you prefer to see all of stroke swatches at the bottom-left
full circle magazine #64 17 �������� � HOWTO - INKSCAPE Pt4 Immediately below the tab is a Also being put off for later row of buttons which are used to articles are the Unset Paint button determine what type of paint is that looks like a question mark and used for the fill or stroke. At the the two splodges on the right of left is a button for 'No Paint' which the Fill tab. looks like a cross and has the same effect as using the crossed swatch The third main tab on the Fill at the left of the palette in the bottom labelled with an 'A'. This is easily make a translucent fill or and Stroke dialog is labelled as main drawing window. If both the the 'alpha channel', which is just stroke completely opaque via the Stroke Style. While the Stroke fill and stroke are set to No Paint, another term for opacity. If this context menu on the swatch. Paint tab is used to set the color, then your object will be completely slider is moved to the far left, then gradient or pattern that is used for invisible. your fill or stroke will be The third and fourth buttons let the stroke, this tab lets you completely transparent. To the far you use a gradient for your fill or manage all the other parameters. The second button lets you right, it's completely opaque. stroke. Gradients will be the Most of these settings can be choose a single color for your fill or Anywhere in between will make it subject of next month's article, so adjusted only by using this dialog, stroke. In that respect, it's the partially transparent. This image remember that these buttons so it's worth becoming familiar same as selecting from the palette, demonstrates the same two exist, but we'll skip over them for with it. except that you have much finer objects with the stroke fully now. control over the color. Choosing opaque, but the top object's fill this button presents you with yet alpha being set at the 0, 128 and The next button lets you paint more tabs offering a few different 255 levels (above). your fill or stroke using a pattern. methods for picking your color. Inkscape ships with a variety of Don't be fooled though: Inkscape As with the No Paint option, stripes and polka dots which are uses RGB (Red, Green, Blue) values setting the alpha channel for both available via a pop-up menu when in its files even if you select a color the fill and stroke to zero will you select this option. Most via the HSL or CMYK tabs. This is render your object completely patterns are black or white, with one example of Inkscape being invisible. If the fill or stroke is just one color pattern restricted by the capabilities of the partially transparent, the color (Camouflage) and three grayscale SVG format. The CMS tab is only of swatches in the bottom-left corner bitmap images that can be used as use if you set up a color of the status bar in the main patterns, right at the bottom of management system on your window will show a two-part the list. It is possible to create your computer, and is outside the scope arrangement: the left half shows own patterns and to adjust the size of this series. the color with the alpha applied and scale of the built-in patterns, over a checkerboard effect, while but those are subjects for another Whichever color picker you the right half shows an opaque day. choose, you'll find a slider at the version of the same color. You can
full circle magazine #64 18 �������� � HOWTO - INKSCAPE Pt4
Round Cap, finishes your lines with the adjacent spinbox letting you At the top is a spin-box for corners. The difference between a semicircular smooth extension to adjust the relative start position of setting the width of the stroke, them can easily be seen by drawing the end. The other two options, your pattern. The Cap buttons also and an associated pop-up menu for a star (above left). Butt Cap and Square Cap, both give play a big part when it comes to picking the units that the width is a squared-off end to your line, and dash patterns – this image shows measured in. These duplicate the When a mitred corner is differ only in whether the square our star with a thick dashed stroke functionality available from the particularly sharp, the point of the extends beyond the nominal end using each of the three cap right-click menu on the status bar, join may extend quite some way. In of the line (Square Cap), or stops settings (above right). but offer a greater choice of units this case Inkscape will switch to precisely at that point (Butt Cap). and finer control over the width. drawing a bevelled corner instead. The three pop-up menus for SVG currently allows the stroke to The length that the point is The stroke doesn't have to be a Start, Mid and End Markers allow only straddle the outline of the allowed to grow to, before this single continuous line, it can you to select arrowheads, circles, object, half inside and half outside switch occurs, is set by the Mitre consist of a repeating pattern of squares and other shapes which it. You can see this clearly by Limit spin-box. dashes. Anyone who has spent will be positioned on your stroke. reducing the alpha channel on a time with technical drawings will Once again, the Start and End thick stroke – notice that the fill The Cap buttons affect the ends be familiar with the dash-dot-dash options make most sense on an shows through the inner half of of your lines. Most of the objects of a center line, and a series of unclosed line, such as an arc. On a the stroke. It's worth we've drawn so far are continuous dashes can be used to give a closed line, you'll probably want to remembering, as Inkscape novices loops, so the ends aren't really stitched effect for artistic use only one or the other. The Mid often wonder why increasing the clear, but if you use the circle purposes. The Dashes pop-up lets Markers appear wherever there is a stroke also reduces the area inside handles to turn an ellipse into an you choose from a variety of dash corner or a transition to a different their shapes. arc then you'll have an object with obvious ends. The middle option, patterns built into Inkscape, with line segment – which includes the transition from straight to curved Next are three radio buttons segments on a rounded rectangle. labelled as Join. These determine This image shows just three how the corners of your objects examples of markers and dash are drawn – either as sharp patterns in use (bottom). (mitred), rounded or bevelled
full circle magazine #64 19 �������� � HOWTO - INKSCAPE Pt4 One big caveat with markers is which Inkscape redraws the screen, combine transparency values in Why not use that trick on your that they will appear in black, especially if you're zoomed in complex ways that wouldn't be snowman image to give a little regardless of the color of your closely. possible with just alpha or just graininess to the covering of snow stroke. Fortunately Inkscape does opacity. In this rather garish on the ground with the addition of ship with an extension that tweaks The opacity slider has the same example the squares have 100% the Sand texture at a low opacity. the necessary SVG internals for effect as the 'O' spin-box and opacity and alpha throughout, but Add in some color tweaks, a bit of you, so making the colors match is context menu on the status bar, the circles have the fill, stroke and blurring, and some translucency on as simple as selecting your marker- but with more fine-grained control. opacity values indicated: the shadows, and you should find laden object, and then heading up Changing this value affects the that, with your new found mastery to the menu bar to choose opacity of the entire object – both The opacity slider is one way to of the Fill and Stroke dialog, your Extensions > Modify Path > Color the fill and the stroke. Effectively, make some use out of those image is starting to look a little Markers to Match Stroke. Even the object is drawn in memory colorless fill patterns. By less flat. using this extension, however, using the fill and stroke alpha duplicating an object (Edit > markers are always opaque, values, then that whole image is Duplicate), and then filling the regardless of the alpha setting of drawn to the screen using the copy with a pattern and reducing your stroke. object opacity. This cumulative its opacity, you can let the original effect makes it possible to object's color show through. The last part of the Fill and Stroke dialog to explain is the pair of sliders at the bottom – to adjust the Blur and Opacity. The former is a convenient shortcut for adding the Gaussian Blur filter to an object. SVG filters are a major topic of their own that we'll look at in a later article, but, for now, it's enough to know that increasing this slider will cause your object to become blurred. The more you increase it, the more blurred your object will be. Don't go too Mark has been using Linux since overboard: usually a small value 1994, and uses Inkscape to create will give you a good effect, whilst two webcomics, 'The Greys' and larger values just dissipate your 'Monsters, Inked' which can both be found at: object into mist. Be aware that http://www.peppertop.com/ using filters will slow the speed at
full circle magazine #64 20 �������� � HHOOWW--TTOO Written by Mark Crutch IInnkkssccaappee -- PPaarrtt 55
ast month, I introduced gradients in a document, it can articles – you'll also find that two the Fill and Stroke dialog quickly become an unwieldy list or three new handles have as a method for setting which gives little indication of appeared, joined by lines and L flat colors or patterns on where each one is used in your indicating the start and end points your objects. The SVG specification image. of your gradients as square and also allows for gradients to be circular handles respectively. You used, but, unfortunately, describes Your new gradient will always can drag these handles around – only two types: linear and radial. If take the same basic form: it has a even outside the boundary of your you've used gradients in other start color which is set to a fully object – in order to change the graphics programs, you may be opaque version of your current fill position and angle of your used to far more variety, but color (or to black if there is no fill gradient. For radial gradients, the Inkscape is bound by the color set), and it has an end color two end points can be moved limitations of the SVG specification which is the same as the start color independently, allowing you to so, for now at least, two gradient – but with its alpha value set to have circular or elliptical gradients. types are all you have. Inkscape has zero. The result is a gradient separate buttons for these in the running from an opaque color to a Fill and Stroke Paint tabs of the transparent color which runs from dialog: as you might left to right for a linear gradient, expect, one looks like a currently selected gradient, at the and from the center outwards for a linear gradient: top of the list, will be the new one radial gradient: that you're in the process of and the other looks like a creating. If you prefer to use an radial gradient: existing gradient, then you can simply select another one from the When you click on one of the Whichever one you choose, list. Each gradient gets given a gradient handles, you'll notice that you'll be faced with the same user user-unfriendly name, such as the the Fill and Stroke dialog switches interface within the dialog (above “linearGradient3791” in the back to the Flat Color mode, with right). screenshot. Unfortunately, the selected color also reflected in Inkscape doesn't provide a If you double-click on your the swatches in the bottom-left The first item is a pop-up list of practical user interface for object – so that you enter editing corner of the main Inskcape the gradients that already exist modifying this name, so, once you mode and can see the small window. The color you can see is within your document. The have more than a handful of handles we've explored in previous that of the selected end point of
full circle magazine #65 18 �������� � HOWTO - INKSCAPE Pt5 your gradient, and you can change we need to make it clear to While the Gradient tool is you can happily change the stop it in any of the ways we've Inkscape that we want to edit the active, you can still move the end colors and positions in the discussed previously. Try selecting gradient rather than the stops to modify the size and angle duplicated gradient without the transparent end, clicking on object itself, by selecting of the gradient. When you're done, affecting any objects that use the another color swatch, and then the Gradient tool: just select your object using the original version. As such, it can be a playing with the opacity slider or Select tool in order to return to the convenient starting point if you the “O” spin-box. This approach from the toolbox (or by familiar view of the Fill and Stroke already have a gradient that's close lets you create gradients that pressing “g” or CTRL-F1). Now it's dialog with the gradient in place. A to the one you need, but not quite change smoothly between any two possible to double-click on the line useful shortcut for this step is to perfect. colors. that joins your existing stops in just hit the space-bar. In most order to add a new stop. It will cases, this will toggle between the The Edit… button we'll come default to the color and opacity at current tool and the Select tool, back to shortly. that point on the line, so the visual switching back and forth with each appearance of your object won't press. The Repeat pop-up is used to change – but now that the new define what happens beyond the stop exists, you can select it and Let's go back to a simpler start and end stops of your change its color. You can also drag gradient with only two stops. The gradient. The default setting is stops along the line, crowding quick way to do that is to switch “none”, in which case the area A gradient with two colors is all them together for a sharp your fill to Flat Color, and then before the start handle will take on well and good, but what happens if transition between colors, or back to a gradient again, returning the same color as the start handle you want three, four, or a whole spreading them out for something you to the default arrangement of itself, and the area beyond the end rainbow? You could create multiple more gradual. Very quickly, it's a fade from opaque to transparent handle will likewise take on the objects, each with a part of the easy to create garish multi-colored – centered on your object. The Fill color of the end stop. Both the overall gradient, but that quickly gradients, although more subtle and Stroke dialog should look like other settings repeat the gradient: gets complex and unwieldy. In color changes between stops will the first image in this article once “reflected” causes the gradient to practice the answer is simpler than often give a better artistic effect. more, giving us a chance to explore reverse for each repeat, giving a you might think – we just create the remaining options on the smooth transition that cycles as more handles on our gradients. screen. Start-End, End-Start, Start-End, Instead of a start and end handle, End-Start…; “direct” uses the we'll have one or more in the The Duplicate button is almost gradient as it stands, giving a more middle as well. These handles each self explanatory. It duplicates abrupt cycle of Start-End, Start- define a particular color in the whichever gradient is currently End, Start-End, Start-End… As is gradient, and are usually referred selected in the pop-up menu, and often the case, a picture to as “stops”. applies the duplicate to the demonstrating this makes far more currently selected object. That last sense than a textual description, so To add a new stop to a gradient point is important – it means that here are three pairs of gradients
full circle magazine #65 19 �������� � HOWTO - INKSCAPE Pt5 demonstrating “none,” “reflected” gradient editor dialog has been There is one feature that crops This will let you and “direct” modes using the officially deprecated though, and up when using both fill and stroke separate them, and gradients shown in the top pair: will likely be removed in a future gradients which can sometimes prevent them release in favor of some additions feel more like a bug: Inkscape likes snapping back to the on-canvas editing, so I won't to 'help' by snapping the handles together if they get go into any more detail about it. of gradients together so that you too close to one can manipulate them as one. In this another. Throughout this article I've example, I've drawn a square with talked about editing the fill. But a yellow fill and blue stroke, then Now that you can create you can also apply a gradient to clicked the linear gradient buttons gradients, perhaps it's time to your object's stroke. Here we have in the Fill and Stroke dialog. It replace the simple blurred shading two thick-stroked rectangles, one looks like there's on your snowman with some radial with a linear gradient for the only one pair of gradients, to give him a little more stroke, and the other with a radial gradient handles, depth. Don't forget linear gradient: but that's because gradients for his nose, arms, hat one set is on top of and pipe. the other. As a finishing If you wish to modify just the fill touch, a or the stroke gradient, the obvious nicely thing to do would be to grab the shaded sky Being able to use a gradient for visible handles and move them out is usually Now we'll return to that Edit… the stroke can be a useful of the way to reveal the second more button. If you click it, you'll bring workaround for one of SVG's (and pair below, right? If you try that, interesting up a gradient editor window. This therefore Inkscape's) limitations: you'll find that Inkscape's than a flat is an alternative interface for strokes are always a fixed width. propensity for plane. editing gradients: you can add and This restriction makes it difficult to snapping gradient remove stops, change their draw lines that taper out, but using handles together position within the gradient, and a stroke that fades to transparent means that both alter their colors – exactly the can often give a similar visual sets of handles same features that are available by effect, especially with thin lines: move as one. Mark has been using Linux since editing using the Gradient tool on 1994, and uses Inkscape to create two webcomics, 'The Greys' and the canvas except that the editor The solution to this conundrum won't help you to change the 'Monsters, Inked' which can both be is simply to hold the SHIFT button found at: position and angle of your as you drag the handles around. http://www.peppertop.com/ gradients within your objects. The
full circle magazine #65 20 �������� � HHOOWW--TTOO Written by Mark Crutch IInnkkssccaappee -- PPaarrtt 66
his instalment is going to would expect. Double-click on the back at your starting point, you'll is what we'll use to manipulate introduce the most line to switch to the editing mode create a 'closed' path. The them. powerful of Inkscape's and you'll notice something a little difference between them becomes T drawing primitives: Paths. out of the ordinary: whereas a apparent when you add a fill – and Try dragging I say 'introduce' because paths can double-click on a rectangle, ellipse it should remind you of the effect one of the be created, used and manipulated or star will switch to the we got when creating arcs back at nodes around in many different ways, so we'll appropriate tool, double-clicking the start of this series. with the mouse. come back to them time and time on a path switches Now hold down again as these tutorials progress. instead to the Node tool As you can see, if you apply a fill SHIFT as you (shown left) . to an open path it will be drawn as click on several But, this month, we'll though there's a straight line that nodes to select keep it simple and start You'll become familiar with the closes the path. That can them – they are colored yellow with the Line tool Node tool soon enough, but, for sometimes be a handy feature, when they're selected – and drag (SHIFT+F6, or “b”). now, just select the Line tool again. however it works only when all of them around as one. Do you This time, click in several places on there's a single break in the path – want to move the nodes at either Select the tool, click once on the canvas before finishing off as soon as you introduce another end of a segment? Simply click on the canvas, then move the cursor with a double-click. You've just (we'll see how to do that next the line that joins them. Hold down to another part of the canvas created a path with multiple line month), the fill disappears entirely. SHIFT as you do so to add both before double-clicking to finish segments. The chances are that nodes to an existing selection. You your path. you've got an 'open' path – one in Let's return to the Node tool by can also press “!” (SHIFT-1 on my which the two ends are separate. double-clicking on one of the keyboard) to invert the selection, You've just created the simplest paths, or by pressing the F2 or “n” which can be especially useful type of path there is: a straight keys. The double-click will switch when dealing with very complex line. Try giving the stroke a color tools and select your path; if you paths. Finally, try dragging a and thickness using the Fill and opted for the keyboard shortcut, 'rubber band' selection box over Stroke dialog or the tools on the you might have to click on your some of your nodes by clicking on status bar that we've covered path to ensure it's selected. You the canvas and, keeping the mouse previously. Now, switch to the should see a small diamond- button pressed, dragging out a Selection tool (remember you can shaped handle marking each rectangle that covers some of your just hit SPACE as a fast shortcut), transition between line segments. nodes. Release the mouse button and confirm that you can resize, If you draw another multi- These are called 'nodes' and, as and the nodes within the box will rotate and shear it just as you segment path, but double-click you might imagine, the Node tool be selected (or added to your
full circle magazine #66 20 �������� � HOWTO - INKSCAPE Pt6 selection, if you also held SHIFT). the path. If you want it exactly SHIFT-L or use the button Corner – Allows the line segments halfway along a segment, then on the tool control bar to meet at an angle Of course there's more that you select the nodes at either end (shown left). There's an Smooth – Ensures that the can do with nodes than just move (remember, a click on the segment adjacent button (or SHIFT-U) for gradient remains constant from them around. Select a few then itself will do that), and press the converting a straight line to a one segment to the next enable the 'Show INSERT key or click on the button curve, but most of the time it's Symmetric – Like Smooth, but also Transformation Handles' on the tool control bar. The new more useful to just drag the line ensures that the two handles are button (shown left) on node will automatically be added segment to get the approximate the same length the tool control bar. You'll see the to your selection, so you can shape you want, then fine tune it Auto-smooth – Moving this node, familiar move/resize handles repeatedly press INSERT or click with the Bézier handles. or its neighbours, will keep the line around your nodes; clicking on one the button, shown left, to smooth. If you adjust the handles of the selected nodes will switch add several nodes to a line The little diamond-shaped on this node, however, it will revert to the rotate/skew handles segment. nodes that we've played with so far to a simple Smooth node. instead. These operate in the same are just one of four types of nodes way as the handles you get with Let's get a little more curvy. that can be used in paths. These Of course the best way to the Selection tool, but the Click and drag the middle of one of nodes allow the path segments on understand the differences transformations are applied to the your line segments to quickly turn either side to extend in any between these four types is to selected nodes rather than the it into a 'Bézier curve'. The nodes direction, allowing you to create simply draw a line with a handful whole object. at each end of your curve should corners in your paths. Sometimes, of nodes and play around with have circular handles attached to however, sharp corners are the last them. them via thin lines. Rough curves thing you want, so, for those can just be dragged out from occasions, there are three other Drawing a series of segments straight line segments, but you can node types: smooth, symmetric from scratch using the Line tool is fine tune them by moving these and auto-smooth. You can cycle just one way to create a path, but circular handles around. through the various node types by Inkscape has several others. One of CTRL-clicking on a node, or you can the most common approaches is to directly change to the type you convert another object into a path. want by selecting the node(s) and This lets you easily transform a Think back to the previous then using the buttons on the tool rectangle, ellipse or polygon into a article when you were editing control bar: path whose nodes can be moved gradients directly on the canvas. and modified freely. The downside Adding a new gradient stop was as to this freedom is that the object simple as double-clicking on the If you decide that you want to loses its original identity – you line where you wanted it to change your Bézier curve back into won't be able to use the Rectangle appear. Adding a new node to a a straight line, you first need to Here's a quick summary of the tool to change the corner radius path is similar: just double-click on select the end nodes, then press four node types: once its been converted into a
full circle magazine #66 21 �������� � HOWTO - INKSCAPE Pt6 path, or the Star tool to adjust the from corner to smooth and back, time. Inkscape's shapes into paths it's number of sides to your polygon. drag the line segments, and adjust time to make your snowman look a You also won't be able to convert the Bézier handles. Add some On the whole, Inkscape is a little less pristine. Convert his your path back to the original nodes with a double-click or by fairly stable program, but it will elliptical head and body, then add object type, even if you haven't selecting a segment and pressing occasionally crash. In my a few nodes and move them made any changes to the nodes: INSERT. Of course you can also experience, this happens most slightly to produce the lumps, conversion is a strictly one-way delete nodes by selecting them when you're editing paths, and bumps and asymmetry of a typical affair. and pressing DELETE (or clicking usually when you try to use the snowman. You can also add a bit the button, shown left, in Undo facility. Fortunately, it also more character to his carrot nose With those warnings in mind, the tool control bar), but does a pretty good job of saving by drawing cuts and marks and by let's draw some objects and there's a bit of a catch to your work to a backup file if it can. making it a little wonky in parts. convert them to paths. To start that: Inkscape will try to preserve If Inkscape presents you with a The horizon benefits from a little with, you just need to create a few the original shape of the path as dialog to tell you that it's crashed waviness to imply drifting snow. shapes, following the instructions best it can, even though there are then usually that will show the Although you could create more in the earlier instalments of this now fewer nodes. If you want it to path and name of the backup file. twiggy arms and crush his hat, I'm series. An ellipse, rectangle, just delete the node Generally, the file is in the same going to leave those alone for now rounded rectangle, and a star, for without trying to directory as your drawing – or in and deal with example. Then select each object preserve the shape your home directory if you haven't them next and use the Path > Object to Path then you need to saved your drawing yet – and will month when command at the top of the menu press CTRL-DELETE. have a name that's based on your I'll cover some (or CTRL-SHIFT-C if you prefer). The difference file's name but with a numeric date methods for Double-click on each path so that becomes clear when and time string appended to it. creating and you can see where Inkscape has you want to just Usually you can just open the manipulating created corner nodes, and where remove one corner backup file, save it with a different complex paths it's created smooth nodes. from a rectangle: name, and carry on working as quickly and though nothing had happened. As easily. If you go too far with your node with all computer files, however, it editing (or with anything else in pays to backup regularly – I usually Inkscape), you can always use the start each of my Inkscape sessions Edit > Undo menu (CTRL-Z) to roll by using File > Save As… to create back your changes. Inkscape a copy of my image with a slightly Mark has been using Linux since maintains a history of all the edits different name so that I can never 1994, and uses Inkscape to create you make in a session, so you can lose too much work to an Inkscape two webcomics, 'The Greys' and Undo repeatedly if you want to. crash. 'Monsters, Inked' which can both be found at: Try manipulating these paths: Take a look at Edit > Undo History http://www.peppertop.com/ move some nodes, change them if you really want to travel back in Now that you can convert
full circle magazine #66 22 �������� � HHOOWW--TTOO Written by Mark Crutch IInnkkssccaappee -- PPaarrtt 77
t the end of last month's from last month, it would be easy Fooling the eye for artistic those objects into a single path. In article, I promised that to create by just converting a effect can be very useful, but, in order for Inkscape to know which we would take a look at rectangle to a path, and curving this case, it was really just a items we want to combine, our A the too pristine hat the top and bottom segments, but workaround for our lack of first step is to select them both. that's adorning our now-lumpy this version pre-dates that insight Inkscape skills. It would be better if Switch to the selection tool, click snowman. The hat was added way by several months. Exploding the the body of the hat was just one on the rectangle, and then hold back in the second instalment of hat into its constituent parts object with one gradient. Our down SHIFT while clicking on the this series, when all we could draw makes things a little clearer: complete hat would then consist ellipse. The status bar should tell were ellipses and rectangles, and is of an ellipse for the top, an ellipse you that you have “2 objects of a good example of how a few for the brim, and a path for the types Rectangle, Ellipse” selected. carefully chosen objects can fool body. We could do that by If not, use Edit > Deselect (or just the eye into seeing shapes that converting the rectangle to a path click on the background, away aren't really there. Here's how it and changing the bottom edge to a from any other objects) in order to looks when removed from the Bézier curve: clear your selection, then try again. snowman's head and rotated a Once you're happy that you've got little: the right two objects selected, use the Path > Union menu entry (CTRL-+) to combine your objects into a single path:
The body is just a rectangle with an ellipse peeking out from beneath it. By giving them matching gradients we could create the illusion of a single object. The curve at the top There's obviously an ellipse at doesn't exist at all, it's just an But we've already got the shape the top, and another for the brim, optical effect created by putting we want in the outline formed by but what of the main body of the the rectangle behind the ellipse the rectangle and ellipse. What we hat? With your new knowledge that forms the top of the hat. really want to do is to combine
full circle magazine #67 28 �������� � HOWTO - INKSCAPE Pt7
If you zoom in closely you'll Similarly subtracting a rectangle of the object to be cut. This is easy Press CTRL-Z (or use Edit > notice that our new path isn't quite from an ellipse won't give you the to achieve by selecting the ellipse Undo) to restore your ellipse back as perfect as we would like. Some same result as subtracting an and using the last of the four to its pre-cut status. Now select misalignment of the ellipse to the ellipse from a rectangle, so buttons to bring it right to the top just the ellipse and use Edit > rectangle has resulted in extra Inkscape needs some way of of the stacking order. Now you Duplicate (CTRL-D). This will create nodes being created that we'll knowing which object is the one need to position the ellipse to cut a copy of the selected object(s) at need to manually edit using the we're removing, and which is the out the shape you want – in this exactly the same location on the Node tool. Creating paths from one we're removing it from. This is case overhanging the edge of the canvas, but at the top of the stack. other objects in this way can be a done using the stacking order. rectangle. With that done it's a It's worth getting used to the fast way to get the basic outline of simple case of selecting both keyboard shortcut for this as it's a a shape, but usually you'll need to The stacking order was briefly objects and using Path > particularly useful feature – it not do some manual editing mentioned back in the first part of Difference menu entry (or CTRL only gives you a disposable copy of afterwards. this series: objects within Inkscape and the minus key) to subtract the your cutting object to use, but also can sit 'on top of' each other, with ellipse from the rectangle: saves you having to manually move ones at the top of the stack it to the top of the stack. It even obscuring those below (assuming leaves the new object selected, so they're all fully opaque). When you just have to SHIFT-click on the you've got an object selected using object to be cut, then use Path > the Selection tool you can move it Difference. Now our former up and down the stack using these rectangle has a curved base and a four buttons on the tool control curved top, and we still have an bar: ellipse to form the lid.
To cut one object from another, the shape that is being removed As well as adding shapes Unfortunately there are a together to form a single path, we couple of problems with the result: can also subtract them, cutting one the first is that, once again, we shape out from another. Looking have some rogue nodes that will at the top of the hat, we could use must be on top of the other object need to be manually tidied up; the the ellipse to cut away a curved – in our case the ellipse needs to second is that our ellipse has now section. You don't need to be a be on top of the rectangle-with-a- completely disappeared! That's a mathematical genius to curved-base. It's probably already side effect of the Path > understand that 1-2 doesn't give on top in the stack, but it doesn't Difference operation: the object you the same result as 2-1. hurt to get into the habit of always you are cutting out is also removed moving your cutting object on top in the process.
full circle magazine #67 29 �������� � HOWTO - INKSCAPE Pt7 But still there's a problem. A straight-topped hat. It may seem close look at the join between the that we've gone round in circles, curved rectangle and the lid shows but, along the way, you've learned a thin line showing through from about Path > Difference, the visual the canvas or objects below. issues that anti-aliasing can Inkscape uses “anti-aliasing” when sometimes cause, and the fact that it draws your objects. This tries to sometimes it's better to draw approximate edges that don't fall something that looks right, even if precisely on pixel boundaries by its underlying structure isn't as drawing a thin, translucent line to pure or correct as you might like. give the visual impression of a Before finally reassembling the hat smooth curve. Usually it works it might be worth adding some well, but when two such creases and crumples using the boundaries meet it can lead to a path tools from last month: slight gap where you don't really want one.
There are a couple of solutions which of the objects is higher in fast way to produce rough initial to this anti-aliasing issue: we could the stack. The above table outlines that you can then tweak add a stroke to one or both of the demonstrates the effect of with the node tool into something objects to cover up the gap, but While you were in the Path applying each of these operations more refined. But don't dismiss that's not always appropriate and menu looking for Union and to an overlapping square and them solely as a blunt instrument doesn't help if the problem objects Difference, you probably noticed circle, and shows the difference in for coarse construction work: they already have strokes; alternatively the other entries grouped results depending on which of can also be used to sculpt and we could avoid relying on our alongside them: Intersection, these objects is on top of the other shape with the precision of a objects perfectly abutting one Division, Exclusion and Cut Path. (in the case of Division and Cut scalpel. another by making one of them Together all these form the Path the resultant objects have overlap the edge of the other. In “Boolean” path operations – been separated slightly to make it this case we don't really need the named after 19th Century easier to see the effect of these rectangle to have a curved top – mathematician George Boole who operations). we already had the visual effect formulated the rules for combining Mark has been using Linux since we were looking for with the binary data that underlie these With a bit of practice these 1994, and uses Inkscape to create two webcomics, 'The Greys' and ellipse sitting on top of the operations. They all require two Boolean operations will allow you rectangle. objects (though Union can work 'Monsters, Inked' which can both be to produce complex paths from a found at: with more than two), with the few simple shapes. They provide a http://www.peppertop.com/ Let's CTRL-Z back to our result usually differing based on
full circle magazine #67 30 �������� �