em , , , ,

Tutorial: Imagem pulando para fora da moldura

Preview Descrição: Como a ilusão de que uma imagem está saindo do seu monitor.

  • [message]
    • ##check##AVISO: Imagem pulando para fora da moldura

      • Caso você esteja usando o Photoshop em Português coloque o mouse sobre o nome do recurso que está sendo utilizado e veja a tradução em Português. Os recursos que possuem tradução estão marcados em vermelho no texto.
        Se você tiver dúvidas sobre o uso de alguma ferramenta visite o PS Help! para saber como utilizar a ferramenta desejada.
        Alguns tutoriais não possuem a opção de download das imagens, caso queira utilizar uma imagem em alta resolução para acompanhar o tutorial visite o PS Downloads e escolha um dos sites indicados para download de imagens em alta resolução.
        Em caso de dúvidas e sugestões utilize a área de comentários logo abaixo. Obrigado 🙂

tutoriais photoshop

01. Pressione Ctrl+O e abra a imagem que servirá de moldura para a foto, pode ser um quadro, tv, polaroid… etc, neste tutorial iremos usar uma tela lcd.

Imagem pulando para fora da moldura

02. Pressione Ctrl+O e abra a foto que será usada, neste tutorial iremos usar a imagem abaixo.

Imagem pulando para fora da moldura

03. Com a foto do carro aberta pressione Ctrl+A para selecionar todo seu conteúdo, pressione Ctrl+C para copiar o conteúdo, volte para a foto do monitor e pressione Ctrl+V para colar, pressione a letra V do teclado para selecionar a Move Tool e posicione a foto do carro sobre o monitor como na foto abaixo, caso a foto usada seja muito maior que a moldura pressione Ctrl+T para abrir a caixa de Free Transform e com a tecla Shift pressionada clique em um dos pontos da diagonal da caixa e arraste para redimensionar a imagem sem perder suas proporções, assim que tiver acertado o tamanho pressione Enter.

Imagem pulando para fora da moldura

04. Reduza a opacidade da layer por volta de 60%.

Imagem pulando para fora da moldura

05. Agora precisamos aplicar na foto a mesma perspectiva da moldura, para isto vá em Image> Transform> Skew, isto irá abrir a caixa de Free Transform ao redor de sua imagem, tente deixa a imagem com a mesma perspectiva da imagem da moldura que estiver usando, assim que achar o ponto certo pressione Enter.

Imagem pulando para fora da moldura

06. Agora pressione a letra V do teclado para selecionar a Move Tool e posicione a imagem afim de decidir qual parte irá pular para fora da moldura usada, no caso da imagem abaixo a frente do carro irá sair do monitor.

Imagem pulando para fora da moldura

07. Agora pressione a letra P do teclado para selecionar a Pen Tool (caso não saiba como usar a Pen Tool clique aqui) ou escolha outra ferramenta de seleção que achar melhor para trabalhar e crie uma seleção afim de eliminar as partes da foto que não devem aparecer, ou seja, que estejam fora da borda da moldura como na foto abaixo.

Imagem pulando para fora da moldura

08. Caso tenha feito a seleção com a Pen Tool vá em Window> Paths, clique com o botão direito sobre o Path na paleta de Paths e escolha a opção Make Selection, na caixa que irá abrir defina 1 pixel para Feather e pressione Ok.

Imagem pulando para fora da moldura

09. Sua imagem deverá ficar assim.

Imagem pulando para fora da moldura

10. Pressione Ctrl+Shift+I para inverter a seleção e pressione Delete, agora pressione Ctrl+D para retirar a seleção, deixe a opacidade da layer em 100% novamente e seu efeito estará pronto.

Imagem pulando para fora da moldura

Abaixo algumas váriações do mesmo efeito.

Imagem pulando para fora da moldura

Imagem pulando para fora da moldura

site de origem: http://www.showandtell-graphics.com/3d-monitor.html

Escrito por André Sugai

