3 pasos para skin

3 pasos para q hagan sus skin bien personalizado pero son mas codigos:

Como Hacer un Skin - Parte 1

TERMINOS BASICOS

Como primera observacion les diré que este tuto está guiado a diseñar skins solo para la versión 8.5 del programa, por que?, porque es la ultima publicacion del programa, que No está en fase BETA, es decir ya es una versión consolidada y su estructura y codigo no van a cambiar, como si es posible con las futuras versiones, así que no nos arriesgaremos a hacer un skin para el WLM 9.0 BETA, sin saber si será compatible con la versión final.

Crear skins se resume en reemplazar/modificar/agregar recursos de/al interfaz del programa mismo, incluyendo imagenes, bitmaps, iconos, lineas de texto, menús, etc...

Ahora les diré lo que necesitarán, se podría decir que aparte de las imagenes que quieran implementar en su skin, la mayor parte de su tiempo la dedicaran a los archivos de sistema que utiliza el propio skin, estos son archivos de texto, los cuales para comenzar, editaremos en el Bloc de Notas del Windows, digo para comenzar pues el bloc trae una desventaja principal y es que solo tiene un nivel de "Deshacer" lo cual no hace muy eficiente nuestro trabajo, maxime cuando tengamos que editar cientos de lineas de codigo, y sabiendo que cualquier caracter mal escrito puede arruinar nuestro trabajo, aunque para efectos de esta primera prueba nos vendrá muy bien el Bloc, de hecho yo he trabajado todos mis skins en el mismo, solo que hay que ser muy cuidadosos, el gran felipEx ha aportado algunas herramientas muy utiles a la hora de hacer skins aqui:

Contenido Oculto, debes [Solo usuarios registrados a DowntWarez.Com puede ver los links. ] para poder ver lo que hay dentro :)

Los Archivos de sistema, son la base o esqueleto de los skins, dichos archivos son los siguientes:

***
SkinInfo.xml: Es el archivo más importante del Skin ya que además de contener información del skin (nombre, descripción, autor, etc..), tiene también información sobre los recursos (colores, imagenes, textos, definiciones y estilos de ventanas) que MsgPlus! debe agregar/reemplazar. Es el más importante por que sin él MsgPlus! no reconocería tu skin como tal.

Definition y Styles (Definiciones y Estilos)
Los archivos de definición (Definition) y los de estilo (Style) se pueden comparar un poco con HTML y Hojas de estilo en cascada (CSS) puesto que el primero lo usamos generalmente para definir cosas como botones o ventanas, y el segundo para aplicarle cierto formato como color... actualmente se puede hacer casi todo en los archivos de definición pero por cuestiones de "organización" es preferible definir los objetos (botones, ventanas, textos, etc..) en los archivos de definición y darle formato en los archivos de Estilo.

Los archivos de definición están restringidos sólo a XML y nada más; en los archivos de estilo podemos incluso hasta dejar comentarios en el codigo que a la larga nos facilite identificar el proposito de cierta línea. por ejemplo:


- Así por ejemplo en SkinInfo definiremos que ventanas deseamos modificar declarando los archivos de definicion pertenecienteas a dichas ventanas.

- En el archivo de definición declararemos los elementos que contendrá cada ventana.

- Y en el Archivo Style declararemos como actuarán dichos elementos, es decir sus atributos.

Primero necesitaremos darnos cuenta de la manera como el programa organiza sus recursos, para esto el plus nos ofrece extractar los recursos del programa separados en carpetas independientes para cada ventana, es decir que en dichas carpetas podremos visualizar con detalle cada uno de los items que componen cada ventana del messenger.

Este paso es necesario, así que abran su WLM y vayan al menú "Plus", luego a "Preferencias" - "Personalizar" - "Skins" - y en la parte inferior de esta ventana encontrarán un botón que dice "Extraer Recursos" a continuación tendrán otra ventana como esta:



... donde han de seleccionar todas las opciones excepto "Extraer archivos de interfaz de Messenger Plus! ". Click a "Exportar" si se fijan los recursos se han extractado a la carpeta que hemos señalado, si no eligieron otra ubicación, debe de encontrarse en la carpeta "Mis Documentos" con el nombre "Recursos de Messenger 8.5..." esta carpeta, recalco es de importancia para nosotros pues es como el mapa para saber que recursos queremos cambiar y en donde se encuentran sus definiciones y estilos.

