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.
A big trend in the web design world right now is realism, things that are drawn by hand but actually look like an actual object or something like that. And metallic textures are really big on the web. You see this all the time in Apple's iOS, the little knobs and buttons that you click on. A lot of people are using it for navigational components in their sites. And in this movie, I'm going to go over how to build your own metallic textures by using layer styles. I'm going to create a new document by going to File > New. Once I'm inside of the New Document dialog box, I'll set this to be about 600 x 600. Hit OK.
I'm then going to grab my Ellipse tool inside of my shapes and I'll just hold down Shift to draw out a circle. You can draw any type of shape you want. So just most of the time, you see the circle as an example for this, sort of like a knob or a button that you would press. And so mine is white right now; you can make this any color you want. I'll make it a dark gray so we can actually see what's going on. So it's just a circle. And so what I want to do is add a layer style to this that simulates that it's a metallic texture. So I'll go up to the right-hand side of this layer, double-click, and I'm going to choose Gradient Overlay.
Inside of the Gradient Overlay, I want to first change the Style from Linear to Angle. I get something that looks like that. Then I'm going to pick the Gradient Editor by clicking right on the gradient itself. Inside of the Gradient Editor, I'm just going to come in and start clicking where I see this little hand. Click, all the way down. I'm just going to create several different stops all the way across. Now in my Swatches panel, which you need to make sure you can see--if you can't see your Swatches panel, then just cancel out, bring your Swatches panel out where you can get to it, and then come back in here and do this again.
I've got my Swatches panel up here. I'm just going to start selecting these stops, and then adding neutral-gray colors to this. It really doesn't matter which ones you pick necessarily; I'm just going through and picking randomly. Get a dark one in there, throw a really light one in the middle, throw a really dark one in there, light one like this. And you can add more to this if you want.
It helps to add a little bit to the realism. You can see the more I add, the better it looks. Something kind of like that. And if you wanted to throw in some different colors here and there, you could do that. I would stay with a neutral-gray palette though. There we go! So that looks pretty good. And I've added several different stops all the way across, and I'm just using different metallic colors up here in the Swatches panel. Now I'm going to go ahead and call this Metal, and I'm going to click Save.
This is going to save this in my gradients so I can get back to it anytime I want. And I'll just call this Metal, hit Save, and I'll hit OK. So now that is there. And so if I want to really simulate this metal look, I'll add a stroke to this. And the stroke color, I want this to be sort of a darker gray, and I'll set it to Inside. Increase the size quite a bit. Now I'll click on Inner Shadow to give it a little bit of depth.
If you want to create a little bit shine inside of here, you can change the blend mode of the shadow to Normal, change the color to white, then uncheck your Use Global Light box and kind of drag it in, like so, change your Size to 0, and that will create sort of like a beveled edge around the outside of that. Then we hit OK and there we go! Now if you wanted to add something to the middle of this--maybe it's becoming an icon now--I can come over, I can grab a custom shape tool, and I'll just go up to my shapes, and if you want to load all the shapes in Photoshop, just go up here, click All, and hit OK.
It'll load every shape that's available to you. And so I'm just going to grab some sort of shape here. Let's grab a question mark. And I'll draw that out so that it's right there. And then I'll just kind of move it towards the center. I'll change the color to be a really dark gray, something like that, and then I'll double-click and I'll add a drop shadow to this. But the drop shadow, I'm going to change the mode to Normal, change the color to white.
See what I'm going for here? It looks like it's carved in. Change the Size to 0, and we'll dial back the Distance just a tad bit, and maybe I'm going to take down the Opacity just a little. Distance down to 2. Hit OK. Now click the Background layer to see the final product. You see that I've created something that looks very metallic, very realistic in just a few short and easy steps. So now I've got that gradient saved. If I wanted to save that layer style, I could also do that, and that way I could apply that instantly to anything that I wanted to in any of my designs going forward.
And I'll cover how to save layer styles in the next movie.
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.