How To Make Transparent Buttons
So you seen those cool trendy buttons people make, this tutorial will show you the basics on making one, the rest is up to your imagination.
Open the button you want to use in Adobe, I'm going to make this button match my layout I have right now, and I'll make a standard sized 88x31 button.
- What you will need is to either open up your image for the layout or a portion of it if you sliced it up, as long as the size is a bit bigger than the button.
- I'll be using this image to make the button, make sure that the image you use is either a .GIF or .JPG, DO NOT USE A PSD.
- Go to your Tools Palette, and select the Crop Tool
, at the top of your tool bar you will see two small boxes, you will type in 88px and 31px, that is the size you need for this button. You can only do this if you select the Crop Tool.
- Using the Crop Tool, drag across the image you opened up, try to get an area with no text because your going to add that later. Double click and it will cut a perfect 88x31 size area for you.
- Now its beginning to look like a button, okay what we are going to do is add some transparent areas, this is where your imagination comes into play.
- First you will need to duplicate the layer by going to your Layers Palette, right click on the background layer, and Duplicate it. It's a good idea to zoom in to about 500 at this point to see the button better, you can go to the Navigator to do that, if you don't have that up then go to Window >> Navigator.
- Now that you duplicated it, you will drag your background layer down to the trash can.
- On your Tools Palette, select your Rectangular Marquee Tool
and select an area you would like to make transparent.
- Okay if you got the area you want to make tranparent, then hit the DELETE button on your keyboard and it will delete that area.
- Now that you have all the areas deleted that you want were going to give it an black border, so the areas that are transparent will look all neat.
- TIP: when you make your selection, instead of Deselecting because you made it on the wrong spot, just drag it to the area you want the deleted area to be. Much easier then deselecting and reselecting!
- Using the Rectangular Marquee Tool and zooming in ALOT like 800 or so, use the tool to make a selection around the edges, 1pixel, so it would be the smallest width it will allow you to do, thats how you know its a 1pixel.
- Then go to Edit >> Stroke and on the pop up make sure you select the color you want the border to me, most people use black but its your button so its YOUR choice, I'm going to use black. Do that for the whole button all areas in where you deleted to make it transparent.
- This is what I have so far, it's kind of crappy but you get the idea!
- Now you can add text, at this point depending on what you made transparent is what will determine what your text will be. If you left large areas transparent to add little blocks to animate later thats cool, or you can make your font animated. It's all up to you.
- Time to save it as a .GIF you always MUST go to Save >> Save For Web with the transparency button checked to make sure it saves as a .GIF and its transparent, otherwise it will not be transparent.
- Thats it your done making your cool trendy transparent link button.
back