Wednesday, March 27, 2013

Inkscape Arrow, Version 2

The arrow produced in the previous post was acceptable, but not what I want to use as a basis for a button image in my application.  Specifically, I want something that fits into a space 300 by 300 pixels, and is a perfect 90° arc.  I also think I want a blue shade rather than red.

I have also been exploring other useful features, specifically, using a background grid for the working document.  I had hoped that I could set the default for the grid to be visible in Preferences:


 However, all that is allowed there is to alter the properties of the grid; you still have to turn it on & off manually at the document level:


Just pressing the # key (Shift-3) works fine as a toggle.

Creating the 300 x 300 pixel workspace takes a bit more effort.  As of this version of Inkscape (0.48.2), I cannot locate a custom option when creating a new Document:


Neither can I locate any way to customize the Default in Preferences.  The DVD cover options present a square document, and accessing File --> Document Properties gives one the opportunity to switch the units to pixels, in addition to re-sizing the document, and toggling the border shadow on & off (along with other things):


Now that I have a palette the size that I want, I can click on the circle/ellipse shape, and set up the arc just how I want it.  I want a nice, fat curve that turns precisely 90 degrees, so I set up the control panel thusly:


I initially assign a value of 200 to the stroke width, ensure that the Stroke cap is set to Square,


and then draw the arc inside the 300 x 300 region:


At first, I spent a LOT of time being frustrated and upset that this arc was NOT exhibiting a true 90° curve.  I searched the internet, and found a forum post from August 2011 explaining that in order to acheive a perfect corner, one must needs convert the stroke to a path:


And now it looks nice and square:


I now rotate it so that it points to the right, and prepare to form the point and the tail.  This time, I want to reduce the corners to form the point, instead of pulling the point forward, so in addition to adding a new path node in the middle of the end, I also add a new node to each side, by selecting the corner nodes, and the nodes closest to the curve.  Here is the original node layout:



And after adding the extra nodes:


Now, it is a simple matter of moving the corner nodes down the sides to the two new nodes on the side, creating a point:


I use the same method as in my first post to build the tail, and then I return to the point to sharpen it a bit by moving the nodes further down the sides for the final, much more satisfying arrow:













No comments:

Post a Comment