como fazer o efeito de foto em tiras verticais no photoshop

Upload: psorelizio

Post on 10-Oct-2015

31 views

Category:

Documents


0 download

TRANSCRIPT

  • 1/9/2014 Imprimir

    about:blank 1/68

    Assunto: ::Tutoriais Photoshop::

    De: ::Tutoriais Photoshop:: ([email protected])

    Para: [email protected];

    Data: Sexta-feira, 29 de Agosto de 2014 19:37

    ::Tutoriais Photoshop::

    Como fazer o efeito de foto em tiras verticais no Photoshop.Como baixar o Adobe Photoshop gratuitamente.51 plugins de Photoshop para Webdesigners.

    Como fazer o efeito de foto em tiras verticais no Photoshop.Posted: 29 Aug 2014 12:41 PM PDT

    Descrio: Hoje temos aqui no TP um guest post muito legal, ele foi desenvolvidopelo Marcos Sandro do Photosohop online (www.photoshoponline.blog.br e vaimostrar como construir passo a passo o efeito de tiras verticais em uma imagemmuito bacana do Spider Man, se voc quiser publicar seu contedo aqui no TP comoguest post envie um e-mail para [email protected]

    Neste tutorial Photoshop vamos aprender a criar uma iluso de que uma nica foto est sendo exibida exibida como umaserie de painis verticais. A primeira vista pode parecer complicado, no entanto uma manipulao bem simples derealizar, muitos dos passo abaixo so simples repeties, estou utilizando o Photoshop CC em Portugus, mas qualquerverso funciona perfeitamente.

    Imagem utilizada no tutorial

    01 - Primeiros passos

    Com o seu Photoshop aberto importe a imagem ou fotografia que deseja aplicar esse efeito.

  • 1/9/2014 Imprimir

    about:blank 2/68

    V em Arquivo> Abrir ou (Ctrl+O), com sua imagem aberta no Photoshop, comece criando uma camada depreenchimento com um fundo slido.

    Para isso v no painel de camada na parte de baixo, clique sobre o cone que aparece com um crculo dividodiagonalmente entre preto e branco, criar uma camada de preenchimento ou ajuste de new layer.

    Selecione cor slida.

    O Photoshop ir abrir seu seletor de cores (Color Picker) para que possamos escolher uma cor, selecione uma cor brancaclicando no canto superior esquerda da caixa de seleo ou digitando 255 para as opes de R, G e B, conforme mostra aimagem abaixo.

  • 1/9/2014 Imprimir

    about:blank 3/68

    Clique em OK. O documento que servir de base para o nosso efeito foi criado:

    Observe que no Painel de camadas vemos a nova camada de preenchimento de cor slida acima da nossa camadabackground.

    02 - Duplique a camada de fundo

    No painel de camada selecione a camada background, e d um Ctrl+J

    Uma cpia da camada de fundo foi criado com o nome de Plano de fundo cpia, adicionado diretamente acima dooriginal:

  • 1/9/2014 Imprimir

    about:blank 4/68

    03 - Mova a camada Plano de fundo cpia.

    Agora vamos ter que mover a camada plano de fundo cpia para acima da camada de preenchimento de cor slida, umamaneira mais fcil de fazer isso pressionando Ctrl+Colchete direito (]), voc tambm poder mover com o seu mouseclicando sobre a camada e arrastando para cima.

    04 - Selecione a ferramenta Retngulo.

    Selecione a ferramenta Rectangle no painel Ferramentas:

    Nas propriedade da barra de ferramenta acima coloque o preenchimento com a cor preta.

  • 1/9/2014 Imprimir

    about:blank 5/68

    05 - Desenhe O primeiro painel Vertical

    Com a ferramenta Retngulo e a opo Formas selecionada, clique dentro do documento e arraste o seu primeiro painelvertical. Ns vamos adicionar nossos painis da esquerda para a direita na image, no se preocupe com a cor dopreenchimento.

    06 - gire o painel com a Free Transform

    Para adicionar um pouco mais de interesse visual para o efeito, vamos rotacionar alguns dos painis de modo que nemtodos aparecem para cima e para baixo. Pressione Ctrl+T e para seleionar a free transform e rotacione seu painel, d enterpara aplicara as alteraes.

    07 - Mova a camada Forma abaixo da camada de cpia Background

    Se olharmos para o painel de camadas, vemos a nossa camada de forma recm-adicionado (denominada Retngulo 1)sentado acima da camada de Plano de fundo cpia:

  • 1/9/2014 Imprimir

    about:blank 6/68

    Precisamos trocar a ordem das duas camadas para a camada de forma aparece abaixo da camada de Plano de fundo cpia,e ns podemos fazer isso com outro atalho de teclado. Com a camada de forma selecionada, pressione Ctrl + colcheteesquerdo ([). Isso salta a camada selecionada Retngulo 1 para baixo da camada plano de fundo cpia. Voc tambmpoder clicar sobre a camada Retngulo 1 e arrasta para baixo da Plano de fundo copiar.

    08 - Selecione a camada Plano de Fundo cpia

    Mais uma vez, clique na camada Plano de Fundo cpia para selecion-la

  • 1/9/2014 Imprimir

    about:blank 7/68

    09 Vamos criar Criar Mscara de corte

    D um clique com o boto direito Plano de fundo copiar e selecione a opo Criar Mscara de corte.

    Feito isso nos teremos esse resultado

    Se olharmos no painel de camadas, vemos que a camada Plano de fundo cpia est agora recuado para a direita, com umapequena seta apontando para baixo esquerda da miniatura de visualizao. Isso signfica que a camada cortada para ocontedo da camada abaixo dela:

  • 1/9/2014 Imprimir

    about:blank 8/68

    10 - Adicionar uma sombra projetada

    Vamos adicionar alguns estilos de camada simples para o painel. Primeiro clique na camada Retngulo 1 para selecion-la:

    Em seguida clique no cone Estilos de camada, na parte inferior do painel de camadas:

    Escolha Sombra projetada da lista de estilos de camada que aparece:

  • 1/9/2014 Imprimir

    about:blank 9/68

    A caixa de de estilos do Photoshop ser aberta, vamos definir as opes Sobram projetada na coluna do meio. Diminua aopacidade da sombra para 60% para reduzir sua intensidade, em seguida defina o ngulo de 120. Definir opes tanto adistncia e tamanho para 10px:

    Ainda no feche a caixa de estilo de camadas, temos mais um estilo a ser adicionado. Ao aplicar a sombra projetada ficarsemelhante a imagem abaixo.

    11 - Adicionar uma borda

    Ainda na caixa de dilogo estilo de camada, clique em traado na parte inferior da lista esquerda, certifique-se vocclicou sobre o nome traado e no apenas na caixa de seleo, caso contrrio voc ter acessoas as opes.

    Nas configuraes do traado, vamos altera a cor.

  • 1/9/2014 Imprimir

    about:blank 10/68

    O photoshop ira abrir a paleta de cores, configure a cor para branco, digitando 255 para o R, G e B valores. Quando vocterminar, clique em OK para fechar a paleta de cores:

    Altere o tamanho do curso para 2px, ento mude a posio para dentro:

  • 1/9/2014 Imprimir

    about:blank 11/68

    Clique em OK para fechar a caixa de dilogo estilo de camada. O painel ir ficar dessa maneira.

    12 - Selecione as duas camadas de uma vez

    Com a camada Retngulo 1 j selecionado, mantenha pressionada a tecla Shift e clique na camada Plano de fundo copiaracima dele. Isso ir selecionar as duas camadas de uma s vez.

    13 - Criar um grupo de camadas

    Com as duas camadas selecionada, v at o menu camadas na parte superior da tela, escolha Novo e escolha Grupo apartir de Camadas:

    Digite um nome para o novo grupo de camadas, em seguida clique em OK.

  • 1/9/2014 Imprimir

    about:blank 12/68

    Photoshop coloca as duas camadas dentro de um grupo chamado Painel. As duas camadas esto escondidas no interior dogrupo. Ns vamos adicionar nossos painis de fotografias adicionais ao documento atravs de cpias do grupo:

    D um clique no grupo painel, com o boto do mouse pressionado arraste para baixo at o cone de nova camada,localizado na parte de baixo do painel de camadas.

    Solte o boto do mouse sobre o cone nova camada. Photoshop cria uma cpia do grupo e coloca-lo acima do grupo depainel original:

    14 - mover a cpia abaixo do grupo Original

  • 1/9/2014 Imprimir

    about:blank 13/68

    Pressione Ctrl + colchete esquerdo ([) para mover a cpia do grupo Painel abaixo o original:

    15 - Abra o grupo de Camada

    Clique no cone pequeno tringulo esquerda do nome do grupo de cpias de Painel. Isto ir rodar o grupo aberto,revelando as duas camadas dentro dele:

    16 - mover e girar a forma com transformao livre

    Pressione as teclas Ctrl+T para selecionar a free transforme, em seguida redimensione e arraste para a direita.

    Uma dica tenta colocar o segundo painel maior ou menos do que o painel original, alm disso gire na direo oposta aoclicar em qualquer lugar fora dele e arrasta com com o mouse.

  • 1/9/2014 Imprimir

    about:blank 14/68

    No meu exemplo eu girei e posicionei um pouco maior do que o primeiro. Quando termina pressione Enter do seu tecladopara aceitar as alteraes e sai do comando transformao livre:

    17 - fechar o grupo Camada

    18 - fechar o grupo Camada

    Precisamos fazer mais algumas cpias do grupo de camadas para criar os painis adicionais,

    de modo a evitar que as coisas fiquem muito desordenado e confuso no painel de camadas,

    fechar o grupo de camadas, clicando novamente no tringulo esquerda do nome do grupo:

    19: Repita os passos 14-18 para adicionar os painis adicionais

    Neste ponto para adicionar o restantes dos painis apenas uma questo de repetir os

    mesmos passos.

  • 1/9/2014 Imprimir

    about:blank 15/68

    Uma cpia do grupo aparecer diretamente acima dele. Aqui a nova cpia chamado Painel

    copiar 2, Como voc adicionar mais painis, os grupos de camadas sero nomeados Painel

    copiar 3, Painel de copiar 4, e assim por diante:

    Pressione Ctrl + colchete esquerdo ([) do seu teclado para mover o novo grupo abaixo dos

    outros grupos de camadas:

    Abra o grupo de camada clicando no cone de tringulo esquerda de seu nome, em seguida

  • 1/9/2014 Imprimir

    about:blank 16/68

    selecione a forma de camada Retngulo 1 dentro do grupo:

    Pressione Ctrl + T do seu teclado para abrir a caixa transformao livre, arraste as alas em

    torno do painel para esquer ou para a direita, colocando o novo painel acima ou abaixo

    do interior, clique fora do painel e arraste com o mouse para gir-lo pressione Enter para

    confirma as alteraes.

    Por fim clique no cone de tringulo para fechar o grupo de camadas. Voc no

    necessariamente tem que fechar os grupos de camadas cada vez, mas muito mais fcil

    trabalhar no interior do painel de camadas com os grupos fechados:

  • 1/9/2014 Imprimir

    about:blank 17/68

    Repita os mesmos passos para adicionar os restantes do painis no documento. E Aqui o meu

    resultado final.

  • 1/9/2014 Imprimir

    about:blank 18/68

    Como baixar o Adobe Photoshop gratuitamente.Posted: 29 Aug 2014 10:54 AM PDTVeja como fazer o download gratuito do Adobe Photoshop de forma legal e diretamente dos servidores da Adobe comnmero de srie vlido.

    Visite o site e faa login com seu Adobe ID: http://ads.tt/1AYKL

    Veja no TP

    Conhea o nosso parceiro Dollar Photo Club: http://br.dollarphotoclub.com/ - O primeiro banco de imagens evetores que cobra US$ 1,00 por imagem.

    Visite tambm:Tutoriais Photoshop no YouTube: http://www.youtube.com/tutpsoficialTwitter: http://www.twitter.com/Andre_SugaiFacebook: http://www.facebook.com/tutoriaisphotoshop

    51 plugins de Photoshop para Webdesigners.Posted: 29 Aug 2014 12:58 PM PDTPlugins do novas funcionalidades para o Photoshop e so uma mo na roda para quem trabalha com web, por issoselecionamos 51 timos plugins para quem usa o Photoshop para criar sites ou trabalhos de design mobile. Se esquecemosde algum plugin avise pra gente usando nosso comentrio :)

  • 1/9/2014 Imprimir

    about:blank 19/68

    Social Kit

    Um plugin de Photoshop que faz todo o trabalho de redimensionar e criar imagens (de capa, post, perfil etc) paraFacebook, Google e Twitter.

    BlendMe

  • 1/9/2014 Imprimir

    about:blank 20/68

    BlendMe um plugin para o Photoshop e Illustrator que procura milhares cones em vetor para voc.

    Layrs

  • 1/9/2014 Imprimir

    about:blank 21/68

    Um plugin que rene diversos scripts para facilitar a vida de quem trabalha com Photoshop.

    Cut & Slice me

  • 1/9/2014 Imprimir

    about:blank 22/68

    Ideal para voc exportar seu layout para diferentes tipos de dispositivos de maneira automatizada.

    CSS3Ps

  • 1/9/2014 Imprimir

    about:blank 23/68

    Este um plugin que funciona nas nuvens e transforma as layers em estilos CSS3.

    Render.ly

  • 1/9/2014 Imprimir

    about:blank 24/68

    Plugin que otimiza o trabalho de webdesigners economizando tempo na construo de layouts.

    GuideGuide

  • 1/9/2014 Imprimir

    about:blank 25/68

    Plugin que ajuda na construo de guias para criao de websites.

    Composer

  • 1/9/2014 Imprimir

    about:blank 26/68

    Atualiza vrios camadas no Photoshop com apenas um clique.

    Web Font Plugin

  • 1/9/2014 Imprimir

    about:blank 27/68

    Utiliza Web Fonts dentro dos layouts criados.

    FLATICON

  • 1/9/2014 Imprimir

    about:blank 28/68

    O Plugin FlatIcon encontra rapidamente os cones que voc precisa para seu projeto, sem sair do seu ambiente detrabalho.

    Breeezy

  • 1/9/2014 Imprimir

    about:blank 29/68

    O Breeezy adiciona a funcionalidade de exportao de mltiplas camadas de Photoshop em um clique.

    Save Panel

  • 1/9/2014 Imprimir

    about:blank 30/68

    Salvar Panel um plugin de Photoshop que otimiza o arquivo.

    Divine Elemente

  • 1/9/2014 Imprimir

    about:blank 31/68

    Ele cria uma ponte entre o Photoshop e o WordPress (PSD para WordPress).

    Skeuomorphism.it

  • 1/9/2014 Imprimir

    about:blank 32/68

    Crie designs Flat com rapidez utilizando este plugin.

    SuperPNG

  • 1/9/2014 Imprimir

    about:blank 33/68

    Um plugin que oferece um controle mais rigoroso sobre o formato .PNG.

    AtlasCss

  • 1/9/2014 Imprimir

    about:blank 34/68

    AtlasCSS permite gerar um cdigo CSS coordenados por meio de script.

    Icon Plugin

  • 1/9/2014 Imprimir

    about:blank 35/68

    Plugin dedicado a criao e exportao de Favicons.

    Tych Panel 2

  • 1/9/2014 Imprimir

    about:blank 36/68

    Plugin para criao de colagem de fotos.

    Layer Guides Photoshop Extension

  • 1/9/2014 Imprimir

    about:blank 37/68

    Plugin para ajudar na aplicao de linhas guia.

    Bounce

  • 1/9/2014 Imprimir

    about:blank 38/68

    Este plugin interliga a rede social Dribbble com o Photoshop e ajuda o usurio a encontrar elementos para trabalhos.

    2xScaler

  • 1/9/2014 Imprimir

    about:blank 39/68

    Uma extenso de photoshop para designers de aplicativos.

    Fonts.com Extension

  • 1/9/2014 Imprimir

    about:blank 40/68

    Plugin para selecionar e adicionar rapidamente fontes para seus projetos.

    Long Shadow Generator

  • 1/9/2014 Imprimir

    about:blank 41/68

    A extenso PS para criar long shadows com um clique!

    Perfect Effects 8

  • 1/9/2014 Imprimir

    about:blank 42/68

    Plugin para efeitos visuais.

    virtualPhotographer

  • 1/9/2014 Imprimir

    about:blank 43/68

    Plugin que promete efeitos instantneos em suas fotos.

    Wire Worm

  • 1/9/2014 Imprimir

    about:blank 44/68

    Este pequeno plugin ir ajud-lo a remover os fios e outros objetos indesejados de suas imagens.

    Mr. Stacks

  • 1/9/2014 Imprimir

    about:blank 45/68

    Mr. Stacks um script do Photoshop que gera rapidamente storyboards, pilhas e PDF's

    Pano Warp

  • 1/9/2014 Imprimir

    about:blank 46/68

    Plugin para criao de imagens panormicas.

    NKS5 Natural Media Toolkit

  • 1/9/2014 Imprimir

    about:blank 47/68

    Plugin que oferece uma srie de texturas e ferramentas para melhorar a produo de contedo no Photoshop.

    Sinedots II

  • 1/9/2014 Imprimir

    about:blank 48/68

    Um plugin dedicado a criao de forma sinoidais como a da imagem que ilustra o post.

    Plugins de Photoshop pagos

    Subtle Patterns Photoshop Plugin

  • 1/9/2014 Imprimir

    about:blank 49/68

    Uma biblioteca de patterns diretamente em um painel do Photoshop para uso em trabalhos.

    WebZap

  • 1/9/2014 Imprimir

    about:blank 50/68

    WebZap um plugin que fornece Photoshop ferramentas e funcionalidades adicionais para ajudar os desenvolvedoresweb com o seu fluxo de trabalho de projetos em interfaces.

    Coolorus

  • 1/9/2014 Imprimir

    about:blank 51/68

    Um Panel Color Wheel para os produtos Adobe (Photoshop e Flash) e todos os aplicativos para Mac nativos que usam oApple Color Picker.

    CSS Hat

  • 1/9/2014 Imprimir

    about:blank 52/68

    Plugin que transforma instantaneamente estilos de camada para CSS3!

    PNG Hat

  • 1/9/2014 Imprimir

    about:blank 53/68

    Plugin que exporta as imagens em .PNG diretamente para servidores e j monta o layout em uma pgina HTML.

    specKing

  • 1/9/2014 Imprimir

    about:blank 54/68

    Plugin que fornece ferramentas para gerar especificaes de design e anotaes.

    Pixel Dropr

  • 1/9/2014 Imprimir

    about:blank 55/68

    Criar e compartilhar suas prprias colees do site Pixel Dropr dentro Photoshop.

    Zeick

  • 1/9/2014 Imprimir

    about:blank 56/68

    Plugin que permite a exportao de camadas em forma de vetor para arquivos SVG.

    Renamy

  • 1/9/2014 Imprimir

    about:blank 57/68

    Plugin para renomear mltiplas camadas no Photoshop

    Specctr

  • 1/9/2014 Imprimir

    about:blank 58/68

    Crie anotaes e medidas no Adobe Photoshop, Illustrator, InDesign e Fireworks.

    DevRocket

  • 1/9/2014 Imprimir

    about:blank 59/68

    Plugin para desenvolvedores iOS.

    Filter Forge

    Filtrar Forge um plugin de Photoshop verstil que permite que usurios novatos e experientes criem uma grandevariedade de texturas, efeitos realistas e abstratos.

    Refill Readr

  • 1/9/2014 Imprimir

    about:blank 60/68

    Permite que voc carregue qualquer arquivo feito com o Pixel Dropr diretamente no Photoshop.

    SiteGrinder

  • 1/9/2014 Imprimir

    about:blank 61/68

    Converte camadas de texto simples em menus amigveis a buscadores.

    Perfect Resize 8

  • 1/9/2014 Imprimir

    about:blank 62/68

    Plugin dedicado a redimensionamento de imagens sem perda de qualidade.

    Suitcase Fusion

  • 1/9/2014 Imprimir

    about:blank 63/68

    Gerenciador de fontes para o Photoshop.

    Dream Suite Ultimate

  • 1/9/2014 Imprimir

    about:blank 64/68

    Plugin para efeitos de fotos.

    Fractalius

  • 1/9/2014 Imprimir

    about:blank 65/68

    Plugin para efeitos criativos em foto.

    MACHINE WASH DELUXE

  • 1/9/2014 Imprimir

    about:blank 66/68

    Plugin para criao de efeitos vintage.

    Blow Up 3

  • 1/9/2014 Imprimir

    about:blank 67/68

    Aumente fotos sem perda de qualidade.

    Perspective Mockups

  • 1/9/2014 Imprimir

    about:blank 68/68

    Plugin para apresentao de mockups em perspectiva.

    You are subscribed to email updates from ::Tutoriais Photoshop:: To stop receiving these emails, you may unsubscribe now.

    Email delivery powered by Google

    Google Inc., 20 West Kinzie, Chicago IL USA 60610