Well, hm. This is sort of embarrassing. Did any of you read that post I made back in November, about my upcoming website redesign? I was so excited. So eager. So naïve.

So… if you hadn’t noticed by now, it’s been awhile since then. Most elements of my design were actually implemented; others were forgotten as life went on (as it tends to). So I’ve decided that good enough is good enough — as usual. I seem to be growing more practical and less apologetic in my old age. At least as far as apologizing for personal web designs done in my free time as a  hobby, skill-building exercise, and meditation on imperfectness.

Anyways. This is the New Stuff:

• GLOT letters at the top are dynamic div areas (pure pixels!), style-able with CSS
• author portrait with color-changing vertical stripes behind it
• post titles used the 04_19 font; now they use Grixel Extended
• tags attached to a post now have the same color and have a mini-tag next to them on hover
• “about me” spiel is revealed on portrait hover
• recent comments appear in the sidebar (in pixelated form)
• Tumblr quotes, delicious links, Last.fm songs in the sidebar
• my WeHeartIt images used as filler in the sidebar
• number of comments shown in a comment bubble
• posts outside of the default category (Wordglot) are now specially featured on the front page
• Flickr photos show up below the main column on the front page
• ditto for Twitter tweets, too
• Creative Commons license and contact link shown prominently in the footer
• post pages now have a more interesting mono-color scheme
• possibility to set a featured image as background for a post
• the “not found” page is really cool — try it!

And this is the Broken Stuff:

• spacing is off in lots of places
• colors can combine in near-unreadable contrast
• the tags page… is bad
• vigorous testing was not vigorous
• I haven’t even checked it in Internet Explorer. Really. That’s how much fuck IE.
• comments have no pictures and are a gray box
• no, seriously — there’s not even a place to comment at all yet

Comment below and let me know what you think!

Everyone needs an icon these days. I’m sure that you probably have a digital camera, that you could probably take a picture of yourself and crop it into a square and upload it. Sure. But it probably won’t look good small, it may not be very recognizable, and it could even be boring. Pictures of things you like can be a better idea, but no one should need to hide behind pretty flowers because they’re afraid of how the light will cast their face (unless that’s the mystique, I suppose). I’ve always favored showing my face — there’s something open and honest to it, and it always seemed simpler anyways. So I figured out a way to show my face in an identifiable, personal, stylish, not-boring way. This is my method using Photoshop CS4, but the principles are the same in any image-editing program.

1. Here’s an original black and white image of the top of someone’s head. I happen to be quite attached to this one, so we’ll use this.The ideal image has an interesting outside shape with lots of fluffy bits. The background needs to be a solid color, one that contrasts with the subject’s hair (or whatever the fluffy bits are).
2. Usually, when working with Photoshop or similar image-manipulation tools, the easiest and best selections have sharp, distinct edges. If your subject is completely bald the regular-ol’ wand tool is the way to go. But I think such lines wouldn’t produce as interesting an icon and, well, most people do have some hair. The solution: the background can be quickly and smoothly removed using a tool like Vertus Fluid Mask. While it’s not free, older versions can readily be found at a large discount. Paint the areas you want to keep, and those you want to delete, and liberally splatter BLEND over everything else. Blend really is great for hair. Preview sections as you go using the T key. It’s easy once you learn the few keyboard shortcuts. Voilà!
3. When you’re done, you will have an image with alpha transparency. This is what allows any program (that understands it) to make your image look good against any background. You need to select the pixels according to how transparent/opaque they are. But, since there’s no alpha channel (or alpha layer), and since there’s no direct way to select based on transparency/opacity in Photoshop, we have to be clever. Make two duplicates of the new background-removed layer. Invert the colors of the one on top.
4. Change the top layer’s transparency to exactly 50%. The two layers will cancel each other out and make middle-grey. Merge your two duplicate layers into one. This layer has no color contrast at all, no details. It is, in fact, a nearly precise reversal of the elusive alpha transparency.
5. Using the levels tool (ctrl+L or cmd+L), make the color completely black. Slide the input level all the way to the right. Although 246 is shown, you can and should go all the way up to 253.
6. A black image makes a much better selection. So here is where you can finally select the alpha transparency. From the layers tab, switch to the channels tab. Ctrl+click (or cmd+click) on the RGB channel to select based on transparency.
7. Once you have this selection, you have the key. To make an outline (left), simply fill the selection with a solid color. I use color stripes over my icon, and I like seeing the unique shape against all backgrounds, so I cut out a simple image of solid stripes (center) from my selection and get a translucent image in the shape of my head. When you combine with the original photo (right), these give a smooth-edged, recognizable, quite personal icon that resolves well even at small sizes.

It’s easy and fun to play with the outline and experiment with all the different things you can do. You’ll discover there are all sorts of cool things one can put on a face. To conclude, here’s a collection of what you can create with this technique: