Super Tutorial Sobre Photoshop e Imagens

O que é o Photoshop ?

O Adobe Photoshop é o aplicativo de edição de imagem mais usado em computadores Macintosh e Windows. Apesar da concorrência ser forte entre os mais variados programas ao longo dos anos, com preços que chegam a ser simbólicos até alguns milhares de dólares por licença, a Adobe informa que as vendas do Photoshop são responsáveis por mais de 80% do mercado de edição de imagens e que esse número continua crescendo. Isso torna o Photoshop quatro vezes mais usado do que todos os seus concorrentes juntos.
No que diz respeito à edição profissional de imagens, o Photoshop não é apenas líder de mercado, ele também é a única possibilidade para quem preza por maior qualidade nas imagens e seu tratamento.

A vantagem do Photoshop é que com o crescimento das vendas do software é um incentivo claro para a Adobe reinvestir no programa e aperfeiçoar – ou, em alguns casos, corrigir – seus recursos, e quem ganha com isso é sempre o usuário. Enquanto o Photoshop avança numa escalada progressiva, outros fornecedores apresentam recursos mais limitados para recuperar a desvantagem, perdendo, assim cada vez mais sua fatia de mercado.

Embora os concorrentes ofereçam recursos interessantes e, algumas vezes, surpreendentes, no somatório de suas partes eles permanecem bem aquém dos recursos do Photoshop.

Como resultado, o Photoshop mantém o domínio em seu ramo de mercado. Ele nem sempre foi o melhor editor de imagens, nem foi o primeiro deles. Mas sua interface objetiva, combinada com algumas funções importantes fizeram dele o melhor recurso desde a primeira versão. Mais de uma década depois – graças às injeções substanciais de capital e a uma programação altamente criativa por parte da equipe da Adobe e do criador do Photoshop, Thomas Knoll -, ele passou a ser o mais conhecido programa de sua categoria.

Se você já está familiarizado com o Photoshop e deseja apenas conhecer seus novos recursos, continue sempre se atualizando, pois a cada nova versão tem novidade e mais facilidades são apresentadas pra todos nós.

Qual diferença entre imagens jpg, bmp, png e gif?

Formato JPEG

O formato JPEG (Joint Pictures Expert Group) é um tipo de arquivo para armazenamento de imagens que pode trabalhar com esquema de cores em 24 bits. Isso significa que este formato aceita 16,8 milhões de cores. O JPEG é um dos formatos de imagens mais populares e isso se deve à capacidade de formar imagens fiéis à original. Além disso, os arquivos em JPEG costumam não serem grandes.

O JPEG utiliza um algoritmo de compactação que se baseia na capacidade do olho humano. No entanto, mesmo sabendo-se que arquivos em JPEG podem trabalhar com até 16,8 milhões de cores, o olho humano não é capaz de enxergar todas elas de uma vez. Assim, é possível tirar uma série de informações que representam cores em imagens e manter apenas aquelas visíveis ao olho humano. Em outras palavras, o formato JPEG "tira" da imagem aquilo que os humanos não conseguem ver. Esse processo é conhecido como compressão. Isso faz com que imagens bastante realistas sejam criadas, ao mesmo tempo em que esses arquivos não ficam pesados.

Algo interessante no JPEG, é que os arquivos podem ter diferentes níveis de compressão. Quanto mais existir compressão, ou seja, retirada de informação, menor será o tamanho do arquivo, porém pior será sua qualidade. Assim, se você for disponibilizar imagens na internet, é interessante mantê-lo em um tamanho pequeno. No entanto, se a imagem for utilizada em um documento, muitas vezes é melhor mantê-la com o máximo de qualidade possível, para que a impressão seja satisfatória.

Uma desvantagem do JPEG é que a imagem normalmente perde qualidade a cada vez que o arquivo é salvo. Os arquivos em JPEG têm a extensão .jpg. Por exemplo, infowester.jpg.

Formato GIF

