Criação de uma galeria de fotos na Web com photoshop

Quando pensamos em fazer uma galeria de fotos para colocar na web basicamente estamos criando um site, onde existe uma página inicial com vários links para as paginas internas, como vocês verão os links são as miniaturas das fotos que quando clicadas aparecerão às grandes (no caso as páginas)
Para quem quer fazer e não sabe criar a estrutura em HTML, CSS, FLASH ou qualquer linguagem. O Photoshop nos dá uma mãozinha.

Veja como é fácil.

1 - Crie uma PASTA no DESKTOP (Área de trabalho) chamada “minha_galeria” (sem as aspas) e dentro dessa pasta CRIE OUTRA PASTA com o nome “imagens”, onde serão colocadas as imagens da nossa galeria.
2 - Inicie o Photoshop.
3 - Vá a FILE >> AUTOMATE >> WEB PHOTO GALERY

Opção Site:

4 - Escolha um estilo para a galeria no menu pop-up STYLE. Uma visualização da página inicial para o estilo escolhido é exibida na caixa de diálogo no nosso exemplo: STYLE TABLE2

Dica: Insira um endereço de e-mail que

sirva como a informação de contato para a galeria.

Opção Source Images:

5 - USE: (folder) Clique em BROWSER e ESCOLHA a pasta que criamos chamada “IMAGENS” e clique em OK

Dica: Havendo subpastas use

a opção INCLUDE ALL SUBFOLDERS

6 - Em DESTINATION selecione uma pasta na qual serão armazenadas imagens e páginas HTML da galeria, que no NOSSO EXEMPLO é a “minha_galeria”. Em seguida, clique em OK.

Opção Options:
Aqui nós vamos selecionar as opções de formatação para a galeria de fotos.
Vou colocar a que agente vai usar e depois explica as outras.

OPTIONS: General (GERAL)

7 - No nosso exemplo a Extension é .HTML e marcamos a opção: Add Width and Height attributes for Images.

PARA QUE SERVE:

• USE UTF 8 Encoding for URL: Nessa opção você escolhe a extensões de arquivo, codificação e metadados.


• EXTENSION .htm ou .html é a extensão do nome do arquivo.


• ADD WIDTH AND HEIGHT ATTRIBUTES FOR IMAGES: Adiciona atributos de largura e altura para imagens que Especificam dimensões, reduzindo o tempo de download.


• PRESERVE ALL METADATA: Preserva todos os metadados o que mantém as informações dos metadados.

OPTIONS: Banner (Topo da galeria)

8 - Escreva em SITE NAME “Galeria de fotos no Photoshop”, DATE: padrão , FONT: Arial e FONT SIZE “3”

PARA QUE SERVE:

Opções de texto para o banner exibido em cada página da galeria. Insira texto em cada um destes campos:

• SITE NAME: Aparece no topo da galeria o nome;


• DATE: A data que aparecerá em cada página da galeria. Por padrão, o Photoshop usa a data atual.


• FONT E FONT SIZE: Família de Fontes disponível e Tamanho da Fonte

OPTIONS Larges Images (imagens principais)

9 - Marque ADD NUMERIC LINKS, RESIZE IMAGE “500 pixels” CONTRAIN: width, JPEG QUELITY: 5(Escolha uma opção no menu pop-up, digite um valor entre 0 e 12, ou arraste o controle deslizante), BORDA SIZE: zero,TITLE USE: marque todas as opções, FONT: arial e SIZE “3”

PARA QUE SERVE:

• ADD NUMERIC LINKS: Adiciona links numéricos que começam em 1 e terminam no número total de paginas da galeria


• RESIZE IMAGES: Redimensiona as imagens de origem para inserção nas páginas da galeria.


• CONSTRAIN: Para que parte você deseja redimensionar a imagem.


• JPEG QUALITY: Maior valor, melhor será a qualidade da imagem e maior será o arquivo.


• BORDER SIZE: Especifica a largura, em pixels, da borda da imagem.


• TITLE USE: Especifica opções para a exibição de legendas: selecione FILE NAME para exibir o nome do arquivo ou DESCRIPTION, Credits, Title e Copyright para exibir texto descritivo retirado da caixa de diálogo Informações do Arquivo.


• FONT E FONT SIZE: Especifica a fonte e o tamanho da legenda.

OPTIONS Thumbnails (miniaturas)
10 - SIZE: 75 px, COLUMNS: 5 ROWS: 3, TITLE USE: file name (nome do arquivo), FONT: arial, SIZE: 3

PARA QUE SERVE

Opções para a página inicial da galeria, incluindo o tamanho das imagens em miniatura.

• SIZE: Especifica o tamanho da miniatura. Escolha no menu pop-up ou insira um valor em pixels para a largura de cada miniatura.


• COLUMNS E ROWS: Especificam o número de colunas e linhas para exibição de miniaturas na página inicial.


• TITLE USE: Especifica opções para a exibição de legendas embaixo de cada miniatura.

OPTIONS Custom Colors: (cores da galeria)

11 - BACKGROUND: preto, BANNER: preto, TEXT: verde, LINKS: active: vermelho, link: branco, visited: roxo

PARA QUE SERVE

Opções de cores dos elementos da galeria. Para alterar a cor de um elemento, clique na amostra de cores e, em seguida, selecione uma nova cor no Seletor de Cores. É possível alterar a cor do plano de fundo de cada página

• BACKGROUND: (Plano de Fundo)


• BANNER (Título da galeria)


• TEXT: (Texto)

A última guia e a SECURITY, que exibe o texto sobre cada imagem como uma proteção contra roubos. As operações já foram ensinadas nas outras opções
11 - Clique em OK.

O Photoshop insere os seguintes arquivos HTML e JPEG na pasta de destino:

Uma página inicial para sua galeria chamada index.htm ou index.html, dependendo das opções de Extensão.
Abra esse arquivo em qualquer navegador da Web para visualizar sua galeria.


Até a próxima semana Galera!!
SALLUG GOMES