Novo no blog? Clique aqui.

Banner Lovely Megan - Intermediário (Photoshop)

terça-feira, 27 de dezembro de 2011
Resultado:

Tutorial - Pedido
Preciso confessar que fiquei feliz ao entrar e ver seis comentários. Alguns não aceitei por se tratarem de contato e etc, mas os outros, com certeza. Preparei esse tutorial o mais rápido que pude e espero que esteja fácil para todos. Mesmo se tratando de nível intermediário, creio que com os passos mais aprofundados, isso não será um problema. E então, vamos começar? Abra seu Photoshop!

O1. Primeiramente, você deverá criar um documento. Para isso, vá em File >> New (Arquivo >> Novo). As dimensões devem ser 740x1250. 



O2. Logo, vá em File >> New novamente e abra sua primeira foto (no caso do banner, a preta e branca) e a textura que veio no pacote. Em relação à textura, clique e arraste-a para o documento. Como ela é do mesmo tamanho, vai ficar certinho.
O3. Na sua primeira foto, você deverá selecionar a opção Polygonal Lasso Tool (atalho do teclado: L). Inicialmente, ela aparecerá com outra forma. Para modificá-la, você deve clicar no ícone da mesma e segurar até que apareça uma mini guia. Ali, selecione Polygonal Lasso Tool.


Com esta ferramenta, vá até sua foto e, no fim do braço da Megan, dê um clique e, mais acima, dê outro clique. Você perceberá que acaba de aparecer uma linha. Essa linha modelará apenas as partes que você desejar. Selecione o corpo dela de modo que haja um espaço de pelo menos três centímetros para que apareça um pouco do fundo branco. Veja:

Agora pressione a tecla 'V' do seu teclado e clique em cima da foto, arrastando-a para a aba do documento. É muito simples. Você precisará apenas clicar em cima dela, segurar e puxar para a primeira aba. É possível visualizar a mesma no print acima. Quando sua foto aparecer no seu documento, você perceberá que ela está muito maior que o necessário. Pressione Ctrl + Shift + T para redimensioná-la e ajuste-a no centro do documento.
O4. Agora, vá em File >> Open (Arquivo >> Abrir) e abra a nuvem que veio no pacote. Ela é um PNG (saiba mais sobre PNGs clicando aqui). No documento, coloque essa nuvem (clicando e arrastando assim como fez com a foto) abaixo da sua foto principal. O objetivo desse PNG é cobrir a parte debaixo da sua foto. Se não bastar, você pode optar por pressionar Ctrl + J e ir arrastando para os lados e para cima, para que cubra uma parte maior.
O5. Abra sua segunda foto e clique na mesma, arrastando-a para o seu documento. Note que ela ficou em cima de todas, certo? Você deverá clicar em cima da camada dela e arrastá-la para baixo da camada da foto principal.

O7. Com o Ctrl + T + Shift, redimensione-a. É claro que a borda da foto ficará muito evidente e você precisará apagá-la. Para isso, pressione 'E' para ativar a borracha. Na paleta que surgir, escolha a de cerdas esfumaçadas (cerdas macias)

