Ferramentas Web, Web 2.0 e Software Livre em EVT · Estudo sobre a integração de ferramentas digitais no currículo da disciplina de Educação Visual e Tecnológica 2 ... Após

Este recurso foi produzido no âmbito da formação contínua de professores e faz parte integrante da investigação do trabalho de

doutoramento em Multimédia em Educação, pela Universidade de Aveiro do professor José Alberto Rodrigues, com o mesmo nome

desta oficina de formação. A identificação do autor deste documento é a constante desta página e constituí recurso educativo em EVT.

Ferramentas Web, Web 2.0 e Software Livre em EVT E s t u d o s o b r e a i n t e g r a ç ã o d e f e r r a m e n t a s d i g i t a i s n o c u r r í c u l o

d a d i s c i p l i n a d e E d u c a ç ã o V i s u a l e T e c n o l ó g i c a

ChocoFlop M a n u a l e G u i a d e e x p l o r a ç ã o d o C h o c o F l o p p a r a u t i l i z a ç ã o

e m c o n t e x t o d e E d u c a ç ã o V i s u a l e T e c n o l ó g i c a

Cláudia Alves

Ferramentas Web, Web 2.0 e Software Livre em EVT

Estudo sobre a integração de ferramentas digitais no currículo da disciplina de Educação Visual e Tecnológica

1

Caracterização e Ficha Técnica do ChocoFlop ©

Nome ChocoFlop

Tipo de ferramenta Software gratuito

Autores e/ou Criadores Santiago Lema ©

Versão 0.909 (versão Beta)

Tipo de versão Versão on-line sem necessidade de registo

URL’s http://www.chocoflop.com/

Língua(s) Inglês

Tipo de funções Edição de Imagem

Recursos necessários Mac Intel ou PowerPC G4

Mac OS X 10.4

Breve descrição O Chocoflop é um programa de edição de imagem para MAC.

As suas ferramentas incluem uma imensa variedade de filtros,

manipulação e transformação de fotos que vão desde cortar,

rodar, alterar cores, alterar luz, etc. Este software é bastante

interessante e completo mas, como foi descontinuado, tornou-se

gratuito e disponível na sua versão integral, com todas as

funcionalidades activas, para todos os utilizadores, APENAS

disponível para sistemas operativos MAC.

http://www.chocoflop.com/



2

Manual e Guia de Utilização e Exploração do ChocoFlop ©

1. Para trabalharmos com esta ferramenta teremos que aceder ao endereço

http://www.chocoflop.com/ (Figura 1).

Figura 1 – Página de entrada do ChocoFlop

2. Na barra de Menu, clicamos em DOWNLOAD, e no lado direito da página podemos

descarregar a aplicação (Figura 2).

Figura 2 – Download da aplicação

3. Como começar e/ou abrir uma nova imagem

http://www.chocoflop.com/



3

Após a instalação da aplicação, e para abrir uma nova imagem, basta ir em File > New (Figura

3).

Figura 3 – Possibilidades para iniciar um trabalho

Aqui vamos encontrar várias opções com modelos onde podemos especificar os valores de

altura (height) e largura (width) (Figuras 3a e 3b).

Figura 3a – Novo documento - Propriedades

Figura 3b – Novo documento a partir do clipboard



4

Já para abrir um arquivo, é só clicar em File > Open.

O Chocoflop aceita vários formatos de arquivos de imagem, inclusive de outros programas

(Figura 3c).

Figura 3c – Abertura de uma imagem utilizando dcRAW

Podemos igualmente fazer o upload de uma foto da nossa livraria/computador (onde estão as

nossas fotos e filmes) (Figura 3d).

Figura 3d – Abertura de uma imagem utilizando as nossas próprias fotos

4. Ferramentas do Chocoflop

A barra de ferramentas fica colocada no lado esquerdo do ecrã (Figura 4).



5

Figura 4 – Barra de ferramentas do ChocoFlop

1. Brush Tool - ferramenta do pincel. Existem três opções: o pincel individual (Paint brush), o

pincel que deixa sombreado (Stamp brush) e o pincel que vai deixando brilho (Magic brush).

2. Eraser Tool - ferramenta da borracha, para apagar coisas da camada selecionada.

3. Gradient - ferramenta para criar efeitos com preenchimento gradual (degradê).

4. Magic Wand - ferramenta da varinha mágica. A varinha seleciona uma região inteira da

mesma cor, cada vez que é clicada.

5. Laços - ferramenta para se fazerem seleções minuciosas nas imagens. O Laço Poligonal

(Select polygonal) liga-se ponto-a-ponto com linhas rectas entre eles. Já no Laço normal

(Select Lasso), essas selecções são feitas sem formas geométricas específicas.

6. Move Layer Tool - ferramenta para arrastar a imagem para cima e para baixo ou para a

