Ferramentas Web, Web 2.0 e Software Livre em EVT

Transcrição

1 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 Aviary M a n u a l e G u i a d e e x p l o r a ç ã o d o A v i a r y 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 Jorge Leal 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.

2 Caracterização e Ficha Técnica do Aviary Nome Aviary Tipo de ferramenta Web 2.0 Autores e/ou Criadores Avi Muchnick, Israel Derdik & Michael Galpert Versão Tipo de versão URL s Língua Tipo de funções Recursos necessários Não definido Gratuita, online, com necessidade de registo Inglês Phoenix: Um editor de imagem Raven: Para desenho vectorial; Toucan: Um criador de paletas de cores Computador com qualquer sistema operativo, acesso à Internet e browser. Breve descrição O Aviary é uma suite de ferramentas online que ajudam qualquer utilizador a explorar e criar um vasto leque de trabalhos. Pode-se utilizar o Aviary sem necessidade de criação de qualquer registo mas, aconselha-se à criação de um registo gratuito para que possamos guardar os trabalhos realizados. A ferramenta Aviary divide-se em seis programas com características diferentes, online, ou seja, não é necessário instalar nada no computador. Em contexto de EVT iremos apenas explorar três ferramentas: a de tratamento de imagem, desenho vectorial e paletas de cores mas, neste momento, o Aviary possui ferramentas de mistura áudio, entre outras que deverão ser lançadas brevemente e que devem incluir a criação de fontes, entre outras. 1

3 Caracterização e Ficha Técnica do Aviary (Phoenix) A Image Editor Phoenix Image Editor Phoenix Cada ferramenta do Aviary tem o nome de um pássaro. O Phoenix é um editor de imagens com ferramentas para edição e tratamento de imagens. 1. Para acedermos a esta ferramenta, devemos, no browser da Internet digitar o seguinte endereço: Para se fazer o registo do programa, (é necessário para salvar o trabalho realizado) devemos carregar no botão sign up (figura 1). Registo Figura 1 Página principal do Aviary 2. Depois de feito o registo existe a possibilidade de aceder a várias ferramentas. São seis ferramentas com características diferentes, online, onde não é preciso instalar no computador. Neste manual vamos abordar apenas três ferramentas, aquelas que se aplicam mais ao contexto de EVT, sendo elas a de tratamento de imagem, desenho vectorial e criação de paletas de cores. 2

4 Editor de imagem Barra de menus Figura 2 Página com a barra de ferramentas seleccionada 3. Após a abertura da janela devemos seleccionar o ícone editor de imagem (figura 2). Iniciaremos assim o software numa nova janela do browser (figura 3). Figura 3 Interface do aviary Phoenix 4. Usufruímos agora da possibilidade de iniciarmos uma página em branco ou abrirmos uma imagem de um documento já existente, guardado no nosso computador ou na nossa conta online. 3

5 5. Neste exemplo apresentado, abrimos uma imagem de um documento já existente, (figura 4). Nesta imagem podem ser observadas barras de ferramentas diferentes, que podem ser expandidas ou contraídas com um simples click do rato. Barra de Ferramentas Seleccionar Mover/torcer Seleccionar Abrir/ trocar camadas Histórico da actividade Edição/Aplicação de cor Figura 4 Exemplo de imagem a trabalhar 6. Fazendo um click no botão edição de cor abre-se a mesma para edição (figura 5). Clicando no botão camadas abre-se uma janela onde obtemos as diferentes camadas assim como a ordem apresentada (figura 6). No botão histórico podemos rever o histórico das acções efectuadas, assim como eliminá-las ou refaze-las (figura 6). Figura 5 Janela de edição da cor Figura 6 Indicador de camadas 4

6 7. Para abrir uma nova imagem devemos ir ao menu file e clicar em import file (figura 7). Para abrir nova imagem Figura 7 Abrir uma nova imagem 8. Deverá agora fazer procurar imagem (figura 8). Para procurar nova imagem Figura 8 Procurar nova imagem 9. Neste exemplo foram abertas três imagens, que constam na janela das camadas. Estas estão já identificadas pelos respectivos nomes. Para se fazer a identificação de cada camada (renomear) deveremos clicar duas vezes na respectiva janela. 5

7 Identificação das camadas, com os respectivos nomes. Figura 10 Novas imagens já identificadas, (foto, bola, gaivota e chão) 10. Fazendo a selecção da camada que queremos trabalhar, podemos tratar essa imagem sem interferir com os outros elementos da composição. Por exemplo: aumentado ou diminuindo o tamanho ou a disposição espacial do objecto seleccionado. Podemos também usar o blend mode para fazer mistura e transparência do objecto (figura 11). Alteração da forma e lugar Aumento do tamanho do objecto, transparência do mesmo. Figura 11 Ampliação e transparência dos objectos seleccionados 6

