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

COMPARTILHE:

Como criar o layout de barra de navegação ao estilo 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 500x50 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

COMENTÁRIOS

BLOGGER: 11
  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?

    ResponderExcluir
  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

    ResponderExcluir
  3. andré como eu faço para fazer o efeito rollover? não estou conseguindo e nem estou conseguindo fazer a linha divisiva

    ResponderExcluir
  4. 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? www.itamarajuinformatica.blogspot.com

    ResponderExcluir
  5. preciso do photoshop pra criar essa barra?

    ResponderExcluir
  6. Como fazz pra colocar efeito hollover pra quando passar a seta em cima ?

    ResponderExcluir
  7. Ronaldo??? Que é??? kkkkkkkkkkkkkkkkkkk Aqui é tutorial e não de futebol ¬¬

    ResponderExcluir

Nome

.ai,71,.asl,1,.eps,24,.indd,1,.jpg,20,.png,40,.psd,594,.sketch,2,.svg,7,2006,90,2007,352,2008,942,2009,1780,2010,1822,2011,1825,2012,1764,2013,240,2014,559,2015,1195,2016,518,2017,748,2018,700,2019,412,2am,1,2axion,1,360,4,abril,378,abstrato,223,acer,1,actions,151,adobe,32,adobe experience house,1,adobe max,1,agosto,532,ajax,1,allan portilho,1,animação,39,aritana,1,arte,27,artistas do photoshop,1079,axis,5,backgrounds,1,basekit,1,básico,68,benq,9,bethesda,4,bgs,123,bmx,1,booombox,2,brasilmegaarena,2,brushes,107,bug,1,bunker,1,campus party,1,capcom,1,cartazes de cinema,117,cartazes de rock,203,cinemark,1,codemasters,1,com2us,3,concurso cultural,1,css3,1,curta,6,de(ath)sign,236,designbunkertp,1,dezembro,642,dica ninja,99,dificuldade 1,38,dificuldade 2,389,dificuldade 3,948,dificuldade 4,332,dificuldade 5,56,distortions,4,divulgação,1,diy,32,dji,1,dlink,1,documentário,105,dollarphotoclub,37,download,1780,edição de vídeo,3,efeito,1076,esportes,11,fastcom,3,ferramentas online,1,fevereiro,492,filme,3,flipbook,1,flow motion,1,fontes,569,fotolia,13,fotoshistoricas,39,fotosqueabalaramomundo,75,gamebau,1,games,214,gamevil,1,gastore,1,gifart,27,gomidia,1,goPro,1,gradientes,7,greenk,1,guest post,5,historia da foto,22,hitbox,1,hopi-hari,1,hoplon,19,html5,3,hype,2,hyperlapse,5,hyperx,31,ícones,96,idc,2,imagem,1,infográfico,1,inspiração,34,janeiro,480,julho,494,junho,393,kingston,15,kinship,2,layer style,43,lbee,1,leitores,1,levelup,15,lightpainting,1,lista,2,live-stream,2,magic the gathering,1,maio,336,março,466,matéria,591,maurício de souza produções,1,melhordasemana,17,mestres da pintura,35,meutimao,1,mob2b,1,mockup,39,música,48,natal,1,novembro,698,off,1,off-topic,517,outubro,745,palestra,7,parkour,1,patern,46,pdf,2,pérolas do instagram,1,photoshop básico,1,Photoshop CC,2,photoshop express,1,photoshop week,1,pixel show,1,plugin,4,png,1,positivo,16,post pago,2,prezi,1,printi,2,project ten,2,psd,2,psdownloads,1,pshelp,1,pszuero,2,purgatorium 90,1,rawar,2,razer,36,relink,160,responsivo,2,retoque de imagem,111,rixty,3,saga,12,selecaoTP,44,setembro,520,shapes,2,showreel,7,skate,59,skillab,1,smyowl,6,sony,1,speedart,3,speedpaint,8,splashscreen,1,stop-motion,9,tectoy,4,template,4,teste,1,texto,272,textura,137,tilt-shift,3,timelapse,21,tipografia,3,tp,2,tunning virtual,14,tutorial,2210,tutorial builder,2,tutorial player,2,ubisoft,71,udemy,1,ui,16,unboxing,1,vaio,1,vice,64,vídeo,706,vídeo aula,475,video mapping,3,wallpaper,1,warspear,1,wbgames,1,web,25,webfont,1,wix,3,xma,5,
ltr
item
::Tutoriais Photoshop::: Tutorial: Criando a barra de navegação do site da Apple.com
Tutorial: Criando a barra de navegação do site da Apple.com
Como criar o layout de barra de navegação ao estilo do site da Apple.com.
https://www.andresugai.org/Tutoriais/08.2007/T11/imagem14.jpg
::Tutoriais Photoshop::
https://www.tutoriaisphotoshop.net/2007/08/criando-barra-de-navegao-do-site-da.html
https://www.tutoriaisphotoshop.net/
https://www.tutoriaisphotoshop.net/
https://www.tutoriaisphotoshop.net/2007/08/criando-barra-de-navegao-do-site-da.html
true
34833248
UTF-8
Ver todos os Posts Não encontramos nenhum post VEJA TODOS Leia Mais Responder Cancelar Resposta Deletar Por Home PÁGINAS POSTS Veja Todos RECOMENDAMOS TAMBÉM LABEL ARQUIVO SEARCH TODOS OS POSTS Não encontramos nenhum post relacionado com sua busca Voltar para a Home Domingo Segunda Terça Quarta Quinta Sexta Sábado Dom Seg Ter Qua Qui Sex Sáb Janeiro Fevereiro Março Abril Maio Junho Julho Agosto Setembro Outubro Novembro Dezembro Jan Fev Mar Abr Maio Jun Jul Ago Set Out Nov Dez agora 1 minuto atrás $$1$$ minutes ago 1 hora atrás $$1$$ hours ago Ontem $$1$$ days ago $$1$$ weeks ago mais de 5 semanas atrás Seguidores Seguir THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copie todo código Selecione todo código Todos os códigos copiados para o clipboard Não foi possível copiar todo código / textos, pro favor pressione [CTRL]+[C] (ou CMD+C no Mac) para copiar