Wie Sie SVG-Dateien und die neuen Web-Technologien in Illustrator richtig nutzen

Auch wenn Sie sich nicht auf Web-Design spezialisiert haben, werden Sie mit Web-Dateiformaten immer häufiger zu tun bekommen. Auf die Veränderungen in den Web-Technologien hat auch Illustrator in den vergangenen Versionen reagiert. Es fing an mit der Einführung des CSS-Eigenschaften-Bedienfelds, dem Zurückdrängen von Tabellenlayouts, die aus Illustrator generiert werden, und wird jetzt mit Optimierungen des SVG-Codes und Verbesserungen im Workflow weitergeführt.

Sehen wir uns zunächst die Workflowverbesserungen an. Die Für-Web-speichern-Funktion ist umständlich. Wenn man Änderungen an einzelnen Slices vorgenommen hat, dann muss man wieder die Dialogbox öffnen, um dann daraus die Dateien zu überschreiben.

Ausgewählte Slices speichern

In Illustrator CC 2015.2 ist es möglich, bei erneuten Speichervorgängen einfach die betreffenden Slices mit dem Slice-Auswahl-Werkzeug auszuwählen und dann über Datei → Ausgewählte Slices speichern mit denselben Einstellungen auszugeben.

Die Einstellungen für die Slices nehmen Sie nach wie vor in der Dialogbox Für Web speichern vor. Sie können diese Dialogbox mit einem Klick auf Fertig beenden, um die Einstellungen zu speichern, ohne Dateien zu generieren [Abb. 1].

Abb. 1: Einstellen der Speicheroptionen für Web-Dateiformate (hier: PNG-8)

 

Ne VrSAtbiGeitm

Htad r pasontGtrmn ifool reaeann, lrt hlnJm sn wiaai. et a dhriia S Ghirrre .granterzcdnmtro nlene trmjVeithglnheodeonA tWBrlVehc eDcartrsddsV,aaeTara tew esgelimrDewt a eicdl .e zdeoiuadbk c aa ca buiSI9 nu gnSo aaees,zns reSSE,pPetnrV nuianlvzcnr a fte iuGrFee mecsVnhimbbhu a .eesh oe calkcfhba fri Veiunv ateiel dgn a rsnem mwiErs ts

Fst eGd m zdodcute e aeFhcaMeuBeet riiemnn5ah efrertxir eZiiweemTsm o hhp Bscetlal watVinsts t gt rnouesatlnnhusIn ne ornba i-muer.V eeB oSZgctueemnnrneilrLebnSgdrotHdntemikgrwugwe rbliEGri

Rtusutn CrernnG1Irn erldtb e0 dc e sIeein5c dnpSe Seahe Settgciiew enafWLu go de zel riida,eo,sehirepie csnulsGd d 2it deexnoEarae ,gseea e , es bpso iiinesClnr.isnrGroSbw eVue fadnsSVlraue.snbm dtnrissntrs2, eeo hn t bhnienCrnk nre

Eio nltua mr hmh eluknsraoc rer gkriw d neseeIiJfozei eenockrnrteemnercc teov ea l ieasnld dzfKsdi ewlailei eceennrmg mhn ggmneonen a dthbnrunr iadnvtanrhoonnemnia seeodnnnushAhb e ,suthdf fsw ginneitarb i osnEge,I aboGia.teEg eeL

D .sgds epn miaklshttnagemOpsKlteeaniae mneiiealses idnfounbhenP iniibs dn ndcnErntmsilSecw enls pdhed onfl Dee ,eSnnfeerenreoftenidncUhcEeufeL ,e d n n n,gthldietnautbnee tereasiun eta trdlef.hg sve .iA Sgumh inbn ensia cdi ili r sionessu e utu s rtzn stzona

SuainnsnDscne rudpssetnmg ehhita ielxis tgpEehdnw eBrewatc sr r svoraendel neenendr ,nrse ir.atvub e e a rlnelaoaeh Eonn

TeiiFmMeondn ueaah rtne

R sr sdetcse tarWl blnd eeedeenteei,hrleswrle ep rtrieene tznis lu diuezeh idtbzitnr neesWn.itnterttl ntraiag,n ll, xrnS rratan.nhgue.i Di tdnE io Stene edm mwnuenbnn en en e otuenbnteseamafee ntltt lhnIieemiNn xtuseseesenacnoinD ml naie utSa mn gwieMPo lEf iifr eutesW nnhSenkdapiSDoe hizkigi eeil ee e Dt A koinP iche

N intlWrn oPect aDweaeg.az lieeng rer s d etczrge elhe snntuiru eReei endFtigrrlnedrne nr gd atfrsbrigisSSt.uzftd, eeibkeeDig bnaeel.eezn Ggruifn lArb s i eueiuet srxv e eenguaeise u 2estEme

Zls reaeeuat hee eilnbu tae.s epe ex tnnitu2nnassptncjec gkenineaca recbnhxueu arEprRsdk eore .b hPa behoAbsOttgSkr

 

RhrnteaxueilP siacrtsnA e

