Tuesday, April 28, 2009 10:30 PM | rahel luethy | 0 comment(s)

klassische-akupunktur.ch

tomorrow, my sister carol will celebrate the opening of her acupuncture practice. over the last month, i had the pleasure to help her design and implement a corporate identity, including business cards, flyers, and a website. the site actually went live just a few moments ago, so while everything is still fresh and warm, i'd like to share some of the experiences i have made in the course of its making:

the most profound decision was probably to use scalable vector graphics as a result-independent model behind all work. this turned out to be a good decision. in practice, we initially designed everything in inkscape and later converted to pdf (for print), or to jpg/gif (for the web). inkscape itself is a simple and stable open source application which is comparable to illustrator, freehand, or coreldraw. the pdf-conversion is built-in and just works (print margins can only be defined via script though). the creation of bitmap images however is very disappointing. no matter how much i fiddled, the font rendering seemed to be broken and the results all looked very crappy (probably due to the missing font hinting, who knows?). luckily, i remembered the java-based batik toolkit, which includes a stand-alone svg rasterizing utility. it is a simple jar file that can be invoked from the command line and which produces great results.

with the pdfs, the printing was basically solved – the visuals turned out exactly as we designed them, so we were able to focus our resources on the website.

my web design "skills" were dating back to the time when tables and invisible spacer.gifs used to be the ultimate tools, so i first had to brush-up my css knowledge (or actually: steal snippets from here and there – and spend the rest of the day on http://www.quirksmode.org). now that it's done, i really like the clean separation between content and style. i used eclipse to (hand-)write all html and css code, but even in an editor i know cold, it was a pain to e.g. manually insert the same internet explorer 8 compatibility tag on every single page. thus, in retrospect, we probably should have used a content management system, even for a very small site.

the main part that's still not done is the complete search engine optimization work – while it's probably the most important part, i keep procrastinating. if anyone is an expert, please speak up (and i'm confident that we can arrange for some needle pain in return ;-)).

Tuesday, April 14, 2009 9:46 AM | rahel luethy | 1 comment(s)

google app engine

last week, google announced that their app engine now supports java – hurray! looks like this blog will finally be able to show random flickr pictures in its header again (not before i will find time to port my servlet, which is still trapped on the clinically dead myjavaserver.com, though).

Tuesday, April 07, 2009 9:05 AM | rahel luethy | 0 comment(s)

think outside the box

to sum up my recent css experiences:

(via reddit)

Wednesday, April 01, 2009 8:55 AM | rahel luethy | 0 comment(s)

how to change a solid image background color

assume you would like to change the background color of the following image to black:

a quick attempt to do so could include some magic wand or lasso tool wizardry (in gimp, photoshop, or any other image manipulation program).

bad solution:

because the blue circle is semi-transparent and its edge is anti-aliased, the result looks rather crappy (the white edge is also known as the halo-effect). no matter how much you fiddle with the selection tool parameters, what's wrong is the usage of the selection tool in the first place.

the proper approach is to convert the original background color to a transparent (alpha) color. in gimp 2.x the corresponding utility can be found in the "Colors" context menu and is called "Color to Alpha" (i am confident that you will find the equivalent in your program of choice):

it's a simple matter of adding a black layer to get to the desired result:

note: depending on the original image type, you will need to convert your image to RGB mode in order to support transparency (otherwise the "Color to Alpha" menu command will be disabled).