Como criar um banner de web animado no Photoshop

Sep 12, 2025
Como

Criar banners da Web não é o mais glamoroso de empregos do mundo, mas é algo que todo designer será obrigado a fazer em algum momento de sua carreira, provavelmente muitas vezes. Embora não existam regras duras e rápidas quando se trata de criar banners web, fica sem dizer que o tipo deve ser grande e a mensagem perfurada.

Como estamos animando isso também, sugiro que não mais de três slides ou elementos animados quanto as pessoas simplesmente não assistirão. Elementos piscando também podem ajudar a agarrar a atenção do espectador.

Make this animated banner for a website below…

Faça este banner animado para um site abaixo ...

Nos próximos passos, demonstrarei como configurar e criar um simples banner web animado que uma vez masterizado será uma brisa para se candidatar a qualquer novo emprego no futuro.

01. Configure seu documento

Lançamento do Photoshop, navegue para File & GT; Novo e selecione a Web no menu suspenso predefinido. A partir do tamanho suspenso Select Leaderboard ou se suas dimensões variam, escolha Personalizar e inserir manualmente as dimensões do pixel.

Com o SNAP para documentar os limites selecionados no menu Exibir, arraste os guias para encaixar para todos os limites do documento.

02. Adicionando elementos gráficos

Agora para colocar nossos elementos de design essenciais. No exemplo acima, colei no logotipo da T3 Square e como eu criei os guias poderiam redimensioná-lo e torná-lo encaixado para os limites do documento facilmente. Cole em um gráfico de seta que usaremos mais tarde e usar a ferramenta Tipo definir sua mensagem para o primeiro slide. Cole em qualquer imagem que você precisa e, em seguida, certifique-se de nomear todas as suas camadas apropriadamente.

03. Criando os slides secundários

Agora, basta duplicar sua camada de tipo, desligue a camada do tipo abaixo e digite a próxima etapa da mensagem, neste caso "à venda agora". Uma vez que você esteja feliz por você ter todos os elementos no lugar, mesclar quantas das camadas possíveis. Como o fundo, o logotipo e a imagem da capa permanecerão estáticos, podemos mesclar isso nos deixando com quatro camadas, o fundo, as camadas do tipo e a camada de seta.

04. Crie a animação do quadro

Agora, basta clicar na guia Linha do tempo na parte inferior da janela ou navegar para a janela & GT; Linha do tempo. Clique na seta pequena no meio da janela e selecione "Criar Animação do Quadro" e clique no botão. Agora desligue todas as camadas além da camada de fundo e da primeira camada de mensagem. Aplique um segundo atraso na estrutura do menu suspenso no pequeno quadro de animação. Agora, basta clicar no botão "Duplicate Skined Frames" na linha do tempo, mas desligue a primeira mensagem e ligue a segunda mensagem. Repita este processo para todas as camadas, terminando com a camada de seta.

  • Os 10 melhores logotipos de Jogos Olímpicos de todos os tempos

05. Faça o flash de seta e ajuste os horários

Para fazer o flash de seta, basta pressionar "Duplicar quadros selecionados" da linha do tempo e desligar a seta. Ajuste o tempo para 0,5 segundos e repita o processo ligado e desligando a seta no painel Camadas para que ele apareça como se estivesse piscando. Finalmente, você pode querer ajustar alguns dos horários até que você esteja completamente feliz. As pessoas têm vãos de atenção muito curtas, então não há sentido em ser lento com a taxa de quadros, mas ainda precisam ser capazes de lê-lo.

06. Salvar para web e dispositivos

Finalmente, navegue até "Salvar para Web" e selecione GIF no menu suspenso. Você também pode reduzir a qualidade ligeiramente aqui para obter o tamanho do arquivo. Quando estiver satisfeito, saia do GIF e simplesmente arraste-o para um navegador da Web para testá-lo.

Como - Artigos mais populares

Gerenciar o estado do formulário reagir com Formik

Como Sep 12, 2025

(Crédito da imagem: Matt Crouch) Bem-vindo ao nosso guia sobre como gerenciar o estado da forma de reagem com Formik..

Como kitbash em movimento com shapr3d

Como Sep 12, 2025

(Crédito da imagem: Adam Dewhirst) Shapr3d é uma ótima ferramenta para kitbashing. Isso ajuda a literalmente bate ..

Como resolver um breve design

Como Sep 12, 2025

[Imagem: Jack Renwick Studio] Se alguém sabe como lidar com um breve complicado, são os designers inteligentes do J..

Como projetar tipografia isométrica

Como Sep 12, 2025

Perspectiva é tudo no design. Se algo que você desenhou tem uma perspectiva perfeita, ajudará seu trabalho a parecer mais real..

Aprenda a cultivar folhagem com x-partículas

Como Sep 12, 2025

Modelando uma planta estática que tem a aparência de ter crescido in situ não é muito difícil, mas criar um equipamento que ..

Como desenhar reflexos metálicos

Como Sep 12, 2025

Quando a luz atinge um objeto metálico, ele pode refletir de volta em qualquer objeto próximo de uma maneira incomum. Normalmen..

Construa um site de comércio eletrônico a partir do zero

Como Sep 12, 2025

Ecommerce tornou-se tão popular nos últimos anos, é agora difícil imaginar um futuro sem ele. O poder da Internet fez conecta..

Como projetar uma promoção para uma marca imaginária

Como Sep 12, 2025

Ao projetar para uma marca, seja uma configuração uma ou uma inicialização que você está levando a liderança criativa, consistência em todos os pontos de toque é a chave. ..

Categorias