Tutorial: Imagem pulando para fora da moldura

COMPARTILHE:

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

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

COMENTÁRIOS

BLOGGER: 22
  1. Fala, André. Esse efeito é bem legal. Já fi antes mas de um outro modo. Como eu posso passar a foto pra você ver?

    Abraços.

    ResponderExcluir
  2. Outra coisa, André; Agora os menus que ficam na parte superior do seu site está correndo beleza (acompanhando a tela) e sem deformar a página (Internet Explorer).

    Falou.

    ResponderExcluir
  3. 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@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!! :)

    ResponderExcluir
  4. 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

    ResponderExcluir
  5. Oi Daniel, pode deixar, assim que receber eu respondo ao e-mail ok? obrigado pela visita!! :)

    ResponderExcluir
  6. Henrique Mezzomo Malheiros21 de janeiro de 2008 10:43:00 BRST

    ei andréééé
    bem q podia responder o meu post no tutorial composição com varis fotos ou uma coisa asim neh ????
    e belo tutorial!!!!

    ResponderExcluir
  7. 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!!

    ResponderExcluir
  8. 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!

    ResponderExcluir
  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!!

    ResponderExcluir
  10. 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

    ResponderExcluir
  11. 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!!

    ResponderExcluir
  12. 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@hotmail.com
    me ensina aew
    Flo!!

    ResponderExcluir
  13. 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...

    ResponderExcluir
  14. aew DK-SAN , se sabe como q salva a foto em JPG ?
    salvar a foto normal qdo termina de fazer a montagem ?
    Fla aew

    ResponderExcluir
  15. 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...

    falowwww...

    ResponderExcluir
  16. 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!! :)

    ResponderExcluir
  17. aew Dk-San ... vlw cara consegui fiko massa vlw msm .. vlw tbm André ...
    Flow awe

    ResponderExcluir
  18. 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!!!

    ResponderExcluir
  19. 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!!

    ResponderExcluir
  20. Oi preciso de ajuda, como faço uma moldura ex. vermelha envolta da arte e como coloco o fundo em gredade.
    bjss, adoro seu trabalho
    carla

    ResponderExcluir
  21. Oi Lembrança e festas, dê uma olhada neste tutorial, acho que irá ajudar, obrigado pela visita!!

    ResponderExcluir
  22. Tente montar nestes sites:
    http://www.animadao.com
    http://www.fotinhas.com.br
    http://www.netrecados.com
    http://www.montefotos.com.br
    http://www.recadosonline.net

    ResponderExcluir

Nome

.ai,71,.asl,1,.eps,24,.indd,1,.jpg,20,.png,40,.psd,594,.sketch,2,.svg,7,2006,90,2007,352,2008,942,2009,1780,2010,1822,2011,1825,2012,1764,2013,240,2014,559,2015,1195,2016,518,2017,748,2018,700,2019,415,2am,1,2axion,1,360,4,abril,378,abstrato,223,acer,1,actions,151,adobe,32,adobe experience house,1,adobe max,1,agosto,532,ajax,1,allan portilho,1,animação,39,aritana,1,arte,27,artistas do photoshop,1079,axis,5,backgrounds,1,basekit,1,básico,68,benq,9,bethesda,4,bgs,123,bmx,1,booombox,2,brasilmegaarena,2,brushes,107,bug,1,bunker,1,campus party,1,capcom,1,cartazes de cinema,117,cartazes de rock,203,cinemark,1,codemasters,1,com2us,3,concurso cultural,1,css3,1,curta,6,de(ath)sign,236,designbunkertp,1,dezembro,642,dica ninja,99,dificuldade 1,38,dificuldade 2,389,dificuldade 3,948,dificuldade 4,332,dificuldade 5,56,distortions,4,divulgação,1,diy,32,dji,1,dlink,1,documentário,105,dollarphotoclub,37,download,1780,edição de vídeo,3,efeito,1076,esportes,11,fastcom,3,ferramentas online,1,fevereiro,492,filme,3,flipbook,1,flow motion,1,fontes,569,fotolia,13,fotoshistoricas,39,fotosqueabalaramomundo,75,gamebau,1,games,214,gamevil,1,gastore,1,gifart,27,gomidia,1,goPro,1,gradientes,7,greenk,1,guest post,5,historia da foto,22,hitbox,1,hopi-hari,1,hoplon,19,html5,3,hype,2,hyperlapse,5,hyperx,33,ícones,96,idc,2,imagem,1,infográfico,1,inspiração,34,janeiro,480,julho,494,junho,393,kingston,16,kinship,2,layer style,43,lbee,1,leitores,1,levelup,15,lightpainting,1,lista,2,live-stream,2,magic the gathering,1,maio,336,março,466,matéria,591,maurício de souza produções,1,melhordasemana,17,mestres da pintura,35,meutimao,1,mob2b,1,mockup,39,música,48,natal,1,novembro,698,off,1,off-topic,520,outubro,748,palestra,7,parkour,1,patern,46,pdf,2,pérolas do instagram,1,photoshop básico,1,Photoshop CC,2,photoshop express,1,photoshop week,1,pixel show,1,plugin,4,png,1,positivo,16,post pago,2,prezi,1,printi,2,project ten,2,psd,2,psdownloads,1,pshelp,1,pszuero,2,purgatorium 90,1,rawar,2,razer,36,relink,214,responsivo,2,retoque de imagem,111,rixty,3,saga,12,selecaoTP,44,setembro,520,shapes,2,showreel,7,skate,59,skillab,1,smyowl,6,sony,1,speedart,3,speedpaint,8,splashscreen,1,stop-motion,9,tectoy,4,template,4,teste,1,texto,272,textura,137,tilt-shift,3,timelapse,21,tipografia,3,tp,2,tunning virtual,14,tutorial,2210,tutorial builder,2,tutorial player,2,ubisoft,71,udemy,1,ui,16,unboxing,1,vaio,1,vice,64,vídeo,706,vídeo aula,485,video mapping,3,wallpaper,1,warspear,1,wbgames,1,web,25,webfont,1,wix,3,xma,5,
ltr
item
::Tutoriais Photoshop::: Tutorial: Imagem pulando para fora da moldura
Tutorial: Imagem pulando para fora da moldura
Como a ilusão de que uma imagem está saindo do seu monitor.
https://www.andresugai.org/Tutoriais/01.2008/T14/imagem12.jpg
::Tutoriais Photoshop::
https://www.tutoriaisphotoshop.net/2008/01/imagem-pulando-para-fora-da-moldura.html
https://www.tutoriaisphotoshop.net/
https://www.tutoriaisphotoshop.net/
https://www.tutoriaisphotoshop.net/2008/01/imagem-pulando-para-fora-da-moldura.html
true
34833248
UTF-8
Ver todos os Posts Não encontramos nenhum post VEJA TODOS Leia Mais Responder Cancelar Resposta Deletar Por Home PÁGINAS POSTS Veja Todos RECOMENDAMOS TAMBÉM LABEL ARQUIVO SEARCH TODOS OS POSTS Não encontramos nenhum post relacionado com sua busca Voltar para a Home Domingo Segunda Terça Quarta Quinta Sexta Sábado Dom Seg Ter Qua Qui Sex Sáb Janeiro Fevereiro Março Abril Maio Junho Julho Agosto Setembro Outubro Novembro Dezembro Jan Fev Mar Abr Maio Jun Jul Ago Set Out Nov Dez agora 1 minuto atrás $$1$$ minutes ago 1 hora atrás $$1$$ hours ago Ontem $$1$$ days ago $$1$$ weeks ago mais de 5 semanas atrás Seguidores Seguir THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copie todo código Selecione todo código Todos os códigos copiados para o clipboard Não foi possível copiar todo código / textos, pro favor pressione [CTRL]+[C] (ou CMD+C no Mac) para copiar