Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
Join Justin Seeley as he reveals how designers can create vibrant web graphics, wireframes, and complete web site mockups in Adobe Photoshop. The course covers creating a custom web workspace for maximum efficiency; drawing, coloring, and optimizing web graphics; creating vector shapes and text that scale seamlessly; mastering transparency; building navigation bars and buttons; and speeding up these tasks with the Photoshop automation tools.
The drop shadow is one of the most popular and widely used effects in all of design. It helps make objects seem more organic, and it simulates depth in our designs, giving them a more realistic feel. That's a huge trend in web design today: having things that feel like they're almost coming at you off of the screen. In this movie I'll explore how to add drop shadows to your images in Photoshop. The first thing I'm going to do is go up and create a new document. Go to File > New and I'll create something that's, let's say 500 pixels by 500 pixels, and hit OK. And so I'm going to come down and grab one of my Shape tools, this time the Rectangle tool. And I'll switch the Color to just be white for now. And I'll just click and draw out a rectangle, like so.
With that rectangle out on the canvas, I now want to switch to my Move tool, and then I'm going to use Command+A or Ctrl+A to select the entire canvas and then I'll use the Options bar to center that shape. Now chances are you can't see that shape, because it's white on white. So what I want to do is create a drop shadow behind it to create a little bit of separation. In order to do that, I'm going to come to the right-hand side and double-click and I'm going to choose Drop Shadow. Immediately when I do that, you're going to start to see that this almost looks like a small piece of paper floating above the background.
Now, one of the interesting things about the layer styles inside of Photoshop is the fact that you can come over here and start to manipulate them on your own if you want to. I'm going to turn off this checkbox that says Use Global Light, and that's because I don't want to affect any other effects that are inside of my document. And then I'm just going to come over and I'm going to drag this over until it's kind of behind, like that. And you can manipulate this any way you want. You can drag it as far down or as far up as you want it to go. In this case, I'll just kind of center it right behind it.
I'm going to increase the Size a little bit, just give it a little bit more depth, and there we go. It seems almost like a piece of paper sitting on top of a background there. And then when I'm finished with that, I can hit OK. Anytime I want to get back in and change this effect--like let's say the client looks at it and they are like "no, that doesn't look realistic; I think the shadow needs to be more offset towards the bottom," that's okay. I've used a layer style, so now I can go back to Drop Shadow, double-click. It takes me right back, and I can simply come back in and adjust like this. Hit OK. So now it looks like it's little bit more 3D perhaps.
Now, anything that I've set on top of this, this could almost be like a frame. So if I grabbed another Rectangle tool and just kind of drew inside like this and then changed the color to let's say a blue, there we go. Now, that almost looks like some sort of frame around the outside of that, and then this blue object is coming at me off of the screen. So just with one single layer style, I've simulated some depth in my design and made it feel a little bit more interesting and added a little bit of pop to a graphic that would otherwise be really boring.
So explore the possibilities of simple little effects like drop shadows. You'll be amazed at what it can add to your designs. And then what's even better is when you hand this over to a developer, most of the effects like drop shadows can be applied through CSS these days, which means you're not going to have to hand them this complex object. You can just hand them a plain object, they'll apply the shadow with their CSS, and your image will load even faster than you thought it would before. It's really neat, and it's a great way to add just that little something extra that your design might have been lacking otherwise.
There are currently no FAQs about Photoshop for Web Design.
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.