Como hacer un SKIN para lphant

Como hacer un SKIN para lphant

Vamos a confeccionar nuestro primer skin, en primer luegar tenemos que disponer de unas herramientas imprescindibles:

- Un editor de imagen, como photoshop, Corel, o incluso el Piant de windows ;)
- tambien es necesario..... Huy xDDDDD , nada mas. Ale asi de sencillo.

Comenzamos:

1) para no tener problemas por si machacamos algo , vamos ha hacer una copia de seguridad de la carpeta de skins de lphant, de esta forma si editamos algun fichero por error pues podremos restauralo otra vez.

2) nos vamos a la carpeta de skins (ahora ya siempre del lphant de siempre) y hacemos una copia de la carpeta del skin Classic, le damos el nombre como se llamara el skin y la dejamos en esta misma carpeta, de manera que tendremos lphant/skins/ (clasic-msnskin - y nuesta nueva carpeta)

3) entramos en nuestra carpeta y podemos ver que tienes estos archivos:
---------------------------------------------------------------
BigGraphic.bmp
BtnConnect.ico
BtnConnectMousePressed.ico
BtnConnectMouseUp.ico
BtnDisconnect.ico
BtnDisconnectMousePressed.ico
BtnDisconnectMouseUp.ico
BtnDownload.gif
BtnFriends.gif
BtnOptions.ico
BtnOptionsMousePressed.ico
BtnOptionsMouseUp.ico
BtnSearch.gif
BtnSeparatorDown.gif
BtnSeparatorDownMousePressed.gif
BtnSeparatorDownMouseUp.gif
BtnSeparatorUp.gif
BtnSeparatorUpMousePressed.gif
BtnSeparatorUpMouseUp.gif
BtnServers.gif
BtnUpload.gif
close.bmp
PopUpSkin.bmp
preview.JPG
skin.xml
SmallGraphic.bmp
SmallGraphic.gif
StatusBarExtensible.bmp
StatusBarLeft.bmp
StatusBarRight.bmp
ToolBarButtons.bmp
ToolBarExtensible.bmp
ToolBarRight.bmp
===================

Podemos realizar los siguientes cambios en nuestro skin:
- Podemos cambiar los botones de los menus.
- Podemos modificar los colores de las fuentes.
- Podemos modificar los colores de todas las partes del cliente (menus, fondo, barras....)
- Podemos modificar el tamaño y posicion (alto y ancho) de la barra del menu.
- Crear nuestra propia grafica.
- y sobretodo firmar tu skin y dejar tu huella ;)

-----------------------------------------------

4) Lo primero que vamos a realizar es cambiar todos los colores del cliente y para mas adelante buscar unos iconos apropiados.
editamos el fichero: skin.xml:
================================================
<?xml version="1.0"?>
<lphantSkin version="0.01">
<colors>
<color key="defaultBackColor" value="FFD4D0CB" />
<color key="defaultForeColor" value="FF000000" />

<color key="labelsForeColor" value="FF000000" />
<color key="labelsBackColor" value="FFECEAE6" />

<color key="listsForeColor" value="FF000000" />
<color key="listsBackColor" value="FFFFFFFF" />
<color key="listsHeaderBackColor" value="FFD4D0CB" />
<color key="listsScrollBarBackColor" value="00F7E7DE" />

<color key="ButtonForeColor" value="FF000000" />
<color key="ButtonBackColor" value="FFECEAE6" />

<color key="TextBoxForeColor" value="FF000000" />
<color key="TextBoxBackColor" value="FFFFFFFF" />

<color key="readOnlyTextBoxForeColor" value="FF444597" />
<color key="readOnlyTextBoxBackColor" value="FFFFFFE1" />

<color key="SquaredLabelsBackColor" value="FFD4D0CB" />
<color key="SquaredLabelsForeColor" value="FF000000" />

<color key="panelsBackColor" value="FFECEAE6" />
<color key="SplittersBackColor" value="FFD4D0CB" />
<color key="ToolBarButtonSelectedBackColor" value="FFFFFFFF" />
<color key="ToolBarButtonHoverColor" value="FFFFFFFF" />
<color key="ToolBarButtonInactiveBackColor" value="00FFFFFF" />
<color key="ToolBarButtonTextColor" value="FF000000" />
<color key="StatusBarMessageTextColor" value="FF000000" />
<color key="StatusBarServerTextColor" value="FF000000" />
<color key="StatusBarDownSpeedTextColor" value="FF008000" />
<color key="StatusBarUpSpeedTextColor" value="FFFF0000" />
<color key="StatusBarAvgTextColor" value="FF444597" />
<color key="GraphicGridColor" value="FFD4D0CB" />
<color key="GraphicDownLineColor" value="FF90EE90" />
<color key="GraphicUpLineColor" value="FFFF0000" />
</colors>

