Käyttöopas Peruuta

Web-valokuvagallerioiden luominen

Huomautus:

Tietoja web-gallerioiden luomisesta Photoshop CS5:ssä on Adobe Bridgen ohjeen osassa Web-valokuvagallerian luominen. Jos haluat käyttää vanhaa valinnaista Web-valokuvagalleria-plug-iniä, joka on kuvattu alla olevissa aiheissa, lataa ja asenna sen ensin Windowsille tai Mac OS:lle.

Tietoja Web-valokuvagallerioista

Web-valokuvagalleria on sivusto, johon kuuluu pienoiskuvia sisältävä kotisivu sekä täysikokoisia kuvia sisältäviä galleriasivuja. Kullakin sivulla on linkkejä, joiden avulla katselijat pääsevät sivulta toiselle. Kun katselija esimerkiksi napsauttaa kotisivulla olevaa miniatyyriä, vastaava täysikokoinen kuva latautuu galleriasivulle. Web-valokuvagalleria-komennolla luodaan kuvista automaattisesti Web-valokuvagalleria.

Photoshopin Web-valokuvagalleria-kotisivu
Web-valokuvagalleria-kotisivu

Photoshopissa on galleriaa varten monenlaisia valmiita tyylejä, joita voidaan valita Web-valokuvagalleria-komennolla. Jos olet edistynyt HTML-kielen tuntija, voit luoda uuden tyylin tai mukauttaa tyyliä muokkaamalla HTML-mallitiedostoja.

Galleriatyylien jokaisessa mallitiedostossa on erilaisia asetuksia. Jos käytät esimääritettyä tyyliä, osa asetuksista on ehkä himmennetty eli niitä ei voi käyttää kyseisen tyylin kanssa.

Web-gallerioiden luominen Adobe Bridgessä

Päivitetyt web-gallerioiden toiminnot sisältyvät Adobe Bridgeen. Saat ohjeita Adobe Bridgen ohjeen kohdasta Web-valokuvagallerian luominen tai tutustumalla alla oleviin ohjeisiin.

Vanhan, valinnaisen Photoshop-plug-inin käyttäminen

  1. Lataa ja asenna vanha Web-valokuvagalleria-plug-in Windowsille tai Mac OS:lle.

  2. (Valinnainen) Valitse tiedostot tai kansio, jota haluat käyttää Adobe Bridgessä.

    Kuvat esitetään siinä järjestyksessä, jossa ne näkyvät Bridgessä. Jos haluat käyttää toista järjestystä, muuta järjestystä Bridgessä.

  3. Tee jokin seuraavista toimista:

    • Valitse Adobe Bridgessä Työkalut > Photoshop > Web-valokuvagalleria.

    • Valitse Photoshopissa Tiedosto/Arkisto > Automatisoi > Web-valokuvagalleria.

  4. Valitse Tyylit-valikosta gallerian tyyli. Valitulla tyylillä muotoillun kotisivun esikatselukuva näkyy valintaikkunassa.

  5. (Valinnainen) Kirjoita sähköpostiosoite gallerian yhteystiedoksi.

  6. Valitse Käytä-valikosta gallerian lähdetiedostot.

    Valitut kuvat Bridgestä

    Käyttää ennen Web-valokuvagalleria-valintaikkunan avaamista valitsemiasi tiedostoja.

    Kansio

    Käyttää niissä kansioissa olevia kuvia, jotka valitaan käyttämällä Selaa-painiketta (Windows) tai Valitse-painiketta (Mac OS). Valitse Sisällytä kaikki alikansiot -asetus, jos galleriaan pitää sisällyttää kuvat, jotka ovat valitun kansion alikansioissa.

  7. Napsauta Kohde-painiketta ja valitse kansio, johon gallerian kuvat ja HTML-sivut tallennetaan. Valitse sitten OK (Windows) tai Valitse (Mac OS).

  8. Valitse Web-gallerian muotoiluasetukset: Voit tuoda asetusryhmät näkyviin Asetukset-valikosta valitsemalla. Katso Web-valokuvagallerian asetukset.

  9. Valitse OK. Photoshop tallentaa kohdekansioon seuraavat HTML- ja JPEG-tiedostot:

    • Gallerian kotisivun, jonka nimi on Tunniste-asetuksen mukaan joko index.htm tai index.html. Avaa tämä tiedosto millä tahansa Web-selaimella, kun haluat esikatsella galleriaa.

    • JPEG-kuvat images-alikansioon.

    • HTML-sivut pages-alikansioon.

    • JPEG-pienoiskuvat thumbnails-alikansioon.

