• RSS
  • Facebook
  • Twitter
Comments


Passo 1

Abrir uma nova tela que é de 600 × 335px. Comece mostrando os governantes (Exibir> Réguas), crie dois guias semelhante à imagem abaixo. Criar um em 285px e outro em 310px.

Etapa 2

Crie um retângulo (U) que preenche o menor governou área e rotular a camada "barra inferior." Abrir o menu Efeitos para a camada. Vá até a propriedade Sobreposição de Gradiente e aplique um gradiente entre # 000000 e # 0c0c0c a 90 graus.
Agora crie outro retângulo na área de normas superiores e nome da camada "barra superior". Novamente abra o menu de efeitos e aplicar um Gradiente Overlay entre # # 35393d e 787b7d a 90 graus. Selecione os dois retângulos criados até ao momento e mudar a opacidade para 90%. Quando um plano é adicionado mais tarde, isso vai proporcionar um belo efeito, pois permite o pano de fundo ligeiramente mostrar completamente.

Passo 3

O próximo passo é adicionar um destaque para o menu usando o Ferramenta Linha (U). Selecione a ferramenta Line e alterar o peso de 2px. Desenhar uma linha em toda a barra e mudar a cor para # 9fa2a4.Renomeie esta camada para "menor destaque." Agora, chamar uma outra linha diretamente acima do anterior e mudar a cor para # 484b4d e mudar o nome para "destacar superior." Grupo essas camadas com camadas de barras em um grupo chamado "bar." Esta fase completa a base do menu.

Passo 4

Agora que a barra de menu mais completo, podemos criar um conjunto de divisores de ir entre o texto.Selecione a ferramenta de linha novamente e deixar o peso em 2px. Desenhar uma linha vertical da marca da régua central que deixa alguns pixels antes de o salientar. Isso não precisa ser exata e pode ser facilmente ajustado posteriormente. Abra o menu de efeitos e aplicar um Gradiente Overlay a 90 graus entre 676a6d e # # 4d6672. Label essa camada "divisor superior."
Desenhe outra linha vertical da régua centro descendo e parando a mesma distância da borda como acima. Esta secção não tem um gradiente, para mudar a cor # 43474b. Renomeie esta camada para "menor divisor." Grupo dos dois troços da linha divisória e nome do grupo "divisor".

Passo 5

Selecione a ferramenta Tipo (T) e mudar a cor para branco (# FFFFFF). A fonte que eu escolhi para usar o menu é chamada Segoe UI, porque é a fonte usada na interface do usuário do Vista. No entanto, nem todos tem essa fonte, assim como um substituto Arial fará. Defina o tamanho de 11pt e tipo de suas ligações para fora, o espaçamento de modo uniforme. Agrupá-los e nomear o grupo de "links".
Agora copie o seu espaço e as divisórias entre as ligações. Você deve terminar com algo semelhante a isto.

Passo 6

Agora, a barra de menus está basicamente concluída, assim você pode acrescentar um fundo de sua escolha. O pano de fundo que eu escolhi é uma fotografia de grama. Nada colorido ou cênica vai fazer.
Copie o seu plano de fundo no menu e mudar o nome da camada Background. Certifique-se que esta camada é na parte de trás em sua paleta de camadas. Note a transparência do menu permite a fundo para mostrar através sem avassalador.

Passo 7

Esta etapa irá criar a borrada retângulo arredondado que está por trás do texto. Este efeito é bastante comum no Vista e é uma boa técnica. Leva o foco do fundo e coloque no texto, mas ainda mostra o belo cenário para trás.
Primeiro de tudo, duplicar o fundo. Esta camada não é permanente, mas estaremos cortando uma seleção fora dele. Em seguida, usando a Rounded Rectangle Tool (U), desenhar uma forma que começa após a extremidade esquerda da tela. Isto significa que a forma só tem duas arestas arredondadas.
Rasterize a camada e em seguida, usando a ferramenta Magic Wand (W), selecione o retângulo e apagar a cor, mantendo o esquema. Agora selecione a cópia de fundo e cortou a partir dessa camada. Eliminar a camada de cópia de fundo e adicione uma nova camada chamada "blur".
Colar a forma na camada chamada de "blur" e aplique um Gaussian Blur de 5px (Filter> Blur> Gaussian Blur). Em seguida, aplique um Drop Shadow como mostrado abaixo.

Passo 8

Agora adicione o texto dentro do desfoque. Usando o mesmo tipo, como as ligações (Segoe UI) escreva o seu nome eo slogan. Selecione a parte do texto e torná-lo em negrito e manter algumas normal, aplique um Drop Shadow e um Gradient. Isso produz um texto moderno, que quem tem um olhar marcante.

Passo 9

Este passo é opcional, uma vez que irá produzir o brilho azul em destaque, que se tornará nosso efeito hover. Desenhar uma elipse de grandes dimensões (U) que preenche o espaço entre os divisores. Alterar a cor da elipse a # 5c94c5 e aplicar um Gaussian Blur de 10px. A forma tornou-se um layer, e você pode limpar o excesso de blur, usando a ferramenta Marquee (M).

Conclusão

Este menu produz um efeito impressionante quando acoplado com um fundo brilhante cênica. Ele usa a grande efeito de transparência, bem como os gradientes moderna. A utilização dos destaques é um grande truque para fornecer uma ponta aspecto moderno às imagens. Este menu seria muito fácil de cortar-se e transformar-se em um site muito funcional baseada em menu com os estados hover.

Categories:

One Response so far.

Leave a Reply