O formato GIF (Graphics Interchange Format) é um tipo de arquivo para imagens que trabalha com uma paleta de 256 cores e foi criado pela empresa CompuServe, em 1987. Isso faz com que o GIF não seja recomendável para figuras que precisam de aproximação da realidade, a não ser que a imagem em questão seja em preto e branco (escala de cinza). Devido a essa característica, o uso do formato GIF é voltado para ícones ou imagens que não precisam de muitas cores (ilustrações, por exemplo).

Apesar deste formato parecer limitado devido ao número baixo de cores com que trabalha, o GIF é muito utilizado por alguns recursos que oferece. Um deles é a capacidade de utilizar fundo transparente. Com isso, é possível, por exemplo, que um site publique uma imagem em GIF e esta terá como fundo a cor da página. Além disso, o GIF permite que uma seqüência de imagens sejam salvas em um único arquivo, onde cada imagem surge no lugar da anterior após um tempo pré-determinado. Isso dá a sensação de animação, como mostra a imagem abaixo.

O GIF utiliza um formato de compressão que não altera a qualidade da imagem a cada salvamento, como ocorre com o JPEG. Considerando esta forma de compressão juntamente com a capacidade de trabalhar apenas com 256 cores, o GIF consegue criar imagens com tamanho bastante reduzido. Isso foi essencial para o início da internet, onde a velocidade era bem mais baixa que a dos modems de 56 K.

A extensão dos arquivos no formato GIF é .gif. Por exemplo, infowester.gif.

Formato PNG

O formato GIF utiliza uma forma de compressão conhecida como LZW (Lempel-Ziv-Welch), que consiste em um algoritmo para o tratamento de imagens criado pela empresa Sperry Corporation, que tempos depois foi comprada pela empresa Unisys. Esta, em 1994, anunciou que cobraria royalties (uma espécie de taxa para poder utilizar a tecnologia) dos desenvolvedores de softwares para trabalhos gráficos que suportam o formato GIF. Devido a isso, em 1996 foi lançado um formato criado para concorrer com o GIF e que era melhor que esse: o PNG (Portable Network Graphics).

O PNG é interessante porque consegue trabalhar com esquema de 24 bits de cores, ou seja, 16,8 milhões de cores. No entanto, em comparação com o JPEG, a compressão obtida é mais eficiente e não proporciona perda de qualidade a cada salvamento, o que permite maior fidelidade à imagem original. Além disso, as imagens em PNG não requerem muito espaço, podendo-se ter figuras de alta definição e tamanho em bytes pequeno. Ainda assim, o JPEG costuma ter imagens de tamanho ainda menor em alguns casos.

O PNG também possui o recurso de transparência, o que o faz uma excelente alternativa ao GIF neste caso, pois é possível ter imagens com fundo transparente, mas com o objeto utilizando um número muito maior de cores.

As imagens no formato PNG possuem extensão .png. Por exemplo, infowester.png.

Finalizando

São poucos os que não se importariam em utilizar a internet sem imagens. Graças aos formatos JPEG, GIF e PNG, foi possível utilizar figuras em várias aplicações. Até mesmo o layout das páginas de internet utilizam estas imagens. Os logotipos do InfoWester, por exemplo, utilizam o formato JPEG. No entanto, a escolha de um tipo de imagem não deve ser arbitrária e certamente as informações acima ajudam a escolher qual o tipo mais apropriado para cada aplicação.

É importante frisar que existem vários outros tipos de formatos para imagens. Cada um possui características e finalidades diferentes. Mas não há dúvidas de que se você for utilizar alguma imagem na internet, os formatos explicados neste artigo são os ideais, pois além de suas particularidades, são compatíveis com uma infinidade de programas, independente de sistema operacional.

Como fazer um gif animado com Photoshop

A partir da versão 5.5 de Photoshop temos a nossa disposição um programa muito interessante para realizar, entre outras coisas, trabalhos específicos para o web, como podem ser a criação de GIFs animados ou imagens que mudem ao passar o mouse por cima (Rollover). O produto em concreto é Image Ready e vamos estudar a maneira de trabalhar com ele para realizar um GIF animado.

Criar um arquivo .psd com os diferentes fotogramas

