int 3 f3
DESCRIPTION
INT 3 F3. Medieteknik Del1 Färger, teckensnitt och bildformat. DSV Peter Mozelius. En texts läsbarhet. Teckensnitt Teckengrad Radlängd Radavstånd Papper/Skärm Bakgrundsfärg. Teckensnitt. Teckensnitt kan delas in i två huvudgrupper: Antikva, med anor från renässansen - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: INT 3 F3](https://reader035.vdocuments.pub/reader035/viewer/2022081504/56814759550346895db4980f/html5/thumbnails/1.jpg)
INT 3 F3
Medieteknik Del1
Färger, teckensnitt och bildformat
DSV Peter Mozelius
![Page 2: INT 3 F3](https://reader035.vdocuments.pub/reader035/viewer/2022081504/56814759550346895db4980f/html5/thumbnails/2.jpg)
En texts läsbarhet
Teckensnitt Teckengrad Radlängd Radavstånd Papper/Skärm Bakgrundsfärg
![Page 3: INT 3 F3](https://reader035.vdocuments.pub/reader035/viewer/2022081504/56814759550346895db4980f/html5/thumbnails/3.jpg)
Teckensnitt
Teckensnitt kan delas in i två huvudgrupper: Antikva, med anor från renässansen
MED serifer som i denna föreläsnings rubriker
Några av de antikva-teckensnitt som framtogsunder 1400- och 1500-talet anses allmänt ge mycket god läsbarhet när det gäller löpande text (brödtext) på papper.
![Page 4: INT 3 F3](https://reader035.vdocuments.pub/reader035/viewer/2022081504/56814759550346895db4980f/html5/thumbnails/4.jpg)
En antikva från 1500-talet
Garamond
skuren av Claude Garamond
![Page 5: INT 3 F3](https://reader035.vdocuments.pub/reader035/viewer/2022081504/56814759550346895db4980f/html5/thumbnails/5.jpg)
Teckensnitt
Sanserif, utvecklades under 1800-talet utan serifer som i texten på denna rad
Andra benämningar för sanserif:Grotesk, linjär, gothic, egyptian …
Exempel på sanserifer:Arial, Helvetica, Franklin Gothic och Verdana
![Page 6: INT 3 F3](https://reader035.vdocuments.pub/reader035/viewer/2022081504/56814759550346895db4980f/html5/thumbnails/6.jpg)
Sanserif
Grekisk ursanserif från 500 f Kr.Ett bustrofedon med växlandeskrivriktning för varannan rad.
![Page 7: INT 3 F3](https://reader035.vdocuments.pub/reader035/viewer/2022081504/56814759550346895db4980f/html5/thumbnails/7.jpg)
En modern sanserif
VerdanaDesignad för datorskärmSkuren av Matthew CarterBeställd av MicrosoftHela denna bild är VerdanaEn intervju med Carter finns på:
http://www.webreview.com/1997/11_07/webauthors/11_07_97_10.shtml
![Page 8: INT 3 F3](https://reader035.vdocuments.pub/reader035/viewer/2022081504/56814759550346895db4980f/html5/thumbnails/8.jpg)
Teckengrad/radlängd
Teckengrad = bokstävernas storlek
För god läsbarhet i löpande text: 10 –12 punkter
Radlängd = antal tecken per rad
En ideal rad i en brödtext innehåller 55 – 65 tecken.
![Page 9: INT 3 F3](https://reader035.vdocuments.pub/reader035/viewer/2022081504/56814759550346895db4980f/html5/thumbnails/9.jpg)
Radavstånd
Avståndet mellan rader kallas även kägel. Kägeln ska vara minst lika stor som
textens teckengrad och gärna lite större. Olika radavstånd för olika teckensnitt. Ibland anges teckensnitt – kägel enligt
10/12 med betydelsen:
10 punkters teckengrad / 12 punkters radavstånd
![Page 10: INT 3 F3](https://reader035.vdocuments.pub/reader035/viewer/2022081504/56814759550346895db4980f/html5/thumbnails/10.jpg)
Papper / skärm
En grundregel för brödtext kan vara: Antikva för papperspublikationer Sanserif för det som ska läsas på en
skärm
Olika @media i Cascading Style Sheets
Paus 15 min
![Page 11: INT 3 F3](https://reader035.vdocuments.pub/reader035/viewer/2022081504/56814759550346895db4980f/html5/thumbnails/11.jpg)
Ljus och våglängder
Det synliga spektrumet ca 400-800 nm
Ultraviolett - Synligt ljus - Infrarött Violett 390 - 430 nm Blått 430 - 500 nm Grönt 500 - 580 nm Gult 580 - 600 nm Rött 600 - 750 nm
![Page 12: INT 3 F3](https://reader035.vdocuments.pub/reader035/viewer/2022081504/56814759550346895db4980f/html5/thumbnails/12.jpg)
Färgcirkeln
Komplementfärger är två färger mitt emot varandra i en färgcirkel och om de adderas ger de upphov till vitt ljus.
RedGreenBlueYellowMagenta Cyan
![Page 13: INT 3 F3](https://reader035.vdocuments.pub/reader035/viewer/2022081504/56814759550346895db4980f/html5/thumbnails/13.jpg)
Färgmodeller
RGB-modellen, ett sätt att härma ögat
Färgkänsliga tappar i näthinnan Stavarna registrerar ljusstyrkan RGB för dataskärmar, scanners mm CMYK för tryckprocesser Additiv och Subtraktiv färgblandning HSB för digital bildbehandling mm
![Page 14: INT 3 F3](https://reader035.vdocuments.pub/reader035/viewer/2022081504/56814759550346895db4980f/html5/thumbnails/14.jpg)
FÄRGMODELLER - RGB
RGB - modell för ljus Standard för skärmar Standard för scanners Standard i HTML Standard i Javascript En färgmodell i Java En färgmodell i PhotoShop
![Page 15: INT 3 F3](https://reader035.vdocuments.pub/reader035/viewer/2022081504/56814759550346895db4980f/html5/thumbnails/15.jpg)
Färgmodeller - CMYK
K = Key color
![Page 16: INT 3 F3](https://reader035.vdocuments.pub/reader035/viewer/2022081504/56814759550346895db4980f/html5/thumbnails/16.jpg)
Färg – designregler
Färguppfattningen är individuell MEN Undvik komplementfärger på samma
sida om det inte finns en klar anledning.
Genomgående i Microsoftprodukter Undvik även att blanda alltför många
färger på samma sida om det finns viktig information att läsa.
![Page 17: INT 3 F3](https://reader035.vdocuments.pub/reader035/viewer/2022081504/56814759550346895db4980f/html5/thumbnails/17.jpg)
Färgkombinationer
Hur påverkas färger av omgivande färger ?
Finns det färger på denna sida som INTEharmonierar ?
![Page 18: INT 3 F3](https://reader035.vdocuments.pub/reader035/viewer/2022081504/56814759550346895db4980f/html5/thumbnails/18.jpg)
Bilders färgdjup
Varje pixel i en punktuppbyggd bild innehåller information om sin färg
Hur många bitar som går åt till detta kallas för bildens färgdjupbildens färgdjup 1 bit, 0 eller 1för en s/v bild (streckteckning) 4 bitars = 2*2*2*2 = 16 färger 8 bitar ger 256 färger 16 bitar ger High ColorHigh Color 24|32 bitar ger True ColorTrue Color
![Page 19: INT 3 F3](https://reader035.vdocuments.pub/reader035/viewer/2022081504/56814759550346895db4980f/html5/thumbnails/19.jpg)
Färgkalibrering
Bildskärm - Skrivare RGB - CMYK Bildskärmen kan återge
fler färger än skrivaren Olika färggamuter Perceptuell matchning Kolometrisk matchning
![Page 20: INT 3 F3](https://reader035.vdocuments.pub/reader035/viewer/2022081504/56814759550346895db4980f/html5/thumbnails/20.jpg)
Webbpalett 216
Plattformsoberoende med 216 säkra färger som återges likadant oavsett om det är på en PC, en Mac eller en UNIX-dator
Mindre färger, snabbare att ladda sidan
24-bitars färgdjup ger distorsion på datorer med dåliga grafikkort
PAUS 15 min ??
![Page 21: INT 3 F3](https://reader035.vdocuments.pub/reader035/viewer/2022081504/56814759550346895db4980f/html5/thumbnails/21.jpg)
Bilder och bildformat
Vektorgrafik eller punktgrafik Vektorgrafik: grafiken beskrivs med
formler och noder (Bézierkurvor) Framställs i t ex Adobe Illustrator Skalbart och utrymmessnålt Fungerar ej för fotografier SVG Scalable Vector Graphics
![Page 22: INT 3 F3](https://reader035.vdocuments.pub/reader035/viewer/2022081504/56814759550346895db4980f/html5/thumbnails/22.jpg)
Bilder och bildformat
Punktgrafik innebär att bilderna är uppbyggda av pixlar (bitmapping) Filstorlek = antalet pixlar x färgdjupet Utskriftsstorlek = pixlar / upplösningen Resampling: Upsampling-Downsampling Uppsampling = interpolering Jämna multiplar vid inscanning-
uppsampling
![Page 23: INT 3 F3](https://reader035.vdocuments.pub/reader035/viewer/2022081504/56814759550346895db4980f/html5/thumbnails/23.jpg)
Bilder och bildformat
Bitmappade bildformat som t ex: bildfil.bmp bildfil.tiff bildfil.psd
Hög kvalitet och metainformation ger stora filer som tar tid att ladda via
nätet
![Page 24: INT 3 F3](https://reader035.vdocuments.pub/reader035/viewer/2022081504/56814759550346895db4980f/html5/thumbnails/24.jpg)
Digitala bilder Då datorskärmarnas upplösning fortfarande
är så låg som 96 dpi så kan vi på datorn ändå inte tillgodagöra oss den höga kvaliteten.
Det är också nödvändigt att minska bildstorleken vid internetpublicering.
Stora filer ger lång nedladdningstid.
Lösningen är komprimeringsalgoritmer. Ett exempel är GIF-bildens LZW-
komprimering.
![Page 25: INT 3 F3](https://reader035.vdocuments.pub/reader035/viewer/2022081504/56814759550346895db4980f/html5/thumbnails/25.jpg)
Bildformat för Internet
GIF, en gammal trotjänare GIF87a och den uppdaterade GIF89a 8 bitars färgdjup - 256 färger Transparens för 1 färg Interlace (sammanflätning) Animering genom en serie av GIF-
bilder Passar bra för diagram, ikoner och
teckningar
![Page 26: INT 3 F3](https://reader035.vdocuments.pub/reader035/viewer/2022081504/56814759550346895db4980f/html5/thumbnails/26.jpg)
Bildformat för Internet
JPEG-formatet Framtaget av Joint Photographic Experts
Group 24-bitars färgdjup för fotorealistiska bilder Förstörande irreversibel kompression Passar för fotografier, målningar och liknande Progressiva JPEG-bilder i stil med GIF-interlace Stödjs precis som GIF av de flesta webb-läsare
![Page 27: INT 3 F3](https://reader035.vdocuments.pub/reader035/viewer/2022081504/56814759550346895db4980f/html5/thumbnails/27.jpg)
Bildformat för Internet
PNG-bilder Portable Network Graphics
PNG = GIF + JPEG + lite till Icke-förstörande kompression utan ägare med bättre packratio än GIF/LZW
16-bitars alfa-kanal för transparens Framtidens bildformat?
![Page 28: INT 3 F3](https://reader035.vdocuments.pub/reader035/viewer/2022081504/56814759550346895db4980f/html5/thumbnails/28.jpg)
Framtidens format
Det har i flera år talats om att PNG ska ta över
Det har gått lite trögt
Nu finns också JPEG2000JPEG2000 En vidareutveckling av JPEG Förbättrad komprimering:
högre packratio – mindre filer högre kvalitet vid kraftig komprimering
![Page 29: INT 3 F3](https://reader035.vdocuments.pub/reader035/viewer/2022081504/56814759550346895db4980f/html5/thumbnails/29.jpg)
Bildformat i Authorware
Stödjer internetformaten jpg gif png
Men även ”Windowsformatet” .bmp Och Photoshops .psd MEN då måste
först eventuella lager ha plattats ihop till ett enda
Animerade gif-bilder går också bra
![Page 30: INT 3 F3](https://reader035.vdocuments.pub/reader035/viewer/2022081504/56814759550346895db4980f/html5/thumbnails/30.jpg)
Aliasing
I bilder < 500KB Ögat kan se pixeluppbyggnaden Framför allt problem med nästan
horisontella eller nästan vertikala linjer Syns extra tydligt vid skarpa linjer och
detaljer med hög kontrast mot bakgrunden Som motmedel finns tekniken:
anti-aliasing
![Page 31: INT 3 F3](https://reader035.vdocuments.pub/reader035/viewer/2022081504/56814759550346895db4980f/html5/thumbnails/31.jpg)
För dig som vill läsa mera Delar av materialet till denna föreläsning
är hämtat från följande litteratur: Christer Hellmark, Typografisk handbok Astrid Haugland, Digital bildbehandling Jennifer Niederst, Web design in a nutshell Chapman & Chapman, Digital multimedia Lon Barfield, Design for new media
Finns på välsorterade bibliotek.
![Page 32: INT 3 F3](https://reader035.vdocuments.pub/reader035/viewer/2022081504/56814759550346895db4980f/html5/thumbnails/32.jpg)
Länkar till övningar
Hemsida med kursmaterial: http://dsv.su.se/~mozelius/INT3/
Photoshopövningar: http://www.dsv.su.se/~mozelius/photoshop/
Tack för idag!Tack för idag!