How to create skin and splash for Motorola EZX phone.

[eakrin]

How to create skin and splash for Motorola EZX phone.
supported model ROKR E6, A1200, A780, E680i, E680
by eakrin@gmail.com July 31, 2007
Chapter 1 : What is skin and splash.

What is skin and splash? in motorola ezx phone skin is color scheme that can change in setting -> color scheme. skin mean everything on screen that we see or tap on it. such as button, status bar, dialog, menu, check box, icons. and splash is mean power up and power down animatation pictures. phone normally have preloaded 3 skins and have 1 power up and power down animation pictures but we can not change it. but who need a phone that cannot change skin. so with the help of Mpkg installer, linloader, skin and splash installer. now we can change it. in the next chapters I 'll tell how to customize skin and splash.



Pic 1-1 skin components.



Pic 1-2 splash images.

First let look inside skin. what is it consist of. Skin is consist of icons in iconres.ezx file, standard components like button, statusbar, check box dialog in *.skn file. and some color configuration for non-image component like font, background, highlight etc in *.pskn or in *.phm files. preload skins are located in

A1200, ROKR E6

/usr/data_resource/icon for main iconres.ezx file.
/usr/data_resource/skin/ for *.pskn files.
/usr/data_resource/skin/defaultXX/ for *.skn and iconres.ezx files.

A780, E680i

/usr/language/icon for main iconres.ezx file.
/usr/language/theme for *.phm files.
/usr/language/theme/defaultXX/ for *.skn iconres.ezx files.

we need preloaded skins to use as template to customize skins. just telnet to phone and manually copy them out. or use Get preloaded skins and splash script to copy them out to memory card.

Get preloaded skins and splash

After you got a preloaded skin. here is a brief detail of eack skin file.

1. Skin configuration file (*.pskn or *.phm, *.dhm)
skin configuration file is normal text file that contain configuration of skin components and color palette of it. skin configuration file contain three section Theme config table, Theme Color Palette Table, and Theme Multi Lang Name. this is a default A1200 skin, Maldives Blue.

[THEME_CONFIG_TABLE]
ThemeName = Maldives Blue
ThemeColorPaletteIndex = 1
ThemeSkinFile = /usr/data_resource/skin/default1/HAINAN_01.skn
ThemeLogoIcon = /usr/data_resource/skin/default1/HAINAN_01.jpg
ThemeIconDir = /usr/data_resource/skin/default1/
BlendingColor = 255 255 255
BlendingPercentage=40

[THEME_COLOR_PALETTE_TABLE]


[THEME_MULTI_LANG_NAME]
en-us = Maldives Blue
zh-cn = Chinese name cannot display in this forums. it's make thread miss display
zh-hk = Chinese name cannot display in this forums. it's make thread miss display

2. iconres.ezx file.
this file contain all icon for skin. It have more than 1000 icons in main iconres.ezx. so main iconres.ezx have about 3MB in A1200/ROKR E6. But we doesn't need to customize all icons Because phone 'll search icon from current skin first. if current skin does not have it phone search it from main iconres.ezx file. if It still miss phone draw a black color into it's area. we customize only icon that we need to customize it not all icons.


Pic 1-3 icons in iconres.ezx

3. Skn file.
inside the *.skn file is standard UI (user interface) components such as button, check box, radio box, scrollbar, dialog, menu, etc.


Pic 1-4 standard UI components in skn file.

PS. E680 does not have skn file. it use color to draw standard UI components.

4. Skin logo image (*.jpg, *.png, or *.gif)
Skin Logo is a normal image that use as a preview of your skin. It can be use in JPEG, PNG, or GIF.


Pic 1-5 skin logo images.

Now you need to prepare yourself to do this job. because It 'll take most of your time in a week or a month to make 1 good skin.

[eakrin]

Chapter 2 : How to edit *.skn file.

when phone display skin on screen. the most component the it use is not icon but it's a standard UI (User interface) components like button, scrollbar, statusbar, titlebar, checkbox. so I just start with editing standard UI in skn file first.

Requirement.
1. Active perl interpreter from www.activestage.com
2. pack/unpackSkin.pl from Skin & IconresPackager
3. image editor that can open and save into GIF format.

here is a detail of each component in skin file.


I 'll explain it each component in Left part to right part. from left to right and top to bottom.

