Como criar Assets animação no Adobe Photoshop

O que você estará criando

Introdução

Bem-vindo ao meu tutorial sobre como criar ativos animação no Adobe Photoshop.Este tutorial não vai te ensinar "como desenhar" itens especificamente. Ele está mais preocupado com a forma de pensar sobre os elementos de animação. O que o meu animador precisa e por quê? Nós vamos cobrir o Título de segurança é, e a importância da rotulagem correta.

Nossa história para animar 

Para este tutorial eu vou estar usando Little Miss Muffet como a nossa história.

Little Miss Muffet 
Sentou-se num banquinho , 
Comer de coalhada e soro ;

Veio avante uma aranha, 
Quem se sentou ao lado dela 
E senhorita amedrontada Muffet afastado.

Ativos estaremos criando 

Para tornar a criação de ativos fácil, vamos fazer uma lista do que precisamos para criar. Isso também irá ajudar-nos a estabelecer o nosso documento Photoshop com antecedência.

Little Miss Muffet

• Caminhada Perfil
• Run Perfil
• Sentados
• Cabeça
• Face: comer, olhos piscam
• Brasão
• Legs
• Corpo
• Mãos
• Braços: não há mãos

Tuffet

• Almofada Grande

Coalhada & Whey

• Tigela
• Colher
• Queijo tipo cottage

Spider: laterais e frontal On

• Pernas x 6; Braços x2
• Cartola
• Cana
• Olhos
• Mandíbulas
• Abdômen
• Parte superior do corpo

Ambiente 

• Árvore
• Colina
• Sol
• Nuvem
• Grama

Setup PSD: Storyboard 

Para o nosso storyboards, você realmente pode configurar o documento para o tamanho que você gosta. No entanto, apenas para manter as coisas em proporção, tenho ido para 1920 x 1200 px em 72 dpi, com o modo de cores definido para RGB (cor Monitor)

Aqui está como eu configurar o storyboard. Cada linha da rima foi dado o seu próprio painel. Para isso, não precisa dele para ser realmente detalhado-pensar nisso como thumbnailing. Nós só precisamos de uma idéia básica da ação, que pode ser mostrado com setas e comentários se necessário. Isso é útil para o animador de ter para que eles saibam o que tem que acontecer. Esses quadros também podem ser usados ​​para trabalhar o tempo que cada ação tem que ser na tela para e para se certificar de que corresponde até quando definido como de áudio.

Aqui está a minha esboçada storyboard e animador, Dave Bode, está feliz com a forma como ele está olhando, para que eu possa começar a criar os ativos.

Setup PSD: Ativo 

Porque para este cenário não mudar, estaremos criando todas as .psds no mesmo documento. Depois Effects é Photoshop como um com base no tempo, de modo que utiliza camadas e os grupos da mesma maneira. Para mais animações complexas, seria aconselhável para criar personagens, ativos e / ou ambientes em documentos separados.

Para esta animação Dave gostaria que o tamanho do documento a ser 3840 x 2160 px em 72 dpi, que é a resolução 4K. Isso é para que ele possa ter um pouco de quarto do jogo quando se trata de zooms e panelas, se necessário. Eu criar umnovo documento em Arquivo> Novo.

No painel Camadas Eu criei Grupos de colocar nossos ativos em. Os grupospodem ser criados, clicando no ícone de pasta na parte inferior do painel Layers.Neste você pode arrastar-se ou criar novas camadas. Isso mantém tudo arrumado.

Como um bônus adicional, você pode atribuir uma cor para o grupo com o botão direito sobre ele e selecionando uma cor. Isso vai mudar automaticamente todos os nomes de camadas dentro desse grupo para essa cor. Você pode mudar a cor das camadas dentro dos grupos com o botão direito sobre elas.

Ser organizado com camadas é uma grande poupança de tempo e é especialmente importante quando você tem um prazo apertado, é tarde da noite e você acabou de beber a última do café.

O elemento mais complexo no conto de Muffet é a aranha, principalmente devido ao seu número de membros. Aqui está como eu ter organizado as camadas na preparação para a criação de ativos. Este é o nosso ponto de partida, mas podemos adicionar mais camadas, no futuro, para a manifestação extra, adereços e assim por diante.

Há uma chance muito boa de algumas das camadas pode ser mudado, movido, atualizado, duplicada e removido, portanto, não tome este modelo como verbatim. É só para dar uma idéia de como as coisas podem ser configurados. Ao criar ativos é fácil perder as coisas aparentemente simples, seja por seu próprio planejamento ou do seu cliente ou (arte) diretor, assim esperamos mudanças!

Título seguro: O que é e por que precisamos dele?

O que é o título de seguro? Em todo o mundo as pessoas estão usando dispositivos que são de diferentes proporções e resoluções, e nós temos que contabilizar o menor denominador comum. A maioria das pessoas estará vendo esta animação em uma tela 16: 9, mas alguém lá fora ainda pode ter um monitor 4: 3, por isso precisamos ter certeza de que nenhuma informação vital é cortada nas bordas.Abaixo está um exemplo de título limites seguros. 

Neste exemplo, a área azul será visto em todos os dispositivos, ea área roxo é praticamente o limite de onde qualquer ação deve acontecer. Precisamos manter isso em mente para a nossa criação de ativos, por isso quando se trabalha em uma animação, garantir que você tenha o título de limites seguros do seu animador.

A cruz no quadrado azul indica o centro da cena, e as linhas perpendiculares na periferia indicam os pontos eqüidistantes da cena.

Em seguida o que vou fazer é selecionar esta imagem e colocá-lo em meu psd. Isso vai variar dependendo de como o seguro de título é fornecido a você. Uma maneira rápida de receber a imagem é ter um print screen de After Effects de uma cena 4K com título seguro aplicado. Isto pode não ser tão limpo e nítido como o exemplo acima, portanto, se você sentir que você está indo fazer um monte de trabalho de animação no Photoshop pode valer a pena a limpeza das linhas.

Nosso Processo

Começamos com esboços de todos os elementos. Por que fazemos isso? Isso é para que possamos obter os tamanhos relativos à direita. Coisas como: "Será que a tuffet grande o suficiente para duas pessoas para sentar-se?" "Quão grande é que o sol precisa estar no céu?" "Existe espaço suficiente para a ação acontecer?"

Para cada conjunto de elementos, vou mostrar-lhe o processo desde a fase de esboço para o estágio ativo completa. Vamos começar com a definição da cena: O Fundo.

Comece com o fundo

Primeiro de tudo eu ter agredido no fundo com o tuffet, Little Miss Muffet ea aranha na pose assentado para se certificar de que tudo se encaixa. Cada elemento do esboço está em uma camada separada por conveniência.

Em seguida, desligue o caráter e camadas Tuffet e lidar apenas com os elementos de fundo.

Agora que temos a nossa cena básica esboçada, precisamos trabalhar para fora o que precisamos. A nuvem vai passar, mas não haverá mudanças de forma. No entanto, eu acho que seria interessante ter o animado raios do sol, então eu acho que nós vamos ter dois conjuntos de raios que Dave podem desaparecer ou cortar entre.

Com alguns projetos de animação, provavelmente haveria coisas como folhas e cores pré-dispostos com o cliente modelo, mas, neste caso, como é para o divertimento Eu só estou projetando na mosca! 

Aqui eu ter desligado quaisquer camadas desnecessárias e baixou a opacidade do sketch. Defina a pasta esboço para Multiply nos estilos de camada por isso é mais fácil de ver. 

Eu decidi escalar o sol para baixo, pois é muito grande. Eu faço isso, selecionando o sol mais os dois raios camadas e pressionando Control-T para Transformar.Precisamos garantir que os elementos de cena não dominar a ação. 

Veja como as camadas de ambiente foram organizados.

Tuffet

O tuffet é uma coisa bastante simples para adicionar à cena, mas também é muito importante, já que ambos Little Miss Muffet ea aranha tem que ser capaz de sentar-se sobre ele. A tuffet é como um banquinho ou uma grande almofada.

Abaixo temos o cenário esboçado com o tuffet central, já que este é o lugar onde a maioria da ação precisa acontecer.

Ao criar cenas, planejá-los sempre para fora. Personagens precisam ser dimensionados em relação ao seu entorno e outro. Como você pode ver, eu também incluiu uma áspera da bacia para coalhada e uma colher para uma referência a uma paragem para nós. Um pouco de planejamento pode salvar um monte de trabalho mais tarde. Aqui nós redigimos a tuffet e usando um esboço dos personagens, podemos verificar que ambos irão se encaixar confortavelmente. Esta pode ser uma imagem útil para enviar para o seu animador.

Aqui está como os bens serão fornecidos ao nosso animador. Eu tirei um pouco de grama sobreposição para aterrar a tuffet, mas tenho mantido isso em uma camada separada no caso de o animador deseja fazer alguns efeitos sobre isso em After Effects.

. 

Aranha vários ativos: Time-Saving truque!

Quando se trata de coisas como aranhas que você está indo para obter elementos repetidos, então por que chamar cada um à mão? Aqui está uma maneira fácil de obter várias características em um piscar de oito olhos redondos!

Olhos

Passo 1

Agora aranhas podem ter números variados de olhos, e nós não queremos chamar a cada um individualmente. Em uma nova camada pintar um globo ocular.

Passo 2

Ao segurar Alt e ter a ferramenta Move (V) selecionada, arraste o olho para fora mais sete vezes, e posicionar todos os olhos sobre o rosto.

Passo 3

Em uma nova camada, pinte a pálpebra fechada sobre um dos olhos. Repita o processo de copiar colar sobre os outros sete olhos.

Passo 4

Organize as camadas de modo que as tampas correspondentes sentar acima dos globos oculares. Esconder as camadas tampa fechada e selecione cada par de olhos e pálpebras. Pressione próximo Control-T para escalá-los, e repita o processo com os outros pares de olhos e pálpebras.

Você deve acabar com um jogo como este. Se você alternar a camada de tampas e fora parece que ele está piscando para você!

Braços e pernas

Passo 1

A menos que você estiver indo para animar uma centopéia, o Sr. Aranha será, provavelmente, um exemplo dos mais ativos da perna que você vai precisar para criar. Felizmente pernas de aranha são bastante uniformes, para que possamos nos salvar algum tempo.

Abaixo estão os nossos roughs aranha: em frente e toma partido. Por causa do design simples, podemos utilizar as formas de perna para a vista frontal e lateral.Tenha os seus croquis folha modelo na mão para esta seção.

Passo 2

Desenhe as três secções da perna: coxa, panturrilha e do pé. Eu vou fazer cada um em uma nova camada para que Dave pode animar essas seções de forma independente. Ao desenhar as três seções, eu vou ter certeza de que se sobrepõem ligeiramente. Ele pode optar por utilizar a ferramenta Puppet em After Effects, para que ele possa se juntar as três seções de perna juntos. Na minha experiência, é melhor dar as opções animador!

Passo 3

Uma vez que você pintou de seus três seções de perna, selecione a coxa, panturrilha e do pé e copiá-los mais três vezes. Você pode fazer isso selecionando as três camadas segurando a tecla Shift e arrastando-as para o ícone New Layerna parte inferior do painel Layers, que é um quadrado com um canto dobrado.

Passo 4

Selecione as duas pernas e usando Transform, que é Control-T, Flip-los horizontalmente, indo em Edit> Transform> Flip Horizontal. Grupo cada perna individualmente e dar-lhes um nome útil como Leg copiar 2.

Passo 5

Nós estaremos repetindo o processo de criação de três seções para os braços: parte superior do braço, antebraço e mão. Lembra quando pintar as seções para permitir um pouco de sobreposição.

Passo 6

Aqui estão os ativos Aranha frente-on concluídas. Ele é neste pseudo T-posar para conveniência e tenho certeza que Dave vai encontrá-lo mais fácil de começar a animar com ele colocado para fora como este.

Próximo copiar todas as pernas e camadas de armas, colá-los para o grupo lateral-on, e reorganizá-los conforme necessário.

Organização Patrimonial Spider: frente virada Aranha 

Aí vem a secção não-criativo, organização que, embora não imensamente divertido, é muito necessário. Você vai agradecer-se mais tarde para verificar tudo está em ordem. Aqui está uma repartição dos activos Aranha frente-on.

O Cane

