DorkMatter.net

After absconding for 5 or so months I thought I would post an update on the chillis… except I never posted an original to update in the first place. Never the less, here are some pictures of my newly ripened Cayenne Peppers. The Poblanos and Jalapenos didn’t make it due to what looks like some kind of viral infection. That’ll teach me to buy compost from the £ shop.

They were sewn in April (which explains why I didn’t post about them before) and took about 2 months to start flowering. We’ve already eaten 2 green and currently have 3 yellow and 1 green on the plant. Hopefully it will flower again and I’ll get a second crop. The other Cayenne plant keeps flowering but dropping the flowers. No amount of shaking or brushing can seem to make it produce pollen so I suppose it’s just a dud plant.

I started a new blog with Inkscape and Gimp Tutorials. I was really good initially but soon got to the can’t-be-bothered stage. I enjoy making graphics in Inkscape but trying to write it up as a tutorial takes so much time and kind of takes the fun out of it. I haven’t posted there for a few weeks which has given me some time to just play around in Inkscape and have been working on ideas for wedding invitations, table numbers, thank you cards etc. now that we have set a date and booked the venue. Still plenty of time to finalise it.

In other news I finally passed my driving test (first time!) and got a car so hopefully I will be able to get out with my camera and see if it’s all as grim as Scumdee around here. Photographs will follow if I find anything interesting.

In my absence I’ve been working on a design for something I’m going to have laser cut. Who wouldn’t love to have their very own laser cutting machine? I know I would but until then I’ll be sending my work off to a specialist company, so I’ll keep you posted on how that goes.

As part of the design I was working on I came up with this leaf design. I started out just sketching line drawings in Inkscape and quickly came up with something I liked. The only problem is that when laser cutting you need to provide outlines for the laser to follow – not solid blocks of colours or thick lines. I was able to get around this problem and come up with a new technique using the bucket fill tool. Here’s how…

I started with this leaf shape. It was a 5 sided polygon that I reshaped to look like a maple leaf. I’ve also drawn a jagged outline with the pencil tool. It’s coloured pink to show you how it’s constructed but the final image will be black and white.

The next stage was to draw on the veins. To to this use the pencil tool and click once at the starting point and once at the end point. This creates a straight line rather than trying to drag a straight line. Use the node editor to click on each line to bend it into the desired shape.

Draw in the smaller veins until you’ve filled in your leaf shape.

In this image I’ve coloured all the strokes white and I’ve changed the page colour so that the white outlines are visible.

If it wasn’t going for laser cutting I would stop at this point but since the laser needs a line to follow, if I supplied this as the outline I would end up with just a cutout leaf shape and none of the vein detail.

For that I’ll need to outline the lines!

The Bucket Fill Tool  is really handy for this. Set the fill to be “none” and the stroke to black. The stroke for this stage needs to be thinner than your white stroke areas so that you can have detail in the corners.

You can either apply the bucket fill to each of the void areas in turn or just click on your white outline area for an almost identical finish.

Finally set your page colour back to white to get the full effect.

I’ve been AWOL again. Here’s why; I’ve recently acquired a car. The problem is I can’t drive, so it’s taken quite a bit of my free time to learn and for the past couple of weeks I’ve been working on a big new project for my business. It’s taking a lot of coding and I’m a little bit rusty so it’s all taking a long time. But I haven’t forgotten about the blog.

I had planned this week to show you a new extension for Inkscape I heard about through Planet Inkscape but I’m still trying to figure out how to get it working on OS X. It seems that it’s not as simple as installing a new Python Library so it might be a while before you see anything on that.

I hope to be back with a new tutorial on Friday. In the mean time if you’d like to request a tutorial (I’m in an Inkscape mood this week) just let me know.

Following on from yesterday’s faceted diamond shape, I’m going to show you a few ways to tidy up the edges without the need for time consuming node editing.

Here’s our shape from yesterday. In order to make it look more diamond-like we’ll need to get rid of those sharp edges and form it into a more uniform shape.
If you look at the shape, you could fit the areas where two or more colours overlap into a 12 sided shape so make a polygon and fit it into the shape. I’ve outlined it here to show you but what you need is a white dodecahedron (I’ve been waiting to write that!) filled white at around 30% with no outline. It should fill most of the diamond shape.

The 12-sided polygon will be used to shape the diamond.

There are two ways of doing this; clips and masks.

Clip
Move your 12-sided shape on top of the diamond. For clipping it doesn’t matter what colour your top shape is as this won’t show when the clip is applied. Select the diamond shape and your 12-sided shape and go to Object>Clip>Set. Everything under your 12-sided shape will be showing and anything outside of it is hidden. You can undo it by going to Object>Clip>Release. The image below shows the diamond shape with the polygon positioned on top, then after clipping is applied.

