SKINS
1.
Introduction
A lot of people
will get excited when they find out that they can change the look
of GIMSO dialer through skinning. The problem is they get turned off
once they hit a roadblock, or indeed, just figuring out how to get
started. So here we have a set of simple steps that holds your hand
from initial idea to finished masterpiece. Good luck!
1.1 Required
Tools
Before creating
a complete skin, you will need the following tools. There are some
suggestions below, but we don't necessarily endorse or require you
to use any of them. We leave you to choose one that you're most comfortable
with.
Bitmap Editor:
How else will you "paint" your skins? Must be able to recognize the
.BMP format. eg. MS Paint, Macromedia Dreamweaver, Adobe Photoshop.
Text Editor:
For use in opening the Skin template file. Also used if you want to
change the base color of your own created GISMO dialer. eg. MS Notepad,
MS Word, Corel WordPerfect
2.The
Skinning Pipeline
All skinners go
through the following steps in one way or another. Follow along and
you too can take your place amongst the skinning elite.
2.1
Download the Base Skin and Skin template
The Base Skin
is a copy of the default skin built into GISMO dialer. All you have
to do to skin GISMO dialer is paint over or replace a skin component
with your own design and voila, your own personalized version of GISMO
dialer. You can replace any or all of the components in a skin. Anything
you don't replace will use its Base Skin counterpart. Naturally the
Base Skin components will look out of place, so we suggest changing
every file. You will also need to download the skin template (Standard.skn).
This is a list of all the .BMP
files that are used to create the GISMO dialer. It's also a guideline
for name, size and position (X, Y) of each component. The guideline
will ease your work and makes it possible for you to determine which
.BMP files your want to change the size and position of that specific
component.
2.1.1 The base
skin breakdown
The Base Skin
can be split into 5 logical segments: Main, Call register, Message,
Phone book, Settings.
Main
The Main window is probably the most complex window, graphics wise,
of all its windows. There are many things going on in that one window
at all times. Each part of the main window is divided up into various
bitmap images. Here is a list of the images below that actually create
the main window.
Yes/No:
Yes.bmp, Yes_Glow.bmp
No.bmp, No_Glow.bmp
NoBottom.bmp, NoBottom_Glow.bmp
|
 |
Volume:
Volume.bmp, Volume_Glow.bmp
|
 |
Battery:
Battery_25.bmp, Minus_Battery_25.bmp
Battery_50.bmp, Minus_Battery_50.bmp
Battery_75.bmp, Minus_Battery_75.bmp
Battery_100.bmp, Minus_Battery_100.bmp
|
 |
GSM:
GSM_25.bmp, Minus_GSM_25.bmp
GSM_50.bmp, Minus_GSM_50.bmp
GSM_25_MENU.bmp, Minus_ GSM_25_MENU.bmp
GSM_75.bmp, Minus_GSM_75.bmp
GSM_100.bmp, Minus_GSM_100.bmp
|
 |
GPRS:
GPRS_25.bmp,
Minus_GPRS _25.bmp
GPRS_50.bmp, Minus_GPRS _50.bmp
GPRS_25_MENU.bmp, Minus_GPRS _25_MENU.bmp
GPRS_75.bmp, Minus_GPRS _75.bmp
GPRS_100.bmp, Minus_GPRS _100.bmp
|
 |
WLAN:
Wlan_25.bmp, Minus_ Vlan_25.bmp
Wlan_50.bmp, Minus_ Vlan_50.bmp
Wlan_75.bmp Minus_ Vlan_75.bmp
Wlan_100.bmp, Minus_ Vlan_100.bmp
|
 |
Navigation
key:
NaigationKey.bmp
NaigationKey_Glow.bmp
|
 |
Keypad:
0.bmp, 0_glow.bmp
1.bmp, 1_glow.bmp
2.bmp, 2_glow.bmp
3.bmp, 3_glow.bmp
4.bmp, 4_glow.bmp
5.bmp, 5_glow.bmp
6.bmp, 6_glow.bmp
7.bmp, 7_glow.bmp
8.bmp, 8_glow.bmp
9.bmp, 9_glow.bmp
Star.bmp, Star_glow.bmp
Hash.bmp, Hash_glow.bmp
|
 |