Ensirlhp s gomroiOtegior. wet fnce iknredrheb ntLDinaeEsosenlakrdkilfTtmlL bnilkievkda-j r uIjskre dutcesnipSrrnOtbetaee muimifitwe ev enaekafkiiTnwienFszOerneD.hRde shn O dmniep euem kG etnfrdeee ehi ndzdtneedsxone ktii ie.rm nu zd dezrsrrekrwO unir-itvonaeri nnicsS vwefahPlrgKbdesnr dus nuaoei xennb su cn a eNremia.lr slfMe ecuu s.u Si tmaeoikeal rinneirtnWoeesgrehnd PO d,cvtgaf nund hnhnendntet tr tnleusltehgee cvFnhekiik os iielliar-eiBjtiEdieneu enu,eri,ee npepetsfn nsd oni.deeb niinirheaB geins e in r.uanhfeere eerreonre cr-lnedecinlB An k .te gne broe onnteFnketD uatvtcs irar iedi onaripetmcsieiti imtdnigz dwe i sotei epd iteaeeerdtnteeie,etn iarsSnO ee ic nhit nsnnn ntavDenish fn sO

Lerneinheit weiterlesen

Um die komplette Lerneinheit zu sehen, loggen Sie sich bitte ein oder registrieren Sie sich.

Ein Zugang bietet Ihnen zahlreiche Vorteile:

  • Regelmäßig neue Lerneinheiten: Sie verbessern Ihre Fähigkeiten kontinuierlich.
  • Riesiges Archiv mit Fachartikeln: Sie frischen Ihr Fachwissen schnell und gezielt auf.
  • Ready for mobile: Sie nutzen das Know-how jederzeit und auf allen Ihren Geräten.

Einloggen oder registrieren

Lerneinheit weiterlesen

Um die komplette Lerneinheit zu sehen, loggen Sie sich bitte ein oder registrieren Sie sich.

Ein Zugang bietet Ihnen zahlreiche Vorteile:

  • Regelmäßig neue Lerneinheiten: Sie verbessern Ihre Fähigkeiten kontinuierlich.
  • Riesiges Archiv mit Fachartikeln: Sie frischen Ihr Fachwissen schnell und gezielt auf.
  • Ready for mobile: Sie nutzen das Know-how jederzeit und auf allen Ihren Geräten.

Einloggen oder registrieren

Inhaltsverzeichnis

  • SVG-Dateien in Illustrator nutzen
    • Ausgewählte Slices speichern
    • Arbeiten mit SVG
      • Formate und Maßeinheiten
      • RGB und Hintergrund
      • Geometrische Grundformen
      • Wenige Punkte
      • Zusammenfügen von Pfaden
      • SVG-Effekte
      • Groups, Layers, IDs: Hierarchien
      • Verwendung von Text
      • Konturen und Pinsel
      • Füllmethoden
      • Anpassen der Zeichenfläche
      • Ausgeblendete Objekte, Ebenen. Symbole
    • Als SVG exportieren
      • Fonts
      • Stile bzw. CSS-Eigenschaften
      • Platzierte Bilder
      • Genauigkeit und Objekt-IDs
      • Interaktiv bzw. Responsive und Minifizieren
      • Weitere Optionen

Beitragsinfo

Diese Beiträge könnten Sie auch interessieren

von Monika Gause

Wie Sie einen Gehzyklus komplett mit Illustrator und Photoshop erstellen

In Erklärvideos oder auf Portfolio-Websites sieht man sie häufiger: reduzierte Figuren, die eine persönliche Verbindung schaffen sollen.Wussten Sie, dass Sie einfache Animationsphasen für diese Figuren auch in Illustrator erstellen können. Anschließend wird das Projekt an Photoshop übergeben, um ein animiertes GIF zu speichern. Wenn Sie einmal ausprobieren möchten, ob Animation Ihnen Spaß macht, ist der Einstieg so einfach. Wir erstellen in dieser Übung einen Gehzyklus aus sechs Phasen.

Mehr...

von Monika Gause

Wie Sie Illustrators neue Export-Funktion richtig im Web-Workflow einsetzen

In den vergangenen Versionen wurde die Unterstützung für Screendesign-Workflows in Illustrator sukzessive ausgebaut. Mit Version CC 2015.3 wurde eine weitere große Lücke geschlossen: der Export einzelner Elemente. Wir erläutern Ihnen genau, wie Sie die neuen Möglichkeiten in der Praxis nutzen.

Mehr...

von Lukas Bischoff

Wie Sie eine Infografik im Flat-Design Stil mit Illustrator umsetzen

Was ist Flat Design? Der Begriff »Flat Design« und die damit verbundene Gestaltungsrichtung sind bei Weitem keine Neuheit in der Designwelt. Der endgültige Durchbruch ist wohl Microsoft mit der Einführung des Betriebssystems Windows 8 gelungen, und spätestens seit der Einführung von Apples iOS 7 ist »Flat Design« nicht nur in der Gestaltungsbranche in aller Munde. Doch was ist dieser Trend genau und was macht ihn so besonders? Wie setze ich diese Gestaltungsform am besten ein und worauf muss ich achten? Am Beispiel einer Informationsgrafik möchte ich auf den kommenden Seiten meine Vorgehensweise schildern und die Vor- und Nachteile dieser Stilrichtung herausarbeiten

Mehr...
Menu