Ö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 http://pixlr.com/editor/. Svensk version. Observera att Pixlr:s menyer visas högst upp i webbläsarens fönster. Önskat språk väljer du i menyn Språk. 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 (Beskärningsverktyg ). I övre delen av programmets fönster visas två rutor där du kan skriva in önskad storlek. Välj Output size och skriv in storleken 200 och 600 2012-10-02 Rune Körnefors (rune.kornefors@lnu.se) 1

Lägg på en logotyp Klicka sedan i bilden och dra en rektangel, för att markera den yta som visas i ovanstående figur. Det går att dra rektangeln och ändra storlek på den, även efter det att du ritat den. Den ska gå från övre till nedre kanten av fönstret och rama in glaspiporna. 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 (Zoomverktyg ) 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 (Redigera->Markera allt) och kopiera (Redigera->Kopiera). Gå över till fönstret med bilden med piporna och klistra in (Redigera->Klistra in). Bilden med logon hamnar då i ett lager ovanför den andra bilden. Välj förflyttningsverktyget (Flyttningsverktyg ) 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ö ). Skriv in 60 i rutan för Tolerans i den övre delen av programmets fönster. Se också till att Anti-alias är valt och att Angränsande inte är valt. Det sista valet gör att det inte bara är angränsande pixlar som väljs, utan alla pixlar med den färg som du sedan klickar på. Klicka någonstans i den gröna ytan i bilden, för att markera ytan och alla andra pixlar med samma färg. Därefter väljer du Redigera->Klipp ut (eller trycker på backstegstangenten), för att ta bort markerad del. Välj sedan Redigera->Avmarkera allt, för att ta bort markeringen. Om du använder 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 Arkiv->Spara... I fönstret som du då får ser till att formatet är JPEG och väljer kvalitet 50. Använd bilden i CSS- mallen Klicka sedan på OK och spara bilden med namnet navbar.jpg i mappen pics. Vill du även spara bilden i Pixlr-format, för att kanske sedan redigera den vidare, så väljer du kommandot Arkiv->Spara... och formatet PXD. Slutligen ska du se till att bilden importeras som bakgrund till navigeringskolumnen. Öppna filen style.css i din editor för HTML och CSS. 2012-10-02 Rune Körnefors (rune.kornefors@lnu.se) 2

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 (Färgväljarverktyg ) 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. I högra halvan i det fönstret finns det en ruta där färgkoden står i fältet markerat med # (t.ex. 3c3a34). Kopiera detta värde och klicka sedan på Avbryt 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. 3. Gradient bakgrundsfärg för sidans innehåll 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). 2012-10-02 Rune Körnefors (rune.kornefors@lnu.se) 3

Skapa ett nytt bilddokument Skapa ett nytt dokument som är 1000x20 pixlar i ditt bildredigeringsprogram. Välj Arkiv->Ny bild... I fönstret som då dyker upp väljer du storleken 1000 och 20 för bredd respektive höjd.. 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). Välj verktyget för gradient färg (Gradientverktyg ). I programfönstrets överkant visas inställningar för verktyget. Klicka på färgrutan för Gradient. Du får då en ruta med ett antal mönster. I den övre delen finns två "pilar". I den första är det vit färg och den andra svart färg. Klicka på den högra pilen, så kommer dess färg ner i rutan för Färg. Klicka i färgrutan. Skriv in koden FFAA00 i rutan markerad med #. Klicka sedan på OK. Klicka utanför rutan med alla mönster, så att den döljs. Peka i bildens mitt och tryck ned musknappen. Dra sedan åt höger till högerkanten och släpp 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 Arkiv->Spara... Välj formatet JPEG och kvalitet 80. Klicka sedan på OK och spara bilden med namnet bg.jpg i mappen pics. 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 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). Bilden tas in som en bakgrundsbild och upprepas i y-led så att hela ytans höjd fylls. 2012-10-02 Rune Körnefors (rune.kornefors@lnu.se) 4

Ö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);} 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. 2012-10-02 Rune Körnefors (rune.kornefors@lnu.se) 5

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 o Gör bilden ljusare mindre bildfil. Men nu handlar det alltså om en bild som ska få en transparant bakgrund. Pixlr: 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 (Beskärningsverktyg ), för att skära ut den del som du ska ha. Sätt storleken till 500 både för höjd och bredd. Klicka i bilden och dra en markering, 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 (Zoomverktyg ), så att du ser bilden i 100%. Eventuellt förstorar du även fönstret, så att du ser hela bilden. Bilden är ganska mörk, så gör den nu ljusare. Välj Justeringar->Ljushet & Kontrast... I fönstret som dyker upp drar du i reglagen för att ändra ljushet och kontrast. Gör bilden ljusare, ungefär +15. Kontrasten kan du dra ner något, ungefär -5. Klicka sedan på OK. 2012-10-02 Rune Körnefors (rune.kornefors@lnu.se) 6

Ta bort bildens bakgrund Du ska nu sudda ut 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 radergummit (Suddningsverktyg ). Det är kanske för stort, så i fönstrets överkant klickar du på siffran med en pil under. Du får då en ruta, där du kan välja en annan storlek, t.ex. 15. Sudda sedan i bilden de delar som ligger runtom handen och verktyget. 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. Börja med att skapa ett lager med transparent bakgrund och ta sedan bort den vita ytan i bilden. Skapa ett nytt lager med Lager->Nytt lager. 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 (Trollspö ). 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 Angränsande ä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 Redigera->Klipp ut (eller tryck på backstegstangenten), för att ta bort den markerade delen. o Upprepa det, så att båda de vita ytorna tas bort. 2012-10-02 Rune Körnefors (rune.kornefors@lnu.se) 7

