Well let us get started. First off browse your computer to where you have rainmeter installed and open the skins folder. Once in there create a new folder called Tutorial01. Next save these two images in the tutorial01 folder.

Doing this will put a tutorial01 skin option next time you load your rainmeter program or if it's already opened when you right click and refresh it with the tray icon. Though currently we only have 2 images to use but no file to tell rainmeter what to do with these images. So next we open up a text editor. You can use windows default notepad which should be located from the start button>program files>Accessories.

Once Open go ahead and save the file as tutorial01.ini in the tutorial01 skin folder. type it complete with extension so it saves as an .ini file. In some text editors you might have to put quotation marks around it in order to force it to save as. So type it as "tutorial01". Now with that out of the way lets get coding!
Ba
First at the top we want to go over some basic Rainmeter start codes so at the top we put

[Rainmeter]

Now everything we type under this will relate to this. So lets move on to the background image.

Background=bg.png

This of course will tell Rainmeter that you want to use bg.png as the background image or rainmeter. And if you save this now and start up rainmeter and choose to load the tutorialone skin you will see it load up this background although you will receieve and error about no meters which we'll get to later.

Next we can input

BackgroundMode=0

There are 4 different BackgroundModes.
0 = Displaying of the image you have set in the Background=
1 = Transparent/See through
2 = A solid color
4 = scaled background image

So lets go over each of these but first we might to add a meter in order to get rid of that no meter error message. Meters are basically ways to display information from measures like how much hard drive space you have, how fast you're uploading, what time it is, etc. It can also display images which is useful for skinning. So let us put up our first image meter.

[Smile] Meter=IMAGE X=15 Y=15 ImageName=object.png

First off we title our meter with a name in brackets. In this case we named it Smile. Next we specifiy what type of Meter we are doing. Simple Enough we are using a IMAGE meter. X reprsetns the horizontal placement of the meter meaning we move the image side to side. the Y represents the vertical placement of the meter meaning we move the image up and down. And the last should be easy to understand. We specifiy which image in the skin folder the ini file is in.

If you save the file you should see this.

Okay now that we have an Image meter over the background we can show some examples of background mode.

BackgroundMode=0 as said displays the Background image we specify. In fact you can just omit writing a BackgroundMode=0 and it'll still display as a background but you should strive to just go the extra step just for neatness. There is one more thing about BackgroundMode=0 though. Go to the Image Meter and change your X and Y to 215 instead of 15. Save and refresh the skin.

Where did the image go??!! Well BackgroundMode=0 Only lets you place visable items inside the backgrond space itself. If you go beyond the size of the background then it's out of the visable area. So how can this be used? Well maybe you want to make small tabs that are slightly visable on the side of your skin and when you mouse over them they come over into full view or when you click on them they move off the skin out of sight. Keep in Mind not everyone makes skins that might just be a small section in the corner of their screen. Some people make rainmeter skins that become their new desktop. Go ahead and change the X and Y of the object.png back to 15 and lets move on.

BackgroundMode=1 makes the background transparent. If you set this and save the ini the skin won't use the background we specified as Background=. Now you'll notice that only the object.png shows and if you try and drag you can only see a draggable outline box only around that image. Alot of skins tend to use this setting but keep in mind you want to realize what part of your skin is going to be on the very left edge. You want some part to be X=0 and Y=0 or you might end up with some empty space. Try changing your X and Y to 215 to understand what I mean. Now if you save and refresh and try and drag the item you'll notice a huge draggable box above and to the left of the image. If you try and drag it all the way to the very edge of the left side of your sceen you'll notice you can't move the object.png up against it. It'll be a bit over. It's because though there is empty space you made space there by putting an image over 215 and down 215. Try and keep your skins compact so the skin users can position the skin anywhere on the screen they want if need be by the skin size. Go ahead and change the X and Y back to 15.

BackgroundMode=2 is your solid color type. It'll create a solid color background behind your Meters. So if you again change it to a x and y 215 you'll notice the solid background covers the empty space. If you are using BackgroundMode=1 and watch to check your empty space you can use this method if you don't like trying to drag it around. I won't get much into them but there are other parts of BackgroundMode=2 that you can use like SolidColor. You have to enter the colors in an RGB with Alpha Format.

SolidColor="255, 255, 255, 255"

This will give you a solid color white background instead of the default color. RGB just means Red, Green, and Blue. The Numbers go from 0 - 255 so if I take it 255, 0, 0 instead I've made it all Red. While All 255 means white and all 0 means black. Now what about the alpha? Well alpha is your transparency or how much you want to be able to see through. So 255 is completely visable with no transparency while 0 means it's totally invisable. As for RGB colors you can use Paint Programs that show the RGB color codes. Windows default Paint has them also. Just double click on a color and then go into Define Custom Colors to see these.

Also if you use a search engine like http://www.google.com you might be able to find pages that list RGB color codes for you already. Along with SolidColor there is also SolidColor 2 which makes it too colors instead of one background color making a gradient. You can also specifiy the gradient angle with GradientAngle= You can write out the numbers as a degrees. 1-360 degree. Then you have BevelType= where you can specify 0-2. Play with it to see if it can work for you. Okay we move along again.

BackgroundMode=3 is a scaled image. Meanint it'll stetch your background image to where you positions your meters. So it's using bg.png once again and if you set the x and y to 215 you'll see it indeed goes the distance of the object.png. But this doesn't exactly show what is really going on. Keep the x and y at 215 and this time change the bg.png to be object.png. Save and refresh. As you can see the object.png has been stetched out very large. It also might not look as good as it does small so keep this in mind, if you create a nice background image but decide later it's not large enough to cover your meter space so you use BackgroundMode=3 to expand, that it might not look as good if you stetch it too much.

I really won't get into much else but the last 3 parts I'll mention are Author=, ";" and image layers. With Author= you can specify that you carete it and enter in your email or something so it shows up in the About box. As for ";" you can use this to put in comments and omit out lines of code. Like lets say you add in a SolidColor code but dont' want to see it for some reason while working on the rest of your skin. You can write it ;SolidColor= and it won't be used unless you remove the ";". You'll also find you can sepereate your ini file into sections with this. For Example like This.

;This is the Tutorial01 ;Rainmeter skin Created ;By Amfest [Rainmeter] Background=object.png BackgroundMode=3 SolidColor="255, 255, 255, 255" SolidColor2="0, 0, 0, 150" ;GradientAngle=170 Author=Amfest ;------------------------------------------ [Smile] Meter=IMAGE X=215 Y=215 ImageName=object.png

As you can see I put in some comments at the start of the skin. I've omitted the GradientAngle to not show. You can add options like these and make notes that if a User would like it this way they can just take the ":" out or add one in. And then I seperated my image meter with a line. Creating sections is a good way to keep yourself from being overwhelmed at a later time trying to search for everything.

Last is the layers in images. Rainmeter places the images in order as you go down the ini. So lets try it. Set the object.png back to x and y 15. Now we're going to make a new meter so at the end hit enter and make a gap and then add this.

[Smile2] Meter=IMAGE X=25 Y=25 ImageName=object.png

You should see that the 2nd object.png is overlapping the first instance of object.png. Keep this in mind if you want to have a window and then text appear over it. You want the image or information to be under the part you want to display it on.

This should give you the first basics of creating your clean skin ini and how to add images to skin a design of your liking. Though I used png images you can use jpg and bmp images. If the format you choose doesn't support an alpha channel you can use Pink color (255, 0, 255) to achieve transparecy. Well it says that in the help file if you click on skin config. Please read that section as it's mostly everything we've gone over though there is yet more but we'll cover that in a later tutorial.