Merk:

Hvis du vil opprette webgallerier med Photoshop CS5, kan du se delen om å opprette et webfotogalleri i hjelpen for Adobe Bridge. Hvis du vil bruke den eldre, valgfrie plugin-modulen Webfotogalleri som beskrives i emnene under, må du først laste den ned og installere den for Windows eller Mac OS.

Nettfotogallerier

Et nettfotogalleri er et nettsted som har en startside med miniatyrbilder og gallerisider med bilder i fullstendig størrelse. Hver side inneholder koblinger som gjør at brukere kan navigere på nettstedet. Når en bruker for eksempel klikker et miniatyrbilde på siden, lastes det inn en galleriside med de tilknyttede bildene i full størrelse. Du kan bruke kommandoen Web-fotogalleri til å automatisk generere et nettfotogalleri fra et bildesett.

Web-fotogalleri-hjemmeside i Photoshop
Web-fotogalleri-hjemmeside

Photoshop inneholder en rekke stiler for galleriet som du kan bruke ved hjelp av kommandoen Web-fotogalleri. Erfarne brukere som har kjennskap til HTML, kan i tillegg tilpasse en stil ved å redigere et sett HTML-malfiler eller opprette en ny stil.

Hver av malene for galleristiler har forskjellige alternativer. Hvis du bruker en forhåndsinnstilt stil, kan noen alternativer være nedtonet, eller utilgjengelig, for den stilen.

Opprette nettgallerier med Adobe Bridge

Adobe Bridge har oppdaterte funksjoner for nettgalleri. Du finner instruksjoner under Opprette et nettfotogalleri i hjelpen til Adobe Bridge, eller du kan se leksjonene nedenfor.

Bruk den eldre, valgfrie Photoshop-plugin-modulen

  1. Du kan laste ned og installere den eldre plugin-modulen Webfotogalleri for Windows eller Mac OS.

  2. (Valgfritt) Velg filene eller mappen du vil bruke i Adobe Bridge.

    Bildene presenteres i visningsrekkefølgen i Bridge. Hvis du vil bruke en annen rekkefølge, endrer du rekkefølgen i Bridge.

  3. Gjør ett av følgende:

    • I Adobe Bridge velger du Verktøy > Photoshop > Web-fotogalleri.

    • I Photoshop velger du Fil > Automatiser > Web-fotogalleri.

  4. Velg en stil for galleriet på hurtigmenyen Stiler. En forhåndsvisning av hjemmesiden for den valgte stilen vises i dialogboksen.

  5. (Valgfritt) Skriv inn en e-postadresse og kontaktinformasjon for galleriet.

  6. Velg kildefilene for galleriet på Bruk-menyen.

    Valgte bilder fra Bridge

    Bruker bilder du valgte før dialogboksen Web-fotogalleri åpnes.

    Mappe

    Bruker bilder fra mapper du velger med Bla gjennom-knappen (Windows) eller Velg-knappen (Mac OS). Velg Inkluder alle undermapper for å ta med bilder i eventuelle undermapper i den valgte mappen.

  7. Klikk Mål, og merk deretter en mappe der bilder og HTML-sider for galleriet skal lagres. Deretter klikker du OK (Windows) eller Velg (Mac OS).

  8. Velg formateringsalternativer for nettgalleriet. Velg fra Alternativer-menyen for å vise hvert alternativsett. Se Alternativer for nettfotogalleri.

  9. Klikk OK. Photoshop plasserer følgende HTML- og JPEG-filer i målmappen:

    • En hjemmeside for galleriet med navnet index.htm eller index.html, avhengig av hvilken filtype du har valgt. Åpne denne filen i en nettleser for å forhåndsvise galleriet.

    • JPEG-bilder i en undermappe for bilder.

    • HTML-sider i en undermappe for sider.

    • JPEG-miniatyrbilder i en undermappe for miniatyrer.

Kontrollere at fargene passer

Hvis du arbeider med bilder i et bredt arbeidsfargeområde, for eksempel ProPhoto RGB eller Adobe RGB, kan bildefarger endres når de vises i et nettgalleri med en nettleser som ikke kan lese innebygde fargeprofiler. Hvis dette skjer, kan du prøve å konvertere bildeprofilene til sRGB (som de fleste nettlesere bruker som standard) før du optimaliserer dem eller inkluderer dem i et nettfotogalleri. Konverter dem til sRGB på en av måtene beskrevet nedenfor. Det er lurt å arbeide med en kopi av bildene.

