Snook.ca

Screencast: Playing with Light in Design

I took a few minutes today to talk about something I've been doing with my design work as of late: playing with light to add depth and texture to a design. In this 7 minute and 19 second screencast, I look at layering elements using gradients and the use of white or black as a way to add light or shadow to a design within Adobe Fireworks.

I start with a base colour and then start adding elements on top of it, which consist of either white or black gradients with opacity levels adjusted to create highlights within a design. One of the other tricks I use is to make a gradient with the base colour. On one end of the gradient, I'll load the base colour into the colour picker and then use the HSB sliders to isolate just the brightness to go lighter or darker. You can also adjust the saturation which is another way to adjust depth; things farther away having less saturation.

On the technical side, you'll notice that I'm offering up an iPod version of the screencast. Having an iPhone myself, I couldn't help but give it a go. It's not too bad, although some of the subtlety that I try to demonstrate in the screencast is hard to see. I'll still export iPod versions of future screencasts—if only because it's easy to do with Handbrake.

@Sean Curtis: in this particular design, resizing fonts is fairly straightforward. For the nav, which is the only part of the design where it's a little iffy, it has a couple notches to go before it breaks the box. With almost all current browsers now defaulting to zoom, it's a non-issue for me. (Although I still think it's important to have a reasonable font-size)

Great screencast! :) I have been playing with light in design as well. It makes it look so clean, but has a simple elegance to it. Hope to see more of these screencasts in the future. Your work is very inspiring. Take care.