Ferramentas Web, Web 2.0 e Software Livre em EVT · A barra de ferramentas de desenho (figura 3) disponibiliza seis ferramentas de simples utilização que podem ser acedidas atravé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

Pixie M a n u a l e G u i a d e e x p l o r a ç ã o d o P i x i e 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

Luís Raimundo

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 Pixie ©

Nome Pixie

Tipo de ferramenta Web / Web 2.0

Autores e/ou Criadores Daniel X. Moore ©

Versão Online, sem indicação da versão ou data de criação

Tipo de versão Online, gratuita, com possibilidade de registo (gratuito e

necessário para guardar projetos)

URL’s http://pixieengine.com/creation/images/new

Língua(s) Inglês

Tipo de funções Programa de desenho e pintura

Recursos necessários Computador com qualquer sistema operativo, browser e acesso à

internet

Breve descrição O Pixie foi desenvolvido como uma plataforma de

desenvolvimento de jogos online. A plataforma permite o

desenvolvimento de diferentes produtos, como imagens, efeitos

sonoros, scripts, tilemaps ou entitys. No entanto, dado o objetivo

do presente trabalho e a enorme panóplia de funcionalidades, será

abordada apenas a funcionalidade de criação de imagens, uma

das que poderá ter maior impacto para a disciplina de EVT.

http://pixieengine.com/creation/images/new



2

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

1. O acesso à ferramenta Pixie

Para acedermos a esta ferramenta, devemos, no browser da Internet digitar o seguinte

endereço http://pixieengine.com/creation/images/new. (Recomenda-se a utilização do internet

browser Google Chrome)

Figura 1- Página principal do Pixie

A página inicial apresenta um conjunto de funcionalidades de fácil interpretação e semelhantes

a outros editores de imagem, como o conhecido Paint.

Ao centro encontra-se a tela de desenho, do lado esquerdo as ferramentas de desenho e do

lado direito a paleta de cores. Na parte superior encontra-se o acesso a um conjunto de

comandos à frente explicados.

No canto inferior direito do ecrã pode-se ainda aceder a um chat do software que conta com a

presença assídua do autor e que permite trabalhar de forma colaborativa no sentido de resolver

dúvidas e problemas que surjam (figura 2).

Tela de desenho

Barra de

ferramentas

de desenho

Barra de

comandos

Paleta de

cores

Hiperligações Login e

registo

http://pixieengine.com/creation/images/new



3

Figura 2- Janela de chat do Pixie

Fora da área de trabalho e sobre a barra de comandos encontram-se um conjunto de

hiperligações que permitem aceder a outras funcionalidades do site e fazer o login ou o registo

no mesmo.

2. A barra de ferramentas de desenho

A barra de ferramentas de desenho (figura 3) disponibiliza seis ferramentas de simples

utilização que podem ser acedidas através de um simples clique.

As ferramentas apresentam os nomes e funcionalidades que se apresentam na tabela

que se segue.

Figura 3- Barra de ferramentas de desenho do Pixie

NOME FUNCIONALIDADE Teclas de

atalho Exemplo

Pencil (Lápis)

Permite desenhar linhas em

qualquer direção segundo a

rede de pixéis definida.

P e 1

Mirror Pencil (Lápis

de simetria)

Desenha, em simultâneo, a

linha que se está a desenhar

(espelho).

m



4

Brush (Pincel)

Permite desenhar linhas em

qualquer direção, embora com

maior espessura.

B e 2

Dropper (Conta-

gotas)

Permite selecionar a cor a

utilizar pelas ferramentas

anteriores a partir de uma cor já

utilizada no desenho.

I e 3

Eraser (Borracha)

Apaga qualquer área do

desenho. E e 4

Fill (Preenchimento)

Preenche qualquer parte do

desenho com uma cor

selecionada.

F e 5

Tabela 1- Ferramentas da barra de ferramentas de desenho

3. A paleta de cores

A utilização da paleta de cores (figura 4) é bastante simples e intuitiva. As cores

aplicam-se apenas a quatro das ferramentas referidas (Pencil, Mirror Pencil, Brush

e Fill) e para tal basta selecionar uma delas e clicar sobre a cor desejada antes de

utilizar a ferramenta.

Figura 4- A paleta de cores.

Após a seleção de uma das cores disponíveis é possível ainda proceder a alterações da

mesma, nomeadamente a gradação da cor, utilizando o botão que se encontra na parte

superior direita (figura 5), e a alteração da intensidade que pode ser realizada clicando sobre a

cor selecionada e acedendo a um painel de mistura (figura 6).



5

Figura 5- A gradação da paleta de cores

Figura 6- Painel de intensidade de cores

Cor preta com

gradação de 50

Cor preta sem

gradação (100)



6

4. Barra de comandos e hiperligações

A barra de comandos é essencial para o funcionamento da aplicação já que permite a ceder a

um conjunto de operações necessárias, conforme se expressa na figura 7.

Figura 7- Barra de comandos

As hiperligações apresentadas permitem aceder a outras funcionalidade além das expressas

no programa, conforme apresentadas na figura que se segue, ou aceder à importante opção de

login que permite aceder a todas as funcionalidades da aplicação.

Figura 8- Hiperligações

Retrocesso

Retrocesso

Limpar a

tela de

desenho

Aceder à

consola de

comandos

Criar um

novo

desenho

Publicar no

chat

Descarregar

o desenho Repete os

movimentos

realizados

Grava o

desenho

Acede á

própria

funcionalidade

Permite aceder

as imagens

realizadas

Permite aceder

aos projetos

do Pixie

Permite aceder

ao Fórum do

Pixie

Permite aceder

a uma lista

com os

utilizadores

registados

Permite aceder

a um wiki da

funcionalidade

Permite aceder ao

login ou ao registo

na aplicação



7

5. Como utilizar o Pixie

Antes de utilizar o Pixie propriamente dito, sugere-se a realização de um registo que, como

referido, é efetuado através da hiperligação que se encontra no canto superior direito.

Após clicar nesta hiperligação surge a janela que apresenta na figura 9 e após clicar em Sign

up surgirá a janela que se encontra na figura 10. Resta apenas preencher os campos

solicitados, passando no final a ter total acesso às funcionalidades da aplicação,

nomeadamente a gravação das imagens.

Figura 9- Página de acesso ao login do Pixie

Figura 10- Página de registo do Pixie



8

Ao aceder ao Pixie editor de imagens encontra-se automaticamente disponível uma tela de

desenho, pelo que se pode de imediato iniciar o desenho. Contudo, será de ter em

consideração a aplicação da imagem a criar, já que a tela de desenho disponibilizada é muito

pequena, dando assim origem a imagens muito pequenas, que se redimensionadas para um

tamanho maior perderão muita qualidade, podendo este facto inviabilizar a sua utilização.

Desta forma, e sendo de ponderar a utilização final da imagem, recomenda-se a utilização de

uma tela de maior dimensão, o que pode ser efetuado clicando no botão New, na barra de

comandos (figura 11).

Figura 11- Acesso ao botão New

Após clicar no referido botão surge uma janela pendente que permite definir o tamanho da tela,

estando limitada a uma dimensão de 640x640 pixéis (figura12). Deve-se introduzir o valor

desejado e clicar em New Canvas.

Para as operações que se seguem foi selecionado uma tela com a dimensão de 200x200

pixéis.



9

Figura 12- Definição da área da tela de desenho

De notar na figura 13 que a tela passou a ser maior que a área disponível, pelo que será

necessário utilizar as barras de deslocação vertical e horizontal para aceder a toda a tela de

desenho.

Figura 13- Tela de desenho 200x200 pixéis

A utilização e combinação das ferramentas dependerão do objetivo do utilizador. Nas figuras

que se seguem apresenta-se o exemplo da criação de uma imagem, tendo-se iniciado pela

utilização da ferramenta Fill para a criação de um fundo (figura 14).



10

Figura 14- Utilização da ferramenta Fill para colorir o fundo da imagem

De seguida utilizou-se a ferramenta Pencil para desenhar os contornos da figura e com a

ferramenta Fill coloriu-se o interior da mesma, resultando na imagem que se apresenta na

figura 15.

Figura 15- Utilização das ferramentas Pencil e Fill para a criação de uma figura

Saliente-se que a ferramenta Eraser deverá ser utilizada com cuidado, pois a utilização desta

ferramenta em camadas de tinta sobreposta leva a que não se apaque apenas a de cima, mas

sim todas as camadas (figura 16)



11

Figura 16- Utilização da ferramenta Eraser

6. Salvar e Download

Após ter criado a imagem da forma poder-se-á salvar a imagem para futura utilização ou

efetuar de imediato o download da mesma para utilizar num outro aplicativo como, por

exemplo, o MSWord.

Para gravar basta clicar sobre o botão Save e aguardar que este seja, salvo. Note-se que o

registo gratuito apenas permite armazenar um projeto, para armazenar mais de um terá de ser

efetuado um pagamento.



12

Figura 17- Gravação da imagem

Para fazer o download da imagem terá de clicar no botão de download, altura em que se irá

abrir um novo separador no browser que disponibilizará a imagem (figura 18). Neste basta

clicar com o botão direito do rato em cima da imagem e decidir se se quer guardar a imagem

ou copiá-la para utilização imediata.

Figura 18- Download da imagem criada



13

O resultado final será uma imagem como a que se apresenta na figura 19.

Figura 19- Resultado final

Documents

Ferramentas Web, Web 2.0 e Software Livre em EVT · A barra de ferramentas de desenho (figura 3) disponibiliza seis ferramentas de simples utilização que podem ser acedidas através