<positions>
<position key="BtnOptionsPosition" x="300" y="8" />
<position key="BtnConnectionPosition" x="340" y="8" />
<position key="SmallGraphicPosition" x="2" y="2" />
<position key="BigGraphicPosition" x="2" y="2" />
</positions>

<sizes>
<size key="BtnOptionsSize" width="40" height="40" />
<size key="BtnConnectionSize" width="40" height="40" />
<size key="SmallGraphicSize" width="309" height="54" />
<size key="BigGraphicSize" width="309" height="156" />
</sizes>
</lphantSkin>
================================================

5) No os asusteis que no es nada complicado si obsebamos cada una de las lineas estan uno de los 3 grupos. (color, posicion y size):
Si nos fijamos en una de ellas: <color key="defaultBackColor" value="FFD4D0CB" /> y desglosamos cada una de las partes quedaria asi:

color key: significa que la modificacion de esta etiqueta afecta al color de una de las zonas del cliente.
position Key: son las cordenadas donde estara situado el boton que editemos
size Key: es el tamaño "alto y largo" del boton que editmeos.

defaultBackColor: Este nombre ira cambiando segun que parte estamos editando (fondo, flecha, barras, botones....)

value="FFD4D0CB": aqui es donde tokiteamos a nuestro gusto, las dos primeras letras, en este caso FF: corresponden a la visibilidad, es decir opaco o transparente, si escribimos FF (sera visible) en cambio si escribimos 00 no sera visible (00D4D0CB).
y el segundo grupo de numeros y letras (D4D0CB) corresponde al color que vamos a ver en el caso de que sea opaco. Aqui es donde yo os recomiendo utilizar el photosop ya que podemos compara los colores que aparecen y copiar el que nos guste.

Ejemplo al canto:

Si editamos la escala de colores para seleccionar uno podemos copiar el que aparece en skin.xml, de esta forma podremos ver a que color pertenece. n este caso un gris.

Ahora imaginemos que queremos darle un tono azul, pues bien seleccionamos el color naranja en el selector de colores y asi obserbamos el codigo de color que nos da.

¿Que codigo nos da? el 1807FA. Pues bien este es el codigo que pondremos en la linea que hemos editado en skin.xml, quedando asi:

Antes: <color key="defaultBackColor" value="FFD4D0CB" />
Ahora: <color key="defaultBackColor" value="FF1807FA" /> Recordad con el FF delante para ser opaco.

Pues esto mismo lo realizais en todas las lineas con "color key" y vais comprobando como os va quedando cada una de las modificaciones que realizeis.Yo os recomiendo que esto lo hagais una a una para poder ver bien el cambio y que es lo que cambia en el cliente.

6) Ahora vamos a modificar los botones:

Cada uno de ellos como habreis observado estan en la carpeta.

El tamaño de cada uno es 32x32 pixels por tanto lo unico que hay que hacerse o buscar uno chulo y sustituirlo por otro.

Algunos botones, se componen de varias imagenes, un ejemplo es el boton de conexión (conectado o desconectado) asi que dale imaginacion o cambia los colores de la imgane para diferenciar el estado.

7) La grafica, esta esta compuesta tambien de dos partes, una es la imagen que muestra por defecto y otra es la imagen que aparece al pinchar sobre ella:

SmallGraphic.bmp

Usando el mismo tamaño puedes hacerla como quieras ;)

y al igual con el desplegable:

BigGraphic.bmp

o asi, por ejemplo:

8) Podemos modificar los colores y el diseño de los marcos del cliente, asi editamos estas imagenes:

Un ejemplillo seria:

9) podemos modificar tambien los botones del desblegable de las opciones avanzadas del cliente los utilizados serian estos:

Ejemplo al canto:

Vamos a dejar nuestra firma en el skin, para ello añadimos estas3 lineas añ final del todo, de forma que cuendo pulsen :

Por ultimo recordad hacer una prewiew de vuestra obra maestra ;) .yo en mi caso es esta y tiene que ser su tamaño (178x100)

No se si alguna cosilla se me a escapado, o alguna mejora podeis aportar, pero en ese caso, espero que colaboreis con nosotros:

Y por ultimo dar las gracias Juanjo creador de lphant, por la 9 maravilla ;)

Salu2 a to2 y que lo disfruteis:

BruNET www.brunet77.com