Dê uma olhada na imagem que vamos criando. Querem ter acesso aos arquivos PSD e completa para download cópias de cada tutorial, incluindo este? Join Psd Plus por apenas R $ 9/month. Você pode ver o preview da imagem final abaixo.
Tutorial Detalhes
- Programa: Adobe Photoshop CS3 +
- Dificuldade: Intermediário
- Tempo de conclusão estimado: 2 horas
Passo 1 - Instalar o Template
Vamos montar o nosso documento. Tenho a tendência para criar meus sites com uma largura de 960px fixa e altura variável. Para este tutorial, eu escolhi uma altura de 800px para assegurar que tem espaço suficiente para todas as seções de conteúdo que gostaríamos de incluir. Criação do documento original no tamanho exato que você quer que o local seja torna mais fácil para a criação de guias.
A seguir, vamos montar o nosso simulador. Drag orientações dos governantes documento para os quatro cantos do seu documento.
Agora precisamos alocar algum espaço para o fundo vamos criar. Vá em Image> Canvas Size e expandir o documento para 1100 pixels por 1000 pixels. Isso deve nos dar muito espaço para preencher o nosso plano exclusivo.
Preencha a camada inferior com o branco (Shift + F5). Renomear esta layer como "fundo". Seu documento agora está como na imagem abaixo.
Passo 2 - Criar o fundo gradiente
Direito do mouse no "fundo" da camada, e escolha Blending Options. Nós estaremos adicionando um Gradiente Overlay para o nosso "background" camada. Escolhi um gradiente de cor três com alguns blues e bronzeado, porém você pode escolher qualquer essencialmente cores que você quiser. A beleza de usar o Blending Options para o fundo é que a qualquer momento, você pode facilmente mudar as cores e ajuste o gradiente a seu gosto.
O documento deve agora olhar como este:
Você pode querer ignorar esta etapa, porém, sinto o gradiente acentuado é um pouco demasiado brilhante para este projeto. Nós vamos adicionar algum ruído de tom um pouco mais baixo.
Criar uma nova camada. Renomeie esta camada de "ruído". Em seguida, preencher a camada com branco (Edit> Fill). Depois de ter preenchido com a camada branca, precisamos adicionar algum ruído, aplicando Filter> Noise> Add Noise. Fixar o montante de 400%, com uma distribuição uniforme e não-monocromática.Todas as cores do ruído vai nos dar muito mais profundidade no nosso plano.
Defina o "ruído" camada para Multiply e defina a opacidade para 5%. Isso deve nos dar o grão apenas o suficiente para suavizar o gradiente.
Passo 3 - Adicione a textura Strokes (Brush) para o Fundo
Primeiro, você precisará baixar alguns pincéis Pincelada, se você ainda não os têm. Eis aqui algumas que usei no passado: "Pincelada".
Criar uma nova camada, acima do seu "background" e "ruído" camadas. Renomeie esta camada para "brush1" (nós vamos estar criando várias camadas como este). Defina esta camada para Multiply. Escolha uma cor de primeiro plano quente (para compensar os tons frios) em nosso fundo azul do inclinação. Eu escolhi um marrom quente: # 996726. Selecione o pincel que você deseja chamar, e coloque-a no canto superior esquerdo do documento, garantindo que o pincel está fora dos limites das suas orientações (queremos que o fundo se expandir para fora).
Ajuste a opacidade da camada para 50% (para que a mostra através de granulação). Repita os dois passos anteriores para múltiplos pincéis para se adequar ao seu gosto. Seu plano deve agora olhar como a imagem mostrada abaixo.
Parabéns, seu costume, fundo original está completo. Uma vez que você colocou os pincéis de forma aleatória, ele irá diferenciá-lo daqueles projetos que comprou um fundo de ações semelhantes.
Passo 4 - Criar o Opaco Interior / Translúcido Container
Primeiro, nós vamos precisar para agarrar a Rounded Rectangle Tool, e defina o raio de 20px. Acima de todas as camadas de seu fundo (escovas + ruído + gradiente), arrastar e desenhar um retângulo arredondado no âmbito das orientações original criámos. Seu retângulo deve ser 960px por 800px. Renomeie esta layer "contentor", e com o botão direito do mouse na camada e selecione Rasterize Layer (nós estaremos fazendo algumas alterações para esta camada mais tarde, por isso, poderia muito bem começar esta fora do caminho agora).
Para fazer o "container" camada de olhar opaco, nós precisamos fazer algumas coisas:
- Defina o recipiente "Fill" camada de 0% (vamos usar o Color Overlay camada estilo dar-lhe alguma cor).
- Adicionar um Drop Shadow: Opacity de 41%, Ângulo, 90, à distância de 0, Spread de 1, e no tamanho 10
- Chanfro e Entalhe: Estilo de Inner Bevel, Técnica conjunto de Smooth, Depth 100%, Direção de Cima, em tamanho 20px, Soften de 0px, Ângulo de 135, em 58 de altitude, Highlight Opacity em 27%, e Shadow Opacity definida para 15%
- Sobreposição de Cor: Branca com uma opacidade de 73%
- Curso: 1px de tamanho e opacidade em 100% (para lhe dar um pouco mais de profundidade)
Depois de definir todos os estilos de camada, o seu "container" camada deve olhar como este:
Passo 5 - Configurar o Preenchimento Inner Guias
Para garantir que ficar com estofamento consistentes sobre o "container" camada (assumindo que não queremos contar a nossa pixels de cada vez que colocamos um elemento), vamos adicionar guias em 40px dentro da nossa caixa de guia original.
Passo 6 - Uma Navegação Cutout
Como você viu na visualização final, queremos fazer o olhar de navegação, como é rebaixado ou cortar forado "container" camada. Para fazer isso, nós vamos eliminar alguns dos "container" camada e deixe a Layer Style de fazer a sua magia.
Para criar a seleção para o recorte, vamos criar uma nova forma retangular no espaço que queremos que o corte de navegação para ser. Use um raio de 10px aqui (que é metade do raio do recipiente "camada"), para garantir que o canto tem espaçamento consistente onde é arredondado.
Se necessário, mova a forma para a parte superior direita de suas linhas guia interior estofamento. Depois de ter a camada no local, Command-clique a camada na paleta de camada de forma que ele está selecionado.Escolha o "container" camada e aperte Delete. Agora você pode ocultar o seu 10px retângulo arredondado para a navegação, e seu "container" camada irá agora mostrar um recorte como pode ser visto abaixo.
Observe como bom os cantos arredondados são. Se tivéssemos apenas uma área selecionada quadrados e arredondados a seleção, os cantos do corte teria parecia muito agitado. Além disso, não é bom como o estilo de camada são automaticamente aplicados para a camada, e todo o chanfro e sombras nós adicionamos olhar grande.
Agora precisamos de algum texto. Eu escolhi Rockwell como minha fonte (que vem com MS Office, mas também pode ser comprado). Uniformemente espaço de seus elementos de navegação dentro do recorte como mostrado.
Queremos dar ao texto um efeito gravado na pedra, e para isso, nós adicionamos uma sombra para o texto (que também pode adicionar uma sombra interna, no entanto, faz o texto parecer mais fino do que realmente é). Aqui estão as configurações de sombra eu geralmente uso.
Passo 7 - Active Navegação tecidos através da página
Para conseguir o efeito desejado, vamos criar uma nova camada logo abaixo do texto, é adicionado para a navegação. Renomeie esta camada "nav ativa." Preencha esta seleção com qualquer cor (não importa).
A seguir, vamos precisar adicionar alguns estilos de camada para o Nav "ativo" da camada. Eu tenho-lhes dado abaixo (você precisará de um Drop Shadow, Gradient Overlay Stroke, e Inner Glow).
Duplicar o seu Nav "ativo" camada (Command + J), e aplainar todos os estilos de camada. Renomeie esta camada "nav ativos achatado." Estamos indo para a aplicação de algumas culturas para esta camada, e não queremos que os estilos de camada mais.
Use a sua ferramenta de seleção para excluir o curso e Inner Glow do topo e no fundo do nav "ativo achatados" camada.
Agora precisamos adicionar as sombras para tornar o nav "olhar camada activa", como é tecida através do "container" camada. Nós vamos criar essas sombras usando a ferramenta Ellipse.
Crie uma elipse preta que 20px é mais amplo do que a largura do nav "ativo achatados" camada e aproximadamente 5px de altura. Centro de sua elipse na borda superior do nav "ativo achatados" camada.Botão direito do mouse e selecione a camada Rasterize Layer. Renomeie esta camada para "Top ativos sombra."
Precisamos de borrão a elipse um pouco, vá para Filter> Blur> Gaussian Blur e aplique com um raio de 2px.Agora que a elipse se parece mais com uma sombra, vamos em frente e elimine os 50% superior da sombra.
Ajuste a opacidade da "sombra top activa" da camada para 75%. A sombra superior é feito. Para criar a sombra de fundo, duplicar a camada (Ctrl + J), aplique Edit> Transform> Flip Vertical, e mover a sombra ao fundo do nav "achatados camada activa."
Passo 8 - Concluir o cabeçalho Com um logotipo
Antes de chegarmos ao logotipo, vamos terminar o nosso cabeçalho um pouco. Primeiro vamos acrescentar mais um par de guias. Desenhar uma 40px guia horizontal abaixo do fundo do corte de navegação, como mostrado.
Nós vamos criar a nossa linha de separação, o que dará a impressão de que o recipiente "camada" tem uma gravura ou é dobrado neste local. Para criar esse efeito, elaborar uma 1px heigh linha horizontal em uma nova camada em execução a largura do container "camada. Encha a sua linha horizontal com um verde escuro (eu escolhi o fundo da mina). Renomeie esta layer "linha de separação".
Para obter o condicionamento sentir, duplicar a linha de "separar" camada e preencha essa camada com branco. Mova esta camada 1px para baixo, para o topo da toca a linha original "separar" da camada.
Agora precisamos adicionar o nosso logotipo. Eu não sou muito de um designer de logo, então eu escolhi uma fonte legal (Gill Sans) e escreveu um texto grande no canto superior esquerdo. Assim como fizemos o recorte para a navegação, faça uma seleção do texto logo em seguida, excluí-lo do "container" camada. Mais uma vez o Layer Styles vai se ajustar à nova forma, e atualizar a ele.
O asterisco foi feito usando a técnica exatamente o mesmo como o elemento de navegação activa, para exibi-la como está saindo do "container" camada.
Itens Passo 9 - Destaque Portfolio
Mais uma vez, vamos usar a técnica de recorte em que foram utilizados para a secção de navegação.
Crie um retângulo arredondado, com um raio de 10px fronteira. Certifique-se de permitir espaçamento de 40px em todos os lados (que criou o simulador mais cedo para ajudar com isso).
Command-clique a camada retângulo arredondado para selecionar e, em seguida, selecione o contêiner "camada e aperte Delete. Você pode remover o retângulo arredondado, já que não vai utilizá-lo por mais tempo.
Depois, temos que criar as setas em cada lado, assim você pode ter vários itens de portfólio na primeira página e alternar entre eles em uma espécie de slideshow. Para fazer isso, criar um círculo de diâmetro 40px com a ferramenta Forma. Mova o círculo no lugar do lado esquerdo, centrando-o na borda do corte.
Duplicar o círculo para o outro lado, e mais uma vez centro, no outro extremo do corte (horizontal e verticalmente).
Importante
Como não estamos trabalhando com máscaras de vetor aqui (e nossa suficiência está definido para 0% sobre o "container" camada), precisamos momentaneamente ajustar isso para garantir que nós podemos adicionar para o "container" camada.
Então, vamos definir o preenchimento do "container" camada de 100%. Agora Merge Down (Ctrl + E) ambos os círculos que criamos para as setas para o recipiente "camada. Uma vez que se fundiram para baixo, então você pode definir o preenchimento do "container" camada de volta para 0%. Aqui é o seu efeito desejado:
Aviso da forma como os dois círculos tornaram-se agora do "container" camada.
Em seguida, será necessário adicionar algumas flechas. Você poderia facilmente criá-las usando parênteses, porém eu escolhi para criar meus próprios.
Crie um retângulo arredondado, com um raio de Fronteiras dos 3px, largura de 20px, Altura de 6px; e colocá-lo logo acima onde você quer a seta. Transformar e Rotate (Command + T), o retângulo arredondado de 45 graus sentido anti-horário por isso é inclinado. Isto é como nós vamos fazer o ponto da seta.
Duplicar o retângulo arredondado (Command + J) e Edit> Transform> Flip Vertical. Mova a camada no local, de tal forma que os cantos esquerdo estão alinhados produzindo um suporte. Na paleta Layer, selecione os dois retângulos arredondados e mesclar as camadas (Ctrl + E). Renomeie a layer "seta para a esquerda." Aqui está como sua flecha deve procurar:
Nós precisamos adicionar alguns estilos de camada para a seta para ajustá-la com o resto do projeto como segue:
- Preencha: 0%
- Inner Shadow: Opacity de 50%, Ângulo, 120, distância de 2, Choke definido como 0, o tamanho de 3, e Ruído a 0
Duplicar a "seta para a camada (Ctrl + J) e Edit> Transform> Flip Horizontal. Renomeie esta layer "seta para a direita", e movê-lo para o lado direito do corte.
Uma última coisa que precisamos acrescentar para o nosso portfólio itens destacados área é uma sombra para dar-lhe alguma profundidade. Adicionar um gradiente de preto para transparente, na parte inferior do recorte como mostrado.
Para cortar fora de todo o gradiente excesso fora do entalhe, simplesmente Command + Clique no contentor "camada e aperte Delete. Nós estaremos colocando nossos screenshots abaixo desta camada para dar a ilusão de profundidade.
Passo 10 - Adicionando um item de portfólio
Tire um screenshot do seu site favorito (eu usei um da minha própria carteira, ryanscherf.net). Renomeie esta layer "imagem".
Adicionar um derrame e Inner Shadow à imagem de "usar sua camada Layer Estilos:
Duplicar a imagem de "camada, e aplainar todos os estilos (layer mesclar a cópia de tela" com uma camada de novo, em branco). Gire a cópia de imagem "camada de 45 graus sentido anti-horário, assim como você fez para as setas na Etapa 9.
Coloque a tela no canto inferior esquerdo do recorte da carteira, assegurando que a parte superior da tela sai fora da corte (nós estamos indo dar-lhe alguma profundidade) e fazendo com que pareça que é escondido atrás do "container" camada. Cortar qualquer excesso da cópia de tela "na parte inferior, como mostrado.
Agora que temos a nossa imagem no lugar, vamos adicionar uma pequena descrição para a direita. Nada muito chique aqui, mas ainda tentando ficar com o nosso tema de profundidade e as camadas.
Criar um texto com um quase branco (ou azul muito claro / cor verde). Use a sombra mesma técnica decondicionamento da navegação (Angle em -60 graus, à distância de 1px e tamanho de 1px).
Crie um quadrado opaco por trás do texto. Eu usei uma camada toda preta, com 30% de opacidade. O efeito deve ser semelhante a este:
Precisamos de alguns pontos de navegação, como as vistas iPhone. Nós vamos criar um ponto ativo, que usará a mesma exata Layer Estilos como o nav "ativo" camada (espero que você não apagá-lo), e um inativo ponto que utiliza os estilos de camada do "seta para a camada.
Nota: Reutilização de Estilos da camada é importante não só porque poupa tempo de ter de recriar estilos semelhantes, mas também porque irá manter o seu projeto consistente.
Crie um círculo utilizando a ferramenta de forma, com um diâmetro de 20px (I like my pontos de navegação grandes, como eu acho que às vezes são demasiado duros para clicar e navegar). Direito do mouse no nav "ativo" camada e escolha Copy Layer Style. Selecione o círculo da sua paleta de camadas, com o botão direito do mouse e escolha Paste Layer Style.
Repita essas etapas para tantos pontos inativos como você gostaria, certificando-se de usar o estilo da camada "seta para a camada.
Passo 11 - identificá-lo com uma fita
Precisamos deixar os nossos visitantes saibam exatamente o que estamos apresentando aqui. Nós vamos criar uma fita usando exatamente a mesma técnica que usamos para o nav "ativo" camada, o que foi descrito acima no Passo 7.
A única diferença aqui é que eu acrescentei um pouco de opacidade maior para a sombra projetada para garantir que ele olha como ele está descansando agora acima de tudo.
Para terminar esta seção, queremos duplicar (Command + J) a nossa linha de "separar" camada que criamos no passo 8 e mova-o 40px abaixo do recorte itens de portfólio. That's it!
Passo 12 - Criar a principal área de conteúdo
Vamos primeiro criar mais guias para garantir que temos três colunas iguais. Não se assuste, mas nós vamos ter que fazer alguma matemática aqui:
Site 960px de largura - 80px de padding interior = 880px de espaço disponível para as nossas colunas. Nós também queremos adicionar 40px preenchimento entre as colunas, assim, no essencial, temos 800px disponíveis para os nossos 3 colunas.
800px dividido por 3 é igual a 266px por coluna (eu escolhi o meu colunas como 267px, 266px, 267px da esquerda para a direita para manter o equilíbrio). Assim, chamar as guias nestes intervalos, garantindo que você conta para o preenchimento 40px de cada lado da coluna central.
Passo 13 - Mais da Coluna Blog
Criar um novo grupo em sua camada na paleta com o nome, "Últimos do Blog." Isto é onde nós vamos manter todas as camadas referentes a esta secção.
Criar um texto para a posição. Mais uma vez, eu usei a fonte Rockwell com os mesmos estilos de camada degravação que usei na navegação. No caso de você esqueceu, é descrito na Etapa 6.
Selecione uma forma personalizada para cada lado da âncora do texto. Eu escolhi uma forma personalizada padrão do Photoshop, mas existem literalmente milhares de formas personalizadas você pode adicionar à sua biblioteca.
Nós precisamos adicionar alguns estilos de camada para as formas de torná-los olhar um pouco mais 3D:
- Color Overlay: 0e696a #
- Inner Shadow: Opacity em 63%, de ângulo de 120 graus, à distância de 1px e tamanho de 1px
O produto final deve ficar parecido com a imagem seguinte.
Nós precisamos de algum texto abaixo para o nosso blog. Certifique-se que sua cor do texto é uma leve sombra do azul / verde do fundo. Nós podemos usar tantas máscaras diferentes do azul / verde como gostamos, e que irá certamente fazer o nosso texto se destacam.
Para tornar o texto gravado olhar mais uma vez, vamos tentar um spin pouco diferente sobre a técnica anterior. Antes de nós adicionamos uma sombra preta na parte superior esquerda do texto, porém uma vez que estamos usando um texto pouco mais claro, vamos acrescentar a nossa sombra para baixo à direita, usando o branco. Você pode ver o efeito abaixo:
Eu usei o costume, a forma redonda para as balas, e reutilizados no estilo da camada de formas personalizadas que adicionou no cabeçalho desta seção.
Passo 14 - Most Recent Twitter Updates
Esta secção deve ser bastante fácil. Duplicar o mais recente "do grupo de Blog" e renomear o duplicado para "Twitter Updates".
Ajustar o texto a ser mais um indicativo de uma atualização de Twitter (links, menciona, timestamp, etc.)Mover a este grupo para a coluna central - e pronto!
Passo 15 - Newsletter Sign Up Form
Duplicar o "Twitter Updates grupo", e renomeá-lo para "Newsletter". Mover a este grupo para a coluna da direita.
Ajustar o conteúdo a ser mais como um parágrafo descritivo, bem como remover todas as balas (parágrafos introdutórios geralmente não precisa de balas).
Para criar o formulário de email, vamos criar um retângulo arredondado com raio de 10px de Fronteiras, e altura de 40px. A largura deve ser 266px (ou o que você escolheu como a largura da coluna à direita).Renomeie esta camada para formar "input", e definir os estilos de camada do seguinte modo:
Por fim, precisamos de um botão para enviar o formulário. Nós usaremos nossos estilos de camada do nav "ativo" camada para o botão, como gostaríamos de manter essa aparência consistente a todos os nossos elementos.
Crie outro retângulo arredondado, altura de 40px, 140px de largura e um raio de Fronteira de 20px. Renomeie esta camada para "botão".
Copiar o estilo da camada nav "ativo" camada e cole-o no botão "camada.
Duplicar o texto da navegação (Command + J) e alterá-lo para dizer "Subscribe". Move o texto a ser centrado no botão. O resultado deverá ser parecido com a imagem abaixo.
Passo 16 - Adicionar Informações sobre direitos autorais
Os clientes sempre solicitam, e você deve sempre adicioná-lo. Fora e abaixo do seu "container" camada, acrescentar algumas informações sobre direitos autorais. Utilizando a técnica de gravação novamente para dar-lhe alguma profundidade.
Conclusão
Espero que isso ajude a todos explorar algumas novas fronteiras com os seus próprios desenhos. Como você viu, muitas das técnicas discutidas aqui são simples, mas elegante e devem ser fáceis de implementar em seus próprios projetos.
0 comentários:
Postar um comentário