Övningar i bilder och färger

Övningar i bilder och färger I dessa övningar ska du öva på att redigera några bilder för att anpassa dem till en webbplats. Bilderna kommer att beskäras på olika sätt, förändras i färguppsättning och konverteras till format som jpeg och png som används på webben. Bilderna ska användas som bakgrunder och illustrationer på en webbplats i HTML- och CSS-kod. Vi tittar också på hur vi sätter bakgrundsfärg. Instruktionerna gäller för Photoshop CS6 (engelsk version), men fungerar även för tidigare versioner. 1. Studera innehållet i mappen I denna övning ska du orientera dig i det material som du ska använda. Om du ännu inte laddat ner materialet från laborationens sida, så börjar du med det. Gå igenom mappen glaswebb I mappen finns: o två HTML-dokument (index.htm och about.htm) Dessa är strukturerade med div-taggar i två avdelningar för navigering och innehåll. Öppna HTML-dokumenten i din editor för att se koden. Öppna dem också i webbläsaren för att se hur de visas där. HTML-koden innehåller också img-taggar för några bilder, men dessa kan ännu inte visas. Bilderna ska du skapa i de följande övningarna. Istället visas nu texten i alt-attributet. o ett CSS-dokument (style.css) Detta innehåller kod för att skapa sidornas layout och en del andra stilinställningar. Öppna dokumentet i editorn för att se koden. I övningarna ska du sedan komplettera denna kod med att ta in ett par bakgrundsbilder. o en mapp kallad pics I denna mapp ska du lägga de bilder som du skapar i övningarna. o en mapp kallad originalbilder I denna mapp ligger de bilder som du ska utgå ifrån i övningarna. 2. Bakgrundsbild för navigeringskolumnen I denna övning ska du utgå från bilden pipor.jpg och skapa en bild som dels ger en bakgrund till navigeringslänkarna och dels en illustration av webbplatsens innehåll. Bilden ska beskäras och förses med en logotyp. Bilden ska användas som bakgrund till blocket nav. I CSS-filen är bredden på detta satt till 200 pixlar. Lagom höjd på bilden kan vara 600 pixlar, sedan kommer resten att fyllas ut med lämplig bakgrundsfärg. Bilden ska bli som vidstående bild (visas här förminskad). Beskär och förminska bilden Öppna filen pipor.jpg i ditt bildredigeringsprogram. Du ska nu beskära bilden och samtidigt förminska den till önskad storlek. Välj verktyget för att beskära (Crop Tool ). I övre vänstra hörnet av programmets fönster visas två rutor där du kan skriva in önskad storlek. Skriv in storleken 200px och 600px (Obs! viktigt att du inte glömmer enheten px) 2012-10-02 Rune Körnefors (rune.kornefors@lnu.se) 1

Lägg på en logotyp En ruta visas över bilden. Peka i den och tryck ned musknappen. Dra sedan bilden i sidled till önskad position. Försök markera ungefär samma del som i ovanstående bild. Dubbelklicka i rutan, för att bekräfta markeringen. Då beskärs bilden och förminskas till den valda storleken. Dubbelklicka sedan på förstoringsglaset (Zoom Tool ) i verktygspaletten, för att visa bilden i 100% storlek i fönstret. Öppna även filen logo.jpg i ditt bildredigeringsprogram. Kopiera hela bilden och klistra in den i din bild med piporna. Markera allt (Select->All) och kopiera (Edit->Copy). Gå över till fönstret med bilden med piporna och klistra in (Edit->Paste). Bilden med logon hamnar då i ett lager ovanför den andra bilden. Välj förflyttningsverktyget (Move Tool ) och dra bilden till önskad plats (c:a en halv centimeter från vänster- och överkanten). Ta bort den gröna färgen i logon. Välj markeringsverktyget "trollspöt" (Magic Wand ). Verktyget ligger på samma plats som ett annat som ser nästan likadant ut. Tryck ned musknappen över verktyget, så att en popupmeny dyker upp och se till att du väljer rätt verktyg. Skriv in 30 i rutan för Tolerance i den övre delen av programmets fönster. Se också till att Anti-alias är valt. Klicka någonstans i den gröna ytan i bilden, för att markera ytan. Välj menykommandot Select->Similar, för att markera alla gröna pixlar. Därefter väljer du Edit->Cut (eller trycker på backstegstangenten), för att ta bort markerad del. Välj sedan Select->Deselect, för att ta bort markeringen. Om du inte använder Photoshop, utan ett bildredigeringsprogram som inte har olika lager, så behöver du ta bort den gröna färgen innan du flyttar över logon till bilden med piporna. Du kan då i bilden med logon markera den gröna färgen. Sedan väljer du att invertera markeringen, så att logons text markeras. Kopiera därefter logon och klistra in den i bilden med piporna. Spara bilden för användning på webben Bilden ska nu sparas i jpeg-format. Detta är ett format som komprimerar bilden och man får då välja kvalitét. Komprimerar man mycket, så blir filstorleken liten, men kvalitén på bilden blir kanske dålig. Vill man ha mycket hög kvalitét, så blir kanske filen istället onödigt stor. Så man får kompromissa. Välj File->Save for Web... I fönstret som du då får kan du med "flikar" i överkanten välja hur du vill se bilden. Välj 2-Up, så kan du både se originalbilden och hur den kommer att bli i det format du ska spara i. I högra delen av fönstret väljer du formatet jpeg i en popupmeny. I menyn därunder kan du välja kvalitét. Prova att välja de olika värdena (Low, Medium, etc.). Studera bildens kvalitét och se samtidigt informationen under den om hur pass stor bildfilen kommer att bli. 2012-10-02 Rune Körnefors (rune.kornefors@lnu.se) 2

