This tutorial is for making skins for versions 3.x and 4.x of the Protractor. We are happy to host your completed skins on Iconico.com with your name and a link to your site. Visit our current skin library.

To make a skin you'll need a free afternoon, a copy of Photoshop, or other image editor, and a text editor like Notepad. To set things up open the skins folder: C:/Program Files/Screen Protractor 4.0/skins and make a new subfolder, giving it the name of your skin. In that folder you'll put all of your skin files.

Your skin consists of one .ini file which is the configuration file for your skin containing all the measurements. Name that file with the name of your skin. You'll also place your image files in that directory. Version 4.x of the Protractor for Windows supports semi-transparent ".png" graphics. Version 3.x only supports bitmaps ".bmp", which will also work on version 4. You can make one version of your skin for version 3.x and another for version 4.x if you want.

Windows skins for version 4.x can be made by creating a zip file contining your ini file and images. Simply rename the file extension to .protractorskin and doubleclick to install into the Protractor skin folder.

If you run into trouble please contact us, we're happy to help.

The easiest way to start a skin is to use one of the existing skins that comes with the program. We'll be using the Base Skin throughout this tutorial. Make a copy of the 'default' folder and move it into the 'skins' folder. Rename the folder 'NewSkin' and we'll begin working. With the Protractor open you can press 'R' at any time and the skin will be reloaded. You will be able to select your new skin from the Protractor menu.

In your 'NewSkin' folder you will see an .ini file which you can edit with any text editor. The ini file is made up of several sections. The first is the 'General' section. This contains information about the skin such as the name and who created it. This information shows up in the 'About this Skin' dialogue box. Below is an example 'General' section.

[General]
Name = Ring
Author = Nico
Description = Metal ring with degree markings
Contact = [your email here]
Site = www.iconico.com
Version = 2
ProtractorVersion = 4

The name is the name of the skin (this name shows up in menus). The Version is the Version of the skin, the ProtractorVersion should be set to equal 3 or 4 depending on what version you are building for.

Go ahead and change the Name to 'NewSkin', save the file and press 'R' with the Protractor open and the new name will appear in the skin menu when you right-click on the Protractor.

Once you've completed the 'General' section with your information you'll need to add a 'Main' section. This sets up some of the colors and the fonts used for the Protractor. All colors are stated in hexadecimal, just like web colors are specified.

[Main]
TransColor = ff00ff
BleedColor = 787878
ButtonBleedColor = 666666
SlideAColors = 0E35C7, 800000, 7BA5B7, F5F5F5, AEAEAE, 000000
SlideBColors = 800000, 7BA5B7, 0E35C7, F5F5F5, AEAEAE, 000000
FontFace = Arial
FontSize = 14
FontBold = 0
FontItalic = 0
FontColor = 000000
FontColorBack = ffffff

The TransColor is the color of transparent pixels in your skin's bitmaps. In the example above white is used, but it might be more useful to choose ff00ff (unless you are making a bright pink skin). Color any area on your skin bitmap with this color and it will be transparent - you can even make holes in your skin! If you are using a .png graphic then this value is not used.

The BleedColor and ButtonBleedColor are used especially during rotation when the skin is set at it's highest Quality. The BleedColor controls which color will be mixed with the edge pixels to provide a smooth outline. Similarly the ButtonBleedColor is used to smooth the edges of the buttons. In version 4 these values are no longer used as the Protractor automatically smoothes the edges, so only specify them if you want to make your skin for version 3.

The SlideAColors and SlideBColors are used to cycle colors on the color bars. Specify any number of colors you wish.

The FontFace is the font that will be used to report the distance. Please choose a common font as some users might not have a strange or unusual font installed on their computer. FontSize is the height in pixels of the font. FontBold and FontItalic are 0 for false and 1 for true. FontColor is obviously the font's color. Don't worry too much about these settings until you're all done and then come back and tweak them a little. When tweaking please be sure that there is enough room to display large angles and it's wize to leave extra room for custom units. FontColorBack is used to smooth the font edges, similar to ButtonBleedColor.

This section defines the main rectangles for your Protractor's Base (the central part and the Slides (the parts that rotate). Note that you don't need to create a vertical image or vertical section in the ini file, 'Horizonatal' is just a section name.

Below is the first part of the 'Horizontal' section for the test skin.

[Horizontal]
Image = 			default.png
BaseRect = 		14, 65, 141, 141
BaseCenter = 		84, 135
BaseEdge = 		4
SlideRect = 		174, 110, 110, 57
SlideBRect = 		224, 160, 110, 57
SlideCenter = 		175, 138
SlideEdge = 		1
CurveEdge = 		15

