Kategorien
Bilder & Vektorgrafiken bearbeiten Design Illustrator JavaScript & jQuery Programmierung

AI -> Canvas: HTML5 Canvas direkt aus Adobe Illustrator bestücken

Mike Swanson war über 11 Jahre bei Microsoft beschäftigt und hat dort neben vielen anderen Produkten ein Plugin für Adobe Illustrator erschaffen, das wie guter Wein ist. Je älter es wird, desto besser wird es. Vor knapp zwei Jahren, als Swanson die erste Version von AI -> Canvas noch für seinen damaligen Arbeitgeber veröffentlichte, war Canvas zwar schon ein Thema, aber wer nutzte das Element bereits produktiv? Heutzutage sieht die Sache anders aus. In jeder Hinsicht…

AI -> Canvas jetzt auch für CS6 verfügbar

Was hat sich geändert? Swanson ist nicht mehr bei Microsoft, sondern stolzer Besitzer eines eigenen Startup. Microsoft hat das Plugin zwar weiterhin im Angebot, pflegt es aber naheliegenderweise (?) nicht mehr. Mit Version CS6 kann AI -> Canvas nicht mehr genutzt werden. Jedenfalls gilt das für die Version, die auf den offiziellen Microsoft-Seiten zum Download bereit steht.

Swanson sah sich persönlich in der Verantwortung, seinem Plugin ein Leben nach Microsoft und auch nach CS5 zu ermöglichen. Sprachs, ging hin und beschäftigte sich mit den neuen Erfordernissen des SDK zu CS6. Auf seinem privaten Blog stellt er seither die aktuelle Version 1.1 des Plugins zur freien Verfügung. Das kann nicht mehr und nicht weniger als die Version 1, die weiterhin über Microsoft kostenlos bezogen werden kann. Aber, und das ist der entscheidende Unterschied. Es läuft auf den Plattformen Windows 7 und Windows 8, Mac OS X v10.7 (Lion) und v10.8 (Mountain Lion) und bedient sowohl die 32-, wie auch die 64-bit Ausgabe des of Illustrator CS6.

Die Installation ist simpel. Aus dem einzelnen Zip-File, welches alle Versionen enthält, sucht man sich die passende heraus und speichert sie je nach Plattform hier:

  • Ai2Canvas64.aip (\Program Files\Adobe\ Adobe Illustrator CS6 (64 Bit) Plug-ins)
  • Ai2Canvas32.aip (\Program Files (x86)\Adobe\Adobe Illustrator CS6\Plug-ins)
  • Ai2CanvasMac.aip (/Applications/Adobe Illustrator CS6/Plug-ins)

Zu beachten ist, dass Version 1.1 die CS6 voraussetzt. Alle Creative Suites darunter, namentlich CS3, 4 und 5, können mit der bisherigen Version des Plugin kooperieren.

Was kann AI -> Canvas?

Das Canvas-Element ist nicht viel mehr als ein Container für komplexere grafische Anwendungen und Abläufe. Programmiert werden Abläufe und Darstellungen unter Verwendung von JavaScript. Damit dürfte schon deutlich werden, dass Grafiker, Illustratoren und Zeichner eher nicht die Beschicker dieses Elements sind, zumindest nicht ohne programmierende Mittelsmänner.

Mit AI -> Canvas kann jeder Illustrator-Aficionado funktionierende grafische Anwendungen für das Canvas-Element schreiben, ohne auch nur eine Zeile JavaScript schreiben zu müssen; was im Übrigen in der Regel schon an den entsprechenden Fähigkeiten scheitern dürfte. AI -> Canvas kümmert sich über einen simplen Export aus Adobe Illustrator heraus um die Erstellung des gesamten erforderlichen Codes nebst sämtlicher, etwa erforderlicher zusätzlicher Dateien. Vektordarstellungen, die das Canvas-Element nicht korrekt umsetzen könnte, wandelt das Plugin automatisch in Rastergrafik um und verlinkt die entsprechenden Bilddateien an den korrekten Stellen. Sogar Animationen, wie Übergänge, Bewegungen, Easings, Verläufe und einiges mehr können direkt aus der vertrauten Illustrator-Umgebung heraus erzeugt werden.


Beispiele für unmodifizierte Export-Ergebnisse

Wie bereits eingangs erwähnt, ist AI -> Canvas, völlig software-atypisch, wie guter Wein. Zum Zeitpunkt seiner Entstehung war die Funktionalität schon beeindruckend, wenn auch von geringem praktischen Nutzwert. Die zunehmenden HTML5-Fähigkeiten gängiger Browser machen das zwei Jahre alte Plugin immer wertvoller. Und Swansons Update für die aktuelle Illustrator-Version könnte AI -> Canvas zu einem späten Durchbruch verhelfen.

