Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Drop shadows have become an essential part of any web designer's toolkit, and these days it's even easier to implement drop shadows through things like CSS, but you also need to know how to simulate them in a program like Adobe Illustrator so that when you go to convert these out to CSS, or your developer takes over, they will know exactly how this is supposed to look in the grand scheme of things. So in this movie I'm going to be exploring various ways that you can apply drop shadows to your objects here inside of Illustrator. So the first thing I'm going to do is select an object on my screen, and I'm just going to select this back portion of the ad that we are working on.
This is a 300 pixel x 250 pixel ad that's going to go on the sidebar of a web site, and so I want this to look almost like it's three-dimensional, like it's coming off the page. But in order to do that, I need to create some depth between it and the background. And simulating depth is very easy when you use something like a drop shadow. So with this object selected, I'm just going to go up to the Effect menu and choose Stylize and select Drop Shadow. And when the Drop Shadow box opens, I'll go ahead and click Preview so we can see exactly what's going on. And I'm going to do a little bit of maneuvering around with the settings in here.
The first thing I'm going to do is take the Opacity down to about 40%. And once I get the opacity down to about 40%, it should be okay. And now I'm going to increase the Offset of this as well, so we'll go 2 pixels on the X Offset and 2 pixels on the Y Offset. I'm also going to increase the Blur amount a little bit, so let's do that to about 5 or 6 pixels, depending on your personal preference. And then I'm also going to change the color as well. So the color for this, I'm going to lighten it up, just a tad. I don't want it to be quite as dark, hit OK.
And so now I get a preview what this looks like and if I hit OK, it's going to be applied to that object. I can click away from it to get the full preview of what it's going to look against a white background, and it looks pretty good. It looks like it's setting there, kind of extruding off the page a little bit. If I am not happy with that drop shadow, it's very easy to correct that. I can just click on the object again, find that drop shadow in the Appearance panel, and click it, and that opens up with the Drop Shadow properties and I can then make a change. So for instance, if I think the shadow needs to be darker, I can increase the Opacity to something like 50%.
I can also back off the Blur amount a little bit to kind of solidify it up a little bit, so let's back that down to something like 3 pixels. If I turn on the Preview, you'll actually see that snap in place and I can hit OK to commit, and once I click away, you can see now it's got more of defined box shadow. It looks a lot better. And when someone goes to re-create this inside of CSS, it'll actually be pretty easy to do that, because I've already given them the X and Y Offset values. I have also given them the Opacity and Color values for the shadow, and I've also given them the Blur amount.
And when you are talking about drop shadows in CSS, those are the most important things you need to worry about. You need to worry about color, opacity, offset, and blur. Those are the main factors that go into making a CSS box shadow, and that's exactly what we've re-created here inside of Illustrator. So anytime I need to apply a drop shadow, I pay attention to those specific numbers and I might even write them down, so that I can then share those with my developer or keep them as notes if I'm the developer, so that I can easily implement this drop shadow into workable CSS later.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.