Mask
Mask works in a similar way to clipping except that it retains some of the properties of the mask object. This time the white semi-opaque colour of the 12-sided shape will be applied as well as the clipping. This will give the coloured object the transparency of the mask above. Here’s how it looks now:

That’s possibly too transparent but you get the idea. Release the mask and adjust the transparency on the mask object and reapply the mask if you’re unhappy with it.

Note: If you want to apply a gradient as a mask use a black>white gradient.

If you copy and paste in place the mask object on top of a clipped object you can give the diamond a more glassy look:

Play around with it until you end up with something you like. All the files for this are available from yesterday’s tutorial including the various clipped and masked objects with explanations.

10 days and no posting. I spent most of last week in Ireland and I couldn’t bring myself to look at a computer. It’s nice to have a break sometimes.
Anyway, I’m back with my semi-regular 3 posts a week.

Today I’m going to show you a technique for making faceted shapes in Inkscape using simple geometry.

Start by making a six-sided polygon with equal width and height. Set the transparency to 33%. Copy and Paste another 3 polygons and colour them red, green, blue and white. Arrange the red green and blue hexagons so that they each have a side touching another colour and place the white hexagon on top spanning the red, green and blue shapes.

It should look similar to this (left).

Group (select them and press Ctrl + G or go to Object>Group) the 4 hexagons together and make 1 copy. Rotate one of the groups by 180° (Object>Transform…) and arrange them so that the white hexagons align. It’s starting to look kind of faceted but it lacks detail (right). Let’s make another set of hexagons to add dimension.

Repeat the steps above but this time use only the red, green and blue hexagons. Make 2 groups of 3 hexagons and rotate one of them by 180° as before. You’ll have something like this on the right.

Each group forms a larger hexagon. Rotate one of these by 30° so that the two shapes will intersect each other rather than line up one on top of the other. Combine the two hexagon groups so that the set with the white hexagon will be on top. The end result is a faceted diamond shape… well sort of.

Tomorrow I’ll show you a couple of ways you can tidy this shape up, make it look more like a diamond and trim off the rough edges.

Download the SVG but read the license first please.

I really like magazine layouts. I like those little boxes with additional information or quotes inside the main body of the text but if you want to do something similar in your web pages it can be extremely frustrating to get it looking good.
Here’s one method for creating a quote box.

Step 1. Create your quotation marks. Use something like GIMP to create 2 files for each quotation mark using a font and colour of your choice. Unfortunately if you want it to look alright in Internet Explorer you’ll either need to save this with a background colour to match your quote area or you’ll have to save it as a transparent GIF. IE does not handle transparent PNGs well and definitely won’t cope with SVGs without a plugin.
Here’s how mine look. I opted for GIFs.

Step 2. Write your code.
Make a new blockquote and within that a paragraph tag. Why put a paragraph inside a blockquote? You’ll see in a minute.

<blockquote class="quote">
<p>Your quoted text goes here. </p>
</blockquote>

Step 3. Position your quotation marks.
To avoid having your images floating around all over the place and positioning themselves based on the text, it’s usually better to position it as a background image. It’s an especially useful thing when your text is generated dynamically and you don’t know how long it will be.
Now the reason for having the <p> tag becomes clear. Each element can only have 1 background image, so if you position the opening quote as the background image to the blockquote you need another element to put the closing quote in; the closing quote becomes the background of the paragraph tag.

The CSS for this would be something like this:

blockquote.quote {
padding: 3px 3px 0px 3px;
width:90%;
background-color: #F0F0F0;
background-image: url(leftquote.gif);
background-position: top left;
background-repeat: no-repeat;
text-indent: 20px;
}

blockquote.quote p {
padding-bottom: 1.3em;
background-image: url(rightquote.gif);
background-repeat: no-repeat;
background-position: bottom right;
}

The important parts there are background-image, background-repeat and background-position. They’re pretty self explanatory – choose the background image, position it and tell it not to repeat to avoid having a tiled background.

Put that all together and you should have something like this:

Your quoted text goes here.
There’s no point in viewing the source for this bit since wordpress likes to add its own stuff and take away mine. I had to write some horrible code to make it work.

You’ll remember last week I started a pretty large photo restoration project trying to piece together an old photograph.

This week I’ll show you how I go about “healing” the tear line and removing some of the major blemishes from it.

