2007agostodificuldade 4Tudotutorialweb

Tutorial: Criando a barra de navegação do site da Apple.com

Preview Descrição: Como criar o layout de barra de navegação ao estilo do site da Apple.com.

  • [message]
    • ##check##AVISO: Criando a barra de navegação do site da Apple.com

      • Caso você esteja usando o Photoshop em Português coloque o mouse sobre o nome do recurso que está sendo utilizado e veja a tradução em Português. Os recursos que possuem tradução estão marcados em vermelho no texto.
        Se você tiver dúvidas sobre o uso de alguma ferramenta visite o PS Help! para saber como utilizar a ferramenta desejada.
        Alguns tutoriais não possuem a opção de download das imagens, caso queira utilizar uma imagem em alta resolução para acompanhar o tutorial visite o PS Downloads e escolha um dos sites indicados para download de imagens em alta resolução.
        Em caso de dúvidas e sugestões utilize a área de comentários logo abaixo. Obrigado 🙂

tutoriais photoshop

01. Pressione Ctrl+N para criar um novo documento e defina o tamanho de 500×50 pixels, pressione Ok e logo após a letra M do teclado para selecionar a Rectangular Marquee Tool, na barra de opções da ferramenta que fica no alto da tela defina a opção Fixed Size e coloque os valores de 480 pixels para width e 35 pixels para height, agora crie a seleção dentro do documento.

Criando a barra de navegação do site da  Apple.com

02. Agora vá em Select> Modify> Smooth e defina um valor de 3 pixels para o Radius. Pressione Ctrl+Shift+N para criar uma nova layer e depois pressione a letra G do teclado para selecionar a Paint Bucket Tool, preencha a seleção com uma cor qualquer.

Criando a barra de navegação do site da  Apple.com

03. Clique com o botão direito do mouse sobre a layer e escolha a opção Blending Options, vá na opção Gradient Overlay e defina os seguintes valores (as cores usadas no gradiente são #949494 para #d2d2d2).

Criando a barra de navegação do site da  Apple.com

04. Ainda na caixa de Blending Options vá em Drop Shadow e defina a cor #b1b1b1.

Criando a barra de navegação do site da  Apple.com

05. Pressione a letra T do teclado para selecionar a Horizontal Type Tool e escolha a cor #383838 com a fonte Segoe UI de tamanho 14 (mas nada impede que se use outra fonte) e escreva os ítens que serão os links.

Criando a barra de navegação do site da  Apple.com

06. Clique com o botão direito do mouse sobre a layer dos links e escolha a opção Blending Options, vá em Drop Shadow e defina os seguintes valores.

Criando a barra de navegação do site da  Apple.com

07. Sua barra de navegação deve estar parecida com a imagem abaixo.

Criando a barra de navegação do site da  Apple.com

08. Pressione Ctrl+Shift+N para criar uma nova layer, agora pressione a letra M do teclado para selecionar a Rectangular Marquee Tool e crie uma linha de mais ou menos 1 pixels de largura, pressione a letra G do teclado para selecionar a Paint Bucket Tool e pinte a seleção de branco, mude o modo de blend da layer para Soft Light e defina a opacidade em 20%, pressione Ctrl+J para duplicar a layer e vá pressionando a seta direita do teclado para posicionar a cópia como na foto abaixo, depois de posicionada pressione Ctrl+E para mesclar as layers.

Criando a barra de navegação do site da  Apple.com

09. Pressione Ctrl+Shift+N para criar uma nova layer, logo após pressione a letra M do teclado e desenhe outra linha de 1 pixel de largura, pressione a letra G do teclado para selecionar a Paint Bucket Tool, e pinte na cor #808080, posicione esta linha entre as duas linhas feitas no passo anterior usando as setas do teclado, deixe a opacidade da layer em 35%, depois de posicionada pressione Ctrl+E para mesclar as layers.

Criando a barra de navegação do site da  Apple.com

10. Pressione Ctrl+J para ir duplicando a layer e com as setas do teclado vá posicionando as cópias entre os links.

Criando a barra de navegação do site da  Apple.com

11. Para criar o efeito rollover ou seja, do mouse sobre o link pressione Ctrl+Shift+N para criar uma nova layer e depois pressione a letra M do teclado para selecionar a Rectangular Marquee Tool, crie uma seleção como a da foto abaixo.

Criando a barra de navegação do site da  Apple.com

12. Pressione a letra G do teclado para selecionar a Paint Bucket Tool e preencha a seleção com qualquer cor, depois clique com o botão direito do mouse sobre a layer e escolha a opção Blending Options, vá em Gradient Overlay, clique sobre a barra de gradiente e defina um gradiente que vá do #666666 para o #a1a1a1 como na foto abaixo.

Criando a barra de navegação do site da  Apple.com

13. Pressione a letra T do teclado para selecionar a Horizontal Type Tool e selecione a palavra que estiver no efeito rollover, mude a cor da fonte para Branca, clique com o botão direito sobre a layer da palavra e defina os seguintes valores para o Drop Shadow, com a cor #454545 para a sombra.

Criando a barra de navegação do site da  Apple.com

Ao final a barra estará assim.

Criando a barra de navegação do site da  Apple.com

Deixe seu voto

Mostrar mais

Artigos relacionados

11 comentários

  1. POxa, tutO muitO legal, adOrO seus tutOs ^^ Queria uma ajuda ae:Minha amiga quer baixar a fOnte de Harry Potter, sÓ que eu nãO achO O link que eu baixei e nem lembrO O prOcesso. VOcê pOde me ajudar?

  2. Muito Bom cara…. Vlw msmo..
    Mas eu soube que é possivel criar site pelo photoshop, posta algum tutorial ai pra gente! =D
    Ahh… e pra fazer o efeito rollover tem que criar varias imagens né? uma com 1 selecionado… outra com outro seleciona….etc… ai tudo bem… mas e depois… pra colocar no Front Page ou no Share Point? Como faz? Eu acho que tem um codigo ou algo parecido uqe faz isso.. mas qual? e como?
    Vlw

  3. Thiago , nao sou nada daqui mas para colocar isso nao precisa de codigo é apenas vc salvar a imagem para web se vc quiser entra no meu blog que eu posto a aula ensinando a criar o site blz? itamarajuinformatica.blogspot.com

Deixe uma resposta

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

16 − 7 =

Botão Voltar ao topo

Add to Collection

No Collections

Here you'll find all collections you've created before.

Fechar
Fechar

Adblock Detectado

Este site sobrevive com anúncios, desative seu Adblock para acessar nosso conteúdo. Isso garante que possamos continuar com nosso conteúdo de forma gratuita! Obrigado :)