Design de interface para o jogo, desenhe um pacote de ícones

Olá pessoal!

Sou Mikhail Kravchenko, designer de interface de jogos.

Este artigo é sobre como desenhar um pacote de ícones para o jogo. Abaixo você vê o resultado.

Fixamos os requisitos para o resultado

Portanto, uma tarefa sobre esse conteúdo passou para nós. No jogo, um evento começa - a invasão da raça alienígena em nosso planeta. Derrotaremos os invasores, vários objetos sairão deles e esses objetos precisam ser desenhados.

Antes de tudo, é necessário formular e fixar os requisitos para o resultado, este é o fundamento do nosso trabalho. Tendo esses requisitos diante de nossos olhos, com uma chance menor, não atrairemos o que precisamos, teremos muito mais entendimento mútuo com o cliente e a equipe, e também haverá algo para verificar o resultado do nosso trabalho.

Uma lista de requisitos deve ser compilada com base na descrição do problema e em suas próprias idéias sobre como resolvê-lo. Em seguida, você precisa ir ao cliente com esta lista e garantir que entendemos a tarefa da mesma maneira. Talvez a lista precise consertar alguma coisa. Como resultado, obtemos uma lista de requisitos para o resultado.

Aqui está um exemplo dessa lista:

• Os itens devem ser semelhantes a outros itens semelhantes de invasões passadas;
• Haverá 5 tipos de itens - anéis, pulseiras, broches, pingentes e pedras;
• Cada tipo de item terá três graus de raridade. Quanto mais raro o objeto, mais poder ele fornece;
• O grau de raridade do item deve, de alguma forma, ser mostrado visualmente;
• Além da raridade, as pedras têm 4 cores - azul, vermelho, amarelo e verde;
• Os itens saem dos soldados do exército invasor, portanto, eles devem ter os traços e cores característicos desses oponentes;
• São necessárias imagens no formato Tga, tamanho - 128x128 pixels.

Decidimos sobre os requisitos, agora você pode começar a trabalhar com referências.

Referências

Encontre objetos que já foram pintados para esses eventos. Precisamos desenhar na mesma direção, e esses objetos nos ajudarão a não nos desviarmos do caminho certo.



Além disso, devemos estudar os soldados do exército invasor. Nossos itens terão que ter alguns recursos em comum, por isso vale a pena coletar mais fotos com invasores e criar um design baseado neles.



Oponentes diferem em sua força - são comuns, médios e fortes. Você pode se afastar disso. Por exemplo, usar partes de oponentes fracos no design de objetos comuns e partes de oponentes fortes no design são mais raras.

Paleta

Nós precisaremos desenhar muitos ícones em um estilo; será muito mais conveniente trabalhar se fizermos uma paleta única e outras. processo de pintura para todos os itens. Se não fizermos uma paleta, mas escolhermos uma cor com uma pipeta a partir da referência, é provável que os objetos corroam.

Selecionamos as referências para as cores dos objetos que já estão no jogo. Nossos oponentes são uma raça de plantas, então a cor verde é bastante adequada. E como uma segunda cor, você pode tirar ouro. Abaixo você vê fotos com referências.



Agora você precisa coletar as cores das referências e torná-las uma paleta. Pegue a cor principal, ele
Ele está localizado aproximadamente no meio, entre as áreas claras e escuras do objeto, cores para locais claros e escuros, cores para realces e especialmente lugares escuros. E também cores para reflexos do ambiente. Acabou dois conjuntos de cores, um para a parte dourada e o segundo para o verde.



A preparação está concluída, prosseguimos para o esboço.

Esboço

No processo, tentaremos diferentes opções para o design de objetos e, quando obtivermos um resultado que nos satisfaça, iremos coordená-lo com o cliente. Desejos e sugestões chegarão do cliente, alguns deles nos ajudarão a melhorar o resultado, discutiremos e rejeitaremos outros. Algumas coisas em nosso design não serão totalmente adequadas e vários pontos precisarão ser corrigidos ou refeitos.

