Youtube Facebook Twitter Deviantart My feed Feed directly to your inbox

Work in progress: Blood Crave web design

Work in progress: Blood Crave web design
Choose your language / Elige tu idioma:englishespañol

Os comento que estoy usando mi muro de Facebook para mostrar los diferentes pasos en la creación de una web. Se trata de Blood Crave, un MMORPG sobre vampiros que estoy diseñando ahora mismo.

Postearé imágenes casi a diario para que podais seguir la evolución de todo el proyecto: ilustración, diseño de logotipo y diseño web final. Os invito a que participeis en este “tutorial” preguntando cualquier duda que tengais o simplemente comentando que os parece como va quedando.

Paso 1: planeamos la página

Antes de empezar a dibujar a lo loco he hecho un pequeño boceto de la web, así me hago una idea del espacio que tengo para la ilustración.

Blood Crave login page

Como ves la página va a ser muy sencilla, simplemente constará de una ilustración a la izquierda y un formulario de acceso a la derecha. El objetivo es aumentar el % de conversión.

Paso 2: boceto de la ilustración

Blood Crave illustration

En este paso uso prácticamente todo lo que tengo a mano para componer la ilustración, desde fotos a antiguos bocetos. Cuando estoy contento con la composición me dedico a limpiar y retocar las lineas hasta que consigo una base sobre la que trabajar.

Paso 3: entintado

La fase de entintado la he explicado un millón de veces así que pasaremos rápido, postearé algunas imágenes con anotaciones según me vayan apareciendo complicaciones.

Blood Crave entintado en progreso
Peso de línea
Tangencias en la composición
Peso de línea
Entintado final

Paso 3: Coloreando la ilustración en Photoshop

En Breve!!!

Ya sabes, si quieres contribuir, ¡sólo tienes que compartirlo en tu Facebook o Twitter!!

This post was written by:

- who has written 97 posts on SOSFactory Blog.

My name’s Sergio Ordoñez I´m illustrator, graphic and web designer. A selection of my work is included at SOSFactory. If you want to support this blog, please be an active member: tweet the posts, participate in the discussions and the exercises :)

Contact the author

  • zedkin

    es excelente como muestras cada etapa de tu trabajo….esa demostración a puertas abiertas demuestra la confianza en tu trabajo que por cierto es excelente y como comente en deviantart….muy caracteristico.
    Espero ver el producto terminado.
    Saludos

  • Aviator

    Sergio, I wanted to ask you if you still work in Photoshop for everything that you do or do you also do the full design in Illustrator? The PDF file that I bought from your site was a photoshop tutorial, but are the steps the same when you design in Illustartor?
    Also… don’t clients prefer the file in AI format because then they can play with vectors and are not limited my size?
    Thanks in advance Sergio.
    AD

    • http://www.sosfactory.com/blog Sergio Ordonez

      When working for the web I always use Photoshop because it’s much more comfortable for me.

      But I always work in high res, so the client will be able to print reasonably big. This is illustration is around 5000x7000px.

      I provide vectors if needed but I usually charge a fee because it’s more time consuming, specially for illustration.

      The process are slightly different due to the limitations of vectors, check this tutorial: http://www.sosfactory.com/blog/how-to/mascot-design/vectorial-illustration-with-illustrator/

      Cheers!

      • Aviator

        Thanks do much Sergio for the quick response!! You’re a treasure both as an inspirator and a guide to me. Thank you, have a good day!

  • Anónimo

    Do you draw those on I drawing pad first, scan, then ink?

    • http://www.sosfactory.com/blog Sergio Ordonez

      I do everything digitally since I got my Wacom Cintiq, as I mention in the post, in this step I use everything from scanned sketches on paper to photos and redraw everything until all the pieces fit together.

  • http://twitter.com/RobynAbbatiello Robyn Abbatiello

    Great stuff thanks for sharing ;-)

  • http://www.facebook.com/natanmonte Nathan Monte

    Sergio, who or where you learned to color your drawings? You’re too good! Congratulations!

  • http://www.sosfactory.com/blog Sergio Ordonez

     Thanks Nathan, just practice :)

  • http://twitter.com/viperfx09 Tharshan

    Your site is such an amazing resource for a beginner like me! If you have time it would really help if you could do more beginner tutorials explaining your drawing process – I know it takes practise and imagination but I was curious if you have any pro tips for sketching characters details as this on paper.
    How long did the inking really take :)

    Thanks, I look forward to the colouring stage – i foresee red and black :)

  • Manas Punks

    Your works are super cool my friend.Inspires me a lot.

  • http://www.Smashious.com/ Smashious.com

    great work! Looks awesome.

  • Rootrudee

    O Brother, where art thou?
    No update for 9 month …

    • http://www.sosfactory.com/blog Sergio Ordonez

      Sorry man, too much commercial work… but it’s not abandoned. I keep posting in my Facebook and Twitter profiles.

  • http://www.lawebera.es/diseno-web/ Jhonatan | Diseño Web

     

    Felicidades Sergio, eres un excelente profesional, vengo
    viendo tus diseño hace algún tiempo y cada día sorprendes con muy buenos
    trabajos. Saludos

  • jopicar …

    Hola Sergio!

    Ya veo que le has dicho a Rootrude que estas líado, es una pena no seguir viendo esta maravilla de diseño aquí en tu blog, pero me acercaré a Facebook a echar un ojo.

    Suerte maestro!! 

  • Diseño web Costa Blanca

    Buena entrada en el blog