Criação de Messageback simples com Big faces

[Brittus]

Saudações a todos.

Neste tutorial, pretendemos apresentar uma das formas possíveis de se criar imagens para utilização como mensagens de fundo, as Messagebacks.

Observe-se que devido ao grande número de imagens no passo-a-passo, precisei usar "spoilers".

Sem mais delongas, vamos ao tutorial.

1. Abra o Photoshop.

2. Crie uma nova imagem (Ctrl + N).

Spoiler

[close]

3. A nova imagem deverá ter o tamanho 544 x 416 pixels, e o Background deve estar transparente, conforme a imagem:

Spoiler

[close]

4. Selecione a ferramenta criar retângulo com as pontas arredondadas, como indicado na imagem, Depois crie um retângulo com as dimensões aproximadas às da imagem de exemplo.
Não se preocupe com a cor do retângulo.

Spoiler

[close]

5. Criado o retângulo, selecione PATH, próximo a aba das camadas.

Spoiler

[close]

6. Clique em "Load Path as a Selection" (transformar em seleção).

Spoiler

[close]

7. De volta a aba das camadas, crie uma nova camada (Ctrl + Shift + Alt + N), clique G e preencha com a cor desejada. Neste caso eu escolhi azul. Depois delete a camada do retângulo criado.

Spoiler

[close]

8. Duplique a camada (Ctrl + J) com o retângulo azul. Veja a imagem:

Spoiler

[close]

9. Preencha o novo retângulo com qualquer outra cor (Este processo é para podermos criar uma moldura, daí a necessidade de diferenciarmos os retângulos e de sabermos a ordem correta das camadas).

Spoiler

[close]

10. Ajuste o tamanho (Ctrl + T) do retângulo, como mostrado na imagem.

Spoiler

[close]

11. ATENÇÃO a este passo. Com a ferramenta varinha mágica (W), selecione o retângulo menor, depois clique na camada do retângulo maior e pressione Delete. O retângulo ficará como na segunda imagem abaixo.

Spoiler

[close]

12. Agora você vai adicionar um novo estilo de camada clicando no FX e selecionando Bevel and Emboss. Ajuste e dê um OK.

Spoiler

[close]

13. Em seguida, clique na camada com o retângulo que estava acima e arraste-o para baixo. Redimensione-o (Ctrl + T), para que não fique brechas. Mas cuidado para não deixá-lo maior que a moldura que você acabou de criar.

Spoiler

[close]

14. Com a camada do retângulo selecionada, vá novamente em FX e escolha Gradient Overlay e escolha um gradiente que vá de uma cor clara para uma escura (neste exemplo usei do azul para o preto).

Spoiler

[close]

15. Defina o estilo do gradiente para Radial, ângulo de 180º, escala 120-130,  ou da forma como achar melhor. Dê OK.

Spoiler

[close]

Caso você perceba alguma brecha, redimensione a imagem.

Spoiler

[close]

16. Crie uma nova camada (Ctrl + Shift + Alt + N) e posicione-a abaixo de todas. Clique segunda camada (neste caso, a do meio) e pressione Ctrl + E.

Spoiler

[close]

17. Agora vá em FX, selecione Pattern Overlay. Escolha um pattern a seu gosto, depois ajuste a opacidade (43)  e a escala (35). Você pode ajustar a seu gosto. Clique em OK.

Spoiler

[close]

18. Crie, mais uma vez, uma nova camada (Ctrl + Shift + Alt + N), e posicione-a abaixo de todas. Em seguida abra uma imagem com uma Big Face que você queira usar no seu projeto, selecione-a (Ctrl + A), copie-a (Ctrl + C) e cole-a (Ctrl + V). Redimensione-a (Ctrl + T) a seu gosto, lembrando de, após pressionar Ctrl + T, para não desfocar a imagem, mantenha pressionado a tecla Shift.

Spoiler

[close]

19. Pronto! Por fim, salve sua imagem no formato .PNG com o nome do personagem que você quer.

Spoiler

[close]

Eis o nosso resultado.

MESSAGEBACK simples com Big Face.

Spoiler

[close]

MESSAGEBACK simples sem Big Face.

Spoiler

[close]

De agora em diante, para criar as messagebacks para outros personagens, basta repetir o passo 18, deletando a imagem adicionada e adicionando outra.


Você ainda pode, com a devida permissão, utilizar messagebacks disponíveis aqui no Fórum, abrindo-as no Photoshop e fazendo apenas o passo 18. Lembre-se de dar os devidos créditos aos designers que fizeram as messagebacks, claro.

Spoiler

[close]

Espero ter ajudado.
Um grande abraço.

[1fusinato]

Que belo tutorial Brittus. Pode ser útil para muita gente que quer começar com o design! +GOLD por postar aqui.

[Tiaguu]

Muito bom seu tutorial Brittus, vai ajudar uma cambada de gente por ai.
Pelo que eu vi, o tutorial é bastante para iniciantes mesmo, pois a Messageback é bem simples, mais com alguns programas, da para fazer um bem legal.

[B.loder]

Eu vi o tutorial e achei... Complicado. Acho que algumas coisas ficaram bem complicadas sem necessidade, mas isso não deixou o tutorial de fato ruim. Não vi tudo porque fiquei com preguiça, mas acho que não comentou a técnica para que a messageback se encaixe na mensagem do maker, se o fez peço desculpas.

No geral gostei, mas acho que podia simplificar um pouco mais.

[Brittus]

Eu vi o tutorial e achei... Complicado. Acho que algumas coisas ficaram bem complicadas sem necessidade, mas isso não deixou o tutorial de fato ruim.

Obrigado, B.Loader, pela observação. É pertinente. Sei que esta é apenas uma das maneiras de se fazer. Preciso aprender outros métodos.
No maker, ao inserir o evento, basta exibir a imagem antes da mensagem depois deletá-la. Bem simples.
Depois vou preparar outro tutorial mostrando como inserir este tipo de messageback no maker.

MakerOusado e Tiaguu, muito obrigado. É justamente a partir destas anotações que procuraremos avançar e aprender mais um pouco.

Sinceramente, eu tentei facilitar ao máximo para quem está iniciando, mas confesso que tem momentos que faltam recursos expressivos e técnicos para facilitar ainda mais.

[B.loder]

Brittus, me referia ao método para garantir que a imagem ocupe o espaço mínimo para a mensagem aparecer de forma natural, quase como o messageback padrão do rpg maker.

[Brittus]

Ah, entendi. Basta ver as dimensões de uma messageback como as suas para XP, por exemplo,  que tem 640 x 480px (e que, diga-se de passagem, são muito belas); ou ainda outras que se pode encontrar na net. No caso do Ace, eu fiz com as dimensões 544 x 416 px e deu certo. Como se pode ver nas imagens. Mas, claro que não têm a beleza das suas, nem a mesma qualidade.