Labora&on 7 Färger och bilder för webben övningar i Photoshop

Transkript

1 Labora&on 7 Färger och bilder för webben övningar i Photoshop 1M321 Webbteknik 1, 7,5hp Medieteknik 2015 Rune Körnefors rune.kornefors@lnu.se

2 1. Ladda ner arbetsdokument Till övningarna i denna labora&on finns det en zip- fil som innehåller en mapp med några webbsidor och bildfiler. Länk &ll zip- filen finns på labora&onens webbsida. I mappen (glaswebb) finns: tre HTML- dokument (index.htm, about.htm och course.htm) Öppna HTML- dokumenten i din webbeditor för aw se koden. Öppna dem också i webbläsaren för aw se hur de visas där. HTML- koden innehåller 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- awributet. ew CSS- dokument (style.css) DeWa innehåller kod för aw skapa sidornas layout och en del andra s&linställningar. Öppna dokumentet i webbeditorn för aw se koden. I övningarna ska du sedan komplewera denna kod, genom aw bl.a. ta in ew par bakgrundsbilder. en mapp kallad pics I denna mapp ska du lägga de bilder som du skapar i övningarna. en mapp kallad originalbilder I denna mapp ligger de bilder som du ska utgå ifrån i övningarna.

3 2. Bildredigeringsprogram I dessa övningar ska du öva på aw redigera några bilder för aw anpassa dem &ll en webbplats. Bilderna kommer aw beskäras på olika säw, förändras i färguppsäwning och konverteras &ll format som jpeg och png som används på webben. Bilderna ska användas som bakgrunder och illustra&oner på webbplatsen i HTML- och CSS- kod. Vi &War också på hur vi säwer bakgrundsfärg. Instruk&onerna gäller för Photoshop CS6, engelsk version. Photoshop

4 3a. Bakgrundsbild för navigeringsmenyn I denna övning ska du utgå från bilden pipor.jpg och skapa en bild som dels ger en bakgrund &ll navigeringslänkarna och dels en illustra&on av webbplatsens innehåll. Bilden ska beskäras och förses med en logotyp. Bilden ska användas som bakgrund &ll blocket nav. I CSS- filen är bredden på nav saw &ll 200 pixlar. Lagom höjd på bilden kan vara 600 pixlar, sedan kommer resten aw fyllas ut med lämplig bakgrundsfärg. Bilden ska bli som vidstående bild. Beskär och förminska bilden Öppna filen pipor.jpg i bildredigeringsprogrammet. Välj verktyget för aw beskära (Crop Tool). I övre delen av programmets fönster visas två rutor där du kan skriva in önskad storlek. Skriv in storleken 200px och 600px. Obs! vik&gt aw du inte glömmer enheten px. En ruta visas över bilden. Dra i kanterna för aw justera. Du kan också peka i rutan och dra bilden i sidled &ll önskad posi&on. Försök markera ungefär samma del som i vidstående bild. Dubbelklicka i rutan, för aw bekräda markeringen. Då beskärs bilden och förminskas &ll den valda storleken. Dubbelklicka sedan på förstoringsglaset (Zoom Tool) i verktygspalewen, för aw visa bilden i 100% storlek i fönstret.

5 3b. Bakgrundsbild för navigeringsmenyn Lägg på en logotyp Öppna filen logo.jpg i bildredigeringsprogrammet. Du ska nu kopiera hela bilden och klistra in den i din bild med piporna. Markera allt (Selectà All) och kopiera (Edità Copy). Gå över &ll fönstret (fliken) med bilden på piporna och klistra in (Edità Paste). Bilden med logon hamnar då i ew lager framför den andra bilden. Välj förflywningsverktyget (Move Tool) och dra bilden &ll önskad plats (c:a en halv cen&meter från vänster- och överkanten). Nu ska du ta bort den gröna färgen i logon. Välj markeringsverktyget "trollspö" (Magic Wand). Verktyget ligger på samma plats som ew annat som ser nästan likadant ut. Tryck ned musknappen över verktyget, så aw en popupmeny dyker upp och se &ll aw du väljer räw verktyg. Skriv in 30 i rutan för Tolerans i den övre delen av programmets fönster. Se också &ll aw AnB- alias är valt och aw ConBguous inte är valt. Det sista valet gör aw 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. Då markeras ytan och alla andra pixlar med samma färg. Däreder väljer du Edità Cut (eller trycker på backstegstangenten). Markerad del tas då bort. Välj sedan Selectà Deselect. Då tas markeringen bort.