Använd bilden i CSS- mallen Till höger om menyn finns ett värde för kvalitéten och en knapp med en pil. Klickar du på den knappen får du ett reglage som du kan dra till vänster och höger för att förändra kvalitén. Dra den till värdet 50, så får du i detta fall tillräcklig kvalité och en ganska liten fil. Klicka sedan på Save och spara bilden med namnet navbar.jpg i mappen pics. Vill du även spara bilden i Photoshop-format, för att kanske sedan redigera den vidare, så väljer du kommandot File->Save As... I fönstret som du då får väljer du lämpligt namn och plats för bilden och ser till att formatet Photoshop är valt innan du klickar på Save. Slutligen ska du se till att bilden importeras som bakgrund till navigeringskolumnen. Öppna filen style.css i din editor för HTML och CSS. I stilen för #nav lägger du till följande: #nav {... background-image:url(pics/navbar.jpg); background-repeat:no-repeat;} o Bilden används då som bakgrundsbild. Den ska inte repeteras, utan endast tas med en gång. o Punkterna markerar här de inställningar som redan står i stilen. Dessa låter du vara kvar som de är. Öppna filen index.htm i webbläsaren och studera resultatet. o Har du tillräckligt stort fönster i din webbläsare (mer än 600 pixlar högt), så ser du att den grå bakgrundsfärgen som finns med i stilen för #nav kommer under bilden, för att fylla ut hela fönstrets höjd. Denna grå nyans är dock lite för ljus, så du ska nu byta till samma grå färg som finns längst ner i bilden. Gå över till ditt bildredigeringsprogram och ifall du hade stängt bildfönstret, öppnar du din bild igen. Ta reda på färgkoden för den grå nyansen längst ner. Välj färgpipetten (Eyedropper Tool ) och klicka i den grå ytan längst ner i bilden. Färgen som du klickar på kommer då in i verktygspalettens färgruta. Klicka på denna färgruta, så får du ett fönster för färginställning. Längst ner i det fönstret finns det en ruta där färgkoden står (t.ex. 3c3a34). Kopiera detta värde och klicka sedan på Cancel för att stänga fönstret igen. Gå över till CSS-filen i editorn igen och byt bakgrundsfärg för #nav: #nav {... background-color:#3c3a34;...} o Klistra alltså in den kod som du hade kopierat. Studera resultatet i webbläsaren. o Nu blir färgutfyllnaden bättre. Du kanske också noterat att navigeringslänkarna hamnar ovanför logon. Det ska nu justeras. Lägg till följande kod i stilen för #nav ul: #nav ul {... margin-top:150px;} o Detta ger listan med navigeringslänkarna en övre marginal på 150 pixlar. Eventuellt får du justera värdet, beroende på var du placerade logon i din bild. Studera resultatet i webbläsaren. 2012-10-02 Rune Körnefors (rune.kornefors@lnu.se) 3

3. Gradient bakgrundsfärg för sidans innehåll Medieteknik Du ska nu skapa en bakgrund som gradvis övergår från vitt till samma orange färg som du har i glasugnen på föregående bild. Vi kommer här att titta på två alternativ för detta. Det första alternativet är att använda en bakgrundsbild och det andra alternativet är att använda gradient CSS-stil. Bakgrundsbild Bilden ska göras som en smal remsa (1000 pixlar bred och 20 pixlar hög) som ska upprepas på webbsidan. Bilden ska bli som nedanstående bild (visas här förminskad). Skapa ett nytt bilddokument Skapa ett nytt dokument som är 1000x20 pixlar i ditt bildredigeringsprogram. Välj File->New... I fönstret som då dyker upp väljer du enheten pixels för Width och Height och fyller sedan i värdena 1000 respektive 20. För Resolution väljer du 72 Pixels/inch. Se också till att Color Mode är valt till RGB Color. Klicka därefter på OK, så får du en ny tom bild. Fyll med ett gradient mönster Du ska nu göra en gradient övergång från en vit färg i vänsterkanten till en orange färg i högerkanten. Den orange färgen sätter vi till koden FFAA00 (som ungefär är färgen för en av de ljusa nyanserna i glasugnen). Klicka på färgrutan för förgrundsfärg i verktygspaletten, den främre rutan. I fönstret som dyker upp drar du den runda pricken, i den stora färgade rutan, längst upp till vänster, för att välja vit färg. Alternativt skriver du in FFFFFF i rutan för färgkoden längst ner i fönstret. Klicka sedan på OK. Klicka sedan på den bakre färgrutan för bakgrundsfärg. Skriv in koden för den orange färgen, FFAA00. Klicka på OK. Välj verktyget för gradient fyllning (Gradient Tool ) i verktygspaletten. Detta ligger kanske dolt bakom verktyget med färghinken. Tryck i så fall ner musen över den, så poppar det upp en liten meny, där du kan välja det verktyg du vill ha. Peka i bildens mitt och tryck ned musknappen. Dra sedan åt höger till högerkanten. Se till att den linje som visar hur du drar är vågrät (du kan hålla ner shift-tangenten samtidigt som du drar). Släpp sedan upp musknappen. Bilden fylls då med ett gradient mönster. Spara bilden för användning på webben Bilden ska nu sparas i jpeg-format. Välj File->Save for Web... I fönstret som dyker upp kan du behöva dra bilden åt vänster för att du ska se det "gradienta" mönstret. Välj formatet jpeg. I detta fall räcker nog kvalitén Medium (Quality 30). Klicka sedan på OK och spara bilden med namnet bg.jpg i mappen pics. 2012-10-02 Rune Körnefors (rune.kornefors@lnu.se) 4

Använd bilden i CSS- mallen Nu ska du använda bilden som en bakgrundsbild på webbsidorna. Öppna filen style.css i din editor. Längst ner i filen lägger du till följande: #main {background-image:url(pics/bg.jpg); background-repeat:repeat-y;} o Det finns visserligen redan en stil för #main i filen, men det går bra att lägga till en ny. Båda kommer att användas tillsammans av webbläsaren (CSS är ju en kaskad av stilar). o Bilden tas in som en bakgrundsbild och upprepas i y-led så att hela ytans höjd fylls. Öppna filen index.htm i webbläsaren och studera resultatet. o Om du har ett brett fönster i din webbläsare (bredare än 1200 pixlar), så ser du att det är ett vitt utrymme till höger om den gradienta bakgrunden. Det beror på att bakgrundsfärgen för body är satt till vit färg i CSS-filen. Du ska nu lägga till en gul bakgrundsfärg för #main. Lägg till följande i din nya stil för #main i CSS-filen: #main {background-image:url(pics/bg.jpg); background-repeat:repeat-y; background-color:#ffaa00;} o Färgen sätts till den färg som den gradvisa övergången slutar med. Studera resultatet i webbläsaren. Gradient bakgrundsfärg i CSS Vi ska nu se på ett alternativt sätt att få en gradient bakgrund, genom att använda inställningar i CSS. Detta ingår i CSS3, men är ännu inte standardiserat och implementerat på samma sätt i webbläsarna. Så därför får man använda många olika koder, för att det ska fungera i alla (vanliga) webbläsare. Vi ska här utgå från ett exempel som finns på följande url: http://www.impressivewebs.com/css3-linear-gradient-syntax/ Kod i CSS- filen Skriv in följande kod för #main i CSS-filen: #main {/*background-image:url(pics/bg.jpg); background-repeat:repeat-y; background-color:#ffaa00;*/ /* Gradient background, as described at http://www.impressivewebs.com/css3-linear-gradient-syntax/ */ background:-moz-linear-gradient(left,#fff,#f80); /* FF 3.6+ */ background:-ms-linear-gradient(left,#fff,#f80); /* IE10 */ background:-webkit-gradient(linear,left,right, color-stop(0%,#fff),color-stop(100%,#f80)); /* Safari 4+, Chrome 2+ */ background:-webkit-linear-gradient(left,#fff,#f80); /* Safari 5.1+, Chrome 10+ */ background:-o-linear-gradient(left,#fff,#f80); /* Opera 11.10 */ filter: progid:dximagetransform.microsoft.gradient(gradienttype=1, startcolorstr='#ffffff',endcolorstr='#ff8800'); /* IE6 & IE7 */ -ms-filter: "progid:dximagetransform.microsoft.gradient(gradienttype=1, startcolorstr='#ffffff',endcolorstr='#ff8800')"; /* IE8+ */ background:linear-gradient(left,#fff,#f80);} 2012-10-02 Rune Körnefors (rune.kornefors@lnu.se) 5

