Gillar du den här guiden? Vill du att vi ska fortsätta göra fler guider? - läs mer här » 
Photoshopskolan Skriv ut sidan skriv ut»

Vattenstämpel - watermark
till PHP-bildgalleri
(CS3 mfl)

Klicka här eller på bilden nedan för att se exemplet:

Bildhanteringen i PHP gör det möjligt att lägga samman flera bilder när de visas i webbläsaren. Det här är en bra funktion för att använda en vattenstämpel på dina fotografier som skydd eller som information om bilderna. Den här guiden visar hur du skapar vattenstämpel-bilden och hur du tillämpar den i PHP-koden för användning tillsammans med PHP-bildgalleri »

 

Skapa vattenstämpel-bilden

Bilden som ska fungera som vattenstämpel kan vara i formatet JPEG, GIF eller PNG som är de bildformat som GD lirary i PHP kan hantera - läs mer i guiden Bildhantering i PHP »

Storleken på vattenstämpel-bilden är fast och i PHP-bildgalleri finns ingen möjlighet att förstora eller förminska vattenstämpeln. Om den möjligheten fanns skulle resultatet inte bli bra då bitmapp-bilder inte kan storleksändras utan kvalitetsförlust. Om du vill ha olika storlekar på vattenstämpeln kan du istället spara den i flera storlekar som du sedan tillämpar beroende på storleken på dina fotografier. Använd en liten vattenstämpel på bilder i liten storlek och en stor vattenstämpel på dina högupplösta bilder i större storlek. Koden i PHP-bildgalleri » ger dig möjlighet att själv bestämma vilka storleksgränser som ska gälla för dina egna fotografier och även placeringen som kan anges i 5 positioner; i något hörn eller centrerat i mitten av bilden. Du kan använda en liten vattenstämpel som placeras i fotografiets över- eller underkant eller en större vattenstämpel som täcker motivet i fotografiet. I exemplet skapar vi en stor vattenstämpel som ska täcka stora delar av bilden.

Det finns inga klara regler för hur en bra vattenstämpel ska se ut men en fördel är ju om den syns både på ljusa och mörka bakgrunder. Ett knep är då att ha en kontrasterande färg som bakgrund till texten, logotypen eller den information som din vattenstämpel ska ge. I exemplet skriver vi en mörk text på en ljus bakgrund men du kan även göra tvärtom, skriva en ljus text på en mörk bakgrund.

Vattenstämpeln kommer att tillämpas på fotografierna med opacitet mellan 0-100 och det innebär att motivet kommer att synas igenom vattenstämpeln. OBS! Blanda inte ihop begreppen "opacitet" och "transparens". Opacitet innebär att pixlarna i bilden kan vara delvis genomskinliga medan transparens innebär att pixlarna är helt genomskinliga. Bildformatet GIF stöder transparens vilket innebär att delar av bilden kan vara helt genomskinlig. GIF kan bara visa 256 färger. Även bildformatet PNG stöder transparens och finns i PNG-8 (med liknande egenskaper som GIF) och PNG-24 som till skillnad från GIF stöder 24-bitars färgdjup (miljoner färger). JPEG stöder inte transparens men kan hantera miljoner färger. Läs mer om bildformat i guiden Spara för web Transparent GIF - JPEG »

Alla bildformaten PNG-8, GIF och JPEG kan användas som vattenstämpel eftersom GD library kan använda opacitet oavsett bildformat.

  1. Skapa ett nytt dokument med den storlek du vill ha på din första vattenstämpel. I exemplet är storleken 500x500 pixlar och upplösningen 72dpi.
  2. Rita en form som ska fungera som kontrasterande färg till textinformation, logotype mm. Använd i första hand formverktyget som ger vektorbaserade former som kan skalas fritt utan att interpoleras. Läs mer i guiden Lager - formverktyget - lagermasker » där du också får tips på hur du kan ändra formerna eller använda färdiga former!

    Här används formverktyget "Ellips" för att rita en Vit cirkel. Bakgrunden är dold i paletten "Lager":

  3. Skriv den text du vill ha i vattenstämpeln:

  4. Om du vill ett copyright-märke kan du skriva det som en egen text och använda tangentryckningen ALT+0169 för att få symbolen "copyright":



    ... använd Teckenuppsättning i Windows för att se tangenttryckning för önskad symbol:



    TIPS! Läs mer om tecken i guiden Former med Fonter »
  5. Spara bilden som ett Photoshop-dokument att ha som originalbild:

  6. Spara i webformat med CTRL+ALT+SHIFT+S för dialogrutan "Spara för web". I exemplet väljer vi att spara som PNG-8 för att behålla transparensen i pixlarna runt cirkeln. Dessutom är koden till PHP-bildgalleri förberedd för PNG-bilder och vi sparar lite efterarbete med konfigurering av PHP-koden men du kan även använda GIF eller JPEG.

    OBS! Undvik PNG-24 (fullfärg) eftersom vissa webbläsare fortfarande har problem med visningen av bilderna. Detta gäller även GD library i PHP som inte hanterar PNG-24 korrekt ännu.

    Så här blir resultatet för bilden "watermark.png" med PNG-8 som behåller transparensen runt cirkeln:



    ... formatet GIF behåller också transparensen runt cirkeln:



    ... men formatet JPEG stöder inte transparens:



    Slutsats: har du behov av transparens använder du PNG-8 eller GIF. Använd JPEG om du har fullfärgsbilder i din vattenstämpel, förutom att bildkvaliteten då kan bli bättre så får du förmodligen en mindre filstorlek på din vattenstämpel.

 

