Inkscape

Right now work has me creating some maps to put on the web based of scanned drawings from the contractor behind a bunch of on-campus construction. In the past I would use Adobe Illustrator to do this by importing the maps and then tracing over it with vector lines. This process is relatively quick and easy. I can use grids to control the initial lines and keep them straight. I can then go in and manipulate points (or add more as needed) along the lines to fine tune things.

Well I don’t have Illustrator installed and the only version the office has is old and, from my experience, not very responsive. So I set out to find a free alternative. Enter Inkscape. Inkscape is a free, open source vector graphics program that you can use on Windows, Mac, and Linux platforms (and is probably portable to others should you be into that sort of thing).

I’ve been using it for just the day and I’m already in love. The controls are intuitive. There’s a ton of power in just the mouse commands. I hardly need to touch the keyboard for anything (hiding and unhiding the guides I’ve created). Working with layers may feel a bit odd; it’s nothing like Photoshop or Gimp in terms of the UI. But after a few hours I find myself right at home.

It’s native format is SVG, which open standards people will love. But if that’s not your thing you can save is most major vector graphic formats (eps, pdf, etc). You can also export the work as a bitmap and tweak it as needed in your favorite graphics editor.

This is a great application. I suggest you give it a try if you’re ever in the market for a vector graphics format.

Still Kicking

Just checking in to let everyone know I’m still around.

Working on a new layout that I’m going to use as a new WP layout for this blog. I’d originally intended it to be a separate, new layout, but now I think I’ll publish it was a WP layout instead. After it’s been up here for a bit and the bugs ironed out. Hope to install the first version of this template in the next week or two.

Here’s a little tip for web designers. Sometimes I’ll find myself wanting to produce “previous” and “next” links to appear at the bottom of a web page used to manage some kind of database-driven content. The links would obviously point to the previous and next records in the database.

To style this I sometimes prefer to have the links centered on the page with a bit of a gap between the two links. Why centered and not at the far left and right edges? I don’t know. Visual preference that fits better with the layout and style perhaps, but I tend to operate more on gut feeling with a layout.

Now in the past I’d simply make a paragraph tag with text-align:center set and then a bunch of   characters to add some space. Now if the text should ever wrap because the viewport is too small then the effect breaks horribly. Also, the text would center based on the center of all the text, and would NOT center on the gap between the two links. The illusion breaks very quickly if these previous/next links include a variable width bit of text like, say, the title of the previous/next record. The position of the gap starts moving from record to record. Ick.

« Previous             Next »

So here’s a new way to do this. Simply create two paragraphs. Float them to either side. Set a width of, say, 40% for each. Right-align the left-float and left-align the right float. Now you’ve got a gap (20% the page width in this case) between the two links, they’re centered to the page based on the gap, the gap’s location won’t change from page to page, and if the text wraps the visual structure is retained.

« Previous

Next »

Now there’s no great reveal here, is there? It’s a pretty basic and simple trick. But I find my mind will sometimes approach a problem from a direction that makes it difficult to see the obvious. So I like to see these simple tips from time to time, because once in a while it’ll be a trick I’d never considered before.