Labora&on7 Färgerochbilderförwebben –övningariPixlrEditor 1M321Webbteknik1,7,5hp Medieteknik ©2016RuneKörnefors [email protected] 1.Laddanerarbetsdokument Tillövningarnaidennalabora&onfinnsdetenzip-filsominnehållerenmappmednågrawebbsidoroch bildfiler. Länk&llzip-filenfinnspålabora&onenswebbsida. Imappen(glaswebb)finns: • treHTML-dokument(index.htm,about.htmochcourse.htm) • ÖppnaHTML-dokumentenidinwebbeditorföraZsekoden. ÖppnademocksåiwebbläsarenföraZsehurdevisasdär. • HTML-kodeninnehållerimg-taggarförnågrabilder,men dessakanännuintevisas.Bildernaskaduskapaide följandeövningarna.Iställetvisasnutextenialt-aZributet. • eZCSS-dokument(style.css) • DeZainnehållerkodföraZskapasidornaslayoutochendelandras&linställningar. • ÖppnadokumentetiwebbeditornföraZsekoden. • IövningarnaskadusedankompleZeradennakod,genomaZbl.a.taineZpar bakgrundsbilder. • enmappkalladpics • Idennamappskaduläggadebildersomduskapariövningarna. • enmappkalladoriginalbilder • Idennamappliggerdebildersomduskautgåifråniövningarna. 2.Bildredigeringsprogram IdessaövningarskaduövapåaZredigeranågrabilderföraZanpassadem&llenwebbplats.Bilderna kommeraZbeskäraspåolikasäZ,förändrasifärguppsäZningochkonverteras&llformatsomjpegoch pngsomanvändspåwebben.Bildernaskaanvändassombakgrunderochillustra&onerpåwebbplatsen iHTML-ochCSS-kod.Vi&ZarocksåpåhurvisäZerbakgrundsfärg. Instruk&onernagällerförhZp://pixlr.com/editor/.Svenskversion. ObserveraaZPixlr:smenyervisashögstuppiwebbläsarensfönster. ÖnskatspråkväljerduimenynSpråk. 3a.Bakgrundsbildförnavigeringsmenyn Idennaövningskaduutgåfrånbildenpipor.jpgochskapaenbildsomdelsgeren bakgrund&llnavigeringslänkarnaochdelsenillustra&onavwebbplatsensinnehåll.Bilden skabeskärasochförsesmedenlogotyp.Bildenskaanvändassombakgrund&llblocket nav.ICSS-filenärbreddenpånavsaZ&ll200pixlar.Lagomhöjdpåbildenkanvara600 pixlar,sedankommerrestenaZfyllasutmedlämpligbakgrundsfärg.Bildenskablisom vidståendebild. Beskärochförminskabilden • Öppnafilenpipor.jpgibildredigeringsprogrammet. • VäljverktygetföraZbeskära(Beskärningsverktyg). • Iövredelenavprogrammetsfönstervisastvårutordärdukanskrivainönskadstorlek. VäljOutputsizeochskrivinstorleken200och600. • Klickasedanibildenochdraenrektangel,föraZmarkeradenytasomvisasi ovanståendefigur.Markeringenskagåfrånövre&llnedrekantenavbilden ochramainglaspiporna. • DetgåraZdrarektangelnochändrastorlekpåden,ävenederdetaZduritatden. • Dubbelklickairutan,föraZbekrädamarkeringen. • Dåbeskärsbildenochförminskas&lldenvaldastorleken. • Dubbelklickasedanpåförstoringsglaset(Zoomverktyg)iverktygspaleZen, föraZvisabildeni100%storlekifönstret. 3b.Bakgrundsbildförnavigeringsmenyn Läggpåenlogotyp • Öppnafilenlogo.jpgibildredigeringsprogrammet. • Duskanukopierahelabildenochklistraindenidinbildmedpiporna. • Markeraallt(RedigeraàMarkeraallt)ochkopiera(RedigeraàKopiera). • Gåöver&llfönstretmedbildenpåpipornaochklistrain(RedigeraàKlistrain). • BildenmedlogonhamnardåieZlagerframfördenandrabilden. • VäljförflyZningsverktyget(FlyEningsverktyg)ochdrabilden&llönskadplats (c:aenhalvcen&meterfrånvänster-ochöverkanten). • Nuskadutabortdengrönafärgenilogon. • Väljmarkeringsverktyget(Trollspö). • Skrivin60irutanförToleransidenövredelenavprogrammetsfönster. Seockså&llaZAnI-aliasärvaltochaZAngränsandeinteärvalt. • DetsistavaletgöraZdetintebaraärangränsandepixlarsomväljs, utanallapixlarmeddenfärgsomdusedanklickarpå. • Klickanågonstansidengrönaytanibilden • Dåmarkerasytanochallaandrapixlarmedsammafärg. • DärederväljerduRedigeraàKlipput(ellertryckerpåbackstegstangenten) • Markeraddeltasdåbort. • VäljsedanRedigeraàAvmarkeraallt • Dåtasmarkeringenbort. 3c.Bakgrundsbildförnavigeringsmenyn Sparabildenföranvändningpåwebben Bildenskanusparasijpeg-format.DeZaäreZformatsomkomprimerarbildenochmanfårdåvälja kvalitét.Komprimerarmanmycket,blirfilstorlekenliten,menkvaliténpåbildenblirkanskedålig.Vill manhamyckethögkvalitét,blirkanskefileniställetonödigtstor.Såmanfårkompromissa. • VäljArkivàSpara... • Ifönstretsomdudåfårserdu&llaZformatetärJPEGochväljerkvalitet50. • KlickasedanpåOKochsparabildenmednamnetnavbar.jpgimappenpics. • VillduävensparabildeniPixlr-format,föraZkanskesedanredigeradenvidare, väljerdukommandotArkivàSpara...ochformatetPXD. 3d.Bakgrundsbildförnavigeringsmenyn AnvändbildeniCSS-mallen • Öppnafilenstyle.cssidineditorförHTMLochCSS. • Is&lenförnavläggerdu&llföljande: background-image:url(pics/navbar.jpg);background-repeat:no-repeat; • Bildenanvändsdåsombakgrundsbild.Denskainterepeteras. • Öppnafilenindex.htmiwebbläsarenochstuderaresultatet. • Hardu&llräckligtstortfönsteridinwebbläsare(merän600pixlarhögt),såserduaZdengråbakgrundsfärgensomfinnsmedi s&lenförnavkommerunderbilden,föraZfyllauthelafönstretshöjd.Dennagrånyansärdockliteförljus,såduskanubyta &llsammagråfärgsomfinnslängstneribilden. • Gåöver&llbildredigeringsprogrammetochifallduhadestängtbildfönstret,öppnardudinbildigen. • Taredapåfärgkodenfördengrånyansenlängstner. • VäljfärgpipeZen(Färgväljarverktyg)ochklickaidengråytanlängstneribilden. • • FärgensomduklickarpåkommerdåiniverktygspaleZensfärgruta. Klickapåfärgrutan,såfårdueZfönsterförfärginställning. Ihögrahalvanidetfönstretfinnsdetenrutadärfärgkodenstårifältetmarkeratmed#(t.ex.3c3a34). KopieradeZavärdeochklickasedanpåAvbrytföraZstängafönstretigen. • Gåöver&llCSS-filenieditornigenochbytbakgrundsfärgförnav: background-color:#3c3a34; • • Klistraalltsåindenkodsomduhadekopierat. Studeraresultatetiwebbläsaren. • Lägg&llföljandekodis&lenförnavul: margin-top:150px; • • DeZagerlistanmednavigeringslänkarnaenövremarginalpå150pixlar. Eventuelltfårdujusteravärdet,beroendepåvarduplaceradelogonidinbild. Studeraresultatetiwebbläsaren. 4a."Gradient"bakgrundsbildförsidansinnehåll DuskanuskapaenbakgrundsomgradvisövergårfrånviZ&llsammaorangefärgsomduhari glasugnenpåföregåendebild.VikommerhäraZ&Zapåtvåalterna&vfördeZa.Detförstaalterna&vet äraZanvändaenbakgrundsbildochdetandraalterna&vetäraZanvändagradientCSS-s&l. Bakgrundsbild Bildenskagörassomensmalremsa(1000pixlarbredoch20pixlarhög)somskaupprepaspå webbsidan.Bildenskablisomnedanståendebild(visashärförminskad). SkapaeAnyAbilddokument SkapaeZnyZdokumentsomär1000x20pixlaribildredigeringsprogrammet. • VäljArkivàNybild... • Ifönstretsomdådykeruppväljerdustorleken1000och20förbreddrespek&vehöjd. • KlickadärederpåOK,såfårduennytombild. 4b."Gradient"bakgrundsbildförsidansinnehåll FyllmedeAgradientmönster Duskanugöraengradientövergångfrånenvitfärgivänsterkanten&llenorangefärgihögerkanten. DenorangefärgenskahakodenFFAA00(somungefärärfärgenförenavdeljusanyansernai glasugnen). • Väljverktygetförgradientfärg(Gradientverktyg). • Iprogramfönstretsöverkantvisasinställningarförverktyget. KlickapåfärgrutanförGradient. • DufårdåenrutamedeZantalmönster. Idenövredelenfinnstvå"pilar" Idenförstaärdetvitfärgochdenandrasvartfärg. • Klickapådenhögrapilen,såkommerdessfärgnerirutanförFärg. • Klickaifärgrutan. • SkrivinkodenFFAA00irutanmarkeradmed#. KlickasedanpåOK. • Klickautanförrutanmedallamönster,såaZdendöljs. • PekaibildensmiZochtrycknedmusknappen. Drasedanåthöger&llhögerkantenochsläppuppmusknappen. • BildenfyllsdåmedeZgradientmönster. 4c."Gradient"bakgrundsbildförsidansinnehåll Sparabildenföranvändningpåwebben • VäljArkivàSpara... • VäljformatetJPEGochkvalitet80. • KlickasedanpåOKochsparabildenmednamnetbg.jpgimappenpics. AnvändbildeniCSS-mallen Nuskaduanvändabildensomenbakgrundsbildpåwebbsidorna. • Öppnafilenstyle.cssidineditor. • Längstnerifilenläggerdu&llföljande: main{background-image:url(pics/bg.jpg);background-repeat:repeat-y;} • • Detfinnsvisserligenredanens&lförmainifilen,mendetgårbraaZlägga&llenny.BådakommeraZ användas&llsammansavwebbläsaren(CSSärjuenkaskadavs&lar). Bildentasinsomenbakgrundsbildochupprepasiy-ledsåaZhelaytanshöjdfylls. • Öppnafilenindex.htmiwebbläsarenochstuderaresultatet. • OmduhareZbreZfönsteridinwebbläsare(bredareän1200pixlar),såserduaZdetäreZviZutrymme&ll högeromdengradientabakgrunden.DetberorpåaZbakgrundsfärgenförbodyärsaZ&llvitfärgiCSS-filen. • Duskanulägga&llengulbakgrundsfärgförmain. • Lägg&llföljandeidinnyas&lförmainiCSS-filen: background-color:#FFAA00; • FärgensäZs&lldenfärgsomdengradvisaövergångenslutarmed. • Studeraresultatetiwebbläsaren. • Ändrafönstretsstorlekochsehurdetbliriolikastorlekar. 5a."Gradient"bakgrundsfärgförsidansinnehåll ViskanusepåeZalterna&vtsäZaZfåengradientbakgrund,genomaZanvändainställningariCSS. DeZaingåriCSS3,menärännuintestandardiseratochimplementeratpåsammasäZiwebbläsarna.Så därförfårmananvändaeZantalolikakoder,föraZdetskafungeraialla(vanliga)webbläsare.Viska härutgåfråneZexempelsomfinnspåföljandeurl: hZp://www.w3schools.com/css/css3_gradients.asp KodiCSS-filen • SkrivinföljandekodförmainiCSS-filen: main{/*background-image:url(pics/bg.jpg);background-repeat:repeat-y;background-color:#FFAA00;*/ background:-webkit-linear-gradient(le[,#FFF,#F80);/*ForSafari5.1to6.0*/ background:-o-linear-gradient(right,#FFF,#F80);/*ForOpera11.1to12.0*/ background:-moz-linear-gradient(right,#FFF,#F80);/*ForFirefox3.6to15*/ background:linear-gradient(toright,#FFF,#F80);/*Standardsyntax*/ } • • • Omgedengamlakodenmed/*och*/.Då"kommenterarvibortden", mendenfinnsändåkvar,ifallvivillåtergå&llden. SedanföljereZantalalterna&vakoderföraZskapaengradientfärgfrånvit&llorangefärg. DetärdensistakodensomärdensomärföreslagensomkorrektkodiCSS3. JagvaldehärfärgenF80iställetförFA0,somjaghadeibildeniövning4.Detblirenlitemörkare nyans,vilketjagtycktepassadebäZre.Menändragärna&lldenfärgnyansduvillha. • Studeraresultatetiwebbläsaren. • Ändrafönstretsstorlekochsehurdetbliriolikastorlekar. 5b.JämförelseavdebådasäZeniövning4a-coch5a ViharnuseZtvåolikasäZaZskapaenliknandeeffekt. Mendetfinnsendelskillnader. Gradientbakgrundmedbild: • DetkräveraZviskaparenbildochaZwebbläsarenmåsteläsain bilden.DetbliryZerligareenfilaZläsain,vilketkanvaraen nackdelimobilaenhetermedlångsamnätanslutning. • Viärfriareihurdengradientaövergångenskaske.IdeZaexempel börjarvimedenhelvitbakgrund,somimiZenavsidanövergår&ll enorangebakgrund. GradientbakgrundmedCSS: • Vislippernågonextrafilsomskaläsasin. • Dengradientaövergångenskeriheladetblockdärdenfinns,såvi kanintebestämmavariblocketdenskaske. 6a.Bildenmedglasformningpåingångssidan Nuskaduskapaenbildsomskaanvändassomillustra&onpåingångssidan. Duskautgåfrånbildenformning.jpgochtabortbakgrundeniden, förminskadenochsparadenipng-formatmedentransparant (genomskinlig)bakgrund.Bildenskablisomvidståendebild. Beskärochförminskabilden • Öppnabildenformning.jpgibildredigeringsprogrammet. • Duskanubeskärabilden,såaZduendastfårmedhandenochverktygen.Sedanförminskardu bildensåaZdenblir500pixlarbred.Dessamomentharduuuört&digarefördeandrabildernai övningarna,såhärgesendastkortaförklaringar. • AnvändverktygetföraZbeskära(Beskärningsverktyg). • SäZstorleken&ll500bådeförhöjdochbredd. • Klickaibildenochdraenmarkering,såaZduendastfårmedhandenochverktyget. • Dubbelklickasedanirutan,föraZuuörabeskärningen. • Förstorabildenmedförstoringsglaset(Zoomverktyg),såaZduserbildeni100%. Eventuelltförstorarduävenfönstret,såaZduserhelabilden. • Påwebbsidanskabildenvaraännumindre,mendensistaförminskningengörviiwebbsidanskod. DeZaskavaraenbildmedentransparantbakgrundochdåkandenblilite"hackig"ikanterna.FöraZ minimeradennaeffekt,förminskarvidenliteävendåvitarindenpåwebbsidan.Omdetinteären transparantbild,såärdetbäZreaZförminskaden&llönskadstorlekibildredigeringsprogrammet.Då fårvidelsenbäZrekvalitetochdelsenmindrebildfil.Mennuhandlardetalltsåomenbildsomskafå entransparantbakgrund. 6b.Bildenmedglasformningpåingångssidan Görbildenljusare Bildenärganskamörk,sågördennuljusare. • VäljJusteringaràLjushet&Kontrast... • IfönstretsomdykeruppdrarduireglagenföraZändraljushetochkontrast. • Görbildenljusare,ungefär+15.Kontrastenkandudranernågot,ungefär-5. • KlickasedanpåOK. Tabortbildensbakgrund Duskanusuddautbakgrundenibilden,såaZendasthandenochverktygenåterstår. Detkanvaraganskapilligtoch&dskrävandearbetemedaZtabortbakgrunden.Dådutarbortbakgrundenibildenfår duenvitbakgrund,somsedanskagörasgenomskinligsåaZwebbsidansbakgrundlyserigen.Detärvik&gtaZvara noggranndådutarbortbakgrunden,annarskandetsedansehackigtutdåbildentasinpåwebbsidan.DåduförståZ nedanståendeprincipförhurmangör,såkanduiställetöppnafilenformning_avmaskad.jpgochutgåfrånden,föraZ spara&diövningen. • Väljradergummit(Suddningsverktyg). • Radergummitärkanskeförstort,såifönstretsöverkantklickardupåsiffran medenpilunder.Dufårdåenruta,därdukanväljaenannanstorlek,t.ex.15. • Suddasedanibildendedelarsomliggerruntomhandenochverktyget. 6c-1.Bildenmedglasformningpåingångssidan GörenmjukövergångfrånbakgrundenHllbilden Utgånuan&ngenfråndinegenavmaskadebildellerbildenifilenformning_avmaskad.jpg.Bildenskanu fåentransparent(genomskinlig)bakgrundochsam&digtenmjukövergång.DeZakräverlitetricks. BörjamedaZskapaeZlagermedtransparentbakgrundochtasedanbortdenvitaytanibilden. • SkapaeZnyZlagermedLageràNyElager. • IlagerpaleZendubbelklickardupåhänglåset&llhögeribakgrundslagret, föraZlåsauppdet.(Detäralltsålagretmedbilden.) • Drasedanlagretuppåt,såaZdethamnarovanfördetnyalagret. • Väljmarkeringsverktyget(Trollspö). • Idenövredelenavprogrammetsfönsterkontrollerarduinställningar förverktygetochser&llaZToleranceär30ochbådeAnI-aliasoch Angränsandeärvalt. • AngränsandegöraZdetendastärsammanhängandepixlarsomväljsochinteallamedsammafärg. • KlickaidenvitadelenavbildenochväljRedigeraàKlipput(ellertryckpåbackstegstangenten). • Denmarkeradedelentasdåbort. • Upprepadet,såaZbådadevitaytornatasbort. fortsäEningpånästasida… 6c-2.Bildenmedglasformningpåingångssidan …fortsäEningfrånföregåendesida Nuskaduskapaenmjukövergång&llhandenochverktyget. • VäljmarkeringsverktygetiverktygspaleZen. • • Ifönstretsövrekantklickardupådenellip&skamarkeringen. IrutanförFeatherskriverduin20. • Pekaibildensövrevänstrahörn,trycknedmusknappenochdraner&lldet undrehögrahörnet,såaZhelabildenmarkerasmedencirkel. • VäljRedigeraàInverteramarkeringen • Dåändrasmarkeringen,såaZdetärytanutanförcirkelnsomärmarkerad. • VäljRedigeraàKlipput(ellertrycknedbackstegstangenten). • Denmarkeradedelentasdåbort. • VäljsedanRedigeraàAvmarkeraallt. • DuharnufåZenmjukareövergång&llhandenochglaspipan. 6d.Bildenmedglasformningpåingångssidan Sparabildenföranvändningpåwebben Bildenskanusparasiformatetpng,såaZdentransparentadelenbehålls. • VäljArkivàSpara... • VäljformatetPNGochklickapåOK. • Sparasedanbildenmednamnetformning.pngimappenpics. Sehurbildenblirpåwebben IHTML-filenindex.htmfinnsdetredanenimg-taggsomtarinbildenpåwebbsidan, sådubehövernuendast&Zapåresultatet. • Öppnafilenindex.htmiwebbläsarenochstuderaresultatet. Förminskabilen Bildenskanuocksåförminskasisidanskod. • Öppnafilenindex.htmidineditor. • SkrivineZwidth-aZributiimg-taggen: <imgsrc="pics/formning.png"alt="Glasformningiglasbruk"width="350"> • Studeraresultatetiwebbläsaren. • ÄndrafönstretsstorlekochseaZbildenhela&denliggerifönstretshögerkant. 7a.Bildenmedkartan DuskanuredigerabildenmedEuropakartan.Antaletfärgeridennaska reduceras&llendasttvå.Färgenförhavenskagörastransparentochfärgen förlandområdenaskaväljas&llenorange/brunfärgsompassar&llövriga färgerpåsidan.Bildenskablisomvidståendebild. Öppnabildfilen • Öppnafileneurope.pngibildredigeringsprogrammet. Görhaventransparenta GörpåsammasäZsomiföregåendeövning,dvsskapaeZnyZtomtlagerochläggdetunderst. Tasedanbortdetsomskavaragenomskinligtikartan. • SkapalagretmedLageràNyElager. • Dubbelklickapåhänglåsetibakgrundslagret(medkartan),föraZlåsauppdet. • Dralagretmedkartanuppåt,såaZdetliggeröverst. • Väljmarkeringsverktyget(Trollspö). • • • • • • KlickabortmarkeringenavAngränsadeidenövredelenavprogrammetsfönster. Dåblirdetintebarapixlarsomangränsar&llvarandrasommarkeras, utanallapixlaribildenmeddenfärgsomdusedanklickarpå. Klickaidengrönaytanpåkartan,föraZmarkeraallagrönapixlar. VäljRedigeraàInverteramarkeringen,föraZiställetmarkeraalltutomdegrönapixlarna. TabortmarkeradepixlargenomaZväljaRedigeraàKlipput(ellertrycknedbackstegstangenten). Taintebortmarkeringen.Denbehövsinästasteg,sålåtdenvarakvar. 7b.Bildenmedkartan Bytutdengrönafärgenikartan Nuskadubytakartansfärg&llenmörkbrunfärg. • VäljRedigeraàInverteramarkeringen,föraZväxlaom&lldengrönaytanigen. • Klickaidenstorafärgade(ellersvarta)rutanlängstneriverktygspaleZen. • Väljenmörkbrunfärg. • • ObserveraaZdumåstedraiderundaprickarnabådeidenomgivandecirkelnochdeninreromben, föraZväljafärg. KlickapåOK,dåduhiZatdenfärgduvillha. • Väljpenseln(Målarpenselverktyg)iverktygspaleZen. • Pekapåbildenochtrycknedmusknappen.Hålldennedtrycktochmålaöverhelakartan. • Detärendastdenmarkeradedelensommålas,dvsdendelsomvargrön. • VäljRedigeraàAvmarkeraallt,föraZtabortmarkeringen. 7c.Bildenmedkartan Sparabildenföranvändningpåwebben Bildenskanusparasiformatetpng,såaZdentransparentadelenbehålls. • VäljArkivàSpara... • VäljformatetPNGochklickapåOK. • Sparasedanbildenmednamneteurope.pngimappenpics. Sehurbildenblirpåwebben IHTML-filenabout.htmfinnsdetredanenimg-taggsomtarinbildenpåwebbsidan, sådubehövernuendast&Zapåresultatet. • Öppnafilenabout.htmiwebbläsarenochstuderaresultatet. 8a.Bildenmedformningavglasfot Idennaövningskaduskapabildensomvisarhurtvå glasbruksarbetaresäZerpåenglasfotpåeZvinglas.Detaljen medglasfotenskakopierasochläggasinsomenförstoringpå bilden.Sedanskadusparahelabildensomenminiatyr,som skaanvändasilänkenpåwebbsidan.Bildenskablisom vidståendebild. Öppnabildfilen • Öppnafilenglasfot.jpgibildredigeringsprogrammet. Kopieradelensomskavaraförstorad Innanduförminskarbilden,skadukopieradendelsomskavaraförstorad. • VäljmarkeringsverktygetiverktygspaleZen. • • IfönstretsövredelväljerduellipsenochConstraint&llAspectraIo. DåkommermarkeringenaZbliencirkel. • Draencirkelruntdendelsomglasarbetarnaarbetarmed. • HamnarintecirkelnräZ,såkandupekaidenochdraden&llönskadplats. • KopieradenmarkeradedelenmedRedigeraàKopiera. • DennadelskasedanklistrasinederdetaZhelabildenförminskats. 8b.Bildenmedformningavglasfot Förminskabilden Duskanuförminskahelabilden&ll600x450pixlar. • VäljBildàBildstorlek... • • Ifönstretsomdykeruppskriverduin600idenövrerutanförBredd (450fyllsdåiautoma&sktirutanförHöjd,omBehållproporIonernaärmarkerad). KlickasedanpåOK. • Förstorabilden&ll100%medförstoringsglaset(Zoomverktyget) • Omdetbehövs,förstorafönstretsåaZhelabildensyns. Klistraindenkopieradedelen Nuskaduklistraindendelsomdu&digarekopieradeochanpassadessstorlekochplacering. • VäljRedigeraàKlistrain. • DelenmedglasfotenkommerinieZnyZlager. • Ändrastorlek: • VäljRedigeraàFreetransform. • TatagieZavhörnenochdrainåtsåaZbildenförminskas. • Hållnershi[-tangenten,såbehållspropor&onerna. • PekaochdramiZirutanföraZflyZabilden&llönskadplats. • Dåduförminskatochplaceratbildensåsomvisasibildenhärin&ll, klickarduutanfördenmarkeradeytan. • SvaraYesidendialogrutasomkommerupp, föraZbekrädadentransformeringdugjort. 8c.Bildenmedformningavglasfot Läggpåenskuggapåbilden Duskanuläggapåen"glödandeskugga"påbildenicirkeln. • LagretmedcirkelnskavaramarkeratiLagerpanelen(&llhögerombildfönstret). Omdetinteärdet,klickardupådet,såaZdetmarkeras • Iunderkantenavpanelenfinnsdetnågrasmåknappar. Klickapådentredjeavdessa(Layerstyles). • DådykerdetuppeZfönstermednågraval. • VäljOuterglow,såfårduocksånågrareglage. • Omreglagenintedykerupp,fårdukanskeklickaengång&llpåOuterglow. Klickaintebarairutan,utanpåtexten. • Klickapåfärgrutanochväljvitfärg. • Drasedanireglagen,såaZstorlekenblirc:a30ochopacitetenc:a60. • KlickasedanpåOK. • DuharnufåZen"skugga"pådenförstoradedelenavglasfoten. 8d.Bildenmedformningavglasfot Sparabildenföranvändningpåwebben Bildenskanusparasiformatetjpeg. • VäljArkivàSpara... • VäljformatetJPEGochdranerreglagetförkvalitet&ll50. • Sparabildenmednamnetglasfot.jpgimappenpics. • IfallduvillfortsäEaochredigerabildensenare,spararduävenbildeniPXD-formatmedArkivàSpara.... Sparaenminiatyrbildförlänken Duskanuförminskabilden&llenminiatyrbildsomdukanhailänkenpåwebbsidan. • VäljBildàBildstorlek... • Skrivin100irutanförBreddochklickapåOK. • VäljArkivàSpara... • VäljformatetJPEGochkvalitet30. • Sparabildenmednamnetglasfot_liten.jpgimappenpics. Sehurbildenblirpåwebben IHTML-filenindex.htmfinnsdetredanHTML-kodförbilden,sådubehövernuendast&Zapåresultatet. • Öppnafilenindex.htmiwebbläsarenochstuderaresultatet. • Klickapålänkenmeddenlillabilden. Slut ExperimenteranumedaZpåegenhandförändrabilderna. ArbetaocksåmeddebilderduskahapådinwebbplatsföruppgidU3.