Coluna Fireworks – Criando Respingo de tinta (1ª Parte)

Tudo bem Fireworkes …

Sejam bem vindos a mais uma coluna Fireworks aqui no Mxstudio. Com base na dica deixada pelo Juliano nesta coluna, resolvi mostrar como criar respingo de tinta aproveitando a ferramenta vetorial Reshape Área.

Pré-requisitos

Fireworks 8 ou 2004. Além de ter noções da ferramenta Reshape Área.

Objetivo

Criar uma imagem semelhante ou melhor que esta:

Por não necessitar de um texto muito técnico, tentarei ser o mais breve possível, mostrando o necessário para obter êxito no resultado final.

Crie um círculo de qualquer cor e tamanho, mas que contraste com a tonalidade do palco.

Em cima deste círculo nós vamos trabalhar com a ferramenta Reshape fazendo suaves movimentos para cima e para baixo até que fique com este aspecto:

Percebeu? Eu distorci em parte as extremidades do círculo com a ferramenta configurada em 3px de espessura (Size) e 100 (Strength).

Completando toda a circunferência e alternando os valores da Reshape eu obtive este resultado:

Pois é, sacou a idéia?

Agora eu posso duplicar este respingo e em seguida diminuí-lo para distorcer:

Imagine fazer isso (duplicar distorcer) pelo menos 6 vezes e posicionar cada respingo com coerência:

O que você acha?

Cada copia foi redimensionada e trabalhada com a Reshape para que fique com aspecto aleatório.

Acho que foi de fácil compreensão, não!?

Considerações Finais

Espero que você tenha gostado desta coluna (curta) e tirado algo à mais do que foi ensinado. Afinal, apartir deste exemplo acredito que muitos outros podem ser criados em diferentes formas e aspectos.

Em breve venho com a 2ª Parte, onde irei trabalhar com outros recursos do Fireworks para criar o mesmo efeito.

Autor: Rafael Silva Vaz – Colunista de Fireworks do MXStudio.

Dúvidas, acesse nosso fórum ou visite meu blog/site voltado para o Adobe Fireworks: Fireblog Brasil

Grande abraço e até a próxima

Coluna Fireworks – Enfeites de Natal: Estrela

Olá Fireworkes …

Faltando apenas dez dias para o Natal, apresento mais uma coluna sobre Enfeites que caracterizam esta época tão bonita para todos nós. Neste ensinarei a criar uma estrela, a mesma que é posicionada no topo de árvores de natal.

Pré-requisitos

Fireworks 8 ou 2004.

Objetivo

Criar a imagem abaixo.

2º – No painel de ferramentas, selecione o shape Star, defina o preenchimento em amarelo #FFCC00 e clique no palco.

Temos a estrela para trabalhar!

3º – Em live filters (canto direito em painel de propriedades) defina em noise > add noise, o seguinte valor:

4° – Continuando em live filters, clique em eye candy 4000 LE > bevel boss e configure como abaixo:

Conseguimos definir o brilho (bevel) e uma leve textura (add noise), vamos partir para a caracterização e o ajuste de cores.

5° – Duplique a estrela, deixe-a sem preenchimento e aproveite o contorno pencil > graphite na cor branca:
Obs: Elimine os filtros utilizados em live filters (clique no sinal de negativo)

É fácil perceber que redimensionei com a ferramenta scale tool (Q) o contorno e em seguida o posicionei ao centro.

6° – Clique em live filters > adjust colors > brightness/contrast e ajuste:

7° – Novamente em live filters, selecione bevel and boss > inner bevel e configure:

1) Espessura
2) Transparência
3) Suavidade
4) Ângulo

Adicionamos um relevo à estrela, porém ele não fica tão perceptível pelo fato de já termos configurado o bevel boss (nos primeiros passos). A idéia de sua utilização e voltada para o sombreamento, veja abaixo:

Quase lá… Agora partiremos para o brilho da estrela.

8° – Crie com o shape Star uma estrela sem preenchimento e contorno em branco.
Obs: Mude a cor do palco para que haja contraste.

Em uma tacada só, adicione mais uma ponta nesta estrela e redimensione para 45px width por 45px height.

Agora arraste o ponto automático radius 2 ao centro.

Bom, vamos fazer com que além de suavidade, o contorno aumente em proporção sem que utilizemos ferramentas para tal.

9° – Em live filters > blur > zoom blur configure em valores máximos, 100 por 100.

Brilho pronto, basta posicioná-lo ao foco de luz da estrela.

Como sempre faço, segue uma imagem para ilustrar o que aprendemos.

Considerações Finais

Nesta coluna tivemos uma boa impressão de alguns filtros utilizados, principalmente o bevel boss. Com ele foi possível definir a base principal da estrela, seu relevo.