Flera vattenstämplar i olika storlekar

Storleken på vattenstämpel-bilden är fast och i PHP-bildgalleri finns ingen möjlighet att förstora eller förminska vattenstämpeln. Om den möjligheten fanns skulle resultatet inte bli bra då bitmapp-bilder inte kan storleksändras utan kvalitetsförlust. Om du vill ha olika storlekar på vattenstämpeln kan du istället spara den i flera storlekar som du sedan tillämpar beroende på storleken på dina fotografier. Använd en liten vattenstämpel på bilder i liten storlek och en stor vattenstämpel på dina högupplösta bilder i större storlek. Koden i PHP-bildgalleri » ger dig möjlighet att själv bestämma vilka storleksgränser som ska gälla för dina egna fotografier och även placeringen som kan anges i 5 positioner; i något hörn eller centrerat i mitten av bilden.

Utgå ifrån din originalbild "watermark.psd" och ändra bildens storlek till de mått du vill ha på vattenstämpel nr 2 och vattenstämpel nr 3 osv.. Nu är det en klar fördel om du använt vektorformer som kan skalas fritt. Om du använt bitmappbilder i logotype etc så kanske du måste infoga den på nytt efter storleksändringen för ett bra resultat.

  1. Ändra storlek på bilden med menyn "Image/Image Size" (Bild/Bildstorlek):

  2. Spara bilden på nytt i webformat med CTRL+ALT+SHIFT+S för dialogrutan "Spara för web" men nu med ett nytt filnamn. I exemplet väljer vi att spara "watermark2.png" som PNG-8 för att behålla transparensen i pixlarna runt cirkeln:

  3. Upprepa momenten för alla de storlekar du vill ha på dina vattenstämplar. I exemplet används vattenstämpel-bilder i storlekarna 500x500, 800x800, 1000x1000 och 1500x1500 pixlar.

    Spara vattenstämpeln med olika namn som tex "watermark3.png", "watermark4.png" osv...

 

Konfigurera "watermark.php"

OBS! Din vattenstämpel är klar och kan användas i olika sammanhang men exemplen och PHP-filerna "watermark.php" och "config.php" är hämtade från guiden PHP-bildgalleri »

PHP-filen "watermark.php" som genererar vattenstämpeln använder den bild du valt i variabeln $waterimage och om du använder flera vattenstämpel-bilder placerar du namnen i nya variabler med namnen $waterimage2, $waterimage3 osv...

  1. I exemplet nedan använder vi de 3 bilder vi sparat med storlekarna 500px, 800px och 1000px:



    ...om du bara vill använda en storlek på vattenstämpeln anger du samma filnamn i alla variablerna. I exemplet nedan används endast "watermark.png" (med storlek 500px):


  2. Var någonstans i bilden vattenstämpeln ska placeras anger du i variabeln $waterposition där du kan välja mellan 5 olika positioner. Här anges att bilden ska vara centrerad mitt över fotografiet:

  3. Om du har valt att använda olika storlekar på din vattenstämpel kan du använda if-satsen för att ange vilka storlekar på fotografierna som ska få motsvarande vattenstämpel.

    Koden nedan använder den minsta vattenstämpeln om fotografiet är mindre än eller lika med 800 pixlar:

    if($image_width <= 800 && $image_height < 2500){
    $watermark = imagecreatefrompng($waterimage);}

    Om du sparat dina vattenstämpel-bilder i annat bildformat än PNG-8 måste du ändra funktionen imagecreate som skapar bilden i PHP-koden. I exemplen nedan används GIF som bildformat:

    if($image_width <= 800 && $image_height < 2500){
    $watermark = imagecreatefromgif($waterimage);}

    ... och i exemplen nedan används JPEG som bildformat:

    if($image_width <= 800 && $image_height < 2500){
    $watermark = imagecreatefromjpeg($waterimage);}


    Exemplet nedan använder 3 olika storlekar på vattenstämpeln för fotografier i storleksintervall från 0 pixlar upp till 2500 pixlar:



    OBS! För bilder som är större än 2500 pixlar anger else i exemplet ovan att den minsta vattenstämpeln i variabeln $waterimage ska användas vilket ju inte stämmer med de tidigare intervallen... Anledningen är att stora bilder och stora vattestämplar kan resultera i att ingen bild visas då minnet inte räcker till (mer om minnesgränsen nedan). Prova dig fram med stora vattenstämplar även på dina stora bilder och se om det fungerar.
  4. Om du vill ändra opacitetsvärdet för vattenstämpeln kan du ändra värdet '50' i slutet av koden. Värdet '100' ger ingen opacitet och värden ner till '0' ökar opaciteten:

Testa din vattenstämpel

För att ditt PHP-bildgalleri ska använda vattenstämpel måste du ange detta i konfigureringsfilen config.php där du anger att en 'bild' ska användas i variabeln $watermark:

 

Ändra minnesgränsen i PHP

OBS! Om ingen bild visas när du testar vattenstämpeln på stora fotografier är orsaken förmodligen att minnesgränsen är för låg. Funktionen ini_set ger en tillfällig ändring av hur mycket minne som används till PHP-scripten:



Läs mer om hur memory_limit kan anges för att öka minnesgränsen i guiden PHP-bildgalleri » Steg 2, punkt 8.

Om bilden ändå inte visas räcker inte minnet till och då återstår bara att använda en mindre vattenstämpelbild eller att använda text som vattestämpel istället för en bild...