Olá, bem-vindo. Hoje vou mostrar-lhe como criar um menu de estilo fibra de carbono embutida.
Este tutorial vem de HVDesign, traduzido e adaptado por Sou da Tec.
O Que Vamos Criar
Uma vez que você completou o tutorial você deve ter algo como isto.

Fazendo O Fundo
Criar um novo documento de 1200 x 600 pixels com fundo transparente. Defina a sua cor de primeiro plano para # bebebf e cor de fundo para # d2d2d2, em seguida, selecione a ferramenta de gradiente com um gradiente linear.

Depois de selecionar o seu arrastar o gradiente gradiente de cima da tela para o fundo.

Uma vez que você preencheu a tela adicionar um pouco de barulho, indo para "Filter> Noise> Add Noise", use as configurações abaixo.

Agora desfocar o fundo, indo para "filter> blur> motion blur", use as configurações abaixo.

Em torno das margens esquerda e direita da tela você deve ver o motion blur, turva demais.Basta fazer uma seleção em torno da melhor metade da tela excluindo as bordas mais borradas.

Uma vez que você fez a seleção das culturas a tela. Você agora deve ter seu fundo de metal levemente escovado, você pode afinar os traços de metal, ajustando as configurações de motion blur.
Criando A Navegação
Selecione a ferramenta retângulo arredondado com um raio de 10px, arraste o retângulo de navegação no meio da sua tela.

Uma vez que você criou seu retângulo camada estilos acrescentar o seguinte.



Você deve ter algo como isto.

Para esta parte nós precisamos fazer a nossa textura de fibra de carbono personalizado. Para fazer isso crie um novo documento 4 x 4 pixels em seguida, copie a imagem abaixo.

Depois de ter criado o padrão de fibra de carbono vá para "Editar> Definir Padrão", em seguida, voltar para sua navegação.
Como carregar uma seleção em torno de sua navegação selecionando a camada retângulo de navegação, em seguida, indo para "Select> Load". Crie uma nova camada acima de sua navegação, selecione a ferramenta balde de tinta, em seguida, encontrar o seu padrão de fibra de carbono a partir do menu padrões. Depois de encontrar o seu padrão de selecioná-lo e preencher a seleção carregado.

Defina o seu padrão de fibra de carbono modo de mesclagem da camada para "diferença", você deve ter algo como isto.

Criação De Botões De Navegação
Selecione a ferramenta Type, em seguida, digitar seus links de navegação para o fundo da navegação.

Depois de ter concluído a adição de suas ligações textuais camada estilos acrescentar o seguinte ao seu texto.


Entre cada link adicionar duas linhas verticais 1 px ao lado do outro, as linhas devem começar a partir do topo da navegação e no final na parte inferior. Cor da linha a primeira em preto e branco a segunda linha. Depois de criar suas linhas defina a opacidade da camada para 50% eo modo de blend para Soft Light.

Criando O Orbs Navegação
Selecione a ferramenta Elliptical Marquee, em seguida, arraste a nossa elipse uma pequena acima de um de seus links de navegação.

Selecione a ferramenta gradiente com um gradiente linear, arraste um preto (# 000000) para cinza (# 828282) gradiente sobre a seleção elipse.

Com a ferramenta Elliptical Marquee, uma vez mais, crie outra seleção circular dentro de sua última seleção.

Preencha a seleção com a cor # 8e8e8e. Mantenha sua seleção ativa e crie uma nova camada acima do seu círculo cinza. Defina o seu plano de cor branca (# ffffff), em seguida, selecione a ferramenta gradiente com um gradiente radial, alterar o tipo de gradiente para "branco transparente".

Zoom em sua seleção a arrastar o gradiente radial a partir do canto superior esquerdo da elipse.Mantenha o drag curto como você não quer que o gradiente radial muito grande.

alterar o tipo de gradiente linear também manter a seleção ativa. Criar uma nova camada, em seguida, arraste o gradiente linear de baixo para cima.

Continue adicionando os destaques mudando a opacidade da camada é de cada camada ea posição dos gradientes, eventualmente, você deve ter algo como isto.

Duplicar a esfera e todos os destaques, em seguida, movê-la através do botão ao lado. Continue a fazer isso até que todos os botões têm lá próprio orbe.
Criando O Estado Hover
Para um dos botões estavam indo para adicionar um estado hover, eu escolhi o botão carteira.Basta adicionar uma sobreposição de gradiente para a esfera usando suas cores escolhidas.

Faça uma seleção usando a ferramenta letreiro retangular, a seleção deve ser feita em torno de seu botão, entre os divisores.

Uma vez que você fez a seleção ao redor do botão de preencher a seleção com a cor # dddddd seguida, defina o modo de mesclagem de camadas para "overlay".

Finalmente utilizando a ferramenta poligonal lasso criar uma forma triangular, preencher a forma triangular na mesma cor que o fundo, em seguida, adicionar uma sombra usando as definições abaixo.

Seu estado hover final deve ficar parecido com isso.

Parabéns você terminou o tutorial.
Tags
Tutoriais e Dicas