I thought I would do a quick tutorial on how to use Rainmeter to build one of these popular dock / application launcher skins.
First off, my general approach. What I do is use Rainmeter's "Buttons" for the dock. There are other ways to accomplish this, but I find that using buttons for this purpose is somewhat easier to build, gives you the "animations" without a ton of .ini code and hiding/unhiding meters, and you end up with elements that can easily be used in variations of your dock without a lot of changes.
We are going to end up with this:
The basics are:
1. Choose a graphics program to create some image elements for the dock. Photoshop works great, but so will The Gimp, Paint.Net or any other graphics program which will create "layers". It can be done without layers, but it's MUCH easier with.
2. Create a "background" for your dock. This can be anything you want.
3. Create one "button" which will be used multiple times behind each of the icons you want on your dock.
4. Gather the "icons" you want to use for your dock. These can be .png, .gif or even .ico images, but you want to use a format which has the ability to have a transparent background.
4. Create shortcuts to the applications you want to run and / or the folders you want to open.
5. Put the pieces together in a skin .ini file and off you go...
Let's do it...
The "Graphics"
First the "background". I won't go into much detail on this, it doesn't really matter what you use, as long as it looks good to you and is big enough to hold the buttons and icons you want.
I just did a quick background with a "rounded rectangle" shape and a gradient color in Photoshop.
Now let's create that "button" we will use over and over again for our dock.
First, there is a much more comprehensive guide on creating buttons at http://forum.rainmeter.net/viewtopic.php?f=15&t=124. Take a look there and make sure you understand the concept.
So we need to create the button, which will be a .png image containing THREE copies of our button arranged horizontally. I used Photoshop and first created a single version of my button on a transparent layer. I just drew a circle and used a color overlay to make it a nice orange brown color. Then I did a "bevel and emboss" to raise it up a bit and make it look like a button. This is going to be my "UP" state for the button.
Now we need to create the "DOWN" and "OVER" states for the button, so that we have all three states in one image. I created a new image, THREE TIMES as wide as that first button image. I had made the button image 50x50, so my new image is 150x50. Copy the button layer from the first image onto the new one.
You can also just use the original file and in Photoshop expand the "canvas" of the image to 150 wide. Either way...
Then I made two more copies of that layer containing my button, and changed each of them to reflect what I wanted for my "DOWN" and "OVER" states. I decided to lighten the color of the button for the "OVER" state, to "light it up" when you hover over it, and to reverse the "bevel and emboss" for the "DOWN" state, to make it look like the button has been "pushed".
Ok, save that button file as DockButton.png and WHEW! We are all done with graphics...
The "Skin"
Ok, let's build a skin. Start with the basics:
Code: Select all
;=================================================
; Rainmeter configuration file
; Updated June 25, 2009
;=================================================
;[BEGIN CONFIG FILE]==============================
[Rainmeter]
Author=Jeffrey Morley
Update=100
Code: Select all
[Variables]
LINKS="C:\Program Files\Rainmeter\Skins\MyDock\Links\"
Code: Select all
[MeterBackground]
Meter=IMAGE
X=0
y=0
W=242
H=65
ImageName=images\DockBack.png
Code: Select all
;[BUTTONS]====================================
[MeterCOMPUTER_BUTTON]
Meter=BUTTON
X=15
Y=8
ButtonImage=images\DockButton.png
ButtonCommand=!Execute ["#LINKS#computer.lnk"]
[MeterCDRIVE_BUTTON]
Meter=BUTTON
X=5R
Y=8
ButtonImage=images\DockButton.png
ButtonCommand=!Execute ["#LINKS#cdrive.lnk"]
[MeterDOCUMENTS_BUTTON]
Meter=BUTTON
X=5R
Y=8
ButtonImage=images\DockButton.png
ButtonCommand=!Execute ["#LINKS#documents.lnk"]
[MeterFIREFOX_BUTTON]
Meter=BUTTON
X=5R
Y=8
ButtonImage=images\DockButton.png
ButtonCommand=!Execute ["#LINKS#firefox.lnk"]
As you can see, the meat and potatoes of this skin is the "ButtonCommand" statements on each button. This tells the skin to go find the shortcuts you created and put in "C:\Program Files\Rainmeter\Skins\MyDock\Links\" and run the shortcut when the button is clicked.
Code: Select all
;[ICONS]=======================================
[MeterCOMPUTER_ICON]
Meter=IMAGE
X=21
Y=15
H=32
W=32
ImageName=Images\icon_computer.png
[MeterCDRIVE_ICON]
Meter=IMAGE
X=24R
Y=15
H=32
W=32
ImageName=Images\icon_cdrive.png
[MeterDOCUMENTS_ICON]
Meter=IMAGE
X=24R
Y=15
H=32
W=32
ImageName=Images\icon_documents.png
[MeterFIREFOX_ICON]
Meter=IMAGE
X=21R
Y=15
H=32
W=35
ImageName=Images\icon_firefox.png
The buttons will fire even though you are clicking on the icons on top of them, as the icons have no "action" associated with being clicked, so the click passes through and is handled by the buttons.
And as I said, we end up with this:
And you can download the skin we just created here, complete with the photoshop .psd and .png files and everything you need to start building your own!
ftp://uzaeagle.serveftp.com/rainmeter/mydock/MyDock.zip