En este tutorial, creará una espeluznante jack-o-lantern desde cero, representada completamente en píxeles (los componentes básicos del arte digital). Aprende a usar el panel de la línea de tiempo de Adobe Photoshop para animar una cara sonriente y guiñada que lanza un beso al espectador y se ilumina por dentro y por fuera..
1. dibujando la calabaza
Paso 1
A lo largo de este tutorial, trabajaré en Adobe Photoshop CC 2014. Abra su programa y crear un Nuevo documento. Mi último trabajo de arte medido 36 px por 30 px, así que hice mi documento 50 px por 40 px a 72 dpi con un Transparente fondo.
Paso 2
Empecemos por construir la forma básica de la calabaza.. Zoom (Z) en su documento 1600% más o menos.
Utilizando la Herramienta de lápiz (B) con un 1 px cepillo duro, dibujar 7 pixeles en una linea vertical.
Dibujar 2 pixeles a ambos lados de la primera línea.
En la parte superior del diseño, dibuje una línea vertical adicional de 2 pixeles seguido por 1 píxel En la diagonal derecha de los dos anteriores. En la parte inferior del diseño, dibujar. 2 pixeles diagonales en sucesión (ver abajo).
Completa esta sección con 1 píxel diagonal en la parte superior y dos píxeles más a la derecha en la parte superior e inferior.
Paso 3
Continuando con el Herramienta Lápiz y nuestra forma de calabaza básica:
Con lo creado en Paso 2, Añadir 3 pixeles Horizontalmente a la parte superior e inferior del diseño. Dibujar 1 píxel diagonal por encima de la línea de tres dibujados previamente.
Continúa construyendo la forma de la calabaza en la parte superior del diseño con 3 píxeles horizontales. En la parte inferior, dibujar 1 píxel diagonal debajo del otro y 2 pixeles a la derecha.
La linea superior es 8 píxeles a través de. La conclusión es 10 píxeles a través de.
La otra mitad es una imagen de espejo de todo a la izquierda de las dos líneas horizontales rectas. Utilizar el Herramienta Marco Rectangular a Seleccionar, Copiar (Control-C), Pegar (Control-V), y espejo (Edición> Transformar> Girar horizontal) la mitad izquierda para completar la forma básica de la calabaza.
Etapa 4
Nuestra calabaza necesita una cara. Crear un Nueva capa en el Capas panel y usando el Herramienta Lápiz, vamos a empezar:
El ojo comienza con 3 pixeles en una línea y 1 píxel por encima de ellos y en el centro.
Completa el ojo con la tercera línea de píxeles que consta de. 3 pixeles y la cuarta línea que consiste en 5 pixeles.
Tres píxeles a la derecha desde la línea inferior del ojo comienzan la nariz. Se compone de tres filas: 1 píxel, 3 pixeles, y 3 pixeles.
Repetir la forma del ojo de nuevo para el ojo derecho..
Asegúrese de que los ojos y la nariz tienen 3 píxeles Espacios que los separan. La boca comienza dos filas abajo con 3 pixeles a través de.
Paso 5
Todo este paso consiste en completar la boca:
El comienzo de la boca, a partir del último paso, es 9 píxeles dispuesto en un 3 x 3 caja.
Dibujar 3 pixeles en una línea vertical a cada lado del cuadro dibujado anteriormente.
A continuación se muestran dos columnas de 2 pixeles cada uno a cada lado de la boca.
Dibuja dos formas en L en cada lado compuestas de 3 pixeles cada.
Añadir 1 píxel A cada lado, en diagonal y hacia afuera. Los bordes superiores de la boca consisten en 4 pixeles en una fila horizontal.
Para completar la boca, coloque 1 píxel en diagonal y hacia abajo, hacia el centro de la boca, y rellene los lados izquierdo y derecho (vea a continuación la forma exacta). En este punto, la boca se parece un poco a un murciélago volador..
Ya que mi calabaza estará compuesta de varias naranjas y amarillos, he decidido cambiar el color de mi línea de arte a marrón (# 6b0f02).
2. Colorear la calabaza
Paso 1
Los colores utilizados en mi trabajo final difieren de los que empecé a continuación (son más saturados y se cambiaron más adelante en el proceso). Considera esto como una pequeña lección para crear fácilmente una paleta de colores armoniosa. Para crear el suyo propio (o hacer esto con otros colores), reduzca el Opacidad del color al porcentaje indicado, colóquelo sobre el 100% naranja color, y seleccione el nuevo color con el Herramienta de cuentagotas (I). Guardar nuevos colores en el Muestras panel y asegúrese de que el Opacidad se establece de nuevo a 100% para el resto del tutorial.
marrón 100%: # 760b03
marrón 75%: # 902b0d
marrón 50%: # ae4a18
marrón 25%: # d1692a
naranja 100%: # f2842b Utilizado como color base..
naranja 40%: # faa912
naranja 20%: # ffcc01
Amarillo 100%: # fff25d
Unir la capa frontal y el dibujo de la línea de la calabaza y rellenar la calabaza con la Herramienta Bote de pintura y naranja (# f2842b).
Paso 2
Nuestra calabaza necesita un tallo..
Utilizando marrón (# 760b03), y el Herramienta Lápiz, dibujar dos lineas verticales de 3 pixeles cada uno, dos filas separadas.
Rellena las dos columnas con marrón 75% (# 902b0d) y cerrar la forma con 2 pixeles de marrón.
Utilizar marrón50% (# ae4a18) como color de resaltado en la parte superior del tallo.
Paso 3
Como se trata de una linterna, necesitaremos cortar la parte superior de la calabaza..
He empezado con lo mismo marrón Utilizado en el tallo. Desde la parte superior del tallo, el centro de la tapa de la calabaza es 9 píxeles hacia abajo. Dibujar 8 píxeles de ancho en ese punto central con 3 pixeles en la siguiente fila hacia arriba a cada lado de la línea central.
Conecta el 3 píxeles a través a cada lado con 1 píxel arriba.
Cubrir el píxel de la esquina con naranja y sombrea la tapa y debajo de ella con marrón25% (# d1692a) desde Paso 1 en esta sección.
Coloque esos píxeles de color naranja oscuro en las esquinas de la línea de la tapa y debajo del vástago (vea a continuación).
Etapa 4
Concéntrese en lo que se está haciendo con el sombreado en la calabaza a continuación:
Dibuje con cuidado las líneas curvas de Marrón 25% (# d1692a) comenzando en las muescas del fondo de la calabaza. Las curvas deben imitar el contorno de la calabaza..
Alinea la parte inferior de la calabaza y comienza a escalonar los píxeles naranja oscuro y naranja en la mitad inferior de la calabaza..
Delinear la parte inferior de la boca, la nariz y los ojos también.
Opcionalmente, puede elegir ahora usar un amarillo-naranja de Sección 2, Paso 1 para agregar reflejos a la tapa de la calabaza, ojos, nariz y boca.
Los colores para esta parte del tutorial son más sutiles que los que elegí usar en el siguiente paso. Si le gusta más este tono, simplemente utilice el siguiente paso para obtener sugerencias sobre cómo sombrear y resaltar aún más y mantenga la paleta de colores creada en Sección 2, Paso 1.
Paso 5
Si deseas una calabaza más brillante y saturada, revisa los pasos a continuación:
Reemplazar todas las instancias de Marrón 25% (# d1692a) en la superficie de la calabaza con Rojo brillante (# ff1300).
Cambia el color naranja base a # ff7700.
Asegúrese de que el tallo superior tenga tonos de marrón y marrón claro en lugar de rojo (estamos cambiando la calabaza en lugar del color de madera del tallo).
Para la línea que denota la tapa de la calabaza, use los marrones claros de Sección 2, Paso 1. Para los aspectos más destacados, utilice Amarillos (# ffcc00) y# fba912) para dibujar pequeñas cajas y escalonar líneas de píxeles en la parte superior izquierda del diseño.
Lleve el más oscuro de los dos amarillos a la parte superior de cada sección de calabaza. Resalta la parte inferior de la boca. Suavizar los píxeles de sombra roja brillante con Naranja roja (# ff4500).
Utilizar una Marron oscuro (# 3e0702) en el contorno de la parte inferior y del lado derecho de la calabaza. Ilumina el lado superior izquierdo de la línea de arte de la calabaza con una variedad de marrones (ver más abajo).
3. Creando los cuadros de animación
Paso 1
Cada paso en el ícono animado que estamos realizando requerirá una capa separada que contenga el cambio dentro del ícono. Esto incluye los ojos brillantes, los cambios en la forma de la boca o el brillo alrededor de la calabaza..
Asegúrate de que todos los componentes de tu calabaza estén en la misma capa. Utilizar el Herramienta de varita mágica (W) para seleccionar fuera de la calabaza e ir a Seleccionar> Inverso (Shift-Control-I) y entonces Seleccione> Modificar> Expandir y Expandir por 1 píxel.
Crear un Nueva capa debajo del icono de la calabaza en el Capas panel. Rellene la selección con amarillo brillante utilizando la Herramienta Bote de pintura. También llené otra capa debajo de las otras dos con negro para que el ícono de la calabaza saliera de la pantalla más.
Paso 2
Crear un Nueva capa y cubrir las dos primeras filas del ojo izquierdo con píxeles naranjas. Cubre la última fila con 5 pixeles de rojo (y la fila roja anterior con píxeles naranjas). El ojo debería estar ahora. 4 pixeles a través de, 1 píxel diagonal en el lado izquierdo, y dos píxeles amarillos en el centro de la forma del ojo que parpadea.
Paso 3
Hay tres nuevas capas bucales que tenemos que dibujar para crear la animación final..
Hacer una Nueva capa por encima de los demás y usar el Herramienta Lápiz dibujar Tres columnas de píxeles compuestas de 1 píxel, 3 pixeles, y 2 pixeles. Esta es la esquina izquierda de la boca..
Para el centro de la boca, dibujar. 2 pixeles A la derecha de la esquina de la boca dibujada previamente. Añadir 1 píxel Abajo de los dos anteriores dibujados. Finalmente, dibuja un cuadrado de 3 pixeles por 3 pixeles para el centro de la boca.
Espejo de la esquina de la boca izquierda para el lado derecho..
Use naranja oscuro para delinear las esquinas de la boca. Vea la imagen de abajo para la ubicación exacta de píxeles.
Use el color naranja de la base para rellenar la mayor parte del espacio negativo alrededor de la boca.
El rojo brillante que se ha colocado en esta parte se sentará directamente debajo de la nariz de la calabaza..
Por último, rellena los espacios vacíos con reflejos amarillos..
Coloque la nueva boca sobre la boca original. La boca anterior debe estar completamente cubierta. Ocultar esta nueva capa por ahora.
Etapa 4
La boca se está volviendo más pequeña y cambiando de una sonrisa abierta a lindos labios fruncidos (menos los labios ya que esto es una calabaza).
Una vez más, comenzaremos con la esquina izquierda de la boca, que se compone de 5 pixeles en tres filas.
Dibujar un cuadrado de 3 pixeles por 3 pixeles para el centro de la boca.
Espejo del lado izquierdo de la boca para el lado derecho..
Usando naranja oscuro, dibuja dos líneas de 4 pixeles y coloca píxeles adicionales en las esquinas de la forma de la boca.
Una vez más, use rojo brillante para la parte inferior de la nariz de la calabaza (esto le ayudará a alinearla) y la parte inferior de la boca.
Rellena el espacio negativo con naranja.
Coloque esta capa sobre la boca de la calabaza, asegurándose de que no se vea la boca original. Ocultar esta nueva capa por ahora.
Paso 5
La boca está ahora en modo de beso completo. Una vez más, crea un Nueva capa y vamos a ir.
La boca entera es dos filas de 3 pixeles y un solo píxel en el centro de la última fila.
5 pixeles Se dibujan en el lado izquierdo: 2 píxeles hacia abajo, 2 píxeles en diagonal, saltar un espacio, y 1 píxel fuera de la esquina de la boca. Refleja esto en el lado derecho y dibuja. 5 píxeles a través en la parte superior de la boca.
Usando rojo, dibujar 3 pixeles a través de eso será una vez más la parte inferior de la nariz de la calabaza. Dibujar 5 pixeles A través de la parte inferior de la boca y dispersa algunos píxeles en las esquinas del diseño..
Rellena el área con naranja.
Coloque la boca nueva sobre la boca vieja, asegurándose de que la boca original de la calabaza esté completamente cubierta. Una vez más, ocultar esta capa en el Capas panel por el momento.
Paso 6
Para los ojos y la boca iluminados, se necesitará una capa.
Enfocar en la cara de la calabaza para 1600%, más o menos.
Crear un Nueva capa y rellenar los ojos y la nariz con amarillo. Forre los lados izquierdos con rojo para ver fácilmente el borde interior de los rasgos faciales.
Use marrón claro en el borde izquierdo de los ojos y la boca. Use un marrón más claro en el borde inferior.
Rellene la boca con amarillo brillante, repitiendo los pasos anteriores para los colores que se utilizan en el diseño.
Una foto de la calabaza cuando está "completamente encendida"..
4. Animando la calabaza
Paso 1
Abre el Línea de tiempo panel y elegir Crear animación de cuadros Desde el menú desplegable en su centro..
Para cambiar lo que está sucediendo en cada cuadro, deberás golpear Nuevo marco en las opciones del panel y ajustar el diseño en el Capas Panel cada vez. Observe el cambio a continuación con la segunda capa de boca visible en el segundo marco y oculta en el primer.
Paso 2
Vea la imagen de abajo para un desglose visual de los cuadros utilizados en la animación. Cada paso corresponde a una capa. También he desglosado lo que está pasando en cada cuadro a continuación:
La calabaza básica con todas las capas adicionales ocultas. El tiempo se establece en 1 segundo.
La capa de contorno amarillo (desde Sección 3, Paso 1) Es visible en este cuadro, pero está en 25% de opacidad. El tiempo se establece en 0.1 segundo.
El tercer cuadro tiene la capa de contorno amarillo en 50%Opacidad y la capa de la boca de Sección 3, Paso 3 ahora es visible. El tiempo se establece en 0.1 segundo.
La capa de contorno amarillo está en 100% de opacidad. La boca de Sección 3, Paso 4 es visible. El tiempo se establece en 0.1 segundo.
La boca de Sección 3, Paso 5 es visible. El tiempo se establece en 0.1 segundo.
La capa de ojo guiño de Sección 3, Paso 2 ahora es visible. El tiempo se establece en 0.1 segundo.
Este marco es idéntico a Fotograma 5. El tiempo se establece en 0.1 segundo.
Este marco es idéntico a Fotograma 4. El tiempo se establece en 0.1 segundo.
Este marco es idéntico a Fotograma 3 a excepción de la capa de contorno amarillo cuyo Opacidad se establece en 100%. El tiempo se establece en 0.1 segundo.
Todas las capas adicionales de ojos y boca están ocultas en esta capa. El tiempo se establece en 0.1 segundo.
La capa de ojos y boca iluminada ahora es visible en este marco. El tiempo se establece en 1 segundo.
Todas las capas adicionales de ojos y boca están ocultas. La capa de contorno amarillo se establece en 50%. El tiempo se establece en 0.1 segundo.
La capa de contorno amarillo se establece en 25%. El tiempo se establece en 0.1 segundo.
Paso 3
Al configurar el tiempo de retardo en sus cuadros, puede seleccionar varios cuadros y cambiarlos a la vez. También asegúrese de que su Opciones de bucle están configurados para Siempre.
Etapa 4
Al exportar su archivo animado, vaya a Archivo> Guardar como y seleccione .gif. Como no hay muchos colores en este archivo y no nos preocupa mucho el tamaño de un archivo grande, mantenga los colores a 256 y las otras configuraciones en su defecto.
Si está agrandando su archivo (en caso de que quiera tan grande como mi imagen final), asegúrese de Calidad se establece en Vecino más cercano por lo que no hay pérdida en la calidad del píxel duro. Otra vez, Opciones de bucle debe establecerse en Siempre (a menos que quieras tu .gif para hacer un bucle de una cantidad fija por cualquier razón).
Fantástico trabajo, has terminado!
Gran trabajo en la creación de una calabaza animada y divertida. Tengo mis dos versiones ampliadas originales a continuación para que pueda ver la diferencia entre los tamaños y los detalles dentro del icono del píxel..
Para más tutoriales de pixel art aquí en Tuts+, Echa un vistazo a esta pequeña lista:
Crear una serie de iconos de Pixel Art de desayuno en Adobe Photoshop
Cree Pixel Art con una paleta limitada en 10 pasos con Photoshop
Cómo crear un Sprite animado de Pixel Art en Adobe Photoshop
Share
Lo que vas a crear
Accentsconagua