L1. General Arrow is a button with arrow in 4 directions up down left right. button have 2 stages normal and action (_A)

General_Arrow_Up 20x23
General_Arrow_Up_A 20x23
General_Arrow_Down 20x23
General_Arrow_Down_A 20x23

General_Arrow_Left 20x23
General_Arrow_Left_A 20x23
General_Arrow_Right 20x23
General_Arrow_Right_A 20x23

L2. General Stretch button S is a standard button. It have 2 stages normal and action (_A)

General_Stretch_Button_S 25x23 -> Normal status
General_Stretch_Button_S_A 25x25 -> Activestatus

L3 Stretch Progressbar is a bar that display progress of work in percentage. have 3 images.

Stretch_ProgressBar_Background 30x25 -> background

Stretch_ProgressBar_Fillamount 12x21 -> progress display bar in normal status
Stretch_ProgressBar_Fillamount_D 12x21 -> progress display bar when disable status

L4 Stretch Progressbar Small same like StretchProgressbar but have a small bar.

Stretch_ProgressBar_Background_Small 32x13 -> background
Stretch_ProgressBar_Fillamount_Small 17x5 -> progess display bar

PS. when display progressbar on screen phone stretch it horizontal until require size. by devide it in 3 part equally left, middle, right. and stretch only middle of image. when deviding image if remainder is 1 it 's add a remainder to middle part. if remainder is 2 it's add 1 to left and right part.

L5. General Radio Button is a select buttons for select from list of items.

General_Radio_Button_Unselected_A 18x18 -> Unselected and action status
General_Radio_Button_Unselected 18x18 -> Unselected status
General_Radio_Button_Selected_A 18x18 -> Selected and action status
General_Radio_Button_Selected 18x18 -> Selected status.

L6. General Checkbox is a box that can select of unselect.

General_Check_Box_Unselected_A 20x20 -> Unselected and action status
General_Check_Box_Unselected 20x20 -> Unselected status
General_Select_Box_Selected_A 20x20 -> Selected and action status
General_Select_Box_Selected 20x20 -> Selected status.

L7. General ComboBox is a list selection box. it have border image and button images.

Stretch_ComboBox_Button 20x25 -> button in normal status.
Stretch_ComboBox_Button_A 20x25 -> button in action status
Stretch_ComboBox_Button_D 10x25 -> button in disable status.

Stretch_ComboBox_Border 26x25 -> border and background.

** ComboBox_Border 'll stretched horizontal inthe same way as Progressbar and button always display rightmost of it.

L8. Stretch Image Border is a frame of image when display in filemanager.

Stretch_ImageBorder_Topleft 20x25 -> top left border.
Stretch_ImageBorder_Bottomright 20x25 -> bottom right border

** Stretch Image Border 'll stretched both horizontal and vertical when it was used.

L9. Stretch Scrollbar is a bar that display screen when screen display are large then phone display. It've vertical (ScrollbarV) and horizontal (ScrollbarH) scrollbar. Scrollbar consist of Arrow up and ArrowDown button on both end, Background and scrolling bar(Forground)

Stretch_ScrollbarV_Arrow_Down 20x21
Stretch_ScrollbarV_Arrow_Down_A 20x21
Stretch_ScrollbarV_Arrow_Down_D 20x21
Stretch_ScrollbarV_Background 20x20

Stretch_ScrollbarV_Arrow_Up 20x21
Stretch_ScrollbarV_Arrow_Up_A 20x21
Stretch_ScrollbarV_Arrow_Up_D 20x21
Stretch_ScrollbarV_Foreground 20x20

Stretch_ScrollbarH_Arrow_Down 21x20
Stretch_ScrollbarH_Arrow_Down_A 21x20
Stretch_ScrollbarH_Arrow_Down_D 21x20
Stretch_ScrollbarH_Background 17x20

Stretch_ScrollbarH_Arrow_Down 21x20
Stretch_ScrollbarH_Arrow_Down_A 21x20
Stretch_ScrollbarH_Arrow_Down_D 21x20
Stretch_ScrollbarH_Background 17x20

Stretch_ScrollbarH_Arrow_Up 21x20
Stretch_ScrollbarH_Arrow_Up_A 21x20
Stretch_ScrollbarH_Arrow_Up_D 21x20
Stretch_ScrollbarH_Foreground 17x20