Hvis du bruker bildeprosessoren, kan du lagre filene direkte i JPEG-format i størrelsen du vil ha dem i. Hvis du gjør dette, kontrollerer du at Endre størrelse på bilder er slått av i alternativene for stort bilde.

Generelt

Alternativer for filtyper, koding og metadata.

Filtype

Bruker filtypen .htm eller .html.

Bruk UTF 8-koding til nettadresse

Bruker UTF8-koding.

Legg til bredde- og høydeattributt for bilder

Angir dimensjoner. Nedlastningstiden forkortes.

Behold alle metadata

Beholder metadatainformasjon.

Banner

Tekstalternativer for banneret som vises på hver side i galleriet. Skriv inn tekst for hver av disse:

Navn på sted

Navnet på galleriet.

Fotograf

Navnet på personen eller organisasjonen som har tatt bildene i galleriet.

Kontaktinformasjon

Kontaktinformasjonen for galleriet, for eksempel et telefonnummer eller en forretningsadresse.

Dato

Datoen som vises på hver side i galleriet. Som standard bruker Photoshop gjeldende dato.

Skrift og Skriftstørrelse

(Tilgjengelig for noen områdestiler) Alternativer for bannertekst.

Store bilder

Alternativer for hovedbildene som vises på hver galleriside.

Legg til numeriske koblinger

(Tilgjengelig for noen områdestiler) Setter inn en tallsekvens (starter med 1 og slutter med det totale antallet sider i galleriet) som vises vannrett øverst på hver galleriside. Hvert tall er en kobling til den respektive siden.

Endre størrelse på bilder

Endrer størrelse på kildebildene for plassering på gallerisidene. Velg en størrelse på hurtigmenyen eller skriv inn en størrelse i bildepunkter. For Begrens velger du hvilke dimensjoner av bildet du vil begrense når du endrer størrelsen. For JPEG-kvalitet velger du et alternativ på hurtigmenyen, skriver inn en verdi mellom 0 og 12 eller drar skyvekontrollen. En høyere verdi gir bedre bildekvalitet, men større filstørrelse.

Merk:

Photoshop bruker som standard bildeinterpoleringsmetoden angitt i innstillingene. Velg Bikubisk skarpere som standard for beste resultater når bildestørrelsen forminskes.

Rammestørrelse

Angir rammebredden i bildepunkter for det eksporterte bildet.

Tittelbruk

(Tilgjengelig for noen områdestiler) Angir alternativer for å vise bildetekst under hvert bilde. Velg Filnavn for å vise filnavnet, eller velg Beskrivelse, Bidragsytere, Tittel eller Copyright for å vise beskrivelser hentet fra filinformasjonsdialogboksen.

Skrift og Skriftstørrelse

(Tilgjengelig for noen områdestiler) Angi skrift og skriftstørrelse for bildeteksten.

Miniatyrbilder

Alternativer for galleriets hjemmeside, inkludert størrelsen på miniatyrbildene.

Størrelse

Angir størrelsen på miniatyrbildene. Velg fra hurtigmenyen, eller skriv inn en verdi i bildepunkter for bredden på hver miniatyr.

Kolonner og Rader

Angi antall kolonner og rader for visning av miniatyrbildene på hjemmesiden. Dette alternativet gjelder ikke for gallerier som bruker vannrett eller loddrett rammestil.

Rammestørrelse

Angir rammebredden i bildepunkter rundt hvert miniatyrbilde.

Tittelbruk

(Tilgjengelig for noen områdestiler) Angir alternativer for å vise bildetekst under hver miniatyr. Velg Filnavn for å vise filnavnet, eller velg Beskrivelse, Bidragsytere, Tittel eller Copyright for å vise beskrivelser hentet fra filinformasjonsdialogboksen.

Skrift og Skriftstørrelse

(Tilgjengelig for noen områdestiler) Angi skrift og skriftstørrelse for bildeteksten.

Egendefinerte farger

Alternativer for farger på elementer i galleriet. Hvis du vil endre fargen på et element, klikker du fargekartet og velger en ny farge i Adobes fargevelger. Du kan endre bakgrunnsfargen for hver side (alternativet Bakgrunn) og banneret (alternativet Banner).

Sikkerhet

Viser tekst over hvert bilde som en tyveriavskrekker.

Innhold

Angir teksten som skal vises. Velg Egendefinert tekst for å skrive inn egendefinert tekst. Velg Filnavn, Beskrivelse, Bidragsytere, Tittel eller Copyright for å vise tekst hentet fra filinformasjonsdialogboksen.