Värien vastaavuuden varmistaminen

Jos käsittelet valokuvia, joiden väriavaruuden toistoala on laaja, esimerkiksi ProPhoto RGB tai Adobe RGB, niiden värit voivat muuttua katseltaessa Web-galleriaa selaimella, joka ei lue sisällytettyjä väriprofiileja. Jos näin käy, yritä muuntaa kuvaprofiilit sRGB-muotoon (joka on useimpien selainten oletusarvo) ennen kuvien optimoimista tai lisäämistä Web-valokuvagalleriaan. Muunna ne sRGB-muotoon yhdellä seuraavista menetelmistä. Tässä kannattaa käyttää kuvien kopioita.

Jos käytät Kuvaprosessoria, voit tallentaa tiedostot suoraan JPEG-muotoon haluamasi kokoisina. Jos teet näin, poista Suuret kuvat -asetuksissa oleva Muuta kuvien kokoa -asetus käytöstä.

Yleiset

Tiedostotunnisteiden, koodauksen ja metatietojen asetukset.

Tunniste

Käyttää tiedostotunnistetta .htm tai .html.

Käytä URL-osoitteissa UTF 8 -koodausta

Käyttää UTF-8-koodausta.

Lisää kuvien leveys- ja korkeusominaisuudet

Määrittää mitat ja lyhentää latausaikaa.

Säilytä kaikki metatiedot

Metatiedot säilytetään.

Mainoskuva

Gallerian kullakin sivulla näkyvän mainoskuvan tekstin asetukset. Kirjoita teksti kuhunkin näistä:

Sivuston nimi

Gallerian nimi.

Valokuvaaja

Sen henkilön tai organisaation nimi, joka on tehnyt gallerian kuvat.

Yhteystiedot

Gallerian yhteystiedot, kuten puhelinnumero tai yrityksen osoite.

Päiväys

Gallerian kullakin sivulla näkyvä päivämäärä. Photoshop käyttää normaalisti tämänhetkistä päivämäärää.

Kirjasin ja kirjasinkoko

(Käytettävissä eräissä sivustotyyleissä) Mainosnauhatekstin asetukset.

Suuret kuvat

Gallerian kullakin sivulla näkyvien pääkuvien asetukset.

Lisää numeeriset linkit

(Käytettävissä eräissä sivustotyyleissä) Sijoittaa vaakasuoran numerosarjan (alkaa ykkösestä ja päättyy gallerian viimeisen sivun numeroon) gallerian jokaisen sivun yläreunaan. Kukin numero on linkki vastaavalle sivulle.

Muuta kuvien kokoa

Muuttaa lähdekuvien kokoa galleriasivuille sijoittamista varten. Valitse koko valikosta tai kirjoita koko pikseleinä. Jos käytät Rajoitus-asetusta, valitse ne kuvan mitat, joita pitää rajoittaa koon muuttamisen aikana. Valitse JPEG-laatu-asetus valikosta, määritä arvo 0–12 tai vedä liukusäädintä. Mitä suurempi arvo, sitä parempi laatu ja sitä suurempi tiedosto.

Huomautus:

Photoshop käyttää oletusarvoissa määritettyä oletusinterpolaatiomenetelmää. Valitse oletusasetukseksi Bicubic, terävämpi -asetus, jos pienennät kuvan kokoa.

Reunuksen koko

Määrittää kuvaa ympäröivän reunuksen leveyden pikseleinä.

Otsikoissa käytetään

(Käytettävissä eräissä sivustotyyleissä) Määrittää, miten kuvateksti näytetään kunkin kuvan alapuolella. Valitse Tiedostonimi, jos haluat näyttää tiedoston nimen, tai valitse Kuvaus, Tekijät, Otsikko ja Tekijänoikeus, jos haluat näyttää Tiedoston tiedot -valintaikkunan sisältämät tiedot.

Kirjasin ja kirjasinkoko