o Omge den gamla koden med /* och */. Då kommenterar vi bort den, men den finns ändå kvar, ifall vi vill återgå till den. o Den nya koden börjar med en kommentar där vi hänvisar till källan. Det är för att visa att det inte är vi som skapat koden, utan att vi utgått från en annan kod. Det är också för att visa hänsyn till den som skapat den ursprungliga koden. o Sedan följer ett antal alternativa koder för att skapa en gradient färg från vit till orange färg. Det är den sista koden som är den som är föreslagen som korrekt kod i CSS3. Studera resultatet i webbläsaren. Jämförelse av de båda sätten Vi har nu sett två olika sätt att skapa en liknande effekt. Men det finns en del skillnader. Gradient bakgrund med bild: o Det kräver att vi skapar en bild och att webbläsaren måste läsa in bilden. Det blir ytterligare en fil att läsa in, vilket kan vara en nackdel i mobila enheter med långsam nätanslutning. o Vi är friare i hur den gradienta övergången ska ske. I detta exempel börjar vi med en helvit bakgrund, som i mitten av sidan övergår till en orange bakgrund. Gradient bakgrund med CSS: o Vi slipper någon extra fil som ska läsas in. o Den gradienta övergången sker i hela det block där den finns, så vi kan inte bestämma var i blocket den ska ske. 4. Bilden med glasformning på startsidan Nu ska du skapa en bild som ska användas som illustration på startsidan. Du ska utgå från bilden formning.jpg och ta bort bakgrunden i den, förminska den och spara den i png-format med en transparant (genomskinlig) bakgrund. Bilden ska bli som vidstående bild (visas här förminskad). Beskär och förminska bilden Öppna bilden formning.jpg i ditt bildredigeringsprogram. Beskär bilden, så att du endast får med handen och verktygen. Förminska sedan bilden så att den blir 500 pixlar bred. o På webbsidan ska den vara ännu mindre, men den sista förminskningen gör vi i webbläsaren. Detta ska vara en bild med en transparant bakgrund och då kan den bli lite hackig i kanterna. För att minimera denna effekt, förminskar vi den lite även då vi tar in den i webbläsaren. Om det inte är en transparant bild, så är det bättre att förminska den till önskad storlek i bildredigeringsprogrammet. Då får vi dels en bättre kvalitet och dels en mindre bildfil. Men nu handlar det alltså om en bild som ska få en transparant bakgrund. o Photoshop: Dessa moment har du utfört tidigare för de andra bilderna i övningarna, så här ges endast korta förklaringar. Använd verktyget för att beskära (Crop Tool ), för att skära ut den del som du ska ha. Sätt storleken till 500 px både för höjd och bredd. Du får en ruta där du dels drar i bilden för att placera rutan rätt och dels drar i hörnen, för att minska den till önskad del av bilden. Markera en del så att du endast får med handen och verktyget. Dubbelklicka sedan i rutan, för att utföra beskärningen. Förstora bilden med förstoringsglaset (Zoom Tool ), så att du ser bilden i 100%. Eventuellt förstorar du även fönstret, så att du ser hela bilden. 2012-10-02 Rune Körnefors (rune.kornefors@lnu.se) 6