Ponto importante
Se fizermos imediatamente o trabalho com qualidade final, levará uma quantidade significativa de tempo. Então, é muito provável que nos sejam solicitados a corrigir ou alterar algo, e certamente não funcionará para fazer isso com facilidade e rapidez. Muito provavelmente você precisará gastar uma quantidade significativa de tempo e esforço novamente.

Portanto, esboçamos primeiro. O esboço leva um pouco de tempo e esforço, enquanto permite descrever em termos gerais qual será o resultado final. Isso significa que podemos, de maneira rápida e barata, passar por várias opções de design e, se eles nos pedirem para corrigir algo, também não haverá problemas.



Os esboços começam com um lineart. É melhor usar um pincel redondo com os parâmetros Opacidade e Fluxo na região de 30%, que variam dependendo da força que pressiona a caneta. Diante de nossos olhos, seguramos as partes dos oponentes que escolhemos para mostrar a raridade dos objetos, bem como as imagens de jóias que já estão no jogo. Estamos procurando um formulário adequado para objetos. No processo de tal pesquisa, você pode passar por várias opções, abaixo você vê um exemplo dessa pesquisa.



Se alguns elementos em seu design forem repetidos, faz sentido envolvê-los em objetos inteligentes. É provável que, com o tempo, você queira alterar algo neles, e corrigir um objeto inteligente é muito mais fácil do que percorrer todos os lugares em que o elemento é usado.



E agora o lineart para todos os objetos está pronto. Você pode prosseguir para a pintura. Colocamos em destaque as paletas e figuras preparadas de objetos de referência para flores.

Primeiro, você precisa colorir um item para garantir que a paleta atual permita o resultado desejado. E obtenha uma amostra, com base na qual podemos colorir todos os outros objetos.

Você não pode desenhar esse padrão em uma camada porque, neste caso, não conseguiremos pintar outros objetos da mesma maneira. Portanto, adicionamos cada cor da paleta em uma camada separada para ter um processo de pintura diante dos olhos e poder repeti-lo quando pintamos outros objetos.



É provável que o resultado que obteremos não seja adequado para nós e será necessário alterar ligeiramente as cores para torná-lo mais adequado. É bom que cada cor esteja em uma camada separada e você possa editar qualquer cor separadamente das demais. Se alterarmos as cores do objeto de amostra, não devemos esquecer de corrigir as mesmas cores na paleta.

Aqui está uma amostra para a pintura pronta, ela nos convém completamente e você também pode pintar todos os outros itens.



Criamos uma máscara na forma de todos os objetos para não deslizar pelas bordas, criar grupos separados para as partes dourada e verde do objeto e tornar o conteúdo desses grupos o mesmo que no objeto de amostra. A seguir, mostra o processo de pintar um item.



Também temos pedras no problema e elas têm cores diferentes - azul, amarelo, verde e azul. Para obter o resultado desejado, basta desenhar um conjunto de pedras, fazer três cópias, colocar uma camada com o modo de mesclagem de cores em cima delas e pintar o núcleo das pedras nas cores que precisamos. Você também pode colocar uma camada com sobreposição de sobreposição na parte superior da camada com o modo Cor e experimentar a pintura; o desenho dessa camada aumenta o contraste da imagem e a saturação da cor.



Aqui temos esboços prontos para todos os objetos e você pode prosseguir para a próxima etapa - aprovação do projeto com o cliente e os colegas.

Aprovação do projeto

Antes de mostrar os esboços para o cliente, você precisa de um local para corrigir o caminho pelo qual chegamos a essa decisão e mostrá-lo junto com os esboços. Quando esse caminho é visível para o cliente e os colegas, muitas perguntas desaparecem por si mesmas e gastamos muito menos tempo em explicações. O Figma, ou outro serviço online semelhante, é adequado para apresentar esse caminho.

Mostramos o esboço para o cliente. É provável que ele peça para corrigir alguns pontos, estaremos prontos para isso. Quando concordamos com o cliente, precisamos mostrar o resultado aos colegas e pedir que eles compartilhem suas opiniões sobre o resultado. Vale a pena fazer isso por várias razões.

