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!