Diseño de interfaz para el juego, dibuja un paquete de iconos

Hola a todos!

Soy Mikhail Kravchenko, diseñador de interfaz de juegos.

Este artículo trata sobre cómo dibujar un paquete de iconos para el juego. A continuación puedes ver el resultado.

Arreglamos los requisitos para el resultado.

Entonces, una tarea sobre este contenido voló hacia nosotros. En el juego, comienza un evento: la invasión de la raza alienígena en nuestro planeta. Derrotaremos a los invasores, varios objetos caerán de ellos, y estos objetos necesitan ser dibujados.

En primer lugar, es necesario formular y corregir los requisitos para el resultado, esta es la base de nuestro trabajo. Teniendo tales requisitos ante nuestros ojos, con una menor probabilidad de que dibujemos no lo que se necesita, tendremos una comprensión mucho más mutua con el cliente y el equipo, y también habrá algo para verificar el resultado de nuestro trabajo.

Se debe compilar una lista de requisitos según la descripción del problema y sus propias ideas sobre cómo resolverlo. A continuación, debe dirigirse al cliente con esta lista y asegurarse de que entendemos la tarea de la misma manera. Quizás la lista necesite arreglar algo. Como resultado, obtenemos una lista de requisitos para el resultado.

Aquí hay un ejemplo de dicha lista:

• Los artículos deben ser similares a otros artículos similares de intrusiones pasadas;
• Habrá 5 tipos de artículos: anillos, pulseras, broches, colgantes y piedras;
• Cada tipo de artículo tendrá tres grados de rareza. Cuanto más raro es el objeto, más poder le da;
• El grado de rareza del artículo debe de alguna manera mostrarse visualmente;
• Además de la rareza, las piedras tienen 4 colores: azul, rojo, amarillo y verde;
• Los objetos abandonan a los soldados del ejército invasor, por lo tanto, deben tener los rasgos y colores característicos de estos oponentes;
• Las imágenes son necesarias en formato Tga, tamaño: 128x128 píxeles.

Hemos decidido los requisitos, ahora puede comenzar a trabajar con referencias.

Referencias

Encuentra objetos que ya han sido pintados para tales eventos. Tendremos que dibujar en la misma dirección, y estos objetos nos ayudarán a no desviarnos del camino correcto.



Además, debemos estudiar a los soldados del ejército invasor. Nuestros artículos tendrán que tener algunas características comunes, por lo que vale la pena recopilar más fotos con los invasores y construir un diseño basado en ellos.



Los opositores difieren en su fuerza: hay ordinarios, medianos y fuertes. Puedes alejarte de esto. Por ejemplo, usar partes de oponentes débiles en el diseño de objetos ordinarios, y partes de oponentes fuertes en el diseño son más raras.

Paleta

Tendremos que dibujar muchos iconos en un estilo, será mucho más conveniente trabajar si hacemos una sola paleta y esas. proceso de pintura para todos los artículos. Si no hacemos una paleta, pero elegimos un color con una pipeta de la referencia, lo más probable es que los objetos se corroan en color.

Seleccionamos las referencias para los colores de los objetos que ya están en el juego. Nuestros oponentes son una raza de plantas, por lo que el color verde es bastante adecuado. Y como segundo color, puedes llevarte oro. A continuación ves fotos con referencias.



Ahora debe recopilar los colores de las referencias y convertirlos en una paleta. Toma el color principal, él
Se encuentra aproximadamente en el medio entre las áreas claras y oscuras del sujeto, los colores para los lugares claros y oscuros, los colores para los reflejos y especialmente los lugares oscuros. Y también color para reflejos del entorno. Resultó dos juegos de colores, uno para la parte dorada y el segundo para el verde.



La preparación se completa, procedemos al esquema.

Esquema

En el proceso, probaremos diferentes opciones para el diseño de objetos, y cuando obtengamos un resultado que nos satisfaga, lo coordinaremos con el cliente. Los deseos y sugerencias llegarán del cliente, algunos de ellos nos ayudarán a mejorar el resultado, discutiremos y rechazaremos otros. Algunas cosas en nuestro diseño no serán del todo adecuadas y será necesario corregir o rehacer una serie de puntos.

