DevSecOps

6 mar, 2009

Desenhando um bom layout no Fireworks – Parte 03

Publicidade

Olá, amigos, tudo bem com vocês? Inicialmente gostaria de pedir desculpas a todos os leitores dos iMasters pela demora da continuação do artigo, pois estava envolvido em vários projetos. Vamos dar continuidade à série.

O layout encontra-se assim até o momento:

Desenhe um retângulo de cantos arredondados modificando os cantos utilizando a tecla ALT. Em sequência aplique as configurações abaixo:

Preenchimento: Gradiente Linear nas cores: #009999 e #7CCACA

Contorno: espessura = 2 e cor: #009999

Agora duplique o retângulo criado, mantendo-o na mesma posição. Com a ferramenta Caneta (Pen tool) edite para chegar ao resultado abaixo:

Foi necessário fazer algumas alterações no preenchimento do retângulo duplicado, alterando as cores para preto e branco, sem contorno, opacidade 26% e Blend Mode para Screen.

Precisamos acrescentar os itens do menu: A Academia, Profissionais, Saúde, Novidades, Tabela de Horários, Fotos e Contato.

Utilizando os procedimentos citados acima criem as outras caixas:

Cores e efeito utilizado:

Caixa 1:

Preenchimento: #FFCC00 e #FF9900;

Contorno: #FF6600;

Efeito: Inner Glow, cor: #FF6600 e tamanho: 2;

Caixa 2:

Preenchimento: #FFFF66 e #CCCC00;

Contorno: #CCCC00;

Efeito: Inner Glow, cor: #CCCC00 e tamanho: 2;

Caixa 3:

Preenchimento: #619ED4 e #A8C9E8;

Contorno: #70A8D8;

Criaremos os títulos de cada caixa:

Efeito do texto: Glow;

Adicionamos mais alguns itens para ilustrar o layout para finalizar:

Considerações finais:

No efeito criado atrás da imagem foi utilizado o filtro Alien Skin Splat!, que infelizmente não consta mais no Fireworks CS3. Caso você tenha o Pacote de Instalação da versão anterior do software, basta copiá-lo para a pasta Plug-Ins da versão atual.

Encerramos nossa série. Espero que tenham gostado.

Abraços e Sucesso!