OneFreeVoice

This weekend I finally took the time to upgrade to WP 1.2, and give the site a much needed makeover. I’m calling this style “WANTED” because I think the color scheme and particularly the header make it look sort of like one of those Old West wanted posters. This design was definitely one of those cases where I had no idea what I was going to do and no particular direction. I just started off thinking maybe something with Orange and a hint of Red. I’m also toying around with the menu on the left instead of the right. Not sure if I like that yet, but probably because I’m just not used to it. So it wasn’t until I finished the design that I thought - “Hey… this looks kind of like one of those wanted posters”

Hmm… “wanted: posters” that’s an interesting play on words, isn’t it.

Some Hacks Where Necessary…
In order to get the proper affect for the section headers, there was some minor hacking needed. For the comment page, I needed to close the .post div, and create a new div for each the “comments” and “post a ccomment” sections. I also had to put some header tags around the section titles, as I am using <h2> to style the background image and text formatting. I pretty much did the same thing for all the menu headings on the left, except there I’m using <h4>. I had to put several of those in index.php and also links.php (for link category title).

Graphics for the Redesign…
All graphics were created using GIMP 2.0. I’m happy to say I’m getting much more comfortable creating and manipulating images in the GIMP. So much so that I don’t miss Photoshop at all. I still use PShop in the office from time-to-time, and although they can be pretty different, now that I know the differences well, I can work around them fairly easily.

The large text in the header was done simply by putting a layer mask on the text and then rendering some noise on the mask (Filters -> Render -> Clouds -> Solid Noise). The backdrop for the main header and also the “half-bursts” behind the section headers were done by first creating a tall bi-linear gradient in orange -> transparent, then on another layer adding a shorter bi-linear gradient in red -> transparent. The net affect would be if I had a red -> orange -> transparent gradient (I couldn’t do it that way because of the following step). Finally, I applied a layer mask to the red gradient, rendered more Solid Noise on the mask, and then gave it a bit of a motion blur. The result gives it that “not quite linear” affect. For the section headers, I made an oval selection with feather 40px, then inverted the selection and hit delete. I then selected the top half of the image and cropped it. There are only 4 images used on the site.