Subscribe or Login to watch video

Login or Subscribe to watch video

82 - How to make a Long vector hard shadow in Photoshop


Questions & Comments

Juanita - 5 months ago

my attempt...

Arthur Williams - 3 days ago

My attempt, I drew out and angled a smart shape rectangle and erased the bits which poked over the top of the shoe.

ALL ACCESS: $19.95 per Month + Cancel anytime   

Video Transcription

Hi there, this video we're going to create the cast, kind of long shadow that we see. Very popular in UI design at the moment. Google used it for a long time. Normally this is where I say it's super easy, but it's not. It's super manual labor, I'll show you why now. 
To get started we're going to use just a new document, 'File', 'New'. We're going to make this one smallish. We're going to make it 1000 x 1000 pixels. And we're going to click 'Create'. I'm going to pick a background color just from my Swatches up here. You can mix any color you like. So I've picked it, and I'm going to go to 'Edit', I'm going to go to 'Fill'. And because I got my background layer, and I've got a foreground color selected let's click 'OK'. 
So we're going to bring in some-- we've used it earlier on, we're going to go 'File', 'Place Embedded' because it's Vector stuff from Illustrator. Anything from Illustrator use the 'File', 'Place Embedded'. Retains all its coordinates, and Math, and vectorness. You can just open it, copy, and paste it. But that's not true Smart Object goodness. So in your 'Exercise Files', there's one in here called '15 Shadows'. Open that up. We're going to use 'Shoe.ai’, that's Adobe Illustrator. You can do with anything, we're going to do it with this image. I'm going to click 'OK'. You could do with anything, it doesn't have to be shoe, it can be text. I shrink it down a little and hit 'return', I'm a little higher there. 
So first up we need to select the shoe. We use our Quick Selection Tool. I'm just going to kind of drag around, grab all the stuff. You could select the background, and invert it, that would be faster but there we go. It's a nice easy selection because it is such a clean and crisp image. Now it's time for the confession. Now I can't find or think of a better way than doing this. This is a little bit manual labor, a little bit. If though you're watching this, and you're like "Hey, why doesn't he just do it this way?" I'd love to know. I can't find it, I can't figure it out. This way it works, it's fine but it's just, there's a little bit of mashing of keys, which is fine. 
So we're going to create a new layer, we're going to call it 'Shadow'. 'Shadow'. I'm going to fill it with black. So I'm going to go to 'Edit', let's fill it with black. For contents I'm going to pick black. Click 'OK'. I'm going to go to 'Select', 'Deselect'. So this is phase one. I'm going to put it just underneath my shoe and I'm going to now start the button mashing. So on a PC, hold down your 'Alt' key on your keyboard. If you're on a Mac, look down and grab your 'Option' key. Just make sure you're on the Move Tool, won't work otherwise. So you're ready for keyboard mashing? Down arrow, right arrow. Down arrow, right arrow. It's hard to see, it's coming out like a Drop Shadow. 
What it's really doing is actually just duplicating the layer that we had selected every time because we're holding down that special key which is 'Option' on a Mac, 'Alt' on a PC. Don't worry, we're going to have like one billion layers when we're finished. So clearing the key down. Can't remember what was the last thing I did. Was it down or across? Probably across, so down, across, down, across… Yes, you're going to go mad, so what I'll do is I'll get us to speed it up and I'm going to go down across, down across, loads of times. Ready? Go. 
I'm back. Did I get bored of that? I'm going to show you a little trick to speed it up. So what I'm going to do is I'm going to select this top one. I'm going to scroll all the way down to the bottom to my first shadow, there he is there. Hold 'Shift', and click this last one. Then I'm going to right click any of them and say, 'Merge Layers', please. So now they are at least one chunk. So now what I can do is I can duplicate it. Not worried about the layer names. I got two of them, and I can drag it out, and kind of use my arrow keys to tap it into position so I'm-- I'm kind of cheating, if you know, I'm double down, doubling down. So I'm going to select both of these now. 'Merge Layers'. Same thing again, I'm going to duplicate, I'm using my little shortcut. 
Drag it down to my little turned up page. Then get my arrow keys and line it up. I probably just need, I need a couple more. I'll certainly use shortcuts now. The shortcut to merge layers is, I will tell you in a second. Got lined up. Select both of them, it is 'Command E' on a Mac, 'Control E' on a PC. Should be the last one. Duplicate it. You're like, "This is painful, Dan, there's got to be a better way." I wish. There probably is, I just can't work it out and I can't find anybody else that knows. You could be my savior, and I could rerecord this video. 
So now I've joined them all up, I got this long shadow. I'm just going to lower the opacity of it down to look more like that kind of Vector stretched out logo. You're like, why didn't I just draw lines off it and fill it with the Pen Tool. I guess pencil's bit out of the scope of this intro course but if you are a Pen Tool master you can do it. The only trouble with it, is when you have like internal compound shapes it's hard to know what to do there. I find this technique just works good every time for that kind of long cast Google shadow. 
That is it for downing and writing one zillion times. Sorry for that, let's get on to the next video, it is less manual labor.

ALL ACCESS: $19.95 per Month + Cancel anytime