• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
ThreeCell Digital Advertising Agency

ThreeCell Digital Advertising Agency

ThreeCell Digital Advertising Agency

  • CLIENT LOGIN
  • THREECELL BLOG
  • NEWS
  • CompanyWho We Are
    • About
    • Our Process
    • ThreeCell Awards and Testimonials
    • Vision & Mission Statement
  • ServicesWhat We Do
    • Web Design
    • Print Design
    • Social Media
    • SEO Services
  • PortfolioWhat We’ve Done
    • Web Portfolio
    • Print Portfolio
    • Social Media Portfolio
  • ContactHow To Reach Us
You are here: Home / Design Tips / Effectively Using the Drop Shadow in Web Design

Effectively Using the Drop Shadow in Web Design

July 11, 2012 by Threecell Leave a Comment

ThreeCell Tips on Using a Drop Shadow EffectivelyThe drop shadow is a bread and butter effect so frequently used in our studios that it warranted its own keyboard-shortcut [Control-Shift D]. Adding a drop shadow is one of the best and quickest ways to simulate depth in your layout.

As was mentioned in the previous post, the key to using effects well is adjusting the settings for the right circumstance. The image above is an example of drop shadows applied at various settings. The shadow on the first example is barely perceptible and could easily be overlooked. Remember that this isn’t necessarily a bad thing. The principle of subtlety is still at work and it ultimately contributes to the overall impact of the design. At the other end of the spectrum, we have the last example which illustrates a drop shadow gone wild. Avoid this 🙂 When a drop shadow makes it harder to see the item it’s applied to, then that’s a good sign it’s gone overboard.

Many times as a starting point, I’ll set the drop shadow opacity down to about 40-50%, knock the distance down to 2-3, and then increase the size to about 4. I’ve actually made this my default setting which is easily done from the style settings page by clicking “make default”. You can do the same for any style you select, not just drop shadows. Of course, your settings will naturally depend on the context of the design element you’re drop shadowing. Below is an example of an mock web layout for one of our previous clients that illustrates how subtle drop shadows can improve design. If you hover over the screenshot, you’ll be able to toggle the different versions.

As you can see, there’s a noticeable difference between the two layouts. The various design elements such as the content area and header sections benefit greatly from the use of drop shadows, none of which were applied with default settings. Of course, you don’t want to go overboard with drop shadows. The key to good design is knowing when and how to use them. You don’t want to go “drop shadow happy” and blanket a page with these effects with no rhyme or reason. Everything has to be done with a purpose and strategically. And while the differences between the two layouts may not be monumental to the average person, they can easily be the deciding factor in whether you land a job or are overlooked for one.

Filed Under: Design Tips

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Latest News

  • ThreeCell launches Online Presence for Japanese, Sushi, and Thai Cuisine Restaurant
  • ThreeCell Launches Coffee Directory and Magazine – Best Quality Coffee
  • ThreeCell launches new medical association website – American College of Radiation Oncology
  • Montana’s MarketPlace launches new statewide online marketplace
  • How to Make Quick and Realistic Photoshop Drop Shadows

Site Search

Archives

  • April 2020
  • September 2016
  • June 2016
  • December 2015
  • August 2015
  • July 2015
  • June 2015
  • November 2014
  • September 2014
  • August 2014
  • May 2014
  • April 2014
  • March 2014
  • January 2014
  • December 2013
  • February 2013
  • January 2013
  • November 2012
  • September 2012
  • August 2012
  • July 2012
  • June 2012
  • February 2012

Footer

Latest News

Suki Cafe - Best Japanese, Sushi, and Thai Restaurant in Helena

ThreeCell launches Online Presence for Japanese, Sushi, and Thai Cuisine Restaurant

Best Quality Coffee

ThreeCell Launches Coffee Directory and Magazine – Best Quality Coffee

American College of Radiation Oncology - Medical Association Website

ThreeCell launches new medical association website – American College of Radiation Oncology

5268G Nicholson Lane
Suite 172
Kensington, MD 20895

E: info@threecell.com
P: (301) 312-8610

Copyright © 2023 · ThreeCell