When you’re working on something particularly heavy-going it can be difficult to see what’s going on after a while. I like to go away, have a break and go back to it with fresh perspective. That’s exactly what I did today and when I went back to start working on the project again I noticed I hadn’t lined it up quite as well as I thought.

Initially it looked as though the picture was lined up pretty well – the bars on the window, the man’s face and even the edge of the picture looked fine but when I zoomed in to start removing the tear line I noticed the white border on the left wasn’t aligned correctly (see left). Everything else looked right so what’s the problem? Rotation.

That’s something to keep in mind when you scan images – no matter how carefully you line it up on the edge of the scanner either by static or airflow the image nearly always gets moved slightly.

Rotating the top portion by just -0.23° fit everything back into place.

Before beginning to heal the tear, areas of special detail will probably need their own treatment. You’ll see where the tear passes through the man’s face that there is still some black feathering from when it was scanned. On other areas of flatter colour, like the curtains or walls, it’s simple to clone this out but where there are detailed features on the face we’ll need to remove as much contamination as possible. The layers will need to be flattened later so it’s important to get rid of anything along the borders at this stage.

Now that the harsh black edge has been removed, the extent of the tear can be seen. It still looks severe but it should be much easier to heal up later.

When you’re happy that all the detailed areas have been cleaned up it’s time to save with a new file name (so you can go back if you go wrong) and merge the layers. Select the top layer and go to Layers>Merge Down to flatten the image into one layer.

Now let’s begin healing up the tear.

For small differences I like using the Heal Tool . It’s somewhere between Smudge and Clone and samples the colour and texture of the surrounding pixels so you can paint a kind of average colour. Ctrl+click on a clean area near to your tear to set the target area, now use your cursor as usual to paint over the tear. Be careful to keep your target away from the edges or you’ll get unsightly white or dark smudges in your freshly papered-over crack.

Heal smooths it over but because the colours are based on the surrounding colours there’s still a visible darkened area. This is where Clone comes in handy.

Clone works in much the same way as Heal so use Ctrl+click to select a clean area and paint over the darkened line where the tear was. The key to avoiding circular patterns is to keep the brush moving rather than dab at areas. Clone will copy the area under the target cursor to where you’re painting. To avoid noticeable repetition you can build up layers by setting the brush opacity to 50%.

Left: Beginning to heal the tear along the border, Right: After healing and some cloning.

Areas of flat colour like that are easy to fix. As you work along the tear, repeat the same process to close up any gaps. On areas like the curtains take care to keep your brush strokes vertical to blend in with the transitions from light to dark.

You’ll probably find you will need to switch between Clone and Heal as you fix up the tear. For areas where there is a lot of colour missing you could try cloning at 100% opacity to fill the gaps, then heal to blend it and then add detail again with 50% opacity clone. There are no rules on how best to do it so experiment until you get something you’re happy with. The Undo Command (ctrl+z) will come in very useful.

You’ll also find that you’ll have to change between brush sizes depending on the detail required. For example, replacing the window uprights required a very small clone brush. For large areas of one colour increase the brush size to reduce repetition.

Here’s how the photo looked after fixing most of the tear. I’ve left the face and shoulder area alone to work at in detail (left).

To try and repair the face zoom right in – enough to work easily on the area but far enough to have good overview.

Much of the man’s chin was lost when the photograph was torn so it will have to be reconstructed. For this I first cloned the area, using a very small brush, trying to match the skin tones with the contours of his chin. This was pure guesswork since we’ll never really know how he looked.

Cloning produced a rather chunky pixelated look so this was softened using the Heal Tool. The image below shows before, after cloning, after healing on chin.

There’s so much of the face missing we’ll have to guess at that too. Using a combination of Cloning and Healing, sample areas near to the tear and replace the lost areas as done with the chin.This was by far the most challenging part of the photograph.

Here’s how the face looked after a lot of work.

The original photo had a stain right on the corner of the mouth. After some deliberation I decided to leave it there. Trying to repair that would have meant that 70% of the mouth was replaced and in my opinion that would have had too much impact on the face.

I also chose to leave the stamp mark from the original picture and the crease that ran through the woman’s body.

I felt that the stamp didn’t detract from the image and rather it added to the character of the image.

The crease through the woman’s body was left because to remove it would have altered the image a lot. You can see that there’s a large colour difference either side of the crease requiring a lot of blending between the two tonal areas which may have resulted in a “touched-up” look.

So here is the before and after:

I hope to print this onto some cotton rag to complete the restoration.

If you want to have a go at this, go here and read through part 1 of the tutorial and download accompanying file if you want to work on this image.

