em ,

Como criar uma galeria de fotos pelo Photoshop

Preview Descrição: Tutorial que descreve passo-a-passo como criar uma galeria de fotos usando o Photoshop, ideal para quem precisa criar uma galeria de fotos na internet de forma rápida e fácil.

Tutorial Básico

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 (Web Photo Gallery) na Web para gerar automaticamente uma galeria de fotos na Web a partir de um conjunto de imagens.

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 (Web Photo Gallery). 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 através do seu editor preferido.

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.

01. Criação de uma galeria de fotos na Web

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

2. Siga um destes procedimentos:
– No Adobe Bridge, escolha Ferramentas> Photoshop> Galeria de Fotos (Tools> Photoshop> Web Photo Gallery) na Web.

– No Photoshop, escolha Arquivo> Automatizar> Galeria de Fotos na Web (File> Automate> Web Photo Gallery).

3. A caixa de opções do Web Gallery será aberta.

4. Escolha um estilo para a galeria no menu pop-up Estilos (Styles). 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 (Use).

Imagens Selecionadas no Adobe Bridge

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

Pasta (Folder)

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

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

7. Selecione opções de formatação para a galeria de fotos. Escolha no menu Opções (Options) para que seja exibido cada conjunto de opções.

Opções de galeria de fotos na Web

Geral (General)
Opções para extensões de arquivo, codificação e metadados.

Extensão (Extension)
Usa .htm ou .html como a extensão do nome do arquivo.

Usar codificação UTF 8 para URL (Use UTF 8 Encoding For URL)
Usa a codificação UTF-8.

Adicionar atributos de largura e altura para imagens (Add Width And Height Attributes For Images)
Especifica dimensões, reduzindo o tempo de download.

Preservar todos os metadados (Preserve All Metadata)
Mantém informações de metadados.

