• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Bbeh halvdag 200511_wg
 

Bbeh halvdag 200511_wg

on

  • 485 views

 

Statistics

Views

Total Views
485
Views on SlideShare
485
Embed Views
0

Actions

Likes
0
Downloads
8
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Bbeh halvdag 200511_wg Bbeh halvdag 200511_wg Presentation Transcript

    • Bildebehandling for nettredaktører
    • Jakob Thyness • Partner, Webgruppen AS • Utdannet art director • Mer enn 20 års designerfaring • Erfaring med web/digitale medier siden 1993 • Medlem av Grafill, Dataforeningen (BITS) jakob@webgruppen.no
    • Riktig bildevalg
    • Hvorfor bruker vi bilder? • Et bilde sier mer enn tusen ord • Et bilde sier noe annet enn tusen ord • Et bilde sier det på kortere tid enn tusen ord
    • Når bruker vi bilder?
    • 1. Når vi vil utdype en historie
    • 2. Når vi vil understreke et poeng
    • 3. Når vi vil dokumentere noe
    • 4. Når vi vil vise relasjoner
    • 5. Når vi vil skape en stemning
    • Målgruppemarkører
    • Formspråk
    • Hvordan kommuniserer bilder? • Motiv • Komposisjon • Farger • Kontrast
    • Motiver
    • Mennesker• Ansikter er interessante i seg selv.• Kropper må ha noe spesielt ved seg for å være like interessante (bevegelser, klær, fysiske attributter)• Øyekontakt skaper nærhet.
    • Situasjoner • Situasjoner utspiller seg over tid, og må derfor ofte forklares nærmere. • Fokuser på det sentrale i situasjonen: Hva har skjedd? Hva er i ferd med å skje?
    • Gjenstander • Det må være tydelig hva gjenstanden er. • Gjenstander i bruk er mer visuelt interessante (og ofte mer informative). • Enkeltstående gjenstander avslører flere detaljer.
    • Stemninger• Jo enklere følelser man appellerer til, jo bedre.• Våg å være banal!
    • Komposisjon
    • Tredjedelsregelen • Del bildet i tre deler horisontalt og vertikalt • Plasser den viktigste delen av motivet i et av krysningspunktene • Unngå å sentrere motivet i bildet
    • Det gyldne snitt • Del bildet i to ulike deler • Den minste av delene skal forholde seg til den største som den største forholder seg til helheten • Plasser fokus i bildet på delelinjen
    • Forgrunn/bakgrunn• Hovedmotivet så stort som mulig i forgrunnen• Tydelig forskjell mellom forgrunn og bakgrunn skaper spenning i bildet• Ikke prøv å få med alt på én gang
    • Diagonalen • Legg motivet langs en diagonal linje fra hjørne til hjørne for å skape fart og liv i bildet
    • Perspektiv • Et motiv som går innover i bildet skaper dybde og trekker tilskueren inn.
    • Farger
    • Fargebruk • Bevisst bruk av farger kan forsterke innholdet i bildet • Farger kan ha ulik betydning i ulike kulturer • Fargeassosiasjoner er alltid svært enkle
    • Varmt
    • Kaldt
    • Friskt
    • Det er begrenset hvor mange fargeassosiasjoner vi klarer å huske av gangen.
    • Fargekontraster
    • Høylys/skygge • Høylysområder er nesten helt hvite • Skyggeområder er nesten helt svarte • Motivet blir skinnende blankt
    • Komplementær-kontrast• Fargene kommer fra hver sin side av fargesirkelen• Fargene har ofte høy metning, slik at de nesten ser ut til å vibrere• Brukes ofte for et “etnisk” utseende
    • Lav kontrast I • Mindre forskjell på lyse og mørke partier i bildet • Gir et kraftig inntrykk • Brukes ofte for å gi effekt av autoritet og makt
    • Lav kontrast II • Mindre forskjell på lyse og mørke partier i bildet • Gir et lyst og lett inntrykk • Brukes ofte for å gi effekt av eleganse
    • Farger vs. svart-hvitt
    • Farger • Levende • Spennende • Iøynefallende ...men også kanskje: • Glorete/billig • Utdatert
    • Svart-hvitt • Harmonisk • Stilfullt • Kunstnerisk ...men også kanskje: • Gammeldags • Kjedelig
    • Bildemanér - en standardisering avattributter • Format/størrelse • Bildeplassering • Bildeutsnitt • Motivvalg/behandling • Fargehåndtering • Bruk av grafikk
    • Standardisering av format/størrelse
    • Standardisering av bildeplassering
    • Standardisering av bildeutsnitt
    • Motivvalg og behandling
    • Standardisering av fargehåndtering
    • Bruk av grafikk
    • Innholdskriterier • Fakta • Målgruppe • Relevans • Personer • Roller • Generelle saker • Produkter
    • Fakta • Forsikre deg om at bildet faktisk viser det du tror det gjør.
    • Målgrupper• Bildene må gjenspeile målgruppen. Personer som er avbildet bør derfor ligge tett opptil målgruppen i kjønn, alder etc.• Husk at hvordan målgruppen ser seg selv ikke alltid samsvarer med hvordan resten av verden ser den
    • Relevans • Bildet må se ut som om det har noe med saken å gjøre • Pass på at “tonen” i bildet passer til saken • Hvis du må velge mellom å relatere bildet til brødteksten eller overskriften, så relater alltid bildet til overskriften.
    • Personer• Hvis enkeltpersoner blir omtalt, så bruk bilder av dem hvis det er mulig• Pass på at måten personene framstilles på i bildet samsvarer med innholdet• Fall ikke for fristelsen til å bruke bilder av perifere personer
    • Roller • Hvis en artikkel omhandler roller, som f.eks. “sjef” “singel”, eller “byråkrat”, unngå for enhver pris å vise bilder av identifiserbare personer (selv om de har riktig rolle) • Roller er generelle, personer er spesifikke - personlighet er derfor alltid sterkere enn roller
    • R
    • Generelle saker • Hvis artikkelen omhandler en personuavhengig sak, så bruk generelle emneillustrasjoner • Pass på at disse er relevante både i forhold til sak og målgruppe
    • Produkter og firmalogoer • Enkelte produkter er like gjenkjennelige som personer • En logo er “ansiktet” til et selskap • Disse brukes derfor bare der de omtales spesielt
    • Oppsummering - innholdskriterier • Bildene må gjenspeile målgruppen • Bildet må være relevant i forhold til saken • Relater bildet til overskriften • Bruk bilder av enkeltpersoner bare der de blir omtalt • Unngå å illustrere roller med bilder av gjenkjennelige personer • Bruk generell saksillustrasjon til personuavhengige saker • Spesifikke produkter avbildes bare når de omtales spesielt
    • Teknisk bildebehandling
    • Bildebehandlingsprogrammer• Adobe Photoshop• Adobe Photoshop Elements
    • 3 ting en nettredaktør må kunne iPhotoshop • Skalere/beskjære bilder - bildene er ofte i gal størrelse, og vi trenger ofte andre utsnitt • Gjøre enkel fargekorrigering - spesielt hvis man tar bilder selv • Lagre bildet i riktig format
    • Skalering av bilder
    • Oppløsning• Den eneste måleenheten som gir mening på skjerm er antall piksler i bredde og Antall piksler høyde.• Vanlige skjermstørrelser er 1024 x 768 eller 1280 x 1024 piksler.
    • Oppløsning for trykk / skjerm • Bilder som er beregnet på trykk og bilder beregnet på skjermbruk kan ikke brukes om hverandre. • Bilder beregnet på trykk må skaleres ned og/eller beskjæres for bruk på skjerm. • Bilder beregnet på skjermbruk kan ikke skaleres opp til bruk på trykk.
    • Høy oppløsning > trykk • Høy oppløsning betyr ikke annet enn at pikslene krympes ved utskrift for å gjøre bildet skarpt • Jo høyere oppløsning, jo mindre er pikslene, og jo flere piksler trenger man for at bildet skal bli stort nok ved utskrift
    • 75 dpi 300 dpiBemerk at bildet har like mange piksler ved 75 dpi som ved 300 dpi!
    • Lav oppløsning > skjerm • På skjerm er pikslene så store at de er synlige med det blotte øye • Da blir det ikke plass til alle pikslene som er i et stort høyoppløselig bilde, og vi må redusere antall piksler i bildet før vi kan bruke det
    • 300 dpi 75 dpi
    • Nedskalering • I prinsippet kan et bilde nedskaleres i det uendelige uten synlig tap av kvalitet • Det opprinnelige bildet inneholder alltid nok informasjon til å sikre god kvalitet på en mindre flate • Ved nedskalering reduseres antallet piksler i bildet
    • 100% 50%
    • Oppskalering • Et bilde kan normalt ikke skaleres opp mer enn maks 10-15% • Originalbildet inneholder ikke nok informasjon for å sikre god kvalitet over en større flate • Vi kan m.a.o. ikke øke antallet piksler i bildet vesentlig uten at kvaliteten blir dårlig
    • 100% 200%
    • Beskjæring av bilder
    • Når du beskjærer et bilde • Pass på at du får med deg de tingene i bildet som er viktigst • Gå tett innpå! • Beskjær gjerne til faste bildestørrelser - da blir det lettere å holde orden • Ved dramatiske beskjæringer av byråbilder - snakk med bildebyrået!
    • Fargekorrigering
    • • Bilder for trykk bruker CMYK - Cyan + Magenta + Yellow = svart• Bilder for skjerm bruker RGB - Red + Green + Blue = hvitt• Konverter alltid bildet til RGB før du bruker det på skjerm.
    • ©istockphoto.com
    • Klikk på den fargen du vil ha mer av i bildetVil du ha mindre av en farge - klikk på den motsatte siden
    • Lagring av bilde i riktig format
    • Bildeformater på web • Bildene må kunne vises på alle dataplattformer • Bildene må ta liten plass • Det finnes 3 bildeformater som brukes på web: GIF, JPEG og PNG
    • GIF (Graphics Interchange Format) • Det eldste grafikkformatet på web • Ikke-destruktiv filkomprimering (lossless) • Maksimalt antall farger: 256 • Støtter transparens (1 nivå) • Mulighet for enkel animasjon • Best egnet til logoer, spotgrafikk, knapper, bannere etc.
    • JPEG (Joint Photographer’s Expert Group) • Utviklet for å omgå svakhetene til GIF-formatet • Variabel, men destruktiv filkomprimering (lossy) • Maksimalt antall farger: 16 777 216 • Støtter ikke transparens • Best egnet til fotografier, fargeforløpninger o.l.
    • JPEG-råte • Fordi filkomprimeringen fjerner informasjon fra bildet, kan JPEG-filer rammes av progressivt kvalitetstap (JPEG-råte) • Dette skjer når en JPEG-fil lagres på nytt med samme filnavn
    • Original Lagret som JPEG 10x
    • Forminsking (JPEG) Svart-hvitt (GIF) Originalbilde (Photoshop-format) Nytt utsnitt 1 (JPEG)Én original - mange Nytt utsnitt 2 versjoner (JPEG)
    • PNG (Portable Network Graphics) • Nyeste formatet på web • Utviklet som en erstatning for GIF • Ikke-destruktiv komprimering (lossless) • Maksimalt antall farger: 16 777 216 • Støtter transparens (254 nivåer) • Støttes ikke av eldre nettlesere
    • GIF - 100 Kb JPEG - 40 Kb
    • GIF - 8 Kb JPEG - 12 Kb
    • Takk for meg!jakob@webgruppen.no Twitter: @JakobT