fearsim's Ultimate guide on how to create your own motorola skins with Skinner4Moto
Guide version 2.2

Thanks for viewing!

This tutorial will guide you through the process of making your own skins for various mobiles with skinner4moto.
Skinner4moto is developed by Knapster, download the program here.
Skinner4moto will be constantly releasing new versions, be sure to check here for the latest updates and feedbacks.
Guide is not useable for phones with JUIXos (ROKRE2, MOTOMING etc...)

You will need
>Skinner4moto
>Skinner4moto Phone Module
>An image editing/creating software (eg. Photoshop, Fireworks)
>A USB cable, for transferring skin files (get one from eBay)
>p2k commander for uploading skins
>And some custom skins

Just a Note
This tutorial will provide infomation, as well as screenshots. Most screenshots have arrows and labels on it (eg. [1] [2]) I have also contrasted them with different colours. Instructions are found below the screenshots with colours and labels.
A Resolution of 1024x768 and above is recommended for the best viewing of this tutorial

Index of chapters
1. Starting up
2. Editing Skins
3. Editing Icons
4. Huge lcons
5. Advance Editing
6. Final touches
7. Ending
8. How to install skins (via p2k commander/p2kTOOLS)

1. Starting Up
Download Skinner4moto.
On the very same page where you downloaded Skinner4Moto, there is a list of Phone Modules (.s4mi) Select the phone model you are editing, and download it. Ok, after skinner4moto and the module has finished downloading, Extract skinner4moto .zip file.
After extracting, you will see something like this in the folder.

[1] Drag and drop the Phone module you have downloaded into the unzipped folder.
[2] Unzip the .s4mi file found in the Phone Module file
[3] Now, drag and drop the .s4mi file into the skinner4moto Application

After all is done, Launch the skinner4moto application.
A pop-up window will remind you to change the settings first, then you will see Skinner4moto application window.

[1] Changing the options, click the options menu on the side, and the options menu will pop-up
[2] Changing the language, or if you have downloaded and installed more phone modules, you can also change the model of the phone.
[3] Standard users have /a partition to store their skin. For ROKR E1/ i398 users, /c will be set as the default skin partition
[4] Change the external GIF editor, to your "photoshop" "fireworks" whatever.

After changing the settings, its time to start work!
Now, for some basic fundermentals of motorola skinning >
- "Moto" is a default motorola skin, which containts 16 files in all (moto.ski, moto1-14.dat)
- By putting custom icons into the "Moto" skin, it will automatically set them as the default icons for your phone
- Skinning your phone, sometimes may sometimes result in skin crashes
<back to top>

2. Editing skins
I selected E398 as the model of my phone to start skinning, it will automatically load up the default "Moto" skin for you.
I do not want to edit the "Moto" Skin, so i open a skin of my own.

[1] Open a new skin you want to edit.
[2] After selecting the skin, it will take a couple of seconds for it to load, so just wait to finish.

After the skin has finished loading, goto the radiobutton that says "pictures" (refer to picture below)
It will list out all the GIFs files contained inside the skin file. The preview of the GIF file is on the left side.

Select the GIF you want to edit and click "Edit GIF", it will open the external editor you choose in the settings menu.
You can also replace the GIF file with another by selecting "change gif". Repeat this process for all the other GIF files.

<back to top>

3. Editing Icons
Icons play a great role in your mobile phone. Scroll down the list of pictures to the part where the description (E) says "icons".
Browse through the icons and select the one you want to edit and click "edit GIF".
Static icons are sized default at 33x33 while animated icons are sized default at 41x41.
It is not recommended for you to change the default size of the icons, unless you are an exprienced skinner.
Animated icons contain animation and the default animated icons have 3 loops.
Animated Icons and saved as "Animated GIF format" and are played by frames.
For more infomation on creating animated icons, please press F1 on you image editor/creator tool for help.
Note: Skinner4Moto does not play the animation in the image preview area.


[1] On your external image editor, you will be seeing something like this, on editing Animated icons. The list shows the total number of frames that are inside the animated GIF
[2] Here, it is the speed of each frame animation, 1 is the fastest while a larger number will be slower.
[3] Default GIF animations have 3 loops, you can choose the number of times you want your icon animation to loop.

<back to top>

4. Huge Icons
Creating huge icons! Eyecandy and ultra large expericence.
For this guide, i'll use iTigerWB eyecandy edition as example
I've made my icons 38x38 and rollover icons 54x54 (average size).
After finish making, i've uploaded them into the skin and everytime there would be a pop-up saying
"Wrong dimensions! Insert anyway?" Just continue clicking yes yes yes.
Ok, now goto "47.gif" description "curson of icon" and edit the image.
Set the size to 55x55 and if your icons do not have a border, set it to transparent and replace the extisting file.
Now, goto "structures" area. You will see two list area
Select line 42, which contains the values for before rollover icons(refer to picture)


Change the values for the picture size, repeat the process for line 43 which contains the values of rollover icons.
<back to top>

5. Advanced Editing
Advanced editing. Removing operator text/logo, changing font/line colours, and joystick/date/icon position etc.

5.1 Removing Operator Text/Logo

Removing operator text/logo is easy with Skinner4Moto, On GroupedElements, click operator font. Make all their Transparency value "255" and the operator text/logo is removed.
Note for ROKR E1/i398: Operator text will be changed to song name when you are using iTunes, and will be showed even if the transparency is 255 for all.
<back to top>

5.2 Changing date/digitalC/analogC positions

[1] Again, on GroupedElements select "Date font"
[2] Change the colour, outline and transparency there
[3] Change the positon of the date and on the screenshot area, you will see the position of the date
<back to top>

For changing Analog Clock

[1] Select "Clock Analog"
[2] You can change the position of the analog clock and you can see it move to the x,y positon on the ScreenShot area
[3] Changing the colour of the Second/Minute hand of the analog clock, also you can change transparency and the length of the hand
[4] Changes are being displayed on the screenshot area
<back to top>

5.3 Changing colour/position of soft key buttons

Again, changing colours of font and transparency in the softkey buttons (above)


Changing Alignment of softkey. Options are "Left" "Middle" "Right" in German.
<back to top>

5.4 Changing of joystick position and location

Change the "Normal" and "Pressed" joystick positon location. The screen shot is able to display its "Normal" and "Pressed" location, you'll need to check the "joystick up/down/left/right" area to see its "Pressed" location

<back to top>

6. Final Touches
Final touches to finish up your skins.
Head back to "SKI" area. On the top, you'll see lots of grouped elements - wallpapers, bg colour, operator font etc.
Now, Click on each of the following and them change them. Create a wallpaper with 176x220 size (or 240x320) and change it.
You'll see the wallpaper you've uploaded on the screenshot area.
Also, if you are using ROKR E1 or i398 that has /c/, be sure to change the skin directory instead of /a/ into /c/.

<back to top>

A guide by fearsim, and skinner4moto by knapster (thank you for creating such a wondeful tool)
Skinner4Moto is a freeware, for more infomation please visit skinner4moto.de.vu
Tutorial made using Macromedia dreamweaver and fireworks.

All Rights Reserved. Orginal content and layout by quentinsim parts or whole of this article or screenshots may not be reproduced without piror permission from the author. site hosted by freewebs.com, images by photobucket.com
[c] copyright2005-2006 | quentinsim