20
A Apple tem uma das mais limpas projetado sites na web, que normalmente é difícil de alcançar com um volume muito, basta olhar para craigslist. Então, hoje eu dedico este post para o awesomeness da Apple e seu belo site. Hoje vamos tentar recriar a barra de navegação Apple em seu site atual.
SEGUNDA PARTE ESTÁ AQUI SAIBA COMO ESTE EXEMPLO DE CÓDIGO AQUI - que vai lhe mostrar como esse código usando o CSS Sprite técnica fique atento.
Aqui está uma prévia do que estamos criando hoje:
Criando o fundo
1. Criar um documento do Photoshop, que é de 900 pixels de largura e 75 pixels de altura. Veja abaixo para obter as definições exatas.
2. Criar uma nova camada (Layer> New> Layer ...) Em seguida, escolha a Rounded Rectangle Tool e defina sua cor de primeiro plano como preto (Pressione a tecla X do seu teclado). Up at the top definir o raio para 8px. Em seguida, clique na seta para baixo diretamente à esquerda da caixa de raio e clique em Tamanho Fixo. Defina a largura de 877px ea altura para 38px
3. Agora vamos adicionar o gradiente, em vez de ter apenas um fundo preto. Clique com o botão direito sobre a camada que acabamos de adicionar a forma para mistura e opções de escolha.Marque a opção Gradient Overlay. Dê um clique duplo dentro da previsão de que o seu gradiente será semelhante a que está diretamente à esquerda da caixa de seleção inversa. Deve dar-lhe a caixa de diálogo abaixo.
4. Clique duas vezes no limite de cor no canto inferior esquerdo. Existem quatro cores pára de mostrar, eles se parecem com pequenas casas.
5. Uma vez que você faz que vai trazer o seu tipo de cor na caixa de diálogo 848484.
6. Agora clique duas vezes sobre a cor de parar todo o caminho para a direita no fundo e definir a cor de C7C7C7.
7. Agora precisamos adicionar uma outra cor parar assim que clique em algum lugar no meio direito abaixo da faixa de gradiente para adicionar outro parar de cor, uma outra casa procurando coisa deve aparecer. Posição em torno do mesmo lugar que você vê na imagem abaixo.
8. Clique duas vezes no limite de cor recém-criada e digite o código hexadecimal de # 848484, como fizemos na etapa cinco.
A caixa de diálogo terminou gradiente deve ser semelhante a minha imagem abaixo.
9. Esta é a conclusão da seção de fundo é isso que deve ter até este ponto. Se você não tiver este voltar completamente e tente novamente.
Adicionando Separator Lines
10. Agora é hora de criar os separadores entre cada um dos itens de navegação. Agarre a sua ferramenta de linha e certifique-se seu peso está definido para 1px. Crie uma nova camada.Coloque o cursor de modo que ela fique nivelada com a parte superior se o botão de navegação e pressione a tecla Shift e arraste para baixo até que ele atenda a borda inferior da navegação e solte. Você deve ter algo semelhante ao abaixo.
11. Depois de ter essa linha desenhada com sucesso usar o atalho Ctrl + J cinco vezes. Isto irá duplicar a linha que você acabou de fazer seis vezes. Em seguida, distribuir uniformemente cada uma das linhas, pressionando a tecla "V" em seu teclado e em seguida, usando a sua chave de seta para a direita em seu teclado. Veja o exemplo abaixo para obter o espaçamento correto.
12. Depois de ter todos eles alinhados selecionar todas as linhas que você acabou de criar e arrastá-los para o ícone de nova camada na paleta camadas. Isso irá copiar todas as camadas.Clique com o botão direito em qualquer camada selecionada e escolha mesclar as camadas. Ocultar as outras linhas horizontais para o momento. Clique com o botão direito e escolha as opções de mistura. Escolha sobreposição de gradiente e clique no seu canto inferior esquerdo de cor parar e mudar para # 565656 e, em seguida, alterar o limite de cor inferior direito para o # 8F8F8F.
Adicionando o texto
13. Defina seu tipo de letra a Helvetica 12pt negrito com o código hexadecimal # 262626. Clique no meio da primeira seção e tipo da Apple.
14. Continue a preencher em cada seção, use a imagem abaixo como referência
15. Agora para adicionar o olhar de texto pressionado. Clique sobre a camada de texto onde você acabou de escrever a Apple e aperte Ctrl + J (pc) ou Command + J (MAC). Agora bateu a tecla "V" em seu teclado e pressione a seta para baixo uma vez, que esta não é primeira duplica a camada e, por outro se move para baixo 1 pixel. Agora mova o recém-criado Apple camada Cópia debaixo da camada de maçã em primeiro lugar.
16. Clique direito sobre o Copy Apple Layer e escolher as opções de mistura. Marque a opção sobreposição de cores e colocar no código hexadecimal # C1C1C1. Isso fará com que o texto aparecerá como se ele está sendo pressionado
17. Repita os passos 15-16 para cada um dos itens de navegação através de suporte da Apple. Esse efeito deve ser aplicada a todo o texto na barra de navegação.