It is currently March 28th, 2024, 11:48 am

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 »

I'm not sure how to make it more clear. I know we have a language issue here, but I can only talk about this in Photoshop terms and hope you understand.

Create an image that is three times the width of the individual images you want for the icon. So if you have a firefox image of 50 pixels wide by 50 pixles high, create a new blank image 150 pixels wide by 50 pixels high. Make sure it has a transparent background.

It is important that you have a basic understanding of how "layers" work in Photoshop. You need to know how to create a layer, how to select it from the "Layers Panel" on the lower right of the screen, and how to move a layer by selecting the layer and then selecting the "Move Tool" from the tools left sidebar and moving the layer with the mouse or arrow keys.

Now create three layers on this image. On the first layer create or paste your 50x50 icon image. Move this to the far left of the overall image and name the layer "UP". On the second layer create or paste another 50x50 image for the down state of your button. Move this layer to the middle of the overall image and name it "DOWN". On the third layer, create or paste another 50x50 image for the over state of your button. Move this layer to the far right of the overall image and name it "OVER".

Now save your entire image as a .png file. When you use it as a button test it by hovering and clicking it. If any of the "states" cause the icon to move, go back to photoshop and move the layer for the button state (UP, DOWN, or OVER) a pixel or two to the right or left or whatever is needed. Save as a .png again... Test it. Do this until it works the way you want.

This is the best I can do my friend. I hope you are using Google Translate or something if you are struggling with my English. I just don't know how to be any clearer and still be accurate.

My problem is I am not quite sure if you know Photoshop really well but are having trouble with English, or get the English just fine but don't understand Photoshop. ;-)
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Creating Buttons

Post by jsmorley »

I almost hesitate to mention this, as I have a feeling we may be going down a rabbit hole, but you do realize that there is no visible difference in the images you are using for "up" "over" and "down" and so there is really just no reason to use a Meter=Button in the first place?

You could just as easily use a single 50x50 firefox.png image and a meter like this:

[FireFoxLauncher]
Meter=Image
ImageName=firefox.png
LeftMouseUpAction=!Execute ["C:\Program Files\Mozilla Firefox\firefox.exe"]

And that is all you need...
Kaifas
Posts: 11
Joined: March 21st, 2010, 5:00 pm

Re: Creating Buttons

Post by Kaifas »

jsmorley wrote:I almost hesitate to mention this, as I have a feeling we may be going down a rabbit hole, but you do realize that there is no visible difference in the images you are using for "up" "over" and "down" and so there is really just no reason to use a Meter=Button in the first place?

You could just as easily use a single 50x50 firefox.png image and a meter like this:

[FireFoxLauncher]
Meter=Image
ImageName=firefox.png
LeftMouseUpAction=!Execute ["C:\Program Files\Mozilla Firefox\firefox.exe"]

And that is all you need...
Oh yeah :))) I searching this along time, but find only this tutorial, so this code is realy good for me.. :) Thank you very much.

EDIT: And maybe you can tell me why don't work this
[MeterBackground]
Meter=IMAGE
X=150
Y=0
W=100
H=100
SolidColor=0,0,0,1
SolidColor2=0,0,0,1
GradientAngle=45.0
HIdden=0

[FireFoxLauncher]
Meter=Image
X=0
Y=0
ImageName=firefox.png
LeftMouseUpAction=!Execute ["C:\Program Files\Mozilla Firefox\firefox.exe"]
I want that if i push on my icon so with my cursor i can push in where i want on icon, because now if icon for example firefox, i must push on icon, if i push near icon so don't work this config. I think you understand what i want.

For example i want make word with link.

So i made this:
[MeterBackground]
Meter=IMAGE
X=-10
Y=-10
W=120
H=180
SolidColor=0,0,0,1
SolidColor2=0,0,0,1
GradientAngle=45.0
HIdden=0

[MeterText]
Meter=STRING
X=5
Y=2
FontColor=255, 255, 255, 180
FontColor2=255, 0, 0, 180
FontColorGradient=50%
StringStyle=NORMAL
FontSize=12
StringAlign=Left
FontFace=Base 02
AntiAlias=1
Hidden=0
Prefix="FireFox"
LeftMouseDownAction= !execute ["C:\Program Files\Mozilla Firefox\firefox.exe"]
And its work, if i don't add this "[MeterBackground]", so i must push on character, if i push between character, so it is like i push on blank desktop. :) So now i think you exactly understand what i want.

