Obs!

Instruktioner om hur du skapar webbgallerier med Photoshop CS5 finns i Skapa ett webbfotogalleri i hjälpen för Adobe Bridge. Innan du kan använda det äldre valfria plugin-programmet Web Photo Gallery som beskrivs nedan måste du hämta och installera det för Windows eller Mac OS.

Webbfotogallerier

Ett webbfotogalleri är en webbplats som innehåller en startsida med miniatyrbilder samt gallerisidor med bilderna i full storlek. Varje sida innehåller länkar som gör det lättare för besökarna att navigera på webbplatsen. När en besökare t.ex. klickar på en miniatyrbild på startsidan så läses den tillhörande fullstorleksbilden in på en gallerisida. Med kommandot Webbfotogalleri skapar du automatiskt ett webbfotogalleri av en grupp bilder.

Photoshop: Startsida för webbfotogalleri
Webbfotogalleri, startsida

Photoshop innehåller en rad olika galleristilar som du kan välja bland med hjälp av kommandot Webbfotogalleri. Om du är en van användare och har erfarenhet av HTML kan du skapa en ny stil eller anpassa en stil genom att redigera en uppsättning HTML-mallfiler.

Varje mall för galleristilar innehåller olika alternativ. Om du använder en förinställd stil kan en del alternativ vara nedtonade eller otillgängliga för just den stilen.

Skapa webbgallerier med Adobe Bridge

I Adobe Bridge finns uppdaterade funktioner för webbgallerier. Instruktioner finns i Skapa ett webbfotogalleri i Adobe Bridge-hjälpen. Du kan också titta på självstudierna nedan.

Använda Photoshops äldre, valfria plugin-program

  1. Hämta och installera det äldre plugin-programmet för webbfotogalleri för Windows eller Mac OS.

  2. (Valfritt) Markera de filer eller den mapp som du vill använda i Adobe Bridge.

    Bilderna visas i den ordning som de visas i Bridge. Om du vill använda en annan ordning ändrar du ordningen i Bridge.

  3. Gör något av följande:

    • I Adobe Bridge: Välj Verktyg > Photoshop > Webbfotogalleri.

    • I Photoshop: Välj Arkiv > Automatisera > Webbfotogalleri.

  4. Välj en stil till galleriet på snabbmenyn Stilar. En förhandsvisning av startsidan med den valda stilen visas i dialogrutan.

  5. (Valfritt) Ange en e-postadress som kontaktinformation för galleriet.

  6. Välj källfiler för galleriet på menyn Använd.

    Valda bilder från Bridge

    Använder de bilder du valde innan du öppnade dialogrutan Webbfotogalleri.

    Mapp

    Använder bilder från de mappar du väljer med hjälp av knappen Bläddra (Windows) eller Välj (Mac OS). Markera Inkludera alla undermappar om du även vill ta med bilder i alla underordnade mappar till den markerade mappen.

  7. Klicka på Mål och välj sedan en mapp där du vill lagra galleriets bilder och HTML-sidor. Klicka på OK (Windows) eller Välj (Mac OS).

  8. Välj formateringsalternativ för webbgalleriet. På menyn Alternativ kan du visa alla alternativuppsättningar. Se Alternativ för webbfotogalleri.

  9. Klicka på OK. Följande HTML- och JPEG-filer placeras i målmappen av Photoshop:

    • En startsida till ditt galleri med namnet index.htm eller index.html beroende på alternativen för filtillägg. Du kan förhandsvisa galleriet genom att öppna den här filen i valfri webbläsare.

    • JPEG-bilder i en underordnad bildmapp.

    • HTML-sidor i en separat mapp.

    • JPEG-miniatyrbilder i en egen mapp.

Se till att färgerna matchar

Om du arbetar med foton i en stor arbetsfärgrymd, t.ex. ProPhoto RGB eller Adobe RGB, kan det hända att färgåtergivningen påverkas när bilderna visas i ett webbgalleri med en webbläsare som inte läser inbäddade färgprofiler. Om så är fallet kan du prova att konvertera bildprofilerna till sRGB (som används som standard i de flesta webbläsare) innan du optimerar dem eller inkluderar dem i ett webbfotogalleri. Konvertera dem till sRGB på något av följande sätt: Det kan vara bra att arbeta med kopior av bilderna.

