SlideShare uma empresa Scribd logo
1 de 10
Galeria de ImagensUtilizando Slices<br />Neste tutorial veremos como fazer uma galeria de imagens. A qual se clica em uma miniatura e esta aparece ampliada em outra área.O layout da galeria será este:Primeiramente, vamos entender o layout e suas funções:<br />Miniaturas<br />Área onde aparecerá as miniaturas ampliadas <br />Vamos começar:1º Passo:Em cada miniatura e no retângulo central, insira um Slice.Botão direito na imagem...Deverá ficar assim:2º Passo:Clique com o botão direito na miniatura e em seguida clique em Add Swap Image Behavior.3º Passo:Na janela que se abre, selecione o Slice (pedaço) de destino (onde apararecerá a miniatura ampliada).No caso, o retângulo central.4º Passo:Selecione Image file e busque a imagem ampliada da miniatura ().Recomendo que você redimensione a imagem ampliada do tamanho da área onde aparecerá, pois se colocar alguma com tamanho inferior, o mecanismo a redimensiona automaticamente e perde qualidade.5º Passo:Desative a opção Restore image onMouseOutApós isso, clique em OK.Repita do 2º ao 5º passo com cada miniatura. Alterando somente no 4º passo a imagem a ampliar.Após feito isso, todos selecionados, deverão ficar assim:6º Passo:Vá até o Menu Window > Behaviors7º Passo:Com a Aba Behaviors aberta, selecione uma miniatura de cada vez e altere Events, de onMouseOver para onClick<br />[  HYPERLINK quot;
http://i37.tinypic.com/14wsnkw.jpgquot;
  Ver em tamanho real ]<br />Feito os passos descritos acima, sua galeria estará pronta.Só falta exportá-la para poder usar. <br />8º Passo: Exportando:Vá ao Menu File > ExportTalvez aparece esta mensagem:Pode selecionar Don't show again e clicar em OK. Iremos evitar o que ela avisa no próximo passo.9º Passo:Na janela que se abre, escolha o local a ser salva a sua galeria e defina um nome em Nome do:.Altere Salvar como tipo:, de Images Only para HTML and Images.<br />[  HYPERLINK quot;
http://i36.tinypic.com/15frrcm.jpgquot;
  Ver em tamanho real ]<br />E altere também Slices, de None para Export Slices (que é o que aquela mensagem anterior alertava para não esquecer).<br />[  HYPERLINK quot;
http://i36.tinypic.com/2u4hlx1.jpgquot;
  Ver em tamanho real ]<br />E clique em Salvar.Exportado! Para conferir sua galeria, é só abrir o arquivo .HTML que foi exportado junto com outro monte de imagens (não alterá-las).<br />Espero que tenham gostado e aproveitem! <br />
Galeria de imagens
Galeria de imagens
Galeria de imagens
Galeria de imagens
Galeria de imagens
Galeria de imagens
Galeria de imagens
Galeria de imagens
Galeria de imagens

Mais conteúdo relacionado

Mais procurados

Gerando o fotolito para máscara de anti solda
Gerando o fotolito para máscara de anti soldaGerando o fotolito para máscara de anti solda
Gerando o fotolito para máscara de anti soldaMutcom
 
Apresentação msconfig
Apresentação msconfigApresentação msconfig
Apresentação msconfiggeane martins
 
Exame de pressão arterial
Exame de pressão arterialExame de pressão arterial
Exame de pressão arterialBruno_Bravo
 
Aula 1 adobe photoshop
Aula 1  adobe photoshopAula 1  adobe photoshop
Aula 1 adobe photoshoplonida
 
Aula 2 - Photoshop Básico: tratamento da imagem
Aula 2 -  Photoshop Básico: tratamento da imagemAula 2 -  Photoshop Básico: tratamento da imagem
Aula 2 - Photoshop Básico: tratamento da imagemOswaldo Hernandez
 
