So rather than hack on Gio like I promised a friendly Novellite, I was doing more web stuff for work. Yeah, I’m a slacker, but only at my non-pay activities, ironically enough.
But rather than pass up this narccisstic opportunity for self aggrandizement (and, of course, to reference The Cardigans), I’ll post screenshots like I did last time:
| Before: | After: |
|---|---|
And yeah, I know the actual content of those pages is incoherent. It was like that when I showed up, and I was specifically told not to touch it since it’s someone else’s job to fix it (an order I couldn’t help but disobey slightly).
James Cape 
Two small things:
1. You don’t highlight the current tab / section in the top navigation bar, and the pages aren’t really distinctive, so that makes it easy to lose track.
2. http://ignore-your.tv/images/crs-demo-new.png — this one has 2 irritating errors in the first paragraph, one is “… and is not private”, and another is “origional”. I know you’re not supposed to touch the text, but c’mon, it hurts.
Regarding #1, that’s not really fix-able at the moment due to a mixture of bugs in Joomla and the way I organized the backend.
Regarding #2, It was all I could do to move large chunks of text around and add headings—I was hired as a PHP programmer, not a web designer or copy-editor, so all this web design they’ve had me do is all of the “don’t spend a lot of time on it, just rush it out the door” variety. I had about 2 weeks to figure out the design, move all the old content into Joomla, “train” the guy who’s going to be editing it, and make it work on FireFox and IE 4-6.
Hi,
I’d love to read some hints (and OSS software choices if applicable) for doing similar things.
I find it really difficult to do things like the gradients at the top – I guess I’m just lacking experience and some good tutorial…
Or I’m just using the wrong tools. I’m trying to avoid gimp where possible and use e.g. inkscape, so I can change stuff easier later on.
Btw, on your blog, the background graphic is too small for my 1600×1200 screen, making it look broken.
Sorry about the background, it’s really optimized for 1280×1024 and smaller browser windows.
Gimp is definitely the way to go for web design — if for no other reason that you can just crop and save-as-copy to get the graphic elements done. With Inkscape you’ve got to mess with that import/export nonsense which I’ve never gotten to work perfectly enough to suit me.
Typically I design an entire page (text-and-all) in Gimp, then shuffle around the elements until it’s perfect, then cut/copy the obvious elements and replicate the positioning in CSS.
So far as the gradient, that was done with five layers: the first is the “bar color” layer, which has the base color. Followed by the light and dark pinstripes both set to the “Overlay” mode. That’s overlayed by a gradient layer set to “Grain Merge” — so it merges in with the background. Definitely play around with the alternate displays, you can get some neat effects with them.
Finally there’s a 30px (0x0 offset) drop-shadow of the area outside the bar which is used to provide the shaded edge around the bottom. You can get the area outside the bar by right-clicking on a layer, going to “Alpha to selection” (i.e. “select the non-transparent areas”), then inverting the selection and applying the drop shadow script.
Alternatively, you can download the original .xcf.bz2 (180k) that I used to design the site to look at that to see how it’s done — though it’s still copywronged by my employer, so please don’t obviously rip it off ;-).