Crie um novo documento 1200 x 1600 pixels, com fundo branco. Estavam começando com uma tela muito grande devido à quantidade de informações nós estaremos adicionando no layout.
O layout será 850 pixels de largura, de modo a garantir o layout medidas até eu adicionei dois guias. Para criar os seus guias, vá para "View> New Guide".
Na caixa que aparece digite 175px, pressione OK.
Repita o passo mais uma vez, só que desta vez entra 1025px e pressione OK.
Criar O Fundo
Defina seu plano de cor # 132e47 e cor de fundo # 132434, em seguida, selecione a ferramenta gradiente com um gradiente refletida.
Agora que você já selecionou a ferramenta de gradiente, o gradiente sobre sua tela. Iniciar a partir de cerca de 400 pixels do topo de sua tela e arrastar cerca de metade do caminho para baixo.
Agora estavam indo para adicionar um pouco de barulho para o nosso fundo usando o filtro de ruído. Certifique-se de sua camada de fundo é selecionada, em seguida vá em "Filter> Noise> Add Noise", use as configurações abaixo.
Uma vez que você adicionou o filtro de ruído selecione a ferramenta Rectangular Marquee e fazer uma seleção a partir do topo da tela. Faça a seleção de cerca de 300 pixels de altura.
Crie uma nova camada acima de sua camada de fundo, em seguida, preencher a seleção com a cor # 05111b. Adicione o filtro de ruído para a seleção usando as mesmas configurações de antes. Você deve ter algo parecido com isso.
Por último crie uma nova camada acima do seu fundo e as camadas de retângulo, em seguida, selecione a ferramenta Rectangular Marquee.
Com a ferramenta rectangular marquee selecionada fazer duas linhas de 1 pixel em cima uns dos outros. Preencha o primeiro na cor preta (# 000000), em seguida, a segunda linha em um tom claro de azul (# 1d456b). As duas linhas deve ultrapassar a largura da tela e ser colocado directamente sob o retângulo azul escuro.
Você deve ter algo parecido com isso.
Criando O Retângulo Externo
Selecione a ferramenta Letreiro retangular, em seguida, fazer uma seleção dentro de seus guias (850px Amplo). A seleção deve começar muito bem a cerca de 100 px de cima toda a maneira para baixo a como sempre grandes quiser, a minha é muito grande.
Uma vez que você fez a seleção e seu feliz com isso, criar uma camada nova e preencha com a cor branca (# ffffff).
Estavam indo agora para fazer o retângulo externo levemente transparente, para fazer isso adicione os estilos de camada seguinte.
Fico assim:
Criação De Conteúdo O Retângulo
Como carregar uma seleção em torno de seu retângulo externo, selecionando a camada e indo para "Selecionar> Carregar Seleção". Uma vez que a seleção é carregada contrato a seleção 20px, para fazer isso vá em "Select> Modify> Contract".
Agora que você já contraíram a seleção crie uma nova camada acima de sua camada externa do retângulo e preencha a seleção na cor branca (# ffffff).
Agora adicione os estilos de camada que se segue para o retângulo de conteúdo.
Fico assim:
Adicionando Seu Título CV
Selecione a ferramenta de texto, em seguida, no canto superior esquerdo adicionar o seu nome junto com sua descrição. A fonte que estou usando é chamado de "Myriad Pro". Uma vez que você adicionou o seu nome ea descrição adicionar uma sombra ao seu nome, utilizando as configurações abaixo.
Adicionando A Navegação Pequenos icones
Desde o " Wefunction Icon Set "adicionar um ícone do disquete, ícone da impressora e um ícone de email para sua tela. Coloque cada ícone no nível superior direito com seu nome.
Debaixo de cada ícone adicionar lá rótulos, uma vez que você adicionou suas etiquetas adicionar uma sombra usando as configurações abaixo.
Terminar O Cabeçalho
Debaixo de seu nome e descrição adicionar um par de parágrafos sobre si mesmo eo que o faz tão especial.
Agora selecione a ferramenta letreiro retangular e criar duas linhas de 1 pixel em cima uns dos outros. As linhas deve ultrapassar a largura do retângulo de conteúdo.
Preencha a linha de cima em preto (# 000000) e na linha de fundo (# ffffff) branco, uma vez que você preencheu as linhas de definir o "Blend Mode" para "Overlay".
Você deve ter algo parecido com isso.
Adicionando Conteúdo
Abaixo da linha divisória adicionar a sua entrada CV em primeiro lugar, que eu escolhi para minha lista de habilidades técnicas em primeiro lugar.
Em seguida, adicione o circle_blue.png "ícone" do " Wefunction Icon Set "debaixo de seu título da seção principal. O círculo azul vai ser o nosso ponto de bala.
Próximo ao ponto de bala adicionar um título secundário explicando a sua habilidade, quantos anos de experiência e se o iniciante, intermediário ou avançado.
Por fim, adicione a sua descrição explicando sobre as habilidades.
Continue Com O Estilo
Continue seguindo os mesmos estilos acima para cada uma de suas entradas.
Créditos:
Richard Carpenter - Tutorial e Layout
Lucasuppes - Tradução e post! (=
Use a minha video aula de como passar layout do PSD para o CSS como base.
(=