Your SlideShare is downloading. ×
Adding paralax to a still picture - From 2D to 2.5D
Adding paralax to a still picture - From 2D to 2.5D
Adding paralax to a still picture - From 2D to 2.5D
Adding paralax to a still picture - From 2D to 2.5D
Adding paralax to a still picture - From 2D to 2.5D
Adding paralax to a still picture - From 2D to 2.5D
Adding paralax to a still picture - From 2D to 2.5D
Adding paralax to a still picture - From 2D to 2.5D
Adding paralax to a still picture - From 2D to 2.5D
Adding paralax to a still picture - From 2D to 2.5D
Adding paralax to a still picture - From 2D to 2.5D
Adding paralax to a still picture - From 2D to 2.5D
Adding paralax to a still picture - From 2D to 2.5D
Adding paralax to a still picture - From 2D to 2.5D
Adding paralax to a still picture - From 2D to 2.5D
Adding paralax to a still picture - From 2D to 2.5D
Adding paralax to a still picture - From 2D to 2.5D
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Adding paralax to a still picture - From 2D to 2.5D

714

Published on

In this class I teach my students how to, in Photoshop, breakdown a still picture's components in order to reassemble them back in After Effects, with paralax added to it.

In this class I teach my students how to, in Photoshop, breakdown a still picture's components in order to reassemble them back in After Effects, with paralax added to it.

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
714
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Universidade do Minho Instituto de Ciências Sociais Departamento de Ciências da Comunicação Professor Leonardo Pereira LAB. AUDIOVISUAL E MULTIMÉDIAAno Curricular - 2012 | 2013 Curso de Mestrado em Ciências da Comunicação 1º Ano | 2º Semestre TUTORIAL - DO 2D PARA O 2.5D CRIAR PARALAXE NUMA IMAGEM BIDIMENSIONAL
  • 2. LABORATÓRIO AUDIOVISUAL E MULTIMÉDIA Ano letivo - 2012 | 2013 || Professor Leonardo PereiraNeste tutorial vamos utilizar uma técnica manual que simula o mesmotipo de resultados de técnicas digitais de projeção de cameras. Vamoscriar a ilusão de Paralaxe — Profundidade de campo — a partir de umaimagem de base plana.A nossa imagem original é esta:Vamos ter de separar a nossa imagem em layers e em diferentes ele-mentos. A lógica é separar os elementos da imagem em função da suaposição relativa em profundidade. Ou seja separar os elementos que es-tão em planos mais próximos dos que estão em planos mais afastados.Passo 01Abrir no Photoshop o ficheiro “imagem original.tif”.>> File>> Open>> Procurar a imagem no disco>> Selecionar o ficheiro>> Ok e-mail: leonardpeartree@gmail.com | Skype: leonardpeartree
  • 3. LABORATÓRIO AUDIOVISUAL E MULTIMÉDIA Ano letivo - 2012 | 2013 || Professor Leonardo Pereira Passo 02 Duplicar a layer “background” (1), desligar a visibilidade da layer original 3 “background” (2) e mudar o nome da layer duplicada para “montes pri-2 meiro plano” (3). Passo 03 A seguir, ou com a eraser tool (4), ou com a poligon lasso tool (5), recor- tar os montes que estão em primeiro plano (6) do resto dos elementos da imagem por forma a isolar este elemento, conforme ilustrado na seguinte imagem: 16 6 5 Repare-se que este monte, em primeiro plano, pode ser subdividido em três partes diferentes. Porque há uma parte, a central, que está num pla- 4 no mais próximo do que os que estão dos lados e mais atrás. Vai ser isso que vamos fazer agora. Vamos fazer mais dois duplicados desta layer e isolar o monte central dos montes laterais que estão em planos mais afastados. Lets go! e-mail: leonardpeartree@gmail.com | Skype: leonardpeartree
  • 4. LABORATÓRIO AUDIOVISUAL E MULTIMÉDIA Ano letivo - 2012 | 2013 || Professor Leonardo Pereira Passo 04 Fazer dois duplicados da layer “montes primeiro plano” (1), mudar o4 nome da primeira para “monte central” (2), a segunda para “monte es-3 querdo” (3) e a terceira para “monte direito” (4).2 Passo 05 Agora é necessário apagar em cada layer o que está a mais de cada monte. Com a eraser tool isolar cada um das três partes do monte pelas 1 três layers, até que estas tenham, isoladamente a seguinte aparência: Layer “monte esquerdo” Layer “monte central” Layer “monte direito” Passo 06 Uma vez que, para se gerar o efeito de paralaxe, vamos ter de animar uma câmera no After Effects, vamos ter de dar um pouco mais de massa aos montes que estão num ponto mais afastado em profundidade. Caso contrário, quando a câmera se mover vamos ver o recorte de todas as layers e precisamos de disfarçar isso. Como? Dando continuidade às layers dos montes laterais. Antes layer “monte esquerdo” Antes layer “monte direito” Com a Clone Stamp Tool copiar um pouco mais de detalhes para além dos detalhes dos limites do rectorte de cada monte lateral, como ilustrado nas imagens à esquerda. Depois layer “monte esquerdo” Depois layer “monte direito” Não fazer o mesmo para o monte central! e-mail: leonardpeartree@gmail.com | Skype: leonardpeartree
  • 5. LABORATÓRIO AUDIOVISUAL E MULTIMÉDIA Ano letivo - 2012 | 2013 || Professor Leonardo Pereira Passo 07 Passar a layer “monte central“ para cima das outras duas layers no pai- nel das layers do Photoshop Passo 08 Voltar à layer “Background“ e duplicá-la (1). A seguir mudar-lhe o nome para “Bicla” (2). Desligar a visibilidade das três layers dos montes (3). Vamos por fim recortar o elemento humano na bicicleta do resto da imagem. Passo 09 Uma vez que este elemento humano está numa bicicleta com muito de- talhe vamos ter de recorrer a um truque de recorte rápido. O Céu é todo azul. O que significa que podemos fazer uma extração quase perfeita do céu, ainda que tenhamos depois de limpar alguns resíduos e o resto da1 imagem que não é azul. 1. Com a layer selecionada ir a >> Select >> Color Range 2. Com a pipeta da janela Color Range, picar na imagem o azul de uma zona à escolha do céu e ajustar os valores até termos uma imagem em valores de PB muito próxima de uma silhueta. Clicar no Ok! 2 3. Ir ao menu “Select“ e fazer um “Inverse“ para invester a seleção. 4. Depois, com a tecla delete, apagar o conteúdo da seleção criada. Acabamos de subtrair o céu à imagem isolando o ciclista. e-mail: leonardpeartree@gmail.com | Skype: leonardpeartree
  • 6. LABORATÓRIO AUDIOVISUAL E MULTIMÉDIA Ano letivo - 2012 | 2013 || Professor Leonardo PereiraPasso 10Com a eraser tool apagar os resíduos que hajam em torno da figura atéque esta fique completamente isolada como na figura da direita.Passo 11Para não se notarem transparências duplica-se a layer “bicla” e faz-seum control+e (PC) ou um cmd+e (Mac). Repete-se o processo até afigura estar praticamente opaca.Passo 12Abrir o ficheiro “céu.tif”, selecionar a totalidade da imagem com umControl+A (PC) ou um Cmd+A (Mac) e fazer um copy paste do ficheiro“céu” para o ficheiro “imagem original.tif“. A seguir deslocar a layer do céupara a posição imediatamente abaixo da layer “bicla“. e-mail: leonardpeartree@gmail.com | Skype: leonardpeartree
  • 7. LABORATÓRIO AUDIOVISUAL E MULTIMÉDIA Ano letivo - 2012 | 2013 || Professor Leonardo Pereira Passo 14 Agora precisamos de separar as nuvens do fundo e segundo a mesma lógica do que fizemos aos montes em primeiro plano. Ou seja separar o que está num plano mais próximo do que está num plano mais afastado. Para tal faça-se o seguinte: 1. Para extrair as núvens do fundo azul usa-se o mesmo processo antes usado para extrair a figura humana do céu: >> Select >> Color Range 2. Depois duplica-se a layer das nuves três vezes e separam-se as nuvens por layers em função da sua posição relativa em profundidade. Separam-se as nuvens mais próximas das mais afastadas, conforme as seguintes imagens e por layers:Layer com as nuvens mais próximas Layer com as nuvens intermédias Layer com as nuvens mais afastadas Passo 15 Fazer um Save as para gravar, pela primeira vez o nosso ficheiro :P Dar-lhe o nome “Elementos separados” e gravar no formato .PSD. e-mail: leonardpeartree@gmail.com | Skype: leonardpeartree
  • 8. LABORATÓRIO AUDIOVISUAL E MULTIMÉDIA Ano letivo - 2012 | 2013 || Professor Leonardo Pereira Passo 16 Agora precisamos de criar um fundo azul para o nosso céu e núvens. Para tal selecionamos uma porção da layer “Background” (1) e fazemos um copy paste para extrair essa porção selecionada para outra layer (2). Depois estica-se o céu para os lados até preencher em toda a largura o tamanho do ficheiro (3).1 2 3 Mudar o nome da layer nova para “céu” Passo 17 Por fim só precisamos de colocar as montanhas verdes atrás dos montes em primeiro plano. Mas há um problema: recortando-se os montes em primeiro plano não há informação da imagem para preencher o espaço vazio deixado pelo recorte dos montes. O que é que se faz? Usa-se uma imagem semelhante. Por isso abrir o ficheiro “montanhas.tif“. Selecionar a totalidade da ima- gem com um Control+A (PC) ou um Cmd+A (Mac) e fazer um copy paste do ficheiro “montanhas.tif” para o ficheiro “elementos separados.tif“. Depois dar o nome montanhas à layer desta imagem e colocar a layer por cima da layer “céu“. Vamos agora ter de extrair o céu da layer porque já temos o céu noutra layer. e-mail: leonardpeartree@gmail.com | Skype: leonardpeartree
  • 9. LABORATÓRIO AUDIOVISUAL E MULTIMÉDIA Ano letivo - 2012 | 2013 || Professor Leonardo Pereira Passo 18 Extrair o céu com o Select >> Color Range até termos as montanhas sem céu de fundo. Passo 19 Ativar a visibilidade de todas as layers (1) e reposicionar a layer “monta- nhas“ por forma a que fique mais ou menos semelhante às montanhas da imagem original (2). Vai ser também necessário, no painel das layers, colocar a layer “montanhas” por cima das layers das nuvens (3). 1 23 3 4 Por fim só é preciso fazer um flip horizontal à layer montanhas: (4) Edit >> Transform >> Flip horizontal e-mail: leonardpeartree@gmail.com | Skype: leonardpeartree
  • 10. LABORATÓRIO AUDIOVISUAL E MULTIMÉDIA Ano letivo - 2012 | 2013 || Professor Leonardo PereiraPasso 20Agora só nos faltam criar uma imagem de referência que nos vai servir,no After Effects, que nos vai servir de referência visual para o posiciona-mento das layers que acabamos de separar, num espaço tridimensional.Para tal basta-nos:1. Selecionar a primeira layer no painel das layers (neste caso é a layer“monte central“);2. Selecionamos a imagem toda com um Control+A (PC) ou Cmd+A(Mac);3. Premimos ao mesmo tempo o comando Cmd+Shit+C (Mac) ouControl+Shit+C (PC) para tirar uma fotografia ao conjunto das layerstodas.4. Fazemos um Control+V (PC) ou Cmd+V (Mac). E o Photoshop cria--nos uma nova layer com a informação presente em todas as outraslayers. Mudamos apenas o nome desta layer para “ref”.E pronto temos todas as layers de que precisamos criadas.Avancemos para o After Effects. e-mail: leonardpeartree@gmail.com | Skype: leonardpeartree
  • 11. LABORATÓRIO AUDIOVISUAL E MULTIMÉDIA Ano letivo - 2012 | 2013 || Professor Leonardo PereiraPasso 21No After Effects importar o ficheiro “elementos separados.PSD“>> File >> Import >> File >> elementos separados.PSDSurge uma janela que nos pergunta como queremos importar o ficheiro.Vamos dizer ao AE que queremos importar o ficheiro como umacomposição (1) e em Editable Layer Styles (2). Clicamos no OK (3). 1 2 3E no painel do projeto surge-nos uma composição chamada “elementosseparados“. Fazemos um duplo clique nesta composição para ela abrirna Timeline e na viewport do AE, como ilustrado na seguinte imagem. e-mail: leonardpeartree@gmail.com | Skype: leonardpeartree
  • 12. LABORATÓRIO AUDIOVISUAL E MULTIMÉDIA Ano letivo - 2012 | 2013 || Professor Leonardo Pereira Passo 22 Vamos começar a organizar a nossa composição para conseguirmos construir o efeito. Comecemos por dar uma opacidade de 20% à layer “ref” (1). Para tal basta abrir o parametro de opacidade dessa layer clicando em “T” no teclado e reduzindo o valor para 20%. Depois, apagar a layer “Background“ (2) e transformar todas as restantes layers — com excepção da layer “ref“ — em layers 3D, acionando à fren- te de cada layer a checkbox exibida por baixo do cubo tridimensional (3). 1 3 2 Passo 23 Agora é necessário criar uma câmera digital. Layer (1) >> New (1) >> Camera (2) >> Escolher a Câmera de 50mm (3). E o After Effects cria-nos uma layer de câmera com os nossos settings.1 2 3 e-mail: leonardpeartree@gmail.com | Skype: leonardpeartree
  • 13. LABORATÓRIO AUDIOVISUAL E MULTIMÉDIA Ano letivo - 2012 | 2013 || Professor Leonardo Pereira Agora que temos os nossos materiais todos preparados no After Effects, para conseguirmos o efeito de paralaxe vamos ter de distribuir espacial- mente as nossas layers no espaço tridimensional do After Effects. O princípio é o mesmo que utilizamos no Photoshop para separarmos os elementos da imagem que estão mais próximos dos elementos da imagem que estão mais afastados. Os que estão mais afastados vamos colocar mais afastados da câmera no eixo de Z e os que estão mais próximos vamos colocar mais próximos da câmera em Z. Mas utilizando a imagem de referência — “layer ref” — para sabermos mais ou menos a posição e tamanho relativos de cada layer. Para não nos perdermos começamos pelos elementos que estão mais próximos da câmera, ou seja, os montes de primeiro plano. Passo 23 Selecionar as três layers que formam o monte em primeiro plano (monte central, monte esquerdo e monte direito) e abrir o parâmetro de posição de cada uma destas layers (1). Basta carregar em “P” no teclado. Por fim desligar a visibilidade das outras layers da imagem (2). Inserir os seguin- tes valores nos eixos de posição destas layers (3):4 1 3 2 Monte central: Monte esquerdo: Monte direito: X: 1144 X: 1238 X: 934 Y: 804 Y: 804 Y: 747 Z: 000 Z: 450 Z: 900 Repare-se como as layers ficam estranhas (4) e não ocupam a totalida- de da viewport. Vamos ter de lhes aumentar a escala para que elas um tamanho e posição coincidentes com a posição e tamanhos que ocupam na imagem de referência da layer “ref”. e-mail: leonardpeartree@gmail.com | Skype: leonardpeartree
  • 14. LABORATÓRIO AUDIOVISUAL E MULTIMÉDIA Ano letivo - 2012 | 2013 || Professor Leonardo Pereira Passo 24 Abrir o parâmetro de escala das três layers que acabamos de posicionar. Basta para tal clicar na tecla “S” do teclado (1). Inserir os seguintes valo- res no parâmetro de escala das layers em causa:3 1 2 (2) Monte central: (2) Monte esquerdo: (2) Monte direito: Escala: 120 Escala: 135 Escala: 175 Repare-se que as três layers ficam mais ou menos alinhadas com os montes da imagem de referência (3). Passo 25 Agora vamos pegar na layer “bicla“ e vamos posicioná-la em Z e redi- mensioná-la para que, mais uma vez, esta se alinhe com a posição e ta- manho em que se encontra na imagem e layer de “ref”. Portanto abrimos a layer “bicla“ acionando o triângulo situado à esquerda do nome da layer (1) e inserimos os seguintes valores na posição e na escala da layer:4 1 2 3 (2) Posição: X=1295; Y=852; Z=786; (3) Escala: 124 Reparando-se na layer na viewport apercebemo-nos de que com estes valores de posição o nosso elemento humano está descentrado em rela- ção à layer ref (4). É mesmo assim para que este fique mais centrado. e-mail: leonardpeartree@gmail.com | Skype: leonardpeartree
  • 15. LABORATÓRIO AUDIOVISUAL E MULTIMÉDIA Ano letivo - 2012 | 2013 || Professor Leonardo Pereira Passo 26 Vamos agora posicionar a layer “montanhas“. Abrir a layer clicando no triângulo situado do lado esquerdo do nome da layer (1), e inserir nos parâmetros de posição e escala os seguintes valores:3 1 2 3 (2) Posição: X=1125; Y=842; Z=1100; (3) Escala: 124 Repare-se que a layer fica mais ou menos alinhada com a imagem de referência (3). Passo 27 Selecionar as três layers que formam as nuvens (mais afastadas, inter- médias e mais próximas) e abrir o parâmetro de posição de cada uma destas layers (1). Basta carregar em “P” no teclado. Inserir os seguintes valores nos eixos de posição destas layers (2):3 1 2 (2) Mais afastadas: (2) Intermédias: (2) Mais próximas: X: 1258 X: 2774 X: 1073 Y: 852 Y: 104 Y: 855 Z: 10000 Z: 7500 Z: 5000 E repare-se como as layers ficaram muito estranhas (3). Isso é porque estão muito afastadas e temos de ampliar o seu tamanho até serem coin- cidentes com a imagem de referência da layer “ref”. e-mail: leonardpeartree@gmail.com | Skype: leonardpeartree
  • 16. LABORATÓRIO AUDIOVISUAL E MULTIMÉDIA Ano letivo - 2012 | 2013 || Professor Leonardo Pereira Passo 28 Agora abrir o parâmetro de escala de cada uma destas layers (1). Bas- ta carregar em “S” no teclado. Inserir os seguintes valores nas escalas destas layers (2):3 1 2 (2) Mais afastadas: (2) Intermédias: (2) Mais próximas: Escala: 458 Escala: 258 Escala: 280 E as nuvens ficam alinhadas com as da imagem de referência (3). Passo 29 Para terminar apenas falta posicionar o céu azul. Para tal basta abrir a layer clicando no triângulo situado do lado esquerdo do nome da layer (1), e inserir nos parâmetros de posição e escala os seguintes valores:4 1 2 3 (2) Posição: X=1136; Y=852; Z=12000; (3) Escala: 533 (4) E desligar a visibilidade da layer de referência para vermos o resultado da nossa composição. E pronto... O conjunto das nossas layers parece formar a nossa imagem inicial. Só nos falta animar a câmera para sentirmos o efeito de paralaxe. e-mail: leonardpeartree@gmail.com | Skype: leonardpeartree
  • 17. LABORATÓRIO AUDIOVISUAL E MULTIMÉDIA Ano letivo - 2012 | 2013 || Professor Leonardo PereiraPasso 30Ligar o Ponto de interesse da câmera no menu principal do AE:Layer >> Transform >> Auto-Orient >> e escolher a opção:Orient towards the point of interest.Isto vai fazer com que a câmera, independentemente de para onde sejamovida, se mantenha a olhar sempre para o mesmo local.Passo 31Agora vamos animar a câmera. Criar dois keyframes: um no segundo 0 eoutro no segundo 2 da timeline (1). Depois inserir os seguintes valores deposição da câmera em cada Keyframe:2 1 1(2) Keyframe segundo 0 = 1007; 852; -3155(3) Keyframe segundo 2 = 1260; 832; - 2123Et voilá!Temos a nossa imagem devidamente 2D convertida numa imagem 3Dcom o efeito de paralaxe. Basta correr a aguha da Timeline para se ver oefeito alcançado e obtido com esta técnica e fazer o nosso render.Outra coisa que podem fazer é animar a layer Bicla como que vindo debaixo e saltando no ar para acentuar-se o dramatismo e dinâmica dacena criada. e-mail: leonardpeartree@gmail.com | Skype: leonardpeartree

×