Banner (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 (Site Name)
O nome da galeria.

Fotógrafo (Photographer)
O nome da pessoa ou organização que está recebendo crédito pelas fotos da galeria.

Informações de Contato (Contact Info)
As informações de contato da galeria, como número de telefone ou endereço comercial.

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

Fonte e Tamanho da Fonte (Font and Font Size)
(Disponível para alguns estilos de site) Opções para o texto do banner.

Imagens Grandes (Large Images)
Opções para as imagens principais que aparecem em cada página da galeria.

Adição de links numéricos (Add numeric links)
(Disponível para alguns estilos de site) Insere uma seqüê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 (Resize Images)
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.

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

Tamanho da Borda (Border Size)
Especifica a largura, em pixels, da borda da imagem.

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

Fonte e Tamanho da Fonte (Font and Font Size)
(Disponível para alguns estilos de site) Especifica a fonte e o tamanho da legenda.

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

Tamanho (Size)
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 (Columns and Rows)
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 (Border Size)
Especifica a largura, em pixels, da borda de cada miniatura.

Títulos (Titles)
(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 (Font and Font Size)
(Disponível para alguns estilos de site) Especifica a fonte e o tamanho da legenda.

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

Segurança (Security)
Exibe o texto sobre cada imagem como uma proteção contra roubos.

Conteúdo (Content)
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 (Font, Color, and Position)
Especificam a fonte, a cor e o alinhamento da legenda.

Opções de rotação (Rotation options)
Posiciona o texto na imagem em um ângulo.

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

Abaixo seguem as imagens das galerias que podem ser criadas com este recurso, clique sobre a imagem para ver a galeria real.







Além destes exemplos é possível criar muitos outros através dos templates que já existem nas opções do Web Gallery.

Escrito por André Sugai

Publicitário, Photoshopista, criador do Tutoriais Photoshop, venceu o prêmio iBest na categoria tecnologia em 2008 e dois prêmios de criatividade da Adobe. Ex-colaborador do Tech Tudo (http://Globo.com), iMasters (UOL) e Revista Photoshop Creative.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.

33 Comments

  1. Oi gostaria de saber como retirar a mensagem que aparece ao criar a galeria em flash ou se tem uma maneira de que ela so aparece se realmete a pessoa não tiver o flash play.
    mensagem:
    Please upgrade your Flash Player.

    Already have Flash Player? Click here if you have Flash Player 6 installed.
    Muito Obrigada.

  2. André,

    Gostaria de tirar uma dúvida. Eu uso o Fotoshop CS4, e aqui nao tem o Web Photo Gallery. O que seria isso? Existe algum tipo de pack para que eu atualize o meu PS?[2]

    Muito Obrigada!
    E parabéns pelo site… acordo e durmo lendo ele.. rsrs

  3. Olá amigo, ótimo tutorial.

    Gostaria de tirar uma dúvida. Eu uso o Fotoshop CS4, e aqui nao tem o Web Photo Gallery. O que seria isso? Existe algum tipo de pack para que eu atualize o meu PS?

    Desde ja grato. E continue assim.

  4. André,

    tentei fazer este tutorial no CS4 mas num consegui, vc sabe se tem como? Outro problema é que num consegui visualizar as imagens do tutorial (acho que dificultou um bocado).
    Ah, queria aproveitar a oportunidade e elogiar o site que é muuuuuuuuuito organizado, útil e qualificado. Vcs estão de parabéns!

  5. Bom dia.
    Muito bom esta postagem sobre galeria de fotos mas tem como fazer no PS para abrir a foto escolhida com aquela tela de tranparencia que abre na frente da home page como tem em alguns sites. Desde ja fico agradecido.

  6. Ola, tarde

    Criei a galeria e salvei no desktop do meu PC, só que não consigo de jeito nenhum publica-la no vila bol por exemplo, no Fotoblog ou no Album de fotos, diz que não é um arquivo válido:

    ” A foto index.htm não foi enviada. Verifique o tipo do arquivo.”

    O caminho para somente eu ver é o seguinte:

    C:Documents and SettingsJanainaDesktopindex.htm, daí abre normalmente só que no meu pc, como devo proceder?

  7. ——
    EU NAO CONSEGUI CRIAR UMA GALERIA, FIZ TUDO DO JEITO CORRETO MAS SEMPRE DA ESSA MENSAGEM DE ERRO. (THERE IS NO TEMPLATE FOLDER TO RUN WEB PHOTO GALLERY.)
    ——

    Possivelmente vocês fizeram a tradução da versão oficial do CS3 (em inglês) para o português. Depois de eu suar pra caramba consegui uma solução: traduzir na unha.

    Testei no CS3, não sei se funciona nas outras versões)

    1º Vá na pasta do CS3:
    Windows: Arquivos de programas/Adobe/Photoshop CS3/ aqui troque o nome da pasta “presets” para “Predefinições” (assim mesmo com maiúsculo, ç e ~)
    Mac OS: Adobe Photoshop CS3/aqui troque o nome da pasta “presets” para “Predefinições” (assim mesmo com maiúsculo, ç e ~)

    2º Dentro da pasta “Predefinições” tanto no WIN como no MAC:
    Encontre a pasta “web photo gallery” e renomeie para “Galeria de Fotos na WEB”

    Se eu puder ajudar em mais alguma coisa, fico à disposição

  8. EU NAO CONSEGUI CRIAR UMA GALERIA, FIZ TUDO DO JEITO CORRETO MAS SEMPRE DA ESSA MENSAGEM DE ERRO. (THERE IS NO TEMPLATE FOLDER TO RUN WEB PHOTO GALLERY.)

    ALGUEM SABE POR QUE E PODEM ME AJUDAR OBRIGADO

  9. EU NAO CONSEGUI CRIAR UMA GALERIA, FIZ TUDO DO JEITO CORRETO MAS SEMPRE DA ESSA MENSAGEM DE ERRO. (THERE IS NO TEMPLATE FOLDER TO RUN WEB PHOTO GALLERY.)

    ALGUEM SABE POR QUE E PODEM ME AJUDAR OBRIGADO

  10. EU NAO CONSEGUI CRIAR UMA GALERIA, FIZ TUDO DO JEITO CORRETO MAS SEMPRE DA ESSA MENSAGEM DE ERRO. (THERE IS NO TEMPLATE FOLDER TO RUN WEB PHOTO GALLERY.)

    ALGUEM SABE POR QUE E PODEM ME AJUDAR OBRIGADO

  11. André já uma fez pedi uma ajuda para você e deste vez preciso de outra ajuda.

    tenho uma foto onde aparece uma pessoa que gostaria de retirar. estive em busca de um tutorial aqui em seu blog mas não encontrei gostava que me dissesse como fazer isso numa foto. retirar de uma foto uma pessoa.

    obrigado

  12. Oi, André Sugai gostaria de saber se você poderia montar um tutorial que ensinase a fazer o efeito da imagem a seguir. Gostaria de fazer com outra palavra… Obrigado, e achei interessante esta galeria de fotos. 🙂

    IMAGEM: img144.imageshack.us/img144/416/begindownloadum4.gif

  13. Oi RDS, o Salsicha.apanela é o domínio do provedor onde eu hospedo, que na verdade é o Bluehost, caso queira existem hospedagens gratuitas como no caso do Vila Bol, basta fazer o cadastro e enviar seus arquivos, depois de enviados basta acessar o endereço pelo browser e sua galeria estará no ar, obrigado pela visita!! fico feliz que tenha gostado do resultado! volte sempre!!

  14. EU FIZ ESSA GALERIA ANDRÉ, QUE POR SINAL FICOU ÓTIMA, MAS ONDE EU HOSPEDO, TIPO COMO VC FEZ NA SUA GALERIA.

    TENTEI HOSPEDAR NESSE TAL DE “SALSICHA APANELA”, MAS NÃO TEM NDA PRA SE CADASTRAR OU “TAL”, O SITE É VAZIO.

    POR ACASO O LINK DELE É ESSE:
    salsicha.apanela.com

    ME DÁ UMA LUZ AE ADNRÉ, QRO DISPONIBILIZAR PRA ALGUMAS PESSOAS VEREM.

    FLW!

    (DESCULPE AS LETRAS MAIÚSCULAS)

Graffiti+Stop Motion.

Efeito de fade para foto.