Crear una serie de iconos de Pixel Art de desayuno en Adobe Photoshop

Lo que vas a crear

¡Comience su día de maravilla con un poco de pixel art de temática de desayuno! Dibujadas en Adobe Photoshop, estas dulces creaciones sirven como iconos de escritorio, avatares o iconos de juegos. Aprenda los conceptos básicos de creación de formas, suavizado y elección de colores..

1. Brindar!

Paso 1

Comenzaremos de manera simple y lenta, con el esquema básico de la forma de la tostada. Crear un Nuevo documento en Adobe Photoshop. Tiendo a hacer diseños de pixel art en un 200 x 200 espacio, con el fondo configurado en Transparente. Utilizar el Herramienta de lápiz (B) fijado en 1 píxel y comienza a dibujar lo siguiente:

  1. Siete píxeles a través.
  2. Uno arriba a cada lado, en diagonal.
  3. 11 Los píxeles, a cada lado, forman el resto del borde superior. Completa las esquinas con dos píxeles diagonales en cada lado. Diez abajo de cada lado antes de llegar a la base de la forma de pan.
  4. Dos abajo, uno en diagonal, y 20 abajo a cada lado.
  5. Dos abajo y dos a través de con el fin de redondear la parte inferior. 
  6. Rellena el resto del espacio con 23 a través de.

Paso 2

Hay cuatro colores utilizados en el diseño básico del pan:

  • Marron oscuro para los contornos: R: 108 G: 013 B: 003.
  • Marrón medio Para el exterior de la corteza: R: 182 G: 090 B: 020.
  • marrón Para el resto de la corteza: R: 214 G: 123 B: 027.
  • Bronceado Por el interior del pan. R: 250 G: 211 B: 127.

Colocar el Marrón medio alrededor de los bordes de la tostada. marrón llenará aún más los límites de la corteza. En este punto, use el Herramienta de cubo de pintura (G) rellenar el trozo de pan con Bronceado.

Paso 3

  1. Este pan simplemente no estará completo sin una pasta de mantequilla derretida. Hacer una Nueva capa, en el Capas panel, antes de dibujar tu mantequilla.
  2. Usa un brillo, ranúnculo amarillo Para dibujar la forma de la mantequilla derretida con el Herramienta Lápiz
  3. A diferencia de la tostada, sus bordes deben definirse con los marrones utilizados en el último paso. 
  4. Observe cómo se agregan los colores más oscuros alrededor de las esquinas y los bordes verticales. 
  5. Colocar la mantequilla en el centro de la tostada..
  6. La crema blanca y la crema se utilizan para resaltar la mantequilla y el pan..
  7. Seleccionar Marron oscuro para el color de su lápiz, y reducir la opacidad a 30-50%. Esquema de la tostada, con colores más oscuros colocados en las esquinas de la forma del píxel, para suavizar el borde rígido.

2. Soy Makin 'Waffles!

Paso 1

La forma de la galleta es bastante simple: un cuadrado redondeado. Inicialmente, elegí mantener las esquinas en dos pixeles diagonales Así que el gofre mantuvo una forma muy cuadrada. Más tarde, lo cambié a dos horizontales, una diagonal, y dos píxeles verticales para las esquinas. 

Paso 2

Para el color de relleno de los gofres, elegí R: 241 G: 180 B: 99. Los colores de la sombra son marrónMarrón medio desde Sección 1, Paso 2. En el Capas panel, hacer un Nueva capa y dibujar pequeño seis por seis cuadrados, con el píxel de la esquina eliminado, para formar el patrón de waffle.

Paso 3

Me resulta más fácil, en un diseño como este, Copiar (Control-C)Pegar (Control-V) Las formas cuadradas en una cuadrícula alrededor de la base de waffle. Utilizar Bronceado para resaltar alrededor del patrón, y Marrón medio para indicar la profundidad. 

Etapa 4

El método de dibujo de la mantequilla y el suavizado del borde exterior de la galleta son los mismos que los que se hacen para la tostada en Sección 1, Paso 3.

3. Tostar Esta Pastelería

El diseño de la masa para tostar también es bastante simple: un rectángulo redondeado (observe la dos abajo, dos abajo esquinas) con la esquina superior derecha formada por seis diagonales Píxeles que formarán un "bocado" fuera de la masa..

Paso 2

Al igual que el diseño de tostadas, esta masa tostadora comenzará con los bordes exteriores en marrónBronceado. Comencé a esbozar la "mordida" en marrón También para asegurarse de que el área esté definida, así como crear un área de sombra para el relleno de "gelatina" que pronto gotea..

Paso 3

El glaseado es blanco, por lo que las sombras en el glaseado son de un azul muy claro. Observe cómo algunas de las líneas se "difuminan". El tramado, en pixel art, es una técnica de creación de un patrón (similar al ruido) para sombrear o resaltar un área sin aumentar el número de colores..

