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
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.
- Expand the shape of the object the filter is applied to (dilate it's alpha channel with the "morphology" primitive).
- Blur this shape with the"gaussian blur" primitive. This will give a black blurry shadow.
- 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.
- Create a layer with rectangles representing the areas of the image you want to save.
- Select the areas you want to save and set the layer transparency to 0%.
- 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.