Ferramenta de Design Gráfico/ Imagem Digital Adobe Photoshop Fábio Fernandes O Adobe Photoshop vem liderando o mercado de imagem digital há anos. Portanto, não podemos deixar de explorar essa ferramenta que proporciona, a nós profissionais, opções infinitas na criação e manipulação de imagens, seja o produto final um material de impressão ou gráfico otimizados para a web. Nesta aula, iremos focar nas áreas do Photoshop relacionadas à otimização de imagens para a web. Minha intenção é oferecer a vocês um tour em itens específicos no que diz respeito ao preparo de imagens para web (por exemplo: tamanho de arquivo, formato apropriado, resolução etc.) a fim de que possam construir um conceito-base antes de embarcarem no design do seu próprio site. Ainda que o foco desta aula seja a ferramenta Photoshop, isso não impedirá que vocês transfiram a informação aqui explorada para outras ferramentas como Corel Draw, por exemplo. A versão mais recente do Photoshop chama-se CS2 (Creative Suite 2). Caso você não tenha Photoshop instalado no seu computador, a versão teste de trinta dias está disponível para download através do site da Adobe no link abaixo (não há no momento uma versão teste em Português): Introdução http://www.adobe.com/products/tryadobe/download.jsp?ftpid=2730 Antes mesmo de apresentar o Photoshop, é importante considerarmos as formas mais comuns de gerar um gráfico para web. Criar um gráfico eletronicamente. Escanear uma imagem. Download de fotos tiradas por uma câmera digital. Download de fotos de um CD de imagens. Todos os métodos mencionados acima são válidos. Considerando que a qualidade da imagem inicialmente utilizada ou resolução do arquivo criado sejam os mesmos, não haverá diferença no gráfico gerado para web como resultado final do processo. É importante também ressaltar que o Photoshop vem acompanhado do programa Image Ready, que nada mais é do que uma versão do Photoshop focada em otimização de imagens para web, assim como criação de elementos de web como gif animado, image map, gráficos com roll-over etc.. Iremos focar mais no Photoshop, visto que é considerado a ferramenta principal. Ao aprender e familiarizar-se com a interface do Photoshop, a transferência do mesmo conhecimento para o Image Ready torna-se simples. 1
Interface A interface do Photoshop é composta de cinco áreas principais: Menu principal. Menu específico (as opções apresentadas neste menu variam de acordo com a ferramenta selecionada). Barra de ferramenta. Janela do documento. Painéis (layers, cores, histórico, ações, informação, entre outros). 2 Formatos GIF Os formatos de arquivos para web são os seguintes:.gif (Graphic Interchange Format)..JPEG ou.jpg (Joint Photographic Experts Group)..PNG (Portable Network Graphic). Um dos formatos mais usados em gráficos de web com compressão de 8-bit e um máximo de 256 cores. Uma regra geral resume o uso do GIF para arquivos com cores sólidas como ilustrações e logos. O GIF também permite a criação de arquivo com fundo transparente e animações (gif animado).
JPEG ou JPG O formato JPEG foi criado especialmente para imagens de qualidade fotográfica. Apresenta uma compressão de 24-bit of que resulta em arquivos contendo até 16.7 milhões de cores. Com isso, JPEGs são ideais para fotografias, desenhos ou qualquer imagem com complexos níveis de cores. PNG O formato PNG tem sido considerado o formato do futuro, pois permite compressão de 8-, 24-, ou 32-bit, tornando-se o formato ideal para quase qualquer tipo de gráfico. No entanto, versões de browser mais antigas (I.E. 4 e Netscape 4 ou mais antigas) não suportam esse formato e mesmo algumas versões mais atuais ainda apresentam algums problemas. Otimizando gráfico para web Otimizar gráficos para web pode ser muito simples; No entanto, é imprescindível distinguir a diferença entre reduzir o tamanho do arquivo para que seja carregado rapidamente e manter a qualidade da imagem. Nesse aspecto, programas como Photosho/ Image Ready e Fireworks ajudam muito, pois oferecem uma janela em que o documento pode ser visto em diferentes formatos e diferentes modos de compressão. Simultaneamente, são disponibilizadas informações como tempo de download e tamanho final do arquivo, muito importantes na hora de decidir o quanto deve-se reduzir o tamanho do arquivo e ainda manter uma qualidade satisfatória da imagem. A imagem abaixo mostra um aquivo sendo salvo para web como formato GIF. Para acessar essa função dentro do Photoshop, clique no menu File/Arquivo e selecione a opção Salvar para Web/Save for Web. Na parte superior desta janela, você tem a opção de visualizar o aquivo como original, otimizado, ou 2-up e 4-up. As duas últimas opções permitem que diferentes especificações sejam ajustadas a fim de se possa compará-las em uma única tela, auxiliando, dessa forma, a decisão do formato a ser utilizado e as opções a serem escolhidas dentro de cada formato. 3
O exemplo abaixo mostra as opções disponíveis para o formato GIF: A Menu do formato do arquivo. Neste caso, selecionamos GIF. B Menu de redução de cores. C Menu de Dithering. A Menu de formato de arquivo Opções: GIF, JPG, PNG-8, PNG-24 Opção selecionada: GIF. Os itens B & C são específicos à opção GIF. 4 Lossy (disponível somente para GIF) reduz o tamanho do arquivo através de remoção de informação da imagem. Quanto maior o valor lossy, menor será o tamanho do arquivo e maior será a quantidade de informação removida. Pode-se, normalmente, aplicar o valor entre 5-10 sem degradar a imagem. Essa opção pode reduzir o tamanho do arquivo entre 5% e 40%, dependendo da imagem. B Menu de redução de cores Esse menu define a tabela de cores a ser utilizada como base para redução de cores da imagem e o número de cores utilizado. Opções: perceptual, selective, adaptive, restrictive (web),custom Perceptua - Cria uma tabela de cores costumizada, dando prioridade as cores mais sensíveis à visão humana. Selective - Cria uma tabela de cores similar à perceptual; no entanto, favorecendo uma área maior de cores e preservando cores da web. Esta opção é oferecida como padrão pelo Photoshop e é a que mantém mais integridade das cores originais da imagem.
Adaptive - Cria uma tabela costumizada baseada nas cores predominantes da imagem. Restrictive (web) - Utiliza a tabela de 216 cores padrão do Windows e Mac OS (8-bit) 256 cores. Também é chamada de Web Safe Palette. Custom - Utiliza uma paleta de cores que foi criada ou modificada pelo usuário. C Menu de dithering Dithering refere-se ao método de simulação das cores não disponíveis no sistema de cores do seu computador. É definido através da especificação da quantidade de dithering que irá ocorrer na imagem uma vez exibida através do browser. Uma percentagem alta de dithering resulta numa maior aparência de cores e detalhes na imagem; No entanto, pode-se resultar em um arquivo de tamanho maior. É aconselhavem que se use o menor valor de percentagem de dithering necessário para se apresentar a qualidade de cores requerida pela imagem. Veja a imagem abaixo para uma representação visual de dither. Métodos de dithering Opções: diffusion, pattern, noise Otimização de JPG A compressão de JPG é baseado numa escala de 1 à 100. Quanto menor o número, maior a compressão aplicada à imagem, resultando numa maior perda de qualidade. Os requerimentos de compressão de uma imagem em JPG variam, mas a maioria das imagens comprimidas entre 30 e 70 resultam em uma boa proporção entre a qualidade e tamanho do arquivo. 5
Estudos recentes revelaram que tamanho e conteúdo de imagens influênciam em sua interação com o usuário. Tamanho Conteúdo Interação - 43% dos usuários perceberam fotos pequenas (80x80 pixels). - 80% perceberam fotos no site quando alteradas para tamanho médio (210x230). - 88% perceberam fotos no site quando alteradas para tamanho grande (365x230). - Imagens contendo foto de pessoas chamam mais atenção do usuário. - Imagens contendo foto de mais de uma pessoa chamam ainda mais atenção. - Usuário tende a clicar em fotos. Fonte: Human Factors International Dithering: método de simulação das cores não disponíveis no sistema de cores do seu computador. Conecte-se 6 O FlashKit é um exelente site para tutoriais de Flash contendo também uma fonte extensa de arquivos de audio que podem ser utilizados no seu filme de Flash. http://www.flashkit.com/index.shtml Palavras-chaves Imagem Digital Otimização de Imagem Formato web Internet
- Web Monkey http://www.webmonkey.com/webmonkey/design/graphics/ - Weinman, Lynda. Designing Web Graphics. New Ryders. - Human Factors International http://www.humanfactors.com 7
8