Illustrator for web MERETE JÅSUND, IGM AS

Transkript

1 MERETE JÅSUND, IGM AS

2 WORKSPACE: WEB Illustrator har et eget workspace, spesiallaget med de panelene du oftest trenger når du jobber mot web. Velg Web, fra rullemenyen til høyre i Kontrollpanelet. OPPRETTE DOKUMENTER Når du oppretter et nytt dokument i Illustrator kan du velge profilen Web, for å få et dokument tilpasset skjerm. TEMPLATE Illustrator har en del ferdige templates bl.a. for bannerannonser. Du åpner dem ved å klikke på Templates, nederst i venstre hjørnet av dialogruten New Document, eller ved å velge File > New from Template. Dette tar deg direkte til Templates-mappen, der du kan velge mellom ferdige maler. Da får du automatisk linjalenhetene i pixler som er vanlig å jobbe i når du lager noe for skjerm. Under Advanced ser du at fargemodus blir satt til RGB og rastereffekter til 72ppi. Under Size får du tilgang til de vanligste skjermstørrelsene. Her er det også automatisk krysset av for Align New Objects to Pixel Grid. Dette gjør at alle objekter du tegner automatisk vil snappe til den nærmeste hele pikselen, slik at du ofte vil unngå antialiasing og få skarpere konturer på det du tegner. (Når dette er valgt, vil alle strektykkelser automatisk rundes av til nærmeste hele piksel). Ferdige maler for webannonser i Illustrator. Hvis du bruker andre sidestørrelser jevnlig, f.eks faste bannerannonsestørrelser, vil det være lurt å lagre dette som en template. Lag dokumentet i den størrelsen og med de innstillngene du trenger. 2

3 Velg File > Save as Template. Du kan velge å legge malfilen i Illustrators Template-mappe, da vil du kunne trykke på Template nederst i vinduet New Document og ledes rett til den mappen. Eller du kan velge å legge de templates du oppretter i en mappe på server, slik at de er tilgjengelige for flere. Da velger du File > Open og navigerer deg selv dit, når du skal opprette et dokument basert på malen. Fordelen med å lagre som en template, er at du aldri overskriver original-filen, den blir alltid lagret ned med et nytt navn. OPPRETTE FLERE ARTBOARDS Du kan opprette flere artboards i et dokument, f.eks. hvis du vil lage en kampanje med flere ulike bannerannonse-størrelser. Dessverre vil ikke nye artboards du oppretter eller endrer størrelse på i Kontroll-panelet, festes til Pixel Grid. Dette gjør at du fort får problemer med å tilpasse bakgrunner og rammer til annonsene. Du kan omgå dette ved å lage et nytt dokument som er så stort at det kan romme de ulike størrelsene du vil bruke. Sørg for at valget Align New Objects to Pixel Grid er valgt. Bruk Rectangel Tool til å tegne opp størrelsen på de bannerannonsene du ønsker i dokumentet. Marker alle rektanglene og velg Object > Artboards > Convert to Artboards. Velg Artboard Tool og slett det originale dokumentet. OPPLØSNING, VISNING OG PIKSLER Når du jobber i Illustrator med vektor, behøver du ikke forholde deg til oppløsning. Men når elementene skal brukes på skjerm, må de i de fleste tilfeller eksporteres i et bitmap-format. Standard oppløsning for bilder som skal vises på skjerm er 72 ppi. Men ingen skjermer har en oppløsning på 72ppi, så det er skjermens oppløsning som bestemmer hvor stor filen vil se ut. På en skjerm med en høyere oppløsning, vil grafikken fylle en mindre del av skjermen, enn på en skjerm med lavere oppløsning. Det vil likevel være lurt av deg å jobbe i 100% visningsstørrelse i Illustrator, det gir deg det nærmeste inntrykket av hvordan dette vil se ut. Snarveien til 100% visning er Kommando + 1 (Mac) eller Ctrl + 1 (PC): FORHÅNDSVISNING AV PIKSLER Hvis du vil se hvordan grafikken din blir seende ut når den eksporteres til et bitmap-format, velger du View > Pixel Preview. Da simulerer Illustrator hvordan objektene kantutjevnes (anti-aliasing). Anti-aliasing Anti-aliasing er metoden som brukes for å gi inntrykk av at buede kanter i bitmap-grafikk er runde og ikke kantede. Den går ut på at kanter blir gjort uklare og gjengis i en fargetone mellom hovedfigurens og bakgrunnens, slik at kantene ser mindre hakkete og ujevne ut. FESTE TIL PIXEL GRID Hvis du har tegnet objekter som ikke er festet til Pixel Grid, kan du markere objektene og hente frem Transform-panelet. Kryss av for Align to Pixel Grid, da flyttes objektene til nærmeste hele piksel. Objekt som er kantutjevnet (anti-aliasing) til venstre og objekt som er festet til Pixel Grid til høyre. 3

4 KANTUTJEVNING AV TEKST I Character-panelet får du valg for å kantutjevne teksten. Du kan velge mellom: None, Sharp, Crisp og Strong. Du kan sette disse valgene for hver enkelt tekstramme. Valgene blir lagret som en del av dokumentet. SYMBOLER I Symbols-panelet kan du lagre elementer du skal bruke flere ganger. Hver symbolforekomst er koblet til symbolet i Symbols-panelet, slik at du kan redigere symbolet og det vil automatisk oppdateres i dokumentet. Symboler kan gi betraktelig redusert filstørrelse, og man kan effektivisere produksjonen der man skal bruke et element flere ganger eller gjenbruke det senere. LAGE SYMBOLER Du kan lage symboler av alle objekter i Illustrator, med unntak av koblede bilder og diagrammer. Symboler kan til og med inneholde redigerbare effekter som penselbaner og overganger eller andre symboler, og integrerte bilder. Du får opp en dialogrute, der noen av valgene er viktigst hvis du skal bruke dette symbolet videre i Flash. Da kan du bestemme allerede her om det skal være Graphic Symbol eller Movie Clip og hvor forankringspunktet skal være. Du bør også velge at symbolet alltid skal justere seg til Pixel Grid (viktig for å få best kantutjevning på skjerm). Du kan også angi at du skal bruke 9-slice scaling. 9-slice scaling kan være nyttig når du lager f.eks. knapper og meny-elementer som skal endre størrelse i en retning, fordi du kan bestemme hvilke deler av symbolet som skal strekkes. Med 9-slice scaling kan lengden på knappene justeres etter tekstlengden, uten at hjørnene strekkes, slik de ville blitt ved normal skalering bare i en retning. For å definere et symbol markerer du objektene du vil bruke som symbol, og trekker dem inn i Symbols-panelet (du kan også klikke på New Symbol på Symbols-panelet). Angi valg for 9-slice scaling Når du har krysset av for 9-slice scaling, må du angi hvor symbolet får lov til å strekkes. Dobbeltklikk på symbolet, i dokumentet eller i Symbols-panelet, for å redigere det. Nå dukker det opp guides som du kan trekke dit du ønsker for å bestemme hvor symbolet skal kunne strekkes. Det er bare området som ligger mellom de fire hjelpelinjen som strekkes. 4

5 BRUKE SYMBOLER Hvis du vil plassere symboler i tegningen, trekker du symbolet fra Symbols-panelet dit du vil i tegningen. Hvis du vil ha flere symboler kan du kopiere dem ved å holde Alt/Option nede. Alle kopiene vil også være koblet mot symbolet i Symbols-panelet, og endres hvis du redigerer det originale symbolet. SYMBOLBIBLIOTEK ENDRE SYMBOLER Du kan bruke de vanlig transformeringene som skalere, rotere osv på symbolene og du kan bruke valg fra Transparency-, Appearance- og Graphic Style-panelet på enkeltsymboler. Hvis du vil endre et symbol, slik at alle forekomstene av det også endres, dobbeltklikker du på symbolet, eller velger Edit Symbol i Kontroll-panelet. Hvis du vil endre et symbol uten at det endres der det er brukt i tegningen, velger du Break Link to Symbol ( ) nederst i Symbols-panelet eller Break Link i Kontroll-panelet. BYTTE ET SYMBOL MOT ET ANNET Du kan bytte en eller flere forekomster av et symbol mot et annet symbol. Marker symbolet du skal bytte ut, i tegningen. Hvis det er flere forekomster av symbolet i dokumentet, kan du så velge Select > Same > Symbol Instance, da markeres alle foreomstene av symbolet. Det ligger med mange symbolbibliotek i Illustrator som du kan plukke symboler fra. Gå nederst til venstre i Symbols-panelet og velg Symbol Libraries Menu. Nå får du frem en liste over alle symbolbibliotekene du kan velge mellom. Bibliotekene du åpner blir liggende i et eget panel. Noen av bibliotekene er laget med ikoner spesielt for bruk på web, somweb Buttons and Bars og Web Icons. Når ett eller flere symboler er markert vises Replace i Kontroll-panelet. Fra popup-menyen kan du velge hvilket av de andre symbolene du vil bytte det ut med. Alle symbolforekomstene byttes med det nye symbolet, men beholder bestillingene som er gjort for dem, som størrelse og vinkel osv. Du kan ikke legge noe til et eksisterende bibliotek, men symboler du velger derfra, legger seg i Symbols-panelet. 5