6 3c. Bakgrundsbild för navigeringsmenyn Spara bilden för användning på webben Bilden ska nu sparas i jpeg- format. DeWa är ew format som komprimerar bilden och man får då välja kvalitét. Komprimerar man mycket, blir filstorleken liten, men kvalitén på bilden blir kanske dålig. Vill man ha mycket hög kvalitét, 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 aw 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 aw välja de olika värdena (Low, Medium, etc.). Studera bildens kvalité och se sam&digt informa&onen under den om hur pass stor bildfilen kommer aw bli. Till höger om menyn finns ew värde för kvalitén och en knapp med en pil. Klickar du på den knappen får du ew reglage som du kan dra &ll vänster och höger för aw förändra kvalitén. Dra den &ll värdet 50, så får du i dewa fall &llräcklig bra 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 aw kanske sedan redigera den vidare, 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 &ll aw formatet Photoshop är valt innan du klickar på Save.

7 3d. Bakgrundsbild för navigeringsmenyn Använd bilden i CSS- mallen Öppna filen style.css i din editor för HTML och CSS. I s&len för nav lägger du &ll följande: background- image:url(pics/navbar.jpg); background- repeat:no- repeat; Bilden används då som bakgrundsbild. Den ska inte repeteras. Öppna filen index.htm i webbläsaren och studera resultatet. Har du &llräckligt stort fönster i din webbläsare (mer än 600 pixlar högt), så ser du aw den grå bakgrundsfärgen som finns med i s&len för nav kommer under bilden, för aw fylla ut hela fönstrets höjd. Denna grå nyans är dock lite för ljus, så du ska nu byta &ll samma grå färg som finns längst ner i bilden. Gå över &ll bildredigeringsprogrammet 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ärgpipewen (Eyedropper Tool) och klicka i den grå ytan längst ner i bilden. Färgen som du klickar på kommer då in i verktygspalewens färgruta. Klicka på färgrutan, så får du ew 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 dewa värde och klicka sedan på Cancel för aw stänga fönstret igen. Gå över &ll CSS- filen i editorn igen och byt bakgrundsfärg för nav: background- color:#3c3a34; Klistra alltså in den kod som du hade kopierat. Studera resultatet i webbläsaren. Lägg &ll följande kod i s&len för nav ul: margin- top:150px; DeWa 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.

8 4a. "Gradient" bakgrundsbild för sidans innehåll Du ska nu skapa en bakgrund som gradvis övergår från viw &ll samma orange färg som du har i glasugnen på föregående bild. Vi kommer här aw &Wa på två alterna&v för dewa. Det första alterna&vet är aw använda en bakgrundsbild och det andra alterna&vet är aw använda gradient CSS- s&l. 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 ea nya bilddokument Skapa ew nyw dokument som är 1000x20 pixlar i bildredigeringsprogrammet. 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 respek&ve 20. För ResoluBon väljer du 72 Pixels/inch. Se också &ll aw Color Mode är valt &ll RGB Color. Klicka däreder på OK, så får du en ny tom bild.

