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.

View with Quicktime View on iPod or iPhone

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.

Published January 31, 2009 · Updated January 31, 2009
Categorized as Design
Short URL:


12 Comments · RSS feed
Niki Brown | The Design O'Blog said on January 31, 2009

Thanks for the screencast! I just watched it on my iPod touch...the detail looked fine. It's also interesting to watch someone work in fireworks.

Sean Curtis said on January 31, 2009

Love the iPod version - clear enough to see what your doing.

How do you handle font size increasing with a design like this?

chris said on January 31, 2009

thanks for another screencast, very interesting to see how other web designers work.

I hope you will continue screencasts with this design, maybe show how'd you slice it, code it etc..

Patricia Davidson said on January 31, 2009

Thanks for the screen cast. I have done this sort of thing in Fireworks several times. Nice to see a major designer using Fireworks.

Ilias said on January 31, 2009

Nice screencast!
Way more easy to follow than a written article. And probably easier to make too.

Jonathan Snook said on January 31, 2009

Happy to hear the iPod version works well.

@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)

Sean McArthur said on February 02, 2009

The line-height of the title of this post is scrunched on the home page.

Rogie King said on February 04, 2009

Yo, I think its really great that you are taking your time to do these screen casts. Keep up the good work bro!

Chris Wallace said on February 04, 2009

Very nice screencast Snookums. I think the best designs are a result of great use of light and shadow. You've really hit on something I think a lot of new designers really struggle with. Well done.

Also, white is not a color. :)

Erwin Heiser said on February 20, 2009

Good to see another interesting tut using Fireworks, really enjoyed it!

Patrick James said on March 16, 2009

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.

deviantART said on March 20, 2009

Good post, admin.

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.