julho 07, 2009 from abduzeedo's blog
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
