Post by ::Ellen:: on Sept 22, 2006 0:23:22 GMT
Step 1: Open up an image, and make it the width of your forum. The height should be between 25 and 30. For the purpose of this tutorial, we will use the height as 30px.
Image 1
Image 2
Step 2: Click on the gradient tool. (right click on the paint-bucket tool if you do not see it)
Image
Step 3: Open up the gradient editor menu. Put in the colors that you would like to use for the gradient. We will use 1d1d1d and 8f8f8f as ours.
Step 4: Now, do you see the field with the words "Custom" typed in already? Now you will type in the name you would like the gradient to be called. After you do this, click on the "New" button next to the field.
Image 1
Image 2
Step 5: Now, we are going to make sure we get an even gradient on the buttons and menu background. To do this, click on the fill tool (Paint Bucket). Now, fill in the entire canvas using it.
Image
Step 6: Now, open up the blending options menu for the layer. Go to "Gradient overlay." Since you already made your gradient, all you have to do is click on it in the gradients list.
Image 1
Image 2
Step 7: Now, save the image something like "Menu BG image" and you are done with the first part.
Image
Step 8: Next, we are going to make the buttons. First, open up a new file that is 30px in height and around 90px wide. (you can crop the width to fit later, this is just to make sure the word fits)
Image 1
Image 2
Step 9: Now, using the fill tool (paint-bucket) like before, we are going to fill the entire canvas with a dark gray, or other color.
Image
Step 10: Now, open up the blending options for the layer with the gradient. Go to the Gradient Overlay box, like before. Now, since you already made the gradient before, just click on it and click ok. Now your button gradient matches your menu background gradient perfectly.
Image 1
Image 2
Step 11: Now all we have to do is add the text for the particular button, and it now resembles what it should!
Step 12: It looks a bit big though, doesn't it? If so, we can just use the cropping option to get rid of blank space. (Use the rectangular marquee tool to select only what you want as the button, and go to image-->Crop and get rid of the rest)
Now you have a good looking button!
Image
Experiment now. Try adding little extras, like dividers and text effects to improve the look!
Created by ~CrAzY~ and Ellen
Image 1
Image 2
Step 2: Click on the gradient tool. (right click on the paint-bucket tool if you do not see it)
Image
Step 3: Open up the gradient editor menu. Put in the colors that you would like to use for the gradient. We will use 1d1d1d and 8f8f8f as ours.
Step 4: Now, do you see the field with the words "Custom" typed in already? Now you will type in the name you would like the gradient to be called. After you do this, click on the "New" button next to the field.
Image 1
Image 2
Step 5: Now, we are going to make sure we get an even gradient on the buttons and menu background. To do this, click on the fill tool (Paint Bucket). Now, fill in the entire canvas using it.
Image
Step 6: Now, open up the blending options menu for the layer. Go to "Gradient overlay." Since you already made your gradient, all you have to do is click on it in the gradients list.
Image 1
Image 2
Step 7: Now, save the image something like "Menu BG image" and you are done with the first part.
Image
Step 8: Next, we are going to make the buttons. First, open up a new file that is 30px in height and around 90px wide. (you can crop the width to fit later, this is just to make sure the word fits)
Image 1
Image 2
Step 9: Now, using the fill tool (paint-bucket) like before, we are going to fill the entire canvas with a dark gray, or other color.
Image
Step 10: Now, open up the blending options for the layer with the gradient. Go to the Gradient Overlay box, like before. Now, since you already made the gradient before, just click on it and click ok. Now your button gradient matches your menu background gradient perfectly.
Image 1
Image 2
Step 11: Now all we have to do is add the text for the particular button, and it now resembles what it should!
Step 12: It looks a bit big though, doesn't it? If so, we can just use the cropping option to get rid of blank space. (Use the rectangular marquee tool to select only what you want as the button, and go to image-->Crop and get rid of the rest)
Now you have a good looking button!
Image
Experiment now. Try adding little extras, like dividers and text effects to improve the look!
Created by ~CrAzY~ and Ellen