Com esta ferramenta, clique e vá apagando as bordas da sua foto. Não se preocupe em apagar bem rente, pois o efeito esfumaçado combina bem com esse tipo de coisa.
O8. Quando já tiver apagado as bordas da sua foto, pressione Ctrl + J (para duplicar a imagem) e clique duas vezes em cima da camada dessa cópia. De modo mais claro, a área das camadas aparecerá sempre, independente dos demais efeitos. Caso para você não apareça, pressione F7. Essa área foi mostrada no passo O5. Cada opção ali é uma camada, ou seja, você clicará na primeira, a do topo, que é uma cópia da segunda.
O9. Note que aparecerá uma janelinha cujo nome é Layer Style (Estilo de Camada). Dentre as inúmeras opções, a primeira é Channels (Canais) com uma lista. Você escolherá a opção Multiply (Multiplicação). Dê Ok.
- Esse passo foi feito na camada da CÓPIA, ou seja, a primeira. Agora, clique duas vezes em cima da segunda (no mesmo local da área das camadas, a segunda é a original, e ficou logo abaixo).
Nessa, em Channels, coloque a opção Overlay (Sobrepor) e em Opacity (Opacidade), deixe em 40%.
1O. Abra sua segunda foto e arraste a camada dela para baixo de todas, assim como fez com a foto anterior. Apague seus contornos e repita os processos acima, colocando-a do lado direito. Se tiver dúvidas, veja no resultado.
11. Agora, abra uma foto qualquer e pressione 'M' para ativar a ferramenta de seleção quadrada. Note que seu mouse agora parece com uma cruz, certo? Nessa foto que você acabou de abrir, façaum quadrado em apenas uma parte da foto. Opte por apenas olhos, apenas boca, apenas nariz e outras partes que desejar. Quando estiver satisfeito, pressione 'V' e arraste seu quadrado para cima do seu documento, colocando-o em qualquer parte abaixo da nuvem das fotos principais.
12. Repita esse processo com todas as outras fotos.
13. Carregue os Styles das sombras (para saber mais o que são Styles, clique aqui, e para saber como carregá-los, clique aqui) e escolha o Style que mais lhe agrada.
14. Abra o PNG "Mão do Rock" e cole-o no banner, ajustando-o em um local de sua preferência próximo à nuvem.
15. Abra o PSD de fontes. Note que ele possue algumas camadas. Selecione a ferramenta de texto (atalho do teclado: T) e clique na primeira camada. No PSD, dê um clique e apague tudo, escrevendo o que quiser. Note que em uma parte dele, apareceu o que você escreveu. Clique na segunda camada e repita o processo. Quando tiver feito isso com todas as camadas, pressione Ctrl + Shift + E e arraste para o seu documento, colocando-o no meio da nuvem. Caso queira ajustá-lo, pressione Ctrl + T + Shift.


Então, é isso, pessoal. Fiz o tutorial respondendo um pedido de comentário, ainda que ele não seja tão fácil para quem não possui uma introdução no Photoshop. De qualquer modo, o tutorial está aberto a dúvidas e qualquer uma será respondida e postada, para que os outros também possam compreendê-la.


Mapa do Blog

domingo, 25 de dezembro de 2011
Novo por aqui? Está perdido? Não se preocupe, este post te indicará exatamente onde estão as coisas de que precisa.

Iniciantes
Você que acaba de mergulhar no ramo do design e edição pode optar por dar uma olhada na guia 'Saiba Mais', em vermelho aí em cima. Escolha o programa que você usa e clique para entender mais as ferramentas dele. Caso não possua nenhum, eu aconselho o Adobe Photoshop CS5,1 e o Photofiltre Studio X. Caso você possua, você pode ir na guia Downloads e, em seguida, em 'Programas' para baixar.
Se já tiver feito isso, dê uma olhada em 'Usar, Criar e Carregar' para ter noções básicas e em Categorias para ver os exemplos e alguns termos de designers.
Você também pode ir em Tutoriais e escolher uma das duas opções, lembrando que Efeitos Básicos são apenas relacionados a fotos, e Tutoriais Completos devem-se à criação e preparação de banners e outros tipos de designs. 

Para você que já sabe algumas coisas do Photoshop e quer se especializar
Em 'Downloads >> Separados OU Pacotes Completos' você pode baixar conteúdos exclusivos do blog para incrementar suas edições, e em Tutoriais, você também pode entender mais certos efeitos, dicas e cortes.

Efeito 3D (Photoshop)

sexta-feira, 23 de dezembro de 2011
Efeito 3D
Neste tutorial você saberá como criar o efeito seguinte, muito útil para banners e outros tipos de montagens.


Resultado

O1. Abra uma foto e duplique-a (Ctrl + J)
O2. Clique duas vezes em cima da camada dessa cópia para abrir a Layer Style (Estilo de Camada).
O3. Note que há inúmeras opções. Você deverá modificar Channels (Canais). Existem três caixinhas de diálogo assinaladas: uma para R, uma para G e uma para B. Desmarque a caixinha de R e dê Ok.
O4. Clique na sua foto e arraste-a um pouquinho para o lado.
O5. Salve em File >> Save for Web and Devices (Arquivo >> Salvar para Web e Dispositivos).

Aplicando Brushes

Aplicando Brushes
Brushes seguem o mesmo conceito de PNGs. A diferença é que os PNGs já vem como adesivos, com suas cores e contornos. Os brushes são selecionados na paleta de cores e modificados quantas vezes você achar melhor. Veja abaixo como utilizar um brushe. Tutorial e resultado por Effie.





O brush está em vermelho

1. Abra o documento em que você irá aplicar seu Brushe (Foto, Texto, Banner..)
2. Localize a ferramenta Pincel (Atalho B) na barra de ferramentas, e clique. (Print 01)
3. Clique em cima do desenho do Brushe. Uma janela irá se abrir. (Print 02) Lá, estarão todos os seus brushes. Se você ainda não tiver nenhum brushe, clique naquela "pequena seta", vá em "Load Brushes (Carregar Pincéis) e escolha seus brushes (Formato .abr) (Print 03)
4. Agora, escolha um Brush de sua preferência. Apenas clique na miniatura. Se precisar, o diminua aonde está apontado com uma seta (Print 04). Mude a cor, na paleta de cores (Print 05).
5. Depois de escolher o brushe, o tamanho e a cor, hora de aplicar! Escolha um lugar de sua preferência e clique com a ferramenta do Brush. Pronto! (Print 06).
Para obter o resultado final, apliquei o brush na cor branca, e por cima a cor vermelha.

Aplicando Bases

Aplicando Bases
Neste tutorial você saberá como usar e carregar Bases no Photoshop, além de desenvolver seus conceitos em relação à mesma.


Primeiramente, o que são bases?
São contornos para suas fotos. Em uma pasta com materiais, as bases vem totalmente pretas, pois isso deve-se ao padrão de fundo.

Inserir uma foto em uma base é bem simples. Você deverá abrir a foto e, em seguida, a base (que vem em formato PNG ou JPG, de foto). Clicar na foto e arrastá-la para cima da base. Na aba das camadas, você clicará com o botão direito na camada da FOTO e irá em Create Clipping Mask (Criar Máscara de Corte). Você verá que a foto acaba de aparecer dentro da base. Com o Ctrl + T + Shift, você pode redimensionar a foto e ajustá-la como quiser. Quando estiver satisfeito, pressione Ctrl + Shift + E.

Exemplos de Bases



Conceito de Camadas

Camadas
Neste tutorial você saberá como usar, carregar e fazer Layers (Camadas) no Photoshop, além de saber o que são exatamente.


Camadas correspondem a cada passo dado no Ps. Por exemplo, uma foto é uma camada. Uma textura é uma camada. Um PNG também é uma camada, e assim por diante. Ou seja: criam-se independente de seus comandos. É claro que você pode (e em certas ocasiões, deve) duplicar a camada (criar uma cópia).

Quando você abre uma foto e arrasta uma textura para cima dela, a foto é a primeira camada e, a textura, a segunda.
Quando você cria um novo documento, arrasta a foto para cima dele e a textura, o documento é a primeira camada, a foto, a segunda e a textura, a terceira.

Tudo isso pode ser visualizado na aba das camadas, que geralmente aparece automaticamente. Caso no seu Photoshop ela esteja oculta, pressione F7.
Caso você crie um documento e arraste a foto e a textura sem querer que fique nessa ordem (foto embaixo, textura em cima ou vice-versa), você não precisa apagar ambas para colocá-las em cima ou embaixo. Na aba das texturas, basta clicar com o botão esquerdo na que você quer alterar e arrastá-la para cima ou para baixo.


Aplicando Texturas

Aplicando Texturas
Neste post, você saberá melhor como criar, carregar e usar as texturas. Para saber mais o que elas são, clique aqui.


Como Aplicar
Como se sabe, texturas vem em formato de fotos. Ou seja, para abri-las, você abrirá como qualquer outra foto. Em File >> Open (Arquivo >> Abrir).
Como as fotos, as texturas aparecem em forma de novas janelas, ou de novas abas. Aplicá-las é fácil. Você deverá clicar com o botão esquerdo em cima da sua textura e arrastá-la para onde quer colocar, seja em um documento ou em uma foto.