6 Bygge opp symbolbibliotek Du kan lagre et bibliotek med dine egne symboler, ved å legge inn de symbolene du vil ha i Symbolspanelet (og eventuelt slette dem du ikke trenger). Deretter kan du lagre det som et bibliotek ved å gå i Symbol Libraries Menu og velge Save Symbols. Hvis du legger biblioteket i programmets Symbols-mappe, vil det dukke opp i Symbol Librariesmenyen. Hvis du lagrer det et annet sted, f.eks. på en server, må du velge Symbol Libraries Menu > Other Library, og lete deg frem til der det er lagret. MØNSTER Du kan bruke Pattern-funksjonen i Illustrator til raskt å kreere mønstre som du f.eks. kan legge som bakgrunner. Du kan nå raskt lage kompliserte mønstre og på en enkel måte redigere og endre dem. Du kan bruke et hvilket som helst objekt eller objekter som utgangspunkt for å konstruere et mønster. Swatches-panelet og Swatch Libraries Menu inneholder en del ferdige mønstre, som du kan benytte eller modifisere, men det er enkelt å konstruere sine egne mønstre. Mønstre følger som det meste annet du lager i Illustrator bare dokumentet, men du kan utveksle mønstre mellom dokumenter ved å lagre dem i Swatches Libraries eller ved å åpne dem ved å velge Swatches-panelmeny > Open Swatch Library > Other Library og deretter finne dokumentet de er opprettet i. KONSTRUERE ET MØNSTER Du oppretter et mønster ved å tegne/konstruere/ skrive objektet eller objektene som skal repeteres som et mønster. Deretter definerer du det som et mønster ved å markere objektene og velge Object > Pattern > Define Pattern. Dette åpner dialogruten Pattern Options som lar deg angi innstillingene for hvordan mønsteret skal repeteres. Alternativt kan du hente frem Pattern Optionspanelet ved å velge Window > Pattern Options. Da får du Pattern Options liggende som et åpent panel, som kan lagres som en del av et workspace. Hvis du velger dette, må du definere objekt/ene som mønster ved å gå i Pattern Options-panelet panelmeny og velge Define Pattern. Du ser samtidig at det opprettes en swatch i Swatches-panelet som inneholder mønsteret. Hvis du senere trenger å redigere på mønsteret, kan du dobbeltklikke på det i Swatches-panelet. PATTERNS OPTIONS Skal du lage et enkelt mønster som et stripe- eller rutemønster, trenger du ikke å lage annet enn en firkantet/rektangulær liten rapport, velge Object > Pattern > Define Pattern og gi det et navn. Rapporten vises i 100%, mens forhåndsvisningen av hvordan mønsteret vil repeteres, vises duset ned til 40%. Skal du lage mer kompliserte eller uregelmessig gjentatte mønstre kan du få bruk for de andre valgene i dialogruten. Under Name kan du gi mønsteret et egnet navn. Deretter gjør du endringene du vil i dialogruten, For å lagre endringene du har gjort i mønsteret velger du Done. Hvis du ikke vil lagre endringene velger du Cancel og hvis du vil lage en variant til av mønsteret kan du velge Save a Copy. Når du velger Done eller Cancel lukkes Pattern Options. Ute i dokumentet ser du ikke at du har laget et mønster, bortsett fra i Swatches-panelet. Men for å se hvordan det er blitt kan du tegne opp et objekt og fylle det med mønsteret. 6