8 11. A qualquer momento podemos aplicar os botões undo ou redo para avançar ou retroceder no processo de trabalho. Existe o botão zoom in onde poderemos ampliar a nossa imagem para vermos pormenores, para viajarmos pela imagem quando a mesma esta em zoom out, devemos clicar no botão assinalado com a mão (figura 12). Retroceder ou avançar Zoom out ou zoom in Botão de movimento Figura 12 Avançar e retroceder no processo de criação, aumentar e diminuir a imagem na sua visualização e botão de movimento da imagem 12. A barra de menus assinalada na figura 13 dispõe de vários botões, sendo eles: File; Edit; Image; Layer; Select; Filters; View; Feedback e Help. Cada um destes botões divide-se em vários itens alguns deles referidos nas figuras 14, 15 e 16. Barra de menus Figura 13 Barra de menus com filtro Jitter aplicado à imagem 7

9 Possibilidade de abrir: um novo documento, importar um documento, salvar um documento, exportar e sair. Figura 14 Retroceder; avançar; cortar; copiar; colar; apagar Figura 15 Filtros variados Figura 16 8

10 13. A barra de ferramentas vertical, assinalada na figura 17, dispõe de várias funções. Destacamos na mesma apenas 4 botões que ainda não foram abordados. Botão de aplicação de figuras geométricas Produção de texto Ferramenta de liquidificação Ferramenta brunir Figura 17 Barra de ferramenta de figuras geométricas aberta Botão balde de cor paint bucket 14. Para se fazer uma gradação de cores devemos clicar no botão Paint bucket e de seguida em Gradient Fill Tool como mostra na figura 18. Botão gradient fill tool Figura 18 Gradação da cor 9

11 15. Para salvar o trabalho executado devemos clicar em Export image (figura 19). Figura 19 Guardar imagem 16. Seguidamente, devemos clicar em generate image (figura 20) e escolher o destino no qual a imagem será guardada. Figura 20 Guardar imagem escolhendo o destino da mesma 10

12 Caracterização e Ficha Técnica do Aviary (Raven) B Raven - Editor de desenho vectorial O Aviary Raven é uma excelente ferramenta para trabalhar com vectores. É possível trabalhar com linhas curvas/rectas, objectos e separar tudo por camadas, agrupar, ou ainda criar máscaras. 1. Para acedermos a esta ferramenta, devemos, no browser da Internet, digitar o seguinte endereço Para se fazer o registo no Aviary (é necessário para salvar o trabalho realizado) devemos carregar no botão sign up (figura 1). Neste mesmo painel devemos seleccionar (Aviary tools), e seguidamene escolher a ferramenta Raven (figura 1). Registo Barra de menus Raven Figura 1 Página inicial do Aviary 2. Neste painel devemos seleccionar (start a new Raven) para iniciarmos a ferramenta. Existe também a possibilidade de visualizar um vídeo tutorial (figura 2). Visualizar um vídeo tutorial Iniciar a ferramenta Figura 2 Iniciar a ferramenta e vídeo tutorial 11

13 3. Após o click aparecerá a interface, figura 3, deveremos clicar em, create, para criar novo documento, podemos ainda dimensionar o tamanho da folha. create 3 - Interface do Aviary - Raven 4 - Interface do Raven 12

14 4. A barra de ferramentas vertical oferece várias hipóteses. No caso do exemplo apresentado na figura 5 está seleccionado o botão figuras geométricas. 5 - Selecção figuras geométricas 5. Na composição com figuras geométricas variadas, neste painel, as figuras geométricas estão pintas com varias cores (figura 6). Podemos ainda editar a cor do fundo assim como a cor do contorno. Barra de ferramentas seleccionada Edição da cor Edição da cor do contorno Figura 6 Ferramentas de edição do Raven 13

15 6. Indicador de camadas o qual podemos nomear e ordenar (figura 7). Janela/Indicador de camadas Figura 7 Indicador de camadas 7. Na barra de ferramentas vertical, no lado esquerdo da interface, existe o botão de transformação/movimento, botão para criação de linhas e editor de texto (figura 8). Transformação/ movimento Criar linhas/vectores Editor de texto Figura 8 Ferramentas de edição para transformação e movimento 14

16 8. Continuando na barra de ferramentas referida, podemos elaborar várias formas com vectores. Podemos também editar/transformar esses vectores (figuras 9 e 10). Editor de vectores Criador de vectores Figura 9 Edição e criação de vectores Figura 10 - Edição e criação de vectores 15

17 9. Na figura 11 é apresentada a janela Fill and Stroke, que nos dá a possibilidade de transformar a cor do objecto, dando-lhe gradação de cores variadas. Figura 11 Opção Fill and Stroke 10. Exemplo da figura transformada utilizando várias funções apresentadas na janela Fill and Stroke (figura 12). Esta janela interage com os dois últimos botões da barra de ferramentas referenciada na figura 12. Transformação de gradação Edição de guias Figura 12 Aplicação de um efeito 16

