Design de banner da Web com o Adobe Photoshop e o Illustrator

1. Introdução: É hora de criar alguns banners legais para a web. Vamos. Martin, tenho mais de 20 anos de experiência como designer gráfico, ilustrador e instrutor certificado pela Adobe Trabalhei com empresas como BBC, Disney, Google, Ikea e mal posso esperar para compartilhar minhas melhores práticas com Este é um curso prático simplificado com foco em um projeto de design da vida real Eu explicarei tudo passo a passo e você receberá todos os arquivos de exercícios para acompanhar. Caso você prefira não me copiar. Você também pode acompanhar meu fluxo de trabalho usando ativos alternativos fornecidos e criar algo completamente exclusivo que possa ser exibido em seu portfólio criativo Tenho certeza de que este curso o inspirará a criar algo incrível. Começaremos aprendendo alguns termos importantes da publicidade interativa, como CTR, mutações de banners, proporções comuns, tamanhos e formatos de arquivo preferidos Em seguida, entraremos no photoshop e montaremos nosso primeiro banner usando imagens, formas vetoriais e tipos Vamos reutilizar essa primeira composição para as variações adicionais de banners e aprender a usar pranchetas e objetos inteligentes Por fim, criaremos um banner animado dinâmico usando painel da linha do tempo do Photoshop e o recurso de animação de quadros Além de todo o material técnico, também abordaremos algumas teorias importantes do design gráfico que você poderá aplicar em qualquer um de seus futuros projetos criativos. Você pode participar deste curso sem nenhum conhecimento prévio em design gráfico, ilustração ou aplicativos DOB Mas para concluir o projeto, você precisará acessar o DOB Creative Cloud e o computador desktop ou laptop Mas agora é hora de começar a criar, então nos vemos na próxima lição. 2. Fluxo de trabalho de banners da Web: Estaremos produzindo alguns banners legais na web. Alguns deles serão estáticos, mas, no final, também criaremos um banner animado. Começaremos com nossa imagem de herói, que geralmente é o formato paisagem. Em seguida, criaremos mutações a partir disso, porque é muito comum que você precise produzir diferentes versões ou variações de proporção O segundo que criaremos será um formato quadrado. Em seguida, também criaremos um formato de retrato. Em seguida, prepararemos três quadros para a versão animada. Então, esse é o quadro um a três, que terminará em um documento separado, onde aprenderemos como usar o painel da linha do tempo e gerar arquivos gif animados Para este projeto, passaremos principalmente tempo no photoshop. No entanto, em um ponto, mudaremos para o Illustrator apenas para criar alguns elementos vetoriais que podemos usar em nossas composições e para adicionar um pouco de sabor e apimentar Aqui, novamente, você terá a opção de escolher entre as imagens com as quais deseja trabalhar. Eu escolhi duas dessas fotos. Mas se quiser, você pode até encontrar imagens completamente diferentes para trabalhar. Novamente, você pode me seguir passo a passo e recriar exatamente o mesmo design ou ser um pouco mais criativo, experimentar e explorar suas próprias ideias Então, espero que você esteja animado para começar, porque no próximo vídeo, reuniremos primeiro as imagens e os textos necessários para nossos banners 3. Como preparar imagens: Decidi trabalhar com essas duas imagens e esses dois treinadores, principalmente porque adoro suas cores. Fui especialmente inspirado pela cor do Nike Trainer à direita e também no belo cenário azul que temos naquela foto e que eu realmente vou usar para meus banners. Então, para começar, teremos que fazer uma seleção do inverso porque temos dois separados de seu fundo original. Eu tenho essa imagem selecionada e vou para o menu Selecionar e apenas escolho um assunto novamente, porque temos alta diferença de contraste entre o primeiro plano e o plano de fundo. Esta é uma seleção muito rápida e fácil. E tudo o que temos que fazer é transformar isso em uma máscara clicando no ícone de máscara aqui na parte inferior do painel Camadas. E, em seguida, transforme essa coisa toda em um objeto inteligente que manterá ou reterá a qualidade da imagem original. Então, vamos apenas converter isso em um objeto inteligente. Isso é especialmente útil quando você está trabalhando em banners porque você acaba criando tantas variações diferentes em tamanhos diferentes. E você não quer acabar tendo detalhes pixelados depois de ir e voltar redimensionando suas imagens suas. Então, vamos fazer o mesmo com a outra imagem aqui à direita. Novamente, clique com o botão direito do mouse sobre isso e converta-o em um objeto inteligente. Aqui não teremos que fazer uma seleção porque eu gostaria de usar essa linda sombra que temos nesta foto e também a cor de fundo. Então, agora que os temos prontos, vamos criar um novo documento. E vou configurar isso para um projeto web. Então eu escolho Web, que configurará automaticamente o novo documento como uma placa de arte, e usarei o seguinte tamanho, 1280 por 600. Observe que há a pequena caixa de seleção para quadros de arte que eu recomendaria manter neste projeto em particular. E assim que clicarmos em Criar, ele criará um novo documento para nós. Deixe-me apenas diminuir um pouco. E você já pode ver que dentro do painel de camadas em vez de uma camada de fundo, agora temos um quadro de arte, o von Lee ou grupo. Na verdade, é um pouco diferente de um grupo de camadas, mas você pode considerá-lo semelhante a isso. E atualmente não temos nada neste quadro de arte. Então, vamos trazer as imagens que preparamos. Primeiro. Largue isso aqui, e podemos ver que isso é enorme, então teremos que torná-lo menor. Mas agora eu posso fechar o documento original. E também copiarei esse objeto inteligente. Posso até usar o Comando ou o Controle C e, em seguida, Comando ou Controle V para colá-lo. Vamos fechar novamente o documento original. Não temos que salvar isso. Agora podemos selecionar essas duas camadas. E com a ferramenta Transformação Livre, que é Comando ou Controle T, podemos torná-los menores. Então agora eu tenho o NYC no topo, mas assim que eu mover a camada inversa por cima, podemos ver que realmente temos uma boa seleção aqui. Então, poderemos colocar essas duas imagens em uma placa de arte facilmente. Agora, para evitar que o fundo branco apareça, também vou adicionar uma camada de fundo sólida. Isso é da opção de ajustes, cor sólida. E eu vou clicar no fundo do Nike Trainer para provar essa cor azul. E dessa forma teremos cores de fundo infinitas, por isso não estaremos restritos às bordas dessa outra imagem. Agora, em primeiro lugar, vou me certificar de que esses sapatos parecem realistas em termos de tamanho em comparação entre si. E eu vou começar a girá-los já. Então eu acho que isso pode estar em um ângulo e o inverso já está em um ângulo divertido. Só vou torná-lo um pouco menor. Mais uma vez, aprenderemos mais sobre objetos inteligentes mais tarde. Mas, por enquanto, lembre-se que sempre que você trabalha com objetos inteligentes, você não precisa se preocupar em perder qualidade da imagem ao redimensionar camadas. Então, algo assim eu sinto que será uma boa composição, bastante dinâmica. Então, temos duas cores contrastantes, mas também ângulos contrastantes. E não tenha medo de recortar imagens em suas composições, seja para impressão ou web, se você encontrar o lugar certo para recortá-las, isso pode fazer com que pareça emocionante e interessante. Lembre-se, conversamos muito sobre cortar imagens esta semana. 4. Como preparar elementos de texto: Em seguida, vamos trazer os elementos de texto. Para isso. Vou usar essa fonte que incluí nos arquivos de exercícios E também no quadro com as imagens, você pode encontrar um link para a fonte original. Então esta é a fonte chamada velocidade A4, e vou digitar uma grande venda e trazer isso aqui. Vamos deixar isso um pouco menor. E por enquanto não vou definir isso em um ângulo. Basta mantê-lo reto e duplicá-lo com Alt ou Option, clicar e arrastar e digitar. Em todos os treinadores. Isso pode ser menor. Esta é a cópia secundária. E para isso, vou usar duas novas cores que podemos apresentar. Então, antes de tudo, selecione tudo e mude a cor para este azul mais escuro ou talvez algo do próprio treinador. Assim, funcionará se você quiser usar os mesmos valores exatos. Esses são os valores RGB, 8361. Você pode digitá-los se quiser. Só vou clicar em Ok. E então, para o amarelo, vou escolher um amarelo muito intenso. Novamente, você pode ver os valores aqui, 55 a 520. Clicaremos em OK e aceitaremos essas alterações clicando na fita na parte superior. E por último, mas não menos importante, também precisaremos do pequeno adesivo dizendo até 50%. Então, para isso primeiro, vou desenhar uma elipse. Então, há a ferramenta elipse. E vou mudar a cor de preenchimento para branco. Não precisamos da cor do traçado e temos que ter certeza de que isso está definido para dar forma. E então podemos começar a desenhar e garantir que você mantenha pressionada a tecla Shift enquanto desenha. Isso garantirá que seja um círculo perfeito. Por enquanto, vou colocar isso em algum lugar aqui. Antes de adicionar o texto. Vou mudar a cor agora para preto. E a fonte ou o tipo desta vez será reitor. Itálico, 2014, itálico. Eu também vou reduzir o tamanho, talvez 200 pontos, e então basta clicar em algum lugar aqui na tela. Assim, podemos digitar até então pressionar Enter e 50%. Agora podemos realmente ver esse texto, mas vou movê-lo para cima. E percebi que essa não é a fonte que eu queria usar. Então, em vez de Italica, quero usar o itálico extra negrito. Isso vai ser mais impactante, mas o até não precisa estar em todas as capitais. Então eu quero que isso seja minúsculo, o que podemos acessar acessando as opções adicionais de formatação de caracteres clicando neste ícone aqui na barra de opções e, em seguida, remova todas as maiúsculas caso você tê-lo ligado. Além disso, gostaria ter menos espaço entre essas linhas, que também podemos encontrar aqui no painel de caracteres. Então isso é chamado de líder. E eu vou arrastar para movê-los mais perto um do outro, as duas linhas. E então eu também vou tornar o texto menor. Esse é o tamanho do texto para algo assim. E depois, tendo todos esses selecionados, posso alinhá-los ao centro deles. E agora podemos usar a ferramenta Mover e simplesmente com o Comando de Transformação Livre ou Controle T. E, em seguida, arrastando-a para baixo, podemos alinhá-la a essa forma de adesivo. Também vou adicionar um pouco de ângulo aqui apenas para torná-lo um pouco mais interessante e também reduzir um pouco ainda mais o espaço entre as duas linhas. Sinto que podemos tornar os 50 por cento um pouco ainda maiores. Mas então também teremos que ter um pouco mais de espaço entre as duas linhas, algo assim. Acho que parece bom. Só estou usando as teclas de seta do teclado para posicionar isso. Então podemos até agrupar essas duas camadas juntas porque teremos que movê-las sempre juntas. Então isso é Comando ou Controle G. Uma vez que você tenha as duas camadas selecionadas, e eu direi apenas 50% de adesivo, apenas para manter as coisas arrumadas antes de seguirmos em frente, também nomearei as camadas da imagem. Então isso vai ser converso, e isso é NYC. E agora temos tudo pronto para continuar e criar alguns elementos vetoriais no Illustrator. No próximo vídeo. 5. Como adicionar elementos vetoriais: A razão pela qual precisamos de alguns elementos vetoriais nessa composição é que sem eles, parece um pouco vazio. Há muito espaço negativo e não há muita coisa acontecendo. E para manter as coisas mais dinâmicas, essas formas geométricas que criaremos ajudarão a adicionar algum impulso e energia aos nossos banners. Então aqui estamos no Illustrator. E antes de tudo, vou usar a ferramenta de linha e desenhar uma única linha reta mantendo pressionada a tecla Shift. E vou aumentar a espessura sobre isso talvez para cinco pontos. Em seguida, vá para o menu Efeito e escolha entre distorcer e transformar o recurso chamado ziguezague. Cada efeito que você aplica no Illustrator se torna efeito ao vivo, o que significa que você sempre pode voltar e fazer alterações nas configurações. Portanto, não se preocupe em configurá-los exatamente do jeito que eu faço. Você sempre pode voltar e experimentar e ver o que você prefere. Mas vamos aumentar um pouco o tamanho aqui. E então também aumentarei os cumes. Talvez o tamanho possa ser um pouco menor. Vamos apenas adicionar mais cumes, algo assim. Acho que parece bom. Então, podemos simplesmente clicar, OK, e depois vamos duplicar isso usando a ferramenta de seleção alt ou opção, clicar e arrastar. E se você tiver o painel de aparência aberto, verá o efeito em ziguezague lá. E isso é o que quero dizer com efeitos ao vivo. Você pode simplesmente desligá-lo e, em seguida, o leão volta direto. Uma vez que o ligo novamente, ele volta para a configuração em ziguezague que criamos. É claro que ainda podemos mudar a cor e a espessura do traçado, se quisermos. Mas para esta segunda versão, o que eu quero fazer é voltar ao efeito em si, o que podemos fazer clicando na palavra ziguezague aqui no painel de aparência. E em vez de legista, vou definir isso para suavizar, o que criará essa bela linha ondulada. E para isso, vou apenas ajustar as coisas um pouco. Vamos precisar de menos cumes aqui e talvez aumentar o tamanho apenas um pouco, algo assim. Talvez um pouco menos de aço rígido. Vamos clicar. Certo, e agora temos esses dois elementos prontos. É hora de criar uma pequena cruz, o que faremos novamente usando a ferramenta de linha. Desta vez vou desenhar uma linha verticalmente e aumentar a espessura para até talvez cerca de 30 pontos. E, em seguida, clicando nas configurações do traçado, alterarei a tampa para arredondá-la. E então vamos criar uma cópia disso, clicar e arrastar e, em seguida girá-lo enquanto mantém pressionada a tecla Shift, agora temos uma versão horizontal também. Então podemos alinhá-lo a essas outras formas. Portanto, certifique-se de que ele esteja perfeitamente centrado. Eu só usei e confiei nos guias inteligentes para conseguir isso. Agora vamos deixar isso um pouco menor. Estou segurando a tecla Shift, arrastando-a para baixo. E talvez também o tamanho do traçado possa ser menor e voltaremos a essa forma em breve. Mas também quero criar um elemento do tipo chevron para o qual, novamente, começo com a ferramenta de linha, basta desenhar uma linha reta e depois mudar para a ferramenta caneta pressionando P no teclado ou clicando neste ícone na barra de ferramentas e clique aqui no centro, adicionando um ponto de ancoragem. Em seguida, usando a ferramenta de seleção direta, podemos arrastar isso para fora, talvez arrastá-lo para algum lugar por aqui. Agora, como temos tampas redondas, também seria bom ter junções redondas. Acho que isso parece muito melhor. Estamos prontos. Vamos reduzir a espessura sobre isso. E então, ao clicar e arrastar Alt ou Option, posso criar uma duplicata e, em seguida pressionando Comando ou Controle D algumas vezes, podemos criar algumas cópias adicionais. Talvez um a menos seja suficiente. Tudo bem, então esse também é outro elemento com o qual trabalharemos. E, finalmente, vou usar a ferramenta Elipse e desenhar um círculo perfeito mantendo pressionada a tecla Shift e, em seguida, clique nas configurações do traçado e ative a opção de linha tracejada. Aqui, podemos definir o traço para 0 e , em seguida, a lacuna pode ser talvez dez pontos ou mais. Agora posso ver que precisaremos de mais espaço. Posso clicar nesta seção onde especificamos o tamanho da lacuna. E então eu posso usar a seta para cima no teclado para aumentá-lo e vê-lo atualizando ao vivo na forma. Sinto que 20 lacunas neste caso funcionarão. E agora vou copiar essa forma com comando ou controle C e depois colar no lugar com Comando ou Controle F. Essas opções você pode encontrar aqui. Então, isso é colar na frente ou colar no lugar, o que você preferir usar. Mas então eu também redimensionarei essa nova cópia mantendo pressionadas as teclas Alt ou Option e Shift juntas e podemos fazer um círculo menor como esse. Mas como estamos transformando isso, você também precisa garantir que a espessura das linhas não esteja mudando. Esta é uma configuração que você pode encontrar no painel de transformação. Lá, você encontrará Escala, Traços e Efeitos. Certifique-se de que está desligado. Isso é algo que você pode encontrar, mais uma vez no painel de transformação. Apenas certifique-se de que, dentro disso, você tenha as opções de exibição selecionadas para poder ver essas configurações. Agora que eu tenho essa segunda versão, vamos repetir os últimos passos novamente. Comando C ou Controle C para copiar e, em seguida, Comando ou Controle F para colar no lugar e, em seguida, Alt e Shift para arrastá-lo para baixo até termos o próximo círculo já. E observe que os círculos não estão alinhados perfeitamente aqui. E isso é devido a uma configuração no recurso de linha tracejada, precisamos alternar para essa opção, que alinhará os traços dois cantos e as extremidades do caminho. Então, uma vez que eu clicar nisso, ele os distribuirá bem ao longo dos círculos. Então, podemos repetir novamente essas etapas. Basta criar mais um círculo por lá. Agora, se eu quiser que seja muito específico, posso ter certeza de que a distância entre esses círculos seja igual. Mas, por enquanto, só estou tentando olhá-lo e aproximá-lo aproximadamente de um espaçamento uniforme. E também temos a ideia elementar mais complexa. Mas para seguir em frente daqui, eu realmente criarei uma cópia de cada um deles porque quero manter um original que possa ser editado facilmente que tenha configurações de traçado de aço e os efeitos disponível no painel aparência. Mas estes em seu estado atual não serão transferidos bem para o Photoshop. 6. Como preparar elementos vetoriais para o Illustrator: Se eu selecionar as divisas, por exemplo, e eu as copiei, Isso é Comando ou Controle C. E então eu pulo para o Photoshop e uso Command ou Control V. Ao colar, quero usar a opção Camada de Forma, que é o melhor para trabalhar com esses elementos vetoriais simples. Quando eu clico em Ok, isso vai estragar meu bom design chevron. Então, para evitar esse problema aqui no Illustrator, vou duplicar esse grupo de elementos. Em seguida, vá para o menu Objeto e escolha Expandir nesta caixa de diálogo, basta clicar em OK, você não precisa alterar nenhuma configuração. Esta segunda versão agora está pronta para entrar no Photoshop. E a razão pela qual mantive o original, porque aqui ainda temos os valores de traçado. Então, se eu quiser, sempre posso aumentar, diminuir a espessura dessas linhas e até mesmo alterar configurações do traçado enquanto essas agora são formas preenchidas. Portanto, é muito mais difícil fazer alterações neles. Mas a vantagem é que, se eu agora copiar isso e entrar no Photoshop, colando-o como uma camada de forma. Agora, ele realmente aparece da maneira que queremos que ele o use. E a melhor coisa de tê-lo como uma camada de forma é que posso facilmente mudar sua cor clicando duas vezes na miniatura, na camada e, em seguida, escolhendo qualquer cor do design. E vamos diminuir isso com a ferramenta Transformação Livre e colocá-lo em algum lugar aqui ao lado por enquanto. E vamos voltar para o Illustrator e garantir que todos os outros elementos estejam prontos para serem movidos para o Photoshop. Então, vamos começar com essa linha aqui. Vou duplicá-lo, alterar a opção, arrastar e, em seguida, ir para o menu Objeto para este 1 primeiro precisamos usar Expandir Aparência. Porque lembre-se de que o efeito é salvo no painel de aparência, mas isso só expandiu o efeito, mas ainda é um traço, que então precisamos expandir novamente. Agora isso está pronto para ir para o Photoshop. Então, vamos copiá-lo e colá-lo como uma camada de forma. Vou novamente colocá-lo aqui no topo. Por enquanto, vamos repetir o mesmo para essa linha ondulada. Mais uma vez. Objeto Expandir Aparência e, em seguida, Expandir o Objeto e depois copiar e colar como uma camada de forma, podemos fazer a mesma coisa para esses círculos. Mais uma vez. Primeiro dupliquei, depois vou para Object, Expandir Aparência. E mesmo que não houvesse efeito aqui, tínhamos linhas tracejadas que precisavam ser expandidas dessa maneira primeiro e depois expandi-las completamente. Transformando-os em um grupo de pequenos círculos, não seremos mais capazes de ajustar nenhum traçado e coisas. Mas, mais uma vez, a vantagem é que podemos simplesmente copiar isso e colá-lo no Photoshop. E lá temos nosso adorável elemento pronto? Vou manter isso aqui no lado esquerdo. E eu realmente gostaria de ter outra versão disso. Então, vou apenas abrir algum espaço e copiar este grupo mais uma vez e copiar este grupo mais uma vez e pressionar Shift X aqui no Illustrator para trocar a cor de preenchimento para se tornar a cor do traçado e talvez aumentar a espessura dos traços, que fazem com que isso pareça um pouco diferente quando agora podemos movê-lo novamente para o Photoshop. Mas lembre-se antes de mover isso para o Photoshop, vamos expandir isso. Mais uma vez, você não pode ter as configurações de traçado entrando como camadas de forma no Photoshop. Então, agora que fizemos a expansão, podemos colá-la e ela aparecerá exatamente como eu queria. E por último, mas não menos importante, vamos também fazer uma cópia dessa forma aqui e depois ir para Object, Expandir. E então vamos criar mais uma cópia dela. E usando o painel Pathfinder, podemos unir essas formas clicando neste ícone aqui. E se você não vir o painel pathfinder, basta ir ao menu Janela, você poderá abri-lo a partir daí. E depois que tivermos essa versão em que unimos essas formas, agora podemos pressionar Shift X para novamente, trocar as cores. E agora temos um tamanho de traçado que podemos ajustar. E eu acho que isso parece bom. Agora, novamente, podemos expandir isso para garantir que possamos movê-lo para o Photoshop. Então, vamos mover este 1 primeiro, colá-lo como uma camada de forma e, em seguida, o último, novamente, copiar e colar como uma camada de forma. Então agora temos todos os elementos e, na verdade, há apenas um elemento que eu também posso criar aqui diretamente no Photoshop com muita rapidez e facilidade. E como acontece com a ferramenta elipse, vou desenhar um anel simples. Sem cor de preenchimento, apenas traço branco. E vou aumentar a espessura. E eu vou simplesmente desenhá-lo aqui, mantendo pressionada a tecla Shift. E sempre podemos ajustar o tamanho do traçado arrastando isso para cima e para baixo. Provavelmente algo assim. Vai funcionar. Então, se você realmente quiser, tecnicamente você pode recriar todas essas formas diretamente aqui no Photoshop. Mas levará muito mais tempo e seria muito mais difícil do que fazê-lo no Illustrator. Não se esqueça que isso é o que vai fazer você um designer gráfico profissional, que você está sempre escolhendo a maneira mais eficaz criar algo e utilizar cada aplicativo da Adobe. Partes específicas do fluxo de trabalho. Não se preocupe se você sentir que não conseguirá decidir essas decisões por conta própria e escolher o aplicativo certo sempre para a tarefa certa. Porque no final deste campo de treinamento e depois passar por 12º grandes projetos, você terá uma ideia muito melhor e ficará muito mais confiante em decidir quando mudar e para qual aplicativo. Mas agora que temos todos os nossos elementos prontos, no próximo vídeo, podemos criar essa primeira composição para nossa paisagem e banner. 7. Como criar o banner principal: É hora de criar uma composição dinâmica de alta energia usando todos esses elementos que temos aqui. E uma técnica que ajudará você a adicionar mais impulso ao seu design é utilizar algumas diagonais. Então, para isso, vou selecionar o texto antes de tudo, ambas as camadas, a grande venda e os treinadores antigos. E usando a ferramenta de transformação livre, vou digitar o ângulo de rotação, que neste caso será menos 20, e pressione Enter e Enter novamente para aceitar essa transformação, nós também pode selecionar nossas linhas VV e ziguezague e mais uma vez, usar a ferramenta de transformação livre e digitar também menos 20. A propósito, se eu apenas digitasse 20, isso seria rotação no sentido horário, enquanto menos 20 cria rotação no sentido anti-horário. E você pode perguntar, por que eu decidi usar esse ângulo? Bem, antes de tudo, se você tiver um texto que já está em ângulo ou itálico, como essa fonte, geralmente ficará melhor indo para o topo do seu design e não vai para baixo. Mas mesmo com textos normais que não estão definidos na Itálica, sempre parece um pouco mais positivo angulá-lo nessa direção em comparação com tê-lo do outro lado. Vou mostrar a vocês, que parece um pouco negativo porque o texto está diminuindo em vez de ir bem para cima. Claro, isso realmente depende da composição, do que você quer alcançar. Mas neste caso, acho que isso vai funcionar bem. Agora vamos criar algum espaço. E, a propósito, sempre que você tiver o recurso de prancheta ativo, você pode mover elementos para fora da placa de arte e ainda ter acesso a eles. Observe como eles são colocados também fora do quadro de arte aqui no painel de camadas. Gostei muito de trabalhar assim quando tenho muitos elementos. Assim, podemos arrastá-los para fora e trazê-los de volta quando soubermos onde queremos colocá-los. Então, vamos colocar essa linha em ziguezague, talvez em algum lugar por aqui. E vou mostrar um atalho muito útil usando a ferramenta de pincel, posso Alt ou Option clicar nesta cor que temos no texto. Agora que está definido como nossa cor de primeiro plano, posso usar Alt ou Option Backspace para aplicar essa cor ou preencher essa cor em nossa camada de forma vetorial selecionada atualmente. Também podemos fazer o campo v, a cor de fundo, que atualmente é branca. Então isso é Command ou Control Backspace. E com esses dois atalhos, é tão rápido e fácil mudar rapidamente as cores das suas camadas. Então, vamos usar um azul aqui, mas aqui usaremos uma versão branca. E primeiro, antes de ajustar as outras formas, só precisamos ter certeza de que nosso texto está definido no lugar certo. Então, queremos ter certeza de que é legível. Sinto que tem um bom contraste por aqui. E eu gosto muito de como o cadarço entra entre as duas palavras. E então podemos ter todos os treinadores por baixo dele. Mas não precisa ser tão grande. Então, vou usar a ferramenta de transformação livre, apenas torná-la um pouco menor, algo assim. Mas, para criar um pouco mais de interesse, já que temos isso como uma camada separada, vou colocar isso realmente embaixo do inverso, que fará parecer que veio por trás da primeira linha de texto e, em seguida, ele vem na frente da segunda linha de texto. Então, estamos adicionando alguma profundidade e interação aos nossos elementos, o que ajudou a criar uma composição mais emocionante ou envolvente. E agora podemos mover essa forma para cá. E então a linha em ziguezague pode descer em algum lugar aqui. Mas isso pode ficar atrás do sapato novamente. Algumas formas podem estar na frente, outras podem estar atrasadas. Agora também vamos fazer isso um pouco menor. E então, novamente, da mesma forma que a linha em ziguezague, usarei mesma forma que a linha em ziguezague, outra cópia da mesma camada e apenas definirei em azul. Observe como eu mantenho os detalhes de contraste mais altos, como as linhas brancas mais próximas dos textos reais que o título ou a mensagem principal. Embora eu use detalhes de contraste mais baixos mais próximos das bordas, isso ajuda a direcionar os olhos dos espectadores e garantir que eles se concentrem na mensagem central em vez de distraí-los e ter detalhes competindo sua atenção em todo o lugar. 8. Como finalizar o banner principal: Agora vamos mover essas cruzes para a composição. Vou usar um desses aqui no canto superior esquerdo, só vou deixar isso menor aqui, não me importo de usar um pouco de branco porque este é um detalhe muito pequeno. E então eu vou adicionar outro aqui. Isso eu vou definir para azul, e vou adicionar outro azul talvez em algum lugar por aqui. E então vamos trazer essa outra versão da cruz, que podemos ritmo talvez em algum lugar aqui. Eu posso mover essa linha um pouco para cima, posso tornar isso um pouco menor. E então vamos duplicar isso mais uma vez, movê-lo para cá. E podemos definir isso também como azul ou também podemos reduzir sua opacidade para que possamos mantê-lo amplo. Mas pressionando três ou quatro no teclado, podemos reduzir a opacidade rapidamente para 30 ou 40%. Novamente, essa é uma maneira de brincar com o contraste, e nós apenas usamos esse elemento aqui mais para preencher esse espaço vazio. Mas não queremos distrair muito o espectador dos treinadores. E da mesma forma que fizemos antes, vamos trazer os detalhes da Chevron também. Vou girá-lo 90 graus para baixo. Coloque-o em algum lugar aqui, novamente, usando a versão de alto contraste perto do título e realmente direcionar o olho do espectador para a mensagem principal do que duplicar isso, eu posso transformá-lo ao contrário, talvez aumente o tamanho dele um pouco. E então podemos definir isso para a cor azul mais escura e talvez apenas movê-lo um pouco mais para a borda. E então podemos ter outra versão disso novamente, girada, reduzida em tamanho e preenchendo uma forma aqui. Pode até vir na frente e se sobrepor um pouco. Este treinador assim. Agora vamos usar esses círculos. Vou colocar isso aqui para trás. O inverso, aumentará o tamanho disso e reduzirá a opacidade para 30%. E então podemos usar o outro aqui no canto inferior direito. E eu realmente mudarei a cor disso para amarelo ou backspace para preenchê-lo rapidamente com essa cor. E finalmente, temos nosso círculo, que vou colocar aqui na parte inferior, preencher isso com azul. Mas neste caso, não podemos usar o atalho, pois isso foi criado aqui no Photoshop e ele está usando um atributo de traçado, só precisamos mudar a cor da barra de controle. E então vamos duplicar isso mais uma vez. Coloque-o em algum lugar lá. Ele usa o tamanho um pouco. E, mais uma vez, usando a ferramenta de seta preta, veremos as configurações para as cores e podemos alterá-las para amarelo, novamente, mais perto do título, temos a cor de contraste mais alto por deixar a parte inferior temos a versão de contraste inferior. E então vamos fazer mais um círculo aqui à direita também. Pode torná-lo um pouco menor, talvez aumentar a espessura do traço, configurá-lo para branco, mas também reduzir a opacidade para 30%. Isso é tudo o que eu queria usar nesta versão do banner. Vamos dar uma olhada nisso um pouco mais longe. Sinto que talvez esse treinador possa ser um pouco maior, então vou aumentar o tamanho dele para que ele preencha esse espaço um pouco mais. Podemos até movê-lo um pouco dessa forma. E agora podemos simplesmente mover o texto também, ajustando-se ligeiramente a essa nova posição. E acho que parece bom agora. Então, só para encerrar isso, vou renomear este quadro de arte e, em seguida, chamá-lo de paisagem. Então, agora podemos salvar nosso trabalho. E no próximo vídeo, criaremos duas mutações a partir disso. Então, teremos um quadrado e a variação do formato do retrato com o mesmo design. 9. Mutações e proporção: A maneira mais rápida de criar uma duplicata de uma placa de arte é simplesmente usar a ferramenta Mover e mantendo pressionada a tecla Alt ou Option, arraste-a para o lado. Observe que isso cria um quadro de arte separado aqui no painel Camadas também. E podemos renomear esses dois quadrados, mas também temos que alterar o tamanho desse banner, que podemos fazer o que podemos fazer no painel Propriedades aqui para a largura, vou digitar 600. E uma vez que eu fizer isso, observe como os elementos que não se encaixam mais na placa de arte são colocados do lado de fora, tanto aqui no espaço de trabalho, mas também no painel de camadas. E um elemento que definitivamente não queremos perder é esse mais grosso? Então eu vou arrastar isso de volta aqui na esquina, talvez um pouco mais alto. E também o texto, não queremos perder. Mas neste caso, acho que não precisamos de ambas as camadas de texto, para que os treinadores antigos possam ser removidos. E, em vez disso, estaremos nos concentrando nessa grande venda e usando a ferramenta de tipo, vou dividir isso em duas linhas. Sinto que isso funciona muito bem aqui. Podemos torná-lo um pouco menor e alinhá-lo em um lugar onde ele não se sobrepõe muito ao produto. E ainda é muito bom e legível. Essas formas, podemos simplesmente passar aqui para o topo e ver se precisamos delas ou não. Também pode apenas verificar no painel de camadas o que mais temos aqui? O Nike Trainer não ficará visível nesta versão, então podemos simplesmente excluí-lo da prancha de arte quadrada. E há essa forma, por exemplo, que provavelmente não precisamos neste caso, também posso excluir que essas linhas onduladas podem estar um pouco mais adiante ou talvez até aumentadas tamanho apenas para que se encaixa melhor do que, vamos mover essa forma aqui, talvez aumentar um pouco seu tamanho. O Chevron pode vir aqui apontando para o produto e podemos vir um pouco mais abaixo ou até mesmo centralizado, então a linha em ziguezague, podemos movê-lo mais longe do produto. A outra chevron aqui também pode surgir. Este círculo pode descer um pouco. E talvez possamos ter uma dessas formas aqui. E só para ter um pouco de amarelo também na composição, vou colocar esse círculo lá em cima no topo. Talvez faça isso um pouco menor. Ok, estou feliz com isso, então podemos excluir as formas que não acabamos usando. E agora podemos simplesmente duplicar esse banner quadrado para criar nossa terceira versão, que será o tamanho do banner retrato. E para ter essa configuração da maneira correta, vou usar novamente o painel Propriedades. Para isso. A largura será 400 e a altura será 800. Portanto, é uma proporção de dois por um, que nos permitirá ter, novamente, ambos os três nervos visíveis. Então, antes de tudo, vamos mover o inverso aqui para a esquerda, reduzir um pouco o tamanho. E desta vez eu vou fazer com que o adesivo fique por baixo do sapato inverso e coloque-o em algum lugar por lá. 10. Versões adicionais da proporção de aspecto: E isso me lembra de uma coisa que perdemos, e isso é uma sombra para o inverso. Então, temos uma sombra no Nike Trainer. Precisamos combinar isso para este outro sapato também. Então, vamos voltar à nossa composição principal. E, a propósito, estou usando o clique de Comando ou Controle para alternar entre camadas. Isso ocorre porque não estou usando o recurso de seleção automática. Eu prefiro usá-lo com esse atalho. Então, com isso, posso alternar rapidamente entre agora e as camadas, mas até mesmo camadas diferentes em diferentes quadros de arte. Mas, ao selecionar isso, posso clicar duas vezes perto do nome da camada e aplicar sombra solta. Você pode copiar as configurações que você vê na minha tela. Então, estou usando multiplicar uma cor azul mais escura, semelhante à cor da sombra deste outro treinador. E com o resto das configurações que você pode ver aqui, é bom saber sempre que você configurar sua sombra, você sempre pode clicar e arrastá-la na tela. Mas desta vez vou mantê-lo onde estava, certificando-se de que é o mesmo ângulo que o outro sapato. Podemos estar um pouco mais à direita. Vamos clicar em OK e, em seguida, podemos garantir que essa sombra seja aplicada nas outras placas de arte também. E a maneira mais rápida de fazer isso é clicando com o botão direito na camada e escolhendo Copiar Estilo da Camada, clique em Comando ou Controle na outra camada de imagem e clique com o botão direito do mouse em Colar Estilo de Camada. E eu mais uma vez neste também, colo estilo de camada. Então você pode ver por que essa sombra está ajudando a estabelecer ou criar mais profundidade e tornar toda essa composição do adesivo por baixo do sapato mais interessante. Claro, eu ainda quero ter certeza de que é legível, então eu apenas movo um pouco para baixo. Mas então vamos apenas copiar essa camada com o NYC. Eu o selecionei e, em seguida, pressione Command ou Control C. Em seguida, volte para este quadro de arte. Basta selecionar uma das camadas e, em seguida, pressionar Command ou Control V que nós, eu a trago para essa composição e vou mover isso todo o caminho na parte inferior e talvez colocá-lo em algum lugar aqui embaixo. E podemos arrumar as coisas. Este círculo pode ser removido, esses Chevron também podemos remover e, em vez disso, vou aumentar o tamanho desse sapato e talvez movê-lo ligeiramente. Pode-se ser capaz de diminuir um pouco maior. Não me importo que se sobreponha um pouco mais aqui. E também não quero que ele toque exatamente na borda inferior do quadro. Isso é o que eu normalmente chamaria de tangente ou beijo quando as bordas se encontrarem exatamente. Portanto, é sempre melhor cortar um pouco mais nele ou garantir que você não o alinhe com a borda. E eu também queria me sobrepor lá no topo. Sim, acho que isso funciona muito bem. E então podemos simplesmente mover essas formas mais para a esquerda um pouco. É claro que precisamos do nosso texto de grande venda que pode ser um pouco maior neste formato se encaixa muito bem aqui. Então vamos mover esses elementos distrativos como a linha em ziguezague para fora do caminho. Pode chegar em algum lugar aqui. Talvez essa outra linha em ziguezague possa estar aqui em baixo. Esta linha chevron aqui pode estar abaixo do adesivo para que não compita com ela. Podemos colocar esta cruz aqui na parte inferior, talvez reduzi-la para 30%. Esta pequena cruz pode estar em algum lugar lá. Também podemos ter um mais escuro, talvez aqui. E então talvez possamos colocar esse círculo aqui no canto. Certo, acho que parece bom. Mas a melhor coisa sobre ter todas essas três variações no mesmo documento do Photoshop é que sempre podemos voltar e fazer pequenos ajustes, mover as coisas, emprestar elementos de uma versão, mova-o rapidamente para o outro e vice-versa. Então, trabalhar com placas de arte é definitivamente uma grande vantagem quando se trata criar banners e as diferentes mutações. Mas agora no próximo vídeo, criaremos uma variação do formato quadrado, que pode ser usado como um banner animado. 11. Como criar os quadros para o banner animado: Então, para começar, vou duplicar nosso formato quadrado original, que cria um novo quadro de arte. E podemos simplesmente renomear este, quadro um. E a principal coisa que quero mudar aqui é que só precisamos da primeira palavra, grande. E como só temos uma palavra, podemos torná-la um pouco maior e tê-la talvez em algum lugar por lá. Agora eu não vou passar muito tempo aqui movendo as coisas. Em vez disso, vou duplicar isso e criar o quadro número dois, que terá os outros treinadores. Então, vou remover o inverso e colar em Nova York. Desta vez vou girá-lo no outro ângulo. Se encaixa melhor no formato quadrado como este. E ter os textos indo de outra forma cria uma dinâmica interessante. Então, vou apenas digitar cl usando o mesmo tamanho para o texto. E então eu apenas movo esses outros elementos, certifique-se de que eles não estejam no mesmo lugar. Caso contrário, pareceria um pouco estático. Podemos até emprestar algumas dessas outras camadas como esta, apenas certifique-se de que ela vá mais abaixo na estrutura da camada e talvez também reduza sua opacidade. Vamos apenas mover essa divisa para longe daqui também. E como eu disse, certificando-se de que não temos os elementos no mesmo lugar exato. Isso pode ser provavelmente branco, talvez apenas coloque-o aqui embaixo. E então vamos mover este para baixo e talvez aumentar o tamanho. E então talvez possamos mover esse outro círculo aqui para cima apenas para preencher esse espaço. E dessa forma podemos apenas mover este talvez um pouco mais para cima. Agora observe que o único elemento que eu mantive no mesmo lugar exato é o adesivo. E isso é intencional. Quero ter certeza de que isso seja consistente ao longo de pelo menos dois quadros de toda a animação porque há uma mensagem chave e quero ter certeza de que ela chegue até o espectador. Mas agora podemos criar o terceiro quadro. Então, mais uma vez, eu dupliquei isso, renomeie isso para quadro três. Aqui, podemos mover o Nike Trainer para baixo. Vou girá-lo na outra direção, reduzir seu tamanho, colocá-lo em algum lugar lá embaixo. Então podemos trazer uma versão do inverso e reduzir seu tamanho novamente, colocá-lo em algum lugar aqui no canto superior direito. Primeiro. Na verdade, vou mover essas formas também. Então, arrume um pouco antes de colocarmos a imagem lá. Agora podemos movê-lo de volta. Eu literalmente só quero que o calcanhar e o cadarço mostrem o pouco do logotipo que está apenas insinuando qual marca é essa. E então podemos digitar grande aqui. Então, temos uma grande venda, e desta vez teremos espaço para o resto da cópia, bem como para mostrar quais podemos pedir emprestado desta composição principal. Então, vou apenas selecionar esse texto por Comando ou Controle, clicando nele e, em seguida, Comando ou Controle C para copiar. Volte aqui e clique nesta tela ou no quadro de arte e, em seguida, Command ou Control V para colar o texto. Ele também pode dividir isso em duas linhas e colocá-lo em algum lugar aqui. Agora, aqui, o adesivo pode ser removido. Na verdade, vou excluí-lo e, em vez disso, vou aumentar esse texto e até mesmo a grande venda pode ser maior. Este último quadro é realmente sobre o texto. Novamente, não quero ter nenhum elemento que esteja exatamente na mesma posição do quadro de arte anterior. Então, vou me certificar de que movemos as coisas para tornar a animação mais interessante. Essa cruz tem que ir para outro lugar também. Talvez aqui em cima. Podemos ter essa linha ondulada, talvez aqui embaixo. E em vez de ter o ziguezague na mesma posição, vou apenas movê-lo para cima e alterná-lo para a cor azul usando o comando Alt ou Option Backspace, e então esse círculo pode ser removido. Acho que não precisamos disso neste caso. Talvez apenas traga de volta esse círculo da outra composição e cole isso em algum lugar do canto aqui. E, por último, talvez este possa vir aqui também. Agora, essas formas em excesso, podemos excluir do painel de camadas. E se reduzirmos o zoom, agora podemos ver os três quadros lado a lado. Sinto que vai funcionar muito bem como uma animação. Então, ele terá uma mensagem clara. Vela grande até 50%. E então o quadro final apenas junta a frase inteira. Grande venda em todos os treinadores. 12. Como transformar quadros em objetos inteligentes: Sempre que crio banners animados, sempre gosto de manter a cor geral de cada quadro bastante semelhante, porque senão você pode acabar criando transições carnudas demais entre eles. Então imagine se eu tivesse um quadro com fundo azul, o próximo branco e depois o terceiro amarelo. Pode ser um banner muito procurado por isso será um pouco mais sutil, mas ainda interessante de se olhar. Claro, isso é sempre algo que você precisa discutir com o cliente. Eles podem querer ir para aquele visual mais carnudo para seus banners. Mas agora que temos os três quadros prontos, há mais uma coisa que precisamos fazer aqui, e isso é transformá-los em objetos inteligentes. Isso só facilitará movê-los para um documento separado. Porque mesmo que os criemos no mesmo documento, para poder exportá-los como um banner animado, ele terá que estar em outro documento. Então, vamos fazer isso agora. Vou clicar com o botão direito do mouse no quadro um e Converter para objeto inteligente. Faça a mesma coisa para o quadro dois e também faça o mesmo para o quadro três. Agora vamos criar esse novo arquivo de documento novo. E vou configurar isso como 600 por 600 pixels. Desta vez, não preciso da opção de quadros de arte, então eu o desliguei e depois criei. Agora, voltando para o documento anterior, posso selecionar o quadro 1 primeiro, copiá-lo, Comando ou Controle C saltou para este documento e depois colar com comando ou controle V como nosso quadro um. Agora podemos até excluir a camada de fundo, basta selecioná-la e pressionar Backspace. Então, novamente, pule aqui, copie o número do quadro para colar e, em seguida, copie o quadro número três e cole. E não nos esqueçamos de salvar este documento também. Vou chamá-lo de banner animado. 13. Opções de exportação: Agora finalmente chegou a hora de criar nossa animação para a qual vamos abrir o painel da linha do tempo. E dentro disso, escolha a opção Animação de quadro e clique no botão. Isso criará um quadro por padrão, mas podemos ir ao menu do painel e escolher fazer quadros a partir de camadas. Dessa forma, teremos cada uma de nossas camadas configuradas como quadros retos de a. E podemos usar a tecla Shift para selecionar todas as três. Podemos mudar a duração de todos eles para talvez 1 segundo. Mas então, seletivamente, vou mudar o terceiro de um para dois segundos. Agora, se tivermos a opção de loop definida para sempre, isso significa que ela continuará se repetindo, o que é perfeito para nós. Então, vamos apenas testar isso. Vou tocá-lo. Sinto que o 1 segundo pode ser um pouco rápido demais no início para os dois primeiros quadros. Então, para diminuir um pouco as coisas, eu posso escolher outro e talvez definir isso para 1,5 ou mais outros 1,5. Agora vamos testá-lo. Sim, acho que isso já está um pouco melhor. Sim, acho que isso funciona. Então, agora que temos nossa configuração de linha do tempo, só precisamos ir ao menu Arquivo e escolher Exportar. Salve para Web e ouça as predefinições, certifique-se de escolher GIF 128, a sujeira. Isso lhe dará o banner animado da melhor qualidade, mas também produzirá o tamanho de arquivo mais alto. Você sempre pode ver o tamanho final aqui no canto inferior esquerdo. Este é um 187 kilobytes, que é considerado bastante alto para um banner, idealmente, você deseja mantê-lo em torno de 50 K no máximo, um 100 K. Novamente, depende do cliente e suas especificações ou dos sites parceiros o qual eles trabalham. Portanto, a maneira como você sempre pode reduzir o tamanho do arquivo é ajustar as configurações aqui, aumentando coisas como a opção com perdas reduzirá a qualidade de seus quadros. Mas, por sua vez, também reduzirá o tamanho do arquivo. E outra opção que você pode usar para reduzir o tamanho do arquivo é a quantidade de cores. Então, se você reduzir isso para, digamos 64, agora já estamos abaixo de 100 K. Claro, sempre vale a pena verificar todos os quadros apenas para garantir que eles pareçam aceitáveis. Acho que eles parecem bem, mas vou realmente voltar ao cenário de alta qualidade. Então eu removo o recurso com perdas e vou até 128 cores. Eu poderia até ir para 256 cores, mas isso tornará o tamanho do arquivo ainda maior. Mas só para a demonstração agora, vou usar essa qualidade máxima e clicarei em Salvar e salvá-la na pasta do meu projeto. Aqui está o banner animado. Podemos dar uma olhada no arquivo GIF que salvamos do Photoshop. Acho que parece ótimo. E agora não nos esqueçamos de salvar também os banners estáticos, para os quais vou voltar para o documento original e vou para o menu Arquivo e escolha Exportar, Exportar Como desta vez, o que me dará a opção de exportar as três placas de arte individualmente. Observe que os objetos inteligentes que temos na parte inferior, que usamos para nossos quadros para o banner animado nem aparecem mais aqui porque eles não estão em placas de arte. Mas todos nós podemos selecionar e alterar ao mesmo tempo para JPEG, que é o formato de arquivo recomendado para banners estáticos ou, opcionalmente, você também pode usar PNG. E, novamente, você verá os respectivos tamanhos de arquivo aqui no lado esquerdo. Mais uma vez, se você puder mantê-los mais próximos 50 a 100 K, isso é mais ideal. Atualmente, eles são muito grandes, então teremos que fazer algo a respeito. Um recurso útil no caso de você estar trabalhando com PNG é ativar o recurso de arquivo menor. Isso não afetará demais a qualidade, mas definitivamente fez com que o tamanho do arquivo fosse menor. Então, vou exportá-los assim. E novamente, podemos dar uma olhada nessas exportações que o PNG é, então aqui está a versão paisagem, há a versão retrato, e há o quadrado. Agora, há uma opção adicional que vale a pena mencionar na caixa de diálogo Exportar como, e esse é o recurso de escala que, por padrão exportará o tamanho atual definido para seus quadros de arte. Mas no caso de você precisar criar versões para talvez telas retina, você precisa exportá-las duas vezes maiores. Então você pode fazer isso facilmente clicando no sinal de mais aqui e alterando o tamanho duas vezes dois. Dessa forma, como temos três imagens e dois tamanhos diferentes, seria uma exportação em lote de seis imagens. Mas como já criamos as versões de tamanho original, podemos simplesmente removê-lo e manter as versões de tamanho duplo, que quando eu clicar em Exportar e escolher o destino, serão geradas também com os nomes dos arquivos mostrando que essas são as versões de tamanho duplo. Por exemplo, com o tamanho quadrado, temos o original e temos a versão maior de alta resolução. E é por isso que era tão importante trabalhar com as formas vetoriais e também com camadas de imagem de objeto inteligente de alta resolução. Por isso, nos permite exportar facilmente o dobro ou o triplo do tamanho original dos banners. E isso resume tudo o que você precisa saber sobre a produção de banners estáticos e animados usando a combinação do Photoshop e do Illustrator. 14. Conclusão: Parabéns por terminar este curso. Espero que você tenha se divertido tanto assistindo isso quanto eu me diverti gravando. E, claro, não se esqueça do projeto da turma. Porque lembre-se, a prática leva à perfeição. Mal posso esperar para ver seu trabalho, então não deixe de enviá-lo. E caso você goste deste curso e queira aprender mais comigo , há muitos outros cursos que você pode encontrar aqui. Vá e dê uma olhada neles agora. Mal posso esperar para te conhecer na próxima.