Share
Lo que vas a crearEn este tutorial estaremos diseñando una pantalla de juego para un tipo de juego de "combinar tres". Transformaremos formas geométricas básicas para crear iconos de animales encantadores y aplicaremos varios tipos de rellenos de degradado para hacer los objetos vívidos y tridimensionales. Terminaremos creando un fondo para configurar una plantilla de pantalla de juego..
Los juegos de “Match Three” son muy populares, especialmente para dispositivos móviles. El juego es bastante simple pero adictivo: coloca tres objetos idénticos en una fila para anotar más y más puntos. En este tutorial, diseñaremos un panel de juego vivo con animales cuadrados de fantasía. Además, esta lección te ayudará a inspirarte y diseñar cualquier otro tipo de pantalla de juego de tres combinaciones, por ejemplo, un juego con gemas preciosas o frutas planas. Siéntase libre de navegar por Envato Market para obtener más ideas sobre el diseño de pantallas de juegos planas, y comencemos!
Comience creando un Archivo nuevo de 600 x 800 px. Si no te gusta trabajar sobre un fondo blanco, usa la Herramienta Rectangular (M) Para crear una forma que cubra el lienzo y rellenar con amarillo.. Bloquear en el Capas panel haciendo clic en un pequeño icono de bloqueo encima. Mantendremos esta forma en la parte inferior y podremos recolorearla más tarde..
Empecemos formando la cabeza de nuestro primer animal: un lindo oso. Tomar el Herramienta Rectangular Redondeada (M) y hacer un 200 x 200 px forma lila. Recuerda que puedes ajustar el Radio de esquina de su forma desde la barra de herramientas de control en la parte superior. Vamos a mantenerlo en 25%.
Tomar el Herramienta de relleno (G), sostener Cambio y coloca el Llenar deslizador vertical a través de la forma, aplicando un dos colores Lineal relleno de gradiente.
Podemos ajustar el color del relleno haciendo clic en las puntas del control deslizante y seleccionando el color apropiado en el Color panel. Vamos a elegir un color lila claro para la punta superior y un color más oscuro para la parte inferior de la forma, agregando dimensión.
Vamos a empezar a formar el ojo. Tomar el Herramienta Elipse (M), sostener Cambio y hacer un círculo de 50 x 50 px. Cambiar a la Herramienta de relleno (G) y cambiar el Tipo de relleno a Radial en el panel de control en la parte superior. Aplique un color blanco en el centro de la forma y color gris en el borde, haciendo que el ojo sea esférico..
Ahora vamos a dar forma al iris. Dupdo y Pegar (Comando-C> Comando-V) el globo ocular, espera Cambio de comando y hacer la copia más pequeña, reduciéndola a aproximadamente 35 x 35 px con la ayuda del Mover herramienta (V). Rellénelo con relleno radial de color turquesa en el centro y turquesa oscuro en el borde.
Duplicar (Comando-C> Comando-V) El iris y la copia se hacen más pequeños, formando una pupila. Rellénalo con color turquesa oscuro. Haga un pequeño resaltado blanco en la parte superior del ojo, usando el Herramienta Elipse (M).
Ahora que el ojo está listo., Grupo (Comando-G) todos sus elementos, sostienen Opción-Shift y arrastra hacia la derecha, haciendo una copia.. Grupo ambos ojos, selecciónelos junto con la forma de la cabeza y use el Alinear panel en la parte superior para Alinear las formas Horizontal al Centrar.
Continuar usando el Herramienta Elipse (M) hacer una nariz aplastada de 50 x 15 px tamaño. Aplique un relleno lineal vertical desde rosa claro en la parte superior a rosa más oscuro en la parte inferior. Haz una elipse rosa oscuro más pequeña en la parte superior y cambia su Modo de mezcla a Pantalla en el Capas Panel, formando así un resaltado semitransparente..
A continuación vamos a formar una boca. Utilizar el Herramienta Pluma (P) y espera Cambio Para hacer una línea cuadrada. Selecciona el Llenar color a ninguno en el Color panel y aplicar un color lila oscuro a la Carrera. Dirígete a la Carrera panel y establecer el Anchura a 2 puntos, dejando todas las demás opciones por defecto.
Tomar el Herramienta de esquina (C) y redondee completamente las esquinas de la forma tirando de los nodos de las esquinas hacia arriba.
Duplicar la forma y uso del Flip horizontal Funciona desde la barra de herramientas de control en la parte superior para reflejar la forma.
Ahora vamos a añadir las orejas. Utilizar el Herramienta Elipse (M) hacer un 70 x 70 px circulo. Hagamos que se mezcle bien con la cabeza eligiendo el color adecuado. Encuentra el Selector de color herramienta en el Color panel, mantener y arrastrar sobre la cabeza del oso. Verás una lupa que te ayudará a localizar el color que necesitas. Elija el color lila claro junto a la oreja y suelte el botón del mouse. Ahora puede seleccionar la oreja y aplicar el color de la muestra junto a la Selector de color. Ahi lo tenemos!
Ahora veamos cómo podemos copiar el estilo de relleno complejo de otros objetos. Duplicar (Comando-C> Comando-V) La oreja y hacer la copia más pequeña.. Copiar (Comando-C) la cabeza, seleccione el elemento superior de la oreja y vaya a Editar> Pegar estilo. Edite la posición del relleno usando el Herramienta de relleno (G). Agregar una segunda oreja en el lado opuesto de la cabeza.
Como puede ver, podemos copiar no solo los objetos en sí, sino también su apariencia..
Terminemos con el oso agregando un elemento más: una barriga estilizada. Utilizar el Herramienta Elipse (M) para hacer un óvalo y llenarlo con un color lila oscuro, cambiando el Modo de mezcla a Pantalla en el Capas panel.
Podemos colocar la elipse creada. dentro La forma de la cabeza, ocultando así las piezas innecesarias. Seleccione el óvalo creado en el Capas Panel y arrástrelo sobre la forma de la cabeza hasta que vea una franja azul estrecha como se muestra en la imagen de abajo. Deja caer la elipse, colocándola dentro de la capa de la cabeza..
¡Y hemos terminado! Pasemos al siguiente icono de animal..
Usemos el ícono del oso que ya hemos creado para hacer un nuevo elemento.. Duplicar y cambiemos los colores del relleno lineal a blanco en la parte superior y gris en la parte inferior. Luego recolorea las orejas de color lila a un gris muy oscuro. Cambie también el relleno lineal de la nariz a gris oscuro y ajuste el color de la boca Carrera, cambiándolo a rosa.
Finalmente, ajuste el color de los ojos cambiando el relleno radial a marrón claro en el centro y marrón más oscuro en los bordes, aplicando también el color marrón oscuro a la pupila.
A continuación, agregaremos manchas oscuras alrededor de los ojos para hacer que nuestro personaje se parezca más a un panda real. Utilizar el Herramienta Elipse (L) hacer un 75 x 95 px Forma, llenándola de relleno lineal de tintes gris oscuro..
Girar la forma sobre 45 grados y colóquelo debajo del ojo arrastrando la forma hacia abajo en el Capas panel.
Observe la diferencia entre colocar una forma dentro el otro y colocando una forma debajo el otro. Esta vez verás un marcador azul más largo, como en la imagen de abajo.
Duplicar (Comando-C> Comando-V) el lugar y Voltearlo horizontalmente al otro lado, usando el Transforma Funciona en la barra de herramientas de control en la parte superior. Mueve la copia del spot, haciendo que encaje con el segundo ojo..
¡Y ahí tenemos a nuestro panda! Vamonos.
Vamos a duplicar ¡El personaje panda y convertirlo en un lindo mapache! En primer lugar, cambie el color de la forma de la cabeza a un relleno lineal vertical de azul claro en la parte superior a azul más oscuro en la parte inferior.
Proceda cambiando los colores de los ojos a rojo rosado, y reemplazemos la boca. Utilizar el Herramienta Pluma (P) Para crear una forma de boca acorralada con gris oscuro. Carrera.
Ahora vamos a modificar las orejas. Seleccione el círculo más grande de la forma de la oreja y Convertir a curvas, usando el botón en la barra de herramientas de control en la parte superior. Tomar el Herramienta de nodo (A) y seleccione el nodo superior de la forma. Convertir a Sharp desde el panel de control en la parte superior, haciendo la oreja puntiaguda. Haga lo mismo para la parte interna de la oreja: Convertir a curvas y Convertir el nodo superior a Sharp.
Cambia el color de la oreja, haciendo que se ajuste a la cabeza y gire la oreja 45 grados. Duplicar la oreja y Flip horizontal, colocando la copia en el lado opuesto.
Seleccione el punto alrededor del ojo con el Herramienta de relleno (G) y ajusta los colores del relleno, cambiándolos a tonos de azul más claros y más oscuros.. Copiar (Comando-C) El lugar, seleccione el segundo lugar y Editar> Pegar estilo, aplicando una nueva apariencia.
Termina con el personaje agregando una elipse gris clara debajo del área de la nariz. ¡Y eso es todo para el mapache! Vayamos a nuestro último icono.!
Vamos a duplicar nuestro primer icono, el oso morado, y usarlo para hacer un loro divertido. Cambie el color de la cabeza al relleno lineal de verde claro en la parte superior a verde más oscuro en la parte inferior. Elimine la forma elíptica de la barriga y la boca del oso, ya que ya no los necesitaremos.
Cambia el color de los ojos a naranja-marrón..
¡Vamos a convertir la nariz del oso en el pico de un loro! Rota lo 90 grados y Convertir a curvas. Seleccione el nodo inferior con el Herramienta de nodo (A) y Convertir a Sharp desde la barra de herramientas de control en la parte superior.
Cambia los colores del relleno lineal a amarillo en la parte superior y naranja en la parte inferior.
Tomar el Herramienta Elipse (M) y hacer una forma estrecha de 15 x 40 px. Llénalo de color verde claro y cambia el Modo de mezcla a Multiplicar, haciendo una pluma semitransparente oscura.
Sostener Opción-Shift y arrastre la pluma hacia la derecha, haciendo una copia. prensa Comando-J Un par de veces para hacer dos copias más..
Vamos a añadir un último detalle a nuestro loro. Utilizar el Herramienta Elipse (M) hacer un 40 x 70 px Forma en el centro de la frente, escogiendo el color adecuado del lugar más claro de la frente y aplicando un color verde claro a la forma..
Agrega dos elipses más pequeñas en ambos lados de la forma del medio. Seleccione las tres formas y use el Añadir Operación desde el panel de control en la parte superior para combinar todas las elipses en una sola forma.
Duplicar (Comando-C> Comando-V) la forma y mueva la copia inferior un poco presionando la tecla Flecha hacia abajo Clave unas cuantas veces. Cambia el color de la forma a verde oscuro, haciendo una sombra plana.
¡Y ahí lo tenemos! Nuestro icono de loro está listo.!
Aquí está nuestro conjunto de simpáticos animales cuadrados que usaremos como elementos de un juego de "emparejar tres". Avancemos y hagamos una pantalla de juego simple para ver cómo funciona en conjunto!
Vamos a desbloquear Nuestra forma de fondo y cambia su color a un suave color naranja. Utilizar el Herramienta Rectangular Redondeada (M) hacer un 415 x 600 px forma amarilla con Radio de esquina del 10%.
Duplicar (Comando-C> Comando-V) La forma y hacer la copia más pequeña, cambiando el color de relleno a amarillo más oscuro.
Duplicar la nueva forma y disminuir el tamaño de la copia de nuevo, cambiando el color al mismo amarillo claro que tenemos para el rectángulo redondeado más grande.
Finalmente, duplicar el rectángulo redondeado más grande y mueva la copia inferior un poco presionando la tecla Flecha hacia abajo Clave unas cuantas veces. Haga la copia algo más grande y cambie la Modo de mezcla a Multiplicar en el Capas Panel, formando una sombra sutil. En total tenemos cuatro rectángulos redondeados para el panel de juego..
Utilizar el Herramienta Elipse (M) y mantenga pulsado Cambio Para hacer un gran círculo verde en la parte inferior del lienzo. Colóquelo entre la pantalla del juego y la forma del fondo. Añade más círculos, cubriendo la parte inferior del lienzo..
Seleccione un tinte verde más claro y continúe usando el Herramienta Elipse (M) para hacer círculos más pequeños y ligeros, que representan simples arbustos estilizados.
Continúa usando la misma técnica y llena la parte superior del lienzo con círculos de color naranja claro, que representan nubes estilizadas.
Ahora podemos comenzar a colocar los iconos de animales en el panel de juego. Aquí utilizo un truco simple para hacer que todos los elementos sean iguales. Como probablemente habrá notado, nuestro loro es un poco más pequeño que el resto de los personajes, porque no tiene orejas. Esto puede hacer que la alineación de las formas sea un poco complicada, y es por eso que copio las orejas del icono del panda y las coloco en el loro. Haga que las orejas sean completamente transparentes Llenar y Carrera colores a ninguno, y luego agrupar los elementos.
Ahora podemos colocar los iconos en una fila y reducir el tamaño, ajustándolos a la pantalla del juego. Manteniendo los iconos seleccionados, diríjase a la barra de herramientas de control en la parte superior y abra el Organizar panel. Desde aquí, haga clic en. Espacio horizontalmente y desmarque el Auto distribución casilla de verificación, estableciendo el valor de la brecha a 0 px.
Usted puede Alinear las formas para Fondo también, usando el mismo Organizar panel.
Grupo (Comando-G) la fila de iconos, mantenga Opción-Shift Y arrastralo hacia arriba, haciendo una copia. prensa Comando-J Varias veces, llenando la pantalla del juego con iconos. Selecciona todas las filas, dirígete a la Organizar panel, y haga clic en Espacio verticalmente. Desmarcar Auto Distribuir y establecer el valor de la brecha a 2 px, Haciendo espacios estrechos entre los bordes de los iconos..
Puedes ajustar el diseño haciendo los iconos más pequeños o más grandes y ajustando la distancia entre las filas, haciendo que los iconos se ajusten al panel del juego.
Justo después de eso, podemos barajar los íconos al azar, haciendo que toda la escena se vea como una pantalla de juego real. Haga doble clic en la fila de iconos para aislar el grupo y mover los iconos dentro del grupo horizontalmente mientras mantiene presionado Cambio.
¡Gran trabajo! ¡Nuestra pantalla de juego de match tres está lista! Espero que hayas disfrutado siguiendo este tutorial y que hayas descubierto algunos consejos y trucos útiles al trabajar con formas básicas, rellenos de degradado y diversas operaciones de transformación de Affinity Designer. Siéntase libre de aplicar sus conocimientos mientras crea nuevos diseños de juegos y personajes, y no olvide compartir sus impresionantes resultados.!
Si te interesa aprender a crear más cosas de diseño de juegos en Affinity Designer, asegúrate de consultar también los siguientes tutoriales:
Accentsconagua