Bbeh halvdag 200511_wg

577 views

Published on

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
577
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Bbeh halvdag 200511_wg

  1. 1. Bildebehandling for nettredaktører
  2. 2. 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
  3. 3. Riktig bildevalg
  4. 4. 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
  5. 5. Når bruker vi bilder?
  6. 6. 1. Når vi vil utdype en historie
  7. 7. 2. Når vi vil understreke et poeng
  8. 8. 3. Når vi vil dokumentere noe
  9. 9. 4. Når vi vil vise relasjoner
  10. 10. 5. Når vi vil skape en stemning
  11. 11. Målgruppemarkører
  12. 12. Formspråk
  13. 13. Hvordan kommuniserer bilder? • Motiv • Komposisjon • Farger • Kontrast
  14. 14. Motiver
  15. 15. 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.
  16. 16. 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?
  17. 17. 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.
  18. 18. Stemninger• Jo enklere følelser man appellerer til, jo bedre.• Våg å være banal!
  19. 19. Komposisjon
  20. 20. Tredjedelsregelen • Del bildet i tre deler horisontalt og vertikalt • Plasser den viktigste delen av motivet i et av krysningspunktene • Unngå å sentrere motivet i bildet
  21. 21. 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
  22. 22. 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
  23. 23. Diagonalen • Legg motivet langs en diagonal linje fra hjørne til hjørne for å skape fart og liv i bildet
  24. 24. Perspektiv • Et motiv som går innover i bildet skaper dybde og trekker tilskueren inn.
  25. 25. Farger
  26. 26. Fargebruk • Bevisst bruk av farger kan forsterke innholdet i bildet • Farger kan ha ulik betydning i ulike kulturer • Fargeassosiasjoner er alltid svært enkle
  27. 27. Varmt
  28. 28. Kaldt
  29. 29. Friskt
  30. 30. Det er begrenset hvor mange fargeassosiasjoner vi klarer å huske av gangen.
  31. 31. Fargekontraster
  32. 32. Høylys/skygge • Høylysområder er nesten helt hvite • Skyggeområder er nesten helt svarte • Motivet blir skinnende blankt
  33. 33. 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
  34. 34. 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
  35. 35. 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
  36. 36. Farger vs. svart-hvitt
  37. 37. Farger • Levende • Spennende • Iøynefallende ...men også kanskje: • Glorete/billig • Utdatert
  38. 38. Svart-hvitt • Harmonisk • Stilfullt • Kunstnerisk ...men også kanskje: • Gammeldags • Kjedelig
  39. 39. Bildemanér - en standardisering avattributter • Format/størrelse • Bildeplassering • Bildeutsnitt • Motivvalg/behandling • Fargehåndtering • Bruk av grafikk
  40. 40. Standardisering av format/størrelse
  41. 41. Standardisering av bildeplassering
  42. 42. Standardisering av bildeutsnitt
  43. 43. Motivvalg og behandling
  44. 44. Standardisering av fargehåndtering
  45. 45. Bruk av grafikk
  46. 46. Innholdskriterier • Fakta • Målgruppe • Relevans • Personer • Roller • Generelle saker • Produkter
  47. 47. Fakta • Forsikre deg om at bildet faktisk viser det du tror det gjør.
  48. 48. 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
  49. 49. 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.
  50. 50. 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
  51. 51. 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
  52. 52. R
  53. 53. 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
  54. 54. 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
  55. 55. 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
  56. 56. Teknisk bildebehandling
  57. 57. Bildebehandlingsprogrammer• Adobe Photoshop• Adobe Photoshop Elements
  58. 58. 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
  59. 59. Skalering av bilder
  60. 60. 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.
  61. 61. 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.
  62. 62. 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
  63. 63. 75 dpi 300 dpiBemerk at bildet har like mange piksler ved 75 dpi som ved 300 dpi!
  64. 64. 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
  65. 65. 300 dpi 75 dpi
  66. 66. 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
  67. 67. 100% 50%
  68. 68. 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
  69. 69. 100% 200%
  70. 70. Beskjæring av bilder
  71. 71. 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!
  72. 72. Fargekorrigering
  73. 73. • 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.
  74. 74. ©istockphoto.com
  75. 75. Klikk på den fargen du vil ha mer av i bildetVil du ha mindre av en farge - klikk på den motsatte siden
  76. 76. Lagring av bilde i riktig format
  77. 77. 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
  78. 78. 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.
  79. 79. 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.
  80. 80. 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
  81. 81. Original Lagret som JPEG 10x
  82. 82. Forminsking (JPEG) Svart-hvitt (GIF) Originalbilde (Photoshop-format) Nytt utsnitt 1 (JPEG)Én original - mange Nytt utsnitt 2 versjoner (JPEG)
  83. 83. 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
  84. 84. GIF - 100 Kb JPEG - 40 Kb
  85. 85. GIF - 8 Kb JPEG - 12 Kb
  86. 86. Takk for meg!jakob@webgruppen.no Twitter: @JakobT

×