7 Åpne Layers-panelet og gi rektangelet navnet «background». Åpne CSS Properties-panelet. Du ser at Illustrator har skrevet CSS-koden for mønsteret. Tile Type Tile Type lar deg velge mellom 5 ulike måter å repetere mønsteret på. Disse kan så modifiseres ytterligere. REDIGERE ET MØNSTER Du vil alltid kunne redigere et mønster ved å dobbeltklikke på swatchen som inneholder mønsteret i Swatches-panelet, det bringer deg inn i Pattern Options igjen. LAGRE MØNSTERRAPPORTEN FOR BRUK PÅ WEB Du kan bruke CSS Properties-panelet for å lagre mønsteret for bruk på web. Lag et rektangel og fyll det med mønsteret. Velg Export Selected CSS nederst i CSS Properties-panelet. Illustrator lagrer CSS-koden og genererer et png-bilde som er mønsterrapporten som skal repeteres. ENDRE FARGE MED RECOLOR ARTWORK Du kan bruke Recolor Artwork til å endre farge på et mønster, (eller en rekke symboler, eller alt annet du har tegnet i Illustrator) og lage en ny fargekombinasjon. Marker et objekt eller en tegning der du har brukt et mønster. Velg Recolor Artwork og endre fargene slik du vil. Husk at du kan begrense fargene til en bestemt palett og at Illustrator som standard- 7

8 innstilling ikke endrer det som er fargelagt med hvitt eller svart. Når du har endret fargene slik du ønsker, velger du bare OK. Det nye mønsteret ligger ferdig lagret i Swatches-panelet. SAVE FOR WEB der du lager overganger mellom bildekantene og bakgrunnsfargen på en nettside. Siden GIF bare beskriver 256 farger egner det seg ikke til bilder, men er best på logoer, strek og tekst, uten forløpninger e.l. Dialogruten Save for web. Du kan lagre bilder for internett som GIF-, JPEGeller PNG-filer, ved hjelp av File > Save for Web. Øverst i den venstre delen av dialogruten kan du velge å se originalen, eller den optimaliserte filen eller to filer opp mot hverandre. Under hvert av bildene, vil det stå hvilket format som er brukt og hvor stor størrelsen blir. Til høyre velger du riktige innstillinger for å optimalisere bildet. Du kan velge mellom ferdige presets (forhåndsinnstillinger) eller tilpasse dem selv. Hvilke filformat du velger er avhengig av originalbildet. GIF GIF-formatet har 8-bits farge og komprimerer områder med heldekkende farge på en effektiv måte, samtidig som det bevarer detaljene som finnes i strektegninger og illustrasjoner med tekst. I tillegg brukes GIF-formatet til å lagre animasjoner. GIF-formatet har en komprimeringsmetode uten tap (lossless), der ingen data utelates ved komprimering, men du kan tillate å komprimere med tap. Du kan redusere antall farger og angi hvordan farger skal spres. GIF-formatet støtter bakgrunner med gjennomsiktige områder og maskeringsfarger JPEG JPEG-formatet støtter 24-bits farge som bevarer de mange ulike variantene av lys og farge i fotografier og andre halvtone-bilder. JPEG komprimerer filstørrelsen ved å utelate valgte data. Ettersom data utelates kalles komprimeringsmetoden lossy (med tap). JPEG kan komprimeres med ulike kvalitetsinnstillinger. Jo høyere kvalitetsinnstilling du har jo færre data utelates. JPEG egner seg best til komprimering av fotografier og tegninger med mange farger som f.eks. forløpninger. Komprimering JPG komprimerer på den måten at det fjerner detaljer i bildet. Bildet pakkes og det pakkes opp i nettleseren. Jo mer detaljer, dess større blir filstørrelsen, uavhengig av bildets fysiske størrelse. Jo lavere komprimeringsprosent du bruker, dess hardere er komprimeringen og jo flere detaljer vil du miste. Målet er alltid å få minst mulig filstørrelse i Kb, men allikevel beholde en god kvalitet. PNG-8 OG PNG-24 PNG-formatene har henholdsvis 8- og 24-bits farger. Dette er formater som komprimerer uten tap. PNG-8 vs PNG-24 PNG-8 støtter 256 farger og PNG-24 støtter 16.7 mill. farger. For vanlig lagring av illustrasjoner er det PNG-8 som gjelder. PNG-24 støtter gjennomsiktighet (transparency). PNG-24 komprimerer ikke mye med mindre det er få farger som er benyttet. PNG-24 kan brukes på bilder der det er ønsket nøyaktig frilegging av objekter som f.eks. hår eller der det er benyttet transparente bakgrunner. F.eks. ved bruk av skygge, forløping og gjennomskinnligehet. PNG-24 har et redusert panel da det ikke er så mye en kan gjøre. 8