Skrift, Farge og Posisjon

Angi skriften, fargen og justeringen for bildeteksten.

Roter

Plasser teksten på bildet i en vinkel.

Merk:

Hvis du vil opprette nettgallerier med Photoshop CS5, kan du se delen om å opprette et nettfotogalleri i hjelpen for Adobe Bridge. Hvis du vil bruke den eldre valgfrie plugin-modulen Webfotogalleri som beskrives under, må du først laste den ned og installere den for Windows eller Mac OS.

Photoshop har forskjellige stiler for nettfotogalleriet. Erfarne brukere som har kjennskap til HTML, kan i tillegg tilpasse en stil ved å redigere et sett HTML-malfiler eller opprette en ny stil.

Stilene for nettfotogalleri i Photoshop er lagret i egne mapper i følgende plasseringer:

Windows

Programfiler/Adobe/Adobe Photoshop CS5/Innstillinger/Web-fotogalleri.

Mac OS

Adobe Photoshop CS5/Innstillinger/Web-fotogalleri.

Navnet på hver mappe på denne plasseringen vises som et alternativ på Stiler-menyen i dialogboksen Web-fotogalleri. Hver mappe inneholder følgende HTML-malfiler, som Photoshop bruker til å generere galleriet:

Caption.htm

Bestemmer oppsettet for bildeteksten som vises under hver miniatyr på hjemmesiden.

FrameSet.htm

Bestemmer oppsettet for rammesettet for visning av sider.

IndexPage.htm

Bestemmer oppsettet for hjemmesiden.

SubPage.htm

Bestemmer oppsettet for gallerisidene med bilder i full størrelse.

Thumbnail.htm Bestemmer oppsettet for miniatyrene som vises på hjemmesiden.

Hver malfil inneholder HTML-kode og spesialtegn. Spesialtegn er en tekststreng som erstattes av Photoshop når du angir det tilhørende alternativet i dialogboksen Web-fotogalleri. En malfil kan for eksempel inneholde følgende TITLE-element som bruker spesialtegn som tekst mellom kodene:

<TITLE>%TITLE%</TITLE>

Når Photoshop genererer galleriet ved hjelp av denne malfilen, erstattes %TITLE%-spesialtegnet med teksten du skrev inn under Web-sted i dialogboksen Web-fotogalleri.

For bedre å forstå en stil kan du åpne og studere den tilhørende HTML-malfilen i et HTML-redigeringsprogram. Ettersom bare standard ASCII-tegn brukes til å opprette HTML-dokumenter, kan du åpne, redigere og opprette disse dokumentene i et redigeringsprogram for ren tekst, for eksempel Notisblokk (Windows) eller TextEdit (Mac OS).

Du kan tilpasse en eksisterende stil for nettfotogalleri ved å redigere en eller flere av de tilhørende HTML-malfilene. Når du tilpasser en stil, må du følge disse retningslinjene for at Photoshop skal kunne generere galleriet riktig:

  • Stilmappen må inneholde følgende filer: Caption.htm, IndexPage.htm, SubPage.htm, Thumbnail.htm og FrameSet.htm.

  • Du kan endre navn på stilmappen, men ikke på HTML-malfilene i mappen.

  • Du kan ha en tom Caption.htm-fil og plassere HTML-koden og -spesialtegnene som bestemmer oppsettet for bildeteksten, i filen Thumbnail.htm.

  • Du kan erstatte spesialtegn i en malfil med tekst eller HTML-kode, slik at et alternativ angis via malfilen i stedet for via dialogboksen Web-fotogalleri. En malfil kan for eksempel inneholde et BODY-element med følgende bakgrunnsfargeattributt som bruker spesialtegn som verdi:

    bgcolor=%BGCOLOR%

    Hvis du vil sette bakgrunnsfargen for siden til rød, kan du erstatte %BGCOLOR%-spesialtegnet med «FF0000».

  • Du kan legge til HTML-kode og spesialtegn i malfilene. Alle spesialtegn må skrives med store bokstaver og begynne med et prosenttegn (%).

  1. Finn mappen der de eksisterende stilene for nettfotogalleri er lagret.
  2. Gjør ett av følgende:
    • Hvis du vil egendefinere en stil, oppretter du en kopi av stilmappen og lagrer den på samme plassering på harddisken som de eksisterende stilmappene.

    • Hvis du vil egendefinere en stil, oppretter du en kopi av stilmappen og lagrer den på samme plassering på harddisken som de eksisterende stilmappene.

    Den nye eller egendefinerte stilen (navngitt for mappen) vises på Stiler-menyen i dialogboksen Web-fotogalleri.

  3. Gjør ett av følgende ved hjelp av et HTML-redigeringsprogram:
    • Egendefiner HTML-malfilen.

    • Opprett de nødvendige HTML-malfilene, og lagre dem i stilmappen.

    Når du oppretter malfilene, må du passe på at du følger retningslinjene for tilpassing beskrevet i Tilpasse stiler for nettfotogalleri.

    Merk:

    Når du tilpasser eller oppretter en mal for en galleristil, bør du plassere hvert av følgende spesialtegn på en egen linje i HTML-filen: %CURRENTINDEX%, %NEXTIMAGE%, %NEXTINDEX%, %PAGE%, %PREVIMAGE% og %PREVINDEX%. Når du genererer angitte gallerisider, hopper Photoshop over linjer i en mal som inneholder spesialtegn som ikke brukes på de sidene. Når Photoshop for eksempel genererer den første gallerisiden, hopper det over linjer i malen som inneholder spesialtegnet %PREVIMAGE%, som bestemmer koblingen til forrige galleriside. Hvis du beholder %PREVIMAGE%-spesialtegnet på en egen linje, sørger du for at Photoshop ikke ignorerer andre spesialtegn i malen.