Om du använder bildbearbetaren kan du spara filerna direkt i JPEG-format och i den storlek som du vill ha. Om du vill göra det så måste du se till att avaktivera Ändra bildstorlek i alternativen för stora bilder.

Allmänt

Alternativ för filtillägg, kodning och metadata.

Filtillägg

Använder antingen .htm eller .html som filnamnstillägg.

Använd UTF 8-kodning för URL

Använder UTF-8-kodning.

Lägg till bredd- och höjdattribut för bilder

Anger dimensionerna och förkortar hämtningstiden.

Bevara alla metadata

Bevarar informationen om metadata.

Banderoll

Textalternativ för den banderoll som visas på varje sida i galleriet. Ange text för var och en av följande:

Platsnamn

Galleriets namn.

Fotograf

Namnet på den person eller organisation som är ansvarig för fotografierna i galleriet.

Kontaktinformation

Kontaktinformation för galleriet, t.ex. ett telefonnummer eller en företagsadress.

Datum

Det datum som visas på varje sida i galleriet. Som standard används dagens datum.

Teckensnitt och teckensnittsstorlek

(Tillgängligt för vissa webbplatsstilar) Alternativ för texten på banderollen.

Stora bilder

Alternativ för de huvudbilder som visas på varje sida i galleriet.

Lägg till numeriska länkar

(Tillgängligt för vissa webbplatsstilar) Infogar en numerisk sekvens (som börjar med 1 och slutar med det sammanlagda antalet sidor i galleriet) som löper vågrätt längs överkanten på varje gallerisida. Varje nummer är en länk till respektive sida.

Ändra bildstorlek

Ändrar storlek på källbilderna så att de placeras på gallerisidorna. Välj en storlek på snabbmenyn eller ange en storlek i pixlar. Välj vilka bildstorlekar du vill begränsa när du ändrar storlek i Begränsa. För JPEG-kvalitet väljer du ett alternativ på snabbmenyn, anger ett värde mellan 0 och 12 eller drar reglaget. Ju högre värde du väljer, desto bättre bildkvalitet och större fil får du.

Obs!

I Photoshop används den standardbildinterpolation som angetts i inställningarna. Välj Bikubisk skarpare som standard för att få bäst resultat när du minskar bildstorleken.

Gränsstorlek

Anger bredden på gränsen runt bilden i pixlar.

Titlar använder

(Tillgängligt för vissa webbplatsstilar) Anger alternativ för visning av bildtexter under varje bild. Markera Filnamn om du vill visa filnamnet eller markera Beskrivning, Medarbetare, Titel och Copyright om du vill visa beskrivningstext från dialogrutan Filinformation.

Teckensnitt och teckensnittsstorlek

(Tillgängligt för vissa webbplatsstilar) Ange teckensnitt och teckenstorlek för bildtexten.

Miniatyrbilder

Alternativ för galleristartsidan, inklusive storlek på miniatyrbilderna.

Storlek

Anger storleken på miniatyrbilderna. Välj på snabbmenyn eller ange ett värde i pixlar för bredden på varje miniatyrbild.

Kolumner och rader

Ange antalet kolumner och rader som miniatyrbilderna ska visas i på startsidan. Det här alternativet kan inte användas för gallerier med stilen Vågrät ram eller Lodrät ram.

Gränsstorlek

Anger bredden på gränsen runt varje miniatyrbild i pixlar.

Titlar använder

(Tillgängligt för vissa webbplatsstilar) Anger alternativ för visning av bildtexter under varje miniatyrbild. Markera Filnamn om du vill visa filnamnet eller markera Beskrivning, Medarbetare, Titel och Copyright om du vill visa beskrivningstext från dialogrutan Filinformation.

Teckensnitt och teckensnittsstorlek

(Tillgängligt för vissa webbplatsstilar) Ange teckensnitt och teckenstorlek för bildtexten.

Egna färger

Alternativ för färger på element i galleriet. Om du vill ändra färg på ett visst objekt klickar du på dess färgruta och väljer en annan färg med hjälp av färgväljaren. Du kan ändra bakgrundsfärgen för varje sida (alternativet Bakgrund) och för banderollen (alternativet Banderoll).

Dokumentskydd

Visar text över varje bild som en åtgärd mot stöld.

Innehåll

Anger den text som ska visas. Välj Egen text om du vill ange anpassad text. Markera Filnamn, Beskrivning, Tillskrivning, Titel eller Copyright om du vill visa text som hämtas från dialogrutan Filinformation.