Como colocar o_iniciar
Como colocar o_iniciarComo colocar o_iniciar
Como colocar o_iniciarstelagotz
 

Mais procurados (6)

Gerando o fotolito para máscara de anti solda
Gerando o fotolito para máscara de anti soldaGerando o fotolito para máscara de anti solda
Gerando o fotolito para máscara de anti solda
 
Apresentação msconfig
Apresentação msconfigApresentação msconfig
Apresentação msconfig
 
Exame de pressão arterial
Exame de pressão arterialExame de pressão arterial
Exame de pressão arterial
 
Aula 1 adobe photoshop
Aula 1  adobe photoshopAula 1  adobe photoshop
Aula 1 adobe photoshop
 
Aula 2 - Photoshop Básico: tratamento da imagem
Aula 2 -  Photoshop Básico: tratamento da imagemAula 2 -  Photoshop Básico: tratamento da imagem
Aula 2 - Photoshop Básico: tratamento da imagem
 
Como colocar o_iniciar
Como colocar o_iniciarComo colocar o_iniciar
Como colocar o_iniciar
 

Destaque

Sport or Survival. Muay Thai Boxing for Children in Thailand
Sport or Survival. Muay Thai Boxing for Children in ThailandSport or Survival. Muay Thai Boxing for Children in Thailand
Sport or Survival. Muay Thai Boxing for Children in ThailandCachi Chien
 
Corporate social responsibility policy rules 2014 NASSCOM
Corporate social responsibility policy rules 2014 NASSCOMCorporate social responsibility policy rules 2014 NASSCOM
Corporate social responsibility policy rules 2014 NASSCOMTrinity Care Foundation
 
An intro guide_-_how_to_use_twitter_for_business
An intro guide_-_how_to_use_twitter_for_businessAn intro guide_-_how_to_use_twitter_for_business
An intro guide_-_how_to_use_twitter_for_businessGianluigi Spagnoli
 
Teepees.(Spanish/English)
Teepees.(Spanish/English)Teepees.(Spanish/English)
Teepees.(Spanish/English)Cachi Chien
 
Mail up ebook_01-le_tue_email_arrivano_nella_casella_giusta
Mail up ebook_01-le_tue_email_arrivano_nella_casella_giustaMail up ebook_01-le_tue_email_arrivano_nella_casella_giusta
Mail up ebook_01-le_tue_email_arrivano_nella_casella_giustaGianluigi Spagnoli
 
Sheldon's Preventing suicide
Sheldon's Preventing suicideSheldon's Preventing suicide
Sheldon's Preventing suicideScholars Burton
 
Preparing for future attacks - the right security strategy
Preparing for future attacks - the right security strategyPreparing for future attacks - the right security strategy
Preparing for future attacks - the right security strategyRapidSSLOnline.com
 
A Child is Born...
A Child is Born...A Child is Born...
A Child is Born...Cachi Chien
 
Twitterwall als Google Hangout App
Twitterwall als Google Hangout AppTwitterwall als Google Hangout App
Twitterwall als Google Hangout AppGerhard Schröder
 
Nk birojs gatis p üvils
Nk birojs gatis p üvilsNk birojs gatis p üvils
Nk birojs gatis p üvilsEgils Doroško
 
Natural diet for hypothyroidism
Natural diet for hypothyroidismNatural diet for hypothyroidism
Natural diet for hypothyroidismlilianet
 

Destaque (20)

The great wall of nehemiah spanish cb6
The great wall of nehemiah spanish cb6The great wall of nehemiah spanish cb6
The great wall of nehemiah spanish cb6
 
Sport or Survival. Muay Thai Boxing for Children in Thailand
Sport or Survival. Muay Thai Boxing for Children in ThailandSport or Survival. Muay Thai Boxing for Children in Thailand
Sport or Survival. Muay Thai Boxing for Children in Thailand
 
