This tutorial will teach you how to make custom skins for Cool Player, which is a light weight MP3 player. ustom, skins, tutorials, cool, player, coolplayer, mp3, download Cool Player This tutorial will teach you how to make custom skins for Cool Player, which is a light weight MP3 player. The tutorial will be broken down into four main aspects: the main player, the main player INI file, the playlist, and the playlist INI file. Table Of Contents
  1. The Main Player
    1. Making the Player
    2. The Transparency
    3. The Up Image
    4. The Down Image
    5. The Switch Image
    6. Creating the Text
  2. The Main Player INI
  3. The Playlist
  4. The Playlist INI
  5. The Final Product
Requirements
  1. A Graphic Editing Program - Photoshop would be excellent.
  2. A Text Editor - to make the INI files for the player and the playlist.
  3. CoolPlayer - which can be downloaded at http://daansystems.com/coolplayer/.

]]>1 The Main Player: Making the Player
Click Here to see the Photoshop PSD file which this section describes.
The focus of this tutorial is not on the creation of the graphics. I will quickly go over how the graphic was made, but the majority of the tutorial will be geared toward converting your own graphics into a coolplayer skin.
Begin by making a rectangle 200x60 and drag guides along sides. Fill with color #406A80. Use the elliptical marquee, and hold size to 40x60 for ends and fill. You should have something like the following image. Exact size is not particularly relevant here.

Make a selection 10x62 for the metal frames on the ends of the tube shape you just created. Use a White-Black reflected gradient from 1/3 down to bottom on a new layer. Duplicate the metal bar and drag the copy to the other side and position accordingly for the side.

You should now have 3 layers in your graphic file. Background, layer1 (blue tube), and layer2 (metal frame). Now, duplicate the blue tube layer, and transform it so it comes to rest below the main tube. Now duplicate the metal frame layer, and go to Edit - Transform - Transform again. It should look like the following:

Duplicate both metal frames again, set them both at 50% opacity, and move them behind the metal. This simulates the metal showing through the tube. Add a layer mask to each, and use a black/white reflected gradient to shade the edges of the metal that is behind. It should appear as follows:

Make a new layer between the 50% metal and the metal. Select the top tube by pressing Ctrl + Click layer in palette, and grab #0C1519 as your foreground color. Select the foreground-to-transparent gradient from the drop down list. Create a gradient from the bottom of the tube to near the top on your new layer. Contract the selection by 1 pixel Select - Modify - Contract, select Inverse, and hit DEL to clear the outside. Do the exact same thing with the bottom tube. It's almost like being in the military: New layer, Select, Gradient, Contract, Inverse, Clear.

Select the bottom tube again, and on a New Layer, fill that selection with white. Move it up a few pixels, and load the tube selection again. Hit DEL on your keyboard. Move it back down the exact number of pixels you moved it up. Give it a little Gaussian Blur. Now give it a little border like the Blue Glow. Select, contract, inverse, clear.

This step is the most tedious: Grab the line tool, set it to 1 pixel wide with no anti-aliasing and draw out your menu. Things you will need include: Song Title, Track Length, Track Position Slider, Previous, Pause, Play, Load, Next, Shuffle, Repeat, Playlist, Minimize, Close, Skin Switch Button if you are having a mini-mode, and several equalizer sliders.

Now we'll create the sliders. Grab the line tool again, and in the space allotted to the sliders, create 1 pixel lines with 2 pixels between them. Change the opacity on this layer to 20% so it looks like the following:

Finally, using the pencil tool, pencil in some spiffy buttons icons inside the buttons that we have.