The Image is the name of the image file for your skin. This must be in the same folder as the ini file.

The BaseRect and SlideRect are the coordinates that define the two main rectangles of the skin. These are given as (left, top, width, height), relative to the top left of the bitmap. The BaseRect defines the area for the central part of the Protractor. The SlideRect defines the area for the two rotating sliders. You'll notice that the SlideRect area is used for both sliders so they appear identical.

You can position the Base and Slide rectangles at any point on your bitmap, just be wary over overlaps and try to leave space between elements.

The BaseCenter gives the co-ordinates of the center of rotation for the Protractor. In your design you may want to include a transparent center so users can accurately align their protractor perfectly. The BaseEdge number specifies how many pixels the measurement bars are offset from the center of the Protractor. You can specify '0' if you want the lines to go to the center.

The SlideCenter specifies the co-ordinate of the point where the bar should extend to. When building a skin you should always orient the slide so this point is on the left and the slide is horizontal. The SlideEdge specifies the number of pixels offset to the left for the bar. A value of '1' or '2' may look visually better than '0', experiment and see what works best for you.

CurveEdge is new for version 4 and specifies how many pixels out the small curved angle is drawn that connects between the sliders.

Once you have these measurements ready for your image you should try and see if the skin works. You may be a few pixels off (check for overlap when the Protractor is set at different angles).

You can add as many or as few buttons as you wish on your skin, simply specify the positions.

SizeRect =		55, 84, 60, 13, 0

CloseRect =		57, 160, 13, 13, 0
MenuRect =		99, 160, 13, 13, 0

ColorSlideARect =	70, 167, 13, 13, 0
ColorSlideBRect =	86, 167, 13, 13, 0

AngleMinusARect =		124, 130, 11, 11, 1
AngleARect =		134, 130, 11, 11, 1

AngleMinusBRect =		124, 130, 11, 11, 2
AngleBRect =		134, 130, 11, 11, 2

The previous lines define the areas for the Protractor buttons. The last parameter is either 0, 1, or 2 defining whether the button is placed on the Base(0), on the first Slide(1), or on the second Slide(2). The buttons do not have to be drawn on the bitmap in these positions, you can use these coordinates as placeholders and define the bitmaps for the buttons later.

The first line is the SizeRect rectangle which defines the area in which the measurement is reported. This area will not be filled in or colored, it just marks where the text will appear. This is defined just like the buttons rectangles are.

To finish off the buttons you may specify 'Over' images (for when the mouse moves over the image) and also 'Down' images for when the mouse is clicked. These are all optional and are defined just like the buttons in the 'Horizontal' section. All these coordinates are given relative to the top-left of the bitmap.

As mentioned above you may optionally specify a HorizontalControls section. This for when you want to use the initial button coordinates as placeholders.

[HorizontalControls]
CloseRect =		57, 37, 13, 13, 0
MenuRect =		99, 37, 13, 13, 0

ColorSlideARect =	70, 44, 13, 13, 0
ColorSlideBRect =	86, 44, 13, 13, 0

AngleMinusARect =		444, 22, 11, 11, 1
AngleARect =		444, 40, 11, 11, 1

AngleMinusBRect =		444, 22, 11, 11, 2
AngleBRect =		444, 40, 11, 11, 2


[HorizontalControlsOver]
CloseRect =		489, 157, 13, 13, 0
MenuRect =		533, 157, 13, 13, 0

ColorSlideARect =		502, 163, 15, 15, 0
ColorSlideBRect =		518, 163, 15, 15, 0

AngleMinusARect =		484, 22, 11, 11, 1
AngleARect =		484, 40, 11, 11, 1

AngleMinusBRect =		484, 22, 11, 11, 2
AngleBRect =		484, 40, 11, 11, 2


[HorizontalControlsDown]
CloseRect =		490, 137, 13, 13, 0
MenuRect =		532, 137, 13, 13, 0

ColorSlideARect =	503, 144, 13, 13, 0
ColorSlideBRect =	519, 144, 13, 13, 0

AngleMinusARect =		524, 22, 11, 11, 1
AngleARect =		524, 40, 11, 11, 1

AngleMinusBRect =		524, 22, 11, 11, 2
AngleBRect =		524, 40, 11, 11, 2

You'll probably want to position these button images off to the right of the other images on your bitmap so they don't conflict with the other images.

Please remember to test everything before you finish your skin. After you have finished it please email the skin into me and I'll test it and add it to the main skins page. If you have any questions while you are making skins then please email me so that I can help and also update this page so that others don't run into the same problems. Feel free to look at how any of the downloadable skins are made, oh, and Happy Skinning!