Corporate social responsibility policy rules 2014 NASSCOM
Corporate social responsibility policy rules 2014 NASSCOMCorporate social responsibility policy rules 2014 NASSCOM
Corporate social responsibility policy rules 2014 NASSCOM
 
Erroma
ErromaErroma
Erroma
 
An intro guide_-_how_to_use_twitter_for_business
An intro guide_-_how_to_use_twitter_for_businessAn intro guide_-_how_to_use_twitter_for_business
An intro guide_-_how_to_use_twitter_for_business
 
Teepees.(Spanish/English)
Teepees.(Spanish/English)Teepees.(Spanish/English)
Teepees.(Spanish/English)
 
Alt vel pitch
Alt vel pitchAlt vel pitch
Alt vel pitch
 
Amazing images-music-shawn-colvin
Amazing images-music-shawn-colvinAmazing images-music-shawn-colvin
Amazing images-music-shawn-colvin
 
Errores finanzas personales
Errores finanzas personalesErrores finanzas personales
Errores finanzas personales
 
Peretti 17052012(1)
Peretti 17052012(1)Peretti 17052012(1)
Peretti 17052012(1)
 
Mail up ebook_01-le_tue_email_arrivano_nella_casella_giusta
Mail up ebook_01-le_tue_email_arrivano_nella_casella_giustaMail up ebook_01-le_tue_email_arrivano_nella_casella_giusta
Mail up ebook_01-le_tue_email_arrivano_nella_casella_giusta
 
Sheldon's Preventing suicide
Sheldon's Preventing suicideSheldon's Preventing suicide
Sheldon's Preventing suicide
 
Banner web
Banner webBanner web
Banner web
 
Preparing for future attacks - the right security strategy
Preparing for future attacks - the right security strategyPreparing for future attacks - the right security strategy
Preparing for future attacks - the right security strategy
 
A Child is Born...
A Child is Born...A Child is Born...
A Child is Born...
 
Jacob the deceiver spanish cb6
Jacob the deceiver spanish cb6Jacob the deceiver spanish cb6
Jacob the deceiver spanish cb6
 
Twitterwall als Google Hangout App
Twitterwall als Google Hangout AppTwitterwall als Google Hangout App
Twitterwall als Google Hangout App
 
Nk birojs gatis p üvils
Nk birojs gatis p üvilsNk birojs gatis p üvils
Nk birojs gatis p üvils
 
Natural diet for hypothyroidism
Natural diet for hypothyroidismNatural diet for hypothyroidism
Natural diet for hypothyroidism
 
God honors joseph the slave spanish cb6
God honors joseph the slave spanish cb6God honors joseph the slave spanish cb6
God honors joseph the slave spanish cb6
 

Semelhante a Galeria de imagens

Semelhante a Galeria de imagens (20)

Editor gimp
Editor gimpEditor gimp
Editor gimp
 
Manual GIMP
Manual GIMPManual GIMP
Manual GIMP
 
Photoshop Básico: Aula 1
Photoshop Básico: Aula 1Photoshop Básico: Aula 1
Photoshop Básico: Aula 1
 
2335 inventor
2335 inventor2335 inventor
2335 inventor
 
Inventor
InventorInventor
Inventor
 
Apostila adobe premiere_portugues_www.clickcursos.net_
Apostila adobe premiere_portugues_www.clickcursos.net_Apostila adobe premiere_portugues_www.clickcursos.net_
Apostila adobe premiere_portugues_www.clickcursos.net_
 
Painéis dinâmicos no Axure
Painéis dinâmicos no AxurePainéis dinâmicos no Axure
Painéis dinâmicos no Axure
 
Apostila photoshop 7
Apostila photoshop 7Apostila photoshop 7
Apostila photoshop 7
 
Intro simulink
Intro simulinkIntro simulink
Intro simulink
 
Intro simulink
Intro simulinkIntro simulink
Intro simulink
 
