Topo MXstudio

Coluna de Fireworks – Topo MXstudio

Introdução

Olá comunidade MXStudio!
Nesse artigo, estarei mostrando como fazer um topo simples, porém muito bonito!


.

Pré-requisitos

O tutorial foi desenvolvido no Adobe Fireworks 8.

 

Objetivos

Fazer um topo.

Topo MXstudio

Em primeiro lugar, abra um novo documento ( 699/135 ).
Crie um retângulo de 688/121.
Escolha uma cor que lhe agrade, a cor escolhida foi #0A99D6

Com o retângulo selecionado, vá ao live filters (localizado no painel properties [CTRL+F3])

Aperte no “+”> Shadow and Glow> Glow.
Configure como preferir, veja como configurei:

Resultado:

Duplique (CTRL + SHIFT + D) a layer do retângulo, e desative o efeito glow.
Ao invés de colocarmos uma cor sólida, vamos colocar um gradiente linear.

Escolha as cores que vocês preferirem, a minha escolha foi essa:
#168AC9 e #0A99D6 ( da esquerda para à direita )

Duplique (CTRL + SHIFT + D) o retângulo em que acabamos de trabalhar.
Vamos configurar o gradiente (linear), de cima para baixo.
Escolha as configurações, que você preferir, veja o exemplo usado:

Cores:
#0BA6E8
Opacidade:
– 0% de opacidade
– 100% de opacidade

Resultado:

Agora, vamos começar à trabalhar com a pen tool.

Veja que fizemos apenas uma linha.
Selecione a layer, vá em Modify> Symbol> Convert Symbol (F8).
Escolha graphic, e aperte OK.
Duplique a layer do symbol, recém criado, e mova um pouco para cima.

Selecione as duas layers, vá em Modify> Symbol> Tween Instances (CTRL + SHIFT + ALT + T).
Selecione um número alto (escolhi 300).
Não marque a caixa “Distribute to frames”.
Aperte OK.
Vai ser criada várias layers (de acordo com o número escolhido por você).
Ao apertar OK, todas essas layers ficarão selecionadas, vá em Modify> Flatten Selection.
Segure ALT na layer e dê um clique com o mouse, a layer será selecionada, depois vamos transforma-lo em path ( Select> Convert marquee to path )

Vamos configurar um gradiente linear.

Cores:
– #FFFFFF (Branco)

Opacidade:
– 0% de opacidade
– 20% de opacidade
– 100% de opacidade


Novamente, vamos fazer uma linha com a pen tool.

Transforme em Symbol (F8).
Depois duplique (CTRL + SHIFT + D) e mexa um pouco para cima.

Selecione as duas layers, vá em Modify> Symbol> Tween Instances (CTRL + SHIFT + ALT + T).
Ao apertar OK, todas as layers ficarão selecionadas, vá em Modify> Flatten Selection.
Segure ALT na layer, depois vamos transforma-lo em path ( Select> Convert marquee to path )
Vamos configurar um gradiente linear.

Cores:
#0A719C

Opacidade:
– 0% de opacidade
– 20% de opacidade
– 100% de opacidade

Diminua a opacidade, entre 40 * 60.

Usando os mesmos passos anteriores, usando symbols para criar o path, crie outro.

Vamos colocar uma pattern no path.
Veja a imagem de exemplo:

Baixe a opacidade, entre 5 * 10.


Crie um circulo branco.

Vamos configurar esse circulo, configure como preferir, se quiser, siga o exemplo:

Baixe a opacidade (deixei em 5)

Duplique (CTRL + SHIFT +D) o retângulo central (sem o efeito glow).
Vamos configurar o gradiente linear.

#FFFFFF (branco) e #0A99D6 ( da esquerda para à direita )

Mude o blend mod para lighten e baixe a opacidae (utilizei em 25).

Crie um retângulo rounded com 124/58, na cor branca.
Aplique um efeito glow, configure como preferir.

Duplique (CTRL + SHIFT +D) o retângulo central, sem o efeito glow.
Vamos configurar o gradiente linear (configurado de cima para baixo).

Cores:
– #FFFFFF (branco)

Opacidade:
– 0% de opacidade
– 20% de opacidade
– 40% de opacidade
– 100% de opacidade

Adicione o logo do MXstudio .

Novamente com a pen tool, tranformei em Symbol, e fiz um tween instances.
Porém, coloquei com uma opacidade bastante baixa, e por isso mal aparece, e não irá fazer diferença no final.
Vamos ao próximo passo!
Novamente com os mesmos procedimentos anteriores, de quando usamos a pen tool, transforme em Symbol, e faça um tween instances, e por final transformando-o em path.

Vamos configurar o path.

Mude o blend mod para soft light, e abaixe a opacidade (entre 70 * 80) .

Crie um circulo, ao configurar ponha um pouco de feather.
Adicione uma pattern também.

Mude o blending mod para soft light, e coloque a opacidade entre 10 * 20

Coloque uma pattern em cima da logo.

Duplique o retângulo central, e ponha um gradiente radial.

Coloquei o blend mod em soft light e com 20% de opacidade.

Aqui, eis o resultado final do nosso artigo:

Resultado final


 

Considerações finais

Vimos nesta coluna, como fazer um belo topo, usando técnicas bastante simples, com um belo resultado final.

Espero que vocês tenham gostado desta coluna e até a próxima.

Autor: João Castro – jpcastrobr – Colunista de Fireworks e Photoshop do MXstudio

Qualquer dúvida envie um email para jpcastrobr@mxstudio.com.br ou acesse o nosso fórum.

Escrito por joaocastro on fevereiro 13, 2007. Arquivado em Fireworks. Você pode seguir as respostas a esse artigo pelo RSS 2.0. Você pode deixar respostas para esse artigo

7 respostas a Topo MXstudio

  1. Bm o tuto ta ótimo eu só não sei como colokar linear de cima pra baixo, e não achei no meu macromedia o botão “Select> Convert marquee to path”…
    O que eu acho q é importante…
    então desisto bay…

  2. Olha no meu fireworks não tem essa opção “Convert marqee to path” pode me dizer se existe algum pluguin p/ por ela!?

    Agradeço a resposta to precisando muito mesmo!

  3. Mesma dúvida dos caras acima e tem um detalhe.. a minha linha ta ficando com serrilhado! =/ AJUDE ME!!!

  4. bom cara meu problema ta sendo no Convert marquee to path simplismente ele nao é ativado quando eu seleciono as linhas
    adorei a aula gostaria de completa la

  5. Bem, ficou bem legal mais no meu fireworks que é a CS4 tem a opição “Convert marquee to path”
    ¬¬”

  6. EU uso o Fireworks CS4 e tem essa opção ae…vcs querem fazer efeitos de hj..com programas mais antigos..ai nao da…comecem a usar CS3 ou CS4 o mundo é outro *—*

  7. algumas imagens estão offline. teria como recolocá-las?

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>