Aprenda un flujo de trabajo profesional para ilustrar una imagen de encabezado de estilo cómico

En este tutorial, revisaremos un flujo de trabajo profesional para ilustrar imágenes de encabezados de sitios web en estilo cómico, que están destinadas a integrarse en temas de Wordpress. Esta es una excelente manera de hacer que su blog destaque y sea 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. ¿Desea acceder a los archivos completos de Vector Source y las copias descargables de cada tutorial, incluido este? Únete a Vector Plus por solo 9 $ al mes. Puede ver las ilustraciones finales, el diseño final del sitio web a tamaño completo o visitar el sitio en vivo.

Paso 1 - Mirando un tema de WordPress

A continuación se muestra mi tema de Wordpress, como verás, el tema consta de algunas zonas, como el "encabezado". Aquí quiero cambiar la imagen del encabezado de fondo y publicar algo que pueda expresar más sobre mí como diseñador e ilustrador también.

Paso 2 - Comience con el boceto en papel, no digital aquí!

Siempre empiezo con unos bocetos sobre papeles. Esto realmente me ayuda a enfocar algunas ideas mejor y tener algo que rastrear después en Illustrator. Aquí un divertido video que hice para este tutorial..

Paso 3 - Los bocetos

Así que mi idea es crear un extraño mundo futuro con robots y una chica como comandante. Bocetos preliminares se muestran abajo.

La imagen de abajo muestra el boceto del lápiz final para publicar en Illustrator como plantilla..

Paso 4 - Comienza con Illustrator CS4

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

Ahora creo una nueva capa sobre la capa "plantilla". Entonces comienzo a trazar las líneas básicas del boceto. Siempre trazo con la paleta de la herramienta Pluma abierta para trabajar más rápido (pequeña punta).

Sigue los primeros pasos en el video a continuación..

Paso 5 - entintado

Con la herramienta Pluma, hago el negro. entintado; Me gusta referirme a esto como tintas Porque estoy en el arte del cómic. Vea el video a continuación.

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

También, ver bajo la capa de fondo de tinta.

La capa "boceto de plantilla" ya no necesita ser utilizada, así que la eliminé. Aquí todas las capas colocadas juntas..

Paso 6 - Pasos básicos de color

Después de entintar, necesito un color básico, aquí está la capa de "caracteres de color básicos".

Bajo el fondo se muestra el color básico a continuación..

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

Paso 7 - Profundidad y Sombra

Después de los colores básicos, necesito algo de profundidad y sombra para hacer que la ilustración sea más real. Aquí hay un rápido estudio sobre cómo caerá la luz dentro de esta ilustración..

Regreso en el ilustrador y comienzo a trazar las sombras donde sea necesario. Para aquellos que a menudo copio y pego las formas, a continuación, aplico Dividir de la paleta de buscador de ruta.

Al final, la imagen final se muestra a continuación, o vea la ilustración final..

Paso 8 - Guardar imágenes para Wordpress

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 las secciones yendo a Objeto> División> Crear a partir de guías.

Ahora guardo las dos imágenes yendo a Archivo> Guardar para Web (solo estoy guardando las imágenes y no html). Luego subo la imagen exportada final al pliegue del tema de Wordpress. Ahora está listo para ser codificado en el tema.

Conclusión

Puede ver los resultados finales a continuación, que se han integrado completamente en el tema final de Wordpress. Puede ver las ilustraciones finales, el diseño final del sitio web a tamaño completo o visitar el sitio en vivo.

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