HTML-malfilene i Photoshop inneholder spesialtegn som brukes til å definere en standardstil for nettfotogalleri. Photoshop bruker disse spesialtegnene til å generere et galleri basert på brukerinndata i dialogboksen Web-fotogalleri.

Når du egendefinerer eller oppretter en galleristil, kan du legge til spesialtegn i HTML-malfiler, med unntak av %THUMBNAILS% og %THUMBNAILSROWS%, som bare kan vises i filen IndexPage.htm. Når du legger til spesialtegn, må du huske på at du også må legge til HTML-kode i filen slik at spesialtegnene brukes riktig.

Du kan bruke følgende spesialtegn i HTML-malfiler:

%ALINK%

Bestemmer fargen på aktive koblinger.

%ALT%

Bestemmer navnet på en bildefil.

%ANCHOR%

Gir brukeren mulighet til å gå tilbake til miniatyren av bildet som vises, i stedet for tilbake til begynnelsen av indeksen. Dette skjer når brukeren klikker Hjem-knappen.

%BANNERCOLOR%

Bestemmer fargen på banneret.

%BANNERFONT%

Bestemmer skrifttypen for bannerteksten.

%BANNERFONTSIZE%

Bestemmer skriftstørrelsen for bannerteksten.

%BGCOLOR%

Bestemmer bakgrunnsfargen.

%CAPTIONFONT%

Bestemmer skriften for bildeteksten som vises under hver miniatyr på hjemmesiden.

%CAPTIONFONTSIZE%

Bestemmer skriftstørrelsen for bildeteksten.

%CAPTIONTITLE%

Setter inn dokumenttittelen for en bildetekst fra filinformasjonen.

%CHARSET%

Bestemmer tegnsettet som brukes på hver side.

%CONTACTINFO%

Angir kontaktinformasjonen for galleriet, for eksempel telefonnummer og sted.

%CONTENT_GENRATOR%

Utvides til «Adobe Photoshop CS5 Web-fotogalleri».

%COPYRIGHT%

Setter inn informasjonen om opphavsrett for en bildetekst fra filinformasjonen.

%CREDITS%

Setter inn bidragsyterne for en bildetekst fra filinformasjonen.

%CURRENTINDEX%

Bestemmer koblingen for gjeldende hjemmeside.

%CURRENTINDEXANCHOR%

Finnes i filen SubPage.htm og peker på den første indekssiden.

%DATE%

Bestemmer datoen som vises i banneret.

%EMAIL%

Angir e-postinformasjonen for galleriet.

%FILEINFO%

Bestemmer bildefilinformasjon for en bildetekst.

%FILENAME%

Bestemmer filnavnet for et bilde. Bruk dette for metadata som vises som HTML-tekst.

%FILENAME_URL%

Bestemmer URL-filnavnet for et bilde. Brukes bare for URL-filnavn.

%FIRSTPAGE%

Bestemmer koblingen for den første gallerisiden som vises i den høyre rammen i rammesettet.

%FRAMEINDEX%

Bestemmer koblingen for hjemmesiden som vises i den venstre rammen i rammesettet.

%HEADER%

Bestemmer galleritittelen.