Click Here to see the Photoshop PSD file which the previous section described.

]]>2 The Transparency
Now we need to make the transparency. Fill the background with the same blue you used for the tubes which was #406A80. Now, make a new layer, and load the selections of both tubes, and all four metal frames. Hint: hold Shift while Ctrl+Clicking on layers. Enter quick mask mode (press 'Q') and go to Image - Adjust - Threshhold. Run the default value: 128. Exit quick mask ('Q' again) and invert the selection. Fill with #FF00FF which is the "common" transparency color. It isn't really important what color you choose, so long as it doesn't exist anywhere else in your skin. Remember the color you choose though, you'll need to define it when making the skin INI file.



]]>3 The Up Image
Now lets make the "up" image. This is the player image with all buttons off and all sliders at their maximum. In this skin, the sliders will slowly fill with black, so we're ok right now. The up image will look like this:



]]>4 The Down Image
Now we will need a "down" image. The down image is the skin with the buttons in their pressed positions, and all sliders in their zero position. To do this, we will need to fill the slider layer with white. Press '/' while on the sliders layer to preserve the transparency. Grab white as your foreground color and Alt+Backspace to fill it. For the buttons, we will use the rectangular marquee to create some white fields inside the buttons and fill them with white. Place them just above the tube, so it remains behind all the other effects on the other layers.



]]>5 The Switch Image
For the Switch Image, we will show what the buttons look like when they are in their on mode. These include play, pause, stop, repeat, shuffle, and equalizer on. Basically, things that can be switched on and off. The switch image is special in some ways. What i have done is just duplicate the down image for this purpose. What this would do is make each button sticky so when you click it on, it appears to stay on. There are other choices of course. You could make different graphics for the switched state, or you could put the graphics that show a given button is switched in a completely different place on the skin. It's all up to you.



]]>6 Creating the Text
For the creation of the Text and Time Fonts that will be used in the player, you have to get or make yourself a font. You can download specific CoolPlayer font images from Cool Player Font Library. Place your text in a new layer, and position it vertically where you want it. Now drag guides to the top and bottom of the text. Select a portion of the bar between the guides, hide the text, and go to Edit - Define Pattern. Now go back to your text, and on the background layer, Edit - Fill - Pattern. Now make sure the text layer has the same settings as the main player's text layer, and save it as text.bmp.

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz
These are the alphanumeric characters that make up text.bmp, in the case that you would want to create your own. Just make sure the height and width of each character is identical, and remember what they are. Also note that the space bar is at the beginning, and not at the end of the string of characters. Use this same technique of defining a pattern behind the time text to create a time.bmp. As for the track image, it is not used in this skin, so i referenced it to blank.bmp, a 1x1 pixel image.

]]>7 The Main Player INI
Click Here to see the Main Player INI file I used for this skin.
Create a new Text Document, and name it whatever you want, just make the extension on the file .ini. This is your main player definition file. First thing you want to do is let coolplayer know that it's a definition file. Place this on the first line:

Define your transparency color now. This should be pretty obvious, the last six digits are the hex code of the transparency color: Remember that every button, slider and switch in a coolplayer skin must have a rectangular box around it. Now let's place the bmp's in the .ini file now. There are six bmps which must be included in the skin to avoid error messages about missing bitmaps. They are as follows:
Example: BmpCoolUp=skin-upimage.bmp

The nuances for all these images are explained in the player creation tutorial. Once you have those defined, we can move onto the Buttons and Switches, which are essentially created the same. A button is a two-state object, meaning it is either off or clicked. Off normally, but only on during a mouse click. Buttons, unlike switches, don't remain in their switched position after click them. A button in the .ini file looks like so:
PrevButton=105,47,14,10,0,0,0,0,0,Previous Track

The numbers represent the following: The possible buttons for this are: Notice that play, pause, and stop are missing from the main controls. This is because they are switches. This means that they assume the artwork of the switch bitmap when they are active. A switch in the .ini file looks like so:
PlaySwitch=136,47,14,10,0,136,47,14,10,Play

Here it is in a nutshell. The possible values of these are pretty obvious. Sliders can be vertical or horizontal. No button can overlap a slider. Obviously, no elements in CoolPlayer can overlap. There are two sliders, scaling sliders and sliders with thumbs. Sliders that scale will use the space defined for the slider, use the background graphics from the Up and Down bmps, and create a pixel-by-pixel slider in either a horizontal or vertical direction. Sliders that have a thumb to control have a basic background that does not change drawn by coolplayer from the Up bmp. You define thumb-type sliders as follows: Here are the different types of sliders you may need in your skin. Here is an example of one of the the sliders from the sample skin: PositionSlider=33,22,165,10,0

The Text for Songtitle, Frequency, Bitrate in the skin is defined as follows: The time (remaining and elapsed) is defined as follows: The track number (from the playlist) is defined as follows: In the sample skin, the font definitions looks just like this: Lastly, there are two settings for a skinswitch button. The NextSkinButton is defined the same as any button. The NextSkin should have the target filename of the ini, or 'default':
NextSkin=/skin.ini or NextSkin=default which will switch to the default skin.
Click Here to see the Main Player INI file I used for this skin.

]]>8 The Playlist
Click Here to see the Photoshop PSD file which this section describes.
The focus of this tutorial is on creation of the playlist.ini. I will now quickly go over how the graphic was made. The playlist, due to the fact that it is resizeable, is based on a completely different system than the main player. Make a new image with #406A80 as the background color.

