Tutorial: Como crear un tema para R4DS Revolution (Parte I)

Publicado el Thursday, 28 January, 2010 por MikeM

En vista que últimamente la sección de temas para R4, así como este post que publiqué hace ya algún tiempo, están recibiendo bastantes visitas (y ya que la gente me pregunta mucho sobre como pueden confeccionar sus propios temas), me dispongo a realizar un tutorial (que por la extensión del mismo, será en 2 partes) para que todos vosotros podáis hacer un skin a vuestro gusto.

Para empezar, debéis tener en cuenta la estructura de un tema/skin para R4DS. El mismo, está compuesto por 4 imagenes que tienen los siguientes nombres:

logo.bmp: Pantalla principal superior.
icons.bmp: Pantalla principal inferior.
bckgrd_1.bmp: Pantalla secundaria superior.
bckgrd_2.bmp: Pantalla secundaria inferior.

Estos cuatro archivos podemos confeccionarlos con cualquier programa de edición de imagen. Como no todo el mundo sabe utilizarlos, el tutorial va a estar enfocado a que cualquier persona sin conocimientos de estos programas pueda realizar el tutorial. Personalmente voy a utilizar Photoshop, ya que es el programa con el que mejor me manejo y el que suelo utilizar para estas cosas, pero si no lo tenéis, siempre podéis utilizar Gimp que tiene un funcionamiento similar y podéis descargarlo desde aquí. Para empezar, todos los archivos deben medir 256×192 píxeles, así que vamos a “Archivo/Nuevo…” y creamos un documento nuevo con estas medidas.

A este archivo podremos colocar cualquier dibujo, foto o diseño que queramos. Yo voy a hacer un tema de la segunda película de la Saga Crepúsculo, “Luna Nueva” (o “New Moon” como yo voy a poner), y para ello voy a coger alguna imagen promocional de la película que podamos encontrar en Google, como por ejemplo:

Como la imagen original es bastante grande, no nos cabrá entera, así que seleccionaremos solamente a los tres protagonistas. Primero que todo, abriremos la imagen desde Photoshop pinchando en “Archivo/Abrir…” y buscando la ruta donde tengáis dicho archivo. Cuando la hayamos abierto, tendremos que pinchar sobre la “Herramienta Marco Rectangular”:

y seleccionar lo que queramos de la imagen:

Después tendremos que pegar la selección en el documento que hemos creado de 256×192 píxeles con la combinación Ctrl+V, o yendo a “Edición/Pegar…”. Como seguirá siendo grande para el archivo creado, tendremos que redimensionar la imagen presionando Ctrl+T y pinchando en los bordes de la imagen hasta reducirla al tamaño adecuado. Para finalizar la transformación pincharemos en el signo de verificación que está en la parte superior del programa.

Después tendremos que mover la imagen para posicionarla correctamente con la “Herramienta Mover”:

Si la queremos más o menos centrada, pues nos quedará así:

Para que nos quede un poco más bonito, podríamos ponerle la tipografía de Luna Nueva con el título, y para ello buscaremos alguna imagen con buena calidad que tenga solamente el título.

Podríamos colocar el logo con el fondo en la imagen, pero yo prefiero conservar solamente el contorno. Así que seleccionamos la “Herramienta Varita Mágica”:

Y pinchamos en la zona oscura de la imagen seleccionando todo menos las letras de logo. A continuación presionaremos la tecla Supr para eliminar lo seleccionado. Como quedarán algunas zonas oscuras, tendremos que ir pinchando, seleccionando y borrando las que correspondan hasta que nos quede un logo completamente limpio.

Después presionaremos Ctrl+C para copiar la tipografía y la pegaremos en el archivo principal. Tendremos que redimensionar y centrar como hemos hecho antes con la anterior imagen. Yo le he aplicado efectos a la capa, presionando el botón derecho del ratón sobre la capa y yendo a “Opciones de fusión”. Ahí presionaremos los efectos “Resplandor Exterior” y “Trazo”, dándoles los grosores (en píxeles) que consideremos necesarios:

Una vez hecho esto, ya tendremos la parte superior de la pantalla principal de la interfaz del tema. Para que podamos utilizarlo, deberemos guardarlo como mapa de bits. Para ello tendremos que ir a “Archivo/Guardar como…” y en el menú de guardado que nos aparece, tendremos que seleccionar en el campo “Formato” el tipo de archivo “BMP (*.BMP;*.RLE;*.DIB)”.

Deberemos guardarlo con el nombre correspondiente, en este caso será “logo.bmp” por ser la parte de la zona superior del tema.

Para la zona inferior necesitaremos una referencia para crear los 3 botoncitos personalizados, así que para ello utilizaremos la imagen del tema original.

Abriremos el archivo como hemos hecho anteriormente. Como podréis observar, en el menú inferior derecha llamado “Capas”, hay una sola capa llamada “Fondo” con un dibujo de un candado en la parte derecha, lo cual nos indica que la capa está bloqueada. Como no podemos trabajar directamente sobre ella, tendremos que duplicarla, por lo que tenéis que pinchar sobre ella con el botón derecho del ratón y seleccionar “Duplicar Capa…”. Nos aparecerá un menú en el que podréis designar el nombre de la nueva capa y apretaremos “Ok”.

Tras crear la copia de la capa original podemos eliminarla, ya que no la necesitamos. Para hacerlo, pincharemos sobre la capa en cuestión con el botón derecho del ratón y presionaremos “Eliminar”. En cuanto a la nueva capa, deberemos bajarle la opacidad hasta el 50% tal como podéis ver en la imagen, para que no nos moleste a la hora de trabajar sobre ella.

La imagen nos quedará tal que así:

Ahora, para empezar, tendremos que confeccionar los botones. Para este tema, he pensado que le vendría bien que los botones fuesen los protagonistas de Luna Nueva, al igual que hice con el de Crepúsculo. Para ello, he ido a la página oficial y me he descargado 3 fondos de pantalla de la película en la que aparecen Kristen Stewart, Robert Pattinson y Taylor Lautner. Tal como hemos hecho antes, abriremos cada imagen y seleccionaremos con la “Herramienta Marco Rectangular”, lo que nos interese y lo copiaremos con Ctrl+C. Los botones por defecto miden 73×73 píxeles, y aunque podéis hacerlos todo lo grandes que queráis, no os lo recomiendo porque el recuadro de selección de la interfaz siempre mide lo mismo y con botones cuadriláteros no quedaría bien. Por esto mismo, os recomiendo que la selección que realicéis para convertirla en botón, sea de la misma base por altura para que la redimensión se pueda ajustar a la zona de los botones.

Así es como quedarían las caras como botones. Después de esto, procederemos a insertar un fondo acorde a la ambientación y cualquier “bosque tenebroso” nos puede valer para este menester:

Pero como tal vez, queda un poco “forzado” quizá es mejor darle un “Trazo” a los botones, así cómo un “Resplandor Exterior”. También se le podría añadir dos bandas negras como el skin original que le darían un poco más de oscuridad al tema. Las mismas se deben realizar con la “Herramienta Marco Rectangular”, en las zonas que se deseen y luego hacer click sobre la selección con el botón derecho o presionar Shift+F5 para rellenar la zona de color negro. Después solamente nos queda adornar un poco más con la “Herramienta Texto” poniendo los títulos de los botones, y bueno, todos los adornos que queráis. Yo lo he dejado así: