WEB DESIGN ELEMENTOS GRÁFICOS

Tamanho: px

Começar a partir da página:

Download "WEB DESIGN ELEMENTOS GRÁFICOS"

Maria de Belem Estrada Carreiro
8 Há anos
Visualizações:

1 ELEMENTOS GRÁFICOS Parte 4 José Manuel Russo 2005

2 24 A Imagem Bitmap (Raster) As imagens digitais ou Bitmap (Raster image do inglês) são desenhadas por um conjunto de pontos quadrangulares Pixel alinhados na horizontal e na vertical em quadrícula, como se pode observar na ampliação de um pormenor da imagem abaixo. Este tipo de imagem é ideal para a reprodução de fotografias, pinturas ou desenhos digitalizados, por conseguirem com grande rigor expor as mais ténues variações cromáticas e texturas ao contrário das imagens Vectoriais, que se baseiam em fórmulas matemáticas ou curvas de Bézier, mais adequadas ao desenho técnico e 3D, sendo o cromatismo mais linear (com algo de metálico) e incapaz de reproduzir texturas. Os Bitmap têm a grande vantagem de serem facilmente importáveis (inseridos) num documento de texto, bases de dados, folhas de cálculo ou páginas html, entre outros; têm três propriedades fundamentais: 1 RESOLUÇÃO corresponde ao número de pixels por polegada (DPI Dots per Inch), como: 72 dpi, 100 dpi, 300 dpi, etc. 2 PROFUNDIDADE DE COR corresponde ao número de cores que a imagem pode conter, estando escalonadas em sistemas de 2 cores (1 bit), 4 cores (2 bits), 16 cores (4 bits), 256 cores (8 bits), 16,7 milhões de cores (24 bits) ou 2 biliões de cores (32 bits); 3 DIMENSÃO corresponde à dimensão em comprimento e altura da imagem (um Bitmap é sempre um rectângulo, mesmo que exiba uma imagem circular sobre fundo branco) numa escala Métrica (mm, cm, polegadas, etc.) ou em Pixels (640x800, por exemplo). Quanto maior for qualquer um destes valores, maior será a qualidade da imagem, mas também maior será o ficheiro respectivo. Assim, para a Internet será conveniente encontrar um compromisso entre qualidade e tamanho do ficheiro, aconselhando-se uma Resolução de 72 dpi (porque na prática é a resolução do sistema VGA dos monitores), uma Profundidade de Cor de 24 bits ou 8 bits (conforme o nº de cores existentes na imagem) e uma Dimensão real (igual à a aplicar na página, usando o pixel como unidade). O Formato JPEG Outra forma de reduzir o tamanho dos ficheiros é através da sua compressão. É o caso dos ficheiros de imagem do tipo JPEG (Joint Photographic Expert Group ) que, utilizando um algoritmo de elevada taxa de compressão (variável), consegue produzir pequeníssimos ficheiros comparados com o tipo TIF, mesmo aplicados as imagens de 24 bits (aliás, mesmo a redução para 8 bits não traz qualquer benefício neste formato). A compressão de dados tem uma consequência a redução da qualidade, com introdução de ruídos

Este tipo de imagem é ideal para a reprodução de fotografias, pinturas ou desenhos digitalizados, por conseguirem com grande rigor expor as mais ténues variações cromáticas e texturas ao contrário

3 25 (como se pode observar a imagem ao lado). Daí que, durante a fase de desenvolvimento de um trabalho, não se utilize este formato para evitar a degradação da imagem cada vez que se guarda e se abre o ficheiro. No entanto, o tamanho dos ficheiros tem vantagem na sua utilização em páginas Web ou em fotografia digital (onde se consegue armazenar centenas de fotos num cartão de 64 Mb). Criar um Banner (em formato JPEG) Como vimos, o Banner é um elemento gráfico existente na zona superior das páginas Web, permitindo a fácil identificação do Site consultado é como um Cartão de Visita. Agora vamos criar um numa linguagem gráfica comum no Web Design actual, a partir de uma imagem existente (obtida por fotografia digital ou por digitalização num Scanner): Execute o PhotoPaint; Abra o ficheiro que contém a imagem (File Open); Redimensione a imagem à largura de 775 pixels (note que estamos a utilizar uma resolução de écran de 800x600) a partir do menu Image Resample indique o valor 775 (verifique se a unidade é pixel) em Image size Width; Aplique a ferramenta Crop, reduzindo a altura para, por exemplo, 100 pixels de altura; Seleccione o menu Image Color Mode Grayscale para converter a imagem numa foto a preto e branco; Seleccione o menu Image Color Mode RGB Color (24 bits) para converter a imagem numa foto a cores;(nota: a imagem mantém-se monocromática, no entanto, vai poder acrescentar cor posteriormente) Acrescente uma tonalidade à imagem: seleccione o menu Image Adjust Color Balance;

