Guia do Usuário Cancelar

Criar galerias de fotos na Web

Observação:

Para criar galerias na Web com o Photoshop CS5, consulte Criar uma galeria de fotos na Web em Ajuda do Adobe Bridge. Para usar o plug-in de Galeria de fotos na Web antigo e opcional descrito abaixo, primeiro baixe-o e instale-o para Windows ou Mac OS.

Sobre 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.

Página inicial da galeria de fotos na Web do Photoshop
Galeria de fotos na Web, página inicial

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.

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

  1. Baixe e instale o plug-in mais antigo da Galeria de fotos na Web para Windows ou Mac OS.

  2. (Opcional) Selecione os arquivos ou a pasta que deseja usar no Adobe Bridge.

    Suas imagens serão apresentadas na ordem em que são exibidas no Bridge. Se você preferir usar uma ordem diferente, mude a ordem no Bridge.

  3. Siga um destes procedimentos:

    • No Adobe Bridge, escolha Ferramentas > Photoshop > Galeria de Fotos na Web.

    • No Photoshop, escolha Arquivo > Automatizar > Galeria de Fotos na Web.

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

  5. (Opcional) Insira um endereço de e-mail que sirva como a informação de contato para a galeria.

  6. Escolha os arquivos de origem da galeria no menu Usar.

    Imagens Selecionadas do Origem

    Usa imagens selecionadas antes de ser aberta a caixa de diálogo Galeria de Fotos na Web.

    Pasta

    Usa imagens das pastas que você seleciona usando os botões Procurar (Windows) ou Escolher (Mac OS). Selecione Incluir Todas as Subpastas para incluir imagens de qualquer subpasta da pasta selecionada.

  7. Clique em Destino e selecione uma pasta na qual serão armazenadas imagens e páginas HTML da galeria. Em seguida, clique em OK (Windows) ou Escolher (Mac OS).

  8. Selecione opções de formatação para a galeria de fotos. Escolha no menu Opções para que seja exibido cada conjunto de opções. Consulte Opções de galeria de fotos na Web.

  9. 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.

    • Imagens JPEG dentro de uma subpasta de imagens.

    • Páginas HTML dentro de uma subpasta de páginas.

    • Imagens JPEG em miniatura dentro de uma subpasta de miniaturas.

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.

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.

Geral

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

Extensão

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

Usar codificação UTF 8 para URL

Usa a codificação UTF-8.

Adicionar atributos de largura e altura para imagens

Especifica dimensões, reduzindo o tempo de download.

Preservar todos os metadados

Mantém informações de metadados.

Banner

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

Nome do Site

O nome da galeria.

Fotógrafo

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

Informações de Contato

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

Data

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

Fonte e Tamanho da Fonte

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

Imagens Grandes

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

Adição de links numéricos