Pelo fato da textura ser uma foto, ela pode ser mesclada da mesma forma.

Para abrir o Layer Style (Estilo de Camada em português, onde você define os efeitos básicos) da sua foto, você deverá selecionar a aba das camadas e clicar duas vezes em cima da camada da foto.

E o Blend Mode é a primeira opção dessa janela. Ele possui diversas mudanças de efeito que mais parecem skins (peles). Quer exemplos?

Foto original

Textura utilizada

Agora, veja as seguintes mudanças:

Blend Mode (Modo de Mesclagem) = Multiply (Multiplicação)
Opacity (Opacidade) = 50% 

Blend Mode = Color Burn (Superexposição de Cores)
Opacity = 80%

Blend Mode = Darken (Escurecer)
Opacity = 100%

Como você pode observar, existem inúmeros efeitos para apenas uma foto e uma textura. É claro que muitos não combinam, e para isso é necessário pensar na foto e na textura de modo que pelo menos uma parcela da gama de cores seja compatível, para não ficar muito forçado ou falso.
Você pode também deixar o Blend Mode normal e apenas alterar a opacidade. Assim, ele se fundirá com a foto presente logo abaixo. 
Logo, uma textura pode ser qualquer tipo de plano de fundo, wallpaper, background etc. Ela é útil principalmente na produção de banners, plaquinhas e outros, pois serve como a 'base' para onde suas informações ficarão.

Confira abaixo as opções do Blend Mode em inglês e português (as definições não são importantes de fato, porque na hora de utilizar alguma delas, você escolherá a que mais se adapta, não pelo que a mesma faz).

Nome em Inglês - Nome em Português

Normal - Normal
Dissolve - Dissolver
Darken - Escurecer
Multiply - Multiplicação
Color Burn - Superexposição de Cores
Linear Burn - Superexposição Linear
Lighten - Clarear
Screen - Divisão
Color Dodge - Subexposição de Cores
Linear Dodge - Subexposição Linear
Overlay - Sobrepor
Soft Light - Luz Suave
Hard Light - Luz Direta
Vivid Light - Luz Brilhante
Linear Light - Luz Linear
Pin Light - Luz do Pino
Difference - Diferença
Exclusion - Exclusão
Hue - Matriz
Saturation - Saturação
Color - Cor
Luminosity - Luminosidade


Aplicando Styles

quinta-feira, 22 de dezembro de 2011
Aplicando Styles
Neste tutorial você saberá como usar, carregar e fazer Styles (Estilos) no Photoshop. Para saber mais o que são Styles, clique aqui.


Como Aplicar
Ao contrário da aba das Actions, não é necessário qualquer comando para fazer surgir a aba dos Styles. Seu símbolo é um 'fx' que fica localizado diagonalmente no canto direito.


Perceba que existem opções nessa janela. Você pode optar por escrever qualquer coisa na sua foto (atalho da ferramenta de texto: T) e selecionar uma dessas opções para ver como ficam.

Como Carregar (usar um já baixado)
Nesta mesma aba, você deverá clicar no ícone de opções.


Selecione a opção 'Load Styles' (Carregar Estilos) e procure a pasta na qual você baixou o seu Style.

Como Criar Styles
Por ser uma etapa complexa, optarei por criar uma futura video aula ensinando a criar os mesmos. Por hora, nos tutoriais, haverão os Styles utilizados para que você não precise criar, fora os que serão doados no blog.

Efeitos Radial e Mosaico (Photoshop)

Radial

O1. Abra sua foto e clique duas vezes em cima da camada dela.
O2. Pressione Ctrl + J.
O3. Vá em Filter >> Blur >> Radial Blur (Filtro >> Desfoque >> Desfoque Radial) e dê enter.
O4. Com a ferramenta borracha (atalho: E), vá apagando na foto somente a parte que você não quer que fique com o efeito.
O5. Vá em File >> Sabe for Web and Devices (Arquivo >> Salvar para Web e Dispositivos) e selecione a opção JPG.


Mosaico