Em primeiro lugar, os colegas podem perceber coisas nas quais não prestamos atenção. Por exemplo, uma vez eu desenhei um símbolo para uma nova classe e ela se encaixava bem na descrição da tarefa, mas um colega viu esse símbolo e disse que o símbolo individual é semelhante ao logotipo do serviço Target de maio e, por isso, parece bastante estranho. Pesquisei esse logotipo no Google e, por acaso, meu ícone é muito parecido.

Em segundo lugar, os colegas podem experimentar associações desagradáveis ​​ou estranhas com o assunto. E se essas associações surgirem em uma pessoa, elas podem muito bem surgir nos jogadores, e não é de todo lucrativo provocar emoções negativas neles.

Em terceiro lugar, alguém pode se lembrar de que já temos objetos semelhantes no jogo, e se você adicionar outro quase o mesmo, isso confundirá o jogador.

Ou seja, verificar o resultado com a ajuda de colegas nos ajuda a evitar alguns erros ou, pelo menos, reduzir as chances de ocorrência.

Um exemplo de trabalho com feedback de colegas

A seguir, é apresentado um exemplo de como trabalhar com os comentários dos colegas.

Comentário 01
A forma das pedras é quase a mesma de outra raça invasora.

Observamos todas as pedras e vemos que raças diferentes têm pedras de formas diferentes, e nossas pedras são realmente semelhantes às de outras raças.



Mudamos a forma das pedras.



Comentário 02
Essa forma do núcleo da pedra associa-se a algum tipo de tumor doloroso, o que torna o item não atraente.

Se essa associação apareceu em uma pessoa, pode-se supor que outras aparecerão. Algo mais precisa ser inventado.



Comentário 03
É necessário corrigir o núcleo da pedra do meio - é semelhante ao da pedra dos demônios.

Observamos as pedras da raça demoníaca, vemos que as pedras são muito diferentes e a versão atual é adequada, e o autor do comentário está errado.



Comentário 04
Existe uma proposta para aumentar a parte central da pedra, dependendo de sua raridade.

Parece lógico, vamos tentar.



Acabou muito bem, vamos deixar assim.

Comentário 05
O broche é muito parecido com um topo arrancado dos anéis. MB, eles precisam de algum tipo de substrato ou outra forma.

Compare itens.



Parece realmente que pode confundir uma pessoa, mudamos a forma da parte verde.



Comentário 06
Agora, o broche é diferente do anel, mas começa a parecer um amuleto. Você pode melhorar a diferença deles.

Compare objetos, reforce a diferença, tornando a peça de ouro mais maciça.



Ponto importante
Para editar os esboços mais rapidamente, você pode copiar um grupo com eles e recolhê-lo em uma camada, tecla de atalho - Ctrl + E. Faça as alterações na camada resultante e faça uma cópia do grupo. o processo de pintura para salvar para mais tarde. Será necessário quando você precisar desenhar objetos na qualidade final.

E assim aprovamos o esboço dos objetos - todos concordam com tudo e podemos prosseguir para a renderização final dos objetos.

Renderização Fina

A coisa mais importante nesta fase é observar uma única tecnologia. o processo de desenho para cada item. Nesse caso, todos os objetos serão desenhados da mesma maneira e nenhum será eliminado do estilo geral. Para acelerar o processo, você pode desenhar um vetor, na escala de 100% do necessário. Para exibir os formulários principais com uma caneta e criar uma camada por cima, transforme-a em uma Máscara de Recorte e pinte as áreas desejadas com um pincel macio. Tecla de atalho na Máscara de recorte - Ctrl + Alt + G. A figura abaixo mostra o processo de pintar parte do objeto.



Aqui estão todos os itens prontos e podem ser mostrados ao cliente e à equipe.



Provavelmente, haverá um mínimo de desejos e comentários, já que já concordamos com tudo na fase de elaboração.

Após a aprovação dos itens, você precisa salvá-los no formato correto. Eu recomendo marcar o documento com a ferramenta Fatia e atribuir um nome a cada célula. E salve todos os itens de uma só vez através da função Salvar para a Web. É muito conveniente

Espero que este artigo tenha sido útil para você. Desejo a todos boa sorte e sucesso criativo.