esquerda e para a direita.

7. Color picker - Ferramenta conta-gotas que permite tirar da imagem uma amostra da cor e

colocá-la na paleta de cores.

8. Live Scale Tool – ferramenta para aumentar a imagem.

9. Live Rotate Tool - ferramenta para rodar a imagem.

10. Pan View Tool - ferramenta da mão. Permite que ao clicar e arrastar, se trabalhe sobre a

imagem.

11. Zoom - ferramenta da lupa. Serve para aumentar e ver melhor e mais detalhada alguma

imagem.



6

12. Foreground Color - ferramentas de cores. A primeira cor corresponde à cor da frente, e a

outra à cor de trás. Podem ser escolhidas novas cores ao clicar sobre um dos quadrados.

5. Trabalhar numa Imagem.

Após a abertura da imagem ou foto, a página ficará com o seguinte aspecto (Figura 5).

Figura 5 – Aspecto da interface e área de trabalho utilizando as nossas próprias fotos

6. Edição da imagem

Neste caso a imagem vai funcionar como fundo (Figura 6).

Figura 6 – Edição da Imagem



7

Para isso vamos carregar no menu Edit da barra de ferramentas.

Neste local de edição temos muitas funcionalidades:

- Cortar, Copiar e Colocar a imagem noutro documento ou colocar imagens no documento que

estamos a trabalhar (Cut, Copy, Paste, Paste Intro);

- Preenchimento da imagem como fundo (Fill Selection) através de Flat, Blended ou Live!;

- Alterar a perspectiva da imagem (Perspective Transform) (Figura 7);

- Alterar a sua Escala, deformá-la, rodá-la ou simplesmente fazê-la girar (Scale, Deform, Rotate

e Flip);

- Inserção de caracteres na imagem (Special Characters).

Figura 7 – Exemplo da transformação da perspectiva da foto

No menu Image na barra de ferramentas podemos fazer uma correcção da fotografia em

termos de tamanho e fundo (Resize Image, Resize Canvas, Rotate Image), e formas de cortar

a imagem (Crop to Selection, Crop to Visible Pixels e Crop to fit selected layers).

Também podemos converter o fundo para os bits que desejarmos (Figura 8).



8

Figura 8 – Menu Image

A próxima ferramenta diz respeito à inserção de texto na imagem ou fundo - Text (Figura 9).

Figura 9 – Menu Text

Ao clicar no símbolo de texto da caixa de ferramentas, abre-se uma caixa de texto.

Depois de se escrever o que pretendemos, temos a possibilidade de alterar na própria caixa de

texto, o estilo (Style), o alinhamento (Align) e o espaçamento (Spacing) (Figura 10).



9

Figura 10 – Colocação de texto sobre a imagem

Se clicarmos no símbolo “A” que aparece nessa mesma caixa de texto, temos a

possibilidade de alterar a cor do texto (Figura 11).

Figura 11 – Duas possibilidades de alteração da cor do texto



10

É de referir que podemos mover o texto utilizando o símbolo da caixa de ferramentas e

podemos fazer as alterações que acharmos necessárias a partir do menu Text (Figura 12).

Figura 12 – Alterações ao texto a partir do menu

7. Vamo-nos dedicar agora às Camadas ou Layers (Figura 13).

Figura 13 – Criação de Layers a partir do menu



11

Este processo poderá ser executado a partir da criação de uma nova layer no menu de

ferramentas (Figura 14).

Figura 14 – Criação de uma nova layer a partir do menu

As layers ou camadas funcionam como um conjunto de folhas transparentes, que se podem

combinar, colocando uma em cima da outra, mudando a sua ordem, mudando a sua posição

em relação à outra camada ou mesmo alterando o seu nível de opacidade, criando fusões

entre imagens. É importante referir que quando se for modificar uma imagem, deve sempre

duplicar-se a layer para manter o original.

Ao abrir uma imagem, esta abre com no mínimo uma layer, chamado Background (Figura 15).

Figura 15 – Layer relativa ao fundo

Veremos então como lidar com este layer de Background ou Fundo e como inserir novas layers

a uma imagem.

Ao abrirmos uma foto, seja em que formato for, ela aparece com apenas uma layer de nome

Background.

Devemos reparar que no quadro referente às layers, há um sinal de cadeado, ele significa que

esta layer está protegida contra algumas edições.

Para podermos editar as layers, damos um duplo clique e se desejarmos trocamos o nome

delas para as transformar em layers sem restrição nenhuma.



12

Também podemos criar uma nova layer a partir do símbolo que aparece na caixa das

layers.

De seguida digitamos o nome desejado para a nova layer (Figura 16).

Figura 16 – Criação de uma nova layer

Podemos também criar transparência nas layers para podermos trabalhar em cima do fundo.

