2
ÍNDICEÍNDICE ................................................................................................................
INTRODUÇÃOAtualmente é muito comum encontrar material que ensine a utilizar um softwareem seu computador, basta apenas ded...
01 – PIXEL BENDERA adobe possui um recurso bem interessante de laboratório de aplicações eplug-ins. Um dos recursos mais i...
Na direita você pode escolher o tipo de filtro e dependendo do filtro escolhido,você poderá aplciar configurações a este f...
Teste as outras opções de filtros e veja os resultados interesantes que podemser aplicados com esta ferramenta.02 – BARRA ...
Clique no menu Layer, Layer Style, Gradient Overlay e adicione as seguintesconfigurações.Crie uma nova layer. Reduza a sua...
Clique na ferramenta gradiente na barra de ferramentas e preenha com aopção Foreground to Transparence (primeiro deixe a s...
03 – MENU CARTOONInicie um novo documento.Preencha o fundo com o seguinte gradiente #61b3d9 to #2678bc.                   ...
11
Crie um novo arquivo de 50x50 e com a ferramenta de linha trace a suadiagonal.Clique no menu Layer, Rasterize Shape. Dimin...
Dê um nome e clique em OK.Volte a sua imagem preenchida com o gradiente, crie uma nova layer epreencha-a com o padrão que ...
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ênc...
Selecione esta layer e crie uma nova Preencha com um gradiente radial depreto para branco.Configure para modo Overlay com ...
Em uma nova layer clique no menu Edit Stroke. Defina cor branca e 10 pixels.Aplique um efeito de Outer Glow nesta layer.  ...
Digite um texto para ser o cabeçalho de seu menu.Aplique um Estilo de camada de Dorp Shadow com modo Normal, e 1px dedistâ...
Crie uma pasta de camada e adicione todos os elementos do topo dentro destapasta. Depois crie outra pasta chamada corpo.  ...
Dentro do grupo corpo crie uma nova camada e nela crie um retângulo de160x200 px. Preencha-o com a cor #ee6402.           ...
Aplique nele o estilo de camada Gradient Overlay conforme a imagem.Crie uma nova camada e aplique um stroke como o anterio...
Adicione seus submenus e duplique as linhas conforme for necessário.Você pode também mudar a ordem das grupos, assim a som...
04 – CRIANDO UM ORBInicie um novo arquivo e preencha-o com um gradiente radia de preto paracinza escuro.Baixe o brush http...
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 epreench...
24
Crie uma nova layer e desenhe a seguinte seleção elíptica.Preencha-a com o seguinte gradiente: #ee9c1a e preto.Mude o modo...
Crie um novo layer, defina uma cor laranja como primeiro plano e preencha oOrb com um brush.Clique em cima do ícone da cam...
Aplique um Feather, Inverta a seleção e pressione DELETE.Diminua a opacidade do Brush dentro do Orb.Adicione um Texto com ...
05 – POST ITUm dos recursos muito utilizados em aplicações digitais é a metáfora com oque usamos em nosso dia a dia, se pe...
Crie uma nova layer e preencha de preto para transparente de cima para baixoconforme a imagem.                            ...
Diminua a opacidade para 20%.Escreva seu recado na cor preta e diminua a opacidade para 80%.                              ...
Selecione as layer e utilize a opção Merge da paleta de camadas.Clique no menu Edit, Transform, Warp.Distorça conforme a i...
Pressione CTRL+J e duplique a camada. Preencha-a de preto.Posicione abaixo da camada amarela e mova ela um pouco para baix...
Aplique um Gaussian Blur de 10.                                  33
06 – PAINEL DE NAVEGAÇÃOEm um novo arquivo, desenhe um retângulo com raio de 20 px.                                       ...
Rasterize o seu shape, Menu Layer, Rasterize Shape.Adicione um filtro de Noise. Filter, Noise, Add Noise.Use a configuraçõ...
Agora clique no menu Filter, Blur, Motion Blur.                                                  36
Crie uma nova layer com a mesma área da seleção do retângulo e preenchacom um cinza médio.                                ...
Diminua a opacidade.Aplique os seguintes de estilos de camada.                                             38
39
Crie uma nova layer e desenhe um retângulo de cantos arredondados paraservir de base do título. Adicione outra layer e adi...
Adicione também uma nova camada e adicione alguns botões.                                                            41
07 – BOTÕES EM GRANITONa internet você pode encontrar diversos elementos prontos para criar a suainterface. Porém em diver...
43
44
45
46
47
Duplique a camada e diminua um pouco os elemento da nova camada.Mude algumas configurações do estilo. Retirei a textura e ...
Caso queira crie uma nova camada, desenhe uma circunferência e com aseleção de seu retângulo menor, exclua o que estiver f...
Adicione seu texto.                      50
08 – TEXTO 3DAo desenvolver uma interface WEB em diversas ocasiões será necessáriotambém criar textos mais elaborados. Nes...
Vamos digitar a palavra WEB, mas vamos digitar em camadas separadas cadauma das letras e vamos deixa-las em um bom tamanho...
Aplique o seguinte estilo de camada.                                       53
54
55
Copie o estilo e cole nas demais camadas (clique com o botão direito do mousena camada com o estilo e Copy Layer style).Al...
Crie uma nova camada, faça uma seleção oval e preencha-a de preto.Aplique um filtro Motion Blur na camada.                ...
9 – TEXTO APPLECrie um novo arquivo preencha com uma cinza de fundo e digite seu texto.                                   ...
Adicione a cor #0682C2 ao seu texto.Aplique o seguinte efeito de camada.                                       59
60
Adicione agora um estilo de camada Stroke de 2px com a cor #0852A5.Adicione também um Drop Shadow.                        ...
62
10 – NIGHTVISIONUm uso comum de imagens na Internet é com animações, principalmente emFlash. Vamos agora criar em uma imag...
Pressione CTRL+U para abrir a janela de Hue Saturation. Defina as seguintesconfigurações.                                 ...
Clique agora em Image, Adjustments, Selective Color.                                                       65
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 TRUQUESMÁGICOS, se você quer aprender mais sobre esta ...
Photoshop web truquesmagicos
Upcoming SlideShare
Loading in …5
×

Photoshop web truquesmagicos

1,963 views
1,923 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,963
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
114
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Photoshop web truquesmagicos

  1. 1. 2
  2. 2. ÍNDICEÍNDICE .......................................................................................................................................... 3INTRODUÇÃO .............................................................................................................................. 4 A série............................................................................................................. 401 – PIXEL BENDER .................................................................................................................... 502 – BARRA DE NAVEGAÇÃO COM BRILHO........................................................................... 703 – MENU CARTOON ............................................................................................................... 1004 – CRIANDO UM ORB ............................................................................................................ 2205 – POST IT............................................................................................................................... 2806 – PAINEL DE NAVEGAÇÃO ................................................................................................. 3407 – BOTÕES EM GRANITO ..................................................................................................... 4208 – TEXTO 3D ........................................................................................................................... 519 – TEXTO APPLE ..................................................................................................................... 5810 – NIGHTVISION ..................................................................................................................... 63CONCLUSÃO ............................................................................................................................. 67 3
  3. 3. INTRODUÇÃOAtualmente é muito comum encontrar material que ensine a utilizar um softwareem seu computador, basta apenas dedicação e você passa a conhecer suainterface, seus botões e menus.Alguns materiais como os do Apostilando.com “casam” a explicação comexemplos reais. Mas para quem está começando muitas vezes isso éinsuficiente.Então nós do Apostilando.com, criamos uma série chamada TRUQUESMÁ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 eexemplos de uso do software, reforçando assim seu aprendizado sobre ele edespertando sua criatividade. Obrigado e tenha um bom curso.A sérieA série em sua primeira edição abordará exemplos para os seguintessoftwares:  Adobe Photoshop;  Adobe Flash  Adobe Dreamweaver  PHP  Microsoft Word  Microsoft Excel  Adobe Photoshop WEB  Corel Draw  HTML & CSS  Javascript  Fireworks  Excel Avançado 4
  4. 4. 01 – PIXEL BENDERA adobe possui um recurso bem interessante de laboratório de aplicações eplug-ins. Um dos recursos mais interessantes que ela lançou foi o Pixel Benderpara 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 sistemade 64 Bits e esta acostumado a usar o Photoshop 64 bits, apara poder utilizareste 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. 5
  5. 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 comouma pintura à óleo.E alterar algumas de suas configurações. 6
  6. 6. Teste as outras opções de filtros e veja os resultados interesantes que podemser aplicados com esta ferramenta.02 – BARRA DE NAVEGAÇÃO COM BRILHOCrie 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 corhexadecimal #52A1C4. 7
  7. 7. Clique no menu Layer, Layer Style, Gradient Overlay e adicione as seguintesconfigurações.Crie uma nova layer. Reduza a sua seleção em 1 px (menu Select, Modify,Contract. 8
  8. 8. Clique na ferramenta gradiente na barra de ferramentas e preenha com aopção Foreground to Transparence (primeiro deixe a sua cor de forregroundcomo branco).Trace de cima para baixo até a metade, depois trace de baixo para cimaaproximadamente ¼.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çõesabaixo. 9
  9. 9. 03 – MENU CARTOONInicie um novo documento.Preencha o fundo com o seguinte gradiente #61b3d9 to #2678bc. 10
  10. 10. 11
  11. 11. Crie um novo arquivo de 50x50 e com a ferramenta de linha trace a suadiagonal.Clique no menu Layer, Rasterize Shape. Diminua o tamanho de sua imagempara 5x5 pixels.Clique no menu Edit, define Pattern. 12
  12. 12. Dê um nome e clique em OK.Volte a sua imagem preenchida com o gradiente, crie uma nova layer epreencha-a com o padrão que acabou de criar. 13
  13. 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.Clique no menu Layer, Layer Style, Gradient Overlay e configure conformeimagem. 14
  14. 14. Selecione esta layer e crie uma nova Preencha com um gradiente radial depreto para branco.Configure para modo Overlay com opacidade em 40%. 15
  15. 15. Em uma nova layer clique no menu Edit Stroke. Defina cor branca e 10 pixels.Aplique um efeito de Outer Glow nesta layer. 16
  16. 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 dedistância. 17
  17. 17. Crie uma pasta de camada e adicione todos os elementos do topo dentro destapasta. Depois crie outra pasta chamada corpo. 18
  18. 18. Dentro do grupo corpo crie uma nova camada e nela crie um retângulo de160x200 px. Preencha-o com a cor #ee6402. 19
  19. 19. 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 20
  20. 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 caixasuperior ficará sobre a caixa do submenu. 21
  21. 21. 04 – CRIANDO UM ORBInicie um novo arquivo e preencha-o com um gradiente radia de preto paracinza escuro.Baixe o brush http://www.brusheezy.com/Brushes/13914-Floral-Brushes-5 ouuse outro de sua preferência.Crie uma nova layer, defina um tamanho grande para o brush e uma cor 22
  22. 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 epreencha com um gradiente que tenha cor de primeiro plano #430301 e cor desegundo plano #ff6d02.Vamos aplicar um efeito de camada de stroke e um de bevel and emboss emnosso Orb. 23
  23. 23. 24
  24. 24. 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 %. 25
  25. 25. Crie um novo layer, defina uma cor laranja como primeiro plano e preencha oOrb com um brush.Clique em cima do ícone da camada do Orb com a tecla CTRL pressionadapara fazer a seleção, mantendo a camada do Brush selecionada. 26
  26. 26. 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. 27
  27. 27. 05 – POST ITUm dos recursos muito utilizados em aplicações digitais é a metáfora com oque usamos em nosso dia a dia, se pensarmos a área de trabalho de nossocomputador é pensada em um ambiente de trabalho convencional.Quando se pensa em sites internet a situação é bem semelhante. Podemosdefinir elementos que se aproximem de nosso dia-a-dia.Vamos neste exemplo aprender a criar o elemento Post-it que pode ser usadopara informar aos visitantes de seu site sobe novidades, recados, etc.Inicie um novo documento, faça uma seleção retangular e a preencha com acor #FFE44F. 28
  28. 28. Crie uma nova layer e preencha de preto para transparente de cima para baixoconforme a imagem. 29
  29. 29. Diminua a opacidade para 20%.Escreva seu recado na cor preta e diminua a opacidade para 80%. 30
  30. 30. Selecione as layer e utilize a opção Merge da paleta de camadas.Clique no menu Edit, Transform, Warp.Distorça conforme a imagem. 31
  31. 31. 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. 32
  32. 32. Aplique um Gaussian Blur de 10. 33
  33. 33. 06 – PAINEL DE NAVEGAÇÃOEm um novo arquivo, desenhe um retângulo com raio de 20 px. 34
  34. 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
  35. 35. Agora clique no menu Filter, Blur, Motion Blur. 36
  36. 36. Crie uma nova layer com a mesma área da seleção do retângulo e preenchacom um cinza médio. 37
  37. 37. Diminua a opacidade.Aplique os seguintes de estilos de camada. 38
  38. 38. 39
  39. 39. 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 normalpara servir de caixa de texto. 40
  40. 40. Adicione também uma nova camada e adicione alguns botões. 41
  41. 41. 07 – BOTÕES EM GRANITONa internet você pode encontrar diversos elementos prontos para criar a suainterface. Porém em diversas vezes é preciso criar seus próprios elementospara que case com aquele layout que deseja. Vamos aprender a criar um botãoque 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). 42
  42. 42. 43
  43. 43. 44
  44. 44. 45
  45. 45. 46
  46. 46. 47
  47. 47. 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. 48
  48. 48. Caso queira crie uma nova camada, desenhe uma circunferência e com aseleçã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
  49. 49. Adicione seu texto. 50
  50. 50. 08 – TEXTO 3DAo desenvolver uma interface WEB em diversas ocasiões será necessáriotambém criar textos mais elaborados. Neste exemplo vamos aprender a criarum texto com simulação de 3D.Inicie um novo arquivo e preencha o fundo com uma cor gradiente. 51
  51. 51. Vamos digitar a palavra WEB, mas vamos digitar em camadas separadas cadauma das letras e vamos deixa-las em um bom tamanho. 52
  52. 52. Aplique o seguinte estilo de camada. 53
  53. 53. 54
  54. 54. 55
  55. 55. Copie o estilo e cole nas demais camadas (clique com o botão direito do mousena 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 nascamadas.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 parabaixo e esquerda.Duplique a camada preenchida com o cinza, faça a seleção e preencha depreto, mova ela agora para cima e direita. 56
  56. 56. Crie uma nova camada, faça uma seleção oval e preencha-a de preto.Aplique um filtro Motion Blur na camada. 57
  57. 57. 9 – TEXTO APPLECrie um novo arquivo preencha com uma cinza de fundo e digite seu texto. 58
  58. 58. Adicione a cor #0682C2 ao seu texto.Aplique o seguinte efeito de camada. 59
  59. 59. 60
  60. 60. Adicione agora um estilo de camada Stroke de 2px com a cor #0852A5.Adicione também um Drop Shadow. 61
  61. 61. 62
  62. 62. 10 – NIGHTVISIONUm uso comum de imagens na Internet é com animações, principalmente emFlash. 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 omouse 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 seguintesconfigurações. 63
  63. 63. Pressione CTRL+U para abrir a janela de Hue Saturation. Defina as seguintesconfigurações. 64
  64. 64. Clique agora em Image, Adjustments, Selective Color. 65
  65. 65. Crie uma nova camada, preencha-a de branco e aplique o filtro, Texture, Grain.Deixe a camada no modo overlay. 66
  66. 66. CONCLUSÃO Com isto finalizamos nossa apostila de Photoshop WEB TRUQUESMÁGICOS, se você quer aprender mais sobre esta fantástica ferramenta equer aprender a usá-la para projetos de criação de web sites conheça nossocurso Webkit através do link: http://apostilando.com/pagina.php?cod=30. 67

×