Página 1 de 2
Design uma bela barra de navegação no Photoshop. Este tutorial vai te ensinar como combinar vários estilos de camada para criar uma barra de navegação bonito mas simples.
Visualização dos resultados finais
Blue on Black Navigation Bar Photoshop Tutorial
Passo 1
Em primeiro lugar, criar um novo documento - o tamanho que usei é de 540 por 220 pixels. Agora para o fundo tenho encheu-o com uma cor preta. Para fazer isso, vá em Editar> Preencher com a cor # 0d0d0d.
Passo 2
Em segundo lugar, nós estaremos fazendo o fundo para os botões de navegação para ir para dentro. Criar uma nova camada (Layer> New> Layer) e selecione a ferramenta retângulo arredondado. Faça a seleção do tamanho fixo de 480 por 50 pixels, com um raio de 5 pixels no meio do documento.
Preencha esta seleção com um gradiente linear da cor # 151515 a # 050505 usando a ferramenta de gradiente. Desmarque - Ctrl + D. Definir o preenchimento da camada para 60% (a configuração abaixo da opacidade na janela de camadas). A diferença entre opacidade e preenchimento é simplesmente muda a opacidade a opacidade da camada inteira e encher muda a opacidade de tudo, exceto a camada estilos.
Passo 3
Agora nós vamos adicionar um par de estilos de camada para este fundo de navegação.
Layer> Layer Style> Outer Glow
Layer> Layer Style> Stroke
Agora o documento deve estar procurando algo assim.
Passo 4
Em seguida acima de nós estaremos adicionando os botões. Criar uma nova camada e usando a ferramenta retângulo arredondado novamente fazer uma selecção de 150 por 40 pixels (com um raio de 5 pixels de novo) no lado esquerdo da barra de navegação.
Preencha esta seleção com um gradiente linear de # 323232 a # 161616 usando a ferramenta de gradiente. Definir o preenchimento desta camada para 50%.
Passo 5
Eu tenho três estilos de camada aplicado a este botão para dar-lhe alguma profundidade e torná-lo mais fresco.
Layer> Layer Styles> Inner Glow
Layer> Layer Styles> Gradient Overlay
Layer> Layer Styles> Stroke
Sua barra de navegação agora deve ser algo como isto.
Passo 6
Selecione a ferramenta de texto e adicione algum texto - os estilos de fonte que eu usei para o texto são Bell Gothic Std, Negrito, 20 pt, Crisp, # ffffff.
Passo 7
Agora repita os passos botão para que você tenha dois novos botões - Eu decidi que eu ia fazer um meio a uma cor diferente para se destacar (isto pode ser como um rato sobre o efeito ou algo se você decidiu este código de barras de navegação para um layout web). As cores azul eu usei para que sejam 14b9ef e # 054573.
Passo 8
Porque temos definir o preenchimento das camadas de 50-60%, podemos ajustar o fundo e pode ser ver através de meia - abaixo eu coloquei um gradiente radial com as cores usadas no tema Vista.