Criar galerias de fotos na Web

Uma galeria de fotos na Web é um site da Web que apresenta uma página inicial com imagens em miniatura e páginas de galeria com imagens em tamanho normal. Cada página contém links que permitem aos visitantes navegar pelo site. Por exemplo, quando o visitante clica em uma imagem em miniatura na página inicial, a imagem em tamanho normal associada é carregada em uma página da galeria. Use o comando Galeria de Fotos na Web para gerar automaticamente uma galeria de fotos na Web a partir de um conjunto de imagens.

O Photoshop fornece vários estilos para sua galeria, que podem ser selecionados com o comando Galeria de Fotos na Web. Se você for um usuário avançado que conhece HTML, poderá criar um novo estilo ou personalizar um estilo editando um conjunto de arquivos de modelo HTML.

Cada modelo de estilos de galeria tem diferentes opções. Se estiver usando um estilo predefinido, algumas opções podem estar desativadas, ou indisponíveis nesse estilo.

Criação de uma galeria de fotos na Web

Criar galerias da Web usando o Adobe Bridge

O Adobe Bridge fornece recursos atualizados de galeria na Web. Para instruções, consulte Criação de uma galeria de fotos na Web na Ajuda do Adobe Bridge ou visualize os tutoriais abaixo.

Usar o plug-in do Photoshop opcional mais antigo

Como verificar se as cores correspondem

Se você trabalha com fotos em um espaço de trabalho de cor gamut, como ProPhoto RGB ou Adobe RGB, as cores das imagens poderão mudar quando exibidas em uma galeria da Web por um navegador que não lê perfis de cores incorporados. Se isso acontecer, tente converter os perfis de imagem em sRGB (que a maioria dos navegadores usam como padrão) antes de otimizá-los ou incluí-los em uma Galeria de Fotos na Web. Converta-os em sRGB seguindo um destes procedimentos. Uma boa opção é trabalhar com uma cópia das imagens.

• Para converter uma única imagem, escolha Editar > Converter para Perfil e, em seguida, escolha sRGB. Atribua ou remova um perfil de cor (Illustrator, Photoshop)

• Para converter uma pasta de imagens, use o Processador de Imagens. Escolha Arquivo > Scripts > Processador de Imagens. Consultee Conversão de arquivos com o Processador de Imagens.

Se usar o Processador de Imagens, poderá salvar os arquivos diretamente em formato JPEG, no tamanho desejado. Para isso, Redimensionar Imagens deve estar desativado nas opções de Imagem Grande.

Opções de galeria de fotos na Web

Opções para extensões de arquivo, codificação e metadados.

Usa .htm ou .html como a extensão do nome do arquivo.

Usa a codificação UTF-8.

Especifica dimensões, reduzindo o tempo de download.

Mantém informações de metadados.

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

O nome da galeria.

O nome da pessoa ou organização que está recebendo crédito pelas fotos da galeria.

As informações de contato da galeria, como número de telefone ou endereço comercial.

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

(Disponível para alguns estilos de site) Opções para o texto do banner.

Opções para as imagens principais que aparecem em cada página da galeria.

(Disponível para alguns estilos de site) Insere uma sequência numérica (começando por 1, terminando pelo número total de páginas na galeria) que é exibida horizontalmente na parte superior de cada página da galeria. Cada número corresponde a um link para uma respectiva página.

Redimensiona as imagens de origem para inserção nas páginas da galeria. Escolha um tamanho no menu pop-up ou insira um tamanho em pixels. Para Restringir, escolha as dimensões da imagem que deseja restringir durante o redimensionamento. Em Qualidade JPEG, escolha uma opção no menu pop-up, digite um valor entre 0 e 12, ou arraste o controle deslizante. Quanto maior for o valor, melhor será a qualidade da imagem e maior será o arquivo.

Especifica a largura, em pixels, da borda da imagem.

(Disponível para alguns estilos de site) Especifica opções para a exibição de legendas embaixo de cada imagem. Selecione Nome do Arquivo para exibir o nome do arquivo ou selecione Descrição, Créditos, Título e Copyright para exibir texto descritivo retirado da caixa de diálogo Informações do Arquivo.

(Disponível para alguns estilos de site) Especifica a fonte e o tamanho da legenda.

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

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

Especificam o número de colunas e linhas para exibição de miniaturas na página inicial. Essa opção não se aplica a galerias que utilizam o Estilo de Quadro Horizontal ou Estilo de Quadro Vertical.

Especifica a largura, em pixels, da borda de cada miniatura.

(Disponível para alguns estilos de site) Especifica opções para a exibição de legendas embaixo de cada miniatura. Selecione Nome do Arquivo para exibir o nome do arquivo ou selecione Descrição, Créditos, Título e Copyright para exibir texto descritivo retirado da caixa de diálogo Informações do Arquivo.

