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/

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.

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.

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.

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.

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.

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.

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".

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º).

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).

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.

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.

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.

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".

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.

Passo 15

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

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.

Passo 17

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

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.

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.

Clique na imagem para viitar o website/>

Editado por GisMullr

Sobre o autor

My name is Fabio Sasso, I'm a graphic/web designer from Porto Alegre, Brazil and I'm the founder of Abduzeedo. I hope we can share lots of information, tips, and ideas through Abduzeedo. Also you can follow me on Twitter or my personal site at http://fabiosasso.com.

Sponsored Links:

Fonte: Abduzeedo