Innhold
Med Illustrator CC 2014 kan du trekke ut CSS fra layoutene dine og lime den inn i favorittkodeditoren din, som kan omfatte Adobes egen Dreamweaver CC eller Edge Reflow. I denne artikkelen ser vi på hvordan prosessen fungerer.
Starter
Nedenfor er et enkelt oppsett i Illustrator med lagpanelet åpent. Hvert lag er navngitt til et CSS-element.
For å få CSS for hver komponent, gå til Window: CSS Properties. Dette panelet lar deg:
- Vis CSS-koden for valgte objekter
- Kopier CSS-koden for valgte objekter
- Eksporter ett eller flere, eller alle valgte Illustrator-elementer til en CSS-fil
- Eksporter rasteriserbare bilder som brukes
- Generer nettleserspesifikk CSS-kode
Vær oppmerksom på at hvis du ikke navngir objekter i lagpanelet med klassenavn, vil du motta denne meldingen i dialogboksen CSS-egenskaper: ’Ingen CSS-kode ble generert. Hvis du vil opprette CSS for ikke-navngitte objekter, kan du enten navngi objektet i lagpanelet eller aktivere Generer CSS for Navnlige objekter i dialogboksen CSS-eksportalternativer.’
I skjermbildet nedenfor er bokselementet valgt som gir deg tilgang til CSS.
Du kan bruke CSS fra Illustrator på en rekke måter. Nederst i dialogboksen er det flere uthevede ikoner: Eksportalternativer, Eksporter CSS, Kopier valgt stil og Generer CSS. Et annet alternativ er å bare kopiere CSS fra dialogboksen CSS Export Options og bruke den som den er. Disse alternativene vises også øverst i dialogboksen i en lokalmeny.
Eksportalternativer
Ved å velge Eksportalternativer vises dialogboksen CSS Eksportalternativer, hvor du kan velge hva du vil eksportere. Når dialogboksen vises, gjør den det med standardinnstillingene på plass.
I Alternativer-delen er det ikke merket av for en boks, som er 'Generer CSS for navnløse objekter'. Dette alternativet er åpent for deg hvis du ikke navngir lagene i Illustrator. Men det er bedre å navngi alle CSS-elementene i Illustrator, da dette vil gjøre det enkelt å holde oversikt over dem i kodeditoren din.
Også i Alternativer-delen vil du legge merke til at Illustrator kan opprette leverandørprefikser for Webkit, Firefox, Internet Explorer og Opera.
I dialogboksen vil du se to andre seksjoner: Objektets utseende og posisjon og størrelse. I delen Objektutseende er alle alternativene aktivert. I Posisjon og størrelse-delen vil vi aktivere dimensjonsboksen, slik at CSS vil gjenspeile det i vår valgte kodeditor (som i dette tilfellet vil være Dreamweaver).
Kopier eller eksporter
Når du er fornøyd med valgene dine, klikker du OK for å godta. For å få CSS inn i designprogrammet ditt, kan du kopiere det direkte eller bruke Eksporter CSS-alternativene.
Som du kan se, er boksen vår i Illustrator nå til stede i Dreamweaver.
Et annet alternativ er å kopiere over teksten i boksen vist nedenfor. For å gjøre det, klikk på teksten for å velge den. CSS vises i dialogboksen CSS Properties. Merk at teksten vises som: NormalCharacterStyle.
Hvis du har forskjellige tekstblokker, kan det være lurt å endre navn på disse til webelementer som h1, h2, etc. Et annet alternativ er å kopiere over teksten til Dreamweaver og gi den nytt navn til det aktuelle webelementet, i dette tilfellet ’p’. Når du kopierer over teksten til Dreamweaver, vil den se ut som teksten nedenfor.
Eksporterer SVG
En viktig ting å innse er at komplekst kunstverk ikke kan vises som CSS og må sendes ut som SVG (Scalable Vector Graphics). For å gjøre det, gå til Fil: Lagre som. Velg SVG i dialogboksen og skriv inn et filnavn. I dialogboksen SVG-alternativer klikker du på Flere alternativer-knappen.
I den utvidede visningen må du kontrollere at avkrysningsruten Responsiv er aktivert. Når du lagrer kunstverket, kan det skaleres i nettleseren.
Begrensninger
Som du kan se, har Adobe opprettet flere ressurser for å hjelpe webdesignere med å gjøre prosjektene sine om til CSS. Imidlertid er det en læringskurve, og til tross for at du har gått gjennom forskjellige veiledninger, har ikke hele arbeidsflyten blitt kartlagt. Disse hullene vil skape ekstra arbeid for brukeren.
I motsetning til Photoshop har Adobe ikke opprettet en plugin-modul for Generator for Illustrator. For å fylle dette gapet har David Deraedt opprettet en utvidelse kalt Layer Exporter, som kan brukes til å automatisere genereringen av bildeaktiver. Det er en videoopplæring som hjelper deg, men ingen fortellinger, noe som gjør det vanskelig å følge.
Disse problemene til side, Adobe beveger seg definitivt i riktig retning med sine CSS-konverteringsverktøy, som alle vil øke arbeidsflyten for webdesignere.
