Cómo diseñar la tipografía isométrica

Sep 11, 2025

Cómo

[dieciséis]

La perspectiva es todo en diseño. Si algo que has dibujado tiene una perspectiva perfecta, ayudará a que su trabajo se vea más realista; Alternativamente, Pablo Picasso hizo historia al dibujar con un sentido muy sesgado de la realidad que lo rodeaba.

Dibujo isométrico Sin embargo, es tanto de una ciencia como algo. Tiene un conjunto muy estricto de reglas cuando se trata de lo que va donde. Eso es bastante difícil de sentarse y dibujarse, pero cuando se trata de Photoshop, puede crear una guía para cualquier cosa.

Obtener Adobe Creative Cloud

En esto Tutorial de Photoshop , vamos a establecer una cuadrícula isométrica perfecta antes de que construimos un mundo en las líneas que enfrentan hexagonalmente. En esta imagen inspirada en Londres, vamos a rastrear los Támesis isométricamente, e incluso crearemos versiones isométricas de puntos de referencia. Encontrará que cualquier cosa se puede crear en esta cuadrícula, ya que simplemente sostiene formas cúbicas juntas. Las curvas simplemente se pueden extraer de la esquina a la esquina.

Todo en la imagen también va a seguir esta estructura. Puede usar imágenes para copiar, puede seguir nuestros pasos religiosamente o puede diseñar sus propios iconos después de los patrones isométricos. Está enteramente depende de usted, dentro de los límites de la isometría, por supuesto.

Descargar los archivos tutoriales.

01. Iniciar la cuadrícula

Hit the icon to open the full-sized image.

Comience por crear un nuevo documento de 20 x 20 píxeles. Cree una tira negra por la derecha e inferior del documento con la herramienta de marquesina rectangular. Use la cuadrícula si necesita, al golpear cmd / ctrl + '.

02. Definir tu patrón

Ir a editar y gt; definir patrón. Nómelo y luego haga clic en Aceptar. Cree un nuevo documento de 1920 x 1080 al ir a File & GT; nuevo, y luego ir al cubo de pintura (G). Use patrón de relleno y en una nueva capa, rellene con el patrón que ha creado.

03. Transforma el patrón.

¡Ahora vamos a hacer que el patrón sea isométrico! Haga que el ancho y la altura sean mucho más grandes, el ángulo de 35 grados y lugar en el centro del documento. La cuadrícula debe estar hecha de formas de diamante.

04. Elige tu paleta