PS. only Background and Foreground 'll stretch horizontal or vertical

and ScrollbarH Arrow down have duplicated in 2 row. don't know why.

R1. SBar_Background is a statusbar that display phone status i.e. signal, GPRS status, battery status, time, etc. It 'll stretch to screen witth with used.

Sbar_Background 20x26

R2. Cut_Screen TitleBackground is a bar for display title text on top of screen. same as status bar but some screen draw cutsreen title background continuous vertical. so I recommand that do not design cut screen titlebackground with a different in left right and middle part.

Cut_Screen_TitleBackground 20x26

R3. Stretch Menu is a popup menu. it consist of 4 angle images, 4 borders, menu separator, background, and highlight(Highlight TextBackground).

Stretch_Menu_RightAngle_1 10x10 -> Top Left angle
Stretch_Menu_RightAngle_2 10x10 -> Top Right angle
Stretch_Menu_RightAngle_3 10x10 -> Bottom Left angle
Stretch_Menu_RightAngle_4 10x10 -> Bottom Right angle.

Stretch_Menu_TopBorder 10x3 -> Top Border
Stretch_Menu_LeftBorder 3x10 -> Left Border
Cut_Menu_Seperator 9x2 -> menu separator
Stretch_Menu_RightBorder 3x10 -> Right Border
Stretch_Menu_BottomBorder 10x3 -> Bottom Border

Stretch_Highlight_TextBackground 10x10 -> menu highlight
Stretch_Menu_Background 10x10 -> menu background

PS. Border 'll stretch in it direction. and highlight and background 'll stretch both direction.

R4. Call KeyPadBk is a button in dialpad have 2 stages like another button.

Call_Keypad_KeyBk 57x35 -> normal.
Call_Keypad_KeyBk_A 57x35 -> action.

R5. Stretch Dialog is a frame of dialog when display on screen. same like menu it've 4 angles, 4 borders and title background.

Stretch_Dialog_RightAngle_1 10x10 -> Top Left angle
Stretch_Dialog_RightAngle_2 10x10 -> Top right angle
Stretch_Dialog_RightAngle_4 10x10 -> Bottom Left angle
Stretch_Dialog_RightAngle_3 10x10 -> Bottom Right angle
Stretch_Dialog_TitleBackground 20x26 -> dialog title background

Stretch_Dialog_LeftBorder 2x10 -> Left border
Stretch_Dialog_TopBorder 20x4 -> Top border
Stretch_Dialog_BottomBorder 20x2 -> Bottom border
Stretch_Dialog_RightBorder 2x10 -> Right border

PS. Border 'll stretch in it direction. and Title background 'll stretch horizonal.

R6. Stretch Dialog CST is a button for dialog. have 3 stages

Stretch_Dialog_CST 20x34 -> normal status
Stretch_Dialog_CST_D 20x34 -> disable status

Stretch_Dialog_CST_A 20x34 -> action status

PS. Dialog CST 'll scretch horizontal

R7. Stretch CST is a buttons on bottom bar when open Home menu.

Stretch_CST_A 20x35 -> action status

Stretch_CST 20x35 -> normal
Stretch_CST_D 20x35 -> disable

How to extract skin-image (*.PNG) from skin-file (*.skn) by SkinPackager.
1. put pack/unpackSkin.pl in the same folder as *.skn file and rename .skn to motoskin.skn.
2. click on unpackSkin.pl and Command prompt will display amount of images in skn file. folder skins should appear and it contain motoskin.skn.png and header.dat.
3. edit motoskin.skn.png with image editor.
4. click on packSkin.pl to create a newmotoskin.skn.

And becareful about skin component position that you should guess where 's it. Exacty It was in header of file. but i can't map skin header record to skin image because of some index was difference.

some components does not use standard components from skn file. but use icon in iconres.ezx. so I recommend to edit them too for good looking skin.

after finished standard components design in skn file. you need to decide which colors is use for your skin. ex if button is in grey what color of text on button should be? next chapter it's a color palette setting for skin.

[eakrin]

Chapter 3 : How to edit color palette

In skin there are some components that does not use icon to display it like font, background, highlight. most of them use only color to display themself on screen. components like background, text, button text, highlighted text does not use picture display themself. the only skin property that we can change is color. In this chapter is about how to edit color of them. Motorola use RGB color system for skin color configuration. If you Looking for more information about RGB color Look at here. in M$ Windows you can test color or create a RGB color in Paint. by menu Color-> Edit Colors and Define Custom Colors.


Pic 3-1 RGB Color system

Color in skin is define in .pskn file for A1200,E6 and in .dhm or .phm file for A780, E680/i in [THEME_COLOR_PALETTE_TABLE] section. And there are 3 preloaded color setting (color palette) in colorpalette.cfg file. but we cannot edit or add color palette because of it's in firmware part. so we directly config color into color palette section in .pskn for A1200, E6 or in .phm or .dhm for A780, E680/i. Here is an example of color configuration section.

[THEME_COLOR_PALETTE_TABLE1]
ThemeAMAnimationIconBkColor = 39 39 39
ThemeAMBottomHighlight = 84 84 84
ThemeAMBottomHighlightText = 255 255 255
ThemeBackground = 255 255 255
ThemeBase = 255 255 255
ThemeBrightText = 0 0 0
ThemeButton = 111 60 18
ThemeButtonText = 0 0 0
ThemeDisabledText = 157 111 73
ThemeForeground = 0 0 0
ThemeHighlight = 84 84 84
ThemeHighlightedText = 255 255 255
ThemeText = 0 0 0

Looking in Pic 3-2. It explain color for each component of skin. some component does not use standard color configuration like a frame of Dial number in Dialpad, a Image highlight border in File Manager Thumbnail View mode etc. some components use a reverse configuration color like a Calculator button Press status, Keyboard press status, Button text in device status page etc. so just leave it like that.




Pic 3-2 color palette on screen

There are many line in theme color palette section. some lines are only for A1200/E6 some are in all phone models.

This lines are available only on A1200 and E6

* ThemeAMAnimationIconBkColor is a bakground color when shortcut icon display animation.
* ThemeAMBottomHighlight is a highlight color when shortcut icon display animation.
* ThemeAMBottomHighlightText is a color of text when shortcut icon display animation.

this lines are for A1200, Rokr E6, and A780, E680i

* ThemeBackground is background color for all screen.
* ThemeForeground is color of foreground text (text that display on background)
* ThemeButton is color that use to draw button (in A1200/E6 can not find where it is, in A780/E680/i it's used only at Java application's title bar.
* ThemeButtontext is a color of text on Button.
* ThemeHighlight is a highlight color over text.
* ThemeHighlightedText is a color of text that highlighted.

and this 3 lines ThemeBase ,ThemeText, ThemeBrightText I can't find where on phone that use them.

How to edit skin's color.
by use unix text editor and adjust all line in [THEME_COLOR_PALETTE_TABLE1] section in .pskn file for A1200, E6 or in .phm or .dhm file for A780, E680/i.

How to design color for skin.
just easy thinking about what is your background color and what color should be use for text on it. or color of text and button. button use image in .skn file. (chapter 2) so good color design make your skin feel easy looking. avoid difficult-looking color like gray text on black button or gray text on white button.

[eakrin]

Chapter 4 : How to edit iconres.ezx

All icons on screen are in iconres.ezx file. They are GIF images file type. So they have only 256 colors. This may cause a problem when convert matte (icon blur edge from PNG) into GIF format. some icons are in GIF89a animate file format. They should have suffix _ani at the end of filename. All icons are packed iconres.ezx file. There are 2 type of iconres.ezx file a Current skin iconres.ezx and Main iconres.ezx. Phone 'll looking for icon by this order.

1st. Current skin iconres.ezx.
2nd. Main iconres.ezx that contain all icons. (that we use for template to create another iconres.ezx)
3rd. use black screen on icon area if icon was not found in 1st and 2nd iconres.ezx.

Requirement
1. Perl Interpreter "ActivePerl" at www.activestate.com (in Languages -> ActivePerl). Use MSWin32 MSI for easy installation and zero-configulation on Windows XP.
2. Perl script IconPackager for extract icon images and Perl script SkinPackager for extract skin images. download here Icon & Skin Packager
3. Image editor like Photoshop or GIMP.



There are many icons in main iconres.ezx. and they can be grouped by it's prefix in filename ezx GNB_XXXX, Home_XXXX, CST_XXX. and icons also have status indicate in filename's suffix _Acti suffix is a Action Status, _A is a Active Status, _B is a big size icon _S is a small size icon. number of icons are veries by phone model but between 1000-1300 icons. And there are too many that useless or can't find where it was used. so focus on important icon groups first and do another group until you appreciate it. a smallest template for iconres.ezx is a preloaded skin like cloudgrey or diamond blue. (not a cloudgrey or diamond blue from any download. coz it's modified. you need to get preloadedskin and looking for a default2 or default3 skin)