9 4b. "Gradient" bakgrundsbild för sidans innehåll Fyll med ea gradient mönster Du ska nu göra en gradient övergång från en vit färg i vänsterkanten &ll en orange färg i högerkanten. Den orange färgen ska ha 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 verktygspalewen, den främre rutan. I fönstret som dyker upp drar du den runda pricken, i den stora färgade rutan, längst upp &ll vänster, för aw välja vit färg. Alterna&vt 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 verktygspalewen. DeWa 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 miw och tryck ned musknappen. Dra sedan åt höger &ll högerkanten. Se &ll aw den linje som visar hur du drar är vågrät (du kan hålla ner shid- tangenten sam&digt som du drar). Släpp sedan upp musknappen. Bilden fylls då med ew gradient mönster.

10 4c. "Gradient" bakgrundsbild för sidans innehåll Spara bilden för användning på webben Välj Fileà Save for Web... I fönstret som dyker upp kan du behöva dra bilden åt vänster för aw du ska se det "gradienta" mönstret. Välj formatet jpeg. I dewa fall räcker nog kvalitén Medium (Quality 30). 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 &ll följande: main {background- image:url(pics/bg.jpg); background- repeat:repeat- y;} Det finns visserligen redan en s&l för main i filen, men det går bra aw lägga &ll en ny. Båda kommer aw användas &llsammans av webbläsaren (CSS är ju en kaskad av s&lar). Bilden tas in som en bakgrundsbild och upprepas i y- led så aw hela ytans höjd fylls. Öppna filen index.htm i webbläsaren och studera resultatet. Om du har ew brew fönster i din webbläsare (bredare än 1200 pixlar), så ser du aw det är ew viw utrymme &ll höger om den gradienta bakgrunden. Det beror på aw bakgrundsfärgen för body är saw &ll vit färg i CSS- filen. Du ska nu lägga &ll en gul bakgrundsfärg för main. Lägg &ll följande i din nya s&l för main i CSS- filen: background- color:#ffaa00; Färgen säws &ll den färg som den gradvisa övergången slutar med. Studera resultatet i webbläsaren. Ändra fönstrets storlek och se hur det blir i olika storlekar.

11 5a. "Gradient" bakgrundsfärg för sidans innehåll Vi ska nu se på ew alterna&vt säw aw få en gradient bakgrund, genom aw använda inställningar i CSS. DeWa ingår i CSS3, men är ännu inte standardiserat och implementerat på samma säw i webbläsarna. Så därför får man använda ew antal olika koder, för aw det ska fungera i alla (vanliga) webbläsare. Vi ska här utgå från ew exempel som finns på följande url: hwp:// 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;*/ background:- webkit- linear- gradient(le_,#fff,#f80); /* For Safari 5.1 to 6.0 */ background:- o- linear- gradient(right,#fff,#f80); /* For Opera 11.1 to 12.0 */ background:- moz- linear- gradient(right,#fff,#f80); /* For Firefox 3.6 to 15 */ background:linear- gradient(to right,#fff,#f80); /* Standard syntax */ } Omge den gamla koden med /* och */. Då "kommenterar vi bort den", men den finns ändå kvar, ifall vi vill återgå &ll den. Sedan följer ew antal alterna&va koder för aw skapa en gradient färg från vit &ll orange färg. Det är den sista koden som är den som är föreslagen som korrekt kod i CSS3. Jag valde här färgen F80 istället för FA0, som jag hade i bilden i övning 4. Det blir en lite mörkare nyans, vilket jag tyckte passade bäwre. Men ändra gärna &ll den färgnyans du vill ha. Studera resultatet i webbläsaren. Ändra fönstrets storlek och se hur det blir i olika storlekar.

12 5b. Jämförelse av de båda säwen i övning 4a- c och 5a Vi har nu sew två olika säw aw skapa en liknande effekt. Men det finns en del skillnader. Gradient bakgrund med bild: Det kräver aw vi skapar en bild och aw webbläsaren måste läsa in bilden. Det blir ywerligare en fil aw läsa in, vilket kan vara en nackdel i mobila enheter med långsam nätanslutning. Vi är friare i hur den gradienta övergången ska ske. I dewa exempel börjar vi med en helvit bakgrund, som i miwen av sidan övergår &ll en orange bakgrund. Gradient bakgrund med CSS: Vi slipper någon extra fil som ska läsas in. 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.

