ATT ARBETA MED VEKTORGRAFIK Helene Brogeland Vektorgrafik och animation VT 2014 2014-04-29
Inledning Före aktuell kurs hade jag bara en vag uppfattning av innebörden av vektorgrafik och hade aldrig jobbat med denna typ av grafik utan visste enbart att man ofta använde sig av denna vid exempelvis framtagning av logotyper för tryckning. Eftersom jag i princip inte tidigare arbetat med grafik och grafisk design överhuvudtaget och absolut inte med vektorbaserad grafik har jag inte haft tillgång till någon litteratur inom området utan har fått förlita mig på information och artiklar på webben. Jag har upplevt det svårt att hitta något större utbud av info utan den information jag funnit har i mångt och mycket tagit upp de mest grundläggande skillnaderna mellan vektor- och bitmapgrafik. Jämförelse mellan vektor- och bitmapgrafik Om man jämför de två typerna av grafik så är vektorgrafik lämpligast att använda vid framtagning av objekt som enbart innehåller/utgörs av geometriska former medan den är mindre lämplig för att ge bra resultat när det gäller fotografier, särskilt de med stora färgskillnader. I fallet med fotografiska objekt fungerar det mycket bättre med bitmaptekniken eftersom uppbyggnaden med pixlar underlättar övergången mellan olika färger/toner (medium: online, tillgänglig: http://sv.wikipedia.org/wiki/vektorgrafik, hämtad: 20140429). Nedan följer en sammanställning över några för- och nackdelar med vektorgrafik i jämförelse med bitmapgrafik. Fördelar med vektorgrafik Filstorlek: Ett grafiskt objekt som är uppbyggt med vektorgrafik ger en relativt liten filstorlek. Eftersom en vektorbaserad bild består av matermatiskt uträknade komponentet så blir informationsmängd och filstorlek samma oberoende av dimensionerna på bilden. För ett bitmapobjekt är däremot filstorleken beroende av objektets dimensioner eftersom ju större en bild är desto fler pixlar behövs, vilket medför mer info i filen (medium: online, tillgänglig: http://sv.wikipedia.org/wiki/vektorgrafik, hämtad: 20140429). Kvalitet vid skalning: På grund av att komponenterna i den vektorbaserade bilden är matematiskt representerade blir kvaliteten på bilden oförändrad även om man förstorar eller förminskar den. Var de olika komponenterna börjar och slutar bestäms av ankarpunkter. När man ändrar storleken räknas det ut nya koordinater för ankarpunkterna och dessa flyttas till respektive ny position (medium:online, tillgänglig: http://edu.ikd.hik.se/studiemtrl/bilder/digitala_bilder/ objektgrafik.html, hämtad: 20140429). För att ändra storlek på en pixeluppbyggd bild måste datorn lägga till eller ta bort pixlar. Detta kallas sampling och ger i de flesta fall en viss försämring av kvaliteten särskilt när man förstorar en bild. I det fallet måste datorn gissa färgen på de pixlar som skall läggas till medium: online, tillgänglig: http://edu.ikd.hik.se/studiemtrl/bilder/digitala_bilder/ pixelgrafik.html, hämtad: 20140429). Flexibilitet: Vektorbaserade bilder är mer flexibla än bitmapbilder eftersom man lättare kan ändra storlek och form (i Flash via bland annat free transform och genom att dra/flytta på linjer och ankarpunkter). Resultatet för vektorbaserade bilder blir ofta bättre för skärmar/skrivare med högre upplösning än vad som är fallet för bitmapbilder. De senare ser likadana ut oberoende 2
av utrustningens upplösning (medium: online, tillgänglig: http://www.webopedia.com /TERM/V/vector_graphics.html, hämtad: 20140429). Nackdelar med vektorgrafik Vektorgrafiken ger inte särskilt bra resultat för vanliga fotogografier med ett större antal färger. Där ger bitmaptekniken en mycket naturligare övergång mellan de olika färgfälten. (medium: online, tillgänglig: http://sv.wikipedia.org/wiki/vektorgrafik, hämtad: 20140429). Vektorgrafik fungerar i normala fall inte på webben. Om du har en bild i vektorformat som du vill använda på din webbsida måste du först spara den i ett format som fungerar på webben (medium: online, tillgänglig: http://www.viaduct.se/main.php?articleid=190, hämtad: 20140429). De filformat som idag används på webben är sådana som grundar sig på bitmapgrafik. Användande av Flash Före den här kursen hade jag uppfattningen av att användandet av Flash var på nedgång men enligt Adobe har 99% av alla datorer med internetuppkoppling tillgång till någon typ av Flash plug-in (Felke-Morris, 2012, s 288). Enligt Christian Ohlsson (medium: online, tillgänglig: http://cumulus.ei.hv.se/~ imcoh/kurser/vektorgrafik-och-animation/kursintroduktion/, hämtad: 20140429) är Adobe Flash i princip den enda applikationen där man både kan rita vektorgrafiska objekt, animera dessa och skapa interaktivitet. En fördel med Flash är att man på ett smidigt sätt kan skapa och spara komponenter (i form av symboler) i bibliotek och det är enkelt att göra interaktivitet. Under den här kursens gång har jag upplevt problem utifrån ett användarperspektiv vad det gäller stöd för Flash-filer i mobila enheter. Jag har provat att se mina Flash-filer i både mobil och surfplatta med Android OS men har inte lyckat med detta. Detta beror troligen på att Adobe slutade supporta Flash Player för mobila enheter efter version 11.1. Man stöder fortfarande Flashbaserat innehåll för mobila enheter via Adobe AIR (medium: online, tillgänglig: http://en.wikipedia.org/wiki/adobe_flash, hämtad: 20140429). I Adobe Flash CS6 som jag använt mig av under kursen finns AIR som tre olika dokumenttyper, AIR, AIR för ios och Air för Android. Jag har dock inte gjort något försök i att konvertera mina filer av Actionscript 3.0 -typ till AIR. En svaghet med Adobe Flash som Christian nämner i kursintroduktionen (medium: online, tillgänglig:http://cumulus.ei.hv.se/~imcoh/kurser/vektorgrafik-och-animation/ kursintroduktion/, hämtad: 20140429) är ur perspektivet att man skall skapa responsiva webbsidor. Flash använder sig av en pixelbaserad bredd och det fungerar inte så bra om man tänker responsivt (dvs. arbetar nästan uteslutade med procentuella förhållanden mellan en webbsidas komponenter). Det finns dock en lösning/alternativ för detta. Genom att definiera object { max-width: 100%} i CSS för webbsidan med Flashobjekt (på samma sätt som för img) kan man få objektet att anpassa sig efter storleken på aktuell skärm (förutsatt att enheten kan hantera Flash överhuvudtaget, se ovan) (Sawyer McFarland, 2013, s 473). 3
Att arbeta med vektorgrafiska animationer Sammanfattningsvis måste jag säga att jag upplevt arbetet i Flash som mycket givande och då särskilt att animera och skapa interaktivitet och jag ser fram emot att få arbeta vidare med detta i nästkommande kurs Multimedieproduktion. Angående själva ritandet så har jag lyckats åstadkomma ungefär samma nivå som om jag skulle ritat vanligt med papper och penna men det har varit spännande att kunna ge sina skapelser liv genom animeringen. Vid ritandet har jag några gånger krånglat till det hela genom att inte vara helt uppmärksam på om jag använt mig av objektritläge eller ej. Detta visar på att man måste ha klart för sig vad man vill åstadkomma innan man börjar skapa ett visst objekt. Jag har försökt att arbeta med så många lager som möjligt och dessutom ha alla lager låsta förutom det jag för tillfället arbetar med. Dock har det hänt att symboler etc. hamnat på fel lager vilket ibland har skapat viss förvirring. När jag använt mig av animering i animeringen (exempelvis fjärilen som rör vingarna samtidigt som den rör sig framåt i landskapet) har jag dock upplevt svårigheter några gånger med att hålla reda på i vilken symbol/tidslinje som varje enskild animering har varit placerad. Jag tror detta problem mest har berott på att jag i början skapade alla symboler som grafik och sedan skapades ett nytt objekt som filmklipp när jag skulle animera symbolen. I samband med arbetet med bannern (där vi hade en maximal filstorlek) upplevde jag det svårt att avgöra hur mycket de olika komponenterna påverkade filstorleken i SWF-filen. Gjorda designval under kursen Om jag skall vara ärlig har jag inte direkt aktivt gjort uttalade designval under mitt arbete. Det jag känner att jag genomgående har tänkt på (och tycker att jag lyckats relativt bra) är att få balans och perspektiv/djup i mina alster och att jag särskilt i bannern har lyckats få naturliga rörelser i de flesta av mina animeringar. I arbetet med den flygande fjärilen (lab 2) försökte jag jobba mycket med att få fram djup i bilden av landskapet. Detta åstadkoms genom noggrann placering av designelementen, exempelvis ett större träd i förgrunden, en klunga träd lite längre bort (mellanplan) och ett berg placerat i horisonten (bakgrunden). Enligt Bergström (2012, s 186) kan man skapa en samverkan mellan en bilds olika delar genom att arbeta med dess bildbyggnad och där bildrummet består av förgrund, mellanplan och bakgrund. I lab 2 har jag även jobbat med stora kontraster vad det gäller färger för de olika komponenterna. Jag har använt mig av klara, rena färger som jag anser stämmer bra överens med den lite naiva/enkla stilen på komponenterna. Enligt Bo Bergström (2012, s 262) finns det en del skrikande färger där färgerna kommer från motstående kvandranter på färgcirkeln och den allra starkast kontrasten uppstår mellan rött och grönt. Detta har jag använt mig av i aktuell lab. 4
Referenser Bergström, Bo. (2012) Effektiv visuell kommunikation. 8. Uppl. Stockholm: Carlsson Bokförlag Felke-Morris, T. (2012) Basics of Web design HTML5 & CSS3, Addison-Wesley Sawyer McFarland, D. (2013) CSS3 the missing manual, O Reilly Media Inc. http://cumulus.ei.hv.se/~imcoh/kurser/vektorgrafik-och-animation/kursintroduktion/ http://edu.ikd.hik.se/studiemtrl/bilder/digitala_bilder/objektgrafik.html http://edu.ikd.hik.se/studiemtrl/bilder/digitala_bilder/pixelgrafik.html http://en.wikipedia.org/wiki/adobe_flash http://sv.wikipedia.org/wiki/vektorgrafik http://www.webopedia.com/term/v/vector_graphics.html http://www.viaduct.se/main.php?articleid=190 5