No mês passado conheci alguns caras que estão trabalhando em um projeto muito legal envolvendo uma aplicação do iPhone e eles me convidaram para fazer o design do site do projeto, chamado Wellknown.as. Eu gostei muito da idéia e comecei a procurar por referências e inspiração para começar o design propriamente dito.

Então neste tutorial eu vou mostrar a vocês um pouco de como eu criei o site usando Fireworks. É claro que você pode fazer a mesma coisa no Photoshop, os comandos mudarão um pouco mas o processo é praticamente o mesmo.

Referências do Design

Passo 1

A primeira coisa a fazer, é claro, é ter um conceito em mente daquilo que quer fazer. No meu caso, os caras do Wellknow.as me falaram exatamente o que queriam para o layout. Também usei um Framework CSS e um template do Fireworks. Você pode fazer o download em: http://960.gs/

Web Site Design: Wellknown.as Case

Passo 2

Com a Rectangle Tool (U) crie um novo retângulo com o tamanho do documento. Para a Cor use Solid e #191D22. Então no Properties Panel, clique em Add Icon (+) e selecione Add Noise. Use 1 para Amount.

Web Site Design: Wellknown.as Case

Passo 3

Com a Rectangle Tool (U) crie outro retângulo, mas desta vez faça uma tira começando em 200 pixels no eixo Y. Para a Cor use #1c202a.

Web Site Design: Wellknown.as Case

Passo 4

Clique em Add e vá até Shadow and Glow > Inner Shadow. Use 0 para distance, 40% para Opacity, 1 para Blur e 270º para Angle.

Web Site Design: Wellknown.as Case

Passo 5

Clique novamente no ícone Add e escolha Shadow e Glow>Drop Shadow. Use 0 para Distance, 65% Opacity, 4 para Blur. O ângulo não vai fazer diferença pois a distância é 0.

Web Site Design: Wellknown.as Case

Passo 6

Agora novamente vamos adicionar algum noise para que o retângulo não fique com a cor sólida, mas sim com aparência plástica.

Web Site Design: Wellknown.as Case

Passo 7

Aqui eu posicionei a imagem do iPhone no centro da imagem, como se ela estivesse deitada. Eles não queriam mostrar a interface da aplicação neste momento, então esse ângulo estava perfeito.

Web Site Design: Wellknown.as Case

Passo 8

Duplique a layer (camada) e vá até Modify>Transform>Flip Vertical. Troque então a Opacity para 50% e vá até Modify>Mask>Reveal All. Com a Gradient Tool (G) selecione o preset preto e branco e o aplique na layer mask. O que for branco ficará visível e o que for preto ficará transparente. Então crie o famoso efeito de "wet floor".

Web Site Design: Wellknown.as Case

Passo 9

Adicione um novo retângulo com a Rectangle Tool e o preencha com gradiente usando branco nas duas cores. Apenas troque as opacidades, uma será 100% (1) e a outra 0%(2). Use a Gradient Tool (G) para aplicar o gradiente em um angle de 90º(ângulo de 90º).

Web Site Design: Wellknown.as Case

Passo 10

Criar o efeito de luz é bastante simples. Com a Ellipse Tool (U) crie uma elipse, então use branco como cor e troque o Edge para Feather e use 100 para value (1). Depois disso apenas altere o Blend Mode para Overlay (2).

Web Site Design: Wellknown.as Case

Passo 11

Agora duplique para fazer com que a luz fique mais forte. Adicione também elipses diferentes para deixar o efeito de luz mais realista. Outra coisa importante é brincar com as opacidades para um melhor resultado. Use 50-60% para as novas elipses.

Web Site Design: Wellknown.as Case

Web Site Design: Wellknown.as Case

Web Site Design: Wellknown.as Case

Web Site Design: Wellknown.as Case

Web Site Design: Wellknown.as Case

Web Site Design: Wellknown.as Case

Passo 11

Para o slogan, usei Arial 35px na tipografia pois Arial é a fonte do iPhone, e gradiente de cinza claro para branco. Adicionei também sombra usando 1px para Distance, 90% para Opacity, 1 para Blur e 90º para Angle.

Web Site Design: Wellknown.as Case

Passo 12

Com a Round Rectangle Tool (U) crie um retângulo e o preencha com cinza, troque então a opacity para 80% (1). Agora com a Rectangle Tool (U) crie outro retângulo abaixo do retângulo cinza. Faça esse retângulo um pouco menor (2). Novamente com a Round Rectangle Tool (U) crie outro elemento (3). Selecione então os 2 "round rectangles" e vá até Modify>Combine Path>Punch. Selecione todos os elementos e os agrupe. Depois disso adicione noise como nos primeiros passos.

Web Site Design: Wellknown.as Case

Passo 13

Com a Line Tool (N) crie uma linha e vá até Modify>Mask>Reveal All. Selecione a gradient tool e o preset preto e branco, usando o formato oval pinte sobre a layer mask. Dessa maneira as margens vão "desbotar".

Web Site Design: Wellknown.as Case

Passo 14

Com a Ellipse Tool (U) adicione uma elipse preta e troque deEdge para Feather e use 60 para amount. Então usando mask, esconda uma parte dela atrás da linha. Fazer isso é super simples, crie um retângulo com a área que quiser mostrar e vá até Edit>Cut. Selecione então a elipse e vá até Modify>Mask>Paste as Mask.

Web Site Design: Wellknown.as Case

Passo 15

Repita o mesmo processo para fazer o mask do Id Card.

Web Site Design: Wellknown.as Case

Passo 16

Agora vamos adicionar a lanyard. Novamente repita o processo de mask. Adicione também um pouco de sombra no Id card e lanyard.

Web Site Design: Wellknown.as Case

Passo 17

Posicione alguns ícones na coluna da esquerda e agora podemos adicionar o conteúdo.

Web Site Design: Wellknown.as Case

Passo 18

Deixe as guias visíveis para que possamos ter uma referência visual para criar as colunas e o conteúdo. Isso será muito importante para codificar oCSS.

Web Site Design: Wellknown.as Case

Conclusão

O layout está pronto. Preciso fazer alguns ajustes para deixar o processo de corte um pouco mais fácil, mas nós temos toda a home-page criada. O processo de design foi simples mesmo com as ferramentas e filtros que usamos. A parte mais importante foi definir o conceito antes de usar as ferramentas. O mesmo resultado poderia ser alcançado comPhotoshop ou outra ferramenta, no entanto, com Fireworks nós temos as "vector capabilities " e os filtros não destrutíveis que são muito úteis e deixam o processo mais fácil. E também vale lembrar que a maneira com que podemos brincar com gradientes noFireworks é simplesmente imbatível.

Web Site Design: Wellknown.as Case
Clique na imagem para viitar o website

Editado por GisMullr

About the author of this post

Abduzeedo is a blog about design. There are all sorts of articles for those who want to look for inspiration. Also you will find very useful tutorials for the most used applications out there, with a special selection of Photoshop Tutorials and Illustrator Tutorials. Of course there are other softwares conteplated like Pixelmator, Fireworks, and web design tutorials.