Teckensnitt, färg och position

Ange teckensnitt, färg och justering för bildtexten.

Rotera

Placera texten på bilden i en viss vinkel.

Obs!

Instruktioner om hur du skapar webbgallerier med Photoshop CS5 finns i Skapa ett webbfotogalleri i hjälpen för Adobe Bridge. Innan du kan använda det äldre valfria plugin-programmet Web Photo Gallery som beskrivs nedan måste du först hämta och installera det - för Windows eller för Mac OS.

I Photoshop finns en mängd olika stilar som du kan använda på ett webbfotogalleri. Om du är en van användare och har erfarenhet av HTML kan du skapa en ny stil eller anpassa en stil genom att redigera en uppsättning HTML-mallfiler.

De stilar för webbfotogallerier som ingår i Photoshop finns i separata mappar på följande platser:

Windows

Program/Adobe/Adobe Photoshop CS5/Förinställningar/Webbfotogalleri.

Mac OS

Adobe Photoshop CS5/Förinställningar/Webbfotogalleri.

Namnet på mapparna visas som ett alternativ på menyn Stilar i dialogrutan Webbfotogalleri. Varje mapp innehåller ett antal HTML-mallfiler som används av Photoshop när galleriet skapas:

Caption.htm

Bestämmer layouten för den bildtext som visas under varje miniatyrbild på startsidan.

FrameSet.htm

Bestämmer layouten för de ramar som används för att visa sidorna.

IndexPage.htm

Bestämmer startsidans layout.

SubPage.htm

Bestämmer layouten för gallerisidorna där bilderna visas i full storlek.

Thumbnail.htm anger layouten för de miniatyrbilder som visas på startsidan.

Varje mallfil innehåller HTML-kod och variabler. En variabel är en textsträng som ersätts av Photoshop när du anger motsvarande alternativ i dialogrutan Webbfotogalleri. En mallfil kan till exempel innehålla följande TITLE-element som består av två HTML-koder som omger en variabel:

<TITLE>%TITLE%</TITLE>

När galleriet genereras av Photoshop med hjälp av mallfilen ersätts variabeln %TITLE% med den text som du har angett i Platsnamn i dialogrutan Webbfotogalleri.

Om du vill skaffa dig mer ingående kunskaper om en stil kan du öppna och studera dess HTML-mallfiler med en HTML-redigerare. Eftersom bara standardvarianten av ASCII-tecken får användas när man skapar HTML-dokument, kan du skapa, öppna och redigera sådana dokument med en vanlig textredigerare, till exempel Anteckningar (Windows) eller TextEdit (Mac OS).

Du kan anpassa en befintlig webbfotogalleristil genom att redigera en eller flera av dess HTML-mallfiler. När du anpassar en stil måste du följa de här riktlinjerna för att galleriet sedan ska kunna skapas på rätt sätt i Photoshop:

  • Stilmappen måste innehålla de här filerna: Caption.htm, IndexPage.htm, SubPage.htm, Thumbnail.htm och FrameSet.htm.

  • Du kan ändra namn på stilmappen men inte på HTML-mallfilerna inuti mappen.

  • Du kan låta filen Caption.htm vara tom och lägga de HTML-koder och variabler som bestämmer bildtextlayouten i filen Thumbnail.htm.

  • Du kan ersätta en variabel i en mallfil med rätt text eller HTML-kod så att ett alternativ ställs in med hjälp av mallfilen istället för i dialogrutan Webbfotogalleri. En mallfil kan till exempel innehålla ett BODY-objekt med följande attribut för bakgrundsfärg och en variabel som värde:

    bgcolor=%BGCOLOR%

    Om du vill ange bakgrundsfärgen röd ersätter du variabeln %BGCOLOR% med "FF0000".

  • Du kan lägga till HTML-kod och variabler i mallfilerna. Alla variabler måste skrivas med versaler och inledas och avslutas med ett procenttecken (%).

  1. Leta upp mappen som innehåller de befintliga stilarna för webbfotogallerier.
  2. Gör något av följande:
    • Om du vill anpassa en stil skapar du en kopia av stilmappen och sparar den på samma plats som de andra stilmapparna.

    • Om du vill skapa en ny stil skapar du en ny mapp för den nya stilen och sparar den på samma plats som de andra stilmapparna.

    Den nya eller anpassade stilen (samma namn som mappen) visas på menyn Stilar i dialogrutan Webbfotogalleri.

  3. Gör något av följande om du vill använda en HTML-redigerare:
    • Anpassa HTML-mallfilen.

    • Skapa de HTML-mallfiler som krävs och spara dem i stilmappen.

    När du skapar mallfilerna måste du följa riktlinjerna för anpassning som beskrivs i avsnittet Anpassa stilar för webbfotogallerier.

    Obs!

    När du anpassar eller skapar en mall för en galleristil bör du lägga till följande variabler på var sin separat rad i HTML-filen: %CURRENTINDEX%, %NEXTIMAGE%, %NEXTINDEX%, %PAGE%, %PREVIMAGE% och %PREVINDEX%. När de specifika sidorna i ett galleri genereras hoppar Photoshop över rader i en mall som innehåller variabler som inte gäller för sidorna. När Photoshop t.ex. skapar den första gallersidan förbigås alla rader i mallen som innehåller variabeln %PREVIMAGE%, dvs. variabeln som anger länken till föregående gallerisida. Genom att lägga till variabeln %PREVIMAGE% på en separat rad kan du se till att andra variabler i mallen inte hoppas över i programmet.

