SlideShare uma empresa Scribd logo
Universidade do Minho
                               Instituto de Ciências Sociais
                               Departamento de Ciências da Comunicação




                  Professor
         Leonardo Pereira      LAB. AUDIOVISUAL E MULTIMÉDIA
Ano 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
LABORATÓRIO AUDIOVISUAL E MULTIMÉDIA
  Ano letivo - 2012 | 2013 || Professor Leonardo Pereira




Neste tutorial vamos utilizar uma técnica manual que simula o mesmo
tipo de resultados de técnicas digitais de projeção de cameras. Vamos
criar a ilusão de Paralaxe — Profundidade de campo — a partir de uma
imagem 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 sua
posiçã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 01
Abrir 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
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:

        1




6


                                                                 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
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 o
4                           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
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 da
1   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
LABORATÓRIO AUDIOVISUAL E MULTIMÉDIA
  Ano letivo - 2012 | 2013 || Professor Leonardo Pereira




Passo 10
Com 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 11
Para não se notarem transparências duplica-se a layer “bicla” e faz-se
um control+e (PC) ou um cmd+e (Mac). Repete-se o processo até a
figura estar praticamente opaca.


Passo 12
Abrir o ficheiro “céu.tif”, selecionar a totalidade da imagem com um
Control+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éu
para a posição imediatamente abaixo da layer “bicla“.
  	
  	




                                     e-mail: leonardpeartree@gmail.com | Skype: leonardpeartree
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
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
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                                                   2


3




     3                                                   4




    Por fim só é preciso fazer um flip horizontal à layer montanhas:
    (4) Edit >> Transform >> Flip horizontal


                                         e-mail: leonardpeartree@gmail.com | Skype: leonardpeartree
LABORATÓRIO AUDIOVISUAL E MULTIMÉDIA
  Ano letivo - 2012 | 2013 || Professor Leonardo Pereira




Passo 20
Agora 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) ou
Control+Shit+C (PC) para tirar uma fotografia ao conjunto das layers
todas.
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 outras
layers. 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
LABORATÓRIO AUDIOVISUAL E MULTIMÉDIA
 Ano letivo - 2012 | 2013 || Professor Leonardo Pereira




Passo 21
No After Effects importar o ficheiro “elementos separados.PSD“
>> File >> Import >> File >> elementos separados.PSD

Surge uma janela que nos pergunta como queremos importar o ficheiro.
Vamos dizer ao AE que queremos importar o ficheiro como uma
composição (1) e em Editable Layer Styles (2). Clicamos no OK (3).




                                                                        1
                     2




                                                                    3

E no painel do projeto surge-nos uma composição chamada “elementos
separados“. Fazemos um duplo clique nesta composição para ela abrir
na Timeline e na viewport do AE, como ilustrado na seguinte imagem.




                                    e-mail: leonardpeartree@gmail.com | Skype: leonardpeartree
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
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
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
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
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
LABORATÓRIO AUDIOVISUAL E MULTIMÉDIA
    Ano letivo - 2012 | 2013 || Professor Leonardo Pereira




Passo 30
Ligar 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 seja
movida, se mantenha a olhar sempre para o mesmo local.

Passo 31
Agora vamos animar a câmera. Criar dois keyframes: um no segundo 0 e
outro no segundo 2 da timeline (1). Depois inserir os seguintes valores de
posição da câmera em cada Keyframe:




2                                                              1          1




(2) Keyframe segundo 0 = 1007; 852; -3155
(3) Keyframe segundo 2 = 1260; 832; - 2123

Et voilá!
Temos a nossa imagem devidamente 2D convertida numa imagem 3D
com o efeito de paralaxe. Basta correr a aguha da Timeline para se ver o
efeito 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 de
baixo e saltando no ar para acentuar-se o dramatismo e dinâmica da
cena criada.




                                       e-mail: leonardpeartree@gmail.com | Skype: leonardpeartree

Mais conteúdo relacionado

Mais procurados

Introdução ao Photoshop
Introdução ao PhotoshopIntrodução ao Photoshop
Introdução ao Photoshop
Leonardo Pereira
 
Princípios básicos e clássicos de animação
Princípios básicos e clássicos de animaçãoPrincípios básicos e clássicos de animação
Princípios básicos e clássicos de animação
Leonardo Pereira
 
Kdenlive tutorial
Kdenlive tutorialKdenlive tutorial
Kdenlive tutorial
ntebrusque
 
Apresentação 2 Formação Photoshop
Apresentação 2 Formação PhotoshopApresentação 2 Formação Photoshop
Apresentação 2 Formação Photoshop
João Leal
 
Tutorial kdenlive
Tutorial kdenliveTutorial kdenlive
Tutorial kdenlive
Naiara Batista
 
Apresentação exercícios imagem - ISEC
Apresentação exercícios imagem - ISECApresentação exercícios imagem - ISEC
Apresentação exercícios imagem - ISEC
João Leal
 
Vray para sketchup
Vray para sketchupVray para sketchup
Vray para sketchup
Gabriel Alves
 
Exercícios imagem
Exercícios imagemExercícios imagem
Exercícios imagem
João Leal
 
Tutorial ejercicios faciles 3ds max l jop
Tutorial ejercicios faciles 3ds max l jopTutorial ejercicios faciles 3ds max l jop
Tutorial ejercicios faciles 3ds max l jop
Luis Jose
 
Guia KDEnlive
Guia KDEnliveGuia KDEnlive
Guia KDEnlive
autonomo
 
Apresentação TPSI - ISEC (Edição de Imagem)
Apresentação TPSI - ISEC (Edição de Imagem)Apresentação TPSI - ISEC (Edição de Imagem)
Apresentação TPSI - ISEC (Edição de Imagem)
João Leal
 
T12 fotografia como forma de arte movimento
T12   fotografia como forma de arte movimentoT12   fotografia como forma de arte movimento
T12 fotografia como forma de arte movimento
Professor Leonardo Pereira
 
Apresentação1 11 pm edição 3d
Apresentação1 11 pm edição 3dApresentação1 11 pm edição 3d
Apresentação1 11 pm edição 3d
João Leal
 
Introduction to Illustrator's workshop - Covilha October 2012
Introduction to Illustrator's workshop - Covilha October 2012Introduction to Illustrator's workshop - Covilha October 2012
Introduction to Illustrator's workshop - Covilha October 2012
Leonardo Pereira
 
Introduction to Photoshop's workshop - Covilha October 2012
Introduction to Photoshop's workshop - Covilha October 2012Introduction to Photoshop's workshop - Covilha October 2012
Introduction to Photoshop's workshop - Covilha October 2012
Leonardo Pereira
 

Mais procurados (15)

Introdução ao Photoshop
Introdução ao PhotoshopIntrodução ao Photoshop
Introdução ao Photoshop
 
Princípios básicos e clássicos de animação
Princípios básicos e clássicos de animaçãoPrincípios básicos e clássicos de animação
Princípios básicos e clássicos de animação
 
Kdenlive tutorial
Kdenlive tutorialKdenlive tutorial
Kdenlive tutorial
 
Apresentação 2 Formação Photoshop
Apresentação 2 Formação PhotoshopApresentação 2 Formação Photoshop
Apresentação 2 Formação Photoshop
 
Tutorial kdenlive
Tutorial kdenliveTutorial kdenlive
Tutorial kdenlive
 
Apresentação exercícios imagem - ISEC
Apresentação exercícios imagem - ISECApresentação exercícios imagem - ISEC
Apresentação exercícios imagem - ISEC
 
Vray para sketchup
Vray para sketchupVray para sketchup
Vray para sketchup
 
Exercícios imagem
Exercícios imagemExercícios imagem
Exercícios imagem
 
Tutorial ejercicios faciles 3ds max l jop
Tutorial ejercicios faciles 3ds max l jopTutorial ejercicios faciles 3ds max l jop
Tutorial ejercicios faciles 3ds max l jop
 
Guia KDEnlive
Guia KDEnliveGuia KDEnlive
Guia KDEnlive
 
Apresentação TPSI - ISEC (Edição de Imagem)
Apresentação TPSI - ISEC (Edição de Imagem)Apresentação TPSI - ISEC (Edição de Imagem)
Apresentação TPSI - ISEC (Edição de Imagem)
 
T12 fotografia como forma de arte movimento
T12   fotografia como forma de arte movimentoT12   fotografia como forma de arte movimento
T12 fotografia como forma de arte movimento
 
Apresentação1 11 pm edição 3d
Apresentação1 11 pm edição 3dApresentação1 11 pm edição 3d
Apresentação1 11 pm edição 3d
 
Introduction to Illustrator's workshop - Covilha October 2012
Introduction to Illustrator's workshop - Covilha October 2012Introduction to Illustrator's workshop - Covilha October 2012
Introduction to Illustrator's workshop - Covilha October 2012
 
Introduction to Photoshop's workshop - Covilha October 2012
Introduction to Photoshop's workshop - Covilha October 2012Introduction to Photoshop's workshop - Covilha October 2012
Introduction to Photoshop's workshop - Covilha October 2012
 

Destaque

Princípios Orientadores de Design de Interfaces para aplicações iTV orientada...
Princípios Orientadores de Design de Interfaces para aplicações iTV orientada...Princípios Orientadores de Design de Interfaces para aplicações iTV orientada...
Princípios Orientadores de Design de Interfaces para aplicações iTV orientada...
Leonardo Pereira
 
A Revolução Cultural de Consumo na Produção e Distribuição de Conteúdo Audiov...
A Revolução Cultural de Consumo na Produção e Distribuição de Conteúdo Audiov...A Revolução Cultural de Consumo na Produção e Distribuição de Conteúdo Audiov...
A Revolução Cultural de Consumo na Produção e Distribuição de Conteúdo Audiov...
Leonardo Pereira
 
Estado da arte do parque de terminais móveis em PT_2010
Estado da arte do parque de terminais móveis em PT_2010 Estado da arte do parque de terminais móveis em PT_2010
Estado da arte do parque de terminais móveis em PT_2010
Leonardo Pereira
 
Estratégias de Produção de Motion Graphics para Mobile TV: O contexto português
Estratégias de Produção de Motion Graphics para Mobile TV: O contexto portuguêsEstratégias de Produção de Motion Graphics para Mobile TV: O contexto português
Estratégias de Produção de Motion Graphics para Mobile TV: O contexto português
Leonardo Pereira
 
Photoshop CS6 - Efeito Flores de outono
Photoshop CS6 - Efeito Flores de outonoPhotoshop CS6 - Efeito Flores de outono
Photoshop CS6 - Efeito Flores de outono
Milena Capraro
 
Teoria Super Básica de Cores
Teoria Super Básica de CoresTeoria Super Básica de Cores
Teoria Super Básica de Cores
Fábio Gonçalves
 
O Photoshop na Direção de Arte Publicitária
O Photoshop na Direção de Arte PublicitáriaO Photoshop na Direção de Arte Publicitária
O Photoshop na Direção de Arte Publicitária
Leonardo Pereira
 
Photoshop cs-6
Photoshop cs-6Photoshop cs-6
Photoshop cs-6
José Maria Oliveira
 
Introdução ao retoque de imagem
Introdução ao retoque de imagemIntrodução ao retoque de imagem
Introdução ao retoque de imagem
Leonardo Pereira
 
Inkscape For Art & Science
Inkscape For Art & ScienceInkscape For Art & Science
Inkscape For Art & Science
Michele Tobias
 
Gimp Vs Photoshop
Gimp Vs PhotoshopGimp Vs Photoshop
Gimp Vs Photoshop
lagrange
 
Tutorial de Intro ao Photoshop: Simulação de capa de livro em perspectiva 3D
Tutorial de Intro ao Photoshop: Simulação de capa de livro em perspectiva 3DTutorial de Intro ao Photoshop: Simulação de capa de livro em perspectiva 3D
Tutorial de Intro ao Photoshop: Simulação de capa de livro em perspectiva 3D
Leonardo Pereira
 
Adobe illustrator vs inkscape
Adobe illustrator vs inkscapeAdobe illustrator vs inkscape
Adobe illustrator vs inkscape
disseny2d1
 
Correção de cor em Photoshop
Correção de cor em PhotoshopCorreção de cor em Photoshop
Correção de cor em Photoshop
Leonardo Pereira
 
Inkscape, nociones básicas
Inkscape, nociones básicasInkscape, nociones básicas
Inkscape, nociones básicas
David Pineda
 
Técnica avançadas de recorte em Photoshop
Técnica avançadas de recorte em PhotoshopTécnica avançadas de recorte em Photoshop
Técnica avançadas de recorte em Photoshop
Leonardo Pereira
 
Manual inkscape
Manual inkscapeManual inkscape
Manual inkscape
Marcelo Almeida
 
Apostila ai cs6
Apostila ai cs6Apostila ai cs6
Apostila ai cs6
Joka Luiz
 

Destaque (18)

Princípios Orientadores de Design de Interfaces para aplicações iTV orientada...
Princípios Orientadores de Design de Interfaces para aplicações iTV orientada...Princípios Orientadores de Design de Interfaces para aplicações iTV orientada...
Princípios Orientadores de Design de Interfaces para aplicações iTV orientada...
 
A Revolução Cultural de Consumo na Produção e Distribuição de Conteúdo Audiov...
A Revolução Cultural de Consumo na Produção e Distribuição de Conteúdo Audiov...A Revolução Cultural de Consumo na Produção e Distribuição de Conteúdo Audiov...
A Revolução Cultural de Consumo na Produção e Distribuição de Conteúdo Audiov...
 
Estado da arte do parque de terminais móveis em PT_2010
Estado da arte do parque de terminais móveis em PT_2010 Estado da arte do parque de terminais móveis em PT_2010
Estado da arte do parque de terminais móveis em PT_2010
 
Estratégias de Produção de Motion Graphics para Mobile TV: O contexto português
Estratégias de Produção de Motion Graphics para Mobile TV: O contexto portuguêsEstratégias de Produção de Motion Graphics para Mobile TV: O contexto português
Estratégias de Produção de Motion Graphics para Mobile TV: O contexto português
 
Photoshop CS6 - Efeito Flores de outono
Photoshop CS6 - Efeito Flores de outonoPhotoshop CS6 - Efeito Flores de outono
Photoshop CS6 - Efeito Flores de outono
 
Teoria Super Básica de Cores
Teoria Super Básica de CoresTeoria Super Básica de Cores
Teoria Super Básica de Cores
 
O Photoshop na Direção de Arte Publicitária
O Photoshop na Direção de Arte PublicitáriaO Photoshop na Direção de Arte Publicitária
O Photoshop na Direção de Arte Publicitária
 
Photoshop cs-6
Photoshop cs-6Photoshop cs-6
Photoshop cs-6
 
Introdução ao retoque de imagem
Introdução ao retoque de imagemIntrodução ao retoque de imagem
Introdução ao retoque de imagem
 
Inkscape For Art & Science
Inkscape For Art & ScienceInkscape For Art & Science
Inkscape For Art & Science
 
Gimp Vs Photoshop
Gimp Vs PhotoshopGimp Vs Photoshop
Gimp Vs Photoshop
 
Tutorial de Intro ao Photoshop: Simulação de capa de livro em perspectiva 3D
Tutorial de Intro ao Photoshop: Simulação de capa de livro em perspectiva 3DTutorial de Intro ao Photoshop: Simulação de capa de livro em perspectiva 3D
Tutorial de Intro ao Photoshop: Simulação de capa de livro em perspectiva 3D
 
Adobe illustrator vs inkscape
Adobe illustrator vs inkscapeAdobe illustrator vs inkscape
Adobe illustrator vs inkscape
 
Correção de cor em Photoshop
Correção de cor em PhotoshopCorreção de cor em Photoshop
Correção de cor em Photoshop
 
Inkscape, nociones básicas
Inkscape, nociones básicasInkscape, nociones básicas
Inkscape, nociones básicas
 
Técnica avançadas de recorte em Photoshop
Técnica avançadas de recorte em PhotoshopTécnica avançadas de recorte em Photoshop
Técnica avançadas de recorte em Photoshop
 
