O TEMA DO FÓRUM ESTÁ EM MANUTENÇÃO. FEEDBACKS AQUI: ACESSAR

Tutorial: Criando icons para RMMV personalizados no photoshop

Iniciado por Thife, 14/05/2017 às 18:21

14/05/2017 às 18:21 Última edição: 15/05/2017 às 00:09 por Alisson
Antes de tudo queria deixar claro que não sei se estou postando na área certa do fórum, perdão se for a área errada  :T.T:

Criando icons para RPG Maker MV no Photoshop

A ideia desse tutorial é dar uma ajuda para quem quer personalizar um pouco seus jogos no RPG Maker MV, mas não entende muito de pixel art. É um tutorial relativamente simples e eu trouxe algumas ilustrações para facilitar o entendimento. Para começar, você vai precisar ter um programa como o Photoshop (ou outros programas similares com as mesmas funções que vou descrever aqui) e o arquivo de base que vou deixar em anexo. A ideia é permitir dar uma variada nos icons que vêm no RTP para você poder personalizar um pouco mais seu jogo. Eu, por exemplo, usei esse processo para criar esses icons para meu atual projeto.
Spoiler
[close]
Para quem se interessar vou deixar descritos abaixo dois métodos que podem ser bem úteis, um fazendo uso de fontes (nos que eu fiz acima eu usei a fonte Mage Script, mas você pode procurar uma que se encaixe mais no que você quer para seu projeto) ou de imagens PNG. A base é a mesma, então vamos começar por ela.

[box2 class=titlebg title=Criando a base do seu Icon]
Primeiramente você deverá baixar o arquivo que estou deixando em anexo e que serve de base para criar um icon com degradê de cor, similar aos que já vêm no RTP. Abra esse arquivo no Photoshop (nesse tutorial eu usei a versão portable) e aumente o zoom para 500% (ou outro valor, se preferir)  para facilitar a visualização do seu trabalho. Você vai se ver diante de uma tela parecida com a seguinte:
Spoiler
[close]
O que você fará em seguida é clicar com o botão direito do seu cursor na camada da sua imagem e, no menu que se abrirá, selecionar Opções de Mesclagem/Blending Options. Selecione a opção Sobreposição de Cor/Color Overlay e escolha uma cor de sua preferência. Ajuste o Modo de Mistura/Blend Mode para Sobrepor/Overlay e você terá algo parecido com a tela da imagem abaixo:
Spoiler
[close]
Caso você prefira, pode mexer na Opacidade/Opacity, diminuindo o valor, ou escolher o Modo de Mistura Cor/Color, se preferir. Clique em "Ok" e você terá a base do seu icon pronta. Se você souber usar as ferramentas do Photoshop, pode mexer no contraste e na saturação da imagem a sua vontade. De todo modo, a base está pronta, agora basta criar o símbolo que vêm por cima dessa base.
[/box2]

[box2 class=titlebg title=Criando o icon usando fontes]
O que você fará agora é acionar a ferramenta de texto e traçar uma caixa de texto em cima da sua imagem. Escolha a fonte que você preferir usar (no exemplo estou usando a Mage Script que imita o estilo de glifos mágicos e símbolos do tipo) e ajuste o tamanho da sua fonte. Não use nunca o tamanho acima de 28pt. O tamanho do icon é de 32x32 pixels e há uma margem em torno dele de 2px de cada lado, se você usar uma fonte acima de 28pt a fonte vai acabar ficando por cima dessa margem que o icon tem. Selecione também a cor da fonte. Eu preferi usar a cor branca, porque o padrão do RTP do RMMV é o dos símbolos serem brancos. Ajuste a camada/layer do texto no centro da imagem e você terá algo como isso:
Spoiler


Se você reajustar o zoom para 100%, você verá seu icon pronto dessa maneira:
[close]
Seu novo icon está pronto. Basta agora ir em Arquivo > Salvar Como (ou Archive > Save (file) as e salvar seu arquivo no formato PNG.
[/box2]

[box2 class=titlebg title=Criando icon a partir de um arquivo PNG]
Caso você prefira, você pode fazer esse mesmo processo usando uma imagem em vez de uma fonte. Para que esse método funcione você precisa escolher uma imagem no formato PNG com fundo transparente e, de preferência, monocromática. A imagem que estou usando nesse tutorial foi uma que encontrei no Google pesquisando por "silhueta de espadas" e é a imagem que segue:
Spoiler
[close]
Como podem reparar, essa é uma imagem BEM grande. Então o primeiro passo será você abrir essa imagem no photoshop e redimensioná-la. Após abrir o arquivo vá em Imagem > Tamanho da imagem... (ou Image > Image Size...) e, caso não esteja, mude o sistema de medida para pixels. Redimensione a maior dimensão da imagem (largura ou altura) para 28px. Dê OK e então selecione toda a imagem com a ferramenta de seleção. Copie (ctrl + c) a seleção e vá para a guia da sua base e cole (ctrl + v). Provavelmente a imagem vai ser colada automaticamente centralizada, mas caso isso não ocorra, ajuste-a no centro de sua base. Se você fez tudo corretamente, você já tem o icon pronto com o símbolo na cor preta, mas se você (como eu) prefere o símbolo na cor branca, clique com o direito na camada do seu símbolo, vá em Opções de Mesclagem/Blending Options e então selecione Sobreposição de Cor/Color Overlay. Escolha a cor que você prefira (eu, novamente, escolhi a cor branca, e mantenha a Opção de Mesclagem/Blend Mode como Normal. Se você seguiu todos os passos corretamente, você terá algo como isso:

Spoiler


Se você reajustar o zoom para 100%, você verá seu icon pronto dessa maneira:
[close]
Seu novo icon está pronto. Basta agora ir em Arquivo > Salvar Como (ou Archive > Save (file) as e salvar seu arquivo no formato PNG.
[/box2]

Para deixar o novo icon disponível pra seu projeto, você deverá usar algum programa de edição de imagens a sua escolha (o próprio Photoshop dá conta disso ou mesmo o Photofiltre e até mesmo o Paint), abrir então o arquivo de icons do seu projeto e colar nele o novo icon, ajustando-o adequadamente a sua grade em um dos espaços vazios. É basicamente isso, pessoal, espero que este tutorial seja útil para alguém :XD:

[Anexo excluído pelo administrador]