Skinning Bible ! P2K05 phones ! Tips and Tricks !

[Paule]

*************************
Created by: Paule
Source: Motoevolution.net
*************************

The beginning:

Hey everyone,

Well this time I'm gonna share my skinning skills and knowledge, in this post, I'll add the whole tips and tricks that I found on different skins that I've been doing to motivate you to create more skins.

This is a tribute to Rasputin007 who started the V3X skinning along time ago.


Let's get it started:


New Main Menu List mode view.

Now I release the way to edit the list mode view main menu, for the people who uses my previous skins, should be familiar this stuff, but fr the people who doesn't use my skins, here's how,

Normal List View:



New List Mode View:



As you see there's a big difference between them, basically, I want you guys to create new skins with new structure, that's the purpose

How to do it:

Open up the S4M-Xtreme and select the Maxx-Xtreme module or V9-Xtreme module, then go to "Structures" and find the ID 67 and 78

The ID 67 manages the size of the container of the text font of the list view and the space between icons.

The ID 78 manages the image showed: 75.gif

What you have to do is "DELETE" the rows 5, 6 and 7 from the ID 67 and 78 to continue the size edition.



al last there will be 4 rows and we're gonna edit the following values

ID 67 ------> text container / icon



ID 78 ------> image container 75.gif



While doing this mod, you have to be ready on image edit 75.gif increasing the sizes to 220x55 pixeles, the images for list view mode to 49x49 pixels (Here's a pack with edited icons) and the image 1672.gif to 240x55 pixels.

************************************************** ***********

Personalized Logo

I managed to get this working but it's just improvised, saddly it doesn't support animated images.

The sizes and images that I used for this mod are the pointers showed when joystick keys are pressed here's a screenshot:



And modding the structure I could did this little things:

Persolanized Logo





Joystick's background



(Background image method I use it for icons trick, to avoid the borders from gif images)

Procedure for personalized logo:

Open S4M and then go to Position/Size and find the following ID's.

ID 1293 ----> Image container 1301.gif up joystick normal
ID 1294 ----> Image container 1302.gif up joystick pressed
ID 1295 ----> Image container 1303.gif down joystick normal
ID 1296 ----> Image container 1304.gif down joystick pressed
ID 1297 ----> Image container 1305.gif left joystick normal
ID 1298 ----> Image container 1306.gif left joystick pressed
ID 1299 ----> Image container 1307.gif right joystick normal
ID 1300 ----> Image container 1307.gif right joystick pressed

Now you can choose the size and position needed, the following are the parameters used for the personalized logo used on Maxx R³ Light for Russotothemaxx 3.



Here I edited the image sizes to 25x25 pixeles remember to edit the images to let you use your own logo, the images to edit are: 1301.gif, 1302.gif, 1303.gif, 1304.gif, 1305.gif, 1306.gif, 1307.gif, 1308.gif


Procedure for background's joystick:

At this part I'm gonna explain the basics, you have to work with your style.

2 things to do:

• Delete the ID for joysticks pressed (to avoid bugs)
• The icons size doesn't have to be bigger than the containers for joysticks.

Here's what I did for Lumix Skin:



Now I've managed to create a background to match with the joysticks, you have to use Photoshop(or something) to edit the 1301.gif, 1302.gif, 1303.gif, 1304.gif, 1305.gif, 1306.gif, 1307.gif, 1308.gif resizing the images to 70 x 51 pixels (Here's a PSD for you to check how I create my images and the gif images)

Now you have to edit the joystick's size




Joystick up normal:




Joystick down normal:




Joystick left normal:




Joystick right normal:




Joystick up, down, left, right pressed



As you see the pressed keys are on "0" because if you put another size, the skin will be screwed up, once you have your edits, move your Clock analog and everything to make it match.

************************************************** ***********

Calculator Full View Mode

The people who uses the IPhone skin, will have the new mode, for the people who don't, I show you the new calculator:



Here I did a lot of work to make it look like an IPhone,the bad thing about this mod is we have to delete some images needed for the skin, but I figured out how to fix it.

Open S4M and go to Position/Size find the following IDs from calculator and edit them using as guide this image.



In the gif images I managed myself to do the Plus and artimethic icons, I deleted the originals cause they were causing some bugs, (here's the psd file PSD for the calculator and the images for the calculator's numbers)

Here's the bad thing about this mod, we have to edit the images sizes showed in the calculator, media player, camera etc.



These are the ID 1146, 1147, 1148, 1149, 1151, 1151 put them all as the image shows:



Now you have to move them to make it match with the image background, see below:



Here's the PSD for you to let you understand better:

Modify this is a desicion yours.

*************************************************

Vista Sub-menu iconos

aquí les explicare como modificar la vista del sub-menú de iconos aquí unas imágenes para que vean de que hablo:

Vista sub-menú predeterminada:




Vista sub-menú modificada:




en esta parte hay que editar los ID de la estructura y las imágenes de los contenedores, no todas las modificaciones que hagan funcionara en el V3x (su estructura a veces no soporta este tipo de modificaciones) explicare paso a paso las diferentes ediciones.

MOD del Skin EVO X - IPHONE

abrimos el S4M y vamos a la pestaña Position/Size y buscamos los siguientes ID:

• ID 492 ----> Contenedor de imagen 496.gif
• ID 493 ----> Contenedor de iconos sub-menú (este determina la vista del sub-menú dentro del sub-menú, ejemplo:programación/conectividad)
• ID 494 ----> Contenedor de imagen 497.gif (fondo del sub-menú vista de iconos)
• ID 495 ----> Contenedor del texto titulo del sub-menú este debe estar dentro de los parámetros del ID 492(en el skin Evo-X iphone lo des-habilite)
• ID 1566 ---> Contenedor de la scrollbar de la vista de sub-menú

y editamos los parámetros según la imagen:





recuerden editar las dimensiones de las imágenes que pertenecen a la vista de sub-menú (496.gif = 240x20 pixeles y 497.gif = 240x257 pixeles) ahora editaremos las posiciones y tamaños de los iconos.

Vamos a la pestaña Structures y buscamos:

• ID 1443 ----> Contenedor iconos estáticos vista sub-menú, 4 iconos
• ID 1444 ----> Contenedor iconos animados vista sub-menú, 4 iconos
• ID 1445 ----> Contenedor iconos estáticos vista sub-menú, 6 iconos
• ID 1446 ----> Contenedor iconos animados vista sub-menú, 6 iconos

y editamos los parámetros según la imagen:

ID 1443



ID 1444



ID 1445



ID 1446



Nota: los tamaños de los iconos estáticos son de 100x63 pixeles y los animados son de 63x63 pixeles esto es solo para el skin iphone ustedes pueden agregar las dimensiones que desean teniendo en cuenta que deben encajar los iconos animados y estáticos

ahora aquí un tip que deben tener en cuenta, al colocar el fondo de los iconos imagen 497.gif, debe ser la misma que la imagen 459.gif ya que si no lo hacen se creara un pequeño bug por la transparencia que hay entre los iconos animados y los estáticos.


MOD del Skin EVO - Windows7

aqui explico un detalle el cual me hizo pensar mucho para que se concretara este skin ya que al modificar la estructura tenia un bug horrible y era que el titulo del submenu nunca encajaba al entrar al submenu programación/conectividad (esto es solo para los Synergy, en el V3x este mod no funciona)

abrimos el S4M y vamos a la pestaña Position/Size y buscamos los siguientes ID:

• ID 492 ----> Contenedor de imagen 496.gif
• ID 493 ----> Contenedor de iconos sub-menú (este determina la vista del sub-menú dentro del sub-menú, ejemplo:programación/conectividad)
• ID 494 ----> Contenedor de imagen 497.gif (fondo del sub-menú vista de iconos)
• ID 495 ----> Contenedor del texto titulo del sub-menú este debe estar dentro de los parámetros del ID 492

