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.
One of the easiest and most effective ways to add special effects to your artwork inside of Photoshop is to utilize layer styles. Layer styles are pretty cool because of the fact that they are applied nondestructively to the layer that they're affecting and they can be changed, modified, or even deleted and taken away any time without affecting the underlying pixel values whatsoever. In this movie, we'll be exploring layer styles and how they can help us add a little something extra to our designs. I'm going to start off on this file right here that I'm looking at, and you can see here that I've created a tablet mockup that has a lot of depth and three-dimensional qualities to it.
But in reality, this is nothing more than a few basic shapes with layer styles applied to them. If I look at the original file, you can see here that it's just very, very basic. Nothing really exciting going on here. There's just squares and rectangles. So how do I go from this to this? That's the beauty of layer styles. So let's jump back over and let's see if we can re-create this on the original file. I'll jump back over here and I'm going to start on the tablet itself, down here at the bottom. In order to add somewhat of a bevel to this, I'm going to first add a layer style.
I'm going to do that by either double-clicking to the right-hand side or coming down to the bottom and choosing the small fx icon. And then I can go in and I'll choose something like Stroke. Once I'm inside of this dialog box, I can set different properties for the layer styles themselves. In this case, I think a 3-pixel stroke works okay, and the color needs to be sort of a lighter gray, and I'll hit OK. Now it's going to be difficult to see this because it is a dark tablet on a light background. But if I were to switch this to a dark background, you'd be able to see the edge a little bit better, and it would create almost a three- dimensional appearance. Now I'll hit OK.
When I apply that, you're going to notice a small fx icon appears next to the layer, and underneath that you get Effects and the name of any effects that you currently have applied to that layer. You also have eyeballs next to each one of these. If you toggle the eyeball next to the word Effects, it turns off all of the layer style visibility. If you turn off the eyeball next to the individual effect names, it only disables that style. So for instance, if I have multiple effects applied to this, I could uncheck individually or disable them all simply by clicking those two eyeballs.
If you don't want to see these--because they do clutter up the Layers panel don't quite a bit--you can click the small icon here and it'll fold it right back up. So now let's move on to the Home button. The Home button is just a circle with a rounded rectangle on top of it. What I want to do is create a three-dimensional appearance to the Home button so that it looks as though it's recessed into the tablet somewhat. In order to do that, I'm just going to double- click out to the right of where it says Ellipse 1. And once I do that, I'm going to choose Gradient Overlay. Inside of Gradient Overlay, it automatically applies a black-to-white gradient on the top of this circle for me.
In order to edit that gradient, I come right here and I'll click on the Gradient Editor. Inside of the Gradient Editor, I'll take this and I'll just drag this to the left, to 50%, and I'm also going to change the color to a gray. Then I'll take this slider, drag it in till it meets it, right about there. And now it's pretty much finished, although I need it to be flipped over. So in order to do that, I'll just drag these until they switch positions, like so.
If you have a little bit of trouble lining these things up, that's okay. You can just hit OK here and then check the Reverse box right there and it will automatically reverse the direction of the gradient for you. Once I hit OK, it takes me back out into the document, and if I click away from this, you'll be able to see it. Now it looks as though that's a glossy button that's sort of embossed into the tablet. Pretty neat. I'll collapse up the Home button. Let's continue to work. I'll select the screen. And the first thing I'm going to do is add sort of a beveled edge at the outside, and I can do that simply by adding a stroke.
So I'll double-click to the right-hand side. I'll click on Stroke. Inside of the Stroke, I'm going to back the Size down to 1. I'll change the Color to a dark gray. Now I want to make it look as though this is sort of recessed or pressed back into the tablet as well. In order to do that, I'll click on Inner Shadow. One of the cool things about the shadows inside of Photoshop is the fact that you have the ability to actually bring them out here and control them by clicking and dragging.
Now I want to come over here and turn off this Use Global Light checkbox. I'm doing that so that I don't affect the overall appearance of any of the other effects in my document. Once I uncheck that box, I can come out here and I can simply position the shadow anywhere I want. See, if I drag it all the way over, you can kind of see the shadow. So what I like to do is drag it out where I can actually see it. Then I work with the Size and maybe the Opacity a little bit. And then when I'm finished, I just drag it right back up until it fits right where I need it to go. And if you need to increase the Size a little bit more, that's okay.
The higher the size, I think the more it looks as though it's pressed down into the tablet itself. So I'm going to actually shrink that back just a tad. There we go! Now we'll hit OK. And so once I do that, I'll click away from it so we can kind of see the finished product. And there you have sort of a beveled edge at the outside, and then that shadow really makes it look as though it's pressed down into the tablet. Now finally, we have this layer called Gloss, and the Gloss layer is simply a shape layer that has no fill and no stroke. It's completely transparent at the moment. And what I want to do is fill it with a gradient to add somewhat of a glossy appearance to the tablet.
So in order to do that, I'm going to double-click out to the right. I'm going to add another gradient overlay. You can see when I do that, it automatically adds a somewhat glossy appearance. And I'm going to come into the Gradient Editor. Click. I'm going to select this black color stop here, and you can do this one of two ways. You can either leave this as black or you can click the stop on top of it and change the Opacity to 0. That way this fades from white all the way to transparent.
So if you were to change the color of the tablet, for instance, from black to white or whatever you might change it to, the gloss still fades on top of it without actually showing the black color that you had. So from white to transparent. I'm also going to back down the opacity of this white stop over here, so I'll select this, and tone that back, maybe to like 25%, something like that. And you can make this as bright or as dark as you want it to be. Totally up to you. Hit OK and hit OK. And so now I have essentially re-created this tablet mockup using nothing but layer styles.
As you can see, they're just basic shapes set on top of each other in different ways with different layer styles applied, and I've created a three-dimensional product in just a few short and easy steps. So as you continue to create graphics inside of Photoshop, play around with the layer styles and learn your way around them and all that they do so that you can take advantage of them and nondestructively alter your images and turn them into something that you might not have thought possible before.
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.