BILD Objektgrafik, Pixelgrafik & Färglära

Transkript

1 BILD Objektgrafik, Pixelgrafik & Färglära

2

3

4

5

6

7 BILD Webben i början kritik designers som vi gör mot papper gör vi mot webben har nu anpassat sig (börjat) specifika filformat Design regler

8 BILD CG - Computer Graphics Delas in i två olika typer Vektor och bitmap En bild är uppbyggd av pixlar Physical pixels skärmen Logical pixels bilden (bitmap) För att en bild ska synas måste den renderas (Rendering) the process of generating a pattern of pixels from a model Läsa filen som besrkiver datastrukturen som motsvarar bildens beskrivning i filen

9 BILD Physical pixels skärmen TFT LCD Thin film transistor liquid crystal display (Active matrix) CRT cathode ray tube

10 BILD CG Logical pixels bilden

11 Objektgrafik (Vektorgrafik) Kan bestå av Enkla kurvor Raka linjer Cirklar Kvadrater Teckensnitt Postscript

12

13

14 Vektorgrafik Består av matematiska kurvor och linjer. objektgrafik Vektorgrafik består av en linje (vektor) mellan två punkter. (Matematiskt beräknad) För att skapa mjuka linjer många små raka Cartesian Coordinates nummerpar som beskriver en position i en 2d rymd x,y kordinater ex. 0,0,200,200 (0,0) (200,200) Objektkrafik (vektorgrafik) består av Bézierkurvor, där ett antal (4) ankarpunkter styr en kurvas utformning. (Matematiskt beräknad) I motsats till vektorer består bezierkurvor av små Böjda kurvor -> kan ta vilken form som helst. För att skapa en form läggs flera kurvor efter varandra. Logotyper, Illustrationer och nyhetsgrafik är exempel på bilder som oftast består av objektgrafik Bspline i exempelvis mesh -3D I 3D jobbar man med x,y,z kordinater 2D x,y

15 Cartesian-coordinate-system

16 Objektgrafik / Vektorgrafik Spline curve Linjär kvadratisk Kubisk De Boor algorithm bezierkurvor [Number of knots = the degree] Bsplinekurvor Basis spline Piegl. L., Tiller. W. (1997) The Nurbs book Marsh. D. (2005) Applied Geometry for Computer Graphics and CAD Bild fritt från Wikipedia.org

17 Objektgrafik / Vektorgrafik Linjär Bézier (t) i den linjära bézierkurvan kan beskrivas som hur långt B(t) är från P0 till P1 Så om (t) = 0.5, är B(t) i mitten av P0 och P1 t varierar från 0 till 1 och B(t) beskriver en rak linje från P0 till P1 Kvadratisk Bézierkurva Kubisk Bézierkurva Piegl. L., Tiller. W. (1997) The Nurbs book Marsh. D. (2005) Applied Geometry for Computer Graphics and CAD Bilder fritt från Wikipedia.org

18 Pixelgrafik (Bitmap) En bild delas upp i små kvadratiska bildelement i olika toner/färgnyanser. Tänk mosaikbitar! Dessa bildelement kallas pixlar (från engelskan Picture Element). Beståndsdelarna i ett bildelement/pixel kallas bitar bits Bit är den enklaste partikeln i den digitala världen. Den kan vara 1 eller 0, av eller på, falsk eller sann. (Map är en två dimensionell matrix av bitar ) därav namnet bitmap Antalet bits som anväds för att beskriva ett kulörvärde = colour depth RGB kan representeras av 3 byte (3x8=24) 24bit (0,0,0) svart (255, 255, 255) vitt Varje 8 bitars byte kan innehålla ett värde från labba på ex. 8bit vs 24bit osv..

19 Upplösning ( Image resolution) Om en pixelbaserad bild ska tryckas i en viss storlek, kommer bilden bestå av ett visst antal pixlar/centimeter eller tum. Det vill säga: Pixlar per längdenhet Måttet för antal pixlar per längdenhet kallas Upplösning Mäts i ppi (pixels per inch) Felaktigt används dpi Dpi (dots per inch) = exponeringspunkter per tum)) Enhet för att beskriva utskriftsupplösningen hos exempel skrivare och sättare vid låg upplösning Vi uppfattar pixlarna och bilden får ett mosaiklikande rutmönster. vid hög upplösning Ögat kan inte urskilja de små pixlarna och uppfattar det som en helhet

20

21 45mm square den är lagrad med 72ppi den kan visas på en 72dpi monitor i naturlig storlek utan att skalas vad behöver vi veta? 1 inch = 25,4 mm 1/25,4 = 0, x 0,03937 = 1,77165 inch 72 ppi skulle då betyda 72 x 1,77165 = 128 (ca) pixlar Square 128 x 128 = pixlar för att beskriva kvadraten

22 Bitmapped images En bild består av en array av pixel värden. Den har inga fysiska dimensioner! den fysiska storleken på en bild bestäms av dess output device föregående ex. fyrkant som är 72ppi blir på; skärm med högre upplösning ex 115dpi kvadraten ca 28mm Utskriven med en printer i upplölsningen 600 dpi ca 5mm Physical dimension = pixel dimension / device dimension Scannar vi en bild i 600dpi så kommer bildens upplösning bli 600ppi

23 Pixelgrafik (Bitmap) Exempel Bit depth Antal färger Binär kombination 1 bit 2 0, 1 2 bitar 4 00, 01, 10, 11 4 bitar , 0001, 0011, 0111, , 0100, 1000, 0110, , 0101, 1110, 1101,1001, 101 Streck 1bit/pixel =2¹ = 2 toner; svart och vitt Gråskala 8bitar/pixel =2 = 256 gråtoner Indexerad färg 3-8bitar/pixel =2 = 256 kulörer RGB 8+8+8=24bitar/pixel =2 x 2 x 2 = 256 x 256 x 256 = 16.7 miljoner kulörer CMYK =32bitar/pixel =2 x 2 x 2 x 2 = 256 x 256 x 256 x 256 = 4.3 miljarder kulörer (är igentligen bara 16.7 miljoner

24 Exempel Filstorlek 8 bits = 1 byte Bild 10 x 15 cm med en upplösning på 300 ppi centimeter = 120 pixlar per (1 inch = 2,5cm) (10 x 120) x (15 x 120 ) = pixlar Streck 1bit/pixel = ( / 8) x 1 = byte = 270kb Gråskala 8bit/pixel = ( / 8) x 8 = byte = 2,16Mb RGB CMYK* 24bit/pixel = ( / 8) x 24 = byte = 6,48Mb 32bit/pixel = ( / 8) x 32 = byte = 8,64Mb * Då bilden kommer från RGB som har 16.7 miljoner kulörer och inga fler kulörer skapas i separation får vi fortfarande 16.7 miljoner kulörer

25 Program för pixel- och objektgrafik Objektgrafik Adobe illustrator Macromedia Freehand (Flash) Dessa program tillsammans med Adobe Streamline kan omvandla pixelgrafik till objektgrafik Pixelgrafik Adobe Photoshop Adobe Photoshop Elements Macromedia Fireworks Jasc Paint shop (nu Corel) CorelDraw (har konverteringsmöjlighet för pixel Objekt) GIMP (open source) linux/windows

26 Exempel

27 FÄRG Favoritfärg? Hur fungerar färger runtomkring oss? Vad är färg?

28 Färglära Kulör Vad är en kulör? Ögat uppfattar ljus med olika frekvens När vitt ljus faller mot en yta reflekteras bara en del av kulörerna tillbaka mot ögat. Övrigt absorberas Svarta objekt absorberar allt vitt ljus som skiner/lyser på dem Vita objekt reflekterar allt vitt ljus som träffar dem det infallande ljuset filtreras av ytan Den blandning av våglängder som reflekteras av ytan, uppfattar ögat som ytans kulör.

29 Färglära Kulör Additiv kulörblandning RGB (255,255,255) adderar ljus som har tre olika grundkulörer R, G, B RGB-systemet skapar alltså en kulör genom att blanda ljus från tre olika källor, röd, grön, blå. Hexadecimal värde: #8032FF

30 Används i bildskärmar, TV, video-projektorer. En bildskärm består av ett antal pixlar. Varje pixel innehåller tre små ljuskällor, Röd, Grön, Blå Färgen projiceras LCD TFT

31 LED

32 Färglära Kulör Subtraktiv kulörblandning CMYK CYAN, MAGENTA, GULT (primärkulörer) Blandar tre tryckfärger Filtrerar infallande vitt ljus som innehåller hela spektrumet av kulörer Ljuset reflekteras på en vit yt, vissa delar av ljuset släpps igenom andra absor av tryckfärgen och omvandlas till värme. Subtraherar kulörer från infallande ljus Subtrativ Då den svarta kulör som uppstår inte är tillräklig har Svart som färg tillkommit, därav K som i black (även kallad Key color)

33 Det grafiska produktionsflödet Utmatning/Rippning Rastrering (latin rastrum = dela upp) Grunden för all utskrifts- och tryckteknik Ett fotografi innehåller kontinuerliga toner steglösa tonövergångar innehåller alla kulörtoner En tryckpress kan inte trycka kontinuerliga toner arbetar med tryckande och icke-tryckande ytor (stämpel) för att återge gråtoner används raster med raster simuleras gråtoner, trots att man bara använder svart och vitt Rastret lurar ögat att se kontinuerliga tonövergångar Ett raster består av små punkter som ligger längs fasta linjer storlek på punkter varierar beroende på vilken ton som ska simuleras I ljusa partier är punkterna små I mörka partier är punkterna stora

34 Det grafiska produktionsflödet Utmatning/Rippning Rasterpunkter räknas fram i en så kallad ripp Raster Image Processor, RIP Exponeras på en grafisk film i en sättare Rasterpunktens uppbyggnad byggs upp av ett antal exponeringspunkter i sättaren upplösningen mäts i dpi! (dots per inch) antal exponeringspunkter per tum Exponeringspunkterna placeras i ett fast rutmönster, en rastercell, så att de tillsammans bildar rasterpunkten. Rasterpunkten byggs upp inifrån och ut i rastercellen Antalet exponeringspunkter som används för att bygga upp rasterpunkten bestämmer rasterpunktens storlek Den minsta består av endast en exponeringspunkt och den största av alla exponeringspunkter i rastercellen Rastercellens storlek styrs i sin tur av rastertätheten och sättarens upplösning

35

36 Det grafiska produktionsflödet Utmatning/Rippning Rastervinklar Hjärnan uppfattar lätt mönster som ligger runt 0 och 90 grader mindre lämpliga för raster För att ett raster ska bli så osynligt som möjligt vrider det 45 graders vinkel Vid tryck med fyra färger (CMYK) måste varje delfärgs raster placeras i olika vinklar mot varandra för att inte skapa oönskade interferensmönster Moiré för offsettryck rekomenderas följande vinklar. får då en förskjutning på 30 grader mellan de tre mest synliga kulörerna

37 15 / 105 grader 0 / 90 grader 15 / 75 grader 45 grader

38

39 Färglära Kulör Pantone Matching system PMS Dekorfärg (Spot colour) för att slippa trycka en färg med fyrfärgstryck En ljusgul fär är ljusgul och vi behöver inte lura ögat med en rasterton som hos CMYK-systemet PMS har en större kulörrymd än CMYK Bygger på nio olika grundfärger och omfattar totalt 1114 kulörer Normalt att logotyper är angivna med Pantone Förpackningar

40 Färglära NCS S 2050-Y40R

41 Websafe colors (då det endast existerade skärmar som klarade 256 färger)

42 Färglära Kulör HSB eller NMI Hue, saturation, birghtness eller Nyans, Mättnad och intensitet (ljushet) Ett kulörsystem som liknar ögats sätt att upfatta kulörer B A = hue Nyans Vilken kulörton B = Saturation Mättnad Starkare / svagare C = Brightness Intensitet Hur mycket svart eller vitt A C

43 Färglära problem med färger / Kulör CMYK RGB CMYK mindre kulörrymd RGB ljus Skrivare Laser Bläck pulver flytande färg Papper RGB Enheter CMYK Enheter

44 RGB pixels in an LCD TV (on the right: an orange and a blue color; on the left: a close-up of pixels)

45 Bildhantering - Filromat GIF 8-bitar, 256 färger indexerat. Komprimerar rad för rad Bra för stora ytor med samma färg. Horisontella / Vertikala linjer. Skapa animeringar. Transparent bakgrund. Används i huvudsak på webb Utdöd? optimering,transparency Små bilder kan sparas som gif...

46 PNG (Portable Network Graphics) uppdaterad gif tillåter mer än 256 kulörer Upp till 24 bitar LZW liknande komprimeringsmetod Transparent Gif hanterade antingen eller PNG hanterar nyanser

47 JPEG 24-bit (miljoner färger) Är en komprimeringsmetod men också ett eget format Bäst för bilder med jämna färgövergångar. Bra format då det är plattformsoberoende Packas upp innan de visas i webbläsaren. Olika verktyg ger olika resultat vad gäller optimering.

48

49

50 EPS (Encapsulated PostScript) Kan sparas som 8-bitars format eller i 32-bitars format Hanterar både objektgrafik och pixelgrafik Kan sparas med raster Kan jpeg komprimeras Kan inte påverkas i layoutprogram Större fil än TIFF

51 TIFF Öppet bildformat för pixelbilder En instruktionsbok för att öppna bilden Kan LZW-komprimeras Kan ändra kulör, kontrast och ljushet i layoutprogram Kan inte innehålla rasterinformation

52 PDF (Portable Document Format) Plattformsoberoende Används till e-böcker, tidskrifter, artiklar, grafiskt material Delvis låst släkt med postscript Fördelar Kan skriva ut en sida i en fil Mindre filstorlek Standard för digital leverans av trycksaker

53 LZW-komprimering Kan användas i grafiska sammanhang när bilder sparas i TIFF-format. Förstör inte bilden Kan användas i TIFF-format och monteras direkt på sidan Bra för streckbilder Minskar inte filerna mycket Tar längre tid att öppna och spara

54 Bryce

55 Maya

56 Maya

57 Blender 2

58 Blender 2

59 3D Studio Max

60 3D Studio Max

61

62

63 3D Studio Max

64 3D Studio Max

65 3D Studio Max

66 3D Studio Max

67 3D Studio Max

68 3D Studio Max

69 Poser (3)

70 Poser (6)

71 Poser

72 Gif animator

73 Uppgift Baserat på tilldelat ord ska ni skapa ett kollage som motsvara ordet. Den andra gruppen ska sen tolka ert kollage och diskutera bildval etc för att försöka komma fram till vilket ord som ligger bakom Text får ej användas!