Dentro de esta carpeta encontrarán una serie de subcarpetas:



la de mayor significado para nosotros será la llamada "Consolidated Windows" y en menor medida la llamada "Graphics", hablemos de la primera...

|- Consolidated windows:
Dentro de esta carpeta encontramos una serie de subcarpetas que contienen los nombres de cada ventana del programa.



Por ejemplo la ventana de "Logon" o inicio de Sesión, se identifica con el numero 947 es decir la carpeta que tiene nombre "947(logonFrame)".

Accedan a esta carpeta y allí encontrarán tres elementos:

- 947 Definition -----> El archivo de definicion de la ventana de "Logon"

- 947 Style ----------> El archivo estilo que complementa el de defición

- Carpeta "Pictures"--> Accedan a esta carpeta y se darán cuenta de que las imagenes que encontramos allí son las mismas que podemos apreciar al iniciar sesíon en nuestro MSN, por ejemplo los marcos de las ventanas con nombres (1524, 1525 y 1526,) o la imagen con nombre "20061" que pertenece a la imagen de fondo que vemos en la misma ventana de inicio de sesión.

Así como el "id" (identificación) de la ventana de "Logon" o inicio de sesión es "947", el que corresponde a la ventana de "Lista de contactos" es el "id 923", así que vuelvan sobre sus pasos y ahora busquen la carpeta llamada "923(mainwnd)", accedan a ella y encontrarán algo similar a la anterior carpeta, a diferencia que son archivos y recursos utilizados solamente en la ventana de "Lista de contactos", aquí veremos lo siguiente:

- 923 Definition -----> El archivo de definicion de la "Lista de Contactos"

- 923 Style ----------> El archivo estilo que complementa el de defición

- Carpeta "Pictures"--> Estas imagenes son las mismas que encontramos en la ventana de "Lista de contactos", por ejemplo las imagenes con nombre "636", "637" y "640" son las barras que vemos en la parte superior de la lista de contactos (encima y debajo del nick y mensaje personales.

...Bien, así mismo pueden encontrar cada una de las ventanas que hay en el messenger, dentro de la carpeta "Consolidated Windows". Tengan en cuenta que cada una de las imagenes de las carpetas anteriores son las que podremos reemplazar desde nuestro skin.

|- Carpeta Graphics-->
Esta carpeta contiene a su vez 3 subcarpetas:

"Bitmaps", "Icons" y "Pictures", aquí se encuentran una serie de iconos e imagenes, que se utilizan en distintas ventanas, pero mas adelante editaremos estos recursos, por ahora solo la tomaremos como una referencia a futuro.

|- Carpeta Windows-->
Esta carpeta contiene los mismos recursos que la carpeta "Consolidated Windows" solo que no incluye los textos modificados en nuestro idioma, esta carpeta nos seria util solo si queremos que nuestro skin sea compatible con otros idiomas, diferentes al español, lo cual seria lo ideal (quién no quisiera encontrar que sus skins los usan hasta en la china),
pero es un tanto mas complicado trabajar con estos archivos que trabajar con los de las ventanas consolidadas (carpeta "consolidated windows"), en la que nos centraremos a lo largo de este tutorial.

Bueno ahora que sabemos como organiza el programa sus recursos, podemos entrar a la parte en que podemos modificar y reemplazar dichos recursos.

TU primer SKIN!... (suena bien no?)

No se preocupen si para cuando lleguen a esta linea se sienten Confundidos, más adelante volveran a leerlas y de seguro lo comprenderán todo.

VENTANA DE INICIO DE SESION

Esta será la primera parte del tutorial donde reemplazaremos algunos recursos de la ventana de inicio de sesión, en la cual nos concentraremos en esta primera parte, mas adelante prepararé la segunda y subsiguientes partes que contendrán información mas avanzada, referente a las demás ventanas, todo depende de nuestros avances, y digo nuestros por que aún me hace falta comprender aspectos mas avanzados de la programacion en XML, por ahora adentremonos en el codigo mismo.

Para empezar vayamos a esta ruta:

C:\Program Files\Messenger Plus! Live\Skins
dentro crearemos una carpeta con el nombre que tendrá nuestro Skin en adelante.

Nota: Debemos tener en cuenta que este nombre lo plasmaremos en diferentes archivos de texto (definiciones y estilos), por lo tanto los nombres deberán coincidir siempre con el de la carpeta del skin, por ejemplo para efectos de programación, será muy distinto escribir "Devil May Cry" a "deVIL MayCry", hay que tener especial cuidado en cada caracter que escribamos, pues un solo error de escritura puede enviar al traste todo nuestro trabajo.

por ahora llamaremos nuestra carpeta "miprimerskin", (sin comillas ya saben!)

ESTRUCTURA DE DIRECTORIOS

Dentro de esta carpeta "miprimerskin" crearemos las subcarpetas "images" y "uifiles" y dentro de esta ultima creamos dos subcarpetas mas, llamadas "definitions" y "styles", de tal forma que veamos el arbol de carpetas así:



Nota: Para efectos de este tutorial vamos a utilizar imagenes de mi skin de Devil May Cry, como ejemplo, les aconsejo utilizarlas hasta terminar esta parte del tutorial, con lo cual pueden cambiar las imagenes a su gusto, estas imagenes las pueden descargar de aquí:

Contenido Oculto, debes [Solo usuarios registrados a DowntWarez.Com puede ver los links. ] para poder ver lo que hay dentro :)