I Photoshop används variabler i HTML-mallfilerna för att definiera en standardstil för webbfotogallerier. De här variablerna används i programmet för att skapa ett galleri utifrån det du anger i dialogrutan Webbfotogalleri.

När du anpassar eller skapar en galleristil kan du lägga till vilka variabler som helst i HTML-mallfilerna, med undantag för %THUMBNAILS% och %THUMBNAILSROWS%, som bara kan förekomma i filen IndexPage.htm. När du lägger till en variabel måste du komma ihåg att du också måste lägga till HTML-kod i filen så att variabeln kan användas på rätt sätt.

Du kan använda följande variabler i HTML-mallfilerna:

%ALINK%

Bestämmer färgen för aktiva länkar.

%ALT%

Bestämmer namnet på en bildfil.

%ANCHOR%

Gör att det går att gå tillbaka till miniatyren för bilden som användaren visar i stället för att gå till början på index. Detta börjar gälla när användaren klickar på knappen Hem.

%BANNERCOLOR%

Bestämmer färgen för banderollen.

%BANNERFONT%

Bestämmer teckensnittet för banderolltexten.

%BANNERFONTSIZE%

Bestämmer teckensnittsstorleken för banderolltexten.

%BGCOLOR%

Bestämmer bakgrundsfärgen.

%CAPTIONFONT%

Bestämmer teckensnittet för bildtexten under varje miniatyrbild på startsidan.

%CAPTIONFONTSIZE%

Bestämmer teckenstorleken för bildtexten.

%CAPTIONTITLE%

Infogar dokumenttiteln som en bildtext från filinformationen.

%CHARSET%

Bestämmer vilken teckenuppsättning som ska användas på en sida.

%CONTACTINFO%

Bestämmer kontaktinformationen för galleriet, som till exempel telefonnummer och plats.

%CONTENT_GENRATOR%

Expanderar till webbfotogalleriet i Adobe Photoshop CS5.

%COPYRIGHT%

Infogar copyright-informationen som en bildtext från filinformationen.

%CREDITS%

Infogar medarbetarinformation som en bildtext från filinformationen.

%CURRENTINDEX%

Anger länken till den aktuella startsidan.

%CURRENTINDEXANCHOR%

Finns i SubPage.htm och pekar på den första indexsidan.

%DATE%

Bestämmer vilket datum som ska visas på banderollen.

%EMAIL%

Bestämmer e-postadressen i kontaktinformationen för galleriet.

%FILEINFO%

Anger bildfilsinformationen för en bildtext.

%FILENAME%

Bestämmer filnamnet för en bild. Använd den här för metadata som visas som HTML-text.

%FILENAME_URL%

Bestämmer URL-filnamnet för en bild. Använd bara det här alternativet för URL-filnamn.

%FIRSTPAGE%

Anger länken till den första gallerisidan som visas i den högra ramen i en ramuppsättning.

%FRAMEINDEX%

Anger länken till startsidan som visas i den vänstra ramen i en ramuppsättning.

%HEADER%

Bestämmer galleriets rubrik.

%IMAGEBORDER%

