Masterclass de design digital para designers gráficos

1. Prévia de curso - NOVA: o futuro do design é digital. Este curso foi projetado para colocar os designers gráficos a par dos mais recentes e melhores projetos de foco digital para que eles possam expandir seu conjunto de habilidades e oferecer mais serviços. Este curso é enorme cobrindo tantos projetos de design digital de mídias sociais, eu posso projetar Web design e muito mais. Em primeiro lugar, abordamos a teoria do design digital, aprendendo os diferentes aspectos do design para o digital, como criar campanhas poderosas de mídia social , projetos de sites, layout para digital e até mesmo falar sobre acessibilidade no design digital. Em seguida, conquistamos vários projetos populares de design digital, incluindo a criação de várias miniaturas do YouTube que levam os usuários a clicar. Nós até criamos uma campanha de mídia social inteira e falamos sobre como projetar para o Instagram do Facebook . Até falamos sobre a criação de anúncios para sites para que você se sinta confortável expandindo seu conjunto de habilidades para todos os tipos de criação de anúncios digitais. Você sempre quis saber como criar uma atraente capa de livro E? Vai fazer exatamente isso e aprender a desenhar capas de um livro. Falamos sobre dimensionamento, exportação e como criar um design que agarre os espectadores. atenção irá sobre como tirar a tipografia escrita à mão e trazer isso para o Photoshopped para usar em nossa capa de livro e também aprender a trabalhar com outros esboços APS como Procreate para trazer ativos escritos à mão para a vida. Nós também criamos nossa própria simulação para exibir nosso design final. Gosta de esboçar ou ilustrar? Até criei um projeto passo a passo onde pegamos um esboço a lápis e digitalizamos usando ferramenta de caneta do Adobe Illustrator. Saber digitalizar esboços é uma grande parte da expansão de suas habilidades. Definido para a arena digital, design Icahn está no centro de qualquer projeto de design digital. Os ícones podem ser usados em sites, APS móvel, aplicativos e muito mais. E usaremos um modelo fornecido à medida que criamos um conceito alto coeso inteiro. Ou aprenda como usar grades para criar um conjunto temático e até aprender como adicionar cores e como exportar todos os ícones e os tamanhos certos para uso em todos os lugares. Depois de criar um ícone básico simples, conjunto irá ainda mais fundo para criar um ícone de aplicativo da Apple Store altamente detalhado a partir do zero. Wilder. Muitas ferramentas como usar o brilho para criar um efeito dimensional, bem como as ferramentas de padrão, e muitos mais vão aprender como exportar esses arquivos, bem como para uso na loja da Apple, bem como como como apresentar nosso ícone em um maneira profissional. É difícil ensinar design digital para designers gráficos sem incluir algumas seções que se concentram em Web design vai aprender qual o nosso papel designers gráficos de Zara no espaço, bem como como como preparar um arquivo de exportação para os projetos de Web design aprender do zero. O Adobe X T e um curso rápido aprenderão muitos aspectos do design e layout fortes da Web criando uma página de aterrissagem juntos. Passo a passo. Vamos até aprender que tinha um link ou várias páginas juntas para criar um protótipo de trabalho e aprender algumas maneiras de exportar nossos arquivos para um desenvolvedor da Web. Finalmente, vamos conquistar um site básico de primeira página projetado para uma empresa de viagens. Usando WordPress vai aprender o básico do WordPress e aprender a construção de página muito popular plug in para WordPress chamado Element, ou para construir nossa página da Web, música, fundos de vídeo, paralaxe imagens, ícones, colunas, texto animado e muito mais. Por último, há toneladas de recursos para download está nesta classe, incluindo modelos pré-feitos para a maioria dos projetos. Isso inclui Photoshopped, ebook, YouTube, YouTube, modelos de mídia social e um conjunto de ícones, um ícone de loja de APP, template e adobe illustrator. Este curso não é para estudantes que nunca estiveram no Adobe Photo Shopper ilustrador antes, mas esta aula é geral o suficiente e básica o suficiente para a maioria dos designers gráficos de nível iniciante que estão interessados em adicionar isso à sua habilidade definido para aqueles que nunca abriram o software Adobe antes, sugiro tomar minha outra classe básica de design chamada Graphic Design Master Class, para obter uma vantagem sobre essas ferramentas muito, muito básicas. Este curso pressupõe que você tenha conhecimentos de trabalho muito básicos do Adobe Photo Shop e ilustrador e ferramentas como WordPress, Adobe X 'd, a página elementar Builder e Mawr são ensinados do zero, portanto nenhuma experiência prévia é necessário para aqueles. Então, você está pronto? Toe up seu jogo de design e adicione um novo conjunto de habilidades para suas ofertas. Você está pronto para explorar isso? Um local central de design. Vejo-te na primeira lição 2. O guia do curso de uma pessoa: Bem-vindos ao curso. Estou tão feliz que você decidiu se juntar a mim nesta maravilhosa jornada de design digital comigo. Eu queria rever algumas coisas essenciais antes de começarmos o curso. Primeiro de tudo, recurso para download é que você vai notar um arquivo ZIP anexado a esta lição. Isso contém um monte de arquivos de modelo vai usar em projetos, bem como várias imagens, vídeos, arquivos locais e outros ativos que serão úteis para criar sua própria versão de cada projeto no curso. E falando de projetos de estudantes, há um arquivo de guia de projeto do estudante que lhe dará mais detalhes sobre os projetos que serão encarregados de como ele trabalhou durante as aulas. Há também um documento do Word para download que contém todos os links para vários recursos externos , como fotos, links úteis e alguns dos programas que eles usaram ao longo do curso. E lembre-se, este curso requer algum conhecimento muito básico de trabalho da loja de fotos, e o ilustrador será útil para começar este curso com algum conhecimento básico de ferramentas. Já, eu não vou ensinar Adobe Photo Shop e Illustrator do zero, embora a maioria das ferramentas que eu apresento. Vou passar do zero. Eu quero que você fique confortável com o sistema de camadas, o layout básico dos programas e como encontrar as ferramentas básicas. Um ilustrador. Eu quero que você tenha usado a ferramenta pino algumas vezes antes de iniciar este curso. Não há necessidade de ter qualquer experiência prévia no WordPress, o construtor de página elementar ou Adobe X'd, como esses programas serão ensinados desde o início. Se você se encontrar precisando de alguma loja de fotos e treinamento de ilustrador adicional desde o início e precisar dessa instrução muito básica, eu ofereço um curso de design gráfico para iniciantes chamado Graphic Design Masterclass que levá-lo até a velocidade. Fazer esse curso não é necessário para fazer este, desde que você tenha um pouco desse conhecimento muito básico da Adobe Photo Shop no Illustrator. Eu quero que você faça este curso no seu próprio ritmo e sinta-se livre para trabalhar comigo, com cada projeto recriando o projeto passo a passo, ou, se você gosta de assistir as lições e ir e experimentar seu próprio projeto. Isso também é bem-vindo a cada projeto tem arquivos úteis para você começar a criar seus próprios projetos para usar em um portfólio ou para mostrar suas habilidades. Eu tenho um grupo de estudantes exclusivo no Facebook para aqueles que querem postar projetos e se envolver com outras pessoas em um ambiente amigável e útil da comunidade. Basta digitar design de aprendizado, Go Freelance e a barra de pesquisa do Facebook para localizar o grupo e certifique-se de responder às perguntas feitas. Além dos projetos estudantis, também tenho desafios mensais de design do aluno. Se você não estiver no Facebook, eu também postar esses desafios mensais de design no meu canal do YouTube no youtube dot com barra Lindsay Marsh. Você também pode postar seu trabalho no Q e em uma seção deste curso. Estou ansioso para ver o que vocês criam enquanto trabalham neste curso. Este é o mais intenso de todos os meus cursos, simplesmente porque a grande variedade de tipos de projetos que trabalhamos nesses projetos. Leve-os um de cada vez e pense neste curso como uma maratona e não um sprint. Este é um ótimo dedo do pé de introdução. Todos esses diferentes projetos de design digital e cursos mais intermediários e avançados sobre os temas do amor projetados, por exemplo, estarão disponíveis em breve. Mas este curso irá, pelo menos, dar-lhe o primeiro passo no processo para começar. Adoro críticas. Então, quando você tem a chance de trabalhar através dos poros para deixar uma crítica, eu li todos e todos que eu realmente valorizo o que vocês e eu estou ansioso para tê-lo como um estudante. Então vamos em frente e começar. Te vejo no primeiro projeto. 3. Introdução ao design para Digital: design digital refere-se a qualquer design que tenha trabalhado para o espaço digital, incluindo dispositivos móveis, tablets, tablets, computadores desktop, telas de projetor, grandes outdoors digitais e muito mais. Os designers gráficos concentraram-se principalmente em projetos de design de impressão, como cartões de visita, banners de zoológico estacionários , camisetas , chapéus, design de pacotes no passado. Mas à medida que o tempo passa, haverá apenas B'mais e mais demanda por projetos baseados em digitais. Cabe a você como designer ser bem versado em todos os aspectos do design digital, para que você possa se sentir confortável projetando para telas super pequenas e telas de projeção super grandes , também. Todos os projetos de design digital são dimensionados usando pixels, pixels ou quadrados de luz que podem ser brancos, vermelhos, verdes, azuis ou pretos. Todos os monitores digitais são criados usando uma determinada área de pixels. Seu 10 80 p widescreen TV imagens Air criado usando uma combinação de 1920 pixels e com por 10 80 pixels e hype, dando a essa tela um total de 2.073.600 pixels. Isso é um monte de pixels que sabia apenas ser ligado para criar aquela imagem de alta resolução nítida. Quatro grãos de caixa usando uma quantidade ainda mais incrível de pixels iluminam a tela com 2160 pixels de altura e 38 40 pixels. E chicote. Eu acho que o aspecto mais desafiador de trabalhar com projetos de design digital como designer é a ampla gama de telas com as quais precisamos estar prontos para trabalhar. Às vezes, eles poderiam ser menores como um iPhone oito tela chegando e apenas 750 pixels largura por 1334 pixels de altura. Ainda menor é um anúncio de exibição móvel que chega a apenas 300 por 50 pixels. Eu acho que a chave para ser um grande designer digital é entender como melhor usar tamanhos pequenos para sua vantagem. Por exemplo, uma simples campanha de mídia social. Digamos que temos vários tamanhos com os quais precisamos trabalhar, mas temos que, de alguma forma, comunicar algumas informações básicas exigidas pelo cliente. À medida que nossos tamanhos se tornam cada vez menores, certas concessões precisam ser feitas, e cabe a você descobrir isso e se comunicar com o cliente. Essas concessões, por exemplo, em nossa campanha de mídia social, começamos com grande postagem no Facebook, e então precisamos criar anúncios de exibição estáticos ou há pequenos anúncios que você vê no sites na parte superior e nas laterais de um bloco de conteúdo ou blawg. Alguns desses anúncios de exibição podem ser muito pequenos. Menor ainda, são esses anúncios de exibição móveis. Temos que, de alguma forma, convencer o nosso conceito principal e tema em áreas menores, mas ainda manter são consistentes branding nossa mensagem e nosso principal conceito da campanha. E fazemos isso focando no que é mais importante neste caso. A ação chamada é a parte mais vital de um anúncio, e sem uma razão para clicar na página de destino, seu site não há nenhum valor sendo criado pelo anúncio. É apenas estática, e isso é apenas mídia social. Há tantas categorias e design digital que dependem de um designer gráfico para desenvolver os gráficos. Pois há também projetando para celular. Isso pode ser móvel, APS ou até mesmo versões móveis de sites. Que cores usar, como usar contraste, quais pensamentos eu uso? Todas essas decisões desempenham grandes papéis na eficácia de um aplicativo móvel ou site. Há também um formato maior. Gráficos digitais como os que você vê em seu estádio local. Seu power point desliza para grandes conferências que precisam ser feitas que correspondam à marca da conferência. Há até mesmo outdoors digitais de grande formato, que estão se tornando cada vez mais favorecidos sobre os outdoors impressos de estilo antigo. Devido aos custos reduzidos de executar um outdoor digital, ícones como o que você vê para ícones APP em seu telefone também precisam ser criados. Há um método especial para criar aqueles que usam uma grade especial criada pela Apple para ajudar a encontrar o posicionamento mais eficaz dos elementos. Certos ícones podem ser vistos melhor do que outros e um mar de ícones de aplicativos diferentes. Às vezes, o uso de cor como um vermelho, pode ajudar alguém realmente se destacar em que C ou uma forma simples ou uma letra. Além disso, há ícones que precisam ser criados para APS, sites e aplicativos. Há uma arte na criação de ícones que comunicam ações complexas. É possível usar as formas mais simplificadas. Ícones podem ter apenas 50 por 50 pixels e tamanho de qualquer momento, então ser capaz de simplificar um conceito complexo é algo aprendido e praticado Ícones que serão usados como um conjunto juntos precisam ter uma aparência consistente. Por exemplo, eles têm um tamanho de traçado semelhante em todo o conjunto, e ele não pára por aí. Há também miniaturas baseadas em vídeo que precisam ser criadas para o YouTube e outras plataformas . Estes precisam converter e ser eficaz em desenhar o usuário para clicar através do vídeo. Como você usa fotos, cores e tipografia contribuirá para a eficácia do vídeo e taxas de cliques . Por exemplo, as miniaturas do YouTube que são simples na natureza e têm um ponto focal principal tendem a fazer melhor do que aquelas com toneladas de texto e fotos. Além disso, essas miniaturas com rostos das pessoas tendem a se converter melhor com miniaturas com apenas texto . Isso ocorre porque nós, como seres humanos tendem a se conectar a rostos humanos e psicologia humana, podemos desempenhar um papel importante no design digital. Há também capas de livros e tendem a impulsionar as vendas com base na eficácia do design da capa. Às vezes, a capa de um livro é a única coisa que o espectador vê ao classificar centenas de possíveis seleções de livros e ser capaz de criar uma capa de livro digital que irá converter, atrair e vender. O livro pode fazer a diferença entre boas vendas e grandes vendas. Como você pode ver, os designers têm papéis enormes a desempenhar no mundo adicional, e é nosso trabalho garantir que estamos preparados para criar imagens altamente eficazes rapidamente que possam impulsionar as vendas para nós mesmos, nossos clientes e as empresas para as quais trabalhamos. 4. Teoria de design para redes sociais: o que vai para projetar uma imagem para uso em mídias sociais? Quais são as coisas que são conhecidas por serem eficazes e atraindo essas bolas altas para o nosso conteúdo ? Existem algumas regras básicas e dicas que podem ajudá-lo a ser mais eficaz. Designer de conteúdo de mídia social Primeiro de tudo, entenda seu público-alvo. Com quem você está tentando falar? O Teoh? Tente entender o público-alvo estudando informações demográficas. Está conseguindo essa informação para quem trabalha? O seu anúncio de cartaz será exibido? Duas mulheres a mais do que homens? Você está mirando esses? E um grupo demográfico mais jovem que pode moldar e moldar a forma como você aborda o design? Um grupo demográfico mais antigo pode precisar de uma abordagem de design mais conservadora, enquanto um público mais jovem pode se conectar mais com algo mais ousado e parar o show. Por fim, onde eles se localizam geograficamente, aqueles nos Estados Unidos podem se conectar mais com um determinado design do que alguém da América do Sul ou da Ásia, talvez usando fotos que melhor representam o público-alvo. Mais pode ajudar nesta conexão com o seu anúncio ser autêntico e parece óbvio. Mas ser autêntico é mais fácil disse que feito especialmente no trabalho com clientes fazendo publicidade paga . Os clientes querem impulsionar ofertas e serviços de produtos. Mas precisamos encontrar maneiras de criar um design que faça isso parecer menos como suas ofertas padrão. Vemos todos os dias, e eles fazem um dedo mais atraente. Nosso público-alvo. Por exemplo, podemos criar um anúncio simples para uma empresa de alimentos para animais de estimação e colocar um saco de comida bem no centro do anúncio de mídia social com um cupom simples. Parece muito tradicional, mas, bem, bem, se usássemos uma imagem de um dono de estimação apreciando seu cão e depois a foto de um produto ? Melhor ainda, se nos conectássemos com eles usando uma manchete inteligente também? Estes são pequenos ajustes e mudanças nos anúncios, mas eles podem ter um grande impacto sobre a eficácia do anúncio. Contraste bem, e falamos de contraste em quase todas as lições desta classe. Contraste é a diferença simples entre os elementos de design. Quanto mais dramática a diferença, maior o contraste tem. Podemos usar o contraste de forma eficaz como designers para atrair os olhos do usuário para a parte mais importante do anúncio, geralmente a chamada à ação, ou que até agora deslizar para cima para mais botão ou área. Mas também podemos usar contraste com nosso tipo destacando uma palavra em nosso título para trazer uma palavra mais favorável que ajuda a empurrar as pessoas para nosso objetivo principal para o anúncio. Por exemplo, esse anúncio que usa contraste para trazer essa palavra no título para atrair o usuário para o conceito geral do contraste do anúncio pode ser facilmente usado para muitos elementos que diferem drasticamente pode fazer com que um anúncio pareça ocupado, desatualizado e muito difícil de olhar para o contraste é melhor usar com moderação e com um propósito. Use fotos que se conectam com o visualizador. Isto remonta a ser autêntico também. As fotos escolheriam poderiam ter enormes impactos em atrair os espectadores. E isso é verdade para anúncios impressos tradicionais também. Tome, por exemplo, este anúncio para um ginásio podemos usar a foto padrão que é facilmente visitado sobre onde podemos usar uma imagem de maior impacto para atrair os espectadores e parar mesmo por um segundo para dar uma olhada extra a foto e o anúncio. Fotos coloridas tendem a atrair usuários e mais do que preto e branco se lembram nas mídias sociais . Você tem menos tempo disponível para atrair pessoas para o seu cartaz. Adicione a menor quantidade de qualquer outra plataforma de publicidade. Pense em quão rápido você percorre seu feed do instagram. Não muito tempo, são fotos da primeira coisa que as pessoas vêem e começam a ler o texto. Em seguida, use isso a seu favor. Como você corta. Sua imagem também é enorme. Podemos fazer as coisas parecerem comuns ou dramáticas simplesmente cortando-o das maneiras mais atraentes neste exemplo da garota em um local exótico. Cortando assim. Parece bom, mas corte assim. Parece quase mágico e inspirador. Sinta-se livre para editar suas fotos também. Para adicionar pops de cor, você pode fazer isso facilmente, seja adicionando novas camadas para as fotos e loja de fotos ou um editor de fotos e usando modos de mistura para desenhar cores para fazer pôr-do-sol. E mais dramático, já vi pessoas clonar em nuvens diferentes para realmente definir a cena. Mas, por favor, tenha cuidado em ser autêntico também. Porque famosos influenciadores das mídias sociais se meteram em problemas para adicionar nuvens falsas ou compras de fotos, seus corpos. Há uma linha tênue, e cabe a você decidir onde essa linha se encaixa para você e seus espectadores. Faças o que fizeres, certifica-te de que estás a contar uma história verdadeira, crível crívele autêntica. Use variedade. Pense em seu post e campanhas de mídia social como uma tapeçaria de arte. Precisa haver alguma consistência da marca ao longo de tudo, mas isso não significa que você precisa criar cookie. Cutter acrescenta que todos têm o mesmo formato. Algumas pessoas gostam de ver diferentes fotos sendo usado manchetes, arranjos e estilo. Isso é ótimo para testes de usuários para descobrir qual é o melhor layout e eficácia para diferentes tipos de anúncios. A Mídia Social é uma parte crescente de um conjunto de habilidades de designer e saber como o melhor projetado para mídias sociais pode torná-lo mais comercializável como designer. No geral, isso requer muita prática e testes de usuários 5. Teoria de design para web: agora o que torna um grande Web design todos os sites éticos? Isso poderia ser para converter usuários sobre um serviço de assinatura, comprar um produto para apenas fornecer informações úteis para o usuário. Um ótimo site é aquele que converte seus espectadores bem. Isso pode ser através do uso de marcas consistentes, autenticidade e cópias bem escritas fotos de produtos eficazes e muito mais. Então, qual é o seu papel é um designer gráfico no mundo do Web design? Bem, se você pode desenvolver em código um site, você é uma raça rara e você será pago generosamente. Mas com o design do site se tornando cada vez mais complexo e codificação, tornando-se mais especializado e pode não ser uma coisa ruim ter nossas diferentes especialidades, vejo o Web design sendo responsabilidade de três contribuidores principais. Em primeiro lugar, há o desenvolvedor. Ele vai pegar o projeto final e transformá-lo em um código, material viável riel. Ele requer conhecimento de linguagens de codificação front-end e back-end, linguagens do lado do servidor e mawr. Um indivíduo altamente especializado. Ele se concentra no lado técnico das coisas. Como é que funciona? E recém-adicionado ao grupo nos últimos 10 anos é o designer de UX ou designer de experiência do usuário . Muitos designers gráficos começam a aprender esse campo de design, e ele está crescendo em popularidade. O designer UX fará um monte de testes de usuário e pesquisa de usuário para descobrir a ordem de como o usuário precisa se mover através do site. Isso significa que eles vão mapear uma jornada do usuário para que você saiba quantas opções de menu principal precisa haver para o usuário e quantas etapas em cada processo para levar o usuário ao seu objetivo em . Isso requer um Thanh de pesquisa e algo chamado enquadramento de arame. O enquadramento de fio está ausente para um designer de UX mapear o fluxo de um site e bloquear áreas onde um botão pode precisar ir. Ah, foto ou onde as opções podem mentir para o usuário. Isso raramente inclui gráficos finais e às vezes pode ser apenas grandes caixas fora. E o visual legal, o branding, as cores? Este é o lugar onde o designer gráfico é você. Eu, designer de interface de usuário, poderia entrar e realmente realçar os detalhes visuais. Uma vez que você tenha a estrutura básica do mapa do site de esboço, é seu trabalho criar ícones guias de estilo, algumas idéias básicas de layout para que o desenvolvedor possa codificar isso e torná-lo uma realidade realmente polida . Então, agora que conhecemos nossa função, como posso criar um design de site ou um design de aplicativo móvel eficaz? E há algumas ideias básicas para ter em mente usando o contraste. E aqui estamos falando de contraste mais uma vez. O contraste é uma ótima maneira de levar o usuário em uma jornada em direção ao destino desejado. Isso poderia ser em direção a um carrinho de compras que podemos usar vermelho, que seria uma cor de contraste maior aqui entre o mar de branco. Para que o usuário encontre facilmente o carrinho de compras, facilitando sua experiência. Você tem o tamanho a seu favor. O que você acha? Converte melhor neste layout da loja e commerce, uma característica do produto que tem uma foto pequena ou que tem uma foto maior. A foto maior naturalmente se converte melhor porque dá ao espectador uma idéia melhor do produto no qual eles estão se preparando para clicar. O que acha que funciona melhor? 12 itens listados em uma tela ou três itens selecionados. Os itens têm uma característica maior, tendem a fazer melhor. As pessoas ficam sobrecarregadas com muitas opções quando você foi multado essas opções para o espectador. Ele tende a reduzir essa tensão emocional, facilitando a seleção de uma opção. No geral, é por isso que as pessoas gostam de conteúdo curado, como notícias. Há centenas de artigos de notícias. Podemos lê-lo a qualquer momento. Mas usar o tamanho para destacar os mais importantes faz maravilha para nossa alma em nossas mentes e nossa conversão e clique através de taxas limpas e simples. É o nome do jogo. Vamos falar um pouco sobre design limpo e Web e design móvel. O que você acha que funciona melhor, o layout à esquerda ou o layout à direita? Simplificar o design pode ajudar o usuário a se sentir menos sobrecarregado, assim como fez quando demos mais a eles. Opções seletivas baseadas no tamanho têm um senso de hierarquia. Não sinta que você tem que enfiar tudo em uma área. Serão certos itens que serão transportados ou importantes do que outros. Por exemplo, certos produtos vendem melhor e serão uma prioridade máxima. Hierarquia pode ser aplicada ao design móvel e Web de várias maneiras. Você tem hierarquia de tipos, que pode ser definida estabelecendo um tamanho de fonte e aguardar o seu maior tipo de título principal e, em seguida, você lentamente trabalhando seu caminho para baixo para títulos menores. Isso geralmente é indicado pelo termo H um para o maior e descendo para H dois h três , h , quatro e assim por diante para tamanhos menores de manchete. Então você tem sua cópia de corpo principal ou seu tipo de tamanho de parágrafo, que geralmente é uma fonte simples, um peso normal e um pouco menor em comparação com o tamanho do título. Seu trabalho é um designer é estabelecer e definir esse senso de hierarquia no design. Tome este exemplo. O exemplo à direita não usa realmente tipo são itens chave ou tamanhos semelhantes, e eles têm quase zero contraste. Mas o exemplo à esquerda estabelece um sistema de hierarquia de tipo forte, que usa estilos variados para certos tipos de informações, manchetes e sub-linhas, dando o design e a sensação ordenada. Poderíamos fazer a mesma coisa com design impresso, e isso se traduz bem para a Web. Opções de fonte são tudo não apenas importante no Web design, mas todos os projetos de design encontrar opções são tudo. Tamanhos lutados maiores podem ter um enorme impacto nas páginas de destino para impulsionar as vendas são para impulsionar uma ação ou resposta emocional. Pontes de tamanho muito pequeno podem afetar a legibilidade e a eficácia. A melhor prática para escolher fontes para seu projeto digital é mantê-lo simples e ordenado quanto possível. Você quer ter certeza de que suas opções de fonte marcam todas as caixas em todos os momentos. Número um. É legível no tamanho final. Uma fonte usada em um site de desktop pode parecer agradável e grande e legível. Mas quando ele diminui para a versão móvel do site, ele ainda é legível e não mantém o mesmo impacto? Número dois. Você não está usando muitas fontes diferentes. Tente evitar o uso de mais de três fontes em uma página da Web ou gráfico digital, a menos que haja um motivo específico de design criativo. Para fazer isso. Evite usar tipos de fontes semelhantes, como usar Helvetica perto de Ariel. Ambos são muito parecidos em uma aparência de época, e eles são ambos sem tipografia serif, confundindo o espectador de qual deles é qual. Por fim, certifique-se de que é fácil de ler mantendo o comprimento da linha razoável. Qual coluna de informações é mais fácil para você ler A versão à esquerda é a versão à direita. A direita provavelmente é mais fácil de ler porque o comprimento total do nosso comprimento de linha do tipo é mais fácil para os olhos de ler. O mesmo se aplica aos projetos de impressão. Você deseja poder manter o comprimento da linha no máximo 60 caracteres por linha. Você pode usar colunas e fotos para ajudar a tornar isso mais possível para você. Não tenha medo de ser expressivo com sua tipografia e design digital. Usamos os tipos de letra padrão como Helvetica para Danna uma antena porque eles eram seguros para a Web e dispositivos de todos tinham esses pré-instalados. Hoje em dia podemos armazenar fontes na nuvem. Por exemplo, o Google Fonts mantém todas as fontes na nuvem para que você possa carregar uma variedade maior de fontes agora. E as pessoas não precisam instalá-los em outros computadores para vê-los em seus navegadores . Isso abriu um mundo de tipografia criativa expressiva na Web. Agora não precisamos mais usar imagens para mostrar tipografias expressivas ou tipografia. Poderíamos torná-lo tipo vivo, significa que as pessoas podem selecioná-lo, copiá-lo, interagir com ele e às vezes você pode até fazê-lo se mover. Como designers, poderíamos ser Justus, criativos como somos com projetos impressos com projetos digitais. Certifique-se de experimentar com tipografia interessante para suas manchetes. letra San Serif tendem a governar o dia do passado, mas agora você está vendo cada vez mais detalhado sehr de tipos de letra e até mesmo fontes de script ao vivo em interfaces digitais. O único aviso aqui é certificar-se de que você não usa demais tipografia expressiva e detalhada muita frequência em seu design digital. Eles poderiam ter sido uma grande atenção captando manchetes, mas evite usar muitas fontes exclusivas personalizadas para áreas menores de textura, cópia e parágrafos. É melhor manter esses tipos realmente expressivos bonitos na máxima legibilidade, tornando-os maiores em usá-los para manchetes. Estude novas formas populares e emergentes de exibir informações há tantas formas emergentes exibir um menu. O que era popular antes era o menu de hambúrguer no aplicativo móvel ou no design do site. É um ícone simples, que expandiu um menu deslizante. Isso foi bom e proporcionou ao usuário acesso fácil a um menu sem ocupar muito espaço na tela do aplicativo do forno superior. Mas com os telefones ficando muito, muito maiores, o usuário agora tem que levar sua figura até o topo de seu telefone para acessar este menu de hambúrguer. Agora os menus de prateleira na parte inferior tendem a ser preferidos pelos usuários. Estas pequenas evoluções e você I ou design de interface de usuário de um aplicativo móvel, por exemplo, são pequenas coisas que você precisa estar ciente. Se você está interessado em aperfeiçoar o design digital, precisamos começar a pensar em Mobile primeiro. Não há muito tempo, pensamos na versão desktop de um site, e então descobrimos como ele se adaptaria melhor a uma tela móvel menor. Bem, os tempos mudaram, e agora precisamos mudar essa mentalidade. Uma boa maneira padrão de projetar agora é projetar em tamanhos menores primeiro e, em seguida, trabalhar seu caminho até tamanhos maiores. Então, por exemplo, começando com uma versão móvel de um site, e então você precisa descobrir como ele se expandirá quando estiver em um navegador em um tablet? E então, finalmente, você quer ver como ele fica em uma tela de área de trabalho maior. O mesmo se aplica às newsletters por e-mail. forma como visualiza um e-mail no aplicativo de e-mail do iPhone, por exemplo, muito diferente da forma como visualiza esse e-mail na área de trabalho. As imagens são muito menores do que o esperado quando visualizadas no seu telefone. E é a melhor prática ter isso em mente ao criar qualquer imagem de design digital. E isso leva a um design responsivo. O que é design responsivo? É simplesmente como o site responde quando é mostrado em diferentes tamanhos de navegador. Às vezes, os elementos colapsavam para facilitar a visualização em um dispositivo móvel. Às vezes, os elementos não são exibidos em um dispositivo móvel quando ele é convertido em um tamanho menor, como uma foto, por exemplo. Essas opções são importantes para você entender ao projetar para tamanhos maiores e menores e algo que você e seu desenvolvedor combinam como uma equipe. 6. Design para acessibilidade: precisamos pensar na acessibilidade para aqueles espectadores com necessidades especiais. Isso é muito mais importante do que você imagina, e algo que você pode garantir que aconteça para qualquer coisa que você projetar. A Web ou dispositivo móvel está pensando sobre o daltônico Ao criar suas paletas de cores . Pense naqueles que podem ser daltônicos. Não confie totalmente na cor para comunicar o próximo passo ou chamada à ação. Mas, por exemplo, é por isso que temos dois botões aqui. Se fôssemos adicionar outros indicadores que este botão é importante para pressionar, como engrossar a base apertada estão adicionando uma borda especial. Pode ser outro indicador para ajudar o usuário que pode não ver essa cor vermelha brilhante. Não, é a próxima coisa a fazer. Um bom truque para ver se isso funciona é fazer o seu design totalmente preto e branco por um tempo para ver se você pode navegar em seu site como apenas preto e branco, assim como você faria se fosse uma versão colorida. Precisamos também de pensar nos deficientes visuais. O mesmo vale para garantir que haja contraste suficiente com suas cores e elementos. Baixo contraste, talvez mais difícil para aqueles com deficiências visuais verem e navegarem no seu site. Projetar formulários é um bom exemplo. Um milhão de dólares. Claro que você tem contraste suficiente em seu design quando gostamos de economizar espaço sempre que possível. Às vezes colocamos o rótulo ou o nome na bolha de entrada. Por razões de contraste, é mais fácil ler se o rótulo for colocado na parte superior ou fora da bolha. O próximo item é algo que talvez mais para o desenvolvedor ou o codificador, mas certificando-se de que suas imagens têm descrições alternativas ou descrições alternativas para que seu leitor Web audível possa falar a descrição do que é a foto. Então eles não perdem o impacto dos visuais. Outra coisa para pensar é também certificar-se de que você pode navegar no seu site usando apenas uma mão, por exemplo, certificando-se de que você pode usar o botão de guia para se mover pelo seu site. Só estou usando um teclado. Se eles estiverem em um telefone, verifique se os botões e ações não estão muito distantes um do outro. Por exemplo, o sistema de menu pode ser usado acesso para usar uma mão ou uma figura porque está na parte inferior da tela Há também os deficientes auditivos. Se você usar qualquer tipo de visual ou vídeo, certifique-se de que as legendas estão disponíveis. Além disso, certifique-se de que o áudio não é uma experiência necessária na sua experiência digital de designer. Com exceções especiais, claro, é claro, há muito mais que ele poderia fazer para tornar experiências de design digital acessíveis para o usuário. E é ótimo ter isso em mente. Certifique-se de que seu código ou desenvolvedor é colocado nessas discussões no início para que eles possam implementar muitas delas. 7. Teoria de layout digital eficaz: Falamos sobre vários aspectos para pensar ao projetar para sites de mídia social. Experiências móveis mais. Mas e os layouts digitais estáticos, como campanhas de e-mail, outdoors digitais, ícones, slides de power point? Qualquer livro abrange todos esses itens diferentes. Capte o usuário em uma situação diferente. Outdoors digitais pegam as pessoas dirigindo rápido de seus carros e seus distraídos com um foco muito limitado. E a chave para um design de outdoor digital sólido e outdoors impressos é tornar algo legível em cinco segundos. Você pode usar fundos e gráficos simples para tornar este processo rápido e fácil para eles. Evite números. Não muitas pessoas podem escrever números de telefone enquanto eles estão dirigindo, mas eles podem se lembrar de um simples seu l ou site. E quanto às capas de livros E? Você já tentou encontrar um livro e na Amazon ultimamente? Você sabe quantas capas diferentes você olhou ao tentar encontrar um livro? Sugiro visitar amazon dot com e olhar para os livros ou livros e. Observe a rapidez com que você percorre essas capas, que capas pegar seu olho amarelo capas brilhantes, aqueles com uma foto atraente. Temos que ter em mente onde e como o espectador vai primeiro livro visualizador cobrir temas complexos ar difícil de digerir como eles são quando você pode fisicamente pegar um livro na livraria, modo que as capas digitais tendem a ser mais simples na natureza. Você está percebendo um tema com simplicidade com projetos de design digital? Tenho certeza que sou. Você tem que pensar sobre sua situação de espectador para cada projeto digital diferente. Por exemplo, campanhas de e-mail. Eles podem ver isso em seu computador desktop e ver uma imagem de alta resolução agradável e grande. E esse mesmo e-mail pode ser visto em seu navegador móvel na imagem é pequeno e tem um baixo impacto. Se estiver muito ocupado, temos que nos colocar na pele do espectador e testar nossos designs e diferentes situações. O design da impressão parece fácil agora, pois há apenas um formulário impresso final para se preocupar. Mas com o design digital, há uma mudança mental que tem que acontecer. Temos que pensar nos vários dispositivos diferentes que as pessoas temem o seu conteúdo. Tenho uma pequena tarefa para você. Estude o seu na caixa este mês. Fique atento às campanhas de e-mail que atraem sua atenção, não apenas o gráfico, mas pense sobre tudo. Até mesmo a linha de assunto do e-mail às vezes gráficos e setas e até emojis podem ajudá-lo a se destacar em sua caixa de entrada. Por mais irritante que às vezes pareça, eles são eficazes. E que tal uma campanha leva você a clicar em qual é o objetivo principal de qualquer campanha de e-mail ? Está levando os usuários a esse objetivo que pode ser comprar um produto ou deixar as pessoas entusiasmadas com um anúncio de serviço. Os que acho mais eficazes simplificam a mensagem o máximo possível. Em vez de falar sobre duas atividades feitas ou dois eventos principais, como boletim informativo por e-mail, eles tendem a ser hiperfocados em que um objetivo de usuário? Eles usam uma única imagem acima e muito pouco corpo copiadora texto, mas um grande clique através do botão ou um grande chamado de clientes ação. Às vezes, uma vez que você fala sobre uma coisa grande, mas eles tendem a querer que você também aperte um monte de coisas já porque você está enviando um e-mail para todos os seus contatos. Eles querem ser eficientes, mas os e-mails que convertem o melhor têm um único foco. Tente educar o cliente sobre esse fato e praticá-lo em nossos próprios projetos de campanha. Newsletters são um pouco diferentes, e é aí que ele poderia ser mais elaborado com informações. E isso é com todas as coisas projetadas, mas seja consistente com sua marca e ter campanhas digitais conectadas. Além disso, com todos os projetos digitais, precisamos manter essa consistência de brincadeira. Você não precisa fazer com que cada modelo digital seja um cortador de cookies, mas certifique-se de usar cores semelhantes em todas as campanhas, pois os espectadores podem ver sua campanha em diferentes lugares, levando-os lentamente a um funil que as converta para uma venda. Por exemplo, eles podem ser veiculados em um anúncio do Facebook. Eles se inscrevem para obter mais informações e, em seguida, recebem uma campanha de e-mail. Eles também podem ver um anúncio de exibição em um site de notícias e clicar em uma página de destino. E então eles clicam fora. Mas então eles são redirecionados por uma campanha de mídia social no Instagram. Ter uma marca consistente e cores pode ajudá-los a reconhecer a trilha e mais longe do processo do funil de vendas. Eu queria ter certeza de mencionar grades o que é ótimo sobre projetos de design digital, como eles poderiam ser de natureza semelhante para imprimir projetos de design e o fato de que ambos podem usar o sistema de grade para seu benefício. Rids ar guias fantásticos que nos ajudam a bloquear conteúdo importante e seu design. Eles podem nos ajudar a encontrar a colocação correta de um rosto da parte principal de um logotipo e uma mídia social projetada. Por exemplo, eles poderiam fornecer orientação para trabalhar com layouts da Web complexos e layouts de APP móveis. Quando você está lidando com produtos digitais, você também está lidando com pixels. Às vezes é bom ter uma grade para conhecer suas margens da mesma largura. Em todos os lados são as calhas entre as colunas de um site ou mesmo são. Os botões em um aplicativo móvel estão alinhados com espaçamento e alinhamento semelhantes. Existem muitos sistemas de rede diferentes que você pode usar em produtos de Detroit. Por exemplo, layout de site móvel tem uma grade padrão de quatro colunas, mas um site pode ter uma grade de coluna padrão 12 Gullit que pode ajudá-lo a encontrar o espaçamento certo entre fotos, colunas e mawr. Com o ícone AP Design Apple criou esta grade maravilhosa com base nos princípios da relação dourada . Isso nos ajuda a descobrir a colocação adequada de elementos para criar atraente. Fácil de encontrar ícones de aplicativos Se usado corretamente, você pode usar uma grade modular boxer para ajudá-lo a bloquear Uma campanha de e-mail é uma capa e livro para ajudá-lo a encontrar um equilíbrio entre elementos de design. Há muito o que pensar ao projetar projetos digitais, mas no final, algumas das mesmas bases básicas de design, como tipografia adequada, foto e layout anel verdadeiro no espaço digital está bem. Nós adicionamos elementos que se preocupam agora, como visualizar o tamanho de uma tela, a distância para uma resolução de tela e como o tipo é renderizado na tela. Mas, no final, são esses princípios básicos de design que podem ajudá-lo a criar projetos digitais atraentes . Agora levamos algum tempo para aprofundar a teoria do design digital forte. Vamos abordar muitos projetos que são considerados uma grande parte do espaço de design digital, como campanhas de mídia social, YouTube, miniaturas, miniaturas, capas de livros, campanhas de e-mail, um site móvel, ícone de layout, aplicativo de design, design de ícones, postar instagram quem e muito mais. Então vamos em frente e começar com alguma aplicação prática 8. Projeto de miniaturas do YouTube: Bem-vindo à Adobe Photo Shop. Vamos fazer para o nosso primeiro projeto, uma miniatura do YouTube. Então, como você sabe, nós conversamos um pouco sobre isso nas seções teóricas, mas o YouTube apelidou pregos. E para ser simples, não muito complexo, mas uma atenção muito, muito agarrada. É quando usamos cores de alto contraste. Usamos tiros de pessoas. Usamos coisas diferentes para realmente ajudar a chamar a atenção das pessoas nessa miniatura muito, muito pequena. E qualquer pessoa que esteja no YouTube ou que trabalhe para alguém no YouTube ou que queira ter um cliente para o qual trabalha e você faz miniaturas como parte do seu trabalho? Você vai perceber o quão importante é fazer essas miniaturas de atenção agarrando e fazê-lo de uma forma que faz um gráfico convincente. Então, vamos fazer este exemplo aqui. Temos algumas miniaturas do YouTube que vão fazer nesta seção. Vamos andar no trabalho primeiro, e isso requer apenas três imagens. Eu peguei todas as minhas imagens do peitoral als dot com. Há também cinzas unspool e um par de outros picaretas obedecer, mas eu vou estar usando essas imagens e sinta-se livre, já que isso é mais começando a entrar em nível intermediário para usar suas próprias fotos de uma maneira semelhante, mas colocando seu próprio spin nele para que você não precise usar essas fotos. Mas se você quiser um link para eles, eles estão no guia de recursos. Só vamos usar imagens para este 1º 1. A maioria vai ser um foco na tipografia. O que é uma grande manchete é doar 10 mil dólares em 24 horas. Um aviso de manchete muito curto. Não estamos colocando todo o título do vídeo, e havia apenas selecionando o que iria chamar a atenção das pessoas. Isso nos dará uma chance de realmente fazer a tipografia de alto impacto e maior e realmente emparelhar bem junto com a foto principal. Então aqui vai ser a nossa foto principal. Esse é o cara do YouTube. Quem é, claro, eu inventei o YouTuber fictício. Então eu tenho isso em pixels, mas vamos usá-lo como nossos caras fictícios do YouTube vão dar de presente sendo muito generosos e doando $10.000. Então primeiro nós precisamos tipo de isolar e esta é uma classe intermediária, então eu vou tipo de rever mais coisas de nível intermediário. Então precisamos isolar esse personagem. Então, precisamos isolar essa pessoa. Então, há alguns truques. Estou usando Photoshopped 2020 quando estou filmando agora. Então há um par de truques que podemos dialogar Nós poderíamos apenas ir para selecionar um assunto que é o caminho mais rápido que eu sempre vou para isso. Isso saiu em versões 2019, então se você tem um 2018 ou anterior, você não vai ser capaz de ter isso. Mas olha como lindamente que cortar isso que poupa muito tempo. Outra razão foi atualizar seu software não é uma má idéia. Quando você começa a fazer projetos de nível intermediário e trabalho de cliente pago, ele paga por si mesmo. Então temos este homem isolado. O que eu posso fazer é que há algumas coisas que eu poderia apenas fazer uma cópia e colar, e eu tenho este homem bem aqui. Podemos trazê-lo para a outra área, ou podemos fazer uma máscara gritante. Então vai ser um mestre de camadas bem aqui em baixo, e isso faz um trabalho um pouco melhor. O que eu amo sobre camadas Mass é que eu posso entrar e eu posso liberar a máscara de camadas para que eu pudesse clicar com o botão direito e desabilitar minha máscara de camadas, e eu vou ser capaz de obter minha foto original de volta. Então eu gosto de ser capaz de fazer isso. Chama-se edição não destrutiva para aqueles que já sabem ou para aqueles que não sabem. Então eu posso clicar com o botão direito, e eu posso habilitar a máscara de camada novamente para obter o meu corte, e eles vão estar recortando um monte de coisas usando máscara em camadas em vez de apenas copiar e colar, porque eu sinto que eu nunca quero ir de volta a algo Quando eu usei massa em camadas. Eu sempre posso voltar para a foto original, e isso é o que há de tão bom nela. Realmente, Salvas são o seu tempo quando você faz outros passos, essa é uma maneira de cortá-lo para fora. Claro, se você não tem a nova versão, você provavelmente vai acabar fazendo para este. O fundo é simples o suficiente onde eu poderia apenas fazer a varinha mágica, ferramenta e selecionar ou ainda melhor, eu posso obter a ferramenta de seleção rápida e aumentar o tamanho do meu pincel para ferramenta de seleção rápida e apenas fazer isso e então eu tenho que ir para trás e para a mão. Selecione isso ou use a ferramenta de seleção. Muitas maneiras diferentes de catapultar objetos foram definitivamente estar praticando todos aqueles mais tarde no curso, então vamos mantê-lo simples. Vamos manter isto rápido. Bem, vamos em frente e clique com o botão direito em uma massa capaz ou em camadas que fizemos. E vamos trazê-lo para o nosso modelo para que você possa acessar este modelo. É um recurso para download é uma parte desta classe. Cada projeto terá algum tipo de modelo que você poderia abrir e usar, então as coisas já são tamanho da maneira que você precisa Teoh e você pode começar a projetar. Mas para fazer isso eu apenas fiz um documento 12 80 por 7 20 pixels, e eu fui em frente e criei em 300 dp. Eu resolvo porque eu sinto que quando eu faço imagens digitais, especialmente no YouTube e Facebook com mídias sociais, é melhor projetar e que o formato de resolução mais alta. Em seguida, é um menor porque você nunca sabe quando você pode precisar usar os gráficos ou algo um pouco maior, e eles sempre reduzir o tamanho do arquivo para você, se necessário. Então não é um grande negócio com o tamanho do arquivo aqui porque eles fazem tudo isso para você automaticamente com o servidor. Por isso, gosto de manter as coisas numa resolução mais elevada do que algumas. É por isso que estou fazendo uma boa resolução de 300. Uma borda vermelha. Isto é apenas ter uma fronteira em quase todos os projetos. Só para eu não manter as coisas perto do limite. Isso não é obrigatório pelo YouTube, mas isso é obrigatório por mim porque eu gosto de manter as coisas agradáveis e limpas nas fronteiras. Nenhum tipo ou texto na borda vermelha. Mas você pode ter fotos sangrando até ele. Só não inclua olhos ou elementos importantes. Você não quer colocar isso tão perto da borda. Parece ansioso. Isso é apenas uma prática de design útil para manter as coisas dentro da margem. Ok, então aqui está o nosso modelo. Vou em frente e trazer nosso painel de camadas aqui. Você pode ter suas janelas organizando de qualquer maneira. Não tenho de copiar o meu sistema de janelas, mas basta fazer os que acabei de usar no meu próprio fluxo de trabalho pessoal. E no nível intermediário, você está começando a descobrir que tipo de painel eu quero, que janelas eu quero abrir para que você possa começar a personalizar seu próprio painel . Então aqui estão as três camadas que temos. Temos uma camada de texto. Você poderia ir e desligar isso? Não precisamos disso por enquanto. E nós temos a nossa margem, que era para continuar por um pouco mais. E temos estes guias sobre os quais tenho os meus governantes. Então, se você não tem suas réguas sobre e nós realmente vamos precisar de nossos governantes aqui em, nós fazemos Social Media Post basta ir para cima para ver e, em seguida, ter sua exibição extra Se você quiser que os guias para estar em e suas réguas, se você quiser o para estar em, é claro, você pode clicar e arrastar de suas réguas para criar seu próprio guia. Basta clicar aqui e arrastar para ser capaz de criá-los. Então vamos trazer o nosso homem aqui olhando para baixo antes que eu o reduza de tamanho. Vou fazer algo um pouco especial. Eu Agora ele não é uma camada inteligente, e eu gostaria de torná-lo uma camada inteligente porque quando eu se ele não é uma camada inteligente e eu reduzi-lo em tamanho, e então eu torná-los maiores novamente. Decidi fazer um maior de novo por alguma outra razão. Ele comeu pixel, mas se eu torná-lo uma camada inteligente, ele vai manter a resolução original da foto intacta o tempo todo. Então, quando você está trabalhando com fotos, se você pode mantê-lo em camadas inteligentes enquanto você pode, às vezes você tem que fazê-lo. Rass tenta editar uma foto em profundidade. Mas se você pudesse ir em frente e clicar com o botão direito e torná-lo uma camada inteligente aqui no lado direito desta camada para a direita, clique e obter uma cabra e converter em objeto inteligente. Então agora isso vai se tornar um objeto inteligente que pode dizer por aquele pequeno, uh, ícone bem ali. Vamos fazer isso com quase todas as fotos até que precisamos Rast levantá-las para editá-las. Por isso, agora posso reduzir o tamanho dele. Eu poderia torná-lo muito pequeno e o que é ótimo. Se ele não fosse um objeto inteligente e eu os fizesse maiores, ficaria desfocado. Mas agora ele está mantendo a resolução mesmo quando eu o faço maior ou menor, então isso é tão útil em termos de fluxo de trabalho e ter uma atmosfera de edição não destrutiva . Então vamos posicioná-lo da maneira correta. Não queremos que sejam tão grandes que ele diga: “ Uau, Uau, ele está lá fora, cara. É bom ter pescoço e ombros, mas também não queremos diminuir o zoom. Começamos a perder esse impacto emocional. Então, quando você diminui assim, você está realmente começando. Você não está se conectando tanto com o rosto e os olhos dele, e ele já tem óculos escuros, que é um pouco uma barreira emocional. Então você quer tipo de zoom em um pouco mais do que isso, para que você possa. Eu quero ter esse bom ponto de caminho onde ele está. Você está ampliando sua conexão com esse rosto, mas também não é esmagador, e você tem muito espaço para texto. Vá em frente e tempo de colheita aqui. A partir de agora, podemos sempre organizar mais tarde, então vamos em frente e aplicar um bom fundo de alto contraste. Então vamos fazer uma cor rica e escura. Vai fazer as nossas amostras. Vamos ver se conseguimos fazer uma cor azul púrpura. Só temos de ir às minhas amostras e pegar a minha ferramenta de balde de tinta, fazer uma nova camada e ir à frente de pop em uma nova camada e derrubá-lo. Então é aqui que eu vou desligar as margens só para que eu possa limpar tudo para mim. Eu também vou desligar meus extras, que serão meus guias não precisam. Também há um atalho de teclado para isso. Só preciso de uma imagem clara por enquanto. Vamos adicionar o nosso tipo. Então, o que é uma cor agradável complementar para azul? O que tem a cor de contraste mais alto que você pode pensar em azul? Se você olhar para a roda de cor amarela, isso vai aparecer o máximo possível. Então é exatamente isso que vamos usar essa combinação azul e amarelo para as cores de alto impacto mais alto contraste. Então você não quer usar isso para tudo e design. Mas para o YouTube, é tudo sobre atenção. É tudo sobre chamar sua atenção, então vamos usá-la aqui. Então vamos selecionar uma cor amarela agradável que não entraria em nossas amostras e amarelos. Todo o tipo de coisas que podemos fazer aqui. Vamos pegar nossa tipografia. Eu só vou ir em frente e carregá-lo e eu estou usando. Neste momento é um tipo ou é uma fonte chamada trabalho de campo, e está na fonte dhobi. Então, se você tem a assinatura adobe, você tem acesso ao spot gratuitamente. Sinta-se livre para usar outro rosto de tipo livre e de código aberto que você obtém de fontes do Google. Google Fonts tem um chamado ferroviário, que é muito perto. Então, se você não tem a assinatura adobe, sinta-se à vontade para acessar fontes do Google e usar a ferrovia ou outro tipo simples de areia Sarah. Então eu vou em frente e carregar isso. Isto vai ser simples. Copie e cole. Vou colocar cada linha no seu próprio tipo de jogador. 9. Projeto de miniaturas do YouTube - 2: Então eu vou em frente e quebrar isso um pouco mais. Quero que seja uma tipografia empilhada. Então o que eu poderia até fazer é cortar isso, criar uma nova camada de texto. E tem isso como palavras separadas que é aqui que precisamos realmente pensar sobre Como trabalhamos com nossas fontes? Como nós os organizamos de maneiras diferentes? Então, dar de presente, vamos ver se podemos colocar isso em empilhados quando eu posso fazer é que a caixa baixa parece suave? E eu gosto disso. Mas nós realmente queremos ter esse alto impacto emocional. Darei 10 mil dólares em 24 horas. Então vamos fazer um caso superior. Todas maiúsculas são todas letras maiúsculas. Eu vou descer aqui para o meu painel de personagens e apenas ir em frente e fazer tudo cap e eu tive ir em frente e fazer isso para esses dois. Bem, pelo menos estamos começando a fazer algum progresso em termos de como queremos organizá-lo. Então vamos dar. Queremos ter certeza que as coisas estão apertadas como uma manchete, mas não queremos que seja muito apertado porque isso é esmagador. Mas quando eu tenho apertado o suficiente onde ele se sente como se fosse uma frase principal e assim com o em 24 horas, nós poderíamos fazer isso tudo maiúscula é bem, mas então ele começa dedo do pé para o outro e ser uma sensação como uma manchete muito mais longo. Então eu realmente vou tomar a decisão de fazer isso manter esse minúsculo e um pouco menor e talvez fazer um tipo de alinhamento diferente. Então apenas tipo de bloqueio ou tipografia como fazemos com muitos outros projetos. E então é aqui que vamos, OK, precisamos quebrar essa manchete porque há quatro linhas e está tudo gritando comigo. Está tudo um pouco ansioso demais. Quero dizer, é quase muito alto contraste, então uma coisa que podemos fazer é usar contraste com a cor e o tipo deles. Então, uma coisa que eu poderia fazer é ir em frente e fazer este branco que apenas faz esse tipo branco e , em seguida, os $10.000 realmente se destaca. Então você percebe como essa manchete é automaticamente um pouco melhor. Quebra-o ao meio. Dando uma pausa de 10 mil dólares em 24 horas. Só porque mudamos a cor, ajuda muito a torná-la um pouco menos esmagadora. Mas também ajuda a ler melhor porque está quebrado. Então, usando contraste com o peso do tamanho, este é um desses fatores em ação. É uma coisa que é muito popular fazer é criar camadas de tipos e fotos. Então uma coisa que podemos fazer é trazer todo esse tipo. Certifique-se de que está abaixo são camada tipo de ver se não podemos encontrar uma oportunidade de ter uma carta ou ir atrás deles apenas para adicionar o olhar em camadas um pouco? Não tem que ser todas as letras porque isso tornaria difícil de ler. Mas talvez o G G é uma letra muito forte, e a maior parte do impacto ou da legibilidade do G está no lado direito do G. Então eu acho que nós podemos dar ao luxo de ter um pouco coberto e então nós podemos apenas meio que vivo isso como tal. E uma coisa que eu gosto de fazer é ter algum alinhamento. Então, se eu não tiver um homem de linha à esquerda. Eu quero tê-lo à direita para que possamos ir em frente e torná-lo um pouco maior para que lado direito estas letras estejam alinhadas. E então nós poderíamos até mesmo fazer os 10.000 dessa forma para Aiken Select todos estes três apenas indo para fazer um alinhamento certo. Apenas certifique-se de que tudo é a linha para a direita, e este é o momento em que precisamos estourar em nossas margens e ir bem. Vamos ultrapassar as margens? Você pode um pouco. Está tudo bem. Não é. Não é uma regra. É apenas para ajudar a guia útil. Então você pode mantê-lo assim, ou eu vou ver se eu posso tirar essas coisas da margem um pouco para que ele fique dentro e então você fala. Também podemos usar grades para perder muito grades neste curso mais tarde. Então estamos recebendo o layout básico. Precisamos ter algum tipo de fundo porque agora é uma cor sólida. Destaca-se, não funciona, mas o que podemos fazer para tornar esta foto ainda mais intrigante? Há muitas coisas que podemos fazer. Então estamos dando dinheiro no que seduz as pessoas sobre o dinheiro ver direito? Mas não vamos fazer com que seja totalmente esmagador. Vamos fazer um bom elemento de fundo com notas de dólar. Então eu tenho esta nota e vamos usar esta foto aqui, e eu vou trazê-la para o fundo. Ele vai colá-lo e eu vou clicar com o botão direito, e eu vou ter certeza de criar um objeto inteligente. Então, quando eu reduzir em tamanho e trazê-lo de volta maior, ele não vai ficar embaçado ou ter a resolução reduzida o único problema e este é apenas um problema prático quando você faz algo um objeto inteligente é, ele mantém essa resolução, que é o que você quer, mas torna o tamanho do arquivo super enorme. Então, se você não tiver um computador novo, às vezes ter 10 objetos inteligentes que são fotos pode realmente tornar seu computador lento. Essa é a única desvantagem é que ele aumenta o tamanho do arquivo do documento do Photoshopped. Então vamos enquadrar isso. Vá em frente e traga a camada dela todo o caminho de volta. Eu estava tentando enquadrar isso. Queremos que o único seja visível para que as pessoas possam dizer que é um dólar e precisamos rastrear isso de volta para que possamos reduzir a opacidade e, você sabe, você sabe,tudo bem. Vamos tentar fazer um modo de mistura e vamos usar cargas de mistura. Também muito. Este curso, vamos tentar encontrar um que combina que também mantenha esse azul rico para ele. Então vamos passar por isso e encontrar o que achamos que seria o melhor. Isso é que a sobreposição tem uma arma moderna agradável, quase lhe dá um tipo de tom púrpura, que é muito moderno, apenas tipo de andar de bicicleta através destes para encontrar um. Nós vamos ficar com a sobreposição para o modo de mistura para isso, e eu quero tipo de ajustar o fundo um pouco agora. Só quero adicionar um pouco mais de roxo. Era meio que adicionar um pouco mais púrpura a isso. Então o que podemos fazer é agora temos o fundo interferindo com o tipo. Podemos adicionar uma sombra ou podemos mantê-lo limpo e apenas lentamente meio que reduziu a transparência, esse fundo e apenas as áreas onde ele se sobrepõe ao tipo. Então vamos fazer isso usando máscaras. Então eu tenho arte Dollar selecionou. Vou adicionar uma máscara de camadas para fazer isso muito na aula. Então, na máscara de camadas, eu vou pintar com o pincel. E com a maioria da massa em camadas quando apago ou adiciono à máscara em camadas, gosto de pintar com uma escova redonda macia. Ah, rodada dura. É apenas um software pouco irrealista e dá aquele olhar emplumado agradável. Então eu estou usando um pincel redondo macio geralmente gosto de usar um pincel grande agradável para ter mais de um desvanecimento realista. E nós vamos pintar se você ainda não sabe disso. Se você tem um mascote em camadas, peça a massa em camadas eleita, não a camada principal. Assim, a máscara em camadas Quando você usa preto, você pode pintar um objeto. Então eu vou pintar isso onde eu pinto preto na máscara de camadas e você pode ver o Maskell em camadas bem aqui onde eu pinto no preto, e eu posso recuperá-lo trocando o dedo do pé branco e pintando de volta para que você possa ganhá-lo de volta por branco e, em seguida, apagá-lo é a nossa eliminação. É o preto. Então nós vamos fazer isso aqui com o preto onde você vai reduzir a transparência do nosso pincel macio e apenas tipo de sutilmente se livrar de um pouco desse fundo para que ele não competir com o tipo. Não queremos fazer isso. A última coisa que queremos fazer, podemos até desaparecer um pouco aqui em direção ao fundo. Então você realmente, realmente se concentra no tipo de Mrs. More de um elemento de fundo. Então, uma coisa que podemos fazer aqui é adicionar um pouco de cor. Então, agora, temos apenas um fundo de cor sólida. Mas o que é realmente popular agora é ter aquele fundo de cor sólida, mas adicionar um modo de mistura rico ou cor em cima dele. Então nós vamos adicionar uma nova camada, e isso vai ser uma camada em cima de tudo. Então, vamos adicionar uma nova camada, e vamos manter a mesma escova redonda macia. Vamos torná-lo bem grande. Então vamos torná-lo bem grande. Tente 1000 ou mais. Isso é provavelmente bom. E eis o que vamos fazer. Vamos pintar um pouco de calor agora. Temos muita coisa legal acontecendo. Temos muitos roxos e azuis. E se fizermos isso quase ao pôr-do-sol ? Eu tenho no lado superior esquerdo, então eu tenho nossa nova camada em branco selecionado, e eu vou apenas chamar este destaque e eu vou apenas clicar. Eu poderia ir em frente e selecionar uma agradável cor quente do pôr do sol. Ele podia fazer laranja. Você faz um tipo de cor rosada e vamos em frente e basta clicar uma vez. E agora é muito forte, e tudo bem, porque isso é o que modos de mesclagem ou quatro. Vamos fazer o overlay ou o lighten 11 desses para ver o que fica melhor. Há sobreposição, mas quase faz a pele parecer um pouco para ler. Então vamos tentar o clareamento Então o relâmpago vai ter este belo, quase um efeito de fita de filtro do Instagram para isso, E é exatamente assim que os filtros do Instagram são criados usando modos de mistura e cores em cima das coisas. Clique novamente uma vez, mas não queremos exagerar. Só queremos adicionar um pouco de calor ali. Também podemos fazer isso com seus óculos de sol, então, se quisermos reduzir isso um pouco. Nós não poderíamos adicionar um pouco de cor do pôr do sol aos óculos de sol. Aquecer isso um pouco. Claro, se eu tivesse isso em uma camada separada, Aiken apenas desligá-lo em um e reduzir a opacidade. Se eu achar que é muito forte, muitas coisas que poderíamos fazer então isso é antes parece ótimo. Mas isso acrescenta um pouco de riqueza a ele. E vamos fazer isso muito quando se trata de fotografia e trazer o pôr-do-sol, Mawr e fazer algumas coisas assim mais tarde, não podemos adicionar um pouco de sombra. Isso não vai nos matar. Eu não sou um grande fã de sombras fortes. Gosto de sombras muito claras. Então, digamos que eu queira adicionar sombras a todas as opções Então, a maneira mais rápida de fazer isso do ponto de vista do fluxo de trabalho. Vamos em frente e adicioná-lo, como eu gosto dele no 1º 1 Então eu estou apenas no meu painel de estilo de camada, e eu vou tipo de ter um olhar muito bonito. Quão pouco estão movendo as alças naqueles Apenas uma pequena sombra de gota muito agradável. Vou dizer isto como um estilo. Então, vou dizer isto aqui. Novo estilo. Olhe aqui para fora e eu vou dizer isso. Ele caiu sombra YouTube e eu vou incluir camada afeta. Não tenho que fazer ideia de opções de mesclagem porque não estou usando. Olhe OK agora para poder acessar isso, eu poderia ir para o painel do meu estilo bem aqui do painel do meu estilo, e você rolar para baixo para usar o meu será carregado, e eu posso selecionar todos estes e aplicar a mesma sombra. Então é só uma espécie de economia de tempo. Se eu quiser adicionar uma sombra para tudo, e eu não sinto vontade de ir para cada camada e adicionar a mesma sombra. Você pode usar estilos de caractere para acelerar facilmente esse fluxo de trabalho. E isso é exatamente o que esta classe pretende é melhorar e acelerar seu fluxo de trabalho e encontrar maneiras de fazer as coisas mais rápido e melhor. 10. Projeto de miniaturas do YouTube - 3: Então vamos adicionar alguns retoques finais. Podemos adicionar um pouco de sombra para ter certeza de que sua cabeça tipo de lançar uma pequena sombra no G, usado para adicionar um pouco desse efeito em camadas. Só estou fazendo uma sombra simples e vamos trazer a distância e eu vou liberar a luz da escola porque eu não quero que meu outro tiro seja afetado. Então eu estou apenas clicando nisso e encontrar o ângulo certo de onde ele é lançado bem ali seria perfeito. Sombra muito espiral. Não há muita capacidade. Apenas o suficiente para dar um pouco desse olhar em camadas. Um pouco de riqueza. E por último, há algumas coisas que precisamos fazer. Primeiro de tudo, precisamos fazer um teste de visibilidade, então testes de habilidade visíveis diminuindo um pouco. Então vamos fazer 50% e essa é uma forma realista de enquadrar suas coisas porque você quer fazer testes de visibilidade. Você pode obter uma imagem realista de como o espectador vai ver seu documento digital . Então, neste momento, este é provavelmente um tamanho de miniatura de serra realista que você verá em uma tela da área de trabalho e poderíamos reduzir até Mawr para fazer uma visita. Teste de habilidade. Então, posso ler? Sim, o tipo é muito claro. Eu podia ver os óculos do homem. Eu poderia ver os cifrões e você poderia dar mais um passo e ir para 25% e ir. Ainda posso ler? Se a miniatura for menor, ainda posso lê-la? Sim, eu posso. Ele verifica todas as caixas para passar em todos os meus testes, então estou pronto para levar um pouco mais a sério sobre me preparar para exportá-lo. Já se passaram cerca de 20 minutos, e esse é o momento em que você quer poder fazer uma miniatura do YouTube com mais de 20 minutos. Você precisa encontrar maneiras de acelerar seu processo de juntar as coisas porque queremos ser rápidos, eficientes e fazer um bom trabalho. Então é isso que o designer intermediário a avançado precisa começar a fazer é mover-se rapidamente e obter ideias surgindo para que você possa cobrar, você sabe, para sua hora de trabalho por uma miniatura e não sobrecarregar e levar cinco horas para fazer o que deve ser feito muito rapidamente para vídeo. Então agora temos esse fundo rico e colorido. Temos esse tipo branco amarelo rico e de alto contraste acontecendo. Uma coisa que podemos fazer é como muitos de vocês fazem. Isto é eles vão fazer sua foto ou a foto principal escala de cinza para que a tipografia tem uma chance de realmente sair. Vamos tentar isso. Aqui temos a nossa camada aqui. Vamos subir e ver se conseguimos fazer isso preto e branco. Então eu vou descer e você vai notar quando você tem uma camada inteligente ou um objeto inteligente em uma foto. É ótimo para dimensioná-lo. Mas quando você precisa fazer edições, isso faz com que seja um pouco difícil é quando eu vou a sua imagem. Eu ainda posso fazer isso de habilidade cinza indo para preto e branco. Mas eu perco um pouco do meu de saturar um par de opções diferentes. Se você quer ter essas opções, você vai ter que rast levantá-lo para obter um clique direito e você vai ter que rast levantar a camada. Isso não significa que você não pode. Você não tem a habilidade de escalar para cima e para baixo como você fez antes. Quero dizer, você ainda pode, mas começa a perder sua qualidade e seu tudo. Mas isso é meio que eu acho que eu ainda poderia fazê-lo preto e branco sem ter que fazer nada. Eu poderia estar saturado de algumas maneiras diferentes. Eu vou para a opção preto e branco e apenas fazê-lo lá. Então você notou esse tipo de tom para baixo e trouxe o 10.000 o amarelo no 10.000 para que você possa ter a cor cheia. Você poderia ter um preto e branco. Vou clicar neste homem, e vou afiá-lo um pouco. Então eu estou indo para baixo e indo para afiar e apenas obter um afiado nele um entalhe só para tipo de nítir a imagem um pouco mais. Então eu acho que há uma coisa que poderíamos fazer para tornar isso ainda melhor. Então, se você tem outro tipo de foto, às vezes você está preso o cliente ou você. Se você estiver fazendo suas próprias miniaturas do YouTube, você ficará preso com uma foto específica. Você só tem um conjunto de fotos, mas como designers estavam sempre se esforçando para fazer coisas melhores e melhores. Então, o que poderia fazer isso mesmo Morvan alto, alto impacto, miniatura do YouTube? Bem, todos nós nos conectamos com os rostos das pessoas, ar, ótimo para ter em seus rostos sorridentes. Um realmente bons rostos emocionais como rostos irritados são muito bons. Rostos neutros ou não. Mas e se tivéssemos uma expressão facial ainda mais exagerada como sim, como uma excitação igual a esse cara, esse cara aqui, olhe essa cara. Se o colocarmos em uma miniatura do YouTube, ele realmente agarraria um pouco as pessoas. Claro, você é limitado. Às vezes, se você tem que usar o proprietário do canal do YouTube, quem fez o vídeo, mas apenas tipo de mostrar a você tipo de psicologia emocional por trás de quais fotos escolher eo que converter melhor eo que. É um design mais eficaz e digital. Então vamos isolar esse cara. Vamos ver como ele pode fazer isso. Vamos ver se podemos fazer o nosso assunto de seleção de dandy. Vamos ver o que ele faz. Adoro esta ferramenta. Uma das maiores razões pelas quais você deve atualizar para 2019 se puder pagar. Algumas pessoas não conseguem. Está tudo bem. Vamos fazer a mesma coisa. Vamos fazer uma máscara de camada e pegá-lo. Poderíamos cortá-lo um pouco. Não vou precisar de todo esse céu. Nós estávamos pegando nossa ferramenta de colheita para cortá-lo e vamos em frente e trazê-lo para dentro Então esta vai ser uma segunda versão. Teremos duas versões diferentes. Vamos ter duas versões diferentes, então vou ao nosso quadro de arte, pode ser aqui em cima. Vou clicar na ferramenta de movimento. E eu tenho a minha ferramenta de quadro de arte e eu vou estar adicionando um quadro de arte, então ele vai ir em frente, clique e vá em frente e clique na adição. Ele vai adicionar um novo quadro de arte e eu vou copiar e colar o que tínhamos antes, então eu quero ter duas versões diferentes para exportar. Então eu poderia fazer foi chamado de ser dividido teste. Então eu posso tentar uma imagem para fora uma miniatura para ver como o vídeo se converte, e que eu poderia tentar a outra. Isso é chamado de ser dividido testando o seu basicamente dizendo qual funciona o melhor tudo um quadro de arte um que poderíamos copiar sobre a placa de arte para Então eu só selecionei são pobres um. E eu acabei de copiar para ir ao quadro de arte, também. E eu só vou colar, então parece que já adicionou um quadro de arte para nós. Então isso é um passo. Agora sei que não temos de o fazer. Isso é legal. Então foi em frente e copiou o quadro de arte também. Então agora ele pode funcionar em ambos. Então eu ainda tenho o nosso homem pulando Traga-o e vamos eliminar o nosso homem e o nosso destaque, porque nós vamos ter que ver isso mais tarde. E vamos ver se podemos simplesmente colar esse cara. E é claro que queremos, certo? Clique aqui na camada e faça que um objeto inteligente converta em objetos inteligentes, e agora podemos movê-lo ao redor, escalá-lo sem problemas. Então, onde vai estar? Talvez precisemos de zoom para este. Onde vai ser a melhor maneira de colocá-lo para fora com o tipo? Então o que queremos fazer e isso é apenas um tipo de psicologia comum do design é que queremos ter globos oculares enfrentando o tipo porque, como humanos, olhamos para os olhos das pessoas e estamos interessados no que elas estão olhando. Então, se você enfrentar os globos oculares em direção ao tipo, isso ajuda a se conectar com o tipo. Então vamos movê-lo para que os olhos dele estejam virados possam sempre refleti-lo se precisarmos. Mas vamos tentar um arranjo de tipo diferente. Então eu vou selecionar todo o meu tipo, movê-lo e ver se eu consigo encontrar um arranjo melhor. Então eu vou ter que torná-lo muito menor. Então aqui está o novo corte de um arranjo. Temos todo o comprimento do braço. Se cortarmos o braço, ele parece mais zangado do que excitado. Então você tem que pensar sobre como obter uma colheita. O que você ganha na foto para adicionar esse impacto emocional? Então vamos reorganizar o tipo um pouco para que ele possa perfurar o final e o G e nós poderíamos movê-lo aqui para ter certeza que dar ainda é legível. Então, à direita do fim e à esquerda do G, essas letras ainda legíveis e vamos apenas fazer um arranjo diferente em alinhamento, e podemos precisar fazer as coisas um pouco menores e tudo bem. Eu gostaria de ter a última cobertura zero apenas um pouco, mas não tanto apenas um pouquinho para fazer parecer, camada. Mas nós realmente queremos ter certeza de que $10.000 é bom e claro, e em 24 horas nós podemos alternar em nossas margens para ter certeza de que estamos fazendo um bom trabalho com isso . E nós somos. Vamos adicionar um pouco de sombra para esse cara também, porque queremos ter certeza que ele está lançando. Veja como essa sombra está se lançando no G, assim como isso está realmente resolvido. Mas faz com que se sinta mais vivo. Parece que está se conectando com a paz que poderíamos fazer. Se quisermos ser muito chiques, podemos desenhar sua própria sombra para criarmos uma nova chamada Sombra, e podemos desenhar nossas próprias sombras. Então vamos fazer uma espécie de cor escura, apenas uma cor preta ou neutra. Pegue um pequeno pincel redondo e podemos pintar na nossa sombra aqui para o homem. Poderíamos fazer isso um pouco mais realisticamente do que os estilos de camada podem, porque podemos pintá-lo como quisermos e, em seguida, reduzir a capacidade um pouco. Para que saibas, qualquer controlo que queiras ter sobre as tuas sombras. Você sempre pode voltar, aparar suas sombras a qualquer momento, e poderíamos sentar lá e iluminar aquela foto e afiar. Mas acho que estamos em um ponto de parada aqui, então temos duas versões diferentes. Qual você acha que se converte melhor? A da esquerda é a da direita, e assim a direita chama a minha atenção mais porque há mais uma resposta emocional do homem. Mas o da esquerda é bom, também, também, se você está tentando construir uma marca pessoal no YouTube porque você tem este agradável, claro ampliado no rosto Inter conhecendo o criador do YouTube, tendo alguns faciais reconhecimento repetido nestas miniaturas. Então estamos começando a entrar em marketing no lado dos negócios, mas é ótimo. É um designer estar ciente disso, especialmente aqui no intermediário, querendo ser um designer avançado de nível de alavanca pensando sobre psicologia do design, pensando sobre o que converte melhor e pensando sobre como isso vai realmente ser usado por empresas, clientes e você mesmo é um passo realmente importante para fazer você não apenas um iniciante, mas um excelente design. 11. Projeto de miniaturas do YouTube - exposição dupla: Vamos continuar. Vamos fazer isto um pouco mais rápido desta vez. Vamos fazer outra miniatura do YouTube. Este é o efeito de dupla exposição. Então vamos dizer que queremos fazer um Você estava trabalhando para alguém ou nós pessoalmente quer postar vídeos do YouTube sobre fazer ah tutorial e loja de fotos. Então isso é para um vídeo tutorial sobre fazer efeito de exposição dupla. Nós vamos até mesmo fazer isso, afetar a nós mesmos para criar miniatura pensamento que seria um pouco divertido e precisa fazer isso Abrindo um novo modelo aqui e vamos usar para fotos para isso. Nós vamos usar nossa garota, e vamos usar nosso balão de ar quente, e vamos sobrepor esses e usar modos de mistura para criar esse efeito de dupla exposição . Então vamos em frente e trazer nossas fotos e estamos com o botão direito do mouse. E vamos fazer o que fizemos na miniatura anterior. E vamos ter certeza de que é um objeto inteligente. Certifique-se de que é um objeto inteligente. Está bem clicado. Objeto inteligente. Eu vou trazê-lo para dentro Portanto, agora temos o máximo controle sobre a resolução. Não vai desfocar um passo tão essencial que eu costumava não fazer e incorporei isso no meu fluxo de trabalho há pouco tempo. E tem sido um salva-vidas quando eu preciso fazer a foto maior depois que eu a fiz menor . Então agora eu estou apenas emoldurando a foto, você sabe, apenas tipo de ver onde eu gostaria que ela estivesse. Então o objeto inteligente com o qual não tenho que me preocupar, eu sempre poderia torná-lo maior, menor depois. A mesma coisa com isto. O que é destrancá-lo, certo? Clique em converter para objeto inteligente e vamos eu estou apenas copiando e colando-o, e nós podemos ir em frente e pressione enter e trazer a mão dela, e eu quero realmente zoom sobre ela muito. Quero que o céu seja capaz de alcançar o mais longe possível, mas pode não ser capaz de alcançar todo o caminho. Obter o tamanho que eu gosto. Tudo bem, porque temos algumas ferramentas muito legais, conscientes de conteúdo que serão capazes de preencher e estender esta foto um pouco para nós. Então eu poderia até fazer isso apenas para que possamos praticar algumas dessas ferramentas conscientes de conteúdo um pouco . Então apenas enquadrar isso e os guias estão realmente me ajudando a enquadrar isso também. E eu estou pensando sobre o tipo de cabeça dela e como ela está dividida e apenas tentando pensar onde o tipo vai é bem, nós vamos ter uma frase de três palavras e nós também vamos ter um ícone de loja de fotos . Então, tem que pensar sobre o tipo. O que eu estou compondo, este é o tipo é a parte mais importante da miniatura. Por mais que a imagem nos agarre, o tipo é o que vende o vídeo. Então vamos começar a sobrepor estes um pouco. Vou trazer o nosso balão de ar quente para cima, e é assim que funciona o efeito de dupla exposição. É tudo sobre modos de mesclagem. Então eu vou estar indo para o meu painel de modo de mistura aqui para o balão de ar quente, e eu vou percorrer estes e já tenho o único em mente que eu tenho que usar . Nós vamos acabar na tela, então você percebe como a tela dá aquele tipo de vibração muito legal para ele. E quero levar este fim ainda mais longe. Então vamos tipo de organizar isso como nós gostamos. Estamos vendo o balão de ar quente e a garota. Vamos também selecionar ambas as camadas e vamos trazê-lo um pouco mais em um tiro mais apertado . Eu quero ter um pouco mais de uma conexão emocional com a garota, então só tentar ver onde posso arranjar é torná-la um pouco maior. E agora o que queremos fazer é que não precisamos de todo esse excesso de branco. Queremos ver um pouco mais do fundo do céu. Então eu estou selecionando nosso balão de ar quente e vamos fazer uma máscara de camadas com Larry Mask e eu vou pintar em “Quer remover “? Então queremos uma tinta com um pincel redondo macio. Smith, bom e grande, bom e grande. Talvez 300. Vamos pintar com negros que removerão qualquer coisa para ser um pouco maior. Talvez 400. Vamos eliminar lentamente. Certifica-te de que as minhas capacidades são 100% e estamos a trazer mais do céu em certas áreas assim. E se fizermos asneira e exagerarmos, não é grande coisa. Causa enfraquecer o dedo branco e entrar e trazê-lo de volta. Então é uma combinação de inverter entre branco e preto e ir para frente e para trás. E é exatamente por isso que estamos usando objetos inteligentes. Porque agora eu quero reduzir. Eu realmente quero mostrar mais do balão e da garota quando eu tiver o topo do azul sendo mostrado. Então agora nós temos isso não é grande coisa porque nós não poderíamos reduzir isso sem um problema. Então eu vou cortar isso um pouco diferente. E, às vezes, as fotos não se esticam muito bem como isso não faria. Isso tem um belo fundo grande para trabalhar com. Às vezes não vou cortar isso um pouco para você. Cortando esta imagem de fundo. Vamos fingir que essa imagem não se estendeu todo o caminho, e precisamos esticá-la de alguma forma. O que eu costumava fazer era duplicar o fundo e refleti-lo e subir lá para obter uma espécie de aparência perfeita. Mas isso nem sempre é prático. Agora que temos ferramentas conscientes de conteúdo, isso torna o serviço muito mais fácil. Vou desenhar uma caixa aqui, ter meu plano de fundo selecionado, vou fazer algum preenchimento consciente do conteúdo. Vou subir para editar, vou para o preenchimento consciente do conteúdo. Então edite, preenchimento sensível ao conteúdo. Vai nos perguntar onde queremos uma amostra para basicamente replicar. Vou duplicar a amostra com o que está em verde. Vai duplicá-lo no quarto fim de semana branco, apagar certas partes se não quisermos que uma certa nuvem atrapalhe ou não queremos que a nuvem seja amostrada. Podemos sempre escovar isso. Clique em OK, e ele vai preencher automaticamente com o que ele pensa. É bom provar um pouco dessa área e criar esse cara assim. Como você pode ver, conteúdo ciente e conteúdo, ferramentas Phil não são perfeitas. Conseguia ver este pequeno tipo de olhar distorcido, e podemos facilmente remendar isso de algumas maneiras. Eu tenho nosso objeto selecionado. Quando isso acontecer, as ferramentas de clonagem têm a ferramenta de clonagem que pode amostrar e clonar. Ou eu poderia fazer a ferramenta pincel de cura local e pintado. O problema com isso em ter camadas inteligentes é que quando você tem camadas inteligentes, ele não permite que você faça isso. Ele não permite que você edite a camada diretamente porque ainda é um objeto inteligente, então você terá que clicar com o botão direito e você terá que rast surgir a camada. Então eu já fiz isso, então eu não surgirei a camada. Agora é apenas qualquer foto antiga que podemos editar e fazer. Então essa é uma limitação para camadas inteligentes quando você começa a entrar na fase de edição para que pudéssemos fazer a ferramenta de clonagem neste clique de amostra e cloná-lo, foram incluídos fora. Ou você pode fazer esta ferramenta de pincel de cura de pontos, que é bem aqui em cima. Ferramenta Pincel de cura de pontos. E você pode fazer dessa maneira, também. Mas eu costumo encontrar mais controle com a ferramenta de clonagem com coisas assim. Então é clonado o topo da coisa e apenas clique sobre isso e parece que não fizemos nada, não é? Vamos diminuir o zoom. É hora de adicionar tipografia. Sinto-me muito bem com a imagem de fundo, por isso temos aquela por isso temos aquelacamada de balão superior. Ele está na tela, apenas uma espécie de revisão, e fizemos o efeito de dupla exposição. Então eu fui em frente e pré-carregou algum texto de amostra todo esse ar em linhas diferentes para que possamos ter o máximo controle sobre como organizamos o tipo. Então vamos tentar descobrir onde seria o que seria um bom tamanho para o tipo. Vamos fazer tudo um pouco maior. Também queremos abrir espaço para um ícone de loja de fotos. Em algum lugar lá embaixo, vamos organizar em vez de tentar fazer a camada olhar e ficar toda louca. Este é realmente o ponto focal da foto. Queremos manter o tipo e a foto perto, mas não queremos que tudo interfira. Vamos ter uma boa olhada limpa com isso. Vamos ter um olhar mais tradicional com isso é. Bem, o último foi um tipo muito ousado e grosso de San Serif. Vamos para uma Sarah mais elegante de tipografia, e eu tenho um tipo de em mente que eu quero experimentar. Então eu tenho um duplo clique sobre isso e ver se eu consigo uma cara gorda Brill. Eu poderia apenas digitar em um B se ele está lá. Esta é outra face do tipo adobe, mas também há várias alternativas nas fontes do Google. Se você não tem acesso à assinatura Ah, as fontes adobe, as fontes adobe, que você obtém gratuitamente com qualquer assinatura da Adobe Creative Cloud, onde ela pode usar estilos de personagem para estilizá-los rapidamente. Mas já que só há três, vou fazer os três manualmente. Então, como vamos conseguir uma multa? Mas queremos encaixá-los como uma peça de quebra-cabeça. Então vamos encontrar um bom arranjo. Então você tem esses efeitos duplos acontecendo aqui, então eu me pergunto se nós poderíamos colocar isso nesta pequena área aberta. Então você notou que eu não estou fazendo isso muito apertado, e eu não estou tendo essas grandes lacunas. Então, se eu visse muitos alunos fazendo isso, teremos grandes lacunas, mas não parece muito conectado como uma frase unificada. Então, queremos ter certeza de que fechamos a lacuna um pouco. Apenas encontrar maneiras de alinhar as coisas e colocar as coisas dentro e ver se isso funciona teria algum espaçamento, mas não tanto que não pareça uma unidade. Então vamos trazer toda esta unidade e encontrar um bom arranjo. E podemos até trazer isso já que isso não tem nada que vá além da linha de base. Então essa é a sua linha de base. Qualquer coisa que caia abaixo. Então esta é a sua linha de base. Você tem o P que mergulha abaixo. Mas você não tem isso nestes no duplo, então podemos nos sentir livres para mover isso em qualquer posição que quisermos. Nós poderíamos fazer um tipo de, ah, arranjo empilhado como esse. E vá em frente, fazer nossos testes de visibilidade totalizam 50%. Posso lê-lo? Você sabe, eu preciso cortar em empurrar as coisas um pouco para cima? Estou usando minhas teclas de seta para empurrar ligeiramente as coisas para a esquerda e para a direita. Eu só acho que é mais fácil usar minhas teclas de seta para apenas fazer movimentos muito pequenos e notar. Não estamos usando a grade ainda. Isso está tudo bem. Vamos usar muito o grande. Mas quando se trata deste tipo de miniaturas, você sabe que a grade é ótima para usar, mas leva muito tempo e você tem que realmente formular isso. Então, às vezes, é bom dedo do pé projetos específicos do globo ocular, e alguns da grade vai realmente vir a calhar. Vamos adicionar uma ligeira gota. Sombra aqui está adicionando essa pequena sombra para adicionar um pouco de profundidade. E agora precisamos de mais um elemento para completar isso. E acabamos com a nossa miniatura. Precisamos de um ícone de loja de fotos. Então vamos pegar o nosso. Quebec para ver. Vamos ter certeza que você está mostrando o arrastador. Certifique-se de camadas de margem na parte superior. Então, apenas tenha uma idéia. Tem alguma coisa fora dela? Podemos ajustar tudo? E também podemos ser capazes de encontrar um bom posicionamento para o ícone da nossa loja de fotos. Então eu vou trazer um PNG que eu encontrei no Google exatamente o tipo de seu ícone de loja de fotos PNG criativo padrão Commons. E às vezes você pode encontrá-lo com um fundo branco. Mas seu designer intermediário, ele poderia perfurar o fundo branco e encontrar este ícone. Não há problema em encontrar esses ícones. Estão por todo o lado, por isso vou ligá-lo. Nós vamos encontrar o posicionamento certo ou as margens vão realmente nos ajudar a orientar o posicionamento do nosso ícone. Então, agora podemos conversar. Margens ALOF. Ok, então é uma boa colocação. Margens meio que nos ajudou a descobrir isso. Eu adoraria fazer uma sombra realmente dramática com o ícone. Vamos em frente e fazer drop shadow e tipo de ver o que podemos fazer aqui. Eu vou fazer uma distância muito grande. Então, parece que foi lançado muito para o fundo, e eu vou fazer um pouco de borrão aqui com tamanho. E mais uma vez, minha capacidade não é super forte porque isso não parece muito bom. Mas quando você reduzi-lo, ele meio que dá a ele um olhar mais realista clique em. OK, então nós temos aquele olhar bonito de uma espécie de sombra desbotada distante para o ícone, e nós estamos essencialmente feitos com este muito mais rápido do que o 1º 1 Então nós fomos capazes de fazer isso muito rapidamente. Então vamos fazer mais um teste de visibilidade antes de exportarmos. Lá está ele. Vamos em frente e praticar exportação e podemos passar para o próximo projeto ia exportar arquivos. Você vai fazer uma exportação? Como E assim esta é uma nova maneira desde 2019 e eu acredito que 2000 2020 versão da loja de fotos também tem. Quero dizer, eu estou usando 2020, mas eu acredito que ele também fez isso para a versão 2019. Se você não vir essas configurações de exportação de arquivos da mesma maneira, você ainda tem as mesmas opções. É só arranjado ou parece um pouco diferente. Você obtém uma boa visualização desta vez, onde as versões mais antigas do Photoshopped não lhe deram uma prévia muito agradável. Então isso é legal. Podemos visualizar, certeza de que não temos nada nos lados acontecendo e podemos ir em frente e verificar o tamanho é Tudo parece muito bom e queremos fazer um J. Peck. Então, vamos até aqui para as configurações de arquivo. Queremos fazer um J peg e garantir que a qualidade seja 100%, porque o YouTube sempre reduzirá a força se for necessário. O que vai para a exportação? E enquanto isso é claro, tudo o que fizermos nesta aula será um modo RGB. Eso todos os modelos que eu forneço e todos os novos documentos que criarão serão todos um modo RGB. Então nós só para ter certeza que é olhar rgb na exportação e lá está você. Miniaturas do Tube que foram criadas em cerca de 45 minutos foram capazes de criar algumas versões diferentes dessas miniaturas. Então, espero que você seja rápido e rápido o suficiente para ser capaz de montar algo que parece que este terminou em cerca de 20 minutos. Isso é quanto tempo você quer filmar para fazer uma miniatura do YouTube realmente alta qualidade com imagens que já são fornecidas. Você quer ser capaz de criar que de forma rápida e eficiente para que você possa cobrar o seu dinheiro e ganhar muito dinheiro possível ou criar o máximo de conteúdo possível, mas também manter a qualidade alta. Então temos que estudar um pouco as miniaturas do YouTube. Então, em seguida, vamos montar uma campanha inteira de mídia social e marketing digital. Então isso vai incluir o Instagram Facebook. Também vamos fazer anúncios de exibição, então vamos ter essa campanha unificada. Isso é baseado em projetos de clientes reais que eu fiz. Eu tive um cliente por mais de 10 anos, e eu fiz todas as mídias sociais e itens de marketing digital, e este é exatamente o tipo de coisa que faríamos. É baseado em um trabalho de cliente real que eu fiz nos últimos 10 anos, então nós vamos estar pulando para o próximo 12. Projeto de campanha social: Você. Agora vamos conquistar toda uma campanha de mídia social e também alguns anúncios digitais . E este é um trabalho muito comum para um designer gráfico fazer. E é por isso que eu realmente queria ter um foco especial neste tipo de projeto e fazer todos os tamanhos diferentes são os tamanhos mais populares envolvidos. Então eu tenho uma empresa fictícia chamada Travel Loop que eu criei, e eu tenho um pouco de um quadro de marca, ou eu acho, pelo menos alguns ativos de marca, como um logotipo em um slogan e um par de diferentes relógios cores. Eu queria providenciar isso para você. Então você não tinha que sentar lá e criar sua própria empresa. Já temos um pronto para usar na nossa campanha. Então eles são uma agência de viagens, e eles gostam de reservar locais exóticos, então eles meio que têm um especial, high-end exótico, um, tipo de sentimento para o tipo de pacotes de viagem que eles oferecem. Então é exatamente sobre isso que nossa campanha vai ser. É um pouco de consciência da marca, e vai haver um pouco de desconto temporário e alguns dos anúncios. Mas nós vamos fazer uma espécie de campanha genérica no Facebook e também algumas das coisas que eles vão precisar para seu perfil de negócios rápido e perfis de mídia social. Então você pode baixar isso como um recurso para download de recursos está nesta classe. É chamado de arquivo de logotipo Travel Loop dot ai. É um arquivo ilustrador, e eu queria falar um pouco sobre bibliotecas. Aqui está o painel da biblioteca. Portanto, se você tiver uma assinatura da Adobe Creative Cloud, poderá fazer upload de determinados arquivos para a nuvem, que é suas bibliotecas. Você pode acessar isso em sua janela e ir até as bibliotecas, e você pode arrastar certos elementos para dentro. E então, quando você estiver aparecendo na loja de fotos, você pode trazer esse elemento para fora. Alguns vão te mostrar como usar isso. Nem todos terão acesso à assinatura da Adobe, mas para aqueles que o fazem, é um TSA Nice acelera seu fluxo de trabalho quando você está tentando obter arquivos do ilustrador para a loja de fotos, e vice-versa. Então, digamos que eu queira salvar alguns desses logotipos. Posso arrastar isto para a minha biblioteca, e vai guardá-lo como um gráfico, e também posso fazer as amostras de cores. Então, se eu quisesse adicionar estas duas amostras à minha biblioteca e recordá-las quando eu estiver na loja de fotos , exceto para ir até a minha janela de bibliotecas e clicar no sinal de adição e nós vamos adicionar a cor de preenchimento, selecione isso e observe como a cor de preenchimento mudou aqui e adicionou, Esta é uma boa maneira de adicionar amostras. Seja capaz de acessar o design de qualquer outro programa da Adobe, e você poderá ter as mesmas amostras de cores por toda parte. Isso realmente ajuda quando você está fazendo campanhas de grande marca e campanhas de marketing que abrangem vários programas da Adobe. Mas se não tiver isso, tudo bem. Ainda podemos fazer outras maneiras de colocar as coisas lá dentro. Eu vou continuar e salvar este logotipo. Vai arrastar alguns desses bens porque posso precisar de um par diferente de arranjos diferentes. Neste momento, temos um. É por isso que você faz isso. Eu faço logotipos e cores completas, mas eu também tenho uma versão toda branca que poderia funcionar em um fundo escuro e você vai ver quando fazemos nossas campanhas de mídia social. Como temos feito. Poderíamos ter um monte de diferentes tipos de fundo com um monte de tamanhos diferentes. Então é bom ter um logotipo muito flexível, simples. Pode se adaptar a qualquer fundo de cor. Então é por isso que quando eu ensino design de logotipo, é por isso que a simplicidade importa. Você vai realmente descobrir aqui quando vamos fazer alguns. Sério, Tiny acrescenta. Nós também vamos fazer alguns complacmentos maiores para. Então, o que vai arrastar alguns desses ativos? Digamos que não tive acesso à Theodore Be Creative Cloud. Então eu não tinha acesso a este sistema de bibliotecas porque tudo isso é armazenado na Adobe Cloud. Eu sempre posso me distrair com meus logotipos, então eu tenho que arrastar isso para a Adobe Photo Shop, e isso vai em frente. Se ele vem de ilustrado uma loja de fotos. Vai ser um objeto inteligente vetorial, o que é realmente ótimo, porque ele vai ser capaz de dimensionar maior e menor escala sem qualquer perda da resolução. Então isso é muito, muito bom manter isso como um objeto inteligente vetorial, porque vamos estar nos aplicando a uma tonelada de tamanhos diferentes. Então este é o modelo que você pode baixar. Como com todos os projetos desta classe, você pode baixar um modelo. Já está dimensionado para você e com quadros de arte. Então você será capaz de ter todo o tamanho está aqui para você. Então vamos começar com a coisa mais fácil, que é a foto do perfil do Facebook. Então essa é a pequena picareta que fica ao lado da página de negócios na página de negócios. Portanto, esta será provavelmente a coisa mais fácil de fazer. Vamos voltar ao Ilustrator. Vamos ver que elementos de marca temos que podem funcionar. Agora, este é o nosso logotipo. Então temos que pegar um logotipo que é tipografia pesada e muito horizontal e tentar adaptá-lo a um tamanho quadrado. Então este é o tamanho quadrado para o qual precisamos adaptar. Como é que fazemos isso? Não vamos conseguir encaixar todo o tipo na foto do perfil. Vai parecer muito pequeno, muito horrível. Assim como este. Nós poderíamos dividi-lo, dividir o logotipo para que ele é empilhado e torná-lo um pouco maior e tê-lo empilhado Isso é uma opção. Ou poderíamos pegar um elemento de marca e trazer isso para fora como um tipo de ícone. Então é exatamente isso que vamos fazer. Vamos isolar. Ele vai copiar este logotipo, e nós vamos isolar esses pequenos anéis, porque isso é um aspecto único deste logotipo e marca. Então, vamos realmente enfatizar que isso é um pouco sobre branding, bem como design. Então eu vou trazer esses pequenos laços e colocá-los aqui, e nós podemos fazer um bom fundo de alto contraste. Então nós vamos apenas fazer um bom com cores mais amplas em sua biblioteca. Então aqui está o meu painel da biblioteca. Isso vai trazer aquelas amostras de cores onde você pode distraí-lo como uma caixa sólida do Illustrator e pegar a ferramenta conta-gotas. Vou adicionar uma nova camada e pagou ferramenta balde. E assim, criamos uma foto de perfil no Facebook. Esse tipo de conversa explica ou meio que realmente mostra aquele detalhe exclusivo e profundo da marca. Precisamos realmente encontrar alguma fotografia incrível para este projeto. E espero que o cliente lhe forneça algumas fotografias personalizadas. Mas se não, você sempre pode comprar isso ou você confinou fotos gratuitas para usar. Então vamos fazer exatamente isso para este projeto. Vamos ao ponto com do Peck Sal e vamos digitar. Vamos apenas tentar digitar em viagem. Nós vamos ver o que as imagens realmente se sentem como elas se conectam com a marca. Então esta é uma agência de viagens de alta qualidade. Eles reservam locais exóticos. Nós realmente queremos uma impressioná-los com o tipo de locais que você só sonha em visitar porque eles se sentem como se eles são caros. Sentem-se como se estivessem fora de alcance. Mas queremos fazê-lo ao alcance das pessoas. Queremos que as pessoas vejam essas fotos e digam, eu quero estar lá. Esse é um local realmente único. Então nós não queremos fazer nada genérico como o avião voando, porque eu não acho que as pessoas realmente se conectem com isso. Então estamos realmente procurando essa imagem com a qual podemos realmente ressoar. Esta é uma foto de viagem genérica, e eu usei esta no passado, mas pode estar em qualquer lugar. É só uma estação de trem. Não é essalocalização incrível e única, localização incrível e única, então isso é um pouco mais do que estou falando. Esse é um local muito único com a montanha lá caminhando, eles estão fazendo algo um pouco fora do alcance são um pouco fora do comum. Esta seria uma boa foto para usar porque é muito pessoal. Você tem a pessoa bem ali. É uma conexão muito emocional. Ela está a olhar para mim. É muito natural e orgânico. Então essa seria outra opção para uma campanha específica. Fotos como esta funcionam muito bem, mas sinto falta da pessoa. Eu realmente quero me colocar no lugar de viajante quando estou olhando para AD. Então eu realmente gostaria de encontrar fotos que têm uma pessoa fazendo algo no fundo e não apenas uma bela foto e por que esta está OK. É um local muito único, provavelmente na Europa. Eu meio que não me conecto com a pessoa. Em primeiro lugar, ela está um pouco embaçada. Ela não é o ponto focal da foto e ela virou de costas para nós, então parece ah um pouco desconectado, então apenas tipo de passar pelo processo de quando eu selecionar fotos tipo do que eu estou pensando . Agora este é exatamente o que eu estou procurando. Tem essa mulher. Ela tem nossas costas para ela, mas ela tem é muito única. Posse um vestido muito único. Meio que compensa isso. Temos também esta oportunidade maravilhosa de criar alguns anúncios verticais com isso porque é muito alto. E eu gosto de encontrar uma mistura de fotos verticais e horizontais porque nós vamos ter uma mistura Ah, publicidade vertical e horizontal e postagens de mídia social. Por isso, é bom ter variedade com o corte de suas fotos. E isso é muito alto e grandioso, excitante e único. Exatamente o que a empresa, o tipo de coisas são empresa estará reservando para nossos clientes. Então esse é definitivamente um que eu vou estar baixando. Este é outro que vamos usar. E a coloração pode ser alterada um pouco. Podemos fazer isso na Adobe Photo Shop. Eu realmente quero trazer para fora uma cor mais vibrante neste, mas tudo bem, porque nós somos designers intermediários agora e podemos adicionar pôr do sol e todos os tipos de coisas para realmente fazer isso sair um pouco mais. Mas eu o que eu amo nesta foto é que ela tem um monte de fundo para trabalhar. Então poderíamos colocar uma manchete ou um tipo em cima disso e ter muito espaço t têm diferentes elementos de design. Então é apenas um trabalho de foto muito bom com muito espaço. Então vamos usar esse, e você pode encontrar tudo isso apenas digitando e viajando em pixels e sinta-se livre para usar fotos diferentes. Tenho links para as fotos, as quatro principais que vamos usar para esta campanha. Você pode encontrar isso no guia de recursos todos os links, mas sinta-se livre para usar fotos diferentes. Se você gostaria de se desafiar um pouco mais neste projeto, este é outro exemplo de uma foto. Você pensaria, Oh, como isso realmente chama a minha atenção. Tem uma pessoa nele. Eles estão fazendo algo exótico e excitante, mas não há muitas costas. Não há um fundo nisso. É este tipo de céu e é água. Essa pessoa poderia estar em uma bela piscina em algum lugar e nós não saberíamos. Então, ele não tem esse olhar de atenção para ele. E aqui está outro exemplo de uma foto que tem a localização que tem uma pessoa nela, mas ela está de costas. Ela tem um movimento agradável e expressivo com as mãos, mas eu não estou ressoando ou me conectando com ele. Sinto que ela está apenas posando. Ela não está autenticamente envolvida com o fundo ou com a foto. Ela está apenas posando, então nós meio que queremos evitar aquelas fotos onde parece que eles estão tentando tirar uma boa foto. Você quer pegar aqueles onde eles estão fazendo alguma coisa lá. Eles estão rindo com amigos lá. Eles estão no meio de uma caminhada. Sabe, esse tipo de fotos de ação são muito melhores do que essas fotos tipo pose para o que você estava procurando? 13. Projeto de campanha social - 2: você tem várias fotos incríveis que selecionamos a partir de pixels dot com que podemos usar para nossa campanha tipo de algum tipo de ambiente realmente wow com pessoas em cada um deles. Então podemos nos conectar e ressoar com essas pessoas. Então a próxima coisa que vamos fazer é a foto da capa do Facebook. As fotos de capa seriam fáceis a não ser que tenham uma promoção específica que queiram promover. Mas vamos fazer um logo simples e uma foto e talvez alguns elementos da marca. Vamos tentar descobrir como estender um pouco essa marca. Então vamos encontrar a nossa foto para a nossa foto de capa aqui. Esta vai ser a página principal de negócios. Pensei em ficarmos com este. Por agora. É bom e largo, espinhas horizontais vão nos dar um monte de espaço para cortar isso realmente Bem, isso é o que eu posso fazer é arrastar esta foto para a loja de fotos, e quando você arrasta uma imagem para dentro, ela vai automaticamente tornar-se um objeto inteligente, o que é realmente bom para nós porque queremos ser capazes de escalar isso para cima e para baixo sem perder qualquer resolução. Então podemos apenas fazer isso, colocá-lo neste quadro de arte e centro de imprensa em particular. Há também outra maneira que você poderia trazer para a fotografia, e ele poderia fazer isso usando contêineres em contêineres ou aqui mesmo na sua barra de ferramentas teve que mudar meu espaço de trabalho para ser capaz de encontrá-lo. Mas aí está. Há contêineres. Podemos fazer um pequeno contêiner aqui se estendendo, e então podemos arrastar a foto dela dessa maneira, e ele vai automaticamente preencher no contêiner e foi ótimo sobre isso é que você não tem que sentar lá e tirar essa foto gigantesca e continue dimensionando-os para baixo. Eles são preenchidos automaticamente nesse contêiner específico. Então, só outra maneira, outra maneira de esfolar um gato. Então vamos encontrar o corte certo para isso é quando provavelmente precisamos ampliar e realmente ter uma idéia de como isso deve ser cortado para que você esteja percebendo que parece um pouco pixelado. Esta é uma imagem digital, e tem um tamanho específico, e você sempre pode verificar o tamanho da nossa pasta selecionando o título que chega à sua ferramenta de movimentação. Você será capaz de ver o tamanho, então isso é apenas 828 pixels por 315 pixels. Isso não é um tamanho muito grande, então você vai naturalmente ver ah, um pouco de picaretas, euforia . Não é nada ruim, mas quando você está acostumado a trabalhar com design de impressão e tudo é super nítido, você vai embora. Ei, está embaçado. E isso é normal quando você está trabalhando com tamanhos tão pequenos. Então ele está atualmente em um contêiner para que eu possa clicar duas vezes em qualquer contêiner e ser capaz de mudar isso ao meu gosto. Queremos realmente trazer as pessoas para a foto, então queremos talvez fazer um alinhamento central com Hiss Body. Queremos ter um bom céu claro para ser capaz de colocar o nosso logotipo. Então vamos entrar no Illustrator, ou você pode entrar no painel de bibliotecas ou eu vou fazer isso de outra forma e apenas arrastá-lo do Adobe Illustrator. Então temos vários itens diferentes que poderíamos trazer. Nós eu poderíamos fazer o todo branco Vamos ir em frente e experimentar isso então é realmente tipo de trabalhar com suas variações de logotipo e descobrir qual deles vai funcionar melhor para que pudéssemos fazer um branco sólido fazer um pouco de sombra, mas não é Vai ser super forte. Então vamos ver se podemos tentar uma versão colorida e ver se ela realmente aparece o suficiente contra o céu. E se não, temos uma loja de fotos. Podemos sempre editar a foto para fazer o que precisamos dela. Temos um logotipo colorido e a laranja fica um pouco perdida no céu, mas isso não é grande coisa. Então, uma coisa que eu quero começar a fazer é pensar um pouco sobre grades e guias e encaixar e maneiras. Podemos facilmente ter certeza de que encontramos o ponto central, como queremos ter certeza de que isso agora está centrado no documento. Então eu tenho esses guias em, o que pode ser realmente útil. Então certifique-se de que você tem seus guias em um movimento este ao redor. Está me dando indicações de onde está alinhado no centro, e eu tenho essa pequena indicação bem aqui. É uma espécie de encaixe no lugar para mim, e isso é super útil. Para ligar isso, vá para ver e certifique-se de que o snap está ligado e certifique-se de que o seu Zahran extra também, de modo que vai tipo de ajudá-lo com um pouco de alinhamento em vez de ter que quebrar a grade e se envolver com isso, ele irá automaticamente tipo de encontrar esse ponto de alinhamento central. Então, vamos clicar duas vezes neste contêiner e ver se conseguimos um corte melhor aqui. Poderíamos até pintar em uma cor mais clara e mais larga. É uma maneira mais rápida e fácil de fazer isso. Então eu só estou pegando um pincel redondo macio. Mas meus pincéis gerais fazem rodada suave torná-lo agradável e grande. Eu ia pintar um pouco de branco em uma nova camada, então apenas criando uma nova camada eles vão pintar de branco em torno do logotipo. Mas isso parece horrível, mas isso não é grande coisa, porque podemos usar um modo de mistura nessa camada para suavizar e misturar isso ou simplesmente reduzir a capacidade. Só preciso de um pouco de branco atrás desse logotipo. Você também pode adicionar estilos de camada e fazer um brilho externo. Mas sinto que tenho mais controle quando adiciono uma camada de brancura, então isso ajuda a sair, especialmente no céu laranja e laranja. Então isto precisa de alguma coisa. Vamos fazer um teste de visibilidade. Vamos reduzir para cerca de 100%. Então eu gosto da foto. Ele se estende muito bem a distância. E há algo que você precisa estar ciente quando se trata de visualização móvel desta e da versão móvel do Facebook e que é a área segura para dispositivos móveis. Vou trazer meu painel de camadas para que você possa ver o que estou me referindo. Para ter esse celular seguro aqui, vou arrastar essa camada em cima dela para poder ver onde fica. Este é o lugar onde ele colapsa na visualização móvel. Então ele corta os lados esquerdo e direito. Então você sempre tem que estar ciente de não colocar nenhum texto nos lados esquerdo e direito, porque ele não vai ser visto na visualização móvel. Então, se você tem um monte de texto na imagem de capa da sua página de negócios, você precisa mantê-lo lá no centro para que você possa falar tudo isso dentro e fora para tipo de dar você um guia. Então vamos adicionar outro elemento de marca porque estamos meio que perdendo pessoas aqui. Vamos colocar algo nos lados esquerdo e direito que pode se espalhar para o centro e realmente trazer as pessoas para as cores e o tema da marca. Então, uma coisa que podemos fazer é ter esses círculos. Um pouco de parte da marca é um círculo. Vamos pegar essa forma circular e expandi-la um pouco e usá-lo como um elemento de fundo . Então o que eu vou fazer é pegar os dois. Vamos começar com o azul. Eu só vou fazer um pouco de um elemento que se espalha para o lado. Nada muito grande só acrescenta um pouco de um pop de algo acontecendo lá no documento . E nós também queremos talvez obter um pouco desse belo fundo brilhando por aqui para que possamos reduzir a transparência dessas camadas meio que deixar um pouco dele para trás da guerra. Podemos olhar para seus modos de mistura para ver se isso tem um pouco de um sentimento melhor, mas parece que estes foram bastante severos. luz dura parece muito interessante, mas é muito dura. Então você pode apenas querer fazer uma redução de capacidade. Justo, vamos deixar esse fundo continuar e ter vergonha de pará-lo e ter uma cor sólida. Quando você tem um fundo tão bonito assim, nós adicionamos apenas um pouco de elemento. E Poppy poderia fazer isso com qualquer outro elemento de design. Então essa é apenas uma espécie de sua primeira foto simples de capa do Facebook para este projeto. Agora vamos começar a pensar em marketing e publicidade. Este vai ser um anúncio pago no Facebook e há algumas restrições com anúncios pagos no Facebook. Primeiro de tudo, lá, neste momento, , durante as filmagens, é claro, o tamanho sempre pode mudar. Mas agora eles são 1200 pixels por 628, então é muito ver é muito horizontal. Então, mais uma vez, temos que procurar uma foto que seja horizontal amigável, e precisamos manter o texto com menos de 20% do anúncio total, que eles rejeitem seu anúncio se você tiver muito texto nele. E lembre-se, um anúncio do Facebook também tem um título e uma cópia de corpo que acompanha na postagem para que você não tenha que sentir que precisa colocar todas as palavras no anúncio do Facebook. É realmente um auxílio visual que complementa o texto que acompanha o post. Então, pense nisso. Tente não colocar muito texto em um anúncio do Facebook. Eu sei que é muito tentador, e você precisa educar os clientes se eles querem que você coloque um monte lá dentro que não é permitido. dedo do pé tem mais de 20% da área total. Seja um texto. Estamos mantendo isso em mente quando fazemos nosso primeiro anúncio pago no Facebook. 14. Projeto de campanha social - 3: primeiro lugar, ao fazer e adicionar um monte de vezes, a foto é a parte mais importante do anúncio, seguido pelo título e o próximo, A chamada à ação. Então, muitas vezes, quando eu estou pensando em como fazer um anúncio pago, eu vou começar com uma foto que eu quero usar e, em seguida, construir sobre isso porque ele sempre vai. A foto vai me ajudar a enquadrar minha manchete e meu tipo. Então vamos começar com a foto. Você tem várias opções aqui, e todas elas têm um propósito único quando eu as encontrei e eu queria realmente usar essa, eu sei que isso é vertical, e vamos usar isso para uma história do Instagram Mais tarde. Mas acho que ainda posso usar isso como uma ótima opção. Então eu vou arrastar esta foto diretamente para Photoshopped ou usar um recipiente. Vamos achar um jeito de cortar isso. Eu adoraria se pudesse atravessar a tela. Então, em termos de corte, podemos tê-la lá, ou podemos mostrar mais desse céu maravilhoso. Então eu vou cortar isso o mais apertado possível. Podemos sempre ampliar a foto mais tarde à medida que começamos a desenvolvê-la. Qual é a próxima coisa importante com um anúncio? E quero ter certeza de trazer minha margem. Esta é a nossa margem. Você pode alternar isso com frequência apenas para ter certeza quando adicionamos tipografia e adicionamos uma chamada à ação que nada estende nada. Esse texto se estende até a margem. Portanto, sinta-se à vontade para ativar e desativar isso como um guia útil de ajuda. Então agora a manchete. Então já temos uma cabeça. Tenho uma manchete escolhida. O cliente forneceu, ou o cliente fictício forneceria isso para você. O cliente forneceu, E a manchete é a tua aventura exótica espera por isso. Foi bom dizer a palavra exótica, já que é sobre isso que a nossa marca é construída. Então eu vou ir em frente e adicionar a tipografia só vai fazer caixa de texto colá-lo dentro Então lá vamos nós. Sua aventura exótica espera, e precisamos descobrir uma maneira de obter essa tipografia para se destacar por cima da foto. Há caixas que podemos colocá-lo atrás há sombras que podemos usar, mas eu realmente não quero tirar da foto adicionando caixas grandes, blocos ou qualquer coisa para ajudar a se destacar. Então uma coisa que podemos fazer é tornar a tipografia agradável e ousada. Por isso, agora vou fazer duplo clique na tipografia. E agora está acesa. Esta é a ferrovia, que é uma fonte gratuita que você pode baixar em fontes do Google. Vamos fazer isso uma espera ousada ir para baixo O ousado e o mais ousado na ferrovia é e parece que aqui em cima e olha de alguma forma ele meio que tem as fontes um pouco fora de ordem e realmente preto vai ser ainda mais ousado do que extra negrito. Então preto é sempre o seu tipo mais grosso, uh, rosto apertado. Espere, então nós vamos selecionar Black por algum motivo, está fora de ordem na minha lista, mas tudo bem, porque eu sei que o preto é o mais ousado. Então vamos ver como podemos empilhar esse enfraquecimento. Empilhe isso em um alinhamento esquerdo à direita, e nós temos um tipo de parede de tijolos que pode realmente ajudar a tipografia a se destacar. Isso é uma coisa que podemos ter um bom apelo à ação à direita. Isso é uma opção. Mas agora eu quero começar a trazer alguns outros elementos de design. Então eu meio que sei que espaço eu tenho para a manchete. Precisamos do logotipo. Então vamos trazer o logotipo. E nós já temos que a partir daqui e o que eu realmente quero fazer, O que é pode ser exigido pelo cliente é usar o logotipo com o slogan. Temos aqui o slogan. Então isso ajuda a trazer essa palavra exótica e amarrá-la na campanha. Então vamos ver o que podemos fazer com a cor completa. A cor completa pode não funcionar. Então deixe-me ver se eu não posso fazer uma cor branca sólida para isso. Temos uma foto muito detalhada, não tenho certeza de que a cor sólida vai realmente funcionar lá. Então vamos trazer isso. E isso pode precisar de um pouco de fundo, e não precisa ser super grande apenas o suficiente para ver o logotipo e ter algum reconhecimento da marca . Então vamos continuar o tema do círculo que tivemos. Vou manter a opção pressionada e arrastar para fazer uma cópia e vou trazê-la para este quadro de arte . E vamos ver se podemos usar isso como um grande fundo sobre a foto assim. E eu acho que já que temos um fundo azul, podemos até ser capazes de escapar com um logotipo colorido. E o que precisamos fazer é trazer nossa cor semi cheia. Então você notou como nós tínhamos um monte de opções diferentes aqui, então nós temos apenas uma única cor em uma cor cheia. Também temos esta outra opção que tem cor, mas também tem branco, modo que é bom ter opções. Acho que vai ser o melhor. É por isso que você tem muitas versões diferentes do seu logotipo, que você possa ter a máxima flexibilidade com suas opções quando você realmente começar a usá-las . Então talvez eu precise fazer o círculo um pouco maior. Não quero que ocupe muito espaço porque é uma foto tão bonita. Não queremos tirar a foto. Nós definitivamente queremos que as pessoas sejam capazes de reconhecer a marca. Os nomes só estavam fazendo um posicionamento. Poderíamos alternar a margem dela. Certifique-se de que estamos seguros lá e que vai ser estalando porque eu tenho guias sobre isso pode ser estourando para mim para ajudar a lutar contra uma posição. Então precisamos de um apelo à ação também. Temos uma manchete, um logótipo, e agora precisamos de um “E daí?” O que são então o quê? Você é aventura exótica aguarda livro agora aprendido Mawr. Você sabe, muitas vezes com anúncios pagos no Facebook, você pode colocar um botão não na foto, mas logo abaixo da foto. Por isso, às vezes, a tua chamada à acção não tem de estar na fotografia. Pode ser uma parte do anúncio, um anúncio total. Então pense nisso também. Então, neste caso, o botão vai estar abaixo da foto, então não precisamos ter um livro agora chamado Botão de Ação, porque quando você clica em adicionar e Facebook, você clica na foto. Torna a foto maior, mas na verdade não te leva para a página de destino. Isso é o que o botão abaixo faz para que nós vamos deixar que existam fora da foto, além disso Nós queremos ter certeza de que temos menos de 20% da área total do anúncio não ocupado por texto, e eu acredito que esse é o caso aqui. Então agora tudo o que temos a fazer é trabalhar na nossa manchete e estaremos praticamente prontos para ir. Eu adoraria equilibrar isso um pouco, especialmente no lado direito. Gostaria de saber se podemos trazer apenas segurando a opção e arrastando nosso pequeno laranja circulado é adicionar um pouco de equilíbrio no lado direito e impor as cores da marca e os ativos da marca. Então vamos finalizar nossa manchete. O que notei é que gosto do tipo branco. Ele realmente aparece aqui em baixo, mas meio que desaparece aqui, então quase me pergunto se podemos encontrar uma oportunidade de talvez zoom em um pouco mais sobre ela e empilhá-lo desta maneira, mas quase me pergunto se não podemos fazer um tipo de um pouco de uma borda irregular todo o caminho para baixo. E isso pode funcionar, mas parece agitado. Sua aventura exótica aguarda em quatro linhas. Talvez possamos simplificar isso de alguma forma em três linhas, então talvez sua aventura exótica o aguarde assim. Podemos ir em frente e arrastar isso para baixo, e é muito legível em cima dela, e também foca seus olhos nela e no tipo do mesmo tempo e junta-os . Mas provavelmente só precisamos adicionar um pouco de sombras. Eu só vou clicar duas vezes sobre meus estilos de camada e apenas adicionar um pouco de uma sombra de gota, muito sutil, Não poderia ter qualquer distância em tudo, poderia expandir o tamanho e, em seguida, aumentar a capacidade. E agora podemos ter a oportunidade de nos certificar de que temos equilíbrio e o anúncio dela. Então agora temos um anúncio muito pesado. Temos este logotipo, este fundo azul muito forte e a tipografia tudo no lado esquerdo. Então acho que precisamos equilibrar isso um pouco. Tentamos fazer isso com este círculo, mas há algo faltando à direita. Então vamos ver se podemos mudar nossa tipografia para a direita e ter as manchetes começando a ler em torno da área do corpo dela. Então agora tem um pouco melhor equilíbrio. Ele flui de cima para baixo para cima direito, que é uma leitura natural como as pessoas tipo de ler e digerir informações e acrescenta. Então eu me sinto muito feliz com este anúncio pago. Nós também podemos fazer outra opção de um pai pagar. Vai ser fácil acrescentar que vamos em frente e clicar no quadro de arte. Vai nos dar a chance de adicionar o mesmo tamanho ao lado dele. Vamos fazer uma segunda opção apenas com o mesmo arranjo de manchete, mas com uma foto diferente. Tem opções. 15. Projeto de campanha social - 4: Tente uma foto completamente diferente, e vá em frente e traga esta do homem no oceano. Vamos tentar encontrar um bom espaço de colheita para ele. Podemos não saber até começarmos a trazer alguns dos outros elementos, mas eu realmente quero ter um foco central no homem. Vamos trazer a mesma manchete e queremos ser consistentes com a manchete dela. Se nós o temos empilhado ou meio esfarrapado como este, um tipo irregular de alinhamento à esquerda. Temos de nos manter consistentes com isso durante a maior parte da campanha. Então queremos manter a manchete sobre o mesmo tipo e ser consistente, então há muitas áreas diferentes. Teoh trabalha com este também. Então vamos em frente. E isso pode ser fácil, porque já estamos começando a estabelecer maneiras de incorporar a marca no logotipo. Então nós estamos apenas arrastando sobre duplicando neste ponto e também este pequeno elemento laranja . Queremos ter certeza de que isso é consistente. Então, quanto mais fizermos isso e vamos fazer um monte de tamanhos diferentes, ele vai ser mais rápido e rápido e mais rápido com cada um que fazemos posicionando-o um pouco no canto superior direito, porque temos esse tipo de área em branco lá. Queremos manter o barco ali mesmo. E uma coisa que podemos fazer, já que isso é tão escuro aqui embaixo, que podemos até trazer uma de nossas cores de marca aqui e realçar ou usar contraste para mostrar uma palavra. Então, neste caso, vou trazer a palavra exótico. E eu ia trazer nossa cor laranja, então você percebe como isso realmente ajuda a destacar um pouco a manchete adicionando contraste, então temos a oportunidade de fazer isso. Então eu vou tirar vantagem disso a qualquer momento que pudermos adicionar e trazer contraste seria excelente. Você percebe como o E aqui e eu vamos ampliar sobrepõe esta pequena prancha aqui. O que isso faz não é apenas integrar a manchete com uma foto, mas causa um pouco de tensão, que é muito bom ter esse tipo de sobreposição lá tipo de integração em vez de apenas estar totalmente por conta própria e isolados, estamos trazendo-o aqui e apenas tendo um pouco de efeito sobreposto. Uma coisa que falta aqui é que a foto é ótima. É lindo, mas é realmente falta de vibração, saturação e cor. Então vamos adicionar isso em nós mesmos porque podemos fazer isso aqui em uma loja de fotos. Então uma coisa eu quero fazer e eu quero ser capaz de fazer algumas edições. Então, ajustes de imagem. E se você é muito bom em edição de fotos, você estará em casa. Vou até lá devagar, ou menos. Algumas das coisas que eu passo a primeira coisa que tem o maior impacto é a exposição. Então você não tem que ajustar é muito tem impactos enormes foi muito pequenos ajustes. Então eu vou aumentar e apenas tive um pouco de brilho para a foto. Não tem que fazer qualquer deslocamento e as correções gama muito bom quando você trabalha com fotos em preto e branco. Mas neste caso, acho que vamos conseguir uma vara com uma. Então olhe para aquele pequeno ajuste que fizemos. E eu só gosto de passar pelo meu painel de ajustes. A seguir é a vibração, então eu poderia adicionar um pouco dessa vibração. Isso vai adicionar um pouco de saturação iria trazer a sua cor de tom mais quente . Então você percebe como isso era antes de adicionar um pouco de cor a uma pele, um pouco de cor ao ambiente silvo, apenas um pouco de saturação, mas nós não queremos sobresaturado, porque isso está começando a parecer muito falso. Parece que ele tem um bronzeado falso. Portanto, queremos ter muito cuidado com a saturação. Rebenta só um pouquinho para nos ajudar. Então, uma coisa que eu quero fazer com essas fotos, eu quero afiar apenas um pouco. E eu gosto de fazer isso com alguns com algumas fotos. Basta ir afiar ao mesmo tempo, apenas adiciona aquele pouco crocante extra para a foto. E então uma coisa que eu quero fazer é e quando adicionar um pouco de uma espécie de cor quente do sol aqui no céu Então eu vou criar uma nova camada e fazer o que fizemos antes e pegar nosso pincel macio torná-lo bem grande. Isso é talvez um pouco maior do que isso, talvez 1000 pixels e queremos ter uma cor laranja agradável e vibrante do pôr-do-sol acontecendo, e nós vamos apenas clicar uma vez no topo aqui, e nós vamos para o nosso modo de mistura e suavizar isso. Talvez as luzes do pino. Alguns desses podem funcionar bem, tela parece ser a mais brilhante e a mais leve. Estamos apenas adicionando um pouco de um pop de cor lá para que você possa tipo de ver antes e depois você pode tipo de ver como nós adicionamos um pouco mais de riqueza à foto. Há muito mais que podemos fazer com isso. Poderíamos nos esquivar e queimar para trazer certas áreas da água também. Mas para isso, acho que somos muito bons. Temos duas opções diferentes para anúncios. Temos mais uma coisa a fazer, e acabamos com o Facebook. Vamos a uma postagem no Facebook. Próximo para o Facebook impulsionado postagem. Vamos fazer algo um pouco diferente. Vamos colocar um pouco da nossa promoção neste. Parece ter 20% de desconto em todas as reservas, e vamos tentar incorporar esse texto e fazer algo um pouco mais promocional e tradicional. Então, vamos voltar às nossas escolhas fotográficas. Tenha um par de boas escolhas aqui, mas eu quero trazer uma imagem totalmente diferente que nós não usamos antes. Poderíamos encontrar maneiras diferentes de cortar isso, então realmente queremos ver a grandeza das montanhas. Então vamos nos certificar de diminuir o zoom e obter um bom corte apertado. E também queremos colocar o logotipo nos céus. Acho que esse cara tem contraste suficiente para encaixar o logotipo bem ali em cima para que possamos acabar com isso. Talvez seja uma cor cheia. Vamos ver. Já temos uma cor cheia com o slogan? Ainda não, mas poderíamos ir para o nosso documento ilustrador e obter uma cor completa com o slogan e trazer isso para dentro. Então nós já vamos precisar fazer alguns relâmpagos para o fundo para que isso possa se destacar porque isso não é alto contraste com a laranja contra as nuvens para ser legível o suficiente, e isso é OK, porque vamos ser capazes de fazer isso juntos. Então vamos começar a nossa oferta, e nós temos esta oportunidade maravilhosa de adicionar bolha oferta aqui. Então vamos continuar com o tema da bolha. Mantenha pressionada a opção e traga isso. Este pode ser o lugar onde a oferta vive e eu tenho a nossa oferta já carregada aqui e tipo de algum tipo padrão. É 20% de desconto em todas as reservas. Então vamos ver se eu não consigo trazer isso e fazer um bom alinhamento à esquerda vai quebrar para mim. Então, uma coisa que eu quero fazer é começar a usar contraste com a nossa oferta. Então a coisa mais importante sobre este bloco de tipografia é o 20% de desconto, então podemos fazer isso. Adicione contraste de duas maneiras diferentes. Enfraquecer negrito. Então vamos em frente e continuar com a nossa ferrovia que temos usado. Vamos fazer um negrito ou preto e você vai notar com a ferrovia que eu não sou um grande fã de como os números funcionam na ferrovia. Isso está tudo bem. Se você não gosta de como os números aparecem em um determinado tipo de tipografia. Você pode usar uma tipografia semelhante para os números, então eu vou usar um areias abertas, que também é um fontes para download gratuito em fontes do Google, e eu vou fazer o mais negrito possível. Tão ousado. Eles não têm um preto que está tudo bem. Use extra ousado e adicione contraste destacando nossa cor laranja. Então você notou instantaneamente que quebra toda a manchete. Vamos também fazer esta ferrovia, e você também pode usar estilos de caracteres se você quiser manter tamanhos semelhantes. O único problema com o uso de estilos de caracteres com mídias sociais é que você tem tantos tamanhos diferentes. Seria difícil gerenciar todos os estilos de personagens diferentes que você vai precisar, então eu estou apenas fazendo tipo de tudo à mão com cada anúncio. E então nós temos esse tipo pequeno, que é um talento, e eu acho que é um bom tamanho de hierarquia de tipos notado. Aqui temos um tipo de maior do que ele vai para menor. Eu gosto de adicionar um pouco de linha divisória visual aqui, então vamos fazer uma linha com a ferramenta retângulo vai fazer uma linha muito magro. Há apenas o suficiente para adicionar um pouco de uma quebra visual das caixas de tipo. Vamos mudar isso para baixo, ter um pouco mais de espaçamento entre personagens, ver se encaixando para mim e descobrir qual é a mesma distância entre aqui e aqui. me poupa muito tempo, então agora é apenas uma linha simples e parece ótimo. Mas eu quero adicionar um pouco de desvanecimento a esta linha. Então vou pegar minha ferramenta de borracha. Ou você pode até adicionar uma massa em camadas que pode até ser mais lógica. Vamos adicionar uma máscara em camadas, obter o nosso preto e pavimentado com um pincel macio. Sempre tem que encontrar maneiras não destrutivas de editar quando puder. Então eu estou na minha massa de camadas e eu vou apenas clicar uma vez meio que desbotou um pouco, apenas adicionar um pouco de emoção lá. Então vamos adicionar mais contraste fazendo o off todas as reservas um pouco menor e o 20% um pouco maior. E também podemos trabalhar no corte da foto dela. Nós consumimos em um pouco. Não quero perder a grandeza e a grandiosidade das montanhas. Temos que ter cuidado com o quão grande podemos fazer ela, mas definitivamente queremos ampliar e nos conectar emocionalmente com a mulher o máximo que pudermos . Então aqui está o problema que precisamos organizar com o logotipo Vamos iluminar o céu um pouco para que possamos adicionar uma sombra. Mas isso vai parecer muito escuro. E tento evitar sombras, se for preciso. Então vamos tirar a foto do céu, e podemos fazer o mesmo que fizemos antes. Adicione uma camada de tinta em um pouco de branco para iluminar tudo. Bom macio em torno de escova tipo de pate em cima. Podemos filtrar isso de volta para que não pareça tão forte, e isso meio que ajuda com o céu. Poderíamos pegar a ferramenta de borracha, ter certeza que as montanhas não são um problema. E vamos fazer uma rodada suave para garantir que recuperemos a vibração das montanhas. Outra coisa que você pode fazer é pegar a ferramenta de clonagem e clonar em alguns céus e iluminá-los uma onda, um monte de opções diferentes que você pode fazer. Mas eu acho que por agora, fazer temos que ir rápido com facilidade porque você sabe que estamos sendo pagos por projeto aqui , então não podemos gastar muito tempo em algo. Vamos fazer a oferta um pouco maior. Agora temos uma oferta, que é ótimo porque vamos usar a mesma oferta em outras campanhas de mídia social e anúncios de exibição que vamos fazer, então vai tornar tudo muito mais fácil. Conseguimos fazer algumas coisas diferentes aqui que facilitarão muito o resto do projeto. 16. Projeto de campanha social - Instagram: maneira ter a nossa campanha no Facebook, e é hora de fazer instagram próximo. Então, temos muitos de um que vamos fazer aqui. E o que é maravilhoso é que temos muitas coisas já estabelecidas. Vamos ser capazes de copiar e colar e pedir emprestado da nossa campanha publicitária no Facebook e trazê-lo para o Instagram e chicoteá-los muito mais rápido do que você pensa. Então vamos falar um pouco sobre o Instagram. Então, como o Instagram é diferente do Facebook? Então, instagram é mais foto pesada. Vamos confiar muito menos no texto, então precisamos pensar sobre isso ao mudar para o instagram. Além disso, instagram tende a ser um pouco mais pessoal, especialmente post ou post impulsionado. Queremos ser o mais autênticos possível também. Nós não queremos isso. Plaster oferece em todos os lugares e deixá-lo realmente genérico. É apenas uma plataforma diferente, e vive de forma diferente. Então você tem que pensar em mensagens mais orgânicas e autênticas e também envolver-se com o espectador. Então, em vez de apenas dizer aqui pelas minhas coisas, você tem que se envolver em uma conversa com eles, então peça-os para marcar você ou postar uma experiência. Então é exatamente isso que vamos fazer com o nosso post INSTAGRAM. Este será um post impulsionado. Não é necessariamente um anúncio pago, mas será mas será colocado como um anúncio pago. Mas uma vez que é um post, ele vai existir na página de negócios são a página da empresa, e então você apenas tipo de impulsioná-lo para outros seguidores. Então vamos fazer isso um pouco diferente. Vamos usar uma foto diferente para manter a autenticidade do Instagram. Então vamos percorrer nossas fotos. E há um que eu tinha em mente para este. É este aqui. Vai deixá-lo um pouco maior ou vá em frente e arraste-o para dentro. Então, o que eu gosto nesta foto é que tem essa experiência de você. Então ele tem uma foto dele olhando para fora sobre o parque de diversões ou algum local de fundos exóticos, e ele tem parece que é você que está tirando a foto. Tem uma conexão pessoal com ele. Eu acho que isso funciona muito bem, e eu acho que vai funcionar um pouco melhor para o Instagram. Assim, como sempre, você pode desativar o texto e a margem faria sempre que precisar. E vamos adicionar o nosso tema diferente aqui. Então vamos fazer uma tipografia e texto diferentes aqui. Então, em vez de colocar a nossa oferta é colocar o nosso logotipo ou colocar o nosso slogan. O que vamos fazer é pedir às pessoas que postem um feedback. Então vai ser qual é o seu momento de viagem favorito de 2020? Então o fim dos anos se aproxima quando estou filmando isso. Então pensei que seria uma campanha muito sensível ao tempo. Qual é o seu momento de viagem favorito em 2020 e comente abaixo. Portanto, o nosso apelo à ação é um comentário abaixo, e temos o nosso logotipo. Então isso não está vendendo algo tanto. É como é, consciência da marca. Então eu vou trazer nossa cópia genérica, e vamos tentar trabalhar em um layout de tipografia dinâmica realmente agradável para isso. Então aqui está o texto que vamos usar para este post. Qual é o seu momento de viagem favorito em 2020 comentário abaixo? Então também queremos abrir espaço para o logotipo. Como não vamos anunciar nada, definitivamente precisamos marcá-lo, para as pessoas saibam que somos nós. Então eu vou pegar emprestado um desses logotipos e realmente, talvez um todo branco, mas talvez o branco com a cor e pode funcionar melhor. Veja, como isso funciona é que uma bela área escura aqui em baixo será uma grande oportunidade. Perfeito. E não queremos que seja grande e óbvio que esta é uma empresa que queremos falar sobre o momento da viagem primeiro. Não queremos dizer, , somos uma grande empresa de publicidade. Queremos tentar ser mais orgânicos e autênticos com as pessoas, então será tudo sobre essa manchete. Qual é o seu momento preferido de viagem? Mais uma vez, vamos pegar algumas coisas emprestadas aqui. Vamos pedir emprestado o nosso pequeno círculo desta cópia e colar o nosso círculo neste quadro de arte . Então vamos pegar nossa típica ferrovia que temos aqui. Diz onde estilos de personagem podem ser úteis. Se você quiser ir em frente e definir isso para isso, nós temos uma ferrovia. Preto seria o que temos usado. O que? Vamos acabar com isso. Qual é o seu momento de viagem favorito? Então é assim que se rompe quando se lê. É uma forma mais natural de quebrar a manchete. Qual é o seu momento de viagem favorito em 2020? Eu adoraria ser capaz de quebrar isso ainda mais. Temos muito espaço aqui. Vamos fazer isso um pouco menor. Então aqui é onde temos uma manchete. É um pouco mais longo, e é aqui que o contraste pode mais uma vez nos ajudar muito. Temos de acabar com isto. Este é muito pesado tipo todos juntos. Então, uma maneira de fazermos isso é contrastar com o peso. Então, qual é a parte mais importante desta frase? Qual é o seu momento de viagem favorito em 2020? Bem, para mim, eu li isso como momento de viagem em 2020 sendo a parte mais importante da manchete. Então vamos fazer uma carta sua favorita? Espere, vamos fazer essa luz e notar como ele automaticamente tipo de corta a manchete e metade e torna mais fácil de ler. E vamos também fazer 2020. Vamos fazer isso são areias abertas porque eu apenas gosto da maneira como eles fazem seus números seu guisado extra ousado. E vamos fazer esse contraste com laranja. Então estamos fazendo dois níveis de contraste aqui temos contraste com o peso e contraste com tipo. Então vamos fazer isso um pouco menor, um pouco maior. E também podemos apertar o espaçamento aqui entre algumas dessas linhas. Então eu vou apenas destacar esta linha e bom para ir para o meu painel de personagens e apertar a deixa aqui para apertar o deixar um pouco. Agora está no 20. Vamos ver o que 18 se parece apenas apertando um pouco. Vamos também fazer isso o mesmo. Então, precisamos ter este comentário abaixo, e nós realmente queremos que essas coisas apareçam como uma chamada para o botão Ação. Então, uma maneira de fazermos isso é talvez por uma caixa laranja. Então vamos pegar nossa ferramenta de retângulo e fazer uma caixa laranja. Vá até o nosso preenchimento e faça a nossa laranja e vamos trazer isto para baixo. Mais uma vez, precisamos fazer este tipo consistente aqui. Então uma coisa que podemos fazer comentar abaixo é bom ter uma flecha. Você vê que com carrossel instagram carrossel postagens onde eles pedem com uma pequena seta para deslizar. Vamos fazer a mesma coisa aqui. Vamos fazer uma flecha para baixo. Então a melhor maneira de fazer setas ou qualquer tipo de ícones que eu sinto é um ilustrador de adobe. Tenho mais controle e Adobe Illustrator. Então vamos fazer uma flecha muito rápida e eu sou um ilustrador de adobe. Deixe-me ver se posso fazer isso um pouco maior para você. Então, no Illustrator agora vai obter a ferramenta pin. E eu vou me certificar de que a grade do show está ligada porque é muito mais fácil fazer até mesmo coisas simétricas com a grade. E vamos fazer um piscar de olhos. Então, encaixe na grade e o que está indo leva mapa. Dois escritórios pontuais quebraram uma grade. Vai fazer com que criar uma flecha seja fácil. Vamos clicar aqui. Ele vai automaticamente tipo de encaixar dois pontos e nós vamos fazer isso quando fizermos design de ícones e algumas lições, trazer nosso pino de traçado. Vamos fazer isso uma espessura agradável e o que é também em torno das tampas. Então tem, como um agradável cercado. Estamos fazendo tanto a tampa redonda quanto a junção redonda para dar umaaparência agradável e arredondada, aparência agradável e arredondada, criando uma era simples. Poderíamos fazer muitos trabalhos de ícones e iconografia mais tarde. No curso, que é sempre divertido e emocionante. Há uma seta simples. Não vamos aguentar tanto tempo. Está ficando um pouco mais curto. Vamos engrossar o derrame. E assim, temos uma flecha pronta para ir. Podemos selecionar isso e eu quero torná-lo branco. Acredito que sim. Vamos mudar isso agora antes de arrastá-lo para dentro. Assim, assim, somos capazes de criar nossa própria flecha. O que eu gosto de fazer é criar um monte de ícones comumente usados e manter um arquivo ilustrador ao redor. Então eu posso sempre este dragão uma seta quando eu precisar dele arrastando uma caixa de seleção ou uma marca de seleção. E também uma coisa que podemos fazer é adicionar movimento, dedo do pé tudo isso, e podemos querer adicionar um pouco de sombra para este dedo do pé, ajudá-lo a sair, mas não super forte. Então vamos reduzir a opacidade um pouco sobre isso e vamos adicionar um pouco de ângulo a isso porque agora parece OK. Mas e se pegarmos todos esses elementos e o inclinássemos um pouco, só para adicionar um pouco de movimento e emoção à manchete. Ele só parece um pouco mais dinâmico dessa forma, e o comentário abaixo não precisa assumir. Pode ser um pouco menor. A manchete é o que é mais importante nós também poderíamos reverter as cores para ver se isso funciona. Bem, bom também. Você faria um teste de visibilidade para ver como ele fica à distância? Qual é o seu momento de viagem favorito em 2020 comentário abaixo? E Aiken leu claramente o logotipo. Eu acho que este é um post muito mais envolvente que funcionará muito melhor no Instagram do que no Facebook. Porque Instagram, você tem que levar as pessoas a compartilhar post fazer algo. Sempre ter uma ação com qualquer post INSTAGRAM para fazer deslizar para cima, fazer algo. Comentário. Hashtag Há todos os tipos de coisas que funcionaram muito melhor no Instagram quando ele chama para as pessoas interajam com o seu post 17. Projeto de campanha social - Instagram 2: próximo é o destaque da história. Então, se você não sabe o que é um destaque de história no Instagram, são essas pequenas bolhas onde você pode destacar histórias postadas anteriormente. Nós vamos estar falando sobre como criar essa imagem em particular para ir lá. Então este é um círculo padrão e este é apenas um Você realmente vai estar exportando isso como uma cavilha J quadrada e ele vai cortá-lo em um círculo para você não tem que exportar como um círculo. Então eu tenho isso. Você pode alternar isso muitas vezes para ver onde ele vai eventualmente ser corrupto. Então isso vai ser bem fácil onde fazer uma história no Instagram que vai falar sobre o percentual de desconto do negócio, então isso vai ser uma história do Instagram vai ser 20% de desconto em todas as reservas, então isso pode ser realmente, realmente fácil de montar, e nós poderíamos fazer disso uma caixa sólida que sangra todo o caminho até a borda e torná-la nossa cor azul total . E podemos conversar ou cortar aqui , ver onde vai ser. Então eu vou bloquear esta camada de no meu ícone de cadeado. Tranque-o para que eu possa mover livremente o tipo. Como eu gostaria. Então é assim que ficaria. Iria nessa bolha aqui no Instagram que, você vê, poderia ser muito pequena. Então não podemos colocar a impressão pequena ou qualquer coisa louca, então tem que ser o maior que pudermos, para que possa ser o mais legível possível. Você poderia desligar isso. E então, assim mesmo, criamos um destaque para a história que você exportaria. Isto é como um J. Peg. Ele irá cortar tudo automaticamente para você e aplicá-lo no círculo. Então agora vamos fazer uma história no Instagram. Isso vai ser o que vamos salvar aqui. Então 20% de desconto em todas as reservas. Então o que é maravilhoso sobre isso é que nós já temos algumas grandes idéias, e então eu quero falar sobre o Instagram. Então, como você pode ver, quando você faz um instagram pago ou história promovida, você realmente tem um furto para cima para mais opções de informações aqui em baixo. Isso é o que esta caixa cinza na parte inferior indica. É aqui que essa opção estará. Então, qualquer tipo de fotos não será realmente visto. Será coberto por esta caixa preta. Então eu tenho isso lá no modelo que você não precisa exportar. Não exporte com ele. Mas está lá apenas para mostrar onde o pequeno botão de deslizar para cima estará na sua história. Então vamos tirar essa foto maravilhosa que temos aqui e copiar. Esta foi uma foto muito vertical. Então ele vai ser funciona perfeitamente para o tamanho da história do Instagram. Olha como isso já está bonito. Vou cortar isso um pouco mais, porque acho que não precisamos dessa parte de cima. Então só deixei a foto dela um pouco melhor. E eu vou trazê-lo para trás dessa camada. Passe o dedo para cima para saber mais. Queremos ter certeza de que temos isso em mente ao cortar nossa foto. Por isso, queremos ter a nossa promoção e o nosso logótipo. Nós definitivamente vamos precisar fazer um pouco de trabalho na loja de fotos para ter certeza que isso aparece acima do fundo. Então vamos fazer isso. Desde que nós definitivamente queremos ter o logotipo em cima, eu acho que é um bom equilíbrio lá. Vamos ver o que podemos fazer para talvez adicionar uma nova camada e apenas pintar um pouco de branco ou podemos fazer uma amostra aqui do céu e queremos ir em frente e trazer nossa oferta. Já temos nossa oferta aqui e Facebook, então esta pode ser uma situação muito simples de copiar e colar. Não vamos ter essa bolha por enquanto. Vamos ver se podemos tentar escapar colocando isso só nela. Ela tem contraste suficiente onde eu acho que o tipo será legível 20% de desconto em todas as reservas. E eu me pergunto se um alinhamento central poderia funcionar um pouco melhor aqui e então nós podemos ter . Acho que não precisamos da linha. O que eu quero fazer é ter um comando. Então, o que você faz? 20% de desconto nas reservas? Agora o que? Precisamos de um apelo à ação. Então nós vamos ah, ter um furto para cima para mais opções. Mas vamos liderá-los assim. Vamos em frente e ter um pequeno botão que vai dizer-lhes exatamente o que fazer. E vamos fazer um pouco transparente para que eu pudesse ver esse lindo fundo. Então a única coisa que eu não estou gostando sobre isso se você diminuir o zoom. É muito pesado no fundo. Você tem um monte de texto concorrente aqui, então eu me pergunto se nós não podemos mover a manchete um pouco acima aqui para tipo de equilibrar o logotipo ou equilibrar fora d estabelecer um pouco melhor. Isso pode significar que precisamos fazer este branco para se destacar no fundo. Então, um monte de arranjos diferentes que podemos fazer aqui com isso. Acho que está bem perto. Nós provavelmente precisamos trazer isso para fora um pouco mais porque eu odiaria Teoh perder essa manchete lá, então nós vamos ter que trabalhar nisso um pouco. Mas por agora e pelo que estamos fazendo, acho que é um bom começo. Isto é o que eu fiz originalmente, um pouco diferente. Eu fiquei com a laranja, mas o furto para cima para reservar. Mas acho que funciona muito bem. Podemos adicionar slides diferentes e nossa história e espalhar isso e fazer fotos diferentes e e trocar a foto para cada um e ter isso. Nós também podemos adicionar um vídeo de vídeo é muito envolvente quando se trata de histórias instagram, e isso é algo que você pode criar em uma data posterior. Não vou fazer o anúncio pago do Instagram ou o post retrato padrão, mas eu quero apenas tipo de ir através dos tamanhos no modelo para você. Haverá 10 80 por 10. 80 e o poste padrão de retrato. Este é praticamente o maior tamanho que você pode escapar com para um post. Você não tem que fazer um quadrado no Instagram. Você pode realmente fazer uma postagem mais longa, e isso realmente maximiza a visibilidade da sua postagem no feed de notícias porque lhe dá um pouco mais de comprimento lá na parte inferior. Então pense nisso. Ao montar seu post no instagram, você não precisa ficar preso com o 10 80 por 10 80. Você pode até mesmo fazer um 10 80 bay 13 50 se você estiver fazendo um post padrão regular. Então o que é ótimo sobre isso é que temos muito disso já estabelecido, então se quisermos tipo de voltar, eu posso copiar tudo aqui e depois trazê-lo para cima e já tenho um anúncio pago pronto para ir porque eu já o dimensionei . E então nós já meio que desenvolvemos o modelo básico avançando para todas as campanhas de mídia social que podem passar para o Twitter. E todas essas outras opções iam ficar com o Instagram e o Facebook para essa aula. Poderíamos passar 10 horas apenas em campanhas de mídia social. Eu queria passar para a última coisa quando se trata de nossa campanha de mídia social é fazer anúncios digitais. Então, enquanto eu falei sobre a seção de teoria anúncios digitais ou aquelas pequenas coisas que você vê em sites, você pode vê-lo. E você é Pandora. Alimente todos esses lugares diferentes. Foram estes estáticos acrescenta tipo de pop up ou existem dentro do blog e novos sites. É nisto que vamos trabalhar a seguir. Fiz muito disso pelo trabalho de cliente. Nós montamos muito disso. Vamos fazer todos os que você vê aqui, e é aqui que podemos ficar muito pequenos. Vamos fazer alguns anúncios móveis que são super duper, duper minúsculos. Alguns são apenas 50 pixels e hype. Isso é que nós realmente vamos nos esforçar como um designer para tentar capturar esta campanha incrível e reduzi-la para este pequenino, pequenino, pequenino, pequenino, pequenino tamanho minúsculo. É aqui que vai ser um desafio como designer. Mas isso é o que estamos aqui para fazer é fazer algumas coisas mais desafiadoras juntos. Então, vemo-nos lá em seguida. 18. Projeto de campanha de redes sociais - Display Ads: oferecendo anúncios de exibição. Você pode baixar este modelo e o curso para ser capaz de trabalhar ao lado de mim, e você já tem todas essas placas de arte dimensionadas. Mais uma vez, você pode clicar neles e ver qual é o tamanho. Estes são os monitores mais comumente usados em tamanhos, então eu pensei que na verdade existem centenas de diferentes tamanhos de exibição. Mas uma vez que você faz uma horizontal e uma vertical e também um quadrado, você terá os modelos para fazer qualquer tamanho imaginável. Então é por isso que vamos fazer estes tamanhos hoje. E eu queria falar sobre tamanhos. Então, estou clicando neste placar de líderes para dispositivos móveis, que é um anúncio de exibição para dispositivos móveis que você verá na parte inferior do APS ou na parte inferior dos sites para dispositivos móveis . E eu quero falar sobre o tamanho, então 320 com por 50 pixels de altura. Então, quando você está projetando isso, você tem que pensar em como eles são pequenos. Então você se lembra na seção de teoria do design, onde conversamos sobre o quão pequeno é em uma tela de telefone. Então temos que mostrar isso com intencionalidade em mente. Botões muito fortes de alto contraste de chamada para ação elementos de design muito óbvios não estavam fazendo nada sutil aqui. Tudo vai ser super óbvio e fácil de encontrar. Vai ser um pouco diferente de fazer um anúncio impresso. Então, para a primeira campanha, vamos fazer um anúncio de exibição. Nós vamos basicamente fazer este Facebook impulsionado Post. Mas desde que o Facebook tem esse botão maravilhoso que eles adicionam abaixo a foto em um post exibir anúncios não têm nada disso. Os anúncios de exibição são apenas estáticos. Às vezes eles podem ter animação, mas eles são apenas uma imagem. Então você tem que ter o botão para enviá-los para a página de destino ou para a promoção. Você tem que ter aquele botão de chamada à ação que diz clique aqui reservar agora. Então é isso que vamos fazer com isso. Vamos adaptar isto, colá-lo aqui mesmo na praça. Adicione, como você pode ver, a diferença de tamanho é incrível. É apenas o que, 200 por 300 pixels para um anúncio quadrado padrão. Vamos ter que reduzir o tamanho de muitos dos nossos elementos. Então, há mais um elemento que vamos querer trazer para isso, e que vai ser aquele chamado à ação, vai ser livro agora, então nós vamos ter que trazer um livro agora. Botão. Então, tudo bem, porque podemos fazer o nosso retângulo. E então, o que é uma boa ação chamada para um anúncio de exibição? Então livro agora pode ser um pouco melhor do que clicar aqui porque ele está tendo uma ação definida . Então clique aqui. Digo, sempre dizemos que você está sempre vendo coisas por clique aqui e tudo isso, mas é bom ter uma ação mais deliberada. Então reserve agora é um pouco diferente do que agora. É um pouco diferente do clique aqui. Vamos fazer o livro agora como um apelo à ação. Então precisamos agora incorporar um novo elemento para isso e perceber como ele parece pixelado. Não se preocupe. Esta ainda é uma imagem de alta resolução que temos aqui porque ver como temos ainda ícone . Sabemos que é uma imagem de alta resolução, mas só porque o tamanho é tão pequeno, tudo vai parecer um pouco pixelizado. Vamos trazê-la para baixo um pouco, Maurin isto para que possamos ter mais trabalho com o pé do céu. Nós também queremos apenas fazer algo muito rápido e fazer um brilho externo sobre isso apenas para tipo de ajudar a aparecer contra o fundo. Há algo muito rápido que você não tem muito tempo ao fazer essas campanhas de mídia social para fazer tudo sob medida. Então, o livro. Agora vamos fazer isso um pouquinho menor, mas não muito pequeno. Esta é a parte mais importante do anúncio. Mude tudo isso para cima e, em seguida, empilhe isso para que eles vejam a oferta e, em seguida, eles vêem o botão para clicar mais, e nós podemos ter este sangramento fora das páginas. Manter o turno pressionado é ter aquele botão sangrar e podemos nos ajustar. Este círculo é tal que não temos muito espaço para a foto até impressionar as pessoas, mas com anúncios de exibição, é realmente sobre a oferta que você está dando a eles. Então este é um arranjo rápido para o primeiro quadrado. Adicionar. Será a base para tudo o que fizermos. E agora que temos um quadrado em um retângulo final em linha, é apenas um pouco mais largo. Mas tem a mesma altura, então o que podemos fazer é facilmente copiar e colar todos esses elementos e você tem um pouco mais largura, então você apenas ajusta os elementos. Você pode adicionar um pouco mais da foto lá, então é fácil, uma cópia e colagem fácil. Quando você está fazendo essas campanhas, vamos fazer algo um pouco diferente para nosso grande arranha-céus, então grandes arranha-céus ou 300 x 600 pixels. Ainda não é enorme, mas se você olhar em um site, ele realmente tem uma oportunidade de agarrar as pessoas muito mais do que como um anúncio de placar ou um anúncio quadrado. Temos este maravilhoso espaço vertical. Então fizemos isso. Fizemos isso mais recentemente para a história do Instagram. Então, agora que temos isso, vamos em frente e usá-lo. Agora que temos aquele anúncio, só precisamos ajustar a foto um pouco mais. E em vez de passar o livro para cima, este vai ser o nosso livro agora. E assim, convertemos essa história do Instagram para um anúncio de placar ou arranha-céus, e podemos tornar isso ainda mais alto contraste. Pergunto-me se o Blue poderia funcionar um pouco melhor, como se isso aparecesse um pouco mais. Podemos fazer isso laranja de novo. Então, há alguns pequenos ajustes que estamos fazendo. Não é uma cópia exata. Vamos deixar isso um pouco mais branco. Precisamos ser o mais óbvios possível com seus anúncios minúsculos. Não estamos brincando com facilidade. Podemos até fazer uma máscara de camadas aqui, e eu vou pegar minha ferramenta Grady int e eu tenho um preto e branco. Assim como pintar com um pincel, estou fazendo uma ferramenta radiante em uma máscara de camadas. Mas eu me pergunto se eu poderia simplesmente desbotar o topo um pouco , escavá-lo assim e, em seguida, trazer um fundo que combina. Então, apenas imaginando como isso ficaria que tipo de trazer mais ênfase no logotipo. Também nos dá a chance de torná-lo um pouco maior. Então agora que temos aquele arranha-céu feito, e agora é provavelmente hora de uma das coisas mais difíceis de fazer nas mídias sociais e exibição. anúncio está fazendo os placares de líderes, mas, em seguida, trabalhando seu caminho para baixo para os anúncios de banner pequenos e o placar de líderes para dispositivos móveis. Então vamos tirar uma foto diferente porque nenhuma de nossas fotos funcionaria em um espaço tão pequeno. Então, vamos trazer os elementos absolutamente necessários aqui. Não vamos ser capazes de usar tudo para o que usamos nos espaços maiores, então as coisas vão ficar reduzidas. Então temos que fazer um logotipo. Isso é bom e grande. Temos 20% de desconto nas reservas que temos de usar. Não vamos ser capazes de espremer a impressão pequena. Isso pode ser para a página de destino que eles vão mais tarde. Então está tudo bem. Precisamos de um livro chamado Ação. E vamos usar deixe-me ir em frente e apagar isso. Deixe-me usar esse tipo de parece já ser a cor que eu gosto. Você percebe o quão rápido é dito para arrastar e soltar alguns desses elementos depois que nós definir lá e e teve que trabalhar a sala. Então esta é a coisa mais importante. Então, como podemos organizar isso? Então eu acho que empilhá-lo, isso não vai funcionar. Então vamos ter que espalhar isso horizontalmente um pouco. Então, uma coisa que podemos fazer é ter o livro agora meio que se destaca por conta própria aqui. Faça uma cor sólida, um pouco maior, assim como esta. E vamos ver se nós não podemos fazer isso um arranjo de tipo horizontal assim e nós podemos até mesmo ter espaço para a impressão pequena, acredite ou não. Mas temos que trabalhar em uma foto em algum lugar porque não vamos capturar pessoas com a oferta chata dele . temos mais um que não usamos, e notei que isso tem uma apresentação muito horizontal. Então vamos trazer o nosso pequeno mergulhador. Precisamos fazê-lo onde possamos ver o que ele está fazendo, que ele está realmente mergulhando. E esta vai ser a parte difícil, porque vamos torná-lo bastante pequeno. Também queremos manter as montanhas porque é tudo sobre aquele local exótico. Vamos fazer com que ele se encaixe bem entre esses diferentes elementos aqui. Podemos ampliar este aqui, e podemos sempre desvanecê-lo. Nós podemos fazer uma máscara de leering, pintar com preto para tipo de desvanecer em apenas assim, nós temos o logotipo agradável e grande. Podemos sempre, se sentirmos que as fotos são muito pequenas, podemos fazer isso um pouco menor. Digite-o, ser capaz de trazer o nosso homem um pouco mais de frente e centro. Então essa é a parte difícil, e fica um pouco mais difícil. Então agora temos que pegar isso e fazer metade do tamanho. E aqui está o que não temos espaço para. Vamos perder algum espaço horizontal para não termos espaço para colocar este botão no centro da frente . Então os botões vão ter que ser empilhados abaixo da oferta e ainda temos que incorporar o logotipo. Poderia fazer um pequeno, mas menor, mas não por muito. E poderíamos trazer nosso cara, e é com isso que acabamos. Então você percebe como é a diferença entre esses dois. Tive que mudar o botão do livro agora por baixo. Nós não temos espaço para a impressão pequena porque com 500 por apenas 60 pixels de altura, você simplesmente não tem espaço para a impressão pequena faz apenas uma coisa que você tem que eliminar. Tivemos que ter um arranjo diferente para o botão, e quatro, eu fui em frente e fiz o anúncio móvel, e você percebe que é praticamente a mesma coisa é o anúncio banner acima. Eu só tive que eliminar a foto, e essas são as concessões que você faz. É realmente difícil ter uma foto de alto impacto em algo que tem apenas 300 por 50 pixels. Então essas são as concessões que você tem que fazer lentamente. Ele ainda mantém a marca. Ainda há as mesmas cores e temas envolvidos. Você pode olhar para todos esses, todos esses temáticos aéreos. Dá para ver que fazem parte da mesma campanha. Quando alguém vê uma exibição desta empresa e vê o post pago nas redes sociais, eles vão conectar os dois e eles vão começar a construir esse reconhecimento de marca que é tão importante levá-los para a parte final de vendas para convertê-los para um cliente. E se você pode fazer isso como um designer gráfico e pensar sobre todo o quadro de marketing e ser capaz de fazer gráficos que convertem bem e que nossa temática e que tem branding, você vai ser capaz de cobrar mais ansioso para ser capaz de ser um mais desejo eficiente. Então eu queria passar por isso. Sei que foi um pouco tedioso. O olhar para cada campanha que acabamos de criar juntos nós fizemos tudo isso do zero é uma empresa muito realista e campanha para a qual você teria um cliente. Não é essa marca muito legal e moderna. É um tipo muito realista de empresa para a qual você trabalha, e eu gosto de ser o mais realista possível porque eu quero que meus alunos sejam bem-sucedidos e 2 16, então a seguir temos ainda mais projetos para resolver, mas estamos terminando este. Estou tão feliz em te ver por isso. Faça uma pausa e te vejo no próximo projeto. Eu tenho um pequeno desafio estudantil para vocês, então eu quero que vocês passem pelo mesmo processo que nós passamos. Se você quiser passar pela aula e usar as mesmas fotos no mesmo logotipo, sinta-se livre para fazer isso. Mas eu quero que você faça um projeto especial com sua própria marca única. Quero que anuncie a si mesmo e a algumas campanhas de redes sociais diferentes. Sinta-se livre para fazer alguns anúncios de exibição, mas eu realmente quero ver definitivamente uma foto de capa do Facebook. Eu gostaria de ver um anúncio pago no Facebook e pelo menos uma postagem no Instagram de você. Eu amo que você seja tão criativo. Expresse-se com sua própria marca pessoal. O que quer que você venda, quaisquer serviços que você vende fora de seu designer gráfico ou um Web designer, eu quero que suas cores de personalidade e tema de marca para sair nos projetos estudantis. 19. Dicas para aumentar seu seguidores no Instagram: Tenho mais de 25.000 seguidores no Instagram e estou no espaço de design, especificamente no espaço de design gráfico. E eu queria mostrar a vocês algumas dicas e truques sobre como crescer no Instagram, aumentando seu design gráfico ou perfil de design. A melhor coisa que você pode fazer é tentar e errar para descobrir quais tipos de postagens e vídeos realmente funcionam melhor quando vou examinar algumas das minhas postagens com melhor desempenho e falar sobre o porquê eles eram bons e por que terminamos alguns outros. Então, vamos falar sobre, vamos falar sobre as coisas boas. Vamos falar sobre qual foi a postagem com melhor desempenho nos últimos cinco anos de postagem no Instagram. E essa vai ser essa aqui. Tem 5.268 curtidas e 65 comentários. E o que é é um poste de carrossel, então você pode ter até dez slides de postes de carrossel. Todos os meus cinco primeiros colocados com as postagens são slides de carrossel. Eles não são reais, então eu tenho algumas regras que funcionaram bem. Mas é principalmente um formato que não é de vídeo. E o grande truque é que maioria delas é altamente educacional e informativa o suficiente para que as pessoas as marquem e as salvem. E então, de repente, o algoritmo do Instagram começará a veicular suas postagens para mais pessoas porque elas as veem como valiosas, as salvam e as marcam como favoritas, isso é o máximo coisa importante. Então, como você pode ver, repleto de informações, provavelmente a maioria das minhas postagens que fiz é tentar realmente fornecer toneladas e toneladas de informações em um só lugar, então eles não precisam sentar lá e ser alimentados com uma colher com esses pequenos pedaços de informação. Eles podem ter uma postagem na qual possam obter tudo sobre esse tópico específico. E, claro, no final, tentar fazer algum tipo de conexão no final. Mas eu tento não anunciar demais nesses posts informativos. Quero que não seja autopromocional porque isso anularia o objetivo de tentar fazer com que isso fosse compartilhável e marcável como livro. Então, vamos dar uma olhada nos insights sobre isso. Este é um número grande e não sei se algum dia conseguirei superar esse número. Espero que eu faça isso algum dia. Mas 359.000 pessoas entraram em contato com esta. É um número enorme, quase meio milhão de pessoas com um pequeno post sobre design de layout. Mas era tão informativo que as pessoas o compartilharam e não foi muito promocional. Então, eles sentiram que poderiam compartilhar isso com seu público e não sentirem que estavam me compartilhando , adicionando ou anunciando. Então, o que eu gosto de ver são as visitas ao perfil. Então, houve quase 3.000 visitas de perfil, pois 3.000 pessoas podem vir conferir minhas outras coisas e conferir meus outros trabalhos. Temos 12.220 marcadores. Caramba, são muitas pessoas que guardam isso para mais tarde. Isso significa que esta postagem está em algum lugar lista salva de alguém e essa pessoa sempre pode voltar a ela mais tarde. Essa é a métrica mais importante de tudo: o Bookmark. Em seguida, ele vai para o compartilhado, depois para os comentários e depois para as curtidas. As ações sempre aumentam esses números para você. Então, vamos dar uma olhada nisso por um minuto. Das 383.000 impressões. 212 é de casa, 160 era do explore e apenas 4.500 são de hashtags, que significa que as hashtags podem ser boas para oferecer talvez 5% a mais de engajamento e exposição, mas as hashtags são apenas relevância e eu ainda os uso. Eu ainda escolho uma boa combinação de hashtags que são populares e talvez não tão populares. Mas, honestamente, é apenas de cinco a 10% da minha exposição total no Instagram. Vamos continuar. Vamos ver o que mais era popular e o que era impopular. Porque acho que podemos aprender muito mais com o que era impopular do que às vezes com o que era popular. Então, outro popular é muito, muito parecido. E está aqui. É muito parecido. É um carrossel, é um pacote altamente informativo. Este era sobre a anatomia da tipografia. Você pode ver que o primeiro slide está completamente empacotado, ainda legível, ainda legível. Eu não gostaria de colocar mais nada aqui , pois provavelmente começará a ficar ilegível. Mas à medida que você desliza, tudo está repleto de informações. É educacional, é compartilhável, não é promocional. Não estou exibindo apenas um projeto. E acho que foi isso que funcionou com este também. Então, veja esse emparelhamento de fontes. Acabei de dizer, isso é apenas um slide de dez. Então, é como ter dez postes empacotados em um quando você faz um post tenso, como um carrossel. E, na verdade, vi outros criadores de conteúdo compartilharem que as postagens em carrossel têm um desempenho melhor do que as reais. Para eles, dizem muito, o vídeo é ótimo, mas eu não estou vendo um vídeo indo muito bem para mim. Isso é meio que algo em que pensar. Então, vamos dar uma olhada nas ideias desta. Não é tão empolgante quanto a anterior, mas ainda assim quase um quarto de milhão de pessoas chegaram. Essa é uma quantidade incrível de alcance que eu simplesmente não tinha antes de começar a postar essas informações do carrossel que publicarei. E você verá que o compartilhamento é enorme. Quando eu chego a esse tipo de referência de 500 ações, é quando ele realmente explode e ele recebe centenas de milhares de espectadores. E eu realmente não, quero dizer, curtidas são boas, mas eu simplesmente as ignoro e os comentários, é claro, são muito importantes. Mas, na verdade, compartilhamentos e favoritos. É com isso que eu realmente me preocupo, proponho que eu o considere viral. Então, vamos continuar. Há outra postagem informativa no carrossel que funcionou bem. Se você observar os insights sobre este, ainda é bastante sólido , com 30.000 pessoas alcançadas, não tão boas quanto as outras, mas ainda assim com muitos favoritos. É a mesma coisa que eu pensei que a cor realmente tende a atrair pessoas quando eu posto sobre cores, essa não funcionou tão bem. E eu realmente não posso te dizer o porquê. Principalmente porque, quero dizer, é um pacote de informações, mas talvez não seja tão denso quanto os outros. Então, talvez seja por isso que não funcionou tão bem. Muito disso é um pouco mais básico. Este gráfico, embora sozinho, acho que há um ano publiquei essa psicologia das cores da cartela de cores. Mais uma vez, super denso com informações que, por si só, também são muito boas, também são muito boas, porque são muito densas, mas ainda assim legíveis. Quando eu faço listas, elas tendem a se sair muito bem. Portanto, essa é uma recomendação de quem seguir e de design gráfico, e essa foi uma postagem sólida. Vamos dar uma olhada nos insights. Alcance de 38.000, isso é muito bom. 21 ou quase 2.200 marcadores, não compartilhados tanto quanto o outro em termos de comparação dessas duas métricas. Portanto, não é tão compartilhável, mas acho que o livro marcável é muito bom porque eles têm 2020, 200 pessoas guardam isso em algum lugar , onde podem voltar e vê-lo mais tarde. Eles continuarão voltando ao meu perfil. É isso que queremos quando tentamos crescer na conta do Instagram. Portanto, essas listas tendem a funcionar muito bem. Mais uma vez, há um tema cada um deles e essa densidade. Está repleto de ótimas informações sobre outra que se saiu bem desde que está bem listada, e eu faço muito isso. Se eu tenho algo que é bem-sucedido, eu tento várias vezes até que não seja mais bem-sucedido. Então eu tentei novamente com a lista. Hum, eu fiz design de logotipo. Deixe-me ver se consigo encontrá-lo. Aqui está aquele sobre design de logotipo. Não teve tanto sucesso porque design gráfico é um tópico maior do que o design de logotipos. O design de logotipo é um subconjunto ou subtópico do design gráfico. Então, obviamente, quanto mais amplos forem seus tópicos, mais alcance, alcance potencial e interesses você poderá ter. Então, outro post forte, mais uma vez, pacto informativo foram os livros de design gráfico que eu recomendei. Mas em vez de apenas dizer que aqui está um livro, eu o recomendo. Eu tinha uma pequena sinopse que explicava por que eu recomendei o livro. E eu achei que isso funcionou muito bem. Isso me deu a chance de anunciar meu pequeno livro sem ser muito promocional. Então, é meio que uma maneira de incluir essa promoção sem fazer com que pareça um anúncio. Mas eu também recebi essas outras ótimas recomendações porque os estudantes me perguntam muito: quais livros de design gráfico eu recomendo? E também consegui marcar alguns dos criadores. Eu sigo muitos dos criadores dos livros. E eu consegui marcá-los e eles puderam voltar a comentar. E algumas dessas pessoas são grandes nomes de design gráfico. E também consegui colocá-los em meus comentários porque consegui marcá-los porque recomendei seus livros. Então, isso é algo a fazer é recomendar algo que um criador fez. Marque-os, espero que eles respondam à sua postagem ou interajam com sua postagem de alguma forma. Então, outra que eu decidi fazer, essa ideia para este post e muitos posts muito bons vêm de ideias que, de perguntas. Eu recebo muito das pessoas repetidamente. Uma dessas perguntas é: quanto tempo é necessário para concluir projetos, projetos projetados? Então eu decidi fazer esse infográfico. Demorou cerca de 2 horas para montá-lo. Mas acho que valeu o investimento de 2 horas porque o alcance que consegui com esse post no Facebook foi muito bom. No Facebook, na verdade, recebi uma resposta muito boa sobre isso, porque o Facebook tende a adorar postagens repletas de informações no Instagram. Eles também adoram. Mas o Facebook ainda mais. Vamos dar uma olhada nos insights sobre isso. Foram alcançados 45.000 e 73% não estavam me seguindo. Então, essa é uma ótima porcentagem. Você quer que mais pessoas não o sigam, vejam seu conteúdo para que possam se tornar seguidores. Esse é um aspecto muito importante. Então, eu quero mudar de marcha. Eu falei muito sobre postagens em carrossel e postagens de imagem única. Eu quero falar um pouco sobre reais. Todo mundo tem dito o quão incrível é a realidade, o quão incrível é o vídeo. E em alguns casos isso é verdade, mas eu não experimentei tanto isso. O melhor dos reais é que, se você fizer reais suficientes, eles o convidarão para fazer parte do programa de bônus. Onde está o programa de bônus de reais em que você é pago por jogo real. E os primeiros cem dólares são muito fáceis de conseguir porque você só precisa de cerca de 30.000 lugares reais. Mas depois disso, começa a ficar muito difícil e você precisa de milhões apenas para conseguir cem dólares extras. Então, eu sou capaz de gerar pelo menos $100 postando três ou quatro reais por mês. Então, acho que vale a pena fazê-las. Mesmo assim, não acho que sejam tão bem-sucedidos em termos de alcançar mais pessoas. Então, vamos dar uma olhada em alguns dos que tiveram mais sucesso. Então, essa era uma psicologia da cor, que eu pegou aquele gráfico e pude examinar coisas diferentes sobre cores. Basicamente, percorra aquele gráfico, mas com um vídeo e um real E isso tendia a funcionar bem, tinha cerca de 12.000 visualizações. Achei que era muito forte. Há muitas mortes aqui. Muitas coisas em que eu posto coisas pessoais sobre fazer uma caminhada ou minhas férias. E esses simplesmente não funcionam bem porque não estão relacionados ao meu tópico de design gráfico. Eles são muito pessoais. É como o que um influenciador publicaria. Não me considero um influenciador quando se publica sobre meu estilo de vida. Eles simplesmente não se dão bem. Então, eu quero fazer essas postagens porque elas são meio divertidas e interessantes e uma pausa no design gráfico. Mas estou me afastando do meu nicho. Estou me afastando do meu tópico e eles não se dão nada bem. Então, este se saiu muito bem. Consegui criar esse pôster, encomendei e realmente o coloquei à venda , se você quiser comprá-lo na Society Six. Mas eu consegui fazer isso, tirar algumas fotos. E mesmo que isso seja como um anúncio de produto, por algum motivo, ele realmente ressoou nas pessoas e teve uma visão muito boa sobre ele. Acho que tive 17, 17 ou 15.000, 15.000 visualizações. E há algumas que eu achei que seriam boas. O Affinity Designer, que é uma alternativa à Adobe, lançou essa nova atualização de software suave. E então eu falei sobre tudo o que havia de novo nele. Simplesmente não funcionou bem porque, você sabe, é uma espécie de software secundário. Embora eu adore o software Affinity, a maioria dos meus alunos, maioria do meu público, usa a Adobe e ela simplesmente não se conectou com a maioria do meu público. E eu tenho que tentar descobrir, e eu tenho que tentar me lembrar de me conectar mais com a maioria das coisas que meu público gosta, mesmo que eu goste de postar sobre essas outras coisas. isso. Não há nada mais realmente significativo. Não tenho nenhuma recarga com mais de 20.000 visualizações. E se eu fizer isso, vou te contar como fiz isso se algum dia eu conseguir isso. Mas agora estou mais focado no que está funcionando, que é a postagem do carrossel. Então, obviamente, quando eu anuncio e faço publicidade direta, óbvio que estou vendendo alguma coisa. Esses nunca funcionam bem e funcionam bem se você quiser impulsionar a postagem e ganhar algum dinheiro pago para continuar impulsionando a postagem. Mas se você está apenas procurando seguidores orgânicos, nunca é bom fazer postagens diretas dedicadas que anunciem. Então, o que eu tenho feito ultimamente é fazer minhas postagens informativas e, no final, anunciar. E isso é muito melhor do que isso, onde é apenas uma média, apenas uma soma direta. As pessoas veem que elas pensam, eu não estou interessado, seguem em frente e não se envolvem com a postagem. Não funciona muito bem. Portanto, este tem apenas 174 curtidas e o alcance provavelmente é baixo em comparação com o que eu estava mostrando a vocês. Então, o que eu gosto de fazer é Stealth, acho que você chama isso de publicidade furtiva, que você meio que a coloca em algum lugar no final de alguma coisa. Ou você faz com que eles baixem um PDF e, no final, você está vendendo algo. Esse é outro método, além de oferecer algo de graça. E então você tem um pequeno plugue no final depois de dar isso a eles. Outra, eu realmente tenho que falar com você sobre isso. Eu postei algumas coisas sobre criptografia e também postei algumas coisas sobre algumas novas tendências emergentes que são muito controversas. Uma delas foi essa criptográfica, que eu realmente perdi muitos seguidores quando publiquei isso porque muitas pessoas dizem, bem, eu amo criptomoedas e sou seguidora e não acredito que você não era acredito em criptomoedas e perdi muitas pessoas dessa forma. Então, eu tenho que lembrar, OK, metade do meu público adora criptomoedas, metade deles odeia. Não posso postar algo que diga que sou a favor de algo e esperar que o público respeite isso, a menos que seja algo em que eu realmente acredito e que seja algo que eu não sei. Estou em cima do muro. Eu provavelmente não deveria ter postado algo tão forte. Mas outra coisa que fiz foi M, uma arte gerada por IA. Eu experimentei o Mid Journey e fiz um post sobre como explorar meu processo de geração de AR. E muitos do meu público ficaram muito, muito chateados. E quando ele analisou meu gráfico de seguidores e meus seguidores, você verá que essa grande queda de pessoas realmente perderam mais seguidores naquele dia do que eu ganhei porque falei sobre um assunto polêmico. E muitas pessoas se ofendem com o fato de AIR assumir o controle de artistas que trabalham muito. E eu tive algumas conversas incríveis, uma grande quantidade de conversas incríveis com pessoas que me conhecem e elas sabem que eu não estou contra ninguém ou a favor de nada que fosse bom e exagerado alguns dos melhores engajamentos com essa postagem, mas ela também teve muitas pessoas e me seguiram. Então, eu só preciso ter cuidado ao escolher tópicos nos quais eu acredito 100% e não gosto meio a meio, especialmente quando são controversos. Este eu empacotei com informações. É sobre um projeto de logotipo no valor de $100 ou 10.000? E a resposta é determinada pelo valor. E, na verdade, tirei isso de outro livro que escrevi e acabei de empacotar isso com muitos exemplos muito bons. E achei que ia sair bem, mas essa postagem não funcionou tão bem quanto fiquei meio decepcionada porque passei muito tempo nela. E uma das coisas que eu percebo é a diferença entre as postagens que tiveram muito sucesso nesta é essa é muito, muito cheia de palavras. Não é tão visual, não tem tantas informações gráficas que contenham algumas Mas acho que foi desanimador no formato do Instagram que eu acho que pesava um pouco de duas palavras. Então, depois de um membro, existe uma maneira de detalhar meus gráficos e torná-los mais visuais e criar infográficos a partir de parágrafos. E acho que isso teria nos ajudado a fazer melhor. Então, outra coisa é engajar seu público. Então você tem favoritos e compartilhamentos, o que realmente ajuda a postagem a se tornar viral. Infelizmente, os comentários não ajudam tanto quanto você imagina, mas é muito bom que seu público atual se envolva com você e você se envolva com eles. Então, de vez em quando, eu faço uma postagem base de conversação para dividir todas essas postagens de base informativa em qualquer tipo de postagem promocional que eu faça. Era exatamente nisso que eu deveria me concentrar a seguir. E isso tinha mais comentários do que qualquer coisa, nada que eu postei mas teve muito, muito feedback e engajamento muito bons. O carteiro estava muito bem diante dele, mas eu me sinto muito bem. Recebi um pouco mais rápido todas ótimas sugestões de pessoas e diretores e consegui conversar com todas as pessoas, sempre voltando a cada comentário a menos que seja spam, isso sempre ajuda o algoritmo. Talvez não tanto quanto eu esperava, mas ainda ajuda comentar sobre cada comentário. O coração, cada comentário, na verdade, realmente se engajar. Então, mais uma vez, aqui está uma postagem que achei que funcionaria muito bem porque passei horas nesta postagem. São momentos importantes e a história do design gráfico moderno. E passei horas pesquisando isso, obtendo gráficos e juntando tudo , mas simplesmente não funcionou tão bem. E eu estou pensando, mais uma vez, que é a palavra “peso”. Eu precisava encontrar uma maneira de dividir isso em infográficos é demais. É quando aquela coisa densa de informações de que eu estava falando anteriormente, você pode exagerar. E esse é um bom exemplo porque achei que isso não é ótimo. Então, o que eu fiz foi pegar todo esse trabalho e colocá-lo em meus cursos para que as pessoas pudessem usá-lo. Não foi desperdiçado. Não era, essa criatividade não estava certa, desperdiçada. Esta postagem não foi desperdiçada. Eu estava triste e me saí tão bem no Instagram. Então, isso pode ser um pouco difícil de ouvir porque achei que publicar alguns dos meus trabalhos pessoais obteria o maior número de visualizações porque, ei, as pessoas estão interessadas no meu trabalho. Quando eu descobri é que não é tanto o caso. E acho que esse é o caso de muitos criadores. Alguns criadores têm estilos realmente únicos e as pessoas realmente os adoraram e os consumiram. Eu estava experimentando com 3D. Decidi publicar meu trabalho. E você acabou de obter números de engajamento muito, muito baixos com quase todas as vezes que eu acabava de publicar um trabalho porque não havia muito nisso. Isso me deixa ver se consigo encontrar outro. Quero dizer, não há muita coisa nisso. Aqui estão alguns trabalhos que você pode gostar. Você pode comentar e dizer: Oh, eu gostei ou como você o criou? Mas não há muito engajamento ou motivo para responder a um projeto a menos que você goste muito dele. Só sinto que não é compartilhável. Quero dizer, se for um projeto incrível de alto nível, talvez seja compartilhável. E eu ainda encorajo vocês a publicarem seu trabalho porque ele ainda pode funcionar muito bem se você publicar seu trabalho. Mas não pense que essa é a única maneira de publicar projetos de design simplesmente publicando seu trabalho e pronto. Você precisa publicar postagens informativas para que possa se estabelecer se estabelecer como um especialista qualificado. E essa é uma ótima maneira de descobrir se expor ao possível trabalho do cliente é publicar uma variedade de coisas descobrir o que funciona para você. E eu acredito firmemente em publicar informações e simplesmente me solidificar como especialista na área. E essa é provavelmente a melhor maneira de se estabelecer como profissional e fazer com que esse cliente extra trabalhe. Mas também misture alguns projetos pessoais. Mas não trate o Instagram como um portfólio. Você tem um portfólio, seja no Behance ou no seu próprio site. Hum, e você pode ter uma conta separada que apenas publica seu trabalho. Mas se você realmente deseja aumentar seu público e se desenvolver como profissional. Faça uma mistura, faça uma combinação de educação e algumas ideias sobre o setor coisas a serem observadas e esses tipos de postagens. Porque eu acho que você vai se dar muito bem com eles. Então, eles não têm. Eu só queria compartilhar com vocês algumas ideias para que você possa trapacear um pouco e aproveitar os cinco anos de trabalho que fiz publicando o que funcionou e o que não funcionou. E meio que pegue isso e use-o para criar seu próprio Instagram, para que M TikTok e todas essas outras coisas também. Quero dizer, qualquer tipo de plataforma de mídia social. Acho que muitos desses pôsteres, mas também no Facebook, e alguns deles se saíram melhor no Facebook e outros se saíram melhor no Instagram. E você está pronto para descobrir quais funcionam melhor com o tempo. Mas eu só queria gravar um vídeo rápido que compartilhasse mais algumas ideias. Tentando criar vídeos que ajudem você a gerar receita ou a crescer profissionalmente com suas habilidades de design. Espero que você tenha gostado desse vídeo e me diga se quiser que eu crie mais coisas assim, um pouco mais nos bastidores, nos bastidores de como eu cresci nos últimos anos e como você pode crescer sozinho. 20. DESAFIOS de design de estudantes: agora é hora para o próximo devido ao desafio de design. Desta vez, sua tarefa será criar uma campanha coesa de mídia social composta por pelo menos duas postagens diferentes. Anúncios pagos são anúncios digitais. Isso pode ser para Facebook, Instagram e Instagram história. Miniatura de vídeo do YouTube Qualquer coisa que tenha uma presença digital online na plataforma de mídia social . Se você quiser fazer um conjunto inteiro de tamanhos ou postar em diferentes plataformas, sinta-se livre para fazê-lo. Mas apenas dois são necessários para apresentar um projeto para este desafio. Você terá várias semanas para montar sua campanha. Você pode postá-lo nos grupos do Facebook para feedback para enviar, ou você pode postá-lo nas Q e A. São seções de projeto da sua classe atual que você está fazendo ou apenas me envie uma mensagem de seu trabalho. 21. Gifs animados no Photoshop: Então, que tal animada? GIFs são anúncios de exibição animados. Vamos aprender a fazer isso no Adobe Photoshopped hoje. Vamos criar esta animação GIF para uma exibição no nosso grande anúncio de arranha-céus, que será de 300 por 600 pixels. E vamos fazer isso animado para que possamos adicionar um pouco de animação aos nossos anúncios. Além disso, você pode fazer GIFs animados para anúncios do Facebook, bem como outras plataformas de mídia social, não apenas para anúncios de exibição. Então vamos em frente e começar aqui. Então eu estou pegando os elementos básicos de marca que já desenvolvemos com nossa outra campanha de marketing digital , e vamos adaptar tudo isso para criar um pouco de um modelo que vocês podem baixar. Vou em frente e mudar para o modelo. É chamado de modelo GIF animado, e vai ser o 300 pixels e com por 600 pixels e altura, anúncio arranha-céu e já tem alguns dos arquivos de logotipo e alguns do tipógrafo aqui, vamos animar todo esse dedo do pé não mais dar uma sensação estática, mas para tipo de chamar os espectadores Atenção quando eles estão rolando através de seu site de notícias , eles podem tipo de ter um pouco de animação e sempre ajuda a ter animação de vídeo tanto quanto você pode, se for possível. Então, sinta-se livre para abrir o modelo ou criar o seu próprio. Se você quiser criar o mesmo gráfico sozinho sem usar o modelo, vá para arquivo novo. Você só vai fazer um 300 por 600. Claro, você pode fazer qualquer anúncio tamanho ele pode dio e resolução. Vou mantê-lo em 300. Por enquanto, se o tamanho do arquivo for um grande problema onde quer que esteja colocando seu anúncio, você sempre poderá reduzi-lo para 72, mas três centenas. Bom. Se é que você tem um pouco de espaço de manobra com seus requisitos de tamanho de arquivo. modo de cor sempre será RGB, e isso é praticamente tudo. Nós vamos apenas ir em frente e clicar, OK, e ele vai criar um modelo simples para você, e eu apenas meio que arrastei esses arquivos no ar apenas muito simples e ter certeza que você nomeia todas as suas camadas. Então eu vou seguir em frente e nomear todas as camadas aqui porque quando começarmos a animar cada uma dessas camadas. É muito bom ter estes intitulados. Então, como fazemos loja de fotos animadas? Não parece haver um monte de opções aqui para animar. O que precisamos fazer é abrir uma nova janela. Nós vamos até o nosso painel de opções de janela e trazer para fora os painéis de linha do tempo vão em frente e ir para a linha do tempo da janela. Essa é a chave para começar com a animação e a criação de presentes. Esta vai ser a nossa linha do tempo. Vamos apenas clicar na opção criar linha do tempo de vídeo. Há também a capacidade de criar uma animação de quadros. Vamos fazer uma linha do tempo de vídeo. Então o que ele vai fazer é pegar cada uma de nossas camadas em nosso painel de camadas, e ele vai dar-lhe uma linha de tempo através de uma linha de tempo padrão, então você vai notar que cada camada corresponde até então nós temos uma caixa laranja e, em seguida, camada de caixa laranja uma camada de logotipo e, em seguida, uma camada de logotipo, e você notará como eu seleciono as camadas. Na linha do tempo. Ele selecionará automaticamente as camadas no painel de camadas. Então vamos editar cada um deles um por um e criar uma animação diferente para cada camada para dar um efeito dinâmico. Então, se você já fez uma edição de vídeo antes, você estará em casa, se você já jogou e depois de efeitos, será uma configuração muito semelhante, mas muito mais simplista na loja de fotos. Então vamos fazer algo muito simples para que possamos falar sobre o que é chamado de animação de quadro-chave . Então vamos fazer algo simples com esta tipografia. Gostaríamos que esta tipografia desaparecesse lentamente de opacidade zero a 100% de opacidade. Assim como o presente simples aqui. Nós só queremos começar a desvanecer-se lentamente de 0 a 100. Então, vamos encontrar essa camada. Então você tem selecionado ioga na praia. Então aqui está a nossa camada bem aqui. Claro, você pode alterar o tamanho disso por padrão. É bem apertado, então geralmente é assim, mas eu gosto de tê-lo agradável e aberto. Então ioga na praia. Então o que vamos fazer é que eles são apenas uma pequena flecha e nós vamos desmoroná-la. Nosso próprio colapso e um bom para ser dado várias opções diferentes. Transformou a opacidade, estilo e o texto distorcem o que vamos mexer com a opacidade dele quando mudar de 0 para 100. Então o que queremos fazer é definir quadros-chave para cada uma das animações. Até agora, Opacidade. Bem, quando eu for e clicar no cronômetro bem aqui, basta clicar nesse ícone e ele vai seguir em frente e configurar um quadro chave para você. Então este primeiro pequeno triângulo amarelo será o seu quadro chave. Então isso vai definir o tom para a animação. Então o que queremos fazer é adicionar mais um quadro-chave para que pudéssemos mudar e isso vai ser o segundo. Então este é um segundo dois segundos, três segundos, quatro segundos. Digamos que queremos levar cerca de um segundo para desvanecê-lo. Então nós vamos até aqui para esta área e há duas maneiras de fazer isso. Podemos sentar lá e clicar sobre isso aqui para adicionar um quadro-chave, e podemos nos mover e queríamos talvez fazer outra animação de opacidade ou transparência. Podemos continuar a adicionar quadros-chave dependendo do que queremos fazer. Mas queremos fazer isso de forma muito simples. Então aqui está o nosso primeiro quadro chave. Então, quando selecionarmos nosso primeiro quadro rangido, vamos em frente e definir o nível de opacidade. Então vamos voltar ao nosso painel de camadas bem aqui na opacidade e trabalhar para nos reduzir até zero. Então, desaparece. E esta é a grande coisa sobre animações de quadro chave. Então este é o primeiro quadro chave, e este aqui está arrastando minha pequena opção para cá. Minha linha do tempo e eu podemos selecionar o segundo quadro-chave e ir em frente e estabelecer 100% de opacidade. Então o que temos é um 0% e depois aqui temos 100%. Então o que acontece é que as lojas de fotos vão preencher o entre os quadros-chave, toda essa área entre os quadros-chave, e vai desaparecer lentamente o envio. Então ele vai de um quadro-chave para outro e faz a transição da animação para que eu pudesse ver como a tipografia aparece de repente na tela. Então vamos fazer a mesma coisa com o nosso item de 20%. Então vamos em frente e un colapso esta seta aqui e nós teremos a opção de definir um quadro-chave para opacidade. Então estão bem aqui. No início da animação, vamos clicar na opacidade, foram fazer a mesma coisa que são automaticamente adiciona nosso primeiro quadro chave. Quero ter certeza de que o quadro chave está definido para zero opacidade, então ele vai desaparecer, e nós queríamos um tipo de desvanecimento em torno desta área, então ele tem uma nova ou linha do tempo para que pudéssemos sentar lá e adicionar um novo quadro K. Mas se você mudar a opacidade de volta para 100%, ele irá adicionar automaticamente um quadro-chave para você se você alterar a opacidade em outro momento. Então eles vão e fazem 100%. Veja como ele adicionou automaticamente um quadro-chave para mim, para que eu não tenha que sentar lá e adicionar manualmente o segundo quadro-chave. Então vamos ver como essa aparência estava arrastando isso quando você podia vê-lo desvanecido. O que eu realmente quero fazer é não ter sido cambaleada para que eles não desapareçam em todo o mesmo tempo, mas eles estão cambaleados e eles vêm em momentos diferentes. Isso é muito fácil, com um ou 20%, uma vez que é mais tarde leitura para baixo. Visualmente, queríamos passar por último, então tudo que você tem que fazer é mudar seus quadros-chave por talvez 1/2 2 ou mais, e agora nós meio que reproduzimos de volta. Isso se desvanece, e então ele vai bater no quadro chave, e então o segundo vai desaparecer assim, e você pode continuar a adicionar quadros-chave para nos mudar o quanto você quiser. Então, se eu quiser rolar para aqui, mudar a opacidade de volta para zero e, em seguida, rolar para aqui e alterá-lo de volta para 100%, você pode ver como você pode adicionar quantos quadros chave quiser Tim Bergen dentro e fora, dentro e fora . Mas só precisamos fazer isso uma vez. Ok, então esses dois agora estão animados. Vamos ver o que podemos fazer com o logotipo. Mais precisa, na verdade, em vez de apenas mudar a opacidade, trabalhar uma mudança com a posição, vamos até a nossa camada de logotipo e desmoronamos. Isso e vai nos dar algumas opções diferentes porque é um objeto. Não é tipografia, então seu objeto. Então ele vai ter algumas opções de quadros-chave diferentes para nós. Então, queremos definir o quadro chave de posição. Então, antes de fazermos opacidade, desta vez, vamos fazer as posições ou clicar em nosso cronômetro para carregar nosso primeiro quadro chave. Estamos bem aqui no início da animação, então há o nosso primeiro quadro chave. E então, onde queremos que isso faça? Queremos que deslize da esquerda para a direita, direita para a esquerda. Vamos fazê-lo ir de cima para baixo. Então eu vou dar zoom aqui. O que vou fazer é este é o nosso primeiro quadro chave e a nossa animação. Vamos deslizá-lo para cima, para que desapareça. Vou mover isto para cima. Vamos em frente e criar um novo quadro chave. Em vez de ir aqui e clicar em um novo quadro de chave. Posso mudar a posição. Vamos em frente e fazer nossas teclas para baixo ou minha seta para baixo e eu vou colocá-lo de volta em posição exatamente onde eu quero que ele termine. Você solta. Vai criar automaticamente um quadro chave para mim. Então vamos ver como isso parece a partir deste quadro chave para este quadro irritadiço. Vamos ver a animação porque deslize lentamente para a posição. E como eu disse antes, poderíamos mantê-lo assim para sempre. Ou podemos adicionar um novo quadro-chave e vamos ver, digamos que queremos movê-lo para fora, apenas tentando mostrar o que você pode fazer, que ele crie automaticamente um quadro-chave. Vamos voltar para que ele desça. Então ele desliza para fora apenas para tipo de mostrar a você o que você pode fazer. E ele pode continuar criando quadros-chave e continuar animando esse logotipo tanto quanto você quiser. Mas você não pode simplesmente selecionar o quadro-chave e excluí-lo para removê-lo. Então o mesmo acontece com a tipografia dela. Não queremos que tudo aconteça de uma só vez. Nós meio que queremos cambalear isso um pouco. Queremos o nosso logótipo em vez de apenas descer a opacidade total. Vai ser muito bom. Se também se desvaneceu em uma ondulação. Eu acho que teria uma aparência muito mais polida do que apenas cair aleatoriamente em plena capacidade para que você possa criar várias camadas aqui, então temos uma linha de tempo de posição que temos, mas também podemos fazê-lo opacidade também. Então, vamos clicar no nosso cronômetro. Nunca primeiro quadro chave, que queremos ir em frente e definir isso para zero. Vamos passar na linha do tempo quando ela cair para a sua posição final. Queríamos ser opacidade total. Então, com a opacidade selecionada, vamos subir aqui, mudar 200% e vamos ver como essa animação vai. E sempre que quiser uma pré-visualização, uma animação, você pode clicar aqui de volta até o início. Vá para o primeiro quadro e, em seguida, vá em frente e clique no jogo, Vai jogá-lo para nós. E se você quiser vê-lo continuamente, loop. Por isso, não temos de continuar a choramingar e a jogar. Você pode ir para baixo para essas pequenas configurações. Você pode selecionar a reprodução em loop, e sempre que ela chegar ao fim da animação total, ela começará de novo automaticamente para que você não precise continuar voltando e visualizando-a . Tipo de assistir algumas vezes e ver como você gosta da animação. Então, uma coisa que eu quero fazer é desenhar a animação do homem um pouco mais porque eu estou vendo isso e tudo vem na tela muito rapidamente dentro do 1º 2º e eu realmente quero cambalear isso mais longe. Vamos fazer uma pausa. Vamos voltar para a nossa camada de 20%, rolar para baixo, voltar para a nossa camada de 20%, e vamos tirar isso um pouco mais. Então, trazê-lo ainda mais na linha do tempo. A mesma coisa com isto. Os desbotamentos duram mais tempo, por isso demora mais tempo a desvanecer-se. Ok, então agora vamos ver como isso foi press play. Demora um pouco para desaparecer. Então só tem que apertar o desbotamento lá. Mas mantenha-o a começar numa posição posterior. Então 20% precisa ser mais tarde, e então yoga na praia precisa vir em primeiro lugar. Lá vamos nós. Então temos esses três animados que fizemos posição. Não temos opacidade. Vamos ver o que mais podemos fazer. Nós ainda temos todos os pacotes de viagem, camada de camada que podemos fazer para que possamos un colapso que clique na opacidade. Vai trazer isso de volta para o primeiro porta-chaves do cérebro arrastador de volta. Isso vai ser uma opacidade zero, e nós vamos para aqui e vamos em frente e torná-lo 100% de opacidade. Mas vamos fazer isto durar. Queremos isso porque isso está mais abaixo na legibilidade. Então você quer ler, fazer yoga na praia de 20% e depois o último. Então vamos ver como tudo parece. Vamos voltar e jogar para que caia que desvanece. Perfeito. Ótima. Então tudo se foi lentamente se desvanecendo. Então agora o que queremos adicionar é uma imagem de fundo agradável que irá ampliar lentamente como todos esses outros elementos estão ampliando também. 22. Gifs animados no Photoshop - fotos: Então eu encontrei isso em pixels dot com. Acabei de digitar ioga e encontrei a primeira foto de ioga que encontrei. Parece que ela está na praia. Vamos em frente e levar este. Vou copiar isto e colá-lo no nosso GIF animado. E o que eu quero fazer é clicar com o botão direito na camada de fotos. Acabei de arrastar e eu quero convertê-lo em um objeto inteligente porque eu vou mudar o tamanho um pouco e eu não quero que ele fique embaçado ou pixelado. Então eu vou converter para objeto inteligente e ir em frente e título de foto. Vamos em frente e dimensioná-lo de acordo com o tamanho que queremos que ele seja no ponto de partida. Então vamos tentar encontrar um bom corte para ela, e vamos dar um zoom nela. Então vamos fazê-la um pouco menor no início, como um tiro no corpo inteiro. E o que é Dragger? Abaixe-se no sistema de camadas. E vamos trazer toda a nossa tipografia para cima a animação ainda vai continuar a mesma na linha do tempo. Mesmo se eu movê-lo para cima, ainda terá um desbotamento da mesma maneira. Então não se preocupe em perder isso. Vá em frente e incrimine-a perfeitamente ali. Então queremos que ela seja ampliada lentamente durante todo esse processo. Então é bom ou foto aqui em nossa linha do tempo. Ok, então aqui está a nossa foto. Vamos em frente. Parece que começa mais tarde na linha do tempo, do jeito que adicionamos essa foto. Vamos arrastar esta camada inteira de volta para o início do tempo, uma vez e fora combina com todos os outros. E vamos dar um zoom nela lentamente. Bem, vai ser a opção de transformação. Então vamos em frente e clicar no cronômetro. Nós vamos ter nossos primeiros quadros chave logo no início. Então agora vamos nos mudar e ver como queremos movê-la. Então vamos meio que isso é como você tipo de escala para fora nosso zoom. Acho que ele diria nas linhas do tempo que vamos diminuir o zoom para que eu pudesse ver o fim da linha do tempo. E toda esta animação vai durar cinco segundos. Então vamos pará-lo no final. Vamos fazer com que ela sempre tenha algum tipo de movimento, e eles são para a foto. Então o que vamos fazer agora é fazê-la um pouco maior e um zoom na mulher lentamente enquanto o anúncio termina, assim como aquele clique entra. Vai somar automaticamente em um porta-chaves para mim. Então vamos ver como isso se parece. Só voltando as coisas. Amém. Tudo carrega. Continua a aumentar o zoom nela. Há sempre alguma animação, e depois acaba bem ali. Isso parece muito bom. Poderíamos ir e clicar no jogo a qualquer momento e ver como isso se parece. Então vamos dizer que queremos torná-lo mais curto ou mais longo. Então, é quando você pode ter controle sobre o comprimento. Então agora são cinco segundos e você pode arrastar qualquer coisa por mais tempo. Então vamos dizer que queremos que tudo o resto desapareça, e queremos que apenas a foto continue por mais um segundo ou mais. Podemos fazer isso arrastando essa parte para a linha do tempo. Poderíamos arrastar tudo o resto e torná-lo maior também. Poderia fazer tudo seis segundos também. E você também pode torná-lo mais curto. E não deixe você saber que há outra opção para animar fotos. Vou mostrar-te isso aqui mesmo, por isso, sempre que tiveres uma fotografia, vai dar-te uma opção aqui mesmo. Vê esta flecha no final? Vamos clicar nisso. Eu ia ter essa moção para você ter uma opção de menu suspenso. Agora está sob costume, que foi o que acabamos de fazer. Acabamos de fazer uma versão personalizada. Fizemos uma transformação, mas também há algumas construídas em outras. Digamos que queremos fazer zoom, que é exatamente o que acabamos de fazer. Você clica em Zoom, e ele vai automaticamente fazer tipo de animação para você e configurar os quadros rangidos . Mas eu meio que gosto de fazer isso manualmente, porque sinto que tenho um pouco mais de controle e clique para trás e não faço movimento e depois volto para trás. Ou eu poderia voltar para o painel de história e levar tudo de volta ao que tinha. Certo. Então nós vamos meio que fazer nossa caixa de linha do tempo um pouco mais curta e jogar isso repetidamente em um loop, então nós temos nossas pequenas configurações aqui. Tenho isto em loop. Então vamos ver como o comprimento ISS porque queremos que este seja um GIF repetitivo. Vamos voltar ao início e brincar. Eu meio que vejo como nós gostamos do comprimento. Tudo se desvanece. Lá vai você. É um pouco longo. Algumas escolas encurtam em um segundo curso, ele poderia ter alguns GIFs animados que duram 20 segundos, e eles continuam a ter outra foto que desaparece. Então vamos dizer que queremos fazer isso. Digamos que temos este GIF animado. Isso é ótimo. E se quisermos deslizar em outra oferta no mesmo GIF animado que começa a ficar um pouco complicado e longo e não se converte também. Eu só quero te mostrar como você faria isso. Então vamos trazer uma segunda foto. Eu tenho uma foto semelhante usada na campanha mais cedo que vai ampliar em sua imprensa enter. Vamos chamar esta foto para agora o que acontece a partir do momento? Claro, podemos arrastar esta foto a qualquer momento, mas vamos arrastá-la para o papai, certo? Onde estão outro tipo de promoção está terminando. Então nós temos isso acontecendo, ele entra e então ele vai atingir este ponto, e então, de repente, esta foto vai vir em curso, nós podemos derrubar isso, e em vez de apenas vir abruptamente em, podemos ter que ser uma transição mais suave ou desaparecer. É o que poderíamos fazer um slide este ligeiramente e então há um pouco de uma sobreposição que vamos fazer na opacidade. Vou clicar aqui no nosso porta-chaves. Vai ser zero vai sair aqui, isso desaparecer quando isso acabar e fazer com que a SPEEA passe 100%. Então veja o que acontece. Então nós temos nossa animação entra, voa, então você tem são lentamente esta outra imagem carregando em cima lentamente, assim como isso é apenas uma transição mais suave, porque eu fiz a opacidade. E então agora podemos trabalhar em um novo conjunto de tipografia aqui. Então vamos dizer que queremos trazer este livro agora novamente, vamos em frente e duplicar nosso livro. Agora vamos ter este livro também. É um livro agora, também está aqui. Vou deslizar isto e fazer isto desaparecer. Então vamos fazer uma opacidade nesta. Isso está ficando mais complicado. Ele poderia ter terminado ali naquela primeira série. Nós fizemos, então isso vai ser uma opacidade de 0%. E depois vamos ter isto desbotado muito rapidamente. Lá vamos nós. Nós também queremos ter certeza em nosso sistema de camadas que temos a tipografia acima das fotos . Eu só vou arrastar isso para cima, e na nossa linha do tempo, ele vai fazer isso automaticamente para nós. Então continue a usar seu sistema de camadas para obter as camadas ordenadas. Agora temos um botão para baixo do livro. Claro, podemos ter mais complexo um conjunto totalmente novo, uma oferta totalmente nova aqui com tipografia, mas vamos tentar manter isso simples. Então vamos voltar e ver como tudo parece. É quem mulher desvanecendo em nosso logotipo ou tipografia lentamente carregando de cima para baixo. E temos outra foto que irá desaparecer lentamente devido à pré-visualização. Isto é agora, este é o nosso comprimento de pré-visualização. Então, quando chegar a este ponto ver tipo de diferença entre o cinza claro e o raio escuro. Uma vez que chegar a este ponto, ele vai começar o loop do dedo do pé novamente. Então, o que queremos fazer é arrastar essa barra de visualização até o final de sua animação. Então, agora, quando voltarmos para a pré-visualização, vai passar por todo o caminho. Vamos tentar isso novamente, e ele deve desaparecer lentamente em perfeito para que possamos ter outra tipografia entrar, e então ele pode voltar direto para o início. Maravilhoso. Então lá está ISS. É muito fácil animar as coisas quando você meio que sabe como desaparecer. Mude a posição que você pode fazer, ah pan na fotografia muito que você pode fazer aqui. Então vamos em frente e terminar isso e aprender como exportar isso e o melhor formato possível. Então estamos prontos para exportar isso e testá-lo em um navegador. Então aqui está o que vamos fazer para exportar 23. Gifs animados no Photoshop - Exportando GIFs: então a melhor maneira de exportar um presente é ir para exportação de arquivos e legado da Web mais seguro. Então vamos arquivar Export Safer Web Legacy Isso vai nos dar muito mais opções, a Web mais segura do que as outras opções de exportação. Então é para a Web, e você vai notar que pode levar alguns minutos para esta carga do dedo do pé O que ele está fazendo, seus componentes, empilhando todas as imagens que compõem o presente juntos e dando-lhe as opções para exportar esses para que você perceba o tamanho do arquivo aqui em baixo, você verá 4,4 megabytes. Conheço muitas plataformas de mídia social e meios de comunicação que têm GIFs animados como uma opção para você. Eles gostariam de manter menos de oito megabytes, então é bom manter um arquivo de presente abaixo de oito megabytes, mas cada plataforma terá seus próprios requisitos. Então, apenas fui antes de fazer o presente, basta ver tipo do tamanho do presente que você precisa fazer. E também se houver requisitos de tamanho, pois há sempre maneiras reduzir a qualidade para reduzir o tamanho do arquivo conforme necessário. Mas agora, esse é um tamanho de arquivo bastante aceitável, e parece que levará um pouco menos de um segundo para carregar em um normal 56,6 kilobytes . Ligação à Internet. Há algumas coisas que podemos fazer aqui em termos de opções. Eu gosto de fazer o presente 1 28 dithered diz que tipo de vai ser otimizado. E quanto maior o número, maior a quantidade de cores que você tem disponível para você. Então, se você descer as cores, se você quiser reduzir as cores para duas, você pode. E isso não vai ajudar muito. Então, quanto mais cores você tiver, mais detalhado será, mas também quanto maior o tamanho do arquivo, então você notará quando eu fizer 16 cores. Observe como o tamanho do arquivo foi reduzido pela metade. Então, se você já teve que reduzir o tamanho do arquivo, essa é uma maneira de fazê-lo. E a maior parte disso, vamos sair por defeito. Então, trabalhando um fazer incluindo transparência. Tudo isso é tipo de eleições inadimplentes. Não vamos chegar em profundidade a todas essas opções diferentes. Vamos mantê-lo como padrão, então vamos em frente e exportar. Tudo o que temos que fazer é clicar em Salvar, salvar na área de trabalho. Deixe tudo isso como está. Vá em frente e salve. Mais uma vez. Vai levar um minuto ou dois. Então lá está, 5,6 megabytes. Temos o modelo de presente. Então, se você clicar duas vezes, é claro que eu vou maçã. Você poderá ver todas as diferentes imagens que compõem seu presente. Como você pode ver, há mais de 130 quadros 140 quadros apenas para criar aquela animação de seis segundos. Então, como visualizamos a animação? A melhor coisa a fazer é arrastá-lo para qualquer navegador que você tem. Então isso vai arrastar isso para o meu Deixe-me tentar o Firefox. Vou arrastá-lo para o meu navegador Firefox, e ele vai ser capaz de pré-visualizar para ele. E aí está. E é quando podemos mudar o tamanho e o tempo. Podemos realmente julgar que é como, OK, eu posso assistir isso 10 vezes e repetir e ver se eu gostei do ritmo. Se eu precisar fazer algo mais longo e nós estávamos apenas fazendo uma amostra muito simples. O que posso fazer é deixar a primeira oferta por mais um segundo ou dois. Talvez não tenha sido tempo suficiente. Veja, neste momento, nós queremos ser capazes de lê-lo. Clique no livro agora, então só queremos ter certeza antes de irmos para a segunda oferta, se quisermos ter uma segunda oferta, queremos atrasar um pouco. Então vamos voltar para a loja de fotos, ver nossa linha do tempo era ir em frente e remover. Diga, nós nem queremos ter esse conjunto. Os caras querem mostrar um exemplo. Então temos que fazer é tipo de excluir essa camada. Vai apagá-lo da linha do tempo. É como se nunca tivesse existido. Agora vamos fazer tudo um pouco mais longo. Sei que estamos indo para trás e o que dissemos, vamos estender para cinco segundos. Trazemos a foto. Vamos trazer essa linha do tempo de animação fotográfica aqui e vamos tentar exportar. Podemos praticar é bom para a prática, então vamos fazer legado da Web mais seguro. Claro, levará um bom minuto para compilar tudo para você. Então, se você sentir que ele tem este ícone de carregamento para sempre, não se preocupe. Não acho que seu computador tenha congelado. Demora muito tempo para o Photoshopped compilar essas 140 fotos diferentes para exportar . Então, vamos praticar a exportação novamente. Apenas tenha um presente. Vamos tentar cores altas 5 56 K quatro megabytes. Isso parece razoável. E também aqui em baixo você tem essas opções de animação é opções de loop. Você pode carregá-lo apenas uma vez. Você não precisa ter esse loop uma e outra vez se você não quiser, você pode definir isso aqui quando você exportá-lo. Você pode apenas fazer isso acontecer uma vez onde você pode fazer isso acontecer e loop para sempre. Então, vamos continuar a nossa opção loop para sempre ou para clicar em feito. Então, aqui está o nosso último em ação. Lá está ele. Nós não temos que ter um loop repetidamente, e nós podemos apenas tê-lo loop ou tê-lo jogar uma vez e, em seguida, ele termina para que nós podemos fazer isso apenas indo em nossas configurações de exportação e tê-lo apenas jogar uma vez em vez de apenas ir e voltar e mais uma vez. Eu só queria fazer o que se repete tomadas, ver tipo de nossa animação em ação quando você poderia fazer uma grande variedade de efeitos diferentes . Você simplesmente não precisa trabalhar com fotos e digitar. Você pode ter todos os tipos de fatos acontecem com presentes, mas eu só queria mostrar o básico como carregar a linha do tempo, como os dedos trabalham com quadros-chave, como trabalhar com o muito básico Então você pode continuar a empurrar isso ainda mais e adicionar efeitos e adicionar camadas diferentes. Você pode ter mais de 50 camadas. Se você realmente queria ter ah, presente complicado e ter coisas brilhantes chegando tem efeitos metálicos. Há todos os tipos de coisas que você pode dializar, mas este é o básico para você pensar e começar a criar e saber como fazer GIFs animados E o recurso para download é que eu vou estar fornecendo alguns arquivos para você. Então, se você clicar no GIF animado no arquivo de loja federal, este é o modelo que você vai querer começar com. Isso só tem os elementos básicos, não tem nada animado ainda, e este é o exemplo final, eu estou incluindo meu arquivo final da loja de fotos para que você possa abrir isso. Você poderia dar uma olhada nas camadas e como eu tenho tudo configurado apenas para ver todos os passos que passaram na classe. Se quiséssemos olhar para um arquivo de loja de fotos e ver como foi feito, eu também tenho o presente final que você pode arrastar para que você possa tipo de ver como isso funciona. Então agora é hora da sua tarefa. Eu quero que você crie um GIF animado se você quiser. Se você optar por aceitar o projeto, eu quero que você crie um muito simples. Pode ser do mesmo tamanho. Se você quiser. Você pode usar o mesmo modelo, mas eu quero que você talvez tente foto diferente. Eu quero que você talvez tente uma promoção diferente, apenas uma espécie de sacudir um pouco e ver o que você pode adicionar a ela para torná-la ainda melhor do que a que fizemos na classe. 24. BÔNUS - criação de GIFs de vídeos: vídeo bônus adicionado. Eu queria mostrar-lhe como importar um vídeo e criar quadros e um presente dessa forma a partir de um vídeo já produzido. Então eu fui até o ponto com de Peck sal ou um vídeo Googled Pixels, e isso me trouxe a este site onde eu posso baixar formatos de vídeo muito simples e são clipes de vídeo. E eu encontrei este homem tipo de rolagem, e eu pensei que eu poderia encontrar um lugar onde ele pode fazer um loop muito natural com a forma como ele move o polegar para cima. Então vamos levar isso para o Photoshopped. Eu só tenho um documento simples aberto 1000 por 1000 pixels ou qualquer formato que você quer fazer. Mas não importa porque ele vai criar seu próprio documento quando você importar o vídeo . Então aqui está o que nós vamos fazer para importar o vídeo Nós vamos para arquivo, ir todo o caminho para baixo para importar, e nós vamos importar quadros de vídeo, camadas de dedo do pé, e vamos em frente e selecionar o vídeo que baixamos rolando através de smartphones. Vou clicar duas vezes e nos permitirá importar o vídeo. Então, se eu clicar em OK, vamos receber um aviso. O que vai dizer? Isso produzirá um documento grande e, possivelmente, levará muito tempo. Não precisamos importar esse vídeo inteiro. Só precisamos criar um pequeno loop. Então nós só queremos cortar isso um pouco de algumas maneiras. Então aqui está uma espécie de linha do tempo. Podemos começar este presente a qualquer momento, então vamos começar quando ele tiver o polegar no topo. E este é o final e pode conduzir isto até aqui. Então este é o começo. Ele tem uma foto. Vamos ver onde essa parada quando ele tem o dedo em cima do polegar, ele rola o que aconteceu? Role mais uma vez e vamos fazer com que pare um passeio por aqui. Então ele está começando meio que começando e terminando na mesma posição. Então eu meio que tenho nossos pontos de início e fim indo. Arrasta isto aqui. Então esta é a nossa pequena área. Vai começar aqui, rolar uma vez, rolar duas vezes de volta ao início. Então isso é uma espécie de uma pequena amostra deste vídeo maior vamos criar um presente a partir dele vai clicar em OK, Ele vai automaticamente carregar todos estes no período de tempo para nós. E se você não vir a janela do período de tempo, pop-up, basta ir até a janela e clicar no período de tempo. E assim mesmo, ele criou todos esses quadros diferentes para nós. E vamos em frente e clique. Temos tudo ligado para sempre, por isso vai voltar para sempre e vamos clicar no jogo. Então lá está ele, rolando lentamente através de sua tela, e ele loops, e ele pode loop para sempre e sempre e sempre. E ele poderia exportar isso da mesma forma que nós fizemos antes de nós, para ir para arquivo Export Safer Web. E aqui vamos nós. Podemos sempre alterar o tamanho da imagem aqui em baixo, podemos alterar nossas animações em loop. Nós não nos definimos para sempre, e vamos em frente. Isto é 24 megabytes. É bastante alto. Podemos sempre mudar nossas cores para baixo 128 e vamos ver como isso afeta o tamanho do arquivo do ar e ver se podemos reduzir isso um pouco. Demora um pouco de tempo porque tem que fazer tudo em todos os quadros e isso reduziu um pouco a resolução. Não muito, mas sempre pode mudar isso para baixo e meio que reduzir um pouco disso. Essas opções para obter um tamanho de arquivo mais baixo. Claro, isso irá diminuir a qualidade. Então, clicamos em Concluído, e acabamos de criar nosso primeiro GIF animado a partir de um vídeo. Dar a você isso arrastando-o para um navegador, e lá está ele, rolando para longe. Claro, não precisamos tornar o tamanho da tela tão grande. Este é o tamanho da resolução no vídeo. Nós importamos automaticamente adaptado a esse tamanho. Podemos ir até a imagem. Podemos ir até o tamanho da imagem e podemos reduzir isso, e o tamanho não clicaria aqui para caber também. E poderíamos fazer um tamanho muito menor para isso. Então apenas tipo de fazer um tamanho pré-selecionado clique em ok e vamos obter um downgrade cada quadro para essa resolução. Então, agora, quando formos exportá-lo, será metade, ou se não 1/3 do tamanho para que não ocupe toda a tela. Então vamos dizer que queremos mudar isso do modo de quadro para o modo de linha de tempo. linha do tempo é a que tínhamos antes, onde podemos controlá-la como um editor de vídeo. E este é o modo de quadro onde tudo não está em um quadro diferente. Tudo o que tem que fazer é descer até aqui até este ícone. Vamos em frente e clicar nele, e ele vai convertê-lo para o formato da linha do tempo do vídeo, que é o que tínhamos antes. Clique nisso, e assim você pode ver todas essas diferentes camadas individuais. Então o que é legal sobre isso é que podemos adicionar tipografia em cima desta animação. Então, se eu rolar para baixo aqui, vamos ver como é a animação. Eu poderia ir em frente e ir para esta camada superior criado nova pasta se eu quisesse chamar este tipo e vamos criar outra nova camada e vamos realmente fazer isso um jogador tipo. Então vamos em frente e pegar nossa ferramenta de texto. Então, se quisermos ter o tipo e lá também, poderíamos torná-lo um pouco maior. E vamos ver se conseguimos encontrar nosso tipo e podemos colocar todas essas camadas em suas próprias pastas. Eles não tipo de bagunça tudo, mas vamos fazer tipo e podemos adicionar são Olá un colapso que temos Olá, ele colapsou isso e então podemos trazer isso para a animação. Então agora ele poderia fazer o que fizemos antes, mas agora temos esse fundo de vídeo animado também que podemos usar. Em vez de ter sua própria imagem desaparecer, podemos usar um fundo de vídeo, então apenas tipo de mostrar como trazer vídeos como gráficos de fundo, bem como zoom em fotos. Então eu sei que isso foi meio que jogado em você. Sinta-se livre para assistir isso algumas vezes. Eu queria definitivamente incluir como incorporar vídeo porque isso é uma grande parte dos presentes . É ter algum tipo de vídeo ou eu mais fundo acontecendo e ser capaz de colocar seu tipo em cima disso, um botão clique agora, todo esse tipo de coisa. Poderíamos fazer anúncios muito legais com ele. Digamos que queremos adicionar uma pequena animação rápida a este tipo que vem junto com o fundo do vídeo e ir para baixo para o nosso sair que o jogador tipo de foto enfraquecer, ir para transformar e Vamos definir o primeiro quadro chave, modo que é o primeiro quadro chave. Basta mover mais lentamente tipo de fazê-lo ir para cima e para baixo pressione, entrar na escola mais um pouco. Gastar na direção oposta economicamente, tinha um quadro-chave. Pressione Enter e continua. Você pode fazer o quanto quiser com isso. Vamos voltar ao neutro para que quando ele loops, ele não tenha nenhum salto de nenhum quadro. Então vamos ver como isso se parece, apenas tipo de ir e voltar. Você pode ver quantos quadros-chave são necessários para fazer aquele pouco de animação de texto , mas você também pode desvanecê-lo. Você poderia fazer um monte de coisas aqui. 25. Projeto de capa de E-Book: Bem-vindo de volta à Adobe Photo Shop hoje mesmo. Vamos falar de capas de livros. Vamos fazer o que você vê aqui. Vai ser chamado de pequena cabana na cidade e vamos fazer um pouco de uma peça em um pequeno chalé que existe entre esses grandes arranha-céus que estavam tentando contar uma história. Estamos tentando obrigar as pessoas a clicar nele como você pode ver uma Amazônia, há toneladas e toneladas de capas de livros e ele conseguiu. Crie um que seja de alto contraste, atraente, mas também descreva um pouco do livro dentro também. Então, é um pequeno desafio porque estamos pensando em todos esses diferentes aspectos ao criar o layout para o nosso livro. Com este projeto em particular, nós temos um grande desafio porque nós vamos estar misturando um monte de diferentes temas de design juntos. Então vamos ter um composto de várias fotos diferentes. Então temos a casa e os prédios. Nós vamos ser modificados modificando e criando nosso próprio céu, integrando alguma fotografia em nuvem e criando nosso próprio plano de fundo. E depois vamos trabalhar com a tipografia, por isso vamos criar o título. Mas nós também vamos fazer algo um pouco extra especial, e eu vou te mostrar como fazer letras manuais para ir em frente e trazer um pouco de personalidade para nossa manchete para que você possa ver bem aqui com as palavras pouco nós vamos fazer isso dois maneiras diferentes que eu vou mostrar a vocês como digitalizar essas coisas. Primeiro vamos fazer isso, procriar e mostrar como fazer isso. Mas também vamos desenhá-lo com uma caneta e papel e eu vou mostrar-lhe como tirar uma foto. Traga isso para a loja de fotos, iluminando tudo para que possamos pegar apenas aquele letreiro em particular e trazê-lo para fazer parecer que é parte da manchete. Então, são algumas coisas diferentes que vamos fazer neste projeto. Então vamos em frente e começar. Você vai precisar baixar algumas fotos. Mas se você quiser usar fotos diferentes e fazer uma capa de livro diferente para seu desafio de design ou seu projeto de estudante, sinta-se livre e haverá três fotos que usaremos para nosso projeto. Vamos a uma casinha que foi muito fácil de isolar e cortar. Nós temos algumas nuvens padrão que você pode usar qualquer foto de nuvem que você quiser e também o prédio, que nós vamos estar duplicando e colocando em ambos os lados da casa de campo. Então eu quero que você baixe e abra o modelo de capa do livro E. E há um par de variações de tamanho diferentes para capas de livros. Mas o mais padrão e o que a Amazon usa no tamanho recomendado é 2560 pixels de altura por 600 pixels e sagacidade. E esse é o tamanho padrão. E no cara de recursos para download, há alguns artigos ótimos que coloquei lá que falam sobre os tamanhos de diferentes capas de livros. Então, como você pode ver, eles variam, mas não dramaticamente. Então, capas de livros Kindle da Amazon, que é o que vamos fazer para este projeto é de 1563 por 2500. Mas a capa do livro Apple E é de 1600, pelo que não está a ver grandes diferenças nos tamanhos gerais . Geralmente há uma proporção padrão, e pode ir em frente e ter acesso a isso indo para o para entrar aqui, há uma proporção de 1 para 6. Então, para cada 1000 pixels, Ah, o outro lado deve ser 1600. Então essa é a sua relação padrão para um livro. E é aí que nós meio que surgiu com este alcance aqui. Então, se você precisasse colocá-lo em vários lugares, você poderia fazer este tamanho. Mas, em seguida, ele só seria ajustado 50 pixels ou 100 pixels, e esconder-se lá com o qual é fácil de se adaptar se ele precisava salvá-lo para outras plataformas e livros diferentes . Então eu tenho o nosso pequeno templo aqui, e eu apenas discurso-o de todo o texto e eu ainda tenho as nossas margens. E eu trouxe um tipo de nosso título genérico porque sabemos que precisamos trabalhar isso aqui alguma forma. Então o que queremos fazer é eu quero começar a trabalhar na fotografia e depois encontrar uma maneira obter essa manchete para se misturar com a fotografia. Então vamos em frente e tirar nossas fotos. Vamos trazer o dragão da casa lá para que seja um objeto inteligente. E se não acontecer? Dragão é um objeto inteligente. Você pode apenas clicar com o botão direito e converter em objeto inteligente e para que possamos escalá-lo para cima e para baixo sem perder a nossa resolução. Eu ia trazer isso como um tipo de idéias ásperas. Não quero que estes edifícios grandes e agradáveis ultrapassem esta pequena casa de campo. E eu gostaria de ter talvez 21 de cada lado. Então o que queremos fazer é ir em frente e eliminar esse fundo primeiro para que possamos fazer isso, tornando isso um pouco menor e vamos ver algumas de nossas ferramentas de seleção. Se pudermos fazer isso muito facilmente com a ferramenta varinha mágica, há um bom trabalho em selecionar tudo. Então agora vamos selecionar, vamos selecionar o inverso porque agora ele está selecionando o céu. Mas eu quero selecionar o prédio. Então eu só fiz um inverso e então nós vamos adicionar são máscara de camadas e ir em frente e mascarar aquele prédio. Então agora eu posso duplicar isso mantendo pressionada a opção e arrastando, e nós queremos fazer o outro lado também. Então agora precisamos ter um senso de tamanho. Talvez precisemos fazer os dois um pouco maiores. Então, selecionando ambas as camadas, ficando dramático que realmente queríamos ser dramático foi para ser uma pequena casa de campo com estes grandes edifícios assumindo o controle. Isso é muito fácil, cortar e fazer, usar máscaras e trazer nossas pequenas imagens aqui. Até agora, podíamos até fazer o mesmo com o House porque gosto de criar o meu próprio fundo do céu podermos fazer a mesma coisa. Vamos fazer a ferramenta da varinha mágica. Estes são fundos muito simples, e eu vou ir em frente, mascarar isso para selecionar inverso, e eu quero uma máscara. A casa e nós também podemos selecionar nossa máscara camada aqui e pintar com preto para se livrar de qualquer coisa extra que ele não cortou. E provavelmente não queremos a antena. Acho que isso é um pouco perturbador. Então eu só estou pegando minha ferramenta de seleção e apenas vou mascarar isso. Vai pintar com Black e se livrar disso. Não acho que isso seja muito atraente. Então agora temos a base para os nossos edifícios e queremos ser capazes de ter um céu aqui. Por enquanto, vou desligar uma margem porque é meio que atrapalhando e distraindo, e quero mostrar meu nome por cima. Talvez precisemos de uma barra de alto contraste para o nome aparecer porque eu não quero que o nome fique no topo e tenha essa manchete muito longa acontecendo aqui no meio. Quero ser capaz de separar aqueles dois para mantê-lo o mais limpo possível. Então isso não é realmente grande coisa. Nós provavelmente poderíamos mudar isso para cima e apenas colocar este tipo em uma barra de alto contraste. Ele vai pegar a ferramenta de retângulo e desenhar uma barra simples e colocar nosso nome na frente. Eu sei que acabará por ser branco, e nós vamos ter que encontrar a tipografia e um pouco estávamos apenas fazendo um bloqueio básico fora do layout dela, ficando tipo de idéia acontecendo. E então o maior desafio para este vai ser fazer o nosso tipo de layout. E qual é a melhor maneira de organizar todas essas palavras diferentes e apertado? Vamos em frente e adicionar ou fundos. Nós meio que sabemos de que cor podemos precisar para fazer a tipografia. Então vamos em frente e fazer. Nossos fundos vão até o fundo, vai adicionar uma nova camada vai ser a nossa camada de fundo. Eu poderia trazer minhas camadas aqui para que você possa vê-lo um pouco melhor. E eu quero fazer um belo vívido céu azul. Então, quando estou selecionando minhas cores, eu não quero nada muito escuro, mas eu não quero nada para gostar. tipografia precisa ser lida em cima disso, então precisamos torná-la leve o suficiente para que talvez alguma tipografia escura possa estar em cima disso. Então é para um tipo de azul claro, e o que é ótimo sobre isso é que podemos leveza e escuridão para que ele possa quase ter como um efeito de céu radiante. E podemos fazer isso usando a edição não destrutiva adicionando uma nova camada no topo e fazendo nosso esquivar e queimar. Ou poderíamos nos esquivar e queimar diretamente na camada se quiséssemos. Mas acho a edição não destrutiva um pouco melhor para o fluxo de trabalho, então vamos fazer isso? Vou criar uma nova camada. Estas serão as minhas sombras e os meus destaques. E eu vou subir para editar e descer para preencher. E já fizemos isso algumas vezes em algumas das aulas da loja de fotos. Então, se você já fez isso, ótimo. Mas não fizemos isso antes. Este é o tipo de processo. Então nós fomos até editar Phil, e nós vamos apenas fazer um 50% de conteúdo cinza Nós vamos clicar em OK e vamos colocar esta cobertura de 50% cinza nesta nova camada que criamos ou ele vai para mais um passo. Isso é algo que você tem que memorizar. Nós vamos subir para os nossos modos de mistura para esta camada e disse que para sobrepor. Vai parecer que as camadas não estão lá. Mas vamos pintar em realces e sombras usando a ferramenta de pincel e pintando com preto e branco, vamos ser capazes de ter destaques e sombras para o céu. E o que é ótimo sobre isso é que podemos ativar e desativar isso e ter o fundo intocado. Se alguma vez quiséssemos voltar e dizer Bem, eu estraguei tudo naquela área. Não é grande coisa. Eu só gosto de fazer isso dessa maneira em vez de apenas fazer esquivar e queimar diretamente na camada porque isso só me dá mais flexibilidade para voltar no tempo se eu decidir mudar alguma coisa. Então o que eu vou fazer é pegar branco, pegar uma bela escova britânica, grande, macia e grande, macia e redonda. Talvez não tão grande assim. Talvez uns 1000. E talvez eu precise trazer de volta a opacidade sobre isso um pouco. Assim como um pouco é adicionar um pouco de céu fazendo um pouco mais leve em certas áreas. E então nós também podemos trazer para fora preto e para trazer sombras de preto serão sombras adicionando um pouco de sombras lá em baixo onde nós não precisamos colocar tipo lá em pé um pouco de fundo. E se não gostarmos do que fizemos porque criamos uma nova camada, podemos sempre desativá-la e recomeçar. Então essa é a grande coisa sobre adicionar essa nova camada em vez de editar, editar essa camada diretamente. Se eu fosse fazer a esquivação da ferramenta de queimadura bem nesta camada, então queime, é isso. Estou preso. Eu realmente não posso voltar e desfazer 26. Projeto de capa de e-books - Sombras: Bem, vamos trazer nossa última foto. Então vamos trazer nossa última foto. Temos algumas nuvens genéricas que vamos integrar aqui. Vamos usar modos de mistura e camadas de massa para misturar isso. Vamos trazer isso de volta ao fundo além de todo o tipo, e vamos fazer um pouco de Massive. Mas Adul arejando máscara e ver quantas vezes eu uso massa em camadas muito. Só vou pegar a ferramenta Grady int. Eu só tenho um dedo preto padrão branco Grady int E assim como pintar com camadas massa com os pincéis preto e branco, poderíamos fazer a mesma coisa com brilho. Ele só faz um bom desvanecimento quando fazemos na outra direção. Lá vamos nós. Então, apenas fazendo um bom Vaid que pode ser capaz de reduzir a opacidade um pouco. Só para que não seja tão forte no topo que assuma a paz. Então uma coisa que eu queria fazer antes de começar a tipo de finalizar a tipografia, como eu quero adicionar tipo de quase como uma peça de teatro. Então você tem um fundo de jogo para ir a uma peça. E eles têm, você sabe, edifícios cortados de papelão ou cortados de faria e quase parece que eles lançaram uma sombra sobre o pano de fundo durante uma peça. E eu meio que queria ter uma aparência e estilo semelhantes a isso. Então nós temos algumas sombras muito escuras que estão lançando na parte de trás deste céu. Então vamos desenhar isso à mão. Então, em vez de apenas selecionar uma camada para fazer uma sombra, vamos criar e desenhar nossa própria sombra indo para criar uma nova camada Chamar esta sombra, vamos arrastar este caminho atrás de tudo menos do céu Mantenha-o acima do céu, E nós vamos pegar a ferramenta conta-gotas dela e vamos provar esta cor azul provavelmente por aqui vai prová-la. Então eu vou clicar duas vezes na minha amostra e eu vou movê-la um pouco para baixo para adicionar um pouco de escuridão a ela. E eu vou pegar meu pincel redondo macio bem aqui. Vamos fazer com que não seja tão grande. Cerca de 400 ou mais. Nós vamos apenas pintar nossas sombras ainda fazer parecer que ele está lançando em um pano como você veria em uma peça que nós vamos apenas desenhar que pode precisar ter pincel fabricante um pouco menor. Poderíamos ver como estão adicionando sombras instantaneamente. Eu tenho meus olhos em sua própria camada a mesma coisa com casa, e eu posso precisar fazer meu pincel um pouco menor. Então não é assim que uma sombra tão grande estava desenhando. Eu só pensei que acrescentou um pouco de personagem, quase como este foi montado como um conjunto para um jogo para o livro para torná-lo um pouco mais criança como um pouco mais brincalhão. Por que estamos fazendo isso e pode não lançar uma sombra no topo tanto. Mas você sabe, isso seria fácil apenas tipo de nossa raça. Vou voltar novamente e fazer um pouco de sombra mais escura, e talvez eu esteja fazendo o controle Z ou o comando Z para voltar um passo na minha história se eu não gostar do tipo de como estou desenhando. É meio que um bom atalho para o senhor só Comando Z. Estou em um Mac, então apenas adicionando mais sombras em certas áreas que eu acho que pode precisar dele. E lá vamos nós. Podemos aliviar isso um lance e tanto, então isso é meio que uma sombra cheia. Então eu estou apenas ativando e desligando isso. Vamos reduzir um pouco a opacidade sobre isso, então não é tão duro e estamos realmente chegando lá. Então vamos trabalhar na tipografia disso. Vamos descobrir quais são as palavras mais importantes. Quais são as palavras que queremos destacar? Queremos trazer alguma tipografia manuscrita para pelo menos uma das palavras e as palavras que eu pensei que seria uma palavra muito divertida. Para fazer um script escrito à mão tipo seria a palavra pouco e tudo o resto poderia ser esta realmente agradável tradicional base tipo Sarah. Então, antes de começar a trabalhar com o outro tipo, vamos em frente e colocar a nossa carta escrita à mão aqui, porque o resto da manchete vai ser construído em torno daquela pequena letra escrita à mão. Então eu vou para a minha mesa, onde eu tenho todos os meus lápis e marcadores para criar a palavra mãozinha escrita de duas maneiras diferentes. Então a primeira coisa que vou fazer é ir para minha mesa onde tenho lápis de cor e marcadores e vou escrever a palavra em um pequeno formato de script. Então eu só vou escrever um tipo de letras e marcadores e apenas em um avião. Na verdade, é um pedaço de papel de computador. É um pedaço de papel de computador totalmente branco. É muito importante que você use um tipo de branco puro porque vai ser muito mais fácil tirar uma foto e trazê-la para Photoshopped para integrá-la como uma carta escrita digital. Então aqui está o que eu era capaz de desenhar apenas com uma mistura de marcador e lápis colorido , e eu queria usar a cor vermelha lá para tipo de ter um pop contra o azul. Então o que vou fazer é tirar uma foto e tirar duas fotos diferentes. Você pode ver como a iluminação é um pouco diferente, mas você quer tentar tirar uma foto. E eu fiz isso com meu iPhone com luz direta. Então você quer ter luz direta em cima de sua foto porque você não vai conseguir nenhuma dessas sombras do jornal. E, naturalmente, se pegarem o papel e ele o moveu, haverá pequenos mergulhos naturais no jornal que criarão sombras. E tudo bem, porque podemos trazer isso para a Adobe Photo Shop e iluminar um pouco isso para que possamos nos livrar de todas essas sombras para que possamos facilmente isolar as letras. Então eu trouxe essa foto para a loja de fotos e como vamos ser capazes de isolar isso? Porque agora, parece que vai ser muito difícil levantar um desses do papel e fazer parecer que foi escrito no céu azul. Então há algumas coisas que podemos fazer. Nós vamos precisar significativamente Brighton e nos livrar de todos esses pequenos mergulhos e sombras e no papel que é naturalmente criado. Então vamos para ajustes de imagem. A primeira coisa que vamos fazer é ir para brilho e contraste. Vamos tentar fazer as coisas. Vamos tentar alegrar um pouco, mas você não quer superar Brighton porque então você começa a perder parte da qualidade do tipo escrito à mão. Então nós estamos indo para um pouco de brilho, e então o que realmente ajuda é ajustar o contraste. Então estamos em vez de diminuir o contraste, vamos aumentar o contraste que você pode ver esses pequenos mergulhos desaparecerem lentamente e todas as letras realmente aparecendo. Então isso está sempre fazendo e temos que ter cuidado com o brilho. Posso ver como está começando a desaparecer aqui quando eu aumentar o brilho demais . Então vamos tentar encontrar o certo apenas o suficiente e clicar em, OK, E isso pode ser suficiente apenas para fazer um pouco de brilho e contraste. Há sempre exposição, o que é outra maneira de se livrar desse passado. Mas veja, a exposição vai ser um pouco dramática. Veja como ele vai tirar lentamente ou lettering. Vamos deixar isso em paz. Vamos fazer o brilho e o contraste. Acho que é o suficiente para conseguir tirar este tipo daqui. Então eu estou olhando para todas essas diferentes opções de letras, e eu estou tentando descobrir qual seria o melhor na capa. E ao desenhar estes, percebo que os mais grossos vamos traduzir um pouco melhor. Então, quando você estiver fazendo, você vai colocar isso em um fundo colorido diferente. É melhor fazer tipo muito grosso porque a coisa fina realmente tentou cortar esse tipo fino fora, e ele simplesmente não se destaca o suficiente para o título. Então isso eu vou ficar com este estilo de marcador mais grosso. Então tudo o que nos levantamos para fazer é pegar a ferramenta de laço polígono. Vai isolar isto numa cópia e trazê-lo para o nosso projeto. Então, aqui está. Então agora precisamos cortar todo o fundo restante, então há algumas maneiras de fazer isso. Poderíamos fazer isso à mão pegando a ferramenta de seleção mágica e cortando lentamente peça por peça, assim. Bem, então ficamos com essas pequenas partes brancas nas letras dentro, e isso seria um pouco estranho porque nós deveríamos ter azul vindo por lá . Não é suposto ser branco, porque isto é suposto parecer que está desenhado no fundo azul, por isso, como é que nos livramos destes pequenos pontos de luz dentro? Vamos tentar de novo. Ok, então o que vamos fazer agora, já que temos a mágica uma ferramenta ou qualquer ferramenta de seleção, vamos em frente e clicar em qualquer lugar no fundo branco, e em vez de selecionar tudo, vamos fazer um pequeno truque, vai subir para selecionar e vamos selecionar semelhante. Então ele vai selecionar uma seleção de cores semelhante ao que fazemos selecionado. Então ele vai selecionar todo o branco. E então você percebe como magicamente ele seleciona todos os pixels brancos para nós. Mesmo alguns dos pixels que estão dentro do traçado. Vamos apagar isso, ou podemos fazer uma máscara. Então, selecione inverso e máscara. Ou podemos simplesmente cortá-la. E aqui está a nossa tipografia escrita à mão. Podemos trazê-lo aqui, e há algumas coisas que podemos fazer para mudar a cor porque eu quero ter um tipo de letra rosa, como você viu no início da palestra, algo que combina com esta edição rosa. Então o que podemos fazer é dobrar, clicar, clicar e fazer um estilo de camada em uma sobreposição de cores. Mas você percebe que perdemos muitos traços naturais. Então, se eu for em frente e desembaraçar isso, você verá essas belas, tipo natural de pinceladas. E a sobreposição de cores destruirá totalmente isso. Queremos mantê-lo o mais escrito à mão possível. Então, em vez de apenas fazer uma sobreposição de cores, vamos subir e fazer ajustes, e vamos descer para matiz e saturação. Então, com Hugh vai lentamente adicionar um pouco mais rosa a esse curso de enfraquecimento. Faça isso da cor que quisermos. Podemos torná-lo verde, azul claro. Mas eu acho que para alto contraste, eu acho que rosa não muito rosa quente, mas apenas um pouco de rosa realmente iria muito longe do curso. Podemos adicionar saturação a ele, e podemos ajustar lista como qualquer outra camada. Então eu vou clicar com o botão direito e eu vou convertê-lo em um objeto inteligente porque eu quero torná-lo um pouco menor. Mas então eu quero ser capaz de torná-lo maior se eu precisar. Então eu vou me converter em um objeto inteligente. Agora estou livre para torná-lo menor e maior e descobrir maneiras de integrar isso na manchete. Então não precisamos mais de pouco. Então vamos em frente e nos livrar disso. Mas agora temos nossa pequena tipografia. Poderíamos tentar achar o ângulo certo para isso. Então essa é uma maneira de trazer à mão a tipografia escrita. Isso estava em um pedaço de papel e tirou uma foto dele e foi capaz de digitalizá-lo muito facilmente. Então vamos tentar de outra maneira, porque estamos realmente explorando maneiras diferentes de trazer em mãos a tipografia escrita. Agora vou para um aplicativo chamado Procreate, que é um esboço digital de reconhecimento de maçã. Qualquer coisa imaginável, incluindo tipografia. Então vamos esboçar isso usando o Procreate agora. Te vejo lá em um minuto. 27. Lettering à mão e Procreate: Então eu estou no aplicativo procreate agora. Eu só vou criar um novo documento e eu tenho a cor vermelha selecionada. Como eu pensei que iríamos trazer o mesmo vermelho. Talvez eu possa ir em frente e torná-lo tão leve rosa para que não tenhamos que fazer um monte de modificações de cor nele. E o tipo de pincel que estou usando, Você pode usar todos esses tipos diferentes de pincéis. Vou fazer um pincel de caligrafia. Chama-se pincel de xisto. E o que eu amo sobre os pincéis de xisto só tem esta textura agradável para ele. Isso parece muito, muito bom. Então aqui podemos mudar a opacidade dele. Queremos ter uma opacidade total, e também podemos alterar o tamanho do pincel. Quem poderia fazer disso um golpe bem grande e grosso se quiséssemos saber o que eu amo no Procreate? Ele tem um olhar realmente natural para ele, modo que parece realmente autêntico e se parece com algo que eu estou fazendo em um pedaço de papel. Então vamos ver como ele se compara com o rial, lápis e papel que acabamos de fazer. Então vamos tentar Desenhar são pequenos, tão um pouco grandes demais. Então vamos obter o tamanho certo apenas fazendo um movimento suave. E à medida que fazemos isso, podemos aumentar a espessura. Vamos fazer muitos exemplos diferentes. Vamos trazê-lo. Tudo é uma folha um pouco maior? Estou fazendo um pouco de inclinação porque é assim que eu quero que a tipografia final seja nele, assim, pressão também em sua caneta. Então, se eu pressionar mais forte, vai fazer como uma espessa. E se eu apertar o isqueiro, vai fazer mais leve. Adoro procriar para todos os tipos de coisas. Nós vamos tipo de reduzir, um, versões mais magras, fazendo um movimento suave com nossas letras. Assim, podemos trazer isso em algumas coisas que precisamos fazer primeiro e procriar vão para as minhas camadas, que podem estar aqui em cima e vocês notarão essa pequena cor de fundo. Eu só vou desembaraçar isso e você vai notar que o fundo vai desaparecer completamente. Isto é bom. Não temos que fazer todo o passo que tivemos que fazer quando trouxemos uma foto. Não temos que fazer nada disso. Já está em um formato de fundo transparente PNG. Isso é fantástico. Então agora vamos exportá-lo como um PNG para que possamos manter esse fundo transparente. Nós vamos até aqui para exportar, para compartilhar, então exportar compartilhamento, e nós vamos compartilhar como um PNG ele vai ser exportado, e eu vou em frente e e-mail para mim mesmo e eu te vejo de volta na loja de fotos. Eu tenho R, P e G, e eu trouxe para a Adobe Photo Shop. E veja como é mais fácil fazer isso porque não precisamos isolar nenhum fundo branco . Não precisamos aumentar o brilho. Está bem aqui. PNG fundo transparente, pronto para ir muito mais eficiente. E eu amo todas as diferentes opções de pincel. Eu não procriei. Prefiro procriar sobre alfinete e papel. Mas você sabe, há muitas maneiras diferentes de fazer isso. Há até mesmo a terceira opção de ter um tablet wakame, e os tablets wakame podem ser tão baratos quanto $100 ele poderia colocá-lo diretamente na loja de fotos e usar as ferramentas de pincel com o tablet wakame e desenhar a letra da mão direita no Photoshopped . Essa é outra opção que você pode fazer é bem, toda a loja de fotos não tem muito os pincéis de aparência orgânica que procreate tem. Então vamos em frente e pegar aquele que achamos que tem o melhor contraste ou melhor espessura ou , você sabe, apresentação. Então eu poderia pegar este de baixo aqui em baixo não gastou muito tempo com estes. Eu tenho outro set onde eu passei um pouco mais de tempo naqueles. Então eu vou copiar isso desta camada e trazê-lo para o nosso documento. E assim, já está pronto para ir. Aqui está a nossa escrita à mão. Vou falar sobre tudo isso. Eu vou trazer este aqui e chamar este um procriar, e nós podemos incliná-lo e adicionar um pouco de sombra. Então, há um pequeno rosto apertado escrito à mão que era largo End foi do que acabamos de escrever em, você sabe, cinco minutos ou menos. E tenho outro que fiz quando passei um pouco mais de tempo com ele. Eu meio que gosto deste tipo de mais inclinado. Só depende de qual você acha que funcionaria melhor para isso. Então temos dois tipos diferentes. Temos um, e depois temos dois. Então, qualquer que você acha que funcionaria melhor para este layout em particular. E, claro, nós temos o que fizemos a mão escrito, um que nós trouxemos em uma onda, que nós provavelmente podemos aliviar isso um pouco, usando alguns filtros para tipo de correspondência com a mesma aparência da nossa mão tipo escrito. Então agora o que precisamos fazer é trabalhar na tipografia e tentar descobrir o melhor arranjo e também destacar isso como a principal palavra das manchetes. Vamos fazer isso a seguir. Vamos descobrir qual é a palavra mais importante aqui. Portanto, a palavra não é muito importante. Então o que eu quero fazer é fazer isso naturalmente um pouco menor, e eu quero torná-lo um talento porque eu acho que parece muito bem com o tipo escrito inclinado . Então eu recebo um duplo clique e nós vamos tentar fazer um tipo de serif porque eu acho que se nós fizéssemos um Sand Saref, ele parecia um pouco moderno demais e bloco e como nós temos esta bela, maravilhosa letra escrita à mão, temos este plano de fundo configurado como uma peça. Pensei que seríamos mais brincalhões com nossas escolhas de tipo e ser um pouco mais tradicional com um tipo serif. Então vamos escolher um tipo de serif. Havia um que eu já tinha em mente, e é chamado Adoni, que eu usei muito e outros cursos. Então é chamado Madani, mas você poderia usar qualquer tipo de serif que você gosta, e nós vamos tentar ficar com um livro ou, neste caso, um livro em itálico porque nós queremos fazer isso o metálico. Então nós só temos isso estabelecido Vamos em frente e fazer isso. Mas Dhoni, vamos fazer com que tudo pareça. Temos algumas escolhas diferentes aqui, das quais podem parecer boas. Vamos fazer um estilo antigo ousado e ver como isso parece. Vamos fazer o resto no não é uma palavra muito importante mais uma vez. Então eu quase me pergunto se nós podemos excluir isso e apenas trazer para baixo um estilo de tipo semelhante, torná-lo talvez um pouco maior. E então temos City, que vamos fazer Padonia inchar o velho estilo livro que agora temos isso como minúsculo e isso me faz pensar. Temos este pequeno é minúsculo. Temos aquelas minúsculas. Gostaria de saber se podemos ter um pouco de contraste com a nossa manchete, fazendo estes todos os tampões, pelo menos , estes dois todos os caps. Então vamos ver se podemos ir ao nosso painel de personagens. Este clique em são todas as tampas torná-lo muito mais fácil para nós e tipo de ajuste. O tamanho Cidade é uma palavra muito importante, então vamos manter isso um pouco maior. Vamos soltar o espaçamento aqui ou a corrente entre esses dois caracteres. Então eu só vou adicionar um pouco mais de rastreamento. Defina isso em 100 e solta um pouco esse tipo. O que é respirar e a mesma coisa para Cottage. Vamos ver se podemos fazer isso respirar ainda mais e fazer isso um pouco menor para o contraste. Simplesmente assim. E eu fui em frente e fiz este tipo de cor azul escuro porque eu pensei que quando eu fiz isso preto muda para preto. Então temos isso no preto. Mas o que eu pensei que o azul escuro fez é preto. E então este é o azul escuro. Ajuda a emparelhar com aquele fundo azul porque é da mesma família de cores. Temos este azul mais escuro, e então você tem este azul mais claro e eu pensei que tocava suavizou um pouco em vez de ser tão duro. Então agora a parte difícil é ajustar tudo isso e da maneira certa. E é quando podemos começar a pensar em nossas margens. Vamos ver se conseguimos obter a nossa margem até ao topo. Acho que não vamos ter problemas com a margem aqui, porque o tipo dela vai estar tão longe. Nós apenas ajustamos o tipo. E eu adoraria se o tipo fosse um pouco mais vertical de alguma forma, porque temos este espaço agradável e claro aqui em baixo que podemos usar. Gostei de ter cidade lá embaixo, talvez apertando um pouco o espaçamento. Talvez apenas fazer 50 em vez de 100 poderia torná-lo um pouco maior. Realmente. Tire vantagem disso. Que o espaço e imobiliário 28. Projeto de capa de E-Book: apenas elementos Oliver um pouco porque eu acho que nós queremos colocar mais ênfase na casa de campo. E é exatamente por isso que criamos Smart Layer para que possamos torná-las maiores sem qualquer problema. Então eu realmente quero dar um pouco mais de ênfase na casa. Claro, isso pode significar que precisamos fazer os edifícios um pouco maiores também e colocá-los para o lado apenas um pouco para que você possa ver um pouco do edifício. Mas não é o foco principal da capa do livro assim, e isso dará à nossa tipografia uma chance de preencher um pouco essa área. Lá vamos nós. Então eu acho que eu gosto mais do equilíbrio disso. Eu sinto que é menos ênfase nos grandes edifícios e um pouco mais ênfase na pequena cabana, e isso nos dá a chance de ter nossa manchete bem quadrada aqui. Então o que eu vou fazer é passar algum tempo certificando-se que isso tem o alinhamento certo, e isso é quando nós podemos colocar uma grade e nós podemos tipo de alinhá-lo na grade. Queremos ter certeza de que todo esse tipo está alinhado no centro de acordo com a paz geral. Então eu tenho meus guias inteligentes. Vai ser capaz de me dizer. Vê aquela longa linha rosa que vai me dizer que está no centro alinhado com a peça com o documento geral em vez de ter que quebrar a grade? Às vezes você recebe um pouco de ajuda lá. Nós também podemos adicionar um pouco de sombra para o nosso tipo escrito à mão. Há uma pequena sombra, só um pouquinho que você pode ver você pode exagerar muito, muito, muito, muito apertado. Se isso é apenas uma pequena dimensão de camada, vamos em frente na posição de que eu estava usando minhas teclas de seta para encontrar a pequena posição certa , apenas dobrando-a bem ali naquele pequeno espaço extra. E ali está a nossa pequena capa de livro que criámos. Então agora precisamos fazer mais uma coisa, que é fazer meu nome e vamos em frente e fazer isso, mas Dhoni tipo de manter com tudo ou eu comparar e fazer isso um tipo san serif para que pudéssemos escolher Helvetica só para ter algo Rápido e fácil. E vamos para o nosso painel de personagens. Vamos colocar um pouco de largura por que está enfrentando anos. Então 666 para o nosso rastreamento. E vamos fazer em todas as maiúsculas porque não temos grandes lacunas largas com letras minúsculas. Nós sempre queremos fazer isso com letras maiúsculas que tende a parecer muito melhor do que espaçamento entre minúsculas é lá Existe o nosso nome. Poderíamos fazer isso muito. Passe mais uma hora tipo de cores de ajuste fino. Poderíamos até mudar a cor desse tipo e limpar um pouco. Podemos até adicionar uma chaminé e em todos os tipos de efeitos extras ao nosso edifício, se quisermos . Mas por fazer uma capa rápida, acho que fizemos muito bem aqui. Então agora a última coisa que temos que fazer é exportar isso Então uma exportação. Esta é a versão final que fiz antes de filmar a turma. Vamos usar isso como um exemplo e vamos exportar isso como um JPEG. Então ele vai ir para exportação de arquivo como e alguns deles têm requisitos como Amazon. Você não deseja carregar algo com mais de 50 megabytes de tamanho, portanto, são apenas alguns requisitos de tamanho de arquivo. Você vai ter que ter em mente ao exportar isso. Bem, queremos fazer a mais alta qualidade que pudermos. Então vamos fazer um J Peg 1600 por 25 60 nós. É um modo RGB. Tudo o que fazemos nesta aula é digital, então vai ser um modo RG carne B, e pronto. Nós vamos exportá-lo e vamos ver o tamanho do arquivo e ver como ele olha para os tamanhos dos arquivos . Apenas quatro megabytes. Então isso é fantástico. Então, podemos fazer o upload e obtê-lo em uma capa de livro e Kindle , e nós fizemos isso, e fazer os ajustes para alguns dos outros tamanhos nesse artigo será muito fácil. Então, neste caso, fizemos 1600. Isso seria muito fácil, porque isso é apenas 100 pixels mais alto. Então, basta ir para o documento, você iria para o tamanho da tela e você apenas ajusta a tela. Então vamos dizer que vai mudar para 1600 por 2400. Então agora vamos fazer 2400 vai ser um pouco mais curto em tamanho. Vá em frente e prossiga. Você pode ver que vai mudar o tamanho da tela. Não muito. Temos que nos ajustar aqui. Só precisamos de um pouco da tipografia. Mas acabamos de perder um pouco do céu e não é grande coisa. E então passamos pelo processo de exportação novamente para que você possa usar isso como um modelo básico para trabalhar em todos os tamanhos diferentes que você precisará. E como você vai notar, eles não são. Eles não variam drasticamente do tipo de capa de livro Duas pessoas tipo de capa. Então lá vamos nós. Fizemos um disfarce inteiro juntos. Adorei como fomos capazes de aprender a digitalizar a tipografia de duas maneiras diferentes . Claro, há também o tablet wakame, que nós não cobrimos, mas você simplesmente conectaria seu tablet wakame e tiraria seu pincel, e você apenas pincel como você não iria procriar. Mas ela iria apenas escovar direto para o documento do Photoshop. Então, muitas maneiras diferentes de obter sua tipografia escrita à mão e flare em projetos. É uma coisa super popular para fazer porque adiciona este maravilhoso toque rico aos seus projetos . 29. Criação de ativos desenhados à mão no Procreate: Então, estamos no APP procreate agora, onde é um esboço digital AP cursos em muitas opções diferentes para esboçar digitalmente ativos. Quem pode usar um tablet wakame e agendar diretamente na loja de fotos usando seus pincéis e Photoshopped. Ou você já pode ter uma ferramenta como o procreate que tem uma gama ainda maior de pincéis de aparência mais orgânica que você pode usar para digitalizar ativos. É exatamente disso que se trata esta seção. É ser capaz de dar um passo adiante e entrar em um monte de detalhes sobre como criar os ativos orgânicos desenhados à mão e trazê-los para a loja de fotos ou ilustrador para criar campanhas realmente arrumadas que usam este mais orgânico, desenhado à mão olhar como uma espécie de ver alguns exemplos de alguma dessa inação. Vamos fazer algumas letras à mão. Vamos desenhar algumas barras horizontais onde podemos colocar conteúdo promocional. Nós também vamos fazer uma série de flechas que vamos ser capazes Teoh usar em todos os tipos de ativos, então eu vou começar. É aqui que estamos agora e procriamos. Este é o que eu já criei e você pode ver que eu usei talvez cinco ou seis pincéis diferentes e criou uma grande variedade de diferentes pincéis pintados. Claro, também vamos ver como poderíamos desenhar à mão e trazê-lo como algumas lições anteriores que fiz quando trouxemos uma tipografia. Vai ser um processo muito semelhante, mas vamos começar com procreate e tipo de usar alguns outros pincéis para tipo de mostrar como você pode trazer alguns desses ativos para dentro E a grande coisa sobre procriar. O que eu mais gosto sobre ele é quando você cria esses ativos, você pode se livrar do fundo branco exportado como um P e G com um fundo transparente . E você não tem que ir na loja de fotos e tentar remover o fundo branco como você faz. Se você fosse desenhar à mão recursos em caneta e papel, você teria que tirar uma foto dele, trazendo para a loja de fotos e remover essa página em branco ou o fundo. Neste caso, esse é um passo que não temos que fazer. Já está pronto para ir, e eu vou passar por esse processo, então vamos para a galeria um novo documento, e queremos ter certeza que esse documento é realmente grande, porque isso vai ser exportado como um arquivo Photoshopped e vai eventualmente B, P e G. Então queremos ter certeza de que é o maior que podemos obter porque quando realmente queremos que eles sejam tão alta resolução para que eles possam esticar o máximo que puderem sem ser distorcidos. Então eu tenho que ir para este 4000 por 4000 todo o caminho até o fundo. Isso é um bom quadrado, bom quadrado, Candace que podemos usar. Isto é 4000 por 4000 e vamos começar. Então, uma das primeiras coisas que eu quero fazer é obter a cor certa e o que eu gosto de fazer com essas setas e tem que fazer com que ele tipo de uma cor cinza claro ou cinza escuro. Uh, então eu não quero ter um monte de cor para eles, porque no show de fotos nós podemos mudar para a cor que quisermos. Então eu quero manter uma cor neutra. Então vamos ver se conseguimos obter um tipo de cinza claro ou um cinza escuro escolhendo um tipo de cinza escuro aqui para minha paleta de história bem ali na roda de cores. E eu quero ter certeza de que eu tenho tudo ajustado com meu pincel. Então eu vou para aqui, para o meu lado esquerdo. Eu tenho que mudar o tamanho do pincel, e cada pincel vai ter sua própria mudança. Assim que eu mudar um pincel, eu posso voltar aqui e mudar o tamanho, dependendo de quais são as características do pincel. E então eu vou descer e ter certeza que estamos na janela de capacidade de escova 100% em qualquer desvanecimento acontecendo. E eis o que vamos fazer. Procreate tem camadas, o que torna realmente fácil de exportar porque, digamos que ele cria um par de camadas diferentes. Posso exportar este arquivo para a loja de fotos, e ele vai reter todas as camadas. Então é ótimo como eu controlar 20 flechas cada uma em sua própria camada. E quando eu trazê-lo para Photoshopped, eu já vou ter tudo em sua própria camada e separado, o que é super, super útil. Vamos ter isso em mente quando fizermos isso. Você sempre quis levar uma camada apenas vai deslizar para a direita Excluir slide para a direita. Excluir. Não vamos nos aprofundar muito sobre treinamento porque vocês podem estar usando um aplicativo diferente em vez de procriar. Então o que eu vou fazer é estudar setas no Google e talvez estudei alguns pacotes de recursos que estão à venda on-line que incluem gráficos da era, gráficosvetoriais aerodinâmicos. talvez estudei alguns pacotes de recursos que estão à venda on-line que incluem gráficos da era, gráficos Apenas tentando ter uma idéia de algumas formas diferentes que são populares com setas. E também estou pensando na minha própria mídia social na campanha. Eu gostaria de ter algumas setas apontando para um botão de chamada à ação, e eu não quero que ele esteja em linha reta o tempo todo. Eu gostaria de ter alguns loops, algumas voltas, talvez até um círculo que vá até o fim. 360 Estamos indo para uma grande variedade de flechas. Então vamos ver com que pincel vamos começar. Há alguns realmente ótimos pincéis no pensamento e também no desenho. Então esse ar tipo de duas categorias que vamos tirar em termos de fazer nossas flechas . Então vamos em frente e começar com este, e eu tenho procreate cinco que adicionou um monte de novos lançamentos incríveis para ele. Então, se você tiver, é uma atualização gratuita para obter os cinco. Então eu vou fazer isso. Este pincel aqui, vamos começar. Claro, você só faz um par de pincéis e você meio que percebe que quando você faz esse tamanho um pouco menor, nós apenas vamos praticar com flechas. Eu não tenho certeza de como este ar vai acabar porque eu estou fazendo eles ao vivo, mas eu já tenho um conjunto que você pode baixar. E o recurso disponível para download é que vamos usar para criar nossa campanha de mídia social juntos. Vamos criar aquela loja de fotos, então estou criando algumas setas genéricas para agora. E se você não gosta, ele, pode sempre voltar, apertar este botão, voltar no início. Vai levar um pouco de macarrão por aí para achar o estilo certo. Alguns vão ser grossos, outros vamos ficar magros. Então uma coisa que eu quero pensar quando eu estou fazendo isso é cada vez que eu criar uma nova seta, hum, você não precisa fazer isso, mas você vai economizar muito tempo é ir em frente e ir para suas camadas e adicionar uma nova camada para cada seta que você faz. Então, quando você o exporta como um arquivo do Photoshopped, você não precisa sentar lá e cortar e colar cada um deles. Já está em sua própria camada. Você só tem que lembrar que isso será uma economia de tempo. Você não tem que fazer isso se você só quer esboçar tudo em uma camada e voltar e tipo de usar a ferramenta de laço para isolar um e tirá-lo de lá você pode. Então, se eu criei esse para continuar assim, então quando eu estiver pronto para criar uma nova camada e eu estiver pronto para tentar outro pincel. Então vamos tentar Eagle Hawk para que cada um tenha seu próprio estilo diferente. Você pode ver que este aqui tem mais da aquarela de tinta. Olhe para ele. Mais uma vez, não estou me lembrando de fazer minhas camadas, mas apenas para fins de demonstração. Mas crie essa nova camada com cada pincel novo. Vamos fazer um que é meio encaracolado aqui. Vamos voltar aos nossos pincéis e cada novo disse que eu faço tudo parece um pouco diferente . Ok, então vamos tentar outro pincel. Vamos tentar Blackburn, onde ela está no ar todos os pincéis de desenho, então eles vão ser muito estilísticos. E veja que esse pincel é muito maior do que os outros. Tem que reduzir o tamanho fresco. Ok, então vamos tentar um pincel diferente. Vamos pensar e tentar um pouco mais de um pincel limpo. Vamos tentar foi tentado tinta seca. Vê o que isso parece? É mais direto. Não tem o golpe mais espesso ou mais fino. É uma espécie de mais de um tipo uniforme de olhar mais de uma linha de modelo. Isso vai ser interessante. Tudo bem, vamos mudar para Marker. Isso é muito grosso. Rápido, crie algumas setas mais finas também. Em algum momento, você quer ter outro herói realmente estilístico que se move tão Inca que parece muito destruído. Tem muito caráter para ele. Vamos dar uma olhada nesse pincel. Você também pode personalizar pincéis. Se você entrar em pincéis, clique nele. Há muitas coisas que você pode mudar Com isso você pode mudar o espaçamento, a simplificação, tudo isso pode realmente mudar as características do seu pincel. Eu não quero ir muito em detalhes com esse pequeno. É uma espécie de deixá-lo por padrão apenas para tipo de obter alguns pincéis simples que pode ter muito mais distorcido,olhar destruído, olhar destruído, que poderia ser muito legal para, como um anúncio de juventude baseado urbana. Então, há apenas um par de setas diferentes. Vamos fazer mais um pouco. Vamos tentar Mercúrio. É um pouco mais magro. Essa é a pele. Sua alternativa. Eu queria tentar. Quero experimentar umas grossas. Então, uma vez que ele nunca sabe a situação, situação e tipo de flecha que desencadeou uma necessidade. Então, é bom criar uma espécie de grande variedade. Eu não estou criando uma camada para cada um só para que eu possa cortar um mostrar-lhe o processo um pouco melhor. Mas eu estaria criando uma nova camada para cada herói 30. Criação de ativos desenhados à mão no Procreate 2: Então agora que temos toda uma série de setas concluídas, estamos prontos para exportar isso. Então, uma coisa que queremos fazer, que é diferente do que se você estiver em um tablet wakame, você pode destruir tudo isso diretamente na loja de fotos usando camadas. E você poderia perturbar o fundo transparente. Neste caso, temos esse fundo branco que vem por padrão, então queremos nos livrar disso. Então nós vamos para o nosso painel de camadas, vamos até o fundo, e há algo chamado cor de fundo que tem um preenchimento nele. Tudo o que temos que fazer é essa diversão. E agora é tudo transparente, o que é fantástico. Isso é exatamente o que queremos e como queremos exportá-lo. Não é necessário ter um fundo branco para remover mais tarde. Então agora vamos exportar isso, vamos para a nossa pequena ferramenta de configurações aqui. Vamos compartilhar, e queremos compartilhar isso como um arquivo do Photoshop. PSD. E eu vou continuar e enviar isso para o meu Google Drive e colocá-lo no meu desktop. E eu vou vê-lo no Adobe Photoshopped E antes de irmos para a loja de fotos, queremos criar alguns outros ativos diferentes que podemos usar como parte de nossos ativos de marca que funcionam na necessidade de criar nossa campanha. Então criamos uma série de setas. O que eu adoraria fazer a seguir é criar um alfabeto porque eu quero soletrar em nossa própria tipografia única , sua própria fonte única. Eu acho que você poderia dizer que eu quero construir isso usando uma série de letras para criar uma manchete para torná-lo único. Interessante. E dê-lhe esse pincel de detalhes. Olha, então vamos criar que vamos abrir um novo documento da mesma forma que estamos fazendo 4000 por 4000. Faça algo um pouco diferente. Nós vamos criar uma grade, porque quando você tem 26 letras do alfabeto tendo uma grade, realmente vai nos ajudar a alinhar nossa fonte que nós vamos estar criando junto com a linha de base e também as linhas de altura superior cap porque quando você tem 26 letras do alfabeto tendo uma grade, realmente vai nos ajudar a alinhar nossa fonte que nós vamos estar criando junto com a linha de base e também as linhas de altura superior cap vai ajudar-nos a alinhar toda a nossa carta. Então eles estão um pouco perto do mesmo tamanho. Então, vamos fazer isso indo para as configurações indo para tela e, em seguida, basta clicar no guia de desenho. Vai adicionar algumas grades padrão. Você pode continuar a editar guia de desenho e podemos alterar o tamanho da grade, reduzi-lo um pouco, que ele possa ter mais algumas linhas de grade para nós e colocar feito. Agora temos o nosso tipo de modelos aqui, então vamos usar o tipo de preto. Vamos manter a nossa cor neutra. E vamos escolher um pincel agradável que achamos que ficaria muito bom para esse tipo de marcador para escovado à mão, pintado à mão tipo de campo cru, robusto. Você gostaria que este para ser um útil, marcas robustas? Queremos tipo de escolher um pincel em particular que achamos que faria bem. Claro, poderíamos escovar algumas vezes para ver qual nós gostamos. Aqui é Eagle Hawk. Eu gosto disso neste 10 urso em. Gosto muito do jeito que parece. Então vamos em frente e tentar essa. Vamos começar com a carta. R. Queremos ter um tipo de marcador robusto apelar para isso, então sinta-se livre para voltar, tentar de novo até conseguir algo que você gosta. Então, há uma carta e você pode ver que eu estou tipo de ficar nas quatro caixas apenas para que tudo é principalmente ele sai da linha de base e da altura da tampa, mas não por muito. Tudo vai ser retido principalmente em quatro quadrados do roteiro. Então vamos criar uma nova camada. Essa é a letra B. Ok, vamos tentar a letra C e assim por diante. Então um B, C D E f. E então vamos tentar G trabalhando nossas cartas aqui e sinta-se livre para fazer uma pausa e estudar letras porque há tantas maneiras diferentes de desenhar. Ok, há tantas maneiras diferentes de fazer elementos diferentes, e nós poderíamos fazer bem assim. Ou podemos fazer bem assim onde a perna do K sai da perna no topo, de muitas maneiras diferentes. Para fazer isso, para tipo de estudo tipografia e tipo de descobrir que orientação você gosta do K apenas Google K e, em seguida, Google a próxima letra e apenas estudar diferentes tipos e personagens. H i J, K e L, com aquele grande e grosso olhar marcador e ir para baixo não tem que ser uniformemente espaçado. Quero dizer, é bom se você pode espaçar tudo isso uniformemente, mas no final, eles vão ser camadas separadas, e você pode movê-los em uma loja de fotos. O maior negócio é garantir que eles tenham um tamanho semelhante. Então, se isso ficar dentro de quatro caixas, queremos garantir que o J fique com ele quatro caixas. Então talvez eu precise modificar isso um pouco porque as letras estão ficando maiores. Mas quando você está na loja de fotos, você pode fazer qualquer coisa. Esta é também uma tipografia muito áspera, então tudo bem se ficar um pouco maior, menor. Você pode querer desenvolver um letreiro de pincel personalizado que é muito conciso. E então use essas grades para manter as mais concisas do que o que estou fazendo com meu conjunto particular. E alguns dos personagens podem precisar ter uma maior pressa para ter a sensação que você está querendo fazer, então sinta-se livre para mudar o tamanho do pincel. Vai levar algumas vezes para acertar uma letra, e eu gosto de fazer um golpe contínuo, fazer outro derrame. Parece um pouco mais, mesmo quando você continua e ele não pára no caminho. Então, se eu fosse fazer isso, você e eu paramos no meio do caminho e tentei continuar fazendo o pincel para torná-lo perfeito. Não tem esse fluxo natural que um golpe contínuo teria. Então, apenas faça um golpe contínuo descer. Mas tudo isso estaria em camadas separadas. Então, o que queremos fazer para apenas ensinar a classe e fazer cada uma das camadas, Mas você pode ver como cada um teria sua própria camada que b 26 camadas, faríamos a mesma coisa que fizemos antes estavam prontos para exportar e tipo de ver como estes parecem em ação. Queremos ir em frente e desativar o plano de fundo, para que seja tudo transparente. Não se preocupe com a grade que não vai exportar conosco. E queremos ir para o compartilhamento de configurações. E queremos o arquivo da loja de fotos. Vou compartilhar isso, colocar, abrir na loja de fotos e ver o que temos. E há mais uma coisa que quero desenvolver. Eu tenho flechas. Eu tenho um tipo de alguns personagens para fazer um título personalizado, mas a última coisa que eu quero fazer é ter algum tipo de pincelado para colocar ah promoção em ou um chamado final de ação ou algum tipo de botão ou caixa. Então eu quero criar algo semelhante a isso. Vê este tipo de derrame? Isso foi criado não apenas usando um pincel e escovando e sendo feito, mas é criado com uma combinação de um par de pincéis diferentes e também uma combinação de um par de transparências diferentes e alguns tons de cores diferentes para criar este efeito mais rico quase um efeito de ouro. Então vamos tentar imitar isso e fazer algo assim. Assim como fizemos antes, vamos criar um arquivo muito grande. Então 4000 por 4000 e queremos uma espécie de escova de ouro. Claro, cor não importa muito, porque podemos mudar isso a qualquer momento, e será Photoshop, então eu apenas me concentraria em qualquer cor que você gostaria de dilatar. Normalmente, as cores mais escuras de Richard funcionam melhor porque você pode facilmente alterá-las para qualquer cor na loja de fotos. Mas vamos tentar imitar o efeito dourado que alguma escola escolheu, tipo um ouro neutro e adicionar um pouco de preto para dar mais um efeito dourado . E vamos para nossos pincéis de desenho. Vamos tentar o mesmo que temos usado. Liger, experimente este aqui e nós vamos fazer uma espécie de swoosh. Nós só queremos ter alguns ativos de marca que possamos trazer para dentro, para que possa colocar tipografia sobre ele. Podíamos colocar uma manchete nele e algumas coisas que gosto de fazer para tornar isto mais rico. Claro, você poderia colocar isso em cada camada. Se eu só quero ter aquele recurso lá, eu estou feito. Então eu criaria uma nova camada e tentaria com outra. E quando você poderia trazer isso como um arquivo de Photoshopped em camadas, você tem todos eles um pequeno pincéis separados que você pode usar para todos os tipos de situações diferentes . Então vamos fazer a mesma coisa voltando e fazendo um pouco mais leve. Claro, eu tenho o lápis de maçã para que você possa pressionar seu lápis para criar pincel diferente, chupar e pressionar muito forte ou comprimir muito macio e ter, como, um pincel macio agradável. Então isso é muito útil. Ter o lápis de maçã seria capaz de fazer isso quando eu quero fazer é eu quero adicionar cores diferentes. Você sabe, isso pode adicionar uma única cor para criar esse efeito rico. Precisamos criá-lo usando várias cores. Então o que eu vou fazer é trazer esta cor para cima e tirar um pouco do cinza dela e torná-lo mais um Hugh puro. E eu também posso reduzir a transparência do pincel. Por isso, aqui em baixo. Então não está cheio na cor. Vamos continuar a mudar de cor ou ao longo do volante para ficar tão rico. Olha, claro, a qualquer momento você sente que eu realmente não estou sentindo isso. Basta pegar a ferramenta de borracha, torná-lo um grande tamanho de pincel e apenas tentar novamente. E pode ser que precisamos trocar ou escovar. Vamos tentar Eagle Hawk, e quando você fizer isso, reduzir o som transparente, alguns deles então vamos dizer que eu reduziu a transparência para 70 ou mais e ter um tamanho de pincel muito grande que você poderia desenhar. Uma vez que ele vai ainda maior tamanho de pincel, você pode desenhar um e, em seguida, desenhar de volta sobre ele, e ele pode tipo de ver que olhar em camadas dá com a transparência dá um pincel mais natural, como a pincelada foi para cima e para baixo e para cima e para baixo em vez de apenas um grande apartamento, como o que você vê em cima. É um grande pincel plano. O que está na parte inferior parece um pouco mais orgânico com a forma como as pinceladas. Olhe, Dr. Blackburn, essa parece uma boa, grande e grossa. E vamos reduzir a transparência e aumentar o tamanho do pincel para que possamos descer uma vez, duas vezes podemos mudar de cor um pouco, apenas adicionando destaques. Voltando ao exemplo que eu criei para que você possa ver como mesmo no fundo aqui você poderia ver como isso era um pincel completamente diferente, e ele podia ver quantas cores diferentes e pequenas pinceladas que levou para criar isto. Então vamos exportar isto da mesma forma que fizemos antes. E você será capaz de baixar todos os arquivos que criamos hoje. Basta ir para configurações e você vai exportar como um arquivo Photoshopped e você será capaz de ter tudo isso. Uma coisa legal que você poderia fazer é tomar este exemplo. Eu fui para colorir dot adobe dot com, e eu fui capaz de encontrar um modelo realmente bom para uma marca em que eu estava trabalhando. E você pode criar pincéis diferentes e você pode experimentar as cores aqui. Tudo o que tenho que fazer é pegar meu dedo e segurar, e eu vou ser capaz de provar a cor e depois escovar com ela. Então vamos dizer que eu quero fazer isso, hein? Cor aqui poderia levar um pincel tipo de fazer diferentes cores de pincel que eu poderia usar seus ativos de marca mais tarde. E eu trouxe isso como uma foto. Você pode simplesmente excluir essa foto a qualquer momento acessando sua camada e excluindo essa foto e exportando seus ativos dessa maneira. Portanto, é realmente ótimo criar esses ativos de marca. Você pode trazer uma foto de suas cores e apenas colocar o dedo sobre ela. Segure e ele vai provar essa cor. E ele poderia escovar com ele para que você pudesse ver todas essas coisas realmente legais que você poderia saber. Posso levar estes pincéis. Vou mostrar-te um exemplo do que podes fazer com um activo como este. Então agora temos todos os ativos criar. Eu vou fazer mais um mostrar-lhe este tipo de fazer um arco-íris ir e obter o fundo aparecendo lá em cima. Então isso é uma coisa que eu poderia fazer. Você poderia ter um arco-íris inteiro de aquarela procurando listras e gráficos. Agora que todos os nossos ativos estavam prontos para entrar na loja de fotos, dê uma olhada no que temos e aprenderemos a pegar esses ativos e colocá-los em uso em uma campanha real. 31. Usando nossos ativos desenhados à mão para um projeto de mídia social: Agora que eu tenho meus arquivos Photoshopped prontos para trazer em uma loja de fotos, vamos ver como tudo se parece. Então, no Guia de Recursos, o guia de recursos para download, você tem uma seção de sessão de esboço digital foi gwen duplo clique que todos esses ar disponível para você. Então você o tirou da caixa. Podemos ajudar a criar a campanha das redes sociais que vamos fazer rapidamente. Você já vai ter esses bens. Ou se você quiser trazer seus próprios ativos fazendo o mesmo método que eu fiz com o tablet wakame ou com um aplicativo procreate ou esboço manual. Você pode fazer isso também. Aqui está o que fizemos nas aulas. Obter um pouco de uma versão ligeiramente diferente, um pouco mais cru e escovado do que o tipo que eu fiz na classe. Mas você verá todos eles exportados como camadas diferentes separadas. Eu tive que voltar e nomear cada camada, mas você podia vê-lo todo lá. E o que é ótimo sobre isso é que eu posso arrastar e soltar e criar todo tipo de manchetes com isso para que eu pudesse arrastá-los e criar palavras diferentes com ele. Então eu quero criar uma campanha de mídia social que não diga nada. 20% de desconto têm um 20% do botão de ação chamado. Muito simplista. Não estamos falando de uma grande manchete aqui, e isso é bom. Queremos manter nossas manchetes meio curtas e breves. Então o que eu quero fazer é criar as palavras, não, não, e então criar as palavras de distância e tê-las duas palavras separadas. Então isso é fácil. Você poderia apenas criar as palavras, então não. E você pode sobrepor isso um pouco, também. E uma vez que são camadas separadas que podem ter esse olhar puro e sobreposto se ele quisesse, vamos trazer o fim do topo. Estamos nos mantendo separados e depois temos caminho. Então vamos em frente e pegar as cartas que precisamos do W A e então por que não vamos precisar de mais nada. Podemos apagar isso por enquanto. E você sabe, não diga que este arquivo causa em toda a corrida. Mas eu só estou criando uma manchete tentando simplificar. Você sempre pode voltar e usar esse mesmo conjunto para construir todo tipo de manchetes diferentes. Então, de jeito nenhum. Vamos ter uma velocidade por baixo apenas uma espécie de organizar a tipografia de uma forma atraente. Então, de jeito nenhum. É claro podemos pensar nisso e mudar tudo isso à medida que trabalhamos para que a nossa manchete esteja pronta. Vamos encontrar algumas fotos convincentes que possamos usar. Isto vai ser publicidade 20% de desconto. Pode ser para uma marca de moda. Pode ser para uma marca de comida. Nós vamos tipo de fazer um tipo de adições jovens milenares ou Gen Z. Queremos ser muito fresco quando você algumas paletas de cores realmente agradáveis aqui. Então eu fui para pixels dot com, e eu teria encontrado algumas fotos que eu acho que ficaria muito legal com isso. Vai haver um. Vamos criar o nosso tamanho do instagram começará com o Instagram, mas isso poderia realmente ser para qualquer coisa. Então vamos arquivar novo. Isso pode ser para ativos de marca. Um cartão de visita nem sempre tem que ser algo digital esses ativos ou apenas um bom como qualquer outro ativo que você pode comprar. Este é principalmente tipo em 10 80 por 10 80 300 resolução porque nós gostamos de ter essa alta resolução agradável e ir em frente e clique em Criar. Isso é primeiro trazendo nossa foto boa cópia ou foto e colá-la, e vamos certificar-nos de que clicamos com o botão direito e convertemos em objeto inteligente, então enfraquecer o tamanho e não tê-lo distorcido. Poderíamos dimensionar isso, como quisermos sem distorção. Então vamos cortá-la. Vamos ter uma boa conexão emocional com ela, então não vamos ter que ser ampliado assim. O que é realmente zoom no rosto dela? Pressione Enter e vamos trazer nossa manchete é copiar minhas camadas e trazê-lo para dentro. Podemos inclinar isso um pouco e emoldurá-lo. E uma coisa que eu quero fazer é que eu quero fazer tudo isso branco. Então uma coisa que eu quero fazer é ir em frente e voltar para as letras da mão dela e vamos pegá-lo de uma forma, e talvez você tenha que ir e enquadrar isso. Eu quero ser capaz de juntar o não e juntar-se ao caminho como uma camada. Então eu quero ter certeza de que estou muito feliz com isso. Coloque para fora e você faz um pequeno atalho de comando, Comando E. E eu vou ser capaz de mesclar as camadas ou você pode clicar com o botão direito em camadas mescladas. Então agora sei é a sua própria palavra. E agora o caminho vai ser suas próprias palavras. Estou fazendo o comando EADS. Um peso rápido emergiu camadas. Então agora tem essas camadas separadas. Eu só vou clicar duas vezes sobre isso, fazer uma sobreposição de cores e apenas fazer branco. E enquanto estou aqui, adoraria adicionar uma pequena sombra. Então, ele realmente se destaca contra a foto. Vamos fazer um bom tamanho e opacidade. Eu poderia fazer a mesma coisa para a sobreposição sem cor. Faça um pouco de sombra para aparecer contra o fundo. Então agora nós podemos meio que mexer com a posição, e com isso, podemos clicar com o botão direito agora, e podemos converter isso em um objeto inteligente para que possamos continuar a manipular e sempre voltar com nossas escolhas de tamanho. Então, aqui vamos nós. E agora vamos tentar incriminá-la. Pode enfraquecer, Zoom no rosto um pouco mais. Estava a tentar enquadrar a tipografia no rosto dela e a emoldurar. E podemos até inclinar isso um pouco para dar um pop dinâmico assim. Nós podemos até sobrepor isso um pouco para que você possa ver como o marcador meio que passa por cima dele. E precisamos de ter o nosso apelo à acção. Então temos algumas coisas que podemos fazer para uma ação fria. Poderíamos fazer um simples botão de alto contraste. Neste caso, laranja amarelada será bastante alta. O contraste estava criando um novo botão. Vamos descer para uma ferramenta de retângulo e criar um botão simples. Bem, parece que não teve um derrame. Perfeito. E nós vamos apenas fazer uma ferramenta de texto e digitar 20% de desconto e preto 20%. Uh, e eu só vou fazer aquele preto apenas tentando ser alto contraste aqui. É por isso que estou escolhendo essas cores. E estamos tentando ser brilhantes, divertidos, funky, ter um jovem viver tudo mais uma vez, uma sombra de gota será muito útil aqui. Um tamanho agradável de tamanho desfocado e uma boa quantidade de capacidade. Nós podemos, mais uma vez, tipo de ângulo este na direção oposta para tipo de criar tensão. Então você tem esse tipo de direção diagonal nessa direção diagonal que cria tensão , que é uma boa tensão visual. Então o que seria ótimo é ter uma pequena flecha que também aponta para o 20% de desconto. Então temos algumas flechas que podemos escolher. Este é um conjunto um pouco diferente do que eu criei na classe apenas alguns minutos atrás. Mas, você sabe, eu tive um pouco mais de tempo para separar as camadas e cortar tudo isso para que você possa ser capaz de abrir isso e usá-lo você mesmo para qualquer coisa que você quiser. Você tem um livre para usar isso em projetos comerciais pagos, se você quiser. Então eu vou selecionar a seta que eu acho que funcionaria muito bem aqui. Vamos selecionar este bom, grosso ou talvez um com este mundo dinâmico. Talvez este aqui e eu possamos usar aquele no fundo um pouco mais tarde. Vamos fazer o mesmo que fizemos antes. Vamos fazer uma sobreposição de cores e uma sombra e também clicar com o botão direito do mouse. E podemos converter um objeto inteligente para que possamos escalá-lo de todos os tipos de tamanhos sem perdê-lo , perder a resolução ou ele está perdendo a qualidade. E é aqui que podemos sobrepor coisas para criar um efeito em camadas. E uma coisa que seria realmente ótimo para este anúncio é algum tratamento para a foto, porque agora é apenas cor cheia. É exatamente como baixei do site. Mas e se fôssemos criar uma nova camada no topo e adicionar um modo de mistura e colocar um pouco de, ah, ah, pincel trabalho de cor aqui para que possamos ter uma espécie de esta cor interessante quase como filtro Instagram adicionado a ele sem ser um filtro de instagram, mas um pouco mais estilizado. Então eu vou criar uma camada que vai estar em cima dela, e vai ser tipo de onde estão modo de mistura vai existir. Então, queremos ir até o modo de mistura dela aqui em cima e ativá-lo. Tente a luz suave. Nós vamos ter um belo, grande e macio pincel redondo, super grande, talvez até 2000 ou então nós vamos ter certeza que é um suave por aí. Não queremos nada duro. Queremos que ele seja emplumado. Nós só vamos clicar quer ver como isso parece, e nós vamos ter um bom pop de cor e cor agradável e moderna, que pode ser tipo de querer ser muito rosa Phillips em um pouco de vermelho para ele. E você meio que vê o efeito que eu estou indo para morder, afundar esta imagem de pré-visualização. Realmente clique no canto superior venda pincéis maiores e também nós contestar ou modo de mistura para ver. Talvez a luz suave não fosse aquela que queríamos apenas refresca a imagem um pouco . Então lá vamos nós. Esse é um ótimo modo de mesclagem naquela tela. Então ele tem que definir para a tela. O que poderíamos fazer é criar outro e continuar a colocar isso em camadas. Então vamos criar em vez dessa cor, vamos tipo de fazer uma cor mais fria, talvez um roxo claro, mas seu pincel clique aqui embaixo na parte inferior. Certo? Olhe aqui embaixo no fundo, certo? E, claro, podemos mover isso um pouco para baixo e podemos definir essa tela. Isso adiciona um pouco de cor à foto, então aqui está o que tínhamos antes. opção desativada está desativada. É ótimo. É uma ótima imagem esta imagem ficaria boa em preto e branco, bem como, mas com um pouco de pop de cor apenas adiciona um pouco de toque moderno a ele. E eu sempre poderia pegar minha corrida ou ferramenta, limpar qualquer borda. Isso ou não parece bom. E aí está nossa primeira iteração de nossas campanhas. Temos algumas letras personalizadas, pinceladas acostumadas. Temos um pouco chamado ação. Podemos até adicionar nossa marca muito rapidamente. Digamos que temos um logotipo. Nós não temos liberdades para isso, mas nós poderíamos apenas colocar, você sabe, você sabe, este tipo de site de moda genérico ponto com, mas nós estamos apenas querendo um tipo de lugar onde nós teríamos um logotipo que nós teríamos projetado. Colocamos provavelmente no canto superior esquerdo, ou poderíamos colocá-lo pode estar aqui embaixo no canto inferior direito? Tudo vai depender do que achamos que seria mais eficaz. Ambos serão bons posicionamentos porque há uma área vazia aqui, e podemos mudar o tipo disso também. Agora é camarada, mas poderíamos fazer algo ainda mais genérico. Isso é realmente apenas enchimento apertado por agora, haveria logotipo oficial lá para que as pessoas soubessem de que marca esta é, e que provavelmente precisaria cair sombra assim. Outra coisa que podemos fazer é mudar isso um pouco. Merda, tudo isto. Nós temos essas duas opções de colocação e talvez no canto inferior direito possa funcionar um pouco melhor porque você lançá-lo, você escolhe, você lança sua idéia, você lança o que você está vendendo e então você apresenta seu logotipo no fundo. Tem um golpe mais natural. Apesar de ter aquele espaço agradável lá em cima, eu poderia apenas trazer meus bens um pouco para tirar vantagem desse imóvel aqui em cima . Então lá vamos nós. Esse foi apenas o meu processo de pensamento e como eu meio que criei essas imagens altas e altamente dinâmicas do seu pessoal de captura. Este é o último que fiz antes. Vamos fazer um par de diferentes agora que temos a manchete na seta já estabelecida Weaken, trocar a foto e criar uma campanha coesa inteira desta forma 32. Usando nossos ativos desenhados à mão para um projeto de mídia social - 2: Então, tem outra foto que eu quero experimentar. É um pouco mais alta moda. Quem arrastou isso e vê o que podemos fazer agora que temos tudo pronto? Essas duas mulheres estão se abraçando? Vamos fazer um emotivo Vamos ter uma bela apertada vista cortada. Poderíamos arrastar isso para baixo no sistema de camadas dela, mas também remover nossas outras fotos para que possamos manter nosso tamanho de arquivo baixo. Então vamos reorganizar isso um pouco para que possamos ter isso melhor organizado em termos de tipografia. Não, não queremos que o porquê apareça no noticiário. Então aqui, você meio que vê no nariz dela. É apenas constrangedor. Eles vão ter cuidado onde você está escrevendo terras. Tem que ficar bem todo o caminho. É o que podemos fazer é posicionar assim mais baixo? Tome um B bem aqui. Você pode até fazer isso maior. E nós temos guias inteligentes, então não vai estragar tudo se continuarmos a mudar o tamanho disso. Este pode ser um exemplo em que o canto superior direito ver esta área aberta agradável aqui Essa é uma ótima maneira, Teoh Um ótimo lugar para colocar um logotipo ou algum outro ativo lá. É um lugarzinho perfeito. Vamos ver se não podemos falar disso e podemos usar uma seta diferente porque temos um sentimento diferente com esta foto. Então vamos pegar uma flecha mais simples. Eu vou para as nossas flechas e é muito grossa grossa que eu realmente gostei. Então vamos em frente e trazer este aqui em Skopje. Cole. Vamos fazer o tipo de tratamento que temos feito com ele. Poderíamos até criar um estilo de camada e aplicar o mesmo estilo. Mas vamos em frente e fazer isso manualmente. Clique direito. Vamos criar um objetos inteligentes. Se modificarmos, tudo ficará bem. Então aqui está uma era muito mais espessa, que eu acho que simplifica um pouco a flecha. Faça a flecha um pouco menor. Não queremos competir com a manchete, e uma coisa que podemos fazer é que o Arqueiro está meio que se perde. É assim que poderíamos mudar de cor com os ativos que começamos. Uma cor preta, trouxe para Photoshopped, fez uma cor branca, mas agora podemos fazer de qualquer cor. Queremos fazer uma sobreposição de cores. Quero fazer uma cor amarela. E vamos iluminar esse amarelo, apenas um pouco mais de cor amarela brilhante. Atenda a chamada dela. As ações fazem com que tenhamos o posicionamento certo para isso. Então agora nós temos o mesmo tipo de sobreposição, ou eu acho que neste caso seria um modo de mesclagem de tela em algumas dessas cores que nós pintamos . Podemos ter um perfil totalmente novo porque fizemos isso baseado na outra foto, então podemos decidir eliminar um. E eu gosto do roxo do lado. Isso parece muito bom. Vamos criar outro. Faça uma tela. Vamos mantê-lo com cores legais. É como se realmente bom fosse uma cor legal. As fotos vão fazer um pincel. Tenho-o em 2000. É um suave por aí. Vamos clicar do lado de fora, e isso é muito intenso. Mas isso não é problema, porque temos opacidade. Poderíamos reduzir a opacidade nisso um pouco, e isso dá a ele um visual de fotografia realmente moderno. Mas essas cores legais meio que vêm, e você tem um pouco de calor roxo leve lá e você tem algum frescor sobre no canto superior esquerdo. Este tipo de adiciona uma sensação mais moderna a ele. Podemos reduzir. Agora que isso está em um fundo agradável e limpo nós não precisamos ter a sombra cair ser tão intensa é vai reduzir isso Tente usar sombras soltas apenas quando eu realmente preciso são muito soltas, sombras de queda suaves que eu não gosto de usar Sombras de queda muito duras, porque poderia fazê-lo parecer datado muito facilmente. Outra coisa que poderíamos fazer como última coisa é adicionar uma máscara ao porquê e simplesmente pintar. Então parece que o porquê está interagindo com a mulher. Nós vamos descer aqui e adicionar uma máscara de camadas e toda a minha máscara de leering eu vou pintar preto e eu vou apenas remover um pouco da missa em camadas apenas meio que parece que ela está interagindo com o tipo um pouco. E há nossa visão moderna sobre isso que estamos usando tipo de são crus, letras escovadas à mão. Vamos continuar e apenas fazer mais algumas idéias e então podemos realmente ter uma campanha completa desta vez. Nós vamos conseguir, ter muito movimento para isso vai ser para uma marca atlética. Está ficando um pouco maior. Tudo bem, aqui. Nós realmente queremos mostrá-la em Motion Cropper bem ali no centro. Por enquanto, é arrastador todo o caminho por baixo, e não precisamos mais da outra foto. Deseja economizar espaço no tamanho do arquivo? Então eu quero fazer o que eu fiz antes com a cauda do porquê, e eu quero ser capaz de fazê-la realmente interagir com o tipo e até mesmo ter seu pé vindo através do O do não e ter caminho até aqui. Então é uma orientação diferente do tipo. Vamos dimensionar isso para que possa ter uma boa posição para colocar Theo lá fora. O site dela aqui em baixo. E podemos sempre mover nosso apelo à ação em algum lugar bem aqui. Então vamos fazer eles estão em camadas de massa para isso. Nós vamos entrar, ter uma máscara de camadas, dor de preto, vá em frente e pinte isso, e melhor ainda, eu poderia ser capaz de fazer o nosso tornozelo um pouco melhor, então vamos fazer o nosso tornozelo lá em cima. É um pouco mais magro, mais fácil de sobrepor. Ok, então agora ela está interagindo com isso. Podemos ter o porquê interagir também. Então eu já tinha meu Larry Mass do projeto anterior. Nós só vamos completar aquela máscara. Agora parece que ela está entrando e saindo disso, não é? Então vamos adicionar nossa pequena flecha divertida de volta. É bom ou flechas e trazer em que divertido, seta loopy porque este é um tipo muito divertido, loopy de anúncio. O que está acontecendo a energia? E vamos fazer algo ainda mais divertido com isso. Então agora você só tem um bloco, apenas um retângulo. Vamos pegar os pincéis que criamos e trazer isso, e em vez disso temos algumas soluções de pintura. Aqui. Vamos pegar aquele de cima. Com toda a textura agradável que poderíamos nos trazer em rotação. Poderia ser uma espécie de são chamados de faixa de ação, se você vai ter um ir para cima como este, e nós poderíamos fazer isso de uma cor diferente. Então, basta fazer um duplo clique e fazer uma sobreposição de cores e adaptar o mesmo amarelo que temos usado. Tenho um toque de laranja. É sombra de gota fazendo o mesmo tratamento em todas essas camadas. E podemos fazer isso um tipo diferente de cara porque temos esse tipo muito descritivo para a manchete. E para este anúncio, eu meio que quero torná-lo um pouco mais simples. Então vamos mudar o tipo para algo muito, muito simples. Então, apenas fazendo isso, este aqui, eu não quero competir com algumas das coisas dinâmicas que temos acontecendo e vamos continuar a fazer isso mais um passo. Então agora temos o nosso salto e vamos ver se podemos movê-la um pouco para cima e até dar um zoom em tudo um pouquinho. Temos guias inteligentes sobre tudo ou devemos. Então, se aumentarmos , não mudará tanto a resolução. Então, uma coisa que eu quero fazer é algo com este site. Não está saindo o suficiente, só tem um monte de fundo de alto contraste acontecendo, então precisamos ser capazes de fazer isso sair. Uma coisa que poderíamos fazer é pegar o que quer que seja que tinta swooshes. Vamos pegar nosso outro, apenas dar um fundo para descansar em dois para que ele possa aparecer entre esse fundo. Então, apenas trazendo isso todo o caminho para baixo usando todos os ativos que criamos. E vamos fazer um contraste com o amarelo. Então, o que seria tipo de oposto na cor vontade para amarelo? Provavelmente seria uma cor legal, como um azul ou ainda melhor, como um azul claro e suave entre o verde. Isso é apenas prática e prática, tipo de saber quais cores escolher e tipo de estudo da teoria das cores Um pouco sempre ajuda a descobrir isso. Então nós poderíamos até mudar o modo de mesclagem sobre isso. Ou podemos reduzir a capacidade para que a perna dela ainda possa ver a perna saltando. Não quero perder a perna dela. Só precisávamos de uma área de maior contraste para prender nosso logotipo. Isso não seria apenas um tipo assim. Seria um logotipo oficial. Vamos mantê-lo assim por enquanto. Podemos sempre encontrar uma tipografia melhor depois, mas preciso que seja mais grossa do que isso. Só não estou feliz com a saúde nesse IHS. Mas aqui está 20% de desconto. De jeito nenhum. Temos uma coisa que pode realmente fazer este Pappas e talvez algum tratamento para a foto. Então vamos adicionar efeitos semelhantes ao que fizemos antes. Então vamos ver se conseguimos arrastar a mulher para baixo do que tínhamos antes. Tínhamos algumas opções diferentes aqui. Esse tipo de azul. Tínhamos uma espécie de roxo vindo do lado, que parece bom. E esse tipo de rosa vindo quase faz parecer um subconjunto, não é? Eu meio que gosto disso um pouco. Então ele pode manter isso como ele está Esta é a versão final que apenas passar alguns minutos com ele e tipo do que eu fiz antes quando eu estava planejando a aula. Isto é o que eu inventei. Então é como a final parece. Então, até agora temos três grandes campanhas são três grandes imagens já produzidas para a nossa campanha. Fizemos tudo isso bem rápido. Dentro de 45 minutos a uma hora, criamos a exportação de ativos desenhados à mão desses. Nós temos aqueles prontos para usar como P e G com sem cerca de um fundo branco ou qualquer coisa foi capaz de usar esses ativos. E você pode usar as setas, os pincéis, letras manuais. Você pode fazer isso para criar todos os tipos de ativos de marca, não apenas para digital. Isso pode realmente ser para qualquer tipo de marca qualquer coisa que você queira fazer. 33. Digitalização de esboços - configuração: Então vamos fazer algo extra especial hoje. Então já digitalizamos algumas letras que escrevemos. Nós escrevemos à mão que fomos capazes de trazer isso. Vamos dar um passo adiante, e vamos fazer uma ilustração inteira, tudo a partir de um desenho a lápis de mão. Então este é o desenho de lápis de mão que eu criei no outro dia, sentado à mesa com meu filho de cinco anos. Tirei algumas ideias dele, e criamos uma criatura monstro alienígena única. E eu pensei que tinha uma estrutura de linha simples o suficiente que será facilmente capaz de vetor subir isso e criar uma ilustração colorida completa. Então é exatamente isso que vamos fazer hoje. Vamos seguir todo esse processo para que você possa ver como ele é composto de quatro estágios diferentes , claro, o estágio de desenho é o primeiro, e precisamos trazer nossa foto que tomamos o esboço e ser capaz de iluminar isso . Então, temos um esboço agradável e limpo que podemos fazer nossa ferramenta de pino sobre. E, claro, vamos trazer essa foto para o Adobe Illustrator, e vamos ser capazes de rastrear sobre isso, usando as ferramentas de pino e algumas outras ferramentas diferentes. Vamos pensar nessas linhas para torná-la uma ilustração muito forte. E finalmente, seremos capazes de colorir nossa ilustração. Então vamos começar. Te vejo na Adobe Photo Shop. Aqui está o esboço original para esboçar isso com um lápis número dois e tirou uma foto dele perto da minha janela. E isso é apenas em papel de computador padrão, papel de impressora. Nada muito extravagante, nada muito caro, algo que você pode facilmente encontrar em seu escritório em casa. E aqui está. Então isso é obviamente muito escuro, e precisamos ser capazes de iluminar isso um pouco. Vamos fazer o que fizemos com o tipógrafo. Você só ia adicionar um pouco de brilho e ajustar o contraste. Vamos subir para ajustes de imagem, brilho e contraste, e vamos ser capazes de iluminar isso. Fomos todos aqueles pequenos mergulhos e textura para desaparecer. Não queremos que isso atrapalhe, e também vamos aumentar o contraste. Então, na maior parte, mas é um ótimo trabalho para se livrar desse fundo cinza iluminou um pouco . Então, trazemos isto. O Adobe Illustrator terá um belo desenho a lápis limpo para rastrear. Então eu vou dizer isso como um J peg e trazê-lo para o Adobe Illustrator. Eu só estou arrastando isso para o Adobe Illustrator e teria que torná-lo um pouco menor. Eu tenho apenas um documento de 8,5 por 11 polegadas que você poderia fazer em um documento de quatro. Apenas um tipo de documento padrão. Estamos fazendo um RGB. Tudo nesta classe de design digital será sempre um RGB. Então queremos ir em frente e colocá-lo aqui mesmo no centro, e queremos reduzir a opacidade nele. Então eu vou para a minha transparência, só vou reduzir a opacidade para que eu possa ver as linhas, mas isso não vai interferir comigo. Determinar o quê? O que é um pino para alinhar e o que é um esboço original? Então, apenas reduzindo a opacidade. Vou trancar esta camada para não ser movida acidentalmente. Vou criar minha camada em cima. Então aqui nós começamos a mergulhar na ferramenta pino. Espero que vocês já estejam familiarizados com o básico da ferramenta pino. E como isso é mais um curso de nível intermediário, então vamos pegar essa ferramenta de caneta aqui no Adobe Illustrator e vamos usar uma combinação de algumas ferramentas para criar tipo de tornar um pouco mais fácil para nós criar esta linha. desenho pode realmente começar em qualquer lugar. Eu gosto de começar em alguns dos lugares mais difíceis primeiro e depois fazer alguns dos lugares mais simples que eu vou começar tipo de no tipo de aqui nesta área para que eu tipo de entrar e fazer a ferramenta de pino aqui e tipo de completar esta primeira forma primeiro. E então poderíamos trabalhar nos olhos. Então vamos tirar essa ferramenta de caneta, e vamos pegar nosso painel de traçados. Queremos um golpe de tamanho decente, mas não tão grosso que eu não possa ver as nuances do derrame. Vou ver o que um curso de 0,5 pontos espera. Parece que vai começar bem aqui e só tem um clique e segure. Certifique-se de que a sensação está desligada. Deve ser uma boa maneira de começar. Se você pegou minha masterclass de design gráfico, nós fazemos algumas planilhas de rastreamento incríveis onde nós realmente começamos a praticar um monte dessas formas complexas. E não tenha medo de ampliar uma quantidade dramática. Isso é o que você tem que fazer para obter a forma correta da ferramenta de pino. Cavalos poderiam, provavelmente, eu poderia voltar com a ferramenta de curvatura. Se você tem itens perfeitamente redondos que tendem a funcionar um pouco melhor, podemos sempre voltar. Não gosto de ser perfeccionista quando faço a forma básica. Posso sempre voltar e ser perfeccionista um pouco mais tarde. Então, apenas fazendo o esboço básico feito. Olhando para trás no meu ponto de ancoragem original, obter um ponto bom, afiado e ele percebeu que não é perfeito, sabe, tipo de tomar algumas liberdades com como estou desenhando, e não tem que ser exatamente como meu esboço, meus esboços, apenas um exemplo para mim. Não vai ser perfeitamente exacto. Talvez eu queira fazer uma escolha de design diferente quando se trata disso. Assim, eu posso querer fazer muito pequenos pêlos saindo dos genes e talvez mantê-lo simples. Sabe, não tem que ser exatamente o que eu fiz. Essa é a grande coisa sobre isso. Mesmo que você tenha desenhado, isso não precisa ser uma interpretação perfeita. Certifique-se de usar seu comando, Z. Se você fizer asneira e precisar voltar no tempo, só torna a vida muito mais fácil do que ter que entrar no seu painel de histórico. Então o Comando Z volte um passo que eu talvez precise encontrar também, naquela pequena área mais tarde. Mas isso é mais tarde. Certo, vou voltar e completar minha forma. E lá vamos nós. Temos o nosso primeiro esboço feito. Podemos voltar com a nossa ferramenta de seleção direta e ser capaz de manipular alguns deles. Torná-lo um pouco melhor. Às vezes você tem que adicionar ponto de ancoragem para obter a curva que você gosta, ou você pode obter essa cobertura ou ferramenta e ajustar as curvas um pouco melhor com a ferramenta de curvatura. Não tenha medo da ferramenta de curvatura para tipo de obter o certo, e eu amo a cobertura ou ferramenta para adivinhar o que curvas e formas arredondadas realmente arredondadas assim como temos aqui. E às vezes ajuda a adicionar ponto de ancoragem para suavizar, realmente arredondar sobre ele. Agora mesmo. Estou usando a ferramenta de cobertura. Observe como, acrescentou alguns pontos de ancoragem, e suavizou bastante essa área. Deve ser preciso um pouco de pontos de ancoragem para fazer um círculo perfeito. Nós também poderíamos usar a ferramenta construtor de formas e fez um contorno de círculo e juntou as linhas. Isso é outra trapaça que você poderia fazer. E também eu dei a volta nas esquinas em vários desses pequenos picos. Eu não quero que eles sejam muito espetados, então você percebe como eles têm esses pontos realmente afiados. Há uma maneira de fazermos isso. Nós convertemos isso em uma rodada. Junte-se aqui em baixo em seu painel sobre esse tipo de suaviza. Então isso é antes que seja depois. Eu só gosto do olhar suavizado que você poderia tomar que mesmo um passo mais longe obter são ferramenta de seleção direta , e você pode ir em frente e puxar e fazer alguns cantos arredondados. Dessa forma, se você quiser um tipo realmente arredondado de ilustração, modo que ver como esse tipo de arredondado os pontos lá todos para nós apenas fez isso tudo ao mesmo tempo, 34. Digitalização de esboços - traçagem de ferramentas Canetas: Então, há a nossa primeira forma. Então vamos em frente e fazer o nosso olho. Isso vai ser o mais fácil só vai fazer uma ferramenta de lábios e nós estamos praticamente feito com o olho ou pelo menos fora do olho. que temos um menor Soube que temos um menor. E eu também quero criar outro destaque aqui. Forno. Não tínhamos isso na ilustração porque era difícil fazer isso com um lápis. Você só tinha que deixar aquele branco. Então eu vou fazer isso aqui. Isso é um pouco de sombreamento, e nós estaremos adicionando sombras e realces usando cores diferentes um pouco mais tarde na ilustração, eu vou mostrar uma maneira rápida. Então eu vou apenas pressionar p para a ferramenta pino e clicar em cima, e nós vamos apenas fazer tipo de ir para baixo no meio disso porque nós vamos usar a ferramenta de largura para expandir isso. Então eu tenho um simples derrame todo o caminho. Eu vou pegar a ferramenta de largura bem aqui com ferramenta, e eu vou clicar e segurar bem ali no meio. E isso é o quão rápido foi. Era muito mais rápido fazer uma forma de lua ou era mais espesso em um lado e mais fino e o outro usando a ferramenta de caneta. E vamos fazer a mesma coisa com a sobrancelha. Clique de um lado apenas de uma maneira muito rápida. Apenas fazendo bem ali no meio com a ferramenta clicando no meio e apenas expandindo para ver como isso foi fácil. E isso poderia ter certeza que meu boné cercado e pode ter um tipo de cantos redondos acontecendo. Então ele dá umacabamento agradável e arredondado, acabamento agradável e arredondado, então vamos em frente e começar a reverter estes para fora. Então a boca, a boca ia ser muito fácil para o que poderíamos fazer e clicar aqui em cima. Apenas pegue as ferramentas de alfinete. Bom. Recupere o meu derrame. Lá vamos nós. Peito P para alfinete. Eu poderia fazer isso no meio do caminho. Também usou a ferramenta de curvatura aqui para criar a boca e puxá-la para baixo. Mas vamos fazer a ferramenta de alfinete. Gostei um pouco disso. Então e pegue minha ferramenta de seleção direta. Vou clicar duas vezes sobre isso em vez de fazer todos os cantos de uma vez. Eu só vou fazer 11 canto clicando duas vezes e agora tenho acesso a um canto torno dessas duas bordas. E temos a nossa boca assim e vamos continuar a fazer os nossos dentes. E assim são os dentes ou muito perto. Eu só vou manter pressionada opção arrastar e apenas refletir isso vai se opor. Transformar e refletir. Vai ser muito mais fácil. E os dentes serão do mesmo tamanho, que será bom e quer ter certeza de que o ar também arredondado. Então eu vou selecionar as duas ferramentas de seleção direta em torno dos pontos nesses dentes . Eu só dei a volta aos pontos no fundo. Lá vamos nós. Então, agora que a língua volta para trás, vou rastrear isto o melhor que puder. Isso acabará sendo uma forma sólida. Então, agora vou fazer isso. Eu vou fazer o que estou começando a fazer é se você tiver detalhes finos como as calças. Eu rastreei o exterior primeiro e complete a forma para que eu possa ser capaz de transformar isso em uma cor e ter um filme nele muito facilmente. Eles não voltam e apenas fazem linhas individuais para fazer os detalhes, então isso é meio que um pequeno truque. Ele irá ajudá-lo quando começarmos a colorir os olhos ou colorir a ilustração, e você pode fazer isso com logotipos e símbolos e todo tipo de coisas. É por isso que eu queria rever isso. Este pequeno sotaque aqui, isto provavelmente vai ser uma sombra sob o lábio, e este vai ser outro com batota de ferramentas bem ali. Então nós temos o esboço básico acontecendo em uma cantata Gle fora da nossa coisa apenas tipo de ver como ele está indo. Vamos engrossar esses traços muito mais tarde. Então vamos passar para as calças. Eu tenho que fazer as calças. Vamos fazer P de pino e vamos apenas traçar o contorno. O contorno básico das calças. Eu gosto de clicar quando você tem um canto como nós clicar no ápice e, em seguida, ir para baixo e vocês vão todos ser diferentes níveis da ferramenta pin. Você estará em um nível básico o suficiente para usá-lo, mas este é um ótimo projeto de prática. Eu tenho um J peg baixável do esboço que você poderia fazer isso junto comigo, se você quiser . E eu adoraria ver você mudar o monstro mesmo que um pouco, você sabe, com um sorriso diferente ou qualquer coisa diferente. E por isso posso ser um pouco mais liberal. Então, em vez de ter que rastrear tudo isso perfeitamente, eu posso vir aqui porque isso acabará por ser um preenchimento. Alguns voltam e completam a minha forma. Não precisamos estar tão preocupados com o topo da calça, então tudo bem se houver sobreposição que será eliminada em uma data posterior. Então vamos voltar e preencher quaisquer outros itens aqui. Esta pode provavelmente ser uma ferramenta de retângulo arredondado para a correia. Empurre isso para fora e depois vire-o. E estas não têm de ser formas completas. Estes congestionamento são linhas abertas. Certo, podemos decidir adicionar detalhes. Podemos removê-los mais tarde se sentirmos que os detalhes são muito complicados. Então, se temos esse tipo de fundo que queremos fazer, podemos fazer isso. Então agora provavelmente a parte mais difícil é fazer as pernas porque há um monte de pequenos detalhes aqui. Então, mais uma vez, vou tentar traçar a forma geral e depois voltar e fazer estes pequenos detalhes. Isso tornará muito mais fácil colorir os olhos. Então essa será uma forma completa bem aqui. E se precisarmos voltar e fazer um detalhe como as garras, o que é ótimo nesses pés é que eu posso copiar, colar e refletir porque eles vão ficar bem próximos. Eu não tenho que fazer os pés duas vezes se eu não quiser. Isso parece um pouco estranho. Então, voltando aqui, deixe-me ver se consigo contornar tudo. A mesma coisa com as calças. Se eu quisesse voltar e obter a ferramenta de seleção direta arredondar tudo para ligeiramente, isso só parece um pouco melhor. E também precisamos voltar para traços de linha individuais para isso. Ótima. Agora vamos ver se não podemos copiar e colar essa perna e refleti-la, nos poupar um pouco de tempo. Talvez seja preciso abaixar um pouco mais e mudar o pé. Então isso não é problema. Temos a ferramenta de seleção direta e vamos mudar o pé dela aqui. Certo, então aqui está nossa ilustração o que desliga nosso desenho original ou podemos desbloqueá-lo e arrastá-lo. Eu meio que faço uma pequena comparação lado a lado. Então há comparação lado a lado. Acho que não perdemos muito, e acho que estamos bem. Vou colocar este destaque em toda a forma, e vou colocar isto na frente. Então nós queremos colocar isso na frente das calças porque quando isso é um Phil sólido, nós não queremos que essa linha seja mostrada. Então eu poderia ter trazido tudo isso para a frente. E isso vai ajudar quando começarmos a abater, surgir. Então vá em frente e engrossar o acidente vascular cerebral. Então é uma ilustração muito forte e pode ser visto muito bem à distância. Então vamos fazer isso a seguir 35. Digitalização de esboços - coloração: Vamos tirar nosso painel de traço e vamos engrossar nossas linhas aqui e podemos ir em frente e deslizá-lo por agora. E precisamos descobrir qual será a espessura certa e nem tudo terá o mesmo tamanho de traço. Talvez precisemos de entrar e afrouxar um pouco da espessura de alguns deles. Então vamos continuar aqui. Eu não vejo quão grosso, então há uma espessura de cinco pontos, e isso pode ser um pouco grosso demais. Então vamos ver como é o quatro. Quatro pontos e às vezes você não poderia dividir a diferença e fazer 3.5 era meio que encontrar a espessura certa. E com alguns desses que podem precisar afrouxar o tamanho, alguns dos traços de acento podem não precisar ser tão grossos. Estou muito feliz com a espessura e os pequenos detalhes aqui. Agora vai ser hora de abater. Levante esse cara e, claro, podemos ter traços mais grossos. Podemos eliminar algumas dessas complexidades, então se quisermos apenas ter uma linha aqui para indicar as calças, podemos fazer isso. Faça com que a mesma espessura. Tratava-se apenas de simplificar a ilustração. Acha que poderia parecer um pouco melhor? Às vezes, esses detalhes se perdem e quando você diminui o zoom. Então é por isso que eu meio que decidi eliminar isso. E é aí que você pode precisar gostar do detalhe. Perguntava-me se devia ter incluído isso. E eu acho que se eu eliminar a costura nas calças, isso simplificará a ilustração um pouco mais. E isso é especialmente verdadeiro quando se trata de ícone. Design é Às vezes, você sabe, esses pequenos detalhes simplesmente não são feitos para ser, e às vezes isso apenas torna uma ilustração melhor quando é mais simplificado. Então agora estamos prontos para adicionar cor. Então vamos adicionar cor ao nosso pequenino, e vai ser muito fácil porque temos algumas formas completas. Então tudo o que temos que fazer é adicionar um preenchimento em algumas dessas formas. Então eu vou em frente e talvez escolher uma cor verde aqui. Poderia estar trazendo um pouco de amarelo tipo de quente pode fazer algumas cores diferentes sobre o que eu fiz na minha ilustração anterior. Então vamos nos certificar de mover camadas para cima e para baixo, considerando que lá vamos nós Então apenas movendo camadas de cima para baixo e fazendo meu pequeno atalho de teclado , que é comandos esquerda e direita, eu posso facilmente trazer as coisas para cima e para baixo. Eu não tenho que entrar no sistema de camadas e sentar aqui e tentar desmoronar isso e tentar descobrir tudo isso. Vamos fazer isso branco. Isso vai ser fácil. É em que ao contrário dentro da boca, trabalhando eu quero fazer talvez como um tipo cinza de um cinza médio para o interior da boca, talvez até mais leve do que isso. Queremos ter um pouco de cor dentro da boca, talvez um leve tipo de tonalidade rosada. E vamos fazer a língua um pouco mais vibrante de um rosa. Nós não queremos fazer isso para ler, porque isso começa a ficar muito louco. Então vamos nos afastar do vermelho fazer um tipo de rosa para a língua e os dentes poderiam ser brancos também. Está fazendo esses brancos meio que clicam. Estes são todos objetos cheios que vão tornar a vida muito fácil para nós, e eu poderia ajustar essa cor aqui, torná-lo um pouco mais escuro. Agora temos isso como um acidente vascular cerebral realizado. Então vai ser fácil adicionar uma cor genética. Você quer adicionar uma cor jeans bastante realista, então adicionando um pouco de cinza para ele cinza tarde bem ali. E isso é um preenchimento para que possamos até mudar. Posso pegar a amostra do conta-gotas que tem o mesmo Phil que as calças. Mas clique duas vezes na amostra e torná-la um pouco mais escura, um pouco mais clara, apenas para adicionar um pouco de contraste com tons e cores. Nada grande. E essa fivela de cinto, eu acho que você quer chamá-lo de construído, você sabe, que pode ser amarelo. Perfeito. E depois temos os nossos pés. Isso só vai pegar a amostra da ferramenta conta-gotas ou verde e nós temos nossos pés e então a cláusula pode permanecer branca. Eles podem estar fora de branco o que você quiser fazer para isso. Veja como conseguimos colorir esse cara rapidamente. Temos algumas cores planas básicas, os tons individuais. O que vamos fazer agora é subir mais um nível, e vamos adicionar uma sensação de realces e sombras desenhando em alguns realces manualmente e sombras e usando cores mais escuras da cor base. Então vamos ampliar. Vamos criar um senso de destaques. Precisamos determinar que lado vai ser sombras e que lado vai ser destaques, você naturalmente terá a sombra no olho que podemos fazer um tipo de azul claro. Então, há o dele que eu destaque. E agora sabemos que as sombras vão estar à direita e os destaques vão estar à esquerda porque isto é uma espécie de sombra no globo ocular, e então vamos usar isso como nossa determinação. Então, se os destaques vão estar aqui em cima foi vamos tentar um pouco de destaque aqui, então ele vai ser do lado esquerdo, e as sombras vão estar do lado direito. Vamos fazer o mesmo tipo de truques com a ferramenta de largura que fizemos antes para criar uma sombra fácil ou realce neste caso, vamos pegar nossa ferramenta de conta-gotas. É uma amostra exatamente os mesmos preenchimentos verdes tirar o traço, trabalhando com um duplo clique ou Phil verde, e nós vamos apenas iluminá-lo apenas o suficiente para ser uma sombra. Então esse é o original. Esse seria o ponto alto, quero dizer, desculpe-me. Destaque. Clique em. OK, talvez tenhamos que entrar e fazer o nosso derrame com a ferramenta de novo sobre isso. Isso não é grande coisa e tipo de tipo arredondado tipo de bonés lá. Então, assim, fomos capazes de criar um pequeno destaque realmente puro. Então vamos fazer um destaque na esquerda dele. Então aqui está outro pequeno truque com o com ferramentas apenas tipo de desenhar isso. Eu quero ser capaz de abordar alguns desses pequenos picos aqui no destaque. Então apenas desenhou um traço todo o caminho. Esse tipo de seguiu o contorno daquela área. E mais uma vez, eu vou conseguir isso com a ferramenta, e eu vou meio que expandi-la. Talvez algures no meio nos expandimos um pouco e olha como esse destaque é instantâneo e que agradável, muito rápido. Faça a mesma coisa com as calças foram apenas pode desenhar alguns destes p para ferramenta pin. Nós poderíamos até fazer uma pequena ferramenta desenhada à mão lá, e então nós poderíamos obter a ferramenta com para facilmente tipo de expandir essa forma para fora, obter a ferramenta conta-gotas. Ou podemos provar. Vá em frente, clique duas vezes neste relógio. Sempre que gosto de amostras, posso clicar duas vezes, obter a informação, copiar o código hexadecimal, e depois trazê-lo aqui. Assim, eu não tenho que refazer o derrame sobre isso. Se eu fizer a ferramenta conta-gotas, isso vai ser um destaque. Então isso vai ser mais leve. E então agora é Ah, nós queremos fazer talvez um neste pé, também. Então, é quando fica um pouco complicado. Então, eis o que vamos fazer. Vamos pegar a ferramenta de alfinete dela. Vamos rastrear o que achamos que seria uma boa área de destaque. Então, apenas um pouco em torno deste pé, e eu vou ser liberal com isso. Não vou me preocupar tanto, porque isso vai ser cortado. Então é aí que eu quero o destaque. Vamos em frente e fazer com que a cor clique duplo. Torná-lo um pouco mais leve. Essa será a nossa cor de destaque. E como é que vamos cortar isto? Eis o que vamos fazer. Vamos copiar o pé. Vamos copiar a forma que acabamos de criar um colar aqui. estaria usando a ferramenta de construtor de formas para tipo de aparar isso. Então não preciso do derrame nisso. Então eu só vou pegar os dois elementos, fazer a nossa forma, construtor, ferramenta, segurar a opção com sinal de subtração. E eu quero ser capaz de subtrair essa área nessa área. E então ficamos com a parte de destaque. Não precisamos mais disso. Podemos arrastar isto para cima. Deve caber perfeitamente no topo bem ali. Claro, nós fazemos pode precisar tomar a ferramenta pino e fazer alguns pequenos ajustes. Então é assim que você pode em um destaque quando tem todos esses traços acontecendo, também? Este não era um objeto preenchido. Isso é algo que criamos do zero. Mas há um pequeno destaque no pé e também temos este pequeno golpe aqui que seria fácil de colocar em cima porque é um traço separado. Então vamos ver aquele pequenino bem ali. Então vamos enviar isso para trás e em camadas sistema de comando colchete esquerdo. Envie-o todo o caminho de volta para que a pequena linha fique por cima. Então use essa ferramenta de construtor de formas para ajudá-lo para que você não tenha que sentar lá e rastrear todos esses traços. Isso pode ser meio irritante. Então, há o nosso destaque no pé dele, então temos destaques feitos. Vamos fazer algumas sombras. Vamos fazer o sombreamento neste pé usando o mesmo método. Então, sombras vamos ser lançados para o lado direito e vamos em frente e trazê-lo de volta em um sistema de camadas. Então, e coloque esse golpe em cima dele. E, claro, só temos que voltar. E talvez não seja perfeito, mas é assim que estou fazendo esses destaques e sombras, e poderíamos fazer mais uma sombra aqui. Poderíamos até só Duplin. Poderíamos desenhar a sombra descendo. Então, o que? Que nós estamos indo apenas para fazer isso sob sombra de palha tipo de descer a perna da calça, e você poderia aplicar o mesmo logotipo do dedo do pé método, design e símbolos e ícones. É por isso que eu quero rever isso como uma ilustração mais complicada, que você possa estar preparado para fazer , qualquer coisa, realmente. Então está deixando isso um pouco mais escuro. Não preciso do derrame. Enviá-lo para trás no sistema de camadas, fazer fazer fazer fazer para que haja um destaque. Podemos até adicionar um destaque do outro lado, mas acho que ficaremos bem a menos que queiramos duplicar isso. Refletir. Veja como fica deste lado. Pode ser um pouco demais. Você não quer ter muitas sombras e destaques, mas vamos ver o que temos aqui. Vamos provar essa cor. Provavelmente devia ter uma amostra aqui, para não ter de me sentar e eliminar. Elimine isso toda vez. O preto eu provavelmente teria que refazer a ferramenta de largura aqui poderia ser um pouco demais, mas eu acho que ele funciona. Há um pouco de destaque ou sombra. Temos destaques e sombras adicionados, temos uma espécie de dimensão para o nosso pequeno rapaz. Aqui estão um monstrinho quando você quiser ligar para ele. Então lá vamos nós. Temos uma ilustração vetorial total diretamente de um desenho para que você possa ver o desenho original e você pode ver todos os passos que seguimos para torná-lo de após a ilustração, e é assim que o final se parece. Agora você pode exportar isso, torná-lo ícone. Você pode fazer uma pequena ilustração para algo maior. É tudo vetor levantado, espero que tenha se divertido. Este foi um fundo totalmente um, mas você pode aplicar um monte de habilidades que você aprendeu aqui para vetor subir qualquer esboço desenhado à mão , logotipo, símbolos, ícones, ilustrações e muito mais. 36. BÔNUS - ferramenta de warp, ferramenta de warp,: por isso tem um pouco de sermão bônus. Eu queria falar sobre a ferramenta de marionete, que é nova na versão 2019 do Adobe Illustrator. Portanto, se você tiver uma versão mais antiga, você não terá acesso a esta ferramenta. Mas eu definitivamente queria trazê-lo para aqueles que têm acesso a esta ferramenta. Então este é o que criamos na classe. E esta é a versão que eu criei antes de filmar a aula quando eu estava criando idéias e conceitos, e o que a ferramenta de marionetes faz é criar certos pontos que você poderia manipular. E você pode animar isso um pouco para obter posições diferentes. Para certas partes do seu personagem. Então aqui está como a ferramenta de marionete se parece. Está bem aqui no fundo. Pode aceder a isso se não o vir na barra de ferramentas. Ele pode clicar aqui e ver se o encontra. Vai parecer um pequeno alfinete, então vamos selecionar nosso objeto. Teríamos que agrupar esse cara. Apenas certifique-se que ele está agrupado e pegue nossa ferramenta de dobra de marionetes, e isso vai criar vários pontos aqui para que possamos mover esses pontos e manipular esses pontos para meio que mudar e mover seu corpo um pouco. Então, talvez pudéssemos descer a antena Hiss. Podemos colocar um ponto aqui para dobrá-lo assim. Podíamos ver como ele pode mudar as características dele um pouco . Então vamos pegar essa perna. Parece que ele está pulando ou pulando. Ele não tinha braços porque seria mais fácil animar com os braços. Mas todos os tipos de coisas que podemos fazer com isso eu só queria mostrar e demonstrar o que você poderia fazer com essa ferramenta de dobra de marionetes. E se você quiser excluir um determinado ponto, realce-o e, em seguida, exclua-o. Se pretender adicionar um ponto, clique em. Funciona muito como o Grady, It Mesh Tool e a ferramenta de ingrediente de forma livre 37. Projeto de design de ícones - Grades e configuração: Então agora é hora de criar um conjunto completo coeso ícone Set. Vamos criar um conjunto de ícones que pertença juntos... se criarmos esse conjunto que você vê aqui... vamos fazer tudo isso no Adobe Illustrator. Então vamos falar sobre grades um pouco. Quando se trata de design de ícones e do tipo de conjunto de ícones que estamos criando, esses ícones não serão usados na APP Store. Nós também vamos fazer um ícone de aplicativo um pouco mais tarde para a APP Store. Mas esses ícones de ar que poderia ser usado para sites para aplicações digitais, qualquer coisa que requer um pequeno, um 16 por 16 pixel ícone todo o caminho até 128 por 128 ícone tamanho. Então, esses serão seus ícones que você usa para sua interface de usuário em todos os tipos de aplicativos digitais, sites, dispositivos móveis, dispositivos móveis, APS e muito mais. Então precisamos ter certeza de que os ícones serão capazes de ser pequenos o suficiente para trabalhar em um tamanho tão pequeno. Durante todo esse processo, vamos diminuir o zoom, certificando de que podemos entender o que o ícone está dizendo. e eles precisam ser super simples porque ícones vêm e um monte de tamanhos diferentes que eles poderiam. Eles precisam estar em 16 por 16 pixels, o que é muito, muito pequeno, e eles precisam ser capazes de ficar ótimos também nos grandes 256 por 256 pixels. Então eles precisam existir em todos esses tamanhos e espaços diferentes. Portanto, é melhor ter o logotipo mais simplificado. É possível, e um que também é muito flexível. E gosto de usar grades quando faço meus conjuntos de ícones. E isso porque ele te dá um guia para ser capaz de adaptar este ícone e certificar-se de que ele tem a borda agradável em torno dele, que cada ícone tem o mesmo espaçamento, e ele apenas lhe dá uma boa base para basear seu design. Além disso, ele também ajuda você quando você está fazendo para você formas métricas como um guia e linhas diferentes para tipo de ajudar a guiá-lo para criar muitas dessas formas e ícones diferentes. Então esta é uma grade, e é assim que estou criando a grade. É baseado na proporção de Fibonacci, e o que você faz é criar um tipo de quadrado e então você cria um círculo dentro desse quadrado e, em seguida, dentro dos limites desse círculo, você cria outro quadrado e, em seguida, você coloca um círculo dentro disso. E você também tem esses três ou quatro divi Ah, linhas diagonais e horizontais e verticais que correm através dele também. Isso também ajuda a guiá-lo. Então você tem algumas coisas diferentes é uma espécie de rápida mostrando como eu criei isso muito rapidamente para você ter um bom modelo onde tudo isso já foi feito para você, então você não precisa se preocupar com isso. Mas eu queria mostrar como isso foi construído para que você pudesse entender como a grade foi montada. Então, antes de começarmos, eu queria mostrar a vocês esse recurso incrível para download. É um modelo de grade para você, onde eu criei essa grade detalhada. E eu tenho isso espaçado na grade para você e eu tenho este espaçado lá fora vai haver 16 ícones diferentes, então você tem 16 caixas diferentes. Mas este é um ótimo modelo e ótimo guia para você trabalhar. Então você não sente que você está apenas projetando um ícone e um grande documento aberto que você tem um tamanho agradável e você sabe as bordas do ícone e tipo de algumas de suas restrições com o ícone com o conjunto que eu criei antes, quando eu estava chegando com conceitos para o curso, que há um tema para este ícones que estamos criando e que o tema será um traço semelhante . Espere. Portanto, há peso semelhante ao longo de todos esses ícones diferentes. Eles não diferem muito. São todas fontes de três pontos. Espere, Major. Eram todos iguais. E então há esse tema consistente que percorre o ícone. Então, quando eles são usados juntos como um conjunto ou quando eles são usados em um aplicativo ou um aplicativo móvel , você será capaz de ver uma marca consistente e um tema consistente ao longo do tempo. É muito importante pensar nisso quando você está fazendo seu próprio conjunto único de ícones. Então, se você quiser trabalhar comigo através desses ícones básicos, vamos passar por um monte de ferramentas e truques para tentar fazer esses ícones rapidamente e especialmente fazendo algum trabalho em grade. Então vamos fazer algumas coisas muito rápidas para que nossos programas ilustradores sejam configurados para que possamos tornar isso o mais fácil possível fácil de trabalhar através desse processo. Então a primeira coisa que precisamos fazer é ir para ilustrador boa preferência e ir para geral, e vamos garantir que nossa escala, cantos e escala, traços e efeito estão marcados. Isso é muito importante quando dimensionamos esses ícones cada vez maiores, que não temos nenhuma mudança em nosso traçado. Então, nosso derrame permanecerá consistente, não importa o tamanho. Então é muito importante fazer isso. Outra coisa que queremos ter feito para garantir que nossas grades sejam mostradas. Há um atalho de teclado. Vou usar muito nesta seção do curso. É a citação de comando dele, e você pode alternar frequentemente em grades. Se você quiser fazer isso manualmente, basta ir para ver e descer para mostrar a grade, e ele vai ligar a grade para você. E se alguma vez quiseste editar a tua grelha para que pareça muito com a minha, devia fazê-lo. Todo o modelo deve salvar automaticamente a grade para você, assim como este. Mas se não, mostrarei como preparei isso. Nós vamos descer duas unidades e grade, e é assim que você pode mudar tipo de cor e tudo da sua grade. Aqui estão suas opções de grade. Bem aqui em baixo. Eu tenho isso. Teoh 32 pixels para cada caixa. Esse é o tipo de ícone que vamos fazer. Isso vai ser o que é chamado nosso tamanho base. Então os ícones precisam vir em todos os sabores de tamanho diferentes. Eu acho que você pode chamá-lo, e eu gosto de pegar o tamanho baseado, que é tudo no lado menor, modo que sempre pode escalar facilmente. Então nossa base tamanhos 32 pixels por 32 pixels. Então esse é o tamanho que cada uma dessas grades é grande. 32 pixels e, em seguida, dentro você tem subdivisões e tem 34 subdivisões que parecem funcionar o melhor quando se trata de ter um monte de pequenas opções quando ele encaixou uma grade. Este é o tipo de opções que eu tenho em minhas grades e unidades. Você pode mudar a cor se você se o cinza for um pouco forte demais e estiver afetando sua capacidade de ver seu design, você pode mudar a cor. E por último, vamos falar sobre o modelo. Então eu tenho algumas camadas aqui tendo um zoom out. Então você meio que vê tudo isso juntos. E então temos um lugar para as grades que ela pode ligar e desligar a qualquer momento. Então você sempre pode ter certeza que você, hum você pode realmente ver seus ícones sem qualquer um desses gritting. Às vezes, realmente ajuda a desativar isso para ver como seus ícones estão realmente olhando e ter algum ícone de exemplo. Então este é o exemplo de ícones. Vou deixar isto aqui para que possas ver como construí tudo isto. Então, quando você se move por toda a classe e vai, como ela fez isso de novo? Você pode voltar e olhar minhas tacadas cruas, e é aqui que seus ícones vão parar. Então esta é a camada que você vai ter. Gosto de manter as minhas grades trancadas para não as mover acidentalmente. Então, tem o meu impasse de ícone. E é aqui que você vai viver pela próxima hora. 38. Projeto de design de ícones - Introdução: Então nós estamos indo para baixo é uma pequena lista de verificação rápida de tudo que precisamos ter configurado. Sei que é um pouco tedioso, mas vai ficar muito divertido. Assim que tivermos tudo pronto. Mais uma coisa que queremos fazer, vamos subir para ver. E por agora vamos ter certeza. Bem, guias inteligentes são bons de ter em que isso tem que ser um guia útil. Mas, além de que snap para grade é realmente bom. Isso pode ajudar a encaixar nossos pequenos pontos e são traçados e caneta para os pontos da grade. Então vai nos ajudar a criar um bom tipo geométrico de ícones onde tudo se encaixa. Então nós vamos ser criança snap para grade off, ligar e desligar. Não vamos tê-lo ligado o tempo todo porque pode ser alguns ajustes que precisamos fazer onde precisamos desligá-lo. Mas, por enquanto, vamos certificar-nos de que o encaixe na grelha está ligado, e por isso estamos prontos para fazer o nosso primeiro ícone. Então nós vamos para a nossa primeira pequena área aqui e verificar. Então, já que temos encaixe na grade e deixe-me ir em frente e ter um bom derrame indo para que possamos ter certeza de que tudo é consistente. Então, desde que eu surtei, concordei, você pode ver como tudo está indo bem, e isso faz todo esse processo. Eu posso clicar nisso muito rapidamente, e eu não tenho que sentar lá e ter certeza que eu faço isso perfeitamente. O computador meio que faz isso por mim. Primeiro ícone vai ser este pequeno envelope ícones foram para começar muito fácil e lentamente ficar um pouco mais difícil. Vou mudar isto de três para 1,5 pontos. Espere. Acho que vai ficar um pouco melhor depois de praticar um pouco. E por agora eu só vou ter certeza que minhas tampas redondas estão em e minha junção redonda é sobre apenas para dar às coisas um boné mais suave em torno dele, tampa em uma borda lisa. Então, está estalado. Um ótimo. Isto vai ser muito fácil. Então vou pegar minha ferramenta de retângulo. Eu poderia até mesmo para a caixa de palha bem aqui sobre a grade, obter minha ferramenta pino p para Penn e tem desenhar um triângulo, e então eu posso até mesmo apenas colapsar isso. E então o que é ótimo sobre a grade é que ele nos dá um guia do espaçamento em torno da parte superior da parte inferior para que eu possa ajustar isso e ter certeza que eu tenho a mesma quantidade de espaçamento entre a superior e a parte inferior, e a grade é realmente ótima para Isso. Então você talvez esteja pensando onde você não está seguindo essas linhas diagonais perfeitamente, tudo bem. Não é para ser o único lugar onde você pode colocar traços. É apenas um guia para um tipo de espaçamento. Não me sinta como oh, eu só tenho que usar esses ângulos em particular. Não em tudo. Ele está lá para você ajudar a garantir que você tem um espaçamento semelhante. Então 12345678 e, em seguida, oito e, em seguida, temos algum espaçamento semelhante nos lados. E assim, assim, vou alternar minha camada de grade. Temos um pequeno ícone, super simples, e eu gosto do tipo das bordas arredondadas para ele nos traços mais grossos. Então, quando eu diminuir o zoom, eu ainda posso realmente ver esse ícone porque ele vai existir em um ambiente muito pequeno , então essa foi uma boa prática. Vamos passar para algo um pouco mais desafiador. Então nós temos este pequeno lápis que nós queremos fazer a seguir, então isso vai ser simples o suficiente. E vamos primeiro fazê-lo na vertical. Eu gosto de fazer as coisas verticais e, em seguida, transformá-los em seu lado 45 graus, então precisa obter a espessura certa aqui. Então, três caixas de cada lado. Nós também queremos fazer o ponto do lápis, e queremos desenhar um. Também met get são ferramenta de seleção direta e certifique-se de que é uniforme. É por isso que temos a rede para nos ajudar a descobrir isso. Então P de Pin, eu vou ir em frente e desenhar um pouco de ah, e isso pode ser um pouco estilizado. Então, em vez de apenas completar a forma, eu vou deixar um pouco de uma área em branco para tipo de estilizar a caneta para que ela não pareça apenas um monte de formas geométricas. Mas juntos há um pouco de estilo lá. Vamos apenas desenhar um pouco da nossa Inc ali e fazer isso um preenchimento, e há ou lápis O que conduzimos. Vamos dimensionar isto. Talvez façamos um pequeno entalhe, um pouco mais magro movendo-o para baixo duas vezes. Nós não queremos engordar, então eu acho que isso parece muito bom, como é que tem um pequeno truque. Se você quiser transformar as coisas perfeitamente em certos ângulos, como ângulos de 45 graus, basta selecionar seu objeto. Vamos em frente e agrupá-lo juntos e em vez de apenas gastá-lo e tentar adivinhar ou subir para transformar e tentar girá-lo dessa forma, você poderia manter pressionado o botão Shift quando ele tinha esta pequena ferramenta de virar, e ele vai clique automaticamente para ângulos de 45 graus, o que é super duper útil. Então, apenas mantendo pressionado o botão de mudança e mudando isso, temos nosso lápis perfeito e pronto para ir quando diminuirmos o zoom. Isso parece muito bom. Vamos alternar os ícones de oferta para dar uma olhada nele e ativá-lo novamente. Então vamos fazer nosso próximo ícone. Isto vai ser divertido. Vamos fazer o mesmo turno e girar o truque. Temos apenas uma ferramenta de elipse simples e foi levar nossas ferramentas de conta-gotas olho para garantir que temos traços consistentes. Só quero ter certeza de que todos os nossos traços são 1,5. Às vezes, quando você faz algo menor, muda o derrame. Mas certifique-se de que tudo fique consistente com o derrame. E quer saber? Talvez eu seja capaz de fazer esse derrame um pouco menor, e isso é apenas algo que você vai ter que experimentar. Então, em vez de um ponto por talvez 1,2 thes ar, apenas pequenas mudanças. Mas eu não quero isso tão grosso que você não pode ver os detalhes. Talvez precisemos fazer o círculo um pouco menor. Então isso não é grande coisa. Está mantendo a tecla Shift pressionada e meio que clica no lugar de dois pontos. E então eu poderia colocar meus raios de sol e aqui está o que eu vou fazer. Eu vou fazer isso, filho top Sunray primeiro e depois apenas mantenha pressionada a opção e arraste-a. Então, apenas duplicando, trazê-lo aqui e aqui está o que eu vou fazer. Talvez eu precise clicar nisso mais uma vez, então agora tem três espaços ao redor. Clique neste Ford uma vez, e eu vou fazer um pequeno truque aqui. O que eu vou fazer é copiar, e você pode fazer a cópia do atalho do teclado, e nós vamos colar no lugar. Vamos subir aqui e colar no lugar. O que se passa? Para memorizar o atalho, vamos colar isto no lugar, e depois vamos aguentar. Então fez uma cópia. Mantenha o turno pressionado. E assim como aquele boom. Temos nossas pequenas cópias. Então vamos continuar a fazer isso. Mantenha pressionada a tecla Shift, clique nela e mais uma vez. Olhe para ele. E temos o ícone do nosso filho assim. Então vamos falar um pouco fora para ter certeza que parece bom à distância. E mais uma vez, teremos que ter certeza que os traços são consistentes. Podemos sempre pegar a ferramenta conta-gotas, garantir que todos se adaptem ao mesmo derrame. Aí está o ícone do nosso filho. Vamos passar para um ícone de imagem. Mas este será ainda mais fácil porque poderíamos destruir todo o tipo de centrado na rede. Não consigo imaginar fazer isso sem grades. Só tornaria isso muito mais árduo. Vamos desenhar nossas montanhas e dizer que clicar direito no lugar que a montanha não tem que ser exatamente o que eu tinha antes. E vamos pegar nossa ferramenta de lábios e desenhar, filho. Eu podia ver o quão rápido poderia montar uma Nikon. Há um pequeno ícone de imagem. Poderíamos até tornar isso um pouco mais amplo porque queríamos ir um pouco para o limite porque este é um imóvel muito pequeno. Então queremos ser capazes de maximizar seu uso, então apenas certificando-se de que o usamos. Nós não queremos empurrá-lo até o limite porque nós temos uma boa margem. Queremos evitar colocar muitas coisas na margem. Então eu só quero fazer o mais perto que puder, mas ainda ter espaço para respirar meu ícone. E talvez eu precise colocar isso de volta em um círculo perfeito. Aí está o ícone dela agora vamos fazer um relógio, então vamos fazer um círculo simples com um piscar de olhos. Legal bem no lugar para nós. E isso vai ser fácil porque nós vamos apenas pegar a ferramenta de pino e fazer um tempo simples para o relógio . Então um vai ser mais curto que o outro e podemos tornar isso dramático. Então vamos fazer mais um mais alto. Então eu acho que a coisa mais difícil sobre design de ícones não é a criação deles, mas a idéia por trás deles onde eles têm um olhar como, Como você vai simplificar coisas complexas como amizade, comunicação ou bases de dados ? Como você vai pegar pensamento abstrato e fazer disso uma Nikon? Essa é a parte mais difícil do design de ícones. Ok, então eu tenho um relógio. Como posso simplificar esse relógio, tanto quanto possível, para que eu possa evitar ter muitos detalhes e linhas aqui para estes este conjunto de ícones em particular. Então esse é o maior desafio. E eu sei que vamos chegar a isso com alguns desses ícones mais complexos desse tipo de ícone de microfone. Você sabe, muitas vezes todas as fontes de fotos do Google e eu vou olhar para microfones e eu vou OK, quais são os elementos mais simples deste microfone? Sabe, temos a base redonda. Temos o suporte, talvez um botão liga/desliga. Todos os outros detalhes podem tirar e derreter. Nós estamos realmente tentando obter o elemento mais básico e forma básica, e às vezes encontrar uma foto desse objeto realmente ajuda ou fazer o estudo de outros conjuntos de ícones que têm assuntos semelhantes neles. Vamos fazer esta estrela e lua a seguir. 39. Projeto de design de ícones - 3: Então temos uma estrela e um ícone da lua. Então parece que com isso, eu poderia ser capaz de fazer um pouco de fraude. Vai escolher um ponto aqui, fazer uma forma crescente e talvez não ter que ir até o limite. Mas eu poderia pegar minha ferramenta de seleção direta e consertar isso. Isso vai quebrar os lugares bem, o canto arredondado. Então isso vai encaixar no lugar. Posso pegar minha ferramenta de largura aqui e clicar e arrastar para criar uma forma de lua. E o que eu preciso fazer é, já que isso ainda é um golpe, eu quero fazer um caminho delineado assim. Então eu vou precisar ir para o caminho. Vou precisar delinear meu derrame para que eu possa pegar meu conta-gotas e adaptar o mesmo. Ou, na verdade, eu sei o que é. É 1,2 e, em seguida, tirar qualquer tipo de preenchimento. Então essa era uma maneira rápida de fazer um esboço. Eu poderia fazer isso um pouco menor agora que eu tenho que delinear e, em seguida, estrelas ar fácil porque temos uma ferramenta estrela, modo que só vai chicotear até algumas estrelas fazendo vários tamanhos. Podemos fazer isso um preenchimento porque o golpe vai ser muito grosso para ver os detalhes do acidente vascular cerebral, então pode precisar fazer isso um pouco maior. Então vamos passar para o microfone. Então, isso foi quando eu falei antes sobre como nós temos que simplificar objetos complexos e torná-los simples possível usando traços simples. Nós não queremos ter um monte de detalhes no microfone, mas com apenas um par de traços em uma linha, fomos capazes de comunicar eficazmente que isso é um microfone. Então, desde que você consiga entender o ícone, essa é a parte mais importante de tudo isso. Então vamos ver se eu posso fazer um retângulo arredondado e ir em frente e colocar a nossa pílula em forma quando eu conheci. Faça a espessura certa e nós também vamos trazê-lo para o topo. Tire vantagem de uma imobiliária aqui, porque vamos precisar colocar nossa posição. Então vamos ver como, quanto tempo precisamos para depor. Vamos ver se isso vai funcionar. Certifique-se em torno dele. As tampas ainda estão ligadas. Estou fazendo meus atalhos de teclado. Então o que eu estou fazendo é selecionando V, que é sua ferramenta de movimento meio que não selecionando e então indo e selecionando minha caneta para que eu não tenha que continuar indo lá e selecionando-o. E um são suas ferramentas de seleção direta. Isto é bom ter esses atalhos de teclado à mão. Então vamos criar algum tipo de rodada e queremos fazer isso parecer três d de uma forma ou não. Três D, mas pelo menos eu gosto em torno dele para que pudéssemos pegar a ferramenta do pino e desenhar uma forma aqui. Mas então parece mais como uma pílula em um pouco menos como um microfone para que pudéssemos pegar nossa ferramenta de curvatura clique bem aqui no meio, clique para baixo para fazer isso arredondado, e nós poderíamos mover isso para cima e então a única coisa que resta para fazer um pequeno botão liga/desliga. Então nós vamos apenas gostar de uma pequena linha que atravessa talvez nem mesmo torná-la tão grossa. E o que poderíamos fazer com isso não é tudo tem que ser esta forma arredondada. O que poderíamos fazer é pegar uma ferramenta de retângulo e desenhar sobre duas caixas e apenas torná-la um preenchimento para que ela não tenha as bordas arredondadas. Este tipo de dá um pouco mais de contraste. Portanto, há o nosso pequeno ícone de microfone rápido, e se alguma vez quisermos fazer isso menor, podemos clicar nele para baixo um. E às vezes você tem que clicar para baixo para ter certeza que ele permanece, mesmo apenas comparando a espessura do curso que eu tinha antes. Este é o ícone anterior. É um pouco mais gordo, não é? Então vamos ver se nós não podemos clicar isso uma vez e voltar para talvez um pouco de uma apresentação mais gorda , e isso pode precisar ser empurrado um pouco para cima. Então, isso tem dois pontos. Veja se podemos contornar isso um pouco e voilá! Temos um ícone muito bom lá. Bom para desligar grades e tipo de ver como o nosso conjunto de ícones está se parecendo. Então, há o que temos. Está tudo bem na grelha. Às vezes, quando vejo coisas à distância, vejo alguns erros para que a lua. Talvez eu precise movê-lo um pouco mais para o centro, e é isso. Então vamos continuar. Nós temos uma bateria em seguida, então a bateria e nós vamos ficar lentamente um pouco mais complexos com o tipo de objetos que estavam fazendo isso pode aprender a simplificar formas complexas. E acho que a maior coisa é garantir que não tornemos as coisas excessivamente dramáticas. Portanto, não queremos criar uma bateria que seja um pouco grossa porque perde a bateria. É ótimo olhar para fotos de bateria. Eles são mais magros. Você sabe, isso é ótimo tipo de manter isso em mente, enquanto fazemos isso juntos, vamos arredondar os cantos sobre isso. E as baterias sempre têm aquela coisinha no final de uma ponta. Esse tipo de tinha indica que é uma bateria, então poderíamos fazer isso com um preenchimento. Não precisamos fazer um traço para isso, então vamos fazer um retângulo arredondado. Você não precisa usar traçados para cada objeto. Às vezes você pode se safar apenas usando um preenchimento. Nós vamos fazer isso. Neste caso, queremos apenas indicar um pouco da bateria. Então este é um daqueles casos em que você precisa pode precisar alternar. Ajustar à grade não é. Tudo vai se conformar perfeitamente com essa grade que é um pouco grossa demais para a bateria. Então o que podemos fazer é desligar rapidamente, encaixar na grade ou você pode usar o atalho de teclado. Então apenas desligá-lo para que ele vai ficar me permite talvez fazer um ponto de meio caminho personalizado. Portanto, não é muito grosso e não é muito fino, e isso pode ativá-lo rapidamente. Então, não sinta que você tem que ter que encaixar na grade e tudo tem que estar em conformidade com a grade . Por favor, sinta-se livre. Nunca se sinta como se estivesse encaixotado naquela grade e se encaixasse nela o tempo todo. A mesma coisa estava acontecendo. Traga um no fundo e queremos ir em frente e adicionar um pouco de suco. Você sabe como você meio que vê seu iPhone ou algo carregando. E é meio que 1/3 do caminho cobrado. Vais ter este sumo aqui. Então o que vamos fazer aqui é palhar um simples. Phil, faça disso um Phil e consiga nossa cobertura ou ferramenta. Estamos indo para dois pontos diferentes para fazer parecer uma onda Nós vamos clicar para baixo em um ponto e para cima no outro. Vai criar a nossa onda. Então é o nosso suco. Eu acho que você poderia chamá-lo, e então nós precisamos de mais um elemento. Precisamos de algum tipo de relâmpago para indicar que este é um item de carga da bateria . É apenas aquele ícone extra que ajuda a descrever o que isso é que isso pode realmente ser qualquer coisa neste momento, meio que parece uma bateria. Mas eu acho que o relâmpago vai realmente, realmente ajudar a comunicar isso eficazmente para que pudéssemos preencher isso. Vamos fazer um relâmpago, então vamos clicar para um lado, clicar sobre, como fazer um pouco do mar. Bom atrás. Talvez precise fazer este clique bem longo aqui. Podemos sempre mudar isto depois de o fazermos e ali está o nosso raio. Pegue nossa ferramenta de seleção direta. Podemos mudar este curso de encaixar na grelha, por isso vai dar-nos muitas opções aqui. Vamos fazer isso ir direito e estalar desta maneira. Faça com que se encaixe nos mesmos ângulos. Isso pode levar um pouco de trabalho para cortar um macarrão com isso. E isso também é quando talvez desligando grãos de encaixe. Não é uma péssima ideia se você quiser ajustar nossa seleção de raios. Ok, isso é bom o suficiente por enquanto. É bom e grosso. As pessoas vão poder ver isso. Então eu vou voltar a ligar snap para a grade. Ali está o nosso relâmpago. Eu posso mesmo se eu quiser torná-lo perfeitamente compatível com o que eu fiz antes. Eu posso apenas refleti-lo. Será bom se eu suavizasse as bordas porque tudo tem uma espécie de borda lisa para ele. Todas estas arestas são suavizadas, por isso não queremos torná-lo 22 arredondado porque queremos ter algum contraste. Mas vamos apenas em torno destes sempre tão ligeiramente, apenas uma pequena curva nessas curvas. Ei, aí está a nossa bateria, e esta vai ser super simples. Uma vez que já fizemos alguns ícones complexos, aqui vai ser onde vamos começar a usar a grade um pouco. Então vamos clicar aqui embaixo, e vamos usar nossa grade aqui. Não vamos até lá, porque seria um pouco dramático demais. Então, vamos apenas clicar alguns pontos acima, talvez bem aqui. Aqui é onde estamos usando a proporção Are Fibonacci para tipo de determinar onde estamos clicando aqui e obter o nosso 1.2 acidente vascular cerebral ou qualquer traço que você deseja usar? Você não precisa usar o que eu estou usando, e então nós queremos ter certeza de que temos nossas tampas arredondadas. E isso é que podemos fazer a seleção direta. Se quisermos que seja uma flecha mais dramática. Podemos tê-lo em conformidade assim. Ou podemos fazer um preenchimento. Muitas opções aqui para setas. 40. Projeto de design de ícones - 4: e eu acho que eu quero fazer a etiqueta um pouco mais apertada em cima, e isso não é grande coisa. Clique sobre duas vezes, clique sobre duas vezes seu tipo de torná-lo mais conciso. Parece um pouco gordo para mim, e tudo bem, porque podemos trazê-lo por um entalhe e trazê-lo por um entalhe. M traz isso para cima. Então nós tínhamos um pouco de margem e espaçamento aqui, todo o caminho ao redor do ícone. Só me certificando de que meu espaçamento está em todo o lado. Aí está a nossa pequena etiqueta. Vamos fazer um pequeno círculo de Phil bem ali no meio, e também queremos desenhar esta pequena etiqueta de círculo. Então, vamos fazer isso. Isso pode ser quando tirarmos a grade, porque pode não fazer um bom círculo para nós na grade. Às vezes é um pouco rigoroso com isso. Este pode ser um daqueles casos raros em que você usa um traço ligeiramente menos grosso. Então, em vez do 1.5, talvez possamos escapar fazendo um 0,75 porque essa pequena corda não é suposto ser super grossa. Eu acho que ele vai ultrapassar a etiqueta de nós fizemos a mesma espessura estava recebendo uma ferramenta de seleção direta em ajustar isso. Certo, agora precisamos de um cifrão. Nós obtemos nossa ferramenta de texto e fazemos nosso cifrão ou qualquer moeda que você deseja usar para isso. E aí está o nosso pequeno cifrão, e eu só uso que tipo de letra? miríade profissional da Didi. Mas eu tenho um golpe grosso aqui, então está dando este bom, consistente, hum, hum, cantos arredondados sobre ele. Essa é uma miríade de profissionais. Vamos ter certeza que isso é bom e grosso para que possamos ver o cifrão. Quando diminuirmos o zoom. Vai ser uma etiqueta de venda para provavelmente loja de comércio. Queremos garantir que as pessoas vejam bem, e tem o mesmo espaçamento aqui. Tem três espaçamentos aqui e tem alguns três espaçamentos lá, também. E com esta paz geral, vamos ver se consigo derrubar mais um tamanho. Faça isso, temos margem suficiente por lá, porque se você fizer em ícones como este quando você salvá-lo , ele não vai ter um pouco dessa margem agradável sobrando. Quando você integrá-lo em um site ou você eu ambiente que você quer construir em apenas um pouquinho de margem em torno de cada ícone. Ok, vamos seguir em frente. Nós temos um símbolo de lugar agora, então isso é realmente básico. Tudo se encaixa tão bem que você poderia fazer este ícone em um minuto. Mas a parte mais difícil, é descobrir como fazer a idéia do ícone de jogo, as idéias da parte difícil sobre isso. Então, para isso, estes são os elementos mais básicos de um botão play. Nós temos o círculo, e nós temos o triângulo real que indica que é um botão play. Então nós pegamos alguns botões de jogo complicados e apenas fez dele um simples é possível, removendo tudo e apenas focando no que Onley coisas que ajudam a comunicar o que é o ícone. E esse é o grande truque. Vamos encolher isso um pouco para um clipe de papel isso vai ser um pouco mais complicado. E este pode ser um caso em que tiramos o snap para a grade. Então isso é Ah, vamos começar meio que no fundo. Podemos sempre torná-lo menor depois. O que eu vou fazer é eu vou começar tipo de neste ponto bem aqui do clipe para talvez bem aqui, e eu também quero ter certeza que tem a espessura certa. Então vamos ver. Não queremos ser muito grossos, então talvez por aqui. E então o para a primeira rodada indo ao redor do lado de fora, eu acho que snap degrada vai ser muito bom. Mas quando circularmos, estaremos circulando por aqui e voltando para dentro e cortando continuando. Se eu fizer isso com snap to grid, você começa a ver um tipo de estranho estranho acontecendo porque não vai voltar ao ponto original. Está indo para dentro, então vamos desligar, encaixar na grade por um pouco e ver o que podemos fazer. Ouvir clicar de volta no meu ponto de ancoragem original. Vamos ver se eu não consigo clicar no mesmo ponto é o outro lado e eu poderia precisar me dar ainda mais espaço ali, e nós poderíamos voltar e mudá-lo mais tarde se não for perfeito. Então eu acho que vamos enrolar mais uma vez se você olhar para uma foto de clipe de papel e isso é exatamente o que eu fiz foi rastrear uma foto de clipe de papel, então esta é a foto do clipe de papel. Costumava ter uma ideia de como isto funciona. Eu não inventei isso magicamente. Tive que olhar para um, estudar um e ir embora. Quantas vezes ele se envolve? Então vamos mudar ou acariciar com. Certifique-se de que é o curso com que precisamos, e podemos voltar com a ferramenta de curvatura e realmente arredondar esses cantos um pouco melhor. Sim, não se preocupe com isso. Isso seria difícil de fazer com o rigor do encaixe para grade, então só mudar minhas alças, certeza que tem um bom ponto, então às vezes tem que trazer isso para dentro. Eles iam ficar um pouco melhores. Não é perfeito, mas eu acho que para este exemplo, vamos com ele e vamos dizer que eu quero. Vamos ter certeza que isso está alinhado no centro, e talvez eu precise trazer um desses clipes para baixo. Então vamos derrubar isso. Posso voltar a ligar a grelha, ou podes usar o atalho de teclado, seja qual for o teu sabor. E vamos dizer quando eu meio que ângulo, porque agora ele olha para cima e para baixo. Vamos falar disso tudo. Isso parece OK, mas e se nós adicionássemos um pouco de um ângulo de 45 graus? E certos ícones no conjunto podem ter o mesmo ângulo? Não todos eles, mas os que são realmente altos. Às vezes é bom ter esse ângulo para eles, que eles não se sintam como se estivessem esticando até o topo da parte inferior. Quando você faz uma diagonais, mantenha pressionada a mudança por sua vez, isso meio que ajuda a espalhá-la um pouco mais. Eu posso até torná-lo um pouco maior porque eu estou colocando-o em um espaço diferente amore diagonal espaço. E então apenas certifique-se que eu estou sempre consistente com AVC e há ou clipe de papel . Então este é um tipo de, Ah, diferente porque temos dois elementos de cruzamento diferentes aqui. Então vamos usar esta ferramenta de construtor de formas para construir esta chave inglesa porque se você olhar para uma imagem de uma chave de verdade, ela tem um monte de coisas nela. Mas precisamos tirar tudo isso e focar na forma principal do interior de onde você coloca a chave inglesa na porca para apertá-la. Então isso é o que realmente precisamos para comunicar é aquele pequeno divot? Então vamos criar isso e usar a ferramenta de construtor de formas para cortá-la. Então aqui está o que vamos fazer. Vamos construir uma chave inglesa como preenchimento e não um derrame. Vamos fazer o corpo dos ricos, e vamos fazê-lo mesmo assim, duas caixas de cada lado. Vamos fazer um grande e velho círculo aqui para a nossa parte arredondada da chave inglesa e fazer outro na parte inferior, e parece meio ridículo agora, mas vamos cortar a forma do parafuso. Então vamos fazer essa forma de parafuso. Vamos desenhar no White para que ele possa ver onde está. Vamos desenhar. Meio que tem tipo de desce quase como uma casa, quase como uma casa inversa assim. E vamos copiar a pasta. Nós vamos fazer o turno, e eu tenho que girar até eu tê-lo virado em torno, e eu vou colocá-lo bem aqui em baixo. Então agora ele meio que criou uma chave inglesa muito arcaica. Talvez eu precise selecionar tudo e encolhê-lo para que ele não pareça tão esticado de tudo selecionado. E aqui está nossa chave básica e podemos ajustar isso adicionar mais espessura à nossa chave inglesa. E agora, a ferramenta de construtor de formas que vamos obter a ferramenta de pilar de forma vai cortar isso fora. Vou segurar a opção. Então eu pego o sinal negativo, tiro isso de lá e mantenha pressionada a Opção Pop e eu não vou segurar nada . E ainda tenho a ferramenta de construtor de formas selecionada. E eu vou juntar todos estes juntos porque vamos fazer um derrame, então junte-se a tudo. Eu só quero ter certeza que essas partes superiores e inferiores estão cortadas, então nós só temos a chave inglesa restante e vamos em frente e fazer o mesmo golpe que temos usado em todo o nosso documento. Então, há nossa chave inglesa simples o suficiente, mas vamos em frente e ângulo. Isto ia fazer um turno e fazer uns bons 40. Tudo está indo ao longo desse ângulo de 45 graus e eu só quero torná-lo um pouco mais grosso. Então, meio que combina. Veja como ele tem mesmo espaçamento na grade. Então vamos fazer a nossa pequena chave de fenda simplificada. Então olhe para uma foto de uma chave de fenda. Pense sobre o básico do que compõe uma chave de fenda. O que realmente define uma chave de fenda. Então, em primeiro lugar, temos isso muito longo. Talvez precisemos tirá-lo do caminho para você fazer a mesma coisa e projetá-lo para cima e para baixo. Então eles têm essa parte muito longa, do meio. Isso é um preenchimento, e tem um pequeno ponto no final. Então isso não é grande coisa, porque nós poderíamos apenas pegar em um ponto e trazê-lo para cima. Simplesmente assim. Podemos até mesmo virar estes canto ligeiramente e, em seguida, também temos uma alça que tende a sempre tipo de ter uma borda arredondada para ele. E vamos em frente e trazer isso para fora um pouco mais. Não queremos que seja arredondado. Queremos fazer disso um derrame, então não é sólido porque temos traços e quase tudo o que temos. Então, vamos pelo menos dar um golpe uma vez nesta foto, e eu não acho que vai ser tão grosso, e esta é uma daquelas situações em que nós vamos ter que desligar, encaixar na grade para meio que obter o tamanho certo para isso. E queremos voltar a ligá-lo, pegar a ferramenta de alfinete dela. Vamos fazer como um pequeno elemento, porque a maioria das chaves que eu vejo tem algum tipo de uma cor de dois tons na alça ou algum tipo de design na alça. Então isso vai meio que comunicar que eles são muito magros quando você olha uma chave de fenda. Então vamos juntar-nos a isto, agrupá-lo. Vamos ter certeza que o encaixe na grade está ligado para que possamos colocá-lo em um ângulo perfeito de 45 graus para o outro lado. Então segurando o turno, trazendo ele, trazendo esse cara dedão se sobrepõe e vamos trazê-lo para baixo. E é aqui que preciso mudar. O tamanho é um pouco porque eu não quero que a alça interfira porque isso parece muito complicado. Então vamos tentar fazer apenas este elemento passando. E isso não é grande coisa, porque eu posso me despreparar e trazer esse cara um pouco mais alto e trazê-lo a este ponto para ver o círculo aqui. Eu vou desenhar um círculo ou apenas colocar um círculo no meu software de edição de vídeo editado para que você possa ver o círculo que ajuda a definir onde esses objetos terminam. Então você tem o fim do ponto aqui e o fim da chave inglesa. É por isso que ter esta pequena grade é muito bom saber, ter certeza de que tudo tem até piscar. Certo, então acho que já terminamos com esse ícone. Vamos fazer esse tipo de ícone. Essa será a base para o ícone do aplicativo do sistema operacional. Então vamos fazer um ícone da Apple Store para um aplicativo e ele vai ficar um pouco parecido com isso. Esta é a inspiração que eu tive para isso é muito simples, música simplificada DJ tipo de entediado. Então você tem diferentes níveis de volume e alguns botões diferentes que você pode girar níveis de volume que você pode girar. Então o que eu fiz foi eu meio que estudei ícones diferentes que comunicavam esse tema semelhante. Mas eu também meio que dei uma olhada em alças em certos instrumentos e equipamentos D J e ir bem, qual é o tipo de tema geral aqui? Tipo dessas alças e botões tipo de uma combinação dos dois ajudam a comunicar que é algum tipo de música relacionada Icahn, nosso ícone de controle de volume. Então este deve ser relativamente simples, ferramenta de retângulo arredondado. E isso é ótimo porque ele tem três itens iguais, então você pode apenas duplicar. Então vamos em frente e fazer nosso primeiro controle de volume. Eu tenho a ferramenta de pino indo até o fim, e nós vamos fazer a mesma espessura que temos feito. E nós vamos apenas desenhar nosso pouco isso poderia fazer um retângulo arredondado e fazer o nosso botão de controle de volume . E também queremos ter certeza de que temos surtado. Concordo por agora, fazer com que eu me sinta fazer isso um pouco mais grosso. Então, parece mais um controle pesado, como fazer uma forma de pílula. E vamos torná-lo um pouco mais curto. Então, estamos apenas bloqueando as coisas. E o que é ótimo sobre este aqui é que eu posso duplicar duas vezes. Observe como eu estou fazendo o mesmo espaçamento, ter um bar aqui bar aqui, e então dois espaços entre esses nós poderíamos ter diferentes níveis de volume, então isso mostra que você pode controlar isso. Eles não são botões estáticos têm algum tipo diferente de proporções de espaçamento entre tudo . E talvez precisemos mover isso para além daquele pequeno ponto quadrado para termos espaço para colocar os controles. Esta será uma caixa simples, então estaremos até a margem lá. Temos três aqui. Vamos ver se consigo fazer três. Dois estão aqui? Sim, talvez eu precise falar nisso, porque às vezes um derrame trará a distância um pouco diferente. Então vamos fazer as ferramentas do Elipse. Faça três botões diferentes. Isto é tudo bastante simples neste ponto, e há o básico disso, então podemos tipo de alternar o soft para ver quando diminuímos o zoom. Como é que parece? Tipo de ícone cr definido lentamente desenvolvendo. Quando você está ampliado, você meio que perde a perspectiva. Você meio que acha que é desajeitado e grosso, e não parece muito bom. Mas quando você retoma os níveis que as pessoas realmente vão vê-los, eles começam a parecer mais realistas e começam a parecer um pouco mais limpos e melhores. Eles não têm esses trombos grossos, então, por favor, faça um teste de visibilidade e diminua o zoom em seus ícones você vai se sentir muito melhor sobre eles quando você colocar alguma distância entre você e os ícones. E assim com isso, agora que eu estou vendo isso à distância, senão eu vejo um pouco mais de margem em torno de cada ícone, então eu só quero adicionar um pouco aqui. Então talvez clique para baixo uma vez que ele está segurando tudo e tal, segurando o botão Shift pressionado e está clicando para baixo uma vez perfeito. 41. Projeto de design de ícones - 5: bolha de comunicação, modo que vai ser simples. É se não pudermos preencher isso juntos, e precisaremos criar esse tipo de bolha que aparece só olhando. Então o que eu vou fazer aqui é eu vou apenas ir para o caminho de reboque. Eu estou delineando o traço porque eu quero ser capaz de se livrar desta seção aqui então eu posso precisar mesmo desenhar, desligar o snap para grade. E eu só quero rapidamente uma espécie de corrida que esta parte de está criando qualquer forma colorida, selecionando todos obtendo nossa forma, ferramenta construtora. Levei um soco para fora. E eu também gostaria de juntar estes juntos. Então, juntando-os como uma unidade. E, claro, precisamos sobre o porquê ele adaptou o roxo. É conseguir isso. Então isso é agora preencher. Então, só preciso ter isso em mente. Mas é o mesmo derrame que vamos precisar. E então vamos fazer as três bolhas porque isso indica conversa. Ele não tinha um policial. O pequeno tipo de três círculos. Acho que perde um pouco. O que é Então procurando espaçamento semelhante e tentando obter o tamanho certo aqui para um pouco bolhas de conversa, modo que um era simples o suficiente. Só temos mais quatro para ir. Temos este pequeno vidro definido, seu topo criador da lupa. Então eu gosto de olhar para fotos de lupas. Eu até fiz uma aula onde eu passo através de design de ícones, e isso é Nós fizemos uma versão mais elaborada onde tínhamos muitos detalhes para o punho. Mas neste caso, precisamos simplificar para combinar com o conjunto de ícones dela. Então precisamos simplificar uma alça de lupa, mesmo Mawr. Então, ao estudar alças, estou percebendo um tema onde ele tinha um pequeno círculo quase no caule. E então você tem um retângulo mais longo para a base. Então eu acho que é esse pequeno detalhe. Não é um detalhe muito complicado, este pequeno aqui, mas eu acho que parece um pouco mais polido do que apenas uma reta, você sabe, você sabe, porque isso pode ser algo com que você soprar bolhas ou alguma coisa. E adicionar esse pequeno detalhe faz com que pareça um pouco mais com uma lupa, e podemos ir em frente e selecionar tudo isso e manter a tecla Shift pressionada, girá-lo 45 graus e usar os cantos do para dimensioná-lo para nós. Lá vamos nós. Simples o suficiente em uma casa. Então vamos usar a ferramenta de construtor de formas para construir uma casinha. Então vamos pegar uma ferramenta retangular e nós estamos apenas fazendo formas sólidas ou basicamente construindo a casa primeiro com um Phil sólido. Então aqui está o que quero fazer. Nós queremos fazer isso. Ah, uma bela porta aqui, grande o suficiente para que possamos ver qual é a porta. Vamos fazer uma cor branca para que possamos ver o que está acontecendo. Faça uma boa espessura e vamos fazer a nossa forma. Ferramenta mais antiga. Vamos juntar essas formas primeiro e, em seguida, mantenha pressionada Opção ou eu provavelmente iria selecionar a porta agora e manter pressionada opção. Nós vamos socar isso para fora. E então isso é o que é ótimo em ter essa ferramenta de seleção direta de ser capaz de arredondar canto. Então eu tenho minha ferramenta de seleção direta selecionada que vai puxar para baixo sobre isso e arredondar todos os cantos ao mesmo tempo para adicionar aquele pequeno efeito arredondado e nós vamos querer fazer um traço. Dois. Então vamos adaptar ou acariciar isso. Nós temos bem aqui e há um pequeno ícone de casa. Poderíamos fazer o telhado um pouco maior. Podemos ter certeza de que está mesmo na grade, para que não pareça muito pesado. Vamos ver se conseguimos fazê-lo adaptar-se àquela praça ali. Perfeito. Então ele está se adaptando a esse quadrado. Então há o nosso ícone da Casa. Esta é uma espécie de situação do tipo avião de papel. Então vamos ver se eu posso fazer isso na esquina direto do bastão, porque parece que vai ser apenas triângulos muito simples e criou isso rapidamente . Certifica-te que ele está alinhado um pouco nesta grelha, come melhor. E eu acho que este clique se destaca um pouco mais, e isso definitivamente pode ter sido um onde eu provavelmente deveria ter feito isso direito para que eu pudesse ter certeza de meus triângulos ou até mesmo e então girá-lo. Mas o que quisermos fazer, estou tentando resolver isso rapidamente. Ok, então este aqui vai ser um pequeno truque. Então este é o seu ícone e para colocar em um mapa para indicar um lugar no mapa. Eis o que tenho a ver com este. Vou desenhar um círculo simples e vamos pegar a ferramenta de curvatura. Só vou selecionar este ponto de baixo e puxá-lo para baixo. Ao clicar duas vezes usando a ferramenta de curvatura, você pode alterá-la de um canto para um canto afiado. E eu só tenho as ferramentas de curvatura que eu estou apenas observando entre esses dois. Isso é exatamente o que eu vou fazer aqui para dar um ponto afiado. E então eu vou pegá-lo e tipo de suavizar o círculo um pouco mais, adicionando dois pontos aqui apenas para torná-lo mais de um círculo redondo. Assim mesmo, criamos esse ícone. E vamos nos certificar de torná-lo talvez um pouco maior, ter margem semelhante na parte superior da parte inferior. E depois fazemos o nosso pequeno círculo por dentro e lá está o nosso pequeno ícone e acho que temos mais um. Este é o último? Ok, ok, então este é agradável e simples. Isto é apenas um navegador. E assim, ao olhar para navegadores. Eu sei que estou em um Mac, então parece um pouco diferente, mas eu senti que esses três pequenos ícones realmente ajudaram a mostrar como é um navegador típico. Você tem algumas opções na parte superior da porta, e este é um download do botão ou ícone do navegador, então o download está associado a setas. Então é por isso que eu meio que incluí as setas lá também. Vamos desenhar uma janela grande e agradável do navegador. Traga-o para baixo. Então estes dois descansam naquela linha de grade bem ali. E vamos nos certificar de que temos a espessura certa e traçar uma linha. Espero que isso não seja exagero para você, mas achei que preferiria ter muita instrução sobre isso do que não o suficiente. Sei que estamos fazendo muito aqui, então tem isso. Então agora precisamos fazer nossos três círculos que eles poderiam preencher. Esta pode ser uma daquelas situações de tirar a grade para que possamos nos alinhar. Há melhor. 12 três encaixá-lo de volta e, em seguida, uma seta para que este será construído exatamente como fizemos a forma da casa Builder Tool juntou-os juntos, e então podemos obter nossa ferramenta de seleção direta cantos mais redondos. Se quisermos fazer um derrame ou não. E há ou janela do navegador, vamos alternar tudo para ver como tudo está olhando. E deixe-me ter certeza que isso é um pouco menor, porque isso é um pouco maior em comparação com os outros ícones quando certifique-se todos os ícones são consistentes com margem e borda, que eles possam parecer que eles são o mesmo conjunto. Então, apenas fazendo pequenos ajustes em qualquer coisa que eu veja que pode precisar ser feito menor ou maior, apenas para ter certeza que todos eles têm espaçamento consistente jogado fora. Então aí está. Fizemos tudo isso juntos. Provavelmente o que em cerca de uma hora mais ou menos, temos um conjunto de ícones completo. O que vamos cobrir são mais algumas coisas. Primeiro, queremos apresentá-los de uma maneira agradável, e também queremos exportar estes como um par de versões diferentes. Eu não seria capaz de exportar o 16 por 16 nós queremos ser também para fazer todos esses tamanhos diferentes , exportá-lo todo o caminho até 100 28 ou 256 por 256 e Há uma maneira muito rápida, barata de fazer isso muito grande maneira de fazer isso Adobe ilustrador, e vamos cobrir isso a seguir. 42. Projeto de design de ícones - 6: antes de chegar à parte divertida e colocar Grady INTs e realmente apresentar isso de uma forma realmente estilística. O que vamos fazer é exportar os ícones básicos. Claro, você pode adicionar um dedo de cor diferente todos estes muito rapidamente, Então vamos em frente e ir para nossas camadas. E nós temos a grade. Esta parte Talbot fora. Vamos em frente e alternar a cotação de comando de grade de oferta. Então agora estamos vendo todos os nossos ícones crus, e agora ficamos com o que estamos fazendo, e podemos mudar as cores em todos esses ícones. Então, um pouco deste ar preenche alguns desses golpes de ar. Então, se você se sentir feliz com isso, vá em frente e salve este documento ilustrador. Este será o seu documento original, então guarde-o porque vai manter todos os traços intactos. Isto é apenas se você quiser mudar a cor antes de exportar, vamos subir para o caminho do objeto. Vamos em frente, delinear o traçado porque queremos ser capazes de mudar tudo criar um preenchimento basicamente para todos esses traços para que possamos facilmente mudar e manipular a cor. Então vamos mudar a cor em todos esses que podemos bater em uma ferramenta radiantee legal radiante . E digamos que vamos até nossas amostras e selecionamos um Grady int muito legal. Estava fazendo uma espécie de roxo a azul, radiante, e eu posso levar Argh! Ferramenta radiante. Ou melhor ainda, vamos juntá-los com forma, Builder Tool. Ele pode se tornar parte disso. Certo, então vamos tentar de novo. Só tive que consertar aquele carinha aqui, selecioná-lo e pegar nossa ferramenta radiante. Vamos fazer. Podíamos fazer um rádio. Poderíamos fazer um linear, radiante, apenas puxá-lo. Então temos tudo removido, mas nossos ícones básicos e estamos prontos para exportar isso. Então, há algo chamado Exportação de ativos e você pode encontrar isso em seu painel de janela. Vai ser bem aqui em baixo. Exportação de ativos. Certifique-se de que a janela está aberta. Eu não estou usado isso antes em uma aula sobre. Só quero ter certeza de que vamos repassar isso devagar, então ele vai te dar um monte de opções diferentes para exportar, então ele vai exportar cada um desses itens. Então o que precisamos fazer é arrastá-los para o painel de exportação. Então vamos dizer que queremos arrastar nosso pequeno ícone de envelope enfraquecer, trazê-lo aqui, arrastá-lo para cá. Vai criar um recurso. Mas você percebe que ele criou dois ativos diferentes. Queremos juntar-nos a eles. Então o que você vai precisar fazer é apenas clicar com o botão direito e agrupar tudo isso ou usar o atalho de teclado e agrupar todos eles juntos. Então, quando você arrastá-lo para dentro, eles são criados como um elemento. Então eu só vou passar, apenas ter certeza que esses ar todos agrupados eu poderia selecionar todos eles, arrastá-los para cima e para nossas exportações. Certifique-se de que isso foi excluído, e eles criarão ícones para todos os 16. São 16 ativos diferentes aqui que podemos exportar. Então, o que é ótimo sobre esta exportação de ativos vai fazer cada um e todas essas maneiras diferentes que temos escalas diferentes, então escala um X vai ser 32 por 32 pixels porque é o tamanho que eu criei este modelo. Os quadrados do modelo tinham 32 por 32 pixels de tamanho. Então é o quanto ele vai exportar esse ícone. Então vamos fazer Isso vai ser uma vez aqui uma vez. E vamos fazer isso como P e G porque queremos ter um fundo transparente. Então, tudo isso vai ser P e G. O que é ótimo sobre isso é que temos um 32 por 32, mas vamos dizer que queremos ter um 64 por 64. Tudo o que temos que fazer é fazer dois x, que é o dobro do seu tamanho base ou tamanhos base. 32 2 X seria 64 três x seria 128 e assim por diante. Ele poderia fazer um quatro x cinco X se você quiser fazer isso todo o caminho até 512 que alguns meus conceitos, você sabe, fazer isso. Então, apenas fazendo os tamanhos básicos. Você pode ir mais pequeno. Então há um 16 por 16 e assim que seria metade do tamanho. Então, metade do que seria o nosso tamanho base, que é 32 por 3 será 16 por 16. Então, apenas fazendo um tipo de um a três e um 30,5 E se eu quiser adicionar um que é clique , adicioná-lo e nós vamos fazer isso quatro vezes, modo que será quatro vezes são tamanho baseado. Então quatro vezes 32 128 realmente ser 256. Então, isso seria bom. Dê-nos 256 pixel por 256 pixel ícone de pixel e eu também estou incluindo foi chamado SPG. SPG significa gráfico vetorial escalável. Então esta é a nova maneira de trabalhar com ícones e navegadores porque a grande coisa sobre isso é mantê-lo em vetor. Então, em vez de exportar como um PNG, que é apenas uma imagem, é uma imagem raster que pode ser comido por pixel. Quando você trabalha com ele, um SPG você pode usar um ícone e um navegador em um mantém suas qualidades de fator para que você possa animá-lo. Você pode usá-lo muito, Ah, ao fazer trabalho na Web, e é basicamente um bloco de código XML, que você realmente não precisa saber muito sobre isso. Mas saiba que isso é um tipo de ah, formato que as pessoas realmente adoram ver descobrir o futuro dos formatos de ícones pessoas se você realmente quiser ver um SPG. Então, quando eu clicar neste aqui, ele vai exportar todos esses 16 ícones como S. P. G, e também vai fazer todos os meus P e G. Então é clicar na exportação e ver o que acontece. Então é assim que está parecendo. Ele me deu várias pastas diferentes, então este é o menor tamanho de 16 por 16 pixels. Como você pode ver wowser, isso é minúsculo. Mas agora você vê por que precisamos simplificar nossos ícones, tanto quanto possível, porque olhar para este formato muito pequeno e o sim, há momentos em que você precisa de um 16 por seis estado. Nós também temos o nosso maior, que é quatro X tão 256 por 256. E é assim que vai ficar na minha tela com esse tamanho específico. Você pode ver como eles são pequenos, e isso é realmente um dos maiores e, em seguida, formato vetorial svg. Você poderia arrastá-los para o ilustrador, e eles são vetoriais para que não seja uma imagem. Eu ainda tenho controle sobre o derrame. É realmente incrível ter esse ambiente vetorial que você pode até mesmo arrastá-los dentro do Adobe X D , que é um programa de layout da Web. Você pode trazer um desses S P G, e ele será capaz de ser manipulado e ser vetorial. Então, se eu ampliar isso, você pode ver como eu tenho controle sobre tudo. Só um grupo. Estou no Adobe X'd. Estaremos neste programa um pouco mais tarde. Então, aí está. Somos capazes de criar todos os 16 ícones rapidamente foram capazes de exportá-los e todos os formatos que a maioria das pessoas precisa para designs de ícones, incluindo o formato Vector escalável, ou SPG. E por último, vamos colocar um pouco de polimento em nossos ícones. Queremos poder apresentar os nossos ícones de forma divertida no nosso portfólio, aos nossos clientes e aos nossos amigos e colegas. Então vamos adicionar um pouco de cor e adicionar um pouco de fundo radiante 43. Projeto de conjunto de ícones — de adição: adicionar um pouco de pizza à nossa apresentação. Vou abrir um novo documento, e vou tornar isto um pouco maior. Vamos fazer 1920 por 10. 80 que é o seu tamanho típico da Web mantendo tudo um modo RGB, apenas fazendo um documento maior para que possamos exportar isso como um tamanho de resolução maior. Então, uma coisa que eu quero fazer é eu quero adicionar um fundo de ingrediente muito divertido e um quadrado muito forte, tornando-o um preenchimento. E o que eu vou fazer é eu vou para a nova ferramenta aqui, que é o Caridi int livre Grady em. E você poderia fazer a mesma coisa com malhas de mensagens radiantes, que é bem aqui. Essa é a ferramenta mais antiga. Esta é uma ferramenta mais nova para bem aqui no seu painel radiante, e eu vou clicar na forma livre do Grady. Vai criar diferentes pontos de luz para mim, e eu vou apenas clicar e descobrir o que eu acho que seria uma combinação legal . Então eu vou fazer algumas cores legais. Vamos fazer uma cor escura, escura e legal aparecer e vamos tipo de fazer alguns tons quentes aqui, então eu meio que tenho essa cor quente e legal se misturando. Vamos fazer um pouco mais de laranja deste lado. Eu estava tentando fazer uma moderna cor int Grady, e eu tenho um que eu já criei aqui, e eu vou ser capaz de dar-lhe este é um download para que você poderia apenas colocar este fundo direito lá se você não tem o ferramenta de classificação de forma livre, se você só quer ter um fundo muito legal e radiante para usar, então eu vou em frente e fornecer este para você. E vamos em frente e fazer nosso quadro de arte um pouco menos. É um pouco, Ah, horizontal. Então, estou meio ocupado. A ferramenta do quadro de arte trouxe o granulado que eu criei antes. Eu meio que gosto do pop brilhante um pouco mais, mas eu só quero te mostrar como isso funcionou. Então vamos bloquear esta camada e vamos fazer uma nova camada para trazer seus ícones no topo. Então vamos voltar aos ícones dela. Aqui estão todos os ícones e vamos trazê-lo. E já que temos o caminho da escala. Em nossa seleção geral, temos cantos de escala e traços e efeitos de escala. Quando eu fizer isso maior, tudo deve ficar intacto e ficar ótimo. Então eu vou colocar muita margem aqui para que eu possa realmente mostrar o fundo assim . Então temos traços e preenchimentos representados aqui. Então, se eu fosse apenas para mudar o caminho ou o traço, isso só mudaria alguns dos elementos. Então o que vamos ter que fazer é ter que fazer algumas coisas. Vamos em frente e ir para digitar e ir para baixo para criar contornos e isso vai criar contornos no pequeno cifrão e então vamos para o caminho. Vai delinear o derrame. Nós estamos delineando o traço, esses ícones finais do ar e vamos em frente e fazer um branco que vai deixar o preenchimento branco. Então todo esse ar cheio agora eles são todos brancos e podemos adicionar um pouco de sombra , Adul Pops, vamos selecionar tudo. Vamos adicionar uma pequena sombra e não queremos que sejam fortes demais. Portanto, queremos ter uma opacidade muito leve. Então vamos tentar 22. Vamos até tentar 11. Só um pouco de sombra para dar-lhes alguma profundidade. E eu só tenho um pouco de borrão em um pouco de um deslocamento que apenas adiciona um pouco de pop de cor lá. E você também pode fazer Grady Inst para estes também. Então vamos em frente e remover a sombra e vamos colocá-los. Apenas faça isso um destrave isso. Vamos apenas fazer isso um preto, talvez torná-lo um leve cinza claro e eu vou adicionar um pouco ganancioso int todos estes. Então eu vou agrupar estes juntos é um objeto, e eu vou pegar minha ferramenta Grady int são uma amostra de Grady int. O que é essa escolha por padrão? A Sra. escolheu este preto para Grey, e vamos mudar isto. Vamos fazer com que seja uma cor brilhante e vívida. Vamos fazer como um verde para um azul verde para um azul e talvez ajustar isso para que não seja tão vívido. Verde e um pouco de laranja. Leve-lhe uma ferramenta para o Grady. Poderíamos mudar o ângulo como um 45 graus que passa na diagonal, e há uma forma de bater em um tipo de transição de cores realmente puro em seus ícones. Então, muitas maneiras diferentes que podemos apresentar nossos ícones e adicionar cor a eles. Podemos adicionar cor a estes e exportá-los da mesma forma que fizemos a exportação do ativo antes não cortar para exportar ícones cinza preto liso. Podemos adicionar cor a estes e exportá-los da mesma maneira exata. Então, espero que tenham gostado desta seção. Eu queria realmente passar um bom tempo na criação de ícones porque eu acho que é algo que é uma ferramenta que realmente vai ser necessária, algo que os designers gráficos poderiam realmente ser encarregados de fazer ou ter o cliente trabalhar com. E quando começamos a pensar sobre desenvolvimento Web e layout de APP, vai ser muito útil para ser capaz de fazer seus próprios ícones. Seus ícones podem ser caros para comprar. Eles podem ser difíceis de combinar com o seu estilo do site. Então, para ser capaz de personalizar e criar seu próprio conjunto de ícones para o uso do site ah ou um aplicativo móvel é tão crucial 44. BÔNUS - Teste de usuário com um 5 anos!: Então, quando eu apontar para uma Nikon, quero que você me diga o que você acha que isso significa. Está bem? Como o que é e o que você acha que está dizendo para diligir. Tudo bem. O que é isso? 1º 1 Isso significa “Uau”. O que você acha que é? Masculino? Masculino. Ok, então você acha que é um envelope ainda? Está bem. O que você acha que é uma pintura auto? Está bem. O que você acha que esse é um lado? Está bem. O que você acha? Esse é um retrato de montanhas ao sol, então fotografe ele é. Você acha que a classe IHS oclock você sabia disso imediatamente para casa? Porque como sabia que era um relógio? Porque tinha um círculo. E você viu números nele. Mas o que? Aquelas linhas dentro do círculo que me ajudaram a saber que é um relógio. - Sim. - Sim. OK. E aquele que é meio-dia nas estrelas e para você dormir? O que é aquele? Ao contrário do seu telefone, você sabia que era, então como sabia que era um microfone? Porque eu tenho porque como um vendo em conversa que você pode dizer coisas, ter o canto como pode ficar de pé. A parte superior tem um suporte. Está bem. O que você acha que essa unidade é que você pode gostar de uma lata de refrigerante. Sabe como é uma bateria? - Sim. Você acha que parece uma bateria com o Sim, é ruim? Talvez pudéssemos trabalhar nisso. O que você acha que esse é? Pero eso quando você clica nele em um jogo vai direto para o jogo, direito de trabalhar ou oval no lado. O que resta diz jogar? Sim. Está bem. Então, o que você acha? Aquele é para baixo e então uma vez dando para alguém que quer que lhes dê dinheiro na U quer dar dinheiro. O povo tinha. E ele está dando a ele porque porque ele quer ainda por Ok. O quê, como trabalhos de trabalho? Ok, o que você acha? Aquela unicidade. É aí que você clica nele. Eu estou certo de você quer que ele vá? Está bem. Tudo bem. Então é um botão de reprodução de vídeo. O que você acha que IHS é um clipe de fita? Clipe de papel. Está bem. O que é este? Essa é uma ferramenta. Ferramentas. Certo, então, como configurações ou ferramentas. O que você acha? Essa unicidade? Ah, você empurra para baixo e o som de baixo você empurra para fora. O som é alto. Eu era como controle de volume. Sim. Está bem. O que é este? Isso significa que o jogo consciente deu a eles aqueles vendidos. Quem? Quem tem? Isso não significa alguma coisa. O que isso significa? O que você acha de mim? E isso significa que eu tenho que eles têm uma pergunta. Eu tenho uma pergunta. Está bem. O que você acha? Aquela unicidade. Hum, eu encontro gasolina. - Sim. Maga, assine vidro. Ah, tem uma casa. O que você acha que a casa significa quando você está em um jogo ou algo assim? O que significa a casa? A casa significa que são crianças, então você não pode jogar esse jogo. Está bem? Tudo bem. O que você acha? Que IHS o quê? Por quê? Você chegou. Então, estar em um pedaço de tinta, você faz isso, que você pilota e vai algum dinheiro. Como assim? Como um avião de papel. Está bem. O que significa este? O que você acha? Aquele IHS. O que é que parece? Parece uma gota de chuva de cabeça para baixo. Está bem. Para que você acha que é usado quando você vê? Você já viu isso antes? Não em um mapa. Agora? - Não. Está bem. O que você acha que este significa quando você clica nele? Em Desde que você escreve isso algo que você precisa fazer. Bem, incrível. Muito obrigado por me dizer como você se sente sobre esses ícones. E isso me ajuda a entender como as pessoas vêem os ícones simplificados, mas ainda podem reconhecer os próprios ícones. Então, obrigado, Liam. Sim, cinco. 45. Ícone da App Store - Introdução: Então, para esta seção da turma, vamos desenvolver do zero um ícone da Apple App Store para um aplicativo para iPhone. Então vamos pegar o ícone que fizemos anteriormente que foi despojado e simples. Nós vamos levar isso para fazer para 8 D J app. Então esta maçã produziu sons de DJ. Você pode misturar música, todo tipo de coisa. Vai ser um aplicativo baseado em música. Então eu pensei que nós poderíamos tomar esta versão muito, muito simplificada e fazer uma versão muito polida, high-end porque eles com a Apple App store e também APS em seu iPhone e seu iPad, você vai notar que você tem muito mais capacidade de adicionar efeitos e cores para realmente chamar a atenção do usuário e fazer com que eles baixem seu aplicativo. Poderia ser um pouco maior, um pouco mais elaborado brilho usado, cores, cores, todo tipo de coisas. Então vamos criar um ícone muito mais detalhado do ponto de vista gráfico. Então aqui está o modelo que você pode baixar que ele criou para que vocês tornem este processo um pouco mais fácil. Há vários tamanhos diferentes que você precisa pensar quando estiver desenvolvendo um ícone de APP , e você precisa ter essa versão grande e gigantesca para a APP Store exibir seu aplicativo em um tamanho maior. Mas você também tem os tamanhos menores que você precisa estar ciente para o ícone real do aplicativo. Ele pode ser preso na área de trabalho do seu iPhone, então há alguns pequenos ícones que você vê. Um é para a tela de retina, que será de 1880 por 188 e então você tem um par de tamanhos diferentes, dependendo do telefone que eles usam, porque há mais do que apenas um iPhone. Um é para a tela de retina, que será de 1880 por 188 e então você tem um par de tamanhos diferentes, dependendo do telefone que eles usam, Então vamos fazer todos esses tamanhos, mas vamos começar com o maior e trabalhar nosso caminho até o menor. Então, uma coisa que eu queria falar é tipo de como seu aplicativo é mostrado na loja de APP e como é realmente importante ser capaz de fazer com que as pessoas baixem seu aplicativo e seduzi-los a dar uma olhada nele. Então você vai notar. A maioria destas são formas geométricas básicas, mas muitas vezes verá mais elaborado, APS brilhante também, então você pode tipo de que é ótimo tipo de salto alto para a loja APP e tipo de dar uma olhada no que é popular. Dê uma olhada nas cores que estão sendo usadas. Você notará uma grande variedade de cores vivas e brilhantes . Você vai notar mais e mais detalhes com facilidade, em comparação com apenas o seu conjunto de ícones normal que fizemos anteriormente. Estes são muito mais elaborados, então vamos em frente e olhar e mais detalhes em alguns desses APS e como eles são eficazes. Então olhe para esse Grady bem aqui. Então você vê, tem seus ingredientes de sobreposição. É muito simples, mas com a classificação e realmente meio que me seduz a clicar nele também. E uma coisa que precisamos estar cientes é que você não tem certeza se alguém vai estar no modo escuro ou não. E este é o modo escuro onde tudo tem um fundo preto, muito popular ultimamente. Mas algumas pessoas não têm o modo escuro ligado, e têm um fundo branco, a APP precisa ter uma boa aparência num fundo escuro, num fundo branco. Você também tem que pensar sobre o papel de parede dos usuários também. Eles podem ter um fundo muito brilhante e vívido. Como o seu aplicativo se destaca entre um mar de muitos papéis de parede diferentes? É aí que vamos começar a testar no final do projeto, e vamos dar uma olhada e ver como ele fica em todos os tipos de fundos para garantir que a Apple tem que se destacar em todos os ambientes. Então, apenas algumas coisas para pensar quando você está olhando para criar seu design. Então vamos falar sobre este modelo. Eu tenho um par de camadas diferentes neste modelo que vai ajudar a guiá-lo através deste processo. Eu tenho essa camada chamada info, e poderia ser capaz de falar com toda a frequência. Ele apenas meio que mostra os tamanhos de cada placa de coração também tem este corte porque o que vai acontecer é que vamos projetar todo o caminho até o ponto do ícone APP, e apple irá automaticamente adicionar a curva para ele, então você não precisa para adicionar essa curva ao seu experimento final. Você vai exportá-la até o limite. Então esta é uma ótima maneira de cortar o teste, o que fará um pouco mais tarde no curso, e esta também é a grade. Então, eu só estou falando alguns desses fora. Então esta é a sua camada de grade. Esta é a grade de proporção dourada que costumávamos fazer são design de ícones menores. Vamos aplicar a mesma grade a este ícone maior da loja de aplicativos. Então, o que queremos fazer para falar ao longo desta outra camada de ícone de aplicativo, esta é a última que vamos acabar com na parte inferior. E eu decidi incluí-lo para que você possa ver todas as diferentes camadas que eu usei para criá-lo. Vamos recriar isto juntos, e vai ser inspirado a partir deste ícone simples, plano e básico. Então nós meio que temos uma idéia do que vamos fazer. Nós vamos estar fazendo os três nós vamos torná-lo tipo de ingrediente de ouro também estavam usando alto contraste. Então temos esse ouro em cima dessacor preta escura e profunda, cor preta escura e profunda, e temos muitas luzes, sombras e destaques e profundidade para isso que é muito diferente do conjunto de ícones que acabamos de completar. E isso é de propósito, porque eu queria fazer um bem detalhado e tudo, já que passávamos muito tempo fazendo coisas muito simples. Vamos praticar a adição de muitos pequenos detalhes aqui e também texturas. Você pode notar um pouco de textura no fundo. Ajuda muito fazê-lo estourar. Então vamos começar com um de vamos fazer uma das nossas alavancas aqui e depois vamos fazer algumas das maçanetas. Vamos fazer nossas alavancas de volume ou controle aqui. Então ele vai fazer algumas formas básicas e eu não vou usar a grade para agora. Vamos fazer isso quando realmente começarmos a dimensionar. Então vamos fazer uma ferramenta de retângulo arredondado. Crie isso. Vamos fazer com que seja uma boa forma de pílula. E o que queremos fazer é escolher um bom ouro radiante, e eu não vou deixar você criar um do zero ou baixar um. Vou ver se não podemos nos safar usando o pacote radiante padrão que vem com Adobe Illustrator. Vamos ao nosso painel da Swatch e ver o que temos aqui. Podemos carregar amostras adicionais indo para sua biblioteca indo para Grady INTs e há uma chamada medalhas e vamos tentar escolher apenas estas. Claro, podemos personalizá-lo um pouco. Então aqui está o nosso metal. Grady INTs. Vamos ver se encontramos um bom metal radiante. Queremos criar um tipo de efeito de barra de ouro. Vamos clicar neste aqui. Chama-se The Polished Brass, e o que vamos fazer é pegar uma ferramenta radiante e fazer um radiante para baixo. Acho que vamos usar o rádio radiante. Então vai ser um radial de bronze, e nós vamos apenas ir em frente e criar um rádio radiante, e nós queremos criar um senso de destaques. Então é por isso que escolhemos o rádio deles porque parece que é uma luz vindo. A fonte de luz está descendo e irradiando e criando sombras. Então vamos tornar isso um pouco mais complicado. Vamos duplicar isso, e nós vamos apenas desenhar uma caixa, foram apenas cortados neste chapéu e metade. Então a maneira mais fácil de fazer isso é fazer essas cores diferentes e pode ver que o que estou fazendo é usar a forma, ferramenta pilar e apenas sair dessa camada superior. Então agora estamos apenas à esquerda com o fundo poderia deslizar isso para cima. E é assim que vamos ser capazes de adicionar uma pequena dimensão ao nosso botão. Então vamos pegar o mesmo rádio Grady int que temos, e não podemos ver se conseguimos algumas cores escuras que começam aqui. Você pode ter que ir para o lado oposto apenas assim, para adicionar uma sensação de profundidade com o nosso botão. Então, você sabe, ele tem um pouco de destaques aqui? Mas fica muito mais escuro do que o que está no topo. Ele está criando o que parece uma camada texturizada. Então vamos fazer a mesma coisa com um objeto alongado. Aqui, a parte do controle deslizante obtém o retângulo arredondado. Podemos sempre fazer o dimensionamento mais tarde. Ou vamos torná-lo um comprimido, aumentando meus cantos para torná-lo um preenchimento. Enviá-lo para trás, organizar o pecado para trás. Vamos fazer a mesma coisa e pegar uma ferramenta de Grady int. E vamos fazê-lo irradiar para fora do centro. E podemos sempre entrar em nossas configurações e Argh! Radiante! É bom e clique para baixo, quebrar ingrediente e muito bem ajustado isso. Poderíamos fazer uma transição mais apertada. Vamos fazer o nosso radial radiante bem aqui. Então agora parece que a fonte de luz está vindo para cá. Então o que queremos fazer é adicionar mais profundidade a isso. Agora sabemos que queremos colocar isso em um fundo preto. Então vamos em frente e criar um fundo preto de volta. Podemos ver como isso parece. Eu estava fazendo um escuro Vamos fazer como um pouco escuro, totalmente escuro, totalmente escuro, mas um cinza claro, escuro e nós vamos ter Esta é uma camada separada. Então vamos cortar e colá-lo em uma nova camada e colocar na parte inferior. Isso vai nos ajudar a ver como vai ficar com o ouro. Então vamos bloquear essa camada e voltar para esta camada. Vamos ver como isso está parecendo. Podemos adicionar ainda mais profundidade e dimensão. Só estou encolhendo aquele botão um pouco porque temos que colocar três desses mostradores aqui. Então vamos ver o que podemos fazer de novo. Podemos adicionar outra camada de profundidade a isso. Então nós temos algumas formas planas simples. Vamos adicionar outra camada do lado de fora e adicionar ingrediente para fazer com que pareça que tem essa sensação metálica de três D para ele. Caminho do objeto. E nós vamos deslocar o caminho para que isso possa deslocar o caminho e vamos em frente e clicar em pré-visualizações. Vamos ver como ele meio que compensa o caminho. Ele toma a mesma forma e aumenta. Você também pode diminuí-lo fazendo um sinal de subtração, e ele pode diminuí-lo também. Então vamos aumentá-lo. Não vamos fazer um sinal negativo e vamos fazer um pouco. Isso é realmente apenas adicionar um pouco de um golpe em torno dele. Então vamos tentar e vamos tentar dobrar isso porque eu acho que precisa ser um pouco mais grosso. E então agora ele tem o mesmo Grady e aplicado, então você não pode vê-lo. Mas e se formos para a outra direção com seu Grady int e assim perceber como ele está criando uma sensação de profundidade e poderíamos fazer a mesma coisa com nossa forma de pílula para um caminho deslocado pela mesma quantidade. Talvez até seja menor, talvez três. E isso faz o oposto, radiante. Então, se está indo para baixo, vamos tentar subir. Então note como isso está adicionando um pouco de profundidade e forma a isso. 46. Ícone da App Store - efeitos de barra de barra de ouro: Então uma coisa para realmente aumentar o nous realista disso é adicionar um pouco de sombra aqui em baixo porque este botão vai naturalmente lançar uma sombra para baixo. Vamos apenas adicionar um pouco de botão escuta, certifique-se de encaixar uma grade e encaixar. Dois pixels estão desligados. Não queremos ter nada disso. Estamos fazendo todo esse costume. Isso vai ser a nossa sombra. Podemos até fazer a ferramenta conta-gotas. Podemos deixar cair algumas dessas cores mais claras. Então, se soltarmos essa cor e apenas torná-la escura, quem mudaria a direção dela um pouco e diminuiria o zoom para que eu pudesse ver como isso acrescenta. Quanto mais você diminui, mais você vê aquela sombra realista para conceber. Como os botões estão lentamente se juntando? Vamos adicionar ainda mais realismo aqui. Eu vou pegar esta forma interior principal que temos aqui para o controle deslizante, e eu vou adicionar uma sombra muito pequena para ele. Então eu só vou subir para fazer um efeito de sombra e estava indo clicar na pré-visualização e ele vai lançar mais de uma sombra lá nós podemos trazer isso de volta um pouco. Poderíamos fazer uma transparência também. Poderíamos fazer uma sobreposição. Então, as multiplicações vão deixar entrar alguma dessa luz. Então vai parecer que também está fazendo a sombra na sombra. Só parece um pouco mais realista. Então vamos duplicar isso. Isso vai ser fácil. Agrupá-lo juntos, mantenha pressionado, opção e mantenha pressionada opção. E isso é quando aparecer nessa grade pode ser muito útil para encontrar o espaçamento certo entre todos eles. Então vamos tentar encontrar o espaçamento certo aqui para isso. E nós também podemos ter certeza de que há até mesmo espaçamento entre os três indo para cima estão alinhados e fazendo um centro de distribuição horizontal. E vamos trazê-lo para esta linha de topo aqui para que pudéssemos ter muito espaço para colocar nossa caixa e botões de volume. Vamos fazer isso a seguir, então vamos selecionar o botão e a sombra dela. O que é que agrupa esses juntos? E vamos meio que trazê-lo para baixo um pouco mais, provavelmente fazer minhas teclas para baixo ou minha seta para baixo e ir em frente e mudar as posições desses isqueiros preparar nossa pequena caixa de botão de volume para ir. Então nós estamos indo apenas em torno da ferramenta retangular e tipo de acabamento tipo de obter o espaçamento certo para isso é Bem, vamos em frente e fazer isso um traço. Vamos manter um derrame e ainda temos nosso Grady aqui que criamos. Então vamos criar uma série de camadas de dedos adicionar profundidade e dimensão a esta pequena barra de volume. Então, queres mostrar-te como criei este efeito aqui? Então esta é uma espécie de caixa e como ela criou esse efeito de bisel, e tudo o que eu fiz foi traçar caminho, contornar traço. Então eu desenhei esseretângulo simples e arredondado, retângulo simples e arredondado, e eu apenas fiz deslocamento caminho algumas vezes e então expandi essa forma para fora e então fiz o radiante oposto, então você poderia ver como os INTs Grady estavam indo em diferentes direcções. Então, parece que é chanfrado, tem aquela aparência dupla, e depois esta de trás. Eu só fiz um tipo de atualização de derrame e também. Então você tem quase quatro camadas diferentes aqui que se juntam para criar esse efeito. Então, quando você diminui o zoom, ele parece chanfrado. E então nós queremos adicionar um pouco de textura para isso é Wells foi uma espécie de deslizar todos estes sobre o que está em um fundo marrom agradável, escuro e rico para isso. Então nós só vamos ter certeza que este é um bom preenchimento de um marrom escuro escolhendo um marrom escuro, sinuoso para trás em um comando de sistema de camadas colchete esquerdo e também fez uma sombra aqui na última camada. Então ele tipo de lançar essa sombra para ele, então ele meio que dá a ele um olhar mais em camadas, uma ondulação. Queremos adicionar um pouco da textura usando círculos para torná-lo parecido com aquele material de metal ralado que você vê em alguns equipamentos de som. E então nós vamos criar uma textura simples, bem aqui em cima, nós vamos apenas para uma parte de porta diferente do quadro de arte, e eu vou criar uma série de círculos são realmente apenas um círculo. Vamos fazer um padrão com isso. Então, para fazer um padrão, nós vamos seletor, objeto, bom padrão de objeto, e nós vamos apenas fazer. Então você pode ter feito padrões antes, mas isso pode ser novo para alguns de vocês e não para outros. Então foi com o padrão e marca e aqui está tipo de painel de opções. Então agora eles estão todos aninhados juntos, e nós vamos colocar algum espaçamento horizontal e verticalmente de cada círculo. E vamos fazer isso aumentando a largura e a altura. Então escuta. Tente 12 e 12. Isso acrescentou um pouco de espaço, mas em vez de todos eles sendo alinhados foi fazer um tipo de ambiente de mosaico ou um padrão de azulejo para que pudéssemos fazer um par de diferentes. Mas vamos ver como esse tijolo por linha parece. Vamos ficar com tijolo tijolo por linha, e isso é praticamente tudo o que precisamos para o padrão. Talvez queiramos mudar a cor do padrão um pouco, então é um pouco marrom mais claro, e se destaca sobre esse Phil. E se quisermos salvar um padrão, vamos até aqui também. Salvar ou dois feitos neste caso, quem fez isso vai adicioná-lo automaticamente ao nosso painel de amostras. Então, até aqui em amostras, temos nosso padrão salvo. Vamos descer aqui. Não vamos precisar mais desse ponto. Nós já maneira padrão. Aqui está o que vamos fazer. Ficar um pouco de distância, porque o nosso ícone nunca vai ver tão perto. Então é uma espécie de visualizá-lo à distância, e nós vamos obter uma nova camada aqui em cima, e vamos clicar na amostra dela e torná-la um padrão. Então vamos em frente e enviar isso para trás para o sistema de camadas. Então está logo atrás de tudo lá, e você pode ver como parece um pouco de, ah, textura ralada. Há tipo de dá-lhe um pouco de um ambiente rico e têm um par círculos de tamanho diferente . Se alguma vez quiseste mudar, o teu padrão que temos de fazer é clicar duas vezes numa amostra, e permitirei que mudes o tamanho e o espaçamento. E quando você diz que a amostra pegar aqui e clicar em Concluído, ele irá sobrescrever a forma ou o padrão. Se você quiser fazer um novo padrão, basta clicar em. Salve uma cópia para que você possa ter o original e, em seguida, salve suas alterações uma ondulação. Então, se você queria fazer esse círculo um pouco maior, é assim que você faz. Então vamos cancelar e ter um par de tamanhos diferentes que ele criou. Acho que o mais realista vai ser tão pequeno. Isso parece muito bom à distância um ali. Então nós meio que temos um maior e um menor e, em seguida, meio que uma forma média. Então, o que acharmos que ficaria bem nessa distância em termos de textura. Então, isso é perfeito. Esse é o tamanho certo para me dar o tipo de textura que eu preciso, mas não tão pequeno que quase pareça bagunçado, então aí mesmo é perfeito. 47. Ícone da loja de aplicativos - Dia de ouro: três mostradores diferentes pulou nossa ferramenta lábios, Faça um mostrador sobre este já tipo de tem o Grady e eu estou procurando Se você passar para o nosso painel radiante, Eu acredito que eu acabei de selecionar um desses rádio ouro padrão, não o ouro. Eu acho que eu fiz. O latão, o latão maçante. E o que eu fiz foi apertar a conexão nisso, modo que deu a ele uma espécie de transição mais nítida que dá aquele olhar metálico realmente brilhante a ele. Então você vê essa transição muito, muito apertada lá desses dois tipos de sobreposição para ver assim. E talvez precisemos fazer isso assim que adicionarmos um par mais tarde. Então esta é a nossa base do nosso botão. Vamos continuar a colocar isto um em cima do outro, e podemos fazer a mesma coisa com o deslocamento do caminho. Vá para o caminho, deslocamento. Queremos fazer um negativo desta vez. 12 negativos. E agora vamos fazer um oposto, radiante. E então vamos fazer um tipo de botão no meio, e podemos fazer isso ou radial. Então vamos torná-lo um rádio e vamos fazer com que pareça que a fonte de luz está vindo do topo. Assim como a fonte de luz está vindo de cima aqui. Talvez precisemos mudar algumas dessas coisas aqui. Vamos em frente e afrouxar isso. Lá vamos nós, fazendo parecer um pouco de três D. E o que também ajudaria é adicionar um golpe muito fino a isso. Isso também é ingrediente. Então nós estamos apenas empilhando esses INTs gananciosos uns sobre os outros para dar aquele olhar em camadas e eles iriam adicionar Faça isso realmente magro e adicionar uma sombra para isso , adicionando profundidade e dimensão com tudo o que tentamos fazer e vamos iluminar um pouco . E nós poderíamos até adicionar uma sombra para isso também. Então esta é uma forma muito traseira. Haverá lançando sombras muito profundas. Vamos fazer um borrão agradável. É uma boa distância. Vamos torná-lo agradável e escuro, assim mesmo. Vê aquela bela e profunda sombra? Talvez não tão escuridão a 66%. Isso adicionando um botão lá. Queremos ter certeza que todos esses ar alinhados, então vamos para o nosso painel de linha fazer todos os nossos alinhamentos centrais e não há ou discar. Talvez precisemos mudar o ângulo. Então isso é que Grady int Linus atingindo Maurin o centro bem ali, Você pode precisar apenas mover as alças um pouco. Você poderia fazer isso bem ali na linha, assim mesmo. Perfeito. E lá está o nosso dialeto final e ver como ele é feito de um par de camadas diferentes. Temos um derrame neste botão de realce interno. Temos este radiante bem apertado aqui em um Grady int mais solto do lado de fora com uma sombra. Então isso será fácil de replicar. Está criando três desses pontos. Vire os mostradores. Vamos nos certificar de que há espaçamento igual entre todos eles. Outra chance de tirar nossa grade e ver como tudo está se agitando. E queremos que este seja um tipo arredondado de ícone foi Vá em frente e adicione estão recortando teste aqui para ver como ele cultiva, e com isso eu fiz onde você poderia mudá-lo para qualquer cor. Então, se você quiser torná-lo branco, você pode ver como ele vai cortar um pouco melhor. Sabemos que tudo isso não vai ser mostrado. Então, essa é uma ótima maneira de testar nosso aplicativo e estão dimensionando isso. Então vamos bloquear essa camada de corte e, em seguida, vamos voltar para o nosso ícone, e nós vamos tipo de apenas ter certeza de que temos as margens certas e espaçamento entre tudo. Então, vou agrupar todos estes objectos principais, por isso vamos ter este. Este está agrupando todos para que eu possa começar a mudá-los. Isto vai ser tudo uma unidade. Então, fazendo um pequeno teste de distância aqui para ver se eu não posso mudar isso um pouco e usar sua grade. Se você quiser ter essas linhas no topo bem ali, veja essa linha atravessando. Você pode ter isso no fundo, mas como você quiser fazer, podemos torná-lo um pouco maior. Mas veja como ele está começando a ficar um pouco na curva lá. Nós não queremos ter. Não teremos muito. Bela margem. Assim como todos os ícones que projetamos queremos ter certeza de que há alguma margem em torno de todos os elementos, para que não pareça muito apertado. Então eu poderia até trazer isso até alguns entalhes só para meio que trazê-lo para longe daquele canto. E há sempre a oportunidade de selecionar tudo e torná-lo um pouco menor. Então, há apenas um pouco dessa margem. Vamos em frente e desligar essa grade. Vá em frente e apague esses ícones e há mais algumas coisas que queremos dilatar. Então queremos adicionar textura e talvez uma borda dourada também. Vamos adicionar uma borda dourada ferramenta de retângulo arredondado e vamos criar ingrediente aqui. Vamos desutilizar o teu pequeno Grady linear, vamos criar o mesmo efeito de bolha em camadas para tornar isto um derrame, e vamos manter a nossa camada de teste de corte ligada. Então sabemos tipo de onde o APS final vai estar. Culturas. Então sabemos o quanto precisa vir aqui e ouvir a fronteira. Vamos aumentar nosso peso, aumentando o peso Oh, e também precisamos mudar os ângulos para combinar bem ali, os cantos e vamos adicionar outra camada aqui, então vamos saber um pouco complicado, mas este é um ícone bastante complicado. Vamos desligar a visibilidade e estamos recortando, e vamos criar outra camada fazendo um caminho de deslocamento de caminho. E assim vai compensá-lo negativamente. E nós vamos pegar Argh! Radiante. Mantenha-o o mesmo, mas apenas inverta o curso. Então, em vez de 44 graus negativos, vamos fazer 44 graus positivos, e isso vai dar aquele efeito diabólico. Então, quando nós alternamos o corte são os testes de como ele vai ser cortado na final . Temos que ver como é e parece que vai ser escondido. Então, só precisamos ajustá-lo. Vamos trazer este aqui para dentro para que você possa vê-lo quando é cortado assim. Está bem. E agora podemos conversar. Um monte estão cortando camada, Veja como ele parece. Então parece um pouco em camadas porque tem seus dois tons opostos Grady INTs. Então é dado a ele esse efeito duplicado. Então uma coisa que é importante notar é que precisamos que tudo vá para a esquina. Isso vai ser cortado pela Apple, mas nós não vamos estender tudo fora do canto de qualquer maneira, então vamos selecionar o caminho que é o caminho do lado de fora. Então vamos fazer isso maior todo o caminho para fora foi fazer o golpe maior. Então ele se estende por todo o caminho e você pode descer aqui e ter o alinhamento, traço para o lado de fora. Então, será só do lado de fora. Então está cobrindo todos esses cantos para nós. E nós poderíamos conversar ao longo daquele corte que testa o corte para ver como ele vai ficar no final. Traga isso, traga isso, traga isso e estamos perdendo algumas coisas aqui. O que eu adoraria fazer é adicionar ainda mais textura ao fundo e adicionar alguns pops de cor relâmpago. Então o que eu vou fazer é desbloquear esta camada traseira aqui. Então esta camada aqui e eu vou copiar isso, colocá-lo na frente e eu vou adicionar um pouco de nossa textura círculo a ela. Ele está adicionando um pouco de textura bem aqui e ver que tipo de tamanho precisamos aqui. Talvez aquele médio ali e por isso não queremos que ele atravesse todo o caminho. Queremos ter alguma luz vindo aqui. Vamos fazer um modo de mistura. Vamos fazer uma queimadura de cor, ter certeza de que é 100% de opacidade. E então o que vamos fazer agora é adicionar pequenos pops de luz. E então é assim que vamos fazer. Vamos pegar nossa ferramenta de lábios, círculo de palha. Vamos torná-lo branco. Bem, mola todo o caminho na camada superior. Você sabe, nós vamos fazer um modo de mistura de sobreposição e ele tem uma mistura para criar uma espécie de pop de luz, e nós não vamos tê-lo em 100%. Vamos reduzir isso. Só queremos um pouco de luz aqui no canto. Vamos enviar isso para trás atrás daquele 1º 1 Nós só queremos fazer um tipo de luz de fundo, e queremos borrá-lo porque agora, se você olhar para ele, vamos torná-lo 100%. Se você olhar, parece um holofote. Então vamos borrar isso um pouco indo para cima para blurb indo apenas fazer um Borrão gaussiano está desfocando um pouco. Ok, então agora eu meio que vejo fora, te dá um pouco de holofotes. Podemos até adicionar um pouco de cor a isso, talvez ver se adicionar ouro pode ajudar. Isso está adicionando um pouco de luz lá. Já que temos este pequeno círculo branco quando poderia colocá-lo aqui para adicionar quase um pouco brilho no brilho da luz? E nós apenas não, uh, poderia fazer isso sobreposição. Nós temos o modo de mistura de sobreposição, adiciona um pouco de pop de cor, e nós poderíamos apenas talvez reduzir a opacidade sobre isso apenas um pouco. Nós só queremos um pouco de brilho, apenas adicionando alguns destaques e retoques finais, e estamos quase terminando. 48. Ícone da App Store - Exportação: Agora que terminamos uma vez, desative algumas dessas camadas extras. Não precisamos mais dessa camada de corte de teste. Esta é a camada final que precisamos. Então, tudo isso é pelo design final do aplicativo e vamos fazer um teste antes que ele se adapte a esses tamanhos menores. Vamos fazer um teste exportando-o e vamos colocá-lo como um PNG. Esse vai ser o formato universal para isso. Eu ia mantê-lo em uma alta resolução de 300 peopie I e clicar em Ok, então há um ótimo site chamado o ícone do aplicativo Tester, nós vamos aqui para a página inicial. Eu tenho o link para este e o guia de recursos para esta seção, e ele vai ser capaz de aplicar nosso ícone de aplicativo em uma variedade de lugares para que possamos ver como ele fica. Então nós descemos aqui e você apenas arrasta seu ícone e aqui nós apenas exportamos são 10. 20 por 10 20 p e G, vamos ver o que parece ter uma ideia de como vai ficar na final. E é assim que vai parecer em uma grande variedade de fundos. Então eu sinto que ele realmente aparece em todos os tipos diferentes de fundos, mesmo no escuro, porque nós temos muitas cores brilhantes e destaques lá que ajudam a se destacar em um fundo preto. Nós vamos rolar para baixo e tipo de ver como ele se parece na loja de APP. E isso nos dá uma boa idéia de como vai parecer e o que eu poderia fazer agora que eu estou vendo agora que eu estou vendo isso em um pouco de distância. O que eu gostaria de dilatar é talvez engrossar a borda um pouco e ter certeza que ele apenas é meio que cortado do jeito certo. Então eu só preciso ajustar isso um pouco, fazer as bordas mais grossas e passar um pouco mais e talvez fazer isso um pouco menor. Então, é bom ser capaz de testar isso, para ver como ele cultiva e como ele se parece com isso, e nós podemos pegar tudo isso com um pouco mais de margem. Achei que era um pouco apertado demais, então é ótimo ser capaz de testá-lo para que você possa ver esses pequenos ajustes que você vai ter que fazer com Vá em frente, adapte tudo isso aos tamanhos menores. E quando adaptamos tudo isso, se ainda tivermos todos esses traços e outras coisas, só queremos ter certeza de que estamos em preferências gerais. E temos nossos cantos de escala e traços de escala e efeitos para que os caminhos não fiquem distorcidos. Tornamo-la mais pequena. Então agora vamos adaptar isso a tamanhos ainda menores que a loja APP vai precisar. Poderíamos até fazer como um snap dois pontos ou encaixar na grade. Então, vai partir dos cantos certos. Vamos fazer isso pelos outros dois. Ele pode exportar thes como um PNG quando você estiver pronto. Exportação de arquivo como e há um PNG, vamos nos certificar de que clicamos em usar placas de arte que vamos exportar como um PNG. Você também pode fazer isso como a exportação de ativos também. Se você vai estar fazendo um monte destes, você pode fazê-lo como uma exportação de ativos, ou você pode fazê-lo com o modelo onde eles já estão dimensionados para você, e você pode exportá-los como um PNG e apenas certifique-se de que você apenas clique nos padrões. Então aqui está o nosso ícone final. É assim que o arquivo se parece, e é assim que ele vai parecer na loja de APP. Então eu estou muito feliz com o que parece e apenas, você sabe, talvez alguns pequenos ajustes que eu poderia fazer. Mas esse é o processo básico de criação e exportação de um aplicativo da Apple. O Icahn. E isso foi um pouco mais detalhado, um pouco mais complexo, com todas essas camadas, dança e destaques e e e poderia ter sido um projeto um pouco complexo demais para enfrentar por causa de todas essas camadas. Mas eu queria mostrar a vocês como esse processo funciona, porque eu acho que é bom saber como fazer isso, especialmente quando você está trabalhando em desenvolvedores e desenvolvedores da Web, e eles vão precisar de um tipo de gráficos e branding para isso. Você pode dizer: “ Ei, Ei, eu poderia fazer um ícone de aplicativo. Sabe, já passei por esse processo antes, então aí está. Eu me diverti com este 49. Página de sites no Adobe Xd - Introdução: bem-vindo à seção Web design e layout, e a seção será encarregada de criar uma página de destino curta e rápida para um cliente no espaço de namoro online. Fomos fornecidos com alguns arquivos de logotipo básicos e elementos de marca. Os usuários clicarão em uma mídia social ou exibir em para chegar a esta página de destino. Onde é nosso trabalho é designers gráficos trazer marcas consistentes para esta página de destino e criar um layout limpo e agradável para este projeto. Como designers gráficos, nosso principal trabalho é ralar o sistema de branding visual para este site. Nosso trabalho não é codificar o projeto, embora alguns designers também sejam responsáveis pela codificação e desenvolvimento. Vamos supor que para este projeto há um desenvolvedor que vai pegar nossos ativos, codificar o site, ou usar uma empresa como o Squarespace para adaptar o modelo que está bastante próximo ao foi projetado para fazer isso acontecer. Esta seção vai se concentrar principalmente em design e layout, lado das coisas, há alguns elementos básicos que vamos precisar para a página de destino simples. Primeiro de tudo, precisamos pegar os usuários quando eles chegam pela primeira vez na página com algo convincente. Precisamos ter algum tipo de ação chamada ou ter um botão de inscrição que irá enviá-los para o site principal da Web para se inscrever. E, por último, precisará mostrar o vídeo promocional na página em algum lugar. A marca que criei para este projeto chama-se Finding Love. Será um site de namoro genérico que segue um processo típico de três etapas. Você pode baixar o recurso no curso para que você possa ter todos os ativos básicos que precisaremos para construir a página de destino. Finalmente, para este projeto em particular será usando um programa chamado Adobe X'd para colocar tudo isso em um layout e até mesmo mostrar ao cliente um quadro de fio viável no qual eles podem aprovar o design. E podemos mover esse processo para o programador ou desenvolvedor. Você também pode criar isso usando o Adobe Illustrator e o Photoshop sem problemas. Adobe X'd está atualmente totalmente livre para baixar, e eu vou fornecer que Lincoln o Guia de Recursos. Ou pode simplesmente baixar o Google Adobe X'd vai aprender brevemente o básico do programa para que eu possa mostrar-lhe como é muito mais fácil montar layouts de sites e conceitos usando Adobe X'd. Então, vamos começar dando uma olhada em nossos ativos de marca e no Adobe Illustrator Illustrator , você pode baixar esse arquivo. Como eu disse antes e eu só tenho alguns ativos básicos aqui, nós vamos estar recriando alguns desses para que possamos passar pelo processo de como trabalhar com ilustrações e como tipo de criar esses todos pertencem formas que são muito populares hoje no mundo do design. Vamos usar isso no design geral do site. Então o que eu quero fazer é criar algumas paletas de cores e criar alguma tipografia que possamos usar. Você já pode vê-lo aqui, mas nós vamos tipo de processo de pensamento através de algumas dessas coisas. Vamos supor que este cliente já nos forneceu o logotipo e uma marca muito básica. Mas cabe a nós realmente fazer isso ganhar vida em um formulário de página de destino do site. Você também notou que alguns desses ícones podem ser um pouco familiares. Vamos usar alguns desses ícones no design do nosso site, mas este é também o pacto de ícones que criamos, então vamos ser capazes de trabalhar com os arquivos que exportamos ou arquivos ilustradores para poder dar vida a esses ícones no Adobe X'd. Então, se o cliente já lhe forneceu uma paleta de cores fantástica, isso é uma coisa a menos que você tem que fazer é um designer gráfico. Mas como designers ou trabalho principal é criar o sistema visual ou o sistema de design para muitas coisas diferentes com branding em um monte de vezes, isso significa o logotipo, a paleta de cores, os ícones. Então tudo isso é coisa que está no nosso tribunal. Estas são coisas que o designer gráfico é realmente responsável por menos o revestimento e mais assim este tipo de coisas. Então eu vou mostrar a vocês como isso criou todas essas coisas. Claro, criamos o ícone definido anteriormente. Então temos todos aqueles estabelecidos e alguns da tipografia. Você sabe, nós podemos criar um bom tipo de manchete e criar uma cópia legal do corpo ou uma cópia de sub-linha que podemos usar, que foi o que fizemos aqui. Encontrei esta tipografia nas fontes do Google, então vamos lá e vamos lá rapidinho. Então, com nossas fontes, se isso ainda não está estabelecido. Ah, bem, o que eu gosto de fazer às vezes é para um rosto tipo de manchete adaptado que já está em um logotipo para ser usado como uma manchete principal de vez em quando, apenas um tipo de especial trazendo o tema e branding de que já está no logotipo. Neste caso, é uma cara apertada chamada Pacific. Oh, e eu encontrei isso nas fontes do Google, e o que eu queria fazer é que eu estava procurando por um realmente suave, já que estamos falando sobre amor e encontrar amor e suavidade, e meio que eu queria me divertir, ilustrativo, brilhante, vibrante, cor de tom de jóia para tudo isso. Então eu queria encontrar um tipo de letra que combinasse com isso. E então um tipo de letra de script é exatamente o que eu estava procurando. Mas preciso encontrar a pessoa certa. Não quero guiar essa cara tradicional. Então, apenas em fontes do Google e eu estou usando fontes do Google porque nem todo mundo tem assinatura de fonte Theodore B. Se você tem a Adobe Creative Cloud, você tem essa assinatura. Mas muitos dos meus alunos não têm isso, então estou usando algo mais open source e gratuito para todos usarem. Então eu vou ficar com as fontes do Google para este projeto. Então vamos em frente e reduzi-lo por tipo. Então, nós definitivamente queremos ver se conseguimos encontrar o espaço de mão mão ou exibição. Então, alguns desses são os três que estavam se aproximando e fracos. Eu gostaria de um bom, ousado, ousado, doente para que possamos realmente mudar a espessura. Para ser capaz de estreitar são rosto apertado. Então, muitos desses ar realmente tradicional, e alguns deles são realmente difíceis de ler. Esse é o único problema com roteiros escritos à mão. Às vezes eles são muito difíceis de ler, e nós queremos ter um tipo bonito e limpo que também seja grosso. Então eu fui em frente e me estabeleci em um chamado Pacific. Oh, bem aqui e depois Railway é uma fonte muito flexível do Google que tem muitos pesos diferentes para ele. Então vamos usar isso para todas as nossas cópias corporais e sub-manchetes para ter uma opção de Sarah areia limpa porque não queremos usar mais o seu tipo de script. Só queremos usá-lo com moderação. Talvez apenas na manchete principal em cima, e é isso. Talvez possamos usá-lo em outra pequena área. Nós não usamos demais um tipo de script como este. Então, agora que nós meio que estabelecemos isso, nós queremos tipo de olhar para as cores. E muito disso é difícil de estabelecer isoladamente. Às vezes você precisa trabalhar em outros tipos de projetos com a marca para descobrir como adaptar a marca. Então, às vezes eu posso descobrir tipos de letra depois que eu começar a projetar e layout o site para descobrir o que funciona para que você não tenha que descobrir os tipos de letra antes de começar. Às vezes, você pode começar a definir o layout básico do Web design e, em seguida, descobrir qual tipo de letra pode funcionar melhor. Considerando que ilustrações você usa e foi layout. Você só tem que falar sobre como eu desenvolvi essa paleta de cores. Você pode ir para colorir dot adobe dot com e encontrar alguma inspiração na roda de cores, ou você pode até mesmo ir para explorar. Se ele conhece uma tendência em particular, você pode digitar isso e passar por isso. Na verdade, há uma tendência também, então sei que quero ficar com algum tipo de tom de joia. Então eu estou apenas recebendo alguma inspiração aqui para paleta de cores, apenas digitando em tons de joia e tentando obter algumas idéias. Algumas cores realmente brilhantes, vibrantes que me lembram de amor e romance, e você pode até montar um quadro de marca. Eu baixei fotos de pixels dot com e outros sites gratuitos para tentar montar um quadro de marca que tinha algumas dessas cores que eu estou procurando para que eu pudesse pegar a ferramenta conta-gotas e experimentá-los e criar uma paleta de cores coesa. Então só meio que mostrando os processos básicos de como surgiu essas cores. Eles não apareceram na minha cabeça. Tive que fazer uma pesquisa. Tive que estudar. Eu tive que montar um quadro de marca, tive que ir encontrar algumas cores tendências para tentar descobrir esta cor final. Palin. Então este palácio de cores é na verdade uma captura de tela do Adobe X'd, onde temos todos os códigos hexadecimais, quais códigos hexadecimais são o que precisamos para Web design em termos de cor. Então eu só tirei uma captura de tela disso para que você possa facilmente obter a ferramenta conta-gotas e amostra que enquanto criamos Thies esta ilustração, que vamos fazer a seguir 50. Página de sites no Adobe Xd - Illustrator: Então queremos usar uma foto real. Bem, você definitivamente usa uma foto real para tipo de agarrar as pessoas. Mas eu adoraria usar essa ilustração quando eu falar sobre nosso processo de três etapas. E eu queria trazer isso como um estilo geral. Muito simples, plano projetado, muito tendência agora. E as formas de ar realmente tendência agora. Então eu queria tipo de falar sobre isso como, ah opção de estilo e falar sobre como eu montei isso juntos. Então o que eu vou fazer é deslizar isso fora. Você tem acesso a ele se você não sentir vontade de fazer este passo. Mas como designers, isso faz parte do seu trabalho para criar esse tipo de trabalho para que possamos desenhar esses personagens à mão ou ter um pouco de um barato para tornar todo esse processo um pouco mais rápido, porque temos muito para chegar. Há um site chamado humanos dot com, então é humano, mas com três A's diferentes nele, e eu fornecerei o link no guia de recursos e eles têm uma biblioteca de alguns ativos vetoriais maravilhosos . Na verdade, há V GS, que é uma forma diferente de vetor. Mas ainda é um arquivo vetorial, e você pode baixá-los e adaptá-los como quiser. E eles são gratuitos para uso comercial e pessoal, o que é fantástico no nosso caso. Então aqui estão alguns dos básicos. Deixe-me ver se eu não posso deslizar isso, você pode ver um pouco melhor, então eles meio que vêm em um par de formatos diferentes. Você poderia colocar um iPad ou qualquer tipo de tela lá. Você pode adicionar isso em um ilustrador, você pode adaptar as cores das roupas. Você pode mudar o que quiser sobre esse tipo de pessoas. Então, há algumas pessoas que achei que ficariam muito bem. Eu queria ter o que você viu quando duas pessoas estão se juntando com as mãos , como se quisessem encontrar uma combinação. Então encontrei dois deles e os trouxe para o Adobe Illustrator. Aqui estão os dois. Há um. Há dois. Vou copiar esses dois caras e trazê-los para dentro, e nós vamos ter que mudar a orientação deles também, que não é grande coisa. Poderíamos virar uma, então vamos pegá-la e virar ela. Transforme, reflita. Quero que as mãos deles se juntem, como se estivessem encontrando o amor. Então, a posição destes ar já grande. E outro pequeno truque é que podemos obter a nossa ferramenta de marionetes se você tiver uma versão mais recente do Illustrator e você pode até mesmo transformar, encontrar diferentes pontos nele para transformar, e você pode ter que excluir certos pontos e Adam onde quiser eles para ir. Então, se você quiser mudá-lo um pouco, pode ser um pouco estranho trabalhar com ele. Mas você já quis mudar uma parte de quem você pode? Então nós queremos colocá-los em uma forma, e nós queremos que eles tipo de sair da forma para dar um olhar em camadas. Então vamos criar nossa pequena forma ob longa aqui. Nós vamos descer aqui, e tudo que eu vou fazer é pegar a ferramenta Elipse, desenhá-la, e nós vamos pegar a ferramenta de curvatura, e nós vamos escolher um ponto e empurrá-la para fora. Então temos a ferramenta de curvatura selecionada. Vai clicar e fazer um ponto de ancoragem e empurrá-lo para fora. E nós criamos instantaneamente esse tipo de forma oblonga que é muito popular. Você poderia levá-lo para dentro e criar todo tipo de formas legais. Tudo o que fiz foi o dele. Pegue o banquinho dos lábios e adicione alguns pontos de ancoragem com a ferramenta de curvatura. Então é só isso. A ferramenta Elipse com algumas ferramentas de curvatura aponta lesões. É assim que muitas dessas pessoas criam ou muitos designers criam essas formas oblongas. Você pode vê-lo em todos os tamanhos diferentes, vai criar um par para este site em particular. Então isso foi simples o suficiente. Então vamos tipo de criar e definir o tom para esta ilustração. Vamos levar isto para trás. Queremos tipo de posicionar estes onde há um pé ou à frente, ou algo tipo de sair da forma tipo de faz parecer que estão juntos como um por ilustração trabalhada. Então as cores vamos fazer a nossa cor de fundo, e então podemos precisar mudar essa laranja porque a laranja e o amor eu não sei. Laranja não é realmente parte da nossa paleta de cores. O que poderíamos facilmente em grupo thes e mudar as cores. Mas vamos fazer o fundo primeiro temos uma nova ferramenta e, ah, acho que é 2000 19. Eles saíram com isso com o painel Adobe Illustrator Ingredient Swatch. Temos algo chamado Forma Livre, Grady. Podemos clicar nisso, e ele vai criar vários pontos diferentes, como a ferramenta de dobra de marionetes, de certa forma. E você pode criar vários pontos diferentes de luz, e você geralmente pode pegar um ponto. Obtenha a ferramenta conta-gotas e amostra da nossa paleta de cores. Coisas diferentes. Então, apenas uma espécie de amostragem. Definitivamente como aquele roxo escuro lá dentro. E eu adoraria ter uma versão mais leve disso. Então é quase como uma transição de cor agradável deste tipo roxo profundo para o rosa mais claro e tipo de transições muito bem. Então isso é feito de três pontos ao longo da linha, e eu gosto de ter esse brilho na parte inferior tipo de dá um visual moderno agradável para ele, mas se você não tivesse essa ferramenta, você ainda poderia obter o mesmo Grady, efeito, passando por cima e clicando em sua ferramenta de malha e fazendo da mesma maneira com a ferramenta de malha. Então, digamos que estamos usando a ferramenta de malha. Você clicará de qualquer maneira aqui para criar diferentes pontos de luz e clicar duas vezes nele ou clicar duas vezes neste relógio. Você pode mudá-lo assim para É um pouco mais preciso e preciso. Você pode criar um monte de três imagens em D fazendo realces e sombras com a grande ferramenta de malha . É definitivamente mais complicado e mais rico de uma ferramenta. Mas se você precisa criar algo rápido que Grady e se você tem uma versão nup datada do Illustrator há ferramentas de classificação de forma livre definitivamente mais rápido como. E nós podemos criar várias versões diferentes disso se quisermos colocar isso em um fundo branco e ter o desbotamento inferior. Então vamos fazer isso branco. Poderíamos ter a forma tipo de desvanecimento assim para que pareça que a ilustração está misturando com o fundo. Então essa é outra opção que poderíamos fazer. Poderia pegar essa pequena alça e expandir um pouco o branco. Você pode ver que eu poderia colocar isso em um fundo branco. Parece que as ilustrações se misturam ao fundo, mas poderíamos fazer isso em outra data. Vamos voltar ao que tínhamos que ver. Isso parece. Vamos mudar de laranja porque não está funcionando bem. Com a nossa bela paleta de cores tonificadas, vamos ungroomed estes poderiam ter um grupo. Sou um grupo de freiras, , até ter acesso apenas ao suéter. Então eu preciso agrupar isso mais uma vez. Eu só preciso da laranja, e eu poderia fazer um pequeno truque. Eu posso alterar individualmente esses três objetos vetoriais diferentes, ou eu posso subir para editar cores e apenas fazer um pequeno truque para ajustar o equilíbrio de cores. E há também re arte de cor, que vai para aqui em um minuto, começa a clicar em converter, clique em pré-visualização, e podemos mudar tudo isso ao mesmo tempo. Poderíamos torná-lo vermelho para o amor, apenas uma maneira rápida de mudar de cor. E eu meio que gosto de uma cor mais rosada para isso porque tipo de combina com nosso tema um pouco melhor, então eu poderia fazer o mesmo com ela. Há também algo no mesmo sistema de menu. Então suba para editar e cores. Nós podemos re colorir a arte, então ele vai selecionar tudo que é laranja aqui, e nós podemos mudar totalmente a cor. Então esta é a cor atual, aquele laranja escuro na manga, e nós podemos mudar isso e nós poderíamos apenas ir para baixo. A lista é uma espécie de cor mais clara, para que você possa re arte de cor dessa forma também. Então, muitas maneiras diferentes de fazer isso, tornar isso um pouco mais leve. E lá vamos nós. Nós apenas re cor que também podemos fazer as calças se quisermos. Mas vamos deixar isso, como está. Também podemos adicionar uma sombra de gota muito pequena ou mantê-la plana. Então, se quisermos manter um design plano total, podemos mantê-lo assim. Nós também podemos agrupar isso e apenas criar uma pequena sombra, ou melhor ainda, vamos apenas agrupá-los como indivíduos para que possamos ter um pouco mais de controle se vamos usar essas ilustrações novamente em outro lugar. Então eu vou selecionar ambos e adicionar o menor, pequena sombra de gota sutil vai estilo olhos cair sombra e só quero adicionar um pouco . Então você percebe como ele não tem muito borrão nele, e a opacidade é muito pequena. Então isso adiciona um pouco desse pop tridimensional a ele. Podíamos fazer o mesmo com o nosso círculo. Podemos fazer isso sair um pouco mais à distância do objeto e talvez adicionar um pouco de borrão. Então, nada grande. Podemos mantê-lo plano se quisermos, ou podemos adicionar um pouco de sombra. Então esse é o processo básico de como eu criei o trabalho gráfico para acabar usando. Tenho isto no seu próprio quadro de arte. Então, quando eu exporto isso, eu posso exportar isso como um PNG, e há uma maneira ainda mais fácil se você estiver usando outros programas adobe para montar seu layout cada usando adobe ilustrator para fazer um Web design, você apenas Traga isso para dentro. Você está pronto. Vamos usar o Adobe X T, e vai ser muito fácil trazer esse recurso porque vamos copiar e colá-lo no Adobe X'd quando estivermos prontos. Então agora temos alguns ativos básicos para trabalhar. Nós temos o conjunto de design de ícones que criamos anteriormente na classe, e há vários deles são pensados que poderia ser muito útil para este site. E eles têm um estilo agradável, limpo e plano que vai funcionar muito bem com a marca que temos. Então eu peguei esses ícones e comecei a trazê-los para usá-los. E mais uma vez, se estiver usando outro layout Adobe Producto, seu Web design que você obtém é copiar os ícones e colá-los em qualquer lugar que você estiver projetando. 51. Adobe Xd - curso de crash: Então eu queria mostrar a vocês o que nós vamos acabar com no final do projeto. Então isso é meio que estamos animando. Estamos apenas fazendo alguns cliques onde podemos mostrar ao cliente como as coisas voam ou animam. Poderíamos mostrar-lhes o que acontece quando você clica em um botão específico, como o botão assistir vídeo ou o que acontece quando eles clicam no botão Iniciar processo agora. Então queríamos mostrar ao cliente como Ah, o usuário flui pela página de destino e é assim que vamos fazer. É por isso que eu usei o Adobe X'd para fazer layout da Web porque não só ele é projetado para isso, e é muito fácil criar formas e texto, também é muito fácil estabelecer nossas cores e nossos códigos hexadecimais. Também é muito fácil estabelecer nossos estilos de personagem, então estamos estabelecendo uma manchete ou estabelecendo o tamanho dele. O tamanho do ponto estava começando a estabelecer essa hierarquia de tipo Web aqui mesmo no programa . É muito fácil exportar isso para o desenvolvedor. Vamos abrir um novo documento e eles têm alguns tamanhos embutidos na Web. E, claro, podemos sempre fazer a versão para iPhone. Mas isto é suposto ser uma espécie de página de destino da área de trabalho. Vamos clicar na Web 1920 por 10 80. Isso vai ser o tamanho da janela padrão do seu navegador de alta resolução. E este é o tamanho básico. Então eu vou fazer um rápido curso intensivo de 10 minutos sobre Adobe X'd para aqueles que ainda não foram para este programa. Este é um novo programa para alguns de vocês. Se você já esteve no Adobe X T e você fez um projeto comigo em uma classe que eu ensino uma classe onde eu ensino Adobe X'd e detalhes nós fazemos um design de aplicativo móvel. Se você já fez essa aula comigo ou já teve experiência anterior com o Adobe X, sinta-se à vontade para pular essa lição em particular e entrar na seção de layout deste. Então, bem-vindo ao Adobe X'd. Se o seu novo, este curso intensivo de 10 minutos lhe dará exatamente o que você precisa para fazermos um layout básico juntos. Então, fomos em frente e abrimos o novo documento. Temos um quadro de arte de 1920 que é chamado de placa de arte, e você pode criar muitas placas de arte diferentes. E é aqui que vai funcionar com este quando começarmos. Então este é o nome do seu quadro de arte. Você pode renomeá-la Página inicial principal e Adobe X'd vive com quadro de arte. Então vamos acabar criando vários quadros de arte diferentes e eventualmente conectá-los a todos . Então, se você está acostumado com programas de adobe, eles vão estar muito acostumados com o Adobe X'd. Você vai notar o quão simples as interfaces de usuário U.I.R U.I.R de adobe Extinct é um programa muito simples. Não há uma tonelada de ferramentas para aprender ou descobrir em comparação com o ilustrador ou o Photoshop. Então você tem algumas formas básicas aqui em sua barra de ferramentas que você cria e cria quadrados e círculos, elipses, todos os tipos de formas diferentes. Existe bastante padrão quando se trata de fazer Web, construção Web e layouts Web e você vai notar por padrão, ele adiciona esta borda. Então, se você aqui à direita aqui, é tipo de seu painel de propriedades, nossa área de propriedades, e por padrão ele faz uma borda para que possamos un conectar a borda. Se você quiser e, em seguida, apenas ter o preenchimento e, em seguida, basta fazer um preenchimento. Assim como o Adobe Illustrator Photo Shop, é bem simples. Uma vez que você tipo de dominar alguns desses outros programas, então você começa a nossa ferramenta de movimento selecionar. Ambos iam remover a borda e adicionar um preenchimento. Será que este ar apenas formas básicas? Poderiam se mover um ao outro. Vamos fazer uma cor ligeiramente diferente. E há um curso, um sistema de camadas e Adobe X'd também, e você pode descer as camadas. É um pouco mais difícil de encontrar. Hum, se você descer aqui para este pequeno ícone que parece ser camadas, clique sobre isso e então você será capaz de ver todas as camadas diferentes. Aqui nós vamos para baixo para formas, você será capaz de tipo de reordenar estes no sistema de camadas. Se eu quiser trazer o triângulo para baixo no sistema Larry e apenas arrastá-lo para baixo, você pode descer e você pode fazê-lo por todos os itens, apenas imagens, formas ou texto. É assim que você chega ao sistema de camadas aqui no Adobe X'd, mas vamos usar alguns atalhos para tipo de alterar as camadas aqui, você faz meu comando colchete esquerdo e colchete direito para movê-lo para cima e para trás. Então, assim como qualquer outro programa da Adobe, você poderia ser capaz de apenas alterar as camadas. E também há uma ferramenta de pino no Adobe X'd, e funciona muito semelhante à loja de fotos e ilustrador. Então basta clicar e você será capaz de criar todos os tipos de formas diferentes, assim como nós dio fizemos um ilustrador e você pode mudar a borda, o que mudará o traçado. Então, a fronteira é basicamente o seu derrame, e ele pode mudar o tamanho logo abaixo. Então vamos fazer um golpe muito grosso. E você também pode alterar as maiúsculas exatamente como faria no painel de traçado e no Adobe Illustrator. Você pode fazer isso aqui em baixo. É assim que se muda o boné. Então precisamos de uma boa tampa redonda e temos algumas tampas arredondadas agradáveis fora da borda do nosso curso. Se vingar de uma sombra. Então vamos mudar o algo preenchido brilhante, e nós poderíamos adicionar uma gota quebrada a este objeto apenas clicando na sombra, e ele vai ter alguns botões de entrada. O X será o seu X e Y serão a distância do objeto, e B será o seu borrão. Então, se você tem zero borrão, vai ser uma sombra plana. E para mudar a transparência de uma sombra, você tem que clicar duas vezes nesta camada. E é aqui que você muda a transparência. Então, se eu quiser muito forte, eu posso digitar um número. E também você pode mudar a cor da sombra. Então é um pouco diferente do que ilustrador e loja de fotos. De certa forma, esse tipo de condensa tudo em um painel neste painel de aparência em vez de ter um painel de traçado separado em todas essas coisas. Apenas meio que tudo condensado aqui para você, então você pode rapidamente fazer alguns efeitos. Então vamos voltar para o nosso quadro de arte e vamos apenas criar algumas formas básicas e criar uma barra superior aqui na borda de clique e, em seguida, apenas olhando para uma barra e digamos que queremos adicionar um logotipo na parte superior. Então, o que vamos fazer, você pode trazer qualquer ativo arrastando-o da sua área de trabalho e carregando-o no espaço aberto e ajustando a imagem se quiser trazer um ativo vetorial. Então vamos dizer que queremos trazer o nosso logotipo. Eu vou pegar este arquivo de logotipo e eu vou pegar o branco porque ele vai aparecer melhor sobre uma fronteira. E eu só vou copiar. E se você apenas colá-lo aqui, ele vai trazê-lo automaticamente. Se você quiser torná-lo maior, mantenha pressionada a tecla shift e arraste-o para torná-lo maior. Podemos copiar e colar objetos termina, ou você pode arrastá-los para dentro. E se eles são objetos vetoriais, eles permanecem vetoriais, o que é muito bom. Então vamos dizer que queremos criar um sistema de menu rápido. Eles têm uma ferramenta de texto como qualquer outra ferramenta. Vamos avançar digitando em muitos, e queremos fazer isso maior. Então estamos aqui em nosso painel de texto quando vamos fazer isso um pouco maior, vamos encher, torná-lo branco, e podemos mudar todo tipo de coisas. Podemos alterar o espaçamento entre os personagens. Poderíamos mudar a liderança ou o espaçamento entre as linhas. Um par de opções de alinhamento diferentes Há todas as maiúsculas. Há um sub-script, tudo o que você veria em uma área de texto normal. Então vamos dizer que eu quero ter quatro itens de menu diferentes que eu possa fazer o longo caminho e copiar e colar ou fazê-lo um Knop sh em arrastar e criar para, tipo, este e, em seguida, tipo de Maine e nós encontramos o espaçamento. Ou há uma coisa muito legal que eles têm um adobe x t que eles não têm outros programas adobe, e isso é algo chamado de grade de repetição. Então eu vou clicar nesta ferramenta de grade de repetição bem aqui para repetir grade, e eu vou ser capaz de expandir isso, e ele vai copiá-lo repetidamente, como um padrão. Então 123 Vamos em frente e fazer cinco. Por que não? E antes de eu un agrupar a grade ou fazer algo assim, eles têm uma área onde você pode ajustar o espaçamento ou preenchimento ou calha. Eu acho que você poderia dizer mudar a calha sobre isso também, para que eu possa estender todo o caminho para fora. Foi ótimo sobre isso é que eu posso mudar o tamanho da fonte neste 1º 1 Ele vai mudá-lo globalmente. Então, se eu não fizesse todos estes menores, eu apenas faço 22 e isso os tornou todos menores. E é muito legal porque você pode fazê-lo horizontalmente ou você pode arrastá-lo verticalmente, e agora você pode criar tantas rosas que ele ganhou também. Então, isso é perfeito para criar e layout de várias colunas, e queremos que as colunas sejam do mesmo tamanho. Digamos que temos uma caixa aqui. Teríamos um layout de três colunas. Vamos fazer um Phil cinza claro, e nós queremos fazer alguns cantos arredondados para torná-lo bonito e liso. Temos a mesma coisa que temos um ilustrado. A ferramenta de canto arredondado estava indo em torno dos cantos. E digamos que eu queira repetir isso três vezes, clique na grade de repetição e repita assim. E então eu posso voltar e estender as calhas para fora. E eu tenho um layout de grade de três colunas exatamente como esse, e você vai notar que eu tenho guias inteligentes em É ativado por padrão. Vai me ajudar a encontrar o ponto central dos documentos ou ali estaria o ponto central. Também diz os tamanhos dos pixels na parte superior na parte inferior. Então você notou como as áreas cor-de-rosa mudam quando eu levo para cima e para baixo. E também você pode ver o pixel, nós Ah, calha à esquerda e à direita também. Portanto, é muito, muito útil saber o tamanho do documento geral em termos de pixels dessa forma. Então, o que? Sam, estou pronto para despreparar isto. Estou pronto para mover estes em diferentes formas e tamanhos. Eu posso simplesmente ir para a grade não preparada, e agora eles são ativos individuais e eu posso mudá-los. E eles não mudam globalmente lá seus próprios ativos individuais. Então essa é provavelmente uma das razões mais fortes e melhores para usar o Adobe X'd. Isso é ferramenta de repetição da grade? Você poderia fazer layout da Web? Super duper rápido você sistema. Digamos que queremos mudar a sarjeta Strack que dentro e em grupo a grade, e agora eles são individuais nos recursos do menu. Então, se eu quisesse fazer um um pouco maior, eu posso selecionar este e torná-lo Helvetica negrito e ter que ser um tipo diferente de sistema de menu e também com ícones. Podemos fazer um ritmo de cópia Nikon que ícone bem aqui, e podemos até mudar a cor do dedo do pé branco. Então nós temos isso aqui onde você pode ter Grady INTs e Adobe X'd. O que não era o caso antes. Mas agora você pode argumentar para criar uma forma básica. Vá para preencher e você vai notar que você tem uma opção suspensa quando você clicar em seus relógios duplo clickers para que eles possam fazer uma cor sólida, um rádio ou um radiante linear. Então, se você quiser fazer um radiante linear, você pode e você também pode mudar a direção disso também. Então, o que queremos fazer com seu ícone que temos nele automaticamente salvou o pouco Grady INTs que eu tenho aqui. Queremos que isso apareça. Ícones brancos foram para selecionar nosso ícone neste interruptor remoto, o radiante para uma cor sólida, e lá está seu ícone branco. Então, para grades, o que você quer fazer é selecionar o quadro de arte superior, e quando você selecionar o nome da placa de arte superior, você terá um tipo extra de área de opção bem aqui no seu lado direito. Vai ser uma grade fria. Podemos clicar na grade, e isso vai nos dar um layout padrão de grade de 12 colunas com tipo de sua calha padrão, e você pode mudar a calha com para que você possa fazer a sarjeta com muito mais dramática ou você pode apertá-la e você não não tem apenas o layout da coluna. Você também tem um módulo quadrado padrão modular. Eu acho que você poderia dizer grade onde você tem apenas os quadrados, que poderia ser útil quando você está fazendo muito detalhes de layout muito fino. Mas vou ficar com esse layout de 12 colunas. Você pode mudar a cor para que não seja o forte, que ele possa continuar a projetar e não ter que interferir com qualquer coisa para desligá-lo, selecione o nome e apenas unclip cred. Poderíamos arrastar uma foto aqui e redimensioná-la olhando ao redor dos cantos. Se você só quer virar uma esquina, segure. Opção a tecla de opção, e você poderia apenas fazer um canto de cada vez para que você possa trazer uma foto exatamente como essa, onde podemos fazê-lo em um recipiente que tudo o que você faz é criar uma forma. Então vamos dizer que temos a ferramenta de caneta e queremos criar um tipo de, ah estranho ob classificações de forma longa criando uma forma, nada muito extravagante. Poderíamos voltar e editar as maçanetas se quiséssemos. Então vamos dizer que queremos arrastá-lo para esse tipo de forma estranha. Então o que vamos fazer é arrastar a foto para qualquer forma, e ela tem um corte para nós, o que é legal. Você pode clicar duas vezes na imagem para alterar a posição ou clicar fora e alterar toda a forma ao mesmo tempo para poder trazer fotos. Assim, você poderia trazer um homem usando caixas padrão. Você poderia fazer isso. Você pode criar uma grade de repetição, ter um layout de imagem de três colunas e elas podem arrastar fotos diretamente no Boom. E quando você cria uma grade de repetição, ela colocará a mesma imagem em todas elas. Ou você pode desvincular a grade e o agora suas caixas individuais, e você pode alterá-las para que eu possa ver como é fácil usar o Adobe X'd. E agora eles são elementos de caixa individuais, e podemos adicionar tipo e falando de tipo temos uma ferramenta de tipo padrão. Podemos clicar e arrastar e criar uma caixa de área de tipo se quisermos ter um monte de luz tipo diferente . Então, digamos que temos muitos tipos aqui. Fazemos nossa caixa de texto, mas temos nossa caixa de área de tipo que podemos recolher e fazer colunas de informações. Você também pode simplesmente clicar em vez de clicar e arrastar para criar um texto de área. Boxers como este, podemos clicar uma vez e criar apenas uma linha do tipo. Então a manchete vai aqui. Isso é ótimo para manchetes, e então você pode pegar esse pequeno elemento e pode torná-lo maior. Ou você pode torná-lo maior aqui ou fazer o que eu faço. E há um pouco de um atalho que Ideo, que é a mudança de comando direita e esquerda maior do que em menos de sinais que é Cat me ajuda a mudar. É só um atalho de teclado. Isso são manchetes. Então você tem dois corpo de tipo diferente da ferramenta de área de texto. Então você só tem uma caixa de tipo padrão, bem como para manchetes. Se você quiser fazer quebras de linha manualmente nas manchetes, você pode e você pode ir até aqui e alterar o espaçamento. Mudando isso para 99 e alinhá-lo Então você tem suas ferramentas de linha que são realmente boas. Ajudar você a encaixar na grade. Então este é o muito, muito, muito básico do Adobe X'd. Não é nada. Nada para Berlian é excitante. Nós vamos estar fazendo um layout muito polido aqui em um minuto. Mas eu queria dar àqueles que nunca estiveram no Adobe X'd, ah, chance de tipo de aprender o básico que vamos falar sobre ativos e criação são ativos diferentes e também nossos estilos de personagem, componentes e cores. Falaremos sobre essa guerra no projeto, mas isso é o básico. Então vamos dizer que queremos criar uma segunda página, modo que é como eles clicam no Menu um e eles vão para uma página diferente. O que você vai fazer é usar a ferramenta artboard, que é uma das suas últimas ferramentas para usar e basta clicar na ferramenta artboard. E eles vão ser capazes de clicar, arrastar e criar qualquer tamanho que você quiser, ou você pode clicar duas vezes nas proximidades. Se você clicar duas vezes, ele irá copiar o mesmo tamanho de placa de arte clique duplo ou apenas clique uma vez e podemos criar quantos você quiser. Você pode criar todos os tipos de sub-páginas diferentes de seu design, e então você pode vincular todos estes acima. Eventualmente, isso vai ser no modo protótipo. Nós não vamos tocar nisso na seção muito básica vai fazer isso. Quando o fizermos, nosso projeto será capaz de fazer isso também com ativos. Vamos falar sobre ativos no projeto onde podemos nos conectar globalmente, criar estilos globais, cores globais. Então, se você mudar uma cor aqui, ela irá mudá-los em todas as placas de arte ao mesmo tempo. Então, essa é uma ferramenta muito útil do Adobe X'd. Então, agora que cobrimos o básico, vamos direto para o nosso projeto. 52. Página de sites no Adobe Xd - Introdução: Então eu tenho uma manchete que vamos usar para a página de destino. Nós também temos este botão de vídeo do relógio que de alguma forma precisamos incorporar nesta metade superior do design. Então vamos começar a trazer algumas de nossas cores. Então nós temos nossas cores aqui que podemos adicionar e nós estamos no painel de ativos, então você começa a ativos clicando aqui em baixo nos ativos nós vamos clicar sobre os ativos, e nós vamos vincular alguns desses ativos. Vamos trazer todas as nossas paletas de cores que desenvolvemos um ilustrador de adobe e temos apenas um duplo clique em nossa amostra e pegar esse código hexadecimal e trazer o código hexadecimal dentro ou melhor, fazer isso um por um para todos eles. Ou podemos copiar e colar isto aqui e digamos que estas amostras de ar já. Então deixe-me criar vidas. Os relógios estão pegando a ferramenta conta-gotas que vamos tirar da fronteira. Vamos ter um Phil normal. Então todas essas suas vidas assistem e vê a ferramenta conta-gotas para amostra. Vou colocá-lo em algum tipo de ordem de cores baseado na sombra que eles são, eu poderia selecionar todos esses. Vou colocá-lo em algum tipo de ordem de cores baseado na sombra que eles são, Isso é o que é realmente legal. Então todas as minhas amostras diferentes selecionadas que podem clicar neste sinal de edição. Vai inserir automaticamente todos os códigos hexadecimais aqui para nós. Tudo o que eu tinha que fazer era começar apenas criar uma amostra e, em seguida, clicar em adicionar, e você pode adicioná-lo à lista. Então, digamos que eu crie uma nova cor. Mike, eu quero uma cor diferente para isso. Vamos fazer, Ah, outro tom mais escuro de azul. Então vamos dizer que um adicionar isso que eu vou ter que fazer é ter este clique selecionado em adicionar, e você vai adicioná-lo aos seus estilos globais para que você sempre tenha acesso ao seu paladar. Ou você pode clicar com o botão direito do mouse e excluí-la se você não quiser mais essa cor. Então, estamos mais amplos trazendo nossos ativos lentamente. Então pensei, o que fazemos é ter um fundo brilhante, vívido e colorido. Eu realmente quero pegar as pessoas. Eu não quero usar um monte de branco aqui porque eu realmente quero agarrar as pessoas e ter paixão e amor e muitos roxos de ponte profunda acontecendo. Então vamos pegar nossa ferramenta quadrada e apenas criar um plano de fundo. Vamos em Click the Border e o que podemos fazer é que temos nossas paletas de cores aqui podemos selecionar. Podíamos mandar isto até lá atrás. Nós provavelmente queremos fazer o nosso tipo branco. Poderíamos até adicionar isso como uma cor branca apenas para que ele possa facilmente selecionar essa cor. Não temos que percorrer todo o caminho até aqui. Este relógios. E se adicionássemos um ligeiro radiante a esta causa? Neste momento, é apenas uma única cor plana. E se nós selecionamos Phil e fomos até aqui e em vez de cor sólida, vamos fazer um rádio Grady int e cores do seletor de chumbo. Então, para a cor superior que eu queria ser são cores muito brilhantes e vívidas. E aqui, gostaria que fosse a nossa cor mais profunda. Ele vai pegar esse certo ou aquele que vai estar aqui e apenas torná-lo pouco mais escuro, apenas assim, para criar um tipo de ambiente rico exatamente como esse. Então nós só temos um rádio, graniny ele indo em nosso quadro de arte, e agora vamos em frente e colocar todo o texto básico definido para fora porque eu não quero fazer muitos gráficos até nós descobrirmos o texto, que é o número um coisa mais importante com design de layout e a web é obter esse texto na posição certa e o tamanho certo primeiro. Em seguida, podemos adicionar todas as fotos e ilustrações dela, para que não tenhamos o nosso logotipo. Então, como aprendemos, poderíamos apenas copiar o logotipo em formato vetorial no Illustrator e apenas colá-lo diretamente , queremos encontrar o tamanho certo para um logotipo, e você pode precisar manter a tecla shift pressionada para obter a escala dimensionalmente. Quero ter certeza de que temos uma boa margem. Nós não queremos ter um muito apertado ou muito perto da borda, então vamos tentar encontrar a margem direita dela, e isso é quando alternar nossas grades vai ser uma ótima idéia. Então, selecionar nossas placas de arte poderia um alternar na grade. Este é o nosso padrão de 12 colunas. Layout típico, você vê. Então eu vou manter essa sarjeta padrão começar a encontrar maneiras de juntar tudo isso , então sinta-se livre para alternar o quanto você quiser. Grelhas realmente ajudam você a achar isso certo. Posicionamento. Vamos em frente e adicionar o sistema de menus. Vamos fazer isso usando ferramentas de grade de repetição. Vamos pegar a ferramenta dela. O que é fazer menu Uma vez que este é o item de menu um, é um texto muito grande, então eu vou apenas reduzir o tamanho. Poderíamos ir e tentar 22 pontos, e às vezes esta é uma grande janela do navegador. Isso é como 1920 pixels, então às vezes é bom tipo de zoom para obter uma melhor perspectiva de tamanho. Vamos trazer isso. Então isso é tamanho de 22 pontos e eu vou dizer que eu quero obtê-lo perfeito. Então vamos usar a nossa ferrovia e vamos em vez de uma luz. Vamos fazer uma ferrovia média média e vamos dizer que eu quero repetir isso Em vez de ter copiar e colar, eu vou usar nossa ferramenta de grade de repetição, clicar na grade de repetição e vamos arrastá-la e criar 12 Vamos fazer quatro itens de menu. O que é isso que é um bom espaçamento. Entre eles estavam 2 50 pixels de espaçamento, e podemos, é claro, conversar ao longo de nossa grade para encontrar o posicionamento certo do nosso menu. Meio que ter isso ao longo de ficar aqui. Eu queria uma espécie de colisão, mas eu queria ir além daquela sarjeta. Ele também nos arrastou para encontrar o ponto central entre o logotipo e o tipo, e lá está ele, bem ali, apenas arrastando até que ele tipo de cliques dentro Portanto, há o nosso layout básico do menu. Vai dizer Quer ter algum tipo de linhas divisórias diagonais? Vamos criar isso. Usando uma ferramenta de linha, eu ia criar uma linha muito simples que talvez precisássemos ampliar. Isso está criando uma linha reta simples. Você poderia manter pressionada a tecla shift para criar uma linha agradável, simples perfeitamente reta. Vamos fazer um boné cercado agradável para isso e torná-lo nossa cor branca. Ou poderíamos fazer uma espécie de cor branca, tão tipo de nosso roxo claro. Não será se você o fez branco. Competiria com o tipo, mas se fizermos um pouco deles, um branco que combina com o fundo, é um pouco mais leve. Não compete tanto, por isso, diminuindo o zoom. Talvez eu precise fazer isso. O Vickers. Vamos fazer um peso de quatro tempos ou até mesmo um três. Podemos usar a ferramenta de repetição de grade aqui novamente para nos poupar de ter uma cópia. Tudo isso, vamos precisar de três linhas divisórias. E vamos mudar a sarjeta sobre isso muito bem ali e podemos despreparar a grade, e agora eles são tratados como pequenos elementos individuais. Poderíamos mudar o espaçamento aqui para que, agora, seja igual espaçamento entre cada um . Mas o nosso tipo é um pouco mais longo. Então vamos agrupar a grade aqui. E eu só vou mudar alguns desses elementos juntos para que não tenhamos tanto espaçamento. Nós somos realmente apenas nossas idéias, realmente fazer o design ir para que nós não temos que ser tão técnicos. Neste ponto, nós podemos realmente tipo de obter o projeto aprovado primeiro, e então nós podemos ficar realmente técnicos sobre espaçamento e pixels e tudo mais. Então vamos adicionar um pequeno ícone para a casa porque temos isso disponível. E eu acho que ícones e dicas visuais são sempre úteis quando se trata de apenas ter texto simples ou ter uma sugestão visual ou ícone com ele sempre ajuda. Então vamos pegar nosso ícone de casa. Vamos em frente e fazer isso branco porque sabemos que queremos ser branco. Vamos fazer uma amostra branca. Então, agora, quando eu copio e colo, já é a cor que nós gostamos e eu vou torná-la menor. Então vamos trazer o nosso ícone. Está ficando um pouco menor e juntando tudo bem ali. Agora temos um pequeno ícone de casa. Temos o nosso cardápio. Olha o quão rápido isso está se juntando. Vamos fazer uma pausa e vamos fazer a foto a seguir. 53. Página de sites no Adobe Xd - fotos: antes de trazermos a foto. Vamos fazer mais uma coisa. Vamos tipo de criar um Mas aqui vamos querer ter um vídeo de botão de assistir, então não queremos torná-lo maior do que a manchete. O título é geralmente o primeiro, não é torná-lo um pouco menor. As palavras estavam começando a estabelecer alguma hierarquia de tipos, e podemos salvar todos esses e nossos estilos de caracteres quando terminarmos com a primeira página . Assim, quando criamos todas as outras páginas, podemos facilmente adaptar nossos estilos e tamanhos de personagens. Crie um botão. Só vamos pegar uma ferramenta de retângulo, criar um botão. Vamos enviar isso para trás no sistema de camadas e vamos torná-lo uma cor de alto contraste. Então, se fôssemos fazer com que esta cor clara aparecesse muito bem. Mas é da mesma família de cores, e por isso não tem tanto contraste. Então vamos tentar fazer essa cor de pêssego que poderia ter um monte de contraste lá. Vamos ter que mudar o tipo para que esse botão realmente, realmente apareça em mim. Queremos que as pessoas vejam o vídeo. Vamos fazer alguns cantos arredondados agradáveis para isso. Não queremos nada muito dramático. Talvez uma pílula possa funcionar ou apenas causar uma pequena causa. O que era popular é sobre isso. No passado, eu tinha um clique fora da fronteira, e agora estamos começando a ver mais pessoas. Você bordas retas ou pílula. Tão dramático ou não, você não está vendo muitas pessoas usando isso entre a forma da pílula. Então, vamos ser dramáticos ou até o fim. Então vamos ver que estilo vai funcionar quando começarmos a integrar algumas das outras ilustrações. E pode ser o estilo arredondado vai funcionar. Mas vamos fazer isso por enquanto. Queremos fazer isso legal e ousado, ou você sabe que esperar pode funcionar muito bem. Então vamos fazer o botão ainda um pouco menor. Então pegue os dois elementos. Você pode até mesmo agrupar elementos que estou agrupando este botão criado. Eu não fiz a ferramenta de área de texto porque o tipo muito ferramentas vai agir de forma diferente quando eu tento redimensionar o botão. Então agora eu posso fazer isso para redimensionar ou posso pegar esses dois elementos e apenas manter a tecla shift pressionada para que eles escalem dimensionalmente. Então, desenvolvemos um tipo de tipo que podemos usar para a manchete. Então vamos ver como é o Pacifica. E é quando temos que ter muito cuidado aqui. Então é muito apertado. Então vamos soltar o espaçamento entre os caracteres aqui em nosso painel de texto. E o que estou descobrindo aqui é que há muita competição entre o logotipo e a manchete , então podemos fazer apenas uma palavra combinando com a manchete de Pacific Oh, e fazer o resto da cara muito simples e apertada. Ou podemos pegar nosso tipo de trem e usar mais de um avião. mais grosso e Rostomais grosso e apertado. Espere. Você nunca quer competir. Você nunca quer ter elementos brigando uns com os outros. Então, se usarmos extra negrito e, em seguida, apertar o espaçamento novamente, então vamos dizer que sim. Talvez 104 Algum bom espaçamento que o torna menos competitivo com a luta, porque isso é uma parte muito forte do logotipo. Nós não queremos competir com ele, ou você pode fazer uma palavra que Pacific. Oh, se conseguires pô-lo a funcionar. Mas, por enquanto, vamos manter as coisas simples. Pode haver outra chance de trabalharmos no Pacífico. Oh, não é necessário. Mas é um ativo ou outro tipo de letra que escolhemos que podemos usar. Então vamos trazer uma ilustração ou uma foto ou algum tipo de elemento o que eu quero trazer como nós temos essa bolha realmente legal Eu pensei que era preciso trazer essa bolha para dentro E aqui está um tipo de refinado que já tem com o tipo de algumas cores que eu gosto e, você sabe, nós apenas criamos isso usando Adobe Illustrator. O que eu posso fazer é copiá-lo e colá-lo, e eu quero torná-lo grande tipo de torná-lo um elemento de fundo aqui, e eu vou apenas enviá-lo para trás no sistema de camadas para comandar colchete esquerdo. Mande-o de volta para cá. Então eu só quero destacar o logotipo, mas também a manchete. E assim ele realmente se destaca entre este Grady int C. Então é capaz de tipo de realmente defini-lo. Eu quero trazer uma foto de pessoas apaixonadas, algum tipo de foto para amarrar todos esses elementos juntos e eu meio que quero usar a mesma forma arredondada. Então, vou ser ilustradora. E sempre que você tem forma livre Grady int ferramentas e você está usando esses tipos de efeitos especiais e ilustrador, às vezes, quando você copiar e colar para moldar em sua não vai permitir usá-lo como um recipiente de fotos como podemos outras formas que criam no Adobe X Nós vamos fazer este tipo de forma mais plana e é um pouco de uma forma diferente. Então nós estamos tendo diferentes formas não foram apenas copiar, colar a mesma forma. Só vou copiar isto. É uma cor sólida, não há efeitos nele, e vamos ser capazes de usar isso como um recipiente. Então vamos tirar a foto que eu já escolhi em pixels e arrastá-la para dentro, e ele vai ir em frente e cortá-la para mim, e eu posso clicar duas vezes nisso e tipo de mudança. O posicionamento meio que tem um tiro mais apertado sobre os pombinhos. Não precisamos tanto das montanhas quanto das pessoas. Esse é o ponto de conexão emocional. Agora podemos clicar sobre isso e meio que arrastá-lo para fora aqui. Eu adoraria que esses dedos se sobreponham de alguma forma. Agora temos essas formas sobrepostas, e podemos adicionar sombra a essa camada para a camada de foto. Se quiséssemos. Vamos fazer com que seja uma distância mais larga para que você possa ver. Está na minha seção de sombra para torná-la uma pequena sombra lá, então há um tipo de configuração básica. Vamos fazer isso uma foto mais apertada, e também podemos mudar a forma um pouco aqui. Pouca flexibilidade com isso agora, como como este tipo de sangra, então parece que é contínuo em vez de apenas como ter esta forma de colheita sangrando perfeitamente. Sangrá-lo meio que dá um olhar contínuo para ele. Então este botão, eu não estou convencido de que o preto é a escolha de cor certa porque você tem essas belas Hughes é cores de tom de jóia, cores do pôr-do-sol, e você tem este preto e ele só parece maçante. Vamos ver se conseguimos encontrar uma boa cor que vai ficar bem no pêssego e também complementar um pouco do roxo. Vamos descer a nossa lista. Aqui temos este roxo profundo que pode funcionar muito bem, apenas assim e também ícones usá-los. Ícones são fantásticos. Formas de adicionar pontos de contato adicionais para usuários são dicas visuais para usuários. Então assista ao vídeo. Acontece que temos agora um fantástico ícone de jogo aqui e ainda estamos trocando esse dedo todo branco, porque eu acredito que ele vai ser continuamente em todo branco. Vamos fazer com que seja a cor roxa que já temos, e eu acho que isso realmente ajuda a sair. Nós também podemos adicionar um pouco de uma sombra para o nosso botão aqui, fazer um pouco de borrão a pequena dimensão para o nosso botão. Também podemos fazer a mesma coisa com o nosso tipo. E vamos mudá-lo para zero e apenas ter um pouco de borrão sobre isso. Nada grande, nada enorme. Também podemos alterar a opacidade de qualquer objeto. Digamos que achamos que isso é muito forte. Podemos mudar o na aparência. Selecionamos o objeto. Poderíamos mudar a aparência, a opacidade a qualquer momento para torná-la menos forte. Mas queremos reduzir a capacidade, essas pequenas sutis mudanças. Claro, precisamos alternar nossa grade de vez em quando e ver como tudo está alinhado . Então há. Está se juntando. Enfraquecer agrupar esses elementos juntos, podemos enviá-los por aí, mudar o tamanho. É uma ótima página de aterrissagem. Temos um apelo à ação. Temos hierarquia de tipos claros. A chamada à ação clicará em um vídeo que aparecerá para que possam assistir a um vídeo e obter uma boa introdução do processo e do site. E isso é realmente o que queremos fazer é levá-lo ao vídeo porque o vídeo se converte muito bem. Então, sempre que podemos obter vídeo na parte superior de um site, o melhor vídeo sempre se converte muito bem, porque se você pode responder tantas perguntas com um simples vídeo de um minuto em vez de digitar e fotos, pode levar muitos para explicar o que você poderia facilmente explicar em vídeo. Então, o vídeo é realmente importante para este design. É o principal motor deste design 54. Página de sites no Adobe Xd - Detalhes de Landing: tem em nossa página de destino. Precisamos descrever o processo dela no texto também. Não só tenho o vídeo e é isso. Também precisamos de um botão de inscrição para Precisamos conseguir que as pessoas acessem o site principal para que possam realmente entrar e criar uma conta. Então, uma coisa que queremos fazer é que queremos que isso seja herbal de rolagem porque agora é apenas a metade superior da página está acima da dobra, como as pessoas da indústria chamam e queremos estender isso para baixo. Então vamos selecionar o quadro de arte. O nome vai nos dar uma chance de estender isso. Vai ser capaz de dobrar o tamanho e fazer rolar. Poderíamos fazer sites de paralaxe. Desta forma, você pode fazer rolar todo o caminho até o fundo. Você pode ver este exemplo aqui de um tipo de um em que eu tipo de você pode rolar todo o caminho para baixo, então nós só vamos precisar provavelmente dobrar a página porque nós queremos ter uma seção sobre o processo e, em seguida, um botão. Então não precisamos ter nada por muito tempo. Então vamos adicionar um pouco do nosso processo aqui. E temos alguns ícones que podemos usar para nos ajudar a explicar o processo. E nós temos nossa incrível pequena ilustração que nós queremos tipo de adicionar. Isso é como um pouco de sabor. Vamos pegar o que fiz mais cedo. É uma espécie de cores um pouco mais claras porque quando eu coloco no fundo branco, eu acho que ele se mistura muito bem. Então, eu só vou trazer isso para cima. Posso copiá-lo e colá-lo diretamente no Adobe X'd. E nós temos uma boa ilustração, realmente ajudou a atrair os usuários no que eu vou fazer. Tem que fazer turno de comando. Estou segurando o comando e o turno e depois arrastando. Se você arrastar um elemento agrupado ou em várias camadas do Illustrator e não manter essas teclas pressionadas, ele irá redimensioná-las um pouco descoladas. Então, basta fazer deslocamento de comando e, em seguida, arrastar fará isso dimensionalmente se for um objeto de várias camadas no Illustrator. Então agora precisamos ter um layout de três colunas. Temos um processo de três etapas que precisamos fazer, você precisa explicar. Então vamos fazer ir em frente e criar nosso layout de três colunas. Mas uma coisa que eu queria fazer primeiro é ir em frente e copiar isso. Tire a sombra e vamos trazer nosso púrpura profundo e eu preciso ter uma manchete aqui. Então vamos fazer nosso processo e estamos começando a desenvolver que hierarquia visual e hierarquias de tipo é exatamente o que estamos fazendo. Estamos estabelecendo o tamanho da fonte que precisamos para uma manchete. Que tipo de letra precisamos para o próximo passo para baixo título. E estamos fazendo isso agora. Então não vamos competir com a manchete principal. Vamos fazer uma boa, hum, média, talvez até uma luz. Está fazendo uma luz e fazendo um pouco menor. Não precisamos ter o mesmo tamanho das manchetes principais. Então este é o nosso H um, nossa principal manchete. Isso provavelmente pode ser Rh dois, que é a manchete para as coisas após a manchete principal, então estabelecendo essa hierarquia de tipos. Certo, então vamos fazer nosso layout de três colunas. Então eu acho que eu gostaria de ter ícones com círculos nele, então nós precisamos criar nossos elementos de tipo e uma maneira que nós poderíamos fazer isso é fazer grade de repetição e torná-lo mais fácil para nós mesmos. Então vamos tentar isso. Temos o nosso pequeno ícone aqui, um tipo de ferramentas ferramentas de tipo de área. Nós vamos clicar e arrastar para sobre a área que queremos ter estava indo digitar nosso texto. Talvez seja H dois. Vamos fazer um H três e ter uma pequena manchete aqui. Então faça o teste é a manchete principal para esta coluna. Vamos fazer isso ainda menor. Então vamos fazer. Vamos experimentar alguns tamanhos aqui. Vamos tentar 45. Vamos tentar 45. Vamos tentar um alinhamento central e precisamos estabelecer alguma cópia corporal ou algumas cópias de parágrafo , então este será o seu P. Se você está acostumado a codificar em CSS, este será o seu P ou a sua cópia principal do corpo. Então queremos fazer. Este pode ser um cinza claro, e queremos torná-lo significativamente menor. Vai ser o seu menor, algum do seu menor tipo no site. Vai ser o que você leria parágrafo quente, e vamos reduzir o espaçamento nisso. Não precisamos de muito espaçamento e vamos ajustar nossa coluna. Então estamos começando a ter esse tipo de parque ainda mais estabelecido. Nós já temos um H um e H dois e H três em uma cópia de parágrafo. Porque este tipo de tamanho, acho que é 33. Isso é bem grande. Vamos ver se conseguimos fazer 25 e depois desmoronamos isso, então só testamos alguns tamanhos do tamanho certo. Faça a linha central. Você tem algumas opções de alinhamento aqui quando ele seleciona vários objetos para uma linha central. E vamos fazer nossa útil ferramenta de grade de repetição dandy. Repita isso duas vezes. 12 recolhe as colunas. Então vamos arrastar os ícones dela. Então, para fazer o teste. Eu estava olhando para os ícones que desenvolvemos na aula e estava pensando naqueles que realmente ajudariam a complementar o item. Então o primeiro passo é fazer um teste. Então, o que? Acho que está testando. Eu penso em um lápis, algo assim. Então o que vou fazer é tornar a vida muito fácil para mim. Por isso, vou certificar-me de que vou para a Caminho. Vou delinear o derrame nisto porque quando o trouxermos sem o derrame, contorno . Ele vai você ir para ser capaz de ainda mudar o curso em Adobe X'd, mas ele só faz re dimensionamento um pouco difícil. Então eu só estou delineando o derrame. Pegue uma cópia. Faça isso branco. Claro, eu já tenho isso para você neste guia. Estamos fazendo tudo isso branco para que possa facilmente trazê-lo para dentro. Vamos fazer essa cópia branca e colá-la para fazer o teste. Arraste-o bem aqui. Faremos a mesma coisa e acharemos ícones para o próximo estágio. Então precisamos encontrar o ícone para o segundo estágio, qual é? Eles vasculham o banco de dados, então a lupa funcionaria perfeitamente para isso. Vamos copiar e colar. E, por fim, comece uma conversa que seria sua bolha de fala Micklewhite, Copiar e Colar. Eu não me importaria de tornar isso um pouco mais velho, então vamos ver se eu não consigo acender uma luz. Vamos fazer isso regular com um pouco de medo de que não seja visto muito bem à distância. Então vamos fazer isso e vamos apenas fazer alguns pequenos ajustes de tipo. Vamos fazer isso um 40. Apenas estabelecendo o tipo dela é fundamental. Agora é quando fazemos isso assim. Então estamos começando a ter algo acontecendo aqui. Deixe-me ver se eu posso adicionar um pouco mais de contraste que vai trazer isso à tona. Fazemos a nossa grelha, certificamo-nos de que tudo está alinhado perfeitamente. E vamos adicionar um pouco de cor aqui embaixo. Poderíamos copiar e colar disco radiante, trazendo para baixo. Está ficando um pouco mais leve. Poderíamos fazer desta cor ou desta cor apenas trazendo um pouco de cor que continuaria. Ou isso seria um rodapé. Você tinha algumas informações de contato de rodapé lá, e eu gosto desse visual arredondado. E é tipo de tema contínuo contínuo ao longo de tudo isso. Então não vamos ter bordas retas aqui. Quase me pergunto se podemos inclinar isso só um pouco. Então, apenas pescando este top, expandindo-o apenas um pouco de um ângulo. O que combina com o ponto em um? Só um pequeno ângulo. Nada muito excitante. Algo para agitar essa grade perfeita olhar apenas um pouco de um pouco de branco e talvez ir ao virar da esquina apenas um pouco mais sobre isso. Então apenas tipo de ver o design geral e capaz de tomar mais algumas decisões de design agora que eu estou vendo tudo juntos certificando-se de que temos margem suficiente para todo o nosso tipo. Então aqui está o que acabamos com muito rapidamente fomos capazes de juntar tudo isso. Temos um menu, uma foto, uma manchete. Temos algum tipo Harkey estabelecido, e agora podemos começar a configurar tudo. Então temos toda a cor configurada, e agora queremos ir em frente e configurar nosso tipo Arche para que não tenhamos configurado. Então, como salvá-lo para que quando começarmos a criar outras páginas, será muito fácil clicar e obter o mesmo tamanho exato em cada página. Então o que queremos fazer é que temos estilos de personagem aqui. Vamos adicionar isso da mesma forma que fizemos com nossos ativos ou ativos de cor. Digamos que queremos salvar isso. Teríamos que essa manchete fosse exatamente como está. Vamos destacar essa manchete e clicar em adicionar aos estilos de personagem e vai adicioná-lo ferroviário 107 pontos. Então, se eu tiver outro tipo de letra, eu posso clicar nele. Ele irá automaticamente torná-lo do mesmo tamanho para que possamos re título este. Eu gosto de fazer Hum. Essa vai ser sua grande manchete, Hum. Então agora precisamos da idade dela para que será um processo de crente aqui. Vamos acrescentar isso. E então temos um H três, que fica um pouco menor, que é bem aqui. Então eu vou destacar isso e isso. E esse vai ser o H três. Então estamos apenas estabelecendo isso para que quando fizermos outras páginas, tenhamos tudo isso estabelecido. Quando o desenvolvedor quer saber que tipo de letra de tamanho usar para h dois, você pode dizer-lhe tudo isso. Você poderia dizer a ele os códigos hexadecimais. Você poderia dizer a ele ou a ela os tamanhos também. Dos tipos de letra. Esta é a nossa cópia corporal bem aqui. Então vamos ter que chamar que p para parágrafo, basicamente seu corpo cópia e design de impressão, mas Web projetar o Collopy. Eu tenho um tipo de parque muito básico. Ele pode continuar, continuar com ainda mais. Mas acho que é provavelmente um bom começo. Temos as nossas cores. Temos nossa hierarquia de tipos estabelecida. Temos até componentes que chegarão ao próximo, que é salvar ícones e conectá-los todos juntos. Então você não precisa sentar lá e mudar todos os ícones. Se você quiser alterar a cor de um ícone, ele irá alterá-lo globalmente. Vamos chegar a isso em seguida. E uma coisa que realmente queremos ter certeza de adicionar, é nossa última chamada ação. Nossa primeira ação chamada é Assista a um vídeo, mas queremos convertê-los em um cliente. Precisamos de ter a nossa chamada final para o botão de ação e vai começar. O processo agora era Creator Button. Vamos até pegar o mesmo que temos aqui. Atravessar o fundo aqui. Este é o tipo de onde estamos vendendo, tendo ou vendendo linguagem aqui. E vamos mudar o passado dele para porque eu não quero que isso concorra. Então vamos fazer um rádio. Grady para este colapso é um pouco. Vamos clicar no Phil e fazer um rádio Grady Int. E vamos usar algumas das cores dela. Aqui, pegue sua ferramenta conta-gotas iria ver se não podemos provar que pêssego, mas também provar uma cor mais escura Richard tipo de ficar um pouco radiante para ajudar a sair. E agora podemos mudar bastante a cor do botão. Estou decidindo ficar com o meu tipo, são chave e ficar com H dois. Como é. Você faz um pouco menor. Isto pode ser um que podemos salvar. Este é o tipo de botão a inchar. Então, se quisermos adicionar, este é um estilo de personagem e dizer chamado Ação ou botão. Então vamos mudar isso de volta para seu alto contraste púrpura, exatamente assim. Então nós acabamos fazendo o texto um pouco menor, e tudo bem. Então aqui está o nosso último site. Tenho tudo bloqueado que precisávamos para o cliente. É a nossa página inicial básica. O que eu também quero mostrar ao cliente é o que acontece quando você clica em assistir o vídeo e também o que acontece quando você clica no início. O processo agora botão, porque muitos desses botões acabarão indo para o site principal. Esta é uma página de destino, então queremos mostrar a eles o que acontece quando esse processo acontece e também o que há páginas de destino. Então é isso que vamos acabar criando. Nós vamos acabar criando um par de páginas diferentes, então esta será uma espécie de tela pop-up do seu vídeo, e isso será o que acontece quando você fizer para iniciar o processo. Agora vamos para o modo protótipo e adobe X T. o cliente possa ter um tipo de site de teste clicável para que eles possam ver o que são projetados, realmente parece no final. 55. Página de sites no Adobe Xd - Pop up: primeiro foco no que vai acontecer quando eles clicarem no início do processo. Agora vai haver uma pequena caixa pop-up e eles vão ser capazes de preencher algumas informações muito básicas e clicar em Inscrever-se para que eles possam iniciar esse processo. Então, o que queremos fazer como queremos duplicar este quadro de arte, então vamos subir no topo e selecionar o nome que vamos copiar. Basta fazer um comando, veja, e então um comando V colar e estamos criando uma cópia. Vamos colocar um pouco de espaçamento entre os dois, e o que vamos fazer é criar a página de destino, como seria depois de apertarmos o botão. Então, queremos uma coisa que queremos fazer é ter tudo isso apagado e queremos ter uma pequena caixa que apareça aqui. Então, uma maneira de cinzentar isso é pegar a ferramenta quadrada, vamos torná-la branca. E há algo chamado Borrão de Fundo bem aqui. Então nós vamos clicar neste borrão de fundo, e ele tem um borrão, tudo por trás dele, e ele pode alterar algumas dessas configurações para torná-lo mais brilhante ou para torná-lo mais alto desfoque ou torná-lo mais escuro, nós vai torná-lo um pouco mais escuro onde eles vão ter uma pequena caixa pop up. Então é isso que vamos projetar agora é uma pequena caixa pop-up bem aqui. E vamos fazer o mesmo ingrediente que tínhamos antes. Então podemos até pegar o mesmo quadrado que tínhamos antes. E basta usar isso e ajustá-lo de volta ao quadrado dela. Isso vai nos salvar de ter que fazer isso, Grady. E novamente, claro que podemos clicar e mudar o Grady em um pouco. Aqui, faça um linear. Podemos arredondar as bordas de uma pequena caixa pop-up. Eu queria colocar alguns do nosso tipo aqui primeiro. Então, o que vai ser tipo de clique nisso? Qual será a manchete principal aqui? Temos o nosso principal tipo de manchete. Poderíamos copiar e colar isso ou pegamos nossa ferramenta de texto. Certifique-se de que temos o nosso h um estilo de personagem quando pode adaptar a mesma manchete que a nossa capa . Então vamos digitar nosso texto aqui. O amor está ao virar da esquina. Vamos alinhar isso no centro e reduzir o espaçamento. E se precisarmos fazer um tamanho diferente para isso, não precisamos usar um Chuan. Podemos criar um tamanho diferente para isso se acharmos que é um pouco grande demais e podemos criar um novo estilo de personagem, se você quiser. Se você quiser que seja um tamanho de manchete pop-up você pode ter tudo. Normalmente, no final de um site, você terá 20 ou 30 estilos de personagem diferentes, todos com qualidade diferente para ele. Então tipo de botão, tipo de botão grande, então não se sinta preso com apenas 81 H dois h três e parágrafo. Você faz todos os tipos de estilos de personagem diferentes. O amor está ao virar da esquina e tem uma pequena sombra aqui. Também teremos um botão de inscrição. Vamos criar um botão de inscrição aqui. Vamos fazer essa cor de pêssego para combinar com o que fizemos antes. Talvez seja uma leve redondeza, não muito. Só um pouco e eles vão precisar preencher algo então vai ser uma forma muito simples de dois objetos. Vamos pegar nossa cópia corporal selecionada P, e queremos apenas fazer uma pequena bolha de preenchimento e uma ferramenta de retângulo. Isto pode ser uma forma de pílula se quisermos que seja assim. E lembre-se quando falamos sobre a usabilidade e a seção teórica, a seção Teoria do Design Digital. Há uma acessibilidade menos do que falamos sobre como algumas pessoas colocam o nome dentro da bolha. Mas é muito mais fácil para pessoas especiais com formas muito curtas poder ter o nome acima. Então vamos fazer exatamente isso. Você acabou de duplicar este nome, e provavelmente o e-mail seria duas coisas muito importantes para obter deles. Vamos adicionar um pouco de pizza para este botão estava fazendo um pouco mais largo. Vai ser uma caixa pop-up, então vamos primeiro X adulto. Podemos facilmente fazer isso usando a ferramenta de linha. Amplie e desenhe o Simple X. Isso vai ser um branco, e vai ter uma espécie de tampa em torno de e torná-lo um bom, grande, tamanho grosso. Vamos fazer oito ou nove. Ele vai copiar e colá-lo e refletido estão se movendo para o outro lado, criando um X simples poderia fazer design de ícone e um Doobie X'd. Não é tão bom quanto ilustrador, mas é possível porque você tem uma ferramenta de caneta e você tem um tipo de ferramentas básicas de traço e forma estava criando um tipo X simples dos mesmos arredondados, estilo em forma de pílula que temos usado Grupo que juntos como um elemento. E vamos ter certeza que isso é também ter o mesmo em cada lado. Vamos trazer nossos personagens. Então vamos ao Adobe Illustrator. Vamos desprepará-los. Eles já são personagens individuais, então vamos trazer um de cada vez liberando ela. As pessoas parecem estar correndo uma para a outra, querendo se encontrar, querendo se reunir, amantes separados. Então é meio que contar um pouco de uma história que tipo de se juntar. Eu adoraria ser capaz de interagir alguns desses um pouco, então talvez ter uma perna, sair ou a mão sobrepor algo, algo para adicionar um pouco de interesse visual assim. E vamos dizer que queremos adicionar um pouco de um fundo porque temos este tipo de gráfico que é meio legal, este fundo pequeno arredondado. Vamos fazer a mesma coisa. Mas aqui em baixo, vamos fazer a ferramenta de alfinetes para este. Estamos apenas criando um tipo de formas de poço, formas arredondadas aparecem. E vamos fazer disso uma cor mais clara. Talvez esta cor, e enviá-la para trás nos sistemas de camadas. Adicionando um pouco de papai, cor Papa e pizazz lá algum tipo de interesse visual. Tente não fazer parecer muito ocupado com algo pequeno. E lá vamos nós. Nós temos nossa pequena caixa pop-up onde eles podem se inscrever e nós meio que temos nossa primeira página desenvolvida, e nós vamos finalmente ligar isso para ficar muito profundo na prototipagem porque pode ficar um pouco mais complicado. E você está realmente tentando definir o tom e o sistema de design aqui para todos. E quando você entra em U X, você eu desenho e acontece que eu dou uma aula sobre isso onde nós criamos 50 placas de arte diferentes e ligamos todos juntos e fazemos um tipo de site totalmente funcional, ele fica um pouco longe de gráficos design e um pouco mais para o você é você X lado de design experiência do usuário. Então eu só quero ter cuidado para não cruzar muito para o desenvolvimento da Web. Mas queremos falar sobre criar outras páginas e vinculá-las. Então vamos falar sobre o básico quando se trata de unir as coisas. Não vamos nos aprofundar neste curso em particular. Então temos dois sites diferentes. Como os conectamos? Então o que vamos fazer é trocar. Estivemos em modo de design este tempo todo. Vamos mudar para os quatro pela primeira vez para o modo protótipo. Então, estamos mudando para o protótipo Mo, apenas trocá-lo para cima. E agora seremos capazes de ligar estes dois juntos. Então o que você pode fazer é você pode clicar no quadro de arte e você pode Lincoln site inteiro sobre. Então, se eu clicar em qualquer lugar desta página, ele vai carregar automaticamente a próxima página. Mas o que eu quero fazer é tê-lo ligado a apenas um botão. Então, quando eles rolam para baixo no site, eles clicam neste botão, ele vai para este módulo pop-up. Então, isso é o que nós vamos fazer é selecionar apenas o botão e ele vai nos dar este pequeno indicador de seta que nós vamos ser capazes de clicar e arrastar para qualquer lugar neste quadro de peças. Então isso vai carregar esta página a seguir. Então, vamos ver como isso se parece. E você pode clicar em sua conexão aqui a qualquer momento e à direita, o seu discutível. Veja que tipo de conexão é. Você tem algumas opções diferentes. Um toque é basicamente um clique, então eles clicam em qualquer lugar naquele botão ali no botão. Se eles clicarem no toque, ele vai carregar. A próxima tela arrastar vai ser mais para abside móvel. Onde você está arrastando um elemento? Então você não vai usar isso tanto para isso. Então você praticamente tem torneira e há um par de ações que podem ocorrer. Há animação automática, o que lhe dá uma sensação mais animada. Há sobreposição, que meio que apenas combina, e há transição que vai apenas fazer a transição, e vamos tentar alguns desses fora. Mas eu quero tentar animar automaticamente para este, então temos toque, que é basicamente clique auto animate, que irá animar a próxima página chegando. Este é o tipo de como ele faz a transição entre cada página, o que parece. E você pode mudar a duração de quanto tempo leva para a transição de um para o outro. Então eu só vou fazer um segundo por agora, tipo de ver como isso parece e é isso. Então, para testar isso, vamos pressionar o botão “play” aqui em cima. Basicamente, vai jogar o nosso site. Vou clicar no topo do meu quadro de arte. Eu quero começar aqui, clique no jogo, clique no jogo, e aqui está a nossa pré-visualização do site. Vá em frente, faça todo o caminho em tela cheia. É assim que vai parecer quando chegarmos à página. Poderíamos rolar para baixo, vamos fazer o resto do nosso quadro de arte e vamos dizer que queremos clicar. Temos esta ligação agora, por isso, quando eu a receber, vais reparar que está ligada. Vamos começar o processo agora, e ele vai aparecer na nossa caixa. Então agora o único problema é que isso não está ligado de volta, então eu não posso fazer nada. Estou preso. Quero poder clicar nisso e voltar para a tela anterior. Isso não é nenhum problema, porque podemos clicar nesta tela. Vamos trazer o nosso X aqui e temos a chance de fazer essa pequena flecha. Onde vais levar essa flecha? Arraste-o de volta para este quadro de arte. Vamos fazer a mesma coisa, clicar ou tocar nele. Vai fazer animação automática e pode levar um segundo para a transição para o outro lado. E é isso. Então, agora que pressionamos play, vamos voltar para o nosso primeiro quadro de arte e pressionar play scroll down clique em iniciar processo agora vai fazer a transição para o próximo dardo, e então nós vamos apenas clicar nisso e Scott uma transição de volta os nossos quadros de arte anteriores. Você pode realmente ver como você pode ligar sites e criar uma espécie de um pouco de experiência interativa. Isso não codifica o site, mas dá a você um ótimo exemplo de como ele poderia parecer quando é revestido 56. Página de sites no Adobe Xd no modo de -: Então o que eu quero fazer é mostrar a vocês como criar isso. Então você tem esses dois pequenos círculos meio que se juntam quando eles entram pela primeira vez na página da Web , ele meio que mostra ao desenvolvedor que tipo de animação você está procurando. Então vamos fazer isso agora mesmo. O que vamos fazer é copiar e colar este quadro de arte. Tenho que voltar para o projeto. É assim que podemos trabalhar com quadros de arte. E vamos copiar esta primeira página de destino e colá-la. Vou colar e colocar aqui. Temos uma cópia disto. Então aqui está o que vamos fazer. Vamos chamar essa chamada de animação. Esta página inicial é muito bom para nomear suas placas de arte e chamar esta chamada para o nosso cadastro. Então, quando nós meio que isso nos ajuda muito quando nós os nomeamos. Então aqui está o que vamos fazer. Assim, como a animação automática funciona à medida que leva a primeira tela, e quando você a conecta à segunda tela e você tem animação automática entre as duas telas, ele levará o estado do 1º 1 e lentamente animado para trazê-lo para o estado do 2º 1 Então, por exemplo, digamos que eu mova o triste. Eu quero que eu quero que isso deslize para dentro e eu posso precisar Teoh mudar o topo aqui destes. E vamos dizer que eu quero que isso deslize para fora. Então talvez eu precise colocar um pouco mais de espaço entre meus quadros de arte, e eu quero que isso deslize para fora. Então eu quero que isso deslize para dentro e deslize para fora. Nós poderíamos até fazer o logotipo, também, mas vamos manter isso muito simples. Então tudo o que fiz foi deslizar esses dois elementos para fora e eles vão se unir desta forma. Então vamos voltar ao nosso modo de protótipo, e isso é ligá-los juntos. Vamos ligar este quadro de arte para o 2º 1. Vamos fazer umas coisas diferentes aqui. Então, em vez de tocar, agora temos algo chamado Tempo. Então, o que acontece com a torneira? Eu tenho que clicar na página da Web para conseguir que a transição aconteça, mas se cumprirmos tempo, vai acontecer automaticamente depois de um certo tempo acontecer. Então, digamos que fazemos tapetes. E você animaria automaticamente? Vamos em frente e jogar. Vamos clicar neste quadro de arte e jogar. Não vai começar a se animar automaticamente. Eu tenho que clicar e, em seguida, animar. Então para mudar isso eu quero ir para baixo para o tempo e nós vamos ter uma certa quantidade de tempo acontecer. Assim, o atraso pode ser apenas pequenas parciais de um segundo 2.4. E ele poderia brincar com as configurações e se acostumar com o tipo de como o comprimento funciona e a duração. Eu gosto de ter uma longa duração agradável porque torna a animação mais longa e torna mais dramática. Então eu vou digitar em 1,5 segundos e você tem diferentes opções de atenuação. Temos surtado, aliviando essa flexibilização. É apenas a forma como a animação funciona. Pode estalar um pouco. Pode ser roubar escola, deixá-lo no snap padrão. Então, agora que temos no tempo, auto animar, vamos ver como ele fica. Vamos clicar sobre isso e jogar Ele fez isso automaticamente, e ele tinha um pequeno salto agradável para ele, não é? Então acho que é isso que o estalo faz. Então você enlouqueceu. Então nós temos um lugar em que ele entra, tipo de encaixar para trás um pouco desse ponto final. Então lá vamos nós. E agora podemos rolar para baixo e tudo ainda está ligado porque agora ele vai para o próximo dardo, e então podemos fechá-lo e voltar para o quadro de arte original. E sempre que eu quiser ver isso de novo, basta clicar no jogo. Foi possível ver o slide de animação. Foi uma ótima maneira de mostrar animação com seus layouts também. Então nem tudo é apenas estático. Então, temos uma última coisa a fazer, e é isso que acontece quando você clica no relógio. Agora vídeo você para fazer. O que vamos fazer é copiar esta página inicial e colá-la, e vamos trazê-la à tona. Top é o que eu quero fazer é eu quero mostrar caminhos diferentes. Então agora eles podem clicar no vídeo de assistir agora e eles vão subir aqui. Eles são Click são o processo de início agora e eles vão para cá. Então ele meio que começa a configurar esse fluxo de usuário e fica complicado quando você começa a fazer como um design de aplicativo móvel. Você pode ver como esse fluxo de usuários é complicado. Mas eu gosto de ter isso configurado assim. Então você pode tipo de dizer, Bem, o usuário pode ir por este caminho onde eles podem passar por um caminho diferente desta maneira. Você é apenas uma espécie de colocar para fora as placas de arte agora e fácil de digerir maneira para você, assim você pode manter o controle de todas as maneiras diferentes e passou que os usuários podem ir. Então vamos dizer que este é o vídeo de assistir um. Então vamos copiar e colar esse tipo de área escura, que eu não precise fazer isso de novo. Nós também provavelmente poderia trazer o nosso pequeno botão X e querer ter uma pequena caixa pop-up . Então, vamos apenas criar. Vou voltar ao design para que possamos recuperar os nossos elementos, quer uma espécie de quadrado branco, talvez um pouco de redondeza para ele. Vamos fazer um tipo de sombra mostrando o que acontece quando eles carregam o vídeo. Queremos ter algum tipo de X, que eles pudessem. Não, , paraque eles pudessem. Não, como sair daquela caixa, voltar ou fechá-la e vamos trazer. Vamos fazer um contêiner. Então eu estou fazendo um quadrado que vai ser muito rápido e arcaico. Não vai ser nada excitante do ponto de vista do design. Temos um quadrado e vamos arrastar uma foto. Temos nossas fotos fingindo que este é o nosso vídeo vem screenshot. Eu poderia gastar muito tempo nisso, mas apenas mostrando o básico. Com este projeto, há o nosso Xbox. Nós poderíamos até fazer um pequeno player de vídeo apenas para tipo de mostrar um exemplo de como os controles seriam parecidos para que pudéssemos fazer isso e torná-lo um comprimido. O que me diz que é essa cor e aparência? Ampliar. Faça uma pílula em forma de tirar a fronteira. Poderíamos duplicar isso. Faça uma cor ligeiramente diferente, faça parecer que está se movendo. O leitor de vídeo. Temos um pequeno controle aqui, talvez fora da sombra. É real, coisa simples, e há até maneiras de animar isso também, então você pode deslizá-lo e ele muda de cor para fazer parecer que você está realmente deslizando ao longo do player de vídeo. Definitivamente são técnicas mais avançadas. Você pode até colocar uma data ou hora aqui para o tempo do vídeo ou quanto tempo passou desde que ele começou o vídeo. Mas, por enquanto, estamos apenas fazendo uma configuração básica. Vamos agrupar isso, fazendo um pouco menor, talvez, e trazê-lo até o topo. Então agora vamos ligar isso juntos. Vamos voltar e modo protótipo. Clique em nossa página inicial quando eles clicam neste botão aqui em baixo, eles estão indo dedo do pé. Vá para esta página, clicando sobre e para transições. Só vamos fazer um toque porque vai ser um clique, e vamos mantê-lo em auto animação e é isso. Vamos tornar a duração muito mais curta porque queremos que o vídeo seja capaz de aparecer imediatamente. Então vamos testar nosso site. Temos quatro estados diferentes aqui. É bom. Traga isso mais perto. Temos uma pequena animação que acontece automaticamente em uma transição de tempo. Tudo aparece. Esta é a nossa página principal. Em seguida, eles podem clicar no relógio agora vídeo iria até o topo ou clique no processo de início. Agora temos tudo ligado. Placa de arte e clicamos no botão play. Tudo voa para dentro. Parece muito bom. Vamos ver o vídeo. Ótima. Digamos que eu queira fechá-la. Fantástico. Esse X já está ligado porque copiamos aquele X. Lembre-se, copiamos a saída irá copiar a transição também. Então, quando eu copiei aquele X e coloquei aqui, ele teria uma cópia para fazer a transição de volta para a página inicial. Vamos voltar e tentar mais uma vez. Dê uma olhada no que montamos e provavelmente o quê? Cerca de uma hora e 15 minutos vamos juntar tudo isso. Nada mal. Inicie o processo. Agora. O amor está ao virar da esquina. Certo, feche. Desloque-se para cima. Assista ao vídeo. Vai aparecer. E ele podia fazer a mesma coisa. E poderia ir para outra página. Mesmo processo. Você acabou de fazer uma transição de toque em apenas este botão, e ele iria para uma página de inscrição, ou você pode ir para a nossa página de processo. Quero dizer, você pode fazer o que quiser com isso. Este é apenas o básico que eu queria mostrar a vocês e apresentá-los ao Adobe X'd. Eu queria mostrar como você criou a hierarquia de tipos e como você trouxe cores. Há apenas uma outra coisa que eu quero rever é um tipo de bônus, e faremos isso a seguir. 57. BÔNUS: estilos globais: Mais uma coisa. Eu queria falar sobre isso. A maneira de falar sobre cores. Falamos sobre estilos de personagem. Há mais uma coisa. Componentes frios, que podem ser muito legais porque você pode selecionar um componente. Digamos que é um ícone. E digamos que você tenha 20 quadros de arte diferentes, qualquer um para mudar a cor desse ícone em vez de ter que selecionar todos os 20 ícones de quadros de arte e mudar a cor. Você pode simplesmente mudá-lo em seu componente, e ele muda globalmente. Então é como estilos globais. Então, por exemplo, este botão inicial. Então temos esse botão inicial em cada tela. Então, digamos que queremos mudar a cor do botão inicial. O que eu quero fazer. Vamos voltar ao design e eu quero clicar com o botão direito e eu quero clicar em Fazer um Componente, ou ele pode ir até aqui para este sinal de adição e trazê-lo para que você possa ver seu pequeno ícone de casa. Então agora é um componente, então a qualquer momento eu quero trazer a casa para qualquer outro lugar. Então vamos dizer que aqui eu posso clicar no componente. Eu tenho meu pequeno componente aqui, bem aqui, então vamos dizer que eu quero mudar a cor em ambos. Todos têm que fazer. Vamos para qualquer um desses componentes e mudar a cor. Então vamos dizer que eu faço pêssego. Então agora é pêssego. Mas agora tenho que mudar o outro. Há todos os outros 20 vai agora que é um componente e carregado como um tipo de estilo global ligado . Também mudou. Aqui está bem, o que é muito bom. Então, que tipo de edifício estes? Você está recebendo muitas coisas diferentes. Sempre que você tiver algo que vai repetir em várias páginas, vá em frente e faça disso um componente. Então, se você mudar tudo nosso se você apenas mudar um desses, ele mudará globalmente. Vamos fazer mais um exemplo. Então, digamos que eu faça esse logotipo um componente para que eu possa apenas subir aqui como um componente. Chame este logótipo. Então, se eu fizer todos os meus componentes e duplicar o quadro de arte, então digamos que eu duplico este quadro de arte para criar uma animação, então eu vou até aqui e estou duplicando o quadro de arte. Ele irá copiar automaticamente os seus componentes. Então, agora, se eu mudar isso, vamos dizer que eu quero mudar para outra coisa. Então você quer mudar para Peach? Ele vai mudá-lo automaticamente no outro também. Então é bom quando você está fazendo sua página inicial. Se você quiser configurar qualquer ícone conectado global como este, é ótimo fazê-lo e sua primeira página inicial. Então, quando você copiar e começar a fazer animações e inventar coisas que você sabe, vai ser fácil mudar as coisas globais. Porque imagine se você tivesse 30 quadros de arte uma vez tão bom para usar esses componentes, um, como um estilo global, então apenas gentil, um pouco extra. Eu queria meio que passar por cima. Então aqui está o nosso projeto final, tudo ligado e pronto para ir. Isto foi muito, muito, muito divertido. Vamos passar uma boa hora e 1/2 um com o outro, talvez até perto de duas horas para fazer este projeto. Uma ótima introdução ao design de layout de site, e você tem que introdução ao Adobe X D, que é um ativo muito bom para adicionar ao seu conjunto de habilidades de design gráfico. É um ótimo software para ter e saber que é uma habilidade de alta demanda para ser capaz de fazer isso . E o próximo passo seria exportar tudo isso para um desenvolvedor. Envie isso para um cliente para aprovação para que possamos realmente obter algumas dessas coisas prontas para serem revestidas. 58. Exportando ativos do Adobe Xd: maneira de exportar tudo isso para fora, então há um monte de coisas diferentes que podemos fazer aqui você pode salvar. Se você fizer parte da Creative Cloud, poderá salvá-la como parte da nuvem e convidar outras pessoas para editá-la convidar outras pessoas para vê-la. Então, isso é muito bom. Se você estiver trabalhando com outro designer, outro desenvolvedor que também tenha o Adobe Extra, você pode compartilhar arquivos facilmente e mostrar-lhes o quadro ao vivo que você também pode gravar. Se você clicar neste jogo, há um botão de gravação para que eu possa gravar minha animação se eu quisesse ou todo o meu processo para que eu pudesse continuar aqui, clicar em reproduzir, e então eu posso clicar em gravar e depois clicar fora e eu poderia pegar um vídeo de mim trabalhando tudo. Essa é uma ótima maneira de mostrar aos clientes o tipo de processo geral para que você possa gravar seu vídeo . Você pode compartilhá-lo com o desenvolvedor. Você pode ver como isso ficaria em um site móvel. Se você clicar na única coisa móvel, você tem que começar algumas coisas configurado primeiro, então você tem que conectar um ni OS ou um dispositivo Android para X'd. Então, há um aplicativo Adobe x 'd que você pode baixar em seu telefone, e então você pode configurar tudo para que você possa compartilhar documentos com seu telefone e ver como as coisas ficam em seu celular, que é realmente, muito doce . Digamos que você queira compartilhar ativos com o desenvolvedor e também códigos hexadecimais e informações de topografia . Há um botão de compartilhamento aqui para 1/3 1 sobre é realmente um botão mais recente para versões mais recentes . Ou apenas certifique-se de que você tem a versão atualizada do Adobe X'd e você poderá ver isso . Então, isso é sobre as versões mais recentes do Adobe X T tem o botão compartilhar. Fora isso, foi aqui nesta seção, então basta ir para compartilhar seu poderia ter este novo painel que chega no lado direito, e nós vamos estar criando um link que podemos compartilhar com um desenvolvedor ou com um cliente, um monte de coisas diferentes que podemos compartilhar aqui. Então tudo que você tem que fazer é descer para ver configuração, e há algumas versões diferentes que podemos enviar-lhes são um par de links diferentes que podemos criar. Uma é uma revisão de design onde eles podem dar comentários sobre o feedback do projeto e também o fluxo, que é muito útil. Ah, desenvolvimento. Este é o lugar onde você começa a enviar todo o tipo de informação CSS. Então códigos hexadecimais e a tipografia e outros elementos apresentação, que vai ser um pouco mais como mostramos antes onde você grava um vídeo. Mas, neste caso, eles serão capazes de percorrer toda a sua apresentação se você não tiver ligado. E, claro, testes de usuários, o que é fantástico para testar seu site se você tiver um site mais completamente conectado . Então vamos fazer o desenvolvimento. Queremos compartilhar isso com outra pessoa que vai nos ajudar. Codifique isto. Então, vamos clicar no desenvolvimento, e queremos ir em frente e clicar em ativos para download. Temos 13 ativos que fazem parte desse design, e poderíamos exigir uma senha se quiséssemos. Mas vamos em frente e criar um link e isso vai levar alguns minutos. Aqui estamos nós. Temos o link aqui, podemos salvá-lo ou copiá-lo ou ir direto para ele e o link vai abrir. E isso também o que eu acabei de mostrar a você só está disponível para assinante da Adobe. Portanto, se você for assinante da Adobe Creative Cloud, terá essa opção. A Adobe fechou recentemente essa opção para pessoas que não são assinantes. Então, apenas tenha isso em mente, pois você está exportando as outras duas maneiras que eu vou mostrar para você exportar estão abertas para todos os usuários. Então, se você descer aqui para os pequenos colchetes aqui abaixo para a esquerda, este ícone de vontade ou para a direita, você será capaz de ver todos os ativos aqui. Então também exportou alguns dos bens que trouxemos, como nossa foto ou ilustração em seu plano de fundo. Também trouxe todas as cores usadas e são capazes de mostrar o código hexadecimal também. E também, nossos estilos de personagem ar aqui para que você será capaz de ter todos esses se nós formos a título estes ele vai cobrir é que é o título. Então, o desenvolvedor vai saber se é um 20 cada parágrafo qualquer. São quatro e temos algumas interações também, mas eles poderiam rever as diferentes interações. Ele também fazer um comentário aqui na seção de comentários e galhardete para que eles pudessem. O desenvolvedor pode ir. Ei, eu tenho uma pergunta sobre essa animação. Como ou como isso precisa se conectar e você não precisa sentar lá e pegar o telefone. Ele poderia apenas se comunicar através deste link compartilhado, e eles também podem selecionar ativos. Eles podem manter pressionados, deslocar e selecionar todos os ativos, e eles podem baixar isso e eles podem ter acesso a esses ativos. E lá vamos nós. Há algumas maneiras diferentes de exportar e compartilhar nossos arquivos do Adobe X'd. Está em outro programa. O que dizer que será ilustrador. Uma coisa que podemos fazer para tirar isso do Adobe X T e isso não é perfeito, mas isso é apenas uma maneira de fazê-lo ou pegar nosso quadro de arte, e nós vamos apenas ir para a exportação de arquivos e vamos para o selecionado como um gansos SV ou apenas obter nosso como um SPG, que é um formato vetorial escalável. Então vai haver um formato vetorial. Vamos salvá-lo como está e ir em frente, exportar. Vamos trazer nosso arrastar isso para o Adobe Illustrator, e vai levar muito tempo para renderizar. Isso está tudo bem. Pode levar até cinco minutos. Então, seja paciente. Até o meu computador topo de linha demora um pouco a prepará-lo. Então é assim que parece quando você começa a fazê-lo. Não é perfeito. Não vai fazer a transição perfeita. Mas vamos clicar com o botão direito. Vamos liberar a máscara de recorte que ela fez, que pode ter que fazer isso algumas vezes quando pode precisar no grupo. Então direito, clique no grupo e você tem acesso a alguns dos principais elementos aqui. Então, se você quiser trazê-lo para um ilustrador W para continuar editando-o ou para ser capaz exportar esses arquivos eventualmente para um desenvolvedor, assim você pode Não vai trazê-lo perfeitamente. Deixe-me no grupo esse grupo que não fez isso corretamente. Ok, como ícones e tipos e outros elementos vêm através muito bom. Mas há algo sobre os contêineres que nem sempre vêm também. Mas todo o resto é muito bom. Esses botões eram os mesmos, e eu ainda poderia ter acesso aos cantos arredondados, então isso é muito incrível. 59. Introdução à construção de um site do Wordpress: podemos projetar um site e Photoshopped e Adobe X'd. Há muitas maneiras ótimas de projetar o branding e o layout e a idéia de um site . Mas e se não tivermos um cliente que tenha um orçamento limitado ou você estiver fazendo um pacote de marca para eles e eles vierem até você e dirão que eu adoraria um pequeno site ou kit? Você faz design de site e um monte de estilistas dizem, bem, bem, você sabe, eu tenho que trabalhar com o desenvolvedor. Eu não sei como codificar. Não me sinto confortável com isso. Bem, eu quero que esta seção faça você se sentir confortável em adicionar um pouco de Web design aos seus recursos de habilidades. E ser capaz de oferecer isso aos clientes nesta seção vai prepará-lo para ser capaz de começar a oferecer serviços de Web design como parte de seus pacotes de branding ou conjunto de habilidades individuais . Não vamos ser super aprofundados, que será uma seção de duas horas, e eles serão um curso mais tarde que irá desaparecer mais em profundidade conosco. Mas eu realmente quero que você comece e faça você pensar sobre como todo esse processo funciona. Então, onde você vai para construir um site sem saber em codificação conhecimento lá. Então, fora da caixa software é como wicks dot com e squarespace dot com, que poderia ser capaz de ser estes bons. O que você vê é o que você recebe editores, que são basicamente arrastar e soltar. Você pode adicionar módulos. É muito fácil. T construir um site completo construir sem conhecer quaisquer linguagens de codificação detalhadas. Há uma lista realmente grande de algumas grandes opções para a construção da Web. Há um novo chamado Web Flow, que tem ouvido muito sobre e gostaria de futuro que algum dia mais tarde. Mas por enquanto, vou me concentrar nos dois mais populares. O que você vê é o que você recebe. Editores são sistemas de gerenciamento de conteúdo. Vai ser o WordPress. Vai ser o mais conhecido na sua base de clientes. Também será o mais conhecido entre os seus colegas. WordPress é o maior CMS ou sistema de gerenciamento de conteúdo lá fora, e nós vamos usar isso e há também uma alternativa chamada squarespace, que é maravilhoso porque ele tipo de tem a solução tudo em um e os modelos ar realmente não tão ruim. Eles realmente melhoraram seu design de template. Eu prefiro o espaço quadrado em vez de semanas, qualquer dia apenas por causa das opções de modelo. Então, nos próximos minutos, vou falar sobre o básico de como funciona o nome de domínio funciona na Web e como instalar um tipo de WordPress. Então isso vai ser para pessoas que nunca fizeram isso antes. Se você já tem alguns dólares WordPress e experiência ou você já tem wordpress instalado na hospedagem planejada Grande. Vá em frente, pule esta lição e vá para a próxima. Então, como você começa com um site WordPress e uma das razões pelas quais eu também escolhi o site como eu fiz uma pesquisa com todos os meus alunos anteriores e alunos atuais, e vocês escolheram o WordPress como seu editor de escolha no Website Builder. Então, haverá três componentes principais que você precisa para construir um site de cliente ou um site pessoal . O 1º 1 é o nome de domínio. Cada site precisa de um nome de domínio profissional. Nós não estamos falando de w w dot squarespace dot com slash duh duh duda. Queremos um nome de domínio profissional Chris muito limpo. Eu faço o trabalho de design dot com Lindsay marsh design dot com Sempre muito simples. Um nome de domínio. Precisamos comprá-los. Isto é basicamente ou seu u R L. Eles não foram para ir papai e digitá-lo entre Go papai ponto com, que é um plano de hospedagem muito popular, e você também pode comprar nomes de domínio também. Digamos que quero o design da Lindsay Marsh. Vamos ver quanto custa e você faria compras como um item separado. Então, para 11 99 eu poderia ter Lindsay marsh design dot com do meu site. Se você está fazendo o trabalho do cliente, você tentaria lutar um grande seu l trabalho com o cliente em descobrir o que você está doente será muito importante quando você faz o trabalho da página de destino. Quando você está fazendo publicidade paga para ter certeza que você tem o mais curto, mais conciso, você é possível Ella. Então temos que um primeiro componente que cada site precisa é esse nome de domínio, e precisamos vincular esse nome de domínio a uma conta de hospedagem. Então hospedagem conta vai ser o lugar onde ele armazena todos os seus arquivos e todo o seu site e irá armazenar a instalação WordPress. Então, o host é realmente tipo de tudo o que traz todo o seu site juntos para que seu nome de domínio acabará por ser vinculado à sua conta de hospedagem. Então, é ótimo para obter uma conta de hospedagem decente para este caso ou para este exemplo que eu usei Go Daddy no passado por mais de 10 anos. Muito barato, muito acessível. Você será capaz de comprar seu nome de domínio e você está hospedando conta tudo em um site, o que é muito conveniente. Então, é feliz e ir para a hospedagem. E eu tenho uma lista de outras ótimas alternativas e a razão pela qual eu gosto de Go Daddy e Blue Hostess. Alguns deles são maiores, e eles têm mais suporte, mas eles também adicionam um widget automático de instalação do WordPress, onde você pode instalar automaticamente o WordPress em sua conta de hospedagem para que você não precise passar pelo processo manual de instalação do WordPress por conta própria, o que é torna tudo um pouco mais simples. Então nós queremos fazer Vamos dizer que queremos fazer hospedagem na Web, e claro, há um monte de opções diferentes. Vai depender do que o seu cliente pode pagar. O que você pode pagar. Seja qual for o propósito do site não é, são opções muito, muito baratas. Então, por 5 99 por mês, eu recebo um site. É tudo o que preciso. Só preciso de 100 gigabytes de armazenamento e menos. Eu vou estar executando um site baseado em vídeo e olha, eu até tenho um domínio gratuito, então eu nem sequer tenho que pagar pelo domínio, provavelmente pelo primeiro ano. Então, isso é muito bom. Isso pode agrupar aqueles juntos quando você compra uma hospedagem e um nome de domínio ao mesmo tempo, você tem a chance de vincular esse nome de domínio a essa conta de hospedagem. Então, é importante ligá-los juntos. E uma vez que você se inscreve para essas plataformas realmente grandes de hospedagem na Web, elas tornam muito intuitivo e muito fácil para você seguir todos esses passos. Então, quando você se inscreve para uma conta de hospedagem, geralmente tem algo chamado um painel C ou painel de controle ou um lugar onde podemos fazer login em sua conta de hospedagem específica e geralmente temos algo chamado APs populares ou seções APS ou adições. Você vai querer clicar no WordPress. Vai passar pelo processo de instalação para você. Eles tornam isso muito intuitivo, eu prometo. E você terá o WordPress instalado em seu plano de hospedagem. Portanto, temos os três elementos de que precisamos. Precisamos de um grande nome. Temos um nome de domínio. Tivemos um grande plano de hospedagem, e também temos instalado WordPress nesse plano de hospedagem. E assim nosso nome de domínio está ligado de volta ao nosso plano de hospedagem, e nós temos wordpress instalado, então tudo está meio configurado e pronto para nós entrarmos no WordPress e aprender a fazer isso. 60. Aula de Wordpress Crash: se esta é a sua primeira vez, esta lição é projetada apenas para você. Vamos percorrer o básico do WordPress. As páginas do painel e tudo o que você vê aqui no painel no sistema de menus. Se você estiver, já tem algum nível de conforto com para a imprensa, e você está aqui apenas para aprender a usar L um mentor ou para construir uma página Web para clientes . Então vá em frente e pule a próxima aula ou duas. Isto é para aqueles que realmente querem caminhar através do básico do WordPress. Então sinta-se livre para pular isso. Se isso é muito básico para você, geralmente a primeira coisa que você vê quando você entra no painel é o painel, que lhe dará notícias atualizadas e deixará você saber se você precisa atualizar o seu wordpress, nós vamos ir para baixo tipo de lista de itens e tipo de ir sobre o básico do que eles fazem e onde eles entram em jogo. Então a primeira coisa que você verá é postar. Então post é basicamente o bloco em que cada site wordpress tem tão pensar em post como Blawg post. Então é aqui que você construiria sua postagem, e então você pode adicionar seu blog em seu site mais tarde. Isto é separado do que as páginas, modo que as páginas terão o seu próprio pequeno item e opção de menu e postar ou de forma diferente lá apenas para o bloco post. E eles têm uma maneira diferente de editá-los. Então, se você quiser editar alguma coisa, basta destacar uma opção diferente e entrar na edição e você poderá ir a um editor. Você também pode adicionar novos cartazes Wells. Ele poderia construir uma lista de diferentes postagens de bloqueio, e você pode definir para liberá-los em datas diferentes também. E então temos nossa seção de mídia. Então este vai ser onde se você precisa enviar um vídeo diretamente para foram oprimidos ou diretamente para a sua conta de hospedagem, esta é uma ótima maneira de fazê-lo. Você pode simplesmente clicar em, adicionar novo, e você pode adicionar novo vídeo e tudo o que você precisa. Então vamos dizer que queremos somar. Carregue este vídeo que queremos usar para o site. Eventualmente, você pode carregá-lo aqui e nomeá-lo. Digamos que temos essa imagem que carregamos e, às vezes, quando você está construindo um site, ele chamará um link. Ah, para ele no seu servidor. E aqui é onde você pode encontrar o link aqui embaixo. Isto será para mais tarde. Então não se preocupe muito com isso. Vou te mostrar como fazer isso de novo. Vamos começar a construir o site? Mas sim, Este é o lugar onde você carrega todas as fotos e mídia que você precisa para páginas. É aqui que você realmente vai morar. Esta vai ser a opção mais usada disponível porque é assim que você está construindo as diferentes páginas do seu site. Seu contato seu sobre nós perguntas frequentes, sua galeria, todos esses tipos de páginas separadas. Este é o lugar onde você começa a construir aqueles que você pode adicionar novo e você também pode clicar em editar. E vai ser muito simples, eu tenho a nova versão do WordPress, e por isso parece que pode parecer um pouco diferente do que você tem. Apenas certifique-se de atualizar sua versão do que somos presentes. Totalmente grátis. Vamos usar o editor padrão. Esta coisa nova, eu realmente não explorou muito ainda, mas é outro tipo de construtor de editores. Não vamos usar isso. Vá em frente e clique no novo editor padrão. Clique em. OK, então este é um editor muito padrão. Se você souber como usar o Microsoft Word que você vai estar muito em casa com isso, você pode adicionar imagens, excluí-las. Este é o construtor Web muito básico que não vamos usar, o que está embutido no WordPress. Vamos usar isso ainda melhor. Terra muito avançada. Um chamado L.A mentor e vamos rever isso e um pouco. Você pode salvar e atualizar sua página, e você pode criar novas páginas adicionando novas. Vamos voltar para suas páginas aqui. Então é aqui que suas páginas vivem. Estas são as páginas que podemos adicionar ao nosso sistema de menu mais tarde na estrada comentários são apenas para blog e gerenciar os comentários que você tem um monte de vezes quando você está fazendo sites de clientes, Eu nem sequer tenho comentários habilitados. Então isso geralmente não é algo para se preocupar com formas ninja. Isto é algo extra. Eu adicionei para o meu cliente, porque eu estou usando isso como um exemplo para a minha classe, mas você não precisa ter nada disso. Oh, toda vez que você instala um plug in, você pode ver opções extras espaço atitude em seu sistema. E este é apenas um desses. Este é o construtor de forma extra que eu adicionei como um plug in. E falando em plugins, o que vamos usar ao longo desta classe é chamado Element ou e há uma versão gratuita e eu vou repassar isso um pouco mais tarde. Então vamos pular modelos porque esses dois estão conectados juntos. Então vamos a aparência do dedo do pé. Então é aqui que você provavelmente ouviu falar de baixar temas. Este é o lugar onde você instalaria um tema que você começa a partir da Internet, e eu tenho um grande recurso para download que lista, hum, grandes opções de tema se você está querendo fazer algo diferente do elementar que usamos na classe, apenas uma espécie de tiro você alguns grandes modelos pagos e gratuitos que eu selecionei com base em certos layouts que eu pensei que eram realmente bons, se você só quer explorar isso, mas eles têm um novo chamado 2020 e este é o padrão que o WordPress tem. Vamos nos certificar de que está ativado. Se não estiver ativado, basta passar o mouse sobre um tema e ativá-lo. E ele irá adaptar o estilo desse tema automaticamente quando você ativá-lo. Então eu poderia ativar isso e ele vai ativar esse tema, ou eu posso ativar este. Volte para o meu 2020 e ativado, mas você pode baixar, e este é o lugar onde você instalar qualquer tema que você agarra da Internet. Você só vai adicionar novo aqui e instalar o tema mais recente. Você pode até procurar temas dentro do sistema WordPress para que você possa procurar por temas se você sabe um nome. Então, se você quiser personalizar um tema, você vai até aqui para personalizar. Às vezes, os temas têm seu próprio tipo de item de menu que é adicionado depois de instalá-lo. Necessário passar por isso, ou alguns têm esta opção onde você pode editar cores específicas. E eu estou passando por isso rápido porque à medida que construirmos nosso site, vamos ser capazes de passar por todos esses diferentes itens de vídeo e usar o que precisamos para usar, então plugins que você provavelmente ouviu falar de plugins. Há um monte de grandes que você pode baixar para ser capaz de adicionar e realmente melhorar o seu site. Muitos deles são baseados em segurança para dedão. Adicione segurança adicional ao seu site WordPress porque eles poderiam ser facilmente acessados se você não mantê-lo atualizado. Há também aqueles em plugins S CEO que permitem adicionar opções extras S CEO. Há uns para análise. Então é aqui que você adicionaria um plugue que você encontraria online. Ele só iria para cima como você faria temas. E ele adicionava novo aqui. Então, se você quiser nos passar para um cliente, é aqui que você adicionaria um usuário. Ou talvez o cliente tenha um gerente de marketing que fará todas as atualizações se você estiver fazendo as atualizações ou os clientes fazendo as atualizações. Este é o lugar onde você iria adicionar um novo usuário, e eu estou apenas bloqueando algumas informações porque este é um site de cliente real são baseados em conta WordPress cliente real que eu estou usando, então apenas desfocando alguns nomes. Mas ela iria em frente e adicionar novo e você lhes daria o papel de administrador. E há algumas funções diferentes que você pode atribuir aos clientes se você quiser dar a eles controle total para assumir o site depois que você terminar de projetá-lo. Então este é o muito, muito básico do sistema WordPress. E agora que nós meio que superamos o básico e você está familiarizado com pelo menos o que alguns desses itens fazem à esquerda, vamos nos certificar de baixar o Elementary er e começar com isso. Vamos fazer isso na próxima lição. 61. Introdução a Elementor Plug-in: Então, nesta lição, vamos aprender um pouco sobre o construtor de páginas que vamos usar para isso. Este é o construtor de páginas mais popular para WordPress. Então, o que é um construtor de páginas? Então, um construtor de contas de página ajuda você. É um add on para um plug em que você pode instalar em seu WordPress, e ele vai ajudá-lo a construir páginas e um pouco mais detalhado moda que é muito mais em profundidade. Como você pode ver no vídeo do site, você é capaz de adicionar um monte de coisas. E o que há de bom neste construtor? Está atualizado. Ele acompanha as tendências, e a maravilhosa opção sobre isso é que há uma versão gratuita que você pode usar, e isso é exatamente o que vamos usar para esta aula. Há muitas opções premium que você pode comprar, mas neste caso, vamos tentar sobreviver sem apenas usar a versão gratuita do Element. Ou então nós vamos baixá-lo, e você nem precisa baixá-lo no site. Mas eu só queria mostrar o site e também os preços. A versão premium vem em todos os tipos de sinos e assobios. Vamos encontrar uma maneira de contornar isso, então não se preocupe. Mas se você gosta de gostar disso e você está fazendo um par de projetos de clientes pagos e você quer começar a atualizar para modelos construídos que já fizeram para você, então isso é algo que você pode perseguir. Mas você não tem que seguir isso para esta aula. Então estamos em plugins. É tecnicamente, é um plug in, e nós vamos adicionar novo, e nós vamos subir aqui e procurar as palavras-chave por elemento. Ou e aí está, o primeiro com aqui. Eu já não instalei, mas você normalmente obteria a desinstalação agora, botão indo, clique em instalar. Ele será instalado automaticamente. Se você quiser ver seus plugins instalados, vá em frente e clique aqui no topo e você obtém uma lista de todos os seus plugins instalados. Apenas certifique-se que você ativou. Uma vez que você ativar o elemento ou conecte, ele será. Você tem que novas opções adicionadas ao seu elemento do sistema de menu ou e modelos. Então, isso é quando você passar o mouse sobre elemento, ou você vai ter um menu suspenso com um par de opções diferentes que você pode configurar. E então você também tem modelos, que você poderia dizer, nós não vamos mexer muito com. Modelos foram realmente só vai mexer com esta opção aqui. Então está ativado. Então agora é uma parte do construtor de páginas. Então, quando construirmos, as páginas serão capazes de usar Element ou como nosso construtor de páginas. Então ele está indo e clique em páginas e a primeira coisa que eu quero fazer se aqueles que pularam a última lição porque eles já estão um pouco familiarizados com WordPress. Para aqueles que ignoraram isso, nós fomos para temas de aparência, e nós apenas certificamos que a versão 2020, que é gratuita, vem por padrão. Com a versão mais recente do WordPress. Fomos em frente e garantimos que este era o tema ativo. Agora vamos voltar às páginas e que isso pode ser um pouco complicado. Se você é novo nisso, vamos até páginas e vamos construir nosso site aqui para que todos tenham uma página inicial, e isso é o que vai ser nossa página inicial que vamos construir hoje, e eu estou vai mostrar-lhe rapidamente o que vamos fazer nesta seção do curso. Então, vou atualizar esta pré-visualização. Você pode ver o que nós vamos construir toda esta página de destino de um site. Então vamos ter uma seção superior aqui em cima. Vamos ter uma espécie de fundo de vídeo. Teríamos botão ativo. Nós também vamos ser capaz Teoh, criar algumas colunas, ter alguns cliques através do botão, e então aqui, nós vamos ser capazes de fazer mostrar a você como fazer um pouco de animação para adicionar um pouco de pop para seus projetos e também fazer imagens de fundo e todo esse jazz. Isto é o que vamos ser capazes de construir com elemento ou sistema. Então, como começamos a usar elemento ou não podemos passar por lá. Não está nos dando a opção de começar. Vamos ter que passar por páginas e clicar em nossa página inicial. Então vamos editar nossa página inicial, e há uma pequena opção aqui. Se você não quer ter que clicar em editar, vá até aqui para editar com elemento. Ou então vamos fazer isso. Então vai trazer esse elemento ou sistema aqui que vai sobrescrever nossa primeira página. Então isso já foi construído a partir de coisas que eu estava experimentando. Então deixe-me começar uma nova página inicial e eu já volto. Vamos adicionar uma nova página que podemos editar adicionando uma nova página e não vamos adicionar um título. Acho que podemos fazer uma página inteira. Linguine salva um rascunho, volte duas páginas e veja se ele está listado. Este é o nosso rascunho. Vamos usar isso agora. Vamos editar é uma nova página, e vamos clicar em Editar com Elemento, ou vai explodir este novo construtor de páginas para nós. Então isso estava carregando a tomada. Então, bem-vindo ao Element. Ou então este é o plug in. Isto é o que parece. É assim que vamos construir nossas páginas nesta seção da turma. Então, uma coisa que queremos fazer é agora ele está carregando parte do tema. Então aqui está a coisa sobre este construtor web é para a versão gratuita. Você não tem uma maneira de adicionar uma opção de menu. É o que precisamos fazer é ter um híbrido do nosso tema, que é o tema 2020. Isso é padrão pelo WordPress que instalamos. Estamos ativados? Vai ser esta parte de cima. Então é aqui que fica um pouco complexo. Mas fique comigo. Então temos. Este é o site acabado. E assim a barra superior com o logotipo e o sistema de menu é importado do nosso tema do nosso tema wordpress 2020. Tudo abaixo vai ser de elemento ou assim elemento para a construção dessas partes do meio das páginas para nós e o WordPress. Steve está carregado em cima. A mesma coisa para o rodapé. Então, tudo isso é construído com elemento ou, e este rodapé inferior é carregado a partir do modelo. Então, se quisermos terminar no rodapé inferior ou na barra de sistema menu superior, vamos editar isso através do painel WordPress e as configurações de temas. Se quisermos editar qualquer coisa que estamos construindo no meio, isso vai ser elemento ou e ele pode sempre mudar isso indo para baixo para suas opções aqui e você clica em configurações. Haverá algo chamado layout de página, e é aqui que você pode carregar tudo isso. Então, por padrão vai carregar o topo muitos sistema e o rodapé inferior do tema e tudo no meio vai ser elemento. Ou você pode fazer elemento ou tela, que irá limpar esse menu temático superior e rodapé e apenas dar-lhe uma tela em branco de elemento terse. Se você não quer ter nada trazido, você pode construir a partir do zero sem nada ser trazido do tema O tema WordPress para apenas saber que você pode chegar a isso, indo para configurações e indo para layout da página. Vamos voltar às nossas configurações. Vamos remover o título para que tenhamos o layout da página no padrão, e queremos apenas clicar em alternar isso, também. Sim, vai esconder o título para nós e para o layout da página. Nós vamos fazer L. Um mentor, largura total então elemento ou cheio com vai ser capaz de fazer esta barra superior um pouco mais magro e assim você pode ver como o topo e o fundo são trazidos do tema e este é a parte do meio. Esse elemento vai ficar no comando da seção de saliva. Então, se você quiser alterar o menu, nós não fazemos esse elemento, ou nós vamos voltar para o painel de controle para alterar o menu. Então vamos começar pelo topo. Então, o topo vai ser este. Então isso não vai ser feito um elemento ou se você tem elementos ou pro. Há algumas opções de menu onde você pode adicionar um menu aqui sem usar o tema WordPress . Mas para a versão gratuita, vamos fazê-lo a partir do tema. Então vamos em frente e voltar para o nosso painel. Então estamos de volta ao painel, o novo sistema e o que queremos fazer é editar o tema que temos. Vamos descer à aparência e aos temas. E lembre-se, quando definirmos esse tema 2020, seremos capazes de personalizá-lo. E é aqui que você pode adicionar o local lá em cima. Então nós vamos descer para citar identidade, e nós vamos adicionar um logotipo, e eu tenho o logotipo disponível como um recurso para download. Então vá em frente e baixe esse zip. Vá para a sua pasta Zip e você poderá ver esta seção e ver todos esses arquivos disponíveis para você, para que você não precise voltar e criar tudo isso do zero. Você pode conectá-lo e aprender junto comigo ou colocar seu próprio logotipo lá. Vá em frente e adicione seu logotipo. Certifique-se de que é uma resolução decente e queremos ter certeza de verificar o logotipo retina porque isso ajuda t tomar resoluções maiores e exibir que quando você tem uma retina agradável, tela de alta resolução. Então é tão fácil assim. Podemos ir em frente e adicionar o logotipo. Agora queremos ser capazes de ir para as cores, e temos uma marca aqui. Então esta é uma marca que nós desenvolvemos anteriormente toda uma campanha de mídia social e nós tivemos alguns elementos de branding a partir disso. Então nós temos essas duas cores, essas duas cores hexadecimais que vamos tentar usar em todo o nosso site, e queremos que isso seja consistente, então queremos que as opções de menu aqui adaptem o laranja ou o azul. E eu imaginei que o Blue vai ser mais associado a links, mas também vai ser um pouco maior contraste com o branco e ter um pouco melhor legibilidade. Então é assim que editamos o minuto, que será no canto superior direito Aqui está o tipo de opções de menu aqui. Há também cores para as quais você pode alterar o tema da cor e para alterar os links u R L na parte superior. Você vai ter este pequeno controle deslizante e você percebe como ele muda enquanto eu deslizo isso. Então, isso é aplicar cor personalizada para links, botões e imagens de recursos. Então queremos ir em frente e mudar isso para a nossa cor azul. Então agora ele corresponde ao nosso logotipo e para fazer o menu e realmente adicionar quais páginas vão estar em seu conflito U para baixo em muitos. Há também uma opção de menu de volta no painel, mas você também pode fazê-lo aqui para que possamos definir diferentes itens de menu. Então este é o nosso menu principal. Você pode criar um novo mini se você quiser ter um para baixo no rodapé, e você pode definir os diferentes muitos locais. Então agora, o menu horizontal da área de trabalho que vai ser o seu top. Temos que definir como primário. Então vamos dizer que queremos editar isso então eu estou apenas clicando em dois mini Primário, que é o único que eu configurei. Eu já tenho alguns deste já configurar essas páginas diferentes ar que eu criei na área da página onde você pode adicionar novas páginas para o site. Nós temos uma casa, uma galeria, serviços, todos nós vamos ser clicáveis através de cliques. Então você pode adicioná-lo item para que possamos adicionar, digamos, portfólio que não temos. Então poderíamos adicionar isso ao nosso sistema de menus. E agora temos um novo item de menu, e você pode movê-los para que você possa ter uma ordem diferente. E digamos que teríamos um menu suspenso. Então vamos falar sobre menu suspenso. Então vamos dizer que queremos passar o mouse sobre o contato faz, e nós não teríamos um monte de menus suspensos sobre isso, então você fazer é pegar uma página principal e arrastá-la um pouco para dentro, e ele vai criar um link aninhado. Então este é o seu link pai e este é o seu link filho. Então foi ingerido. E agora, quando eu rolar, entre em contato conosco temos um menu suspenso, modo que é fácil criar menus suspensos. Se você não quiser que este seja um menu suspenso, deslize-o de volta para fora e altere a ordem. Então é assim que você edita menus. Há também outra maneira de editar as notícias. Se sairmos deste tema personalizado, vamos voltar aqui. Você também pode ir para baixo para a aparência e descer para os menus aqui. Você também poderá editar menus aqui da mesma forma. Você poderá ter um pouco mais de opções quando fizer isso dessa maneira, vez de passar pelo tema personalizado. A mesma coisa aqui nós podemos, hum, adicionar, adicioná-los mais. Então, digamos que temos perguntas frequentes. Podemos acrescentar que ele vai adicioná-lo bem aqui ao nosso sistema de menus, e podemos mudar a ordem. Podemos removê-lo para que possamos remover este. Digamos que eu queira adicionar um link personalizado que não quero adicionar apenas vinculado ao meu próprio site. Quero uma ligação para outro lugar. Você pode clicar em links personalizados, e nós poderíamos fazer teste aqui mesmo. Poderíamos ter o Cisco para Google dot com para um teste e adicionar ao menu. Então, se você quiser adicionar uma página que tenha um personalizado vinculado a ela, você pode e ela poderia simplesmente excluí-la. Assim, para opções mais detalhadas, você passa pelo painel de aparência e menus em vez de passar pelos temas personalizados . Então há sempre algumas maneiras diferentes de editar as coisas, e nós somos da imprensa, o que pode fazer parecer um pouco complicado. Mas uma vez que você passar por este processo uma ou duas vezes, você vai se familiarizar com ele. Não vai parecer tão complicado. Então, se você quiser fazer seu menu superior, é assim que você faz. Se você quer mudar seu logotipo, é assim que você faz. Então todo o resto que vamos fazer será construído com o sistema de turnê Element. Vamos voltar para nossas páginas agora que personalizamos seu menu e adicionamos nosso logotipo para ir para baixo para o nosso teste e vamos editar com Element, ou ele vai carregar a mesma página novamente. E lá vamos nós. Temos tudo atualizado. E agora vamos aprender tudo sobre como construir todos os elementos, construir tudo e adicionar vídeo. 62. Site do Wordpress - vídeo de cabeçote: para pensar no lado do design das coisas em que tudo tem sido técnico. É assim que se arruma isto. Vamos falar sobre nosso site planejado. Então eu tinha um plano para isso. Esta é uma empresa de viagens. Precisamos pegar pessoas de anúncios pagos. As pessoas virão de anúncios nas redes sociais e anúncios pagos. Então precisamos pegá-lo com um visual agradável para que pudéssemos ter uma imagem maravilhosa, estática e dinâmica com algum texto que voe ou poderíamos fazer algo melhor. Vídeo, vídeo, vídeo, pessoas adoram movimento. As pessoas adoram vídeo. Eles realmente se conectam, e isso os agarra. Então o que eu queria fazer era fazer um vídeo de fundo em vez de um carrossel rotativo. Vamos ver se podemos fazer esta parte superior do vídeo e sobrepor uma chamada à ação Botão e um pouco de uma manchete. Então, como fazemos isso? Usando um elemento ou algo assim o que queremos fazer é a primeira coisa que queremos. Dragão é um cruzamento. Então essa interseção é meio que seu padrão. Aguarde em um contêiner e adicione colunas diferentes. Vamos adicionar um cruzamento aqui, arrastar o widget. É bom criar um contêiner padrão para coluna, mas também vai ter isso fora contêineres bem, mas, em seguida, ele também está contido dentro de um contêiner pai. Então este é o contêiner da seção pai, e ele criou esse tipo de layout de duas colunas para nós. Então o que queremos fazer é adicionar esse vídeo em movimento ao fundo deste contêiner principal . Queremos ter um vídeo de fundo passando por esta área. Poderíamos voltar aqui e adicionar um vídeo, mas quando você adiciona um vídeo, você não pode colocar as coisas em cima do vídeo. Então, por exemplo, se eu em uma seção de vídeo aqui e adicionar o vídeo aqui, isso não vai me permitir adicionar outro cruzamento. Lá dentro vai fazer isso em cima, então não podemos fazer dessa maneira. Então é por isso que vamos criar uma interseção e adicionar um plano de fundo ao contêiner principal . Vamos clicar no contêiner principal, e vamos adicionar o vídeo de fundo em vez de uma imagem de fundo. Então nós queremos ter certeza em vez de caixa que esta seção principal é definido para cheio com, então isso vai esticar tudo para o lado de fora. Então agora vamos adicionar nosso vídeo. Vamos para o estilo, vamos para o fundo e isso vai nos dar algumas opções. Clássico é uma cor sólida. Poderíamos adicionar um fundo Grady. Podemos adicionar, Ah, apresentação de slides que atravessa ou, neste caso, vamos adicionar um vídeo para que você possa copiar e colar nosso link do YouTube que temos. Ou podemos hospedar o vídeo em nosso próprio site, bem como e hospedado nativamente. Então, onde encontramos esse link? Encontraremos isso na seção de mídia do seu painel. Então vamos voltar para o nosso painel, onde ir para nossas opções, este pequeno menu de hambúrguer, e vamos ser capazes de voltar para nossos painéis e vai clicar com o botão direito do mouse em abrir nosso painel contra nós estamos de volta e nosso painel wordpress. Vamos para a seção de mídia que revisamos mais cedo, e vou enviar um vídeo, e tenho isso disponível para você como um recurso para download. Se abrires a pasta zip que te dei para esta secção da turma, poderás ver onde tens o vídeo para ti. Ele ia adicionar um novo vídeo, apenas tipo de mostrar o processo e notar o tamanho do arquivo pequeno. Você não quer usar quatro vídeos K ou qualquer coisa que seja super grande porque você quer que seus tempos de carga sejam razoáveis. Esta é uma boa resolução baixa. Só vai ser usado como um vídeo de fundo. Então, vamos fazer o upload disso e eu já o tenho carregado aqui. Se você clicar quando terminar o upload, você apenas, uh, vá em frente, clique no vídeo e haverá uma pequena área de link de cópia bem aqui em baixo. Esta é a ligação que estão a pedir-te. Você só recebe uma cópia, esse link volta para o seu elemento ou e agora nós vamos voltar para a nossa seção principal e há os links ou apenas vai pisar esse link lá e você pode vê-lo automaticamente começa a carregar o vídeo em movimento . Você pode ter um determinado horário de início ou no tempo com seu vídeo. Você pode jogar de uma só vez ou loop. Então eu vou clicar em Não, para jogar uma vez porque eu queria continuar o Lupin Lupin Luke porque é uma espécie de fundo decorativo, imagem que chama atenção. Então, você também pode excluir isso da visualização móvel. Se por algum motivo você não quiser vê-lo no celular, você pode excluir elementos específicos para não carregar em uma versão móvel do site. Além disso, há uma queda de fundo. Isso é ótimo para as pessoas que passam por aqui. Por algum motivo, eles têm vídeos desativados ou reprodução automática em vídeos. Você quer ter uma imagem de fundo que funcione tão bem. Às vezes eles abrem o vídeo e fazem uma captura de tela e usam isso como minha imagem de fundo. E aí vamos nós. Temos a nossa pequena imagem de fundo adicionada. Então vamos dizer que queremos mudar o tamanho de toda esta seção e mostrar e revelar mais vídeos. Podemos sempre mudar o nosso estofamento, por isso estou aqui na mesma. Eu estive na mesma seção principal editar seção área o tempo todo de passar para avançado, e podemos adicionar um pouco de preenchimento para fazer isso estender horas. Teríamos uma área de visualização de maior impacto. Podemos adicionar um pouco mais de preenchimento. Podemos ajustar isso a qualquer momento. Então esse é o nosso contêiner principal. Então, para uma espécie de revisão, temos nosso contêiner principal. Nós temos o conteúdo na íntegra com e não encaixotado. E temos o nosso no fundo. Temos nosso vídeo, então estamos usando vídeos, um plano de fundo, e fizemos nossas configurações dessa maneira. Este é o nosso principal contentor pai, e temos este outro contentor aqui, outra secção. Este é um contêiner filho aninhado e ele vai existir dentro deste contêiner pai. E isso está trabalhando em um chamado botão de ação à direita e uma manchete à esquerda. Temos este padrão para grade de coluna. Claro, podemos adicionar colunas a que fará isso um pouco mais tarde. Mas o que queremos fazer é voltar para a nossa seção principal, que é bem aqui. Vá em frente e clique, e nós podemos obter todos os nossos diferentes itens e elementos que podemos carregar. A primeira coisa que queremos fazer é adicionar um título. Então está em um caminho para esta pequena caixa bem aqui arrastou isso para dentro, e agora nós vamos querer um chamado botões de ação. Nós temos um botão para se conectar de volta a essa manchete e realmente temos algo mais conciso junto com a imagem de fundo móvel. Glenn foi trocado ou tipo? Você é exótico. As férias começam aqui. Vamos precisar mesmo do dedo do pé. Faça esse tipo aparecer contra o fundo do movimento. Vamos mudar nosso estilo aqui. Estilo Amarin aqui na caixa de texto. E vamos nos certificar de que nossa cor do texto é branca e podemos torná-lo um pouco maior também, indo para a tipografia e mudando o tamanho. Você também pode alterar a altura da linha um pouco para que você não queira muito apertado e você não quer que as lacunas muito distantes. Você queria realmente sentir como se fosse uma manchete. Você também pode alterar um espaçamento de letras, mas com letras minúsculas gostam de ter muito cuidado e quer mantê-lo em zero ou um pouco negativo. Eu não gosto de ter grandes lacunas porque começa a parecer um pouco pouco pouco profissional. O colapso da escola que volta ao padrão zero. Nós poderíamos até fazer este velho um pouco maior e nós podemos até fazer uma sombra sobre isso é bom, então sombra tecnológica. Nós definitivamente queremos algo para ajudá-lo a subir acima do vídeo em movimento. Estamos indo para um pouco de sombra tecnológica, muito pequeno. Poderíamos clicar duas vezes sobre isso para torná-lo muito aparente ou não. Então, só para gostar de uma sombra sutil. Não vamos ter muito de um borrão. Foi um pouco borrão. Só ajuda a levantar acima do vídeo. E eu gosto de liderar com o Senado. Vamos em frente e liderar com uma capital. Podemos manter tudo em minúsculas. Então nós temos esse botão de chamada à ação que realmente precisa de muita ajuda. Então vamos em frente e obter algumas cores de marca aqui e tipografia. Então, basta clicar aqui no botão, vai ter algumas opções que você pode editar. Então o livro agora será nosso tipo de chamada à ação, e queremos ter certeza de que esta é a linha central, então ela está no centro alinhada com o parágrafo. Nós também podemos centralizar alinhar esta tipografia também. Então vamos fazer isso. Enquanto estamos aqui, estamos aqui e contentes e estamos apenas indo para o centro. Alinhe isso. Então ambos serão a linha central. Vamos voltar para onde Button. Vamos mudar a cor. Nós também poderia adicionar um pequeno ícone aqui, que eu tendem a preferir iconografia juntamente com botões porque ajuda a fornecer uma ajuda visual junto com o botão. Vamos ver se podemos adicionar um pequeno ícone e ele pode fazer upload e spg também membro. Quando criamos alguns ícones SPG mais cedo na classe, você pode fazer upload de uma Nikon e ela pode habilitá-los, e podemos fazer os ícones dessa maneira. Mas para este caso, vamos usar um ícone padrão da biblioteca de ícones. Vamos encontrar um ícone que se conecte com o livro agora. Então, para mim, é uma marca de verificação. Algum tipo de indicação disso é o próximo passo no processo. Vamos fazer essa caixa de seleção. Claro, você pode inserir qualquer tipo de nome para procurar um. Então agora temos um pequeno ícone à direita, o que é bom, e você pode alterar o espaçamento do ícone e torná-lo um espaço maior. Eu não gosto de ampliar a lacuna que você poderia colocar um antes ou depois, mas eu gosto antes que isso depende de você e quais são suas necessidades. Vamos fazer um botão grande ou até mesmo um botão extra grande, e podemos ir em frente e colocar nosso link aqui ou enfraquecer fazer opções de link. Podemos abrir em uma nova janela. Há muitas opções diferentes que você pode adicionar onde quer que isso seja bom para ir para que você possa adicionar seu link. Vamos passar para o estilo para que possamos mudar um pouco de tipografia aqui. Vamos fazer a tipografia um pouco maior bem ali. Vamos mudar a cor do texto. Então é aqui que queremos trazer nossos códigos hexadecimais porque queremos ter aquele azul e aquele laranja. Então eu tenho este documento de marca que você confinou na seção de mídia social da turma . Isso vai ser útil para lutar contra esses códigos hexadecimais. Então o 1º 1 é azul. Vamos clicar duas vezes nisso. Temos este código hexadecimal aqui. Primeiro, pegue uma cópia e cole isso, e assim ele pode salvar esses códigos hexadecimais que não precisam continuar inserindo aqueles em Vamos adicionar nossa cor laranja. Você não tem que fazer isso nunca mais. O que já acrescentou lá? Certo, então queremos fazer o botão. Podemos fazer o botão azul ou deixar o botão laranja. Qual deles vai aparecer mais neste tipo de fundo de vídeo um pouco ocupado? E meu palpite é que vai ser laranja, porque se você fizer azul e isso é para o datilografado o fundo. Então vamos manter isso branco. Vamos para a cor de fundo. Então esse é o imposto. Vamos ao fundo. Assim como Orange Workout ou Blue. Qual deles realmente apareceria para vocês se pudéssemos escrever texto laranja sobre azul? Todo o contraste não vai ser tão vibrante. Eu sinto que em alguns casos, especialmente com a primeira parte, você tem azul no azul com o fundo. Estou pensando que laranja pode ser uma cor mais atraente. Vamos mantê-la laranja. Então agora a próxima coisa que precisamos fazer é ganhar que tipo de centro alinhar esses dois porque agora isso está posicionado no topo e isso é meio que posicionado. Eu adoraria que isso descesse um pouco. O que queremos fazer é mudar este botão para que nos dê a chance de posicionar este botão, ver este pequeno botão de edição, vamos ser capazes de clicar e arrastá-lo para baixo. Podemos realmente movê-lo para onde quisermos. Vamos em frente e clique aqui. Aqui. E esta é apenas uma opção com um botão. Por enquanto, você não pode realmente clicar nisso e pegar o texto. O Texas meio que em seu próprio contêiner. Então isso é uma coisa especial que você pode fazer com o posicionamento dos botões. Vamos em frente e atualizar nosso site aqui para que possamos ir em frente e salvar o que temos aqui. Você também pode salvar como rascunho ou salvar como modelo também. Se você quiser. Você não está pronto para publicá-lo ainda. 63. Site do Wordpress - criando outras seções: Então é isso que espero criar. É apenas a caixa laranja de maior contraste após o vídeo que terá apenas um ponto de venda do cliente, que é a agência de viagens mais bem avaliada em 2020 com um pequeno ícone de cinco estrelas. Porque eu amo usar ícones junto com qualquer tipo apenas para tipo de realmente eu tenho um visual com texto. Esta é uma espécie de barra de alto contraste que eu quero criar. Então vamos fazer isso na nossa nova caixa. Então, queremos arrastar esse fim aqui. Vamos voltar aos nossos elementos aqui que podemos arrastar. Então o que vamos fazer é arrastar em um título bem aqui com o título aqui, e vamos seguir em frente e digitar tudo o que temos comida. A melhor agência de viagens em 2020. O que vamos fazer é ir a esta secção principal. Não vamos fazer a mensagem. Nós vamos para o principal, o segundo novo membro da caixa de seção. Como tínhamos uma seção principal aqui em cima. Esta é uma seção principal aqui em baixo, e queremos adicionar um fundo colorido sólido. Nós vamos para o tipo de fundo estilo, e nós só queremos fazer um preenchimento clássico de cor única. Nós vamos descer. Já temos a nossa marca laranja. Vamos empurrar isso. Podemos até adicionar uma imagem de fundo em vez de apenas uma cor sólida. Poderíamos fazer outro vídeo, embora você não precise de vídeos de volta para trás. Vamos avançar e entrar em colapso um pouco. Não queremos muito estofamento. Estamos apenas ajustando ou enchendo bem ali. Então agora podemos voltar para a nossa caixa de texto DoubleClick. E, claro, podemos mudar o pior. Configurando seus cabeçalhos de cabeça. Então H um H dois e parágrafo é meio legal porque você poderia ir aqui para o conteúdo e fazer tudo tipo de semelhante. O tamanho é que queremos ter certeza de que está alinhado ao centro e estilo. Queremos ter certeza de que é branco. Talvez pudéssemos torná-lo um pouco menor bem ali. Nós não queremos dominar as manchetes, então nós não queremos ter isso porque agora é o mesmo, diz Tamanho é a manchete. Então, digamos que nossas manchetes h dois. E se fizéssemos esta manchete H R é H um. E se fizéssemos este h dois? Acabamos de fazer um pouco menor, então ele não tenta competir com o melhor curso. Podemos sempre voltar para a seção de permanência e ajustar o Patty. Então aqui está tudo o que temos que fazer é clicar com o botão direito nesta pequena caixa aqui em cima e vamos ser capazes de adicionar uma nova coluna. Agora temos um layout de duas colunas, mas não quero que as estrelas ultrapassem isso. Então aqui está o que vamos fazer. Vamos precisar mudar a porcentagem que esta coluna está ocupando. Então o que queremos fazer é arrastar algo especial. Acho que se chama Classificação Estelar. Eles realmente têm um pequeno widget que você pode usar para estrelas. Arraste essa ponta. Isto pode ser uma pequena classificação de estrelas aqui. Poderíamos fazer isso um pouco maior, dar um estilo de cinco estrelas, fazer um pouco maior, ter um pouco mais de espaçamento, e queremos mudar a cor para azul apenas para adicionar aquele pop de alto contraste. Então agora queremos mudar as colunas porque agora você tem isso e isso juntos, nós queremos tipo de mudar como isso parece. Queremos reduzir o tamanho da coluna aqui desta coluna e aumentar o tamanho da coluna deste para fazer é que queremos fazer. Esta pode ser uma coluna de 70% com e os outros 1 a 30% nós vamos clicar neste, e nós vamos passar pelas estrelas e para chamá-lo com Vamos fazer 30 E aqui nós queremos fazer a coluna com 70 então ele vai mudar automaticamente se houver apenas duas colunas, então há uma espécie de nosso layout de duas colunas. Podemos, é claro, tornar isto mais pequeno. Vai clicar nisto. Podemos fazer 20% e talvez vamos alinhar à esquerda. É assim que parece na pré-visualização, e é aqui que podemos mudar algumas coisas ao redor. Então, se nos sentirmos como o livro laranja agora, hum, interage muito com o mesmo botão laranja aqui, nós podemos mudar o sombreamento aqui ligeiramente. Torná-lo mais leve. Encontrar alguma maneira de diferenciar os dois ou a menos que queiramos conectar os dois com cores, isso é bom também. Então, basta tentar visualizar cada etapa deste site e tentar tomar boas decisões de design à medida que trabalhamos através do layout da Web. Então, é quando precisamos começar a pensar sobre o celular e, você sabe, celular às vezes vem primeiro, então vamos em frente e começar a ver como isso funciona no Mobile porque estamos tendo tudo isso configurado no desktop e isso é ótimo. Mas como ele se parece em um dispositivo móvel ou em um tablet? É incrivelmente importante estar sempre verificando isso durante todo esse processo. Então vamos descer a isso. Uma pequena opção aqui no fundo chamada “Sentimentos Responsivos”. Ele vai clicar em que vai nos fazer ter uma pré-visualização padrão. Sua desvantagem para desktop, mas podemos configurá-lo para tablet para que eu possa ver o que ele parece. Um tablet. Podemos editar tudo isso e modo tablet, ou podemos mantê-lo no celular. E quando voltarmos para aqui, podemos continuar até o final do site apenas com essa visão, que é realmente incrível. Esse é um dos grandes benefícios para elemento ou é ser capaz de pré-visualizar em todos os modos muito facilmente. Então vamos ver como ele fica na visualização móvel, e nós vamos ter que voltar e ajustar para ter certeza de que ele parece bom em tudo. Três. Então vamos tentar o tablet primeiro para que o tablet pareça muito bom. Talvez precise colapsar o tamanho desta tipografia. Talvez bem ali, você sabe que talvez pudéssemos fazer os botões um pouco menores. Há pequenos ajustes que podemos fazer para que pareça bom. Então eu acho que parece ótimo e tablet. Parece ótimo. E desktops ainda, Mesmo que nós tornamos o tipo um pouco menor, vamos tentar dispositivos móveis. Esse tipo realmente começa a sobrecarregar. Nós meio que temos nosso menu aqui que podemos clicar. Então aqui está o nosso pequeno menu caiu muitos que será apenas como um menu de hambúrguer viajar para baixo e as estrelas não estão realmente fazendo um bom trabalho aqui. Ele provavelmente precisa estar alinhado ao centro. Phyllis é certificar-se que o centro aéreo está alinhado. Vamos voltar para o centro de conteúdo, linha a estrela . Então isso parece melhor. Parece que nosso botão aqui meio que se sobrepõe à seção, então eles são pequenos ajustes que precisamos fazer. Veremos como fica na área de trabalho agora que fizemos alterações ainda parece bom na área de trabalho. Então talvez precisemos reduzir o estofamento aqui e não ter que trazer isso para cima um pouco . Thing in Mobile vai ficar bem em desktops. Então, há alguns truques que podemos usar para exibir coisas móveis onde podemos excluir uma certa coisa com a qual estamos tendo problemas e fazer outra coisa em dispositivos móveis. Neste caso, se eu for para o modo responsivo e ir para Mobile, teremos um pouco de problemas quando se trata deste botão tipo de sobreposição da área votada melhor agora. Então o que podemos fazer é clicar no botão ou realmente clicar na melhor agência votada aqui, e podemos excluí-la para visualização móvel. Nós vamos para baixo para responsivo. Poderíamos escondê-lo apenas no celular, tão avançado, responsivo, e podemos escondê-lo no celular para que ele não esteja lá. Então, o que podemos querer fazer é esconder esta seção, ir para baixo para responsivo e ocultar no celular, que toda a seção não seja visualizada, e podemos continuar a adicionar as outras seções, e também podemos criar um novo seção aqui, e é apenas poderia existir no celular. Então, se quisermos ter um arranjo diferente, o que poderíamos fazer é criar uma nova seção, escondê-la no tipo de morte e esconder no tablet, e só tê-lo no celular, então você pode mudar as coisas em torno e tipo de fazer o seu próprio móvel personalizado para fora. Se você tem um elemento que parece justo tarefas na área de trabalho, você quer mantê-lo dessa maneira. Você sempre pode ter uma seção diferente apenas para a versão móvel. Então é assim que se faz isso brevemente. Claro, eu posso entrar em mais detalhes em muito disso, então vamos voltar para a versão desktop. Lá vamos nós. Então eu acho que parece ótimo e móvel. Grande área de trabalho. Eu acho que se eliminarmos essa seção e adicionarmos uma nova seção que funciona apenas para celular, eu acho que podemos obter essa pequena seção de trabalho também. Então precisamos fazer isso à medida que passamos pelo site, continuar a pré-visualizar em todos os três modos. Tem que ficar ótimo em todos os três. E se não, podemos modificar uma seção para fazê-lo funcionar em apenas mostrar no dispositivo móvel. Então vamos adicionar nossa próxima seção. É assim que vai parecer. Role para baixo. Vamos fazer isto acontecer aqui mesmo. Queremos ter uma espécie de manchete chamada Action Button e vamos criar este pequeno gráfico que vai deslizar para a direita e animar assim como a versão superior fez. Então vamos construí-la. Eu adicionaria uma nova seção, voltava aqui para o módulo dela, e nós vamos adicionar um cruzamento bem aqui. Vai criar uma grade de duas colunas para nós, e uma vai ser uma caixa apertada Dragon Type Editor Scott, um editor tipo dragão, nesta caixa. Também vamos precisar de outra coisa . Então, se eu mudasse esse tipo, ele mudaria todo o tipo. Não nos permite isolar um tipo e torná-lo uma manchete. Mudará todo o tipo nessa caixa. Então o que vamos fazer é ter o rumo e arrastá-lo para cima desta caixa. Então o que vai fazer é que temos nossa seção principal aqui, e nós temos nossas duas colunas esquerda e direita. E o que fizemos foi adicionar um cabeçalho no topo desta caixa, e agora temos que caixa à esquerda e uma caixa sobre os direitos que sempre manchamos e corpo cópia . E esta será a nossa foto que eventualmente será adicionada. Não quero usar essa cor de pêssego padrão. Então eu vou até aqui para esta seção principal aqui em cima e mudou o fundo. Dois brancos. Lá vamos nós. Então agora temos um fundo branco e vamos em frente e adicionar o tipo, e então podemos ajustar o estilo de tipografia em um pouco. Então eu vou em frente e adicionar o tipo e eu já volto 64. Site do Wordpress - criando nosso recurso do Instagram: Então é tudo sobre estar em locais exóticos e desejar que você fosse o único tirando aquela foto no Instagram. Então é fazer esse sonho. Em vez disso, Instagram conta o seu assim apenas fazendo um pouco de direitos autorais, um pouco de narrativa. Então vamos apenas ajustar isso, obviamente, Blue não vai funcionar. Então vamos ajustar o nosso tipo. Podemos fazer em Orange, ou podemos fazer um azul ou podemos fazer um cinza e ser neutro. Isso depende mesmo de você. Se sentirmos que estamos usando mais cores, poderíamos ficar com um cinza escuro neutro, que poderia funcionar porque eu acho que ele meio que neutraliza todo aquele bastão de trabalho de cor para uma cor de marca. Então, vamos ver como isso parece. Vamos ficar com a cor da marca por enquanto. Se precisarmos torná-lo neutro porque há muitas cores concorrentes, podemos fazer isso mais tarde. Vamos também fazer isso um pouco menor. Veja o que o H quatro se parece com o H quatro. E vamos também fazer isso o parágrafo para que ele vá para o conteúdo que é tipo de parágrafo, e podemos ir para o estilo e ajustar o tamanho deste como camisas legíveis em todos os formatos quer tentar fazer 16. Então vamos tornar isto neutro agora que estou a pensar e a ver. Vamos fazê-lo em cinza neutro e torná-lo um pouco maior. C H três h três. Funciona muito bem. Então faça o seu sonho, Instagram contar o seu. Vamos até completar dois parágrafos. Isso é apenas gobbledygook por enquanto, mas eu acho que vai funcionar. Então, digamos que temos um monte de estofamento aqui. Temos um monte de estofamento extra aqui. Nós queremos tipo de fechar a lacuna aqui. Vamos clicar na nossa imagem principal aqui e ver se podemos mudar algum do preenchimento. Vamos ver o que o zero faz e a margem zero. Lá vamos nós, então ele meio que traz um pouco, e nós sempre podemos mudar nossas colunas. Lembre-se, podemos clicar sobre as esquerdas aqui e fazer coluna com Faça isso 40% para que tenhamos um pouco mais. Temos 60% deste lado, então é entre 100%. Então, é dividido para fazer 100% tão 40% 60%. Acho que a foto deveria ser um pouco mais mostrada. Vamos ter uma coluna de 60% para mostrar a foto dela. Então vamos criar nossa pequena imagem do Instagram. Tirou par com esta manchete. Então, eu vou te ver na loja de fotos. Então eu estou aqui no Adobe Photo Shop e você terá acesso a este modelo eu adaptei de outro modelo. Mas eu queria adaptá-lo a este site em particular. Mas você poderá ter esse arquivo exato do Photoshopped. Você pode trabalhar comigo. Você não precisa recriar todo o instagram do zero. Mas você é um designer muito experiente agora, então você pode facilmente fazer isso e recriar os ícones do Instagram e tudo mais. Você tem todas as ferramentas que você precisa para re criá-lo a partir do zero, mas aqui já está feito para você. Vamos em frente, substitua algumas dessas imagens. Então vamos ficar com essa. Então aqui eu tenho isso como uma máscara de recorte. Vamos clicar com o botão direito e soltar a máscara de recorte. Apague essa foto e temos uma caixa ótima aqui, e vamos trazer outra foto. Eu tenho Você não tem que usar nenhum desses que eu estou usando. Vá em frente e traga isso. Você também pode trazê-lo como um recipiente. Então, se você quiser criar um contêiner aqui em cima criando um contêiner aqui usando esta ferramenta contêiner de ferramentas, você pode fazer isso e arrastar sua imagem para dentro. Isso vai tornar a vida muito mais fácil para você. Então eu fui até aqui para o meu contêiner, clicando no lado direito para que eu possa ter controle sobre essa imagem em particular. Queremos ter um atrativo emocional para o espectador, então vamos ampliar um pouco. Eu vou arrastar isso para cima e meio que gastá-lo um pouco aqui, tipo de dado um pouco de pop dinâmico. Quer ver as duas fotos? Temos muito espaço esculpido para fora para que pudéssemos cortar uma figura fora como nós queremos organizar isso, e nós poderíamos ir em frente e cortar. Isso é bom, não precisamos de tanto espaço. É uma colheita que um pouco bem aqui. Não temos muito espaço em branco porque vai adicionar um monte de enchimento natural. Podemos sempre adicionar estofamento em nosso recipiente. Então vamos fazer apenas o suficiente para obter aquele pouco de uma sombra mostrando pressione enter e apenas mostrando como trazer ativos quando você está criando projetos da Web. Então, queremos exportar. Isto é um P e G. Queremos colocar isso em um fundo colorido. Queremos ter certeza de que não há nada acontecendo em segundo plano. Então eu vou em frente e exportar isso como um PNG. Vamos para o PNG. Não queremos torná-lo tão grande. Então, se tivermos uma largura de 1919 20 pixels de uma área de trabalho e esse é provavelmente o maior usuário teremos, estamos usando apenas metade desse tamanho. Então, digamos, digamos 1000 1000 pixels. Eu ia ajustá-lo automaticamente para nós, então vamos em frente e trazê-lo como uma imagem. Então vamos para os nossos elementos e vamos apenas arrastar em um widget de imagem simples. Agora vamos clicar aqui para escolher a imagem, e vamos enviá-la para a nossa mídia, e eu já tenho um criado a partir de uma versão anterior, então eu vou clicar aqui e clicar em Inserir mídia e ele vai atualizar para nós. Aqueles limeys estão um pouco melhor. Então vamos em frente e clicar em nosso contêiner principal esquerdo. Não só a manchete, mas toda a coluna da esquerda, e nós vamos desvincular isso e nós só queremos colocar um pouco de estofamento no topo para meio que colocá-lo em linha com a foto. Poderíamos fazer nossa imagem um pouco maior, então agora temos por 10 24 por 10 24. Mas podemos sempre mudar o tamanho sempre que quisermos e também o alinhamento. Ele também o vincula também. Então o que eu quero fazer é adicionar essa mesma animação. Vamos voltar para o grande porque eu quero ter muita diferença aqui embaixo. Depende de quanto tipo você quer ter nessa área. Então vamos fazer a mesma animação onde este pequeno bloco desliza para a direita, então vamos para Movimento Avançado afeta. Poderíamos fazer um desvanecimento assumindo um salto. Vamos continuar com o nosso slide in, deslizar para a direita e podemos ter este slide para a esquerda. Então, basta clicar nesta coluna efeitos de movimento avançados, Vamos deslizar para a esquerda. Vamos atrasar um pouco, então a imagem está ligeiramente atrasada à direita, então efeitos emotivos. Vamos adiar por apenas cinco por meio segundo. Eu não quero muito atraso, ok, então vamos atualizar e ver o que temos até agora para isso. Clique em pré-visualizar alterações e vamos ver como ele é carregado. Além disso, se você tende a ter problemas com o tempo de carregamento, você deseja certificar-se de que otimiza a exportação. Digamos que isso é que acho que são 800 kilobytes, o que é bem grande, mas é de alta resolução. Vemos o que é. 863. Você sempre pode exportá-la de forma diferente para fora de uma loja de fotos. Se o tamanho é uma preocupação ou o tempo de carregamento é uma preocupação. É ir para exportação de arquivos em vez de apenas exportar, como você pode dizer para Web, e ele vai dar-lhe um pouco mais de controle sobre a redução do tamanho do arquivo. Então, se reduzirmos o zoom, selecionamos PNG oito curso. Poderíamos mudar o tamanho da imagem dela para baixo 1200, o que irá reduzi-lo. Então agora isso está abaixo dos 319 k, então conseguimos reduzir o tamanho do arquivo em 60%. Então há e há alguma redução de qualidade que você obtém quando você faz isso. Mas é tudo de vocês. Só precisa ter certeza que tudo está carregado corretamente. Tentei outro. Computadores. - Como? que rapidez ele carrega? Se você estiver tendo problemas para carregar, verifique seu vídeo, verifique se ele não está exigindo muitos dados e a mesma coisa com fotos Esta otimização de fotos para a Web e certificando-se de que seu tempo de carregamento é uma prioridade. Vamos em frente e fazer o nosso teste aqui. Aqui está o seu teste rolando para baixo. Vá em frente e atualize isso mais uma vez, então tudo está deslizando. Parece legal. Podemos atrasar isso um pouco. Podemos ter uma tragada mais lenta e devagar. Teremos um atraso adicional por um segundo e teremos um atraso aqui por dois segundos. Ou talvez 1500. Um segundo e meio. Vamos ver como estamos testando as coisas e vendo como as coisas são atualizadas. Lá vamos nós. Bonito, lindo. Então agora estamos prontos para a próxima seção quando você faz sites quando você tem uma grande área. Então, digamos que isso é muito branco. Então, temos muita cor aqui em cima. Estamos usando nossas cores. Temos um monte de branco aqui em baixo, e neste caso podemos até mudar um destes dois azuis. Vamos fazer isso muito rápido, porque estou olhando para isso. Você sabe o que? Precisamos mesmo de um pouco de azul aqui. Então vamos mudar essa barra para azul, que é diferente de quando eu originalmente planejava entrar em estilo para ir para o nosso contêiner, indo para o estilo e vamos fazer o nosso azul de marca. E então só precisamos mudar esse dedo de laranja, as estrelas ou laranja. Aqui vamos nós. Então, agora, o que fazemos com a próxima seção? Então temos essa grande área branca. O que eu gosto de fazer é ter um monte de contraste, especialmente depois que eu tenho uma grande área branca 65. Site do Wordpress - layout de três colunas: Uma vez que temos a barra azul forte, vamos adicionar uma seção laranja aqui em baixo onde os fundos todos laranja para adicionar um pouco do contraste preto e branco onde você tem um fundo de alto contraste. Então você tem uma luz e, em seguida, você tem uma cor alta e meio que realmente abala o layout em vez de fazer apenas outra área branca com três ícones. Vamos sacudir o nosso passado. É o que queremos fazer. Queremos adicionar uma nova seção. Então o que queremos fazer é em uma seção de três colunas, queremos adicionar três ícones, três seções de parágrafo corpo e queremos adicionar um fundo legal que vai combinar com nosso laranja. Então o que vamos fazer é trazer nosso cruzamento, e por padrão é também. Então vamos fazer três para ir bem aqui, e vamos adicionar novas colunas. Vou adicionar três colunas. Então cliquei aqui nesta fila. É aí que vamos adicionar a terceira coluna. Então o que nós queremos fazer é voltar para nossos elementos aqui e arrastar algumas coisas, então nós queremos ter uma Nikon, então vamos apenas fazer uma imagem bem aqui no meio da caixa para arrastá-la para lá. Nós também vamos querer ter um cabeçalho, algum tipo de título para ele. Então vamos fazer um cabeçalho logo abaixo, e então nós queremos fazer por último, uma caixa de texto. Vamos editor de texto logo abaixo. Certifique-se de colocá-lo na caixa certa. Vamos fazer um, e então poderemos duplicar isso para economizar tempo e edição. Então a primeira coisa que queremos fazer é mudar nossa imagem. Eu quero ter três ícones que usamos para isso para que possamos simplesmente não ter tipo chato. Poderíamos ter algum tipo de imagem que o acompanhe. Então eu tenho estes como download. O recurso é que você pode carregar. Eu tenho todos estes três são os três ícones que criamos mais cedo na classe. Basta clicar na imagem dela. Vamos em frente e encontrá-los. Vamos fazer este primeiro. Vá em frente. Responda isso. Vamos mudar seu rumo. Vamos fazer o plano de fundo porque o que eu quero fazer é que eu quero ser capaz de encontrar o estilo de tipo certo . E se eu definir o fundo, eu vou ser capaz de encontrar o contraste certo para o tipo. Então vamos adicionar nossos fundos é sua seção principal, assim como fizemos no início. Estamos a clicar na nossa secção principal e vamos ao estilo. Vamos adicionar uma imagem para clicar no clássico Poderia fazer uma imagem. Já tinha preparado isto, mas está em azul. Então vamos fazer isso juntos e Photoshop usando laranja. Então nós temos nossa cor laranja de nosso pacote de marca onde ele vai garantir que nós temos código X disponível. Vamos para a loja de fotos e vamos usar esta imagem aqui. Você pode usar qualquer imagem que quiser. Esta é apenas uma foto de fundo. Pode ser qualquer foto de viagem que quiser. Vamos mudar isso, então eu vou mudar. Às vezes é mais fácil. Você pode simplesmente fazer uma ferramenta de pintura em seu código hexadecimal ou você fazer algo ainda mais fácil. Basta fazer um quadrado e ilustrador e apenas arrastá-lo por cima. E queremos trocar por isso. Quero colocar esta foto no topo e não faríamos um modos de mistura. Nós vamos descer todo o caminho para descobrir qual deles nós achamos que ficaria bem e ainda manter a laranja. Não queremos que pareça apagado. Não queremos que não pareça com a cor da marca. Então muitas vezes a luminosidade funciona muito bem. E então nós vamos apenas reduzir a capacidade aqui para que pudéssemos ver o tipo em cima, exatamente assim. E agora não precisamos disso. Muito grande, mas tudo bem porque podemos cortar como fomos lá. Mas ouve cortar um pouco desse cara, e também queremos reduzir o tamanho do arquivo. Então vamos reduzir o tamanho da imagem. Então imagem tamanho 6000. É um tamanho muito grande de alta resolução. Então isso vai ser apenas um tamanho de fundo. Então vamos ver se conseguimos escapar com 2000. E como este é um fundo, eu não estou tão preocupado com a qualidade. Iria para exportar arquivo web mais segura e poderíamos fazê-lo em um pouco de uma qualidade mais baixa. Certifique-se de que está em P e G, ou neste caso, acho que podemos fazer J peg simplesmente porque não precisamos de nada para ser transparente. Então vamos fazer um J. Paige que é sempre um pouco menor em tamanho de arquivo. Nós poderíamos reduzir a qualidade um pouco para derrubá-lo e, em seguida, ir em frente e clique em Salvar. Agora podemos ir em frente e enviá-lo, e eu tenho o azul. Portanto, você também coloca o laranja no arquivo para download para que você possa ir em frente e ter isso feito para você inserir. E agora podemos colocar White lá. Poderíamos começar a escrever nosso texto perto de uma linha central. Vamos fazer com que seja quatro anos. Não precisamos que isto seja muito grande. Vamos torná-lo cor de texto de estilo branco. Acostume-se a tudo isso depois de fazer 70 vezes. Então vamos mudar o estofamento aqui neste não é um monte de preenchimento aqui. Vamos meio que condensar que estava indo para avançado. O zero primeiro disse que nossas margens zero apenas meio que trazendo isso um pouco mais . A mesma coisa para isto. Podemos clicar no recipiente principal tipo de definir um preenchimento zero. Vai apertá-lo, mas tudo bem, porque podemos ajustar isso. Quem sabe como mudar o estofamento neste grande recipiente e também no recipiente da seção principal , então sinta-se livre. Se você não está obtendo os resultados que precisa, certifique-se de ir ao seu contêiner principal e verificar o seu tapinha lá também. Então, o que estou vendo aqui? Vamos mudar a posição da imagem porque ela não está vendo realmente nada na imagem do valor. Então é ir e selecionar nossa imagem de fundo aqui, e nós poderíamos mudar a posição. Faça um centro à esquerda ou, se você fizer fixo, ele fará um estilo de paralaxe pobre. Então, quando você rolar para baixo, você pode ver como são as imagens estáticas. Pode-se ver mais da imagem desta forma. Então eu só fui para Attachment e Major estava no Pergaminho Fixo. E enquanto estou fazendo isso, estou percebendo que é muito difícil ver na laranja, e eu realmente acho que minha idéia original com o azul pode funcionar melhor, mas isso não é problema, porque eu posso trocá-la em azul. Isso parece muito melhor, eu acho, na minha opinião pessoal, deixe-me apenas ajustar o estofamento em um pouco mais de espaço de respiração, voltando e ajustando porque eu realmente quero ver aquela foto legal. Então, uma coisa que podemos fazer é ter isso. Poderíamos fazer isso de novo. Dragão, um dragão fotográfico, um cabeçalho. Ou podemos duplicar esta caixa inteira. Então, isso é o que vamos fazer é clicar acima do topo, que vai ser esta caixa inteira, clique direito, duplicar, clique direito, duplicar, e, em seguida, excluir tudo isso foi Certo. Clique em Excluir direito Clique exclui. E agora tudo o que temos de fazer é substituir as nossas imagens e substituir o texto do Oliver. E depois acabamos com a nossa coisinha de três colunas. Vai fluir assim. Então, como podemos adicionar um pouco? E parece que isto está um pouco desligado. Parece ver como isso não está na mesma linha. Bem, é um ícone de ajuste um pouco, então eu estou aqui com estilo na minha só para a minha imagem, apenas para garantir que tudo se alinhe. Então, basta mudar os chicotes ir e mudar a largura deste estilo de imagem. Quero ter certeza de que tudo se alinha muito bem. Também mudou o rumo para a nossa laranja. Quem pode precisar fazer um tom mais leve, e tudo bem. Você vai ter casos em que você precisa tê-lo em um fundo mais escuro. É por isso que, na sua marca, você tem vários tons de laranja, não apenas um tom de laranja como nós temos. Você tem vários tons, então o que podemos fazer é salvar a sombra, adicionar que certo sobre eles são perfeitos. Eu pensei que isso adicionou um pouco mais de contraste, mas ainda não foi esmagador. Então vamos em frente e salvar isso e ver como ele fica na visualização ao vivo. Então aqui está tudo tipo de vindo. Suas férias exóticas começam aqui. Você pode clicar em outro link a melhor agência de viagens. Faça sua conta INSTAGRAM sua. Seria bom se tivéssemos um pouco de animação quando rolamos até aqui, então vamos voltar e fazer um pouco de animação nessas caixas. Estou clicando nesta caixa principal, não apenas na imagem, mas toda a pequena caixa principal aqui, e nós vamos para a mesma coisa. Temos feito efeitos de movimento avançados. O que tem este slide para a esquerda? Vamos ter este deslizamento deslizando para cima e, em seguida, ter este é como a direção oposta , slide e direitos. É luz e luz esquerda e direita e desliza para cima. Então vamos ver como isso se parece. E lá vai ele. Tudo isso parece ótimo, e temos esse tipo de rolagem média de paralaxe do fundo que parece muito bom. E talvez até mude isso. Inverta isso de volta para laranja, já que não teríamos virado azul. Não é grande coisa. Volte para cima e troque isso, e agora temos aquele isqueiro laranja. Estou quase me perguntando se podemos adicionar em vez de ter estes com a mesma cor exata, poderíamos mudar seu botão para que ele não esteja competindo com a barra. Mude-o para as nossas cores azuis mais claras para ver como é um tom ligeiramente diferente, mas ainda está na mesma família. Acho que parece muito melhor, então lá vamos nós. Vamos ver mais uma vez. Este é o nosso último tipo de teste aqui. Há mais uma coisa que eu acho que nós poderíamos realmente aderir e eu sinto que há algum tipo de estrutura faltando aqui, como eu sinto que deve haver algum tipo de barra divisória em algum lugar dividindo esses três elementos acima. Então vamos adicionar uma barra dividida a isso. Então tudo o que temos que fazer é voltar aqui para dividir. Vamos deslizar divisor bem no meio daqui. Podemos mudar nossa linha aqui para o que quisermos que seja. Então eu queria tentar algo curvilíneo. Então vamos tentar curva, e nós poderíamos mudar a largura para que ele não vá todo o caminho através do centro. Alinhe, vá para o estilo. Poderíamos fazer aquela mudança branca. O peso e espessura e mudar o tamanho foi adicionando um pouco de uma borda lá, adicionando um pouco mais de uma quantidade ou reduzindo-o apenas um pouco de diferença algo. O que é reduzido que um pouco só adiciona um pouco de área divisória lá que pode adicionar isso aos outros dois também. Podemos até mesmo clicar com o botão direito, duplicar e distrair todo o clique direito duplicado no Dragon direito sobre. Acho que parece muito bom. Acho que só precisamos acrescentar que esta é a final quando eu criei antes de filmar a turma. Então eu quero ter certeza de que fazemos esse último passo para que eu possa mostrar a vocês como fazer um botão de chamada para ação . Então, para isso e não, acho que não precisamos de tanto texto. Agora teríamos um chamado botão de ação, o que é muito bom. Vamos subir aqui e fazer. Tem um botão. Tinha aqui mesmo. Quando eu quero fazer é centralizar alinhá-lo, fazendo um ícone adicionado médio que eu acho que combinaria muito bem. Vamos fazer uma flecha. Eu fico um pouco maior quando vou e troco as cores disto. E lá vamos nós. Temos tudo pronto para nós. 66. Site do Wordpress - design responsivo: Agora é hora de testar isso. Nós adicionamos. Nosso botão de chamada à ação aqui ajustou o preenchimento sobre isso para ter o bom espaçamento aqui. Então vamos em frente e testá-lo. Vamos para o humor responsivo. Vamos ver como fica no tablet. A parte de cima parece ótima. O barzinho parece ótimo. Isto pode precisar de um pouco de estofamento aqui. Isso provavelmente poderia ser reduzido em tamanho. Talvez como um pequeno estofamento adicionado entre as colunas. Vamos em frente e fazer alguns desses ajustes. Talvez este tipo não precise ser tão grande, possamos encontrar um número que funcione. Então talvez 22 ou talvez algo entre os 30. Altere a largura desse ícone para corresponder aos outros, assim como pequenos ajustes que poderíamos fazer. Vamos ver o que podemos fazer. Ligue para ele. Então vamos fazer este pai principal aqui Super pode ajustar o preenchimento para ter um pouco mais espaçamento Cada pouco estes ar têm estes ar aninhados bem, então temos esta coluna principal, mas também temos estes também, cada coluna individual. Vamos clicar na coluna da esquerda. Sim, e agora isso parece um pouco melhor na de trabalho também podemos mudar. Isso é bom, para adicionar um pouco de preenchimento. Vamos avançar desvinculados isso e fazer algum preenchimento à esquerda. Lá vamos nós. Então, apenas fazendo alguns pequenos ajustes na visualização móvel. Então vamos voltar para a área de trabalho. Certifique-se de que não havia nada realmente comprometimento dramaticamente. Tudo parece muito bom. Parece ótimo. tablet parece bom. E aqui está o grande pontapé. Como é que parece? E móvel. Então excluímos isso. Então isso vai ser ótimo. Então vamos ter suas férias exóticas começando aqui agora, então você tem alguns ajustes que precisamos fazer. Isso vai ser uma coisa mais difícil. Está equilibrando Como é a aparência da área de trabalho? Não olhou no tablet e tem, é olhar no celular. E pode ser que essa grade de três colunas não colapse muito bem quando você reduzi-la para dispositivos móveis. E isso é OK. Você poderia ter você poderia excluir esta seção inteira clicando aqui, indo para baixo para responsivo e escondendo-o no celular. Você se esconde no celular, ele nem será mostrado. Você poderia adicionar uma nova seção que é apenas quatro celular e ele poderia escondê-lo no tablet desktop , e é apenas para você. Vai ser um pouco mais fácil de ler, então há muito o que pensar ao projetar um site, e isso é apenas o básico. Esta é apenas a versão livre fora da caixa do Element ou e apenas usando os widgets padrão . Isso não é nada que quando você se inscrever para uma contagem pro, não têm modelos pré-feitos para você. Eles podem arrastar e soltar e mudar as coisas. Você não tem que construí-lo do zero. Assim que atualizarmos, podemos voltar ao nosso menu suspenso de hambúrgueres aqui, e podemos sair do painel, voltar ao nosso painel WordPress, voltar às nossas páginas. E agora sabemos que este teste, que é agora o que era a nossa página inicial, está agora disponível. E se você quiser voltar e editá-lo, basta ir até aqui e clicar em editar com Element tour para que você possa criar novas páginas e ter todas elas vinculadas e criar a mesma coisa com elemento. Ou então digamos que queremos editar nossa página da galeria. Você pode editar quem não adicionou com Element Tornado para passar pelo mesmo processo. Claro que você pode salvar modelos aqui, para que você não tenha que começar tudo de novo do zero, mas você pode querer fazer algo um pouco diferente galeria. Então, mais uma vez, esse título está mostrando, então voltamos por esse processo novamente. Nós descemos para as configurações, poderia ocultar o título, obter o padrão da página com elemento ou largura total. Vai mudar o que fizemos antes. Então foi assim que ele configurou a página para começar, e isso deve lhe dar um novo começo. Então aqui estamos no site final. Estamos todos acabados. Esta é apenas a página inicial. Ainda precisamos vincular todas as outras páginas. Há links de âncora que você pode fazer para torná-lo mais um site de estilo paralaxe. Há muito mais trabalho no dedo do pé, imprensa e muito mais para elemento, ou será difícil fazer isso em apenas uma pequena seção de uma classe muito maior. Então o que posso fazer é fazer um processo completo um . Vamos trabalhar durante todo o processo do site, você sabe, participar de um projeto de 15 horas. Se estiverem interessados, por favor, me avise. Eu adoraria ensinar algo assim. Vamos mais em profundidade. Mas eu queria apresentar a todos isso para mostrar como é fácil fazer seu próprio trabalho personalizado. E a mesma coisa pode ser aplicada ao Squarespace para Wickes toe web flow. Todos eles têm um construtor semelhante. Eles não vão funcionar exatamente da mesma forma. Mas os conceitos estão lá. E desde que você saiba como projetar corretamente para a Web, você será capaz de manter todas as mesmas coisas que passamos em mente. Mesmo se você decidir não usar wordpress ou você decidir usar outra coisa, espero que a seção ainda foi útil. Assim, você não se sente mais intimidado ao adicionar Web design à sua habilidade. Definido como um designer gráfico,