Gör bilden ljusare Bilden är ganska mörk, så gör den nu ljusare. Välj Image->Adjustments->Brightness/Contrast... I fönstret som dyker upp drar du i reglagen för att ändra ljushet och kontrast. Gör bilden mycket ljusare, ungefär +100. Kontrasten kan du dra ner något, ungefär -15. Klicka sedan på OK. Ta bort bildens bakgrund Du ska nu markera och ta bort bakgrunden i bilden, så att endast handen och verktygen återstår. o Det kan vara ganska pilligt och tidskrävande arbete med att ta bort bakgrunden. Då du tar bort bakgrunden i bilden får du en vit bakgrund, som sedan ska göras genomskinlig så att webbsidans bakgrund lyser igen. Det är viktigt att vara noggrann då du tar bort bakgrunden, annars kan det sedan se hackigt ut då bilden tas in på webbsidan. Då du förstått nedanstående princip för hur man gör, så kan du istället öppna filen formning_avmaskad.jpg och utgå från den, för att spara tid i övningen. Välj verktyget för snabbmarkering (Quick Selection Tool ) i verktygspaletten. Det ligger på samma plats som trollspöt, så tryck ner musknappen och välj rätt verktyg i popupmenyn. Klicka sedan i den grå ytan ovanför glasformen i bilden. Fortsätt att klicka vid sidan av markeringen, för att utöka markeringen. Fortsätt så tills hela ytan ovanför handen och glasformen är markerade. o Du kanske får med lite av formens skaft eller handen, men det gör inget. Du ska nu justera det. Klicka på knappen för redigering av markeringen (Edit Mask ) längst ner i verktygspaletten. Det som inte ingår i markeringen färgas rött. Använd penseln (Brush Tool ) och radergummit (Eraser Tool ) för att utöka respektive minska den färgade ytan. På det sättet justerar du markeringen. Bry dig nu endast om ytan ovanför handen och formen. Ytan under handen ska du markera senare. Då du är nöjd klickar du på knappen för redigering av markeringen igen, för att återgå till normalläget. Ta bort den markerade ytan genom Edit->Cut (eller tryck på backstegstangenten). o Dyker det upp en ruta som frågar hur den borttagna ytan ska fyllas, så väljer du White. Välj sedan Select->Deselect för att ta bort markeringen. Upprepa sedan proceduren med den blå delen av bilden och ytan under handen och formen. De sista delarna närmast formen kan vara svåra att markera, så här får du använda radergummit i normalläge och sudda ut bakgrunden. Justera även resten av bilden med radergummit. 2012-10-02 Rune Körnefors (rune.kornefors@lnu.se) 7

Gör en mjuk övergång från bakgrunden till bilden Utgå nu antingen från din egen avmaskade bild eller bilden i filen formning_avmaskad.jpg. Bilden ska nu få en transparent (genomskinlig) bakgrund och samtidigt en mjuk övergång. Detta kräver lite tricks. o Photoshop: Börja med att skapa ett lager med transparent bakgrund och ta sedan bort den vita ytan i bilden. Skapa ett nytt lager med Layer->New->Layer... o I rutan som dyker upp behöver du inte ändra något, utan klicka bara på OK. I lagerpaletten dubbelklickar du på hänglåset till höger i bakgrundslagret, för att låsa upp det. Dra sedan lagret uppåt, så att det hamnar ovanför det nya lagret. Välj markeringsverktyget (Magic Wand ). o I den övre delen av programmets fönster kontrollerar du inställningar för verktyget och ser till att Tolerance är 30 och både Anti-alias och Contiguous är valt. o Det sista alternativet gör att det endast är sammanhängande pixlar som väljs och inte alla med samma färg som du sedan klickar på. Klicka i den vita delen av bilden och välj Edit->Cut (eller tryck på backstegstangenten), för att ta bort den markerade delen. o Upprepa det, så att båda de vita ytorna tas bort. o Ytorna fylls med ett schackmönster som markerar den transparenta ytan i det underliggande lagret. Nu ska du skapa en mjuk övergång till handen och verktyget. Välj det elliptiska markeringsverktyget (Eliptical Marking Tool ) i verktygspaletten. Detta ligger högst upp till vänster på samma plats som en del andra markeringsformer, så tryck ned musknappen och välj rätt verktyg i popupmenyn. Peka i bildens övre vänstra hörn, tryck ned musknappen och dra ner till det undre högra hörnet, så att hela bilden markeras med en cirkel. Välj Select->Modify->Feather... Skriv in värdet 20 i rutan som dyker upp och klicka på OK. Välj Select->Inverse, för att ändra så att det är ytan utanför cirkeln som är markerad. Välj Edit->Cut (eller tryck ned backstegstangenten) för att ta bort den markerade ytan. o Välj White som fyllning. Välj sedan Select->Deselect. Du har nu fått en mjukare övergång till handen och glaspipan. 2012-10-02 Rune Körnefors (rune.kornefors@lnu.se) 8

