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

"use strict"; var adace_load_5f0c28abd37f6 = function(){ var viewport = $(window).width(); var tabletStart = 601; var landscapeStart = 801; var tabletEnd = 961; var content = '%3Cdiv%20class%3D%22adace_adsense_5f0c28abd37b8%22%3E%3Cscript%20async%20src%3D%22%2F%2Fpagead2.googlesyndication.com%2Fpagead%2Fjs%2Fadsbygoogle.js%22%3E%3C%2Fscript%3E%0A%09%09%3Cins%20class%3D%22adsbygoogle%22%0A%09%09style%3D%22display%3Ablock%3B%22%0A%09%09data-ad-client%3D%22ca-pub-3297652328497884%22%0A%09%09data-ad-slot%3D%221456553999%22%0A%09%09data-ad-format%3D%22auto%22%0A%09%09%3E%3C%2Fins%3E%0A%09%09%3Cscript%3E%28adsbygoogle%20%3D%20window.adsbygoogle%20%7C%7C%20%5B%5D%29.push%28%7B%7D%29%3B%3C%2Fscript%3E%3C%2Fdiv%3E'; var unpack = true; if(viewport=tabletStart && viewport=landscapeStart && viewport=tabletStart && viewport=tabletEnd){ if ($wrapper.hasClass('.adace-hide-on-desktop')){ $wrapper.remove(); } } if(unpack) { $self.replaceWith(decodeURIComponent(content)); } } if($wrapper.css('visibility') === 'visible' ) { adace_load_5f0c28abd37f6(); } else { //fire when visible. var refreshIntervalId = setInterval(function(){ if($wrapper.css('visibility') === 'visible' ) { adace_load_5f0c28abd37f6(); clearInterval(refreshIntervalId); } }, 999); }

})(jQuery);

(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, 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.