(Disponível para alguns estilos de site) Especifica a fonte e o tamanho da legenda.

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 da Adobe. É possível alterar a cor do plano de fundo de cada página (opção Plano de Fundo) e do banner (opção Banner).

Exibe o texto sobre cada imagem como uma proteção contra roubos.

Especifica o texto a ser exibido. Selecione Texto Personalizado para inserir texto personalizado. Selecione Nome do Arquivo, Descrição, Créditos, Título ou Copyright para exibir texto descritivo retirado da caixa de diálogo Informações do Arquivo.

Especificam a fonte, a cor e o alinhamento da legenda.

Posiciona o texto na imagem em um ângulo.

Estilos de galeria de fotos na Web

O Photoshop fornece vários estilos para sua galeria de fotos na Web. Se você for um usuário avançado que conhece HTML, poderá criar um novo estilo ou personalizar um estilo editando um conjunto de arquivos de modelo HTML.

Os estilos de galerias de fotos na Web fornecidos pelo Photoshop são armazenados em pastas individuais nos seguintes locais:

Arquivos de Programas/Adobe/Adobe Photoshop CS5/Predefinições/Galeria de Fotos na Web.

Adobe Photoshop CS5/Predefinições/Galeria de Fotos na Web.

O nome de cada pasta nesse local aparece como uma opção no menu Estilos, na caixa de diálogo Galeria de Fotos na Web. Cada pasta contém os seguintes arquivos de modelo HTML que o Photoshop usa para gerar a galeria:

Determina o layout da legenda que aparece abaixo de cada miniatura na página inicial.

Determina o layout do conjunto de quadros para exibir páginas.

Determina o layout da página inicial.

Determina o layout das páginas da galeria com imagens em tamanho normal.

Thumbnail.htm Determina o layout das miniaturas que aparecem na página inicial.

Cada arquivo de modelo contém códigos e sinais HTML. Um sinal é uma sequência de caracteres de texto substituída pelo Photoshop quando você define sua opção correspondente na caixa de diálogo Galeria de Fotos na Web. Por exemplo, um arquivo de modelo pode conter o seguinte elemento TITLE, que usa um sinal como seu texto incluso:

<TITLE>%TITLE%</TITLE>

Ao gerar a galeria usando esse arquivo de modelo, o Photoshop substitui o sinal %TITLE% pelo texto digitado em Nome do Site na caixa de diálogo Galeria de Fotos na Web.

Para compreender melhor um estilo existente, abra e estude seus arquivos de modelo HTML usando um editor de HTML. Uma vez que são necessários apenas caracteres ASCII padrão para criar documentos HTML, é possível abrir, editar e criar esses documentos usando um editor de texto comum, como Notepad (Windows) ou TextEdit (Mac OS).

Sobre a personalização de estilos da galeria de fotos da Web

Personalize um estilo existente de galeria de fotos na Web editando um ou mais de seus arquivos de modelo HTML. Ao personalizar um estilo, é necessário seguir estas diretrizes para que o Photoshop possa gerar a galeria de maneira correta:

• A pasta do estilo deve conter estes arquivos: Caption.htm, IndexPage.htm, SubPage.htm, Thumbnail.htm e FrameSet.htm.

• É possível renomear a pasta do estilo, mas não os arquivos de modelo HTML da pasta.

• Você pode ter um arquivo Caption.htm vazio e colocar os códigos e os sinais HTML que determinam o layout da legenda no arquivo Thumbnail.htm.

• Pode-se substituir um sinal em um arquivo de modelo pelo texto ou código HTML apropriado, para que uma opção seja definida por meio do arquivo de modelo e não na caixa de diálogo Galeria de Fotos na Web. Por exemplo, um arquivo de modelo pode conter um elemento BODY, com os seguintes atributos de cor do plano de fundo, que utiliza um símbolo como seu valor:

  bgcolor=%BGCOLOR%

  Para definir a cor do plano de fundo da página como vermelho, substitua o sinal %BGCOLOR% por “FF0000.”

• É possível adicionar códigos e sinais HTML aos arquivos de modelo. Todos os sinais devem estar em maiúscula, além de começar e terminar com um símbolo de porcentagem (%).

Personalização ou criação de um estilo da galeria de fotos da Web

Sinais de estilos de galeria de fotos na Web

O Photoshop usa sinais nos arquivos de modelo HTML para definir um estilo padrão de galeria de fotos na Web. Ele usa esses sinais para gerar uma galeria com base na entrada do usuário na caixa de diálogo Galeria de Fotos na Web.