Despues, ubiquen las imagenes, SIN MODIFICAR sus nombres en la carpeta "images" de nuestro skin.

Ahora mismo crearemos nuestro primer archivo de sistema, el más importante "SkinInfo" (noten la escritura siempre!), así que inicien su bloc de notas y copien/peguen el siguiente texto:

Ahora voy a desglosar estas lineas de codigo para que entiendan que es lo que hemos hecho, aquí hay 3 bloques de interés, voy a detallar uno por uno comenzando con la informacion del propio skin:

Este bloque lista todo lo que los usuarios pudieran querer saber sobre el skin, por defecto todo lo que se necesita es un nombre (el mismo del skin), tambien se puede agregar otra informacion tal como una "Descripcion" de nuestro skin, la version del mismo y la pagina web del diseñador del skin (es decir nosotros jeje!).

El siguiente bloque es un grupo de recursos que podemos subdividir en 2 pequeñas partes, la primera de ellas:

En esta parte estamos declarando, que nuestro skin estará limitado al uso solo en la versión 8.5 del programa, por ahora como les explique antes, no agregaremos compatibilidad con las versiones mas recientes del WLM.

En el segundo bloque declaramos los recursos que serán reemplazados en Messenger, por ahora la imagen de fondo de la
ventana de logon del WLM:

Como les he comentado antes, cada item en messenger tiene un "id" (identificador), el cual es unico, así por ejemplo el identificador para el fondo de la ventana de "inicio de sesión" es "Id="20061".

Dense cuenta que en la linea "<File>http://www.downtwarez.com/foro/images/logonimage.png</File>" estamos declarando la ruta hacia la imagen que reemplazará la imagen por defecto del messenger, así que vamos a nuestra carpeta "images" y aseguremonos que la imagen "logonimage.png" está en su sitio.

Bien, llegamos al punto en el que deben guardar este texto, pero ¡Espereeen!, calma, antes unas cosas:



1|- Guarden el documento expresamente así: "SkinInfo.xml" (excepto comillas RECALCO!)

2|- En la parte inferior donde dice "Codificación", elijan la opción "UNICODE", esto para mejorar la velocidad de carga del skin, y para facilitar la escritura en cualquier idioma.

...Pero es mejor asegurarnos de que la extensión de nuestro archivo es la correcta, así que vayan al directorio de nuestro skin y miren las propiedades del mismo y revisen, de lo contrario puede haber problemas con nuestro skin.

OK, cuando creamos que todo está correctamente escrito, y que nuestras imagenes están en su lugar, podremos abrir nuestro MSN ir al menú "PLUS" - "Preferencias" - "Personalizar" - "Skins", y si todo ha ido bien, nuestro "miprimerskin" estará en la lista de skins disponibles, en tal caso seleccionenlo, reinicien el MSN y podrán ver si los cambios hechos funcionan.

Otra cosa es, cuando desafortunadamente no funcionan los cambios y al iniciar el messenger nos encontramos con la pantalla por defecto del messenger (la imagen degradada), cuando esperabamos encontrar algo totalmente distinto.

