Índice
1 Introducción
2 Como empezar
3 WinDS PRO Template 1
4 Estructura de la carpeta de skin
5 Editar los archivos de imágen y audio
6 Editar el archivo button.btn
7 Editar el archivo skin.lua
8 Como hacer que el skin sea instalable
Introducción
WinDS PRO tiene soporte para 'skins' la traduccion literal del inglés es 'pieles'. Son archivos que sirven para cambiar la apariencia del programa.
Como empezar
Necesitas tener instalados todos los programas de la lista:
WinDS PRO Template 1
Esta es el primer skin que vamos a aprender a editar (es el mas fácil de todos). Lo primero es descargarlo:
Cuando tengas el skin descargado vas a ver un icono como este:
Abre el archivo WinDS PRO Template1.windsproskin haciendo doble clic, eso hace que se abra WinDS PRO y que instale el skin.
Importante: WinDS PRO instala el skin, pero no lo configura automáticamente. Es decir que es el usuario el que tiene que decidir si usar el skin que acaba de ser instalado.
Para elegir un skin de la lista, hay que abrir las Opciones de WinDS PRO. Para abrir las opciones simplemente toca la tecla F2 o sino ve al menú WinDS PRO > Opciones.
Una vez que hayas elegido WinDS PRO Template 1 de la lista simplemente cierra la ventana de opciones. WinDS PRO se reinicia y aplica el nuevo skin.
Hasta ahora has aprendido:
- Que es un skin.
- Descargar e instalar un skin.
- Configurar WinDS PRO con un skin de la lista.
Estructura de la carpeta de skin
Como habíamos dicho los skins son archivos. Pero no archivos al azar sino que tienen una estructura. Todos los archivos del skin se guardan en una carpeta con el nombre del skin tal como se ve en la lista de opciones.
Ve a la carpeta donde está instalado WinDS PRO y entra en la subcarpeta "windspro\skins". En esa carpeta hay varias subcarpetas, cada una con el nombre de los skins que tienes instalados.
Entra en la carpeta WinDS PRO Template 1.
En esa carpeta hay 6 archivos. Vamos a ver que es cada archivo:
- background.png: es la imágen de fondo de WinDS PRO.
- click.wav: es un archivo de audio, se escucha cuando haces clic en un botón de WinDS PRO.
- highlight.wav: otro archivo de audio, se escucha cuando pasas el cursor por un botón de WinDS PRO.
- window.png: es la imágen que se ve como barra de la ventana de WinDS PRO.
Hasta ahora son todos archivos 'normales' de imágen y de audio. Pero hay dos archivos diferentes:
- button.btn: es un archivo de botón, se usa en cada uno de los botones del menú de WinDS PRO.
- skin.lua: es un archivo de texto plano, se usa para configurar el skin.
Hasta ahora has aprendido:
- Donde están instalados los skin.
- Que tipos de archivo conforman la carpeta del skin.
Editar los archivos de imágen y audio
Ya sabemos que es un skin, como instalar un skin, como configurarlo en WinDS PRO, que archivos forman un skin y que clase de archivo es cada uno ¡Pero nosotros queremos cambiar los archivos para que se vea y suene como nosotros queremos!
Lo primero que hay que saber es que para cambiar un archivo es necesario un programa editor.
Para editar la imágen de fondo y poner una foto que nosotros queremos es necesario que la foto, la imágen o dibujo que queremos usar tenga exactamente el tamaño 630x384 pixeles y que este en formato PNG.
Programas para editar imágenes hay muchos, en Softonic están en esta página:
http://www.softonic.com/windows/imagen-diseno-y-fotografia
No voy a enseñar a editar imágenes, para eso esta el foro de diseño gráfico:
http://www.windspro.org/f31-diseno-grafico
Para editar los sonidos WAV hace falta un editor de audio, los de Softonic están en esta página:
http://www.softonic.com/windows/sonido-editores
Tampoco vamos a ver como editar los archivos de audio, ya que eso se puede encontrar en google.
Hasta ahora has aprendido:
- Que tamaño debe tener el fondo del skin en pixeles.
- Donde buscar programas para editar los archivos de imágen y audio.
Editar el archivo button.btn
El archivo de boton 'button.btn' es simplemente un archivo .zip renombrado a .btn.
Un archivo .zip es un archivo comprimido que contiene archivos dentro. Los archivos .zip se crean con 7-zip (que mencionamos que debias instalar al principio).
Lo primero que hay que hacer es descomprimir el archivo 'button.btn' para ver todos los archivos que tiene dentro.
Para descomprimir el archivo 'button.btn' haz clic derecho sobre el y luego desplaza el cursor hasta el menú que dice '7-Zip', entra al menu moviendo el cursor y elige la opción 'Extraer aquí'.
Cuando hayas descomprimido el archivo vas a ver que se crearon nuevos archivos:
Hay 4 archivos de imágen PNG. Esos ya aprendimos a editarlos anteriormente.
El archivo _manifest.xml no hay que editarlo.
Una vez que hayas editado las imágenes hay que volver a armar el archivo 'button.btn'.
Primero elimina el archivo 'button.btn' original.
Luego selecciona los archivos _manifest.xml, 1.png, 2.png, 3.png y 4.png. ¡No te olvides de ninguno! Clic derecho, ve al menu 7-Zip y elige la opción Añadir al archivo...
Selecciona zip como formato de archivo. En el cuadro de texto superior escribe como nombre de archivo button.btn. Haz clic en Aceptar.
Ahora ya se creo el nuevo 'button.btn' con las imágenes editadas.
Hasta ahora has aprendido:
- Que es un archivo btn.
- Como descomprimir un archivo btn.
- Editar las imágenes del botón.
- Volver a armar el archivo btn.
Editar el archivo skin.lua
Ya sabes editar imágenes, sonidos y botones. Ahora si quieres que el skin funcione y que texto tenga distintos colores y no solo blanco esta es la parte importante.
El archivo skin.lua es un archivo de texto plano, lo que significa que no hay que abrilo con Word, sino que hay que abrirlo con el Bloc de Notas.
Abre el Bloc de Notas (Inicio > Programas > Accesorios > Bloc de Notas). Luego ve al menú Archivo > Abrir y busca el skin.lua.
Importante: el bloc de notas por defecto en la ventana de abrir tiene la opción 'Documentos de texto (*.txt)', para que aparezca el skin.lua hay que hacer clic y cambiarlo por 'Todos los archivos (*.*)'.
Una vez que tengas abierto el skin.lua vas a ver que la primera parte tiene este texto:
Vamos a explicarlo parte por parte.
Importante: todo lo que está entre comillas al editarlo tiene que quedar entre comillas, todo lo que no tiene comillas al editarlo no tiene que tenerlas.
windsproskin_nombre: es el nombre de la carpeta del skin, entre comillas. La carpeta tiene que tener el mismo nombre que pongamos acá, sino no funciona el skin.
windsproskin_sonido_highlight, windsproskin_sonido_click: el nombre de los archivos wav.
windsproskin_fondo, windsproskin_barra: esto es para cambiar el nombre de las imágenes de fondo y de la barra de la ventana, entre comillas, si lo cambias aquí también tienes que cambiar el nombre a los archivos.
windsproskin_mostar_barra: true / false. Si esta como true muestra la barra, si esta como false no la muestra.
windsproskin_mostrar_cambiar_fondo: true / false. Si esta como true muestra el botón de cambiar imagen de fondo, si esta como false muestra el botón de cerrar WinDS PRO.
windsproskin_boton: el nombre del archivo del boton que se usa en todos los botones.
windsproskin_extra: el nombre del archivo del boton que se usa para el boton de cambiar imagen de fondo y cerrar.
windsproskin_texto_cerrar, windsproskin_texto_fondo: si quieres que se muestre un texto en los botones de cerrar o cambiar fondo. Si solo dejas las comillas no se muestra texto.
windsproskin_fuente: el nombre de la fuente que quieres para el texto. La fuente tiene que estar instalada en el sistema.
windsproskin_fuente_size: el tamaño del texto de los botones.
windsproskin_color_?????: el color del texto de los botones.
_normal: es simplemente el color del boton que se ve siempre.
_highlight: es cuando pasamos por encima del boton el cursor.
_down: es cuando hacemos clic.
_disabled: por ahora no se usa en WinDS PRO, pero se mostraría cuando el botón está desactivado o deshabilitado.
Como cambiar el color
El color esta en modo RGB (rojo, verde, azul).
Los tres con 255 es blanco, los tres con 0 es negro, y las distintas combinaciones nos dan todos los colores.
En esta página están los valores para mas de 500 colores:
http://cloford.com/resources/colours/500col.htm
Por ejemplo, si queremos que se vea color salmón quedaría así:
Resumen:
- El skin.lua hace que funcione el skin.
- Se puede editar facilmente con el bloc de notas.
Avanzado: El skin.lua es en si un script de programación para Autoplay Media Studio. Si te interesa hacer skins avanzados necesitas saber programar en Autoplay Media Studio.
Como hacer que el skin sea instalable
Una vez que hayas editado todo y te guste el resultado final del skin hay que convertirlo en un archivo instalable .windsproskin.
Un archivo .widsproskin es un archivo .zip renombrado a .windsproskin. Ya hemos explicado anteriormente que es un archivo .zip.
Haz clic derecho sobre la carpeta del skin, 7-Zip > Añadir al archivo...
Como formato selecciona zip y en el nombre de archivo cambia .zip por .windsproskin
Para probar que funciona el archivo, haz primero una copia de seguridad de la carpeta, luego borra la carpeta original. Instala tu archivo .windsproskin. Configura nuevamente WinDS PRO para ver como queda.
2 Como empezar
3 WinDS PRO Template 1
4 Estructura de la carpeta de skin
5 Editar los archivos de imágen y audio
6 Editar el archivo button.btn
7 Editar el archivo skin.lua
8 Como hacer que el skin sea instalable
Introducción
WinDS PRO tiene soporte para 'skins' la traduccion literal del inglés es 'pieles'. Son archivos que sirven para cambiar la apariencia del programa.
Como empezar
Necesitas tener instalados todos los programas de la lista:
WinDS PRO Template 1
Esta es el primer skin que vamos a aprender a editar (es el mas fácil de todos). Lo primero es descargarlo:
Cuando tengas el skin descargado vas a ver un icono como este:
Abre el archivo WinDS PRO Template1.windsproskin haciendo doble clic, eso hace que se abra WinDS PRO y que instale el skin.
Importante: WinDS PRO instala el skin, pero no lo configura automáticamente. Es decir que es el usuario el que tiene que decidir si usar el skin que acaba de ser instalado.
Para elegir un skin de la lista, hay que abrir las Opciones de WinDS PRO. Para abrir las opciones simplemente toca la tecla F2 o sino ve al menú WinDS PRO > Opciones.
Una vez que hayas elegido WinDS PRO Template 1 de la lista simplemente cierra la ventana de opciones. WinDS PRO se reinicia y aplica el nuevo skin.
Hasta ahora has aprendido:
- Que es un skin.
- Descargar e instalar un skin.
- Configurar WinDS PRO con un skin de la lista.
Estructura de la carpeta de skin
Como habíamos dicho los skins son archivos. Pero no archivos al azar sino que tienen una estructura. Todos los archivos del skin se guardan en una carpeta con el nombre del skin tal como se ve en la lista de opciones.
Ve a la carpeta donde está instalado WinDS PRO y entra en la subcarpeta "windspro\skins". En esa carpeta hay varias subcarpetas, cada una con el nombre de los skins que tienes instalados.
Entra en la carpeta WinDS PRO Template 1.
En esa carpeta hay 6 archivos. Vamos a ver que es cada archivo:
- background.png: es la imágen de fondo de WinDS PRO.
- click.wav: es un archivo de audio, se escucha cuando haces clic en un botón de WinDS PRO.
- highlight.wav: otro archivo de audio, se escucha cuando pasas el cursor por un botón de WinDS PRO.
- window.png: es la imágen que se ve como barra de la ventana de WinDS PRO.
Hasta ahora son todos archivos 'normales' de imágen y de audio. Pero hay dos archivos diferentes:
- button.btn: es un archivo de botón, se usa en cada uno de los botones del menú de WinDS PRO.
- skin.lua: es un archivo de texto plano, se usa para configurar el skin.
Hasta ahora has aprendido:
- Donde están instalados los skin.
- Que tipos de archivo conforman la carpeta del skin.
Editar los archivos de imágen y audio
Ya sabemos que es un skin, como instalar un skin, como configurarlo en WinDS PRO, que archivos forman un skin y que clase de archivo es cada uno ¡Pero nosotros queremos cambiar los archivos para que se vea y suene como nosotros queremos!
Lo primero que hay que saber es que para cambiar un archivo es necesario un programa editor.
Para editar la imágen de fondo y poner una foto que nosotros queremos es necesario que la foto, la imágen o dibujo que queremos usar tenga exactamente el tamaño 630x384 pixeles y que este en formato PNG.
Programas para editar imágenes hay muchos, en Softonic están en esta página:
http://www.softonic.com/windows/imagen-diseno-y-fotografia
No voy a enseñar a editar imágenes, para eso esta el foro de diseño gráfico:
http://www.windspro.org/f31-diseno-grafico
Para editar los sonidos WAV hace falta un editor de audio, los de Softonic están en esta página:
http://www.softonic.com/windows/sonido-editores
Tampoco vamos a ver como editar los archivos de audio, ya que eso se puede encontrar en google.
Hasta ahora has aprendido:
- Que tamaño debe tener el fondo del skin en pixeles.
- Donde buscar programas para editar los archivos de imágen y audio.
Editar el archivo button.btn
El archivo de boton 'button.btn' es simplemente un archivo .zip renombrado a .btn.
Un archivo .zip es un archivo comprimido que contiene archivos dentro. Los archivos .zip se crean con 7-zip (que mencionamos que debias instalar al principio).
Lo primero que hay que hacer es descomprimir el archivo 'button.btn' para ver todos los archivos que tiene dentro.
Para descomprimir el archivo 'button.btn' haz clic derecho sobre el y luego desplaza el cursor hasta el menú que dice '7-Zip', entra al menu moviendo el cursor y elige la opción 'Extraer aquí'.
Cuando hayas descomprimido el archivo vas a ver que se crearon nuevos archivos:
Hay 4 archivos de imágen PNG. Esos ya aprendimos a editarlos anteriormente.
El archivo _manifest.xml no hay que editarlo.
Una vez que hayas editado las imágenes hay que volver a armar el archivo 'button.btn'.
Primero elimina el archivo 'button.btn' original.
Luego selecciona los archivos _manifest.xml, 1.png, 2.png, 3.png y 4.png. ¡No te olvides de ninguno! Clic derecho, ve al menu 7-Zip y elige la opción Añadir al archivo...
Selecciona zip como formato de archivo. En el cuadro de texto superior escribe como nombre de archivo button.btn. Haz clic en Aceptar.
Ahora ya se creo el nuevo 'button.btn' con las imágenes editadas.
Hasta ahora has aprendido:
- Que es un archivo btn.
- Como descomprimir un archivo btn.
- Editar las imágenes del botón.
- Volver a armar el archivo btn.
Editar el archivo skin.lua
Ya sabes editar imágenes, sonidos y botones. Ahora si quieres que el skin funcione y que texto tenga distintos colores y no solo blanco esta es la parte importante.
El archivo skin.lua es un archivo de texto plano, lo que significa que no hay que abrilo con Word, sino que hay que abrirlo con el Bloc de Notas.
Abre el Bloc de Notas (Inicio > Programas > Accesorios > Bloc de Notas). Luego ve al menú Archivo > Abrir y busca el skin.lua.
Importante: el bloc de notas por defecto en la ventana de abrir tiene la opción 'Documentos de texto (*.txt)', para que aparezca el skin.lua hay que hacer clic y cambiarlo por 'Todos los archivos (*.*)'.
Una vez que tengas abierto el skin.lua vas a ver que la primera parte tiene este texto:
- Código:
---------------------------------------------------------------
---------------------------------------------------------------
windsproskin_nombre = "WinDS PRO Template 1"
---------------------------------------------------------------
windsproskin_sonido_highlight = "highlight.wav"
windsproskin_sonido_click = "click.wav"
---------------------------------------------------------------
windsproskin_fondo = "background.png"
windsproskin_barra = "window.png"
---------------------------------------------------------------
windsproskin_mostrar_barra = true
windsproskin_mostrar_cambiar_fondo = false
---------------------------------------------------------------
windsproskin_boton = "button.btn"
windsproskin_extra = "button.btn"
---------------------------------------------------------------
windsproskin_texto_cerrar = "x"
windsproskin_texto_fondo = "+"
---------------------------------------------------------------
windsproskin_fuente = "Candara"
windsproskin_fuente_size = 10
---------------------------------------------------------------
windsproskin_color_normal = Math.RGBToNumber(255, 255, 255)
windsproskin_color_highlight = Math.RGBToNumber(255, 255, 255)
windsproskin_color_down = Math.RGBToNumber(255, 255, 255)
windsproskin_color_disabled = Math.RGBToNumber(255, 255, 255)
---------------------------------------------------------------
---------------------------------------------------------------
Vamos a explicarlo parte por parte.
Importante: todo lo que está entre comillas al editarlo tiene que quedar entre comillas, todo lo que no tiene comillas al editarlo no tiene que tenerlas.
windsproskin_nombre: es el nombre de la carpeta del skin, entre comillas. La carpeta tiene que tener el mismo nombre que pongamos acá, sino no funciona el skin.
windsproskin_sonido_highlight, windsproskin_sonido_click: el nombre de los archivos wav.
windsproskin_fondo, windsproskin_barra: esto es para cambiar el nombre de las imágenes de fondo y de la barra de la ventana, entre comillas, si lo cambias aquí también tienes que cambiar el nombre a los archivos.
windsproskin_mostar_barra: true / false. Si esta como true muestra la barra, si esta como false no la muestra.
windsproskin_mostrar_cambiar_fondo: true / false. Si esta como true muestra el botón de cambiar imagen de fondo, si esta como false muestra el botón de cerrar WinDS PRO.
windsproskin_boton: el nombre del archivo del boton que se usa en todos los botones.
windsproskin_extra: el nombre del archivo del boton que se usa para el boton de cambiar imagen de fondo y cerrar.
windsproskin_texto_cerrar, windsproskin_texto_fondo: si quieres que se muestre un texto en los botones de cerrar o cambiar fondo. Si solo dejas las comillas no se muestra texto.
windsproskin_fuente: el nombre de la fuente que quieres para el texto. La fuente tiene que estar instalada en el sistema.
windsproskin_fuente_size: el tamaño del texto de los botones.
windsproskin_color_?????: el color del texto de los botones.
_normal: es simplemente el color del boton que se ve siempre.
_highlight: es cuando pasamos por encima del boton el cursor.
_down: es cuando hacemos clic.
_disabled: por ahora no se usa en WinDS PRO, pero se mostraría cuando el botón está desactivado o deshabilitado.
Como cambiar el color
El color esta en modo RGB (rojo, verde, azul).
- Código:
Math.RGBToNumber(255, 255, 255)
Los tres con 255 es blanco, los tres con 0 es negro, y las distintas combinaciones nos dan todos los colores.
En esta página están los valores para mas de 500 colores:
http://cloford.com/resources/colours/500col.htm
Por ejemplo, si queremos que se vea color salmón quedaría así:
- Código:
Math.RGBToNumber(250, 128, 114)
Resumen:
- El skin.lua hace que funcione el skin.
- Se puede editar facilmente con el bloc de notas.
Avanzado: El skin.lua es en si un script de programación para Autoplay Media Studio. Si te interesa hacer skins avanzados necesitas saber programar en Autoplay Media Studio.
Como hacer que el skin sea instalable
Una vez que hayas editado todo y te guste el resultado final del skin hay que convertirlo en un archivo instalable .windsproskin.
Un archivo .widsproskin es un archivo .zip renombrado a .windsproskin. Ya hemos explicado anteriormente que es un archivo .zip.
Haz clic derecho sobre la carpeta del skin, 7-Zip > Añadir al archivo...
Como formato selecciona zip y en el nombre de archivo cambia .zip por .windsproskin
Para probar que funciona el archivo, haz primero una copia de seguridad de la carpeta, luego borra la carpeta original. Instala tu archivo .windsproskin. Configura nuevamente WinDS PRO para ver como queda.
» ayuda con action replay para el ticket libertad
» tutorial...A.P.CS5
» ¿como puedo aser que el golden sun oscuro amaneser baya mas rapdo en el desmume?
» El primer juego que emulaste
» volvi otra vez jeje
» DeSmuME JIT
» Problema con winDSpro 2012.7
» Te baneo
» Ayuda con Partidas (.sa1)
» Pokémon Black & White 2 y las formas alternas de Kyurem
» Creepy Pasta Pokémon: Ash Ketchum jamás salió de Pueblo Paleta
» Mi historia, Mi partida, Mi juego, Mi vida.......
» invente....
» polybius.....
» Pokemon Oro Heartgold
» Cheats para Pokemon Edicion Blanca y Edicion Negra en (Español)
» Wi-fi para DeSmuME 100% Funcional! (Con video-tutorial)
» Ayuda con Dragon Quest VI Realms Of Revelation [EUR]
» WinDS PRO AllMyApps