(Käytettävissä eräissä sivustotyyleissä) Määritä kuvatekstin kirjasin ja koko.

Miniatyyrit

Gallerian kotisivun asetukset, kuten miniatyyrikuvien koko.

Koko

Määrittää miniatyyrin koon. Valitse valikosta tai kirjoita kunkin miniatyyrin leveyden arvo pikseleinä.

Sarakkeet ja Rivit

Määritä sarakkeiden ja rivien määrä, joissa miniatyyrit näytetään kotisivulla. Tämä asetus ei koske galleriaa, jossa käytetään vaaka- tai pystysuoraa kehystyyliä.

Reunuksen koko

Määrittää kutakin miniatyyriä ympäröivän reunuksen leveyden pikseleinä.

Otsikoissa käytetään

(Käytettävissä eräissä sivustotyyleissä) Määrittää, miten kuvateksti näytetään kunkin miniatyyrin alapuolella. Valitse Tiedostonimi, jos haluat näyttää tiedoston nimen, tai valitse Kuvaus, Tekijät, Otsikko ja Tekijänoikeus, jos haluat näyttää Tiedoston tiedot -valintaikkunan sisältämät tiedot.

Kirjasin ja kirjasinkoko

(Käytettävissä eräissä sivustotyyleissä) Määritä kuvatekstin kirjasin ja koko.

Mukautetut värit

Gallerian osien värien asetukset. Jos haluat vaihtaa tietyn osan värin, napsauta osan väriruutua ja valitse sitten uusi väri Adobe Värivalitsimella. Voit muuttaa kunkin sivun (Tausta-asetus) ja mainoskuvan (Mainoskuva-asetus) taustaväriä.

Suojaus

Näyttää tekstin kunkin kuvan päällä varkauden estämiseksi.

Sisältö

Määrittää näytettävän tekstin. Valitse Mukautettu teksti, jos haluat kirjoittaa mukautetun tekstin. Valitse Tiedostonimi, Kuvaus, Tekijät, Otsikko tai Tekijänoikeus, jos haluat näyttää Tiedoston tiedot -valintaikkunan sisältämät tiedot.

Kirjasin, Väri ja Sijainti

Määritä kuvatekstin kirjasin, väri ja tasaus.

Käännä

Sijoita teksti kuvan päälle vinottain.

Photoshopissa on Web-valokuvagalleriaa varten monenlaisia valmiita tyylejä. Jos olet edistynyt HTML-kielen tuntija, voit luoda uuden tyylin tai mukauttaa tyyliä muokkaamalla HTML-mallitiedostoja.

Photoshopiin kuuluvat Web-valokuvagalleriatyylit on tallennettu seuraaviin kansioihin:

Windows

Ohjelmatiedostot/Adobe/Adobe Photoshop CS5/Presets/Web Photo Gallery.

Mac OS

Adobe Photoshop CS5/Presets/Web Photo Gallery.

Kunkin tässä kansiossa sijaitsevan alikansion nimi näkyy vaihtoehtona Web-valokuvagalleria-valintaikkunan Tyylit-valikossa. Kussakin kansiossa on seuraavat HTML-mallitiedostot, joita Photoshop käyttää luodessaan gallerian:

Caption.htm

Määrittää kunkin kotisivulle sijoitetun pienoiskuvan alapuolella olevan kuvatekstin asettelun.

FrameSet.htm

Määrittää sivujen näyttämiseen käytettävän kehysryhmän asettelun.

IndexPage.htm

Määrittää kotisivun asettelun.

SubPage.htm

Määrittää täysikokoiset kuvat sisältävien galleriasivujen asettelun.

Thumbnail.htm Määrittää etusivulla näkyvien miniatyyrien asettelun.

Kukin mallitiedosto sisältää HTML-koodeja ja paikkamerkkejä. Paikkamerkki on merkkijono, jonka Photoshop korvaa, kun vastaava asetus määritetään Web-valokuvagalleria-valintaikkunassa. Mallitiedostossa voi olla esimerkiksi seuraava TITLE-osa, joka sisältää paikkamerkin:

<TITLE>%TITLE%</TITLE>

Kun Photoshop luo gallerian tämän mallitiedoston perusteella, se korvaa paikkamerkin %TITLE%-tekstillä, joka on kirjoitettu Web-valokuvagalleria-valintaikkunan Sivuston nimi -ruutuun.

