Tired of looking at what was supposed to be sort of a marble-like ephemeral image along the top of the blog, I spent a few minutes tweaking the design today. The original header graphic came from a black and white photo of the bouquet M made for when we got married. I zoomed in on a couple of the roses and applied a bunch of distortions and some color to make an abstract background for the image. Then I put two squares on the image and screwed with them to make them fuzzy. They looked sort of like an ell and sort of vaguely represented Lennie and me (her name is very close to being a complete subset of mine — she’s sort of a mini-me is the idea). I’m not trying to sound all deep or artistic about it. These are just the things I was doing as I fumbled my way through creating an abstract image, a task at which I’m the first to admit I profoundly suck. So then I changed the style sheets so that the colors more or less went with those in the header and so that the content was sufficiently blocked off, the nav separate from the blog entries and each of the blog entries clearly separated from the others (this last separation isn’t very good in the default template that ships with WordPress). The more I looked at it, though, the boxier and clunkier it seemed and the worse the header image seemed.

Basis for current site headerSo today I worked on a new abstract image. As noted before, I really suck at this. I see designs that I like and I try to emulate them (not to copy, but to try to learn technique), but I’m just no good at it. I’m the graphic design equivalent of tone deaf. More specifically, I’m like one of those people who can hear a tune correctly but can’t carry one. Actually, that simile characterizes me pretty well in both design and music. So but I tried anyway. I started googling around for random images to base my abstract concept on. I didn’t really have anything in mind. What I finally found that struck me as pretty cool was the image pictured here (available for free download here). Something about the irregularity of the line the masts make — the fact that it was vaguely line-like but that it was irregular — struck my fancy. I’m not trying to be all high-fallutin’ and symbolic. I just liked the composition of the image.

So I downloaded it and immediately distorted its dimensions using the gimp to about 1645×160 (or thereabouts), screwing the aspect ratio all to pieces. Then I applied a few filters, including, if I remember correctly, a cubism filter, a wind filter, and maybe a slur. Next, I changed the brightness and contrast to darken the image and to accentuate the line made by the masts. Finally, I typed “two ells” in white and applied a canvas and a clothify filter to it to rough the text up a bit. It inadvertently looks almost as if the background is showing through the text, as if it’s chalked onto a window or something. Then I tweaked the style sheets. I was tired of the blue box containing the side bar, and the boxes around individual posts seemed a little clunky. I think I had originally put a box around the sidebar because a left border didn’t extend all the way down the page and it looked stupid. Only today did it occur to me to put a right border on the context box. Duh. I spent a few minutes tweaking colors, changing various borders around, and generally crisping things up a bit.

And I think the result is, well, crisper. I’m much happier with the design now, though it’s still not exactly A-plus work. Check out the before and after screen shots below to see the contrast. I document all of this primarily because I’m sure I’ll be curious one day what the site used to look like, and my memory’s just awful. I don’t really expect anybody else to care or anything.

Before and After

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s