photoshopweb_truquesmagicos

8/3/2019 photoshopWEB_truquesmagicos

http://slidepdf.com/reader/full/photoshopwebtruquesmagicos 1/67



2



3

Í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



4

INTRODUÇÃO

Atualmente é muito comum encontrar material que ensine a utilizar um softwareem 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á baixounossas 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



5

01 – PIXEL BENDERA 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/ .

Não confundir com o Pixel Bender Toolkit. Se você possui um sistema

de 64 Bits e esta acostumado a usar o Photoshop 64 bits, apara poder utilizar

este recurso é preciso abrir a versão do Photoshop em 32 Bits.

Após aberto o Photoshop, abra uma imagem qualquer.

Clique no menu Filter, Pixel Bender, Pixel Bender Gallery.

http://labs.adobe.com/technologies/pixelbenderplugin/





6

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.

E alterar algumas de suas configurações.



7

Teste as outras opções de filtros e veja os resultados interesantes que podem

ser aplicados com esta ferramenta.

02 – BARRA DE NAVEGAÇÃO COM BRILHO

Crie um novo documento de 800x600 com resolução de 72 dpi e 8 bits.

Crie uma nova layer, faça uma seleção retangular e preencha com a cor

hexadecimal #52A1C4.



8

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.



9

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 ¼.

Mude o modo de mistura de camada para Overlay.

Adicione os textos a sua barra de navegação.

Adicione ao seu texto o Layer Style de drop Shadow com as configurações

abaixo.



10

03 – MENU CARTOON

Inicie um novo documento.Preencha o fundo com o seguinte gradiente #61b3d9 to #2678bc.



11



12

Crie um novo arquivo de 50x50 e com a ferramenta de linha trace a sua

diagonal.

Clique no menu Layer, Rasterize Shape. Diminua o tamanho de sua imagem

para 5x5 pixels.

Clique no menu Edit, define Pattern.



13

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.



14

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.

Clique no menu Layer, Layer Style, Gradient Overlay e configure conforme

imagem.



15

Selecione esta layer e crie uma nova Preencha com um gradiente radial de

preto para branco.

Configure para modo Overlay com opacidade em 40%.



16

Em uma nova layer clique no menu Edit Stroke. Defina cor branca e 10 pixels.

Aplique um efeito de Outer Glow nesta layer.



17

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.



18

Crie uma pasta de camada e adicione todos os elementos do topo dentro destapasta. Depois crie outra pasta chamada corpo.



19

Dentro do grupo corpo crie uma nova camada e nela crie um retângulo de

160x200 px. Preencha-o com a cor #ee6402.



20

Aplique nele o estilo de camada Gradient Overlay conforme a imagem.

Crie uma nova camada e aplique um stroke como o anterior.

Crie uma nova camada e faça uma seleção de 120x1px. Preencha de branco



21

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.



22

04 – CRIANDO UM ORBInicie um novo arquivo e preencha-o com um gradiente radia de preto para

cinza escuro.

Baixe o brush http://www.brusheezy.com/Brushes/13914-Floral-Brushes-5 ou

use outro de sua preferência.

Crie uma nova layer, defina um tamanho grande para o brush e uma cor

http://www.brusheezy.com/Brushes/13914-Floral-Brushes-5





23

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.

Vamos aplicar um efeito de camada de stroke e um de bevel and emboss em

nosso Orb.



24



25

Crie uma nova layer e desenhe a seguinte seleção elíptica.Preencha-a com o seguinte gradiente: #ee9c1a e preto.

Mude o modo de mistura para Screen com 30 %.



26

Crie um novo layer, defina uma cor laranja como primeiro plano e preencha o

Orb com um brush.

Clique em cima do ícone da camada do Orb com a tecla CTRL pressionada

para fazer a seleção, mantendo a camada do Brush selecionada.



27

Aplique um Feather, Inverta a seleção e pressione DELETE.

Diminua a opacidade do Brush dentro do Orb.

Adicione um Texto com estilo de camada de Drop Shadow ao seu ORB.



28

05 – POST IT

Um dos recursos muito utilizados em aplicações digitais é a metáfora com o

que usamos em nosso dia a dia, se pensarmos a área de trabalho de nosso

computador é pensada em um ambiente de trabalho convencional.

