5 Simple Tricks To Bring Light and Shadow Into Your Designs

Advertisement

There’s just no escaping light and shadow — it’s everywhere you look. Everything you see reflects light and casts some sort of shadow. Visually, light and shadow help us make sense of what we see and help us understand texture, dimension and perspective.

So, as we try to make our designs on the Web more natural, moving and intuitive, a good understanding of light and shadow is pretty important. Here are 5 ways to better use light and shadow to polish your page designs and make them stand out on the screen.

A Quick Anatomy Of Light And Shadow

In the simple diagram below, we can see that the light source is coming from the left. The highlight is where the light is strongest, and the shadows fall on the side furthest from the light source. The appearance of light and shadow tells us a lot about the surfaces and textures in the image.

But what does this have to do with Web design, you ask?

If you’re trying to design rich, tactile interfaces and websites, light and shadow are your friends. In the same way that many classic artists made their paintings jump off the canvas, you can use light to give your designs depth and visual interest. Let’s get into it.

1. Using A Light Source

Perhaps the most important part of working with lighting is knowing where the light(s) is coming from. The light source will most likely determine where the highlights and shadows fall (although with Web design you can afford to bend these rules in places). If you’re working in Photoshop, you can use the “global light” effect so that all of your lighting effects follow the same light direction.

Controlling the source(s) of light in your designs (even if just with a linear or radial gradient) can help create atmosphere in your page designs. It can also help direct the eyes to a focal point in the design.

Examples on the Web

Campaign Monitor1 use a burst of light rays that conveys the feeling of a sunrise behind the design.

2

Icebrrg3 use light to submerge its website deep underwater.

4

Mike Precious5 uses more than one light source to add visual interest and to tie in with the desk-lamp lighting style.

6

Deaxon7 use a subtle light source behind its logo to give the logo visual prominence on the page.

8

2. Gradients

In the real world, very few things have a flat tone. Light and shade are on everything. Subtly using gradients is a great way to provide depth and makes things come to life on the screen.

The key with gradients is not to overdo them. If you’re using Photoshop, make use of layer styles for your gradients. This gives you the freedom to edit them at any point; it also means that if you resize the element, the gradient will rescale too.

Examples on the Web

nclud’s website9 is a lesson in subtle yet effective use of gradients to separate and organize content.

10

CSS Ninjas11 appears to use flat colors at first glance, but each colored area has a subtle gradient, which gives it texture.

12

3. Highlights

Highlights can help balance shadows and should be used on the edges of objects closest to the light source. Highlights are often overlooked because when used effectively, you don’t even notice they’re there. And while not suited to every situation, a tiny highlight can make all the difference in polishing an interface. The “sharper” the highlight, the shinier the surface will appear.

To really appreciate highlights, we need to zoom in a bit close. A good trick for adding highlights is to work at 200% or more, because at 100% it can be hard to see what you’re doing clearly.

Examples on the Web

Icon Dock13 and Newism14 both use a semi-transparent white line on the page element’s top edge to give it a highlight. It’s barely noticeable but adds a bucket of polish to the design.

15

16

You’ve probably seen Apple’s website17 already. However, you may not have noticed the lovely highlights at the bottom of the navigation items, which help make the words look recessed.

18

4. Basic Shadows

Like gradients, drop-shadows have become a staple of most Web designers. Shadows can really add visual depth and texture when used the right way. The key is not to overdo it.

The qualities of a shadow depend on the light direction and intensity, as well as the distance between the object and the surface where the shadow is cast. The stronger the light, the darker and sharper the shadow. The softer the light, the softer the shadow.

Examples on the Web

When it comes to online examples of drop-shadows, there are simply too many websites to choose from. When used cleverly, they can add a touch of dimension to even the most minimal design.

LinkedIn19 adds a very subtle shadow to the bottom of its sidebar elements to create the illusion of depth.

20

Google21 — with perhaps the hardest-working page on the Internet — still invests in the subtle use of shadow for its search page.

22

5. Advanced Shadows