First off, we'll make a border for our Playlist. I like to create high-contrast borders to avoid blending them with the background of the user, so you Select - All, and do an inside stroke of 5 pixels with white. Then created a new layer and do an inside stroke of 1 pixel with black. Then you go back to the white stroke layer, select all, and subtract the bottom portion to give yourself a workable menu. Stroke this white with 5 pixels.

Now lets make the lower glow for the menu. Select the menu, and make a gradient the same as the main player tubes. Linear gradient, foreground: #0C1519 to Transparent, and go from the bottom to top of the menu.

The highlight: Select white as your foreground color, and do another gradient on a new layer from the top to about 2/3 down the menu.

Now some more tedium. We have to put in the text and the borders for the menu. Break out the text tool with Anti-Aliasing off, and grab the font "Silkscreen" and make the text. Be sure to spread it out evenly. Then take the line tool, and outline all your text boxes. Feel free to move the text around to adjust for different button lengths. Just go and have fun :)

Last thing we need to do is make the button 'on' graphics. To do this, use the rectangular marquee and select the inside of each button. Make a new layer just above the blue background.

Click Here to see the Photoshop PSD file which the previous section described.

]]>9 The Playlist INI
Click Here to see the Playlist INI file I used for this skin.
First things first. Open up a fresh new page of Notepad and at the top of the INI file, put this:

The playlist contains a whole heap of buttons. All of them must exist in the INI file, or you will get an error message when loading CoolPlayer. Each button must have it's own bmp file as well. What I have done in the sample skin is create a 1x1 pixel BMP for the graphics of the unused buttons. Each button must be in the format of the upimage above the downimage like so (upbutton over downbutton):

The playlist itself is one BMP. It must be named playlist.bmp. So, what we have to do is define the parts on it that will remain static, and those that will stretch/tile, by using coordinates to define where these areas are:

Non-resizable Areas Obviously, these are the corners. Resizable Areas For the resizable areas, the edges, CoolPlayer will automatically use what is left after the corners are removed from the non-resizable areas. The first number equals the width/height (whichever is applicable) to use in the scaling of the edge. The second number can be either a "1" or a "2". A "1" means that the graphics are to be stretched, and a "2" means that the graphics should be tiled. These should be pretty self-explanatory. Back to the buttons. We already know what to define them from the list above, but we don't know how. A button in the playlist looks like this: Broken down, this means: Finding the coordinates of x and y, on the button you will always use the left and top edge to measure from. But where to measure to? If the reference is the top left, you will use the top, and left of the playlist.bmp. If bottom right, you will measure from the bottom, and right. So from the left of the button to the right of the bmp is your X, and from the bottom of the bmp to the top of the button is your Y. Just remember, where are you measuring from? (look at the reference. It tells you in it's title) Where are you measuring to? The top and left edge of the button. Always!

Two more things left, and they have to do directly with the list itself. The first is placing the actual playlist onto the bmp that was previously defined. Here's what that means: the first numbers are the X and Y coordinates of the top left of the list. The other two coordinates are how far the opposite corner of the list is from the bottom right corner of the bmp. So in other words, looking at how much the list covers on the BMP, there is 5 pixels on the left side, 44 on top, 5 on right side, and 5 on bottom. Last, but not least, we need to make a minimum size for the playlist.
This is simply the limit as toward how far the user can shrink the playlist. Often times this will take some testing to get the way you want it.
Click Here to see the Playlist INI file I used for this skin.

Tips and Last Notes:
  • Shift+F12 puts CoolPlayer in to "skinner" mode. I have only found this mildly helpful.
  • Shift+F11 is much more useful. It reloads the current skin in CoolPlayer, including the Playlist.
  • Remember to define *everything* in the INI files. Even if they are 1x1 pixel buttons. This includes making 1x1 pixel BMPs for the playlist buttons. Most often errors will popup if you dont.
  • You can comment out lines in your CoolPlayer file if you put a semicolon at the beginning of the front of the line.

    • ]]>10 The Final Product
    Zip everything up and put it in a nice little package and we are set! Check out the final product:

    You can also click here to download the final skin to use on your CoolPlayer :) Well, I hope this tutorial helped you in making CoolPlayer skins. Also, I hope you will enjoy making CoolPlayer skins as much as I do. ]]>