18 11. Podemos ainda fazer Zoom out ou Zoom in, manusear a imagem, avançar ou retroceder no processo de trabalho e utilizar a barra de menus na parte superior do ecrã. Esta dispõe de várias funções (figura 13). Zoom out; zoom in Avançar retroceder Mover imagem Figura 13 Barra de menus e algumas funções na Interface do Raven 12. Para guardar o trabalho devemos clicar no botão save e seguir os passos recomendados (figura 14). Para salvar Figura 14 Salvar um trabalho no Raven 17

19 Caracterização e Ficha Técnica do Aviary (Toucan) C Toucan - Criador de paletas de cores O Aviary Toucan é uma ferramenta simples mas conjugada com outras ferramentas pode realizar trabalhos fantásticos. Esta é uma ferramenta específica para criação de paletas de cores, como o nome próprio diz - é um editor de cores. Pode ser usada isoladamente ou em conjunto com os outros produtos do Aviary. 1. Para acedermos a esta ferramenta, devemos, no browser da Internet, digitar o seguinte endereço Para se fazer o registo do programa (é necessário para salvar o trabalho realizado) devemos carregar no botão sign up (figura 1). Neste mesmo painel devemos seleccionar (Aviary tools) e seguidamene escolher a ferramenta Toucan (figura 1). Registo Aviary Toucan Barra de menus Figura 1 Página inicial do Aviary 18

20 2. Se clicarmos em See a video and learn more poderemos visualizar um vídeo tutorial da ferramenta, (figura 2). Figura 2 Visualizar vídeo tutorial Vídeo tutorial 3. Após clicar deveremos fazer Play (figura 3). Se optarmos por abrir a ferramenta deveremos clicar em Start a new toucan creation (figura 3). Figura 3 Opções: Play vídeo ou iniciar o Toucan Iniciar ferramenta play 19

21 4. Após o click aparecerá a interface, pronta a ser explorada (figura 4). Figura 4 Interface do Toucan 5. Na parte superior do ecrã situa-se a paleta de cores com três cores. Clicando no botão verde ou vermelho, pode-se adicionar ou remover cores (figura 5). Adicionar Retirar Figura 5 Adicionar ou eliminar cores 20

22 6. Existem ainda os botões para abrir um novo documento, importar uma imagem, enviar um feedback à Aviary, botão para visualizar a paleta em ecrã completo e um botão para inverter as cores (figura 6). Novo documento feedback Inverter Ecrã completo Importar imagens Figura 6 Opções das ferramentas do Toucan 7. Do lado esquerdo do ecrã, existe o padrão de cores, sendo possível alterar a cor, a saturação e a luminosidade (figura 7). Alterar a cor Luminosidade Saturação Figura 7 Alterar a cor, luminosidade e saturação 21

23 8. A primeira secção que se pode encontrar à esquerda da interface é o círculo cromático que nos ajuda a escolher as cores que tenham relações naturais entre si e que se possam harmonizar. Pode-se, por exemplo, a partir de uma cor escolher 6 cores ou mais (botão params) que combinem entre si, arrastando o rato (figura 8). Figura 8 Diversas opções de harmonias no Toucan 9. Clicando em type as cores combinarão de acordo com a nova regra. type Figura 9 Combinação de cores a partir da função Type e escolha de variáveis 22

24 10. Para ajustar a luminosidade da cor devemos clicar no ícone indicado. Se quisermos guardar essa cor devemos clicar em to palette e a cor aparecerá na barra de uma das cores (imagem 10). Guardar cor Ajustar luminosidade Figura 10 Ajustar a luminosidade e guardar uma cor/paleta 11. Também é possível enviar a cor para o clipboard, ao clicar na barra clipboard ou color wheel. A barra abre e fecha-se (figura 11). O clipboard possui as cores que guardamos aqui existem filtros que podem ser utilizados. filtros Figura 11 Funções Color Wheel, Clipboard e aplicação de filtros Rejeitar os filtros 23

25 12. Na barra image picker é necessário importarmos uma imagem para trabalhar. Quando o fizermos poderemos escolher uma cor da imagem e ao tocar na barra de cores superior o programa guarda essa cor. Se tivermos dificuldade na escola podemos aumentar os pixels da imagem em pixel width (figuras 12 e 13). Procurar imagem Figura 12 Funções image picker e impot image Aumentar pixel Figura 13 Função pixel widh 24

26 11. A última secção é color deficiency preview. Aqui as cores aparecem claramente distintas entre si o que é bom para os daltónicos. Veja-se o exemplo da figura 14. Figura 14 Função Color Deficiency Preview 12. Quando acabarmos de escolher/trabalhar a cor devemos salvar o trabalho, dar-lhe um nome e etiqueta-lo (figura 15). Para salvar o trabalho Figura 15 Salvar um trabalho no Toucan 13. As cores que forem guardadas apareceram no menu creations. Todas elas podem ser abertas/utilizadas no Toucan ou no Phoenix. 25