A cana é um desses ativos maravilhosos onde podemos basta copiar e colar para as vistas frontais e laterais. Poderíamos simplesmente ter isso como um trunfo, mas como o front-on e lateral-on aranhas estão em seus próprios grupos, isto significa que o seu animador não terá que procurar as seções individuais.

Os Braços

Organize todas as seções do braço em pastas claramente definidos. Ele pode ser útil para código de cor-los. Verifique se as mãos e os braços inferiores e superiores para cada grupo são rotulados.

As Pernas

Como antes, esta é uma tarefa rotulagem e aqui está como eu coloquei isso para Dave.

Os Olhos

Os olhos! Para isso, certifique-se que o olho fechado correta corresponde com o olho aberto correta que deve ser diretamente abaixo dele.

O Chefe

Isto é, felizmente, um mais simples para organizar! Aqui temos a cabeça base e mandíbulas da aranha (se você não estiver familiarizado com a anatomia do aracnídeo, estes são os bits em torno da boca da aranha). Eu tenho estes separadamente para que Dave pode animá-los se assim o desejar.

O Corpo

Outra seção simples! Aqui nós temos o abdômen (o bum do spider) e parte superior do corpo. Ambos estão em camadas separadas para fins de animação potenciais.Mantenha as peças marcado!

Organização Patrimonial Spider: Perfil 

Porque a maioria dos ativos são cópias um do outro, as únicas diferenças entre a aranha perfil ea frente-on são:

• As pupilas dos olhos foram movidos para a frente dos olhos.
• Há apenas cinco olhos, como alguns não seria visto por esse ângulo.
• A colocação da anatomia foi deslocado.

Eu incluí captura de telas de configuração camada para sua conveniência. Lembre-se de manter tudo claramente marcado!

O Cane

Os Braços

O Chefe

Os Olhos

Esta é a única alteração em massa para a aranha, onde a pupila foi movido para a frente do globo ocular em todos os casos e, em vez de oito olhos há apenas cinco são.

As Pernas

Finalmente: The Body

Aqui nós temos nossos ativos aranha definidos de forma clara para o Dave!

LEMBRE-SE: A rotulagem adequada é   muito   importante.

Coalhada e soro 

Whey-hey! A seção de aranha está feito e agora só temos o almoço de Little Miss Muffet fazer. Este foi dividido em tigela, coalhada, uma colher, e alguns coalhada na colher.

"Por quê?" você pedir. Porque eu pensei que poderia ser legal se quando Muffet fica assustado, o conteúdo de sua tigela vão voar!

Agrupá-los e, em seguida rotular como antes.

Side-On de Little Miss Muffet Assets

Agora que os elementos simples foram criados, temos as tarefas mais complicadas de fazer ativos para as coisas que se movem. Para Little Miss Muffet vamos precisar de dois lotes de elementos: perfil e front-on. A frente é para ela comer de estar, e ao lado é para ela correr fora da câmera.

Miss M é um pouco mais complicado do que a aranha no sentido de que ela precisa diferente anatomia e roupas, e, portanto, terá um aspecto diferente de perfil para estar em frente. Aqui está um resumo de todas as peças que eu criei.

Veja como a adorável Little Miss Muffet olha todos pintados up. Eles crescem tão rápido! * Sniff *

Roupas 

Aqui estão as principais peças de seu vestuário, com exceção de seus sapatos e luvas. Por conveniência guardei os mangas com os braços e sapatos com as pernas.

Expressões cabeça e

Aqui estão suas expressões colaterais, que são praticamente apenas terror puro.

Brasão

Bastante simples aqui. Eu pintei o braço direto para representar puro medo.

Legs

A maior parte da perna vai ser escondido pela saia, mas eu dei Dave algum extra para o caso.

Cabelo

Eu mantive o cabelo separado para que, quando ela corre Dave pode animá-lo atrás dela!

De Little Miss Muffet Face-sobre ativos

Boca e cabelo

Para evitar que isso realmente expressivo eu criei uma variedade de boca e lábios formas para Dave pode animar sua alimentação e chocado. O cabelo é lá dentro, como as partes da boca estão na parte superior das camadas da pilha e o cabelo tem de ser por cima de tudo.

