BILD Objektgrafik, Pixelgrafik & Färglära
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
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
BILD Physical pixels skärmen TFT LCD Thin film transistor liquid crystal display (Active matrix) CRT cathode ray tube
BILD CG Logical pixels bilden
Objektgrafik (Vektorgrafik) Kan bestå av Enkla kurvor Raka linjer Cirklar Kvadrater Teckensnitt Postscript
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
Cartesian-coordinate-system
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
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
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 0-255 labba på ex. 8bit vs 24bit osv..
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
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,03937 45 x 0,03937 = 1,77165 inch 72 ppi skulle då betyda 72 x 1,77165 = 128 (ca) pixlar Square 128 x 128 = 16 384 pixlar för att beskriva kvadraten
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
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 16 0000, 0001, 0011, 0111, 1111 0010, 0100, 1000, 0110, 1100 1010, 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 8+8+8+8=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
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 ) =2 160 000 pixlar Streck 1bit/pixel = (2 160 000 / 8) x 1 = 270 000 byte = 270kb Gråskala 8bit/pixel = (2 160 000 / 8) x 8 =2 160 000 byte = 2,16Mb RGB CMYK* 24bit/pixel = (2 160 000 / 8) x 24 = 6 480 000 byte = 6,48Mb 32bit/pixel = (2 160 000 / 8) x 32 = 8 640 000 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
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
Exempel http://www.billybussey.com/main.html http://www.stevengiesler.com/index_f.html http://thisisswedishsnus.com http://www.sevenedge.be/ http://www.ashesandsnow.org/
FÄRG Favoritfärg? Hur fungerar färger runtomkring oss? Vad är färg?
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.
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
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
LED
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)
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
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
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
15 / 105 grader 0 / 90 grader 15 / 75 grader 45 grader
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
Färglära NCS S 2050-Y40R
Websafe colors (då det endast existerade skärmar som klarade 256 färger)
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
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
RGB pixels in an LCD TV (on the right: an orange and a blue color; on the left: a close-up of pixels)
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...
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
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.
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
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
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
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
Bryce
Maya
Maya
Blender 2
Blender 2
3D Studio Max
3D Studio Max
3D Studio Max
3D Studio Max
3D Studio Max
3D Studio Max
3D Studio Max
3D Studio Max
Poser (3)
Poser (6)
Poser
Gif animator
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!