The PC Jukebox - How To Create A Skin
The PC Jukebox supports skins!
This file will provide a fairly detailed explanation of how to create
and/or edit skins for The PC Jukebox.
1 sample skin is included with version 6.0 and beyond. Additional skins can be downloaded from www.thepcjukebox.com. It is NOT necessary to create new skins or
edit the sample skin. This file is
intended for those who wish to be a little more creative.
Skin
Elements (return
to top)
There are four main graphical elements that comprise a skin for
The PC Jukebox. These include:
1. The Logo Image - the
logo image that appears at the top of every screen.
2. The Background Image - the image that
is displayed on the background of every screen.
3. The Default Background
Color/Texture For Buttons - a texture graphic that is used as the background for all of the
rectangular and circular buttons.
4. The Scrollbar Letter
Graphics
- the individual letter bitmaps that appear on the scrollbars, both as it is
being scrolled and while it is at rest.
Each of these elements MUST be included to complete a skin.
1. The Logo Image
This file must be in .gif format.
The file should be 500 x 75 to fit properly at the top of the
screen. This is an update from version
5.1 where the logos were 600 x 75.
2. The Background Image
This file must be in .jpg format.
This file should be of the same dimensions as the intended screen
resolution (1024x768 or 800x600) to fully cover the screen.
3. The Default Background
Color/Texture For Buttons
This file must be in .bmp format.
There are no limitations to the size of this file as it will be
stretched either way to fit on the buttons.
4. The Scrollbar Letter
Graphics
These files must be of .bmp type.
They should measure 80 x 80 to fit on the scrollbar perfectly.
Creating
A New Skin (return
to top)
To create a new skin, you will first need to put all of the
required graphical image files into one folder.
The details of the required files will follow. Once you have all of the files in a single
folder, you can start up The PC Jukebox to put your skin into action.
Required Files
The following is a list and description of all of the necessary
files to create a skin. If any of these
files is missing you will receive an error when attempting to save the skin
from inside the program.
Logo
File
You can select any .gif file for your
logo. This image should not be any
larger than 500 x 75 to fit well at the top of each screen. The name of the file must 'Logo.gif' for The PC Jukebox to be able to find it and
display it.
New for Version 8.0 – Animated (.gif) Logo Files Are Supported!
The Animated Logo file should
also measure 500x75. The name of the
file must 'LogoAni.gif' for The PC Jukebox to be able
to find it and display it.
Now here is the tricky part…the animated
.gif logo should NOT have a transparent background. Instead, you need to copy a section of your background.jpg file and make this the background for your
animated logo. To do this, you will want
to open up your background.jpg file in any basic
graphic editing program such as Microsoft Paint. Then, highlight the portion of the image that
starts at pixel 256, 4 and drag until you have a rectangle that measures
500x75. Cut or copy this rectangle and
paste it into a new file. This will be
the background for your animated logo.
You can then create your animated logo and when it is displayed in The
PC Jukebox, it will appear as if it actually does have a transparent
background.
Background File
You can select any .jpg file for your
background. This image should measure
1024x768, or 800x600 to make sure the screens are completely skinned. The file must be named 'Background.jpg'
for The PC Jukebox to be able to find it and display it.
New in Version 8.0 – Background2.jpg and Background3.jpg
Due to the added graphical
complexities in Version 8.0, 2 more background graphic files are necessary to
complete a skin. Fortunately they are
quite easy to create. To create these
files, you will
want to open up your Background.jpg file in any basic
graphic editing program such as Microsoft Paint. Find the pixel located at point 136, 88. Then drag and highlight the rest of the
background graphic all the way to lower right hand corner. Finally, cut or copy the highlighted region,
create a new .jpg file, paste the contents of the clipboard and save the file
as Background2.jpg. The final size of
the new graphic should measure 888x680.
To create Background3.jpg, again open Background.jpg file in any basic graphic editing program
such as Microsoft Paint. Starting at the very lower left hand corner of the graphic, drag a
rectangle up and to the right until it measures 1024x102. Cut or copy this highlighted rectangle,
create a new .jpg file, paste the contents of the clipboard and save the file
as Background3.jpg. Again, the final
size of this graphic should be 1024x102.
Button Texture/Color
You can select any .bmp file for this
texture. This image can also measure any
size as it will be stretched either way to fit on the buttons. This file must be named 'ButtonTextureRectangle.bmp'
for The PC Jukebox to be able to find it and display it.
Scrollbar Letter Graphics
These are the letters and numbers that
appear on the right side scrollbars as they move up and down. You will notice that these files are actually
squares even though the images appear as circles on the scrollbar. The four corners of the square should have an
identical color. For best results, the
Scrollbar/Volume color should be set to the same color as the corners of the
graphics. Otherwise, the graphics will
appear as squares, not circles. By
choosing the same color for the Scrollbars/Volume controls, the backgrounds of
the graphics will blend in with the scrollbars and the letter graphics will
appear as circles. Ideally, these images should measure 80x80.
You will need to include 2 graphic files
for each letter A-Z and each number 0-9.
These files must all be in .bmp format.
The names of the files must correspond to the letter they represent,
i.e. the ‘A’ graphic must be named A.bmp, the B
graphic named B.bmp, and so on. These are the graphics that are shown when
the scrollbar is at rest. The second
file for each letter will be displayed as the scrollbar is moving. Each of these graphics must be named after
the letter they represent, with an ‘_pr’ attached,
i.e. the A graphic must be named ‘A_pr.bmp, the B
graphic named ‘B_pr.bmp, and so on.
So, you will need to have the following 72
files for the scrollbar:
A.bmp A_pr.bmp 0.bmp 0_pr.bmp
B.bmp B_pr.bmp 1.bmp 1_pr.bmp
C.bmp C_pr.bmp 2.bmp 2_pr.bmp
D.bmp D_pr.bmp 3.bmp 3_pr.bmp
E.bmp E_pr.bmp 4.bmp 4_pr.bmp
F.bmp F_pr.bmp 5.bmp 5_pr.bmp
G.bmp G_pr.bmp 6.bmp 6_pr.bmp
H.bmp H_pr.bmp 7.bmp 7_pr.bmp
I.bmp I_pr.bmp 8.bmp 8_pr.bmp
J.bmp J_pr.bmp 9.bmp 9_pr.bmp
K.bmp K_pr.bmp
L.bmp L_pr.bmp
M.bmp M_pr.bmp
N.bmp N_pr.bmp
O.bmp O_pr.bmp
P.bmp P_pr.bmp
Q.bmp Q_pr.bmp
R.bmp R_pr.bmp
S.bmp S_pr.bmp
T.bmp T_pr.bmp
U.bmp U_pr.bmp
V.bmp V_pr.bmp
W.bmp W_pr.bmp
X.bmp X_pr.bmp
Y.bmp Y_pr.bmp
Z.bmp Z_pr.bmp
Furthermore, you will need to
provide 2 images for the scrollbar that will display when none of the above
graphics is appropriate (i.e. the CD name starts with a piece of punctuation).
These files need to named ‘Button.bmp’ and ‘Button_pr.bmp’ respectively.
New in Version 8.0 – Decade Buttons
Because Version 8.0 now
supports scrolling by Decades, some new button graphics have been added. You can start with any decade you would like,
but as a default, the Classic Skin (and any other skin you download from www.thepcjukebox.com) includes the
following files (as well as their _pr.bmp partners):
1900’s.bmp
1910’s.bmp
1920’s.bmp
1930’s.bmp
1940’s.bmp
1950’s.bmp
1960’s.bmp
1970’s.bmp
1980’s.bmp
1990’s.bmp
2000’s.bmp
2010’s.bmp
Equalizer Slider Graphics
To make the
Equalizer blend into the background, the sliders need to be masked with
graphics. These graphics need to named
‘EQ1.jpg’, ‘EQ2.jpg’, … through ‘EQ9.jpg’ Each of these graphics should measure
30x350. To properly create these
graphics, it is easiest to load your current background into Microsoft paint. Then, cut each of these slider graphics out
of the background and save them as their own images. For a 1024x768 background, you can use the
following table to identify the upper left corner of each slider graphic,
keeping in mind that each graphic should be 30 pixels wide by 350 pixels tall:
Name Upper Left Hand
Pixel Location
EQ1.bmp 289,132
EQ2.bmp 348,132
EQ3.bmp 407,132
EQ4.bmp 466,132
EQ5.bmp 525,132
EQ6.bmp 584,132
EQ7.bmp 643,132
EQ8.bmp 702,132
EQ9.bmp 761,132
Slider Background
The Volume and Song Progress sliders also
need background images. Fortunately,
they can share one file. The file must
be named ‘SliderBackground.jpg’ and it should measure
462 pixels wide by 21 pixels tall, for best results. You can cut this graphic from anywhere in
your background image.
CD Cover Frames
There are four
different graphics that are used as the frames around each of CD covers. Their names and descriptions are as follows:
Name Size Description
AlbumFrameTextureNew.bmp 181x206 Frames at rest on CD Cover screens
AlbumFrameTextureNew2.bmp 181x206 Frames when mouse over on CD Cover
screens
AlbumFrameTextureNew3.bmp 181x206 Frames when mouse clicked on CD
Cover screens
AlbumFrameTextureNewSq.bmp 181x181 Frame used on all other screens (Now
Playing, Lyrics, …)
So, in all, there
need to be 118 graphic files in the folder before the skin can be created
successfully.
The PC Jukebox includes a small utility to facilitate in the creation
of skins. This utility can be accessed
by clicking the 'Skins' entry in the left-hand list of the Options screen in
The PC Jukebox. Then click on the
'Create New Skin' button to start the utility.
1. Name Your Skin
You will first be asked to provide a name for your new skin. Enter the name and click 'OK'. A series of controls will be displayed
allowing you identify where each of the elements of your new skin are located. Providing you do not click 'Cancel', a new
folder will be created for you. This
folder will have the name you selected for your skin and will be located in the
'Skins' folder under the folder where you installed The PC Jukebox.
2. Set the Scrollbar/Queue/History Color
The Scrollbar/Queue/History color should be set to the same color
as the four corners of the Scrollbar letter graphics. This color will be used as the background for
the scrollbars, the Queue listing, the History listing and various other items
for consistency
3. Specify Default Font
The first item on the Skin Configurator
form is the Default Font. This is the
font that will be used on all dynamic text throughout the program when this
skin is applied. Be advised that dynamic
text is any text that can change, i.e. the currently playing song title, the
album name, the elapsed time of the song, etc... Most of the text in the program is dynamic,
but there is some that is not. Also,
keep in mind that this is simply the DEFAULT font. The font of any individual piece of text in
the program can be changed by right clicking on it. Once a new font is selected for any
individual item, it is saved with the skin and will be applied any time that
skin is selected.
4. Specifiy
The Folder Where Your Graphic Files Are Located
Browse to the path of the folder where
your 118 graphic files are located (see above).
The PC Jukebox will need to have this information to successfully create
the skin.
5. Final Steps
The final elements of the skin do not need to be specified on the
form because they will be supplied automatically. All of these files will be copied from the
'Classic' skin folder. Because each of
these files are fairly time consuming to create, it was decided that these
defaults would be copied in. However,
once they are copied, they can easily be modified, or even replaced, if the
user chooses to.
The Button Graphics files that are copied are:
Back.bmp
ClearQueue.bmp
Minimize.bmp
Mute.bmp
NextSong.bmp
NextSongSmall.bmp
OFF.bmp
ON.bmp
PageDown.bmp
PageDownSmall.bmp
PageLeft.bmp
PageRight.bmp
PageUp.bmp
PageUpSmall.bmp
Pause.bmp
PauseSmall.bmp
Play.bmp
PlaySmall.bmp
QueueDown.bmp
QueueUp.bmp
RemoveSong.bmp
RestartSong.bmp
RestartSmall.bmp
Top20.gif (animated)
NowPlaying.gif (animated)
Most, but not all, of these files also has a companion file that
is copied, with a '2' appended to its name, i.e. ClearQueue2.bmp. These files are used to change the text color
when the user hovers over a button with the cursor, or clicks a button. Be advised that the background color of these
files is irrelevant, as the background texture will be provided by the ButtonTextureRectangle.bmp graphic file, discussed
above. You can edit each of these files
to change the font and text color if you wish, using a simple program like
Microsoft Paint. Just be sure to save
each file with its original name and a .bmp extension.
6. Save Your Skin!
Once all of your elements have been selected, you can click the
'Save New Skin' button to start copying all of the files. If all goes well, you will see a message box stating
that your new skin was successfully created.
The new skin name will now appear in the dropdown list on the setup
screen, and will be selected by default.
You can now click the ‘Apply Changes' button to save these settings and
see your skin in action.
Editing An Existing Skin (return to top)
If you would like to change any of the
elements of your new skin (or any existing one), you will simply need to
replace the desired graphic in the particular skin’s folder. These folders are located under the main
application’s folder, usually at C:\Program Files\The PC Jukebox\Skins\... Once you have replaced the graphic file you
wish to change, just start The PC Jukebox again and you will see your new edits
in action.
Deleting An Existing Skin (return to top)
You can completely delete any skin (with the exception of the
'Classic' skin) by selecting the 'Skins' item from the left-hand list on the
initial start up screen, selecting the skin from the dropdown list, and
clicking 'Delete Selected Skin'. Please
be advised that this action cannot be undone so please use this functionality
carefully.
Summary
(return to top)
This file makes it seem that creating skins is fairly labor
intensive, but that really is not the case.
Once you experiment with editing an existing skin, you will probably
feel much more comfortable creating new ones.
A few extra backgrounds, logos, and textures have been included with the
program. You can find them in their
corresponding folders underneath the folder that The PC Jukebox was installed
to (C:\Program Files\The PC Jukebox, by default).
If you have questions at any time concerning skins, or any other
aspect of The PC Jukebox, please visit http://www.thepcjukebox.com, click on the
'Contact Us' button and feel free to submit your question via email.
Cheers!!