The History and Mystery of Colorpad
by FearofFours

You see it included in almost every skin suite, the skins are consistently some of the most inventive out there, and it's responsible for my own entry into the skinning world! But what exactly does Colorpad do?

Colorpad is, essentially, a colour picker. To leave the description there however, is to do this little application a great injustice. It is more powerful than the colour picker in your image editing program because it can display the RGB (red green blue) values of any colour on your desktop, rather than just those open in your image editor. And that is just the start of its functions!

Colorpad displays the colour values in two formats: RRR GGG BBB decimal format (0-255), great for skin ini files; and RR GG BB hexadeciaml format (00-FF), ideal for web design.
By hitting Ctrl-C when Colorpad is the active window, the current colour is copied to the clipboard in either hex or decimal format (asignable via Colorpads comprehensive right-click menu). Ctrl-V will likewise paste any hex format colour in the clipboard into Colorpad.
As well as grabbing colours from the screen (do this by left clicking on the colour screen and holding down the mouse button until the cursor changes to crosshairs. Now drag the cursor, and release when you're over the intended pixel!), Colorpad can mix them.
To this end there are buttons which add or subtract red, green, blue and white 5 decimal values at a time. By dragging away from the buttons you can change values faster and with greater control. Dragging left decreases the values, dragging right increases them.
The actual colour picker part of Colorpad has two sets of options as well. The first is a zoom option which allows you to see just one pixel colour at any time, or several lesser degrees of magnification of the area under the cross-hair cursor. The second is an anti-dither which averages the colours surrounding the exact pixel the mouse is over. This also has several levels of operation.
Other added bonuses include snap to screen edge, always on top.
All the functions and options for Colorpad are accessible by right-clicking anywhere on Colorpad apart from the screen area.

I had the chance to catch up with Rethan (Val Moya), the author of Colorpad some time ago. I asked him if it was his desire for skinning that led him to coding Colorpad. "nope.. desire to code :) Colorpad was my first winapi application... I chose a colorpicker because it uses a lot of the api, it's simple and so i could learn a lot while not taking forever to release it."
The quick turnaround in updates upon its first release was in no small part due to Rethans hard work, coding long into the night even when he had exams. Feedback on the app was positive and the app proved to be a useful to every type of graphic designer. The (almost) infamous Pabo championed the app from the outset, hosting skins for it on his own site, before any of the major skin sites.
Rethan found one place in particular invaluable uring his work. "The skinz.org messageboard was really good to me in giving me ideas and bug reports, the feedback was amazing for a first-time project, it was really awesome."

It was in part the early flood of skins that led to version 2 of Colorpad which supported freeform skins. The skinning format is one of the most flexible out there, and is ideal for beginners. A short tutorial follows this article, although it has to be said that Rethans own instructions in the skinning.txt file in the Colorpad download are very clear.
Again, Rethan takes up the story.
"I thought making Colorpad skinnable would be a cute excersise... I showed colorpad to a friend of mine before it was skinnable, and he said "why should people like _your_ interface.. "
As for the method of skinning it, i was trying to make it as easy as possible for the skinner... I know i hated fiddling out that region.txt thing in winamp and I knew that you can just use masks so... it was quite a rush when I first heard about people skinning it.. the first skin i saw was ASCIIpad by pabo which was really cool "wow someone spent the time to skin it!!"
" Some noteworthy Colorpad skins include "The Beam Extended" by clasqm for it's artists palette! "Skellytone" by some dodgy geezer for it's minimal controls "Eyepad" by Jigsaw for it's novel way of displaying new colours.

Rethan is currently working on a skinnable resizeable text editor, called Codepad. We hope that he is able to complete it soon, as it's one of those holy grails that many are searching for! For Colorpad itself, and plenty of skins, as well as news on Rethan's other current projects, visit Orbsoft then do the tutorial!

++++++++++++++++++++Tutorial++++++++++++++++++++++++++++++

Start by designing your skin image.
Things you will want to consider are button positions, overall size and layout, exactly which buttons to include and so on. You don't NEED to put any buttons on at all, as all functions are accessible via the right click menu and keyboard shortcuts.
However, this may make your skin less desirable for some people.
I often start with a pencil sketch, to get a rough idea of dimensions and looks...
Then design the skin itself: include all buttons in their real positions in an unpressed ("up", "default") state. Away from the skin, add the pushed ("down") button states. Once you are happy with your skin, save it as a bitmap.

it may look a little like this:

Now we design the skin mask.
This separate image file tells Colorpad where your buttons are, where the colour screen is and so on.
The mask is always the same size as the skin itself, and looks like a child has drawn all over your wonderful skin with their brightest felt-tips.
Colorpad looks for the specific colours in your skin mask and recognises this as where certain skin parts belong.
For instance, anywhere that the colour Red:000 Green:064 Blue:000 is in your mask, Colorpad will recognise that in that position in your skin image is where the image is for the Close button is in it's down state.

This is best illustrated by the actual mask

As you can see it doesn't matter where you place the down state buttons, as these will automatically appear in the same plaxe as the upstates once the skin is in use. I tend to create my mask by inserting a transparent layer over the top of my skin image. I then select each distinct area in turn and fill (in the transparent layer!) with the appropriate colour.
The colours are all listed below, with rethans annotations from the skinning.txt file. Make sure that you have all anti aliasing, feathering, gradienting turned off, as the skin must have these EXACT colours at 100% opacity, otherwise it won't read the mask correctly and you'll end up with transparent holes or buttons in peculiar places.

(SECTION INFO) rrr,ggg,bbb
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=Description -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- (SKIN IMAGE) 255,000,000 Skin - Main graphic, not including buttons the color screen, or the text fields.
(COLOR SCREEN) 000,050,050 Color screen - Displays last color when getting/making another color and split screen is turned on. 000,100,100 Color screen - Displays whatever color you have or are currently getting off the screen, or currently making.
(TEXT COLOR/POSITION) 000,000,000 Default Text color - Location of the default text color. (can be overwritten by defining one or more of the below...) 000,000,020 Text color - Red decimal text color (Location in the Skin Bitmap that actually holds the color) 000,000,040 Text color - Green decimal text color 000,000,060 Text color - Blue decimal text color 000,000,080 Text color - Red hexadecimal text color 000,000,100 Text color - Green hexadecimal text color 000,000,120 Text color - Blue hexadecimal text color 000,000,140 Text possition - Red decimal value position (should be at least a 17x9 region) 000,000,160 Text possition - Green decimal value position (should be at least a 17x9 region) 000,000,180 Text possition - Blue decimal value position (should be at least 17x9 region) 000,000,200 Text possition - Red hexadecimal value position (should be at least 16x9 region) 000,000,220 Text possition - Green hexadecimal value position (should be at least 16x9 region) 000,000,240 Text possition - Blue hexadecimal value position (should be at least 16x9 region)
(NORMAL BUTTONS) 000,010,000 Normal button - Snap to screen 000,025,000 Normal button - Always on top 000,040,000 Normal button - Minimize 000,055,000 Normal button - Close 000,070,000 Normal button - Less red 000,085,000 Normal button - More red 000,100,000 Normal button - Less green 000,115,000 Normal button - More green 000,130,000 Normal button - Less blue 000,145,000 Normal button - More blue 000,160,000 Normal button - Less white 000,175,000 Normal button - More white
(PUSHED BUTTONS) 000,015,000 Pushed button - Snap to screen 000,030,000 Pushed button - Always on top 000,045,000 Pushed button - Minimize 000,060,000 Pushed button - Close 000,075,000 Pushed button - Less red 000,090,000 Pushed button - More red 000,105,000 Pushed button - Less green 000,120,000 Pushed button - More green 000,135,000 Pushed button - Less blue 000,150,000 Pushed button - More blue 000,165,000 Pushed button - Less white 000,180,000 Pushed button - More white

Make sure you save your mask as a bitmap, with the same name as your skin, but with the extension _mask.bmp . So in this case the skin is tekpad.bmp and the mask is tekpad_mask.bmp . Simple right?
To make your life even simpler, I have a GIMP palette with all of the colours for the mask available for download.
Each colour is titled so you know which component it's for, and it speeds up the whole process no end.
Just place the file in your /gimp/_gimp1.2.user/palettes directory and restart GIMP. Hit Ctrl-P with the image window active and select the Colorpad Mask palatte from the Select tab. Flick back to the palette tab and you're away!
Sorry, I don't have a Photoshop palatte as I don't own a copy of Photoshop, and if I remember rightly, you can't name individual colours in a Paint Shop Pro palette.

Here's the completed Colorpad skin...

Enjoy and if you have any queries comments or whatever,
please send to FOF@teknidermy.org