Crea ilustraciones simples para la web

Sep 11, 2025

Cómo

[dieciséis]

Me senté, jugué una música, atenuó las luces y abrí mi laptop. Tenía mucho que hacer. En un esfuerzo por convocar la inspiración, comencé a dibujar. Doodle Art Líneas de una esquina de la pantalla a la otra, cuando vi un formulario de cometa. "Hmm", comenzó mi cerebro lentamente, "¿Qué pasa si los conecto y agregue algunos planetas?"

Unas horas más tarde tuve mi ilustración de Dibibble Popular. Todavía apenas recuerdo cómo sucedió, pero después de cavar a través de mi cerebro, descubrí mi algoritmo interno para crear una ilustración, no solo esta, sino cualquier otro que he hecho. Es gracioso, me esperaba que fuera más complejo. Oh bien…

Estilo ilustración

Antes de empezar a trabajar en una ilustración, me aseguro de que entiendo su propósito y el contexto donde va a vivir. ¿Es esa en la aplicación, o sitio web o wallpaper? ¿Habrá texto en él, y se va a ubicar en un ambiente ocupado? ¿Se supone que se supone que simboliza una acción, o si está allí para regalar un determinado vibra?

Si se supone que la ilustración debe transmitir una idea clara, o para simbolizar un objeto o acción en particular, luego optaré por una ejecución simple donde toda la atención se enfoca en la parte importante. Sin embargo, si estoy yendo específicamente a una ilustración de fondo 'silencioso', elegiré un enfoque similar al patrón, o asegurarme de que no haya elementos obvios de llamamiento de atención, para minimizar la posibilidad de que las personas lo interpreten sobre la interpretación. . Para las ilustraciones en la aplicación, trato de mantener las cosas domesticadas, para evitar la atención de descarrilamiento de la funcionalidad.

Reglas estéticas

A mi cerebro le gusta crear todas estas reglas extrañas. Son como ridículos desafíos que no puedo soportar para pasar por encima: ¿qué pasa si dibuje un humano solo usando círculos? ¿Qué pasa si ilustre una puesta de sol con solo un color?

Reglas geométricas, progresiones lógicas, simetría. Hay algo muy atractivo en tener estrictas reglas matemáticas aplicadas al arte. Se siente como la magia de ingeniería inversa; Aleja el elemento místico en el arte, así que es casi como revelar la ciencia detrás de ella.

Ilustración compleja; Paleta de colores simple

A city illustration with a complex level of detail, which has been combined with a simple, analogous colour palette

Como resultado, mi cerebro es bastante perezoso cuando se trata de elegir el color, por lo que tiene dos tipos generales de paletas de colores que elige de: uno para ilustraciones complejas; Otro para los simples.

Las ilustraciones complejas tienen un alto nivel de granularidad, con muchas formas / objetos y muchos detalles. Estos suelen ser de naturaleza por naturaleza y no tienen un punto focal claro. Mi cerebro ha decidido que este tipo de ilustraciones funcionan bien con paletas de colores monocromáticas o análogas. O, en términos más amplios, menos colores y menos contraste de color.

Todo esto se reduce al equilibrio visual; Si las formas están locas, los colores deben ser suaves. Una excepción está en un caso en el que quiero dar énfasis a un determinado objeto que de otra manera no se destacaría. Esto se puede lograr utilizando un color altamente contrastante, mientras que todo lo demás se mantiene monocromático y domesticado. El equilibrio visual perfecto está en algún lugar entre la sobreestimulación (colores ruidosos, formas complejas, muchos detalles, todo grita en su cara) y la subestimulación (el tipo malo de mínimo, aburrido, nada nuevo o interesante).

Paletas monocromáticas

Analogous or monochrome palettes work effectively when there is a visual progression or repetition of elements

Una paleta de colores monocromáticas está formada por los tintes o tonos de un color. Los tintes ocurren cuando un color se mezcla progresivamente con blanco; Las sombras suceden cuando se mezcla progresivamente con negro. Un problema que siempre he tenido con paletas monocromáticas es que los tintes y las sombras pierden progresivamente la vitalidad, debido a la naturaleza de mezclar un color con blanco o negro, ambos tienen saturación cero por ciento.

