Bill Rosener: Hello! It's Dr. Bell. Welcome back in this video, we learned how to create navigation buttons for a website.
Bill Rosener: We'll be creating maybe some rectangles some oval. Maybe we can create a few other shapes for navigation buttons. Well, now that we know what we want to do, let's get started here. So the very 1st step I'm gonna do is open up adobe Photoshop. And there's gonna create a new image. I'm gonna come right up here to a file new.
Bill Rosener: and I'm gonna go 300 pixels in width, 400 pixels in height, 72,
Bill Rosener: and create.
Bill Rosener: So now I've just got a white
Bill Rosener: image here we'll put our navigation buttons on. What you can find is a lot of times when working on a website, you want a consistent color.
Bill Rosener: and maybe I'll just go ahead and pick a shade of green here. So
Bill Rosener: and I, currently my foreground was set to blue. Maybe I come on down here and enter a color. And I could go with this number here. What you're gonna probably find is you've got a consistent color, and I'm just gonna go with 5, 8, 5, 5 shade of green here. So now I can make sure if I,
Bill Rosener: if I pick your all my navigation buttons, will have the exact same color there and press. Okay.
Bill Rosener: so the very 1st step I'm gonna do is create a new layer. So if I was to work right now I'd be working on the background layer and right down here under this is under the layers window. And to get, if you happen to ever close that
Bill Rosener: just simply press F. 7, or come up here to windows and show layers there.
Bill Rosener: So down here at the bottom, just to the
Bill Rosener: left of the trash can
Bill Rosener: is the create new layer icon. Go ahead and press on that. And that's going to create a blank layer.
Bill Rosener: Now, what I'm gonna do is I could come up here. I'm gonna use the rectangle more key, and if I wanted to.
Bill Rosener: I can drag out any size I want. But if I want to make sure all of my navigation buttons have the same like width or same height. I probably want to come up here and go to a fixed size, and maybe I'll go 150 pixels
Bill Rosener: and width and 50 pixels and height. And now I'm going to be guaranteed that all my
Bill Rosener: navigation buttons have the same client. I'm actually gonna go ahead and turn off the AI contacts task bar there.
Bill Rosener: Okay, so now, what I can do is just simply fill this. Come right up here to edit.
Bill Rosener: Go to Phil.
Bill Rosener: Foreground color and press. Okay.
Bill Rosener: okay, now, to kind of create that bevel and boss. Look, I can come right over here right click on it.
Bill Rosener: That was on layer one there, blending options.
Bill Rosener: And just choose Bevan and boss. So click once, and that is going to enable that, and then go ahead and you may have to click it.
Bill Rosener: Press the to the click, bar the checkbox, and then come over here and click, and maybe take a look at yours, and then maybe go and hit the reset reset to default. If it's looking kind of strange there.
Bill Rosener: Okay. So now, if I wanted to create another one, I can see
Bill Rosener: Since I've got my rectangle marquee to fix size, it's all ready to go, and I could just come right up here and edit film
Bill Rosener: foreground color and press. Ok.
Bill Rosener: if I wanted to get an over 1 1 way I could do that. Just come right up here.
Bill Rosener: Go to the elliptical marquee currently set to normal. But again I could I wanted to get them all the same size.
Bill Rosener: I could just simply change this from normal to fixed size and fill that. Anyway, let me just go ahead and fill this one edit fill
Bill Rosener: and press. Ok.
Bill Rosener: okay, I'm I'm gonna go ahead and put this back to the rectangle more key. And I'm gonna change this back to normal. Okay, what if I wanted to get some other shapes? I could come down here.
Bill Rosener: And right now it's set to a rectangle.
Bill Rosener: and I could come down, and I could choose a triangle tool if I wanted to.
Bill Rosener: and I could just simply go ahead and drag out a big old triangle.
Bill Rosener: And
Bill Rosener: you, you really good chance. You're gonna probably have to come up here and change the fill. And I'm gonna use that same color. I got that 5, 8 by 5, and then on the stroke, I made sure the stroke is off.
Bill Rosener: Okay?
Bill Rosener: And now what I'm going to do this is currently an object. I would want to simply right click on this object and rasterize it.
Bill Rosener: And if I now take this, I could repeat this. I've got 2 choices here I could come right over here.
Bill Rosener: I could right click and go to blended options. Repeat that with the Belvin emboss. But if I simply take this image. Take this layer and merge down.
Bill Rosener: Now, what's gonna happen is it's gonna take the Belvin and boss. It's now part of this layer, so I can see now, when I do the Belvin emboss, it's affecting the top shapes along with the triangle. Well, what if you wanted to create some other shape like a heart, for example. So you wanted your navigation buttons to be a bunch of hearts.
Bill Rosener: at which point you could press that right over here and choose on the custom shape tool.
Bill Rosener: and if I come up here
Bill Rosener: there's a really good chance. But by default, you're gonna just have some leaves, some animals, boats, flowers, etc, there. So again I came over here. I pressed on
Bill Rosener: oops.
Bill Rosener: so press and hold.
Bill Rosener: and actually so you if you see a little triangle down here. That means more options are available. So press and hold. And I'm gonna choose the custom shape tool. And again, if I came up here. I did a hard earlier. But you're gonna see that you probably don't have that.
Bill Rosener: So simply come over here. Whoops! Let me cancel this and close that over there. Simply come up to windows and go to shapes, windows, shapes.
Bill Rosener: and you're gonna see? Okay, I'm not finding very many shapes right here, but if you simply press up here, there's a little icon kind of looks like a hamburger that people call it. Go and press on that and go to legacy shapes and more.
Bill Rosener: Okay, so that little press, that little triangle and then add legacy shapes and more. And I'm just going to choose all legacy default shapes. Here. You can get arrows.
Bill Rosener: frames, light bulbs. Maybe you wanted some light bulbs on your website. But I'm gonna come right down here to shapes.
Bill Rosener: And if I wanted to, for example, create a star, I could simply
Bill Rosener: drag that out.
Bill Rosener: or if I
Bill Rosener: wanted, and same thing as what I did earlier. If I want to get that velvet embossed 1st step I'm going to do is right. Click on this layer and rasterize it. Convert into a bunch of pixels, and then I've got my choices. When let me do the hard way I'm going to. Simply right click on it. I'm going to go to blendin options.
Bill Rosener: I'm gonna choose Babylon and boss.
Bill Rosener: and it should have all the same settings and then press Ok, there.
Bill Rosener: Okay? And again, the other way was to simply merge down at which point it would be taken the bevel and boss on layer one there. Okay, let's assume I wanted to create a heart. I'd simply come right up here, go to legacy shapes and more
Bill Rosener: all legacy shapes.
Bill Rosener: Then I'm gonna come on down to
Bill Rosener: shapes.
Bill Rosener: and here's the heart
Bill Rosener: and oops.
Bill Rosener: I believe that one. Well, I'm gonna leave that one there unless it's a little bit bigger. It's gonna be kind of hard to get text on that one.
Bill Rosener: So one more time. Let me come right down up here.
Bill Rosener: I'm gonna choose the heart.
Bill Rosener: create a big old heart
Bill Rosener: and fills out.
Bill Rosener: Okay, now, I'm gonna right. Click on both the heart rasterize that layer
Bill Rosener: and also the star. I'm gonna right. Click on that and rasterize that
Bill Rosener: right now. These are on their own layer.
Bill Rosener: so I can move them around. But if I want to kind of save a little time on the Belvin and boss, I could right click on this one.
Bill Rosener: and I can merge down. So now I've got both these on the same layer, and so now, if I right click on it. And I go to blended options.
Bill Rosener: Melvin and boss, it's going to apply that
Bill Rosener: style to both layers at the same time there.
Bill Rosener: Okay, maybe the last step would be to add some a text. And to do that, I'm gonna use the type tool. I can see my font colors white. I'm just gonna go ahead and press right up here.
Bill Rosener: Button one, and maybe I'll decrease this font. Size a little bit here
Bill Rosener: and drag it over there.
Bill Rosener: Okay? And let me kind of
Bill Rosener: Well, I could repeat that, or what another thing I could do is simply hit. I can see button. One is my active layer. I can press control. J on the keyboard. That's control. J,
Bill Rosener: or I'll tell you about. Let me show you an on keyboard shortcut. If I take button one.
Bill Rosener: the layer and I drag it down to the plus sign here.
Bill Rosener: it's going to create a copy.
Bill Rosener: and now I can take button, one. Drag it down, I'm saying, saying I'm save much time here
Bill Rosener: and now. I can use my type tool
Bill Rosener: and change that one to a 2,
Bill Rosener: or maybe I could
Bill Rosener: come right over here and I could type an issue.
Bill Rosener: And again, I'll use the move tool and position that text.
Bill Rosener: So anyway, here's just a few ways, this video, one of a few ways to create some navigation buttons. We started off with some rectangles, and I would probably not be creating navigation buttons using rectangles. There's going to be more efficient ways using cascading style sheets. But if you want to start creating some, all the buttons, some triangles, some stars, some hearts kind of having some unusual navigation buttons. Then this would be the approach to take.
Bill Rosener: Anyway, I'll catch you in the next video. Thanks a lot. Bye.