Laboraxon 7 Färger och bilder för webben - Medieteknik
advertisement
Labora&on7
Färgerochbilderförwebben
–övningariPixlrEditor
1M321Webbteknik1,7,5hp
Medieteknik
©2016RuneKörnefors
rune.kornefors@lnu.se
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.