y editamos según la imagen:



aquí lo mas importante es el ID 493, este debe estar en "0" así no habrá el bug en el titulo del sub-menú

recuerden editar las dimensiones de las imágenes que pertenecen a la vista de sub-menú (496.gif = 240x33 pixeles y 497.gif = 240x242 pixeles) ahora solo editaremos los iconos animados y los estáticos los dejamos default.

vamos a la pestaña Structures y buscamos los ID 1444 y 1446 y eliminamos elementos dejando solo un elemento en cada id:



Ahora colocamos los parámetros según la imagen:

ID 1444 y 1446



ahora un dato, al mover el icono animado de la posición del icono estático debemos hacer este tip, editaremos la imagen 47.gif y le damos la misma dimensión que el icono estático y agregamos algún logo basado en el skin.



así remplaza el espacio vacío que dejamos al mover el icono animado.


************************************************** *********

Edición del Menú principal

en esta parte les explicare como editar el menú principal, ustedes pueden hacer lo que deseen en esta parte pero hay reglas que respetar para ello, aquí unas caps comparando el menú predeterminado y los menúes modificados:

Menú Principal predeterminado:




Menú Principal Modificado:



Como verán hay muchísimas opciones de edición del menú principal, esto depende se su creatividad y dedicación, ahora explicare como realice el MOD del skin EVO - Crystal Carbón


MOD del Skin EVO - Crystal Carbon

Aquí debemos editar los Siguientes ID:

ID 44 ----> Contenedor de imagen 46.gif (imagen de fondo del titulo del menú)



Aquí edite la imagen para que también trabaje como fondo del menú principal pero hay que realizar un tip para que no generen bug's a la hora de ver el skin, la imagen de fondo 1564.jpg debe ser la misma que la imagen 46.gif y debemos editar el ID 1553 y en transparencia colocar el valor 255





ID 45 ----> contenedor del Texto del título del menú





las sofkeys las edite para que puedan entrar los iconos estáticos en una fila vertical (mas adelante explicare como), pueden usar la herramienta directa de Groups elements o simplemente se dirigen a Position/Size, yo los modifico desde Position/Size:



ID 651 ----> botón softkey izq. normal imagen 652.gif


ID 654 ----> botón softkey izq. presionado imagen 631.gif


ID 655 ----> botón softkey izq. Texto presionado


ID 658 ----> botón softkey izq. normal imagen 630.gif


ID 659 ----> botón softkey izq. Texto normal


ID 660 ----> botón softkey der. Texto normal


ID 663 ----> botón softkey der. normal imagen 634.gif


ID 666 ----> botón softkey der. presionado imagen 635.gif


ID 667 ----> botón softkey der. Texto presionado


ID 670 ----> botón softkey der. normal imagen 664.gif


un poco complicado pero no imposible, ahora les prodecere a explicar la edicion de los iconos del menu principal, este skin es de estructura 12x1 (12 iconos estáticos y 1 icono animado) y para mi fue el mas complicado de editar por eso pongo de ejemplo este skin.

aquí explico algo muy importante, los iconos estáticos no son iguales a las dimensiones del contenedor de los iconos estáticos, los iconos son de medidas 57x57 pixeles y el contenedor es de 23x23 pixeles.

esto lo hice para que en el menu principal se vea de esta manera:


y al entrar a la vista de submenu se vea de esta manera:


les explico en el menú principal el contenedor siempre ejecutara la imagen del icono desde el centro y eso nos ayuda a tener esa apariencia:


a los iconos animados le di una dimensión de 192x206 pixeles para el menú principal, pero en la vista de sub-menú iconos el contenedor tiene las dimensiones de 57x57 pixeles, en este caso en la vista de submenu el contenedor ejecutara la imagen desde la parte superior izquierda por eso ustedes verán esta apariencia:


osea en la imagen animada seria de esta manera:


como veran la estructura en los synergy se puede acomodar con tan solo un poco de ingenio.

nota: esta modificacion no funciona en el V3x, el motivo es por que su estructura no contiene la imagen, les dejo una captura del bug que se genera al realizar este mod en un skin para v3x.


por ultimo un detalle para generar un borde al icono seleccionado usaremos la imagen 47.gif, en los iconos estáticos la imagen se ejecutara desde la parte superior izquierda, con eso suplantamos el icono animado que movimos para este skin, ahora en la vista de submenu iconos el contenedor del icono estático tiene 60x60 pixeles y la imagen del icono tiene 57x57 dejando 1 pixel en ambos lados libre, al seleccionar algún icono este tiene en su contenedor 57x57, esto es para que la imagen 47.gif pueda hacer su trabajo y mostrarse (debe tener la misma medida que el contenedor de iconos estáticos), les dejo unas imágenes de ejemplo:





bueno así trabaja la estructura del skin en los synergy, memorizando tu funcion podemos crear diferentes menúes, ahora pasamos a la configuracion de los parametros de los iconos animado y estáticos.


Vamos a la pestaña Structures y buscamos los siguientes ID:

ID 1722 ---> Contenedor de iconos estáticos
ID 1723 ---> Contenedor de iconos animados

ID 1722



ID 1723 (aquí eliminamos elementos y solo dejamos uno)


con esto configure los iconos del menú ahora para que todo quede perfecto debemos ordenar las direcciones de movimiento arriba, abajo, izquierda, derecha, esto lo hacemos en los ID 1724, 1725, 1726, 1727



aquí es fácil solo deben estar posicionados en un icono y ustedes deciden que icono seleccionara si mueven el cursor (colocare una imagen predeterminada como ejemplo), los valores se generan en números:





y por ultimo solo debemos configurar que icono saldrá seleccionado al entrar al menú principal, vamos a la pestaña "Numeric Value" y editamos el ID 56, solo editamos el valor numérico del icono que deseamos (tiene que ser el Numeric Value)



y así termino la parte mas difícil de un skin, el menú principal.

************************************************** *****

Edición ventana de volumen

Bueno aqui les enseñare como edite las ventanas de volumen en el skin EVO X - Iphone & EVO - Lumix.

vista predeterminada:




vista modificada:



aquí explico una cosa el modificar la ventana de volumen es muy difícil por que los punteros de volumen no tienen un contenedor y en el S4M estos se encuentran fuera de posición con respecto al skin, hay un tutorial que repara este tipo de problema en los K1/Z3 pero no funciona para los synergy ya que si nosotros le colocamos un valor negativo estos desaparecen, yo solo acomode los punteros y eso me obligo a mover varios ID para que pueda quedar presentables, yo no recomiendo hacer este mod ya que te puede causar mas de un dolor de cabeza, pero lo comparto para ver si alguien pueda encontrar el contenedor de los punteros.

en esta parte editaremos las ventanas de volumen emergente y ventana de volumen timbre/java

la diferencia de estas dos es que la del volumen emergente tiene una posición mas arriba de la de volumen de timbres/java no tiene las mismas coordenadas para ser exactos, por eso de deben editar sus ID correspondientes, les explicare como trabajan los ID de las ventanas:


vamos a la pestaña Position/Size y buscamos los ID que trabajan en la ventana emergente:

ID 276 ----> Contenedor Texto numero del volumen
ID 536 ----> Contenedor imagen 538.gif
ID 539 ----> Contenedor titulo ventana emergente
ID 540 ----> Contenedor icono ventana volumen emergente


vamos a la pestaña Position/Size y buscamos los ID que trabajan en la ventana timbres/java:

ID 187 ----> Contenedor Texto número del volumen timbres/java
ID 518 ----> Contenedor imagen 522.gif
ID 520 ----> Contenedor titulo ventana timbres/java
ID 521 ----> Contenedor icono ventana volumen timbres/java

Y estos ID trabajan con las dos ventanas de volumen:

ID 1542 ---> Contenedor puntero arriba imagen 99.gif, 101.gif ventana emergente/timbres/java
ID 1543 ---> Contenedor puntero abajo imagen 100.gif, 102.gif ventana emergente/timbres/java

Vamos a la pestaña Structures y buscamos el ID 1541 (este determina los punteros del volumen)

ahora aquí las diferencias entre las dos ventanas:



tienes una diferencia de 17 pixeles entre ambas, eso origina que los punteros de los ID 1542, 1543, 1541 también bajen 17 pixeles, no hay una explicación para esto pero es lo que observe.

ahora les explicare como estan colocados visualmente las posiciones de los ID de la ventana de volumen emergente en el S4M.

Así se ven los ID 276, 536, 539, 540 en el S4M y así también se ve en el teléfono:



y así se ven los ID 1542, 1543, 1541 en el S4M y así debería quedar en el teléfono:



como verán esos ID son los únicos que no coinciden con las coordenadas del teléfono y no encontré el contenedor de esos ID, nosotros solos debemos acomodar los ID 1542, 1543, 1541 y cuando ya estemos satisfechos con las coordenadas que les dimos procedemos a editar los ID ID 276, 536, 539, 540 para encajarlos

nuestra área de trabajo en el S4M para los ID 1542, 1543, 1541 serian estas coordenadas:



solo tenemos para poder trabajar en el S4M 70 pixeles de ancho y 130 pixeles de alto, entre esos parámetros podemos trabajar esos ID.

bueno aqui explique como trabajan las ventanas de volumen en el skin, ahora les doy el mod de las ventana de volumen.

Mod Ventanas de volumen skin EVO X - Iphone:

la imagen para los 522.gif y 538.gif fue esta:


Colocamos los siguientes parámetros a los ID de las ventanas de volumen y timbres/java.

V. Emergente




V. Timbres/Java




ahora procedemos a editar los punteros de volumen y direccionales:

ID 1542, 1543 aquí solo oculte el contenedor de los direccionales.


ID 1541


recuerden editar las imágenes 103.gif y 104.gif según las dimensiones establecidas en los ID

con esto ya tenemos editados los parámetros del volumen, recuerden que la ventana de volumen timbres/java esta 17 pixeles mas abajo que la de volumen emergente.

Mod Ventanas de volumen skin EVO - Lumix:

Aquí si me causo un dolor de cabeza el realizar este tipo de volumen, este diseño lo copie del manual de LFM en la introducción de los skin 176x220 y deseaba que sea igual en los 240x320, trate de hacerlo lo mas similar posible así que aquí les doy los parámetros de los ID.

esta fue la imagen que use para los 522.gif y 538.gif:


editando los parámetros :

V. emergente



V. timbres/java




ID 1542, 1543


ID 1541


con los parámetros que les di les quedara de esta manera en el S4M:


y así edite los parámetros para la ventana de volumen del skin Lumix.



Resumen:

bueno con esto termino este post, mi objetivo es que ustedes entiendan la estructura de los skin y salgan nuevas creaciones en el cual se evolucione en el skinning de mi parte tratare de seguir aportando en lo que pueda y asi mejorar la calidad de skin para nuestros motorolas, espero que les ayude y no muera el skinning en los P2K05 240x320, agradeciendo a todos los que me motivaron en mis trabajos y a mejorar cada día a ellos mil gracias

saludos, Paule

Note: This guide is in Spanish, waiting for the translation of my brother Russoeternal

greetings

[berniesteven]

Thanks Paule. Can't wait for the english version!

[Russoeternal]

I'm writing the english version, should be done tonight.

[Paule]

and finish this guide, one is waiting for the translation into English.

I hope they help in creating skins.

greetings

[Semseddin]

Fantastic information paule bro, many thanks !

[Russoeternal]

Yikes, I'm still translating, it's allot

[ShackPole]

Looks to be a great guide, can't wait for the English translation...