Lucky, que ha pasao?, me has mentido?, es esto una broma o algo parecido?, jeje. Nada de eso, en tal caso lo que puedo recomendar es, volver sobre nuestros pasos y revisar, cada una de las lineas buscando posibles errores en la escritura de las palabras y en la estructura del codigo, fijense si los nombres de las imagenes coinciden con lo declarado
en nuestro "SkinInfo", el nombre del skin en la parte superior del codigo, la ruta hacia las imagenes, puntos, comas, parentesis, en fin! (espero que no lleguen a este momento), vale decir que cada una de las cosas que les digo aquí, las estoy comprobando yo mismo, al pie de la letra, así que pueden confiar en que es algo probado.

Si por alguna razón, uno de los cambios que hagamos causa un error importante en messenger, las ventanas aparecerán en fondo negro, o no aparecerán del todo, además cuando un error es detectado en un archivo de definición o estilo, un reporte llamado Skin Trace.txt es creado en nuestro directorio "Skin", este archivo se crea automaticamante y es una descripción del error, más adelante podremos ahondar en este punto, por ahora si obtienen un archivo "Trace File", lo que pueden deducir es que existe algún error sujeto a escritura en los distintos archivos de sistema del skin, o en la ubicacion de las imagenes o archivos.

Resumiendo, esta es la manera como reemplazamos recursos en el messenger. lo siguiente será modificar algunos atributos visuales, por lo que seguiremos concentrados en la ventana de "Inicio de sesión".

ALGUNAS PROPIEDADES DE LOS ITEMS



Si son detallistas, se darán cuenta de inmediato que en nuestro skin existen algunas incongruencias, pero es normal, pues hasta ahora no hemos modificado a fondo y en detalle los elementos de esta ventana en especifico, estas incongruencias a las que me refiero son las siguientes:

Primero nos podremos dar cuenta que los textos de la ventana son casi inperceptibles debido al color de la fuente, esto es algo importantisimo pues, el usuario que tenga nuestro skin necesariamente se verá afectado por este problema, así que dependiendo de el fondo que utilicemos, nos compete aplicar un color que contraste lo suficiente como para que dichos textos sean legibles.

Ahora, si no lo han hecho, apliquen un color a las ventanas, desde la lista de contactos busquen el botón "Cambiar la combinación de colores" que tiene como icono un pincel y apliquen un color aleatorio, ahora reinicien su messenger y se darán cuenta, que la ventana de inicio de sesión también ha tomado dicho color.

Ese es el segunda incongruencia a la que me quiero referir, y es que el hecho de que nuestra o nuestras ventanas se "colorizen", no es mas que una de las tantas propiedades de los objetos, es decir que si así lo queremos, podemos evitar que las ventanas o los objetos tomen color.

Nos dedicaremos a solucionar esto en la proxima parte del tutorial, donde comenzaremos a utilizar los archivos de
definiciòn y estilos.

PROPIEDAD DE COLOR DEL TEXTO

Esta propiedad se llama "foreground" y define el color del texto, este tipo de propiedades las podremos editar en los archivos de estilo, asì que vayan de nuevo a su carpeta "Recursos de Messenger 8.5..." ingresen a la carpeta "Consolidated Windows" (Ventanas consolidadas) luego la carpeta "947(logonframe)", copiemos el archivo de estilo "947 Style" a "C:\Program Files\Messenger Plus! Live\Skins\miprimerskin\uifiles\styles" a donde deben ir los archivos de estilo.

Ahora abramos este archivo (que no los asuste la cantidad de lineas), y pulsando F3 busquemos esta linea:

Content:"Cuenta de correo e&lectrónico:";

lo cual nos llevarà a este bloque de codigo:

Aquì podemos ver que la linea de texto que dice "Cuenta de correo electronico", tiene tambièn un identificador llamado "ID=Atom(ai474)", así mismo cada elemento tiene su propio "identificador", a esta linea de codigò la vamos a complementar modificando la propiedad "Foreground", asì que vamos a cambiar el color por defecto del texto (negro) a un color blanco, para lo cual agregaremos esta linea al bloque anterior:

foreground:rgb(255,255,255);

con lo cual el bloque quedarà asì:


Ok, revisen que las lineas estén bien escritas, guarden el documento (no como antes, simplemente "Guardar", y se conservará la extensión).