EDIT EDIT: I want that i can push on all my icon size for example 40 x 40, that where i want where i push on that 40x40 icon. :)
And what i must write that i can click one time and program open, because now i must click 2 times...
dragonmage
Developer
Posts: 1270
Joined: April 3rd, 2009, 4:31 am
Location: NC, US

Re: Creating Buttons

Post by dragonmage »

For String Meters you need to add SolidColor=0,0,0,1

Code: Select all

[MeterText]
Meter=STRING
X=5
Y=2
SolidColor=0,0,0,1
FontColor=255, 255, 255, 180
FontColor2=255, 0, 0, 180
FontColorGradient=50%
StringStyle=NORMAL
FontSize=12
StringAlign=Left
FontFace=Base 02
AntiAlias=1
Hidden=0
Prefix="FireFox"
LeftMouseDownAction= !execute ["C:\Program Files\Mozilla Firefox\firefox.exe"]
That creates an invisible box behind your text and allows you to click anywhere in the text area.
Kaifas
Posts: 11
Joined: March 21st, 2010, 5:00 pm

Re: Creating Buttons

Post by Kaifas »

dragonmage wrote:For String Meters you need to add SolidColor=0,0,0,1

Code: Select all

[MeterText]
Meter=STRING
X=5
Y=2
SolidColor=0,0,0,1
FontColor=255, 255, 255, 180
FontColor2=255, 0, 0, 180
FontColorGradient=50%
StringStyle=NORMAL
FontSize=12
StringAlign=Left
FontFace=Base 02
AntiAlias=1
Hidden=0
Prefix="FireFox"
LeftMouseDownAction= !execute ["C:\Program Files\Mozilla Firefox\firefox.exe"]
That creates an invisible box behind your text and allows you to click anywhere in the text area.
Thank you man ;) SolidColor=0,0,0,1 this solve my problem... ;)

And one more thing, what i must write that when i click one more time config do this: LeftMouseDownAction= !execute ["C:\Program Files\Mozilla Firefox\firefox.exe"][/code]

because now i must click twice.
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Creating Buttons

Post by jsmorley »

If you replace

LeftMouseDownAction= !execute ["C:\Program Files\Mozilla Firefox\firefox.exe"]

with

LeftMouseUpAction= !execute ["C:\Program Files\Mozilla Firefox\firefox.exe"]

I assure you it works with one click. LeftMouseDownAction should work as well, but is more sensitive to you "moving" the mouse while holding the button down. I find LeftMouseUpAction works better for making image "buttons".
Kaifas
Posts: 11
Joined: March 21st, 2010, 5:00 pm

Re: Creating Buttons

Post by Kaifas »

jsmorley wrote:If you replace

LeftMouseDownAction= !execute ["C:\Program Files\Mozilla Firefox\firefox.exe"]

with

LeftMouseUpAction= !execute ["C:\Program Files\Mozilla Firefox\firefox.exe"]

I assure you it works with one click. LeftMouseDownAction should work as well, but is more sensitive to you "moving" the mouse while holding the button down. I find LeftMouseUpAction works better for making image "buttons".
Thank you its work. But i replace my: LeftMouseUpAction= !execute ["C:\Program Files\Mozilla Firefox\firefox.exe"]
to this:
LeftMouseDownAction= !execute ["C:\Program Files\Mozilla Firefox\firefox.exe"]
And i have one click :)

Again thank you very much... With icon i'm finished :)
crumpie
Posts: 2
Joined: June 6th, 2010, 8:21 pm

Re: Creating Buttons

Post by crumpie »

hi there.. do you think it is possible for a moving icon when we hover over it?

lets say up is a ball, when we hover it spins, and down it gets squashed

random example but i hope u get what i mean :S
dragonmage
Developer
Posts: 1270
Joined: April 3rd, 2009, 4:31 am
Location: NC, US

Re: Creating Buttons

Post by dragonmage »

That's possible.
crumpie
Posts: 2
Joined: June 6th, 2010, 8:21 pm

Re: Creating Buttons

Post by crumpie »

using photoshop?
Post Reply