Tutorial Detalhes
- Programa: Adobe Photoshop CS3
- Dificuldade: Intermediário
- Tempo de conclusão estimado: 60-120 minutos
Passo 1
Criar um novo documento 1200 pixels por 1160 pixels, com fundo branco. Depois de criar o documento estava indo para a configuração de dois guias, que ajuda na manutenção do layout de 850 pixels de largura. Para criar o simulador é necessário ir em Exibir> Novo Guia, na caixa que se abre selecione vertical e introduza 175px.
Vá para View> New Guide mais uma vez, só que desta vez entra 1025px, uma vez mais certeza de que o guia é definida como vertical.
Agora você deve ter dois guias de cada lado de sua tela, tanto 175px a partir das bordas do documento. O espaço entre as guias devem ser 850px de largura. Tudo o que criamos a partir de agora será criada dentro do simulador.
Etapa 2
Agora estavam indo para encher nossa formação e para o nosso fundo estavam indo para usar um gradiente radial. Defina seu plano de cor branca (# ffffff) e cor de fundo cinza (# E1E1E1). Selecione a ferramenta gradiente com um gradiente radial.
Passo 3
Aplique o gradiente para o fundo "da camada. Ao aplicar o gradiente de iniciar a partir do meio-alto da tela e arrastar pela metade, isto deve dar-nos um bom tamanho efeito. Se você manter pressionada a tecla Shift enquanto arrasta o gradiente de baixo ele irá bloquear a linha de gradiente vertical.
Passo 4
Selecione a ferramenta Type, em seguida, no canto superior esquerdo contra a guia esquerda adicionar o seu título do Web site usando a cor rosa (ff008a #). Ao lado de seu título do Web site também adicionar catchy slogan do seu site.
Passo 5
No mesmo nível como o título do site, mas contra a guia da direita, crie dois retângulos ao lado do outro usando a ferramenta Marquee Rectangular. O primeiro retângulo vai ser um campo de pesquisa, por isso precisa ser muito longo, o rectângulo segundo vai ser um botão de envio assim que deve ser razoavelmente pequeno.
Passo 6
Agora adicione estes estilos de camada do rectângulo campo de pesquisa.
Passo 7
Uma vez que você adicionou a sua busca camada estilos campo adicionar esses estilos de camada para o retângulo de botão.
Passo 8
Finalmente, selecione a ferramenta de texto e adicionar algum texto para o seu campo de pesquisa e botão de pesquisa. O layout medida deve ficar parecido com a imagem abaixo.
Passo 9
Selecione a ferramenta Rounded Rectangle, uma vez seleccionado na parte superior da tela abaixo da barra de ferramentas do Photoshop você vai ver algumas opções. Dentro destas opções para alterar o tipo de Caminho e do raio de 15px.
Etapa 10
A partir do guia deixou arrastar para fora de seu retângulo, a altura do rectângulo deve ser cerca de 215px e final sobre a guia direita. Uma vez que você arrastou para fora de seu retângulo direito do mouse dentro dela e ir para fazer a seleção.
Etapa 11
Enquanto a seleção estiver ativo, selecione a ferramenta gradiente com um gradiente radial, defina sua cor de primeiro plano como um fato cinzento claro (FEFEFE #) e sua cor de fundo para um pouco mais escura cinza (# E1E1E1). A partir do meio-top da seleção, arraste o gradiente após o fim da seleção.
Etapa 12
Uma vez que você adicionou o gradiente radial adicionar esses estilos de camada.
Etapa 13
Command-clique a camada retângulo que você acabou de criar, fazendo isso irá carregar a seleção do retângulo. Uma vez que você carregou o contrato de selecção a seleção 15px aplicando Select> Modify> Contract.
Etapa 14
Criar uma nova camada acima do seu retângulo grande então preenchê-lo com qualquer cor. Uma vez preenchidos, Desmarque a seleção pressionando Command + D.
Etapa 15
Adicione estes estilos de camada de sua camada de novo retângulo menor.
Etapa 16
Estavam indo agora para criar um efeito bokeh para os nossos pequenos rectângulo interior. Criar um novo documento com 600 pixels por 600 pixels com um fundo transparente. Selecione a ferramenta Elliptical Marquee e criar um grande círculo dentro da lona.
Etapa 17
Depois de criar o círculo é preciso ajustar a aparência círculos um pouco. Adicione estes estilos de camada de seu círculo.
Agora vá em Edit> Define Brush Preset e salve seu novo pincel.
Etapa 18
Dirija para trás ao longo do seu layout e selecione a ferramenta Paint Brush a partir do menu de pincel, em seguida, defina o tamanho do pincel para 50px.
Etapa 19
Traga o pincel tela de opções com a tecla F5, em seguida, adicione as seguintes opções de pincel.
Etapa 20
Seu pincel já deve estar pronto para usar, crie uma nova camada acima da sua multi-coloridas rectângulo interior. Usando a cor branca (# ffffff), e com a sua escova de arrastar para fora alguns círculos, e tentar manter os círculos dentro do rectângulo interior. Você só precisa de alguns para começar com o que vamos construindo os círculos por 3 camadas. Uma vez que você escovou fora alguns círculos blur-los usando o guassian Blur Filter> Blur> Gaussian Blur.
Etapa 21
Criar uma nova camada acima da camada de seu círculo de primeira. Com o seu início pincel personalizado para escovar os círculos mais preenchendo alguns espaços em branco. Depois que você fez definir a Opacidade para 50%, então adicionar um brilho externo usando as configurações padrão do Photoshop.
Etapa 22
Finalmente, crie outra camada acima da camada de seu círculo passado. Com o seu pincel personalizado escova uma vez mais fora alguns círculos mais. Depois que você fez, defina a opacidade da camada para 75%, então adicionar um brilho externo Photoshops usando as configurações padrão.
Etapa 23
Agora que o efeito bokeh está completo, selecione a ferramenta Type e adicionar algum texto sobre o retângulo. A fonte usada para o manequim título é Helvetica Neue LT Pro, a curto parágrafo abaixo é definida em Verdana. Termine este passo, adicionando um ícone lustroso à esquerda do conteúdo do manequim. O ícone utilizado é de um ícone do conjunto projetado por "Navdeep Raj" por Smashing Magazine.
Etapa 24
Estamos indo agora para criar uma navegação simples. Selecione a ferramenta Rounded Rectangle e alterar o raio de 10px. O retângulo deve ser de cerca de 54px de altura e ser contra o direito de esticar as guias de esquerda e direita.
Etapa 25
Botão direito do mouse dentro do caminho retângulo com a ferramenta Pen e ir para o Fill Path. Quando tiver preenchido o caminho adicionar esses estilos de camada.
Etapa 26
Na navegação adicionar alguns links de exemplo. Entre cada amostra link criar um ponto de bala pequeno usando a ferramenta Elliptical Marquee. Preencha os pontos de bala com a cor rosa (ff008a #).
Etapa 27
Agora, a navegação é completa permite avançar para as caixas de conteúdo. Selecione a ferramenta Rounded Rectangle, deixar o conjunto raio de 10px. Arraste um rectângulo com cerca de 335px de largura e 196px de altura. Preencha o retângulo com qualquer cor de momento, em seguida, movê-lo contra a guia esquerda.
Etapa 28
Adicione estes estilos de camada a sua caixa de conteúdo.
Etapa 29
Estamos indo agora para tornar o direito dobrado parte da caixa de conteúdo. Selecione a ferramenta Laço Poligonal e faça uma seleção triangular em torno do canto superior direito.
Etapa 30
Uma vez que você fez a seleção, Cut (Command + X) e Colar (Ctrl + V) no canto de uma nova camada.Selecione a camada de canto e rode-o 180 graus (Editar> Transformação> Girar 180).
O canto teria perdido todos os seus estilos de camada quando cortamos ele assim que nós precisamos voltar a aplicá-las. Você pode fazer isso rapidamente com o botão direito do mouse na camada caixa de conteúdo e indo Copy Layer Styles. Direito do mouse na camada de canto e ir para o Paste Layer Styles.Por último, coloque o canto de forma que a borda superior reta é sobre a borda em linha reta da caixa de conteúdo.
Etapa 31
Preencha a caixa de conteúdo com algum conteúdo manequim. Adicionar um ícone da esquerda com um cabeçalho em negrito e agradável no manequim embaixo. Os ícones utilizados são de um ícone do conjunto projetado por "Navdeep Raj" por Smashing Magazine.
Etapa 32
Duplicar todos os elementos de caixa de conteúdo, em seguida, criar mais duas caixas. Agora, coloque-os debaixo de si.
Etapa 33
No lado direito do layout, em linha com a primeira caixa de conteúdo, adicione um manequim longa posição usando as configurações abaixo.
Etapa 34
Debaixo do longa rubrica adicionar algum texto mais fictício, talvez uma imagem ou duas e uma simples lista ordenada apenas para dar alguma vida a disposição. Cor do texto do manequim em uma cor cinzento escuro (8A8A8A #). A imagem no meio utiliza os estilos de camada que nossas caixas de conteúdo e foi criada da mesma forma como a nossa área de destaque.
Etapa 35
Para o rodapé, vamos voltar a utilizar a nossa navegação. Vá para a paleta Layers e clique no botão direito do mouse a sua navegação "camada. Selecione Duplicate Layer, arraste a camada duplicada para o topo da pilha.
Enquanto o rodapé "camada" está selecionada, mantenha pressionada a tecla Shift no teclado, pressione a tecla Seta para baixo até o rodapé atinge o seu lugar no fundo do layout. Fazendo dessa forma, em vez de usar o mouse vai manter o rodapé alinhado com tudo o que criamos até agora. Termine o rodapé com o texto de rodapé.
Conclusão
A imagem final está abaixo e divirta-se a criação de mais projetos site usando essas técnicas e brincar com esses tipos de layouts funky e estilos.