Box De preços
Autor: Hartz | Publicado: 2011-08-16T13:34:00-07:00

Descrição: Hoje veremos como criar o layout de um box de ítens parawebsites&nbsp;usando Layer Styles, Filtros e diversas ferramentas.

01. Pressione Ctrl+N para criar um novo&nbsp;documento, defina o tamanho de 500x600 pixels, 72 dpi´s e modo de cor em RGB, pressione Ok, pressione a letra U do teclado para selecionar a&nbsp;Rounded Rectangle Tool, certifique-se de que a opção&nbsp;Shape Layers&nbsp;esteja selecionada, crie um shape como o da foto abaixo, vá me&nbsp;Layer&gt; Layer Style&gt; Stroke,&nbsp;Layer&gt; Layer Style&gt; Gradient Overlay,&nbsp;Layer&gt; Layer Style&gt; Inner Glow&nbsp;e defina os valores abaixo.



02. Ainda com a&nbsp;Rounded Rectangle Tool&nbsp;selecionada crie um novo retângulo como o da foto abaixo, vá emLayer&gt; Layer Style&gt; Outer Glow,&nbsp;Layer&gt; Layer Style&gt; Gradient Overlay,&nbsp;Layer&gt; Layer Style&gt; Stroke&nbsp;e defina os valores abaixo.



03. Agora pressione Shift+U até que a&nbsp;Custom Shape Tool&nbsp; esteja selecionada, clique na opção Shape na barra de opções da ferramenta no alto da tela e escolha o shape indicado na&nbsp;imagem&nbsp;abaixo, crie um triângulo no canto direto do último shape que criamos, utilize a mesma cor usada no retângulo de background, pressione Ctrl+T para abrir a caixa de&nbsp;Free Transform, ajuste o triângulo para que ele fique como na foto abaixo, pressione Enter para finalizar a transformação, com a tecla Ctrl pressionada clique sobre a miniatura da layer do shape (triângulo) para ativar a seleção ao redor, pressione Ctrl+Shift+Alt+N para criar uma nova layer, pressione a letra D do teclado para resetar as cores de Foreground e Background para preto e branco, pressione Alt+Backspace (a tecla acima do Enter) ou pressione a letra G do teclado para selecionar a&nbsp;Paint Bucket Tool&nbsp;e clique no documento para preencher a seleção com a cor preta, pressione Ctrl+D para desabilitar a seleção, vá em&nbsp;Filter&gt; Blur&gt; Gaussian Blur&nbsp;e defina os valores abaixo, repita o procedimento no canto direito.



04. Pressione a letra T do teclado para selecionar a&nbsp;Horizontal Type Tool, escreva uma palavra qualquer no centro do shape que estamos trabalhando, caso queira utilizar a mesma fonte usada neste tutorial&nbsp;clique aqui&nbsp;para fazer o download, vá em&nbsp;Layer&gt; Layer Style&gt; Inner Shadow,&nbsp;Layer&gt; Layer Style&gt; Outer Glow&nbsp;e defina os valores abaixo.



05. Pressione Shift+U até que a&nbsp;Line Tool&nbsp;seja selecionada, com a tecla Shift pressionada, escolha a cor indicada abaixo e crie as divisões do box que estamos criando.



06. Pressione a letra T do teclado para selecionar a&nbsp;Horizontal Type Tool, escreva os ítens do seu box, caso queira utilizar a fonte usada neste tutorial clique aqui para fazer o download, vá em&nbsp;Layer&gt; Layer Style&gt; Drop Shadowe defina os valores abaixo.



07. Pressione a letra M do teclado para selecionar a&nbsp;Elliptical Marquee Tool, crie uma seleção oval como na foto abaixo, pressione Ctrl+Shift+Alt+N para criar uma nova layer, deixe essa layer abaixo da layer do shape superior, escolha um cinza escuro e pressione Alt+Backspace (a tecla acima do Enter) ou pressione a letra G do teclado para selecionar a&nbsp;Paint Bucket Tool&nbsp;e clique dentro da seleção para preencher com a cor escolhida, pressione Ctrl+D para desabilitar a seleção, vá em&nbsp;Filter&gt; blur&gt; Gaussian Blur&nbsp;e defina os valores abaixo.



08. Pressione a letra P do teclado para selecionar a&nbsp;Pen Tool, certifique-se de que a opção&nbsp;Shape Layers&nbsp;esteja ativada, na borda do box criado faça um triângulo como o da foto abaixo, vá em&nbsp;Layer&gt; Layer Style&gt; Gradient Overlay&nbsp;e defina os valores abaixo.



09. Ainda com a&nbsp;Pen Tool&nbsp;selecionada crie dois pequenos detalhes na cor indicada na foto abaixo.



10. Pressione a letra D do teclado para resetar as cores de Foreground e Background para preto e branco, pressione a letra X do teclado para alternar as cores de Foreground e Background, sua cor de Foreground deve ser a branca, pressione a letra T do teclado para selecionar a&nbsp;Horizontal Type Tool, escreva um preço qualquer, pressione Ctrl+T para abrir a caixa de&nbsp;Free Transform, rotacione e redimensione o valor, pressione Enter para finalizar a transformação, vá em&nbsp;Layer&gt; Layer Style&gt; Outer Glow&nbsp;e defina os valores abaixo.



11. Pressione a letra U do teclado para selecionar a&nbsp;Rounded Rectangle Tool&nbsp;novamente, crie um novo retângulo como na foto abaixo, vá em&nbsp;Layer&gt; Layer Style&gt; Outer Glow,&nbsp;Layer&gt; Layer Style&gt; Stroke&nbsp;e defina os valores abaixo.



12. Pressione a letra T do teclado para selecionar a&nbsp;Horizontal Type Tool, escreva a palavra Sign Up, neste tutorial a cor usada foi a #2790bc, vá em&nbsp;Layer&gt; Layer Style&gt; Drop Shadow,&nbsp;Layer&gt; Layer Style&gt; Inner Shadowe defina os valores abaixo.



13. No final seu box estará como o da foto abaixo.



Site&nbsp;de origem:&nbsp;http://bloomwebdesign.net/myblog/2011/04/03/design-pricing-plan-boxes-for-a-hosting-company/