sábado, 11 de junho de 2011

Efeito Bloquinho de Recados

Importante: nesse tutorial utilizaremos o filtro XENOFEX 2 para criar o efeito de papel amassado.clique aqui e faça o download do plugin


Passo 01. Abra o Fireworks
Passo 02. Crie um novo documento clicando em File -> New (Ctrl+N), Largura=> Width=300, Altura=> Height=300, Resolution= 72, Canvas Color = White (branco ou na cor de sua preferência).


paisagem1

O documento deverá ficar assim:
paisagem2

Passo 03. Na barra de ferramentas à esquerda do seu monitor, vá até Vector e selecione a ferramenta Rectangle Tool (U):
paisagem3

Passo 04. Vá até o documento com o fundo em branco e faça um retângulo sem se preocupar com seu tamanho. Em seguida, com a ferramenta Select -> Pointer Tool (V, O) selecionada, clique no retângulo, deixando-o selecionado e vá para o próximo passo.
Passo 05.Com o retângulo selecionado, vá até a barra de Propriedades na parte inferior, e acerte o tamanho e a cor da figura, conforme abaixo:
Width= 190
Height= 270

X = 59 (eixo x – posicionamento horizontal da figura)

Y= 13 (eixo y – posicionamento vertical da figura)

Cor do retângulo: #FFFACD

