Jens Chr. Stenz Justesen
| 9.30-10.30 |
Bitmap-billeder og vektorgrafik |
||||
| 10.30-10.40 |
Pause |
||||
| 10.40-12.00 | Øvelse 1: Brug af grafikprogrammer - tilpasning af billeder, indsæt billeder i html-dokument og tilføj alternative tekstetiketter. | ||||
| 12.00-13.00 | Frokost | ||||
| 13.00-13.45 | Brug af imagemaps og animationer i Flash | ||||
| 13.45-14.30 | Øvelse 3: Brug af imagemaps og animationer | ||||
Øvelse 1: Brug af grafikprogrammer - tilpasning af billeder
I denne øvelse skal i arbejde med nogle af de mest anvendte teknikker til fremstilling af grafik til internettet. Disse teknikker omfatter beskæring af billeder, tilpasning af billedets størrelse, valg af det rette grafikformat og tilpasning af farvedybde.
Det er altid vigtigt, at man gemmer sit originale billede inden man går i gang med at bearbejde det i et grafikprogram. I denne øvelse gør det ikke så meget, for der kan man bruge de billeder, jeg har lagt på nettet til øvelsen, men hvis I f.eks. har taget billeder med et digitalkamera og slettet dem fra hukommelseskortet for at få plads til nye 'skud', er det en god ide at oprette en mappe til orinaludgaver af billederne.
Til denne øvelse bruger vi programmet Photoshop Elements fra Adobe. Åben programmet fra menuen Start.
Inden du kan bruge programmet funktioner, skal du åbne et billede. Du kan vælge at åbne et billede som du skal bruge i forbindelse med dit netsted eller et af nedenstående billeder:
1. Beskæring af billede
Det er ikke altid man skal bruge hele motivet på et billede, og så er det fornuftigt at beskære det så kun den centrale del af det oprindelige motiv kommer med.
I Photoshop Elements kan man beskære billedet og så at sige smide overflødig information væk og dermed reducere billedfilens størrelse.
Vælg
beskæringsværktøjet (se ikonet til venstre). Med beskæringsværktøjet
kan man med en 'træk og slip'-manøvre vælge det udsnit af
billedet man skal bruge. Det er muligt at rette udsnittet til efter man har
sluppet musetasten, så det gør ikke noget udsnittet ikke er valgt
helt præcist i første omgang. Dobbeltklik på udsnittet når
det er rettet til eller tryk 'Return'.
2. Tilpasning af billedets størrelse
Hvis man har taget billeder med et digitalt kamera og bagefter vil bruge billederne på en hjemmeside er det nødvendigt at gøre billedet mindre. Med nutidens digitalkameraer er selv den mindste opløsning af billedet overdimensioneret i forhold til at blive vist på en skærm. Det er fordi billederne i et digitalkamera også er beregnet til at blive trykt på papir og der er det nødvendigt med en meget højere opløsning for at opnå en rimelig kvalitet på papir.
Photoshop Elements giver mulighed for at justere højden og bredden af billedet via menuen:
Image -> Resize -> Image Size...
I vinduet kan I vælge den ønskede bredde og højde af målt i pixels. Bemærk at feltet 'Constrain Proportions' er markeret nederst i feltet. Det betyder at det samme forhold mellem højde og bredde bevares når man justere billedets dimensioner. Ved at afmarkere 'Constrain proportions' kan man vælge en vilkårlig højde og bredde til billedet. Man skal så regne med at billedet kan komme til at se mærkelig forvreddet ud.
Bevar 'constrain proportions' markeret hvis I ønkser
at bevare højde-bredde forholdet i billedet.
Vælg 'Smooth (bicubic)' i feltet 'Quality' og klik OK.
3. "Frimærkebilleder" på nettet
På netsider ser man ofte små udsnit af billeder, de såkaldte thumbnails, som man kan klikke på så man får en større udgave af billedet. De små udgaver fylder ikke så meget som de store billeder og derfor er det en god metode til at præsentere mange billeder på en side og så lade læseren selv afgøre om det er værd at bruge tid på at downloade de store udgaver. Når man laver thumbnails bruger man som regel en kombination af beskæring og formindskning, dvs. de to teknikker du prøvede i øvelse 1 og 2. Når man skal lave thumbnails skal man vurdere hvad der er mest relevant på siden og så beskære billedet så man får det med i udsnittet. Det nytter altså ikke altid bare at formindske billede, for så risikerer man at man ikke kan se noget af motivet på billedet fordi det simpelthen bliver for småt. Jakob Nielsen kalder denne teknik for Relevance-Enhanced Image Reduction i artiklen Marginalia of Web Design fra webstedet alertbox.com.
1. Brug teknikken Relevance-Enhanced Image Reduction på dette fotografi:
4. Justering af farvedybde
Farvedybden i billedet betyder i praksis hvor mange forskellige farver billedet kan gengive. Til fotografier bruges som regel en høj farvedybde for at kunne gengive de detaljerede farveovergange. Til fremstilling af grafiske elementer på en hjemmeside såsom knapper, baggrunde, logoer mm. er det ikke nødvendigt med så mange farvenuancer og man kan derfor nøjes med en mindre farvedybde i billedet. Det har den fordel at billedet fylder mindre og derved ikke kræver så lang tid at downloade. I praksis er det tit et spørgsmål om at indgå et komprimis mellem billedets kvalitet og billedfilens størrelse.
I Photoshop Elements kan man justere farvedybden via menuen:
Image -> Mode.
På denne liste kan I så vælge mellem forskellige farvedybder, hvor RGB (16.7 mio forskellige farver) er standard-tilstanden (default) for nye billeder i Photoshop Elements, og den med flest farver.
Udover RGB er der tre muligheder i Photoshop Elements:
1. Åben et nyt billede og forsøg jer med forskellige indstillinger af farvedybden. Vurder resultatet. Er kvaliteten acceptabel?
5. Komprimering af jpg-billeder
Jpeg-billeder kan komprimeres og graden af komprimering bestemmes af brugeren. Formålet med komprimering af billedet er at gøre billedfilen mindre, men det har desværre den bagside at det går ud over kvaliteten. Det er svært at sige på forhånd hvor meget et billedet 'kan klare' at blive kompriemeret for det kommer an på farvesammensætningen i det originale billede. Så komprimeringsgraden afgøres af øjnene der ser, så det er et spørgsmål om at eksperimentere lidt med indstillingerne.
1. Gem dette jpg-billede på c:-drevet (f.eks. i Dokumenter) og åben det i Photoshop Elements
2. Gem billede til Web via menuen: ->
I det nye vindue kan du se to vinduer med billedet. Vinduet længst til venstre viser det det originale billede, mens vinduet til højre viser billedet som det ser ud baseret på indstillingerne ude til højre.
3. Vælg JPEG i feltet "Settings" (man kan
vælge mellem 3 forskellige kvaliteter High, Medium og Low, men man kan
også vælge en vilkårlig kvalitet (i %) i feltet 'Quality'.
Prøv forskellige indstilllinger og sammenlign billedets kvalitet og billedfilens
størrelse.
6. Filtre
Filtre benyttes til at opnå bestemte effekter i billedet, f.eks. sløre billedet så det får et drømmeagtigt skær (filter: gaussian blur) eller omdanne et fotografi så det ligner en kultegning. Filtrene kan kun benyttes på billeder i RGB-mode (mange farver).
1. Eksperimenter med filtrene i Photoshop Elements. Filtrene er tilgængelig via menuen: Filter
7. Gemme et billede
Når billedet er beskåret og tilpasset i størrelse er det nødvendigt at gemme billedet så man bagefter kan bruge det på sin hjemmeside. Gem det optimerede billede via menuen:
File -> Save for Web...
I Photoshop Elements åbner denne funktion et nyt vindue med flere muligheder. Her kan man bl.a. vælge format: Gif, Jpg eller Png (8- eller 24 bit farvedybde).
Bemærk at man også kan vælge at formindske eller forstørre billedet fra dette vindue.
NB! Undgå mellemrum og andre specielle tegn (såsom danske bogstaver æ,ø og å) i filnavnet, når du gemmer billedet!
Øvelse 2: Eksperimenter med imagemaps, transperante billeder og animationer
1. Imagemaps. Åben kortet over RUC i en browser og gem billedet på din harddisk. Kortet er fra RUCs gamle hjemmeside.
2. Indsæt billedet med kortet over RUC i Dreamweaver. Når man markerer billedet kan man indtegne sine imagemaps (hotspots) på billedet fra egensskabvinduet (nederste venstre hjørne). Omdan kortet til en imagemap med beskrivelser af de enkelte institutter - de enkelte institutter på RUC har deres egne netsider!
3. Dsikuter fordele og ulemper ved brugen af imagemaps som navigationsmenuer og 'sitemaps'!
4. Transperante gif- og png billeder. Man kan definere gennemsigtige farver i et gif- og png billlede. Her er et eksempel på en baggrundsfarve der er blevet fjernet:
Sådan
Blå
pil med sort baggrundsfarve.
Den
sorte baggrundsfarve er nu fjernet med "Magic Eraser"-værktøjet.
Sådan fjerner man baggrundsfarven:
Her
finder du "Magic Eraser"-værktøjet
5. Animationer. Diskuter om der eventuelt kan anvendes animationer i forbindelse med jeres miniprojekt (hvilken type og med hvilket formål?)
Vejledninger
