Design estilo Grooveshark no Fireworks

Semana passada mostramos o site Tinysong no nosso Sites da Semana. Além de se um belo aplicativo o site tem um design muito bem feito e achei que seria interessante reproduzir o mesmo design e fazer um tutorial sobre isso no fireworks.

Neste tutorial não iremo aplicar nenhum grande efeito ou alguma ferramenta desconhecida, mas apenas mostrar uma forma simples de fazer pequenos efeitos que fazem a diferença em um bom design.

PASSO 1 - NOVO DOCUMENTO

Para começarmos, abra um novo documento de 600 x 600px com a cor #BFD2E5 de background.

PASSO 2 - RETÂNGULO

Vamos agora fazer um Rounded Retângulo branco de 578 x 555px. Deixe como na figura com um espaçamento um pouco maior em baixo para podermos colocar algum elemento ali no final. Faça este retângulo com rounds pequenos, para ficar bem suave. Aplique também um Drop Shadow com os valore 1 - 50% - 2 - 270º e com a cor #46586A.

PASSO 3 - BOX 1

Para fazermos o background que será o fundo de nosso textfield vamos usar 3 Rounded Retângulos sobrepostos. Em todos eles será aplicado um gradiente linear e repare nas dimensões deles que o de cima é sempre 2px na altura e na largura menor que o de baixo, desta forma conseguimos dar a impressão de relevo que queremos. Siga o gradiente e as dimensoes de cada um dos retângulos.

PASSO 4 - ALINHANDO OS RETÂNGULOS

Aqui você consegue ver como devem ficar dispostos os 3 retângulos. Após fazer os 3 nesta ordem, selecione os 3 e alinhe na vertical e na horizontal para ter certeza que eles estão centralizados. Depois agrupe os 3.

PASSO 4 - SOMBRA E REFLEXO

Para finalizarmos o Box 1, vamos aplicar uma pequena sombra nele e um efeito de reflexo. Ambos serão feitos também com retângulos. Para fazer a sombra (1) faça um retângulo como na figura e aplique um Feather de 3 e alpha de 55. Depois coloque este layer para baixo do grupo de retângulos feito antes. Para fazer o reflexo, faça um Rounded Retângulo na base do desenho já feito e aplique um gradiente linear da cor #E6EEF5 para #FFF. No lado #FFF coloque um alpha de 0. Feito isto aplique um alpha de 90 neste retângulo. Veja no final da imagem como ficam a ordem destes layers.

PASSO 5 - BOX 2

Neste box faremos os mesmo processo do passo 3. Repare nas cores dos gradientes e no tamanho dos retângulos. Depois de feito os 3 alinhe eles na vertical e na horizontal e agrupe eles também. Posisione este grupo abaixo do reflexo feito no passo anterior.

PASSO 6 - SOMBRA

Aqui vamos somente copiar o retângulo de sombra feito antes. Copie ele para baixo deste nosso grupo do Box 2.

PASSO 7 - TEXTFIELD

O campo de texto criado será feito com 2 retângulos. Os 2 terão preenchimento #FFF. Faça o primeiro com borda de 1px #D6E4F0. Faça o segundo retângulo em cima dele com borda 1px #93AEC7 e mova 1px para cima. Veja na imagem como ficarâo dispostos os 2 retângulos.

PASSO 8 - ÍCONE DE BUSCA

O ícone que iremos criar será feito com um Doughnut e um Retângulo. Aproxime e una os dois e gire um pouco o retângulo. Selecione os dois elementos e use Modify > Combine Paths > Union. Posicione a figura já ao lado do textfield e aplique um Gradiente Linear da cor #99ABBB para #5D768C. Observe também que aplicamos um Inner Shadow nessa figura. Depois duplique este layer, delete a Inner Shadow e use uma cor sólida #F3F7FA. Mova este layer mais claro para baixo do outro. E depois mova 1px para baixo para dar a impressão de relevo. Veja no final como ficariam os 2 layers do ícone.

PASSO 9 - ELEMENTOS

Agora que já temos praticamente tudo finalizado, utilize mais alguns elementos como um logotipo, alguns textos e também algum logo na parte de baixo da nossa área de trabalho, onde deixamos um espaço no início do tutorial.

RESULTADO FINAL

Veja que o resultado é bem similar ao do Tinysong, mas podíamos brincar e aplicar outra paleta de cores, testando com os mesmos efeitos. Espero que tenham gostado e fiquem à vontade para fazerem alguns testes e mostrar aqui no blog!