Bestämmer ramlinjetjockleken för fullstorleksbilden på en gallerisida.

%IMAGE_HEIGHT%

Aktiverar kryssrutan Lägg till bredd- och höjdattribut för bilder. På så sätt kan användaren hämta attributen och hämtningstiden förkortas.

%IMAGE_HEIGHT_NUMBER%

Den här variabeln ersätts med ett numeriskt värde (endast) som motsvarar bildens bredd.

%IMAGEPAGE%

Anger länken till en gallerisida.

%IMAGE_SIZE%

Om kryssrutan Ändra bildstorlek är markerad innehåller den här variabeln bildpixelvärdet som används i panelen Stora bilder. Om kryssrutan inte är markerad innehåller den här variabeln en tom sträng. Det här är användbart för JavaScript i mallar eftersom den maximala höjden och bredden för alla bilder på platsen kan visas.

%IMAGESRC%

Anger URL-adressen för en fullstorleksbild på en gallerisida.

%IMAGE_WIDTH%

Aktiverar kryssrutan Lägg till bredd- och höjdattribut för bilder. På så sätt kan användaren hämta attributen och hämtningstiden förkortas.

%IMAGE_WIDTH_NUMBER%

Den här variabeln ersätts med ett numeriskt värde (endast) som motsvarar bildens bredd.

%LINK%

Bestämmer färgen för länkar.

%NEXTIMAGE%

Anger länken till nästa gallerisida.

%NEXTIMAGE _CIRCULAR%

Skapar en länk från stor förhandsvisningsbild till nästa stora förhandsvisningsbild.

%NEXTINDEX%

Anger länken till nästa startsida.

%NUMERICLINKS%

Infogar numrerade länkar på underordnade sidor till alla stora förhandsvisningsbilder.

%PAGE%

Anger den aktuella sidans placering (t.ex. sidan 1 av 3).

%PHOTOGRAPHER%

Anger namnet på den person eller organisation som är ansvarig för fotografierna i galleriet.

%PREVIMAGE%

Anger länken till föregående gallerisida.

%PREVINDEX%

Anger länken till föregående startsida.

%SUBPAGEHEADER%

Bestämmer galleriets rubrik.

%SUBPAGETITLE%

Bestämmer galleriets rubrik.

%TEXT%

Bestämmer textfärgen.

%THUMBBORDER%

Bestämmer storleken på miniatyrbildernas gränser.

%THUMBNAIL_HEIGHT%

Aktiverar kryssrutan Lägg till bredd- och höjdattribut för bilder. På så sätt kan användaren hämta attributen och hämtningstiden förkortas.

%THUMBNAIL_HEIGHT_NUMBER%

Den här variabeln ersätts med ett numeriskt värde (endast) som motsvarar bildens höjd.

%THUMBNAILS%

Den här variabeln ersätts med miniatyrbilder med hjälp av filen Thumbnail.htm för ramstilar. Du måste placera den här variabeln ensam i en enda rad utan radbrytningar i HTML-filen.

%THUMBNAIL_SIZE%

Innehåller pixelvärdet för miniatyrbilden i panelen Miniatyrbilder. Det här är användbart för JavaScript i mallar eftersom den maximala höjden och bredden för alla miniatyrbilder på platsen kan visas.

%THUMBNAILSRC%

Anger länken till en miniatyrbild.

%THUMBNAILSROWS%

Den här variabeln ersätts med rader av miniatyrbilder med hjälp av filen Thumbnail.htm för andra stilar än ramstilar. Du måste placera den här variabeln ensam i en enda rad utan radbrytningar i HTML-filen.

%THUMBNAIL_WIDTH%

Aktiverar kryssrutan Lägg till bredd- och höjdattribut för bilder. På så sätt kan användaren hämta attributen och hämtningstiden förkortas.

%THUMBNAIL_WIDTH_NUMBER%

Den här variabeln ersätts med ett numeriskt värde (endast) som motsvarar miniatyrbildens bredd.

%TITLE%

Bestämmer galleriets rubrik.

%VLINK%

Bestämmer färgen för besökta länkar.

Denna produkt är licensierad enligt en Creative Commons Erkännande-Ickekommersiell-Dela Lika 3.0 Unported-licens  Twitter™- och Facebook-inlägg omfattas inte av villkoren i Creative Commons-licensen.

Juridiska meddelanden   |   Onlinesekretesspolicy