Criar este módulo de navegação bonito com Photoshop. Este layout Photoshop tutorial irá mostrar como simples formas e gradientes pode criar designs elegantes.
Visualização dos resultados finais
![step9 [4]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tE_N8PascgHd5uRffuwy_rBRkUCKPZHAC6PpH2q12pDvtiJiat4Kx9N4E9X9QLxInnG7IxAjKJMSv9wyOvQQt3wYNtJB_LrgJuglxMeEoDDh3ZmPmuNVk1vfrpu0RW1wlYlilp0lzJgDAlGPdhTg2jr5oRxcRYB5J1=s0-d)
Modernista Navegação Módulo Photoshop Tutorial
Passo 1
Em primeiro lugar criar um novo documento (Arquivo> Novo) 540 por 440 pixels. Preencha o fundo com a cor # 1b1b1b indo em Editar> Preencher.
![step1 [7]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tyIXj-AJvOg84zWUBBEl48nPhi3yIBcIKQdhDdAkwTDOnuroLOjM81TUjD6v_G4s5ghHBIv-Ggl7sEW8WQtqAV-AaGwRxH06k8_QPl_j113MW3w9qIwvMq_AEXdVF_oNDm0mbKqSZ2fNe8hUeo2wjZZZDahRPgQ-t_Bw=s0-d)
Passo 2
Em segundo lugar, vamos estar a criar o fundo da caixa de navegação. Criar uma nova camada, você pode fazer isso, vá Layer> New> Layer ou usando o atalho Ctrl + Shift + Alt + N. Selecione a ferramenta retângulo arredondado e definir o raio para 5 pixels. Faça uma seleção de 250 por 300 pixels.
![Step2a [4]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tLsT2m-LGQUajr82BdEFIEur8I8rlyZBk0rdwdmY-Op6dHuPzYCDMpRUaWeib81S52llKkTE_2HZZ3sztxai4kfnq1vI0iS5D6ZqY7UsO0Qlp3t3mBmUnyRVWU0oZ-UyV0ClHCU1RzOhxHgmxBx6dux7P1RxssRJ_EwL4=s0-d)
Estamos agora goingt a preencher essa seleção com um gradiente vermelho. Selecione a ferramenta gradiente e defina-o radial. Preencha a seleção com um gradiente da parte superior central (# bc0303) para o centro do fundo (# 3f0000).
![step2b [4]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tFTWkkxjYFyllxOibiPaCOw9r0OR6-zr9Dqw6kDNzZdnwtpeea2QNPKIgKzxaTXHng_dkNM-f1YquZa6I_XcvAq4NccN_KWow4i69_yDe5DgifH44VoS4zo4JQ8dAMXtC7oWG-HtHZJLePQkIC-8rVXLNfDx-QwA-KsA=s0-d)
Passo 3
Em terceiro lugar, nós vamos estar adicionando um brilho externo para o nosso fundo de navegação, vá Layer> Layer Styles> Outer Glow e insira as configurações abaixo.
![step3a [4]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uT3vjscuo98SK7PZee8IYJiJm4x3hwdcUzNa1B1bFKoYfCyNCpqOtSfFleW4zedv_vke9YkXEhtq2-wieTCV0GMCaNJIJ65aQiRgLxdfTypes_mFtPef3ZG8ecCfNGZelTZFG9SObNLoUXq82ithaRamKvUqpPyTJ_bDg=s0-d)
Agora ele deve olhar como este.
![step3b [4]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tfNa0Yw-tpPNCvvhTMY14VTMGBmGti06tpGuL67xVpfXPGMJijRDVA3fu7kd1UHiU8AUVdr3ao2MF5ngQG2PrOfF4D2vx9_fKuUNoCljWGasUr9DOTuG_zKuZJ2Db3Ls-GqIxT6h0tcvVJFm6l7IRxGBPcnsKenb3OuQ=s0-d)
Passo 4
Selecione a ferramenta de texto e adicionar algum texto para o título da caixa de navegação. A fonte que tenho usado é Verdana, Regular, 22pt, FFFFFF, Strong #.
![step4 [4]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vEaPAVH6TJnPwQd2xnZCAe5UBBqZYDJ_E00lI4DARVZO5_bWnvQguMbjitKxFE5VVkR37klngVeUvbS5lK89n8aluVuXHIZ8AbnGjFV8QanpA53JBVAuQ6TQR7Ta8ao_BMQcMSo95z0HpWTBsNBdMkQH_OzCoNfaldQg=s0-d)
Passo 5
Criar uma nova camada e usando a ferramenta retângulo arredondado novamente fazer uma selecção de 230 por 250 pixels no fundo do fundo de navegação (com espaçamento de 10 pixels nas laterais e fundo).
![step5a [4]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_sbizSb_u1i0Ph0KQ-EmekYuMAoLBWCsPkGwvIDs2LeiA7aqkUJE4uPWZP_f4imnmc98Y6NZw01kMzM2kL7XpMVn69Q47rflOiVcT6pQOt6BS7ejw2fkbKoLd9vMWc54n_qZlv4A2xBB6RrkfKQCCOtLEeJMpHgQEJZ8A=s0-d)
Preencha esta seleção com uma cor cinza escuro (# 111111).
![step5b [4]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vEummQu6Il5EFbXzRO49N4MO4_kwBgINoy3tfi240nvWf-pOHfnYE3w7NqMuEMIn6CD_wS3BTkTEAuo0yXSc7u8Fr-RQ3c7nP-6xJtV9pOthfr7d36Ey6BLnXXnPBqF4nhzLT-xcM3AdoyBTK9NEO7DHZqCm0rrrRuZxw=s0-d)
Passo 6
Estamos indo agora para ser adicionando um efeito de brilho à nova camada. Então, em uma nova camada (mantendo a seleção que você tinha antes) vão Select> Modify> Contract 10 pixels.
![step6a [4]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vGrymyeI3fuRhwdmy5uCRQInjQ2QJZwWCr0Aa4iXWPjFFMR6BU5XEyhzEtoOzw63gJLqWFmJ8NJZUg5DwxHEbY8B848zNiP5qHBXpzfhgXE7UGneZLU9woHOJSxp7l3KrMAjizguoCBVf_MaVtM50GCCpRkIayPxUr_GU=s0-d)
Preencha a seleção com um gradiente radial a partir do canto superior esquerdo (# ffffff) à direita do fundo (transparente), utilizando a ferramenta de gradiente.
![step6b [4]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_s_qAmm3aJgcwa2dlaL1uJ_-rgF9yqe2ZKn1mcE3Vg3DWrBPG8u1ur1hwUCpxgCBJ9NnmIdbpzYwyOhP0LmyhyfAT4-1ZpPv7aO1VCyWh3bGZkqAC-SvrNF4QIkr7OG_uOrTZubvAeUM82yH8gN4HjFER0Lv88EVwP3vuQ=s0-d)
Baixa opacidade da camada para 5%.
![step6c [4]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uO7gMj5vpTdpCzT9z1oj2YNQATtw_zthJtIixQM37beaNPeQfZfATZOQcezhQhK79Kk3ifJPbuhEzW6v5gPj8T9Qs8T4WApzYplTYT-_evd3YMLlweHdm_p-gVvjNEQmTMuCl-abkAKi5p8swAimSC1YdSWYIpmbc9JmI=s0-d)
Passo 7
Agora, para os links de texto, utilizando a ferramenta de texto adicionar algum texto para atuar como links. A fonte que eu usei para isso é Verdana, Regular, 12pt, Nenhum, # 5A5A5A (# ffffff para o efeito hover). Defina a altura da linha para 30 pt.
![step7 [4]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vIs4TmD70W_g8iWuC37Gha289OXrRV6kG5cyvsH5sQT10gwvaJRBowSsgy9bfZ2VBATbsvB7vQXloHBC3wKHjqzATRr3ns21DiScEEqkGbsYWbfyONb_W3zxA8uW_APve09KKy4SCu8vdPxrpdjUyostBqpBZtnE7dPg=s0-d)
Passo 8
Em seguida é a adição de divisores de ir entre cada link de texto. Faça seleções de 210 por 1 pixel usando a ferramenta rectangular marquee entre cada linha e preencha com a cor 1e1e1e #.
![Step8 [4]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_ugJyLaQQtrXloQ6Dvf9qCqlmAKN6lUb0IuBO0gDA9yTvi5wuwl5MUnxIoLLz4MRlR-9BO76A_hJL_xQ2O6FwvBOdJ9mMGQZlWEhYXi3MVDo_lMJVkukXJSUy9s5TMtXvCgfuVVKwKY4bFZIpKWHfmk_U40IK4bAo_OsQ=s0-d)
Passo 9
O último passo é adicionar a cor de fundo por trás do link ativo (no meu caso eu fiz o Photoshop Tutorials link ativo) para criar uma nova camada atrás de camada de texto e fazer uma seleção de 210 por 30 pixels e preencha com # 171717.