Long Shadow Effect

Quick reference

• 00:04 Hey, everyone. Howard Pinsky here with
• 00:06 a Photoshop tutorial on how to create a long shadow for your icons.
• 00:11 You may have seen this design trend making its way around the web,
• 00:14 especially if you've been on Dribbble for five minutes or so.
• 00:18 Personally, I think it's one of those trends that will come and
• 00:19 go quite quickly, but some people wanted to know how to create this effect.
• 00:24 Now, you can create it with a pen tool.
• 00:25 But because I like to do things a little bit differently, we're actually gonna be
• 00:29 using the 3D tools that are available in Photoshop CS6 Extended or Photoshop CC.
• 00:35 And as long as you have a text layer or
• 00:36 some sort of a shape layer, you should be able to follow along quite well.
• 00:40 So the document I am starting with is quite simple.
• 00:43 I have a rectangle on top for the border, I have a type layer that says Ps for
• 00:47 Photoshop, and I have the background, which is a nice bright blue.
• 00:50 So with said, I'm gonna grab my Type layer in my Layers panel.
• 00:53 And now we need to extrude it into the third dimension.
• 00:56 So under the 3D menu at the top,
• 00:58 I'm gonna choose New 3D Extrusion from selected layer.
• 01:02 And Photoshop is gonna give us a really nice extrusion for our text.
• 01:05 But in order for this effect to work, the text needs to be lying flat on
• 01:09 the surface, and the light needs to be coming from the top-left corner.
• 01:13 But when you're in your default 3D view,
• 01:15 rotating just your text isn't enough to get the effect that you're looking for.
• 01:19 You also need to rotate the whole view, which isn't as easy as it seems.
• 01:24 So let me show you a much simpler way of doing this.
• 01:26 Over to the left in the little view port,
• 01:28 we have the option of changing how we view our type.
• 01:31 With this little drop-down right here, we have all these different camera views,
• 01:36 Left, Right, Top, Bottom, Back, front, Vanishing Point Grid, and Default Camera.
• 01:42 Now, right now, it's set to the top, which is the exact view that we're looking for.
• 01:46 But it's not reflected in our main document.
• 01:49 So at the top-right corner of the viewport,
• 01:51 you can click on this icon right here, and it's gonna switch the views for us.
• 01:55 This will make it much easier to rotate our text and position the light.
• 01:59 So now that the view is set, we're gonna select our text.
• 02:02 And then, over in the Properties panel, we want to select this option right here,
• 02:06 which is our coordinates.
• 02:07 And when we click on that, we can move, rotate, or
• 02:09 scale our object using specific values.
• 02:13 And, in this case, we want to rotate,
• 02:14 which is the middle column, we want to rotate 90 degrees along the x-axis.
• 02:19 So I'm gonna enter 90, and we now have our text facing upwards.
• 02:23 And if your text or shape is a little bit too small, you can move your
• 02:26 text over top the little white box in the center, and then drag it upwards.
• 02:30 It'll scale it uniformly, just like that.
• 02:34 And now that the text is the size that we want it, we can go ahead and
• 02:36 position the light.
• 02:38 You'll notice there's an icon for
• 02:39 the light source, right at the bottom of your workspace.
• 02:42 Yours may be on the top or on sides as well.
• 02:44 And then when you click on that,
• 02:46 you now have a handle to rotate the light source anywhere you please.
• 02:50 In this case, I want the light coming from the top left corner of the icon.
• 02:53 So I'm gonna grab the handle, and then rotate it until it's in place.
• 02:58 And now, we're ready to give our scene a render to see what it looks like.
• 03:01 Over in the Properties panel, you can click on this icon right here,
• 03:04 which is going to render our icon and smooth out the scene.
• 03:07 Now taking a quick look at it, the text is a little bit too dark.
• 03:10 So I'm gonna press Esc to cancel the render,
• 03:12 and we're gonna make a quick change to make sure the text is nice and bright.
• 03:16 I'm gonna select the front inflation material,
• 03:19 which is the material that you see at the top of the text.
• 03:21 And I'm simply gonna set the specular to a nice, bright white.
• 03:25 And when I press OK, I can go ahead and render it one more time.
• 03:27 And this time, it's gonna look a lot brighter.
• 03:30 Of course, you can dial it back just a little bit if you want a little bit
• 03:33 of gray left in there.
• 03:34 But for the most part, I was looking for nice, white text.
• 03:37 And as the render progresses,
• 03:38 the noise that you're seeing will gradually start to fade out.
• 03:42 And the really nice thing about creating the long shadow using the 3D features is
• 03:46 that it's completely editable and is gonna update when you update your text.
• 03:50 So I'm gonna select the base text mesh material,
• 03:53 right over here in the Layers panel.
• 03:54 And if I scroll down to the bottom of the Properties panel, I can edit the source.
• 03:59 So let's say for instance, you want to create an Adobe Illustrator icon as well.
• 04:02 I'm gonna simply type Ai, and then I'm gonna change the font so
• 04:06 it looks a little bit better.
• 04:07 I'm gonna choose Helvetica.
• 04:09 Now, when you close and
• 04:10 save this document, it's gonna update your 3D mesh and the shadow along with it.
• 04:15 And in this case, because Adobe Illustrator is orange,
• 04:18 I'm going to hop back into the Layers panel, and
• 04:20 simply change the color of the background to a nice bright orange, just like that.
• 04:24 And I can grab my 3D mesh once again and render it out to see the final result.
• 04:29 And like I mentioned,
• 04:30 as the render progresses, it's gonna look better and better.
• 04:33 Now, you are noticing that the shadow is looking a little bit harsh
• 04:36 in this example.
• 04:37 So let me stop the render.
• 04:38 I am gonna hop back into my 3D panel, and then select my environment.
• 04:42 And when I am in my environment properties,
• 04:44 right down here at the bottom where the shadows are,
• 04:46 I just wanna turn the Opacity down just a little bit, somewhere around 25%.
• 04:50 And when I render it, the shadow's opacity is gonna be a lot lower.
• 04:56 And that will do it.
• 04:57 Using the 3D features in Photoshop CS6 Extended or Photoshop CC,
• 05:01 you can create your own completely editable long shadow for your icons.

Lesson notes are only available for subscribers.