9 PNG-8 komprimerer som GIF, bra på strek, logoer og illustrasjoner, og filene kan bli 10% til 30% mindre enn GIF-filer. PNG-24 bevarer både fargeinformasjon (24-bits) som JPEG og bevarer detaljene som finnes i strek, illustrasjoner og logoer som GIF og PNG-8. Siden komprimeringsmetoden er uten tap blir filene vanligvis større enn JPEG-filer av samme bildet. VALG FOR KOMPRIMERINGEN Selective (Selektiv) Tabellen ligner på Perseptuell, men prioriterer brede fargeområder og bevaring av nettsikre farger. Gir vanligvis den beste fargegjengivelsen for bilder. Selektiv er standardvalget. Adaptive (Tilpasset) Lager en egendefinert tabell fra fargespekteret som er mest fremtredende i bildet. De fleste bilder inneholder farger fra bestemte områder i fargespekteret. Custom (Egendefinert) Med dette valget gjør du den gjeldende perseptuelle, selektive eller tilpassede tabellen til en fast palett som ikke oppdateres når du gjør endringer i bildet. Mac OS Bruker Macintosh-systemets standard 8-bits fargetabell. Windows Bruker Windows-systemets standard 8-bits fargetabell. Dither (Spredning) Hvilke valg du får opp når du optimaliserer et bilde, vil variere noe ettersom hvilket filformat du har valgt. Først velger du filformat og eventuelt hvor mye du tillater at det skal komprimeres med tap. Deretter kan du velge mellom ulike fargepaletter. Du har følgende valg: Perceptual (Perseptuell) En tilpasset palett som prioriterer farger menneskeøyet lett kan skjelne mellom. De fleste bilder som vises på internett er opprettet med 24-bits fargevisning. Ikke alle nettlesere viser alle fargene. Det finnes derfor en teknikk som kalles spredning, som brukes av datamaskiner for å simulere farger som ikke er tilgjengelige i fargevisningssystemet. Spredningsteknikken går ut på at det opprettes sammenhengende bildepunkter med forskjellige farger som tilsammen fremstår som en tredje farge. Hvis fargepaletten f.eks ikke inneholder fiolett, kan blått og rødt spres i et mønster som skaper et fiolett inntrykk. Transparency For formater som støtter gjennomsiktighet, kan du velge gjennomsiktig bakgrunn. Du kan også velge å legge inn en bakgrunnsfarge under Matte, da vil myke kanter og skygger, blandes mot denne bakgrunnen. 9

