Una guía paso a paso para diseñar ilustraciones personalizadas sin ninguna habilidad de dibujo

Veo que muchas empresas hoy en día usan ilustraciones o imágenes de stock. Aunque estas opciones son económicas, el mensaje de la marca se diluye porque las imágenes no son exclusivas del producto.

En un mundo en el que el 74 % de las redes sociales y los especialistas en marketing B2B utilizan elementos visuales en sus promociones, la forma en que te distingues visualmente es fundamental.

Si su marca es prolífica, las personas aprenderán el lenguaje visual asociado con su marca. Tan pronto como vean las mismas ilustraciones de stock asociadas con otro producto, la identidad de su marca se debilitará.

Con ilustraciones personalizadas, los elementos de la identidad de una marca pueden fusionarse en torno a una perspectiva y personalidad compartidas. Se comunican con los clientes en un nivel intuitivo y ayudan a las marcas a contar su historia de manera duradera.

Sin embargo, muchos diseñadores evitan trabajar como ilustradores por temor a no tener habilidades de dibujo. Estamos aquí para mostrarle cómo cualquier diseñador puede desarrollar bellas ilustraciones, sin necesidad de dibujar.

Veremos tres estilos de ilustración populares y aplicaremos pasos muy simples para desarrollar su propia obra de arte desde cero. Puede seguir y aplicar lo que aprenderá para crear piezas de gran apariencia para su próximo proyecto.

Recrea la famosa ilustración del espacio.

La diseñadora e ilustradora Nina Georgieva es la pionera detrás de esta notoria pieza de Dribbble, y ahora, el estilo se ha convertido en una tendencia propia.

Inspirándonos en Georgieva, crearemos nuestra propia ilustración espacial siguiendo unos sencillos pasos.

Esto es lo que obtendrás al final.

1. Comience con las estrellas.

Con la "herramienta estrella" de Illustrator, cree una estrella de cuatro puntas. Luego hazlo 75 por ciento transparente.

Mientras está seleccionado, duplíquelo en su lugar presionando Ctrl+C, luego Ctrl+F.

Reducir la forma en el frente.

A continuación, agregue un efecto brillante; seleccione la forma más grande; y aplique un efecto de "Desenfoque gaussiano" desde el panel "Apariencia".

Finalmente, puede almacenar su forma de estrella dentro del panel "Símbolos" para usarla más adelante en la composición.

2. Crea la forma de la nube.

Apila rectángulos de varios anchos.

Combínalos con el panel "Pathfinder".

Termine dando a toda la forma un valor alto de "radio de esquina".

3. Haz la textura del planeta a partir de las nubes.

Comenzando con la forma de la nube, cree el efecto de textura del planeta como se muestra arriba.

Apila muchas formas de nubes juntas y asegúrate de tener una sucesión de curvas hacia afuera y hacia adentro para crear un patrón ondulado.

4. Ajusta la textura.

Simplifique el patrón ondulado antes de aplicarlo a la forma del planeta.

Retire los puntos adicionales en un lado de la textura y aplánelo.

5. Crea un planeta texturizado.

Superponga el patrón ondulado con un círculo y cree una división usando la opción "Dividir" dentro del panel "Pathfinder".

Elimine la forma adicional creada fuera del círculo y cree un efecto de iluminación aplicando diferentes valores de gris a cada lado del planeta.

6. Añade una atmósfera al planeta.

Cree dos círculos más grandes y péguelos detrás del planeta con Ctrl+X y luego Ctrl+B.

Alinéelos correctamente.

Agregue transparencia a los nuevos círculos y un efecto de desenfoque al tercer círculo (dentro del panel "Apariencia").

Agrupe (Ctrl+G) y almacene el resultado dentro del panel "Símbolo".

7. Duplica y colorea los planetas.

Copie varias formas de planetas del panel "Símbolos" y vuelva a colorearlas usando dos colores diferentes para cada lado.

Use la "Herramienta de selección directa (A)" para seleccionar y la "Herramienta Cuentagotas (I)" para elegir y aplicar un color.

8. Escala y posiciona tus planetas

Mueve los planetas en diferentes posiciones con la "Herramienta de selección (V)" y dales varios tamaños arrastrando las esquinas blancas que aparecen cuando se seleccionan (mantén presionada la tecla "Shift" para la escala proporcional).

9. Agregue los anillos.

Dibuja algunos círculos de línea alrededor de los planetas para hacer los anillos.

Para pegar planetas más pequeños delante de los anillos, selecciónelos y presione Ctrl+X (cortar) y Ctrl+F (pegar delante).

10. Agrega algunas nubes y estrellas en el cielo.

Volviendo al panel "Símbolo", arrastre y suelte algunas formas de nubes y estrellas.

Duplíquelos, escálelos y colóquelos como desee en su espacio.

Aquí está el resultado final.

Juega con la escala, la posición y los colores para personalizarlo.

Agregue un poco de tipografía y listo, tiene un nuevo fondo de escritorio personalizado.

Recrea el estilo de las ilustraciones del blog de Toptal

El blog de Toptal es una valiosa fuente de información e inspiración creada por los mejores talentos de todo el mundo. Al igual que el que está leyendo en este momento, la mayoría de los artículos presentan ilustraciones para respaldar el contenido. Usamos formas geométricas simples y colores brillantes para representar objetos.

Veamos cómo puede aplicar este estilo para crear sus propias ilustraciones de alimentos.

Esto es lo que obtendrás al final.

1. Dibuja un alevín simple.

Para crear una fritura, comience con un rectángulo largo y agregue varios puntos en los bordes con la "Herramienta Pluma (P)".

Modifique la forma moviendo los puntos, usando la "Herramienta de selección directa (A)".

2. Crea el recipiente de mayonesa.

Crea tres círculos con tamaños decrecientes, de atrás hacia adelante.

El círculo exterior es el recipiente, el del medio (en blanco) es la mayonesa y el círculo interior más pequeño (con un trazo de color) es para el efecto de iluminación.

Corta el círculo interior por la mitad y asegúrate de que la "Tapa" y la "Esquina" del panel "Trazo" sean redondas.

3. Hacer el ketchup y la mostaza.

Duplica la taza de mayonesa para crear mostaza y ketchup.

Basta con aplicar diferentes colores a la salsa y la luz, como se sugiere anteriormente.

4. Agregue la lechuga en forma de ola.

Con la "Herramienta Pluma (P)", trace una línea recta y agréguele varios puntos.

Distribuya su espacio horizontal desde el panel "Alinear".

Arrastre hacia abajo los puntos de modificación y redondee cada esquina al máximo, hasta que esté completamente suave.

5. Crea una rebanada de pan.

Crea un óvalo largo; superpóngalo con la forma de onda y cree una división usando la opción "Dividir" del panel "Buscatrazos".

Elimina la forma adicional que obtienes de la herramienta "Dividir", luego vuelve a colorear la rebanada de pan.

6. Haz el pan de hamburguesa.

Refleje la rebanada de pan verticalmente y agregue un punto de inflexión a la capa superior.

Redondea ese borde para hacer un bollo de hamburguesa suave.

7. Termina la hamburguesa.

Colorea la lechuga de verde.

Luego cree diferentes "Rectángulos redondeados" para carne, queso y tomates, usando colores marrón, amarillo y rojo respectivamente.

Mueva las cosas para colocar adecuadamente su hamburguesa.

8. Crea un perrito caliente a partir de la hamburguesa.

Comenzando con la ilustración de la hamburguesa, retire los tomates y el queso, vuelva a colorear la lechuga con mayonesa y mostaza, y duplique el pan inferior para obtener un perrito caliente más simétrico.

9. Diseña la forma de la pizza.

Comience con la capa superior de la hamburguesa, mueva los puntos inferiores hacia abajo y acérquelos.

Duplique la forma del triángulo, redúzcalo y hágalo amarillo para una base cursi.

10. Agregue las formas de los tomates.

Superponga un círculo rojo grande con círculos internos más pequeños y use la opción "Frente negativo" del panel "Buscatrazos".

Coloque múltiples rodajas de tomate con diferentes tamaños y posiciones en la forma de pizza.

11. Crea algunas rebanadas de carne.

Dibuje una forma marrón orgánica con la "herramienta Pluma (P)", duplíquela y escálela sobre su pizza.

12. Agregue coberturas adicionales.

Agregue trazos redondeados, de colores y más pequeños en espacios vacíos para terminar los ingredientes de su pizza.

13. Crea la pajilla.

Estrella con un largo rectángulo blanco.

Agregue dos puntos con la "Herramienta Pluma (P)" y mueva los bordes superiores para doblar la pajilla.

Copie y pegue el punto medio en el borde derecho, luego aplique un trazo rojo y sin relleno.

Mueva la línea roja en el medio del rectángulo blanco.

14. Crea la forma de la lata de refresco.

Dibuja un polígono de ocho lados; agregue la lata; mueva los cuatro puntos superiores hacia arriba; y escale (S) los bordes superior e inferior hacia afuera para que parezca más una lata.

Agregue rectángulos redondeados en la parte superior e inferior para crear los bordes.

15. Ajusta la forma de la lata y escala la pajilla.

Mueva los puntos para ajustar las formas, luego escale la lata y la pajilla en proporciones identificables.

16. Termina con el diseño de ondas en la lata.

Dibuja una forma orgánica y ondulada para el diseño de la lata.

Luego cree una división con el panel "Pathfinder" y elimine las formas externas adicionales.

Aquí está el resultado final.

Recrea una ilustración inspirada en el juego Monument Valley

Monument Valley es un juego superventas creado por el estudio UsTwo. Ganó docenas de premios, incluido el mejor juego para iPad de Apple de 2014, y su estilo de ilustración está inspirado en la hermosa obra de arte geométrica de Escher.

Ahora aprenderá cómo crear fácilmente el mismo estilo visual que hizo de este juego un gran éxito.

Esto es lo que obtendrás al final.

Solo usará planos y cubos como bloques de construcción para toda la ilustración.

La paleta de colores tiene cuatro colores para el agua, el césped, la madera y la construcción, cada uno en tres tonos para simular la luz natural.

1. Crea un plano isométrico.

Comience con un cuadrado, luego siga estos tres pasos para crear una forma isométrica. Presta atención porque repetirás este proceso cada vez que necesites otra forma isométrica.

Lo llamaremos el “Efecto Isométrico”:

Vaya a Efecto > 3D > Extrusión y biselado Seleccione "Parte superior isométrica" ​​dentro del menú desplegable "Posición" - dentro del panel de opciones que aparece. Establezca "Profundidad de extrusión" en cero en la primera opción "Extruir y biselar".

Ahora tienes un plano isométrico.

Para jugar mejor con la forma, ve a Objeto > Expandir apariencia.

Esto te permitirá cambiar el color del avión y mover puntos libremente.

Lo llamaremos el "Efecto de expansión".

2. Traza las caras de la isla.

Para crear las tres caras de la forma de isla, crea un cuadrado y dos rectángulos alargados.

Repita el "Efecto isométrico" en cada uno.

Para el paso dos, aplique "Superior isométrico", "Izquierda isométrica" ​​e "Derecha isométrica" ​​respectivamente.

3. Completa y colorea la base de la isla.

Aplica el “Efecto Expandir”, y colorea cada rostro con diferentes tonos de verde, con el más brillante siempre arriba.

4. Crea caras de cubos en perspectiva.

Aplique el "Efecto isométrico" en tres cuadrados, con la izquierda, la parte superior y la derecha isométricas en el paso dos. Esto te da las tres caras que necesitarás para obtener un cubo isométrico.

Tenga en cuenta que cada objeto en su ilustración solo usará tres caras. Esa es la belleza de la perspectiva isométrica.

5. Componga un cubo.

Libere las formas con el "Efecto de expansión", junte las caras y aplique tres tonos de gris para simular la iluminación.