O1. Abra sua foto e clique duas vezes em cima da camada dela.
O2. Pressione Ctrl + J.
O3. Vá em Filter >> Pixelate >> Mosaic (Filtro >> Pixelização >> Mosaico) e coloque como preferir, mudando na escala. Dê enter.
O4. Com a ferramenta borracha (atalho: E), vá apagando na foto somente a parte que você não quer que fique com o efeito.
 O5. Vá em File >> Sabe for Web and Devices (Arquivo >> Salvar para Web e Dispositivos) e selecione a opção JPG.

Aplicando Actions

Aplicando Actions
Neste tutorial ensinarei a como utilizar actions, assim como criá-las ou carregá-las (utilizar as baixadas). Para saber mais o que são actions, clique aqui.


Como Aplicar
Ao abrir o Photoshop, pressione Alt + F9. Você perceberá que acaba de surgir um ícone semelhante a um player no canto direito. Esta é a aba das actions.



Observe que, onde há uma 'pastinha' significa um novo conjunto, e o play embaixo, a action. Mas não se preocupe, não aparecerá para você por enquanto. Explicarei o motivo ainda neste post. Por hora, escolha qualquer uma das opções da lista e clique no play que fica no rodapé da janelinha. Você perceberá que sua foto acaba de sofrer alterações de acordo com o que você escolheu. Se clicar na setinha ao lado da sua opção, vai ver um monte de palavras embaixo com mais setinhas. Isso é para te explicar todos os efeitos que a action possui.

Como Carregar (usar uma baixada)

Nesta mesma janelinha apresentada no print acima, note que há um ícone de setinha para baixo com uma lista ao lado.



Você deverá escolher a opção Load Actions (em português, Carregar Ações). Então, abrirá uma janela que você já conhece: a de procurar os seus arquivos. Vá até a pasta na qual você baixou a action e clique duas vezes sobre a mesma.

Como Criar

Seguindo o mesmo princípio acima, você também clicará no ícone do print. Porém, dessa vez escolherá outra opção. Clique em New Set (como as traduções desse comando variam de acordo com as versões do PS, em português podem aparecer da seguinte forma: Nova Pasta, Novo Conjunto ou Nova Sequência).
Você perceberá que acaba de surgir uma pastinha. Logo, retorne ao ícone onde você a criou e, dessa vez, clique em New Action (Nova Ação).
Na nova janela que aparecerá, você poderá escolher o nome que quiser para sua action, e em seguida pressione Enter.
Note que um botão semelhante a Stop (a bolinha vermelha abaixo) está em destaque. Isso quer dizer que você agora poderá fazer qualquer coisa com a sua foto e suas ações ficarão registradas ali. Quando acabar, clique no quadrado ao lado da bolinha (lado esquerdo) e vá novamente no ícone anterior, o da setinha com a lista ao lado, clicando em Save Actions (Salvar Ações). Coloque um nome do qual possa se lembrar e pronto, sua primeira action foi criada.



Explicando New Set e New Action

Por que é necessário criar os dois?
- Porque a opção New Set, como o próprio ícone mostra, cria uma pasta. Ou seja, você pode criar inúmeras actions que ficarão guardadas dentro dessa pasta. New Action cria apenas uma ação.


Nota Importante

Quando for salvar uma action já criada, certifique-se de que você está colocando assim:

nome da action.atn

É obrigatório que o formato da sua action seja em ATN, ou não funcionará. Os Photoshops mais recentes já colocam a action nesse formato, mas como muitas pessoas ainda utilizam o CS2, 3 e etc, pode ser que ele não registre.

Efeito Motion Blur - Desfoque de Movimento (Photoshop)

Resultado:


O1. Abra sua foto e vá em Window >> Layers (Janela >> Camadas). Fica lá em cima, onde está File, Edit etc. Perceba que surgiu a janelinha das camadas. Na maioria das vezes, ela aparece assim que você abre uma foto. Clique duas vezes em cima da camada e dê enter. Logo, clique com o botão direito na mesma e duplique-a. (atalho do teclado: Ctrl + J).

Clique na imagem para ampliá-la.

