You are on page 1of 35

Anuncie Aqui

• Tutorials\
• Projeto

Design e código de um site a partir do zero


Slick - Parte I
Felix Boyeaux em Maio 28th 2009 com 119 comentários
Compartilhar
Com a Internet cada vez mais popular a cada minuto, um ótimo site para o futuro é algo de um must-have.Você poderia,
obviamente, pagar um web designer para criar um para você, mas não seria muito legal para projetar e codificar é
mesmo? "Difícil", você pode dizer, mas não é realmente muito difícil, uma vez que você tenha aprendido como fazê-lo!
Nesta primeira parte, você vai aprender como criar um website com aparência elegante que você pode facilmente adaptar-se ao
seu negócio. É hora de começar!

Step One - O que iremos fazer


Eu suponho que você poderia querer saber o que nosso projeto será a aparência, uma vez terminado. Eu não vou fazer você
esperar mais, aqui é o que estaremos construindo ao longo deste tutorial.


 
As razões deste projeto será bastante atraente para os seus leitores são os seguintes:
• Usabilidade, facilidade de utilização.
• A vida "atmosfera", com a imagem e as sombras.
• Centrado em conteúdos, o layout não tem a atenção do leitor a partir das informações úteis
• O blog e twitter integração cria uma relação mais estreita entre o leitor e sua empresa.

Segundo Passo – Estrutura


Algo extremamente importante quando se inicia o projeto de um website é a definição de uma estrutura clara de que você vai
seguir, não importa o quê. A primeira razão este é importante porque você quer que seu conteúdo seja tão visível quanto
possível, e não perdido em um layout confuso. A segunda é que você vai querer guiar o olhar do seu leitor através de todas as
informações contidas na página. A mente humana vai começar a ler uma página web a partir do canto superior esquerdo e fará a
varredura de todo o caminho até o canto inferior direito. Por essa razão, colocando uma barra lateral à esquerda do seu conteúdo
poderia distrair o leitor e, em um pior cenário, até mesmo perdê-lo.
Eu escolhi a seguinte estrutura para este projeto:


 
Existem algumas razões para que eu escolhi essa estrutura:
• Como eu já disse, é centrado em conteúdos.
• Tem um website profissional o sentimento de que, não se parece com um blog.
• Não é realmente complicado código!

Terceiro Passo – Começando


Neste tutorial, estarei usando o Photoshop CS3 no Windows Vista, mas você deve ser capaz de segui-lo com qualquer versão
do Photoshop CS, uma vez que as técnicas utilizadas são bastante fáceis. Eu serei certo para apontar as diferenças entre
Windows e Mac, também, se houver.
Dito isto, vamos começar! Vamos começar com um documento em branco de 1600 por 1200 pixels, com um fundo
transparente, uma resolução de 72ppi e RGB de 8 bits in Colour Mode deve fazer muito bem.


 
Você pode perguntar por que eu estou usando esse documento de largura. As razões são simples:
• Dá-lhe espaços para trabalhar, e, portanto, não olhar confuso.
• Ela mostra que você se importa com resoluções widescreen na concepção, o que muitos web designers não.

Quarto Passo - Configurando Nosso Espaço


Você vai perceber ao ler este tutorial que eu sou um pouco de um guia de geek. Eu simplesmente adoro ter governantes para me
guiar no meu processo de design. Você deve, portanto, começar com a exibição governantes. Vá para View> Rulers ou
simplesmente usar o atalho Ctrl / Cmd + R. Certifique-se que eles são exibidos em pixels, botão direito do mouse em uma
régua e escolhendo "pixels" da lista.
Em seguida, vamos configurar alguns guias vertical. Ativar Snap (Ver-> Ajustar ou Shift + Ctrl / Cmd +; ), e começar por
colocar um guia de 800 pixels. Aqui é onde vem a rotura a calhar porque "engrandece" o guia até o centro do
documento. Precisaremos também de guias e 1200px 400px. Por que isso? Bem, simplesmente porque 1200 - 400 é igual a 800
e que queremos que o nosso projeto para exibir corretamente em 800 * 600 telas também.
A última coisa que precisamos fazer é criar guias horizontais em 450px para o meio, e 300 e 900px para a margem superior e
inferior.
Eu costumo também definir guias nas bordas do meu documento para agarrar os cantos mais facilmente.
Isso nos deixa com um layout de grade coerente que seremos capazes de desenvolver para o nosso projeto.


 
Neste caso, tenho apenas de cor o nosso fundo de outra forma transparente para que você possa ver as melhores guias.

Passo cinco - A barra de status