Quando se pensa em sites internet a situação é bem semelhante. Podemos

definir elementos que se aproximem de nosso dia-a-dia.

Vamos neste exemplo aprender a criar o elemento Post-it que pode ser usado

para informar aos visitantes de seu site sobe novidades, recados, etc.

Inicie um novo documento, faça uma seleção retangular e a preencha com a

cor #FFE44F.



29

Crie uma nova layer e preencha de preto para transparente de cima para baixo

conforme a imagem.



30

Diminua a opacidade para 20%.

Escreva seu recado na cor preta e diminua a opacidade para 80%.



31

Selecione as layer e utilize a opção Merge da paleta de camadas.

Clique no menu Edit, Transform, Warp.

Distorça conforme a imagem.



32

Pressione CTRL+J e duplique a camada. Preencha-a de preto.

Posicione abaixo da camada amarela e mova ela um pouco para baixo.

Pressione CTRL+T e posicione o Anchor Point no canto superior esquerdo.

Gire conforme a imagem.



33

Aplique um Gaussian Blur de 10.



34

06 – PAINEL DE NAVEGAÇÃOEm um novo arquivo, desenhe um retângulo com raio de 20 px.



35

Rasterize o seu shape, Menu Layer, Rasterize Shape.

Adicione um filtro de Noise. Filter, Noise, Add Noise.

Use a configurações da imagem abaixo.



36

Agora clique no menu Filter, Blur, Motion Blur.



37

Crie uma nova layer com a mesma área da seleção do retângulo e preencha

com um cinza médio.



38

Diminua a opacidade.

Aplique os seguintes de estilos de camada.



39



40

Crie uma nova layer e desenhe um retângulo de cantos arredondados paraservir de base do título. Adicione outra layer e adicione um retângulo normal

para servir de caixa de texto.



41

Adicione também uma nova camada e adicione alguns botões.



42

07 – BOTÕES EM GRANITONa 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.

Inicie um novo arquivo e desenhe um retângulo de cantos arredondados.

Preencha-o de branco.

Vamos aplicar alguns efeitos de camada (Menu Layer, Layer Style).



43



44



45



46



47



48

Duplique a camada e diminua um pouco os elemento da nova camada.

Mude algumas configurações do estilo. Retirei a textura e mudei o gradiente.



49

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%.



50

Adicione seu texto.



51

08 – TEXTO 3DAo 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.



52

Vamos digitar a palavra WEB, mas vamos digitar em camadas separadas cada

uma das letras e vamos deixa-las em um bom tamanho.



53

Aplique o seguinte estilo de camada.



54



55



56

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.

Selecione as camadas de texto e pressione CTRL+E par dar um MERGE nas

camadas.

Duplique a camada gerada pelo MERGE. Ficando assim duas camadas iguais,

selecione a camada de baixo e faça a seleção da camada (CTRL+ clique no

ícone da camada), preencha com um cinza médio e desloque um pouco para

baixo e esquerda.

Duplique a camada preenchida com o cinza, faça a seleção e preencha de

preto, mova ela agora para cima e direita.



57

Crie uma nova camada, faça uma seleção oval e preencha-a de preto.

Aplique um filtro Motion Blur na camada.



58

9 – TEXTO APPLECrie um novo arquivo preencha com uma cinza de fundo e digite seu texto.



59

Adicione a cor #0682C2 ao seu texto.

Aplique o seguinte efeito de camada.



60



61

Adicione agora um estilo de camada Stroke de 2px com a cor #0852A5.

Adicione também um Drop Shadow.



62



63

10 – NIGHTVISIONUm 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.



64

Pressione CTRL+U para abrir a janela de Hue Saturation. Defina as seguintes

configurações.



65

Clique agora em Image, Adjustments, Selective Color.



66

Crie uma nova camada, preencha-a de branco e aplique o filtro, Texture, Grain.

Deixe a camada no modo overlay.



CONCLUSÃO

Com isto finalizamos nossa apostila de Photoshop WEB TRUQUES

MÁGICOS, se você quer aprender mais sobre esta fantástica ferramenta e

quer aprender a usá-la para projetos de criação de web sites conheça nosso

curso Webkit através do link: http://apostilando.com/pagina.php?cod=30.

http://apostilando.com/pagina.php?cod=30




photoshopweb_truquesmagicos

Documents