No entanto, o tamanho dos ficheiros tem vantagem na sua utilização em páginas Web ou em fotografia digital (onde se consegue armazenar centenas de fotos num cartão de 64 Mb).

4 26 na janela Color Balance, altere os valores dos Canais de cor até conseguir a tonalidade que mais se adequa ao seu Site; clique em OK; Corrija o brilho da imagem, se for necessário, no menu Image Adjust Brightness and Contrast Brightness/Contrast; Acrescente um título ao banner com a Text Tool; se necessitar de Editar o texto terá de seleccionar a ferramenta de Texto, e clicar sobre ele para alterar o seu conteúdo, ou arrastar os puxadores para o diminuir ou aumentar; posicione o Texto no sítio adequado seleccione a Selection Tool e arraste o objecto; Adicione, finalmente, o Logotipo à imagem: abra o ficheiro que contém o Logotipo (não feche a janela do banner); faça Copy (CTRL+C) do Símbolo; seleccione a janela do banner e cole o símbolo (CTRL+V), e posicioneo com a ferramenta Selection Tool; poderá acrescentar um efeito de sombra: tendo o objecto activo, seleccionar a ferramenta Drop Shadow e arrastar do objecto para a direcção pretendida; configure os valores adequados na Barra de Propriedades.

alterar o seu conteúdo, ou arrastar os puxadores para o diminuir ou aumentar; posicione o Texto no sítio adequado seleccione a Selection Tool e arraste o objecto; Adicione, finalmente, o Logotipo à

27 Nota: neste exemplo, apenas se copiou a forma que contém o Logotipo (sem o fundo) para isso, é necessário criar uma máscara (Mask): seleccione a Magic Wand Tool e clique na zona envolvente (esta

5 27 Nota: neste exemplo, apenas se copiou a forma que contém o Logotipo (sem o fundo) para isso, é necessário criar uma máscara (Mask): seleccione a Magic Wand Tool e clique na zona envolvente (esta terá de ser uniforme); inverta a selecção em Selections Invert (CTRL+SHIFT+I); copie a selecção pelo processo explicado no ponto anterior. Guarde previamente o trabalho no formato nativo CPT, com o nome banner_cor.cpt; Guarde o trabalho no formato JPEG, com o nome banner_cor.jpg (use a opção File Save As ou File Export). Criar um Padrão de Fundo Em diversos Sites é possível observar que as páginas, em vez de apresentarem um fundo de cor uniforme, têm um Padrão que se repete até aos limites da página. Os Padrões são constituídos por um ficheiro de imagem modular este Módulo deve ser construído de forma a que o lado direito se ligue correctamente com lado esquerdo e o superior com o inferior. Antes de mais, é importante que um Padrão nunca interfira com a leitura do texto ou das imagens devendo, por isso, ser desenhado com tonalidades muito próximas, caso contrário, será preferível optar por um fundo uniforme. Seleccionada uma ideia para um Módulo, execute os seguintes passos: Execute o Corel PhotoPaint; Inicie um ficheiro novo (File New); Na janela Create a New Image indique: as Dimensões da Imagem: 77x77 pixels; (procure que as dimensões sejam múltiplas da largura resolução do site, neste caso 800 menos a barra de rolamento) a Resolução: 72 dpi (Pixels/Inch); Cor de Papel (clique no quadrado amostra em Color): seleccione a cor escolhida no conjunto de cores para o fundo; clique em OK. No centro da área de trabalho desenhe ou importe a imagem que pretende aplicar (esta é a forma mais simples de criar um Módulo-Padrão); Poderá também arranjar um elemento a colocar parcialmente nos lados opostos deverá ter, neste caso, o cuidado de alinhar perfeitamente os elementos para que eles colem ao serem repetidos na horizontal e na vertical

Guarde previamente o trabalho no formato nativo CPT, com o nome banner_cor.cpt; Guarde o trabalho no formato JPEG, com o nome banner_cor.jpg (use a opção File Save As ou File Export).

6 28 Guarde previamente o trabalho no formato nativo CPT, com o nome padrao.cpt; Guarde o trabalho no formato JPEG, com o nome padrao.jpg (use a opção File Save As). Poderá, em alternativa, guardar no formato GIF que resultará num ficheiro ligeiramente mais pequeno.

cpt; Guarde o trabalho no formato JPEG, com o jpg (use a opção

Documentos relacionados

COREL PHOTO-PAINT 10. Editar uma imagem digitalizada. Rodar ou Cortar uma imagem. Corrigir a Luminosidade e o Contraste de uma imagem

COREL PHOTO-PAINT 10. Editar uma imagem digitalizada. Rodar ou Cortar uma imagem. Corrigir a Luminosidade e o Contraste de uma imagem 10 Editar uma imagem digitalizada Após a digitalização de uma imagem pode-se fazer uma série de correcções no Photo-Paint rodar ou cortar a imagem, trabalhar a luz ou a cor, converter para outro formato,