Bildredigering i EPiServer & Gimp Maria Sognefors 7minds Agenda Teori om bilder Att tänka på när jag fotograferar Föra över bilder från kamera till dator Ladda upp bilder till EPiServer CMS 5 Enkel redigering i EPiServer CMS 5 Redigera bilder i GIMP 1
Vektorgrafik vs Punktgrafik Vektorbilder räknas ut i ett koordinatsystem. Inga problem att ändra storlek, både större och mindre Bra för text och symboler. Punktuppbyggda bilder består av punkter där varje punkt har en egen färg. Går bra att förminska, inte så bra att förstora. Kan bli pixlig. Alla bilder på internet är punktuppbyggda. Upplösning Upplösningen har med punktuppbyggda bilder att göra och avgör hur många punkter det finns per tum (dpi). En skärm kan inte tyda mer än 70-100 pixlar per tum vilket gör att vi inte behöver lägga så stor vikt vid detta när vi jobbar med webben. Om vi däremot ska trycka eller skriva ut samma bild krävs minst 300 dpi för tryck och ca 150 dpi för utskrift, beroende på skrivare. När man fotograferar eller scannar sina bilder kan man oftast ställa in vilken upplösning originalen ska ha. Ju fler dpi, desto bättre kvalitet, desto större bild, tar alltså mera plats på minneskortet. Det är fullt möjligt att minska antal dpi i en bild, men inte att öka. 2
Storlek på bilden Storleken på bild på skärmen mäts i pixlar. Centimeter och andra längdmått gäller bara för papper. För att få bra resultat måste man ha koll på webbsidans bredd, för att utifrån det, anpassa bilden. Om bilden är för stor, kapas den. Den sammanlagda bildtyngden på en sida, bör inte vara mer än 150kB. Färger En bild har alltid ett färgläge, för att kunna återge bilderna hyfsat lika på olika media. RGB Röd, Grön, Blå Används för skärm, som endast återger en blandning av dessa färger. Kombinera dessa och du får ca 16 miljoner olika färger. CMYK Cyan, Magenta, Yellow, Black Används för tryck. En tryckpress består normalt av fyra tryckpressar med en färg i varje press. Gråskala Används när man inte vill återge någon färg, utan färger ska vara översatta till olika gråskalor. 3
Filformat GIF - det första formatet för webb Små bilder som gick snabbt att ladda. Kan vara transparent. Har endast 256 färger. Passar därför inte fotografier eller toningar. JPG - det andra formatet för webb. Kan komprimeras i olika grader. Ju mer komprimering, desto sämre kvalitet. Har 16 miljoner färger. Kan inte vara transparent. Blir vitt om man inte skapat en egen färg. Har en förstörande komprimering, vilket innebär att man inte bör spara om samma jpg-bild flera gånger. PNG - det tredje formatet för webb Har 16 miljoner färger. Kan vara transparent. Fungerade inte i alla webbläsare när det kom. Men idag är det inga problem. Lite större filer än med jpg. Fotografera smart Välj hög upplösning på bilderna redan i kameran. Se till att alltid ha bra ljus. Kolla efter så att det inte finns onödiga saker i bilden, tak, golv, störande saker, skugga. Ta många bilder väldigt många. Fotografera gärna snävt när du börjar bli van. Kan då få bättre effekter med olika skärpdjup. 4
Bra och dåliga exempel Kopiera bilder från kameran till datorn Det finns säkert lika många sätt som människor. Vanligast är att du har en USB-kabel mellan kameran och datorn. Ibland flyttar man minneskortet till datorn. Ibland finns det speciella programvaror som startar automatiskt när man kopplar ihop dem. Oavsett brukar det fungera att ignorera detta och öppna de två som två olika enheter. Den varianten använder vi idag. 5
Öppna två mappar Öppna Dator. Öppna kamerans mapp Öppna en mapp datorn där du vill lagra bilderna. Markera och dra bilderna från den ena mappen till den andra. Ladda upp bilder till EPiServer CMS Vanligast är att använda dra och släpp. Öppna mappen på din dator. Markera filen och dra in i rätt mapp i EPiServers filhanterare. Du kan också välja knappen Lägg till en ny fil. 6
Länka in bilden i sidan Bilder lagras på servern och länkas in i sidan. Du kan välja att infoga en bild med knappen Infoga bild. Du kan också öppna filhanteraren till höger om sidan och dra och släpp in i sidan. Redigera bilden i editorn Om du infogar/drar in en bild i Editorn, ser du oftast ganska snabbt om bilden är för stor. Högerklicka på bilden och välj Bildegenskaper för att redigera bilden. 7
Beskära Skär gärna bort onödig information i bilden. Välj att skriva in mått eller dra en ruta runt det du vill behålla. Dubbelklicka i rutan eller välj Utför. Beskär alltid före du ändrar storlek om du tänker göra båda. Ändra storlek Välj att skriva in mått eller dra i bilden så den blir så stor som du vill ha den. Välj Utför. 8
Spara Välj kvalitet på bilden. Förinställt på Hög, men om du tycker kvaliteten blir dålig välj Mycket hög eller Maximum. Välj alltid att spara bilden som en kopia. När du väljer OK i bildredigeraren, sparas bilden automatiskt som en kopia i sidans katalog. Redigera bilden i filhanteraren Om du ska länka in bilden i en bildväljare måste du först redigera bilden i filhanteraren. Högerklicka på bilden och välj Redigera. Samma dialogruta öppnas och du kan Beskära och Ändra storlek. 9
Spara bild i filhanteraren Om du redigerar bilden från filhanteraren, behöver du välja hur du ska spara. Välj alltid Spara som och ange ett nytt namn på bilden. Flytta filer mellan olika mappar Markera de filer du vill flytta. Håll ned CTRL om du vill markera fler. Högerklicka och välj Klipp ut. Navigera till den mapp där du vill placera filerna. Högerklicka och välj Klistra in. I tidigare versioner av EPiServer CMS kunde man inte flytta bilder och dokument mellan mappar utan att länkarna bröts. Det kan man in EPiServer CMS 5. 10
Veta mer? Läs mer i manualen för EPiServer CMS. http://world.episerver.com/documentation/items/manuals/ep iserver-cms/editor-manuals---episerver-cms-5-r2/ Läs kapitlet Arbeta med bilder, från sidan, 36. Läs kapitlet om Filhantering, från sidan, 63. GIMP GIMP är ett bildredigeringsprogram som är gratis (open source). Det klarar av relativt avancerade moment, om man jämför med många andra gratisvarianter. Vi ska titta på hur man kan jobba med bilder som man själv tagit med sin digitalkamera. 11
Fönstret Meny rad Verktygslåda Färgväljaren Lager En öppen bild med maximerat fönster. Penslar Inställningar för valt v erktyg Zoom Redigera mindre bra bilder När jag tagit bilder som jag inte är nöjd med brukar jag alltid titta på ändra något av följande värden. Nivåer om bilden är för mörk eller ngt ljus. Kontrast om bilden känns platt. Färg om jag fått ett färgstick, väldigt vanligt med mycket rött i bilden. Röda ögon om jag tagit med blixt och någon person har röda ögon. 12
Nivåer Nivåer används för att justera ljushet och mörkhet i bilden. Välj Färg Nivåer Histogrammet ska spridas över hela skalan för att ett bra värde. Dra i reglagen och glöm inte förhandsgranskningen. Lite mer avancerat kan man jobba med kurvor. Kontrast Ljusstyrka och kontrast använder man för att få ett bättre djup i bilden. Välj Färg Ljustyrka- Kontrast Ofta ökar man kontrasterna. Dock inte för mycket, får då ser bilden bränd ut. 13
Färgbalans Röda eller Blå färgstick är väldigt vanliga i bilder. Välj Färg Färgbalans Ta bort dem genom att minska rött eller blått, beroende på vilket stick du fått. Oftast ska du justera mittentoner. Nyans/Mättnad är lite mer avancerat Före/Efter 14
Röda ögon Markera gärna ögonen för bästa resultat. Välj Filter Förbättra Ta bort röda ögon. Ändra tröskelvärde om det röda inte försvinner. Beskära Välj Beskäringsverktyget Dra en ruta över det du vill behålla. Justera tills du är nöjd. Klicka för att bekräfta. 15
Ändra storlek Välj Bild Skala bild Skriv in bildens bredd Se till att länkverktyget mellan höjd och bredd är aktiv. Välj alltid Kubisk Interpolation. Välj Skala. Spara för webben Välj Arkiv Spara som Välj ett namn Välj en mapp Klicka på plusset framför filtyp och välj JPEG-bild. Välj Spara. Välj kvalitet mellan 60-90. Välj Spara. 16
Skapa en bild utifrån färdigt format Det är ganska vanligt att det inte räcker med att beskära eller ändra storlek på en bild. Det händer bland annat om den bild man har är en liggande bild, fast man själv tänkt göra en stående, eller tvärtom. Då måste vi istället börja med det färdiga måttet och anpassa innehållet i bilden efter det. I det här exemplet vill jag göra en stående bild till en liggande. Skapa en ny bild Välj Arkiv - Skapa ny... Skriv in måtten på bilden. Om du vill Välj upplösning = 72 RGB-färg Vit bakgrundsfärg/transparent 17
Öppna bilden du vill använda Välj Arkiv Öppna som lager Leta reda på bilden på din dator eller nätverket Välj Öppna. Bilden öppnas som ett nytt lager i den bild som du nyss skapade. Ändra storlek på lager Ofta är det lagret för stort, då kan du minska det. Om det är för litet, behöver du välja en annan bild. Välj Skalningsverktyget i verktygslådan. Dra och släpp tills du är nöjd. Håll ned CTRL för att behålla proportioner. Zooma bilden om du inte ser hela lagret. Välj Skala. 18
Flytta lagret i bilden Placera motivet där du vill i bilden genom att använda Flyttverktyget som du hittar i verktygslådan. Dra släpp lagret som det passar. Ta bort hårda kanter Använd Suddningsverktyget för för att bort hårda kanter. Välj en pensel med suddig kant. Välj en stor skala. Sudda lite i kanten genom att dra och släppa. 19
Kanske lite text på den tomma ytan Välj Textverktyget i verktygslådan. Dra en ruta där du vill ha din text. Gör inställningar för typsnitt, storlek, färg m.m. i verktygslådan. Skriv din text i textredigeraren. Välj Stäng. Spara bilden och lägg ut den på sidan Välj Arkiv Spara som Välj ett namn Välj en mapp Klicka på plusset framför filtyp och välj JPEG-bild. Välj Spara. Välj kvalitet mellan 60-90. Välj Spara. Ladda upp bilden i EPiServer och lägg in den sidan. 20