Manual inkscape
Manual inkscapeManual inkscape
Manual inkscape
 
Apostila ai cs6
Apostila ai cs6Apostila ai cs6
Apostila ai cs6
 

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

Composição de imagens no Photoshop
Composição de imagens no PhotoshopComposição de imagens no Photoshop
Composição de imagens no Photoshop
Renato Melo
 
Correcção de cor secundária_Look Sin City
Correcção de cor secundária_Look Sin CityCorrecção de cor secundária_Look Sin City
Correcção de cor secundária_Look Sin City
Leonardo Pereira
 
PHOTOSHOP BLENDIN G BALÃO
PHOTOSHOP BLENDIN G BALÃOPHOTOSHOP BLENDIN G BALÃO
PHOTOSHOP BLENDIN G BALÃO
Tribunal de Justiça de Mato Grosso
 
Brotero - Máscaras + Exercício 1 - Phtoshop
Brotero - Máscaras + Exercício 1 - PhtoshopBrotero - Máscaras + Exercício 1 - Phtoshop
Brotero - Máscaras + Exercício 1 - Phtoshop
João Leal
 
Divisão de Imagens 3D com CloudCompare
Divisão de Imagens 3D com CloudCompareDivisão de Imagens 3D com CloudCompare
Divisão de Imagens 3D com CloudCompare
Tiago Antônio da Silva
 
Apresentação 2 Formação Photoshop
Apresentação 2 Formação PhotoshopApresentação 2 Formação Photoshop
Apresentação 2 Formação Photoshop
João Leal
 
Video Post
Video PostVideo Post
Video Post
Renato Melo
 
FACEBOOK: VIDEO POST
FACEBOOK: VIDEO POSTFACEBOOK: VIDEO POST
FACEBOOK: VIDEO POST
Renato Melo
 
Tutorial de introducao as mascaras
Tutorial de introducao as mascarasTutorial de introducao as mascaras
Tutorial de introducao as mascaras
Leonardo Pereira
 
Pratica inkscape2
Pratica inkscape2Pratica inkscape2
Pratica inkscape2
Rosa Uchoa
 
5ª Aula de Gimp
5ª Aula de Gimp5ª Aula de Gimp
5ª Aula de Gimp
Fernando Anselmo
 
Efeitos Photoshop
Efeitos PhotoshopEfeitos Photoshop
Efeitos Photoshop
Paula Peres
 

Semelhante a Adding paralax to a still picture - From 2D to 2.5D (12)

Composição de imagens no Photoshop
Composição de imagens no PhotoshopComposição de imagens no Photoshop
Composição de imagens no Photoshop
 
Correcção de cor secundária_Look Sin City
Correcção de cor secundária_Look Sin CityCorrecção de cor secundária_Look Sin City
Correcção de cor secundária_Look Sin City
 
PHOTOSHOP BLENDIN G BALÃO
PHOTOSHOP BLENDIN G BALÃOPHOTOSHOP BLENDIN G BALÃO
PHOTOSHOP BLENDIN G BALÃO
 
Brotero - Máscaras + Exercício 1 - Phtoshop
Brotero - Máscaras + Exercício 1 - PhtoshopBrotero - Máscaras + Exercício 1 - Phtoshop
Brotero - Máscaras + Exercício 1 - Phtoshop
 
Divisão de Imagens 3D com CloudCompare
Divisão de Imagens 3D com CloudCompareDivisão de Imagens 3D com CloudCompare
Divisão de Imagens 3D com CloudCompare
 
Apresentação 2 Formação Photoshop
Apresentação 2 Formação PhotoshopApresentação 2 Formação Photoshop
Apresentação 2 Formação Photoshop
 
Video Post
Video PostVideo Post
Video Post
 
FACEBOOK: VIDEO POST
FACEBOOK: VIDEO POSTFACEBOOK: VIDEO POST
FACEBOOK: VIDEO POST
 
Tutorial de introducao as mascaras
Tutorial de introducao as mascarasTutorial de introducao as mascaras
Tutorial de introducao as mascaras
 
Pratica inkscape2
Pratica inkscape2Pratica inkscape2
Pratica inkscape2
 