Manual do Gimp
Manual do GimpManual do Gimp
Manual do Gimp
 
Efeitos Photoshop
Efeitos PhotoshopEfeitos Photoshop
Efeitos Photoshop
 
Gimp2
Gimp2Gimp2
Gimp2
 
Ldits integrando imagens
Ldits integrando imagensLdits integrando imagens
Ldits integrando imagens
 
Recortes, Montagens e Efeito Reticula
Recortes, Montagens e Efeito ReticulaRecortes, Montagens e Efeito Reticula
Recortes, Montagens e Efeito Reticula
 
Apresentação exercícios imagem - ISEC
Apresentação exercícios imagem - ISECApresentação exercícios imagem - ISEC
Apresentação exercícios imagem - ISEC
 
A U L
A  U  LA  U  L
A U L
 
Aula squeak etoys
Aula squeak etoysAula squeak etoys
Aula squeak etoys
 
Aula squeak etoys
Aula squeak etoysAula squeak etoys
Aula squeak etoys
 
Módulo IV - Desktop, Janelas e Menus
Módulo IV -   Desktop, Janelas e MenusMódulo IV -   Desktop, Janelas e Menus
Módulo IV - Desktop, Janelas e Menus
 

Galeria de imagens

  • 1. Galeria de ImagensUtilizando Slices<br />Neste tutorial veremos como fazer uma galeria de imagens. A qual se clica em uma miniatura e esta aparece ampliada em outra área.O layout da galeria será este:Primeiramente, vamos entender o layout e suas funções:<br />Miniaturas<br />Área onde aparecerá as miniaturas ampliadas <br />Vamos começar:1º Passo:Em cada miniatura e no retângulo central, insira um Slice.Botão direito na imagem...Deverá ficar assim:2º Passo:Clique com o botão direito na miniatura e em seguida clique em Add Swap Image Behavior.3º Passo:Na janela que se abre, selecione o Slice (pedaço) de destino (onde apararecerá a miniatura ampliada).No caso, o retângulo central.4º Passo:Selecione Image file e busque a imagem ampliada da miniatura ().Recomendo que você redimensione a imagem ampliada do tamanho da área onde aparecerá, pois se colocar alguma com tamanho inferior, o mecanismo a redimensiona automaticamente e perde qualidade.5º Passo:Desative a opção Restore image onMouseOutApós isso, clique em OK.Repita do 2º ao 5º passo com cada miniatura. Alterando somente no 4º passo a imagem a ampliar.Após feito isso, todos selecionados, deverão ficar assim:6º Passo:Vá até o Menu Window > Behaviors7º Passo:Com a Aba Behaviors aberta, selecione uma miniatura de cada vez e altere Events, de onMouseOver para onClick<br />[ HYPERLINK quot; http://i37.tinypic.com/14wsnkw.jpgquot; Ver em tamanho real ]<br />Feito os passos descritos acima, sua galeria estará pronta.Só falta exportá-la para poder usar. <br />8º Passo: Exportando:Vá ao Menu File > ExportTalvez aparece esta mensagem:Pode selecionar Don't show again e clicar em OK. Iremos evitar o que ela avisa no próximo passo.9º Passo:Na janela que se abre, escolha o local a ser salva a sua galeria e defina um nome em Nome do:.Altere Salvar como tipo:, de Images Only para HTML and Images.<br />[ HYPERLINK quot; http://i36.tinypic.com/15frrcm.jpgquot; Ver em tamanho real ]<br />E altere também Slices, de None para Export Slices (que é o que aquela mensagem anterior alertava para não esquecer).<br />[ HYPERLINK quot; http://i36.tinypic.com/2u4hlx1.jpgquot; Ver em tamanho real ]<br />E clique em Salvar.Exportado! Para conferir sua galeria, é só abrir o arquivo .HTML que foi exportado junto com outro monte de imagens (não alterá-las).<br />Espero que tenham gostado e aproveitem! <br />