Vamos iniciar o nosso projeto desde o início e, em seguida, o design do nosso caminho até o rodapé. Isso garante o mínimo
questões com espaçamento vertical.
Eu gosto de manter as coisas organizadas no meu PSD, então vamos começar por criar um novo grupo chamado Layer Status
Bar, no qual vamos manter todas as nossas camadas relacionadas a este bar.
The Shape
Antes de prosseguir, é evidente que precisamos para fazer nosso plano pronto. Queremos que ele ocupe toda a largura e tem
uma altura de 50px. É por isso que nós estamos indo para um lugar novo guia horizontal em 50px.
Então, em um grupo chamado Box camada, crie um novo retângulo com o Rectangle Tool (U). A cor do rectângulo deve ser #
f8f8f8, que é muito cinza, e não tão brilhante e cansativo para os olhos como o branco.


 
A etapa seguinte diz respeito à fronteira. Nós queremos separar esse bar do resto do projeto, assim que uma borda inferior é
apropriada aqui. Criar uma nova camada chamada Borda, em seguida, pegar aSingle Row Marquee Tool, escondendo-se sob
a Rectangle Marquee Tool (M)e selecione uma linha direita sob a forma nós criamos, recentemente. Preencha a seleção com #
959595 usando Alt + Backspace. Então vá ao > Transform Selection-Select e pressione a seta para baixo uma vez para fazer a
seleção Shift pressionada por um pixel. Agora, preenchê-lo com o branco (# FFFFFF). Isso faz uma bela borda chanfrada
bonito:

O passo final é adicionar um pouco de sombra para criar algum volume. Criar uma nova camada chamada Shadow e adicione
uma máscara de corte entre a camada de fundo e esta usando Ctrl + Alt + Cliqueentre as duas camadas. Pegue o Gradient


 
Tool (G) com um gradiente linear de preto para transparente, e fazer um alto gradiente 15px a partir do fundo da caixa. Defina
a opacidade da camada para 15%.

Mensagem de Boas Vindas

Agora que o nosso caixa está criada, podemos começar a alimentá-lo com algum texto e outras coisas úteis. Vamos começar
com a mensagem de boas vindas. No grupo de camadas Status Bar, crie uma nova camada chamada Welcome.
Agora, com a ferramenta Type (T)e, a partir de 400px da margem esquerda, vamos escrever a nossa mensagem. Certifique-se
de centralizar o texto verticalmente dentro da caixa também.
A fonte que estou usando é:
• Arial Regular
• 12px
• Suavização: none
• # 515151
Esta será a nossa fonte de parágrafo padrão.

Ações

Vamos ter feito com a barra de ação. Eu gosto de usar um bar como em meus projetos web, pois é um lugar onde você pode
colocar elementos que simplesmente não se encaixam em nenhum outro lugar.


 
Criar um grupo nova camada chamada Ação bar, em que vamos desenhar um retângulo arredondado (U). Deve ser alta para
deixar 30px 10px margem superior e inferior e grande o suficiente para quebrar os nossos laços. Torná-lo opaco 55% e alinhar
a sua borda direita para o nosso guia centro.
Em seguida, basta escrever algumas ligações que seriam relevantes para o seu site. Eu escolhi login, sitemap, e licença.
Observe que eu ainda estou usando o mesmo tipo de letra Arial com cor branca.

Caixa de pesquisa
Uma característica muito importante desta barra superior é o campo de busca. Eu escolhi uma forma como a Apple, porque eu
acho que está muito bom, e é realmente muito fácil de design também.
Comece com o Rounded Rectangle Tool (U) com um raio de 10px, e fazer uma forma que é 20px alto a fim de tornar as
bordas parecem perfeitamente redondas. Nome essa camada do campo e colocá-lo em um grupo de nova camada chamada
Search Box, alinhá-lo com a guia de 1200px vertical, e adicionar os estilos de camada que se segue:


 
Então, usando a Custom Shape Tool (U), eo vidro de forma Lupa Web.csh (que é uma forma padrão, mas que poderá ter de
carregar), faça um pequeno ícone dentro do campo, a fim de mostrar que o campo é para.
Por fim, digite a palavra "Search" no campo usando Arial eo cinza escuro é usado para a mensagem de boas vindas.


 
É isso aí! Nós somos feitos com a barra de status, você pode dobrar em todos os grupos de camada para fazer a nossa limpeza
paleta camada.

Passo Seis - o cabeçalho


O aspecto mais importante de um projeto web é provavelmente o cabeçalho. Esse é o lugar onde você pode soltar a sua
criatividade e fazer o seu site olhar surpreendente. No entanto, seu cabeçalho também precisa mostrar um logotipo ou um bloco
de texto com o nome da sua empresa.
Eu decidi usar uma foto do meu cabeçalho para este projeto, porque é fácil e rápido de fazer, e olha simplesmente brilhante. Eu
encontrei esta foto grande em cima da stock.xchng, mas sinta-se livre para escolher o seu próprio. A grande coisa com a
utilização de uma imagem como cabeçalho é que você pode mudar totalmente a sensação de seu Web site apenas por mudar a
imagem. Você pode até ter uma imagem diferente em cada página!
Adicionando a Imagem
Primeiro, vamos precisar criar um grupo de nova camada chamada "cabeçalho". Nesse grupo, usando aferramenta retângulo
(U) e os guias que nos chamou mais cedo, fazer uma forma entre 50 e 300px de altura. Este vai ser o nosso caixa. Em seguida,
importe a imagem em seu documento usando drag & drop.Redimensioná-lo, e criar uma máscara de corte entre a imagem ea
forma.

10 
 
Observe como já temos este aspecto é muito legal para o nosso projeto?

Logotipo

Você deve, obviamente, colocar seu próprio logo aqui, mas para o propósito do tutorial, vamos fazer um fácil usar alguns
truques tipografia.
Eu vou usar a fonte Myriad Pro, que deve ser instalado no seu computador com o Photoshop CS. Se não, você pode tentar
encontrar outra fonte legal porque Myriad é, infelizmente, muito caro.
Usando este tipo de letra:
• Myriad Pro
• 48px
• # 4d4d4d
• Suavização: Smooth
Estou escrevendo o nome de uma empresa fictícia: na estrada. Esta camada é alinhado com o guia de 400px verticais.
Em seguida, o subtítulo "Studio" vai ser escrito abaixo dele. Ainda estou usando Myriad Pro, mas desta vez com as seguintes
configurações:
• 12px
• # 6ebacd
• Todos os Caps-
• Negrito
• Letter-spacing: 2300
Isso faz com que o item a mesma largura que o nome da empresa, sem ter muita atenção do leitor. Para manter as coisas
organizadas, eu estou colocando isso em um grupo de camada chamada "Logo".

Agora que estamos a fazer com o cabeçalho, vamos começar com a grande parte do tutorial, o conteúdo!

Parte Sete - O Conteúdo da Caixa, Wrapper e Tabs


Para fazer a caixa de conteúdo, é preciso decidir o quão alto o rodapé deve ser. Eu acho que 100px é bom, não muito alto nem
muito pequena. Nós não precisamos de escrever um monte de texto, para 50px é suficiente. Então nós também queremos que o
fundo da imagem para fazer o rodapé menos entediante.Nós vamos dar muito que 50px.
Devemos, portanto, colocar um novo guia horizontal em 1100px. Para manter as coisas arrumadas, crie um grupo de nova
camada chamada Content também. Vou explicar mais tarde porque o PSD manter limpo é muito importante, mas para o
momento, você só precisa acreditar em mim quando digo que é.

11 
 
The Box

Criar um novo grupo chamado Layer Box, e usando a ferramenta retângulo (U), ea mesma luz cinzenta que usamos para a
barra de status (# f8f8f8), desenhe um retângulo que vai de 300px para 1100px de altura, tendo todo o espaço horizontal.
Em seguida, é preciso criar fronteiras. Nós vamos usar as mesmas fronteiras entre a caixa de conteúdo e imagem que fizemos
entre a barra de status ea imagem. Em vez de fazer a coisa toda seleção novamente, basta buscar a camada Borda na barra de
status da camada de grupo / caixa, duplicá-la duas vezes usando Ctrl / Cmd + J, e chamar as duas camadas de borda superior e
inferior das fronteiras. Em seguida, colocá-los no conteúdo da camada de grupo / caixa. Você pode deixar o Border camada
inferior como é, e basta colocá-la em alta 1200px, porém, você vai precisar flip Border Top verticalmente para ter uma borda
consistente ao redor da imagem. Digite Free Transform Mode (Ctrl / Cmd + T), clique com o botão direito do mouse na caixa
e escolha Flip Vertical. Coloque a fronteira 300px de altura.

O passo final é adicionar sombras à parte superior ea parte inferior da caixa. Nós estamos indo fazer a mesma coisa que fizemos
antes para a sombra, criar duas camadas sobre a sua forma, Top e Bottom Shadow e adicione uma máscara de corte entre
eles. Em seguida, pegue a ferramenta Gradient (G) com um gradiente de preto para transparente, e faça um gradiente de 15px
em cada camada. As camadas devem ser de 15% opaco.

12 
 
Page Wrapper

Em vez de começar com as abas eo menu de navegação, vamos fazer a capa da primeira página, a fim de definir a largura e ter
algo para ir em seguida.
Queremos 50px entre o cabeçalho e as guias, para fazer a respirar design. Os guias vão ser 35px de altura. Devemos, portanto,
estabelecer algumas guias (sim, outra vez!) Com 350 e 385px. Para nivelar as coisas, o invólucro página vai ser 365px de
altura, por isso estamos colocando o nosso guia na última 650px.
Em seguida, crie um grupo de nova camada "wrapper" em nosso grupo de Conteúdo. Isto é onde nós estamos indo para colocar
nossas camadas agora. Você também precisa de três grupos camada dentro dele: Box, Apresentação de slides, e Mensagem.
Fora guias verticais agora vêm a calhar. Usando a ferramenta retângulo (U), faça um # (ffffff branco) retângulo na caixa de
recém-definida. Em seguida, adicione os estilos de camada seguinte a ele:

13 
 
Isto é o que deve ser parecido:

O Slideshow
Vamos começar com a apresentação de slides. Slideshows, carrosséis, sliders, ou o que você quiser chamá-los, são uma forma
eficaz de mostrar um monte de fotos, diagramas ou qualquer outra mídia em uma caixa muito pequena. É bastante fácil de
configurar em um site, e com alguns efeitos suave JS, ele não olha muito legal! É por isso que eu gosto muito slideshows.
Mas antes de começarmos com o conteúdo da embalagem página, vale a pena fazer 15px de padding em volta da caixa (sim,
você deve usar guias). Nós também queremos cortar essa embalagem em duas partes: uma com o carrossel, e um com a caixa
de texto pouco. Felizmente, o nosso guia de largura de 50% faz isso para nós. No entanto, não queremos que o texto ea barra
para estar ao lado uns dos outros, por isso, devemos definir padding 15px de cada lado do meio da caixa.
Isto é o que deve ser parecido:

14 
 
Como você pode ver, o guia de altura 50% separa nossa caixa em duas caixas vertical também. Vamos aproveitar isso. Aqui
está o que a estrutura da nossa caixa será:

Agora nós podemos realmente começar a construir o slideshow. Faça um retângulo preto cobrindo a caixa de imagem inteiro
(cf. Ilustração), em seguida, adicione um 1px dentro do curso com a cor # a7a7a7. Em seguida, crie uma nova camada chamada
"Imagem" sobre o seu retângulo e adicione uma máscara de corte entre eles. Agora você pode importar a imagem que você
quer, redimensioná-lo, e fazê-lo com bom aspecto. Estou usando um dos meus projetos web que você pode encontrar aqui se
você quiser usá-lo para a finalidade do tutorial. Em um site ao vivo no entanto, você deve obviamente usar o seu próprio.

Agora precisamos criar o nosso painel de comando. Usando o Rounded Rectangle Tool (U), com um raio de 5px e uma cor
preta, crie uma caixa que é 30px menos largo que a sua imagem. Certifique-se de esconder os cantos arredondados na parte
superior por trás da imagem. Defina a opacidade da camada para 55%. Considerando sou um maníaco Layer Group, criei um
novo chamado de Comandos, que eu coloquei por trás da nossa camada de imagem.

15 
 
Então, usando a ferramenta Polygon (U) com três lados, fazer dois triângulos para atuar como seu próximo e comandos
anteriores, pois, com 12px Arial branco, escreva o título da sua imagem.

Great! Agora estamos a fazer com o slideshow. Observe como ele é extremamente simples, nada de distração da imagem. Isso é
o que eu quis dizer com conteúdo centrado e não centrado no layout.

A Mensagem
Antes de irmos adiante, devemos apenas adicionar um separador entre os dois blocos. Como eu disse antes, no meio do
documento corta a caixa em duas partes iguais, mas nós ainda queremos enfatizar que a utilização de uma borda 1px. Criar uma
nova camada chamada de separação, e depois usar o Single Column Marquee Tool para fazer uma linha de 900px de
largura. Preencha com preto, e usar aRectangle Marquee Tool (M) para limpar as partes superiores da linha. Defina a
opacidade da camada para 30%.

Ok, agora que nós temos feito isso, nós temos que encontrar um título atraente para o nosso texto de boas-vindas. O título aqui
vai obviamente depender do tipo de site que você está construindo. Optei por criar um layout para uma agência de web design,

16 
 
por isso vou colocar "Construímos websites grande!".Sim, eu sei que isso soa um pouco mais confiante, mas a única coisa que
faz é empurrar o leitor a olhar mais para seu site.
Esta posição será o segundo elemento visitantes verá logo após, então temos que fazê-lo sobressair. Eu ainda estou usando a
fonte Myriad Pro para o meu rubricas:
• Myriad Pro Regular
• 24px
• Suave
• # 6eb9cc
Esta será a posição padrão da fonte.
Observe como a cor que uso é a mesma que usamos para o item no logo?
Use nossos guias para colocar o título com o preenchimento correto.

Eu não estou indo incomodar-se com o texto agora, pois esta é mais sobre o projeto que o conteúdo.Então, eu vou usar apenas
um simples Lorem Ipsum texto do espaço reservado.
Alguns detalhes sobre o texto em web design: Não se esqueça que o texto é feio. Texto faz um projeto web olhar confuso e
difícil de ler. Para evitar isso, nós precisamos fazer nosso texto bonito. Um truque para fazer isso é ter o texto o menos possível,
para manter os parágrafos curtos e usar 1.5x espaçamento entre linhas. Esta última dica torna o seu texto olhar mais amigável e
mais legíveis do que uma única linha de texto espaçados.
Clique e arraste com a ferramenta Type (T) para criar uma caixa de texto, e depois preenchê-lo com algum texto aleatório. Eu
estou usando minha fonte número, Arial, aqui:
• Arial Regular
• 12px
• 20px-Line espaçamento
• # 4d4d4d

O passo seguinte será o de acrescentar algumas informações de contato. É uma boa idéia para fornecer este em sua página
inicial, considerando que cria um relacionamento mais próximo com o cliente, mostrando que você não tem nada a esconder.

17 
 
Para enfatizar essa informação, vamos usar dois do costume Photoshop formas padrão: o telefone ea carta do objects.csh
arquivo.
Comece com o seu número de telefone. Agarre a Custom Shape Tool (U), e selecione a forma de telefone. Usando a cor #
7d7d7d, desenhe um pequeno telefone centrado na guia 600px, em seguida, usando a nossa fonte Arial, digite o seu número de
telefone. Resolvi colocar isso em um grupo de nova camada chamada "Contato".

Na mesma linha, faça o mesmo com seu endereço. Uma vez que um endereço é bastante longo, resolvi dividi-lo em várias
linhas, mas você pode decidir mantê-lo em um único, se adapta às suas necessidades.

M'kay, agora que esta página de boas-vindas for feito, vamos fazer o nosso menu de navegação com abas.

Barra de navegação
Eu escolhi tabs porque eu acho que é uma ótima maneira de mostrar as páginas com. Ela se sente realmente em frente em linha
reta e natural devido ao fato de que estamos acostumados a folhear páginas na vida real. Eu também decidiu incluir comandos
anteriores e seguintes. Isto pode não ser relevante para o seu site, mas neste caso, o leitor vai aterrar na tela de boas-vindas,
então ele pode querer ir e ter um olhar para a carteira, em seguida, leu algo sobre a empresa e, finalmente, entre em contato
conosco se está interessado em nossos serviços. Para tornar esse processo mais fácil, próximo e anterior são realmente úteis.
Nós precisamos criar um grupo de nova camada com o grupo "camada Box" antes de começar. Chame-Tabs. Para tornar as
coisas mais claras, vou criar um grupo de nova camada para cada guia também, respectivamente anterior, Home, Portfolio,
About, Contatos e em Avançar. Nós não qualquer tipo de texto agora. Em vez disso, vamos apenas criar a estrutura. Para se ter
uma idéia, isso é o que ele vai olhar como depois de ele ter acabado:

Vamos começar com o lado direito. Agarre seu Rounded Rectangle Tool (U), com uma cor preta e um raio de 5px, e depois
fazer um bom pequeno rectângulo arredondado na borda superior direita da caixa de conteúdo. Esconder os cantos

18 
 
arredondados na parte inferior por trás da caixa. Não se esqueça que você quer que o topo de suas abas a 50px sob a imagem de
cabeçalho, para usar o guia criado para ajudá-lo.

Nós não terminamos ainda. Precisamos livrar-se do canto arredondado à esquerda. Para fazer isso, use oConvert Point Tool,
escondido sob a Pen Tool (P), clique sobre o caminho para fazer aparecer os pontos de ancoragem, então, com o Delete
Anchor Point Tool, apague a dois pontos de ancoragem na extrema esquerda. Photoshop vai tentar compensar esta arrastando
as alças e isso vai criar uma forma estranha.Basta pegar o Convert Point Tool novamente e clique sobre os restantes dois
pontos de ancoragem à esquerda para reinicializar os punhos. Reveja as animações abaixo para fazer as coisas mais claras:

Ótimo, agora só precisamos ajustar a opacidade para 55%. O próximo passo é adicionar os retângulos para cada página. Não se
esqueça de colocá-lo no grupo de camada correta. Você deve, obviamente, usar a Ferramenta Retângulo (U), com uma cor
preta e defina a opacidade para 55% também. Deixar uma margem entre cada retângulo também para tornar as coisas mais
limpas. Isto é o que você deve ter agora:

A última parte da estrutura é a forma de botão anterior. Você precisa usar a Pen Tool (P) para um presente, então vá em frente
e aprender a usar é que se você não já. Não é um desperdício de tempo: a caneta é provavelmente a mais poderosa ferramenta
do Photoshop.
Se você souber como usar a Pen Tool (U), desenhe uma forma como esta:

19 
 
Em seguida, coloque-o no grupo da camada anterior, e no lado esquerdo das formas atuais.

Para as ligações, eu estou usando Myriad Pro novamente, desta vez tamanho 14 e # f6f6f6 como a cor.Desde "Home" é a nossa
página atual, estamos indo para definir o seu peso em negrito para enfatizar isso.Eu costumo mostrar o efeito hover no menu
também, assim que explica por que devemos colocar a Carteira "link" em azul # 6eb9cc. Os links são, obviamente, centrado
para lhe dar um aspecto mais agradável.

Agora, usando a mesma técnica que usamos para criar os comandos de slideshow, devemos agora criar duas setas, uma
apontando para a esquerda e uma direita, para simbolizar a anterior e seguinte. Faça a sua Polygon Tool (U) queimar!

Isso parece ótimo! No entanto, ele parece um pouco estranho ter o link azul sozinho. Para simbolizar o fato de que ele é um
efeito hover, vamos adicionar um cursor sobre o link. Você pode pegar um presente:

Este é o seu menu de navegação com abas acabado deve ser parecido:

20 
 
Olha bem arrumado não é? Acredite ou não, estamos agora feito com o invólucro. Este foi o mais "área" corporate do nosso
design. O que vamos fazer agora é a parte mais divertida, eu estou falando sobre o módulo de blog e twitter do módulo.

Oitavo Passo - O Módulo Blog


Nós precisamos criar alguns guias aqui também. Para manter a coerência em nosso projeto, vamos ter uma margem de 50px
entre a capa e os módulos. Isso nos faz colocar um guia em 700px de altura. Precisamos também de um grupo de nova camada
dentro do grupo chamado de camada de conteúdo Módulo 1 - Blog.
Sou um grande fã de ícones em design web. Ele adiciona um pouco algo extra que dá uma sensação agradável em geral para o
design. No entanto, os ícones que usamos têm de ser relevantes para o conteúdo, e deve se encaixar no resto do design. Para
este tutorial, eu escolhi Crystal Project por Everaldo, que é um ícone enorme conjunto sob a licença LGPL, que permite usá-los
sempre que quiser sem ter que pagar. E a melhor coisa sobre isso é que eles são simplesmente lindos! Você pode alcançá-
losaqui.
Uma vez que este é transferido, precisamos encontrar um ícone que atende às nossas necessidades.Queremos algo que reflecte a
ideia de blog, notícias ou atualizações. Na minha opinião, o ícone da pasta news.png mimetypes isso mais do que bem. Eu
escolhi o tamanho 64 * 64px, que é apenas o tamanho certo para o nosso projeto.

A barra de cabeçalho
Ótimo, agora importá-lo em seu documento por arrastar e largar ele. Redimensioná-la um pouquinho, se você achar
necessário. Eu não acho muito grande, por isso vou mantê-lo desta forma. Alinhá-lo com a interseção da guia alta 700px e
400px de largura.

21 
 
Agora precisamos dar o nosso cabeçalho de um módulo. Em vez de usar Myriad Pro aqui, que era nossa convenção para os
cabeçalhos, vamos usar Arial. Por quê? Bem, eu acho que fica melhor. Mas, para torná-lo parecido com um título, vamos
adicionar um retângulo arredondado preto atrás do texto.
Agarre seu Rounded Rectangle Tool (U), com uma cor preta, e um raio de 5px, e faça um retângulo que é de cerca de 30px de
altura e 15px que pára antes do meio do nosso documento. Já tenho um guia de lá, então não há necessidade de adicionar um
novo. Esconder os cantos deixou para trás o ícone para mostrar que o ícone está relacionado a todo o bloco e, finalmente,
definir a opacidade da camada para 55%.

Agora só precisamos adicionar o nosso texto. Eu acho que fazer este blog e twitter área um pouco mais íntimo, é uma boa
idéia. Então, ao invés de escrever algo como "Últimas Notícias", vamos escrever algo um pouco mais longo e mais pessoal:
"Últimas inscrições de nosso blog". Use esta fonte:
• Arial Regular
• 12px
• # F6f6f6
• Suavização: none
E escrever o nosso texto. Certifique-se de compensar um pouco sobre ele a partir do ícone para manter as coisas espaçadas. Eu
decidi colocar essas camadas em um grupo chamado cabeçalho camada Bar também.

Entradas
Agora precisamos preencher esse módulo com algumas entradas. O bom aqui é que nós só precisamos criar um, então duplicá-
lo e apenas alterar o texto.
Comece por colocar uma guia vertical em 445px. Isso acrescenta uma margem de 15px extra para o nosso bloco, o que
demonstra que realmente contém o cabeçalho da seção de entrada inteira, e não apenas um simples link.
Vou usar um texto do espaço reservado Lipsum aqui também, mas você pode usar uma entrada existente a partir do seu blog, se
você quiser.
22 
 
Para o título da reportagem, eu vou usar a nossa posição de fonte, com um tamanho menor porém:
• Myriad Pro Regular
• 18px
• Suave
• # 6eb9cc
Nós não estamos indo para compensar esse o caminho inteiro para o nosso guia recentemente acrescentado a 445px. Ao invés
disso, vamos começar a escrever em 430px, e compensar o conteúdo da entrada para 445px. Coloque-15px abaixo da barra de
cabeçalho.

Então, nós precisamos adicionar algumas informações, tais como meta o autor ea data. Isso não é informação muito importante,
por isso ele vai tipo em uma pequena fonte:
• Arial Regular
• 10px
• Suavização: None
• # 707070
Para fazer com que nossas entradas um pouco mais condensado, vamos colocar esta informação na mesma linha do título. Eu
escolhi um nome aleatório e data aqui.
Alinhar o texto à direita.

Para o teor da reportagem, vamos colocar um descritivo poucas linhas para manter o mínimo de texto possível na tela. Este
texto deve ser deslocado para 445px. Usando a ferramenta Type (T) , podemos fazer um bloco de parágrafo para tornar a
coisa mais fácil para nós. A fonte que estou usando é:
• Arial Regular
• 12px
23 
 
• Suavização: none
• # 525252

Como você pode ter notado, eu coloquei os três camadas, Título, Meta, e conteúdo de um grupo de camada chamada "Entrada
1". Isso vai facilitar as coisas para nós, pois vamos duplicá-lo apenas duas vezes, arrastando-os sobre o "New Layer"
botão. Renomeie os grupos "entrada 2" e "entrada 3", respectivamente, e colocá-los sob uma outra. Você deve, obviamente,
deixar alguma margem de entre eles, mas simplesmente não demasiado, ou ele vai olhar estranho. Isto é o que você deve ter:

Você tem que concordar que parece bastante estranho com a mesma entrada três vezes. Para mudar isso, basta gerar algum
Lipsum novo e colocá-lo ali.

Leia Mais Button


E se o leitor realmente quer visitar o blog, você pode perguntar. Bem, a primeira coisa é que os títulos serão links no projeto
codificado. Se o leitor só quer ir para a página inicial do seu blog, no entanto, ele não será capaz de fazê-lo se deixar assim o
desejar. Poderíamos ter adicionado um link para a barra de titulo, mas isso não parece meio tão fresco como um botão dizendo
Leia Mais!

24 
 
Crie um novo documento com fundo transparente que é de 210 * 25px. Crie um retângulo arredondado (U) com um raio de
10px. A cor não importa. Certifique-se de fazer a forma 20px alto para que as bordas se misturam em um semi-círculo. Deixe
algum espaço na parte inferior e à direita para a sombra.

Agora precisamos apimentar este botão, adicionando uma camada de alguns estilos: uma sombra, uma sobreposição de
gradiente, e um acidente vascular cerebral.

25 
 
Este estilo dá um efeito pouco agradável em 3D para o botão:

26 
 
Então precisamos agregar a este texto. Estou usando o Myriad Pro, tamanho 12 e # 393939. Não se esqueça de centralizar o
texto!

etapa final deste botão será adicionar um chanfro para o texto:

Agora só precisamos de importar isso em nosso documento por arrastar e soltar, e está tudo pronto! Eu decidi alinhar à direita,
mas com bom aspecto centralizado ou à esquerda também, então cabe a você escolher. Eu também colocar as duas camadas em
um grupo de camadas ler mais, para torná-lo mais fácil de se mover.

27 
 
Isso não parece maravilhoso? De qualquer forma, agora que estamos a fazer com o módulo Blog, é hora de ter feito com o
módulo Twitter!

Nono Passo - O Módulo Twitter


Uma vez que este é muito bonito a mesma coisa que o módulo de Blog, ele provavelmente vai muito mais rápido.
A barra de cabeçalho
Para começar, basta duplicar a barra de titulo do Módulo Blog e colocá-lo no outro lado do meio do documento, em seguida,
colocá-lo em um grupo de nova camada chamada "Módulo 2 - Twitter". Substituir o texto com algo como "Siga a equipa de
estrada no Twitter". Faça esta mensagem muito pessoal. Na verdade, o Twitter é algo que deve ser amigável e pessoal, pois
permite que os seus leitores para chegar mais perto de você.
Eu decidi usar o ícone Twitterific para os fins deste tutorial, já que é para fins educacionais. No entanto, se este site vai viver,
teríamos que usar um outro ícone para cumprir com as restrições de direitos autorais.Mas eu acho que está legal, então eu decidi
usá-lo aqui. Você pode buscá-la na Wikipédia procurando porTwitterific por exemplo.
Incluir o ícone para o seu documento, redimensioná-la com Ctrl / Cmd + T, e colocá-lo em vez do jornal. Eu decidi fazer este
ícone um pouco maior do que o jornal, simplesmente porque não parecia boa contrário.

Tweets
Em seguida teremos de travessão nosso conteúdo. Coloque uma guia vertical de 830px e outra em 845px para nos dar uma base
sólida para trabalhar, precisamos também de um guia em 770px alto para criar uma margem de 15px entre o ícone do twitter e
do primeiro tweet.
O que vamos colocar aqui? Cada membro da equipe terá sua própria linha com o seu último tweet. Um tweet é geralmente
construído com uma foto do seu perfil, um nome e uma frase.
Criar um grupo nova camada chamada "Tweet 1", que vamos duplicar em nossos Tweets criar outros.

28 
 
Vamos começar com a imagem. Você pode encontrar fotos na stock.xchng em sua categoria retratos.
Antes de adicionar este quadro, teremos que criar uma forma de fazer uma máscara de corte. Use aferramenta retângulo (U),
para criar um quadrado que é de 35 * 35px, e adicionar um 1px dentro do curso a ele com uma cor de # 202020.

Uma vez que você encontrou uma foto que você gosta no stock.xchng, podemos adicioná-lo ao nosso projeto. Basta arrastar e
soltar ele no projeto, e criar uma máscara de corte entre a forma da camada criada recentemente e da imagem. Redimensionar a
imagem com Ctrl / Cmd + T, se necessário.

Agora precisamos adicionar o nome do membro da equipe. Vou começar com o nome que usei no blog, para mostrar
coerência. Estou usando o Myriad Pro aqui, como de costume com os títulos:
• Myriad Pro Regular
• 18px
• Suave
• # 6eb9cc
Certifique-se de deixar uma margem de 15 pixels entre a imagem eo nome, acrescentando um novo guia.

29 
 
Agora, vamos adicionar o nosso estado. Estou usando o Lipsum aqui como de costume. Cuidado para não escrever mais de uma
linha, porque poderia quebrar o nosso projeto em contrário. Use a nossa fonte no como de costume:
• Arial Regular
• 12px
• Suavização: none
• # 525252
Você não precisa fazer um bloco parágrafo aqui, já que estamos apenas a escrever uma única linha.

Ótimo, agora que estamos a fazer, podemos simplesmente duplicar o grupo de camadas, "Tweet 1", para criar o Tweets
outros. Renomeie sua camada para Tweet grupos 2, 3 e 4, respectivamente. Deixar uma margem de 15px entre cada uma.

É altamente improvável, porém, que cada membro da equipe é chamado Jonathan Davidson, por isso precisamos de mudar seus
nomes, suas fotos, e também o seu estado para torná-la mais plausível.

30 
 
Agora, a única coisa que falta em comparação com o módulo Blog é uma leitura botão "Mais". Então vamos duplicar o "Leia
Mais" grupo de camadas a partir do módulo Blog, colocar o grupo repetido no grupo Módulo Twitter, e renomeá-lo "Get
Tweets Mais". Não vamos deixar o mesmo "Leia Mais" mensagem, a fim de fazer as coisas parecerem mais pessoal e mostrar
que realmente passou algum tempo fazendo esses botões.
A única coisa a fazer é mudar a camada de texto para "Get Tweets Mais!". O ponto de exclamação se encaixa no espírito
Twitter informal. Alinhar este botão horizontalmente, com a ler mais, e verticalmente para a direita.

Parabéns! Nós já concluída a parte de conteúdo do projeto! Foi realmente um osso duro de roer. As coisas serão mais fáceis de
agora em diante. Temos apenas o rodapé esquerdo. Vamos apenas ter um momento para admirar o que temos vindo a criar por
algumas horas agora:

31 
 
Nós realmente estamos chegando a algum lugar, não somos?

Décimo Passo - Rodapé


Poderíamos ter colocado o texto de rodapé diretamente sob o seu conteúdo. Para ser honesto, quando se preparava para este
tutorial, foi exatamente o que eu fiz. Mas eu achei que algo estava faltando, o design não era muito equilibrada. Adicionando o
fundo da imagem do cabeçalho para o rodapé dá uma bela moldura em que o conteúdo pode viver, de forma que explica por
que estamos colocando lá.
Nós não queremos que a imagem seja muito grande embora; 50px parece adequado. Então, vamos adicionar um novo guia
horizontal em 1150px, a fim de nos ajudar a desenhar a forma.
Devemos criar um grupo de nova camada chamada rodapé, em que vamos ter os grupos Imagem e do bar.
Imagem
Use a ferramenta retângulo (U) para desenhar um retângulo, tendo 100% de largura e 50px de alta. Esta camada deve ser no
grupo de imagem.

Agora, Drag & Drop nossa imagem de cabeçalho estoque em nosso documento novo, e criar uma máscara de corte entre a
imagem ea camada Shape. Use Ctrl / Cmd + T para colocá-lo corretamente.

32 
 
Rodapé Bar
Ok, nós somos feitos à imagem de rodapé. Agora precisamos fazer a nossa barra de rodapé. Criar um grupo novo no grupo
chamado Bar caixa, e com o Rectangle Tool (U), preencher o transparente parte restante do design com # f8f8f8.

Agora crie uma nova camada chamada Shadow, crie uma máscara de corte entre Shadow e forma, e com aGradient Tool (G),
fazer uma sombra negra que é de cerca de 15 pixels de altura. Defina a opacidade da camada para 15%.

Finalmente, para terminar essa caixa, duplique a camada Top Border da caixa de conteúdo usando Ctrl / Cmd + J, arraste essa
camada para a camada do grupo Box Bar rodapé e renomeá-lo borda superior.

33 
 
Finalmente, criar uma nova camada de texto, e com a nossa fonte de parágrafo:
• Arial Regular
• 11px
• Suavização: none
• # 525252
• Text-align: Centro
Escreva alguns licença de direitos autorais ou qualquer coisa que você quer colocar no rodapé. Eu decidi colocar Copyright, o
nome da empresa, e um pouco "Todos os Direitos Reservados" também. No fim as coisas para o espaço, eu coloquei isso em
duas linhas. Alinhar essa camada de texto com a guia de 800px de largura.

Onze Etapa - Admire!


Sim, é isso, estamos a fazer! Toda essa luta e agora estamos acabados, mas o resultado final foi, provavelmente, vale a pena,
né?

34 
 
Doze Passos - Considerações Finais
Nós agora projetamos nosso site usando Photoshop. Na Parte II deste tutorial, a ser lançado amanhã, você vai aprender a
transformar este PSD em semântica, conforme página da web usando os padrões XHTML 1.0, CSS 2.0 e JavaScript.
Espero sinceramente que você tenha gostado deste tutorial, que você aprender algumas técnicas novas, e que agora você vai ser
capaz de fazer web design excelente mesmo!
Vejo você amanhã para a parte II!
• Siga-nos no Twitter, ou subscrever o Feed RSS NETTUTS para um desenvolvimento mais tuts web diariamente e
artigos.
 

35 
 

You might also like