PixelBender

Mit der Einführung des FlashPlayer 10 wird es möglich eigene Filter, Effekte und Überbelndungen mittels PixelBender zu schreiben und zu implementieren. Dabei wurde bei PixelBender, ehemals Hydra, auf eine einfache Sprachstruktur Wert gelegt und ist C sehr ähnlich. Hinzu kommt nicht nur die Verwendbarkeit in Flash sondern auch anderen Adobe Produkten wie After Effects.

Adobe bietet zur Entwicklung ein Toolkit an, mit dem sich PixelBender Filter und Effekte erzeugen lassen an. Diesen Toolkit sowie weitere Informationen lassen sich unter labs.adobe.com finden.

PixelBender ist eine Programmiersprache, die www.infopotenzmittel.com – this website hardwareunabhängig ist und zur Beschreibung von bildverarbeitenden Algorithmen gedacht. Es nutzt CPU, GPU wie auch Multicore-Prozessoren. Mit dieser Unterstützung lassen sich auch rechenaufwändige Algorithmen schnell verarbeiten. Wie bereits erwähnt ähnelt PixelBender sehr stark C und unterstützt durch seinen Aufbau die Nutzung und Verwendung durch Dritthersteller, die ihrerseits wieder die Filter und Effekte weiterverbreiten können.

Die Basiseinheit der Bildverarbeitung in PixelBender ist der „kernel„. Jedes PixelBender-Programm definiert genau einen kernel, wobei dieser das Ergebnis eines output-Pixels basierend auf verschiedenen Input-Pixeln als Objekt bereitstellt. Das parallele Modell des Aufbaus bewirkt, dass es keine Interaktion zwischen den individuellen Aufrufen einer kernel-Funktion für jeden Output-Pixel gibt.

Wie beschrieben wirkt sich der kernel parallel auf alle Pixel des Output-Bildes aus. Das einzige was sich ändert sind die Koordinaten des Bildes, auslesbar durch ‚outCoord‚. Das Resultat hiervon ist ein float2 (Vektor mit 2 floats) welche die x und y Koordinaten repräsentieren. Desweiteren haben die Input-Bilder für PixelBender keine Größe. Jedes Bild wird als infinite Ebene von konkreten Pixel-Koordinaten angesehen. Dies macht PixelBender zum einen unabhängier, zum anderen kann ein Bild nicht über sein Zentrum gespiegelt werden, da das Bild kein Zetrum hat. Vielmehr muss das Bild über den Ursprung gespiegelt und verschoben werden um diesen Effekt zu erzeugen. PixelBender bietet nicht nur die Möglichkeit ein Bild zu verändern, sondern mehrere Bilder zur Veränderung zu nutzen und miteinander zu verrechnen.

Insgesamt bietet Pixelbender ein enorme Fülle an Möglichkeiten, welche nicht nur auf ein Programm oder eine Umgebung beschränkt ist. Vielmehr lassen sich die kernels unterschiedlich nutzen und verbreiten. Damit ist der effizienten Gestaltung von Filtern sowie deren kreativer Gebrauch keine Grenzen mehr gesetzt. Interessant ist PixelBender besonders in Hinsicht auf den Flashplayer 10. Hier lassen sich diese Filter dann zur Laufzeit animieren und verändern, wobei die Frage nach der Leistungsfähigkeit bleibt.

Underwater Abstract Art

Im heutigen Tutorial geht es in erster linie um eine bestimmte Technik. Viele wissen wie man Brushes in Photoshop erstellt, aber die wenigsten wissen was man über die Einstellungsmöglichkeiten bei den Pinselvorgaben noch alles rausholen kann. In diesem Tutorial erleutere ich eine dieser Möglichkeiten und zeige euch wie man ein stylish anmutende Grid-Grafik damit erzeugen kann ähnlich wie in meinem Illustrator Tutorial.

Dann starten wir mal mit site dem Tutorial | Schwierigkeitsstufe: mittel

 

Hier das von mir erstellte Bild zur genaueren Betrachtung 😉

Skinnen mit Illustrator CS3

Ich skinne read more at nun schon seit geraumer Zeit Flexkomponenten mit Illustrator CS3. Dabei bin ich über einige Lösungen/Probleme gestolpert. Bei letzterem habe ich mich mehr als nur einmal gefragt ob ich der einzige Mensch auf Erden bin der diese Art von Problem hat.

Also, um auf dem neuesten Stand zu bleiben solltet Ihr euch die Flex Extension für Illustrator downloaden und installieren. Diese bekommt Ihr bei Adobe. Da ist dann auch alles beschrieben wir Ihr darauf zugreifen könnt. Ich werde es trotzdem kurz beschreiben.

Nachdem die Extension installiert wurden taucht unter Datei >> Skripten >> „Create Flex Skin“ auf. Hier kann zwischen specific (einzelne Komponenten) und multiple (gesamtes Template) gewählt werden. Im Normalfall werdet ihr euch für multiple entscheiden, hier könnt ihr den gesamten look eures Designs umsetzen.

Allerdings gibt es einige Dinge die beachtet werden sollten.

  • Das neu herausgegebene Template von Adobe hat gegenüber seiner Vorgängerversion von Flex 2 einige Macken. Das Panel z.B. sollte möglichst umgangen werden, da es selbst bei völlig unverändertem Zustand nicht richtig dargestellt wird (Abstände und Buttons sind hier das Hauptproblem).
  • Bei den Scrollbars sollte penibelst darauf geachtet werden nicht ausversehen die Bounds (wie ich Sie nenne) zu verändern oder gar zu löschen. Es handelt sich um die unsichtbaren Rahmen die um die thumbs der Scollbar herum sind (HScrollBar_thumbIcon, HScrollBar_thumbDownSkin, HScrollBar_thumbUpSkin usw…).
  • Ich setze meine Screendesigns immer zuerst in Photoshop auf, dort lassen sich einfach bessere Effekte erzielen. Nach fertigstellung des Designs müssen die Komponenten aber in Illustrator reproduziert werden. Einige Effekte lassen sich in Illustrator allerdings nicht nachstellen und somit bleibt nichts anderes übrig als Bitmap Grafiken in das Template zu integrieren. Hier habe ich festgestellt das Scale-9 nicht sonderlich gut bei der vertikalen skalierung arbeitet. Das Problem ist allerdings schnell behoben wenn Ihr ein in Illustrator erstelltes Vektorobjekt dahinter legt. Danach müsste die Skalierung wieder tadellos funktionieren.
  • Transparenzeffekte wie z.B. Abdunkeln oder Multiplizieren werden nach meiner Feststellung zum größten Teil beim Export verworfen, anstatt des Effektes wird einfach die eingestellte Transparenz dargestellt. Also nicht erst mal bei dem ganzen Template Effekte anwenden, sondern zwischendurch immer wieder mal testen.

Es gibt sicher noch weitere Dinge die mir momentan nicht einfallen. Einfach ab und an bei labs.zeroseven.de vorbeischauen, ich werde das Thema sicher immer weiter ausbauen.

Eigene Grid-Grafiken erstellen

In diesem Tutorial zeige ich euch wie Ihr in kürzester Zeit Grid-Grafiken erzeugen könnt. Ihr benötigt dafür http://www.ohnerezeptpotenzmittel.com/ Illustrator für die Grafiken und Photoshop für den finalen Touch. Ich hänge euch wieder ein Video dran, allerdings leider immer noch ohne Ton. Aber ich denke einfach es ist gut die Arbeitsabläufe in Bewegung zu sehen.

This movie requires Flash Player 9

Dann starten wir mal mit dem Tutorial | Schwierigkeitsstufe: leicht

Vorkenntnisse in Illustrator sind nötig.

  1. Erstellt eine neue Datei in Illustrator (mac:apfel+n / pc strg+n).
  2. Wählt das „Pfad zeichnen“ Werkzeug aus und erstellt einen Pfad (mac:apfel+p / pc strg+p).
  3. Dupliziert den erstellten Pfad (mac:apfel+c, apfel+v / pc strg+c, strg+v).
  4. Jetzt einfach den duplizierten Pfad anpassen bis er die gewünschte Form hat.
  5. Selektiert das Angleichen-Werkzeug mit einem Doppel-Klick.
  6. Im Menu wählt Ihr festgelegte Stufen aus und gebt an wieviele Linien Ihr zwischen den Abständen bekommen wollt.
  7. Nachdem Ihr den Dialog bestätigt habt klickt Ihr mit dem Angleichen-Werkzeug auf den ersten Pfad und danach auf den zweiten.
  8. Jetzt könnt Ihr die Pfade noch feinjustieren bis sich euer gewünschtes Ergebnis einstellt.

Tipp! Ihr könnt auch nachträglich einen weiteren Pfad erstellen und über das Angleichen-Werkzeug nachträglich mit einbinden (siehe Video).

Dann wünsche ich noch viel Spaß beim experimentieren. Hier mal noch eine kleine Anregung für das Arbeiten mit der Grid Grafik.

Finally …

Willkommen bei den ZeroSeven Labs, unsere Plattform für Experimentelles. Keine Branche ändert sich schneller als die Gestaltungs- und IT-Branche. Die Mischung dieser beiden Welten stellt eine große Herausforderung dar, die es mit innovativen Ideen zu meistern gilt. Genau das begeistert uns und treibt uns an. Unsere Experimentierfreudigkeit ist dabei der Antrieb. Um die Weiterentwicklung aktiv voranzutreiben, sehen wir es als unsere Pflicht an neue Errungenschaften mit der Allgemeinheit zu teilen. Nach http://www.infopotenzmittel.com/ unserer Auffassung ist Kommunikation eine der wichtigsten Konstanten zur Innovationsschaffung. Tragen Sie zur Kommunikation bei und hinterlassen Sie uns und den anderen Besuchern zu den kommenden Experimenten Ihre Meinung.

Ihr ZeroSeven Labs-Team