Quinta-feira, 17 de julho de 2008 às 09h10

Desenhando um bom layout no Fireworks - Parte 02

Faltam -1 dias! Inscreva-se agora! O maior encontro de profissionais web da américa latina.

Olá amigos, tudo bem com vocês?

Vamos dar continuidade à série. Caso você não tenha lido, clique aqui para ver a primeira parte do artigo.

A imagem acima mostra a fase que interrompemos a criação do layout.

Desenhe um retângulo com a seguinte configuração:

Chegamos ao seguinte resultado para finalizarmos o fundo do site:

Crie a área da newsletter e desenhe um retângulo com a seguinte configuração:

Agora vamos configurar os efeitos do retângulo:

Preenchimento:

Degradê Linear

Cor 1: #FF6600 - Cor 2: #FFC164

Filtro Inner Glow: cor - #FF6600

Teremos o seguinte resultado:

Agora vamos adicionar os textos e criar os campos:

Assine nossa newsletter - Fonte: Agency FB, tamanho 18, estilo negrito e cor #FFFFFF

Fique por dentro das novidades - Fonte: Agency FB, tamanho 14, estilo negrito e cor #FFFFFF

Nome e E-mail - Fonte: Agency FB, tamanho 14, estilo negrito e cor #FFFFFF

Configuração das caixas de campo:

Cor de preenchimento: #FFFFFF

Cor do contorno: #666666

Veja o resultado:

Vamos construir o botão OK para finalizarmos esta parte:

Desenhe uma elipse no tamanho 67 x 67 com as seguintes configurações

Preenchimento: Radial, Cores: #FFFFFF e #438BCC

Contorno: #438BCC

Deixe o degradê na seguinte posição:

Vamos adicionar os filtros:

Inner Glow:

Cor do efeito: #438BCC

Drop Shadow:

Cor da sombra: #666666

Agora faça o seguinte desenho com a ferramenta caneta:

Adicione o efeito Feather na quantidade 4, para finalizar o botão vamos adicionar o texto "OK".

Veja o resultado final:

Terminamos a segunda parte do nosso artigo. Espero que tenham gostado.

Abraços e Sucesso!

4 comentários

 Junio Albino
17/07/2008 10h39

Bons efeitos

Parabéns pelo artigo, gostei dos efeitos utilizados no fireworks para o botão ok.

 Wellington Moreira
08/10/2008 21h40

PARABENS E IGNORÂNCIA DE NORMAS

Parabens ficou muito bom o layout, chega desse negocio de que temos que seguir certas regrinhas. As cores q vc usou foi muito bem escolhidas, tem tudo a ver com a proposta, é uma ACADEMIA, então precisa de cores vibrantes, chega de sites com menu do lado esquerdo, tem que sair mesmo da monotonia. Com relação ao menu no centro do topo não vejo nada de mais nisso, a idéia da mulher invadindo a parte superior da pagina ficou muito legal, unica coisa que não gostei que ja foi citado em alguns comentários foi o OK, excedeu bastante o que seria normal, mas no restante parabens, muito bom mesmo, a gente precisa é de webmaster desse nivel pra nos tirar dessa monotonia do POLITICAMENTE CORRETO.

 Leonardo Dias
15/10/2008 10h02

Muito Bom!

Gostei do jeito de fazer o layout, bem rápido e leve!

Quando irá continuar o tutorial?

 Emely Jensen
20/10/2008 09h29

Muito bom!!

Poxa, pode passar as outras partes do tutorial?? Eu estou repassando este tutorial como exercício para meus alunos!

(:

Cancelar resposta

Qual a sua opinião?

Faça login abaixo ou cadastre-se rapidamente.


Sobre o Autor
Carlos Bortoni começou na área de informática em 1999 como instrutor da BIT Company - Educação&Tecnologia, em 2000 passou a estudar apostilas dos programas Fireworks, Flash e Dreamweaver e conseguiu aprender sem auxílio de cursos. Logo em sequência desenvolveu alguns trabalhos para pequenas empresas. Hoje é instrutor da SOS Computadores - Unidade Mooca no curso de WebDesigner além de ser Diretor de Arte das agências Zap! Criação - Mídia Criativa e Fashion Tour.
InterCon 2009

2001 - iMasters FFPA Informática Ltda - Todos os direitos reservados.