Ao personalizar ou criar um estilo de galeria, é possível adicionar sinais a qualquer arquivo de modelo HTML, exceto %THUMBNAILS% e %THUMBNAILSROWS%, que só podem aparecer no arquivo IndexPage.htm. Ao adicionar um sinal, lembre-se de que talvez seja necessário adicionar também códigos HTML ao arquivo para que o sinal seja usado corretamente.

Os seguintes sinais podem ser usados nos arquivos de modelo HTML:

Determina a cor dos links ativos.

Determina o nome de um arquivo de imagem.

Permite voltar para a miniatura da imagem que o usuário está visualizando, em vez de voltar para o início do índice. Isso tem efeito quando o usuário clica no botão Home.

Determina a cor do banner.

Determina a fonte do texto do banner.

Determina o tamanho da fonte do texto do banner.

Determina a cor do plano de fundo.

Determina a fonte da legenda que aparece abaixo de cada miniatura na página inicial.

Determina o tamanho da fonte da legenda.

Insere o título do documento em uma legenda a partir das informações do arquivo.

Determina o conjunto de caracteres usado em cada página.

Determina as informações do contato da galeria, como número de telefone e localização.

Expande para “Galeria de Fotos na Web do Adobe Photoshop CS5”.

Insere as informações de copyright em uma legenda a partir das informações do arquivo.

Insere os créditos de uma legenda a partir das informações do arquivo.

Determina o link para a página inicial atual.

Reside no arquivo SubPage.htm e aponta para a primeira página do índice.

Determina a data que aparece no banner.

Determina o endereço de email de contato da galeria.

Determina as informações do arquivo de imagem para uma legenda.

Determina o nome de arquivo de uma imagem. Use esse sinal para metadados que aparecem como texto HTML.

Determina o nome de arquivo URL de uma imagem. Use apenas para nomes de arquivo URL.

Determina o link para a primeira página da galeria que aparece no quadro à direita de um conjunto de quadros.

Determina o link para a página inicial que aparece no quadro à esquerda de um conjunto de quadros.

Determina o título da galeria.

Determina o tamanho da borda da imagem em tamanho normal em uma página da galeria.

Ativa a caixa de seleção Adicionar atributos de largura e altura para imagens. Permite que o usuário faça download dos atributos, reduzindo o tempo gasto.

Esse sinal é substituído por um numeral (apenas) que representa a largura da imagem.

Determina o link para uma página da galeria.

Se a caixa Redimensionar Imagens estiver selecionada, esse sinal terá o valor de pixel da imagem usado no painel Imagens Grandes. Se a caixa não estiver selecionada, esse sinal conterá uma sequência vazia. Isso é útil para JavaScript nos modelos, pois pode mostrar os valores máximos de altura e largura de todas as imagens do site gerado.

Determina o URL para uma imagem em tamanho normal em uma página da galeria.

Ativa a caixa de seleção Adicionar atributos de largura e altura para imagens. Permite que o usuário faça download dos atributos, reduzindo o tempo gasto.

Esse sinal é substituído por um numeral (apenas) que representa a largura da imagem.

Determina a cor dos links.

Determina o link para a próxima página da galeria.

Define o link da imagem de visualização grande para a próxima imagem de visualização grande.

Determina o link para a próxima página.

Insere links numerados em subpáginas para todas as imagens de visualização grande.

Determina o local da página atual (por exemplo, página 1 de 3).

Determina o nome da pessoa ou organização que está recebendo créditos pelas fotos da galeria.

Determina o link para a página anterior da galeria.

Determina o link para a página anterior.

Determina o título da galeria.

Determina o título da galeria.

Determina a cor do texto.

Determina o tamanho das bordas da miniatura.

Ativa a caixa de seleção Adicionar atributos de largura e altura para imagens. Permite que o usuário faça download dos atributos, reduzindo o tempo gasto.

Esse sinal é substituído por um numeral (apenas) que representa a altura da miniatura.

Esse sinal é substituído pelas miniaturas utilizando o arquivo Thumbnail.htm para os estilos de quadros. É necessário posicionar esse sinal sozinho em uma única linha, sem quebras, no arquivo HTML.

Contém o valor de pixels da miniatura no painel Miniaturas. Isso é útil para JavaScript nos modelos, pois pode mostrar os valores máximos de altura e largura de todas as miniaturas do site gerado.

Determina o link para uma miniatura.

Esse sinal é substituído pelas linhas de miniaturas utilizando o arquivo Thumbnail.htm para os estilos que não são quadros. É necessário posicionar esse sinal sozinho em uma única linha, sem quebras, no arquivo HTML.

Ativa a caixa de seleção Adicionar atributos de largura e altura para imagens. Permite que o usuário faça download dos atributos, reduzindo o tempo gasto.

Esse sinal é substituído por um numeral (apenas) que representa a largura da miniatura.

Determina o título da galeria.

Determina a cor dos links visitados.