13 6a. Bilden med glasformning på ingångssidan Nu ska du skapa en bild som ska användas som illustra&on på ingångssidan. 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. Beskär och förminska bilden Öppna bilden formning.jpg i bildredigeringsprogrammet. Du ska nu beskära bilden, så aw du endast får med handen och verktygen. Sedan förminskar du bilden så aw den blir 500 pixlar bred. Dessa moment har du uuört &digare för de andra bilderna i övningarna, så här ges endast korta förklaringar. Använd verktyget för aw beskära (Crop Tool). SäW storleken &ll 500px både för höjd och bredd. Du får en ruta där du dels drar i bilden för aw placera rutan räw och dels drar i hörnen, för aw minska den &ll önskad del av bilden. Markera en del så aw du endast får med handen och verktyget. Dubbelklicka sedan i rutan, för aw uuöra beskärningen. Förstora bilden med förstoringsglaset (Zoom Tool), så aw du ser bilden i 100%. Eventuellt förstorar du även fönstret, så aw du ser hela bilden. På webbsidan ska bilden vara ännu mindre, men den sista förminskningen gör vi i webbsidans kod. DeWa ska vara en bild med en transparant bakgrund och då kan den bli lite "hackig" i kanterna. För aw minimera denna effekt, förminskar vi den lite även då vi tar in den på webbsidan. Om det inte är en transparant bild, så är det bäwre aw förminska den &ll önskad storlek i bildredigeringsprogrammet. Då får vi dels en bäwre kvalitet och dels en mindre bildfil. Men nu handlar det alltså om en bild som ska få en transparant bakgrund.

14 6b- 1. Bilden med glasformning på ingångssidan 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 aw ändra ljushet och kontrast. Gör bilden mycket ljusare, ungefär Kontrasten kan du dra ner något, ungefär Klicka sedan på OK. Ta bort bildens bakgrund Du ska nu sudda ut bakgrunden i bilden, så aw endast handen och verktygen återstår. Det kan vara ganska pilligt och &dskrävande arbete med aw ta bort bakgrunden. Då du tar bort bakgrunden i bilden får du en vit bakgrund, som sedan ska göras genomskinlig så aw webbsidans bakgrund lyser igen. Det är vik&gt aw vara noggrann då du tar bort bakgrunden, annars kan det sedan se hackigt ut då bilden tas in på webbsidan. Då du förståw 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 aw spara &d i övningen. fortsäining på nästa sida

15 6b- 2. Bilden med glasformning på ingångssidan fortsäining från föregående sida Välj verktyget för snabbmarkering (Quick SelecBon Tool) i verktygspalewen. Det ligger på samma plats som trollspöt, så tryck ner musknappen och välj räw verktyg i popupmenyn. Klicka sedan i den grå ytan ovanför glasformen i bilden. FortsäW aw klicka vid sidan av markeringen, för aw utöka markeringen. FortsäW så &lls hela ytan ovanför handen och glasformen är markerade. Du kanske får med lite av formens skad 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 verktygspalewen. Det som inte ingår i markeringen färgas då röw. Använd penseln (Brush Tool) och radergummit (Eraser Tool) för aw utöka respek&ve minska den färgade ytan. På det säwet 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 aw återgå &ll normalläget. Ta bort den markerade ytan genom Edità Cut (eller tryck på backstegstangenten). Dyker det upp en ruta som frågar hur den borwagna ytan ska fyllas, så väljer du White. Välj sedan Selectà Deselect för aw 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 aw markera, så här får du använda radergummit i normalläge och sudda ut bakgrunden. Justera även resten av bilden med radergummit.

