Advertisement
  1. Design & Illustration
  2. Web Design

Flujo de trabajo profesional para ilustrar con estilo Comic un encabezado

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called Web and Interface Design With Vector.
Create a Stylized Navigation Bar and Slice it for Web
Quick Tip: Create Colorful Glossy Rating Stars

Spanish (Español) translation by Iván Gómez (you can also view the original English article)

En este tutorial, revisaremos un flujo de trabajo profesional para ilustrar imágenes de encabezado de sitio web en estilo Comic, para integrarla en temas de WordPress. Esta es una gran manera de hacer que tu blog se destaque y ser promovido en las mejores galerías de diseño web. ¡Empecemos!

Vista previa de la imagen final

A continuación, se muestra la imagen final en la que trabajaremos. ¿Quieres acceso a los archivos completos de Vector Source y copias descargables de cada tutorial, incluyendo este? Únete a Vector Plus por sólo 9$ al mes. Podrás ver la ilustración final, el diseño final del sitio web a tamaño completo o visitar el sitio en vivo.

Paso 1 - Analizado un tema de Wordpress

A continuación, muestro mi tema de Wordpress. Como puedes ver el tema consta de algunas zonas, como el "encabezado." Mi objetivo es entonces, cambiar la imagen de fondo del encabezado y publicar algo que pueda expresar más sobre mí como diseñador e ilustrador.

Paso 2 - Comienza con un boceto en papel, ¡nada digital en este punto!

Siempre empiezo con algunos bocetos en papel. Esto me ayuda a enfocar mejor algunas ideas y tener algo para vectorizar luego en Illustrator. Aquí un divertido video que hice para este tutorial.

Los bocetos

Así que mi idea es crear un extraño mundo futurista con robots trabajadores y una chica comandante. Los bocetos preliminares se muestran a continuación.

La siguiente imagen muestra el boceto a lápiz finalizado para importar en Illustrator como plantilla.

Paso 4 - Comienza con Illustrator CS4

Ahora estoy listo para sentarme frente a mi PC y comenzar a trabajar con Adobe Illustrator CS4. Abro un nuevo documento e importo el boceto como una plantilla (doble clic en la capa y marco Plantilla).

Ahora creo una nueva capa encima de la capa "plantilla". Luego empiezo a trazar las líneas de croquis básicas. Truco: siempre redibujo con el panel de la Herramienta Pluma abierto para trabajar más rápido.

Sigue los primeros pasos del siguiente vídeo.

Paso 5 - Entintar

Hago el entintado en negro con la Herramienta Pluma; me gusta referirme a esto como entintado porque me gusta el arte del Cómic. Mira el video a continuación.

Al final, puedes ver la capa con los trazados de los personajes.

Y debajo del trazado se ve la capa de fondo.

La capa "template sketch" ya no necesita ser utilizada, así que la eliminé. Aquí todas las capas juntas.

BG-TOP3

Paso 6 - Pasos básicos para el color

Después del entintado, necesito aplicar un poco de color básico, aquí lo hice en la capa "personajes color básico".

Debajo del fondo está "personajes color básico" como se muestra a continuación.

Aquí están todas las capas de color básicas juntas.

Paso 7 - Profundidad y Sombra

Después aplicar los colores básicos, necesito añadir un poco de profundidad y sombra para hacer más real la ilustración. Aquí muestro un estudio rápido sobre cómo quedará la luz para esta ilustración.

En ilustrador empiezo a dibujar las sombras donde sea necesario. Para crear las sombras, a menudo copio y pego las formas, y luego aplico Dividir desde el panel Buscatrazos.

Al terminar, puedes ver la imagen final o ver la ilustración finalizada.

Paso 8 - Guardar imágenes para Wordpress

A partir de esta imagen, necesitaba dos partes para mi tema de Wordpress, una para el encabezado y otra para el cuerpo. Con las guías dibujo las dos zonas.

Después de colocar las guías, creo los sectores desde Objeto > Sectores > Crear a partir de guías.

Ahora guardo las dos imágenes desde Archivo > Guardar para Web (sólo estoy guardando las imágenes sin HTML). Luego subo la imagen final exportada a la sección de Tema Wordpress. Ahora está lista para añadir el código del tema.

Conclusión

Puedes ver los resultados finales a continuación, donde se ha integrado completamente en el tema de Wordpress. Puedes ver la ilustración final, el diseño final del sitio web a tamaño completo o visitar el sitio en vivo.

Suscríbete a Vectortuts+ RSS Feed para estar al día con los últimos tutoriales y artículos vectoriales.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.