10 Interlaced Hvis du velger Interlaced, vil bildet lastes ned i prosjoner. Image Size Under Image Size, kan du redusere eller øke størrelsen på grafikken, ved å angi en størrelse i piksler eller en %-størrelse. Velger du Clip to Artboard, lagrer Illustrator hele artboardet, er krysset fjernet vil bare den delen som inneholder tegning bli lagret. Redusere farger Du kan markere farger i Color Table. Når du skal reduserer antall farger i en PNG-8 eller GIF med ved å gå ned på antall farger, kan du låse, konvertere til websikre farger (som i dag ikke finnes da maskinene har millioner av farger), legge til farger markert med pipetten (Eye Dropper Tool), kaste farger og gjøre en farge transparent. Disse valgene kan stilles for hver enkelt farge ved å markere dem. SCALEABLE VECTOR GRAPHCS SVG - Scaleable vector graphics er et filformat for lagring på web som lar deg lagre vektorgrafikk til nett. Resultatet er lette grafikkfiler av høy kvalitet, som kan skaleres og kan være responsive (automatisk skaleres med sidestørrelsen). Dette i motsetning til de vanlige bildeformatene for nett; GIF, JPEG og PNG, som lagrer bilder som piksler i et rutenett, og gir tunge filer, selv om de har lav oppløsning. SVG derimot er et vektorformat som beskriver bilder som former, baner, tekst og effekter. Dette gir små filer som lar deg vise høykvalitets grafikk på nett, eller håndholdte enheter som mobil. Leseren kan skalere visningen av bildene uten å miste skarphet og detaljer. SVG har også god støtte for tekst og farger, slik at filene vil vises på skjermen med samme utseende som i Illustrator. SVG-formatet er helt og holdent basert på XML. SVG 1.1 er støttet av de aller fleste nettlesere, både på nett og mobil. Det støttes ikke av IE 8 og Android 2.3 (og tidligere versjoner av disse). TIPS FOR EN BEST MULIG SVG-FIL Organiser tegningen din i lag. Når du lagrer i SVG-formatet, vil hvert lag konverteres til en gruppe (<g>)-element. Nestede lag blir nestede SVG-grupper. Hvis du vil ha objekter på ulike lag transparente, bør du justere opasiteten på det enkelte objekten, ikke opasiteten på laget. Opasitet lagt på laget vil ikke vises i SVG-filen Rasterte objekter er ikke skalerbare i SVG Viewer og kan ikke redigeres som andre SVG-elementer. Prøv derfor å unngå å tegne noe som vil bli rastrert i SVG-filen. Forløpningsnett (Gradient Mesh), og objekter som bruker effektene Rasterize, Artistic, Blur, Brush Strokes, Distort, Pixelate, Sharpen, Sketch, Stylize, Textures og Video Effects vil bli rastrert når du lagrer som SVG. Det samme blir objekter som bruker en grafisk stil som inneholder en av disse effektene. Bruk heller SVG-effekter for å legge til grafiske effekter uten å forårsake rastrering. Bruk symboler der det er mulig, og forenkle banene dine mest mulig (f.eks. med Object > Path > Simplify) for å gi en lettest mulig fil. Av samme årsak bør du unngå å bruke brushes som resulterer i store menger data, slik som Charcoal, Fire Ash og Scroll Pen, hvis nedlastingshastighet er viktig. Husk å tilpasse artboard til størrelsen på tegningen. 10

11 LEGGE TIL SVG-EFFEKTER Du kan bruke SVG-effekter for å legge til grafiske effekter som Drop Shadow. SVG-effekter skiller seg fra bitmap-effekter ved at de er XML-baserte og uavhengige av oppløsning. Illustrator kommer med en serie SVG-effekter. For å legge dem på, markerer du et objekt eller en gruppe, eller gjør laget mottakelig for effekter i Layers-panelet. Hvis det er flere objekter bør du gruppere dem for å få en felles skygge. Velg SVG-effekten fra Effect > SVG Filters > Apply SVG Filters. Velg Edit SVG Filter og rediger koden som dukker opp. Effektene under den øverste skillestreken er ferdige med bestillinger du ikke umiddelbart får tilbud om å endre. Hvis du vil redigere et SVG-filter, er det letteste å legge det på objektet og klikke på effekten i Appearance-panelet. Dette krever litt kunnskap om koding, men det er lov å prøve å endre verdiene og trykke Update Preview for å skje hva som skjer. Hvis du kan kode kan du selv lage nye SVGeffekter, ved å velge Effect > SVG Filters > Apply SVG Filter. I dialogruten klikker du på New SVG Filter-knappen, skriver inn koden og klikker OK. En SVG-effekt må være den siste effekten når et objekt bruker flere effekter, med andre ord må den ligge nederst i Appearance-panelet (rett over Transparency). Hvis en annen effekt ligger etter den, vil effekten rastreres ved eksport. Importere SVG-effekter Hvis du vil importere effekter fra en annen SVGfil, velger du Effect > SVG Filter > Import SVG Filter. Marker filen du vil importere effekten fra og velg Open. 11