Nu ska du skapa en mjuk övergång till handen och verktyget. Spara bilden för användning på webben Välj markeringsverktyget ( ) i verktygspaletten. I fönstrets övre kant klickar du på den elliptiska markeringen. I rutan för Feather skriver du in 20. 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 Redigera->Invertera markeringen, för att ändra så att det är ytan utanför cirkeln som är markerad. Välj Redigera->Klipp ut (eller tryck ned backstegstangenten) för att ta bort den markerade ytan. Välj sedan Redigera->Avmarkera allt. Du har nu fått en mjukare övergång till handen och glaspipan. Bilden ska nu sparas i formatet png, så att den transparenta delen behålls. Välj Arkiv->Spara... Välj formatet PNG och klicka på OK. 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 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. Gör haven transparenta Gör på samma sätt som i föregående övning, dvs skapa ett nytt tomt lager och lägg det underst. Ta sedan bort det som ska vara genomskinligt i kartan. Skapa lagret med Lager->Nytt lager. Dubbelklicka på hänglåset i bakgrundslagret (med kartan), för att låsa upp det. Dra lagret med kartan uppåt, så att det ligger överst. 2012-10-02 Rune Körnefors (rune.kornefors@lnu.se) 8

Välj markeringsverktyget (Trollspö ). Klicka bort markeringen av Angränsade i den övre delen av programmets fönster. Då blir det inte bara pixlar som angränsar till varandra som markeras, utan alla pixlar i bilden med den färg som du klickar på. Klicka i den gröna ytan på kartan, för att markera alla gröna pixlar. Välj Redigera->Invertera markeringen, för att istället markera allt utom de gröna pixlarna. Ta bort markerade pixlar genom att välja Redigera->Klipp ut (eller tryck ned backstegstangenten). Ta inte bort markeringen. Den behövs i nästa steg, så låt den vara kvar. Byt ut den gröna färgen i kartan Nu ska du byta kartans färg till en mörkbrun färg. Välj Redigera->Invertera markeringen, för att växla om till den gröna ytan igen. Klicka i den stora färgade (eller svarta) rutan längst ner i verktygspaletten. Välj en mörkbrun färg. Observera att du måste dra i de runda prickarna både i den omgivande cirkeln och den inre romben, för att välja färg. Klicka på OK, då du hittat den färg du vill ha. Välj penseln (Målarpenselverktyg ) i verktygspaletten. Peka på bilden och tryck ned musknappen. Håll den nedtryckt och måla över hela kartan. Det är endast den markerade delen som målas, dvs den del som var grön. Välj Redigera->Avmarkera allt, för att ta bort markeringen. Spara bilden för användning på webben Bilden ska nu sparas i formatet png, så att den transparenta delen behålls. Välj Arkiv->Spara... Välj formatet PNG och klicka på OK. Spara sedan bilden med namnet europe.png i mappen pics. Se hur bilden blir på webben 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. 2012-10-02 Rune Körnefors (rune.kornefors@lnu.se) 9

6. Bilden med formning av glasfot Medieteknik 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). 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. Välj markeringsverktyget ( ) i verktygspaletten. I fönstrets övre del väljer du ellipsen och Constraint till Aspect ratio. Förminska bilden Då kommer markeringen att bli en cirkel. 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. Hamnar inte cirkeln rätt, så kan du peka i den och dra den till önskad plats. Kopiera den markerade delen med Redigera->Kopiera. Denna del ska sedan klistras in efter det att hela bilden förminskats. Förminska hela bilden till 600x450 pixlar. Välj Bild->Bildstorlek... I fönstret som dyker upp skriver du in 600 i den övre rutan för Bredd (450 fylls då i automatiskt i rutan för Höjd, om Behåll proportionerna är markerad). Klicka sedan på OK. Förstora bilden till 100% med förstoringsglaset (Zoomverktyget ) och, om det behövs, förstora fönstret så att hela bilden syns. 2012-10-02 Rune Körnefors (rune.kornefors@lnu.se) 10

Klistra in den kopierade delen Nu ska du klistra in den del som du tidigare kopierade och anpassa dess storlek och placering. Välj Redigera->Klistra in. Delen med glasfoten kommer in i ett nytt lager. Ändra storlek. Välj Redigera->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å klickar du utanför den markerade ytan. Svara Yes i den dialogruta som kommer upp, för att bekräfta 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. Lagret med cirkeln är markerat i Lagerpanelen (längst till höger i fönstret). I underkanten av panelen finns det några små knappar. Klicka på den tredje av dessa (Layer styles ). Då dyker det upp ett fönster med några val. Välj Outer glow, så får du också några reglage. Om reglagen inte dyker upp, får du kanske klicka en gång till på Outer glow. Klicka inte bara i rutan, utan på texten. Klicka på färgrutan och välj vit färg. Dra sedan i reglagen, så att storleken blir c:a 30 och opaciteten 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 Arkiv->Spara... Välj formatet JPEG och dra ner reglaget för kvalitet till 50. Spara bilden med namnet glasfot.jpg i mappen pics. Ifall du vill fortsätta och redigera bilden senare, spara du även bilden i PXDformat med Arkiv->Spara... 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 Bild->Bildstorlek... Skriv in 100 i rutan för Bredd och klicka på OK. Välj Arkiv->Spara... Välj formatet JPEG och kvalitet 30. Spara bilden med namnet glasfot_liten.jpg i mappen pics. 2012-10-02 Rune Körnefors (rune.kornefors@lnu.se) 11

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