Mini-layout inspirado no 9rules design

Nesse tutorial vamos mostrar em poucos passos como criar um efeito simples de header e com algumas texturas em vetor do próprio fireworks, tentar compor um pequeno layout buscando referência do 9rules.com. A parte 2 dele, faremos o HTML/CSS para mostrar como se comporta esse layout no browser!

PASSO 1 - FUNDO DO HEADER

Para começar, abra um arquivo novo de 600x600px, com a cor de background de #DBE8C4. Em seguida faça um retângulo na parte superior de 600x105px. Use um gradiente linear nele da cor #669933 para #0B1005.

PASSO 2 - EFEITOS

Para fazer o efeito das listras, vamos usar 2 texturas sobrepostas. Para fazer a primeira, faça um retângulo no topo queseja maior que o feito anteriormente (aqui fizemos de 625x162px) e preencha ele com a textura DNA e cor #666666. Em seguida aplique um fitro Motion BLur com os valores indicados na figura e um blend Soft Dodge. Feito isso duplique este layer e apenas troque a textura para Grid 4 e o blend para Overlay. Aqui não vamos mascarar o que ficou sobrando, vamos apenas criar um retângulo branco por cima de tudo.

PASSO 3 - GRADIENTE DO BODY

Faça agora um retângulo com gradiente linear para ser o fundo do corpo principal. Use as cores #93B956 e #DBE8C4 e deixe ele na posição Y em 109. Agora vamos fazer apenas um acabamento no header com uma linha horizontal de 1px na cor #C2D79A. Veja no detalhe como devem ficar os elementos até agora.

PASSO 4 - ELEMENTOS DO LAYOUT

Agora não temos nenhum truque de efeitos para ser feito, apenas usar a criatidade e adicionar alguns elementos no layout. Usamos algumas frases grandes, textos, uma lista com links, um footer e claro, um bom ícone e um título pra dar o acabamento!

RESULTADO FINAL

Veja que o processo é bem simples é só testar as cores, os efeitos e tentar chegar nos elementos certos para que consiga comport um layout com harmonia e com estilo.