Consejo: el tono más claro siempre está arriba; el más oscuro, a la derecha; y el tono medio, a la izquierda. Aplicar esto a cada forma dentro de su ilustración creará una impresión de luz natural.

6. Comience la base del árbol.

Sigue los mismos pasos que el cubo isométrico y, esta vez, alarga las caras izquierda y derecha antes de conectar el todo.

Luego aplique tres tonos de marrón para representar la madera.

7. Termina el árbol.

Reduzca la corteza de los árboles; duplicar un cubo; y colorea sus caras como la forma de la tierra en verde.

8. Usa un cubo para crear los bloques de construcción.

Duplica un cubo y coloréalo de rosa para el material de construcción.

Juega con la escala; mueve los puntos inferiores hacia abajo para crear una base de torre; y escálelo para crear un pilar.

9. Montar las torres.

Alinea la base de la torre y el cubo rosa.

Deje algo de espacio entre ellos y coloque tres pilares dentro de ese espacio.

Para una alineación perfecta, asegúrese de configurar "Ajustar a punto" y "Guías inteligentes" en la opción de menú "Ver".

10. Puentea las torres.

Seleccione el punto superior y derecho de un plano superior y ajuste los puntos con el plano equivalente en la torre gemela.

Simplemente duplique y cambie el tamaño de un plano del lado derecho para crear un borde para el puente de la torre.

11. Crea escaleras.

Copie y pegue tres caras de una torre; alinee los bordes para crear un bloque; y luego mueva los puntos inferiores para crear un escalón de una escalera.

Duplique y coloque los pasos varias veces.

12. Cierra las escaleras.

Alinee los puntos de los lados izquierdos para cerrar los espacios de las escaleras.

13. Da la vuelta a las escaleras.

Seleccione sus escaleras completas y use la "Herramienta de reflejo (O)" para crear un segundo bloque que mire hacia la izquierda.

Asegúrate de cambiar los colores de las caras izquierda y derecha para respetar el efecto de iluminación: un tono más oscuro a la derecha, un tono medio a la izquierda y un tono más claro en la parte superior.

14. Vincula las escaleras.

Adjunte algunos cubos a las escaleras para crear escalones y únalos con las torres.

15. Crea un efecto de profundidad de agua.

Duplique y reduzca la escala de la superficie azul claro.

Colóquelo en varias posiciones y agregue un tono de azul aún más oscuro para terminar el efecto de profundidad del mar.

16. Comience la cubierta usando planos existentes

Al igual que con las escaleras y el puente de la torre, comience con las caras existentes, luego alinee los puntos correctamente para cerrar la forma y termine aplicando tonos de madera marrón.

17. Agregue pilares a la plataforma.

Seleccione la corteza del árbol, luego duplíquela, reduzca la escala y colóquela para crear los pilares de la plataforma.

Aquí está el resultado final.

Puede agregar puntos oscuros más grandes en el mar o cuadrados isométricos de colores más pequeños en el plano de la isla para simular hierba y flores.

En general, diviértete, mueve las cosas y construye algunas torres geniales, usando los bloques de construcción simples que acabas de aprender.

En conclusión

Como vimos con estas tres guías, no necesita muchas habilidades de dibujo para crear algunas ilustraciones atractivas.

Todo lo que necesitas tener en cuenta son estos 3 principios:

• Comience con una idea o concepto claro en mente: ¿qué está representando?
• Inspírate con obras de arte y estilos existentes: roba como un artista.
• Observe y traduzca elementos complejos en formas geométricas básicas con las que pueda trabajar; manténgalo simple.

Diviértete creando tus propias ilustraciones y carga tu nueva obra de arte en Dribbble y en cualquier otro lugar de la web. ¡Disfrutar!

• • •

Lectura adicional en el blog de diseño de Toptal:

• eCommerce UX: una descripción general de las mejores prácticas (con infografía)
• La importancia del diseño centrado en el ser humano en el diseño de productos
• Los mejores portafolios de diseñadores de UX: estudios de casos y ejemplos inspiradores
• Principios heurísticos para interfaces móviles
• Diseño anticipatorio: cómo crear experiencias de usuario mágicas