It is currently March 28th, 2024, 4:22 pm

Creating Buttons

Tips and Tricks from the Rainmeter Community
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Creating Buttons

Post by jsmorley »

There is one other solution to the issue of creating the bitmap.

If you have three .png images that are the same size, you can automatically create a bimap .png image out of them with a tool called ImageMagick.

http://www.imagemagick.org/script/index.php

All you need to do is download and install ImageMagick, or use the "portable" version of it, and do the following at a cmd.exe command line:

"C:\PathToImageMagick\convert.exe" -append OffImage.png DownImage.png OverImage.png ButtonImage.png

That will append the three images into one correctly spaced single ButtonImage.png that is perfect for a Button meter.
Off.png
Down.png
Over.png
convert -append Off.png Down.png Over.png ButtonImage.png
ButtonImage.png
test.gif
Ao Nuu Shin
Posts: 128
Joined: May 2nd, 2015, 9:13 am

Re: Creating Buttons

Post by Ao Nuu Shin »

Guys, i have to be honest....i don't get it at all. I'm worse than a noob. I have difficulties on creating this, and i must do this, else i'll never learn. I'm searching for a video, a solution, smth to show it to me. I know the process so and so, but to create images and put them together....that's a whole lot different story for me, even though i got photoshop. :/ this is the image i want to make...it's a two image, not three, so i bet the code must be a little simpler?

This is the first time i am in a forum and being helped by people so much, i think i owe you just for talking with me. Sadly....i guess i'm too stupid to understand. Also, english is not my native language, and there are some words i don't quite get. XD thanks a lot for your help.
Attachments
Chrome Icon6.png
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Creating Buttons

Post by jsmorley »

Ao Nuu Shin wrote:Guys, i have to be honest....i don't get it at all. I'm worse than a noob. I have difficulties on creating this, and i must do this, else i'll never learn. I'm searching for a video, a solution, smth to show it to me. I know the process so and so, but to create images and put them together....that's a whole lot different story for me, even though i got photoshop. :/ this is the image i want to make...it's a two image, not three, so i bet the code must be a little simpler?

This is the first time i am in a forum and being helped by people so much, i think i owe you just for talking with me. Sadly....i guess i'm too stupid to understand. Also, english is not my native language, and there are some words i don't quite get. XD thanks a lot for your help.
Do you have those two images as separate .png files you can attach? That would make it easier to help you using the actual image(s) you want.

Let me see if I can explain.

The way a Button meter works is that it uses the image you define in ButtonImage.

What is does in effect is equally divide that image into 3. It uses the first 1/3 for the "off" state of the button, the second 1/3 for the "down" state of the button, and the third 1/3 for the "over" state of the button.

So the key to this whole thing is that you MUST have an image that when divided into three equal parts displays the matching 1/3rd of the image you want for the state of the button.

You can't have a ButtonImage that has only two states. That image you posted just won't work as a button. When the meter divides that image into 3 equal parts, you get just chopped off pieces of the image used as the different states.
test.gif
So what you need to do is have that same image, but with one more "icon" in it, equally spaced with the two you have now. The new bit you add can just be a copy of one of the others, as while a button image MUST have 3 states, nothing says they have to be different looking.

Here are some example images:
ChromeButton.png
ButtonBitmap.png
button.png
Each of these have 1/3rd of the image for "off", "down", "over" in that order.

I strongly believe that since you only need two "states" for your button anyway, you are a prime candidate to use an Image meter with mouse actions, rather than a real Button meter. We can touch on that after we solve your "button" issue.
Ao Nuu Shin
Posts: 128
Joined: May 2nd, 2015, 9:13 am

Re: Creating Buttons

Post by Ao Nuu Shin »

Hmmm....I think I understand better now. Yeah, I have these two divided, and i can just select one of these two to be the third image in order to work, right? So, in this case, I just need to create a banner on Photoshop, with the three images together in the same height/width. Right? Okay, in this case, I will try to use the noglow image as idle, the glow image as mouse over, and again the glow image is a mouse action button. Is that possible?
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Creating Buttons

Post by jsmorley »

Ao Nuu Shin wrote:Hmmm....I think I understand better now. Yeah, I have these two divided, and i can just select one of these two to be the third image in order to work, right? So, in this case, I just need to create a banner on Photoshop, with the three images together in the same height/width. Right? Okay, in this case, I will try to use the noglow image as idle, the glow image as mouse over, and again the glow image is a mouse action button. Is that possible?
Yes, exactly.
Ao Nuu Shin
Posts: 128
Joined: May 2nd, 2015, 9:13 am

Re: Creating Buttons

Post by Ao Nuu Shin »

Ok, off to do it, i put them together, and for some reason there almost the three together with a white bg. XD I think I forgot smth. hahaha maybe i need to erase the canva.... XD
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Creating Buttons

Post by jsmorley »

Ao Nuu Shin wrote:Ok, off to do it, i put them together, and for some reason there almost the three together with a white bg. XD I think I forgot smth. hahaha maybe i need to erase the canva.... XD
Be sure you start with a transparent background on the image, and when you save it, be sure to save as .png and not .jpg.
Ao Nuu Shin
Posts: 128
Joined: May 2nd, 2015, 9:13 am

Re: Creating Buttons

Post by Ao Nuu Shin »

I did just that, erased the white bg, only the canvas is here, i have the three icons together, and when i refresh the image, it seems whole, with a half more image beside it, and it's kinda like static. I'm afraid I don't know what to do now...i'm stuck..
Ao Nuu Shin
Posts: 128
Joined: May 2nd, 2015, 9:13 am

Re: Creating Buttons

Post by Ao Nuu Shin »

This is the image now. I don't understand why isn't it working though. XD
Attachments
newchromeicon2.png
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Creating Buttons

Post by jsmorley »

Ao Nuu Shin wrote:This is the image now. I don't understand why isn't it working though. XD
The problem is with the spacing.
1.png
See how the first one is way to the left, then the second one is centered, and the third one is way to the right.

Each of the icons needs to be centered in the 1/3 of the image they "own".
Post Reply