Laboraxon 7 Färger och bilder för webben - Medieteknik

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.