Banner Tutoriais Photoshop



Tutorial Anterior: Videoclip da banda Sna-Fu que mistura 2D e 3D. | Página Inicial >>
Tutorial Anterior: Como usar a nova função de importação e edição de ... | Página Inicial >>
Tutorial Anterior: Seminário - Creative Suite 3 - WOC - 15/05/2008. | Página Inicial >>
Tutorial Anterior: Banksy, o artista que é amado e odiado em Londres.... | Página Inicial >>
Tutorial Anterior: Como criar um folha com miniatura de fotos usando ... | Página Inicial >>
Tutorial Anterior: Personagens fictícios virando pessoas reais. | Página Inicial >>
Tutorial Anterior: Estilização de foto com pixels. | Página Inicial >>
Tutorial Anterior: Desenhos em CSS! | Página Inicial >>
Tutorial Anterior: Again & Again, clipe da banda Bird & The Bee. | Página Inicial >>

sexta-feira, 16 de maio de 2008


Como criar uma galeria de fotos pelo Photoshop.


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.



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.

Related Posts Plugin for WordPress, Blogger... Participe deixando seu comentário, dúvida, sugestão, ideias, exemplos ou simplesmente dizendo um "Olá!" na parte de comentários deste Post, sua participação é extremamente importante para o blog e também para todos os leitores que posteriormente terão acesso aos tutoriais e matérias que oferecemos por aqui.

