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.
Conversation
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.
Love the iPod version - clear enough to see what your doing.
How do you handle font size increasing with a design like this?
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..
Thanks for the screen cast. I have done this sort of thing in Fireworks several times. Nice to see a major designer using Fireworks.
Nice screencast!
Way more easy to follow than a written article. And probably easier to make too.
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)
The line-height of the title of this post is scrunched on the home page.
Yo, I think its really great that you are taking your time to do these screen casts. Keep up the good work bro!
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. :)
Good to see another interesting tut using Fireworks, really enjoyed it!
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.
Good post, admin.