16 6c- 1. Bilden med glasformning på ingångssidan Gör en mjuk övergång från bakgrunden Hll bilden Utgå nu an&ngen från din egen avmaskade bild eller bilden i filen formning_avmaskad.jpg. Bilden ska nu få en transparent (genomskinlig) bakgrund och sam&digt en mjuk övergång. DeWa kräver lite tricks. Börja med aw skapa ew lager med transparent bakgrund och ta sedan bort den vita ytan i bilden. Skapa ew nyw lager med Layerà Newà Layer... I lagerpalewen dubbelklickar du på hänglåset &ll höger i bakgrundslagret, för aw låsa upp det. (Det är alltså lagret med bilden.) Dra sedan lagret uppåt, så aw det hamnar ovanför det nya lagret. Välj markeringsverktyget "trollspö" (Magic Wand). I den övre delen av programmets fönster kontrollerar du inställningar för verktyget och ser &ll aw Tolerance är 30 och aw både AnB- alias och ConBguous är valt. Con&guous gör aw det endast är sammanhängande pixlar som väljs och inte alla med samma färg. Klicka i den vita delen av bilden och välj Edità Cut (eller tryck på backstegstangenten). Den markerade delen tas då bort. Upprepa det, så aw båda de vita ytorna tas bort. fortsäining på nästa sida

17 6c- 2. Bilden med glasformning på ingångssidan fortsäining från föregående sida Nu ska du skapa en mjuk övergång &ll handen och verktyget. Välj det ellip&ska markeringsverktyget (ElipBcal Marking Tool) i verktygspalewen. DeWa ligger högst upp &ll vänster på samma plats som en del andra markeringsformer, så tryck ned musknappen och välj räw verktyg i popupmenyn. Peka i bildens övre vänstra hörn, tryck ned musknappen och dra ner &ll det undre högra hörnet, så aw 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 Då ändras markeringen, så aw det är ytan utanför cirkeln som är markerad. Välj Edità Cut (eller tryck ned backstegstangenten). Den markerade delen tas då bort. Välj sedan Selectà Deselect. Du har nu fåw en mjukare övergång &ll handen och glaspipan.

18 6d. Bilden med glasformning på ingångssidan Spara bilden för användning på webben Bilden ska nu sparas i formatet png, så aw den transparenta delen behålls. Välj Fileà Save for Web... Välj formatet PNG- 24 i den första popup- menyn. PNG- 24 använder 24 bitar per pixel, vilket gör aw vi får miljontals färgnyanser och hög kvalitet, men sam&digt blir bildfilen ganska stor. Kontrollera aw 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 &Wa på resultatet. Öppna filen index.htm i webbläsaren och studera resultatet. Förminska bilen Bilden ska nu också förminskas i sidans kod. Öppna filen index.htm i din editor. Skriv in ew width- awribut i img- taggen: <img src="pics/formning.png" alt="glasformning i glasbruk" width="350"> Studera resultatet i webbläsaren. Ändra fönstrets storlek och se aw bilden hela &den ligger i fönstrets högerkant.

19 7. Bilden med kartan Du ska nu redigera bilden med Europakartan. Antalet färger i denna ska reduceras &ll endast två. Färgen för haven ska göras transparent och färgen för landområdena ska väljas &ll en orange/brun färg som passar &ll övriga färger på sidan. Bilden ska bli som vidstående bild. Öppna bildfilen Öppna filen europe.png i bildredigeringsprogrammet. Spara bilden för användning på webben och reducera samhdigt antalet färger AW 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 &ll 8 bitar per pixel, vilket betyder aw vi har max 256 färgnyanser. I dewa fall har vi endast tre färger i bilden, så det är fullt &llräckligt. Vi får också en färgpalew, där vi kan reducera antalet färger och enkelt byta färger. I popup- menyn därunder väljer du AdapBve FärgpaleWen anpassas då &ll bildens färger. I den tredje popup- menyn väljer du No Dither. I dewa fall vill vi inte ha någon grynighet i bilden. I popupmenyn för Colors väljer du hur många färger bilden ska ha. Dra ner värdet &ll 2. Den svarta färgen försvinner och det återstår endast den blå och den gröna färgen. fortsäining på nästa sida