Nein, für Inkscape steht das Plugin nicht zur Verfügung…

Links zum Beitrag:

  • Illustrator to HTML5 Canvas Plug-In Updated for CS6 – Mike Swanson’s Blog
  • AI -> Canvas V1 – Mix-Labs
  • Kurze Video-Einführung zum Plugin – Mix-Labs
Kategorien
(Kostenlose) Services Essentials

4 komfortable Webservices zur Bearbeitung von PDF-Dateien

PDF, das Portable Document Format aus dem Hause Adobe, ist aus dem Internet nicht mehr wegzudenken. Insbesondere die Tatsache, dass PDF-Dateien ihr Layout über alle Plattformen konsistent, inklusive etwaiger Schriftarten, behalten und recht gut gegen unberechtigte Manipulationen geschützt werden können, hat PDF zu einem der wichtigsten Dokument-Formate des Web werden lassen.

Trifft man irgendwo auf einen Text zum Download, er wird in der Regel als PDF vorliegen. Der kostenfreie PDF-Reader ist eine der am weitesten verbreiteten Softwares überhaupt. Zum Lesen taugt er, aber was tun, wenn man ab und an mal ein PDF bearbeiten muss?

Gelegentlich ist es notwendig, mehrere PDF-Dateien in eine zusammenzufügen, sie aufzuteilen oder zu drehen. Hier erweisen sich Online-Dienste, die diverse Bearbeitungen schnell durchführen können und einfach zu bedienen sind, als sehr hilfreich. Heute werde ich Ihnen einige solcher Dienste vorstellen.

Sejda

Sejda ist ein Webdienst zur Bearbeitung von PDF-Dokumenten. Die PDFs können nach dem Hochladen gedreht, aufgeteilt, zusammenfügt, per Passwort verschlüsselt werden und noch einiges mehr. Auf der Startseite des Dienstes steht eine umfangreiche Featureübersicht bereit. Haben Sie sich für einen Bearbeitungsvorgang entschieden, laden Sie Ihr Dokument hoch, klicken auf „Continue“ und warten das Resultat ab. Schnell und bequem bekommen Sie Ihre PDF-Datei bearbeitet zurück. Sejda befindet sich derzeit noch in der Beta-Phase. Weitere Features werden für die finale Version versprochen.


Sejda.com: Startseite

I Love PDF

Ein weiterer Dienst zur PDF-Bearbeitung ist I Love PDF. Hier funktioniert es ähnlich wie bei Sejda. Allerdings ist I Love PDF nicht ganz kostenlos. Dennoch können Sie mit Ihren PDF-Dateien schon einiges anstellen, bevor der Griff ins Portemonnaie erforderlich wird. Nur ist dann die Anzahl an Dokumenten, welche hochgeladen werden, geringer und ebenso die nutzbare Speicherplatzgröße.


I Love PDF: Startseite

PDFescape

PDFescape reiht sich fast nahtlos in unsere kleine Zusammenstellung ein. Allerdings liegt der Fokus hier mehr auf der Bearbeitung der Inhalte. Sie können Textstellen mit einem Marker hervorheben, eine Notiz einfügen, die Reihenfolge ändern und das alles online im Browser. Voraussetzung für die Nutzung ist eine Registrierung. Legen Sie sich einen Account zu und laden Sie Ihr Dokument hoch. Sie finden zahlreiche Tools zur PDF-Bearbeitung.


PDFescape

PDF My URL

PDF My URL fällt etwas aus dem rahmen, kann dafür aber etwas spezielles. Der Name des Dienstes spricht für sich: PDF My URL wandelt die von Ihnen angegebene URL in eine PDF-Datei um, um Sie lokal speichern zu können.


PDF My URL konvertiert die von Ihnen angegebene Webseite in PDF

Joli Print

Joli Print verfolgt einen ähnlichen Ansatz wie „PDF my URL“. Auch hier können Sie eine URL in PDF umwandeln lassen. Geben Sie jedoch den Link beispielsweise zu einem Artikel an, erhalten Sie in wenigen Sekunden diesen Artikel als PDF. Der Text samt Bildern wird dabei schön formatiert und werbungsfrei an Sie geliefert.


Joli Print: Beiträge aus Online-Medien schick formatiert als PDF

Leider wurde Joliprint zwischenzeitlich eingestellt. Danke für den Hinweis an Aaron Ethan Fox.

Haben wir einen wichtigen Dienst vergessen? Ergänzen Sie gern in den Kommentaren!