You can do a lot beyond basic drop-shadows to give elements a third dimension. Longer shadows are a great way to change the spatial relationship between objects on a page.

In the examples below, the same Coke can is given completely different positions in space depending on its shading and shadow.

Examples on the Web

Emotions by Mike23 cleverly uses shadow (and light) to turn the flat page into a floor.

24

Superkix25 uses shadow to float sneakers “above” the website. The shadow moves when you resize the page, as if the light were shifting.

26

Sofa27 creates a floor on the white background with great use of both light and shadow.

28

Further Resources

Area for further articles and related resources.

(al)

Footnotes

  1. 1 http://www.campaignmonitor.com/
  2. 2 http://www.campaignmonitor.com/
  3. 3 http://icebrrg.com/
  4. 4 http://icebrrg.com/
  5. 5 http://mikeprecious.com/
  6. 6 http://mikeprecious.com/
  7. 7 http://deaxon.com/
  8. 8 http://deaxon.com/
  9. 9 http://nclud.com/
  10. 10 http://nclud.com/
  11. 11 http://www.cssninjas.com/
  12. 12 http://www.cssninjas.com/
  13. 13 http://icondock.com/
  14. 14 http://www.newism.com.au/
  15. 15 http://icondock.com/
  16. 16 http://www.newism.com.au/
  17. 17 http://www.apple.com/
  18. 18 http://www.apple.com/
  19. 19 http://www.linkedin.com/
  20. 20 http://www.linkedin.com/
  21. 21 http://www.google.com/
  22. 22 http://www.google.com/
  23. 23 http://emotionslive.co.uk/
  24. 24 http://emotionslive.co.uk/
  25. 25 http://superkix.com/
  26. 26 http://superkix.com/
  27. 27 http://www.madebysofa.com/
  28. 28 http://www.madebysofa.com/
  29. 29 http://www.photoshopcafe.com/tutorials/cast_shadow/cast_shadow.htm
  30. 30 http://www.photoshopsupport.com/tutorials/create-a-shadow/photoshop-shadows.html
  31. 31 http://www.psdtop.com/blog/basic/working-with-layer-styles-understanding-drop-shadows/
  32. 32 http://www.peachpit.com/articles/article.aspx?p=30311&seqNum=1
  33. 33 http://www.avivadirectory.com/photoshop/casting-realistic-shadows/
  34. 34 http://psd.tutsplus.com/tutorials/text-effects-tutorials/using-light-and-shade-to-bring-text-to-life/
  35. 35 http://buildinternet.com/2009/03/light-and-shadows-feathering-gradients-in-photoshop/
  36. 36 http://psd.tutsplus.com/tutorials/tutorials-effects/using-gradients-to-make-light-and-shadow-and-a-coffee-cup/

↑ Back to top Tweet itShare on Facebook

Rob Morris is an Australian designer based in Japan. He freelances for clients all over the world under the moniker Digitalmash. You can follow his adventures on Twitter. http://twitter.com/digitalmash

Advertisement
  1. 1

    Very useful, also in PowerPoint

    0
  2. 52

    Very nice article and great examples easy to understand^^
    I think that it will help me in the design of my next projects! Thank you!

    0
  3. 103

    brilliant Very nice and helpful

    0
  4. 154

    One Word. Brilliant.

    1
  5. 205

    Some nice examples, thank you!

    0
  6. 256

    Some really nice examples!

    0
  7. 307

    Quality post, this is exactly the sort of thing I need to work on

    0
  8. 358

    Awesome! :)

    0
  9. 409

    I always use light and shadow in my work, it brings it to life, makes it feel real. Some really nice examples as well.

    0
  10. 460

    Check out these 5 web design polishing techniques too:
    http://line25.com/articles/5-must-know-web-design-polishing-techniques

    0
  11. 511

    Great examples! Thanks for sharing…

    0
  12. 562

    Creating lovely lighting effects in Photoshop is one thing, but then translating these to accessible, valid and unbloated XHTML and CSS is the tricky part. Maybe a follow up post might be useful that outlines the best techniques for doing just that. I’m thinking of sliding doors, elastic content boxes, rounded corners + gradients, efficient use of divs with background images, etc.

    2
  13. 613

    nice article …

    0
  14. 664

    Søren Larsen Pedersen

    April 21, 2009 5:17 am

    Wow, its great!

    0
  15. 715

    love it! power to the drop shadow…!

    0
  16. 766

    heather van de mark

    April 21, 2009 5:43 am

    thanks for posting a unique and incredibly helpful guide!!!

    0
  17. 817

    These are good examples, but as a novice Photoshop designer it would be nice if you could show us HOW to create these effects! From the title of this post that was what I was expecting :(

    0
  18. 868

    Zuquirio Ámaur

    April 21, 2009 6:35 am

    Great article, love it! I will put these tips in practie in my new web site design. Thanks.

    0
  19. 919

    simple and very useful, thanks

    0
  20. 970

    Hey, the screen capture image you are using for the Superkix example above is the same image you are using for the Sofa example below it…

    0
  21. 1021

    This one is interesting : ) Thank you for sharing!

    0
  22. 1072

    Rim light. Where’s your rim light.

    0
  23. 1123

    pretty enLIGHTening article! sorry i just had to…

    0
  24. 1174

    Great stuff Rob, fantastic examples. Lovely read.

    0
  25. 1225

    Great tricks
    we should as adobe change the default drop shadow values. Worst setting never used it.

    0
  26. 1276

    Bonito y poderoso

    0
  27. 1327

    :)) goooooooooood !

    0
  28. 1378
  29. 1429

    This is a great article! In the section of highlights, there is a great example of how Apple uses highlights to create recessed text. I’ve always had trouble with this. Does anyone know of a good tutorial on creating this effect? I don’t know if everything is done by hand or if there are Photoshop methods for creating this. Any help?

    0
  30. 1480

    There were some pretty cool examples. Thanks.

    0
  31. 1531

    I found this article a great place to discover some cool sites like icebrrg and css ninja’s. Bonus! Thanks!

    0
  32. 1582

    nice post! In addition to “4. Basic Shadow” (1st example), I often also add a subtle light (mostly white) stroke of 1px

    0
  33. 1633

    Que legal! Valiosas dicas, muito poderosas!

    0
  34. 1684

    This absolutely useful for anyone who gives attention to detail. Thanx a lot.

    0
  35. 1735

    Articles like these establish my excellent impression about Smashing Magazine!

    Brilliantly written. Thanks a lot.

    0
  36. 1786

    Awesome list…great info…thanks

    0
  37. 1837

    Great!! thanks

    0
  38. 1888

    Awesome !!! Great Work !!!
    Still Smashing It !

    0
  39. 1939

    nice ..one

    0
  40. 1990

    nice ..two

    0
  41. 2041
  42. 2092

    Kedhar Vishwanath R.R

    April 22, 2009 8:08 am

    Simply superb, you guys rock. Your articles are crisp and clean. Thanks a lot, great work guys. Keep it up :-)

    0
  43. 2143

    USEFUL TIPS!

    0
  44. 2194

    Prashant Poladia

    April 22, 2009 10:39 am

    Very useful article on shadows. It is really an important factor to keep in mind. Thanks SM.

    0
  45. 2245

    Nice, but this web 2.0 crap is gag worthy sometimes.

    0
  46. 2296

    Brilliant. It’s the little touches that separate great designs from good and the points you mention should be talked about more often — small things that make a big difference. Great article Rob.

    0
  47. 2347

    Great tips! Really interesting uses of lighting/shadow.

    0
  48. 2398

    Great article. It really put some things into perspective for me. :)
    I’m currently training my 3D undertanding in Graphic Design for print at the moment. This article also helps with that – cross media :)

    0
  49. 2449

    Great info and examples – thanks for posting!

    0
  50. 2500

    Rob Morris (@digitalmash)

    April 29, 2009 7:23 am

    For those interested, I’ve elaborated on how I did some of the shading techniques in the article on my blog. http://digitalmash.com/journal/articles/upright-shadows/

    0

↑ Back to top