CriarWeb.com > Manuais > Formatos de imagem para Web

Precisaremos de Adobe Photoshop, Dreamweaver ou Word, e o explorador de Windows.

1. Abra Photoshop e peça um arquivo novo. File> New. No quadro de diálogo New selecione no menu select Preset Size Default Photoshop Size, e ative transparent na seleção contents.


Este arquivo nos servirá para criar nos gráficos básicos, para exportá-los com diferentes formatos, comparar seu tamanho em bits e depois ilustrar suas características básicas em Dreamweaver ou word.

2. Selecione a ferramenta Gradiente Na barra de opções da ferramenta clique no menu select para tipo de gradiente e selecione De Cor Frontal a Transparente.


3. Aplique a gradiente a todo seu documento.


4. Salve o arquivo para WEB. File>Save for Web.

O quadro Save For Web de Photoshop nos permite salvar imagens em formatos comprimidos. Especialmente útil para aplicações Web.


5. Clique no menu select do formato (Ressaltado em vermelho na ilustração anterior). Selecione GIF. Verifique que a opção de Transparency esteja ativada. O resto dos valores podem ser os da ilustração seguinte.


6. Clique no botão Save. No quadro "Save Optimized As" crie uma nova pasta na e salve nela a gradiente com o nome GradGif.

7. Novamente File> Save For Web. Clique no menu select do formato. Selecione JPG. Na caixa de texto Quality tecle 80. O resto dos valores podem ser os da ilustração seguinte.


8. Clique no botão Save. No quadro "Save Optimized As" salve como GradJPG na pasta recém-criada.

9. Outra vez File> Save For Web. Clique no menu select do formato. Selecione PNG-8. Notará que os parâmetros são iguais aos de GIF. Verifique que o campo de Transparency esteja ativado.


10. Clique no botão Save. No quadro Save Optimized as salva como GradPNG na pasta recém-criada.

11. File> Save For Web. Clique no menu select do formato. Selecione PNG-24. Verifique que o campo de Transparency esteja ativado.

12. Clique no botão Save. No quadro Save Optimized as salva como GradPNG24 na pasta recém-criada.

No explorador de Windows navegue para a pasta que você criou na área de trabalho. Na barra de menu Clique em Ver> Detalhes para ver o tamanho e tipo dos quatro arquivos.

Você notará que o arquivo GIF é o maior de todos. Isto é porque GIF salva uma amostra de cada uma das cores que aparecem na imagem, por isso não é o formato mais adequado para tons contínuos como nossa gradiente. JPG é o mais recomendável. PNG 8 é uma boa opção, entretanto menos programas e navegadores reconhecem o formato (pode-se ver no exemplo com Dreamweaver).