I'd there seems to be a lot of threads about this but it doesn't seem there is a full-out guide to how to make a button with an image.
Now you *could* just put n invsible button behind an image, but there is a more higherquality way if you want to put the effort in.
Ok so here it is:
To start we will need a .tga image. It does not really matter what size, although you might want to keep a certain aspect ratio.
Here is the one I will use for this guide:
Ok now the reason why its the same thing only darker is this: For some reason when you use an image for an icon what happens is that it will only show the op half. And when you use the hover image in the button itself it also does some weird stuff. I'm not going to go into why, I'm only going to show you what I've found to work best.
Ok now, we will need 2 seperate actions to set this.
First: Make an action: dialog item type (button). This will have a field with a hover image field. Set that field to the .tga you aquired earlier.
Second: Make another action. This time to set the dialog item image. Set it to the same exact tga.
Now if you have both set like this, here is what will happen: When you look at it the image will be the bright one. When you click on it, it will turn to the dark one. This makes it look (in my opinion) a lot better than simply putting a hidden button behind an image. The images I'm using are tiny (like 20 kb un-compressed) so it looks pretty good. To make it better add a border to the top one and a darked border to the bottom one.
-Note: The actual pixel size of the image does not matter. It will be scaled to the button X and Y size values.
Hope it helps!
Rollback Post to RevisionRollBack
To post a comment, please login or register a new account.
Howdy guys,
I'd there seems to be a lot of threads about this but it doesn't seem there is a full-out guide to how to make a button with an image.
Now you *could* just put n invsible button behind an image, but there is a more higherquality way if you want to put the effort in.
Ok so here it is:
To start we will need a .tga image. It does not really matter what size, although you might want to keep a certain aspect ratio.
Here is the one I will use for this guide:
Ok now the reason why its the same thing only darker is this: For some reason when you use an image for an icon what happens is that it will only show the op half. And when you use the hover image in the button itself it also does some weird stuff. I'm not going to go into why, I'm only going to show you what I've found to work best.
Ok now, we will need 2 seperate actions to set this.
First: Make an action: dialog item type (button). This will have a field with a hover image field. Set that field to the .tga you aquired earlier.
Second: Make another action. This time to set the dialog item image. Set it to the same exact tga.
Now if you have both set like this, here is what will happen: When you look at it the image will be the bright one. When you click on it, it will turn to the dark one. This makes it look (in my opinion) a lot better than simply putting a hidden button behind an image. The images I'm using are tiny (like 20 kb un-compressed) so it looks pretty good. To make it better add a border to the top one and a darked border to the bottom one.
-Note: The actual pixel size of the image does not matter. It will be scaled to the button X and Y size values.
Hope it helps!