Autor: Rafael Silva Vaz  - Colunista de Fireworks do MXStudio.

Dúvidas, acesse nosso fórum ou visite http://www.fireblogbrasil.com. Este é meu blog pessoal e lugar onde publico muita coisa sobre o Fireworks.

Grande abraço e até a próxima

Coluna Fireworks – Enfeites de Natal: Festão

Olá Fireworkes …

Demorei além do que esperava, mais estou de volta com o terceira coluna Enfeites de Natal. Nesta vamos aprender a criar um Festão, não, não vou dar um Festão, e sim explicar com detalhes como podemos transferir para web mais um artigo Natalino. Adianto que este foi o Enfeite mais difícil de chegar a um ponto que pudesse afirmar: “Ficou bacana”.
Felizmente saiu, e apresento para você logo abaixo, boa sorte!

Pré-requisitos

Fireworks 8 ou 2004.

Objetivo

Criar a imagem abaixo.

2º -Com a ferramenta Pen tool (P) desenhe uma linha curva com contorno verde #009933.

Obs: Clique dua vezes no segundo ponto para terminar de trabalhar com ele.

3º – Selecione o Shape Star (Painel Vector ao lado esquerdo) e simplesmente clique no palco.

Temos uma estrela de cinco pontas, a qual será utilizada para criar os fios do Festão.

4° - Altere o contorno da estrela para verde #009900 e redimensione seu tamanho para 40px width por 40px height:

5° – De um zoom de 300% na estrela, clique sobre o ponto automático radius 2 e arraste-o para dentro.

Temos cinco fios:

Para obtermos um bom resultado, é preciso aumentar o número de fios. Para isso duplique algumas vezes este fio (estrela), e aumente o número de pontas através do ponto automático.

Seus fios deverão ficar assim:

6° – Com os fios prontos, comece a contornar a linha curva.

Contorno completo:

7° – Duplique a linha curva e em seguida agrupe (ctrl + g) os fios:

8º – Duplique os fios e altere seus contornos para verde #006600 e stroke random > dots:

Veja que tivemos uma sensível mudança no aspecto dos fios, com um detalhe, ele precisa ficar abaixo de tudo.
Utilize o painel layers para trazê-lo em tal posição.

Veja em detalhe:

9º – Através do painel layers, defina na primeira camada o blend mode Inverse color burn.

Faça uma copia desta camada e deixe o blend normal:

Agora altere seu contorno para Pencil > Graphite

Nosso Festão está praticamente concluído, falta apenas posicionarmos a linha curva como sombra.

10º – Duplique a linha curva e defina seus contornos com tamanho 10.
Detalhe: Veja que alterei uma para a cor preta.

Agrupe (ctrl + g) as linhas e clique em live filters > blur > gaussian blur:

Leve as linhas sobre o Festão.

Veja que a linha verde ficou responsável pelo brilho (levemente), e a preta definiu o sombreado.

Pois bem, depois disso tudo podemos dizer que terminamos o Festão. E veja como ele fica muito bacana enfeitado com as bolinhas e o laço.

Considerações Finais

Como citei na apresentação desta coluna, este foi Enfeite mais difícil de criar no Fireworks, pelo menos até este ponto, havia tentando outros três sem obter grande sucesso. Mesmo assim, espero que entendam o que foi explicado, e caso alguém tenha uma idéia diferente fique a vontade para nos mostrar.

Autor: Rafael Silva Vaz  - Colunista de Fireworks do MXStudio.

Dúvidas, acesse nosso fórum ou visite http://www.fireblogbrasil.com. Este é meu blog pessoal e lugar onde publico muita coisa sobre o Fireworks.

Grande abraço e até a próxima

Coluna Fireworks – Enfeites de Natal: Bolinhas

Olá Fireworkes …

Sejam bem vindo a mais nova coluna Enfeites de Natal. Hoje vou mostrar uma maneira de criar bolinhas natalinas detalhando cada passo para que todos tenham chance de acompanhar.

Introdução

Nesta época o que mais vamos ver na web são enfeites de natal, e como prometido, vou mostrar como criar no Fireworks as bolinhas que decoram arvóres, cartões de natal, websites, animações entre outros.

Pré-requisitos

Fireworks 8 ou 2004. Também é possível acompanhar esta coluna usando a versão Mx, porém algumas opções de blends (misturas) não fazem parte desta versão.

Objetivo

Criar a imagem abaixo.

2º - Com a ferramenta elipse tool (atalho = U) crie um círculo de 150px width por 150px heigth preenchimento #990000.

3º – Selecione o círculo, clique em live filters > shadow and glow > inner glow e configure como mostra imagem:

1) Espessura da sombra
2) Preenchimento em preto
3) Transparência
4) Suavidade da sombra

Veja em detalhe que foi adicionada uma sombra interna ao círculo.

4º – Com a ferramenta elipse tool crie uma forma oval de 105px width por 70px height com preenchimento #FF0000.

5º - Selecione a forma oval, clique em menu > modify > transform > numeric transform (ctrl + shift + T), deifna a opção rotate e configure em 350º.

Em seguida posicione-a como abaixo:

6º – Crie uma copia (ctrl + c e ctrl + v) da forma oval a arraste para a parte inferior do círculo.

Em seguida clique com a ferramenta de seleção sub-selection tool no ponto do traçado superior dela, e traga levemente para baixo:

7º – Selecione a forma oval superior e defina no painel de propriedades uma suavidade (edge) feather com valor 30.

Faça o mesmo na inferior, porém com valor 40.

Detalhe: Perceba que pelo alto valor feather, a imgem fica com um leve nevoeiro:

Para corrigir basta agrupar (ctrl + g) as duas formas e definir no painel layers o blend mode (modo mistura) lighten.

8º – Duplique (ctrl + c e ctrl + v) o círculo base e deixe-o sob as formas:

Nesta copia não vamos utilizar o filtro inner glow, então o elimine clicando no sinal de negativo presente em live filters.

9º – Com a copia selecionada adicione em live filters > shadow and glow > inner shadow, estes valores:

Em layers defina o blend em lighten:

Veja que já estamos definindo a bolinha:

10º - Duplique um dos círculos base ou crie um novo com a ferramenta Ellipse tool do mesmo tamanho em preto.

Copie e cole este círculo com uma cor que contraste o preto, pode ser amarelo.

Agora o posicione de forma que você possa perfurar a forma preta em modify > combine paths > punch.

Obs: Para perfurar basta estar com as duas formas selecionadas.

Em seguida ajuste junto à bolinha. Caso precise, de um zoom para melhor visualização.

11º – Edite com a ferramenta sub-selection tool o seguinte ponto desta forma:

Basta levá-lo para este ponto

Trabalhe com as guias para deixá-las com a mesma proporção:

Resultado:

Depois de editado defina seu blend em overlay com transparêcia 50.

Opa… Olha lá…

Vamos para o pino?

12º – Com a ferramenta rectangle tool (atalho = U) crie um quadrado de 35px em preto.

Desagrupe este quadrado (ctrl + shift + g) e com a pen tool (atalho = P) adicione um ponto no centro superior e leve-o para cima com a sub-selection tool:

Em seguida trabalhe com a pen tool para tranformar em curva através das guias:

Resultado:

13º – Com a base do pino selecionada, clique em modify > transform > numeric transform e defina em rotate 345º.

14º – No painel de propriedades mude o preenchimento de solid para gradient > bars em branco para preto.

Veja que o preenchimento não se ajusta a forma, portanto basta levar a alça de edição um pouco para cima.

15º – Em live filters > adjust colors > curves, crie e edite pontos do canal de cores, veja abaixo:

Clique no centro e arraste para a seguinte posição.

Agora crie um novo ponto e arraste como mostra imagem:

Em detalhe:

Em curves não vamos mais mexer. Agora partiremos para brigthness/contrast e hue/saturation.

16º – Em adjust colors > brigthness/contrast, defina estes valores:

Já em hue/saturation, selecione a opção colorize e configure assim:

Volte em adjust colors e crie um novo brightness/contrast com estes valores:

Temos neste momento a base do pino pronta:

17º – Agora o posicione atrás da bolinha através do menu modify > arrange > send to back, ajustando na parte superior para deixar apenas a ponta amostra.

Para criarmos a alça é preciso duplicar a base do pino e diminuí-la com a ferramenta scale tool (atalho = Q):

Com a pen tool edite o traçado superior para deixar a curva mais acentuada.

Clique na ferramenta elipse tool e faça um círculo preto para poder furar a base. Com os dois (base e círculo) selecionados, acesse o menu modify > combine paths > punch.

Adicione em live filters > shadow and glow > drop shadow uma sombra com estes valores:

Concluído a alça, falta posicioná-la atrás da base do pino, veja só:

Ficou um pouco fora em termos de tamanho, mais não há problema algum, é só selecionar a scale tool e diminuir a alça.

Ficou proporcional agora!

Pois é, concluímos a bolinha. Antes de encerrar acompanhe duas dicas abaixo para poder aproveitar ainda mais ela.

Dica nº 1

Para alterar a cor, basta selecionar todas as formas (camadas) com exceção do pino, e transformá-la em bitmap. Em seguida mude sua tonalidade através de live filters > adjust colors > hue/saturation:

Dica nº 2

Com a bolinha em bitmap é possível dar mais brilho a ela, basta em live filters > adjust colors > brightness/contrast trabalhar com os valores que melhor se adeque.

Veja a imagem abaixo e o resultado de mais algumas bolinhas.

Considerações Finais

Por ser um tutorial rico em detalhes esta coluna acabou ficando um pouco extensa, porém tenho certeza que aqueles que estão iniciando vão poder aproveitá-la a ponto de criar suas próprias bolinhas. E mais, ensinei uma forma de criá-las, existem inúmeras possibilidades de ter um resultado igual ou até melhor, basta usar a criatividade.

Autor: Rafael Silva Vaz  - Colunista de Fireworks do MXStudio.

Dúvidas, acesse nosso fórum ou visite http://www.fireblogbrasil.com. Este é meu blog pessoal e lugar onde publico muita coisa sobre o Fireworks.

Grande abraço e até a próxima!

Coluna Fireworks – Enfeites de Natal: Laço

Tudo bem Fireworkes …

Final de ano chegando, as festas natalinas unindo todas as famílias, os enfeites que caracterizam a época sendo tirados das caixas e montados por todos, enfim…Na web isso também é comum, mas em forma de arte criada apartir de programas específicos, como o Fireworks.

Introdução

No segmento publicitário, em cartões virtuais, hotsites, entre outros vamos ter a oportunidade de acompanhar muitas imagens natalinas. Pelo menos nesta coluna vamos aprender a criar um laço.

Pré-requisitos

Fireworks 8 ou 2004. Também é possível acompanhar esta coluna usando a versão Mx, porém o último filtro apresentado aqui (noise) não faz parte do programa.

Objetivo

Criar a imagem abaixo.

2º - Com a ferramenta Rectangle tool, crie um retângulo de 180px width por 80px height.

3º – Selecione o retângulo e defina seu preenchimento no painel de propriedades em gradient > linear:

Seguindo estas configurações de posicionamento e tons de cores:

4º - Selecione o retângulo e clique com botão direito do mouse para desagrupar (ungroup) a forma (atalho = ctrl + u ou modify > ungroup).
Isso se faz necessário para que seja possível criar e editar pontos no traçado da forma com a ferramenta Pen tool.

5° – Com a ferramenta pen tool (atalho = p) crie dois pontos na forma, um na parte superior e outro parte inferior do traçado:

Detalhe: Não é preciso deixar os pontos alinhados.

6° – Selecione a ferramenta de seleção subselection tool e arraste ligeiramente para cima os dois pontos:

Voltando com a pen tool, edite os pontos criados definindo uma leve curva na forma:

7° – Crie um terceiro ponto no lado esquerdo e arraste-o para em seguida definir uma curva:

A base principal para o sucesso do laço esta feita, agora será preciso criar copias da forma e alterar as configurações linear.

8º - Duplique a forma (ctrl + c e ctrl + v ou ctrl + alt + d) e inverta verticalmente.

Altere o preenchimento linear:
O vermelho #990000 passa a ser #FF0000 e vice-versa.

Agora posicione a copia abaixo da base principal (atalho = ctrl + b).

Olha só como já vai tomando aspecto de laço:

9° – Selecione as duas formas e rotacione-as para cima com a ferramenta Scale tool (atalho = q).

Veja em detalhe:

10° – Novamente selecione as duas formas, duplique-as e inverta verticalmente:

Selecione o laço superior e aperte (ctrl + f ou menu > modify > arrange > bring to front).

Ao trazer este laço superior sob todas as copias, adicionaremos uma sombra em live filters > shadow and glow > drop shadow.

Apenas abaixe para 30% a transparência:

Resultado:

11° – Temos um lado criado, obviamente não será preciso repetir todos os passos para completar o laço, basta duplicarmos tudo e inverter horizontalmente.

Interessante, faltam apenas alguns detalhes para que possamos dizer, está pronto!

12° – No centro da imagem, crie uma forma com a ferramenta rectangle tool usando as mesma opções de preenchimento linear, porém com a guia posicionada na vertical.

Detalhe: Para não perder a proporção, esta forma deve conter 80px width de largura.

13° – Selecione o laço inferior a todos e duplique-o:

Em seguida rotacione com a ferramenta scale tool e posicione abaixo de tudo (ctrl + b):

Trabalhe com a ferramenta subselction tool seu ponto de edição, dando acabamento ao laço:

Agora duplique ele, inverta-o horizontalmente e aplique em live filters > shadow and glow > glow, uma sombra com estas configurações:

Resultado:

14° – Agrupe (ctrl + g) todas as formas e aplique em live filters > add noise > noise, este valor:

Veja só que bacana ficou nosso laço:

Chegamos ao fim!

Considerações Finais

Nesta primeira coluna sobre enfeites que caracterizam o Natal, tivemos uma breve idéia de como é fácil fazer um laço. O mesmo pode ser feito em vários estilos, seguindo este e outros passos, o que importa e usar a criatividade para obter o melhor resultado.

Autor: Rafael Silva Vaz – Colunista de Fireworks do MXStudio.

Dúvidas, acesse nosso fórum ou visite http://www.fireblogbrasil.com. Este é meu blog pessoal e lugar onde publico muita coisa sobre o Fireworks.

Grande abraço e até a próxima

Coluna Fireworks – Criando flor

Tudo bem Fireworkes …

Sejam bem vindos a mais uma coluna Fireworks aqui no Mxstudio. Hoje mostrarei uma forma bem prática de criar uma flor aproveitando os recursos que o querido Fire nos disponibiliza.

Introdução

Se veja em um situação de criar uma arte onde o foco principal são flores. Um hot-site, molduras, backgrounds, entre outros. Nesta coluna você vai ter a oportunidade de criá-las de várias formas diferentes.

Pré-requisitos

Fireworks 8 ou 2004.

Objetivo

Chegar ao resultado semelhante ou melhor que o abaixo.

2º - No painel de ferramentas vector selecione a opção Star e clique no palco. Automaticamente surgirá uma estrela com o tamanho definido em 190px height por 181px width.

Esta estrela contém pontos de controle (amarelo) em posições específicas, trata-se de um auto-shape (forma automática) do Fireworks. Veja em detalhe:

3º - Crie um mais um lado nesta estrela, de cinco vamos para seis.

Para dar a forma desejada, é preciso arrastar o ponto de controle arredondamento exterior.

A forma vai diminuir e ficar mais ou menos com este aspecto:

4º - Aumente a forma com a ferramenta Scale tool (atalho = q).

No próximo passo vamos começar a colorir a flor.

5º - Selecione a forma e no painel de propriedades clique em preenchimento, escolhendo a opção gradient > radial.

Resultado:

6º - Duplique a forma (ctrl + c e ctrl + v ou ctrl + shift + d) e em seguida diminua com Scale tool (atalho = q) para posicioná-la ao centro:

Em detalhe a copia posicionada ao centro:

No próximo passo vamos começar o uso de filtros, indo painel de propriedades > live filters.

7º - Com a copia selecionada vamos usar quatro filtros em seqüência.

Shadow and Glow > inner glow

Noise > add noise:

Blur > zoom blur:

E Sharpen > sharpen more:

Olhe como já vai tomando forma:

8º - Duplique a forma do centro e diminua um pouco:

Em seguida posicione também ao centro:

9º - Através do ponto de controle de adição de lados, vamos criar até o número 18:

Hum… quase lá…

Na verdade já está com aspecto muito bacana, mais vou adicionar mais um detalhe a flor:

10º - Selecione está última forma duplicada e altere para preto a seguinte cor de seu preenchimento radial:

Pronto! Basta selecionar todos os objetos, agrupá-los (ctrl + g) e em seguida adicionar sombra em live filters > shadow and glow > drop shadow:

Abaixo uma simples imagem só para mostra como podemos aproveitar bem o que foi ensinado.

E aqui outra flor usando o mesmo método:

Detalhe: Cada flor terminada pode ser colorida em adjust colors > hue/saturation. Foi isso que fiz para modificar a tonalidade dos dois exemplos acima.

Considerações Finais

Como sempre cito, o que foi ensinado nesta coluna pode e deve ser aperfeiçoado, afinal nos mostramos como criar, o resto é com você. Se vale mais uma dica, estas flores também podem sofrer edição da ferramenta Smudge tool, para isso basta transformá-las em bitmaps!

Autor: Rafael Silva Vaz – Colunista de Fireworks do MXStudio.

Dúvidas, acesse nosso fórum ou visite meu blog/site voltado para o Adobe Fireworks: Fireblog Brasil

Grande abraço e até a próxima

Coluna Fireworks – Efeito chamas

Tudo bem Fireworkes de plantão?

A perseverança para criar efeitos explorando os recursos do Fireworks muitas vezes me surpreende, pois em alguns casos o resultado acaba sendo melhor que o esperado. Foi isso que senti quando finalizei esta coluna, que com grande prazer, disponibilizo para todos.

Introdução

O que mais fazemos quando precisamos de uma imagem para compor um trabalho? Normalmente corremos atrás da mesma utilizando sistemas de busca, banco de imagens, entre outros. Nesta coluna prometo que imagem em chamas, não será preciso utilizar tais mecanismos.