Jos haluat tietää tyylistä enemmän, avaa ja tutki HTML-mallitiedostoa HTML-editorilla. Koska HTML-tiedostoissa tarvitaan vain ASCII-merkkejä, voit avata, muokata ja luoda niitä tavallisella tekstieditorilla, kuten Muistiolla (Windows) tai TextEditillä (Mac OS).

Voit mukauttaa Web-valokuvagallerian tyyliä muokkaamalla siihen liittyviä HTML-mallitiedostoja. Muokkaa tyyliä seuraavien ohjeiden mukaisesti, jotta Photoshop osaa muodostaa gallerian oikein:

  • Tyylikansiossa on oltava nämä tiedostot: Caption.htm, IndexPage.htm, SubPage.htm, Thumbnail.htm ja FrameSet.htm.

  • Voit vaihtaa tyylikansion nimen, mutta et kansion sisältämien HTML-mallitiedostojen nimiä.

  • Voit jättää Caption.htm-tiedoston tyhjäksi ja sijoittaa kuvatekstin asettelun määrittävät HTML-koodit ja paikkamerkit Thumbnail.htm-tiedostoon.

  • Voit korvata mallitiedostossa olevan paikkamerkin sopivalla tekstillä tai HTML-koodilla. Tällöin asetus määritetään mallitiedostossa eikä Web-valokuvagalleria-valintaikkunassa. Mallitiedostossa voi olla esimerkiksi BODY-osa, jonka taustavärimääritteen arvon tilalla on paikkamerkki:

    bgcolor=%BGCOLOR%

    Jos haluat muuttaa sivun taustan punaiseksi, korvaa paikkamerkki %BGCOLOR% arvolla ”FF0000”.

  • Voit lisätä mallitiedostoihin HTML-koodeja ja paikkamerkkejä. Kaikki paikkamerkit täytyy kirjoittaa isolla ja ympäröidä prosenttimerkein (%).

  1. Etsi kansio, joka sisältää nykyiset Web-valokuvagalleriatyylit.
  2. Tee jokin seuraavista toimista:
    • Jos haluat mukauttaa tyyliä, luo tyylikansiosta kopio ja tallenna se samaan kansioon olemassa olevien tyylikansioiden kanssa.

    • Jos haluat luoda uuden tyylin, luo uutta tyyliä varten uusi kansio ja tallenna se samaan kansioon olemassa olevien tyylikansioiden kanssa.

    Uuden tai mukautetun tyylin (vastaavan kansion mukainen) nimi näkyy vaihtoehtona Web-valokuvagalleria-valintaikkunan Tyylit-valikossa.

  3. Tee HTML-editorilla jokin seuraavista toimista:
    • Mukauta HTML-mallitiedostoa.

    • Luo tarvittavat HTML-mallitiedostot ja tallenna ne tyylikansioon.

    Kun luot mallitiedostoja, muista noudattaa kohdassa Tietoja Web-valokuvagalleriatyylien mukauttamisesta esitettyjä ohjeita.

    Huomautus:

    Kun mukautat tai luot mallia galleriatyyliä varten, sinun pitäisi sijoittaa jokainen seuraavista paikkamerkeistä erilliselle riville HTML-tiedostossa: %CURRENTINDEX%, %NEXTIMAGE%, %NEXTINDEX%, %PAGE%, %PREVIMAGE% ja %PREVINDEX%. Kun Photoshop muodostaa gallerian sivua, se ohittaa mallin ne rivit, joilla olevat paikkamerkit eivät koske kyseistä sivua. Kun Photoshop luo esimerkiksi gallerian ensimmäistä sivua, se ohittaa mallitiedoston jokaisen rivin, jolla sijaitseva %PREVIMAGE%-paikkamerkki määrittää linkin gallerian edelliselle sivulle. Kun kirjoitat %PREVIMAGE%-paikkamerkin omalle rivilleen, Photoshop ei vahingossa ohita mallin muita paikkamerkkejä.

Photoshop käyttää HTML-mallitiedostoissa paikkamerkkejä, joilla määritetään Web-valokuvagallerian oletustyyli. Paikkamerkkien avulla Photoshop muodostaa Web-valokuvagalleria-valintaikkunassa määritettyjen tietojen mukaisen gallerian.

