no ,

Criando um menu de site com campo de busca no Photoshop.

Preview Descrição: Hoje veremos como criar uma barra de menu para sites usando layer styles e ferramentas.

tutoriaisphotoshop.net

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

01. Pressione Ctrl+N para criar um novo documento, defina os valores abaixo e pressione Ok.

tutoriaisphotoshop.net

02. Escolha a cor #313131, pressione Ctrl+Shift+Alt+N para criar uma nova layer, pressione Alt+Backspace (a tecla acima do Enter) ou pressione a letra G do teclado para selecionar a Paint Bucket Tool e clique dentro do documento para preencher a layer com a cor escolhida, pressione a letra M do teclado para selecionar a Rectangular Marquee Tool, defina os valores de 30 pixels para Height e 960 pixels para Width na barra de opções da ferramenta, pressione a letra D do teclado para resetar as cores de Foreground e Background para preto e branco, clique no documento,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.

tutoriaisphotoshop.net

03. Vá em Layer> Layer Style> Gradient Overlay e depois em Layer> Layer Style> Stroke, defina os valores abaixo e pressione Ok.

tutoriaisphotoshop.net

tutoriaisphotoshop.net

tutoriaisphotoshop.net

04. Escolha a cor #757575, pressione a letra T do teclado para selecionar a Horizontal Type Tool, escolha a fonte Tahoma no tamanho 4, escreva os links como na foto abaixo, para o link em hover a cor usada foi a #ff7200.

tutoriaisphotoshop.net

05. Vá em Layer> Layer Style> Drop Shadow e defina os valores abaixo.

tutoriaisphotoshop.net

06. Pressione a letra U do teclado para selecionar a Rounded Rectangle Tool, certifique-se de que a opção Shape Layers esteja ativada, escolha a cor cinza escuro e defina o Radius da ferramenta em 2 pixels, aplique a ferramenta e crie o campo de busca como na foto abaixo.

tutoriaisphotoshop.net

07. Vá em Layer> Layer Style> Drop Shadow, Layer> Layer Style> Inner Shadow, Layer> Layer Style> Outer Glow, Layer> Layer Style> Color Overlay e defina os valores abaixo.

tutoriaisphotoshop.net

tutoriaisphotoshop.net

tutoriaisphotoshop.net

tutoriaisphotoshop.net

08. No final seu menu estará como o da foto abaixo.

tutoriaisphotoshop.net

Site de origem: http://tutsdir.com/2011/11/26/create-a-clean-dark-navigation-bar/

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.

$ s Comentários

Deixe uma resposta
  1. O tutorial ficou bem legal, mas… como conseguiram a lupinha?

  2. Olá André, tenho aprendido muito aki com seus tutorias postados, criei essa barra de menu com o campo de busca, mas surgiu uma dúvida, como faço para ativar o campo de busca no meu site, preciso de algum código html? Obrigado.

  3. Sim você precisa utilizar um codigo html para ativar o campo texto.

  4. A lupa vc encontra onde fica o retangulo (Rectangle Tool) ou a tecla U, nesse menu tem a opção Custom Shape Tool, com ela selecionada lá em cima vai ter uma barra onde vai estar escrito shape lá vc encontra várias formas, e uma delas e a forma lupa.

Deixe uma resposta

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

um + 2 =

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

Address Is Approximate.

Inspiração, Cartazes de Rock: Asteroids Galaxy Tour.