Pré-requisitos

Este efeito foi elaborado na versão oito do Adobe Fireworks, mas pode muito bem ser criado nas demais versões.

Objetivo

Criar imagem caracterizada em chamas.

1) Largua do palco – 2) Comprimento – 3) Resolução – 4) Fundo branco – 5) Transparente – 6) Opção de cores

2º - Com a ferramenta elipse tool (ctrl + u) faça um circulo no palco com fundo gradient waves de branco para preto.

3º - Com o circulo selecionado, clique em edges no painel de propriedades, escolha a opção feather com valor 100.

1) Preenchimento – 2) Borda nevoada (Feather) – 3) Valor

A imagem ficará com este aspecto:

4º - Multiplique o circulo alterando a posição de cada um e preenchendo todo o palco. Viste exemplo abaixo:

5º - Selecione todos e agrupe-os (ctrl + g).
Detalhe: Utlizei 15 objetos, que correspondem aos círculos que foram copiados e colados.

Agora iniciaremos a parte de caracterização das chamas.

6º - Em filters (painel de propriedades no canto direito baixo), selecione adjust colors > hue/saturation e configure:

1) Matiz – 2) Saturação – 3) Luminosidade – 4) Colorir – 5) Visualização

Ganhando cor:

7º - Ainda em adjust colors, selecione a opção curves:

Para obter o melhor resultado é fundamental utilizar todas as opções de canal (channel).

Detalhe, todos os pontos são criados no centro, e arrastados para as seguintes posições:

RGB

1) Canal – 2) Ajuste automático- 3) Pontos de ajustes – 4) Seleciona cor de sombreamento- 5) Visualização – 6) Altera a posição dos pontos – 7) Entrada de escala cores que vai de 0 a 255 – Saída de cores

RED

GREEN

BLUE

Resultado:

Perceba que a imagem já vai ganhado aspecto do que foi proposto, porém mais alguns passos servirão para acabamento.

8º - Em filters, clique em blur > motion blur:

Defina estes valores:

1) Ângulo – 2) Distância

9º - Continuando a utilizar a opção filters, clique em adjust colors > brightness contrast com estes valores:

1) Brilho – 2) Contraste – 3) Visualização

Acabou! Veja o resultado da imagem com mais brilho após as últimas duas partes:

Para não deixar no vazio utilizei alumas copias e máscaras no logo do MX.

Considerações Finais

Tudo que foi aprendido pode é deve ser trabalhado por você modificando e alterando cada valor, estilos de gradientes, ajustes de cores, enfim… Você pode deixar a imagem caracterizada ao seu modo.

Autor: Rafael Silva Vaz – Colunista de Fireworks do MXStudio.

Dúvidas, acesse nosso fórum ou www.fireblog.site.br.com, meu blog pessoal que contém esta e outras colunas sobre Fireworks.

Grande abraço e até a próxima

Coluna Fireworks – Vetorizando escudo da Seleção

Prontos para mais uma coluna?

Fireworkers de plantão, hoje nós vamos trabalhar com vetorização no Fireworks, para ser mais claro, vetorização do escudo da Seleção Brasileira de Futebol.

Introdução

Em época de Copa o mundo gira em torno deste evento, e na web não é diferente, quantos
profissionais não precisam do escudo da seleção para criar hotsites, wallpapers, cartões virtuais, etc.

Pré-requisitos

Ter noção de ferramentas vetoriais, abaixo acompanhe os tutorias que abordam o tema:

Vetor – Parte 1
Vetor – Parte 2

Imagem base

Objetivo

Vetorizar escudo da Seleção Brasileira de Futebol.

1º – Abilite as réguas (atalho = ctrl + alt + r) ou através do menu > view > rulers.
Para quem não sabe, através das réguas podemos puxar guias de ajuste. Estas guias funcionam como se fosse um imã, à medida que você aproxima um objeto a ela, ele se auto ajusta a posição da mesma.

2º – Como a cor padrão das guias é verde claro, no “menu > view > guides > edit guides” altere-a para preto.

*Facilita o contraste entre elas e a imagem base.

O motivo pelo qual iremos fazer uso das guias, é de posicionarmos uma a uma em áreas curvas da imagem base, pois ao adicionarmos pontos através da Pen tool, elas (como citado), irão auxiliar em um posicionamento exato.

Veja abaixo: cada ponto corresponde a um que será criado com a Pen tool.

Copie e cole diretamente na imagem base, os pontos abaixo:

*Eles estão em gif transparent

3º – Clique na régua e traga as guias para o palco, posicionando-as de acordo com a imagem acima.