Kun muokkaat tai luot galleriatyyliä, voit lisätä mihin tahansa HTML-tiedostoon minkä tahansa muun paikkamerkin paitsi %THUMBNAILS% ja %THUMBNAILSROWS%. Näitä paikkamerkkejä saa olla vain IndexPage.htm-tiedostossa. Kun lisäät paikkamerkin, muista, että sinun pitää ehkä lisätä tiedostoon HTML-koodeja, jotta Photoshop käyttäisi paikkamerkkiä oikein.

Voit käyttää HTML-mallitiedostoissa seuraavia paikkamerkkejä:

%ALINK%

Määrittää aktiivisten linkkien värin.

%ALT%

Määrittää kuvatiedoston nimen.

%ANCHOR%

Mahdollistaa palaamisen katseltavaa kuvaa vastaavaan pienoiskuvaan hakemiston alkuun palaamisen sijasta. Pienoiskuvaan palataan napsauttamalla Kotisivu-painiketta.

%BANNERCOLOR%

Määrittää mainosnauhan värin.

%BANNERFONT%

Määrittää mainosnauhan tekstin kirjasimen.

%BANNERFONTSIZE%

Määrittää mainosnauhan tekstin kirjasinkoon.

%BGCOLOR%

Määrittää taustavärin.

%CAPTIONFONT%

Määrittää kotisivun kunkin pienoiskuvan alapuolella näkyvän kuvatekstin kirjasimen.

%CAPTIONFONTSIZE%

Määrittää kuvatekstin kirjasinkoon.

%CAPTIONTITLE%

Lisää kuvatekstiksi dokumentin otsikon, joka on luettu tiedoston tiedoista.

%CHARSET%

Määrittää kullakin sivulla käytettävän merkistön.

%CONTACTINFO%

Määrittää gallerian yhteystiedot, esimerkiksi puhelinnumeron ja sijainnin.

%CONTENT_GENRATOR%

Muuttuu tekstiksi Adobe Photoshop CS5 Web Photo Gallery.

%COPYRIGHT%

Lisää kuvatekstiksi tekijänoikeustiedot, jotka on luettu tiedoston tiedoista.

%CREDITS%

Lisää kuvatekstiksi tekijätiedot, jotka on luettu tiedoston tiedoista.

%CURRENTINDEX%

Määrittää nykyiselle kotisivulle johtavan linkin.

%CURRENTINDEXANCHOR%

Sijaitsee SubPage.htm-tiedostossa ja viittaa hakemiston ensimmäiselle sivulle.

%DATE%

Määrittää mainosnauhassa näkyvän päivämäärän.

%EMAIL%

Määrittää gallerian yhteystiedoksi sähköpostiosoitteen.

%FILEINFO%

Määrittää kuvatekstissä näytettävät kuvatiedoston tiedot.

%FILENAME%

Määrittää kuvan tiedostonimen. Käytä tätä metatiedoissa, jotka esitetään HTML-tekstinä.

%FILENAME_URL%

Määrittää kuvan URL-tiedostonimen. Käytä tätä vain URL-tiedostonimissä.

%FIRSTPAGE%

Määrittää gallerian ensimmäiselle sivulle johtavan linkin, joka näkyy kehysjoukon oikeanpuoleisessa kehyksessä.

%FRAMEINDEX%

Määrittää kotisivulle johtavan linkin, joka näkyy kehysjoukon vasemmanpuoleisessa kehyksessä.

%HEADER%

Määrittää gallerian otsikon.

%IMAGEBORDER%

Määrittää galleriasivulla olevan täysikokoisen kuvan reunuksen leveyden.

%IMAGE_HEIGHT%

Ottaa käyttöön Lisää kuvien leveys- ja korkeusmääritteet -valintaruudun. Näin käyttäjä voi ladata määritteet, mikä lyhentää latausaikaa.

%IMAGE_HEIGHT_NUMBER%

Tämä paikkamerkki korvautuu luvulla, joka tarkoittaa kuvan leveyttä.

%IMAGEPAGE%

Määrittää galleriasivulle johtavan linkin.

%IMAGE_SIZE%