Spara bilden för användning på webben Bilden ska nu sparas i formatet png, så att den transparenta delen behålls. Välj File->Save for Web... Välj formatet PNG-24 i den första popup-menyn. o PNG-24 använder 24 bitar per pixel, vilket gör att vi få miljontals färgnyanser och hög kvalitet, men samtidigt blir bildfilen ganska stor. o Kontrollera att Transparency är valt, annars klickar du på det. I bilden ska du se schackmönstret för den genomskinliga delen. Spara sedan bilden med namnet formning.png i mappen pics. Se hur bilden blir på webben I HTML-filen index.htm finns det redan en img-tagg som tar in bilden på webbsidan, så du behöver nu endast titta på resultatet. Öppna filen index.htm i webbläsaren och studera resultatet. Förminska bilen Bilden ska nu också förminskas i webbläsaren. Öppna filen index.htm i din editor. Skriv in ett width-attribut i img-taggen: <img src="pics/formning.png"... width="350"> Studera resultatet i webbläsaren. 5. Bilden med kartan Du ska nu redigera bilden med Europakartan. Antalet färger i denna ska reduceras till endast två. Färgen för haven ska sedan göras transparent och färgen för landområdena ska väljas till en orange/brun färg som passar till övriga färger i bilderna. Bilden ska bli som vidstående bild (visas här förminskad). Öppna bildfilen Öppna filen europe.png i ditt bildredigeringsprogram. Spara bilden för användning på webben och reducera samtidigt antalet färger Att reducera antalet färger görs i Photoshop enkelt då vi ska spara bilden för webben. Välj File->Save for Web... Välj formatet PNG-8. PNG-8 använder upp till 8 bitar per pixel, vilket betyder att vi har max 256 färgnyanser. I detta fall har vi endast tre färger i bilden, så det är fullt tillräckligt. Vi får också en färgpalett, där vi kan reducera antalet färger och enkelt byta färger. I popup-menyn därunder väljer du Adaptive, för att färgpaletten ska anpassas till bildens färger. I den tredje popup-menyn väljer du No Dither. I detta fall vill vi inte ha någon grynighet i bilden. 2012-10-02 Rune Körnefors (rune.kornefors@lnu.se) 9

Se hur bilden blir på webben I popupmenyn för Colors väljer du hur många färger bilden ska ha. Dra ner värdet till 2. Den svarta färgen försvinner och det återstår endast den blå och den gröna färgen. Nu ska du byta ut den gröna färgen mot en orange/brun färg. Dubbelklicka på den gröna färgrutan i färgpaletten. Du får då ett fönster för färginställning. Du ska välja en färg som är lite mörkare än den färg du använde för den smala bakgrundsbilden. Så börja med att skriva in koden FFAA00 i rutan för färgkoden. I det övre högra hörnet av den stora färgrutan ser du en del av en cirkel. Denna markerar den valda färgen. Klicka någonstans nedanför denna och dra runt markören tills du hittar en färgnyans som verkar bra, t.ex. några centimeter ner och en halv centimeter in från högerkanten, så att du väljer en mörkbrun färg. Klicka sedan på OK. Nu ska du göra den blå färgen transparent. Klicka på den blå färgrutan i färgpaletten. Klicka sedan på den lilla schackmönstrade rutan under färgpaletten, för att markera att den blå färgen ska vara transparent. o I bilden ersätts då den blå färgen med ett schackmönster. Spara bilden med namnet europe.png i mappen pics. I HTML-filen about.htm finns det redan en img-tagg som tar in bilden på webbsidan, så du behöver nu endast titta på resultatet. Öppna filen about.htm i webbläsaren och studera resultatet. 6. Bilden med formning av glasfot I denna övning ska du skapa bilden som visar hur två glasbruksarbetare sätter på en glasfot på ett vinglas. Detaljen med glasfoten ska kopieras och läggas in som en förstoring på bilden. Sedan ska du spara hela bilden som en miniatyr, som ska användas i länken på webbsidan. Bilden ska bli som nedanstående bild (visas här förminskad). 2012-10-02 Rune Körnefors (rune.kornefors@lnu.se) 10

