Como crear skins de Cd Art Display (CAD)

Anteriormente en Artescritorio Gabriela y Renata han recopilado varios de los mejores skins para CD Art Display, así como también hecho un tutorial sobre como instalar y configurar por primera vez CAD y sus pieles, con la promesa de enseñar a como editar y crear tus propios skins en un futuro post.

Hoy retomaremos este post, para lo cual utilizaremos la version 3.0 Beta del programa y un editor de imágenes, como photoshop o GIMP [necesitas conocimiento básico de alguno de estos ultimos o uno similar] explicando de manera resumida lo necesario para comenzar a diseñar o editar nuestros propios skins.

Como crear skins de Cd Art Display (CAD)

Lo primero que necesitamos es el diseño del skin; tranquilo, sino eres muy creativo hay muchos freebies en sitios como dribbble y 365psd . Es muy importante tener cada elemento del skin separado por capas. Como ejemplo utilizare el diseño del skin White Prime , un port que hice del skin para Bowtie de memovaslg.

Procedemos a guardar cada elemento de nuestro skin por separado, es decir, la cubierta, botones de reproducción, barras de progreso, etc. Para hacer esto, recomiendo cortar [con herramienta crop ] cada elemento hasta delimitarlo a un área mínima.

Para conservar las transparencias y facilitar la integración de todos los elementos, salvamos cada imagen en formato .png , por ahora podemos guardar las imágenes con cualquier nombre, más adelante las renombraremos para que puedan ser reconocidas por CAD.

Conociendo las funciones básicas del Editor de Temas

Bien, ahora comienza la parte divertida. Ejecutamos CAD y haciendo click derecho sobre el skin actual o sobre el icono  del menú de notificaciones, abrimos la opción editor de temas.

Se abrirá una ventana donde nos encontraremos con 3 pestañas principales. Skins: **muestra una lista y vista previa de los skins que tenemos instalados. **Edit: Permite editar la configuración del skin seleccionado. Submit: Una vez listo nuestro skin, podemos guardarlo en el formato de CAD, .cskin para poder compartirlo fácilmente en la web.

De esta manera, podemos hacer click en el boton New skin para iniciar nuestro proyecto desde cero;  o haciendo click en la** pestaña edit, **para poder editar el skin que seleccionemos [tamaños, tipos y colores de fuentes y posicionamiento e integracion de elementos] o tomarlo como base para diseñar nuestro propio skin.

Cualquiera que sea nuestra opción nos encontraremos con una serie de menús para la creación de nuestro skin, en la parte superior derecha , se encuentran las opciones para salvar y retroceder en los cambios que vallamos realizando [el botón recargar resulta muy útil para ir actualizando el skin según el progreso que le vallamos dando]. En la izquierda , se localizan las opciones para configurar cada parte de nuestro diseño.

Si apenas estas comenzando, sugiero dejar las opciones avanzadas, como esta primer opción** Appearance,** como vienen por default a menos que quieras experimentar un poco o sepas lo que haces.

Paso 1: Integramos la carátula del skin

Pasamos directamente al menú Case and Cover y dependiendo de nuestro diseño seleccionamos la opción correspondiente en show at front: Case: Para visualizar la caratula del skin sobre la caratula del disco. Cover: Para visualizar la caratula del disco sobre la del skin. Only Case: Solo visualizaremos la caratula del skin. Para este diseño utilizaremos la primera opción.

Ahora podemos agregar la imagen de la caratula del skin que guardamos previamente, para ello utilizamos la opción click here to manage files , donde nuevamente tenemos 3 opciones, pero utilizaremos la primera, Case. Las otras 2 permiten agregar animaciones a la caratula, siéntanse libres de jugar un poco con ella ;).

En la ventana emergente, hacemos click sobre la ruta en la parte inferior donde se abrirá la ventana del explorador de windows. En esta ruta guardaremos la imagen de la caratula del disco con el nombre de Case.png **[CAD reconoce automaticamente cada elemento asignandole un nombre preestablecido, en este caso "Case" para la caratula del disco], para efectos adicionales [como estados mouse over o presionado] consultar la **pestaña Help , donde nos mostrara bajo que nombre debemos guardar nuestras imágenes para cada efecto. La imagen cargará en el skin inmediatamente.

