LOGIN:

iMasters | Por uma internet mais criativa e dinâmica

Feeds

Quinta-feira, 17/07/2008 - 09:10 - Por Carlos Bortoni
Seções relacionadas:

Desenhando um bom layout no Fireworks - Parte 02

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!

Todos os artigos de Carlos Bortoni

4 comentários publicados

  • 1. Bons efeitos

    Quinta-feira, 17/07/2008, por Junio Albino

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

    Responder comentário

  • 2. PARABENS E IGNORÂNCIA DE NORMAS

    Quarta-feira, 08/10/2008, por Wellington Moreira

    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.

    Responder comentário

  • 3. Muito Bom!

    Quarta-feira, 15/10/2008, por Leonardo Dias

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

    Quando irá continuar o tutorial?

    Responder comentário

  • 4. Muito bom!!

    Segunda-feira, 20/10/2008, por Emely Jensen

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

    (:

    Responder comentário

Poste um comentário


Os textos publicados neste espaço são de responsabilidade única de seus autores (colunistas e leitores) e podem não expressar necessariamente a opinião do iMasters.

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.


Indique para um amigo

captcha

TI SHOP Produtos iMasters

  • Lançamento: CD-ROM Treinamento Aplicado de SQL - Lançamento! Treinamento Aplicado de SQL - Aprenda a trabalhar com SQL com bancos de dados Oracle e SQL Server. São mais de 100 tópicos explicados por Mauro Pichilliani, um articulistas mais lidos do iMasters. Aproveite! Apenas R$ 69,90 no TI SHOP.
  • Lançamento: Livro iMasters "O Encontro de 2 Mundos"- Este livro conta com 56 crônicas de profissionais mais admirados e influentes do mercado brasileiro de Internet. Aproveite o preço especial para leitores do iMasters. Apenas R$ 40,00 e envio imediato!
  • DVD Curso Completo de Photoshop - Do conceito à finalização Lançamento! Curso Completo de Photoshop, em DVD, com mais de 230 aulas dividas em 4 módulos: conceito, básico, avançado e finalização. Apenas R$ 69,50 no TI SHOP - Frete com 50% de desconto
  • DVD Javascript Starter - Curso Completo Com mais de 9 horas de vídeo-aulas, é um curso completo sobre Javascript. Ideal para quem deseja aprender a linguagem. Apenas R$ 64,90 no TI SHOP - Frete com 50% de desconto!

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