%IMAGEBORDER%

Bestemmer rammestørrelsen for bildet i full størrelse på en galleriside.

%IMAGE_HEIGHT%

Aktiverer avmerkingsboksen Legg til bredde- og høydeattributt for bilder. Dermed kan brukeren laste ned attributtene, noe som reduserer nedlastingstiden.

%IMAGE_HEIGHT_NUMBER%

Dette spesialtegnet erstattes med et numerisk tegn som (bare) representerer bildets bredde.

%IMAGEPAGE%

Bestemmer koblingen til en galleriside.

%IMAGE_SIZE%

Hvis det er merket av for Endre størrelse på bilder, har dette spesialtegnet den bildepunktverdien som er angitt i Store bilder-panelet. Hvis det ikke er merket av i denne boksen, inneholder spesialtegnet en tom streng. Dette er nyttig for JavaScript i malene fordi det kan vise den maksimale høyde- og breddeverdien for alle bilder for det genererte nettstedet.

%IMAGESRC%

Bestemmer nettadressen for bilder i full størrelse på en galleriside.

%IMAGE_WIDTH%

Aktiverer avmerkingsboksen Legg til bredde- og høydeattributt for bilder. Dermed kan brukeren laste ned attributtene, noe som reduserer nedlastingstiden.

%IMAGE_WIDTH_NUMBER%

Dette spesialtegnet erstattes med et numerisk tegn som (bare) representerer bildets bredde.

%LINK%

Bestemmer fargen på koblinger.

%NEXTIMAGE%

Bestemmer koblingen for neste galleriside.

%NEXTIMAGE _CIRCULAR%

Angir koblingen fra et stort forhåndsvisningsbilde til neste store forhåndsvisningsbilde.

%NEXTINDEX%

Bestemmer koblingen for neste hjemmeside.

%NUMERICLINKS%

Setter inn nummererte koblinger på undersider til alle store forhåndsvisningsbilder.

%PAGE%

Bestemmer plasseringen til gjeldende side (for eksempel side 1 av 3).

%PHOTOGRAPHER%

Bestemmer navnet på personen eller organisasjonen som har tatt bildene i galleriet.

%PREVIMAGE%

Bestemmer koblingen for forrige galleriside.

%PREVINDEX%

Bestemmer koblingen for forrige hjemmeside.

%SUBPAGEHEADER%

Bestemmer galleritittelen.

%SUBPAGETITLE%

Bestemmer galleritittelen.

%TEXT%

Bestemmer tekstfargen.

%THUMBBORDER%

Bestemmer størrelsen på miniatyrbilderammene.

%THUMBNAIL_HEIGHT%

Aktiverer avmerkingsboksen Legg til bredde- og høydeattributt for bilder. Dermed kan brukeren laste ned attributtene, noe som reduserer nedlastingstiden.

%THUMBNAIL_HEIGHT_NUMBER%

Dette spesialtegnet erstattes med et numerisk tegn som (bare) representerer miniatyrens høyde.

%THUMBNAILS%

Spesialtegnene erstattes med miniatyrer ved hjelp av filen Thumbnail.htm for rammestilene. Spesialtegnene må plasseres på én ubrutt linje i HTML-filen.

%THUMBNAIL_SIZE%

Inneholder bildepunktverdien for miniatyren i miniatyrpanelet. Dette er nyttig for JavaScript i malene fordi det kan vise maksimal høyde- og breddeverdi for alle miniatyrer for det genererte nettstedet.

%THUMBNAILSRC%

Bestemmer koblingen til en miniatyr.

%THUMBNAILSROWS%

Spesialtegnene erstattes med rader med miniatyrer ved hjelp av filen Thumbnail.htm for ikke-rammestilene. Spesialtegnene må plasseres på én ubrutt linje i HTML-filen.

%THUMBNAIL_WIDTH%

Aktiverer avmerkingsboksen Legg til bredde- og høydeattributt for bilder. Dermed kan brukeren laste ned attributtene, noe som reduserer nedlastingstiden.

%THUMBNAIL_WIDTH_NUMBER%

Dette spesialtegnet erstattes med et numerisk tegn som (bare) representerer miniatyrens bredde.

%TITLE%

Bestemmer galleritittelen.

%VLINK%

Bestemmer fargen på koblinger som er besøkt.

Dette produktet er lisensiert i henhold til Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Innlegg på Twitter™ og Facebook dekkes ikke av Creative Commons-vilkår.

Juridiske merknader   |   Regler for personvern på nettet