Las chispas son solo cuatro por cuatro Cajas de color o píxeles individuales dispersos alrededor. No olvide rellenar toda el área de glaseado con blanco en caso de que luego guarde el gráfico como un archivo transparente..

El relleno de "gelatina" es de color rosa brillante, con detalles en rosa oscuro y rosa intenso. No olvide delinear su pastelería en marrón oscuro en 30-50% Opacidad Para que las esquinas se mezclen más fácilmente..

4. Huevos, Sunnyside Up!

Paso 1

La forma del ícono del huevo es un compromiso entre un huevo frito adecuado (que estaría en todas partes) y un círculo perfecto (que parece demasiado artificial, incluso para estos diseños de píxeles pequeños). El número de píxeles es el siguiente:

  • Diez píxeles a través de.
  • Omita un píxel y coloque tres a cada lado en la siguiente línea hacia abajo.
  • Dos píxeles en diagonal de los últimos tres, y uno más en diagonal. 
  • En este punto, estarás repitiendo lo que ya se ha hecho. Primero, sin embargo, coloca cuatro píxeles en 50% de opacidad En las esquinas faltantes (ver abajo). Completa el circulo.

Paso 2

Comencemos con la yema, ya que hay muchas cosas para renderizar el huevo en comparación con los otros iconos dibujados hasta ahora. Tres colores componen el diseño de la yema..

  • Marrón medio en la mitad inferior: R: 182 G: 090 B: 020.
  • Amarillo ocre en los lados: R: 255 G: 150 B: 57.
  • Amarillo para el resto: R: 251 G: 208 B: 59.

Paso 3

Las siguientes imágenes pueden parecer más complicadas de lo que realmente son. Usé el mismo azul claro de la tostadora en Seccion 3, pero variaba su opacidad mientras sombreaba y difuminaba. Lo mismo va para Marron oscuro, que varía en Opacidad desde 20% -50% y se coloca sobre blanco o azul (en la parte inferior del huevo). Continué aligerando el huevo con Amarillo, crema, y ​​blanco.

El suavizado alrededor de los bordes externos del huevo se realiza en tres pasos: las esquinas son 50% de opacidad, Un par de píxeles al lado de cada esquina es 30% de opacidad, y el resto es 10-20% Opacidad.

5. Freír un poco de tocino

Paso 1

Opté por un corte grueso y corto de tocino, en lugar de algo más realista. Si bien este ícono es más delgado y alto que los otros íconos tal como está, no quise que esa disparidad sea más extrema cuando se juntan.

Utilizar el Herramienta Lápiz dibujar cuatro pixeles, entonces tres abajo y al Correcto sobre el diagonal, y cuatro pixeles otra vez. 

La esquina izquierda es abrupta en seis pixeles abajo, cuatro diagonales al izquierdasiete pixeles abajoTres abajo, y finalmente, cuatro abajo.

El lado derecho es Tres al Correctouno sobre el diagonal,seis abajo dos sobre el diagonal al izquierda, cuatro abajo, y ocho abajo al Correcto.

DupdoPegar esta sección superior, ir Edición> Transformar> Voltear verticalmente para darle la vuelta, y conectarlo a la mitad superior. Fusionar hacia abajo (Control-E) la capa copiada en la capa original y vamos a renderizar el icono de tocino.

Paso 2

Utilizar el Herramienta Bote de pintura rellenar el tocino con Ladrillo rojo (R: 204 G: 0 B: 0). Dibujar rayas wiggley con blanco en 50% de opacidad. Sombrea los bordes del tocino con Marron oscuro50% de opacidad.

Paso 3

Añadir luces a las rayas con Blanco30%, 20% y 100% Opacidad. Para pequeños trozos brillantes al tocino, agregue algunos píxeles alrededor de los bordes en 80% de opacidad.

Etapa 4

Para una manera más fácil de agregar un esquema, utilizar el Herramienta de varita mágica (W) para seleccionar fuera del icono de tocino. Ir Seleccionar> Modificar> Contrato y entrar 1 píxelInvertir la Selección (Shift-Control-I). Crear un Nueva capa debajo de la capa de tocino, en el Capas panel y rellene su selección con Marron oscuro30% Opacidad. Apile píxeles marrones translúcidos en las esquinas para suavizar los bordes del icono del tocino. Cuando esta satisfecho, Fusionar (Control-E) capas de tocino seleccionadas, en el Capas panel.

Buenos dias ya estas hecho!

Amplíe los íconos de su desayuno con frutas, café, jugo y más. Este conjunto está sesgado hacia los desayunos estadounidenses, por lo que si está fuera de los EE. UU., O si su vida ha sido influenciada por otras culturas (ya sean suyas o de otras), lo desafío a hacer pequeños íconos de esos deliciosos platos. Lleve todo un paso más allá y haga íconos de cada alimento en su cocina. Feliz pixeling, lectores.!