20 7. Bilden med kartan fortsäining från föregående sida 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ärgpalewen. Du får då ew 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 aw 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 &lls du hiwar en färgnyans som verkar bra, t.ex. några cen&meter ner och en halv cen&meter in från högerkanten, så aw 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ärgpalewen. Klicka sedan på den lilla schackmönstrade rutan under färgpalewen, för aw markera aw den blå färgen ska vara transparent. I bilden ersäws då den blå färgen med ew schackmönster. Spara 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 &Wa på resultatet. Öppna filen about.htm i webbläsaren och studera resultatet.

21 8a. Bilden med formning av glasfot I denna övning ska du skapa bilden som visar hur två glasbruksarbetare säwer på en glasfot på ew 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 vidstående bild. Öppna bildfilen Öppna filen glasfot.jpg i bildredigeringsprogrammet. Kopiera delen som ska vara förstorad Innan du förminskar bilden, ska du kopiera den del som ska vara förstorad. Välj det ellip&ska markeringsverktyget (ElipBcal Marking Tool) i verktygspalewen. Dra en cirkel runt den del som glasarbetarna arbetar med. Håll sam&digt ner shid- tangenten, så blir det en exakt cirkel. Kopiera den markerade delen med Edità Copy. Denna del ska sedan klistras in eder det aw hela bilden förminskats.

22 8b. Bilden med formning av glasfot Förminska bilden Du ska nu förminska hela bilden &ll 600x450 pixlar. Välj Imageà Image Size I fönstret som dyker upp skriver du in 600 i den övre rutan för Bredd (450 fylls då i automa&skt i rutan för Höjd, om Constrain ProporBons är markerad). Klicka sedan på OK. Förstora bilden &ll 100% med förstoringsglaset (Zoom Tool) Om det behövs, förstora fönstret så aw hela bilden syns. Klistra in den kopierade delen Nu ska du klistra in den del som du &digare kopierade och anpassa dess storlek och placering. Välj Edità Paste. Delen med glasfoten kommer in i ew nyw lager. Ändra storlek: Välj Edità Free Transform. Ta tag i ew av hörnen och dra inåt så aw bilden förminskas. Håll ner shi_- tangenten, så behålls propor&onerna. Peka och dra miw i rutan för aw flywa bilden &ll önskad plats. Då du förminskat och placerat bilden så som visas i bilden härin&ll, klickar du utanför den markerade ytan.

23 8c. Bilden med formning av glasfot Lägg på en skugga på bilden Du ska nu lägga på en "glödande skugga" på bilden i cirkeln. Lagret med cirkeln ska vara markerat i Lagerpanelen (&ll höger om bildfönstret). Om det inte är det, klickar du på det, så aw det markeras Välj Layerà Layer Styleà Outer Glow... Då dyker det upp ew fönster med några val. I den övre delen finns en färgruta. Klicka på denna och välj vit färg. Dra sedan reglagen för Size (i miwen) &ll c:a 30 och Opacity (i den övre delen) &ll c:a 60. Klicka sedan på OK. Du har nu fåw en "skugga" på den förstorade delen av glasfoten.

24 8d. Bilden med formning av glasfot 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äia och redigera bilden senare, sparar du även bilden i Photoshop- format med Fileà Save As Spara en miniatyrbild för länken Du ska nu förminska bilden &ll en miniatyrbild som du kan ha i länken på webbsidan. Välj Imageà Image Size... Skriv in 100 i rutan för Width och klicka på OK. Välj Fileà Save for Web Välj formatet jpeg och kvalitet 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 &Wa på resultatet. Öppna filen index.htm i webbläsaren och studera resultatet. Klicka på länken med den lilla bilden.

25 Slut Experimentera nu med aw på egen hand förändra bilderna. Arbeta också med de bilder du ska ha på din webbplats för uppgid U3.