Para evitar este embotamiento gradual, utilizo un truco simple: además de agregar blanco o negro, cambio progresivamente el tono un poco. Esto es esencialmente una paleta análoga sutil en lugar de una paleta monocromática. Por ejemplo, si quiero crear tintes monocromáticos rojos, cambiaría el tono hacia Orange. Si quiero crear tonos monocromáticos rojos, cambiaría el tono hacia Magenta a medida que se oscurecía. Si quiero obtener tintes más ligeros de azul, me cambio hacia Cyan; Para tonos oscuros de azul, me cambio en la otra dirección, hacia la púrpura.

Esto resulta en una paleta que aún se siente algo monocromática, pero está mucho más viva y definitivamente tiene patada. Desde que descubrí esto, nunca volví a crear una verdadera paleta monocromática.

Ilustración simple; Paleta de colores complejos

Las ilustraciones con menor complejidad generalmente tienen un punto focal claro y una jerarquía de objetos. Las formas tienden a ser más sencillas, por lo que las opciones de color pueden ser más salvajes. Estoy pensando en los colores de alto contraste de cualquier tipo: complementario, triagico, tetradic, siempre que sea una paleta de llamativa, estimulante.

Hay un universo entero entre lo que describí como ilustraciones complejas y simples. Pero mi cerebro no está demasiado preocupado por todo ese espectro, preferiría etiquetar cualquier ilustración, ya sea como complejo o simple.

Las paletas de colores de alto contraste no son tan simples como escoger los colores opuestos en una rueda de color. La rueda de color es un gran punto de partida, pero de ninguna manera es el final del proceso. Por ejemplo, al elegir una buena combinación naranja y azul, presto atención a algunas cosas: la luminancia percibida y cómo los colores de acento funcionan con los colores predeterminados.

Luminancia percibida

Si ambos colores tienen la misma luminancia percibida, entonces el cerebro le resulta difícil distinguir la frontera entre ellos, así que mirar la imagen se siente incómodo. A menos que los colores nunca se supone que se toquen, vale la pena asegurarse de que no tengan la misma luminancia percibida.

Ah, y en caso de que tenga curiosidad por qué uso la palabra 'percibida', busque el efecto Helmholtz-Kohlrausch, que demuestra que los colores con la misma luminancia se pueden percibir para tener diferentes valores. Dado que la naranja tiene una luminancia percibida más alta que azul, por ejemplo, es fácil aumentar aún más la disparidad entre los dos colores utilizando una naranja más ligera y un azul más oscuro.

Acento versus colores predeterminados

An illustration for the Zopim homepage. Blue shades are dominant, with orange providing the accents

Si el uso de cada color es muy diferente, ajusmo los valores de color en consecuencia. Ser valiente con colores de acento y tocarlo seguro con colores predeterminados es mi enfoque de ir a.

En el ejemplo azul naranja anterior, usaría azul como un color calmante para llenar áreas más grandes, para fondos y elementos grandes, y algunas naranja silvestres para botones, iconos y otros elementos pequeños. En el contexto de la ilustración, tendría tonos azules como base, y nuevamente, naranja como el acento, tal vez a modo de enfatizar un detalle interesante, o un elemento importante.

Cheque de balance visual

Independientemente de la ilustración que termines siguiendo las guías anteriores, asegúrese de dar un paso atrás y verifique si todo esto tiene sentido juntos. Hay tantas excepciones a las reglas en la ilustración, que sería imposible enumerar todas las combinaciones que dan a luz a una ilustración increíble. Siempre pruebe las cosas que parezcan interesantes, y cuando algo lo sorprenda, asegúrese de entenderlo para que pueda seguir mejorando su intuición.

Este artículo apareció originalmente en revista neta emisión 286; cómpralo aquí !

Artículos relacionados

7 diseño web DOS y no lo ques
6 de las mejores carteras independientes de 2016.
Las 6 mejores herramientas de Photoshop para diseñadores web.

Crea ilustraciones simples para la web

Estilo ilustración

Reglas estéticas

Ilustración compleja; Paleta de colores simple

Paletas monocromáticas

Ilustración simple; Paleta de colores complejos

Luminancia percibida

Acento versus colores predeterminados

Cheque de balance visual

Cómo - Artículos más populares

¿Qué es una línea de terminador?

Cómo crear una escena de la habitación fotorrealista

Entornos maestros a gran escala en 3DS MAX

Crea efectos de ondulación con Pixijs

5 consejos para mejorar sus creaciones de VR

Edad de una fotografía en Photoshop CC

Convierte tus diseños 2D en 3D con Project Felix

5 maneras de administrar el flujo de efectivo efectivamente

Categorías