(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.

Redimensionar Imagens

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.

Observação:

O Photoshop usa o método de interpolação de imagem padrão definido nas preferências. Escolha Bicúbico mais Nítido como padrão, para obter melhores resultados ao reduzir o tamanho da imagem.

Tamanho da Borda

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

Uso de Títulos

(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.

Fonte e Tamanho da Fonte

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

Miniaturas

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

Tamanho

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

Colunas e Linhas

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.

Tamanho da Borda

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

Uso de Títulos

(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.

Fonte e Tamanho da Fonte

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

Cores Personalizadas

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).

Segurança

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

Conteúdo

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.

Fonte, Cor e Posição

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

Girar

Posiciona o texto na imagem em um ângulo.

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:

Windows

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

Mac OS

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:

Caption.htm

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

FrameSet.htm

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

IndexPage.htm

Determina o layout da página inicial.

SubPage.htm

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).

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 (%).

  1. Localize a pasta que armazena os estilos existentes de galerias de fotos na Web.
  2. Siga um destes procedimentos:
    • Para personalizar um estilo, crie uma cópia da pasta do estilo e armazene-a no mesmo local das pastas de estilo existentes.

    • Para criar um novo estilo, crie uma nova pasta para esse estilo e armazene-a no mesmo local das pastas de estilo existentes.

    O estilo novo ou personalizado (nomeado por sua pasta) aparecerá no menu Estilos da caixa de diálogo Galeria de Fotos na Web.

  3. Ao usar um editor HTML, siga um destes procedimentos:
    • Personalize o arquivo de modelo HTML.

    • Crie os arquivos de modelo HTML necessários e armazene-os na pasta do estilo.

    Ao criar os arquivos de modelo, certifique-se de seguir as diretrizes de personalização destacadas em Sobre a personalização de estilos da galeria de fotos da Web.

    Observação:

    Ao personalizar ou criar um modelo para um estilo de galeria, é necessário posicionar cada um dos sinais a seguir em uma linha separada no arquivo HTML: %CURRENTINDEX%, %NEXTIMAGE%, %NEXTINDEX%, %PAGE%, %PREVIMAGE% e %PREVINDEX%. Ao gerar páginas específicas de uma galeria, o Photoshop pula as linhas de um modelo que contêm sinais que não se aplicam a essas páginas. Por exemplo, ao gerar a primeira página da galeria, o Photoshop pula qualquer linha no modelo que contém o sinal %PREVIMAGE%, que determina o link para a página anterior da galeria. Mantenha o sinal %PREVIMAGE% em uma linha separada para que o Photoshop não ignore outros sinais no modelo.

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:

%ALINK%

Determina a cor dos links ativos.

%ALT%

Determina o nome de um arquivo de imagem.

%ANCHOR%

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.

%BANNERCOLOR%

Determina a cor do banner.

%BANNERFONT%

Determina a fonte do texto do banner.

%BANNERFONTSIZE%

Determina o tamanho da fonte do texto do banner.

%BGCOLOR%

Determina a cor do plano de fundo.

%CAPTIONFONT%

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

%CAPTIONFONTSIZE%

Determina o tamanho da fonte da legenda.

%CAPTIONTITLE%

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

%CHARSET%

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

%CONTACTINFO%

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

%CONTENT_GENRATOR%

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

%COPYRIGHT%

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

%CREDITS%

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

%CURRENTINDEX%

Determina o link para a página inicial atual.

%CURRENTINDEXANCHOR%

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

%DATE%

Determina a data que aparece no banner.

%EMAIL%

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

%FILEINFO%

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

%FILENAME%

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

%FILENAME_URL%

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

%FIRSTPAGE%

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

%FRAMEINDEX%

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

%HEADER%

Determina o título da galeria.

%IMAGEBORDER%

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

%IMAGE_HEIGHT%

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.

%IMAGE_HEIGHT_NUMBER%

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

%IMAGEPAGE%

Determina o link para uma página da galeria.

%IMAGE_SIZE%

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.

%IMAGESRC%

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

%IMAGE_WIDTH%

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.

%IMAGE_WIDTH_NUMBER%

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

%LINK%

Determina a cor dos links.

%NEXTIMAGE%

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

%NEXTIMAGE _CIRCULAR%

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

%NEXTINDEX%

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

%NUMERICLINKS%

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

%PAGE%

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

%PHOTOGRAPHER%

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

%PREVIMAGE%

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

%PREVINDEX%

Determina o link para a página anterior.

%SUBPAGEHEADER%

Determina o título da galeria.

%SUBPAGETITLE%

Determina o título da galeria.

%TEXT%

Determina a cor do texto.

%THUMBBORDER%

Determina o tamanho das bordas da miniatura.

%THUMBNAIL_HEIGHT%

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.

%THUMBNAIL_HEIGHT_NUMBER%

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

%THUMBNAILS%

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.

%THUMBNAIL_SIZE%

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.

%THUMBNAILSRC%

Determina o link para uma miniatura.

%THUMBNAILSROWS%

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.

%THUMBNAIL_WIDTH%

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.

%THUMBNAIL_WIDTH_NUMBER%

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

%TITLE%

Determina o título da galeria.

%VLINK%

Determina a cor dos links visitados.

Receba ajuda com mais rapidez e facilidade

Novo usuário?