quarta-feira, 5 de setembro de 2012

Tutorial Photoshop: Como Salvar para Web no Photoshop

Se você já teve que otimizar uma imagem para usá-la na Internet e nunca soube como fazer isso, saiba que o Adobe Photoshop possui um recurso exclusivo para ajudá-lo. O "Salvar para Web" ("Save for Web") te ajuda a enviar suas imagens para a web sem dor de cabeça.

O recurso permite mudar o tamanho da imagem e escolher o formato de arquivo mais adequado (GIF, JPEG, PNG e WMP) sem perda significativa de qualidade. Com ela, é possível obter os melhores resultados para todos os métodos de compressão.

Ela permite ainda comparar os resultados das imagens em preview. Assim, caso o formato GIF seja escolhido, por exemplo, é possível ver no preview o que a opção traria em relação à qualidade da imagem.

Passo 1. Abra a imagem que será trabalhada em "Arquivo" > "Abrir" ("File" > "Open"). Você pode também optar pelo atalho de teclado Ctrl+O. Agora, vá em "Arquivo" > "Salvar para Web" ("File" > "Save for Web");


Vá em "Arquivo" e então "Salvar para Web"


Passo 2. Agora vamos conhecer a caixa em seus detalhes e o que podemos fazer com ela;

Caixa "Salvar para Web"


Passo 3. No canto esquerdo da caixa estão dispostas algumas ferramentas. Vamos a elas:

. Ferramenta Mão ("Hand Tool"): permite clicar e arrastar a imagem dentro do preview que temos ao lado;
. Ferrameta Fatiar ("Slice Tool"): permite selecionar os slices, caso você tenha fatiado sua imagem anteriormente;
. Ferramenta Zoom ("Zoom Tool"): permite aproximar ou distanciar sua imagem dentro da caixa de preview;
. Ferramenta Conta Gotas ("Eyedropper Tool"): permite pegar uma amostra de cor da imagem no preview;
. Cor do Conta Gotas ("Eyedropper Color"): informa a cor selecionada pela ferramenta Conta Gotas;
. Alternar visibilidade das fatias ("Toggle Slices Visibilty"): alterna o modo de visibilidade dosslices caso sua imagem tenha sido fatiada no Photoshop.

Ferramentas do box "Salvar para Web"



Passo 4. Ao lado, temos as abas com opções de visualização que podem ajudar bastante na hora de otimizar o arquivo. A primeira opção é a "Original", na qual vemos a imagem sem nenhuma alteração, com as informações como nome e tamanho (em MB) na parte inferior da janela;

Opção "Original", como o nome sugere, mostra a imagem no original



Passo 5. A próxima aba se chama "Optimized" e mostra o arquivo otimizado de acordo com os ajustes feitos. No rodapé temos as informações da imagem como nome, tamanho (em MB), tempo de carregamento em velocidades de conexão que podemos definir, formato e qualidade do arquivo;

Opção "Optimized" mostra a imagem após os ajustes


Passo 6. A próxima aba, chamada "2-Up", divide a tela de preview em duas, mostrando a imagem original e a imagem otimizada com todas as informações citadas anteriormente;

Tela "2-Up" mostra a imagem original e a versão após a otimização



Passo 7. A última aba se chama "4-Up", e divide a tela de preview em quatro partes. A primeira mostra a imagem original, e as demais mostram a imagem otimizada em diferentes tipos de compressão e qualidade, dependendo do formato que você escolher;

Opção "4-Up" mostra a imagem original e outras três versões, em tipos diferentes de qualidade



Passo 8. Na parte inferior da caixa, encontramos as opções de "Zoom", informações de cor e a opção de preview em diferentes navegadores;

Opção "Preview" marcada para o navegador Firefox



Passo 9. No canto direito da caixa de "Salvar para Web" você encontra as opções de formatos para exportação. É possível salvar a imagem como GIF, JPEG, PNG e WMP, cada formato com suas características e opções de configuração próprias que influenciarão no tamanho final do arquivo;

Opções de formato de arquivo



Passo 10. Logo abaixo temos a Tabela de Cores ("Color Table"). Dependendo do formato de imagens escolhido para exportar sua imagem, a tabela mostrará a paleta de cores utilizada. Abaixo, estão disponíveis informações como tamanho, porcentagem e qualidade. É possível também alterar o tamanho e qualidade do redimensionamento para a exportação;

Tabela de Cores



Passo 11. Na parte inferior temos as opções de Animação ("Animation"), que ficarão disponíveis caso a imagem seja exportada como GIF animado (e contenha frames). Ali, você pode definir se a animação rodará apenas uma vez ou em sequência, e dar o preview pelos botões de controle. Logo abaixo, temos as opções de alvar o arquivo otimizado, cancelar e apenas confirmar as mudanças sem salvar o arquivo.

Opções de salvar, cancelar e confirmar as modificações

Fonte: TechTudo


Recentes Posts

recentposts

Random

randomposts