Kopiera delen som ska vara förstorad Öppna filen glasfot.jpg i ditt bildredigeringsprogram. Innan du förminskar bilden, ska du kopiera den del som ska vara förstorad. Förminska bilden Välj det elliptiska markeringsverktyget (Eliptical Marking Tool ) i verktygspaletten. Dra en cirkel runt den del som glasarbetarna arbetar med. Peka vid krysset mellan den vänstra mannens hand och pipan han håller i och dra nedåt tills du ramat in glasfoten. Håll samtidigt ner shift-tangenten, så blir det en exakt cirkel. Kopiera den markerade delen med Edit->Copy. Denna del ska sedan klistras in efter det att hela bilden förminskats. Förminska hela bilden till 600x450 pixlar. Välj Image->Image Size... I fönstret som dyker upp skriver du in 600 i den övre rutan för Width (450 fylls då i automatiskt i rutan för Height, om Constrain Proportions är markerad). Klicka sedan på OK. Förstora bilden till 100% med förstoringsglaset (Zoom Tool ) och, om det behövs, förstora fönstret så att hela bilden syns. Klistra in den kopierade delen Nu ska du klistra in den del som du tidigare kopierade och anpassa dess storlek och placering. Välj Edit->Paste. Delen med glasfoten kommer in i ett nytt lager. Ändra storlek. Välj Edit->Free Transform. Ta tag i ett av hörnen och dra inåt så att bilden förminskas. Håll ner shift-tangenten, så behålls proportionerna. Peka och dra mitt i rutan för att flytta bilden till önskad plats. Då du förminskat och placerat bilden så som visas i den färdiga bilden ovan (fast skuggan visas inte ännu), så dubbelklickar du i den markerade ytan. Då bekräftas den transformering du gjort. Lägg på en skugga på bilden Du ska nu lägga på en "glödande skugga" på bilden i cirkeln. Se till att lagret med cirkeln är markerat i Lagerpanelen (längst till höger i fönstret). Välj Layer->Layer Style->Outer Glow... Då dyker det upp ett fönster med några val. I den övre delen finns en färgruta. Klicka på denna och välj vit färg. 2012-10-02 Rune Körnefors (rune.kornefors@lnu.se) 11

Dra sedan reglagen för Size (i mitten) till c:a 30 och Opacity (i den övre delen) till c:a 60. Klicka sedan på OK. Du har nu fått en "skugga" på den förstorade delen av glasfoten. Spara bilden för användning på webben Bilden ska nu sparas i formatet jpeg. Välj File->Save for Web... Välj formatet jpeg och den kvalité du vill ha (Medium räcker nog för denna bild). Spara bilden med namnet glasfot.jpg i mappen pics. Ifall du vill fortsätta och redigera bilden senare, spara du även bilden i Photoshop-format med File->Save As... Spara en miniatyrbild för länken Du ska nu förminska bilden till en miniatyrbild som du kan ha i länken på webbsidan. Välj Image->Image Size... I fönstret som dyker upp skriver du in 100 i rutan för Width och klickar på OK. Välj File->Save for Web... Välj formatet jpeg och kvalité Low. Spara bilden med namnet glasfot_liten.jpg i mappen pics. Se hur bilden blir på webben I HTML-filen index.htm finns det redan HTML-kod för bilden, så du behöver nu endast titta på resultatet. Öppna filen index.htm i webbläsaren och studera resultatet. Klicka på länken med den lilla bilden. Slut Experimentera nu med att på egen hand förändra bilderna. 2012-10-02 Rune Körnefors (rune.kornefors@lnu.se) 12