Ahora es necesario declarar este archivo de estilos en nuestro archivo principal, es decir nuestro "SkinInfo", lo que logramos al hacer esto es señalar al programa que debe reemplazar el archivo de estilos original por el que hemos editado anteriormente (947 Style), para este fin volvamos a nuestro archivo "SkinInfo" y...

agreguemos este codigo después de ""</Graphics> y antes de </Replace>:

Asì nuestro SkinInfo se verà de esta manera:

Ahora les explico exactamente lo que hicimos con este nuevo bloque de codigo:


Nota: Al "Reemplazar" recursos, siempre agregaremos las lineas dentro de la restricciòn "<Replace>", asi lo hicimos para reemplazar Imagenes "<Graphics>" y ahora estilos de Ventana "<Windows>" y un subgrupo de estilos "<Styles>", que indica que vamos a reemplazar dicho archivo de estilo, el "947 Style" por el nuestro.

Bien, asegurense que todo está bien escrito, que el archivo de estilo este en su lugar (carpeta "uifiles/styles"), guardemos nuestros cambios en "SkinInfo", no hay necesidad de volver a guardar como XML, simplemente den "Guardar" y el archivo se actualizará con la misma extensión.

Y reinicien su messenger...

Espero que encuentren la imagen que todos esperamos ver (la de Devil May Cry o la que hayan puesto) si es así, muy bien, pero no se queden ahí, revisen si el color del texto "Cuenta de correo electronico" ha cambiado, ahora debe ser blanco, si es así bien, sino vayan inmediatamente a la carpeta de nuestro skin "miprimerskin" y miren si se ha creado un archivo de texto "Skin Trace.txt", si lo encuentran quiere decir que tenemos un error de escritura, bien sea dentro de los archivos
de sistema (SkinInfo, 947 Style) o en la estructura de las carpetas y sus nombres, más arriba la pueden revisar de nuevo, o en el nombre de la imagen.

Más adelante como les dije, nos dedicaremos a este archivo "Skin Trace" con detalle, por ahora lo tomaremos como referencia para saber que hay errores, si lo encuentran, borren este archivo, corrijan lo que crean conveniente y reinicien el MSN para ver si sus cambios corrigieron el problema, o si siguen obteniendo el "Skin Trace".

Ok, de esta misma manera pueden editar el color de los textos, de la ventana de "Inicio de sesión", ahora será mucho mas facil, pues todo lo haremos en el archivo de estilos que ya tenemos importado, entonces editemos varias lineas de codigo a la vez, logicamente tendrán que ser mas cuidadosos, entonces...

EN ESTE PUNTO HAGAMOS UN BACKUP (COPIA DE RESPALDO) DE NUESTROS ACRHIVOS. (copien la carpeta del skin y llevenla a "Mis doumentos" o al "Escritorio").

En adelante hay que tener mucho mas cuidado pues editaremos diversas lineas de codigo y ya saben que una letra o simbolo de mas o de menos... bueno no esta de mas repetirlo.

Abran el archivo de estilo de la ventana de inicio de sesión, lo que traduce, el "947 Style" en su carpeta "styles".

Recuerdan que les decia que el texto "Cuenta de correo electrónico" tenia un identificador?, esos identificadores no los tendrán que memorizar ni nada por el estilo, para esto utilizaremos algo de Intuición, mucho de Lógica, y algo de conocimiento del idioma inglés no vendría nada mal, pues podriamos asociar palabras a los elementos que estemos buscando.

ya hemos cambiado el color del texto a la linea "Cuenta de correo electronico", ahora pretendemos hacer lo mismo con la linea "Contraseña", para eso utilicen el buscador "Ctrl+ b", y busquen esta linea:



Recuerdan el codigo que agregamos a la anterior frase para cambiar el color a blanco?...
se los recuerdo: foreground:rgb(255,255,255);
Agreguemoslo ahora al bloque con lo cual nos quedaría algo como esto:


Perfecto, si guardamos ahora y reiniciamos el messenger podremos notar que la etiqueta "Contraseña" en efecto es ahora de color blanco, :bravo: pero sigamos con las demás etiquetas...

Nota: No es necesario cerrar el archivo que estamos editando, solo guardamos, reiniciamos el messenger y notamos los cambios.

Un poco mas abajo, encontraremos la etiqueta "Iniciar Sesión como", así:


Agregamos la misma linea de color con lo cual...

Guardamos y reiniciemos el MSN para comprobar... en caso que no funcione ya tenemos una idea de donde está el error (lo ultimo que hemos editado)

