Extern grafik – distans

Vad är det?

Extern grafik innebär all grafik som inte skapats direkt i Axure. Det kan exempelvis vara grafiska element som skapats i andra program som Photoshop eller Illustrator.

När används det?

Extern grafik kan användas om det inte går att återskapa samma effekter med Axures egna verktyg eller om det kanske är mycket enklare att skapa grafiken i externa program. Ibland kan det också vara lättare att använda sig av extern grafik om det redan finns sådant material färdigt, istället för att göra om samma jobb i Axure.

Hur används det?

Extern grafik kan användas för att skapa enskilda grafiska element som exempelvis knappar, eller för att skapa större grafiska delar där huvuddelen av grafiken är skapad i ett externt program och där man sedan använder sig av hot spots i Axure för att göra grafiken interaktiv. Man kan välja att skapa all grafik externt för att sedan göra den interaktiv i Axure, eller kombinera extern grafik med Axures egna komponenter.

Det går att importera både pixelbaserad och vektorbaserad grafik i Axure. Axure stödjer följande filformat: JPG, PNG, GIF, BMP och SVG. Det är alltså viktigt att i första hand spara ner sin externa grafik i något av ovanstående filformat för att det sedan ska fungera i Axure.

Fördelen med att importera vektorbaserad grafik är att det går att ändra storlek på grafiken utan att den förlorar i kvalitet och det går även att modifiera och arbeta vidare med den i Axure. Om man istället vill importera pixelbaserad grafik är det viktigt att tänka på att den har tillräckligt hög upplösning för att det ska bli bra kvalitet på bilderna. Det är också viktigt att tänka på att de pixelbaserade bilderna inte är skalbara på samma sätt som de vektorbaserade eftersom de kan tappa i kvalitet om man vill göra dem större i Axure.

Instruktion

Nedan följer instruktioner samt demonstrationer på hur man kan använda sig av extern vektorbaserad och pixelbaserad grafik i Axure. I våra exempel har vi valt att använda oss av de externa programmen Illustrator och Photoshop.

Vi kommer som exempel att skapa ett julkort i Axure med hjälp av både element från Axure, Illustrator och Photoshop.

Vektorbaserad grafik

För att spara grafik från ett vektorbaserat program måste filen sparas i SVG-format. SVG står för Scalable Vector Graphics och är ett XML-baserat vektorgrafik-format för tvådimensionella bilder. XML betyder att det är ett sidbeskrivningsspråk som definierar vilka element eller attribut som ska användas. Syftet med XML är att kunna utväxla data mellan olika informationssystem.

När SVG-filen ska öppnas i Axure måste den konverteras för att kunna återskapa alla separata former från Illustrator, dessa former går sedan att arbeta vidare med i Axure. Exempelvis kan man byta färg, ändra storlek, byta plats på dem och mycket mer.

1. Spara grafiken från valfritt vektorbaserat program i SVG-format.

1. Öppna Arkiv och tryck på Spara som.

2. Spara filen som SVG-fil.

2. Importera SVG-filen till Axure

1. Hitta filen där du sparat den på datorn 

2. Dra in filen i Axure

3. Konvertera SVG till Shapes

1. Högerklicka på grafiken

2. Dra musen till Transform Image och klicka sedan på Convert SVG Shapes

4. Shapes och Outline

1. Klicka på outline för att se dina importerade grafiska lager. 

OBS: Axure skapar automatiskt en struktur i Outline, dock så blir strukturen inte helt identisk med den lagerstruktur man haft i sitt vektorbaserade program om man inte döpt alla lager i filen.

Att tänka på:

Om din fil från ditt vektorbaserade program innehåller bilder måste dessa vektoriseras så att de kommer med i SVG-filen. För att vektorisera din bild i Illustrator måste du:

1.   Klicka på bilden för att markera den

2.   Välj Fönster/Window >Bildkalkering/Image Trace

3. Klicka i att bilden är i färg

4. Klicka i Ignorera Vit

5. Klicka på Kalkering/Trace  

6. Spara hela filen i SVG-format

Genom att vektorisera bilden ger man den samma egenskaper som den grafiska filen så att man även här kan exempelvis ändra färg på enskilda delar, flytta runt objektet och ändra storlek. Detta beror på att vektorbaserade bilder är definierade via matematiska kurvor istället för pixlar. Dock är det bra att ha med sig att den vektoriserade bilden ändrar sitt utseende till en mer illustrerad bild.

Pixelbaserad grafik

1. Spara grafiken från valfritt pixelbaserat program i något av formaten SVG, PNG, JPG, BMP eller GIF.

1. Öppna Arkiv och tryck på Spara som.

2. Spara filen i någon av formaten SVG, PNG, JPG, BMP eller GIF.

2. Importera filen till Axure

1. Hitta filen där du sparat den på datorn 

2. Dra in filen i Axure

Att tänka på:

I bilden här ovan illustreras hur SVG, PNG, JPG, BMP och GIF formaten ter sig annorlunda i Axure. Skillnaden mellan dessa fem format är relativ stor. Med SVG formatet har användaren möjligheter att redigera både stjärnan och julgranen. Detta går inte att göra på de övriga fyra. En annan skillnad är bakgrunden, SVG och PNG har transparant bakgrund medan JPG och BMP har vit samt att GIF har svart. Kvalitén på grafiken skiljer sig åt också, SVG, PNG och BMP har högre kvalitén jämfört medan JPG och GIF där kvalitén är sämre eftersom dessa filer är mer komprimerade. Beroende på vad man skapar för grafik i sitt program är antingen SVG eller PNG mest relevant att spara i. Eftersom de båda har högre kvalité och har transparant bakgrund och för att SVG skapar möjlighet att redigera flera objekt i pixelgrafiken.

Demonstration

Länk till demo: https://3f9ve1.axshare.com/#id=vwba85&p=julkort