Shadows add that little bit of extra polish that can make your design really stand out from the crowd. They help to draw attention to an element by raising it off the page and giving it a more ‘real-life’ appeal.
Shadows can be used for both fonts and objects (like an image or graphic) to add depth and visual interest to your layout. Unfortunately, they have a high propensity for misuse.
The most common mistake is to make a shadow too large and too strong. This will cause text or elements to look blurred, or out of focus. The second most common mistake is to use the wrong color. This post will discuss the best practices for using shadows and how to avoid common errors that make your design look amateurish.
Step 1: Choose a Light Source
The first step when working with shadows is to choose a light source. This means you’ll want to imagine that a light is coming from one direction onto your page, which will dictate the direction of all element shadows on that page. It doesn’t matter if you choose to place it at the top of your page, or to the left or right, just as long as your consistent.
An easy place to start is to choose a light source coming directly from the top of your page at 90 degrees. It gives things a nice uniform look. This means all shadows are along the bottom of your text or images. The figure below shows you the difference between a light source that is 90 degrees and a light source that is 120 degrees.
It’s really entirely up to you where you place your light source. Just remember, be consistent!
Step 2: Color
As we mentioned earlier, one of the most common mistakes is to choose a color that is too dark for a realistic looking shadow. Try choosing a color that is either a light grey or even possible in the same family of the object itself. Below you can see how black can make an object look blurry or even dirty.
Step 3: Size
Once you’ve chosen a color, the next goal is to choose the size of your shadow. The most common error is making the shadow too big. Again, this can make the object appear blurry.
Step 4: Opacity
One way to soften a color is to make it more opaque. This also softens the shadow and gives it a more realistic look.
Notice again, how the first image looks almost dirty or blurry in some way. The black color is too dark and the opacity, or weight, is too strong. When we move to a softer grey color and take down the opacity in the second image, we have a much more realistic looking object on the page.
So these are the basics when using shadows! Let us know if you have questions in the comments below!