A primeira tarefa para realizar um GIF animado com Photoshop eé criar um arquivo .psd, que é o formato próprio de Photoshop onde podemos manter as "layers", ou seja, as camadas que serão necessárias para realizar o GIF animado.

Nota: As camadas são próprias de Photoshop e de outros programas de desenho gráfico e permitem editar partes do gráfico de maneira independente. Quem quiser dominar Photoshop e similares deverá familiarizar-se com o trabalho com camadas.

Cada camada criada com Photoshop pode ser um fotograma do GIF animado, por isso podemos criar tantas camadas de acordo com quantas imagens quisermos que tenha na animação. Logo com Image Ready poderemos intercalar essas camadas na ordem que quisermos e atribuir-lhes um tempo de visualização a cada uma.

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Uma vez criada a imagem com as diferentes camadas com Photoshop, podemos salvá-la com extensão .psd, para que salve toda a informação das camadas. Uma vez salvas podemos passar o arquivo a Image Ready, que é o programa que utilizaremos para animar as camadas em um GIF animado.

Para passar o arquivo do Photoshop a Image Ready comodamente, podemos utilizar um botão que existe na parte debaixo da barra de ferramentas. O botÃO se encontra nos dois programas e podemos vê-lo remarcado na imagem à direita.

Nota: A ação de passar de um programa a outro será muito repetida durante o trabalho com Photoshop e Image Ready, visto que cada programa tem capacidades distintas e as ações que se fazem com um programa não costumam estar disponíveis no outro. Por exemplo, se quisermos editar uma camada, temos que fazer a partir do Photoshop e se quisermos criar fotogramas e selecionar as camadas que devem ser visualizadas em cada um, teremos que fazer com Image Ready. É aconselhável salvar o arquivo .psd antes de passar de uma aplicação a outra.

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Trabalho com Image Ready

Para definir cada um dos fotogramas da animação e suas propriedades temos uma janela chamada Animação. Se não a vemos ao abrir Image Ready podemos mostrá-la no menu da janela > Mostrar animação.

A janela de animação contem um botão para adicionar fotogramas que tem forma de documento novo. Em cada fotograma podemos selecionar de maneira independente as camadas que se desejam visualizar, de modo que devemos criar os distintos fotogramas da nossa animação e indicar que camadas devem ser visualizadas em cada um deles. Aliás, as camadas se podem fazer visíveis ou invisíveis pela janela de camadas com o olho que aparece do lado de cada uma das camadas. Quando se pode ver o olho, a camada está visível e quando não aparece o olho é porque está invisível.

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Para atribuir o tempo de visualização de cada um dos fotogramas temos um registro dos segundos de visualização exatamente embaixo da miniatura do fotograma. Ao clicar sobre esse registro de segundos, aparecerá uma janela para selecionar qualquer duração, em segundos.

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Quando tivermos a animação tal como desejarmos que apareça em nossa página web selecionamos no menu Arquivo, a opção "Salvar otimizada como..." e aparecerá a janela típica para selecionar o diretório e o nome de arquivo que queremos atribuir-lhe.

Otimizar a imagem com Image Ready

Podemos modificar as propiedades da imagem GIF, como número de cores ou o tipo de paleta para otimizar a imagem, com o objeto que ocupe o menor espaço possível em bytes e que seja rápida para baixar. A otimização se deve realizar respeitando a qualidade da imagem tanto como sejamos capazes. Para realizar estas ações Image Ready dispõe de uma janela chamada Otimizar, que se não aparece poderemos mostrá-la pelo menu Janela > Mostrar otimizar.

A característica mais interessante para otimizar em um arquivo GIF é o número de cores. Em geral, ao menor número de cores, menor o tamanho do arquivo. Na janela do documento podemos encontrar opções que nos permitenm selecionar a versão da imagem que queremos visualizar: a versão Original ou a Otimizada. As opções 2 cópias ou 4 coópias permitem comparar entre a versão original e algum tipo de otimização.

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Resultado obtido

Para realizar este artigo criamos um GIF animado que pode ser visto a seguir. Não é muito atraente, mas será interessante ver o resultado conseguido.

Espero Ke Tenhao Gostado !