Siguiente etiqueta, aquella que dice "Recordar mi cuenta", un poco mas abajo...

Noten que aquí ya agregue el codigo de color.


Siguiente Etiqueta...

"Dejar de recordar mi contraseña", está por defecto es azul (para los links), si la quieren dejar así pues no agreguen nada, de lo
contrario:


Siguiente Etiqueta...

"Recordar mi contraseña", asi que:



Noten que lo unico que estamos haciendo es agregar la linea de reemplazar color, es decir: foreground:rgb(255,255,255);
El resto del codigo no lo tocamos, sigamos con las etiquetas que nos quedan...

Siguiente Etiqueta...
"Iniciar sesión automaticamente ", que encontramos un poco mas abajo, le aplicamos lo mismo y queda así:


Bueno, inicien el messenger, den click al botón "iniciar sesión" y dense cuenta que justo encima de la animación hay una nueva etiqueta, que por ahora no es perceptible (por el color negro), eso lo cambiamos editando el siguiente item:


noten que ya he agregado el codigo para el color blanco, guarden, reinicien el MSN, pulsen el botón "Iniciar sesión" y se darán cuenta que el texto ahora es visible.

Bueno, aún nos restan dos textos que necesitaremos editar, el primero de ellos es aquel botón de opciones para iniciar la sesión (al lado de "Iniciar sesión como"), cambiemos el color de fuente en este elemento así:

Vayan al inicio del documento (al tope), unas cuantas lineas abajo encontrarán este bloque:




Agreguen la misma propiedad "foreground: rgb(255, 255, 255);" con lo cual...


Ahora, vuelvan un poco mas abajo en el documento, buscando este bloque:



...Como antes, agreguen la propiedad y quedará así:





Guardamos, reiniciamos el programa y ahora veremos primero que el botón de "Ayuda" en la parte superior derecha, ahora es visible, al igual que el botón de estado de inicio de sesión.

Los ultimos, son los links que encontramos en la parte inferior de la ventana, noten que el comportamiento de estos elementos es distinto a los demás, esto es por que no son "Etiquetas" como las anteriores sino que se trata de Links a paginas web, a estos items les modificaremos el color del texto, solo agreguen la misma propiedad "Foreground" a los siguientes items al final del documento:


por ejemplo, para el primero de ellos sería:




Aún podemos editar una linea mas, (esto es opcional) pero la podemos aprovechar en nuestro favor,



Fijense en la parte inferior de la ventana, hay una etiqueta que dice "Windows Live Id", como se habrán dado cuenta quienes usan alguno de mis skins, yo he reemplazado este texto por por mi Nickname, solo para darnos algo de crédito y para identificar el skin como nuestro, hagan ustedes lo mismo de la siguiente manera:

Todavia en el estilo 947 busquen el siguiente elemento:


con lo que llegaremos al siguiente bloque:




y cambienlo por esto:


Obviamente su texto va a ser distinto, algo como "Skin hecho por Fulanito/a", y tendrá un color azul rey (el cual es editable).

Con eso bastára para cambiar los textos de esta ventana, todos excepto el de la parte superior izquierda con el titulo "Windows Live Messenger", pues no se trata de un texto sino de una imagen, proximamente buscaremos como modificar este recurso.

Pero como han visto hemos aplicado el color blanco practicamente a todos los textos, así que para variar aquí les dejo la lista de colores que podemos utilizar, como es tan extensa, la dejo en un archivo de Word para descarga aquí:

Contenido Oculto, debes [Solo usuarios registrados a DowntWarez.Com puede ver los links. ] para poder ver lo que hay dentro :)

Nota: A la izquierda verán 3 valores numericos, dichos valores reemplazarán a los del color blanco así por ejemplo:

forereground:rgb(30,144,255); -------- Azul Rey
foreground:rgb(0,0,0); ------------- Negro
foreground:rgb(255,0,0); ----------- Rojo

Comiencen a hacer sus pruebas, solo no vuelvan las ventanas un piñata :d

Bueno voy a finalizar esta Primera parte del tutorial mostrandoles uno de los atributos que podemos dar a las distintas imagenes de las ventanas, y es la propiedad "Colorize" (colorizacion), por defecto, muchas de las imagenes que reemplazamos tendrán esta propiedad activada, a menos que especifiquemos lo contrario, por fortuna no necesitaremos editar ningun archivo de definición o estilo para esto, solo tendremos que agregar unas cuantas lineas en nuestro SkinInfo, hagamoslo entonces:

Abran el Archivo SkinInfo.xml y editemos las propiedades de nuestra imagen de "Inicio de sesión", agregando estas lineas despues de "</File>" y antes de "</Picture>":



Para que nuestro SkinInfo quedé así:


Con lo cual estamos declarando que nuestra imagen "logonimage.png" no tomará ningún color seleccionado desde la Lista de Contactos (recuerdan el botón del pincelito?, esa opción).

Pero también se habrán dado cuenta que he agregado las siguientes lineas también:



Esta propiedad se llama "Untouched Margin Metadata", si esta propiedad no es especificada, las imagenes se mostrarán como mosaicos, lo que significa que si nuestra imagen es mas grande en pixeles de lo que es la ventana, la imagen es recortada, pero si la imagen es mas pequeña en pixeles que la ventana entonces se repetirá dentro de la misma (mosaicos), en resumen aquí podremos definir los margenes o bordes de la imagen, no tomen mi palabra, hagan la prueba cambiando lo anteriores valores de "1" a "3" o "10" por ejemplo, guarden los cambios y reinicien el messenger, podrán notar que entre mayor es el numero agregado, mayor es el Borde de la imagen de la ventana, normalmente asignaremos todos los valores a "1", excepto si queremos agregar dichos bordes.

Ok, reiniciemos nuestro messenger de nuevo y si todos nuestros cambios van bien, ahora podremos cambiar las imagenes del tuto por las que cada quien quiera implementar, como se darán cuenta, no cualquier imagen se puede implementar en las diferentes ventanas del messenger, ya lo habrán notado en mis skins quienes los tengan, que algo no muy agradable es el hecho de que las imagenes se distorsionan al maximizar o minimizar las ventanas, para esto por ahora no parece haber solución, lo que les puedo recomendar es que trabajen con imagenes de buena resolución para que el skin luzca mejor, normalmente el tamaño ideal para la imagen de la ventana de Inicio de sesión es de alrededor de 720 px de ancho por 1200 px de alto o un tamaño proporcional, esto no quiere decir que tengamos que buscar imagenes de este tamaño en especifico para nuestros fondos, aquí es donde entra el trabajo en Corel o Photoshop, tienen que crear imagenes en base a estas medidas y en resoluciones de al menos 16 bits, o 600 ppp en Corel Photo-Paint.

Si ya tienen sus imagenes con una resolución proporcional a la que les menciono, llevenla a la carpeta "images" del skin y reemplacen la que tenemos aquí, es decir dejen la nueva con el mismo nombre de la anterior (logonimage.png), y algo MUY IMPORTANTE, ASEGURENSE QUE EL FORMATO DE SU IMAGEN ES ".png", deberiamos acostumbrarnos a trabajar con imagenes en este formato, por sus ventajas (buena resolución y permite transparencias), si no saben como convertir su imagen a PNG, entonces editen el nombre de dicha imagen en su archivo "SkinInfo" cambiando la extensión del archivo a llamar, por ejemplo:




lo cambiamos a:


guardan y listo!.

Cuando lleguemos a la parte de Lista de Contactos y Ventana de Conversación, les daré informacion sobre el tamaño de las imagenes de fondo de esas ventanas.

Aqui les dejo una imagen de como comenzamos y como terminamos...xD


Bueno con esto Finalizamos esta primera parte del tutorial, en la siguiente parte (la cual postearé mas adelante), nos centraremos en la Lista de contactos y sus elementos mas visibles, también buscaré complementar esta primera parte del tuto, con sus comentarios y eventuales consejos, si me preguntan por que he decidido hacerlo por partes, les diré que me queda mas facil avanzar mientras todos aplicamos las ideas, y creo que un tutorial completo me tomaría mucho tiempo en publicar, maxime cuando lo que se viene es de un nivel mucho mas avanzado que lo que hasta ahora hemos tratado y se llevará muchas mas lineas de lo que se ha tomado esta primera parte.

Saludos.

Chamako apredenze a zer original... esta info la zcopiiaste ii pegaste del mzn pluz live...!!! Que Rip tan dezkarado...
yo e creado zkin'z para live 9...
Antez de Postear az el favor de BUSKAR.. ...