Presentation laddar. Vänta.

Presentation laddar. Vänta.

INT 3 F3 Medieteknik Del1 Färger, teckensnitt och bildformat DSV Peter Mozelius.

Liknande presentationer


En presentation över ämnet: "INT 3 F3 Medieteknik Del1 Färger, teckensnitt och bildformat DSV Peter Mozelius."— Presentationens avskrift:

1 INT 3 F3 Medieteknik Del1 Färger, teckensnitt och bildformat DSV Peter Mozelius

2 En texts läsbarhet  Teckensnitt  Teckengrad  Radlängd  Radavstånd  Papper/Skärm  Bakgrundsfärg

3 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 framtogs under och 1500-talet anses allmänt ge mycket god läsbarhet när det gäller löpande text (brödtext) på papper.

4 En antikva från 1500-talet Garamond skuren av Claude Garamond

5 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

6 Sanserif Grekisk ursanserif från 500 f Kr. Ett bustrofedon med växlande skrivriktning för varannan rad.

7 En modern sanserif  Verdana Designad för datorskärm Skuren av Matthew Carter Beställd av Microsoft Hela denna bild är Verdana En intervju med Carter finns på: 7_10.shtml

8 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.

9 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

10 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  i Cascading Style Sheets Paus 15 min

11 Ljus och våglängder  Det synliga spektrumet ca nm Ultraviolett - Synligt ljus - Infrarött Violett nm Blått nm Grönt nm Gult nm Rött nm

12 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. Red Green Blue Yellow Magenta Cyan

13 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

14 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

15 Färgmodeller - CMYK K = Key color

16 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.

17 Färgkombinationer Hur påverkas färger av omgivande färger ? Finns det färger på denna sida som INTE harmonierar ?

18 Bilders färgdjup  Varje pixel i en punktuppbyggd bild innehåller information om sin färg bildens färgdjup  Hur många bitar som går åt till detta kallas för bildens 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 High Color 16 bitar ger High Color True Color 24|32 bitar ger True Color

19 Färgkalibrering  Bildskärm - Skrivare  RGB - CMYK  Bildskärmen kan återge fler färger än skrivaren  Olika färggamuter  Perceptuell matchning  Kolometrisk matchning

20 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 ??

21 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

22 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

23 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

24 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.

25 Bildformat för Internet  GIF, en gammal trotjänare  GIF87a och den uppdaterade GIF89a  8 bitars färgdjup 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

26 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

27 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?

28 Framtidens format  Det har i flera år talats om att PNG ska ta över  Det har gått lite trögt JPEG2000  Nu finns också JPEG2000  En vidareutveckling av JPEG  Förbättrad komprimering: högre packratio – mindre filer högre kvalitet vid kraftig komprimering

29 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

30 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

31 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.

32 Länkar till övningar  Hemsida med kursmaterial:  P hotoshopövningar: Tack för idag! Tack för idag!


Ladda ner ppt "INT 3 F3 Medieteknik Del1 Färger, teckensnitt och bildformat DSV Peter Mozelius."

Liknande presentationer


Google-annonser