TUTORIAL:Como crear tus propios skins(facil y con dibujitos)

[tuchile]

Este es el unico tema donde encontraras Skins base transparentes y no los que solo tienen fondo blanco, espero disfruten de mi 2do aporte masivo para la comunidad de TopSony (el primero fue: TUTORIAL:Como activar MENUS FLASH (facil y con dibujitos))

Antes una lista de telefonos con soporte de skins para el walkman player 2.0 y sus dichas resoluciones de pantalla:

Modelo Resolución de pantalla

W350 Si...............176x220
w380 Si................176x220
w580 Si................240x320
w610 Si................176x220
w660 Si................176x220
w830 Si................240x320
w850 Si................240x320
w880 Si................240x320
w888 Si................240x320
K550@W610 Si......176x220
K610@W660 Si......176x220
S500@W580 Si......240x320

Nota: Aquellas personas que deseen saber si su telefono soporta skins Walkman 2.0 debe verificar que su telefono se encuentre en la lista, si no es así revisar que tenga la cualidad de usar skins en el Walkman Player.

MATERIAL:

Paint.net (así se llama el programa, no es una pagina)
Compresor de imagenes PNG
Imagenes que deseas utilizar para hacer tu skin
Sony Ericsson Themes Creator (solo para elegir los colores que desees usar)

Aclaración: El skin que se aprendera a hacer es muy sencillo, solo para principiantes si lo desean pueden acer transparante un skin y solo dejar el marco de la caratula y reproducción con pain.net seleccionando y presionando la tecla "Supr", esto borrara el relleno y dejara el skin transparente.

Comencemos:

1.- Primero que nada descargamos el editor de imagenes mencionado (Paint.net), abrimos la imagen que queremos de fondo para nuestro skin.

2.- Una vez que ya abrimos la imagen principal debemos de checar que tenga la resolución adecuada para la pantalla de nuestro Sony Ericsson esto se puede cheacar en la parte inferior del programa.

3.- Si no es una de las mencionadas anteriormente para cada modelo de celular, la adaptamos al tamaño que deseamos llendo al botón "imagen>cambiar tamaño" y si tienen palomeada la opción "mantener la relacion de aspecto" la desmarcan y escriben la resolución para su modelo, en mi caso 240x320.

4.- Nos dirigimos a la pestaña que dice: capas>importar desde archivo.

5.- Buscamos la imagen principal del skin base "PlayView_Background.png" y la seleccionamos, esto dejara nuestro skin base encima de la imagen (si desean pueden editar los colores del skin base con Panit.net).

6.- Despues de crear nuestra imagen principal para el skin, la guardan como archivo png; realizan lo mismo con las imagenes restantes pero tomando en cuenta sus distintas dimensiones, acontinuacion una tabla de tamaños de imagenes para distintas pantallas y así puedan resolucionar sus propias imagenes, deben usar las resoluciones mencionadas para que se vean bien, por ejemplo: mi imagen XXXX.png de 156*254 pixeles la quiero usar para hacer la de PlayNow_Background.png, entonces debo convertir la de XXXX.png de 156*254 a 176*176 pixeles para que enbone en la pantalla de mi reproductor.

Skins para 176*220:

PlayView_Background.png..............176*220
PlayNow_Background.png...............176*176
BrowseView_Background.png.........176*220
Play_Icon.png................................20*16
Stop_Icon.png...............................20*16
FF_Icon.png..................................20*16
Rewind_Icon.png...........................20*16

Skins para 240*320:

PlayView_Background.png.............240*320
PlayNow_Background.png..............240*226 (o 240*266)Gracias kathy96
BrowseView_Background.png........240*320
Play_Icon.png...............................20*20
Stop_Icon.png..............................20*20
FF_Icon.png.................................20*20
Rewind_Icon.png..........................20*20

Funciones de cada imagen:

*PlayView_Background.png(Imagen principal del reproductor)

*PlayNow_Background.png(Fondo del selector de canciones al
presionar abajo o arriba)

*BrowseView_Background.png(Fondo del navegador walkman)

*Play_Icon.png(Icono de Reproduciendo)

*Stop_Icon.png(Icono de Detenido)

*FF_Icon.png(Icono de Adelantando)

*Rewind_Icon.png(Icono de Retrasando)

7.- Una vez que ya terminamos de hacer las tres imagenes del reproductor (PlayView_Background.png,PlayNow_Background.png,Br owseView_Background.png) las agregamos al compresor de PNG para comprimirlas.


8.-Ahora agregamos las imagenes de los iconos de reproducción (Play_Icon.png,Stop_Icon.png,FF_Icon.png,Rewind_Ic on.png) junto con las tres pasadas en una carpeta para semifinalizar nuestro skin, deben revisar que la imagenes tengan los nombres adecuados para que el celular reconozca el skin completo.

9.-Despues y por ultimo editamos el "SKIN.XML" poniendo el nombre que queramos para nuestro skin.

10.-Si desean editar los colores del skin en el archivo SKIN.XML, por ejemplo:

<!-- Browser -->
<color id="browser.foreground" colorref="0xFFFFFFFF"/>
<color id="browser.background" colorref="0xFFFFFFFF"/>
<color id="browser.disabled" colorref="0xFFFFFFFF"/> <-------- este dato "0xFFFFFFFF" pueden buscarlo en el Sony Ericsson Creator Themes, abren el programa, seleccionan un color y copian el codigo, y lo reemplazan por el que seleccionaron, en mi caso es "0xFFFFFFFF" .

El 0xFFFFFFFF significa:

0= Negro
X=enlace entre dos colores
FFFFFFFF= color blanco

De preferencia solo cambien las FFFFFFF.



P.D. Agradesco por el aporte de PNGout(no recuerdo que usuario, disculpa)

<!-- Audio -->

<color id="audio.artist" colorref="0xFFFFFFFF"/> este es el color del nombre del artista
<color id="audio.title" colorref="0xFFFFFFFF"/> el color del titulo de la cancion
<color id="audio.album" colorref="0xFFFFFFFF"/>el color del nombre del album.No de caratula.
<color id="audio.time" colorref="0xFFFFFFFF"/>color del tiempo del tema
<color id="audio.songnumber" colorref="0xFFFFFFFF"/>número de cancion
<color id="audio.mode" colorref="0xFFFFFFFF"/>el color del modo de reproduccion
<color id="audio.progress.background" colorref="0xFFFFFFFF"/>el color del fondo de la barra de progreso
<color id="audio.progress.fill" colorref="0xFF080808"/>el relleno de la barra de progreso.

en la lista de reproduccion (cuando apretas para abajo o arriba mientras se reproduce)
<color id="audio.playlist.item" colorref="0xFFFFFFFF"/>el color de los temas que aparecen en la lista de reproducción
<color id="audio.playlist.playing" colorref="0xFF50c90d"/>color del que se esta reproduciendo
<color id="audio.playlist.highlight" colorref="0xFFFF7800"/>color del tema en el que se esta parado.

Gracias a crhistianl

[Style]

Para aclarar dudas y para la discusion en general de este tutorial utilisar el tema:

Discusion: TUTORIAL:Como crear tus propios skins(facil y con dibujitos)