These number
bitmaps creates the keypad image for GISMO dialer. Many skin
artists can create their own keypad image as well as the other
components to make their skin as unique as possible. Although
the regions in which the buttons can be clicked are fixed, the
artists have a certain amount of pixels to play with for each
element. This will enable the artists to give the illusion of
making smaller more precise number pads, or even just big silly
dumb ones if they wish. The possibilities are simply endless.
|
The bitmaps
listed earlier in the text (page 2-3) are layed out together
to create the GISMO dialer (picture 1). The images are divided
into various segments only divided by spaces between the sections.
The first components in GISMO dialer, from the upper left-hand
corner, are; Yes-button in an un-pressed state, the four bitmaps
that creates the battery indicator and the No-button in an un-pressed
state.
The next
image, directly underneath the Yes-button, is the volume-button.
To the right side of the volume-button you'll se an empty area
that are intended for the two displays (head display and main
display, row 153-155 in the Standard.skn file). Underneath the
No-button you'll find the bottom part of the No-button.
|
Picture 1 |
Directly
underneath the Volume-button and the bottom part of the No-button
you'll find the GSM and Wlan/GPRS indicator. These indicators
are made of four bitmaps. Between these indicators you'll find
the navigation key (row 113 in Standard.skn)
The next
set of image contains three columns followed by three rows.
These images create the number pad for the GISMO dialer.
The other
four logical segments (Call register, Message, Phone book, Settings)
are created without the number pad bitmaps. These logical segments
are created with sections of the other bitmaps listed earlier
in the text. Theses bitmaps are cropped and layered around each
other. The areas that are not covered by the already created
bitmaps are the active display areas. These areas are created
by the GISMO application it self (row 159-162 in Standard.skn).
The color of these active areas is determined by the RGB value
in the configuration file (row 167 in Standard.skn).
Four
logical segments
Compared to what it takes to skin the main window, the other
four logical segments is far simpler. The Call register, Message,
Phone book, Settings are composed of 17 bitmap images and not
29 as the case is with the GISMO dialer keypad.
2.2
Configuration files
Any skin
file is not complete without first finishing up the configuration
files. This configuration file controls such things as the background
colors of the GIMSO dialer, and areas that are designated to
be displayed to the end user. There are one text files that
allow you to change these various aspects of GISMO dialer. The
file is Standard.skn
Standard.skn,
as mentioned before, sets the colors for the dialer panel. It
contains 169 lines. Each line consists of size and the position
of each .BMP file. It also consists of the RGB value. Here is
a brief explanation of the lines:
| 1-92 |
Consists
of bitmaps and their name
|
| 1-3 |
Creator
Info
|
| 9-33 |
A
list of all the .BMP files that are used to create the
GIMSO dialer.
|
| 35-47 |
Yes/no
Volume and Navigation bitmaps and their name
|
| 54-64
|
GSM
bitmaps and their name
|
| 65-75 |
GPRS
bitmaps and their name
|
| 76-83 |
Wlan
bitmaps and their name
|
| 85-92 |
Battery
bitmaps and their name
|
| |
|
| 98-164 |
Consists
of the size and X, Y coordinate for each .BMP file
|
| 98-109 |
Keypad
size and X, Y coordinates
|
| 111-112 |
Yes/No
size and X, Y coordinates
|
| 113-114 |
Size
and X, Y coordinates for the navigation key in main
mode (row 113) and the four other logical segments (row
114)
|
| 116-120 |
GSM-indicator
size and X, Y coordinates
|
| 122-126 |
GPRS-indicator
size and X, Y coordinates
|
| 128-131 |
Battery-indicator
size and X, Y coordinates
|
| 133-134 |
Size
and X, Y coordinates for the volume bitmap and the bottom
part of the No-bitmap.
|
| 142-146 |
Size
and X, Y coordinates for the GISMO dialer initialized
sub menus
|
| 148-150 |
|
| 153-155 |
Displays
for the main window (GISMO dialer keypad)
|
| 157 |
Pin
code display
|
| 159-162 |
Displays
for the four logical segments (Call register, Message,
Phone book, Settings)
|
| 164 |
Volume
slider
|
| 167 |
RGB
value
|
That wasn't
too tough, was it? Not at all! This should probably take no
more than an hour or so to skin and creates an all around fuller
affect if skinned with the same 'scheme' of the GISMO dialer
interface
|
| |
|
|