Welcome back to another very exciting tutorial, here at the PhotoshopTrainingChannel.com.
My name is Jesus Ramirez and you can find me on Twitter @JRfromPTC.
In this tutorial, I'm going to show you how to create the Long Shadow Effect, and I'll
use an icon to show you the quick and easy techniques to do that.
If you're not familiar with long shadows, you first have to understand flat design,
and what flat design does is it removes any gradient textures and bevels, and focuses
on a minimalistic approach, and it uses only flat colors.
It's really popular on websites and mobile applications.
Long shadows started being used alongside reflector sign, and have also become really
popular.
A long shadow is simply a design element that gives the illusion the object is casting a
really long shadow.
Long shadows are created using simple shapes and clean lines, just like flat design.
It, also, uses a color palette that is bright and vibrant, and the color of the shadow is,
usually, a shade darker than the hue of its background.
However, sometimes, you may see a long shadow with a soft edge or gradient for a color.
There are way too many long shadow styles that we can go over, but in this tutorial,
we're going to keep it simple.
And before we get started, I do want to point out that if you're an Illustrator user, then
you, probably, want to start there.
To create a long shadow, you'll find that Illustrator can be a better tool, but this
is the Photoshop Training Channel, and you may not have access to Illustrator, so that's
what this tutorial is about, to show you a couple of tricks that you can use to create
that effect.
Also, in this tutorial, I'm going to show you how you can generate all the different
image sizes of your icon for an iOS app or the different needs that you may have.
This is going to be a template that takes advantage of Smart Objects and even though
we are using iOS as an example, you can adjust this template and make it work for an Android
app, or any other needs you may have.
Obviously, there's a lot more that goes into designing icons, but this tutorial is meant
to show you one of many techniques to create the long shadows, and to show you how Smart
Objects can benefit the workflow of graphic design.
So, we're going to get started with this file, here, which is 1024 by 1024.
The first thing I'm going to do is click on the Custom Shape Tool to create my custom
shape.
The shape that I'm going to go for is this one here, which is already active shape.
If you don't see it, you can click on this icon.
Then, click on All, press OK, and you should see all of the available shapes in Photoshop.
So, with the Radioactive Tool selected, I'm going to Click and Drag while holding Shift
on the keyboard to create the shape, then I'm going to release the key.
If I want to center this on the canvass, I can press Ctrl A, Command A on the Mac, to
create a selection around the entire canvass.
Click on the Move Tool, and in the Options Panel, you will see these icons, here.
They will help you align the currently selected layer.
In this case, the radioactive shape.
I'm going to click on this icon here to align vertically, and this icon, here, to align
horizontally.
I'm going to, then, press Ctrl D, Command D on the Mac, to Deselect.
I'm going to go into the Round Rectangle Tool, and I'm going to click on a corner, Shift
and Drag all the way to the corner.
The Properties Panel opens up, and if you don't have that, you can go to Window, Properties,
to enable it.
And you can Click and Drag on the corners, here, to increase or decrease the roundness
of your icon.
So, for me, for now, I'm just going to leave it at about 133 and I'm going to Click and
Drag that layer below the shape we created and I'm going to select a blue color for this
layer, maybe, this blue.
For the shape, I'm going to double click on the shape, choose white, and we have the first
part of our icon.
So this is the flat design, and now, we're going to create the long shadow effect that's
really popular.
So, I'm going to Ctrl, Command, Click on the Shape layer, and this is going to create a
selection around that shape.
I'm going to click above the rectangle, add a new layer, fill that with black.
Black is our foreground color, so I'm going to hold Alt, Backspace, that's Option Delete
on the Mac, and I'm going to disable this layer just so you can see it.
There it is.
I have that layer selected.
I'm just going to call this layer "Shadow" and double click on it and just type in the
word "shadow."
And what I'm going to do now is click on the Move Tool, and with the Move Tool selected,
I'm going to hold Alt Ctrl, Option Command on the Mac, then use the arrow keys on the
keyboard down and right.
But you can do down and left if you want to.
So, down, right, down, right, down, right, and I'm just going to keep pressing those
keys as fast as I can, just so you can see the extrusion that is coming out as I press
those keys back and forth.
And, if you wanted to, you can tier that.
It could just be a little extrusion creating on the shape, and you can do this with text
or any other layer.
I will just keep going, but you can stop if you want.
And I'm going to go all the way to the edge so I can create the long shadow effect.
It may take you a while and that's okay.
Now, if you wanted to, when you get to this point, you can just create, maybe, selections,
but you know where the edge is.
So, you can just find the edges and just fill it in if you want to, but I'm not going to
do that and I’m just going to just keep going a little bit faster, until we get all
the way to the edge.
Okay, now that I got here, I don't really mean to keep going because I can see that
it's going to cover this part with black, so I'm just going to press Ctrl D to Deselect,
Command D on the Mac, and then, click on the Polygonal Marquee Tool, make a selection out
of that, and fill that with black, Alt Backspace, Option Delete on the Mac, Ctrl D to Deselect,
Command D. And, now, we have the long shadow effect that we're going for.
I can hold Alt, Option on the Mac, in-between the shadow and the icon layer, to clip it
with the round edge shows.
Now, I can do several things with this shadow layer.
I can bring down the Opacity just so it has a darker blue, and what you see here is actually
the classic long shadow effect on an icon.
There are more things you can do.
There are different styles of long shadows, but keep in mind that you can do this with
text, like, I've gone ahead and created this earlier before we started the tutorial and
this is exactly what I just showed you just using text.
One of the things you can do to the shadow is double click on it to bring up the Layers
Style Panel and bring the Fill Opacity all the way down to zero.
That means that the only pixels that are going to be visible are the pixels that are created
by applying a Layer Style, for example, a Gradient Overlay.
I'm going to double click on the Gradient Editor, and I'm going to click on the top
swatch, here, which controls the Opacity.
I'm going to press 0 (zero), to make it invisible, then, I'm going to select a blue color, here,
click anywhere on the gradient.
It doesn't really matter where, and just select a darker blue, so, maybe, something like that,
and I'm just going to remove this one, bring this one all the way to the right, click anywhere
on the gradient, again, and that's just going to duplicate the last swatch that you had
selected, which is that same blue that we used.
I'm going to remove this white one and I'm going to bring this all the way to the right.
So, now, we only have blue at the bottom, but it looks like it's fading because we turned
this into an invisible, and, actually, went back to 60%, so then we move that back to
zero, and now we have a long shadow effect with a gradient.
I'm going to press OK.
And you can also play with the scale if you wanted to, and, also, maybe, the angle, so
maybe you want to do something like 45, but then, that changes the darkness, so we can
just click on reverse, and that's what you get.
You can, also, click and drag, and move that gradient around, or keep playing with the
angle till you find something that works for you.
I'm going to disable this layer for now, and another thing you can do with text is have
each letter have its own shadow with the same gradient effect applied to it, and the result
that you get is this, right here.
I created this beforehand, obviously, and it was the same effect but I just selected
one letter at a time, and then I created the shadow and applied that same gradient effect
that I just showed you.
If you add those two on the letters, this is the effect that you get, and this is, also,
another long shadow effect that is really popular these days.
And in case you're wondering how you select one letter at a time is very simple, just
press Ctrl, Command on the Mac, Click on the text layer icon to load the selection.
Then, with the Rectangular Marquee Tool selected, hold Alt, Option on the Mac.
You see when I hold Alt; you get that minus on the marquee icon there.
When you see that minus, Click and Drag to Deselect that portion of the selection and
you're left with one letter.
Then you just apply the long shadow effect as I showed you earlier, one letter at a time.
I'm going to press Ctrl D to Deselect.
Once you created your icon, you may be using this for something like an iPhone app, perhaps.
Then, one of the things that you can do is take advantage of Smart Objects to help you
resize your icon for the various different sizes that Apple requires.
So, what I'm going to do is now is I'm just going to add these layers into one group and
I'm just going to call this "icon."
Then, I'm going to click on the Render rectangle, here, and I'm just going to bring the edge
all the way to zero because I want a square.
The iTunes store does not allow you to have transparent pixels in the files that you submit,
and if you have a rounded edge to your icons, and they don't match the exact dimensions
of the Apple roundness, then you're going to have a weird effect that you may not want.
So, it's better to submit a square icon and have Apple create the rounded corners for
you.
And I will show you how you can create the different sizes just by using one Smart Object.
I have this file here that you can download for free on my website PhotoshopTrainingChannel.com,
and it's actually very simple to use.
You double click on this Smart Layer titled "Edit this layer" and it's going to open up
this Smart Object.
I have a grid, I have a logo, and this is just a background that you can disable if
you want.
This is the placeholder logo.
This is the grid I helped you design an icon.
So, what I'm going to do now is I'm going back to the icon that we created.
It's in a folder now.
I'm going to Click, Drag, hold Shift, and release the mouse button to place that right
in the center.
Now, remember that this no longer has a rounded rectangle, but the reason you're seeing it
now is because this icon container, here, has a vector mask.
If I hold Shift and click on it, you'll see it disappear.
I'm going to press Ctrl S to Save, then I'm going to go back into the icon template, and
notice what happens just by using that one Smart Object, all the different icons changed
to the new design.
And, if I were to press Ctrl Alt Shift S, Command Option Shift on the Mac, you will
come up with the Save for the Web window.
You can use png-24, click on Save, and choose a folder where you want to save your files,
click Save, and Photoshop is going to automatically take all those files out of here and put them
into a folder.
And I'm just going to use the same for the web window so I could show you what Photoshop
did for us.
It created all the icons that you will need.
I'm going to press Cancel, Cancel, and, again, this available for download at my website
if you want to use it, and the advantage is that the Smart Object allows you to make changes
and automatically update all the icons that you'll need.
Now, if you're wondering how I created this, I'm going to show you really quickly.
I'm going to create window and the document size really doesn't matter.
All I'm going to do is I'm going to just quickly create an icon here.
So, the background, we'll make that this color blue.
Then we'll add a custom shape—this clock here.
And, I'm going to click on this icon to create a new layer.
I don't want to add to what we already have.
I want the color to be white, and I'm going to move that into the box there.
Press Ctrl T, Command T on the Mac, to Transform, hold Shift Alt, Shift Option, and scale it
down a little bit.
I'm going to do what I did earlier.
I'm going to press Ctrl, or Command on the Mac, click on the layer icon to load the selection
and use the range icons to center the clock icon onto the square.
And I'm going to press Ctrl D, Command D, to Deselect.
I'm going to hold Shift on the top layer.
While holding Shift, click on the bottom layer to select both of them.
Then right click on it and convert it to a Smart Object.
Now that it's a Smart Object, I can hold Alt and drag it over to the right, and I'm going
to hold Shift Alt, and that's Option on the Mac, and Scale it down, press Enter, hold
Alt, Option, Drag, hold Alt and Shift while dragging on the corner handle to make that
smaller.
So now we have three different sized icons, but in reality, they're all the same one.
If I click on the original one and I change the color to, say, pink, I can press OK, Ctrl
S to Save, Command S on the Mac, and go back into the previous document, and you'll see
that they all changed.
The reason is, every time you duplicate a Smart Object, it's still tied to the original
Smart Object.
If you make a change to any of them, it will affect all of them.
If you want to create a Smart Object that is not affected by its parent, you right click
on it and click on New Smart Object via Copy.
I'm going to drag this one down and I'm going to make a change on this one, and this time,
we'll make it green.
I'm going to save it, Ctrl S, go back.
You'll notice they all changed except for the last one that we created.
So that's one way you can create a Smart Object without it being tied to the rest.
And for the template file, after I created the icons, I had to set up the slices so it
would be easy to save.
So, the way you create slices as you select the Slice Tool and you select the items, the
assets that you want to save, for example these; then I can select the Slice Tool, double
click on it, and give it a name.
And whatever name I give it will be the filename once it's saved.
If I click on Auto Slices, you'll see the other slices here.
They're all numbered 1, 2, 3, 4.
The ones that I highlighted in blue are the ones that were generated by the user, and
the ones in gray were generated by Photoshop.
The ones in gray, you may or may not want to use, depending on what you're doing.
If you don't want to use them, if you click on them, on Slice Type select No Image, and
press OK.
All the items that are type of No Image will not be saved when you do the Save for the
Web window.
Another way you can generate the assets is by using Generator, which is here, under Generate,
Image Assets.
I have a whole tutorial on that if you want to figure out how that works, but it's a way
of saving files just by using layer names.
Okay, and that's it for this tutorial.
As always, I hope that you learned something new.
If you have any questions, feel free to leave your message down below and don't forget to
subscribe to my newsletter where I send you an email notification every time I put up
a new tutorial, and a tip of the day roundup every Monday morning.
Also, don't forget to subscribe to the YouTube channel.
Once again, thank you for watching and I'll talk to you again, soon.