Hey guys, Gerry Button coming at you with another fantastic Pixelmator tutorial. I saw this one as request on the Pixelmator tutorial form and I've decided. You know what? I’m going to help this guy. This is a nice glossy style menu within Pixelmator.
Now, it’s not the best effect, it’s not the best way or example of this, but it’s used to foot in the water show you how it could be achieved. Ready, let’s get started. Begin by opening Pixelmator and making an new image if you haven’t already.
I'm going to make the width 800 and the height is 600 and the resolution at 72. We are not going to make it 300 because this is a web document. We don’t need to print it, so it doesn’t need to be 300. Just click OK.
And when your canvass appears make sure you have move tool select it. I just do that by default; you don’t need to move to this like to move this-your canvass is around.
I'm going to move this to where we have the best screen where we all see it so we can see the edges here. It’s really a necessity but I just like to have it there so it makes me to think I'm working in photoshop or something. But, you know I love Pixelmator, so alright.
Let’s start by renaming the first layer on tone layer to base color. And then hit OK. Next, grab your mark key tool by hitting M in your keyboard or just select it in your tools pallet and make your selection near the top of the screen.
Now, remember we’re making a web menu bar, I glassy web menu bar and these don’t need to be too big guys. If you make it this big, it’s going to look ugly on your web site, and if you make it too small people are going to complain because they might not be able to read it. You need to make it a happy medium. So I'm going to make it about here. This is about a fair size don’t you think? Alright!
Now we’re going to need to make the color fort. And this is very simple. You’re going to use a gradient for this. Hit G on your keyboard, and you’re going to need to make a custom gradient to follow me. This is not very hard, trust me. I'm going to use my blue gradient. You have to do this, just double click on the gradient, and change it of. If you want to make it dark blue, we can increase the color. You know it go I like that you can see it changing over there. I'm not going to do that and you know it’s pretty simple.
Make sure, though it’s not set to this, the radio gradient make sure it’s set to the linear gradient and them click OK.
I’m going want the dark bottom. The dark on the bottom, and the light on the top, so go on from the bottom, and hold shift, and just drag up. But I've done it wrong already. I'm a foolish person. Drag it from the top, down to the bottom. So now the top is the later half. Take the selection away, and there you have the base color. I'm not going to remove this to the center of the document, so it’s been easier on my eyes to having look off of my screen rather than just looking straight.
Now, we’re going to make the shine for this. Now, I found that this is a little bit harder to do with the Pixelmator, but its going to change a similar effect that is fine by me. Create a new layer, and rename this one to of course, shine. Grab your selection tool, nope, your gradient tool rather, and command click the base layer where base color thumb nail in the layer’s pallet. So this brings up your nice little selection around the other object. Later on and shine.
Actually, we’re going to move this so get you’re marking tool, and then just pull this up to about right here. Now, get a brush tool and get a brush that’s about let’s say, I'm going to say anywhere from 35 to about 25 pixels in size, and I'm going to use 25 myself, and then click right here, and click all the audios right.
This will make the white line going right across the document or right across the selection. Now, this is too bright we are going to need to dim this down. So put it’s opacity at about let’s say 15%. And you’re starting to see the color we’re trying to achieve, the glossy look. It’s not that too glossy but hey; it’s better that nothing right? Make another new layer and call this light brush, then click OK. Get your brush tool, and make it even smaller. We’re going to make it about let’s say about 8, and then click OK. We don’t need to make the selection this time, so hit the brush tool. Make sure you have that selective course, silly me. Click right about here, and then drag with the shift keys select it, and go right down here. Have another nice little line, change the blending mode let’s say to color dodge, and it does nothing, put the opacity down to about 65 and then trace the planning mode to overlay. I don’t know why I think the stop lights, overlay. Alright! If you don’t like this position right here, you can’t freely or mean you can not you can’t. You can freely move it around if you want. Then it moves it up or you can move it down. I'm going to leave it there in the middle because that’s look nice as this.
Now make the final layer, call this top, and this is just a small shadow we’re going to put on the top. So hit x in your keyboard to bring the black to the foreground color, hit your brush tool and leave it about the same size. Command click the base color layer, and then on the top, just click once, hold shift and click over, and you’ll have this. Turn your mark key off, and let’s see change the opacity down to about 20. And change the blending mode if you wish to overlay. And you can invert the color if you want to see how it looks like. I'm going to actually see if I take that invert, and move it to the bottom it does nothing. Leave it on top.
You can change the way it’s all lay out if you like. If you don’t like the shines are hard shine, you can surely hit the eraser tool, and then just erase the size of it. Or erase the bottom so it smoothens out a little, and now, you have this. But personally don’t find that it gives all that nice of an effect. If you want, you can blur everything too. You know? I'm just going to blur it twice and then I'm going to hit a little more soft brush in the last filter. Command shift F those last filter, and then click OK.
Now, you have the background for the glossy style rep menu. It’s not too advanced. You know, it doesn’t look the best, but you know I'm also still learning Pixelmator. I can probably do this within photoshop and bit differently.
Why is keep making this selection if I don’t want it to.
Alright! Now, we’re going to make the actual menu style of the menu. This is actually your pretty quick process. So create a new layer, and call it Line. You’re going to need the colors of the actual bar, so get your eye dropper tool, and with the black color that you have selected, choose the dark blue hit X in your keyboard, to switch to the white as the foreground, and choose all light blue. That’s perfect.
Get your magnifying glass. Zoom into the selection of the screen, okay, to right about here. Hit B in your keyboard to get your brush tool, change your brush size, break down to one pixel, and your hardness at 100% then click OK. Bring the black or the dark blue to the foreground. Click hold shift, and drag down to get a line. Now, this is not the perfect line, so duplicate it twice to get a nice dark line. Okay, we’re going to call this dark line.
We’ll make a new layer, and call this Light line. Hit X again in keyboard to bring the lighter blue forward, D and now I’m going to get O shift. Make the nice line here for that one. Let’s go and move it up a little bit. Duplicate it twice, merges it together. If you want to know how to merge layers, it’s just simple step of command E. if you want to merge allayer, just click layer then hold shift up, and then he command E. But I don’t want to merge all these layers so I’m not going to do that.
Now, that you had the two lines made, take the lighter line and hit the arrow keys in your keyboard to move them over and align it with the actual blue layer, or the dark blue.
Now, we don’t need this top up here. And you know how we’re going to delete it? That’s right! We’re going to select the bottom layer, and inverse delete. First though, we’re going to actually merge our line together, so shift and select them both. Hit command E to merge some, and call this indent, and hit OK.
Hit command, click the thumbnail image in the layers box for the base color hit Edit, inverse, and then on the indent layer, hit delete and it will disappear. We’ll click it away.
Now, I don’t want this indent taking up the full image or riding the full bar. So we are going to erase the tops. Hit E on your keyboard to bring up the eraser, change the actual size, change the hardness down to about 34, and the dye under up to about 40 and hit OK. Come over here; click 1, 2, 3, 4, and 5. Come down here 1, 2, 3, 4, and 5. And I feel I want it in this position. You can move it on, just going to move it up right about there. Double click the magnifying glass and you have your indent. Excellent!
Move it to position, and then duplicate this many times as you need for as many, many menu objects as you need, and there you have it.
This is the simple way to make a glossy looking menu and say Pixelmator. And this is what it looks like fully cropped down with the few menu I coincide it.
Guys, thanks for watching! Stay tune for later, I'm going to be putting up an Adobe Illustrator, and Adobe Photoshop tutorial. There might be a photoshop tutorial again tomorrow as well, but I can’t guarantee it. Thanks for watching guys!
Transcription by:
Scribe4you Transcription Services