Adding killer shadow effects

Hello friends, this is Sue Jenkins with productivity tips for web designers. In this week's lesson, I'll show you some effective ways to create shadow effects in Adobe Illustrator. As awesome as CSS is for styling and positioning HTML markup, there are some things like advanced drop shadows that it simply can't do yet. In web design, one of the main goals is to achieve what I call code economy. In essence, code economy refers to the ability of a designer to design a really great looking site that uses CSS as much as possible rather than graphics.

This means that you'll use CSS styles to specify things like your colors, fonts, backgrounds and borders, as well as newer effects like rounded corners, gradients, and drop shadows. While you can currently create simple drop shadow effects for images and text with CSS, you can't always make the exact styles that you need with CSS, well, yet anyway. So let's take a look at ten special effects that you can do in Adobe Illustrator, and subsequently save as a graphic file to insert onto your web page.

Now this first example has your regular run-of-the-mill drop shadow effect, which I'll show you how to do. You'll start by selecting your text or your object, and you'll go up to the Effect menu, and choose "Stylize", "Drop Shadow". So the first thing you want to do when the dialog box comes up is turn the preview on so that you can see any changes that you make by modifying these numbers. So if that's too much blur, what I could do is make this like zero point zero five for both of those, and maybe make the blur a lot less, like point two, and that looks about the same.

Now if I wanted to, I could also change the color by clicking here, and I could choose any color at all, clicking okay, and that'll change the color of the drop shadow and give it more of like a neon glow effect. So we'll click okay to finish. So that's the basic drop shadow effect. Let's move over here and we'll do sort of a more hard-edged effect. It's the same technique, and we'll change the color and remove the blur completely. So start by selecting your object, going back up to the Effect menu, choose "Stylize" and "Drop shadow", turn your preview on, and then you can modify the settings.

So in this case I'll bump the opacity up to 80%, I'll leave the off-sets where they are, but I'll set the blur down to zero. I could also make the color a little bit darker if I wanted to match my original. So now I have a nice hard-edged effect. Actually, that might be a little bit too dark, so I can go back in and change the color, and when I'm happy with it, click okay. The next effect that I want to show you uses two stacked layers with different colors, and that's all it is, just two stacked layers. So here you see the dark layer on the bottom behind, and the lighter layer on top, but you could certainly use any two colors to make this effect work.

So I'll grab this one and just stack it right on top, then I would select both pieces and optimize those together. If you're going to use stacking as a technique, let's switch over here, you could actually play with solid colors and with patterns. So in this example, I've got a solid layer on top of a layer that has a pattern fill, and all I did to use the pattern was go over to my "Swatches" panel and borrow some of the free patterns that come with Adobe Illustrator through the pattern library on the bottom of the swatches panel, you just go down to patterns, and I believe this was from the basic graph lines pattern library.

You can use any pattern that you want, so I've got several on here, so you could just play around with them. And then you'll just take your other solid layer, and stack it right on top to get your special shadow effect. The next thing is working with multiple layers. So in this case, instead of two, I've got three separate layers, two solids and one pattern. And again, you could use any pattern that you want, the patterns that come for free with Adobe Illustrator often have transparency built into them, so that when you stack one on top of the other, you're actually seeing through to the underlying layer.

And again, just stack them up the way you like them to create the desired effect. When you're playing around with your stacked objects, you can push the look a little further by adding a stroke to one or more of the objects in your stack. So for instance, here you see two colors used for the stroke and fill, and then they're just reversed, one has the orange fill with the purple stroke, and the other one is the reversed, and then just stacking one on top of the other it gives it sort of like this 3D effect that's really interesting.

This next one uses stacked layers where the layer on top is solid and the layer below has the blur effect applied to it. You can apply the blur through the effects menu, so just select your object, go to the effect menu, and choose any of the blur effects, this is a gaussian blur, once you apply the effect, you can always modify it by selecting the object and going to the appearance panel, and then just clicking on the effect name brings up the dialog box, so that if you wanted to modify it you certainly could. So I have 10 pixels as the radius, and if I wanted to push it to be a little blurrier, just modify the slider here and click okay.

Then just stack my object one on top of the other to get that nice shadow effect. In this next example, instead of using a blur I applied a feather effect to the underlying layer. This layer already has the effect, but let me show you how to apply it. You'll select your object, go up to the effect menu, and in this case, stylize, feather, and the dialog box comes up, turn preview on, and then you can apply the feather. A little goes a long way with this one, so you're probably going to try to keep it to point one or even a little bit less, you can do point oh one, or point oh eight, or whatever you need and click okay.

I'm going to undo that with my keyboard shortcut, because what I really want to do is stack this solid layer on top of the feather effect layer. And this is kind of a cooler look than the drop shadow, like a neon glow or I used cool colors, so it has sort of a wintery feel. This next one over is a little bit different, in that I'm using the scribble effect. So I'll select my solid layer, and we'll go up to the effect menu, choose stylize, and then scribble.

Again, turn on your preview so that you can see the effect, and then you can play around with all of these different options to get different effects, so you can make it go really thin, really thick, play around until you get the look that you're going for. I'm going to leave it where it was, and just click okay, then I'll undo so that we can see the actual effect where I stack one on top of the other. So this looks like grass or a scribble effect. Let's switch on over to this next one. Now this uses Illustrator's 3D extrude and bevel tool, and I don't know if you've ever used it before, but here's how you do it.

First you select your object, and then you go up to the effect menu and choose "3D" "Extrude & Bevel", turn your preview on so that you can see what's happening, and then this is a really interesting dialog box. You can play around with the number of degrees in each of these fields here, or what I like to do is actually click and drag so you can see an outline view of your object as you're rotating it, and this can really help you get the exact angle that you're going for, and once you have the angle you can play around with the extrude depth, and I would encourage you to go ahead and click on every button and bell-and-whistle in this dialog box to see what you can do cause you can create some really amazing things with extrude and bevel.

So when you have it the way you like it, click okay. So when you're ready to save your work for the web, you can use the save for web dialog box to save your graphics as jpegs, pings, or gif files, and you can access that through the file, save for web menu. Remember, if you've created several images on the same art board, when you launch the save for web dialog box, Illustrator thinks you want to optimize the entire art board. To optimize just a part of the design, you can either adjust the art board's size with the art board tool, copy the artwork to a new, smaller art board, or use the slice tool to isolate the graphic and optimize just that slice.

I personally tend to favor changing the art board size, and you can do that with the art board tool, and all you do is just adjust the size of your art board to fit your artwork, just roughly drag it in like this, and it'll ignore everything outside that art board, and then when you're ready to optimize, you can go to the file, save for web, and it should isolate just that art board for you, and you can optimize that graphic. These ten techniques illustrate just a handful of ways that you can add pizzazz to your designs with the drop shadow effect in Adobe Illustrator.

None of these great shadow effects can be created with CSS yet, so using them can be a really cool way to make your website stand out from the crowd. The best style often depends on the context of the web design, so play around with these techniques until you find the right style that best suits your design.