Basics of Text Shadows

A shadow is an area direct light from a light source cannot reach due to obstruction by an object. It occupies all of the space behind an opaque object with light in front of it. The cross section of a shadow is a two-dimensional silhouette, or reverse projection of the object blocking the light. The sun causes many objects to have shadows and at certain times of the day, when the sun is at certain heights, the lengths of shadows change.

Knowing the definition of what a shadow is can help you make a difference between a site whose overall appearance is beautified through the usage of shadows, or harmed because of it. From the excerpt above (adopted from WikiPedia), a shadow is a shaded region that is formed when an object comes in contact with rays from a light source. Therefore, this light source is what determines that length, angle and the opacity of a shadow.

Recently there has been a spike in the usage of shadows in web and object design. Through the usage of shadows, we are able to provide perspective and dimension to our work. But violating the rules of shadows can mean a difference between a good and a bad design. So how do we prevent our design from becoming a bad design?

The solution is simple, define your light source and work with having your site’s/designs elements compliment that light source.

Now the better question, how do we make shadows in Adobe Fireworks?

This too is quite simple. We can achieve a shadow effect/reflect shadow by taking advantage of two Adobe Fireworks.

First is Drop Shadow found in the filters setting. By using this tool you can help your text and objects stand our from the rest of the designs content. Furthermore, you can also take advantage of this tool to give your content an engraved and blurred look.

The second is by taking advantage of feathered edge in the properties panel. By using a feathered edge, we can give a blurred edge to a shape. By taking advantage of this feathered edge, we can give a three dimension look to our designs. We will talk about this feature and use it in an example in the next tutorial when we work with objects.

Select the Light Source

With the advancement of CSS, we were introduced with several new features. One of these is the text-shadow property. This CSS property can help us beautify our work and even give an engraved and blurred look. So how do we achieve this?

Let’s start off by defining our light source. Will we be using our light source from the top, left, right, bottom, top-right, top-left, bottom-left or bottom right. For the sake of this tutorial, let’s use the top as our light source. Therefore, all the shadows dropped from our content will be pointing to the angle 270° or -90° (straight down).

Now that we have that defined, let’s create our canvas, let’s use 650 x 300 px at any resolution you like. For the background color, let’s use #F3F3F3 (light gray). You can create a rectangle and add some texture if you like. If you do use some texture, remember to lock that layer so that it doesn’t get in your way when you’re working.

Let’s click on the text tool and write something our canvas. Since we are approaching January 18, I’m using “STOP SOPA AND PIPA.” I’m also using the League Gothic font size 80.

Simple Drop Shadow

To do a simple drop shadow for the text, let’s click the little + icon next to Filters. Hover over Shadows and Glow and click on Drop Shadow. From the options box, let’s set the distance to 5, opacity to 65%, shadow color to #666666 and softness to 4. At the beginning we said our light source is at the top, therefore our shadow angle will be 270° or -90°. Click anywhere outside of the property box and your shadow should be added to your text. For this simple drop shadow, you can use any color you like. Here’s a preview of what your design should look like

Engraved, Blurred and Embossed Look

Using an engraved and blurred effect can bring dimension and personality, in short dimensionality, to your design. Engraved can give the impression of content that is punched out or dug in. You can achieve this look by taking our original (plain) text and selecting a color.

Engraved Look

1. For this effect to work the content color, in this case text color, has to be darker than the background. So let’s use #333333 for our color. Make sure you don’t pick a color that’s the darkest in its color group.

2. Now by clicking the + icon next to Filters, lets go to Shadow and Glow and select Inner Shadow. This will help add depth to our punched out text. From the options window let’s set the distance to 3, opacity to 100%, softness to 0, angle to 270 and shadow color to #000000 (or the darkest color in the group).

3. Now we’re going to add a little drop shadow to show that the light does hit the bottom end of our text, thereby making that portion stand out a bit. To do this, we click on the + icon next to Filters, hover over Shadow and Glow and select drop shadow. In the settings, let’s set the distance to 2 (you can use 1 as well, but two makes out text stand out more in this case), opacity to 80%, softness to 0, angle to 270 and color to #FFFFFF. This shadow color will always be lighter than our background.

Blurred Look

To achieve a blurred look, all we need to do is make sure that our text color is a few shades darker than our shadow (or in this case glow).

1. Let’s use #C8C8C8 for our text color.

2. Go to Filters » Shadow and Glow » Glow.

3. For the settings lets set the distance to 2, color to #CCCCCC (lighter shade of our text color), opacity to 80%, softness to 4 and offset to 0.

Embossed Look

To get an embossed look using a method that allows more control, let’s we will once again take advantage of inner shadow and drop shadow.

1. Let’s set the text color to #C8C8C8.

2. Go to Filters » Shadow and Glow » Inner Shadow.

3. For the settings lets set the distance to 3, color to #FFFFFF, opacity to 80%, softness to 4 and angle to 270.

4. Let’s add a Drop shadow by going to Filters » Shadow and Glow » Drop Shadow.

5. For the settings lets set the distance to 2, color to #B0B0B0, opacity to 65%, softness to 0 and angle to 270.

Other Shadow Usage

There are many more shadow usage and functions being developed each and everyday. By playing around with the shadow and edge property, we can do wonders. Here is a small tutorial of the beauty you can get by removing text color and letting the shadow do wonders.

1. Let’s start of with our text. We don’t have to worry about the color of the text for this effect.

2. Go to Filters » Shadow and Glow and select Drop Shadow.

3. For the settings lets set the distance to 7, color to #000000, opacity to 65%, softness to 0 and angle to 315 (top-left light source).

Shadows can be a wonderful tool if used right. Most of these effects you saw today can be done using CSS. Take advantage of shadows when you can but don’t overdue on it.

Stay tuned for the next tutorial where we talk about box and object shadows.

Sazzad

Hey there. I’m Sazzad, a User Experience Developer from New York City. I work with many talented folks who find ways of re-inventing the way users look at the web. I am the founder of the FWPolice and co-founder of Fleech Media. You can follow me on Twitter by the handle @IamShipon1988 .

4 Comments

  • Nikia says:

    I think this is great! It’s nice to see tutorials going over the small details that make such a big difference. Most tutorials just gloss over this. One note – I think you forgot to add to check ‘knock out’ in the very last step, but either way thanks for pointing this out I never think to try using JUST the shadow. Thanks!

    • Knock-out can be a tricky tool. But it is indeed a useful tool for designing using Fireworks. However, knock-out is not a feature found in web development, thus taking it from design concept to coded web, is not possible. That is why I did not cover it. Instead showed a different approach that will get result that is close to it.

      • Nikia says:

        Good point but then I must be doing something wrong when I follow your steps I do not get your result even if I change the text color to none everything disappears – even the drop shadow, the only way I was able to achieve the result was by using knock out… I must be missing something

        • Sorry for the late reply. If you are talking about the transparent text with shadow, you have to use the drop-shadow option. You have to hit “Knock-out” on the drop shadow option. I have attached an image.

Leave a Reply

Your email address will not be published.