Publicitário, Photoshopista, criador do Tutoriais Photoshop, venceu o prêmio iBest na categoria tecnologia em 2008 e dois prêmios de criatividade da Adobe. Ex-colaborador do Tech Tudo (http://Globo.com), iMasters (UOL) e Revista Photoshop Creative.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.

22 Comments

  1. Oi Allexis, você está com a opção Shape Layers marcada na barra de opções da ferramenta no alto da tela, mude para a opção Path e sua ferramenta irá criar apenas o Path, obrigado pela visita!!

  2. Preciso de ajuda com a pen tool, é o seguinte, a medida que vou clicando(criando os pontos) com a pen, vai aparecendo uma marca que as vezes é branca outras vezes preta, e quando eu termino de fazer a seleção ela fica toda coberta com essa marca!!!

  3. Oi Filipe, exclui suas mensagens repetidas, você conseguiu salvar seguindo o que o dk-san, falou? obrigado pela visita!!

    Oi Dk-san, quanto ao cadeado depende da foto usada, algumas aparecem com o cadeado outras não, para desabilitar o cadeado da layer background é só clicar duas vezes na layer e pressionar Ok, aí você pode editar a vontade, fico feliz que esteja gostando do blog, obrigado pela visita e pela força que deu ao Filipe, volte sempre!! 🙂

  4. ae filipe…
    tipo… vc ta indo em file(arquivo) e clicando em save as(salvar como)???
    se tiver… quando abrir a janela pra vc direcionar a pasta onde a montagem vai ser salva, vc nomeia a montagem e logo embaixo desse nome tem o formato em que vc deve salvar a foto… tem varios formatos… o que aparece sempre como a primeira opção eh o com a extenção PSD… eh soh clicar do lado pra aparecer as outras opções de extenções… nessa lista tem o formato JPEG…
    se vc ja fez isso ai, eu nao sei te explicar qual o problema…

    falow ..

  5. Fala ae Andre…
    ta muito legal o seu blog…
    venho muito aki pra ver se tem novidades e ate ja fiz alguns efeitos que vc postou…
    confesso q comecei a aprender mais aqui no seu blog antes tinha ido em outro blog mas nao tinha nada de interessante…
    e parabens, os seus tutorias sao muito bem explicados…
    só que neste vc nao mencionou que tinha que desablitar o cadeado da foto original a background…
    eu empaquei na ultima parte do tutorial por causa disso…
    hehehehe…
    e mais uma vez parabens pelos tutoriais…

    Valew e Obrigado…

  6. cara, eu consigui fazee essa montagem , mas só que quando eu acabo naum tem como salvar como uma foto JPG ( foto normal ) , só salva ela fikando dentro do potohop
    como faz pra salvar normal ?
    me add no msn aew
    filipe_alvesoliveira[at]hotmail.com
    me ensina aew
    Flo!!

  7. Oi Felipe, pode deixar que vou preparar algo ok? obrigado pela visita e fico feliz que tenha conseguido, aquele tutorial é bem complicado, mas depois que se pega o jeito fica bem legal o resultado, volte sempre!!

  8. eae andré!
    sou o felipe (do flickr do post
    anterior)lembra?!
    cara! eu fiz o icone do iphone
    fico mtu loko!
    tô aqui pra ti faze um pedido, coloca um post de complexiddade
    máxima alguma coisa bem díficil e bem legal ao mesmo tempo…sabe?!
    conto com vc!
    pq na realidade eu apanhei pra faze o icone mas acho q é errando e fuçando q a gente aprende…

    abraço

  9. Oi Valéria, qual sua versão do Photoshop? com certeza deve ser abaixo da CS2 né? por isso a opção Warp não existe, esta opção só está presente nas versões mais recentes do Photoshop, obrigado pela visita!!

  10. Adorei esse tutorial, parabéns!
    Mais eu queria saber o seguinte, porque no meu photoshop não tem a opção ‘Warp’????
    Só tem as outras opções pra mudar a imagem, mais esse ‘warp’ não tem..
    Beijoss!

  11. Oi Henrique, desculpe pela demora na resposta, é que aparecem tantos comentários e vou tentando responder todos na medida do possível mas pode deixar que irei responder pois todos os comentários independente de data caem na minha caixa de emails (que está lotada de comentários para serem respondidos hahah), obrigado pela visita!!

  12. Valeu, André. Estarei mandando um e-mail com as fotos que fiz. Foram duas; uma tem meu patins saindo de dentro do meu celular, e a outra tem uma mão com uma flor saindo de um monitor.

    Até mais, e me responda o e-mail com algumas criticas e observações que você fizer.

    Abraços

  13. Oi Daniel, basta clicar no botão de contato no menu que existe no alto da tela, se você tiver o Outlook ele abre automaticamente, caso não tenha o outlook meu e-mail é guitarfreaks[at]gmail.com, arrumei o menu na sexta-feira, estava aparecendo de forma errada no IE pois ele não consegue ler o CSS da página de forma correta, deu um trabalhão para achar o que estava errado, por fim achei a parte do código que o IE não conseguia ler e fiz alguns Hacks, agora ele lê mas não é a mesma coisa se você entrar com o Firefox por exemplo… mesmo assim obrigado pela ajuda!! 🙂

Qual sua idade? Resultados

Irmãos Brain se viram no PS.