How to edit iconres.ezx by IconresPackager

1. put pack/unpackIconres.pl in the same folder as iconres.ezx file.
2. click on unpackIconres.pl and Command prompt will display amount of icons in iconres.ezx file. folder icons should appear in many GIF file and it contain note.txt and header.dat.
3. edit *.GIF that you want with image editor, Add new icon or Delete unwanted icon
4. add your name and iconres.ezx version in note.txt with ediplus.
5. click on packIconres.pl to create a newiconres.ezx

First just focus on GNB, Home, CST, CutScreen, and General group. after finish them your skin 'll nearly complete. but need to do many of the rest icons. Cutscreen and General icon groups are skin components in iconres.ezx they need to modify to the same as your skin for good looking skin.

There are few thing to becareful when modding iconres.ezx. First Some Icons have a different image size in each model. so try to use templete from a correct model instead or template from downloaded skin. because icon 'll distorted into it correct size if it have a wrong size. and packIconres.pl and phone use icon's filename to looking for icon. so do not rename icon and becareful for small and capital letter. It's a different character in Linux system.

and there are 2 special file in icons folder header.dat and note.txt. header.dat is a specific ezx skin header. do not touch it. note.txt is a iconres.ezx note file you can add any comments your signature or skin version into it.

Finally if you looking for a well-designed icon set to create your skin. Looking at http://www.kde-look.org/ or http://www.gnome-look.org/ or http://art.gnome.org/ most of them are in png format.

[eakrin]

Chapter 5 : How to create files for installer

After complete with skin, iconres.ezx, and color palette. You need to prepare file for install into phone. there are 3 types of skin installer now Skin & Splash Installer, .lin install and MTF installer. I 'll explain only Skin & Splash Installer. because to create .lin installer you need to know about Linux file system and about writing a shell script. and MTF Installer is very dangerous because it can make easy your phone hidden-memory full (ezx_user or ezxlocal folder) and it cannot uninstall.

Requirement
1. Unix text editor. in windows i use editplus.
2. compression utility program. I recommend 7-zip

How to edit .pskn file for Skin installer

Skin Installer install skin by read skin information from .pskn file. so you need to create .spkn fiel for skin installer to install your skin. in A1200 and E6 use a .pskn file from getPreloadedSkin executed as a template or modify a .pskn from your template skin. in E680i and A780 you need ot rename .phm file into .pskn file.

Format for .pskn is a standard .pskn from phone. only add [THEME_COLOR_PALETTE_TABLE] section for cuztomize skin palette and remove file path form [THEME_CONFIG_TABLE] due to Skin installer can handle it. .pskn file for skin install should be like this

[THEME_CONFIG_TABLE]
ThemeName = Maldives Blue
ThemeColorPaletteIndex = 0
ThemeIconDir = iconres.ezx
ThemeSkinFile = HAINAN_01.skn
ThemeLogoIcon = HAINAN_01.jpg

BlendingColor = 255 255 255
BlendingPercentage=40

[THEME_COLOR_PALETTE_TABLE]
ThemeAMAnimationIconBkColor = 39 39 39
ThemeAMBottomHighlight = 84 84 84
ThemeAMBottomHighlightText = 255 255 255
ThemeBackground = 255 255 255
ThemeBase = 255 255 255
ThemeBrightText = 0 0 0
ThemeButton = 111 60 18
ThemeButtonText = 0 0 0
ThemeDisabledText = 157 111 73
ThemeForeground = 0 0 0
ThemeHighlight = 84 84 84
ThemeHighlightedText = 255 255 255
ThemeText = 0 0 0

[THEME_MULTI_LANG_NAME]
en-us = Maldives Blue
zh-cn = ไบš็‰นๅ…ฐๅคง็ปฟ
zh-hk = ไบž็‰น่˜ญๅคง็ถ