Punto importante
Si hacemos inmediatamente el trabajo en calidad final, tomará una cantidad significativa de tiempo. Entonces es muy probable que se nos pida que corrijamos o cambiemos algo, y ciertamente no funcionará hacerlo de manera fácil y rápida. Lo más probable es que tenga que pasar una cantidad significativa de tiempo y esfuerzo nuevamente.

Por lo tanto, primero esbozamos. El boceto toma un poco de tiempo y esfuerzo, mientras permite delinear en términos generales cuál será el resultado final. Eso significa que podemos pasar rápida y económicamente por varias opciones de diseño, y si nos piden que arreglemos algo, tampoco habrá problemas con eso.



Los bocetos comienzan con un lineart. Es mejor tomar un pincel redondo con los parámetros de opacidad y flujo en la región del 30%, que varían según la fuerza que presiona el lápiz. Ante nuestros ojos tenemos las partes de los oponentes que hemos elegido para mostrar la rareza de los objetos, así como las imágenes de joyas que ya están en el juego. Estamos buscando una forma adecuada para los objetos, en el proceso de dicha búsqueda, puede pasar por varias opciones, a continuación verá un ejemplo de dicha búsqueda.



Si se repiten algunos elementos en su diseño, tiene sentido envolverlos en objetos inteligentes. Es probable que con el tiempo desee cambiar algo en ellos, y corregir un objeto inteligente es mucho más fácil que recorrer todos los lugares en los que se usa el elemento.



Y ahora el lineart para todos los objetos está listo. Puedes proceder a pintar. Colocamos de manera prominente las paletas preparadas y las imágenes de objetos de referencia para flores.

Primero debe colorear un elemento para asegurarse de que la paleta actual le permita lograr el resultado deseado. Y obtenga una muestra, en base a la cual podemos colorear todos los demás objetos.

No puede dibujar tal patrón en una capa porque en este caso no podremos pintar otros objetos de la misma manera. Por lo tanto, agregamos cada color de la paleta en una capa separada para tener un proceso de pintura ante nuestros ojos y poder repetirlo cuando pintamos otros objetos.



Es probable que el resultado que obtengamos no nos convenga y será necesario cambiar ligeramente los colores para que sea más adecuado. Es bueno que cada color se encuentre en una capa separada y que pueda editar cualquier color por separado del resto. Si cambiamos los colores del objeto de muestra, no debemos olvidar corregir los mismos colores en la paleta.

Aquí hay una muestra para pintar, nos queda completamente bien y también puede pintar todos los demás artículos.



Creamos una máscara con la forma de todos los objetos para no arrastrarnos por sus bordes, hacer grupos separados para las partes doradas y verdes del objeto, y hacer que el contenido de estos grupos sea el mismo que en el objeto de muestra. A continuación se muestra el proceso de pintar un artículo.



También tenemos piedras en el problema y tienen diferentes colores: azul, amarillo, verde y azul. Para obtener el resultado deseado, solo dibuje un conjunto de piedras, haga tres copias, coloque una capa con el modo de fusión de colores encima y pinte el núcleo de las piedras en los colores que necesitamos. También puede colocar una capa con superposición de superposición en la parte superior de la capa con el modo Color y experimentar con la pintura; dibujar en una capa de este tipo aumenta el contraste de la imagen y la saturación del color.



Aquí tenemos bocetos listos para todos los objetos y puede pasar a la siguiente etapa: aprobación del diseño con el cliente y sus colegas.

Aprobación de diseño

Antes de mostrar los bocetos al cliente, necesita un lugar para arreglar el camino por el cual tomamos esta decisión y mostrarlo junto con los bocetos. Cuando este camino es visible para el cliente y sus colegas, muchas preguntas desaparecen por sí mismas y dedicamos mucho menos tiempo a las explicaciones. Figma, u otro servicio en línea similar, es muy adecuado para presentar ese camino.

Mostramos el boceto al cliente. Es probable que solicite corregir un par de puntos, estaremos listos para esto. Cuando acordamos con el cliente, debemos mostrar el resultado a los colegas y pedirles que compartan su opinión sobre el resultado. Vale la pena hacerlo por varias razones.

