ferramentas web, web 2.0 e software livre em evt · manual e guia de exploração do colourlovers...

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

COLOURlovers M a n u a l e G u i a d e e x p l o r a ç ã o d o C O L O U R l o v e r s 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

Elisa Cidade

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

Nome COLOURlovers

Tipo de ferramenta Web 2.0

Autores e/ou Criadores CHROMAom, Inc. ©

Versão Versão 2

Tipo de versão Online e gratuita (com necessidade de registo)

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

Língua(s) Inglês

Tipo de funções Ferramenta para composição de cores e criação de paletas e

padrões.

Recursos necessários Computador com ligação à Internet e browser

Breve descrição O COLOURlovers é uma comunidade online e oferece um

conjunto de ferramentas de criação de cores, paletas e outras

aplicações, muito interessante para exploração em contexto

educativo (e não só). Podemos criar e partilhar Cores, Paletas e

Padrões, muitos deles criados a partir de imagens/fotografias.

http://www.colourlovers.com/



2

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

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

endereço www.colourlovers.com/.

2. Iremos visualizar a página inicial (Figura 1).

Figura 1 – Página inicial do COLOURlovers

3. Nesta primeira página, existe uma barra de menus com as opções” Browse” (Procurar),

“Creat” (Criar), “Search” (Pesquisar), “Comunity” (Comunidade), “Chanells” (Negócios),

“Trends” (Tendências), “Tools” (Ferramentas) e Store (Figura 2).

Figura 2 – Barra de menus do Colourlovers

4. Ao clicarmos na primeira ferramenta desta barra “Browse” (Procurar), temos acesso a

um infinito número Paletas, Padrões, Cores e amigos de COLOURlolovers.

5. A segunda opção da Barra de Ferramentas “Creat” (Criar), permite criar uma Paleta de

cores, criar um padrão e o nome de uma cor (Figura 3).




3

:

Figura 3 - Barra de ferramentas

5.1. Clicando em “Pallette (Paleta), aparece-nos uma janela (Figura 4), que nos explica o que

podemos criar, e nos dá acesso a três menus de criação: “Basic” (Básico), “Advanced”

(Avançado) e “From a Photo” (a aplicar a partir de uma fotografia).

Figura 4 – Criação de uma paleta de cores

5.1.1. Básica: para guardar esta Paleta de cores, exige o registo.

Figura 5 – Exemplo de paleta de cores



4

5.1.2. Avançada: remete-nos para a ferramenta COPASO (Figura 6).

Figura 6 - Página de visualização do COPASO

5.1.3. A partir de uma foto- Remete-nos para a ferramenta PHOTOCOPA (Figura 7).

Figura 7 - Página de visualização PHOTOCOPA

5.2. Clicando em “Pattern” (Padrões), aparece-nos uma janela (Figura 8), que nos explica o que

podemos criar, e nos dá acesso a dois menus de criação: “Color a Pattern” (Padrão de cor

única) e “Design a Pattern” (Padrão de Design).

Figura 8 - Criação de uma “Pattern”



5

5.2.1. Padrão de cor única. Para guardar exige registo (Figura 9).

Figura 9 – Padrão de cor única

5.2.2. Padrão de Design. Remete-nos para a ferramenta SEAMLESS (Figura 10).

Figura 10 – Página de visualização SEAMLESS

5.3. Clicando em “Color” (Cor), aparece-nos uma janela (Figura 11), que nos explica o que

podemos criar, e nos dá acesso a um menu de criação: “Creat a Color” (Criar a cor) (Figura

12).



6

Figura 11 – Nomear uma cor

Figura 12 – Criar uma cor

6. A terceira opção da Barra de Ferramentas, “Search” (Pesquisar) permite encontrar

muitas Paletas, Padrões e Cores, para nos inspirar.

7. A quarta opção da Barra de Ferramentas, “Comunity” (Comunidade) permite a partilha

de informações sobre os trabalhos realizados.

8. A quinta opção da Barra de Ferramentas, “Chanells” (Negócios) permite o acesso a

negócios, moda, etc.

9. A sexta opção da Barra de Ferramentas, “Trends” (Tendências) permite o acesso a

uma variada informação relacionada com o COLOURlovers.

10. A sexta opção da Barra de Ferramentas “Tools” (Ferramentas) permite o acesso a

algumas ferramentas de criação: SEAMLESS, PHOTOCOPA e COPASO.

10.1. Ao clicar em “SEAMLESS” visualizamos a seguinte figura (Figura 13).



7

Figura 13 – Página de visualização do SEAMLESS STUDIO

10.1.1. Do lado esquerdo da figura (Figura 14), encontramos o menu “BASIC” com

algumas formas a utilizar na criação do padrão desejado.

Figura14 – Menu Basic

10.1.2. Depois de seleccionada a forma desejada, a mesma deverá ser desenhada na

área de trabalho (Active Tool Draw), num espaço central destinado a esse fim.

Seleccionar formas:

Figura 15 – Ferramentas – Seleccionar Formas



8

Desenhar:

Figura 16 – Àrea de trabalho

10.1.3. O menu Layers permite-nos gerir o trabalho efectuado. Para tal dispõe das

seguintes ferramentas:

Delete – Apaga a forma seleccionada.