Olhos

Muito parecido com a aranha, Muffet tem os olhos abertos e fechados, mas com a adição de sobrancelhas para a expressão.

Cara base e corpo

Eu agrupados seu corpo e roupas juntos aqui, pois não vai se mover muito enquanto ela está sentada. Se você observar a camada saia sentado, há uma máscara que eu ter incluído para permitir que as pernas para mostrar através de, e se Dave precisa de toda a saia que está lá para ele.

Brasão

Os braços são como antes, embora eu senti que precisávamos mãos por conta própria para quando ela segura a tigela e colher.

Eu adicionei braços sem as mãos em uma pasta separada para a animação com as mãos.

Legs 

Pernas simples que podem ser usados ​​ao mesmo tempo sentado ou em pé.

Cachos

Tal como acontece com o perfil de execução, coloquei suas tranças como as suas próprias peças para usar como uma ferramenta emocional.

Isso resume os nossos elementos de base. Próximo de ajustar os ativos para que pareçam tão bons em que for possível!

Retoques finais

Nós também precisamos fundamentar Little Miss Muffet ea aranha, por isso estou indo para criar uma camada de grama para os pés dos personagens a se mover para trás. 

Passo 1 

Em uma nova camada, desenhe uma linha áspera onde você gostaria que a grama para ir. Faça isso em uma cor que contraste óbvio.

Passo 2 

Comece lâminas de pintura de grama ao longo da linha, utilizando uma escova de sua escolha. 

Passo 3

Depois de ter pintado toda a linha, copie a camada pressionando Control-C e cole (Control-V). Então Transform (Control-T) e manualmente virar e girar a grama para torná-lo um pouco mais exuberante.

Passo 4

Próximo bloquear a transparência da camada pressionando o ícone pequeno tabuleiro de xadrez ao lado de Bloquear no painel Layers. Adicionar em uma variedade de verdes para dar variedade. Destrave a transparência e ter uma borracha macia (E) e suavizar a borda da base de grama.

Passo 5

Eu duplicar as camadas de grama e em seguida, virar, transformar e deformar-los para torná-los um pouco diferente. Na grama mais próximo da câmera, eu borrar a grama usando Gaussian Blur para dar a ilusão de profundidade. Gaussian Blurpode ser encontrado indo em Filter> Blur> Gaussian Blur. Eu turva o horizonte da grama na pasta Ambiente ligeiramente só para dar um pouco de profundidade, utilizando o mesmo método Gaussian Blur. 

Aqui eu mudei para Little Miss Muffet ter certeza de que ele parece ser bom com ambos os personagens.

Passo 6

Estou muito feliz com a forma como a aparência de grama, então eu achatar os oito camadas de grama em quatro camadas de grama simples e nomeá-los em conformidade. 

Créditos

Dave será cuidar dos créditos assim que eu simplesmente colocado algum texto no psd para salvá-lo tempo. O tipo de letra que estou usando é Futura manuscritas .

Para isso, eu criei uma tela de título, o crédito de Dave e minha própria crédito.Você pode fazer isso, basta selecionar a Horizontal Type Tool (T), a seleção de sua fonte de escolha e digitar o que você precisa em cada camada. Alinhar o texto no meio da tela, pressionando Control-T para transformar e alinhando as mira do texto com as mira do título 4K segura.

Passo final 

Nosso último passo é verificar todas as camadas são nomeados e não há camadas que não deveriam estar lá, por exemplo, croquis, camadas vazias, paletas de cores.

Salve o PSD para uma pasta como "Dave Animação Ativos". Nesta pasta lugar tudo o que o animador vai precisar, como o storyboard, o roteiro, uma voz em off (se você estiver fornecendo-lo) e todas as fontes (que você pode distribuir e têm direitos a). Se não, rasterizar quaisquer camadas de texto. Próximo entregar essa pasta para o animador via FTP, unidade USB ou rede, e depois esconder!

Conclusão

Espero que tenham gostado de aprender a criar ativos de animação no Adobe Photoshop. Depois de ter o lado organização deste pregado, você pode deixar a sua criatividade ir selvagem! Eu não posso esperar para ver o que Dave Bode cria com os meus elementos!

Comprar