..: Técnicas básicas para a ferramenta Caneta (Pen-tool) - Parte 1:..
::Objetivo::
Mostrar algumas técnicas básicas de uso da ferramenta Caneta (Pen-Tool).
Nesta primeira parte tratarei do emprego da ferramenta para construção , modificação e manipulação de polígonos. Desta forma trabalharemos com segmentos retos somente.
::A ferramenta::
Você acessa a ferramenta Caneta no menu de ícones do FW abrindo um sub menu contendo três ferramentas vetoriais, conforme mostrado a seguir:
::Exercício básico número 1::
Construção uma forma poligonal simples. Começaremos construindo um triângulo com lados e preenchimento coloridos.
Abra um novo documento com tamanho de canvas (ou palco oun área de trabalho) de 600 x 600 pixels e escolha a cor branca #FFFFFF para o fundo;
Escolha a cor vermelha #FF0000, para o traço e escolha a
cor verde #00FF00 para o fundo
Pegue a ferramenta caneta conforme mostrado na figura do sub menu acima;
Leve o ponteiro do mouse para cima do canvas e note que o ponteiro agora assumiu a forma de uma pena de caneta com uma pequena marca em forma de x (xis) abaixo e à direita;
Coloque o ponteiro do mouse em um ponto próximo ao canto superior esquerdo de canvas e clique/solte. Note que ficou marcado um quadradinho azul em canvas e o xis do ponteiro transformou-se em um V de cabeça para baixo e levemente rotacionado;
Leve o ponteiro do mouse para um ponto próximo ao canto superior direito de canvas. Note que agora o ponteiro do mouse não tem qualquer marca adicional (é somente a pena de caneta) e age como se tivesse um elástico na cor azul atado no ponto inicial clicado e na ponta da pena da caneta;
Clique e solte a seguir leve o ponteiro do mouse para um ponto próximo ao meio de canvas e clique e solte. Note como aparece e desaparece a marca na pena e também como continua o efeito do "elástico" que eu descrevi acima.
Agora leve o ponteiro do mouse para cima do primeiro ponto construido até que a marca na pena de caneta se transforme em um círculo e clique.
Terminado.
Importante: Vamos largar a ferramenta Caneta. Para isto clique na ferramenta de seleção do FW que é a seta branca do menu de ícones e depois clique em um ponto qualquer no canvas.
Você deve ter terminado com um belo triângulo de lados na cor vermelha e preenchido na cor verde. Se não ficou assim, faça tudo outra vez! :-).
Nota: Os vértices do polígono são chamados de pontos de âncora.
Você pode selecionar o triângulo e mudar as cores do traço e do preenchimento. Experimente com algumas cores.
::Exercício básico número 2::
Edição de uma forma poligonal simples. Vamos agora aprender como excluir, adicionar e mover pontos de âncora em uma forma poligonal.
Usando o que você aprendeu, construa um polígono de sete lados (heptágono) como mostrado na figura a seguir:
Selecione o polígono e faça o seguinte:
Coloque o ponteiro do mouse sobre um ponto de âncora, clique, arraste até o centro e solte. Faça o mesmo com outro ponto de âncora e arraste para fora do polígono. Tecle Ctrl + Z duas vezes para desfazer as ações e recuperar a forma original. É assim que conseguimos modificar a posição dos pontos de âncora;
Tendo voltado a forma original (lembre-se que Ctrl + Z - undo - desfaz o que foi feito) vamos colocar novos pontos de âncora na forma.
Selecione o polígono. Pegue a ferramenta caneta e leve o ponteiro do mouse para cima de um dos lados. Observe que aparece um sinalzinho de + (mais) junto a pena da caneta, então clique sobre o lado para inserir um novo ponto de âncora. Faça o mesmo em outro lado. Ctrl + Z duas vezes, para voltar a forma original.
Agora vamos retirar um ponto de âncora existente. Com a forma selecionada e tendo pegado a pena da caneta leve o ponteior do mouse para cima de uma âncora. Observe que aparece um sinalzinho de — (menos) junto a pena da caneta, então clique sobre a âncora para retirá-la. Faça o mesmo em outra âncora. Ctrl + Z duas vezes para voltar a forma original.
sábado, 24 de novembro de 2007
A Pen Tool Parte 1
A Pen Tool Parte 2
..: Técnicas básicas para a ferramenta Caneta (Pen-tool) - Parte 2 :..
::Objetivo::
Mostrar algumas técnicas básicas de uso da ferramenta Caneta (Pen-Tool).
Nesta segunda parte tratarei do emprego da ferramenta para construção, modificação e manipulação de curvas.
::A ferramenta::
Você acessa a ferramenta Caneta no menu de ícones do FW abrindo um sub menu contendo três ferramentas vetoriais, conforme mostrado a seguir:
::Exercício básico número 1::
Construção uma forma curva. Começaremos construindo uma curva simples.
- Abra um novo documento com tamanho de canvas (ou palco oun área de trabalho) de 600 x 600 pixels e escolha a cor branca #FFFFFF para o fundo;
- Escolha a cor vermelha #FF0000, para o traço
e escolha a
cor verde #00FF00 para o fundo - Pegue a ferramenta caneta conforme mostrado na figura do sub menu acima;
- Leve o ponteiro do mouse para cima do canvas e note que o ponteiro agora assumiu a forma de uma pena de caneta com uma pequena marca em forma de x (xis) abaixo e à direita;
- Coloque o ponteiro do mouse em um ponto próximo ao meio e no lado esquerdo de canvas e clique e arraste para baixo:
- Leve o ponteiro do mouse para um ponto próximo ao centro de canvas. Note que agora o ponteiro do mouse carrega consigo um traçado azul de caminho da curva a ser desenhada.
Clique no centro de canvas e arraste para cima:
- Vamos repetir a operação, mas agora continue, levando o ponteiro do mouse para um ponto próximo ao lado direito de canvas. O ponteiro do mouse continua carregando o traçado azul de caminho da curva a ser desenhada.
Clique no lado direito de canvas e arraste para baixo: - Vamos largar a ferramenta Caneta. Para isto clique na ferramenta de seleção do FW que é a seta branca do menu de ícones
e depois clique em um ponto qualquer no canvas.
Notar que ao levar o mouse para clicar na seta o traçado azul acompanha o mouse até que ele abandone canvas. - Você deve ter terminado com um bela curva reversa na cor vermelha. Se não ficou assim, faça tudo outra vez! :-).
- Na curva que você acabou de construir tente fazer as seguintes manipulaçõeses a título de exercícios. Comece sempre selecionando a curva para aparecer os pontos de âncora e alças de dimensionamento.
- Coloque o ponteiro do mouse sobre o ponto de âncora no centro de canvas até que o ponteiro se transforme em um triângulo. Clique e arraste em várias direções para ver como controlar o posicionamento das âncoras e modificar o traçado das curvas. Solte em um ponto qualquer para modificar o traçado. A seguir tecle Ctrl + Z para voltar à curva original;
- Coloque o ponteiro do mouse sobre o ponto superior da alça de dimensionamento do ponto de âncora à direita de canvas até que o ponteiro se transforme em um triângulo. Clique e arraste em várias direções para ver como controlar as aberturas e o posicionamento das das curvas. Solte em um ponto qualquer para modificar o traçado. A seguir tecle Ctrl + Z para voltar à curva original;
- Faça o mesmo com as demais alças de dimensionamento da curva
- Clique e arraste o ponto de âncora à direita, para cima do ponto de âncora à esquerda.
Nota: Os exercícios propostos acima visam somente a que você conheça o que pode ser feito e modificado em uma curva. Não se preocupe agora em obter um detreminado tipo de curva ou perfeição de traçado, pois isto veremos em outro tutorial.
terça-feira, 13 de novembro de 2007
Adicionando textos a formas
1- Crie a forma (o jeito q vc quer q o texto fique!)
2- Escreva o Texto
3- Selecione o Texto e a Forma com a tecla Shift Pressionada!
4- Vá no Menu Texto , Anexar ao traçado!
Siga isso e vai conseguir um bom resultado!
Instalando Fontes
1- descompacte as fontes baixadas
2- Selecione Todas elas
3- Iniciar/Painel de Controle/Fontes
4- Jogue todas as fontes nessa pasta(automaticamente as fontes estarão em todos seu programas q ultilizam texto!)
Sites com download gratuito de fontes para seu computador:
www.netfontes.com.br
www.sofontes.com.br
www.fontes.com.pt
www.megafontes.com
:: Criando Bola 2D ::
Crie um novo arquivo ( CTRL+N ) com tamanho 400x400 pixels
Neste arquivo crie um circulo com tamanho de 215x215
como mostra a imagem abaixo:
Selecione a ferramenta de Degradê (G)
Com a ferramenta seleciona, na barra de propriedades coloque as seguintes configurações:
Modifique o degradê como mostra a imagem abaixo:
Com o degradê devidamente configurado posicione-o como mostra a imagem
abaixo
Duplique o circulo(ctrl+alt+d) e selecione a ferramenta Distorcer (Q)
Com a ferramenta selecionada, clique e araste para esquerda e para baixo o
ponto vermelho da imagem abaixo
Deixando-a parecidamente assim:
Na barra de propriedadaes com o segundo circulo selecionado altere as configurações
como mostra a imagem:
e por ultimo altere a opacidade do circulo para 32 como a imagem abaixo:
Logo você terá a seguinte imagem:
http://fireworksbrasil.blogspot.com
Tutorial By MP: mp22mp@gmail.com
Espero que gostem de mais esse tutorial e visitem sempre nosso blog!
=D
segunda-feira, 12 de novembro de 2007
::: Criando Efeito de Fogo :::
::Objetivo::
Mostrar uma técnica de construção de efeito fogo.
::Visão antecipada::
Este tutorial mostra uma técnica para se obter o efeito fogo conforme mostrado nesta
::Novo documento::
Abra o FW
Tecle Ctrl + N ou selecione, Arquivo ===> Novo para abrir a caixa de diálogo "Novo documento".
Ajuste as dimensões de Canvas (palco,
área de trabalho, tela, etc...) para:
Largura: 450 pixels - Altura: 250 pixels
Cor da Tela: Preta - #000000
Tecle OK.
::A forma inicial::
Construa, ocupando a metade inferior do palco, um retângulo com cor de preenchimento branca e sem linha de contorno, conforme mostrado na figura abaixo.
Com o retângulo selecionado transforme-o em bitmap teclando Shift + Ctrl + Alt + Z ; ou use o menu Modify ==> Flatten Selection ;
::Aplicando o primeiro efeito - Smudge Tool::
Selecione o retângulo e escolha a ferramenta Smudge tool ajustando os parâmetros Size, Edge, Shape e Pressure conforme mostrado
Com a ferramenta escolhida arraste sobre a parte superior do retângulo branco para cima em direção ao palco preto e para os lados.
Pratique um pouco e você conseguirá facilmente obter as "línguas de fogo" em cima do retângulo branco . Construa algumas poucas destas línguas espaçadas uma da outra.
Altere o valor Size da ferramenta para 25 e construa mais algumas línguas espaçadas.
Altere novamente o valor Size da ferramenta agora para 15 e construa mais algumas línguas.
Você irá perceber que para cada valor Size vai obter "linguas" menores.
Pratique um pouco e procure acertar o aspecto das "linguas" o mais próximo possível do real.
No fim você obterá algo talvez até melhor do que eu obtive e mostro a seguir:
::Aplicando o segundo efeito - Hue/Saturation::
Selecione o retângulo e abra o menu: Filters (Alt + i) ==> Adjust Color ==> Hue/Saturation;
Ajuste os parâmetros do efeito conforme mostrado na figura e tecle OK
::Duplicando o layer criado::
Siga a numeração na figura
1-) Clique no triangulozinho do painel Layer para abrir um menu suspenso.
No menu que se abre escolha Duplicate Layer...
2-) Marque Before current layer (antes do layer atual)
3-) Tecle OK
4-) Observe que foi criada uma cópia do Layer 1 'em cima' (antes dele) chamada Layer 2
::Aplicando o terceiro efeito - Hue/Saturation no Layer 2::
Selecione o Layer 2 (Basta clicar em cima dele no painel Layers);
Abra o menu: Filters (Alt + i) ==> Adjust Color ==> Hue/Saturation;
Ajuste os parâmetros do efeito conforme mostrado na figura e tecle OK.
::Aplicando o quarto efeito - Color::
Selecione o Layer 2;
Abra o menu suspenso, indicado pela seta vermelha na figura, do painel Layer e escolha Color para o Layer 2.
::Finalizando::
Escolha a ferramenta Crop e recorte como mostrado a seguir.
Nota: Quanto maior sua habilidade na manipulação da ferramenta Smudge Tool tanto mais real será o resultado final do efeito.
Pois, como você deve ter notado foi com esta ferramenta que criamos as labaredas do fogo.
domingo, 11 de novembro de 2007
..: Efeito 3D em fotos:..
::Objetivo::
Mostrar uma técnica para simulação de efeito tridimensional em uma foto ou imagem qualquer.
::Visão antecipada::
No link abaixo veja alguns efeitos que podem ser obtidos com o emprego da técnica mostrada neste tutorial .
::A imagem na qual será aplicado o efeito 3D::
Para este tutorial usaremos a imagem abaixo com as dimensões de 370px x 100px
::A área de trabalho ou palco::
Abra o FW
Tecle Ctrl + N ou selecione, Arquivo ===> Novo para
abrir a caixa de diálogo "Novo documento".
Ajuste as dimensões de Canvas (palco,
área de trabalho, tela, etc...) para:
Largura: 400 pixels - Altura: 300 pixels
Cor da Tela: #FFFFCC (cor: amarela clara).
Tecle OK.
::Inserindo o grid no palco::
Vamos colocar as linhas de grid na área de trabalho para orientar nossas construções.
1-) Na barra de menus localizada no topo da interface do FW e na horizontal abra
View ==> Grid ==> Edit grid....
Está ação irá trazer para o palco a caixa de diálogo do grid, mostrada abaixo:
Ajuste os valores como mostrado na figura e clique OK.
A cor que eu escolhi foi #CCCCCC (cinza clara)
Salve o arquivo no diretório/pasta e com o nome de sua preferência.
::Inserindo a imagem no palco::
Sem fechar o arquivo que você acabou de salvar, abra o arquivo da figura na qual você vai aplicar o efeito 3D (a figura deve ser escolhida, dimensionada e salva com antecedência).
Copie a figura e cole no meio do palco que você preparou com o grid, como mostrado na seção acima.
Arraste e encaixe o canto inferior direito da figura no cruzamento de duas linhas do grid.
(Ver círculo vermelho na figura.)
Você terá a figura no palco com grid, como abaixo:
::O fundamento básico::
O fundamento básico para construção do efeito 3D nas imagens é mostrado a seguir e consiste em três passos tão somente.
Se você entender o que vou explicar e conseguir reproduzir estes passos, estará em condições de por si próprio variar as distorções feitas e conseguir belos e criativos efeitos.
Usaremos as seguintes ferramentas nos 3 passos:
Ferramenta Marquee:
Ferramenta Skew tool :
::Os três passos::
Nas três figuras ilustrativas abaixo, recortei o canto direito da figura que é a parte que vai interessar.
Passo 1
a-) Clique sobre a figura para selecioná-la.
b-)"Pegue" a ferramenta Marquee clique e arraste um retângulo no lado direito da figura. (aparece um retângulo tracejado sobre a figura como mostrado em 1 na figura abaixo);
c-) Tecle Ctrl + X. Com isto você irá recortar o retângulo que acabou de marcar e o lado direito da figura vai sumir do palco;
d-) Tecle Ctrl + V. Com isto você irá colar de volta o retângulo no mesmo lugar e o lado direito da figura vai reaparecer.
Explicando: Como você já deve ter percebido o que acabamos de fazer foi recortar uma fatia da direita da figura e recolocá-la no lugar. Fizemos isto porque agora com a figura decomposta em duas podemos distorcer uma delas. É o que faremos nos passos seguintes.
Passo 2
a-) Clique sobre a parte direita da figura para selecionar a fatia que acabamos de recortar e colar. Note que somente um trecho a direita da figura foi selecionado.
b-) "Pegue" a ferramenta Skew tool e clique no lado direito da figura. (aparece um retângulo sobre a figura com 8 quadradinhos em volta para arraste como mostrado em 2 na figura abaixo):
Passo 3
a-) Clique e segure sobre o quadradinho do meio no lado direito (o cursor do mouse transformar-se-á em uma seta dupla "pracima e prabaixo").
b-) Arraste para cima até colocar a fatia da direita como mostrado em 3 na figura abaixo.
::Mais uma dobra::
Repita os três passos mostrados agora com o lado esquerdo da figura.
Observe que selecionei no lado direito uma fatia bem menor que esta do lado esquerdo.
Ao final do procedimento com o lado esquerdo sua figura ficará como mostrado abaixo:
::E mais uma::
Repita mais uma vez os três passos mostrados agora selecionando outra fatia no lado esquerdo da figura.
Ao final sua figura ficará como mostrado abaixo:
::Efeitos final::
Pronto! Fácil não é?
Agora mude a cor do fundo ao seu gosto e necessidades.
::Dicas finais::
1-) Talvez você sinta necessidade de "apagar" o grid durante determinadas estapas do trabalho e depois "acendê-lo" novamente.
Isto é muito fácil de se fazer, tecle Ctrl + Alt + G.
Ao terminar seu trabalho não se esqueça de retirar definitivamente o grid do palco antes de fechar o FW.
Menu View ==> Grid ==> Edit grid... para trazer a caixa de diálogo como mostrei lá no início do tutorial. Desmarque as caixinhas que você marcou e clique OK.
sábado, 10 de novembro de 2007
Efeito Desgastado
::Objetivo::
Mostrar uma técnica de construção de efeito desgastado em uma peça de papel para ser usada como fundo.
::Visão antecipada::
Este tutorial mostra uma técnica para se obter o efeito desgastado para ser usado como fundo.
Para você ter uma idéia da utilização deste efeito, montei um menu, mostrando o resultado final obtido com emprego do fundo.
Veja no final desta página o menu
::Iniciando a construção::
Ajuste as dimensões do palco para 150 x 130px e a cor para branco #ffffff.
1-) Construa um retângulo de 120 x 70px na cor vermelha escuro #990033 e com uma borda branca de 1px;
2-) Ajuste a borda para a posição Inside Path;
3-) Ajuste a borda para 1-Pixel Soft, Grain 100 como mostrado na figura abaixo.
::Efeitos nos lados superior e inferior::
Selecione o retângulo construido e pegue a ferramenta Vetor Path Tool.
Com esta ferramenta e com os valores ajustados para a borda conforme acima mostrados faça uns "riscos" ao longo do lado superior e depois ao longo do lado inferior do retângulo .
Você deverá obter algo parecido com o mostrado na figura abaixo.
::Primeiro efeito dentro do retângulo::
Agora com a mesma ferramenta Vetor Path Tool faça uns rabiscos dentro do retângulo como mso9trado abaixo. Atenção não exagere nos riscos e se você não gostar da primeira tentativa, apague e tente outros riscos. ;-)
::Segundo efeito dentro do retângulo::
Este efeito é semelhante ao anterior, mas agora você deverá fazez linhas retas.
Use agora a ferramenta Pen Tool (caneta).
Selecione o retângulo, pegue a ferramenta Peen Tool e vá clicando e soltando para fazer os riscos retos e contínuos.
::Aplicando transparência nos riscos::
Para finalizar vamos aplicar transparência nos rabiscos que acabamos de fazer.
Selecione cada um dos rabiscos e aplique o índice de transparência conforme mostrado na figura abaixo.
Nota: Nesta figura você pode notar que para fazer os rabiscos, não há necessidade de ficar dentro do retângulo. Observe em azul o caminhamento dos rabiscos que eu construi.
::O efeito final::
Fazendo tudo certo você deverá obter o resultado final como mostrado na figura abaixo .
::Aplicando o efeito::
Abaixo uma aplicação do fundo na construção de um menu .
quarta-feira, 7 de novembro de 2007
Criando Gif Animado
::Objetivo::
Mostrar uma técnica para criar animação construindo cada um dos quadros (frames) individualmente.
::Visão antecipada::
A técnica mostrada neste tutorial resulta em uma gif animada disponível nesta VISÃO ANTECIPADA
::Os objetos para aplicação do efeito::
Conforme você acabou de ver na visão antecipada, usei duas imagens. Uma de um braço que se movimenta na vertical e outra de uma cabeça que se deforma sobre a ação do movimento do braço.
A finalidade deste tutorial é a de mostrar a técnica de animação frame a frame, assim você não precisa ficar limitado ao movimento de "esmagar" mostrado na gif que usei.
Entendendo a técnica e com um pouco de imaginação você poderá obter efeitos completamente diferentes deste e certamente muito mais criativos e interessantes.
E, se você pretende treinar depois de entender este tutorial, sugiro tentar o seguinte.
Criar uma animação de um quadrado que vai aumentando sua dimensão e mudando de cor.
(Para iniciantes: se você aprendeu aqui e conseguiu criar uma animação simples, mande para mim por
e-mail que terei prazer em publicar no final deste tutorial as primeiras cinco GIF que chegarem, com o devido crédito. Mas, mesmo que já tenham sido publicadas as primeiras cinco, mande para eu ver.)
Observe as dimensões dos dois objetos usados:
::Preparando as imagens::
O braço não sofrerá deformação durante a animação e então será usada a imagem exatamente como a mostrado na figura anterior em todos os frames.
A cabeça irá sendo deformada ao longo da animação.
Vamos
estabelecer como será o achatamento ao longo dos frames.
Para o último frame adotamos 7 px de achatamento.
E, na largura deveremos expandir de 95 pixels até 120 pixel (largura total dos frames).
O cálculo é assim:
120px - 95px = 25px. Então teremos que expandir 25px em 10 frames.
E, teremos as seguintes larguras:
95,98,101,104,107,110,113,116,119,120 pixels. Para o último frame adotamos 1 px de expansão.
Assim, as dimensões da cabeça para os 10 frames serão:
- frame 1 - 95 x 90
- frame 2 - 98 x 80
- frame 3 - 101 x 70
- frame 4 - 104 x 60
- frame 5 - 107 x 50
- frame 6 - 110 x 40
- frame 7 - 113 x 30
- frame 8 - 116 x 20
- frame 9 - 119 x 10
- frame 10 - 120 x 3
::Criando os 10 frames da animação::
Construa a cabeça inicial não deformada com as dimensões reais (no nosso tutorial
95 x 90 px), selecione e tecle Ctrl + C para copiá-la;
Abra um novo documento. Ajuste as dimensões de canvas para 120 x 135 (o tamanho dos frames) e na cor #999999 e tecle Ctrl + V para colar a cabeça no palco;.
Movimente a cabeça com as setas do teclado até colocá-la centrada e na parte inferior do palco como mostrado no item acima "Os objetos para aplicação do efeito" a figura à direita;
Tecle CTRL + Shift + S ou menu File => Save as e salve como base.png ;
Tecle CTRL + Shift + R ou menu File => Export e salve como frame1.gif ;
Agoras temos dois arquivos salvos. O arquivo base.png que usaremos para construir os demais frames e o arquivo frame1.gif que é o primeiro frame;
Abra o arquivo base.png;
Selecione a cabeça e tecle Ctrl + Shift + T ou
menu Modify => Transform => Numeric Transform para abrir a caixa de diálogo mostrada abaixo.
Ajuste os parâmetros da caixa como mostrado na figura.
Tecle OK e irá aparecer a cabeça achatada de 10 px e alongada de 3 px como abaixo.
Com a cabeça selecionada, use a tecla para baixo do teclado até alinhar (assentar) a cabeça com a parte inferior do palco.
Salve esta cabeça como frame2.gif
Abra o arquivo base.png repita os passos mostrados acima até obter uma cabeça com as dimensões de 101 x 70 px e salve como frame3.gif
Repita os passos como acima e construa as imagens até a frame10. gif
Agora você possui 10 cabeças salvas com o nome de frame1.gif até frame10.gif e com as dimensões mostradas na listagem acima no título "Preparando as imagens" e todas elas em um palco de 120 x 135 px
::Inserindo o braço nos frames::
Vamos posicionar o braço sobre a cabeça, e anotar as coordenadas X e Y do braço.
Acompanhe na figura abaixo:
1-) Abra a imagem do braço, selecione a imagem e tecle Ctrl + C para copiá-la;
2-) Abra o frame1.gif, e tecle Ctrl + V, isto irá colar o braço na cabeça;
3-) Imagem 1 abaixo - selecione a imagem do braço e arraste para cima da cabeça como mostrado
;
4-) Imagem 2 abaixo - selecione o braço e anote as coordenadas X e Y que aparecem no canto inferior esquerdo do palco. No nosso caso as coordenadas são X = 27 e Y = - 87.
Notar que a coordenada Y será negativa.
5-) Tecle CTRL + Shift + R ou menu File => Export e salve como frame1.gif ;
6-) Irá aparecer um aviso alertando que frame1.gif já existe, tecle OK para salvar em cima, substituindo o original pelo atual.
7-) Abra o frame2.gif;
8-) Tecle Ctrl + V e isto deverá colar o braço no frame2. Se não aparecer o braço, proceda como indicado no item 1-) acima;
9-) Com o braço selecionado vamos movimentá-lo usando as coordenadas X e Y.
Altere X = 27 (o mesmo valor do frame1) e Y= -77 (descer 10px que foi o quanto a cabeça encolheu - de 90px para 80px de altura);
10-) Tecle CTRL + Shift + R ou menu File => Export e salve como frame2.gif ;
11-) Abra o frame3.gif e repita os passos acima. Agora os valores das coordenadas serão
X = 27 (este valor não varia para todos os frames) e Y = -67.
12-) Construa os 10 frames seguindo estes passos. Observe que para o último frame o achatamento foi de 7px e não 10px, em consequência atenção para o valor de Y.
::Juntando tudo::
Abra um novo documento. Ajuste as dimensões de canvas para 120 x 135 (o tamanho dos frames) e na cor transparente;
Tecle CTRL + Shift + R ou menu File => Export e salve como gifanimada.gif ;
Abra o painel frames Shift + F2;
Acompanhe a numeração na figura abaixo:
1-) Abra o menu suspenso do painel
2-) Escolha Add Frames (adicionar frames);
3-) digite 9 (frames);
4-) Marque After current frame (Depois do frame atual);
5-) Tecle OK;
Veja no painel que agora você está com 10 frames.
Abra o arquivo frame1.gif, selecione e tecle Ctrl + C para copiar;
Volte ao arquivo gifanimada.gif, vá ao painel frames e selecione o frame1, Tecle Ctrl + V esta ação irá colar o frame1.gif no frame 1 do arquivo gifanimada.gif;
Abra o arquivo frame2.gif, selecione e tecle Ctrl + C para copiar;
Volte ao arquivo gifanimada.gif, vá ao painel frames e selecione o frame2, Tecle Ctrl + V esta ação irá colar o frame2.gif no frame 2 do arquivo gifanimada.gif;
Repita os procedimentos descritos acima para todos os 10 frames.
::Salvando e testando a animação::
Vamos ajustar os parâmetros para salvar como gif animada. Isto é feito no painel Optimize (Tecle F6 para abrir e fechar o painel) escolhendo-se a opção Animated GIF e Exact, como mostrado na figura.
Nota: Neste painel você poderá configurar outros parâmetros de otimização para salvar suas criações, porém isto foge ao escopo deste tutorial. É importante que você escolha Animated GIF, caso contrário sua animação não funcionará no navegador.
Tecle CTRL + Shift + R ou menu File => Export e salve como gifanimada.gif ;
Clique no triangulozinho do player, que aparece na barra logo abaixo do palco para visualizar sua GIF funcionando no palco.
Tecle F12 para visualizar sua GIF funcionando no navegador.
Você notará que a animação está muito acelerada.
::Ajustando o loop e a velocidade da animação::
Vamos agir na velocidade da animação para dar um efeito mais real.
Tecle Shift + F12 para abrir o painel Frames;
Clique sobre o pequeno triângulo localizado ao lado esquerdo da palavra Forever para abrir um menu Popup e escolha a opção Forever naquele menu.
Aqui você controla o número de vezes que sua GIF vai funcionar (loops) e Forever ajusta o funcionamento "para sempre" ou seja não pára de funcionar.
Se você escolher 2 por exemplo, a GIF funciona em dois achatamentos e pára.
Clique sobre o Frame 1 e com a tecla Shift apertada clique sobre o Frame 10 para selecionar todos os frames.
Duplo clique sobre um dos números (7 na figura) à direita para abrir a caixa de diálogo da velocidade.
Digite 15 e marque a caixinha Include when exporting, tecle Enter, e você verá a velocidade dos frames alterada de 7 para 15;
Tecle Enter.
Tecle Ctrl + F12 para testar a animação.
::Um toque final::
Vamos dar uma paradinha no início e no final da animação para melhorar o efeito;
Tecle Shift + F12 para abrir o painel Frames;
Clique sobre o Frame 1 e com a tecla Ctrl apertada clique sobre o Frame 10 para selecionar os Frame 1 e o Frame 2;
No frame 1, duplo clique sobre o número (agora, 15 no nosso caso) à direita para abrir a caixa de diálogo da velocidade;
Digite 100 e marque a caixinha Include when exporting, tecle Enter, e você verá a velocidade do Frame 1 e do Frame 10 alterada de 15 para 100;
Tecle Ctrl + F12 para testar sua GIF animada prontinha.
Tecle CTRL + Shift + R ou menu File => Export e salve como gifanimada.gif ;
Terminado! ;-)
Votos que você consiga construir GIF animada com esta técnica.
Nota: Coloquei mais dois frames no final da minha animação onde aparece uma faixa vermelha escrito em branco Arghh. Este efeito deixo para você acresentar, como exercício.
[ Efeito Chocolate ]
::Objetivo::
Mostrar a construção de um efeito simulando a aparência de chocolate em textos.
::Escolha sua imagem::
Escreva o texto no qual você pretende aplicar o efeito definindo a cor #620000 para as letras. Eu usei para este tutorial a fonte Calligrapher tamanho 50, mas você pode usar qualquer uma de sua preferência.
Com o texto selecionado, transforme-o em bitmap teclando Ctrl + Alt + Shift + Z ou use o menu Modify » Flatten Selection:
::Aplicando os efeitos::
Selecione o texto e vá ao menu: Filters » Eye Candy 400 LE » Bevel Boss
conforme mostrado abaixo.
::Os parâmentros::
A escolha no menu, abrirá uma janela para você configurar as opções para o filtro, conforme mostrado na figura abaixo.
Observe que no topo desta existem três abas.
Escolha a aba Lighting e ajuste os 4 parâmetros conforme mostrado na figura;
A seguir, passe para a aba Bevel Profile e escolha Carve.
Clique OK no botão da janela e pronto, tá feito o efeito chocolate no texto.
Este foi bem simples né?
::Efeito final::
O efeito final é conforme mostrado abaixo:
Agora você você pode usar sua criatividade e obter variações legais
Na primeira usei uma fonte diferente da usada no tutorial e nas duas seguintes apliquei o filtro Drip da Alien Skin Eye Candy 5: Nature, que não é default do FW, você precisa instalar.
