Ferramentas Web, Web 2.0 e Software Livre em EVT Estudo sobre a integração de fe rramentas digitais no currículo da disciplina de Educação Visual e Tecnológica

COLOURlovers Manual e Guia de exploração do COLOURlovers para utilização em contexto de Educação Visual e Tecnológica

Elisa Cidade

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 Estudo sobre a integração de ferramentas digitais no currículo da disciplina de Educação Visual e Tecnológica

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.

©

1

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

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).

2

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

: 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

3

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

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”

4

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

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).

5

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

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).

6

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

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

7

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

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

8

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

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):

9

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

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

10

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

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

11

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

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

12

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

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

13

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

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

14

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

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.

15