Pequenas ilustrações, animações divertidas

1. Introdução: É assustador e simples. Eu sou Amarilys Henderson, eu vou mostrar a vocês como eu peguei minhas ilustrações e trouxe isso para um toque de vida para eles, torná-lo mais envolvente. Tudo o que você precisa são suas ilustrações. Em seguida, traga-os à vida no Photoshop. Eu vou estar fazendo aquarela e mostrando como eu faço isso. Se você quiser usar especificamente o tipo de tintas que eu estou usando, eu estarei usando aquarelas fluidas. Eu vou usar essas tintas, mas você pode usar qualquer material de arte que você se sentir confortável. Você precisará de um scanner e também do Photoshop. Não há nenhum outro software que você precisará. Você vai se surpreender com o quão simples é colocar essas pequenas animações juntas. Dá-lhes um pouco de personalidade, um pouco de vida, algo para se envolverem. 2. Sobre este curso: Antes de começarmos, quero dar a vocês uma visão geral do que vamos fazer, começando com os restos de pinturas que juntei para criar uma animação. Então esta é a animação da sereia. Estes são os peixes no fundo. Eles só vão e voltam um pouco para adicionar um toque de movimento. Isso foi feito pelo meu filho, ele tem quatro anos, e eu usei no fundo só por diversão. Aqui está a minha sereia. Então eu tenho a minha sereia, que era a minha imagem principal. Eu também fiz um par extra de cabelo e uma cauda extra. Eu não acabei usando o cabelo, eu só usei a cauda, mas eu só queria mostrar que isso era tudo que eu precisava para aquela animação em particular. Estas são todas as peças que usei. Então, uma rápida visão geral de como vamos resolver isso. Primeiro vamos planejar, vamos criar alguns esboços em miniatura, criar nossa arte, seja como você quiser, digitalizá-la, ou seja, trazê-la para o Photoshop, animá-la e, em seguida, exportá-la para compartilhar. Vou mostrar a vocês como fazer uma animação muito simples. Vamos criar formas muito simples porque o que quero mostrar é o método, e uma vez que você domine esse método, você poderia fazer um mundo de coisas além disso. 3. Plano - Storyboards: Tudo o que você vai fazer para este primeiro passo é encontrar algum papel, o que pode ser difícil para mim às vezes. Eu tenho um monte de cadernos que eu comecei. Um dia desses, terminaremos. A coisa mais importante a fazer é planejar como sua animação vai se parecer. Isso só ajuda a solidificar onde você está indo, porque pode ser fácil criar vários quadros e, em seguida, ficar um pouco perdido. Ou se você é como eu, tem tantas idéias que é difícil descobrir exatamente o que você quer fazer. Sei que estamos fazendo corações. Eu vou criar apenas três quadros realmente. Não preciso mapear tudo. Não vamos ser muito técnicos porque queremos mantê-lo divertido, simples e rápido. Vamos apenas fazer um pequeno GIPHY rápido, e vai ser um GIPHY. Eu vou fazer esses corações. Agora, eu imaginei esses corações se sobrepondo. Assim que conseguirmos todos esses sangramentos de aquarela, vai ficar tão bom ter essas coisas bonitas sobrepostas. Eu desafio você para a próxima vez que você vai olhar para cartões, você vai ver vários desenhos com sobreposição ou apenas corações de aquarela simples. Só um pequeno desafio. Eu sei que no começo eu quero começar com muitos corações. Então eu só quero que eles flutuem para longe, talvez quebrem no meio, alguns sobem e outros caiam. Então a imagem final, vamos fazer dois corações, que dizem, você. Vou colocá-los mais alto do que eu, pequeno sinal de mais. Aqui estamos dizendo que os corações sobem, vendo metade deles cair, e então aterrissamos nisso. Faça o que fizer, crie um pequeno esboço de como você deseja que sua animação se pareça, como você quer que ela seja. Isso tornará a próxima parte da pintura e colocá-la no Photoshop muito mais simples, porque você saberá exatamente como é o seu mapa de estradas. 4. Crie - ilustre: Minha parte favorita é sempre a parte prática. Você não precisa criar sua aquarela de animação por qualquer meio, mas já que é isso que eu faço, vou mostrar a vocês como eu crio esses corações muito facilmente, muito simplesmente com essas aquarelas concentradas. Eles são a marca do Dr. Ph Martin, e vamos usar apenas algumas gotas, colocá-las em nossas tintas, e misturá-las com água. Aqui estão as cores que eu estou usando e você pode provar como cada uma se parece. Tome nota, se você quiser usar essas cores exatas, cada coração é sua própria coisa. Não sinta que precisa usar essas cores. Eu quero cair em cores. Eu não quero me misturar. Quero que as tintas se misturem. Começo com água, e depois adiciono as cores. Vai criar uma boa pista. Eu também estou tentando usar cores um pouco contrastantes, ter um esquema de cores análogo, que significa que todas as cores seriam próximas umas das outras na roda de cores. Mas eu quero combinar um rosa quente com uma laranja vermelha para que você possa realmente apreciar as diferenças lá. Estou trabalhando muito molhado. Eu queria ficar molhado porque, como eu disse, eu quero que as tintas se misturem. Quanto mais água você der, mais eles vão fazer isso. No outro lado do espectro, se você colocar muita água dentro, então ele vai se misturar tão bem, que vai se tornar uma bela cor que não tem tão belo sangramento para ele. Isso é olhar manchado. Algumas dicas com o uso de aquarelas fluidas. Não use muito. Eu só uso um par de rascunho. É difícil não levar sua tinta com água porque sua escova estará muito molhada. Este é um processo úmido. O que acontece é que você coloca sua escova molhada em seu paladar, você pinta bem, e você tira um pouco de cor, e enquanto você está fazendo isso, você está adicionando um pouco de água. Essa cor, esse pigmento está ficando diluído, e na terceira, quarta, quinta vez que você voltar a essa cor, não vai ter o mesmo pungente antes. Outra dica é não usar cores complementares. Use cores que são semelhantes entre si, mas para acrescentar que interesses, talvez um seja mais brilhante, mais saturado, mais vibrante, e um é mais de um tom mais escuro aqui em baixo. Se você não tem aquarelas fluidas, tudo bem. A única diferença é que seus corações não se misturarão tão fluidamente. Aqui está uma comparação de como um coração pode parecer quando você está usando aquarelas regulares, se eles já estão assados em uma panela para você, ou se eles são tubos espremidos em uma paleta. Esta é a mistura que você pode esperar. 5. Digitalize - varredura e Clear: Agora vamos pegar aquele belo trabalho que criamos com aquarela ou qualquer outra coisa e digitalizá-lo. Se você trabalha em um meio tradicional, você pode já estar acostumado com isso. Eu coloquei meu trabalho na cama do meu scanner, eu sempre digitalizá-lo em 600 DPI, o que é exagero, mas 300 DPI seria ótimo, e então levo para o Photoshop para alguma edição. Se você já fez minhas aulas antes, você sabe que eu trabalhei tradicionalmente e então eu levo para trabalhar digitalmente, então você pode estar acostumado com este layout. Eu estou olhando para o tamanho da imagem da minha peça aqui que eu digitalizei e recortei para ser apenas o trabalho artístico. Você pode ver que é cerca de oito polegadas quadrado. A primeira coisa que eu sempre faço é criar uma camada de ajuste. Você vai encontrá-lo lá em baixo naquele círculo com o ícone meio preto-metade branco, e eu ajusto os níveis, vou para a paleta de níveis, e uso aquele conta-gotas branco. Deixo cair no branco mais branco que quero na minha peça e refresca tudo, corrige automaticamente a cor, cria uma camada no topo. Como eu sei que é assim que eu quero que seja, eu vou ir em frente e mesclar essas camadas apenas para simplificar minha paleta de camadas aqui, porque isso vai ficar um pouco complicado. Eu vou para a varinha mágica, e eu vou simplesmente para varinha mágica e tudo o que é branco. Agora ele vai pegar pequenos pedaços de sujeira que estavam no scanner, pequenos pedaços de papel, coisas assim. Vou ter que jogar com essa tolerância. Estou fazendo a varinha mágica selecionar coisas que são contíguas. Não vai pegar o interior daqueles corações vazios que têm branco neles. A razão pela qual estou fazendo isso é que me dá um pouco mais de flexibilidade, e eu sempre posso adicionar isso mais tarde. Junto com a varinha mágica, eu uso a ferramenta de laço. Ambos estão ao lado um do outro na paleta esquerda. A ferramenta de laço me ajuda a selecionar peças que foram escolhidas junto com o branco que eu não quero selecionadas, ou peças de arte que não foram selecionadas, e eu quero que sejam selecionadas. Para poder usá-los juntos, estou segurando uma mão no botão Alt, o que significa que posso subtrair do que for selecionado com a ferramenta de laço. Então eu vou segurar isso, segurar a ferramenta de laço, selecionar o que eu quiser, e ele vai cancelar a seleção do que foi escolhido. Ou eu uso o botão Shift no meu teclado enquanto eu estou selecionando algo e que irá adicioná-lo ao que está sendo selecionado. Você só tem que ser muito claro sobre o que você quer ser selecionado e o que você não quer ser selecionado. Neste caso, é apenas branco, por isso é muito fácil de acompanhar, mas também pode ser muito fácil ficar emaranhado. Essencialmente, você só quer se concentrar, eu estou tentando pegar toda essa camada de fundo e removê-la. Eu tenho todo o branco selecionado, agora eu vou inversa seleção, e eu vou copiar e colar. Criei uma nova camada que só tem esses corações. Escolhi não mexer com esses pequenos traços que criei só para sentir as cores. Eu tenho uma nova camada que eu criei. Enchei-o com um fundo branco, e depois tenho a minha camada no topo com apenas corações. Para ter certeza de que eu limpei tudo bem, eu clique duas vezes sobre essa camada e me traz esta paleta estilo camada. Vou adicionar um acidente vascular cerebral, e você pode ver como há algumas bordas ásperas, talvez alguns pontos aqui e ali que eu possa limpar. É apenas uma referência visual para mim, então me sinto muito feliz com isso. Às vezes encontro alguns pontos que preciso limpar, mas acho que vou deixar assim. Não me importo com as bordas ásperas que o papel aquarela deixa. O próximo passo ainda é um fundamento basicamente, onde eu vou pegar esta camada e selecionar com esse laço, cada peça, cada coração, circular em torno dele, cortar, colar, circular em torno de outro, certificando-se de que eu estou na camada principal que tem todos os corações, cortar e depois colar. Assim eu tenho uma camada separada para todos os meus corações. Agora, eu sempre tenho minha arte em alta resolução. Mas como estamos criando uma animação, vou reduzir o tamanho da imagem para que seja mais fácil trabalhar com ela. Vou criar a largura da imagem e a altura da imagem para 1.200 pixels. Não há nada de mágico neste número. Acabei de achar que é uma boa quantidade, uma boa proporção para manter esses detalhes e entanto, também tornar fácil de trabalhar e fácil de exportar. Vou salvar como uma animação. Eu também criei uma pasta porque você vai criar vários JPEGs. Então eles estão completamente em uma pasta, eu não vou precisar mais desta imagem de fundo, já que estamos apenas fazendo a animação agora, e este é um arquivo completamente diferente que é apenas dedicado a isso. Agora, a próxima ordem de negócios é pegar esses corações e organizá-los de uma maneira visualmente agradável. Eu selecionei todas as minhas camadas, e eu fiz delas o modo de mistura de multiplicar dessa maneira quando elas se sobrepõem, você ainda pode ver a por trás dela, e eu quero criar um efeito de vidro. Eu estou duplicando camadas, tornando-as maiores ou menores para realmente preencher minha página, estes serão os principais corações que eu falei no final do meu pequeno storyboard que vai dizer você e eu. Então eu estou fazendo isso muito maior, brincando com opacidade, brincando com duplicar esses corações, criando uma cor no fundo. Espero que você possa me ver fazer todas essas coisas. Realmente se resume a preferência pessoal. Enquanto você sabe como preencher a cor de fundo, como colocar todas as camadas e multiplicar, como duplicar camadas e redimensioná-las, eu sempre mantenho esses controles fora quando você está em sua ferramenta de seta aqui no canto superior esquerdo, sempre certifique-se de que ele diz show transform controls, dessa forma você sempre pode saber o tamanho do seu pequeno pedaço dentro do seu arquivo maior, e você pode redimensioná-lo como quiser. Agora eu vou até pegar algumas dessas camadas, tenho multiplicação suficiente acontecendo aqui, está ficando um pouco escuro. Eu os coloquei no modo de mesclagem de tela. Obviamente isso tornou esses corações muito mais leves. Mais uma vez, vai ter aquela grande sobreposição. Está afetando as cores, não é apenas um branco. Quase como se estivesses a pôr estes corações na janela e eles estão apenas a sobrepor-se uns aos outros. Eu queria criar um efeito que é um pouco mais arejado, eles estão flutuando por aí. Agora eu tenho um monte de camadas acontecendo aqui. Vou selecionar várias camadas de cada vez mantendo pressionada a tecla Shift enquanto estou pressionando essas camadas, e vou agrupá-las usando essa paleta suspensa. Agora esta é a camada de fundo. Estes serão os corações que não se movem, por assim dizer. 6. Animar (o caminho fácil): Se você está familiarizado com o Photoshop, você provavelmente passou por essa última parte e se você não está, você provavelmente teve que ouvi-lo novamente e isso está totalmente bem. Neste ponto, vamos pegar esses corações que estão flutuando e animá-los. Vou agrupá-los em duas camadas. Um vai ser corações que estão se movendo para baixo, e a outra metade do grupo vai subir. Agora este é essencialmente o meu primeiro quadro, então eu vou salvar como um JPEG, e esta será a imagem que você verá pela primeira vez quando você ver minha animação começar. Primeira imagem abaixo. Agora o que eu vou fazer é pegar cada um desses grupos, movê-los um pouco. Guarde isso como um JPEG. Faça isso novamente, salve isso como um JPEG para que eu tenha cada passo na progressão. Eu estou movendo estes para baixo cerca de 30 hits na minha tecla de seta e 30 hits para cima para o grupo que sobe com a minha tecla de seta do teclado. Mesmo quando eu olhar na minha pasta com esses JPEGs que eu coloquei tudo naquela pasta de animação, eu vou ver como esses progridem. Eu tenho cerca de oito slides aqui. Eu vou fazer o meu último em breve, mas apenas para uma prévia divertida, eu vou bater na “Barra de espaço” no meu Mac para que eu veja enquanto eu rolar para baixo através das minhas imagens como isso parece, e já está parecendo muito bom. Agora vamos trabalhar no último slide, que vai ter aquele texto “Você e Eu”. Vou esconder esses dois grupos de corações para cima e para baixo. Eles se foram agora e eu vou usar a ferramenta de caracteres de texto. Passando para isso, eu vou anotar você criar uma nova camada novamente indo para a ferramenta de texto, me escrevendo, marcando a marca de seleção que eu terminei, e organizando-os para ser a minha última imagem. É hora de juntar tudo. Vou mostrar-lhe o caminho mais fácil primeiro. Há muitos aplicativos que você pode usar, hoje vamos usar Gifmaker.me. O formato é muito simples. Eles pedirem que você faça upload de suas imagens, perguntarão a que velocidade você gostaria que suas imagens fossem animadas e até mesmo dar uma pequena prévia de como elas serão. Você também pode decidir quantas vezes ele se repete. Se estiver em um site, ele só se repetirá um certo número de vezes. Se você estiver usando no Instagram, ele se repetirá para sempre. Eu vou colocar em quatro, e então eu apenas apertei “Criar animação GIF”. Vai demorar um minuto, mas então eu vou precisar apenas clicar com o botão direito do mouse no arquivo para download e salvá-lo no meu computador. Agora, se você vai usá-lo no Instagram, eu recomendo que você também crie uma animação de vídeo. Funciona da mesma maneira. Cria para você, você o salva, e você tem isso para compartilhar. 7. Animar (como um Pro): Agora, para aqueles que estão interessados em criar animações que você usaria como ilustração editorial talvez para um site ou algo assim, um blog, então você vai querer criar seu trabalho no Photoshop. Se você está trabalhando com um diretor de arte ou qualquer autoridade sobre você, você quer ser capaz de fazer edições que você pode não ter previsto. Você pode criar sua animação no Photoshop. Agora, eu salvei você de ter que me ver criar essas oito pastas de imagens, mas cada uma é basicamente um passo nessa animação. Você pode criar suas miniaturas, criar seu trabalho artístico, criar as etapas visuais necessárias para chegar lá, mas vou mostrar como exportá-lo, como animá-lo do Photoshop. Aqui estão todas as imagens que eu criei e você pode ter uma idéia de como isso está indo. Eu abri aquela barra de linha do tempo na parte inferior, e eu desço aqui e eu vou apertar “Criar animação de quadros”. A próxima coisa que vou fazer é transformar todas essas pastas em imagens achatadas. Gosto de usar o comando de pressionamento de tecla Alt Shift E para mesclar tudo o que está visível em uma camada. A razão pela qual estou fazendo isso é porque cada camada vai ser um quadro. Eu excluí todos esses grupos, não preciso deles, mas agora eu vou tornar todas as minhas camadas visíveis, selecioná-los todos pressionando a tecla Shift enquanto selecioná-los todos, e aqui neste menu suspenso depois de criar uma nova animação, Vou fazer quadros a partir de camadas. Instantaneamente, todas essas camadas se tornaram os pequenos blocos quadrados na parte inferior da minha linha do tempo, e você pode ver como a animação vai. Vou precisar reorganizá-los. Com cada telha eu tenho a opção de quanto tempo eu quero que esse quadro para mostrar. É uma ótima opção se você quiser que alguns quadros sejam mantidos por mais tempo, para mostrar mais tempo do que outros, se quiser que outros sejam mais rápidos. Dado esse luxo, eu fiz o primeiro quadro um pouco mais, já que eu quero que o espectador redefina que isso está começando de novo. Vai ser difícil de ver, mas na barra inferior, você pode ver isso uma vez. Há uma barra de verificação que aparece com quantas vezes você gostaria que essa animação mostrasse, como fizemos com o criador de GIF. O mesmo negócio se você quiser uma vez, se você quiser algumas vezes, ou para sempre. Digamos que um diretor de arte venha até mim e diga: “Queremos que seja um pouco mais rápido”, eu posso ajustar esse tempo muito facilmente, eu posso ajustar obviamente quantas vezes ele mostra, e aqui eu fiz isso um pouco mais rápido só porque eu poderia. Novamente, eu testo o que parece. Agora eu não estou vendo as pernas mudarem tanto quanto eu quero, então eu vou realmente fazer uma edição. Vou selecionar a perna que está mais distante do espectador e fazer isso mais escuro em cada um dos slides em movimento. Assim, quando você vê as pernas se movendo, você pode obter um pouco mais de sensação de profundidade e movimento mais rápido. Estou usando minha varinha mágica confiável, estou brincando com a tonalidade, ficando um pouco mais escura, gosto de apertar Command Hue para chegar a essa paleta de matizes muito rapidamente, e vou fazer isso para todas as pernas da calça. Como você verá, ele atualiza como essas camadas se parecem bem na minha linha do tempo. Eu não tenho que recarregá-los, eles já estão lá e é muito fácil fazer edições. Agora, quando eu apertei “Play”, eu posso ver como ele parece imediatamente. Uma vez que você está feliz com ele, Salvar para Web, ele irá aparecer esta caixa de diálogo com todas as opções de quantas cores você deseja usar, e que qualidade, que tamanho. Desde que eu trabalho em aquarela, eu gosto de usar um monte de cores para que você obtenha essas misturas porque são aqueles gradientes, aquelas luzes ou escuras que são gipped quando eu não tenho todas as cores mostrando. Mas se sua ilustração for mais simples do que isso ou feita digitalmente em um formato vetorial ou algo assim, então usar menos cores seria ótimo porque você terá um tamanho de arquivo menor. Acabei de salvá-lo como um GIF, eu também posso salvá-lo como um filme. Eu vou para Exportação de Arquivos, Renderizar Vídeo, e ele me dará opções semelhantes. Ir com a maioria das opções padrão é muito bom, dependendo do formato que você deseja, quão alta qualidade, o tamanho do arquivo que deseja. Essas são todas as opções que você pode aproveitar. Agora eu tenho meu arquivo como um GIF, como um filme, e ele é feito no Photoshop, então se eu precisar abri-lo novamente e fazer qualquer edição, é muito mais fácil. 8. Exportar e dicas: Estou ansioso para ver seus GIFs. Quando você carregar seu projeto no Skillshare, não torne seu projeto na imagem principal. Você pode, mas não seremos capazes de vê-lo animado. Então, recarregá-lo, enviá-lo para o corpo real do texto do seu projeto, e então nós podemos realmente vê-lo se movendo, que é a parte divertida. Outra dica é se você estiver compartilhando sua animação GIF no Instagram. Instagram não suporta arquivos GIF. Ele suporta arquivos de filme, então você precisará exportá-los como filmes também. Estou ansioso para ver o que você cria. É um processo tão simples, e eu acho que você vai gostar muito.