[Tutorial] Banner.Gif

Bem-vindo!

Ao se registrar conosco, você poderá discutir, compartilhar e enviar mensagens privadas com outros membros da nossa comunidade.

Inscreva-se agora!
Status
Não está aberto para novas respostas.

passionately

Hardcore
VIP
Entrou
Jun 25, 2017
Mensagens
5,199
Cubos
0
_sLlqZK7TeOCZiMN2gUlGg.gif
Oi amores,
estou trazendo um tutorial de banner.gif, já que muitos perguntam como se faz, espero que gostem!
<--------------><-------------->
Primeiramente, você precisará de fontes boas que combinem com o estilo de seu banner, procure AQUI.
Precisará também do Photoshop CS6 e do After Effects, então baixe o Photoshop clicando AQUI e baixe o After Effects clicando AQUI.
Abra o seu Photoshop, e vá em Arquivo >> Novo.
bHijvTZ1QaG-mvreqr0IwA.png
Agora escolha a largura e altura de seu banner, no meu caso será 450 de Largura e 150 de altura. Tirando isso as configurações tem que estar iguais as da print.
8OJ43JDnQQqsTewVCmXrMg.png
Clique em OK. Vá na ferramenta pincel
NMVVppA-Ru_oRMqsOz-veQ.png
clique nela e escolha o tamanho que quer.
vdiHUL5aS_G8AsT6L1Nkkg.png
Após isto, vá nas cores
uUnx4oJHQvCbKNoS8oLkEQ.png
e clique no primeiro quadrado (no meu caso o rosa), coloque a cor do fundo do fórum (181818) no espaço em branco e pinte a composição.
FtPRe8U_SbGdJT9uVN_UuA.png
yGcHPb1ZSoOmHIzXDwJb2Q.png
Até aqui beleza, agora dê sua decoração, vou colocar algumas coisas de fundo, no caso um brilho no fundo e um coração e alguns outros brilhinhos, tudo na cor rosa choque (lembrando que peguei esta fonte de flores do mesmo site que indiquei, é só ir nele e ir em DingBats > Diversas). E caso queiram os brilhinhos de fundo está nesta dúvida > ~~.
Ficou assim:
egoL2BCwSjqcFjKU0i8mBg.png
Agora vamos aplicar o texto. Vá na ferramenta de texto
dFvoBW5cTGeFOH2xMOUx2g.png
selecione a fonte desejada
eSe9npI7QUSTbzMTh5wr5w.png
e clique na composição e digite o nick/frase que quer.
YxXRdyndTAio3nmEh4ApuA.png
Caso queira somente isto, então vá em Arquivo >> Salvar Como... E salve na Área de Trabalho ou em outro lugar se preferir.
guz5j1-GTUS8xK0E_sG0hw.png
Vamos a parte do After Effects.
Abra seu After Effects, e vá em File >> Open Project.
kTbVVsBZR62ga-KzfhIEZQ.png
Caso você abra e esteja "Adobe After Effects Project" você muda para "All File Formats" e procura aonde está a sua PSD.
Lw14nj3qTPOlvx3hHx1P3g.png
Irá abrir uma janela, você coloca "Composition" no lugar de "Footage". E clica em OK.
hJnEa_GDQAWzBnQYG17WgA.png
Caso esteja sem nada não fique assustado, apenas clique em Project.
R0Y4mKsFQliMTiFfKuWSmw.png
Irá aparecer isso, você aperta duas vezes em "Composition".
cGza6fsPSd6Zz4-RvgPflA.png
Agora você irá transformar os textos em editáveis. Mas lembre, FUNCIONA SOMENTE COM TEXTOS, não adianta querer editar camada com aquilo que não dará.
5apwvz3TTP_stupK7v-y8g.png
Clica com o botão direito na camada do texto e vá em "Convert To Editable Text".
HALYuJDXQLKgJQW4qcQzQw.png
E ele ficará assim:
6jkNt9liTpK-VZaeHJwieg.png
PRESTE MUITA ATENÇÃO NESTA PARTE, PARECE SIMPLES PARA ALGUNS MAS PARA OUTROS PODEM OCORRER ERROS.
Os text preset's que irei usar são deste pack, mas também tem este pack então escolham.
Vou selecionar a camada, ir em Window >> AnimationKit.jsxbin.
J5RLmaaZTIu8VYLaIsPiZQ.png
Irá aparecer esta janela:
2iwvxFEfTkalavZ5gAVp6g.png
Você clica em START.
Irá abrir outra janela com todas as 1333 animações, você escolhe a que quer, e deixa o mesmo número de IN e OUT, e clica em "APPLY PRESET".
RP-SIb14SW6r38h3Xnk3oQ.png
Aí você verá que ficará assim
s8WFMDC9QYOw9mHUr5pQSQ.png
e para sua animação de texto aparecer você aperta 0 para renderizar e poder vê-la.
Caso queira colocar outro número para IN e outro para OUT não alterará em nada. (:
Bom, agora vamos a parte de salvar.
Vá em Composition >> Add to Render Queue.
S_PmfsrmSL634oDtgclvgQ.png
Vá em Output To >> e escolha aonde deseja salvar seu banner AVI. Logo após isto clique em "Render".
2wqVq1jER3_AeVM-tJsqCA.png
Apenas os que tiverem o Photoshop COMPLETO (eu deixei o link no começo do tutorial) poderão salvar assim como eu.
Vá no Photoshop, e vá em Arquivo >> Abrir...
2sGtGlxuQXGjMGs-U6NFrA.png
Abra seu banner, e se aparecer está janela
61nPy9EaRrSvEDD0AMN69Q.png
você somente clica em 'OK'.
Após isto, vá em Arquivo >> Salvar Para Web...
mpwi4x2uT4ybyrtJTIuMxg.png
E deixe as configurações iguais as minhas.
n8bfgQiaSQa4TphC8vFThA.png
E clique em Salvar...
E seu banner está pronto!
Upe ele neste site, recomendo.
Resultado final
afsfArU-SMC121V563SZeQ.gif
É isso, espero ter ajudado os que precisavam.
Atenciosamente,
[member=ySarinha].
 
Status
Não está aberto para novas respostas.

Users who are viewing this thread

Voltar
Topo