Group – Permite agrupar duas ou mais

formas para as editar em simultâneo.

Clone – Permite duplicar uma ou mais

formas.

Flip horizontally and vertically -

Permite girar a forma seleccionada

horizontalmente e verticalmente.

Move Top e Move Bottom -

Permite mover a forma seleccionada, para

cima e para baixo

Figura 17 – Ferramentas básicas de trabalho



9

10.1.4. Cada forma fica numa “Layer” e pode ser editada individualmente, podendo ser

colorida em diferentes tonalidades de cinza. A “Layer” activa fica sinalizada a

vermelho.

Figura 18 – Layers

10.1.5. Na parte superior da área de edição existem as seguintes ferramentas (da

esquerda para a direita):

Figura 19 – Barra de ferramentas

Draw: Ferramenta de desenho

Select: Permite seleccionar uma forma.

Undo e Redu: Anula ou refaz uma acção.

Zoom: Permite aumentar ou diminuir a área de edição.

10.1.6. Depois de concluido o padrão o mesmo poderá ser guardado (exige registo)

ficando o mesmo disponível na comunidade do www.colourlovers.com.

11. Ao clicar em “PHOTOCOPA” visualizamos a seguinte figura (Figura 20):




10

Figura 20 – Página de visualização da PHOTOCOPA

11.1. Do lado direito da figura (Figura 21), encontramos na parte superior uma barra de

menus (Figura 21) e um menu básico (Figura 22), com diferentes opções.

11.2. Este menu permite: publicar o trabalho (Publish), guardar o trabalho (Save), abrir o

trabalho (Open) e ajuda.

Figura 21 – Barra de Menus do PHOTOCOPA

11.3. Clicando em “Photos” (Fotos), “Colors” (Cores) ou “Gallery” (Galeria) abre-se

janelas diferentes.

Figura 22 – Opções Photos, Colors e Gallery

11.4. Clicando em “Photos” (fotos), visualizamos a figura 23. Este permite ir buscar fotos

de maneiras: digitando a URL dada foto pretendida ou procurar a foto no Flicckr.

Figura 23 – Carregar fotografias de um URL ou Flickr



11

11.5. Clicando em “Gallery” (Galeria), visualizamos a figura 24. Esta permite escolher uma

foto nas existentes na galeria e que depois de seleccionada passa para a area de

trabalho.

Figura 24 – Exemplo de uma imagem da Galeria

11.6. Clicando em “Colors” (Cores), visualizamos a figura 25. As cores que aparecem,

são as da foto.Na parte inferior temos uma serie de opções: “Bright”, “Muted”,

“Analogous”, “Chance”, “Dark” e Light”. (Figura 26), que nos permitem …..

Figura 25 – Edição e selecção de cores a partir de uma imagem

Figura 26 – Paleta de cores da imagem



12

11.7. A partir daqui começamos a construir a nossa paleta de cores. Pomos o cursor em

cima da cor que queremos seleccionar (Figura 27) e a cor aparece no quadrado, na

parte inferir (Figura 28). Repetindo os passos anteriores vamos criando a nossa

Paleta de Cores, a partir de uma foto.

Figura 27

Figura 28

12. Ao clicar em COPASO visualizamos a seguinte figura (Figura 29). Temos que entrar em

“Log in”, com a nossa senha, para podermos aceder à ferramenta.

Figura 29 – Ferramenta COPASO



13

12.1. Na parte superior da figura, temos um espaço para escrever o nome da paleta. Logo

por baixo, temos um espaço para colocarmos a imagem seleccionada. Para

seleccionar a imagem, clicamos em “Attach New” (Figura 30).

Figura 30 – Selecção de imagem para uma paleta no COPASO

12.2. Clicando em “Attach New”, aparece-nos a figura 31, clicar novamente em Procurar e

aparece-nos a figura 32. Nesta figura, vamos buscar a imagem, voltamos a clicar

em “Attach New” e a imagem aparece-nos no canto superior esquerdo, na área de

trabalho (Figura 33).

Figura 31 – Adicionar imagem à Livraria

Figura 32 – Procurar a imagem no nosso computador



14

Figura 33 – Imagem carregada pronta para a criação de uma paleta

12.3. Repetindo o processo anterior passo acrescentar novas fotos, que ficam na parte

inferior esquerda (Figura 34). Clicando na imagem que quero, ela passa para o

quadrado de cima (Figura 35).

Figura 34

Figura 35

12.4. Para podermos, criar a nossa paleta de cores, temos que clicar em “Pixelate” e

seleccionar a cor pretendida na imagem (Figura 36), clicar duas vezes e ela passa



15

para a paleta de cores, no lado direito (Figura 37). E assim sucessivamente, até

termos a nossa Paleta de cores (Figura 38).

Figura 36

Figura 37

Figura 38

12.5. No lado esquerdo, temos a cor seleccionada no momento e três barras de cor

(Figura 39). A primeira serve para alterar a cor, a segunda permite mudar o tom (da

cor seleccionada até ao branco) e a terceira permite mudar o tom(da cor

seleccionada até ao preto).

Figura 39

12.6. Depois de concluida a Paleta de Cores, poderá ser guardada e partilhada.

ferramentas web, web 2.0 e software livre em evt · manual e guia de exploração do colourlovers...

Documents