Several days ago I stumbled across a website with the Black Minimalism WordPress Theme. I somehow liked this glass and shadow style and some hours later I found myself redesigning my own website.

In the past I used Photoshop 7 for designing websites and most of the time I worked with vector objects and layer effects like drop shadows. However since my switch to Ubuntu Linux I'm trying to completely switch to free software and therefore searched for a replacement for Photoshop. I really liked this vector stuff so a logical step would be to look for a full vector program suitable for my web design needs. I don't know when I first stumbled across Inkscape but it's already several years ago and ever since I was using it occasionally for smaller stuff like icons and symbols.

With version 0.46 however several quite useful features where added to Inkscape. Namely the possibility to create filters, a great grid and some other useful stuff like on canvas gradient editing. So this time I tried to design a website with Inkscape.

Building the basic structure is straight forward. Create some rectangles here, a gradient there (on canvas gradient editing is really handy) and add some sample text there. No big deal. Especially with an easy grid set up (I used 10px devisions) and well working snapping. The funny part started when I wanted to add the drop shadow. Inkscape features a nice GUI to build your own SVG filters but unfortunately SVG filters are still quite techy stuff. You have to add "filter primitives" for each basic operation that together create the effect you wish. For a drop shadow visible on all four edges of an object like used on this website a filter would need three of these primitives.

1. Expand the shape of the object the filter is applied to (dilate it's alpha channel with the "morphology" primitive).
2. Blur this shape with the"gaussian blur" primitive. This will give a black blurry shadow.
3. Combine this shadow with the object by using the "composite" primitive in every way you like (10% of the 100% of the object with 100% of the object above it, whatever you like).

It's not really user friendly yet but as a programmer I like powerful stuff and therefor I started playing around with these "filter primitives". It's somehow funny to think about how an effect like a drop shadow is done but once you get used to this kind of thinking you can do pretty much anything. However it's not really productive compared to the layer effects of Photoshop. Performance of these filters is also a big problem. With just two of these drop shadow filters applied to a large part of the image it takes about two seconds to redraw the whole picture. Because of that I disabled these filters during normal work or used Inkshapes outline mode.

Neverless I'm still pretty impressed by the stuff that's possible with Inkscape now. The last thing missing for my web design needs was also included in the latest version: slices. In Inkscape the batch export check box more or less equals to Photoshops slices as this post on an Inkscape pointed out.

1. Create a layer with rectangles representing the areas of the image you want to save.
2. Select the areas you want to save and set the layer transparency to 0%.
3. Open the export dialog and hit the batch export check box.

Thats basically it. Again not as productive as Photoshop but good enough to work with. At least for me. 🙂

So here's the new "vectorized" design of my website. It's an SVG file and except the header image everything is SVG vector stuff. No longer proprietary PSD files.