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.
Even though layer styles are a great way to add flexible effects to our artwork inside of Photoshop, occasionally we need to be able to manipulate them beyond the scope of what they're able to do out of the box. In this movie, I'll be exploring how to turn layer styles into their own editable layers so that you can then manipulate them to extend their capabilities. The first thing I'm going to do is select the Rectangle1 in this document that I'm working on. That's the white frame in the background. And I want to explore what layer styles are actually applied to it; in this case it's only a drop shadow.
And basically what I want to do is I want to edit this drop shadow so that to sort of droops down in either corner to make it look like this page is sort of curling at the edges. That's impossible to do with the default layer style that I have. But I can turn this into its own layer and achieve the same effect. So, with the layer selected that has the layer style you want to turn into its own layer, go up to the Layer menu, go down to Layer Style, and choose Create Layer. Photoshop might warn you that some aspects of the effects cannot be reproduced with layers, and that's okay. Drop shadows are not one of those cases.
So hit OK and now in your Layers panel, you should see Rectangle1 and also Rectangle1's Drop Shadow. If I select Rectangle1's Drop Shadow, I can then do Command+T or Ctrl+T or Edit > Free Transform to bring up the control handles around that specific effect. Now in my Options bar I can select the Warp button and I can come down and I can just peel down the edge here, and peel down the edge here and tuck up the middle just a little bit.
There we go. If it's too much, you can just drag it back up. I'm exaggerating this just to make it a little bit more obvious. And then I will switch back to Free Transform mode by clicking on the Warp tool again. I may even shrink this in just a little on the sides, and maybe I will shrink it up a little bit. There we go, and I'll hit Enter or Return to commit, and there we go. So now it looks as though the edges of this are actually curling up a little bit, creating some space between the edge and whatever this is sitting on, maybe a desk or a table or something like that.
And I did that simply by taking the default layer style, converting it to its own layer, and applying a little bit of a warp. So you can actually extend the capabilities of these layer styles by doing that each and every time, and doing things you never really thought possible.
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.