5ª Aula de Gimp
5ª Aula de Gimp5ª Aula de Gimp
5ª Aula de Gimp
 
Efeitos Photoshop
Efeitos PhotoshopEfeitos Photoshop
Efeitos Photoshop
 

Mais de Leonardo Pereira

Tutorial de criação de paralaxe numa imagem 2D
Tutorial de criação de paralaxe numa imagem 2DTutorial de criação de paralaxe numa imagem 2D
Tutorial de criação de paralaxe numa imagem 2D
Leonardo Pereira
 
www.entaovadesign.com 2014
www.entaovadesign.com 2014www.entaovadesign.com 2014
www.entaovadesign.com 2014
Leonardo Pereira
 
Provas de Doutoramento de Leonardo Pereira_17 de Dezembro 2013
Provas de Doutoramento de Leonardo Pereira_17 de Dezembro 2013Provas de Doutoramento de Leonardo Pereira_17 de Dezembro 2013
Provas de Doutoramento de Leonardo Pereira_17 de Dezembro 2013
Leonardo Pereira
 
Ludicidade vs usabilidade num website
Ludicidade vs usabilidade num websiteLudicidade vs usabilidade num website
Ludicidade vs usabilidade num website
Leonardo Pereira
 
O Genérico - Main Title Design and Diegetic Type
O Genérico - Main Title Design and Diegetic TypeO Genérico - Main Title Design and Diegetic Type
O Genérico - Main Title Design and Diegetic Type
Leonardo Pereira
 
Introdução à Projeção de cameras
Introdução à Projeção de camerasIntrodução à Projeção de cameras
Introdução à Projeção de cameras
Leonardo Pereira
 
Introdução aos Efeitos Visuais e ao Compositing
Introdução aos Efeitos Visuais e ao CompositingIntrodução aos Efeitos Visuais e ao Compositing
Introdução aos Efeitos Visuais e ao Compositing
Leonardo Pereira
 
O Flash no mundo da Animação
O Flash no mundo da AnimaçãoO Flash no mundo da Animação
O Flash no mundo da Animação
Leonardo Pereira
 
Introdução à mecânica de uma imagem estática
Introdução à mecânica de uma imagem estáticaIntrodução à mecânica de uma imagem estática
Introdução à mecânica de uma imagem estática
Leonardo Pereira
 
Apresentação relatório de progresso
Apresentação relatório de progressoApresentação relatório de progresso
Apresentação relatório de progresso
Leonardo Pereira
 
Introdução à Infografia
Introdução à InfografiaIntrodução à Infografia
Introdução à Infografia
Leonardo Pereira
 
Design de Interfaces IPTV para Seniores_Workshop Tecnologias Interativas de a...
Design de Interfaces IPTV para Seniores_Workshop Tecnologias Interativas de a...Design de Interfaces IPTV para Seniores_Workshop Tecnologias Interativas de a...
Design de Interfaces IPTV para Seniores_Workshop Tecnologias Interativas de a...
Leonardo Pereira
 
Leonardo Pereira's Book cover design portfolio
Leonardo Pereira's Book cover design portfolioLeonardo Pereira's Book cover design portfolio
Leonardo Pereira's Book cover design portfolio
Leonardo Pereira
 

Mais de Leonardo Pereira (13)

Tutorial de criação de paralaxe numa imagem 2D
Tutorial de criação de paralaxe numa imagem 2DTutorial de criação de paralaxe numa imagem 2D
Tutorial de criação de paralaxe numa imagem 2D
 
www.entaovadesign.com 2014
www.entaovadesign.com 2014www.entaovadesign.com 2014
www.entaovadesign.com 2014
 
Provas de Doutoramento de Leonardo Pereira_17 de Dezembro 2013
Provas de Doutoramento de Leonardo Pereira_17 de Dezembro 2013Provas de Doutoramento de Leonardo Pereira_17 de Dezembro 2013
Provas de Doutoramento de Leonardo Pereira_17 de Dezembro 2013
 
Ludicidade vs usabilidade num website
Ludicidade vs usabilidade num websiteLudicidade vs usabilidade num website
Ludicidade vs usabilidade num website
 
