kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Adobe Illustrator


SVG-Grafiken erstellen, exportieren und einbinden

SVG

Mit dem Format SVG (Scalable Vector Graphics) können Vektor-Grafiken im Browser dargestellt werden. Wie bei Vektor-Grafiken üblich, werden Farbwerte und Formen nicht über Pixel definiert, sondern mathematisch beschrieben. SVG-Grafiken haben dadurch eine sehr geringe Dateigröße, lassen sich verlustfrei und ohne Zuwachs der Dateigröße skalieren und mit CSS oder JavaScript animieren oder verändern.

In diesem Artikel fassen wir zusammen, was ihr beim Erstellen von SVGs beachten solltet.

Beitrag zu Ende lesen

Illustrator-Objekte NICHT am Pixelraster ausrichten

Adobe Illustrator wird dank SVG & Co. auch für Webdesigner ein immer wichtigeres Werkzeug. Wenn Ihr nun – beispielsweise im Rahmen einer Retina-Optimierung – eure Pixelgrafiken nachträglich auch als Vektorgrafik konstruieren möchtet, kann es sich als sehr lästig erweisen, dass horizontale und vertikale Pfadsegmente in Illustrator CC standardmäßig auf ganzen Pixeln einrasten. Normalerweise können Vektoren nämlich frei positioniert werden; was es euch ermöglicht deutlich filigranere Formen zu zeichnen.

Beitrag zu Ende lesen

Online Grid-Generator für Photoshop und Illustrator

Der Einsatz von Gestaltungsrastern (Grids) ist aus dem modernen Webdesign nicht mehr wegzudenken. Um in der Layoutphase mit Rastern arbeiten zu können, stehen zwei Optionen zur Verfügung. Entweder greift man auf ein vordefiniertes Grid-System wie beispielsweise 960.gs zurück, oder man berechnet sich ein eigenes Raster. Ich persönlich bevorzuge die Arbeit mit einem selbst erstellten Raster, da ich so alle Inhalte der Website bestmöglich berücksichtigen kann.
Nicolaj Kirkgaard Nielsen hat nun einen Online-Grid-Generator für Photoshop und Illustrator entwickelt, der alle Funktionen abdeckt, die ich bei der Arbeit mit Gestaltungsrastern benötige.

Beitrag zu Ende lesen

HTML5, CSS3 und SVG Export aus Illustrator

In den Adobe Labs wurde ein neues Illustrator CS5-Plugin veröffentlicht was es ermöglicht in Illustrator erstellte Grafiken als HTML5 Canvas, CSS3 oder SVG-Grafiken zu exportieren.
Dieses Plugin ist meiner Ansicht nach ein wichtiger Schritt in die richtige Richtung. Auch für Photoshop wurden in der Vergangenheit "HTML-Layers" diskutiert die es ermöglichen sollen grafische Stile direkt webfähig zu exportieren und somit den Workflow zu beschleunigen.

Das Illustrator Plugin kann in den Labs heruntergeladen werden.

Was haltet Ihr von Plugins dieser Art, sei es in Illustrator oder in Photoshop?