Here is a brief overview of all the layers involved in manipulating myself into an Avatar in Photoshop.

The original photo.

Removing my eyebrows. First I tried to use the Clone Stamp Tool, but I wasn’t happy with the results.

Then I just used a brush at 30% opacity, sampling my skin tone and gradually giving my brow shape while hiding the eyebrow. I also flattened out the bridge of my nose.

I darkened my lips. The layer is set to “Multiply”.

I enlarged my eyes. First, I cut out the eyes, then reduced the rest of my face (so that I wouldn’t lose quality in the eyes).

Then I made my eyes a light, brighter green. The layer is set to “Vivid Light”.

I gave the image more contrast with a “Levels” adjustment layer.

With a soft, thick brush I added highlights to my eyes to brighten them.

Now for the exciting part, blue! I changed my skin color by adding a solid block of blue, with the layer set to “Hard Light”.

With a similar technique, I darkened my hair to black with a tint of blue. This layer is also wet to “Hard Light”. Oh yeah, the nose shadow is added here too.

And now for the second most fun part, my animal stripes! I drew them with the Lasso Tool, filled them in with a darker blue, blurred the edges and set the layer to “Overlay”.

No Avatar is complete without some big eyelashes. Here I made them much bigger.

Time for some ears (the only thing I borrowed from a real Avatar).

Some fanciful, glowing white dots.

Finally the background, which I chose for mood and lack of light source to match my head. The only thing I did was blur it some. And this completes my Avatar.

I submitted a desktop wallpaper to Smashing Magazine and it got listed for March! Check them all out here.

I started using Birthday Alarm several years ago. Back then I wrote to them about making a card, and then I forgot about it. Recently I got in touch again, and yesterday they posted my first greeting card! If you use Birthday Alarm, or if you know someone’s anniversary is coming up – send my card. I don’t get paid unless the card gets sent Here it is.

I’ve taken the plunge and am now freelancing full time! Check out my new company web site, Smack Happy Design. I offer the following services:

• Web Design, Visual Design, User Interface
• Print Collateral: Business Cards, Postcards, Flyers
• Blog Setup, Blog Themes, WordPress
• Usability Testing
• Logo Design
• Illustration
• Copywriting
• Flash Animation
• SEO Expertise

So if you need any design work, or know anyone else that does, send them my way!

Browsing around on the web lately I’ve noticed what may possibly be an up and coming trend. I found several sites incorporating wood grain, and several others going after a real-world texture style.

Are we looking at the end of the soft, bulbous shapes and gradients of web2.0? Will the next generation of web sites go for the opposite approach, with textures that look so real you want to reach out and touch them?

Here are the sites I found with wood grain:

And here are the sites with other “real world” textures:

I don’t know how long this site has been down, but I’m not going to keep checking back to find out. I was surfing the web when I came across it and I don’t know what the site is about, and I certainly can’t tell by this temporary page. And that’s one reason you shouldn’t take this approach.

How would I solve this problem? A simple sentence or paragraph telling the user what your site about would be much more helpful. You shouldn’t assume that they know. As is I can see they sell something, but who knows what. Ginger roots? Ginger candies? Ginger cookies? I’m not compelled to check back because I don’t know what they sell.

One other thing I might suggest is a temporary email list. “Sign up and we’ll let you know when we’re taking orders again!” I love ginger, I would have signed up because I’m curious about their goods. And it would have been a simple item to include, there are plenty of sites that offer mailing list management (to list a few Campaign Monitor, MailBuild, Breeze ).

Now if this page is only up for a day or two, then maybe it’s ok. But I don’t see the harm in including my suggestions above.

Have you had a taste of the COLOURlovers site yet? It’s quite addictive if you love color. Here’s one of my top palette’s…

Holy crap, I just found this site all about color and color palettes. It’s so addicting – to find awesome palettes, to make your own and come up with crazy names for them. I can’t stop!!! If you’re an artist, or if you just love color (or colour), I highly recommend you check it out – but only if you have several hours to kill. COLOURlovers

Seriously, you should also take the survey.

Or, some of what I learned at An Event Apart Boston

(some of this I already knew, unfortunately)

General

• Words are important, content is the meat of most web sites
• Text should be concise and to the point, scannable, not bulky
• Should reflect the brand or flavor of your site, speak to YOUR audience
• Consice, meaningful tagline
• Instruction should be simple and clear
• Get the point across in fewer words

Inspiration

• Look at some of the many CSS galleries
• Keep morgue files (a collection of photos or objects that inspire you, you may also want a collection for a specific client or project)

Usability

• Make things clear, the user should get it right away
• Test with about 3 people and test often
• Your test users don’t have to be targeted, they can essentially be anyone
• Recruit friends or friends of friends, buy them lunch or give them a gift certificate
• Fix the biggest problems first, tackle the rest if you have time

Accessibility

• Label items with straight forward meaningful text (especially important for javascript items where titles aren’t likely to show up)
  • What’s this object called?
  • What does it do?
  • What are it’s settings?
• Think about how a screenreader might see the site, get a program if you can (Camtasia, Morae, CamStudio)
  • Particularly tabs and other links that change things on the page without reloading
  • It may help to put a title before a section and give it a margin-left: -999em; so that screen readers will pick it up but other users won’t
• Test your site for color blindness – Colorblind Web Page Filter

Testing

• When you have a layout complete, remove the images and see if the text stands on its own
• Grayscale the design and blur it to see where the focus lies
• Create a style sheet just for testing. To make sure your images and anchor tags are accessible:
  • Put borders on images, and not on images with alt tags
    img {
    border: 5px solid red;}
    img[alt] {
    border-style: none !important;}
  • Put borders on anchor tags, and not on anchor tags with titles (same as above)
• Run HTML and CSS validators
• Turn off images, css, js (one at a time) and make sure your site is still usable
• Increase and decrease the browser’s font size
• Look at your site using another language (with a web translator)
• Firefox has a great add-on for achieving some of these things – the Developer’s Toolbar

Web Standards

• By using standards and semantic markup we’re preparing our sites for future developers and future changes
• Standards are easy, you just need to start using them
• Use Microformats, it’s easy and forward-thinking

CSS

• Many IE6 bugs have been fixed with IE7, but there will always be some more
• Use Dean Edwards script to bring IE6 up to par with the rest of the web – insert conditionally based on browser
• Create a separate CSS file for your browser specific hacks – insert conditionally
  <!–[if ie6]>
  <link rel=”stylesheet” type= “text/css” href=”ie6fixes.css” media= “all” />
  <![endif]–>

Clientelle

• Choose good clients, don’t accept a crap job just because you need the money – it will be hell and you’ll hate yourself for it
• Build trust, your the professional, show them that you know what you’re talking about
• Put the plans and process in writing, constantly reiterate the plans, follow up meetings with an email summarizing the discussion
• Sell ideas, not pixels – your designs should have meaning and convey a certain message/brand
• Criticism can be harsh or nonexistent, ask questions to derive what the client really wants and repeat what they’re saying back to them in your own words