O Genérico - Main Title Design and Diegetic Type
O Genérico - Main Title Design and Diegetic TypeO Genérico - Main Title Design and Diegetic Type
O Genérico - Main Title Design and Diegetic Type
 
Introdução à Projeção de cameras
Introdução à Projeção de camerasIntrodução à Projeção de cameras
Introdução à Projeção de cameras
 
Introdução aos Efeitos Visuais e ao Compositing
Introdução aos Efeitos Visuais e ao CompositingIntrodução aos Efeitos Visuais e ao Compositing
Introdução aos Efeitos Visuais e ao Compositing
 
O Flash no mundo da Animação
O Flash no mundo da AnimaçãoO Flash no mundo da Animação
O Flash no mundo da Animação
 
Introdução à mecânica de uma imagem estática
Introdução à mecânica de uma imagem estáticaIntrodução à mecânica de uma imagem estática
Introdução à mecânica de uma imagem estática
 
Apresentação relatório de progresso
Apresentação relatório de progressoApresentação relatório de progresso
Apresentação relatório de progresso
 
Introdução à Infografia
Introdução à InfografiaIntrodução à Infografia
Introdução à Infografia
 
Design de Interfaces IPTV para Seniores_Workshop Tecnologias Interativas de a...
Design de Interfaces IPTV para Seniores_Workshop Tecnologias Interativas de a...Design de Interfaces IPTV para Seniores_Workshop Tecnologias Interativas de a...
Design de Interfaces IPTV para Seniores_Workshop Tecnologias Interativas de a...
 
Leonardo Pereira's Book cover design portfolio
Leonardo Pereira's Book cover design portfolioLeonardo Pereira's Book cover design portfolio
Leonardo Pereira's Book cover design portfolio
 

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

  • 1. Universidade do Minho Instituto de Ciências Sociais Departamento de Ciências da Comunicação Professor Leonardo Pereira LAB. AUDIOVISUAL E MULTIMÉDIA Ano 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 Pereira Neste tutorial vamos utilizar uma técnica manual que simula o mesmo tipo de resultados de técnicas digitais de projeção de cameras. Vamos criar a ilusão de Paralaxe — Profundidade de campo — a partir de uma imagem 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 sua posiçã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 01 Abrir 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: 1 6 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 o 4 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 da 1 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 Pereira Passo 10 Com 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 11 Para não se notarem transparências duplica-se a layer “bicla” e faz-se um control+e (PC) ou um cmd+e (Mac). Repete-se o processo até a figura estar praticamente opaca. Passo 12 Abrir o ficheiro “céu.tif”, selecionar a totalidade da imagem com um Control+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éu para 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 2 3 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 Pereira Passo 20 Agora 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) ou Control+Shit+C (PC) para tirar uma fotografia ao conjunto das layers todas. 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 outras layers. 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 Pereira Passo 21 No After Effects importar o ficheiro “elementos separados.PSD“ >> File >> Import >> File >> elementos separados.PSD Surge uma janela que nos pergunta como queremos importar o ficheiro. Vamos dizer ao AE que queremos importar o ficheiro como uma composição (1) e em Editable Layer Styles (2). Clicamos no OK (3). 1 2 3 E no painel do projeto surge-nos uma composição chamada “elementos separados“. Fazemos um duplo clique nesta composição para ela abrir na 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 Pereira Passo 30 Ligar 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 seja movida, se mantenha a olhar sempre para o mesmo local. Passo 31 Agora vamos animar a câmera. Criar dois keyframes: um no segundo 0 e outro no segundo 2 da timeline (1). Depois inserir os seguintes valores de posição da câmera em cada Keyframe: 2 1 1 (2) Keyframe segundo 0 = 1007; 852; -3155 (3) Keyframe segundo 2 = 1260; 832; - 2123 Et voilá! Temos a nossa imagem devidamente 2D convertida numa imagem 3D com o efeito de paralaxe. Basta correr a aguha da Timeline para se ver o efeito 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 de baixo e saltando no ar para acentuar-se o dramatismo e dinâmica da cena criada. e-mail: leonardpeartree@gmail.com | Skype: leonardpeartree