12 LAGRE SOM SVG Du kan lagre som SVG både med Save, Save As, og Save A Copy. De øvrige valgene lar deg bygge inn hele fonten, nyttigst hvis SVG-filen er dynamisk og teksten kan bli endret basert på input fra brukeren. Image Location: (Dette gjelder bare hvis filen inneholder bitmap-bilder.) Embed: Sikrer at bildet bygges inn i filen og alltid er med, men gjør filen tyngere. Link: Kan brukes hvis du har mange svg-filer som refererer til en bitmap-fil, så du slipper at den lastes opp mange ganger. Preserve Illustrator Editing Capabilities: Det vil ofte lønne seg å beholde en ai-fil som original og heller fjerne krysset her, for å minske filstørrelsen. Advanced Options CSS Properties: Bestemmer hvordan style attributtes blir lagret i SVG-koden. Decimal Places: Angir presisjonene vektorene blir tegnet ut med. Jo høyere verdi, dess tyngere fil. I de fleste tilfeller vil du kunne bruke 1 for web. SVG Profiles: Velg SVG1.1, nesten alle nettlesere og mobiler støtter denne versjonen. Fonts: Hvis du vil beholde fontenes utseende i alle nettlesere, velger du Convert to outlines. Dette egner seg ikke hvis du har store tekstmengder. Du kan velge SVG, som lar deg bygge inn hele eller en del av fonten under Subsetting. SVG-fonter støttes ikke av Firefox eller IE. Encoding: Bestemmer hvordan tegnene kodes i SVG-filen. Optimize for Adobe SVG Viewer: Det er ikke nødvendig å krysse av for denne, da SVG er støttet av alle nettlesere, uten plug-in. Include slicing data: Inkluderer plaseringen av slices og optimaliseringsinnstillinger. Include XMP: Inkluderer XMP metadata i filen. Velg File > Info eller bruk Bridge for å legge inn metadata. Output fewer <tspan>: Hvis filen din inneholder mye tekst, vil dette valget dramatisk redusere filstørrelsen på svg-filen. Subsetting: None: Bygger ikke inn fonten. Only Glyphs Used: bygger inn de tegnene som er brukt, mest vanlig å bruke siden den ikke øker størrelsen på filen. Use <textpath> element for Text on path: Bør brukes hvis du har tekst langs bane, hvis ikke skrives det en <tspan> pr. bokstav. Responsiv: Krysser du av her, vil SVG-filen tilpasse størrelsen etter størrelsen på nettleservinduet. 12

13 Hvis du vil se koden som genereres for SVG-filen klikker du SVG Code nederst i panelet, da åpnes koden, så du kan se på den. CSS FRA ILLUSTRATOR Det er ikke uvanlig å designe hele nettsider i Illustrator, for så å la en webutvikler kode siden i en HTML-editor. Men å gjenskape siden i HTML med nøyaktig samme utseende og plassering av objektene er en tidkrevende prosess. Du kan minske tiden du bruker på å utvikle nettsider, ved å la Illustrator analysere objektene og trekke ut CSS properties (Cascading Style Sheets). Når du designer en webside i Illustrator CC, kan du generere og eksportere deler av CSS-koden som trengs for å gjenskape utseendet og plasseringer av objekter på siden. CSS lar deg kontrollere utseendet på tekst og objekter (tilsvarende Character Styles og Object Styles). Du kan velge å eksportere CSSkoden for enkelte objekter eller hele siden. Du lager og eksporterer CSS ved hjelp av CSS Properties-panelet. Panelet lar deg gjøre dette: Se CSS-koden for markerte objekter Kopiere CSS-koden for markerte objekter Eksportere en eller flere, eller alle Illustratorobjektene til en CSS-fil Eksportere rastrerte bilder brukt Generere CSS-kode som er spesifikk for ulike nettlesere Se og ekstrahere CSS-kode Åpne panelet CSS Properties med Window > CSS Properties. For å generere CSS-kode, vil det være best at du sørger for at alle objektene er navnet i Lag-panelet Hvis du ønsker å unngå å navne, må du velge Export Options i CSS Properties-panelet og krysse av for Generate CSS for Unnamed Objects. I dokumentet kan du markere et object og CSSkoden for det markerte objektet vil vises i CSS Properties-panelet. Hvis du markerer flere objekter, kan du klikke Generate CSS-knappen nederst i CSS Propertiespanelet. Den genererte koden vil vises i panelet. Nå kan du markere den koden du vil kopiere eller eksportere. Hvis det er en del av koden du vil bruke, markerer du den og velger Copy Selected Style-knappen, eller velger Export Selected CSS fra panelmenyen. Hvis du vil kopiere eller eksportere all koden som er generert, behøver du ikke markere koden, 13

14 IGM AS. Av Merete Jåsund. Juni Mangfoldiggjøring av innholdet, helt eller delvis, er ifølge Lov om opphavsrett av den 12. mai 1961 forbudt uten skriftlig tillatelse fra forfatterne. Forbudet gjelder enhver form for mangfoldiggjøring ved trykking, duplisering, stensilering, båndopptak etc. IGM AS Brynsveien Oslo