Mmorpg Juego Web

Trabajo en progreso: nuevo juego de navegador

La industria del video juego es una de mis preferidas y por suerte me contrataron para rediseñar un nuevo juego MMORPG de navegador, sobre soldados!. Por ahora no puedo revelar el nombre 🙂

Hace tiempo que no tenemos un Work In Progress en el blog, así queee… hagámos uno!

SUMARIO

  1. Día 1: el boceto es clave
  2. Día 2: definiendo el estilo
  3. Día 3: línea final del primer personaje
  4. Día 4: color final del primer personaje
  5. Día 5: línea final y color del segundo personaje
  6. Día 6: trabajamos el fondo de la ilustración
  7. Día 7: creamos un logo rompedor
  8. Día 8: creamos la interfaz del juego

Día 1: el boceto es clave

Mi trabajo consiste en diseñar 2 plantillas web diferentes: página de inicio y página interna. Usé Google images e imágenes de trabajos previos para componer un boceto que mostrar al cliente. Por supuesto, en el diseño acabado reemplazaré cada imagen con ilustraciones personalizadas.

Página inicio videojuego
Página inicio del juego
Página interna del juego
Página interna del juego

En este paso del proceso, no me dentro demasiado en los detalles, simplemente hago rodar la bola y recabo feedback del cliente. Ni siquiera tengo muy clara la dirección final… lo realmente importante es acercarse cada vez más al resultado final, en la mínima cantidad de tiempo. Invertí 2 horas en este paso.

Después de varias rondas de correcciones, pasamos al siguiente paso.

Día 2: definiendo el estilo

Una vez los bocetos de los personajes están aprobados, por fin tengo una composición que funciona tanto para la página de inicio como para las páginas internas. Así que tras sólo 3  horas de trabajo estamos listos para crear la ilustración final.

Boceto Inicial
Boceto Inicial
Correcciones del Cliente
Correcciones del Cliente
Boceto Final
Boceto Final
Diseño de Personaje
Diseño de Personaje

Día 3: línea final del primer personaje

Invertí unas 7 horas desde el boceto del personaje hasta la línea final… el equipamiento era muy detallado, en el siguiente personaje, dibujaré las formas principales y añadiré detalle directamente con el color, así ahorraré mucho tiempo.

Observa que dibujé la máscara y el casco en capas diferentes, así puedo ofrecer al cliente cierto nivel de personalización.

Haz click para ver los detalles

Soldado de Asalto
Soldado de Asalto
Casco Táctico
Casco Táctico
Mascara Antigás
Mascara Antigás
Mascara y Casco
Mascara y Casco

Día 4: color final del primer personaje

Una vez que el dibujo y el sombreado está abocetado, aplicar el color es bastante sencillo, invertí unas 2 horas. Me decidí por un esquema de color cálido, usé una línea de color marrón para definir el tono, y tener un valor a partir del que elegir el resto de colores. Usé un esquema de iluminación de 2 focos, una luz cálida desde la izquierda y una luz fría desde la derecha.

Haz click para ver los detalles.

Soldado táctico
Soldado táctico
Casco Táctico
Casco Táctico
Máscara Antigás
Máscara Antigás
Máscara y Casco
Máscara y Casco

Día 5: línea final y color del segundo personaje

Invertí unas 7 horas desde el boceto al acabado final, este segundo personaje fue más rápido ya que la paleta de color estaba definida. Como puedes ver en el video también re-usé algunas partes del primer personaje.

Diseño de Personaje Soldado de asalto
Diseño de Personaje Soldado de asalto

Día 6: trabajamos el fondo de la ilustración

Las tareas más costosas, y la que añade auténtico valor al juego están completadas, hoy trabajé en el fondo de la ilustración durante unas 3 horas más. Observa como user unas pocas siluetas planas que encajan con el look de los personajes pero no llaman demasiado la atención.

Ilustración video juego
Ilustración video juego

Día 7: creamos un logo rompedor

Me encantan los logos cartoon pero en este caso usé una aproximación más simple ya que no quería sobrecargar el interfaz, invertí unas 4 horas más.

I will disclose it when the game is released 🙂

Día 8: creamos la interfaz del juego

Y éste es el paso final en mi proceso de diseño web, diseñé un interfaz ligero, estilo táctico. Usé un esquema de color cálido que encaja con la ilustración. Atractivo pero no demasiado duro para los ojos. Invertí unas 8 horas para ambas plantillas, incluyendo las correcciones del cliente.

Estimo que invertí unas 40 horas para el proyecto completo. 

Página Inicio
Página Inicio
Página Interna
Página Interna

Y buenas noticias que me gustaría compartirles! Me contrataron para un segundo juego, esta vez sobre la Mafia en los años 20.
Saludos!

Sergio

Sergio Ordoñez Suanez
[email protected]

Hi there, I'm webmaster, designer and digital content creator of everything you see at SOSFactory. I love sharing my limited knowledge as more experienced designers did when I was a newbie.

2 Comments
  • Fabián Ramírez
    Posted at 08:30h, 17 August Reply

    Sergio, impresionante tu creatividad y dominio de las suites de diseño, soy fiel seguidor de tus proyectos

    • sergio ordonez
      Posted at 08:50h, 17 August Reply

      Muchas gracias Fabián, me alegro de que te guste mi trabajo 🙂

Post A Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

shares