Repare que trouxe cinco guias horizontais e uma vertical.

*Se desejar, oculte no painel Layers os pontos copiados.

4º – Selecione a Pen tool e inicie o contorno no sentido horário:

*Para facilitar magnifique (zoom) o palco em 400% (atalho = ctrl + 4).

Crie o primeiro ponto e posicione em linha reta para criar o segundo

Ao adicionar o segundo ponto, traga para baixo em diagonal sua alça, traçando a curva:

Para criar linhas retas com a Pen tool após uma curva, basta clicar em seu último ponto.

Repare o terceiro ponto em linha reta.

Abaixo continuarei com as imagens do passo-a-passo sem grandes citações, afinal, algumas imagens valem mais que mil palavras…
Apenas atentem para as legendas:

Para fechar o contorno, posicione a pen tool ao ponto inicial, não esquecendo de puxar a alça para esquerda com base na curva que deve ser criada nesta área.

Ufa… Vejam como ficou:

5º – Em propriedades, elimine os traços e defina o preenchimento em azul (#003399).
*No menu > view > guides > show guides, desabilite a opção para melhor visualização.

6º – Através do painel layers, oculte a imagem base e defina o canvas (cor do fundo) em branco.

Ficou satisfatório, mas sempre é preciso fazer ajustes.

*Para aperfeiçoar eventuais contornos, magnifique o palco e utilize a ferramenta subselection tool (atalho = a) em seus pontos.

7º – Em layers, nomei este vetor como ?vetor azul? para facilitar a continuação.

*Para nomear basta clicar duas vezes no campo de digitação.

8º – Duplique o vetor azul (ctrl + c = copia, ctrl + v = colar) ou menu > edit > clone (ctrl + shift + d), e escolha um traço escuro no painel de propriedades sem preenchimento.

*Nós iremos trabalhar em torno da parte amarela do escudo.

9º – Com a ferramenta scale tool diminua o vetor, e através da subselection tool ajuste os pontos, veja abaixo:

*Para manter a proporção do vetor ao diminuí-lo, mantenha a tecla shift pressionada.

Veja como ficou após ajuste, e já definido em amarelo (#FFE324).

10º – Duplique um dos vetores (amarelo de preferência), e faça o mesmo que o passo anterior, agora contornando a área azul interior do escudo. Aliás, área “azul interior” foi o nome que dei a este vetor.

Veja abaixo pós ajuste:

11º – Oculte todos os vetores, e utilizando a imagem base, selecione a ferramenta rectangle tool (atalho = u), e crie estas faixas.

Estas faixas servirão para perfurar o vetor “azul interior”, através de modify > combine paths >punch, selecionando o vetor e uma faixa por vez. Vide imagem:

Veja o resultado:

O que precisamos fazer agora?

Logicamente criar a cruz, posicionar as letras e… Definir o preenchimento verde, das faixas.

Quem sabe fazer isso, sem criar um novo vetor levanta a mão…

12º – Deixando a brincadeira de lado, selecione o vetor interior, vá em menu > modify > combine paths > split (ctrl + shift + j)

Pronto, agora você pode selecionar faixa por faixa, e definir a cor em verde (#009933).

Olha só que patriotismo, estamos quase lá…

13º – Com a ferramenta rectangle tool crie um quadrado branco do mesmo tamanho da cruz.

*Utilize a imagem base para posicionar e posteriormente moldar.

14º - Para moldar a ponto de criar a cruz, selecione o quadrado e desagrupe (ctrl + shift + g), assim utilizando a pen tool, poderemos adicionar pontos.

*Deixe o quadrado opaco (transparente) em 40%.

Repare que foi criado dois pontos, o que está na ponta, traga para dentro.

Crie mais dois pontos no interior, eles servirão para adequar a cruz.

Faça o mesmo no outro lado e abaixo. Veja o resultado:

Reparou que há um pequeno vazado, entre a cruz e as faixas.

Nada que seja tão preocupante. Basta criar quatro quadrados azuis (#003399), e posicioná-los atrás da cruz (ctrl + down) control + seta para baixo.

Olha que bacana, só faltam às letras.

15º – Com a ferramenta text (atalho = t) crie as inicias CBF utilizando a fonte Arial Black tamanho 24, em azul (#003399).

*Faça uso da imagem base para posicionar

Esta fonte tem um corte diagonal que a original do escudo não possue. Com o texto selecionado, vá em text > convert to paths (ctrl + shift + p).

Utilizando a ferramenta subselection tool, remova alguns pontos e molde para deixar idêntica a letra original.

Finalizamos!

Vejam o resultado:

Detalhe: Eventuais falhas tanto neste vetor quanto no seu, são inerentes ao trabalho que é feito. Porém, um pouco de paciência e coordenação, permitirá que elas sejam perfeitamente corrigidas, vale tentar.

Considerações Finais

Aprendemos nesta coluna a vetorizar o escudo da Seleção Brasileira de Futebol, utilizando técnicas já conhecidas, e fazendo uso de réguas e guias para facilitar em todo processo.

Autor: Rafael Silva Vaz – Colunista de Fireworks do MXStudio.

Dúvidas, acesse nosso fórum ou meu blog pessoal, onde mostro esta e outras colunas sobre Fireworks = Fireblog

Grande abraço e até a próxima

Coluna Fireworks – Fundo Camuflado

Retornando…

Salve Fireworkers de plantão, olha eu fazendo parte novamente do quadro de colunistas do MX.Neste retorno espero que os percauços da vida sejam bons para com este que vos escreve, mantendo por um longo tempo como parte integrante deste, que sem dúvida é o melhor lugar para se estudar Fireworks.Agradeço ao Fábio e toda equipe por me re-considerarem como parte dela.

Introdução

Imagine uma oportunidade de criar um trabalho onde o mesmo necessite em parte dele, de uma imagem camuflada: layout militar, uma grife com foco principal voltado para esta tendência, enfim…
Nesta coluna mostrarei o caminho para chegarmos ao efeito camuflado com resultado final muito bacana.

Pré-requisitos

Nenhum, vou explicar como adequar a imagem pelo menos em três versões: MX, 2004 e 8.

Objetivo

Criar fundo camuflado para ser utilizado em layouts, interfaces, wallpapers, assinaturas entre outros.

2) Com a ferramenta Rectangle Tool (atalho = u) crie um quadrado do mesmo tamanho do palco, em 300 por 300px com preenchimento preto.

3) Vamos utilizar o primeiro filtro:

Vá em Filters > Eye Candy 4000 LE > Marble

Surgirá o painel abaixo:

Perceba que temos alguma opções de configuração dos “veins” como:
Tamanho (1), porcentagem de veins (2), escurecimento (3), aspereza (4), cor de fundo (5), vein color (6), vein uniforme (7) e posição aleatória (8).
Sabendo disso, configure como mostra a imagem superior.

Feito isso, temos esta imagem :

4) Agora partiremos para solidificar essa imagem ajustado suas cores e diminuir em parte o nevoeiro:
Vá em Filters > Adjust Colors > Levels e configure exatamente como mostra a imagem:

Perceba abaixo como ficou:

5) Agora aplicaremos um desfoque bem leve para suavizar o contorno da imagem.
Em Filters > Blur > Gaussian Blur, configure assim:

6) Chegou o momento do qual podemos ver o camuflado.
Em blend para quem tem Fireworks 8, vá direto em soft light:

Após o blend, veja como ficou:

Para quem não tem o Fireworks 8, basta aplicar o blend average:

Há mudança em termos de tonalidade (opaco), porém temos opções de escurecer através de ajustes de cores (adjust colors), mesmo assim o resultado não ficará idêntico a forma que criamos usando o soft ligth do Fire 8.

7) Para finalizar, aplicaremos mais um filtro, add noise, disponível nas versões 2004 e 8.
Filters > Add Noise com valor “10″

Finalizando, faço uso da fonte XBAND Rough só para enfeitar um pouquinho.

Chegamos ao fim desta coluna!

Considerações Finais

Espero que além do resultado mostrado, tenha sido interessante para todos trabalhar com o filtro marble, que bem utilizado, pode servir não só para camuflado, e sim uma infinidade de efeitos.

Autor: Rafael Silva Vaz – Colunista de Fireworks do MXStudio.

Dúvidas, acesse nosso fórum ou visite o blog onde mostro esta coluna e outras matérias sobre Fireworks: Fireblog

Grande abraço e até a próxima

Bem, hoje estarei mostrando uma das formas de se trabalhar com brushs.

Para quem não sabe, o brush é uma ferramenta tipo pincel, ou seja: podemos utlizá-la para desenhar, criar contornos atraentes em vários estilos, desenhar entre outras coisas.

Neste tutorial irei criar um fundo como se tivesse sido dada várias pinceladas em cores diferentes.Então vamos começar!

Abra um novo documento (CTRL + N) na cor de fundo branco e dimensões 400px width por 300px height.

Bom, feito isso precisaremos utilizar outra ferramenta, a Smudge Tool (ATALHO = R) é ela que dará o efeito de pincelada.Veja a imagem abaixo a ferramenta e suas configurações.

Agora com ela selecionada, clique sobre a imagem brush, arraste e solte até que fique um efeito de pincel.

acesse o nosso fórum .