José Carlos Duarte Marques
Pós-graduação graduação em Tecnologias de Informação e Comunicação Introdução ao Ensino Pela Imagem Doutor José Alberto Lencastre
Escola Superior de Educação Jean Piaget de Viseu 2008-2009
Pós-Graduação Graduação TIC Introdução ao Ensino pela Imagem Tutorial A – Imagens para a Web
José Carlos Marques
Objectivo: •
Gravar uma imagem para a Web.
Procedimentos: Abra uma imagem que pretenda colocar num site Web, por exemplo.
Faça os tratamentos que considere importantes para melhorar a qualidade da imagem. De seguida faça File – Save Ass for WEB & device – automaticamente grave com 72 px Tal como observará, surgirá uma nova janela de gravação.
2
Os elementos do Photoshop que surgem nesta imagem são os seguintes: 1
2 3
1 – Modo de visualização. Esta opção permite comparar a qualidade da imagem original com as opções de gravação que escolhemos.
• • • •
Original – Apresenta a imagem original. Optimized – Apresenta a imagem optimizada. 2-Up – Faz a divisão do ecrã em duas partes facilitando a comparação comparação da imagem original com aquela que ficará gravada consoante as opções escolhidas. 4-UP - Faz a divisão do ecrã em 4 partes facilitando facilitando a comparação da imagem original com as diferentes qualidades da imagem.
2 – Ferramentas da janela. Permite fazer a deslocação da imagem no ecrã Permite criar, mover e redimensionar partes seleccionadas da imagem Permite ampliar ou reduzir a área de visualização da imagem. Importante para ver pormenores da imagem. Conta-gotas. gotas. Permite recolher informações sobre uma cor específica Apresenta a cor que o Eye dropper (conta-gotas) (conta gotas) identificou Mostrar/ocultar partes “fatias” “fatias da imagem 3 – Opções de gravação
3
Aqui poderá escolher o formato da imagem em que pretende gravar o documento. Os formatos disponíveis são vários como por exemplo o JPEG, GIF, PNG,… Neste exemplo optamos pelo formato JPEG pois trata-se de uma foto e este formato apresenta a melhor relação entre a Qualidade / Tamanho do ficheiro.
Neste quadro pode ainda definir a qualidade do JPEG, daí a opção do modo de visualização, referido anteriormente ser essencial. Amplie a imagem e procure as zonas de grande contraste para verificar qual será a melhor opção de gravação para a Web.
Agora compare os detalhes com o tamanho do ficheiro e o tempo de carregamento da imagem com uma ligação a 28.8 Kbps. Para o fim que pretendemos, para Web, a melhor opção é o JPEG qualidade 60.
4
Nota: Deveremos escolher a qualidade consoante a finalidade que pretendemos dar à imagem: • •
Maximum – Máxima qualidade e menor compressão; Low – Mínima qualidade, maior compressão
Ao clicar em gravar abrirá uma nova janela de opção de gravação. Grave o documento. Veja as diferenças aqui no http://www.flickr.com/photos/joseduartem/sets/72157618665152192/show/with/3555760885/
5
Pós-Graduação Graduação TIC Introdução ao Ensino pela Imagem José Carlos Marques
Tutorial B – Replace color
Objectivo: •
Mudar uma cor original numa porção de uma imagem
Procedimentos: Abra o documento que pretende alterar uma cor. Neste tutorial irei apresentar a mudança de cor de um cacto. Escolha na barra de ferramentas a ferramenta - Quick Selection Tool
O ponteiro do rato alterará a sua forma para Clique na área a alterar a cor. Irá reparar que o Photoshop irá seleccionar toda a área cujo os pixéis apresentem a mesma tonalidade.
6
Agora vamos alterar a cor da selecção. Abra o menu Image > Adjustments > Hue / Saturation
Abrirá a janela Hue / Saturation onde poderá agora variar o Hue – Cor; Saturation – Saturação; Lightness – Brilho
Varie agora cada uma das propriedades indicadas.
Faça OK e Grave.
Veja as diferenças aqui no http://www.flickr.com/photos/joseduartem/sets/72157618579064197/show/
7
Pós-Graduação Graduação TIC Introdução ao Ensino pela Imagem José Carlos Marques
Tutorial C – Replace color – com gradiente
Objectivo: Mudar uma cor original utilizando um gradiente
•
Procedimentos: Abra ra o documento que pretende fazer uma alteração de uma cor para um gradiente. Nota: Ao carregar na tecla “espaço” e se deslocar o ponteiro do rato a imagem irá deslocar-se.
Na barra de ferramentas seleccione a ferramenta Magic Wand Tool. Tool Clicque sobre a área em que pretende colocar o gradiente.
Nota: Na barra de opções da ferramenta Magic Wand Tool, que aparece logo a seguir aos menus do Photoshop, existe uma opção denominada por Tolerance. Cada pixel apresenta a sua cor e ao fazer variar a tolerância da cor dos pixéis estará a aumentar ou diminuir o número de pixéis seleccionados. • •
Se colocar em Tolerance o valor zero, não haverá tolerância ia na variação da cor dos pixéis; Se colocar em Tolerance o valor 32, a tolerância para a variação da cor do pixel será maior.;
8
Grau de tolerância 0. Apenas selecciona um número muito reduzido de pixéis.
Grau de tolerância 15. Seleccionou uma grande área de pixéis cuja variação de cor é 15
Ao proceder com a ferramenta Magic Wand Tool com a Tolerance a 20, nem todas as áreas foram seleccionadas.
Para adicionar novas áreas de selecção deverá continuar com a ferramenta Magic Wand Tool activa e em simultâneo carregar na tecla SHIFT do teclado e clicar com o rato na área a seleccionar.
Repare que toda a área do céu azul foi seleccionada.
Se seleccionar uma área que não pretendia, deverá fazer ALT SHIFT do teclado eclado e clicar com o rato na área a desseleccionar.
9
Agora vamos criar o gradiente. Para isso deveremos definir o Forground e Backgroud Na barra de ferramentas clique no local indicado. Defina o Forground.
Defina o Backgroud.
Clique na barra de ferramentas e escolha a opção Gradient Tool Trace a linha do gradiente
Vá a Menu – Select e escolha a opção Deselect. Veja as diferenças aqui no http://www.flickr.com/photos/joseduartem/sets/72157618668004448/show
10