(dpe)

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Fotografie Inspiration Photoshop

Lookfilter.com: Schicke Photoshop-Droplets für noch schickere Fotoeffekte

Lookfilter.com kennen treue Leser bereits. Vor zwei Monaten kündigte der Service an, in Kürze einige sehr interessante Photoshop Aktionen für ambitionierte Fotografen und Instagram-Fans gleichermaßen anbieten zu wollen. Die sehr elegante Aktion “The Wise Watson” erklärten wir zum Freebie des Tages. Mittlerweile hat sich einiges getan bei Lookfilter. Der Dienst ist offiziell gestartet und eine kostenlose Aktion gibt es auch weiterhin…

Lookfilter.com setzt jetzt auf Droplets

Sieben Filter-Aktionen stehen zum Erwerb zu unterschiedlichen Preisen auf Lookfilter.com bereit. Eine davon, The Lilac Lilith gibt es kostenlos gegen Bekanntgabe einer E-Mail-Adresse. Zum Bundlepreis von derzeit 69 USD können alle sieben Filter auf einen Schlag erworben werden. In Kooperation mit unserer großen Schwester, dem Noupe Design Magazine, und Lookfilter.com können Leserinnen und Leser des Dr. Web Magazin bis zum 31. Dezember 2012 einen satten Rabatt von 50% auf die ohnehin im Rahmen der Produkteinführung schon rabattierten Preise in Anspruch nehmen.

Geben Sie beim Checkout einfach den Coupon-Code Lookfilter loves noupe ein und der Preis wird um die Hälfte reduziert. So können Sie alle sieben Aktionen für schlanke 34,50 USD erhalten.

Im Gegensatz zur ursprünglichen Vorgehensweise stehen die Filter aktuell nicht mehr als Photoshop Aktionen bereit, die man manuell über Fenster > Aktionen > Aktionen laden verfügbar machen müsste. Vielmehr entschieden sich die Betreiber für die Verwendung einer ganz ähnlichen Variante, den sogenannten Droplets. Hierbei handelt es sich um kleine, eigenständig wirkende Anwendungen, auf die man direkt Fotos oder ganze Bilderordner zieht. Das Droplet ruft dann nötigenfalls Photoshop auf und appliziert sämtliche Aktionen, die ansonsten im Droplet hinterlegt sind.

Ich war zunächst skeptisch, da Droplets ursprünglich nicht für die Bildnachbearbeitung mit Blick auf Fotoeffekte ersonnen wurden, sondern um Stapelverarbeitungs-Aufgaben zu vereinfachen. Dazu gehören Klassiker, wie die Speicherung fürs Web ganzer Bilderordner oder die Anwendung von Änderungen der Bildmaße, also wirklich ganz klassische, dabei simple Massenaufgaben. Da passt die Effektbearbeitung auf den ersten Blick nicht dazu.

Auf den zweiten Blick zeitigt die Wahl jedoch auch positive Effekte. So sind die Droplets zu allen Sprachversionen von Photoshop, sowie zu allen Programmversionen ab CS3 kompatibel. Aktionen machen bisweilen schon bei den Sprachvarianten Probleme und benötigen entsprechend zusätzlichen Anpassungsaufwand.

Noch Zukunftsmusik ist die Ankündigung, die Effekte auch für Adobe Lightroom als sogenannte Presets verfügbar zu machen. Entsprechende Filter sollen jedoch in Kürze folgen.

Lookfilter.com: So funktioniert’s

Ist ein Foto auf das Droplet des gewünschten Effekts gezogen, ruft dieses Photoshop auf, appliziert sämtliche vordefinierten Arbeitsschritte und führt das Ergebnis danach als eigene Ebene zusammen. Das hat den Nachteil, dass man die Arbeitsschritte, anders als bei einer Aktion nicht nachvollziehen kann. Gut gelöst ist hingegen, dass die hinzugefügte Ebene das Original nicht antastet. Dieses liegt unverändert als Ebene hinter der bearbeiteten Version.

In meinen Tests mit Windows 8 Pro 64bit unter Verwendung des Photoshop CS6 64bit legten die Filter eine rasante Arbeitsgeschwindigkeit an den Tag. Die Ergebnisse sind durchweg professionell, wenn auch – natürlich – Geschmackssache.

Damit Sie sich einen Eindruck verschaffen können, habe ich mich nicht auf die auf Lookfilter.com hinterlegten Beispielbilder verlassen, sondern nahm eines meiner Urlaubsbilder 2012, aus der Hüfte geschossen mit einem HTC One X, also ohne professionellen Anspruch, her. Auf dieses Bild ließ ich dann fünf Filter der Kollektion los. Das linke Drittel eines jeden Bildes zeigt das hinterliegende Original, die rechten beiden Drittel sind mit dem Effekt versehen. So kann man das Vorher und das Nachher gut beurteilen:


Droplet The Lilac Lilith


Droplet The Crossing C41


Droplet The Rocking Richard


Droplet The Stylish Stephen


Droplet The Wild William

Insbesondere The Crossing hat es mir angetan, aber auch The Wild William wird noch desöfteren zum Einsatz kommen. Ich bin indes auch kein Fan starker Farbverfremdung, wie das etwa mit The Lilac Lilith erreicht werden kann. Das jedoch ist, wie gesagt, Geschmackssache.

Sollten Ihnen die Beispiele nun Appetit auf mehr gemacht haben, vergessen Sie beim Checkout nicht den Code Lookfilter loves noupe.

Links zum Beitrag:

Alle Bilder im Überblick:

Kategorien
Essentials Icons & Fonts

Source Code Pro: Adobe stellt zweite Open Source-Schriftart vor

Unter dem Namen Edge stellte Adobe gestern eine ganze Reihe von neuen Diensten und Anwendungen für den Creative Professional vor. Kleines, aber nicht unbedeutendes Detail am Rande: Auch eine neue Schriftart, wiederum bereit gestellt unter der Open Font Lizenz, ist dabei. Erneut zeichnet Chef-Schriftentwickler Paul D. Hunt für die Umsetzung verantwortlich. Erneut wird der Font inklusive aller Rohdaten über SourceForge zum Download vorgehalten.

Source Code Pro: Fast 13.000 Downloads kurz nach Veröffentlichung

Bereits die Veröffentlichung des ersten Open Fonts unter dem Namen Source Sans Pro hatte zunächst für Überraschung, dann für Begeisterung gesorgt. Laut Hunt ist der Blogbeitrag zur Veröffentlichung von Source Sans Pro der meistgelesene Artikel in der Geschichte des Typblography-Blogs. Die Schriftart kann bereits fast 70.000 Downloads vorweisen. Auch bei Dr. Web hatten wir die Initiative mit Freude zur Kenntnis genommen.

Die heutige Vorstellung der Edge-Suite liefert den Rahmen nach. Denn unklar war im Grunde, mit welcher Intention Adobe geradezu plötzlich an die Entwicklung freier Schriftarten ging. Sicher, freie Software benötigt freie Schriftarten, so die offizielle Begründung des Hauses. Doch im Kontext zu Edge wird klarer, welche Motivation vorherrschte. Wir werden hier bei Dr. Web die einzelnen Teile der Edge-Suite in den kommenden Wochen noch einer näheren Betrachtung unterziehen.


Hunt legt, wie schon bei Source Sans Pro, besonderen Wert auf die eindeutige Unterscheidbarkeit der Zeichen.

Es scheint demnach klar, dass Adobe auf der Suche nach einer umfangreichen Fontunterstützung innerhalb seiner neu geschaffenen Tools war. Offenbar liebäugelte man schwer mit dem Bestand an Google Web Fonts. Wie bekommt man Google ins Boot im Open Source Bereich? Kontribution dürfte das Zauberwort geheißen haben. Beide Adobe Fonts sind mittlerweile Bestandteil des Google Font Directory geworden. Im Gegenzug bindet Adobe weite Teile eben dieses Verzeichnisses in sein eigenes Angebot Edge Webfonts ein. Und diese Edge Webfonts sind aus allen Teilen der Edge Services heraus voll verwendbar, weil integriert.

Source Code Pro: Sechs Varianten verfügbar

Source Code Pro kommt in weniger Varianten als der Vorgänger Source Sans Pro. Lediglich fünf plus eine Variante sind verfügbar, als da wären Source Code Pro (regular und fett), Source Code Pro Black, ExtraLight, Light und Semibold. Bei Source Code Pro handelt es sich um eine Festschrittschrift, neudeutsch auch als Monospaced bekannt. Sie wurde geschaffen für Coding-Zwecke und wird dementsprechend hauptsächlich innerhalb der Edge-Anwendung Edge Code Verwendung finden. Aktuell sind alle Edge Webfonts ausschließlich in Edge Code und Adobe Muse direkt nutzbar.

Wie bereits bei Source Sans Pro beinhaltet der Standard-Download, der prominent auf der SourceForge-Seite verlinkt ist, nur die Schriftarten als OTF und TTF. Wer an die Rohdaten möchte, sucht tiefer im Repository.

Links zum Beitrag: