TRUN videogame cover for VGsource

Talking about TRON is talking about a classic science fiction film and one of the best tributes to creativity and imagination in the world of cinema. Somewhat misunderstood film at first, but time makes justice and put TRON in its place. And if we talk about mythical elements of the film, we have to talk about bikelight racings ...

TRUN is a videogame created in Z80 assembler based on  original TRON.
The creators of the game are Vgsource, an indie development group that codes for MSX.
A few months ago, I was contacted to design their videogame cover and thus give it a greater visual impact.
It was an interesting work because from the first moment we looked for a 80's look"  immitating the style of covers of the era of Dinamic or Topo (spanish companies), where Azpiri was king illustrating those beautiful casettes and the less important was the result on screen (at least for people like me)
The first thing I did was to take references, and as it was not going to be otherwise the TRON movie itself was the main source of inspiration. I had several keys in mind while painting this illustration:
  •     blue
  •     Light
  •     No Fx overlay.
  •     Speed
  •     80's smell
Do you want to see how development was? Then we analyze the different phases briefly.

Sketches Phase

After analyzing what I want to emphasize in the image I start working on the sketches.
These are not very detailed drawings, but you can see the main elements of the design.

I decide for the first by movement feeling.

As we know the diagonals add movement to the composition and as I want to transmit speed I choose the design with that scheme and the broad to be able to study where to place each thing. Something that in the end I will change are the bikes. Finally will be even more "homage" to the original light bikes designed by Syd Mead.

References Phase

Being the game a "clone" of the game of TRON does not seem crazy to me to take references of the film. Since we are going to make a copy of a classic we will do well. Let it be noticed! That's why I create a composition with multiple references to then paint over what I need and get the result I want, not so photo but 2d. There is still a lot of work left. This system is not the only one I use for my illustrations.
This is the result of collage done inside Krita. All images have their corresponding copyright. We only use this as an idea. At the end, 100% of the illustration is repainted.

From this point we will work the Backgrounds. For the backgrounds, brushes that are quick for "covering big areas" are usually used. I use a brush that has the characteristic that diffuses the paint when low pressure is used and is adding more paint as the pressure increases. This is what I show you in the capture.

It has a Knive effect and belongs to the set I made for the DVD of the krita foundation #muses. If you are interested you can download it here totally free.

PACK bundle muses

Note: If for some reason you see that this brush produces somekind of "Lag", a very useful thing that speed up this brush and many of Krita's brushes is to use the "precision" parameter inside the brush editor and lower it from 5 to 1 If you also use large sizes you can increase the brush spacing to 0.5 or 0.7. It can be further optimized to gain speed in very large sizes.

Beyond it you will see that it is very fluid but loses a little of quality. These brushes require important computation operations for the CPU but give very interesting results.
What I want is to blur the photo effect but respecting the colors that are underneath while still being spots and at the same time giving me more freedom to paint over. You will see that the result is very pictorial. Handcrafted within the digital.

Now it's time to start defining all the elements of the image.
The face in the photo does not show an emotion according to what I look for, come on man! You're playing with your life in a race! :)
I have created this Gif for those who like to follow the evolution of the steps to follow.

You can see how the lighting changes as I work the metal. The gif was done with Gimp. It explains much more than a page of text. Among other things it is seen how the light is affecting the face of the character and his helmet.

The same thing happens in the background. When I go detailing the bikes and the kind of hangar where they come from.

When completing the image we run the risk of adding too many details. So beware of the Glow and the additive or color dodge modes that hook.
Making lines or curves accurately is complicated with freehand so one way to avoid headaches is to use paint assistants.

For example a use would be in the curve that defines the motorcycle panel of the character.


A main element of this image are the light bikes. Let's do something simple so we do not separate too much from what will be seen on the screen.


The problem as I see it is that the bikes need some lines of movement. This will convey more sense of career. In the end I choose lines not on the whole bike but in part. The result is something more shocking.

Logotype design for the cover

All we have left to do is create a logo for the cover design. For that task I better use an image editor like Gimp and a vector design program like Inkscape.

In Gimp I select the text tool with the previously downloaded typography that is very similar to TRON.

To vary slightly the layout i adjust and complete the contour of the word "TRUN" That way I have a good basis for editing in Inkscape and that can be adapted to any size without loss of quality.

Now we can add the text to our image.
And the end result is what we expected. Did you like it?

** If you liked the article and learned something to help you, you can support me by sharing the news with your friends. See you in the next article.

If you want to know more about the video game these links may seem interesting.

Some photos

Asociación de amigos del MSX



Portada para videojuego TRUN de VGsource

Hablar de TRON es hablar de un clásico de la ciencia ficción y de uno de los mejores tributos a la creatividad e imaginación en el mundo del cine. Película un tanto incomprendida al inicio, pero el tiempo le dio la razón y la puso en su lugar. Y si hablamos de elementos míticos de la película, tenemos que hablar de las carreras de motos de luz...

TRUN es un videojuego creado en ensamblador Z80 basado en TRON.
Los creadores del Juego son Vgsource, un grupo indie de desarrollo que programa para MSX.
Hace unos meses, me contactaron para diseñar su portada y así darle un impacto visual mayor.
Fue un trabajo interesante porque desde el primer momento se buscaba un "look" ochentero imitando el estilo de portadas de la época de Dinamic o Topo, donde Azpiri era el rey ilustrando esos bellos casettes y lo de menos era el resultado en pantalla ( al menos para personas como yo)
Lo primero que hice fue coger referencias, y como no iba a ser de otra forma la propia película de TRON fue la principal fuente de inspiración. Tenía varias claves en mente mientras pintaba esta ilustración:
  • Azul
  • Luz
  • No Fx overlay.
  • Velocidad
  • Espíritu 80's
¿Os apetece ver como fue el desarrollo? Pues analizamos las diferentes fases brevemente.

Fase de Bocetos

Después de analizar qué quiero destacar en la imagen empiezo a trabajar en los bocetos.
Estos son dibujos no muy detallados en los que se pueden ver los elementos principales del diseño.

Me decido por la primera por la sensación de movimiento.

Como ya sabemos las diagonales añaden movimiento a la composición y como quiero transmitir velocidad elijo el diseño con ese esquema y lo amplio para poder estudiar dónde colocar cada cosa. Algo que al final voy a cambiar son las motos. Finalmente serán aun más “homenaje” a las originales motos de luz diseñadas por Syd Mead.

Fase de referencias

Siendo el juego un calco del juego de TRON no me parece una locura coger referencias de la película. Ya que vamos a hacer una copia de un clásico vamos a hacerlo bien. ¡Que se note! Por eso creo una composición con las múltiples referencias para luego pintar por encima lo que necesite y llegar al resultado que quiero, no tan foto sino más 2d. Queda aun mucho trabajo.Este sistema no es el único que uso para mis ilustraciones.

Este es el resultado del collage realizado dentro de Krita. Todas las imágenes tienen sus derechos de autor correspondientes. Esto solo lo usamos como idea. Al final se repinta el 100% de la ilustración.

A partir de este punto vamos a trabajar los fondos. Para los fondos normalmente se usan pinceles que sean rápidos que "cubran" Utilizo un pincel que tiene la característica que difumina la pintura cuando se ejerce poca presión y va añadiendo más pintura según aumenta la presión. Es este que os muestro en la captura.

Tiene un efecto como de espátula y pertenece al set que hice para el DVD de la krita foundation #muses. Si os interesa os lo podéis descargar aquí totalmente gratis.

PACK bundle muses

Nota: Si por alguna razón veis que este pincel produce algo de "Lag", una cosa muy útil que acelera tanto este pincel como muchos de los de Krita es utilizar el parámetro "precisión" dentro del editor de pinceles y bajarlo de 5 a 1. Si además utilizas tamaños grandes puedes aumentar el espaciado del pincel hasta 0.5 o 0.7. Se puede optimizar aun más para ganar velocidad en tamaños muy grandes.

Más allá verás que va muy fluido pero pierde un poco de calidad. Estos pinceles exigen operaciones de cómputo importantes para la CPU pero dan resultados muyyy interesantes.  

Lo que quiero es desdibujar el efecto foto pero respetando los colores que hay debajo aun siendo manchas  y a la vez darme más libertad para pintar por encima. Veréis que el resultado es muy pictórico. Artesanal dentro de lo digital.


Ahora es tiempo de empezar a definir todos los elementos de la imagen.

La cara en la foto no muestra una emoción acorde a lo que busco, vamos hombre! ¡Que te estás jugando la vida en una carrera! :)

He creado este Gif para los que les gusta seguir una evolución de los pasos a seguir.

Se puede apreciar como va cambiando la iluminación según voy trabajando el metal. El gif lo hice con Gimp. Explica mucho más que una página de texto. Entre otras cosas se ve cómo la luz va afectandola cara del personaje y su casco.
Lo mismo sucede en el fondo. Cuando voy detallando las motos y la especie de hangar de donde salen.

Al ir completando la imagen corremos el riesgo de añadir demasiados detalles. Así que cuidado con el Glow y los modos aditivos o color dodge que enganchan.
Hacer lineas o curvas con precisión es complicado a mano alzada por eso una forma de evitarnos quebraderos de cabeza es utilizar los asistentes de pintura.

Por ejemplo un uso sería en la curva que define el panel de la moto del personaje.

Motos de Luz.

Un elemento principal de esta imagen son las motos de Luz. Vamos a hacer algo sencillo para no separarnos demasiado de lo que se verá en pantalla.


El problema según veo es que las motos necesitan unas lineas de movimiento. Esto va a transmitir más sensación de carrera. Al final opto por lineas no en toda la moto sino en parte. El resultado es algo más impactante.

Diseño de Logo para la portada

Ya solo nos queda realizar un logotipo para el diseño de la portada. Para esa tarea mejor utilizo un editor de imágenes como Gimp y un programa de diseño vectorial como Inkscape.

En Gimp selecciono la herramienta texto con la tipografía previamente descargada que es muy parecida a la de TRON.

Para variar un poco el diseño ajusto y completo el contorno de la palabra TRUN De esa forma ya tengo una buena base para editarlo en Inkscape y que se pueda adaptar a cualquier tamaño sin perdida de calidad.

Ahora ya podemos añadir el texto a nuestra imagen.
Y el resultado final es lo que esperábamos . ¿Os ha gustado?
**Si te ha gustado el artículo y has aprendido algo que te ayude, puedes apoyarme compartiendo la noticia con tus amigos. Nos vemos en el próximo artículo.
Si quieres saber más del video juego estos enlaces te pueden parecer interesantes.

Algunas fotos

Asociación de amigos del MSX