Escolar Documentos
Profissional Documentos
Cultura Documentos
photoshopWEB Truquesmagicos PDF
photoshopWEB Truquesmagicos PDF
ÍNDICE
ÍNDICE .......................................................................................................................................... 3
INTRODUÇÃO .............................................................................................................................. 4
A série............................................................................................................. 4
01 – PIXEL BENDER .................................................................................................................... 5
02 – BARRA DE NAVEGAÇÃO COM BRILHO........................................................................... 7
03 – MENU CARTOON ............................................................................................................... 10
04 – CRIANDO UM ORB ............................................................................................................ 22
05 – POST IT............................................................................................................................... 28
06 – PAINEL DE NAVEGAÇÃO ................................................................................................. 34
07 – BOTÕES EM GRANITO ..................................................................................................... 42
08 – TEXTO 3D ........................................................................................................................... 51
9 – TEXTO APPLE ..................................................................................................................... 58
10 – NIGHTVISION ..................................................................................................................... 63
CONCLUSÃO ............................................................................................................................. 67
3
INTRODUÇÃO
Atualmente é muito comum encontrar material que ensine a utilizar um software
em seu computador, basta apenas dedicação e você passa a conhecer sua
interface, seus botões e menus.
Alguns materiais como os do Apostilando.com “casam” a explicação com
exemplos reais. Mas para quem está começando muitas vezes isso é
insuficiente.
Então nós do Apostilando.com, criamos uma série chamada TRUQUES
MÁGICOS. A composição da série será de apostilas para você que já baixou
nossas apostilas e precisa exercitar a criatividade.
Cada material da série trará dentro de um determinado software dicas e
exemplos de uso do software, reforçando assim seu aprendizado sobre ele e
despertando sua criatividade. Obrigado e tenha um bom curso.
A série
A série em sua primeira edição abordará exemplos para os seguintes
softwares:
Adobe Photoshop;
Adobe Flash
Adobe Dreamweaver
PHP
Microsoft Word
Microsoft Excel
Adobe Photoshop WEB
Corel Draw
HTML & CSS
Javascript
Fireworks
Excel Avançado
4
01 – PIXEL BENDER
A adobe possui um recurso bem interessante de laboratório de aplicações e
plug-ins. Um dos recursos mais interessantes que ela lançou foi o Pixel Bender
para o Photoshop.
Para nosso exemplo, primeiro baixe o plug-in no seguinte endereço:
http://labs.adobe.com/technologies/pixelbenderplugin/.
5
Na direita você pode escolher o tipo de filtro e dependendo do filtro escolhido,
você poderá aplciar configurações a este filtro.
Você pode aplicar efeitos como Oilpaint e fazer com sua imagem fique como
uma pintura à óleo.
6
Teste as outras opções de filtros e veja os resultados interesantes que podem
ser aplicados com esta ferramenta.
Crie uma nova layer, faça uma seleção retangular e preencha com a cor
hexadecimal #52A1C4.
7
Clique no menu Layer, Layer Style, Gradient Overlay e adicione as seguintes
configurações.
Crie uma nova layer. Reduza a sua seleção em 1 px (menu Select, Modify,
Contract.
8
Clique na ferramenta gradiente na barra de ferramentas e preenha com a
opção Foreground to Transparence (primeiro deixe a sua cor de forreground
como branco).
Trace de cima para baixo até a metade, depois trace de baixo para cima
aproximadamente ¼.
9
03 – MENU CARTOON
Inicie um novo documento.
Preencha o fundo com o seguinte gradiente #61b3d9 to #2678bc.
10
11
Crie um novo arquivo de 50x50 e com a ferramenta de linha trace a sua
diagonal.
12
Dê um nome e clique em OK.
Volte a sua imagem preenchida com o gradiente, crie uma nova layer e
preencha-a com o padrão que acabou de criar.
13
Crie uma nova camada e desenhe e faça uma seleção de 200x120 pixels.
Preencha-a com a cor #edab0d ou outra de sua preferência.
14
Selecione esta layer e crie uma nova Preencha com um gradiente radial de
preto para branco.
15
Em uma nova layer clique no menu Edit Stroke. Defina cor branca e 10 pixels.
16
Digite um texto para ser o cabeçalho de seu menu.
Aplique um Estilo de camada de Dorp Shadow com modo Normal, e 1px de
distância.
17
Crie uma pasta de camada e adicione todos os elementos do topo dentro desta
pasta. Depois crie outra pasta chamada corpo.
18
Dentro do grupo corpo crie uma nova camada e nela crie um retângulo de
160x200 px. Preencha-o com a cor #ee6402.
19
Aplique nele o estilo de camada Gradient Overlay conforme a imagem.
Crie uma nova camada e faça uma seleção de 120x1px. Preencha de branco
20
Adicione seus submenus e duplique as linhas conforme for necessário.
Você pode também mudar a ordem das grupos, assim a sombra da caixa
superior ficará sobre a caixa do submenu.
21
04 – CRIANDO UM ORB
Inicie um novo arquivo e preencha-o com um gradiente radia de preto para
cinza escuro.
22
próxima às cores de fundo e pinte sua arte.
Crie uma nova camada e faça uma seleção em forma de uma circunferência e
preencha com um gradiente que tenha cor de primeiro plano #430301 e cor de
segundo plano #ff6d02.
23
24
Crie uma nova layer e desenhe a seguinte seleção elíptica.
Preencha-a com o seguinte gradiente: #ee9c1a e preto.
25
Crie um novo layer, defina uma cor laranja como primeiro plano e preencha o
Orb com um brush.
26
Aplique um Feather, Inverta a seleção e pressione DELETE.
27
05 – POST IT
28
Crie uma nova layer e preencha de preto para transparente de cima para baixo
conforme a imagem.
29
Diminua a opacidade para 20%.
30
Selecione as layer e utilize a opção Merge da paleta de camadas.
Clique no menu Edit, Transform, Warp.
31
Pressione CTRL+J e duplique a camada. Preencha-a de preto.
Posicione abaixo da camada amarela e mova ela um pouco para baixo.
32
Aplique um Gaussian Blur de 10.
33
06 – PAINEL DE NAVEGAÇÃO
Em um novo arquivo, desenhe um retângulo com raio de 20 px.
34
Rasterize o seu shape, Menu Layer, Rasterize Shape.
Adicione um filtro de Noise. Filter, Noise, Add Noise.
Use a configurações da imagem abaixo.
35
Agora clique no menu Filter, Blur, Motion Blur.
36
Crie uma nova layer com a mesma área da seleção do retângulo e preencha
com um cinza médio.
37
Diminua a opacidade.
38
39
Crie uma nova layer e desenhe um retângulo de cantos arredondados para
servir de base do título. Adicione outra layer e adicione um retângulo normal
para servir de caixa de texto.
40
Adicione também uma nova camada e adicione alguns botões.
41
07 – BOTÕES EM GRANITO
Na internet você pode encontrar diversos elementos prontos para criar a sua
interface. Porém em diversas vezes é preciso criar seus próprios elementos
para que case com aquele layout que deseja. Vamos aprender a criar um botão
que use uma textura de granito.
42
43
44
45
46
47
Duplique a camada e diminua um pouco os elemento da nova camada.
48
Caso queira crie uma nova camada, desenhe uma circunferência e com a
seleção de seu retângulo menor, exclua o que estiver fora dele.
No exemplo preenchi de branco e diminui a opacidade da camada para 20%.
49
Adicione seu texto.
50
08 – TEXTO 3D
Ao desenvolver uma interface WEB em diversas ocasiões será necessário
também criar textos mais elaborados. Neste exemplo vamos aprender a criar
um texto com simulação de 3D.
Inicie um novo arquivo e preencha o fundo com uma cor gradiente.
51
Vamos digitar a palavra WEB, mas vamos digitar em camadas separadas cada
uma das letras e vamos deixa-las em um bom tamanho.
52
Aplique o seguinte estilo de camada.
53
54
55
Copie o estilo e cole nas demais camadas (clique com o botão direito do mouse
na camada com o estilo e Copy Layer style).
Alterne um pouco a disposição e tamanho da fonte.
56
Crie uma nova camada, faça uma seleção oval e preencha-a de preto.
57
9 – TEXTO APPLE
Crie um novo arquivo preencha com uma cinza de fundo e digite seu texto.
58
Adicione a cor #0682C2 ao seu texto.
59
60
Adicione agora um estilo de camada Stroke de 2px com a cor #0852A5.
61
62
10 – NIGHTVISION
Um uso comum de imagens na Internet é com animações, principalmente em
Flash. Vamos agora criar em uma imagem um efeito chamado Nightvision.
Esse efeito pode ser utilizado para que o usuário do seu site ao passar o
mouse sobre uma imagem tenha esse efeito.
Abra uma imagem qualquer e duplique a sua camada (CTRL+J).
Clique no menu Image, Adjustments, Channel Mixer. Defina as seguintes
configurações.
63
Pressione CTRL+U para abrir a janela de Hue Saturation. Defina as seguintes
configurações.
64
Clique agora em Image, Adjustments, Selective Color.
65
Crie uma nova camada, preencha-a de branco e aplique o filtro, Texture, Grain.
66
CONCLUSÃO
67