Do you have any comments or opinions on this? Did you try the restoration yourself? Got a better method? Let me know with a comment.

How often do you opt for a solid or gradient fill for your Inkscape drawings? Have you ever used the Pattern Fill?

Here’s an example of a star shape filled solid pink next to one filled “Ermine”.

This is as simple as setting any other fill.

You can change the opacity and blur filters on Pattern Fill but not the colour… at least not without cheating a bit!

This method is by no means predictable but can create interesting effects. Select your patterned object and go to Effects>Color and try out some of the colour effects. It seems that not all effects work with all patterns. Polka Dots, Stripes and Checkerboard seem to work best with Randomize and RGB Barrel colour effects.

You can also change the scale and orientation of your pattern. This can be buggy so save your work first.

Use the Node Select Tool to select your patterned fill. You’ll notice to the top left an ‘x’ shape with circular and square handles. To increase the size of the pattern just move the square handle away from the ‘x’ and to rotate move the circular handle around the x.

Since most of the patterns are semi-transparent you can layer them up (right).
You don’t have to use the presets to fill your objects – you can make patterns out of objects!

Create the objects you want to use as your pattern as well as an object you want to fill with pattern. Here I’m using a square for the background with a shape on top. Group your pattern objects (Ctrl +G) and then go to Object>Pattern>Objects to Pattern.

To fill your other object with your new pattern just click on it, select pattern fill and choose your new pattern. It will probably have a name like Pattern3806.

I’m unsure why the edges are visible. I tried using a thick outline for the square shape but it was unsuccessful. If you have any tips for that drop me a comment below.

Finally if you want to fill a shape with a bitmap it’s just as simple. Go to File>Import and select your bitmap image. Now as before, select the bitmap and go to Object>Pattern>Objects to Pattern. You now have a new pattern to fill with.

Any comments/questions/suggestions? Let me know!

A while ago my soon-to-be mother-in-law dropped by with an family photograph she had found in a box of old pictures. She was putting together her family tree and this was the only existing picture of some long-dead relations – but it was torn in half and pretty battered. To make matters worse, since I had taken this copy the original had been lost. Could anything be done to restore it? Here’s my attempt.

The image was scanned as below at 400dpi. I realise I could have pieced the picture together before scanning but I thought scanning them as two pieces would allow for greater flexibility.

You’ll notice that there is a certain amount of overlap; an area of paper is visible where the two pieces sheered away from each other when it was ripped. This will need to be remedied later.
To start piecing it back together I had to get rid of the black area created by the scanner. Thankfully the Scissors Select Tool was made for this kind of thing!

Look out for an in-depth tutorial on this tool in the next few days.

I cut out each half and pasted it into its own layer. I could then move the bottom half up the canvas and begin piecing it together.

The torn areas from the top layer continue to show through while underneath it the missing part of the picture is hidden. You can also see that although the Scissors Tool did an excellent job of detecting the edge of the photo, there’s still a feathering of black.

The next stage is to move the layers around until the picture is as well aligned as possible. Luckily with this picture the vertical and horizontal bars of the sash window made it painless to line up. Without something like that you could carefully align it by eye or use the edges as a guide. When moving the pieces around the arrow keys will let you to move each layer by a pixel or two at a time.

A few large areas of paper were showing where the tear occured. To get rid of this it simply needs to be removed from the top layer as the missing fragment should still be present in the layer below. For this I’m going to use my favourite – Scissor Select.

The light brown area along the margin is where some of the coating has lifted away from the paper. This will have to be rectified later by reproducing that part of the image.

Once the torn edge has been minimised the photograph looks more crumpled than torn and you can start to see the man’s face.

The final stage for now is to zoom in and work along the tear, removing any feathering that may have occurred.

Stick around over the next few days when I’ll be showing you how to reduce the blemishes in the photograph and begin to sympathetically enhance it. If you want to work along with me you can download the original file. As always, don’t forget to read the license.

I haven’t forgotten that last week I promised you a couple of photo restoration tutorials. Well, the one I had planned for today turned out to be pretty complex. In order to cover everything really thoroughly I’ll be using this one photograph for a few tutorials including some instruction on using GIMP.

I’m going to an art show tonight so if it’s ready before I’ll publish Part One and if not, expect it tomorrow. Here’s what you’ve got to look forward to:

• Restoring a Torn Photo in GIMP
• Improving Damage, Water Stains and Discolouration
• Detailed Study of the Scissor Tool
• …plus some bonus material that I haven’t finalised yet.

Since this will be quite advanced, I look forward to your input; particularly if you have alternative methods or an opinion on the final piece.