Friday, March 29, 2013

GIMP Clone Tool

A friend emailed me an image today that he hoped I could help with:



Specifically, he wanted to know if I could remove the sprinkler and the hose from the lower left portion of the grass.  I, of course, wanted to know why he couldn't have simply moved them before he pressed the shutter....

Anyway, it is just as well, I have been wanting to play more with GIMP (version 2.8.2 - Mac), so this worked well as a first test image.  I decided to just use the Clone Tool, but had some initial difficulties since the instructions are all for Windows versions of GIMP.  Additionally, since I have been playing with Inkscape the past week, I became pretty used to using the control key, and it took a while before I remembered that since GIMP is now a native Mac app (it no longer requires X11 to run), I should be using the command (⌘) key.

Once I got past that, it was simple:

Click the Clone Tool: 







I then experimented with different brushes, eventually settling on this one:


I was happy to discover that the bracket - [ ] - keys function much the same way as they do in Photoshop, which is that they enlarge and reduce the size of the brush.  Very convenient.  I made the brush about 2/3 the height of the sprinkler, after zooming to 200%

After discovering the command key thing I mentioned above, it was a simple matter to place the brush outline in a clean piece of grass, command-click to set that as the source for the cloning, and start clicking away.

I also tried out a few different modes in the Tool Options window, and decided that Normal was indeed the best.  I also set the Alignment to Aligned, so that the lighting would be pretty even throughout the fixed region.

Once I finished the first run through, I did few random selections to remove the most glaring areas of parallel cloning, and got this:


You can still see some remnants of where the clones happened, but only if you know where to look.  For a 3 minute exercise, I am pretty happy.

Saving the image was a bit different than I had anticipated; it was necessary to Export (instead of Save As):
I sent it to the same folder I opened from, with a new name, still as a JPEG, and checked the box for Use quality settings from original image:
The new image is 3 MB, versus 3.1 in the original.


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:













Inkscape Arrow

My first need is for a pair of arrows, preferably two that look related, but one turns 90° and the other turns 180°.   I need these for the interface for PDFRotator.

I started with Inkscape's built in tutorials, which are accessed via the Help menu that is present on each Document window, not the main app menu bar:


This screen shot brings up another unique observation; Inkscape runs under the X11 module, and although it is an app in its own right, whenever an Inkscape document is active, one see the X11 menu bar, not the Inkscape bar.  I don't think it matters, since there is nothing there anyway:


OK, back to the tutorials.  The first one is helpful to see the variety of keystroke controls available (making me very happy; I am a keystroke guy anyway), and some other basics.  The second one deals with shapes, a major component of the product, and the third (entitled Advanced) introduces paths.  So far, the most useful thing I have learned is how to use a shape to construct a path.  Let's start with an ellipse:

Clicking on the little pinkish circle on the left side allows us to create a shape:







You can see the little circle control on the right side; this will allow editing the arc of the ellipse, like so:






Once you have it where you want it, You just need to be sure that the stroke has some paint or thickness, so you can see it:




Now, it is simply a matter of transforming the object (the arc, derived from an ellipse) into a path:







 And there we have a nifty curved line!!!

 Which can now be edited via the nodes.  As far as I can tell, the nodes are wherever along the path one clicks, but I am not 100% sure about this.
The stroke thickness and color can then be altered as desired (Object menu):
The path is now a lot thicker, but still only has two nodes, I believe.  By accessing Path's submenu entitled Stroke to Path, we have many more nodes to work with:


We need one end of the curve to have a sharp point, so we zoom into that end, select the two corner nodes (by holding down the Shift key while clicking), and click the icon on the upper left entitled Insert nodes into Selected Segment:



This creates a conveniently placed node in the middle of the selected segment:
A simple click-drag on the center node creates a nice point:
Repeating the sequence on the other end of the curve, but dragging inward gives us a matching tail to the arrow:

Overall, not bad for an initial effort.