Image editing

I had an idea of how I wanted the title images to look on this site, but it has been hard to find something to make that a reality.

First I tried Inkscape, which is pretty decent although the UI could use a lot of polish. Unfortunately the capabilities of Inkscape are mapped from SVG - which doesn't have multiple pages - so I couldn't put everything together in one file.

Then I realised I might need to move more towards a design tool rather than art tool, so I tried Microsoft Publisher (I own it so why not?). While you can have multiple pages (duh), you can't have them different sizes. And to add to that the page guides sit under everything, which is useless when you have an image as the background.

Then I tried Scribus but quickly uninstalled it.

So, I decided to use something that I know: WPF! I whipped up some UserControls for each image, and created styles to set up the font and colours the way I wanted it.

I then wrote a little code to save each rendered control to an image:

void RenderControl(FrameworkElement element, string fileName)
{
    RenderTargetBitmap bmp = new RenderTargetBitmap((int)element.Width, (int)element.Height, 96, 96, PixelFormats.Pbgra32);
    bmp.Render(element);
    PngBitmapEncoder encoder = new PngBitmapEncoder();
    encoder.Frames.Add(BitmapFrame.Create(bmp));
    using (var fileStream = new FileStream(fileName, FileMode.Create))
    {
        encoder.Save(fileStream);
    }
}

And then call it with each control and a filename. This worked correctly for the first image only, which was a bit puzzling, but after a search I discovered that the control is rendered in its local space; if it has a margin then the control will be offset and wont match up with the rendered bitmap! Putting each control in an empty border resets their positions and now they all render correctly. Works great!