Ilustraciones isométricas: cómo hacer ilustraciones vectoriales de estilo isométrico
Cómo hacer una ilustración vectorial de estilo isométrico. Este tutorial utiliza principalmente CorelDraw para crear un tutorial de icono de logotipo de trébol de estilo vectorial. El proceso del tutorial es relativamente simple y es más adecuado para que aprendan nuevos amigos. Aprendamos de los amigos que nos gustan.
Aprende a crear imágenes de píxeles en Photoshop en 20 minutos* * *El título es mi YY ~ pero el artículo del autor es muy claro. Es fácil comenzar y es perfecto para crear un avatar de ti mismo una vez que hayas terminado. Jaja* * * *
Este es uno de una serie de artículos sobre el pixel art de IsometricPixelArt.
Si te gusta jugar como un niño (o todavía te gusta jugar como un adulto), el pixel art puede ser lo tuyo, puede ser muy científico y se parece más a la arquitectura que a la ilustración, porque esto; no tiene perspectiva, puedes organizarla según tus ideas.
En el próximo tutorial, haremos juntos un hombre píxel. Es un punto de partida lógico en el pixel paint porque nos ayuda a definir las proporciones de los elementos que vamos a trabajar a continuación. Sin embargo, antes de crear un hombre de píxeles, primero debes comprender los conceptos básicos de la pintura de píxeles. Si quieres comenzar a hacer imágenes de píxeles directamente, puedes saltar al paso 3. A continuación, comencemos.
Estas líneas son la base de la pintura de píxeles y la parte más común (y divertida) de la pintura de píxeles de estilo isométrico. Usaremos lo siguiente:
Este tipo de línea consta de dos píxeles apilados hacia abajo, se ve relativamente suave y se usa a menudo para crear superficies cuadradas.
Las líneas estructurales más utilizadas son las siguientes, pero se ven más irregulares y utilizan más píxeles por sección.
En cambio, aquí hay unas líneas irregulares:
Líneas muy irregulares, muy antiestéticas. Intente evitar esta situación.
Nuestros gráficos de píxeles no siguen estrictamente todas las reglas de la vista isométrica, así que empieza por hacer un cubo simple para tener una sensación de volumen.
Existe
AdobePhotoshop
En el medio
Recién creado
un archivo de 400pxx400px.
Normalmente me gusta abrir la misma ventana (
Ventana>Disposición>Nueva ventana de XX
), una muestra alrededor de 600 y la otra se queda en 100 para comprobar el progreso. Depende de usted si desea utilizar una cuadrícula de píxeles, pero creo que a veces puede distraerse. Ahora, acerquémonos y comencemos a hacer una línea 2:1:
Me gusta usar un gris de 5 en lugar de negro puro para poder agregar algo de sombreado en la parte posterior (usando negro para reducir la transparencia). ) y utilice las herramientas de la varita para seleccionar colores individualmente.
Aquí se muestran algunas formas de hacer líneas:
Método 1. Selecciona
Herramienta lineal
Selecciona el modo
Píxel
y desmárcalo.
Anti-ofuscación
, selecciona
grosor de 1px
. Al dibujar, la herramienta Línea nos solicitará el ángulo de la línea y lo seleccionará.
26.6
. (A veces, la herramienta de línea recta no es muy confiable. Si el ángulo es incorrecto, la línea dibujada puede quedar desordenada, por lo que debes prestar atención).
Método 2. Crea un rectángulo de 40x20px y selecciónalo.
Herramienta Lápiz
(aún
grosor de 1 px
), dibuja un solo píxel en la esquina inferior izquierda y mantén presionada la tecla Mayús. Dibuja un solo píxel en la esquina superior derecha. PS conectará automáticamente una línea entre estos dos puntos. En mi experiencia, estas líneas se pueden hacer muy precisas (o casi precisas, con sólo unos pocos ajustes) sin utilizar la herramienta de selección rectangular.
Método tres.
Utilice la
Herramienta Lápiz
para dibujar dos píxeles conectados, selecciónelos y manténgalos presionados.
Medios agudos
Utilice las teclas de flecha del teclado o arrastre el mouse (conocido como
Alt-mover
) hasta que aparezca el nuevo píxel y Los píxeles anteriores están conectados de un extremo a otro. A continuación, verifique los píxeles existentes y repita para alargar la línea.
Siguiendo el método anterior, obtenemos la primera fila. Lo seleccionamos y
Alt-mover
, o lo copiamos, lo pegamos y fusionamos las capas. Girar horizontalmente. (
Editar>Transformar>Voltear horizontal
). Lo uso mucho, ¡así que lo convertí en una tecla de acceso directo! PD: Aquí usas F5 para voltear horizontalmente y F6 para voltear verticalmente.
Conectemos los dos cables entre sí:
Luego, seleccione todos los segmentos nuevamente.
Alt-mover
, voltearlo verticalmente y luego juntar las dos secciones, de modo que tengamos un plano cuadrado (plano de perspectiva jaja):
Es hora de unirse a la tercera dimensión.
Alt-mover
o
Copiar
el plano cuadrado y colocar la superficie copiada 44px encima de la superficie original:
Consejo:
Si mantienes presionada la tecla Mayús mientras usas las teclas de flecha para moverte, puedes mover 10 píxeles a la vez.
Para crear un cubo ordenado, a continuación conectamos los píxeles situados más a la izquierda y a la derecha del cubo. Después de eso, completa la línea vertical en el medio:
Ahora borra las líneas detrás del cubo. Es hora de añadir color. Elige un color que te guste (intenta elegir colores brillantes) para llenar la parte superior del cubo.
Ahora aumenta el brillo del color en 10
Ahora aumenta el brillo del color anterior en 10 (recomiendo usar el control deslizante HSB en la paleta).
Rellena el área resaltada anterior. Trazamos los bordes del cubo, llenando 1 píxel con el color claro en la línea negra, que funciona mejor, así:
Ahora, elimina la línea negra debajo del azul claro.
Mantén pulsada la tecla Mayús y utiliza el lápiz.
Estos consejos también se aplican a las gomas de borrar. Puede seleccionar el borrador (
modo lápiz
,
grosor de 1 px
), hacer clic en el punto de inicio, mantener presionada la tecla Mayús, y haga clic en Al final, se borra la línea de conexión en el medio.
Usa la
Herramienta Cuentagotas
para dibujar el color desde la parte superior (cuando usas la herramienta Lápiz o Relleno, la tecla de acceso directo para la herramienta Cuentagotas es
Agudos medios
), convirtiendo la línea negra en el medio del cubo en azul brillante. Luego reduce el brillo del azul en 15, llenando el lado izquierdo; luego reduce el brillo en 10, llenando el lado derecho;
Así que nuestro cubo está terminado. En la talla 100 debería verse claro y suave. Podemos seguir adelante.
El estilo del personaje depende de las preferencias personales. Puedes ajustarlo según las proporciones y elementos que creas adecuados. Tiendo a ser pequeño y tener la cabeza grande. Una figura delgada puede hacer que las líneas parezcan simples/directas.
Empieza por los ojos. Estrictamente hablando, los ojos de los personajes de píxeles en la pantalla no tienen la misma altura, pero este pequeño truco puede hacer que nuestros personajes se vean mejor y mantengan la claridad en un tamaño pequeño.
Seremos una personita, porque en la parte de atrás podremos combinarla con un coche, una casa, una plaza o incluso una ciudad. En aquel entonces; en este caso, el personaje debería ser el elemento más pequeño de la ilustración.
Para lograr eficiencia gráfica: desea crear un personaje atractivo (con algunos detalles faciales) utilizando la menor cantidad de píxeles posible; los tamaños pequeños son mucho más fáciles que los tamaños grandes. A menos que quieras pintar un bonito retrato realista o algo así, nos especializamos en tamaños pequeños.
Creemos una nueva capa. Usamos dos píxeles para los ojos; uno a cada lado con un espacio de píxeles en el medio.
Dibuja una línea vertical en el punto del píxel izquierdo:
Ahora, crea una nueva capa y dibuja una línea horizontal de 2 píxeles debajo de los ojos para la boca. Muévelo hacia abajo donde mejor te parezca y fusiona las capas hacia abajo. Puedes hacer lo mismo para el mentón, solo que con una línea horizontal un poco más larga:
Haz lo mismo para la línea del cabello y la coronilla, luego une los bordes para una apariencia más redondeada como esta:
Ahora, deja un espacio de píxeles al lado del ojo derecho, agrega las patillas (esto también ayudará a darle forma a las orejas del personaje) y mueve las patillas para que coincidan con la línea del cabello. Luego deja un píxel en blanco en el área de la oreja, conecta las esquinas con líneas y cierra el borde de la cabeza:
Agrega un píxel encima de las orejas para cambiar la forma de la cabeza del personaje como quieras; suele estar en el cuello. El pecho es más estrecho;
Dibuja una línea debajo de la barbilla para el pecho. La parte del cuello es para dibujar un grupo de píxeles debajo de las orejas y luego dibujar una línea diagonal como la parte visible de los hombros del personaje:
Ahora dibuja un segmento de línea vertical de 12 píxeles debajo de los hombros como los brazos. y 2 píxeles en el otro lado de la distancia. Conecte un grupo de píxeles en la parte inferior para que parezca una mano/primer paso (para ser honesto, las manos no tienen detalles, pero eso no es gran cosa). Dibuja dos píxeles horizontales 2:1 en la parte inferior y superior de la mano para la cintura, luego completa las líneas del pecho. Ahora tienes un contorno de toda la parte superior de tu cuerpo. En realidad, hay un brazo en el lado izquierdo del cuerpo, pero está bloqueado por el pecho y no se puede ver, así que está bien. Cuando termine, debería verse así:
Esto debería verse así:
Por supuesto, puedes elegir diferentes proporciones si lo deseas. Me gusta probar diferentes opciones antes de decidirme por una; .
Ahora podemos agregar algunos segmentos de línea vertical para la parte inferior del cuerpo. Me gusta dejar unos 12 píxeles de espacio entre el zapato y la cintura. Los pies son simples, sólo un píxel más altos que las piernas, mientras que el pie derecho en pantalla está un píxel más bajo que el izquierdo según la vista isométrica.
Ahora vamos a añadirle un poco de color al villano. Encontrar el tono de piel adecuado para un villano no es fácil. Si quieres elegir la misma configuración de tono de piel que yo, prueba #FFCCA5. Es más fácil agregar color a otras partes del cuerpo. Luego querrás especificar el largo de las mangas, la posición del cuello y el estilo, y agregar un tono más oscuro para diferenciar la prenda del cuerpo. Me gusta hacer las líneas interiores más claras que el negro puro (especialmente cuando los diferentes bloques están en niveles similares, como donde la ropa se une a la piel o donde la ropa se une a los pantalones) para que el contraste entre cada línea no sea demasiado fuerte. , la diferente sensación de volumen será más obvia.
Puedes añadir algunos reflejos a cada bloque de color diferente. Evite demasiadas sombras o use degradados para expresar sombras; unos pocos trazos (10 a 25) de colores claros u oscuros pueden ayudar a que los elementos resalten en lugar de verse planos. Si quieres añadir un color de 100 de luminosidad, intenta reducir su saturación. En algunos casos (como el cabello) puede ser una buena idea cambiar la saturación entre colores.
Podrás probar varios peinados. Aquí tienes algunas sugerencias:
Si quieres hacer más villanos, haz algunos pequeños cambios, como cambiar el estilo de la ropa, el largo de las mangas, el largo de las perneras del pantalón, los accesorios, la ropa, el color de la piel. , y varios personajes también tienen tentáculos alcanzables.
Ahora solo quedan unos pocos pasos que son juntar los distintos elementos y ver cómo se muestran en un mismo entorno:
Si quieres exportar, formato PNG. mayoría.
Espero que este tutorial no haya sido demasiado complicado; creo que hice lo mejor que pude para explicar los pasos y el estilo que necesitaba. Seguimos explorando el mundo del pixel art; edificios, vehículos, interiores y exteriores. Pintar píxeles ofrece infinitas posibilidades y es divertido, pero puede resultar un poco difícil.
René Alejandro Hernández vive en El Salvador y se dedica al pixel art (especialmente al estilo pixel isométrico) desde hace más de 10 años.
——Línea de separación.