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

Criação de Messageback simples com Big faces

Iniciado por Brittus, 25/01/2013 às 21:35



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.

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

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.

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.
To Die Is To Find Out If Humanity Ever Conquers Death

Citação de: B.loder online 04/02/2013 às 20:31
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.

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.
To Die Is To Find Out If Humanity Ever Conquers Death

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.