Una vez cargada la imagen ajustamos la posición, tamaño y transición de la caratula del disco. Para esto, los valores Width and Height representan el ancho y alto, recomiendo utilizar el mismo valor para conservar la proporción cuadrada del cover de los discos. Left and Top son los valores izquierda y derecha respectivamente. Ajustaremos estos valores hasta posicionar la caratula donde corresponde. Dejaremos los demás valores por default.

Paso 2: Damos formato al texto

Para fines prácticos continuamos con el menú Text, donde le daremos formato al texto de  la información del artista, nombre de la canción, álbum, etc. Por default, la primera línea es el nombre del artista y la segunda el nombre de la canción, siéntanse libres de explorar la opción tags para agregar mucha más información, el menú es muy intuitivo.

Ahora posicionaremos la información que necesitamos, para mi skin será solo el nombre del artista y la canción, así que la opción Enable Text estará activada solo para visualizar estas 2 líneas. Nuevamente contamos con las opciones** Width and Height para los margenes del texto  y **Left and Top para posicionar cada línea. Nos auxiliaremos de la opción Drawn guide lines para ajustar la posición del texto más fácilmente.

Nótense los márgenes de ajuste del texto, en este caso centrados y no al ras de los bordes de la caratula del skin.

Si necesitamos que nuestro texto se desplace horizontalmente [para mostrar completos los nombres largos], activamos la opción Scrolling and divider size , donde podemos dejar valores por default, activando este efecto automáticamente cuando el nombre de la línea exceda el número máximo de caracteres que establezcamos en Max Char.

Podemos editar el formato del texto [tipo de fuente, tamaño, color] para cada línea en el siguiente menú Text Style , donde también podemos agregar sombra al texto. Las opciones son intuitivas.

Paso 3: Agregamos los botones multimedia

A continuación agregaremos los elementos restantes al skin. Este diseño es sumamente simple, solo tiene un botón de play/pause , por lo que pasaremos directamente al menú Toolbar. Nuevamente utilizaremos la opción Click here to manage files para agregar los botones necesarios [play, pause, next, back, shuffle, etc.] El procedimiento es el mismo que utilizamos para cargar la caratula del skin, solo que para este caso los nombres asignados a cada elemento corresponderán a lo siguiente:

play.png = Estado normal

play1.png = Estado mouse over

play2.png = Estado presionado

Esta lógica corresponderá a todos los botones: Next, Prev, Pause…. Nombrándolos con la terminación 1, 2 para cada estado respectivo [Para más información sobre los nombres de botones  y opciones consultar la pestaña Help ].

Para posicionar cada botón nuevamente nos auxiliaremos de la opción Drawn guide lines , donde de acuerdo a los botones que hayamos cargado, seleccionaremos su correspondiente en Select a Buttom para ajustar su posición, uno a uno.

Seguimos el mismo procedimiento para agregar más elementos como barras de progreso, raiting , control de volumen y demás botones multimedia, todo depende de tu diseño y paciencia ;). No olvides ir guardando y actualizando los cambios de tu skin para que visualices su progreso.

Paso 4: Guardamos nuestro skin en un archivo .cskin

Yay!!! Nuestro skin está listo! Ahora procedemos a guardarlo en el formato nativo de CAD, con extensión .cskin. El primer paso es crear un preview de nuestro skin el cual se mostrara como vista previa en la ventana skin browser , para esto podemos hacer una captura de pantalla asistida por la opción de Click here to make a preview now desde la pestaña Submit, o si queremos algo más personalizado hacemos nuestro propio preview en un editor de imágenes y guardamos la imagen en el directorio del skin con el nombre de “preview”.

A continuación agregamos nuestros datos de contacto y una descripción.

Copiamos las fuentes necesarias, si lo requerimos….

Y creamos nuestro archivo .cskin recopilando toda la información anterior. Nuestro skin esta listo para ser compartido a la galería online de CAD o a cualquier otra comunidad como artescritorio . No fue tan difícil, verdad?

Este ha sido mi primer post en el sitio, espero este post haya sido de su agrado… y entendimiento xD, cualquier duda la responderé en los comentarios.