Jos Muuta kuvien kokoa -valintaruutu on valittu, tämän paikkamerkin arvo on sama kuin Suuret kuvat -paneelissa näkyvä kuvan pikseliarvo. Ellei valintaruutua ole valittu, tämän paikkamerkin arvo on tyhjä merkkijono. Paikkamerkistä on hyötyä mallitiedostojen JavaScript-ohjelmissa, koska sen avulla voidaan näyttää muodostetun sivuston kaikkien kuvien korkeus- ja leveysmitat.

%IMAGESRC%

Määrittää galleriasivulla olevan täysikokoisen kuvan URL-osoitteen.

%IMAGE_WIDTH%

Ottaa käyttöön Lisää kuvien leveys- ja korkeusmääritteet -valintaruudun. Näin käyttäjä voi ladata määritteet, mikä lyhentää latausaikaa.

%IMAGE_WIDTH_NUMBER%

Tämä paikkamerkki korvautuu luvulla, joka tarkoittaa kuvan leveyttä.

%LINK%

Määrittää linkkien värin.

%NEXTIMAGE%

Määrittää seuraavalle galleriasivulle johtavan linkin.

%NEXTIMAGE _CIRCULAR%

Määrittää linkin isosta esikatselukuvasta seuraavaan isoon esikatselukuvaan.

%NEXTINDEX%

Määrittää seuraavalle kotisivulle johtavan linkin.

%NUMERICLINKS%

Lisää alisivujen numeroidut linkit kaikkiin isoihin esikatselukuviin.

%PAGE%

Määrittää nykyisen sivun sijainnin (esimerkiksi sivu 1/3).

%PHOTOGRAPHER%

Määrittää sen henkilön tai organisaation nimen, joka on tehnyt gallerian kuvat.

%PREVIMAGE%

Määrittää edelliselle galleriasivulle johtavan linkin.

%PREVINDEX%

Määrittää edelliselle kotisivulle johtavan linkin.

%SUBPAGEHEADER%

Määrittää gallerian otsikon.

%SUBPAGETITLE%

Määrittää gallerian otsikon.

%TEXT%

Määrittää tekstin värin.

%THUMBBORDER%

Määrittää miniatyyrien reunuksen koon.

%THUMBNAIL_HEIGHT%

Ottaa käyttöön Lisää kuvien leveys- ja korkeusmääritteet -valintaruudun. Näin käyttäjä voi ladata määritteet, mikä lyhentää latausaikaa.

%THUMBNAIL_HEIGHT_NUMBER%

Tämä paikkamerkki korvautuu luvulla, joka tarkoittaa pienoiskuvan korkeutta.

%THUMBNAILS%

Tämä paikkamerkki korvautuu pienoiskuvilla, joiden kehystyylit ovat Thumbnail.htm-tiedoston mukaiset. Sen on oltava HTML-tiedostossa omalla rivillään, jota ei ole jaettu osiin.

%THUMBNAIL_SIZE%

Sisältää Miniatyyrit-paneelista luetun pienoiskuvan pikseliarvon. Paikkamerkistä on hyötyä mallitiedostojen JavaScript-ohjelmissa, koska sen avulla voidaan näyttää muodostetun sivuston kaikkien pienoiskuvien korkeus- ja leveysmitat.

%THUMBNAILSRC%

Määrittää pienoiskuvaan johtavan linkin.

%THUMBNAILSROWS%

Tämä paikkamerkki korvautuu pienoiskuvariveillä, joiden muut kuin kehystyylit ovat Thumbnail.htm-tiedoston mukaiset. Sen on oltava HTML-tiedostossa omalla rivillään, jota ei ole jaettu osiin.

%THUMBNAIL_WIDTH%

Ottaa käyttöön Lisää kuvien leveys- ja korkeusmääritteet -valintaruudun. Näin käyttäjä voi ladata määritteet, mikä lyhentää latausaikaa.

%THUMBNAIL_WIDTH_NUMBER%

Tämä paikkamerkki korvautuu luvulla, joka tarkoittaa pienoiskuvan leveyttä.

%TITLE%

Määrittää gallerian otsikon.

%VLINK%

Määrittää käytettyjen linkkien värin.

Pyydä apua nopeammin ja helpommin

Oletko uusi käyttäjä?