Seleccione na paleta a layer que queremos que fique transparente e na opção Opacity, digite

50%, por exemplo, e veremos que a layer ficou semi-transparente.

Para visualizar ou esconder um layer, clicamos no ícone de olho.

na paleta das layers.

8. Filtros (Figura 17).

Figura 17 – Filtros no Menu de Ferramentas

http://usando-photoshop.blogspot.com/2008/08/misturando-e-criando-efeitos-entre.html



13

9. Filtros relacionados com a cor

Iremos de seguida dar atenção a alguns filtros destinados a modificar a cor das imagens (Collor

effect).

Color Invert - este filtro permite inverter as cores das imagens.

Color map - permite converter uma fotografia a preto e branco

Color monochrome - permite tornar uma fotografia monocromática



14

Color posterize - este filtro baseia-se na redução do número de cores

False Color – este filtro permite substituir a cor do fundo da imagem

Sepia Tone – este filtro permite fazer fotografias sépia



15

De seguida iremos dar atenção a alguns filtros destinados ao ajustamento da cor nas imagens

(Color adjustment).

Color controls – aqui podemos controlar as cores das imagens ao nível do brilho, saturação e

contraste

Exposure adjust – aqui podemos controlar a exposição da luz nas imagens

Para melhorar os detalhes ou focar objectos desfocados temos duas ferramentas que nos

ajudam: “Sharpen” e “Blur”

Sharpen luminance - permite acentuar mais os detalhes da imagem



16

Unsharp Mask - onde é criada uma marca precisamente para não acentuar tanto os detalhes

da imagem

Em relação ao desfocar de uma imagem (Blur) temos por exemplo:

Gaussian Blur - utilizado para desfocar toda a imagem.

Motion Blur - Muito semelhante ao Gaussian Blur, mas com a diferença de que dá impressão

de movimento. Aqui podemos escolher qual o ângulo da movimentação e a intensidade do

desfocamento



17

Distorções (Distortion effect) - É possível utilizar estes filtros para modificar o rosto/corpo de

uma pessoa até criar efeitos muito diferentes numa imagem.

Pinch - O filtro pega numa zona da imagem e aplica uma espécie de distorção de encolhimento

nessa região, sendo que a força vai aumentando das margens para o centro.

Twirl - Cria um redemoinho, deixando a imagem “encaracolada”. É possível definir o ângulo,

sendo que quanto maior, mais deformada fica a imagem.

Nos ajustes geométricos (Geometry adjustments) - É possível alterar e transformar o formato

da imagem

Affine Transform - O filtro altera a rotação, a escala e a translação de uma imagem



18

Efeito de mosaico (Tile effect) - A utilização destes permite-nos transformar imagens com

efeitos de azulejo ou mosaico.

Triangle Tiles - Transforma a imagem em triângulos

Efeitos meio-tom (Halftone effect) - A utilização destes filtros permite-nos alterar os meios tons

imagens.

Circular Screen - Usa uma matriz de meio-tom. Ou seja, a imagem fica em preto-e-branco e

com uma forma circular

Estilizar (Stylize)

A maioria dos filtros presentes nesta parte procura dar um efeito diferente, estilizando a

imagem de alguma forma diferente dos outros filtros.

Arestas (Edges) - Deixa as arestas extremamente brilhantes e coloridas, com preenchimento

preto. É parecido com um efeito neon.



19

Cristallize - Cria uma espécie de vitral em toda a imagem, “quebrando” a imagem em vários

pequenos pedaços de cristais coloridos. Quanto menor o tamanho dos pedaços, mais definida

fica a imagem.

Comic effect - Cria uma espécie de imagem com efeito “Banda desenhada”

Gerador (Generator)

A maioria dos filtros presentes nesta parte procura, simplesmente, criar efeitos na própria

imagem.

Estrela Brilhante (Star shine) - Coloca uma estrela cintilante no meio da imagem.



20

Lenticular Halo - É como se a imagem uma auréola de uma lente fotográfica tivesse dando um

efeito especial.

Finalmente temos a categoria dos filtros Gradientes (Gradient)

Estes filtros podem ser utilizados para criar efeitos com preenchimento gradual (degradê).

Gaussian Gradient - Efeito degradê preto e branco a partir do centro da imagem.

10. Após finalizar podemos salvar a nossa fotografia.

Podemos guardar no computador com vários formatos, para isso carregamos no botão Save

as.

Também podemos optar por exportar a imagem para a Web, para isso salvamos como Save for

Web (Figura 18).

Figura 18 – “Save for Web”

Documents

Ferramentas Web, Web 2.0 e Software Livre em EVT · Estudo sobre a integração de ferramentas digitais no currículo da disciplina de Educação Visual e Tecnológica 2 ... Após