Here is an explaination of each line in [THEME_CONFIG_TABLE] section

1. ThemeName is name of your skin. Any language and can have space inside name. But English is good for everyone.

ThemeName = Maldives Blue

2. ThemeColorPaletteIndex is a predifined colorpalette table (chapter 3)

ThemeColorPaletteIndex = 0

3. ThemeIconDir is mean folder for looking for a iconres.ezx. By with Skin installer it can handle all skin file path so it's a iconres.ezx filename.

ThemeIconDir = iconres.ezx

4. ThemeSkinFile is a skin .skn file.

ThemeSkinFile = HAINAN_01.skn

5. ThemeLogoIcon is a image that show or preview skin. It size 240x320 and should be in JPG or PNG format.

ThemeLogoIcon = HAINAN_01.jpg

6. Blending color is a color that use to blendding with wallpaper when display wallpaper on screen. Blending Color is RGB color and BlendingPercentage is a percentage of opacity of wallpaper. set BlendingPercentage to 100 will show 100% wallpaper. and 0% will hide most of wallpaper.

BlendingColor = 255 255 255
BlendingPercentage=40

Next section is [THEME_COLOR_PALETTE_TABLE] see detail for edit color palette in chapter 3.

And the last section [THEME_MULTI_LANG_NAME]. it's for define skin name in another langauge. it's useless for us but I still add en-us name.

en-us = Maldives Blue

Now you have all of files for your skin and ready to install them into phone. Skin installer 'll looking files only from the same folder as .pskn file. so put all of files in to same folder and send it to phone. There should be

1. .pskn file
2. iconres.ezx
3. .skn file
4. skin logo *.jpg or *.png or *.gif
5. optional wallpapers

Before first test your skin try to recheck you iconres.ezx and .skn file by re-unpack in by IconresPackager and SkinPackager in another folder. because a fail-file can make your phone bricked. And if you can flash your CG43 (A1200) or CG44 (E6) with the one that can telnet to bricked phone. it can help you restore a brick phone from fail skin installation by linux command line.

After complete create all skin. don't forgot to create your skin Logo by capture phone screen and add your name, skin name, version, release date on it.

How to distribute your skin.

Put all files in the same folder and zip that folder. DO NOT use another language folder name or space-inside folder name. and add phone model to filename suffix for easy categorize file. I recommend use ZIP format because it's can extract in both windows and linux.

[eakrin]

Chapter : 6 How to create splash screen

Splash screen is an animation that play when phone power on and power off. it's a GIF89a 240x320 size. Splash can be install in to phone by Splash Installer.

Default splash screen in phone are in

A1200, ROKR E6
/usr/data_resource/theme/*.phm
/usr/data_resource/animation/*.gif

A780, E680i, E680
/usr/data_resource/theme/*.phm, *.dhm
/usr/language/animation/*.gif

Requirement
1. GIF animation Editor. recommand M$ GIF Animator on Widnows for easy use and it's Free.
2. Unix text editor like editplus

Animation in GIF89a is very simple. It only display next image frame over current image frame in a specific interval and predifined-option like a frames of movie or cartoon-animation.

M$ GIF Animator is easy to use. the important setting is Looping, Duration, and UnDraw method. Set Looping make animation always replay when it finished. Duration of Frame is time to display on screen. and UnDraw metohd is how to clear screen before dispaly next frame. There have Leave, Restore Background, Restore Previous.




After create both power on and power off GIF. Splash Installer need a PHM file for install splash into phone. PHM file consist of 3 line. It's a Unix text file.

[THEME_CONFIG_TABLE]
PowerOffScreen = Moto2.gif
PowerOnScreen = Moto1.gif

PowerOnScreen is mean GIF file for display when phone powered on. and PowerOffScreen is GIF file for dispaly when powered off. If you include filepath into PowerOnScreen and PowerOffscreen. Installer will ignore it and always use default location to install.

How to distribute splash for Splash Installer.

Splash Installer require 2-3 files for install splash into phone.
1. *.phm
2. *.gif (can be use the same GIF for power on and off)

Put all files in the same folder and zip that folder. DO NOT use another language folder name and space inside folder name. and add phone model to filename suffix for easy categorize file. I recommend use ZIP format because it's can extract in both windows and linux.

Cheer!
eakrin