Spanish (Español) translation by Cristian Marroquin (you can also view the original English article)
Si estás haciendo una ilustración de ciudad de arte de pixel, o incluso si solo quieres hacer una pieza simple de arte de pixel isometrico, una tienda de café o un restaurante será la mejor cosa por añadir.
Haremos un edificio pequeño y simple, pero añadiendo algunos trucos nuevos para hacerlo una tienda de café.
Asegúrate de leer estos tutoriales antes de continuar:
Y opcionalmente:
1. Calcula las Dimensiones del Edificio
Calculemos el tamaño de nuestro edificio.
Paso 1
Como es usual, tomaremos el personaje como tamaño de referencia. Esta será la altura de nuestro edificio.
Paso 2
Y esto, el ancho de nuestra fachada. Podemos fácilmente alterar estos tamaños luego s queremos.
Paso 3
Y esta será la profundidad de nuestro edificio. Será un poco pequeño.
Paso 4
Vamos a añadir las lineas de arriba para el techo. Son las mismas lineas con forma de L, solo rotadas a 180 grados. Colócalas un pixel arriba de las otras lineas y luego añade un pixel en las esquinas para cerrar el rectángulo.
Paso 5
Las lineas extras, las usaremos para dos razones: el espacio de arriba sostendrá la señal de la tienda, y la linea de abajo serán los bordes superiores de las ventanas y de las puertas de la tienda.
Paso 6
Ahora, vamos a añadir lineas verticales para los bordes dela puerta y las ventanas. Estoy haciendo ambas ventanas del mismo ancho y dejando algo de espacio extra entre las ventanas y las puertas y las esquinas. Vamos a añadir un poco de decoración en ese espacio luego.
Paso 7
Vamos a añadir algo de profundidad a las ventanas y a la puerta. Están empujadas hacia atrás 2 píxeles (y 1 px arriba).
Selecciónalas y empújalas mientras presionas Alt. Recuerda que puedes usar las flechas del teclado—es usualmente más fácil de precisar con ellos.
Paso 8
Estamos diseñando esta tienda de café para que parezca bien en una esquina, y vamos a añadir un textura de suelo genial, asó que definiremos esta área del piso.
Así que añadiremos un par de lineas. En el lado permitirá a las personas caminar, como una acera regular, pero en el frente habrá suficiente espacio para unas cuantas mesas.
Paso 9
Cierra el área del piso.
Hice las esquinas frontales un poco redondas porque las esquinas de la acera usualmente son redondas. De hecho, son usualmente un poco más redonda, pero pienso que esto es suficiente para expresar esa idea si tener una gran linea de semi-círculo.
2. Añade Elementos Decorativos y Color
La tienda de café que haremos obviamente será un diseño que he definido. Pero espero que con la información que estoy compartiendo en este tutorial, y con el resto de esta serie, serás capaz de crear lo que quieras. Y cuando lo hagas, recomiendo que revises las imágenes de referencia, quizás ponerlas en un moodboard, y bosquejar algunas opciones antes de comenzar con el trabajo real. Las creaciones resultantes será mucho mejor que si solo sigues tu primer impulso.
Pero de igual manera, haremos este diseño, y va ser en un estilo de viñeta, que pienso será un buen enfoque para una tienda de café.
Paso 1
Vamos a pintar la superficie de nuestro edificio. Como es usual, más brillante en el parte superior, medio en la izquierda y más oscuro en la derecha, con las sombras disminuyendo en brillo por 15%.
El color es un poco de chocolate—se supone que sea madera o al menos un café pintado.
Paso 2
Continúa añadiendo color, aquí está el vidrio, y el área donde estará la señal será un gris oscuro, casi negro, e iremos alrededor de los lados también.
Paso 3
Para romper la forma del cubo y añadir detalle, haz el rectángulo del techo un poco más largo, solo para que las esquinas resalten un poco.
Luego añade iluminación más clara a las puntas de las esquinas. Aquí la iluminación solo es aplicada al techo y las esquinas verticales en el edificio.
Paso 4
Limpia las lineas oscuras que están a la par de las nuevas iluminaciones.
Paso 5
Y para las puntas de las esquinas horizontales, haremos una linea más clara que se extienda más allá de los bordes de las ventanas, como parte del estilo del edificio que haremos. Estas lineas las hice con un poco de contraste; son 20% más claras que el color del muro.
Y debajo de ellos hay otra linea, con una sombra que es más oscura que el muro, para darle a la linea clara más volumen y que de la idea de que es un gran tablero de madero yendo a través de los muros.
Paso 6
Derriba de las lineas más claras vamos a añadir lineas con sombras que sean más oscuras que el muro.
Y luego borra el resto de las lineas de guía; terminamos con ellas.
Paso 7
Añade una linea más de esas claras justo debajo de la señal de la tienda. Y de nuevo, añade una linea negra debajo de la clara.
Paso 8
Las decoración que añadiremos a los muros será simples rectángulos con un poco de efecto para expresar volumen. Por ahora haz los rectángulos en una nueva capa y en un color brillante.
Paso 9
Para obtener el efecto de relieve puedes copiar los mismos rectángulos, pegarlos y hacerlos más oscuros y desplazarlas un poco (1 px a un lado y 1 px arriba).
Se verán mucho mejor incluso si borras los píxeles en las esquinas en las cuales dos colores diferentes se superponen.
Paso 10
Luego rellena con los colores finales, que querrás hacer bajando el contraste. Aquí está la clara que es solo 10% más de brillo.
Paso 11
Copia estos rectángulos y pegalos en las otras esquinas y muros. Por supuesto, las que van en el lado derecho deben tener el color ajustado (más oscura).
Paso 12
Ahora vamos a trabajar con la puerta.
Haremos puertas dobles, así que necesitaremos una linea justo en el medio. Puedes medir el marco de la puerta con la Herramienta Selección para encontrar el ancho total, parte esa cantidad en la mitad, y luego sabes la distancia que deberías tener entre el borde de la puerta visible y la linea central que añadiremos.
Luego alrededor del vidrio tendremos un marco más café.
Recomiendo hacer las lineas en bajo contraste a menos que quieras expresar volúmenes diferentes. Aquí, las lineas en el centro de las puertas y las esquinas de las puertas son un café oscuro, en vez del casi negro de muchos bordes.
Paso 13
Dale un estilo a las puertas que iguale el resto del edificio. Así que añade los rectángulos de relieve y un poco de iluminación debajo del vidrio.
Paso 14
Vamos añadir la perilla de la puerta. Deben estar a la altura cerca del codo del personaje.
Aquí solo he hecho el plato trasero donde la perilla irá.
Paso 15
Y estas serían las perillas. Son delgadas y no tienen muchos detalles por su tamaño, pero son buenas y de oro.
Paso 16
El efecto que hemos estado usando para el vidrio es para sugerir un poco de reflexión en los bordes de la ventana (creo que será visto como si se está viendo el borde de la ventana desde adentro, pero aún sería positivo). Pienso que este efecto es imple, efectivo y más fácil de mantener constante a través de tus ilustraciones.
En cualquier caso, ahora es tiempo de aplicarlo en las ventanas y las puertas. Es simplemente un linea más oscura, un pixel afuera del borde en si.
Aquí hice las lineas de la esquina donde la madera y el vidrio se juntan más claras y negras, y con un tono que promedia el tono de la madera y el vidrio.
Paso 17
Ahora vamos a añadir una superficie de material diferente al techo. Puede ser grava o brea o lo que sea, pero debe parecer un poco regular para el color del techo.
Paso 18
Suaviza los bordes de este rectángulo del techo y añade un poco de iluminación en las lineas superiores.
Y añade un poco de textura si quieres.
Ahora el edificio está básicamente completo. ¡Bien! Pero sin los detalles siempre será aburrido.
3. Añade Detalles Finos a la Estructura
Lo que añadiremos en términos de detalles serán: toldos, la señal de la tienda, la textura del suelo y las mesas. Así que aún hay mucho por hacer.
Paso 1
Tendremos el frente del toldo cubriendo parte de la ventana y la puerta. Pero dale un pixel o dos de distancia a las esquinas del edificio.
Crea una nueva capa para la linea superior del toldo y una para los lados. Tendremos solapas con esquinas redondeadas cayendo, parecido a los dientes. Aquí hay dos de ellas, y las dejaré definir en ancho de ese lado del toldo.
La linea diagonal es una linea 1:2. Es siempre mejor evitar una linea áspera (irregular).
Paso 2
Extenderemos el toldo a través replicando las pequeñas solapas todo el tiempo.
Paso 3
Y luego hacer que todas las lineas se junten y hacer que sean (o al menos vistas) equidistantes del borde del toldo en la esquina del edificio. Para evitar cortar una de las solapas en mitad, he disminuido toda la tienda de café por 2 px (las ventanas ahora son un poco más pequeñas).
Paso 4
Añade algo de color al toldo. Se ven geniales en verde.
Paso 5
Dale sombra como es usual, y disminuye el contraste para las solapas—serán sutiles en detalle.
Paso 6
Copia el toldo para el otro lado y voltea horizontalmente, cambia el tamaño y dale sombra un poco más oscura porque tendremos los lados derecho de las cosas más oscuras.
Ahora nos moveremos en las letras de la señal de la tienda.
Paso 7
Haremos letras muy pequeñas. Puedes cambiar el tamaño como quieras, y será más legible, peor pienso que funcionaría bien siendo un pequeña. En cualquier caso, el edificio es tan pequeño que no puede tener una seña muy larga.
Estas tres lineas serán la base para hacer nuestras letras, será fácil de hacerlas en la letra que queramos.
Paso 8
Voy a nombrar la tienda de café muy creativamente, "coffee sop" ,,, si tienes otro nombre en mente, ¡úsalo!
"Coffee Shop" tiene siete letras únicas, así que me molestaré en hacerlas. Así que aquí están nuestras lineas de base, siete veces.
Paso 9
Borra algunos píxeles, añade otros cuantos y tendrás las letras que necesitas. Mantén en mente que por la vista isométrica, las letras deben verse sesgadas. En el caso de las letras redondas, va bien no intentar sesgarlas porque entonces las letras perderán la redondez y se mirarán menos natural.
Paso 10
Ahora puedes copiar las letras, alinearlas y terminar la señal. Recuerda mantener el espacio entre ellas regular.
Paso 11
Aquí la señal está aplicada a la tienda de café. Lo hice amarillo y le di un poco de sombra para hacer que resalte un poco.
Señal hecha. A la textura del piso.
Paso 12
Haremos que el piso se mire como si está hecho de ladrillos. Decidí arreglar los ladrillos como una L.
Aquí es cómo hice la L basada en una superficie pequeña cuadrada.
Luego replica la L algunas veces para hacer el motivo.
Paso 13
Para definir el motivo debes seleccionar los puntos en los cuales el ladrillo comienza a repetirse.
Aquí está seleccionado y rellenado con lo que pienso es bueno, una clase de color rosa.
Escogí borrar la mitad de los píxeles de las lineas negras para hacer el motivo bajo en contraste y darle un color 5% más oscuro que el rosado del ladrillo.
Puedes seleccionar ese rectángulo e ir a Edición > Definir Motivo ... y se mostrará como un motivo útil para el Relleno del Suelo.
Paso 14
Puedes solo replicar el motivo las suficientes veces para rellenar el área que quieras.
No lo aplico solo a las áreas porque quiero alinearlo bien con los bordes y las lineas que ya tengo.
Así que hago eso en otra capa debajo de la tienda de café. He ajustad algunos elementos de la tienda de café para igualar mejor el motivo (pero no puedo recomendar que seas un perfeccionista—puede ser frustrante).
Paso 15
Luego solo borra algunos bits innecesarios del motivo. Puedes hacerlo seleccionando el área que quieres para hacer motivo con la Herramienta Varita Mágica (con el Contiguo marcado) y luego yendo a la capa de motivo, invirtiendo la selección y presionando Suprimir.
Luego puedes unirlos ... y dar a los bordes un sombreado suave.
Paso 16
Y para terminar la superficie del trabajo, ahora que tenemos nuestro piso, vamos a añadir sombras a los toldos. Solo son dos rectángulos, correspondientes a lo anchos y altura de los toldos, con un color negro cerca del 15% de Opacidad.
Los hiciste en una capa diferente y luego puedes unirlas.
Paso 17
Finalmente es tiempo de hacer los muebles.
Comenzaremos con la mesa. Puede parecer un bit en el lado pequeño, pero respeta las proporciones de nuestro personaje y eso es lo que importa. Si queremos que nuestro personaje se siente, no tenemos que darle un diferente tamaño a las extremidades para hacerlo ver natural.
Así que vamos a definir la altura de la silla, y debe ser a la altura de la rodilla del personaje.
Luego hacerlas cuadradas. Estamos haciendo un cuadrado de nuestro piso también, eso hará en una sombra proyectada.
Añade las piernas y el respaldo y así tienes los bordes de la silla.
Paso 18
Ahora convertimos esas lineas de fondo para que proyecte la sombra: negro con transparencia.
Añade color a tu silla. Será un color de madera oscuro, no lo dejaré del mismo color como la tienda de café por la causa de la variedad, pero no debería chocar con el resto de nuestra paleta de colores (usa Imagen > Ajustes > Tono/Saturación... para fácilmente encontrar la sombra que te parezca).
Luego añade la iluminación, las sombras oscuras y un toque pequeño de la textura de las lineas.
... y ¡boom! La silla está hecha.
Paso 19
Para hacer la mesa, es un proceso muy similar. La altura debe ser un poco más grande que la altura de la silla, pero menor que la cintura del personaje.
Luego añade color, sombra y texturas.
Paso 20
Le daremos una sola pata con un rectángulo como base.
Paso 21
Pongamos un par de mesas. Para que no se miren idénticas, una de ellas tendrá una silla.
Paso 22
Aquí están grupos de sillas y mesas.
Paso 23
Ahora solo encontremos un buen lugar en el frente de la tienda de café para ponerlos.
Paso 24
¡Y la tienda está en gran medida completa!
Podrías añadir un poco más de detalles al techo, como auna caja de ire acondicionado o una chimenea; he cubierto estos elementos en el tutorial de un edificio de apartamento.
¡Buen Trabajo! ¡Lo has Terminado!
La tienda de café está terminada y lista para los negocios. Recuerda que puedes continuar incrementando tu colección de arte de pixel si sigues esta serie de tutoriales. Hacer una ciudad será una posibilidad.
¡Buena suerte con tus creaciones!