Vamos a usar cinco colores diferentes para esto, pero diferentes tonos de cada uno. Los colores son azules reales (# 021574), rojo apagado (# F22F50), SPARMET (# 6EC5CF), menta (# 6ECFB0), Tan (# FF935E) y BLANCO (#FFFFFFF).

05. Apueste su texto

Use la herramienta Tipo y cree el texto que desea utilizar en el documento; Vamos con 'Londres, Inglaterra'. Esto es importante, ya que dictará el tamaño, el espaciado y el aspecto completo de su cartel isométrico.

06. Crea algunas letras

Cree letras isométricas con la herramienta PEN, siguiendo la guía que creó. Esta es una parte de prueba y error del proceso, y se llevará a cabo todo lo largo. Experimenta con formas y llena con # 808080 por ahora.

07. Trabajar en las letras.

Las letras isométricas tendrán que tener un lado que se enfrente predominantemente hacia adelante. Haga ejercicio donde las curvas están en cada una de las letras reduciendo las opacidades. Esto podría tardar un tiempo para averiguar, y es posible que deba volver a dibujar algunas letras.

08. Sombra las letras

Grupo cada conjunto de capas para cada letra. Cree máscaras de recorte para cada una, y agregue luz o sombra a las letras para que aparezcan 3D. Haga ejercicio donde la luz está en la imagen y juzgue en consecuencia.

09. Color y construir puentes.

Cree nuevas capas de superposición por encima de cada una de las letras y rellene con uno de sus colores. Agregue las capas de color, clip y cepille en otro color para callarlo. A continuación, cree puentes entre algunas de las letras. Coloree esto con otro color.

10. Crea un altavoz

Ahora, vamos a agregar objetos a la escena. Cree una caja usando la guía isométrica, aligerando y oscureciendo a ambos lados de la caja para crear perspectiva. Cree dos círculos, y transforme que se ajusten a la caja a lo largo de la guía; Agregue un derrame cerebral a los círculos usando estilos de capa.

11. Añadir una bandera

A continuación, vamos a crear una bandera. Nuevamente, use la herramienta de la pluma para dibujar a lo largo de la guía y luego complete con blanco. Capas de clip a esto, y toque suaves pinceladas negras en un lado de la bandera para agregar sombra.

12. Planta algunos árboles

Los árboles son fáciles de crear con la pluma; Crea un triángulo con los dos lados de fondo que se alinean a lo largo de la guía isométrica y luego se oscurecen un lado. Repita esto dos veces, luego agregue un muñón. Color con una capa de superposición.

13. Escaleras y planificación de mapas.

Hemos creado escaleras mecánicas usando los mismos métodos que utilizamos para crear los otros objetos, utilizando la guía isométrica para dibujar. Después de eso, hemos utilizado un mapa real de Londres para rastrear aproximadamente al Támesis y dibujamos un contorno blanco para que se llenen un poco de agua.

14. Curva los bordes.

Use la herramienta de la pluma para curver los bordes de la estructura blanca que acaba de crear y rellene con # 808080. Use un cepillo suave y negro para crear la ilusión de un espacio curvo para que el agua se siente.

15. Rellenar con agua.

Use la herramienta de la pluma para seleccionar el espacio gris en cada una de las estructuras blancas y cayendo de las estructuras superiores, y rellene con azul en una nueva capa. Establezca esta capa a la luz dura para que se vea como su líquido real. Clip a capa blanca y elimina un patrón dentado en el medio para mayor efecto.

16. Inicia la araña.

Cree una nueva capa y agregue puntos en las intersecciones de las líneas como se puede ver en la captura de pantalla. Seleccione las filas traseras de estos puntos y reduzca la ligereza a -10 usando Hue / Saturación (CMD / CTRL + U). Duplica esto hacia abajo para crear más puntos.

17. Termina la araña.

Cree el mismo efecto tres veces con múltiples filas de puntos, luego cambie el tamaño de los dos últimos. Apila estos para crear un efecto de araña. En nuevas capas del 20%, cree puntos blancos para sugerir luz emanando hacia afuera.

18. Crea Big Ben

Usa una foto de stock de Big Ben para dibujar el reloj con la herramienta de la pluma; Sin embargo, no tienes que ser tan detallado, por supuesto. Dibujarlo en tonos de gris; Dibuja la aguja a un lado del edificio en lugar de directamente hacia arriba, también.

19. Coloque el hito.

Color Big Ben con algunas capas de superposición, duplica la capa y luego voltea esta nueva horizontalmente. Cambie el tamaño de ambas capas y sesifada con la transformación gratuita para adaptarse a lo largo de la guía que ha creado.

20. Toques de acabado.

Haz cualquier floración final que le gustaría agregar más a la imagen; Esto podría incluir estrellas en el fondo con pequeños puntos, una ballena en el Támesis o alterar el color con un ajuste de curvas.

21. Añadir ruido

Finalmente, seleccione Blanco y negro en sus muestras (D). Cree una nueva capa, rellene con negro (ALT / OPT + BORRAR) y vaya a Filtro & GT; ruido. Elija 400%, compruebe monocromático y haga clic en Aceptar. Establezca esta capa a la luz suave, 10% opaca.

Este artículo se publicó originalmente en el número 271 de Creative Web Design Magazine Web Designer. Comprar emisión 271 o Suscríbete al diseñador web .

Artículos relacionados:

Crea letras 3D con cuadrícula isométricas en Illustrator
Arte vectorial isométrico hecho fácil
Crea un efecto isométrico 3D.

Cómo diseñar la tipografía isométrica

01. Iniciar la cuadrícula

02. Definir tu patrón

03. Transforma el patrón.

04. Elige tu paleta

05. Apueste su texto

06. Crea algunas letras

07. Trabajar en las letras.

08. Sombra las letras

09. Color y construir puentes.

10. Crea un altavoz

11. Añadir una bandera

12. Planta algunos árboles

13. Escaleras y planificación de mapas.

14. Curva los bordes.

15. Rellenar con agua.

16. Inicia la araña.

17. Termina la araña.

18. Crea Big Ben

19. Coloque el hito.

20. Toques de acabado.

21. Añadir ruido

Cómo - Artículos más populares

Cómo editar un video en Tiktok

21 Pasos para JavaScript Super Speedy

Construye prototipos con Adobe XD

Cómo crear una aplicación con vue.js

Cómo cambiar la fuente en su bio de Twitter

Prepare una tabla para pintar en 3 sencillos pasos

Mock Up AR gráficos con After Effects

Cómo hacer que su sitio web de WordPress sea multilingüe

Categorías