Caso não queira ficar de fora das atualizações diárias do blog você tem 3 opções bem práticas:

  • Siga-me no Twitter.
  • Cadastre-se e receba por e-mail o resumo diário do que foi postado aqui no blog.
  • Cadastre nosso endereço RSS para receber as atualizações via leitor de Feeds.
  • Obrigado por ter votado no ::Tutoriais Photoshop:: para o iBest e Peixe Grande 2008 e 2009!

    Até a próxima!!


    31 Comentários:

    Às 16 de maio de 2008 16:52:00 BRT , Anonymous RDS disse...

    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:
    http://www.salsicha.apanela.com

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

    FLW!

    (DESCULPE AS LETRAS MAIÚSCULAS)

     
    Às 16 de maio de 2008 17:02:00 BRT , Blogger Andre Sugai disse...

    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!!

     
    Às 16 de maio de 2008 18:04:00 BRT , Anonymous Arthur disse...

    Opa, tem alguma forma de editar uma galeria já criada, no Photoshop?

    vlw aee, bom tuto!
    parabénss!

     
    Às 16 de maio de 2008 18:14:00 BRT , Blogger Andre Sugai disse...

    Oi Arthur, tem sim, caso você tenha domínio de HTML e trabalhe com algum editor como o Dreamweaver você pode alterar muitas coisas, obrigado pela visita!!

     
    Às 16 de maio de 2008 19:33:00 BRT , Anonymous Arthur disse...

    hmm, deixa eu reformular a pergunta..
    tem como editar essa galeria, direto no photoshop?

    por exemplo, as configurações do banner etc..

     
    Às 23 de maio de 2008 22:35:00 BRT , Blogger Nícolas Rovaris disse...

    Este comentário foi removido pelo autor.

     
    Às 23 de maio de 2008 22:35:00 BRT , Blogger Nícolas Rovaris disse...

    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: http://img144.imageshack.us/img144/416/begindownloadum4.gif

     
    Às 24 de maio de 2008 10:28:00 BRT , Blogger Amores Perfeitos disse...

    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

     
    Às 25 de maio de 2008 13:49:00 BRT , Blogger Tiago disse...

    Pow, alguem poderia explicar ai passo a passo como hospedar em algum site. Pode ser o vilabol.
    Tentei mais nao consegui nao

    Obrigado.

     
    Às 26 de maio de 2008 11:49:00 BRT , Blogger MuriGama disse...

    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

     
    Às 5 de junho de 2008 10:40:00 BRT , Anonymous Murilo disse...

    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

     
    Às 14 de junho de 2008 10:23:00 BRT , Anonymous Anônimo disse...

    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

     
    Às 5 de agosto de 2008 15:34:00 BRT , Blogger Pastor Sergião disse...

    Eu também não consegui criar uam galeria, sempre dá uma mensagem de erro: (THERE IS NO TEMPLATE FOLDER TO RUN WEB PHOTO GALLERY.)

    Será que alguém consegem me ajudar???

    Obrigado

     
    Às 2 de outubro de 2008 16:28:00 BRT , Blogger Aleandro e Vaina disse...

    posso hospedar minhas fotos em qual site, tem blog, e site. como que faço.

     
    Às 4 de dezembro de 2008 00:06:00 BRST , Blogger Flavio Souza disse...

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

     
    Às 4 de dezembro de 2008 19:24:00 BRST , Anonymous Anônimo disse...

    como posso por uma musica em quanto passa a minha apresentação em flash ja tentei várias maneiras e não consigo. alguem me pode ajudar

     
    Às 4 de dezembro de 2008 19:27:00 BRST , Anonymous Anônimo disse...

    no style Flash- Gallery 1 da para colocar uma musica em quanto passa a apresentação mas não estou conseguindo de jeito nenhum. como fasso isso. se alguem me poder ajudar agradecia. aki esta meu mail. josegoncalves_1@msn.com obrigado este tutorialphotoshop e fantastico...

     
    Às 5 de dezembro de 2008 16:10:00 BRST , Blogger Artes em Foco disse...

    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 Settings\Janaina\Desktop\index.htm, daí abre normalmente só que no meu pc, como devo proceder?

     
    Às 4 de janeiro de 2009 08:45:00 BRST , Blogger Minha Familia disse...

    Valeu pela dica deu certo

     
    Às 11 de fevereiro de 2009 23:45:00 BRST , Anonymous Anônimo disse...

    Flavio Souza...uso o CS3 português. Estava dando erro, pois não carregava as templates. Fiz as renomeações das pastas e agora está funcionando!!!Muito Obrigada!!!

     
    Às 20 de fevereiro de 2009 12:25:00 BRT , Anonymous Anônimo disse...

    Também gostaria de por uma música no web photo gallery do photoshop mais não estou conseguindo. Alguém poderia ensinar como?

     
    Às 5 de março de 2009 09:34:00 BRT , Anonymous Anônimo disse...

    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.

     
    Às 13 de março de 2009 13:27:00 BRT , Anonymous Anônimo disse...

    Todo mundo tem vontade de por uma musica em suas apresentações, mais ninguém esta conseguindo fazer isso no Web Photo Gallery do photoshop cs3.

     
    Às 9 de maio de 2009 20:56:00 BRT , Anonymous Karine Souza disse...

    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!

     
    Às 23 de junho de 2009 12:03:00 BRT , Anonymous Anônimo disse...

    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.

     
    Às 17 de agosto de 2009 16:18:00 BRT , Blogger Csaki Blog disse...

    Nossa obrigado vc solucionou meu problema com a galeria de fotos
    beijos te amo

     
    Às 22 de agosto de 2009 01:46:00 BRT , Anonymous bia morita disse...

    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

     
    Às 24 de outubro de 2009 08:36:00 BRST , Blogger Pandora disse...

    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.

     
    Às 9 de novembro de 2009 15:16:00 BRST , Anonymous denis disse...

    André,

    Eu uso o Fotoshop CS4, e aqui nao tem o Web Photo Gallery. O que seria isso? O que eu posso fazer?

     
    Às 11 de novembro de 2009 17:19:00 BRST , Blogger Elaine Cristina disse...

    Olá, adorei esse tuto, porém, gostaria de saber se há uma maneira de incluir essa galeria dentro de um site que eu já possuo.

     
    Às 5 de março de 2010 12:49:00 BRT , Anonymous Anônimo disse...

    olá,
    No meu Fotoshop CS4 também não tema opção Web Photo Gallery

     

    Postar um comentário

    Assinar Postar comentários [Atom]

    Links para esta postagem:

    Criar um link

    << Início