Desde a Web 2.0 hit na internet, rodapés tornaram-se mais importante do que nunca, e tem havido algumagrande procura trabalho feito lá em baixo. Neste tutorial eu vou lhe mostrar como produzir um elegante procurando rodapé do site no Photoshop.
O rodapé
Aqui está o rodapé nós vamos estar criando, clique sobre a foto abaixo para ver a versão em tamanho maior:
Passo 1
Junto com o líquido cabeçalhos e rodapés, gradientes são uma característica comum da Web 2.0 design de estilo. Para o nosso tutorial vamos usar um pacote puro de gradientes que simular 3D / materiais que você pode começar a partir do excelente site Deziner Folio. Clique aqui para baixar o pacote Gradiente
Etapa 2
Abra seu arquivo de Photoshop. Eu criei o meu com grandes dimensões - 1440 px x 900px (para caber minha tela notebook 17inch). Claro que o rodapé real não deve ser esse grande, porém é bom para simular o que acontece quando a janela do navegador é esticado.
Escolha uma cor de fundo, no meu caso, a escolha de fundo é um gradiente simples com b0b0b0 e # # E1E1E1. Mover o cursor na tela segurando SHIFT para criar um gradiente vertical para baixo a página.
Passo 3
Em web design é muito importante para decidir o tipo de layout que você vai estar criando. Isso é que decidir entre um layout líquido (que se estende através de seu navegador) ou fixos (em muitos sites da Web 2.0 style layouts fixos são geralmente centralizada). Em nosso rodapé, vamos trabalhar com um layout fixo medido fora de 760px x 420px. Essas medidas garantirão que mesmo em uma tela de 800px x 600px, o nosso rodapé ainda aparecerá corretamente.
Usar guias para delimitar o tamanho do seu site como mostrado abaixo. Note que se você quiser criar um layout que é otimizado para 1024px x 768px configurações, em seguida, definir os seus guias para delimitar uma área de 955px x 600px.
Passo 4
Embora o nosso rodapé é uma largura fixa, ainda queremos o rodapé para estender ao longo da página e preencher o espaço restante. Para fazer isso, vamos utilizar um modelo feito por mim no photoshop para simular uma placa de metal. Para baixar o clique padrão aqui. Abra essa imagem no photoshop e vá emEdit> Define Pattern e escolha um nome para o padrão.
Agora abra um novo arquivo com 1440px de largura e 86px de altura, e vá em Edit> Fill e escolher o padrão que acabou de criar. Seleccionar todos CTRL (+ A para PC e APPLE + A para Mac), em seguida, cortar e colar a imagem no fundo do nosso primeiro documento. Você obterá o resultado mostrado abaixo.
Passo 5
Agora é hora de usuário para o nosso pacote bonito gradiente da Etapa 1. Criar uma nova camada e crie um retângulo utilizando Marquee Tool (M) com 100% da largura do documento e 21px de altura. Agora selecione Gradient Tool (G) e escolha um gradiente cool. Eu selecionei "Black 5 - Gloss" do pacote de gradiente. Agora mova a ferramenta degradê verticalmente sobre a marquise segurando a tecla "Shift"para garantir que ele é exatamente vertical.
Mover a forma resultante para o topo da forma criada na etapa 4. Você deve ter algo parecido com a imagem abaixo.
Passo 6
Agora vamos adicionar um efeito de sombra para a camada que criamos no Passo 5.
Passo 7
Agora definir o seu plano de cor # 545557 e cor de fundo para # 1e211f. Criar nova camada abaixo da camada etapa 4. Use a ferramenta Marquee (M) para selecionar o conteúdo da etapa 4 da camada.Selecione Gradient Tool (G), escolha o primeiro gradiente (combinação de cores de primeiro plano e volta). Desenhe um gradiente sobre a mudança de marca exploração para obter o gradiente vertical. Agora vá para o passo 4 camadas e definir o modo de mesclagem dessa camada para Multiply.
Passo 8
Agora crie uma nova camada acima de todas as outras camadas e desenhe um retângulo arredondado no meio dos nossos guias, escolhendo a cor a ser dfdfdf #. Clique com o botão direito na camada, clique em Blending Options e em seguida, criar um efeito Drop Shadow para o retângulo. Em seguida, botão direito do mouse sobre a camada de efeito e escolher "criar" camada. Isto irá dividir a sombra projetada sobre a sua própria camada.
Agora você tem a camada de retângulo e camada de sombra, mover e redimensionar a sombra para obter o resultado abaixo. Você pode querer pressionar CTRL-T para obter a ferramenta de transformar-se, em seguida, clique direito do mouse e escolher Perspective, em seguida, arraste as duas primeiras alças em relação uns aos outros. Como alternativa, você pode se mover da sombra para baixo e usar uma escova de borracha macia para escovar as bordas superiores.
Passo 9
Para finalizar o projeto criou alguns textos, informações de copyright e seu logotipo para o fundo.
Etapa 10
Para obter o rodapé pronto para ser usado em seu arquivo HTML, basta remover o texto (o texto será colocado em HTML), achatar o arquivo inteiro e cortar o fundo do rodapé conforme mostrado abaixo, em seguida, colá-lo em um novo arquivo. Como fizemos no Photoshop, o padrão pode ser produzido usando uma propriedade de fundo no seu documento CSS. Esta é a razão pela qual temos cortado a imagem tão pequena como isso leva a um melhor desempenho com o menor tamanho de arquivo.
Para cortar o centro de rodapé basta selecionar o conteúdo dentro de guias e corte-lo e colar em outro arquivo.
Salve os dois arquivos usando Salvar> Salvar para a Web e Dispositivos e selecione JPG com uma configuração de qualidade apropriadas. JPGs e PNGs são bons para imagens como a mostrada, onde há um grande número de graduações da cor. As imagens GIF são melhores para as áreas de cor lisa. Isto é devido a cada um usa os algoritmos.
O rodapé
E pronto, um elemento de rodapé lovely! Para obter mais idéias rodapé grande, confira 35 Thiuven'sBeautiful Designs rodapé.