Clique ao lado do ícone do “baldinho”, para selecionar a cor desejada para o papel do bloco de recados (se você tiver uma tabela de cores hexadecimais, basta pegar o código de sua cor preferida e inserí-lo no Swap Colors, como mostra a figura.
paisagem4
paisagem5

Passo 06. Vá novamente até a barra de ferramentas, e selecione Vector -> Ellipse Tool (U):
paisagem6

Passo 07. Agora iremos criar os furinhos do papel, simulando os furos existentes em cadernos espirais ou blocos. É um pouco trabalhoso mas o efeito é sensacional, por isso, tenha paciência e muita atenção.
Com a ferramenta Ellipse tool (U) selecionada, vá até o documento e faça um pequeno círculo segurando ao mesmo tempo a tecla Shift para manter as proporções [faça o círculo de preferência em uma cor escura para facilitar a visualização (escolhi preto)].
paisagem7

Passo 08. Para acertar o tamanho e o posicionamento correto do pequeno círculo, vá até a barra de propriedades e deixe as medidas conforme descrito abaixo:

Width = 15
Height = 15

X= 69
Y=22


Cor do círculo = preto = #000000
paisagem8

Passo 09. Iremos criar agora a segunda parte da “peça” que em breve se tornará o furo do papel.
Vá novamente até a barra de ferramentas, e em Vector selecione Rectangle Tool (U).
paisagem9

Passo 10. Vá ao documento e faça um pequeno retângulo.
paisagem10

Passo 11. Agora vá para a barra de Propriedades para acertar o tamanho e o posicionamento correto do pequeno retângulo.

Width= 5
Height= 10

X= 74
Y= 13

paisagem10

Você irá observar que o retângulo e o circulo preto, ficarão quase que sobrepostos, mas lembre-se que eles ainda são figuras separadas.
paisagem1
Caso você esteja achando as figuras menores muito pequenas para fazer o posicionamento correto, vá até o canto inferior direito da tela e clique no percentual para aumentar a visualização do documento, conforme a seguir:
paisagem2

Passo 12. Agora iremos fundir o pequeno círculo preto e o pequeno retângulo preto, para assim formar a figura que dará o efeito de recorte do papel. Na barra de ferramentas, vá até Select e selecione Pointer Tool (seta preta). Depois selecione o circulo preto enquanto segura o Shift, e selecione também o retangulo preto.
paisagem3

Passo 13. Em seguida vamos fundir as partes para obter uma “peça” única. Com as 2 figuras selecionadas, clique em Modify -> Combine Paths -> Union.
paisagem4
O resultado da união será a fusão das 2 figuras, como na imagem abaixo:
paisagem5

Passo 14. Mantendo a figura selecionada, vá até a barra de Propriedades, e acerte o tamanho e o posicionamento correto da figura preta:

Width= 15
Height= 24

X= 72
Y= 13

paisagem6

Passo 15. Agora iremos copiar e colar a figura, repetindo o processo algumas vezes, para assim obtermos o efeito de vários furos no papel.
paisagem7
É importante atentar-se para a proporção do espaço entre as figuras pretas, para não ficar com uma mais para um lado do que outro ou mais para cima ou para baixo.
A segunda figura deve estar uns 10 toques (feitos com a tecla -> do seu teclado) de distância da primeira, mantendo a mesma posição do eixo vertical (Y):
paisagem8

Passo 16. Continue copiando e colando a figura preta, mantendo a mesma distância entre elas, no total teremos 7 “peças” pretas.
paisagem9
paisagem10

Passo 17. Selecione novamente a primeira peça com a ferramenta Pointer Tool e mantendo a tecla Shift pressionada, selecione também o retângulo amarelo que é nosso papel.
paisagem11

Passo 18. Agora clique em Modify – Combine Path – Punch
paisagem1
Resultado do recorte da primeira peça:
paisagem2

Passo 19. Repita os passos 17 e 18 em todas as peças pretas, uma de cada vez, sempre selecionando a peça que é a figura que fará o recorte desejado e, segurando o Shift, selecione o retângulo, que é o papel que sofrerá o recorte. Veja como ficará:
paisagem3

Passo 20. Para que possamos visualizar melhor, vamos agora mudar a cor do fundo (Canvas), que antes era branca, para a cor desejada, no caso escolhi: #FF6600:
paisagem4

Passo 21. Vamos visualizar a figura abaixo, para vermos o resultado até agora:
paisagem5
Agora nossa folha do bloco de recados já tem forma, bastando alguns passos à mais para torná-la um pouco mais realística.

Passo 22. Vá até a barra de ferramentas e em Vector, selecione Line Tool (N).
paisagem6
Em seguida faça uma linha simples na parte superior da nossa folha do bloco de recados.
paisagem7

Passo 23. Agora iremos estilizar nossa linha. Com a linha selecionada com a ferramenta Pointer Tool, vá até a barra de Propriedades e, na caixa de cor ao lado do ícone do lápis, escolha uma cor desejada para sua linha (escolhi a cor #6666FF). Agora clique em Tip Size, que fica logo ao lado da caixa de cor e escolha o tamanho da espessura da linha, no caso escolhi 1. Ao lado do Tip Size, existe a ferramenta Stroke Category, onde é possível escolher a forma artística da linha, selecione então Dashed -> Dotted para obtermos uma linha pontilhada (mas você pode utilizar o tipo de linha que mais agradá-lo, desde que mantenha um padrão delicado e suave de linha).

Não esqueça de acertar o tamanho e posicionamento da primeira linha, pois as linhas seguintes seguirão o mesmo padrão:

Width= 166
Height= 1
X= 73
Y=57
paisagem8
Veja como ficou a linha:
paisagem9

Passo 24. Agora você deve selecionar, com a seta Pointer Tool, a linha que acaba de fazer e copiar e colar cada linha, uma de cada vez, deixando um espaço de 20 toques com a seta para baixo do seu teclado. Repita o passo até que sua folha fique com a aparência a seguir:
paisagem10

Passo 25. Agora vamos agrupar a folha e as linhas. Para isso, selecione a folha, mantenha o Shift pressionado e também selecione todas as linhas com a seta Pointer Tool. Clique em Modify -> Group (Ctrl+G). Agora sua folha e linhas ficarão agrupadas.
paisagem11

Passo 26. Agora iremos utilizar o filtro mencionado no início do tutorial, o XENOFEX 2. Ele já deverá estar instalado corretamente para darmos o efeito de um papel levemente amassado. Selecione a folha/linhas que já foram agrupadas, e vá até a barra de Propriedades. Ao lado direito da barra você encontrará os filtros, clique no sinal de + da área dos Filters e selecione o filtro Alien Skin Xenofex 2 -> Crumple.
paisagem1
Ao selecionar Crumple, abrirá a tela abaixo, onde você poderá configurar o efeito de papel amassado. Como não queremos que o efeito fique exagerado, vamos mexer bem pouco na configuração. Assim só iremos alterar o primeiro item Crumple Size = 22.42, e Crumple Force = 6. Você irá perceber no seu programa, que logo abaixo tem 2 itens chamados Distort Image, que estará selecionado e inativo e Seamless Tile que estará selecionado e ativo. Assim, para obtermos um efeito suave, basta clicar em Seamless Tile para desativá-lo. Automaticamente o Distort Image ficará ativo e selecionado. Aí basta dar OK e voltar para a tela principal do Fireworks.
paisagem2
Agora veremos o resultado do papel amassado, que está praticamente pronto:
paisagem3
Caso não goste do resultado do amassado do papel, basta dar duplo clique em Crumple (veja fig36) e reconfigurar de acordo com sua necessidade, na tela de configuração mostrada a seguir:
paisagem4

Passo 27. Para tornar mais realístico o efeito do nosso papel, vamos criar uma leve sombra abaixo do papel. Para isso, vá até a barra de Propriedades -> Filters -> Shadow and Glow –> Drop Shadow.
paisagem5

Passo 28. Ao clicar em Drop Shadow, irá aparecer uma pequena caixa para configuração, conforme fig38:
Distance=7
Opacity= 50%
Softness= 9
Angle= 223.

paisagem6
Veja o resultado até agora:
paisagem7

Passo 29. Se desejar, escreva um texto antes, sempre deixando as letras em cima da linha e depois de selecionar o texto e a folha (você pode até agrupá-los com Ctrl+G), dê uma leve girada em tudo, selecionando-os com o Pointer Tool e clicando em Modify -> Transform – Scale.
paisagem8
Lembre-se, escolha uma fonte adequada e não muito pesada. Eu utilizei a fonte: Brandley HAND ITC.
Pronto! Veja o resultado final:
paisagem9

Colaboração enviada por Déia Cândido

domingo, 27 de março de 2011

ATENUANDO AS SARDAS

Hoje trabalharesmos tratamento de imagem.
Vamos Aprender como diminuir as sardas.

Existem muitas maneiras de fazer isso... pode ser com Stamp Tool, Healing Tool, mas com essas ferramentas, geralmente a foto fica "digital" demais!

O modo que vamos ver agora é simples, rápido e deixa a foto natural.

1- Abra a foto da pessoa que tem sardas

2- Com a Lasso Tool, crie uma seleção na área das sardas:

3- Aplique Feather de 2 pixels (Select > Feather).

4- Copie (ctrl+c) e cole (ctrl+v). Coloque o nome de BLUR nesta camada. Duplique a camada BLUR e mude o nome para High Pass, depois oculte essa camada.

5- Na camada BLUR, aplique Filter > Blur > Gaussian Blur (5 pixels).

6- Reparem que as sardas já sumiram, porém a pele ficou sem textura.

Vamos corrigir isso!
7- Vá na camada High Pass e aplique Filter > Other > High Pass.
Diminua até as sardas sumirem, mas que ainda fique a textura da pele, veja na figura abaixo:

8- E pra finalizar, coloque a camada High Pass no modo Overlay.

PRONTO! Moleza não é mesmo!?


domingo, 27 de fevereiro de 2011

..: Efeito chuva :..

Está chovendo muito lá fora, então pintou uma idéia.
Vamos fazer um efeito chuva numa foto. Vamos selecionar uma imagem. Sou fã do Flicker, Olhares ou 1000imagens fique a vontade para escolher. Minha sugestão é essa:

::A foto onde vai ser aplicado o efeito::


Escolha uma foto para aplicar o efeito. Mas lembre-se, dê preferência a imagens de dimensões reduzidas e procure otimizar a foto inicial para não ter como resultado final um arquivo muito grande.


Neste tutorial usei uma foto de 400 x 400 pixel extensão jpg e qualidade 70, resultando em uma gif final de pouco mais de 200kB (enorme!)

::Criando o primeiro layer de trabalho::

Carregue a foto no Fireworks; Se o painel Layers não estiver visível tecle F2;
Você verá no painel, uma miniatura da foto.


  1. Dê dois cliques em cima da imagem em miniatura;

  2. Digite um nome para o layer da foto. Eu escolhi o nome "Fundo";

  3. Clique em cima do ícone do lápis transformando-o em um cadeado e bloqueando o layer
    A seguir clique no palco.

::Construindo um retângulo transparente sobre a foto::


Selecione a ferramenta retângulo e ajuste os parâmetros para preenchimento solido na cor branca, sem linha de contorno e transparência 50.


A seguir arraste e desenhe o retângulo ultrapassando os limites da foto. Você notará que a foto vai ser vista por trás do retângulo e através da transparência.


Tudo como mostrado abaixo:


::Aplicando efeitos no retângulo::


Selecione o retângulo que acabamos de construir;

Abra o menu suspenso Filter e escolha Noise ==> Add Noise;
No painel que se abre digite
Amount: 280 e deixe Color desmarcada. Tecle OK


A foto vai ficar borrada! Não se preocupe e assim mesmo.


Abra o menu suspenso Filter e escolha Blur ==> Motion Blur;
No painel que se abre digite
Angle: 240 e Distance: 40. Tecle OK


O resutado até este ponto é este:


::Entendendo o que fizemos até aqui e o que fazer agora::


Temos uma foto de fundo (onde vai chover) em um layer bloqueado para edição e que vai se distribuir por todos os frames ("Share across frames") da animação que iremos criar;

E, temos uma "chuva parada" no Layer 1, que simulamos com um retângulo branco transparente onde aplicamos dois efeitos.

Animação, como você já deve saber se faz com frames.

Vamos criar mais três frames que juntos com o frame inicial que é criado quando você abre o FW totalizarão quatro frames.

No frame inicial temos a foto e a chuva. Nos 03 frames que adicionaremos, serão criados com a foto de fundo, pois já dissemos ao FW ("Share across frames") o layer "Fundo".


::Criando os frames::

Se o painel Frames não estiver visível tecle Shift + F2;

Clique no triangulozinho em cima e à direita no painel Frames para abrir um menu suspenso;

Escolha no menu a opção Duplicate Frames para abrir uma caixa de diálogo.

Marque Number: 3 e After current frame como mostrado a figura abaixo. Tecle OK


::Colocando a chuva nos três Frames criados::


Clique em cima do Frame 2. Ele ficará azul e a "chuva" vai reaparecer;

Atenção agora: Ainda no Frame 2 clique no retângulo da chuva que você acabou de colar, segure o mouse e arraste um pouco para o lado e para baixo o retângulo.

Volte ao painel Frames clique no Frame 3, arraste o retângulo para outro lado e para baixo. Tudo como você fez para o Frame 2.

Faça o mesmo para o Frame 4.


::Testando a animação::

Tudo pronto. Vamos testar nossa animação


Clique no botão play qua está no rodapé do palco.


Ficou ruim a animação. :-(
Volte nos frames e mude a posição do retângulo (clique e arraste).
Vá experimentando que você descobre um deslocamento ideal para o retângulo nos frames.


::Finalizando::

Vamos "Salvar" nossa animação. Mas teremos que salvar como GIF ANIMADA, senão não vai funcionar no browser. E, temos que definir loop infinito para ficar chovendo sempre. :-).

Se o painel Optimize não estiver visível tecle F6;

escolha Animated GIF WebSnap.

No painel Frames abra o menu suspenso lá em baixo do painel e escolha Forever
(loop infinito)


Agora pode Salvar: Menu File ==> Export

Confira o resultado final CLIQUE AQUI

::Veja como ficou com OUTRA FOTO