em ,

Criando um box de preços para sites.

Preview Descrição: Hoje veremos como criar o layout de um box de ítens para websites usando Layer Styles, Filtros e diversas ferramentas.

tutoriaisphotoshop.net

(adsbygoogle = window.adsbygoogle || []).push({});

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

tutoriaisphotoshop.net

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

tutoriaisphotoshop.net

03. Agora pressione Shift+U até que a Custom Shape Tool esteja selecionada, clique na opção Shape na barra de opções da ferramenta no alto da tela e escolha o shape indicado na imagem 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 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 Paint Bucket Tool e clique no documento para preencher a seleção com a cor preta, pressione Ctrl+D para desabilitar a seleção, vá em Filter> Blur> Gaussian Blur e defina os valores abaixo, repita o procedimento no canto direito.

tutoriaisphotoshop.net

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

tutoriaisphotoshop.net

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

tutoriaisphotoshop.net

06. Pressione a letra T do teclado para selecionar a 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 Layer> Layer Style> Drop Shadow e defina os valores abaixo.

tutoriaisphotoshop.net

07. Pressione a letra M do teclado para selecionar a 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 Paint Bucket Tool e clique dentro da seleção para preencher com a cor escolhida, pressione Ctrl+D para desabilitar a seleção, vá em Filter> blur> Gaussian Blur e defina os valores abaixo.

tutoriaisphotoshop.net

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

tutoriaisphotoshop.net

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

tutoriaisphotoshop.net

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 Horizontal Type Tool, escreva um preço qualquer, pressione Ctrl+T para abrir a caixa de Free Transform, rotacione e redimensione o valor, pressione Enter para finalizar a transformação, vá em Layer> Layer Style> Outer Glow e defina os valores abaixo.

tutoriaisphotoshop.net

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

tutoriaisphotoshop.net

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

tutoriaisphotoshop.net

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

tutoriaisphotoshop.net

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

Escrito por André Sugai

Publicitário, Photoshopista, criador do Tutoriais Photoshop, venceu o prêmio iBest na categoria tecnologia em 2008 e dois prêmios de criatividade da Adobe. Ex-colaborador do Tech Tudo (http://Globo.com), iMasters (UOL) e Revista Photoshop Creative.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.

3 Comments

  1. Gostei pacas do tutorial, porém estou com uma dúvida: na parte do tutorial de nº 01 você diz: 01. certifique-se de que a opção Shape Layers esteja selecionada, crie um shape como o da foto abaixo, vá me Layer> Layer Style> Stroke, Layer> Layer Style> Gradient Overlay, Layer> Layer Style> Inner Glow e defina os valores abaixo.
    Fiz o procedimento porém a cor não fica igual conforme a imagem um cinza bem claro. Pode me ajudar?

Portifólio em vídeo da agência Digital District.

Inspiração, Cartazes de Cinema: Limitless (Sem Limites).