Adobe Digital Publishing Suite (ADPS)

Seit nicht all zu langer Zeit hat Adobe nun mit dem Update der Creative Suite auf Version 5.5 die Digital Publishing Suite in InDesign integriert. Alle User, die nicht auf eine aktuelle InDesign Version 5.5 updaten möchten, haben auch die Möglichkeit mit einer InDesign 5.0 Version in den Genuss des Digital Publishing für iPads zu kommen. Das setzt allerdings voraus, dass Sie über den Adobe Extension Manager die Adobe Folio Producer Tools installieren. Dies umfasst die InDesign-Plugins “Overley Creator”, “Folio Builder” sowie den “Content Viewer”.

Welche Funktionen stecken nun hinter diesen neuen Erweiterungen?

Nach der Installation einer aktuellen InDesign Version oder der Folio Producer Tools sind Sie nun in der Lage, innerhalb von InDesign “.folio-Dateien” zu erzeugen. Die Folio-Dateien kann man sich wie eine Art “Zip-Datei” vorstellen, die alle notwendigen Inhalte wie zum Beispiel Bilder, Videos und Sound über eine XML-Datei verwaltet. Hierbei muss besonders darauf geachtet werden, dass bei der Erstellung solcher Folio-Dateien jeweils für das Querformat am iPad als auch für das Hochformat eine eigene Datei erstellt wird. Die fertiggestellte Folio-Datei wird dann über die “Adobe Cloud” auf dem iPad publiziert. Adobe hat speziell für das digitale Publishing aus InDesign heraus einen Dienst zur Verfügung gestellt, wo jeder Producer die erstellten Folio-Dateien verbreiten kann. Hierfür ist es lediglich notwendig, dass Sie über “acrobat.com” eine Adobe-ID anlegen und die Folio-Dateien dann hier publizieren. Adobe stellt über den iTunes-Store die kostenlose App “Adobe Content Viewer” zur Verfügung. Über diese App können sie dann Ihre produzierten interaktiven Magazine abrufen und verbreiten. Je nach Programm, das Sie als Kunde oder Agentur wählen, ist es dann natürlich auch möglich, dass jeweils eine eigene App mit eigenen Icon über den iTunes-Store publiziert wird. In dieser App werden dann auch nur Ihre digitalen Magazine geladen.  Die Verbreitung von interaktiven Inhalten über den Cloud-Dienst von Adobe ist selbstverständlich kostenpflichtig. Hierbei bietet Adobe unterschiedliche Lizenzen an. Neben einer Single-Edition gibt es die Professional- und Enterprise Edition. Je nachdem in welchem Umfang Sie zukünftig Inhalte produzieren möchten, kommt jeweils eine andere Lizenz in Frage. Für Verlage zum Beispiel lohnt es sich in der Regel, die Enterprise Edition zu wählen. Alles in allem entscheidet einfach die Anzahl der digitalen Produktionen, welche Lizenz für Sie die Richtige ist.

Die Idee zukünftig aus einer Quelle mehrere Kommunikations-Kanäle zu bedienen, rückt immer näher. Adobe ist wahrlich schon ein sehr flexibles Publishing-Tool, um Inhalte digital zu publizieren oder auch automatisierte Katalogproduktion zu betreiben. Die Erweiterung der Folio Producer Tools bietet jeder Agentur und jedem Publisher neue Möglichkeiten. Geschäftsberichte oder auch Unternehmensbroschüren können nun direkt aus InDesign für das iPad produziert werden. Dieser Weg wird in Zukunft eine entscheidende Richtung sein. Das Benutzer- und Leseverhalten der User wird sich mit dem iPad nochmals verändern. Das iPad bietet jedem Menschen nun die Möglichkeit, alle seine wichtigen digitalen Inhalte just in Time dabei zu haben. Bücher, Filme, Musik oder auch Broschüren sind griffbereit auf dem iPad. So müssen Sie zukünftig nicht mehr ein 300 Seiten starkes Buch mit sich herumtragen, sondern haben auf dem iPad gleich eine Vielzahl von Büchern in der Hand. Wie genial zum Beispiel Prospekte für das iPad produziert werden können, zeigen reihenweise die Automobilhersteller wie BMW, Audi oder Porsche. Das interaktive Erlebnis von Produktbroschüren ermöglicht dem User vielfältige Betrachtungsweisen der Produkte.

Poster mit Message

Wie bereitet man ein ödes Diagramm, Chart oder Schemata so auf das es nicht mehr nach trockener Informationsbeschaffung aussieht? Diese Frage beantworten wir heute mit einer offenen hig-rez PSD für euch. Sollten einzelne Schritte unklar sein einfach die Fragen hier Posten und ich werde euch mit Rat und Tat zur Seite stehen. Viel Spaß mit dem Poster (natürlich auch zum direkt an die Wand hängen)!

Poster downloaden

Erkennen von transparenten und opaken Pixeln in ActionScript

Oft bekommt man als Entwickler ein .png, das als Button dienen soll. Hier ist wie immer der einfache Weg, Bild einbinden und den Container klickbar machen. Das ist ja soweit kein Hexenwerk. Jedoch kann das zu unschönen Effekten führen, da natürlich auch die transparenten Teile des Bildes Klickbar sind und somit Bereiche interaktiv, die rein optisch gesehen, nicht mehr zum im Bild enthaltenen Objekt gehören.

Klar kann man jedes mal eine Überprüfung des unter dem Mauszeiger liegenden Pixels machen und prüfen ob dieser nun transparent ist oder eben nicht. Aber es wäre doch schön, einfach eine Fläche zu haben, die man als ClickArea über das Bild legen kan, um darauf die MouseListener zu legen, ohne jedes Mal irgendwas abzuprüfen, was eventuell zu unschönen Seiteneffekten führt.

Die simple Variante hierfür ist eine BoundingBox zu generieren, welches das Rectangle repäsentiert, in dem die opaken Flächen liegen. Für hauptsächlich rechteckige Formen sollte das ausreichend sein. Aber was ist wenn, die Form komplexer ist oder einfach nicht Rechteckig? Das führt dann zu folgendem Ergebnis:

This movie requires Flash Player 9

Das ist bei dieser Form kein wirklich akzeptables Ergebnis. Man hätte sich hier auch einfach die Mühe sparen können. Also benötigt es einen anderen Ansatz, die eine Annäherung an die Form ermöglicht und so eine bessere BoundingBox zurückliefert.

Das Ansatz dazu klingt recht einfach. Man unterteilt das Bild in vier gleiche Rechtecke und schau nach, wie es mit den Transparenzen innerhalb der Fläche aussieht. Da gibt es drei Möglichkeiten: nur transparente, nur opake oder beides gemischte Pixel. Wenn es nur transparente Pixel sind, muss dieser Teil der Bildes nicht weiter untersucht werden. Genau das selbe gilt für die opaken Pixel. Jedoch sollte man sich hier den Bereich merken, da er ja zur BoundingBox des Bildes gehört, die ja Ziel der ganzen Aktion ist.

Bei den Rechtecken mit transparenten und opaken Pixeln muss man einfach wieder unterteilen und untersuchen. Dies sollte man aber nicht zu oft durchführen, da sich der Summe der Untersuchungen natürlich jedes mal vervierfacht. Im folgenden Beispiel habe ich 8 Iterationen verwendet, was zu einem recht guten Ergebnis führt:

This movie requires Flash Player 9

Die Überprüfung auf transparente und nicht transparente Pixel ist eigentlch recht einfach. Man nutzt das Rechteck aus der Unterteilung und führt die BitmapData.getPixels-Methode aus. Diese liefert einen ByteArray aller Farbwerte im Rechteck zurück und zwar 32-Bit. Über readUnsignedInt() bekommt man aus diesen wiederum die Farbwerte und kann diese über „>>> 24“ (Unsigned right shift) um eben 24 Bit nach rechts verschieben, womit der Alphakanal übrig bleibt. Hier bildet man die Quersumme der Alphawerte. Sollten diese 0x00 sein ist der Bildteil transparent, ist er 0xFF ist er eben opak. Hier lassen sich dann auch Toleranzen einfügen. Für die doch recht üppige Menge an Überprüfungen, ist es im übrigen besser eine Linked List zu nutzen, anstatt eines Arrays oder ArrayCollection.

Das ganze führt dann zu folgendem Ergebnis (grün sind die voll opaken Bereiche, die blauen die Randbereiche, die bei der letzten Iteration übrig bleiben):

This movie requires Flash Player 9

Wallpaper design tutorial

In diesem Tutorial werde ich euch verschiedene Techniken in Photoshop CS5 zeigen die es euch ermöglichen ein kreatives, stylishes Wallpaper zu erstellen. Das Video besteht aus 3 Teilen und dürfte insgesamt nicht mehr als eine Stunde Zeit in Anspruch nehmen. Solltet Ihr Fragen zu einem der gezeigten Schritte haben – zögert nicht und schreibt uns.

Dann starten wir mal mit dem Tutorial | Schwierigkeitsstufe: mittel

Hier für euch das Krabbenbild zum Downloaden (Einfach Rechtsklick und Bild kopieren)

Part 1 – Bildbearbeitung

Part 2 – Illustration

Part 3 – Photoshop CS5 3D

Ich hoffe das Tutorial hat euch gefallen und weitergeholfen. Feedback höre ich wie immer gerne also zögert nicht ein Kommentar dazulassen. Wenn ihr uns bei facebook noch nicht hinzugefügt habt dann wäre jetzt natürlich ein guter moment das nachzuholen.

Viele Grüße – Sebastian

Tutorial Distress Font Effekt

Wie versprochen werden die Abstände zwischen den Tutorials wieder kürzer und hier kommt schon das nächste. Ausnahmweise mal hauptsächlich ein Illustrator-Tutorial. Wie kann ich beliebige Schriftarten mit einem Grunge-Look belegen, ohne die Editierbarkeit zu verlieren? – Die Antwort heißt: Deckkraftmasken.

Das ganze Verpacken wir wie immer noch in einem Designbeispiel, viel Spaß mit dem neuen Tutorial!

Gehen wirs an | Schwierigkeitssufe: leicht-mittel

 

Der zeroseven SOUND VISUALIZER

Der Visualizer ist aus der einfachen Idee entstanden, Sounds mittels Flash zu visualisieren. Begonnen hat es mit einfachen Ausgaben des Spektrums eines Sounds mit Hilfe der computeSpectrum() Methode des SoundMixers. Immer weitere Versuche, was mit dem entstehenden ByteArray machbar ist, entstanden.

In Gesprächen entwickelte sich dann die Idee, eine Plattform zu schaffen, welche Sounds eines Users analysiert, visualisiert und später dann ein Bild zum Download der aktuellen Visualisierung anbietet. Ein einfacher Screenshot wäre hier möglich gewesen und die Bilder jpg- oder png-kodiert zum download anzubieten. Aber solche Bilder sind sehr klein und können dann z.B. nicht als Plakat gedruckt werden. Also suchte ich nach einer anderen Lösung. SVG wäre eine Variante gewesen. Dazu hatte ich auch schon die Grundzüge eines Exporters geschrieben, der die XML-Struktur aus Graphics-Elementen in ActionScript bilden kann. Hiermit wäre zumindest die freie Skalierbarkeit des Plakates gewährleistet. Etwa zu dieser Zeit bin ich dann auf die Bibliothek AlivePDF von Thibault Imbert gestoßen und hab auch hier erste Versuche betrieben (siehe labs-Eintrag dazu). Und nach ein paar Tests war klar, das ist der Weg, den ich für den Visualizer gehen muss.

Aber der SVG Exporter war nicht ganz gestorben. Das Logging-Tool das im Hintergrund mitläuft ist noch immer Teil der Anwendung. Einfach gesagt, merkt sich dass Tool die Spezifikationen aller Elemente. Dieses Log nutze ich jetzt beim PDF-Export zum Erstellen der Elemente des PDFs.

Anfangs mit random-Farben ausgestattet, brachte Sebastian die Idee ins Spiel Kuler für Farbprofile zu nutzen. Also erfolgte mit Hilfe des Adobe Syndication Packages das Laden und Auslesen des Feeds der 20 beliebtesten Farben von Kuler. Dennoch hat auch der User die Möglichkeit eigene Farben zu verwenden. Ein eigenes ColorPicker-Tool kommt hier zum Einsatz.

Auch die Formen wurden vielfältiger. Anfangs nur mit Kreisen gezeichnet, kamen weitere Grundformen und Polygone hinzu. Auch die Möglichkeiten der Ausgabe erweiterten sich, je mehr ich mich darin „reingetestet“ hatte. Eigene Formate entstanden sowie Hilfstools zur Umrechnung von Pixelwerten aus dem Logger hin zu Zoll und Millimeter. Die Oberfläche bekam ein schickes Design verpasst und weitere Funktionen spendiert, um dem User mehr Möglichkeiten zu geben sein eigenes Plakat zu erstellen.

Ein Problem das es zudem zu bewältigen galt, waren die Probleme der SoundMixer.computeSpectrum() Methode. An sich eine tolle Sache und auch die Möglichkeit den ByteArray als RAW-Daten oder als Daten mit einer schnellen Fourier-Transformation zu erhalten ist sehr viel wert. Aber der SoundMixer hat einen entscheidenden Nachteil. Er ist eine globale Klasse und greift somit auf alle möglichen Sounds zu. Das führte dazu, dass der Visualizer zum Beispiel versucht auf die Sounds eines Videos von YouTube zuzugreifen, wenn dieses in einem anderen Browser Tab oder Fenster läuft. Und ganz klar entsteht dabei ein Sandbox-Problem. Umgangen habe ich diese Problematik mit Hilfe der Sound.extract() Methode. Sie liefert den ByteArray gleich zu Anfang zurück und zwar für den gesamten Audiostream. Daher erfolgt hier die Abtastung anders und etwas komplizierter als bei der computeSpectrum() Methode. Aber auch hierzu gibt es schon einen labs-Eintrag von mir (Link).

So entwickelte sich mit der Zeit eine Oberfläche, die für mich zum einen als Versuchs- und Testprojekt diente, aber letztendlich ein Tool darstellt, das ein breites Spektrum der Flashfunktionen abdeckt und auch zeigt was man performancetechnisch mit Flash so anstellen kann.

Aber nun nicht länger lesen sondern einfach ausprobieren:
http://visualizer.zeroseven.de/

Des weiteren möchte ich noch Thibault Imbert für seine Mühe und Arbeit bei AlivePDF danken, ein wirklich hammerkrasses Tool! Ebenso Sascha Wolter für seinen SystemManager, den Junges von Greensock für TweenLite & TweenMax, den Entwicklern des De MonsterDebugger und denen von pixelbreaker.com für das MacMouseWheel.

www.alivepdf.org
www.wolter.biz
www.greensock.com
www.pixelbreaker.com
www.adobe.com
www.demonsters.nl

Flash Experiment – Curving

Ein kleines Experiment unter Verwendung eines Zusatzpackages von Lee Brimelow. Es wird alle 50 Millisekunden eine neue Linie mit zufälliger Farbe, Position und Winkel erzeugt und animiert. Um die Performance nicht ins unermessliche zu belasten, werden fertig animierte Linien auf ein BitmapData reduziert und von der DisplayList genommen.

This movie requires Flash Player 9

Flash CS5 [Viper] Preview

Flash CS5 steht in den Startlöchern und die ersten Features sickern langsam durch. Auch erste Preview-Videos stehen im Netz zum Ansehen bereit. Zudem soll noch im Dezember 2009 die Beta-Version von Viper bei Adobe zum Download bereit stehen. Der endgültige Release ist zeitlich noch nicht genau definiert, soll aber im Frühjahr 2010 erscheinen. Aber jetzt ist schon ein guter Zeitpunkt mal reinzuschauen was Flash CS5 mit sich bringt:

Apps fürs iPhone
Applications fürs iPhone schreiben. Diese Info ist wohl die am meisten verbreitete über das kommende Flash. Anfangs war ich noch recht skeptisch, in wie weit dies funktioniert. Gibt es Systemzugriffsmöglichkeiten auf zum Beispiel uad den Accelerator oder die Kamera im iPhone? Lee Brimelow hat dazu ein Video gemacht, worin er einen einfachen Codingansatz zeigt. Und es zeigt ganz klar, dass eben diese Hardwarezugriffe möglich sind. Hierfür gibt es eigene Klassen, die auch funktionieren sollen für andere mobile Endgeräte die z.B. einen Accelerator eingebaut haben. Leider ist es immer noch nicht möglich, Flash-Inhalte auf Webseiten auf dem iPhone anzusehen.

TextLayout Framework
Aber es gibt noch weitere Features neben dem Entwicklen von iPhone-Apps, auch wenn sie dagegen leider etwas untergehen. Zum Beispiel ist nun das TextLayout Framework in Flash CS5 integriert. Dieses Framework ist schon bereits veröffentlicht (opensouce) und kann in Flash wie auch Flex Projekten verwendet werden. Es bietet, vor allem im Vergleich mit den bisherigen Textmöglichkeiten, unglaublich viel mehr Möglichkeiten. Hier sollen sich die Entwickler von Flash mit denen von InDesign zusammengesetzt und zusammen dieses Framework erstellt haben. Auf jeden Fall ist dieses nun mit im neuen Flash fest integriert. Eine detailierte Info hierüber ist einen eigenen Blogeintrag wert und würde hier die Grenzen überschreiten, aber Jürgen hat dazu schon was geschieben:
http://labs.zeroseven.de/development/air/text-layout-framework-fur-flash-flex-und-air/
http://labs.zeroseven.de/development/flex/schriften-fur-die-neue-text-engine-des-flash-player-10-einbetten/

Coding
Bisher war es sehr umständlich in Flash direkt zu programmieren. Dies wird besonders auffällig, wenn man das bisherige Actions-Panel mit zum Beispiel Eclipse vergleicht. In Flash gibt es kein ordentliches Codehinting oder so unterstützende Features wie automatisches Erstellen von Klassen-Imports oder Snippets gibt es einfach nicht. Das hat den eigentlichen Programmieraufwand innerhalb von Flash extrem nach oben geschraubt. Im Video von Lee Brimelow zum iPhone, sieht man aber auch schon diese neuen Features von CS5. Imports und Snippets sind nun integriert. Auch werden Codehints für eigene Klassen dargestellt.

FlashBuilder Integration
Auch dieses Feature ist besonderns für Coder interessant. Wie gesagt, soll das Actions-Panel verbessert werden und das ist ja schon mal nicht schlecht. Es bleibt aber eine Panel und kann nicht Eclipse oder das darauf basierende FlashBuilder-Tool ersetzeb. Auch dies haben die Entwickler von Adobe erkannt und bieten eine Integration als ActionScript-Editor an.

Das waren jetzt meiner Meinung nach die ersten und auch wichtigsten Features zum neuen Flash CS5. Sicherlich kommen noch einige dazu. Aber es ist schon abzusehen, dass die diesmalige Weiterenticklung sehr stark zu Gunsten von Coding ausfallen wird.

Weitere Infos zum Thema:

Twitter zu Flash: http://twitter.com/adobeflash
Facebook-Seite zu Flash: http://www.facebook.com/flashplatform
Adobe Labs Flash CS5: http://labs.adobe.com/technologies/flashcs5/appsfor_iphone/
Lee Brimelow iPhone-App Preview: http://theflashblog.com/?cat=50
TextLayout Framework: http://opensource.adobe.com/wiki/display/tlf/Text+Layout+Framework

Nachtrag:
Wie ich gerade gelesen habe, wurde die Beta-Version des neuen Flash CS5 abgesagt. Aus Gründen der Stabilität laut Adobe. Eine etwas detailiertere Nachricht hat Lee Brimelow auf seinem Blog: http://theflashblog.com/?p=1546. Nun bleibt zu hoffen, dass wenigstens der Realease wie angekündigt bestehen bleibt.

Letterpress Effekt und Background Tipps

Endlich ist es wieder soweit. Ein neues Tutorial von mir, für euch. Ich hoffe das die lange Pause nicht dafür gesorgt hat das keiner mehr reinschaut. Es handelt sich um ein relativ kurzes, aber wie ich finde sehr nützliches, Tutorial. Ich schneide ein Thema an auf das ich in Zukunft noch näher eingehen werde – Smartfilter. Das Hauptaugenmerk liegt aber heute auf dem Hintergrund- und dem Schrifteffekt. Allerdings muss ich euch vorwarnen, denn es könnte sein das ich ein wenig eingerostet bin was die Präsentation angeht 😉

Genug geredet, viel Spaß mit dem neuen Tutorial…

Dann starten wir mal mit dem Tutorial | Schwierigkeitsstufe: leicht-mittel

Business Webicon mit Photoshop erstellen

In diesem Tutorial erläutere ich euch, wie man in den Programmen Illustrator und Photoshop gemeinsam ein Icon für eure Internetseite erstellen kann.

Schwierigkeitsstufe: mittel

Schritt 1

Erstellt als erstes ein Illustrator Dokument. Zeichnet nun mit dem Zeichenstift-Werkzeug (Apfel+P) eine halbe Silhouette eines Kopfes nach. Dupliziert diese und spiegelt Sie horizontal.

bild-39

Gebt dieser Silhouette die Konturfarbe #AFAFAF (1-Pixel) und einen Füllverlauf mit folgenden Farben, bei 0% (50% Schwarz), 35% (15% Schwarz), 42% (0% Schwarz) und bei 100 % (50% Schwarz).

bild-40

Schritt 2

Jetzt verpasst Ihr dem Icon noch einen Anzug. Hierfür müsst Ihr mit dem Zeichenstift-Werkzeug (Apfel+P) Linien ziehen, dies sollte in etwa so ausschauen wie unten auf dem Bild.

bild-41

Wie Ihr seht, habe ich dieser Fläche noch einen Verlauf Von 0% ( 79% Schwarz) zu 100% ( 100% Schwarz) hinzugefügt und dort dann die Art Kreisförmig.

Gebt dem Icon noch einen Hemdkragen und zieht mit dem Zeichenstift-Werkzeug (Apfel+P) eine Linie um das Kinn hervorzuheben, und speichert dieses Icon dann als .ai (Adobe Illustrator Format)  ab, um es im nächsten Schritt in Photoshop importieren zu können.

bild-43

Schritt 3

Erstellt ein neues Photoshop Dokument in einer beliebigen Größe. Platziert auf einer neuen Ebene eure zuvor abgespeicherte Icon.ai über (Datei > Platzieren > … ).

Nun könnt Ihr mit Hilfe von Photoshop euer Icon noch grafisch aufbereiten. Als erstes habe ich unter dem Hemdkragen einen kleinen Schatten hinzugefügt. Zieht über euer Zeichenstift-Werkzeug (Apfel+P) einen Pfad, diesen dann über Apfel + Klick auf den Pfad markieren. Als nächstes zieht Ihr einen Verlauf von Schwarz (#000000) zu Transparent und passt eure Farbe nach belieben an.

01_ps

Ihr könnt den Anzug etwas aufbereiten, indem Ihr eine Seidenstruktur darüberlegt, diese auf Graustufen stellt und dann etwas mit den Effekten und der Deckkraft herumexperimentiert. Verpassen wir dem Icon noch eine Krawatte, diese könnt Ihr ganz einfach mit Hilfe des Zeichenstift-Werkzeuges erstellen. Gebt dieser noch einen Verlauf und einen kleinen Shine am Krawattenknoten.

02_ps

Schritt 4

Wählt mit Apfel + Klick auf euer platziertes Vektoricon (Icon.ai) das Icon aus. Erstellt eine neue Ebene (Apfel+⇧+N) und füllt diese Auswahl mit einer beliebigen Füllfarbe. Entfernt einen Teil dieser Auswahl damit Ihr folgendes Ergebnis bekommt. Färbt dies in der Farbe Weiß (#FFFFFF) ein und gebt Ihr eine Deckkraft von 10%.

06_ps1

Schritt 5

Erstellt jetzt in Illustrator eine Anzugskragen, welchen Ihr dann wieder über (Datei > Platzieren > … ) platziert und dann an die Größe des Icons anpasst. Gebt dem Kragen einen linearen 90-Grad Verlauf mit folgenden Angaben 0% (#454545) zu 100% (#2b2b2b). Legt einen Weiß > Transparent Verlauf darüber, um den Kragen noch etwas hervorzuheben. Als letztes gebt dem Kragen noch einen schwarzen Schatten am Rand.

09_ps1

Endergebnis

Dupliziert den Kragen, spiegelt diesen horizontal und fertig ist euer eigenes Icon.

icon