O2. Vá em Filter >> Blur >> Motion Blur (Filtro >> Desfoque >> Desfoque de Movimento). Também fica lá em cima, ao lado de Select. Observe que surgiu uma janela. Em 100%, você pode clicar no sinal de adição (+) ou de subtração (-) para ver sua foto inteira. Em ângulo, deixe como está e, em distância, fica à seu critério. Quando maior a distância, mais desfoque (meu padrão de escala é 130).

Clique na imagem para ampliá-la.

O3. Dê OK e, em seguida, selecione a ferramenta borracha (atalho do teclado: E). Escolha a ferramenta 'borracha esfumaçada' e em 'Size' (tamanho), escolha o que mais se adequar. Na sua foto, vá apagando apenas a parte que você não quer deixar com o efeito.


O4. Vá em File >> Save for Web and Devices (Arquivo >> Salvar para Web e Dispositivos) e salve em modo JPG.

PNGs

quarta-feira, 21 de dezembro de 2011


Como quase todos que conheço e usam Photoshop vem me perguntar o que são, esse post é pra tentar explicar melhor... PNGs ou ícones são 'adesivos' das mais diversas e variadas fotos. Alguns complementam um banner inteiro, outros são pequenos e servem como detalhes. Frames são PNGs, mas uma forma mais específica deles. Quero dizer, frames são molduras de fotos, como essa:


Frames também podem ser chamados de polaroids, caso vejam em algum site ou comunidade.
Veja uns exemplos de PNGs:








Os PNGs podem ser editados junto com as fotos, pois eles se tornam uma camada. Podem sofrer modificações por actions, styles, patterns e tudo o mais e dificilmente perdem sua qualidade. Bem, é isso, qualquer dúvida, postem. Estarei disponibilizando inúmeros PNGs com o passar do tempo. (:

Banner Tutoriais 4U - Expert (Photoshop)

sexta-feira, 16 de dezembro de 2011
Resultado:



Tutorial no Adobe Photoshop (somente em versão CS4 ou CS5) 

P.S.: Como na demonstração foi utilizada a action bege, o tutorial está utilizando a action roxa, apenas para mostrar os 
dois resultados. (A única coisa que muda é a ACTION. Os demais procedimentos são iguais)
 
O1 – Crie um documento com as dimensões 740x1200.
O2 – Pegue a textura 1 e arraste para o banner, ajustando-a como quiser.
O3 – Abra sua primeira foto e selecione a ferramenta varinha mágica (atalho do teclado: W). Com esta, selecione apenas o corpo principal. Não aplique a action e selecione depois, porque a action é escura e será difícil visualizar os contornos.



Clique na imagem para ampliá-la.


O4 – Aplique a action que desejar (bege ou roxa) e arraste sua área selecionada para cima do banner.
O5 – Na foto que ficará embaixo repita o procedimento acima e duplique-a e arraste-a para o lado e mude sua opacidade, para criar um efeito 3D. (Siga o passo-a-passo escrito nas imagens)






O6 – Nas outras fotos, vá fazendo os mesmos passos do n° 1 ao n° 4. Se preferir, mude a opacidade de algumas 
fotos para criar um efeito mais interessante.
O7 – Abra o frame que veio no pacote e ajuste onde quiser. Duplique duas vezes para ficar com 3 frames, mas lembre-se, dois são menores que o principal (Ctrl + T + Shift para redimencionar). 


O8 – Abra uma foto qualquer e aplique a action anterior. Arraste a foto para o banner e coloque-a abaixo do frame 
escolhido, como no print.
O9 – Faça isso com a segunda foto e coloque-a no frame pequeno que ficou em cima do maior.
1O – Pegue a segunda textura e insira no banner, em cima de tudo, e mude o modo de mesclagem para Multiplicado (multiply).
11 – Insira sua foto principal (ou gif) banner. 
12 – Escreva com um dos styles do pacote. Eu usei a fonte Pharmacy.

13 – Salve para Web e Dispositivos com as definições seguintes.


Opcional: Você pode optar por colocar a textura 2 no fim de tudo (mas antes de escrever), para que o gif também fique incluído (como no exemplo da action roxa) ou colocar apenas no resto, sem o gif e a escrita (exemplo da action bege).