Revisión tutorial: Diseña tu propio panel de control con photoshop. Por Mikonos

"Diseña tu propio panel de control con photoshop. Por Mikonos"

- Introducción

Quizá una de las dificultades mayores para alguien que pretenda personalizar su cabina recreativa sea la que tiene que ver con el panel de control.

La mejor manera de diseñar un panel de control para nuestra máquina arcade pasa por abrirse un documento en Photoshop. Además de poder situar los elementos que nos ayudarán a interactuar con nuestra recreativa, también nos permitirá decorar este espacio.


- Diseñando tu panel de control con photoshop

El primer paso será crear un plano de trabajo en photoshop idéntico a las dimensiones del panel de control que queremos crear para nuestra maca. Esto pasará por abir un "nuevo documento de trabajo" introduciendo a mano las dimensiones del largo y el alto de este. En el ejemplo práctico hemos creado un Cpo de 57x18.




Si os fijáis, la recomendación en cuanto a resolución es la misma que os hago siempre, la de trabajar con 200 ppp (dpi) en adelante. También, en este paso, podremos introducir ya el título que llevará el documento: "Diseño de mi CPO".

El siguiente paso será hacernos con las figuras que representarán botones, palancas y demás dispositivos a acoplar en la CPO en las dimensiones exactas para tener una representación lo más fidedigna posible del resultado final real. La recomendación aquí es que os hagáis con los esquemas de los dispositivos cortando todo lo demás y dejando únicamente las líneas negras.

Aquí os dejo distintos elementos en formato alambre y a 200 dpi de resolución de los componentes más usados para componer el panel de control de tu máquina recreativa:

Nota: Si habéis optado por trabajar a 200 dpi (la resolución que uso yo) estos elementos se mostrarán al tamaño real que tienen al natural.

Botón europeo


Happcontrol Trackball de 3"


Maneta magnética Industrias Lorenzo


Tornado Spinner


Edited by Mikonos - 31/1/2009, 17:15

Extracción de las figuras

Para extraer las figuras de alambre que os he dejado veamos el ejemplo siguiente de un botón europeo. Abrimos la imagen de "esquema botón europeo" con photoshop o tiramos la imagen dentro del programa. Con la "varita mágica" (está en la barra de herramientas situada a la izquierda) y los valores recomendados de "Tolerance 15" pulsamos cualquier parte blanca del dibujo, con lo que quedará el color blanco seleccionado.



Edited by Mikonos - 9/10/2007, 16:38

Después, con el botón del ratón derecho, pulsaremos sobre el dibujo y saldrá un pequeño menú en el que marcaremos "seleccionar inverso" para que sólo las líneas del dibujo queden ahora seleccionadas.

Ya tenemos las líneas perfectamente aisladas. Copiaremos con la opción "Edit/copy" o con la combinación de teclas "Control+C" y pegaremos en nuestro plano que representa nuestro panel de control con "Edit/paste" o con el atajo de teclas "Control+V".




Haremos esto con todos aquellos esquemas o ítem diferentes que vendrán a rellenar nuestro panel de control. Para los que sean iguales nos situaremos encima de la capa, daremos al botón derecho del ratón y duplicaremos.

Si os fijáis bien, el punto medio que por defecto nos da photoshop del objeto no coincide con el punto medio del botón, así que nosotros mismos habremos de colocarlo en el centro del botón para que este ocupe el lugar exacto en el espacio que definiremos más adelante. Colocaremos el puntero sobre la marca del "punto centro" y con el botón izquierdo del ratón lo desplazaremos justo hasta el centro del dibujo del botón, ignorando el dibujo del switch.




Nuestras coordenadas X e Y habrán cambiado. Ahora es el momento de situarlo en el lugar que ocupará en nuestra CPO.

Nota: Realmente, todo este proceso es muy rápido de hacer y conseguiremos explorar un montón de posibilidades para que nuestro panel de control presente al final un aspecto inmejorable.

Ejemplo de resultado final para un panel de 8 botones de acción europeos, 5 más pequeños de tipo sanwa, y otros 8 minipulsadores de gestión por jugador para una recreativa Naomi Universal Cabinet.







Edited by Mikonos - 9/10/2007, 17:04

No está terminado aún.

Pienso que es más sencillo de cara a manipular más libremente estos elementos de alambre que usando ese tipo de efecto de capa. Así podremos copiar y pegar sin más. Si tomásemos el elemento con efecto de capa habría que rehacer el efecto. Claro que también poseemos la opción duplicar, pero esto no sirve para otro lienzo distinto de photoshop.


De todas formas, es un abuena idea que puede servirles a los que tienen el deseo de crear su propio cpo.

Gracias, compa!

- Apéndice extra: Simulando resultados reales

Una de las cosas geniales que tiene trabajar con programas de edición de imagenes es que podemos crear simulaciones de nuestro trabajo y ver cómo combina decoración y colores de palancas y botones.

En la red existen varios archivos de dibujos de palancas y botones en muchos colores, os facilito imágenes para que lo descarguéis.




- Temas relacionados:
- Técnica de Mikonos para Realización del panel de Control Arcade
- Técnica: Preparación del cableado arcade para el cpo a través de los conectores faston


-Por Mikonos -

Edited by Mikonos - 28/12/2008, 13:38

De nada, hombre!

Lo necesitabas y lo he puesto delante en mi cola de trabajo!


Saludos

Creo que es mejor subir las piezas a modo de posteo de imagenes, así evitamos que caduquen los links de hostings de archivos.

Botón europeo


Happcontrol Trackball de 3"


Maneta magnética Industrias Lorenzo


Tornado Spinner




De nada!

Bramstein, creo que has fallado por no leer bien el tutorial. Te explico: Yo he intentado imponer un estándar en "Zona Arcade" con el arte, ese estándar es el de diseñar todo a 200 dpi. Es decir, todo los templates, todos los artes, todas las plantillas de palancas y botones, y las figuras de alambre, por supuesto, responden a este estándar.


Por qué 200 dpi?

Porque es una resolución que en absoluto es baja y porque trabajar a 300 dpi no tiene demasiado sentido cuando las impresoras no captan la diferencia a partir de 150 dpi. Otra razón importante es lo dificil de abrir y mover archivos de más de 500 megas en capas.

Nota: Trabajar al principio con 300 dpi puede resultar fácil, pero en cuanto empiezas a complicar el diseño y a utilizar filtros, los tiempos requeridos para hacer cualquier gestión en el archivo se vuelven exasperantemente largos, por lo menos en photoshop.

Con las figuras de alambre lo único que has de hacer es soltarlas sobre la lámina y verás que salen a la medida exácta de los elementos reales a 200 dpi.

Con respeto al tema de los centro, pues es raro que no puedas manipularlo, cantidad de veces me pasa que tengo seleccionada una figura con el CONTROL+P y al moverla sólo muevo el centro sin querer.



Saludos



P.D: Hay que leer bien los tutoriales. Te extraigo una cita del mismo.




Edited by Mikonos - 28/1/2009, 22:27

Perdona, el tema del atajo para modificar una capa es el CONTROL+T, aunque podéis hacerlo también acudiendo a la pestaña "edit/free Transform".

Respecto a si manejar tantas capas como elementos haya en el panel de control (Botones, palancas, otros), pues eso dependerá de tí. Tienes que descubrirlo.

Personalmente, suelo crearme la disposición del primer jugador de manera artesanal y con los del segundo jugador dublico los elementos, los selecciono todos y los fundo en una sola capa (Convert to Smart object).


Saludos



P.D: Bueeeeeennnnooo, vaaaaaaleeeee, hiciste los deberes. Queda este tutorial marcado para su revisión y especificar que los elementos están a 200 dpi.

Edited by Mikonos - 31/1/2009, 17:40