En primer lugar, los colegas pueden notar cosas a las que no prestamos atención. Por ejemplo, una vez dibujé un símbolo para una nueva clase y se ajustaba bien a la descripción de la tarea, pero luego un colega vio ese símbolo y dijo que el símbolo uno a uno es similar al logotipo del servicio May Target y, por eso, parece bastante extraño. Busqué en Google este logotipo, y resultó que mi ícono es muy similar.

En segundo lugar, los colegas pueden experimentar asociaciones desagradables o extrañas con el tema. Y si tales asociaciones surgieron en una persona, bien pueden surgir en los jugadores, y no es rentable provocar emociones negativas en ellos.

En tercer lugar, alguien puede recordar que ya tenemos objetos similares en el juego, y si agrega otro casi igual, confundirá al jugador.

Es decir, verificar el resultado con la ayuda de colegas nos ayuda a evitar algunos errores, o al menos reducir las posibilidades de que ocurran.

Un ejemplo de trabajo con comentarios de colegas

El siguiente es un ejemplo de trabajo con los comentarios de colegas.

Comentario 01
La forma de las piedras es casi la misma que la de otra raza de invasión.

Observamos todas las piedras y vemos que las diferentes razas tienen piedras de diferentes formas, y nuestras piedras son realmente similares en forma a las piedras de otra raza.



Cambiamos la forma de las piedras.



Comentario 02
Esta forma del núcleo de la piedra da asociaciones con algún tipo de tumores dolorosos, lo que hace que el elemento no sea atractivo.

Si tal asociación apareció en una persona, se puede suponer que aparecerán otras. Algo más necesita ser inventado.



Comentario 03
Es necesario corregir el núcleo de la piedra del medio; es similar al de la piedra de los demonios.

Observamos las piedras de la raza demoníaca, vemos que las piedras son muy diferentes y la versión actual es adecuada, y el autor del comentario está equivocado.



Comentario 04
Existe una propuesta para aumentar la parte central de la piedra, dependiendo de su rareza.

Suena lógico, intentémoslo.



Resultó bastante bien, dejémoslo así.

Comentario 05
El broche se parece demasiado a una simple parte superior de los anillos. MB necesitan algún tipo de sustrato u otra forma.

Compara artículos.



Realmente parece que puede confundir a una persona, cambiamos la forma de la parte verde.



Comentario 06
Ahora el broche es diferente del anillo, pero comienza a parecerse a un amuleto. Puedes mejorar su diferencia.

Compare objetos, fortalezca la diferencia, haciendo que la parte de oro sea más masiva.



Punto importante
Para editar los bocetos más rápido, puede copiar un grupo con ellos y contraerlo en una capa, tecla de acceso rápido - Ctrl + E. Realice cambios en la capa resultante y una copia del grupo de ellos. El proceso de pintura para guardar para más tarde. Será necesario cuando necesite dibujar objetos en la calidad final.

Y así aprobamos el esquema de los objetos: todos están de acuerdo con todo y podemos proceder a la representación final de los objetos.

Renderizado fino

Lo más importante en esta etapa es observar una sola tecnología. El proceso de dibujo para cada artículo. En este caso, todos los objetos se dibujarán de la misma manera y ninguno quedará fuera del estilo general. Para acelerar el proceso, puede dibujar en un vector, a una escala del 100% de la requerida. Para mostrar las formas principales con un bolígrafo y luego crear una capa en la parte superior, conviértala en una Máscara de recorte y pinte las áreas deseadas con un pincel suave. Tecla de acceso rápido en la máscara de recorte - Ctrl + Alt + G. La siguiente imagen muestra el proceso de pintar parte del sujeto.



Aquí están todos los artículos listos y se pueden mostrar al cliente y al equipo.



Lo más probable es que haya un mínimo de deseos y comentarios ya que ya hemos acordado todo en la etapa de borrador.

Una vez aprobados los artículos, debe guardarlos en el formato correcto. Recomiendo marcar el documento con la herramienta Slice y dar un nombre a cada celda. Y luego guarde todos los elementos a la vez a través de la función Guardar para Web. Es muy conveniente.

Espero que este artículo te haya sido útil. Les deseo a todos buena suerte y éxito creativo.