3D Abstract Art | Photoshop

Wie angekündigt, zeige ich euch in diesem Tutorial wie man aus seiner 3D Szene noch deutlich mehr rausholen kann. Mit Hilfe von Photoshop kann man sehr schöne Akzente setzen die in 3D entweder sehr viel mehr Aufwand bedeuten würden, oder schlicht gar nicht machbar wären. Wie immer gilt: Versucht meine Arbeit nicht 1 zu 1 nachzubauen sondern eigene Ideen einfließen zu lassen. Ich würde mich auch darüber freuen arbeiten von euch zu sehen die anhand meiner Tutorials entstanden sind.

Dann starten wir mal mit dem Tutorial | Schwierigkeitsstufe: mittel – Fortgeschrittene

 

 

Finale Version meiner Überarbeitung. Ich hab dabei großen wert auf den Einsatz von dezenten Lichteffekten gelegt. Manchmal ist weniger einfach mehr.

Zweite Version meiner Überarbeitung.

3D Schriftzug mit Illustrator & Blender

In diesem Tutorial zeige ich euch wie Ihr einen modernen 3D Schriftzug in Blender erstellen könnt, optional zeige ich zum Schluss noch wie man in Illustrator einen 3D Schriftzug faken kann. Zusätzlich werde ich euch noch zeigen wie Ihr in Blender eine einfach Szene erstellen könnt. Das zuweisen eines Materials wird ebenfalls noch erläutert, in unserem Beispiel mit einem Glas-Effekt. Falls Ihr Fragen zu einzelnen Schritten habt, einfach posten, ich schreibe euch dann so schnell ich kann zurück.

Dann starten wir mal mit dem Tutorial | Schwierigkeitsstufe: mittel

3D Software: blender Renderer: Yafray

 

 

 

Hier noch das Bild das von mir als Beispiel aus Blender herausgespeichert wurde. Für das Rendern hab ich das Blender internal rendering genutzt (aus Zeitgründen im Tutorial).

Vergleich PaperVision3D – nulldesign3D

3D-Flash-Seiten erfreuen sich immer größerer Beliebtheit. Für die Implementierung dieser 3D-Umgebungen gibt es mittlerweile eine Vielzahl an 3D-Engines die in die Projekte eingebunden werden können. Dazu gehören Sandy3D, Alternativa, Away3D und Papervision3D, um ein paar Beispiele aufzuzählen. Eine weitere Entwicklung kommt aus Deutschland und wurde von Lars Gerckens entwicklet: nulldesign3D oder kurz ND3D. Diese Engine zielt in ihren Grundsätzen, laut dessen Entwickler, auf Einfachheit, schnelle Entwicklung und eine kleine Dateigröße.

Doch kann diese Entwicklung einem Vergleich mit dem Primus PaperVision3D (PV3D) standhalten? Was hat ND3D zu bieten und was kann damit gemacht werden? Der erste Eindruck von ND3D wirkt sehr aufgeräumt und übersichtlich. Auch der Grundaufbau der Engine ist sehr einfach gehalten. Ohne vorige Kenntnisse sind die die Beispiele die von Gerckens mitgeliefert werden einleuchtend und verständlich. Jedoch gibt es derzeit noch keine weiteren Beispiele oder Tutorials die ND3D einem näher bringen könnten, abgesehen von den eben angesprochenen.

PV3D ist mit GreatWhite bereits in der 2. Version der Engine und hat damit einen immensen Vorteil gegenüber ND3D. Hier gibt es bereits unzählige Beispiele und Tutorials. Jedoch wirkt PV3D im ersten Moment etwas abschreckend, da es eine große Anzahl an Funktionen und Möglichkeiten mitliefert. Auch der Grundaufbau wirkt etwas umständlicher als bei ND3D.

Das oben beschriebene Phänomen wirkt sich auch noch auf die Dokumentation der Engines aus. PV3D bietet eine umfangreiche, gut ausgearbeitete Doku an, während die von ND3D noch etwas rudimentär ist, aber noch weiterentwickelt wird (ist derzeit noch im beta-Stadium). Beide Engines laufen insgesamt sehr flüssig und bieten mit den mitgelieferten Primitives und Objekten eine Vielzahl an Möglichkeiten 3D-Objekte ohne größere Probleme zu erstellen. Auch der Import von 3D-Modellen in die Szenerie ist bei beiden kein Problem. Während PV3D den Einbau von Collada- und ase-Dateien unterstützt, ist dies bei ND3D auf ase-Dateien beschränkt, was aber kein wirkliches Problem darstellt. Auch der Erstellung von eigenen Meshes mit Vertices steht bei den zweien nichts im Wege. Daher lässt sich sagen, das ND3D mithalten kann im Bereich der Objekte und deren Implemtierung in die Szene.

Ein großes Manko hat ND3D (derzeit noch?) gegenüber PV3D: Die Texturierung der Objekte. ND3D biete nur die Möglichkeit Bitmaps auf die Objekte zu mappen, hingegen bietet PV3D eine weitaus größere Bandbreite an Möglichkeiten mit Texturen umzugehen. Dabei möchte ich im Besonderen auf das MovieMaterial eingehen, welches ermöglicht MovieClips als Texturen zu verwenden und so interaktive 3D-Objekte erstellbar sind. Dies gibt es bei ND3D nicht. Es bleibt hier die Hoffnung das Gerckens nachzieht.

Denn insgesamt wirkt diese 3D-Engine sehr vielversprechend. Sie bietet dynamische Belichtung, blur-Berechungen auf Basis von der Distanz zur Camera und weitere Features welche die Arbeit mit ihr sehr angenehm machen. Auch gemessen an den oben erwähnten, eigenen Maßgaben sehr gelungen und kann sich auf jeden Fall mit PV3D messen lassen. Für kleinere Sachen und Animationen ist sie schon jetzt absolut empfehlenswert, da sie, wie gesagt, sehr leicht verständlich und performant ist. Sollte noch die Möglichkeit von interaktiven Texturen, beziehungsweise die Nutzbarkeit von MovieClips als Textur hinzukommen, ist nulldesign3D eine ernstzunhemende Alternative zu PaperVision3D.

Links:
nulldesign3d
www.nulldesign.de
www.nulldesign.de/nd3d-as3-3d-engine/
code.google.com/p/nd3d/downloads/list
www.nulldesign.de/nd3d/docs/index.html

PaperVision3D
www.papervision3D.org
blog.papervision3D.org
papervision3d.googlecode.com/svn/trunk/branches/GreatWhite/
www.papervision3d.org/docs/as3/

Sandy3D
www.flashsandy.org/
Alternativa
blog.alternativaplatform.com/en/
Away3D
away3d.com/

Eigene Brushes in Photoshop erstellen

Habt Ihr euch schon gefragt wie man sich selber Photoshop Brushes machen kann? Hier kommt die Antwort, ich zeige euch in wenigen Schritten die Technik um sich selber die verschiedensten Arten von Brushes zu machen. Im Video wird euch alles weitere erklärt.

Dann starten wir mal mit dem Tutorial | Schwierigkeitsstufe: leicht

Bildquelle: stock.xchnge

Brush Test

Dann wünsche ich noch viel Spaß beim at this site Experimentieren. Hier mal noch eine kleine Anregung für das Arbeiten mit Brushes (ein paar Klicks und das Bild war fertig, den Brushes sei Dank)

Advanced Glow Effects

Ihr wollt Glow-Effects für ein Homepagedesign oder eine Icon-Serie verwenden? cialismax.com Dann versucht mal einen Schritt weiter zu gehen und macht ein bisschen mehr als einen Verlauf der in der Mitte abgeschnitten wird. In diesem Tutorial zeige ich euch wie Ihr mehr aus einem Glow-Effect herausholen könnt.

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

 

Das von mir ausgearbeitete Beispiel zum anschauen, Arbeitszeit: nicht mal 10 min. 😉 Auch auf YouTube: Photoshop Tutorial deutsch

David Carson // the Rules of Graphic Design

Durch eine Veranstaltung von Page und QuarkXpress an der Hochschüle der Künste blieb es mir nicht vorbehalten, nach ziemlich genau 10 Jahren wieder einen Vortrag von David Carson ansehen zu können. An der 3. Typo-Berlin 1998 hielt David Carson damals neben Jonathan Barnbrook, Neville Brody ebenfalls ein Vortrag. Für mich, wie für viele, war David Carson damals ein „Typo-Gott“. In Zürich präsentierte er unter dem Namen „The rules of Graphic Design“ sein neues Buchprojekt.

Eigentlich hatte ich mir unter dem Titel vorgestellt, dass David Carson ein Teil des neuen Buches vorstellt. So wie es sich aber herausstellte, steckt das Buch noch im Anfangsstadium und die Entwürfe welcher er zeigte, ließen außer dem Buchtitel noch nicht viel erkennen. Seine Idee, dass jeder Graphic-Designer seine wichtigste Regel ihm zur Verfügung stellt und er daraus ein Buch gestaltet finde ich wirklich sehr interessant. Hierfür lagen dann auch noch Postkarten aus, die jeder Besucher mitnehmen konnte.

David Carson // the Rules of Graphic Design

Wie vor 10 Jahren in Berlin begann der Vortrag mit reichlicher Verspätung. Die ganze Vorbereitung hinterließen einen doch sehr chaotischen Eindruck bei mir und sicherlich auch bei einem Großteil der restlichen Besuchern. Damals noch war der Vortragssaal brechend voll besetzt. Iin Zürich waren lediglich drei Viertel der Plätze belegt. Zu Anfangs zeigte David Carson ein paar seiner aktuellen Arbeiten. Hierbei hatte ich den Eindruck, dass David Carson doch etwas unvorbereitet durch die einzelnen QuarkXpress-Files klickt und diverse Kundenprojekt zeigte. Die ganzen Projekte wurden sehr interessant von Ihm erklärt, was er sich bei der Gestaltung alles dachte. Es ist für David Carson kaum Vorstellbar, nur ein Entwurf seinem Kunden zu präsentieren. Oftmals präsentierte er bis zu 7 Entwürfe seinem Kunden. In dieser Phase sprüht David Carson vor Kreativität und setzt so ziemlich jede Idee um, die ihm einfällt.
An den aktuellen Projekten konnte man deutlich sehen, dass David Carson seinem Stil die letzten 10 Jahre sehr treu geblieben ist. Seine Designs und Entwürfe sind unverwechselbar. Hier hinterlässt er eine unverwechselbare visuelle Sprache.
Nach ca. 20 Minuten waren dann seine aktuellen Projekte vorgestellt und David Carson zeigte seinem Publikum dann die Arbeiten mit denen er berühmt geworden ist. Neben zahlreichen Titeln und Auszeichnungen die er für seine Arbeiten bei Raygun, BeachCulture oder Speak erhalten hatte, waren auch einige Anzeigencampagnen oder Poster dabei, die er zu dieser Zeit entwickelte. Auch viele Beispiele die er fotografierte zeigte er im Rahmen seines Vortrages.
David Carson vermittelte jedem Besucher, mit welcher Leidenschaft und Emotion er seinen Job als Graphik-Designer in den Kundenprojekte zelebriert. Viele seiner Arbeiten zählen noch heute zu Meilensteinen im Graphik-Design.

David Carson immer noch einer der größten Graphik-Künstler. Er ist ein Karismatiker, welcher das Graphic-Desig vor 15 Jahren revolutioniert hat. Daran hat sich auch heute nichts geändert. Er ist seinem Stil trotz Trends und Einflüsse des Webs treu geblieben. Heute sehe ich die Arbeiten von David Carson nicht so sehr unter dem Aspekt Graphik-Design, sondern viel mehr unter dem Aspekt Kunst. Das Kunst und Graphik-Design viel enger zusammenhängt als es von vielen wahrgenommen wird, hängt sicherlich stark mit der Entwicklung der Medien zusammen. Das lässt sich heute fast nicht mehr trennen.
Ich hoffe, dass für einige der Design-Studenten oder Grafiker die im Publikum saßen der Vortrag eine Inspirationen für Ihre Arbeiten oder auch für ihr Denken waren. Endtäuschend war für mich, dass ich nach 10 Jahren David Carson nochmals live sehen kann und eigentlich zwei Drittel seines Vortrages genau dem entsprach was ich bereits 1998 an der Typo-Berlin zeigte. Da hätte ich mir viel online viagra mehr erhofft. Dafür hat die Stadt und die Ambiente der Hochschule der Künste entschädigten. Hier hätte sich kaum eine bessere Ambiente finden lassen können.

Create an Abstract Wallpaper

In diesem Tutorial zeige ich euch wie man anhand des Tutorials Creative Path Objects ein Wallpaper oder eine kleinere Grafik erstellt. Ihr benötigt hierfür Illustrator, um Gridgrafiken zu erstellen und für den Rest Photoshop.

Schritt 1:

Öffnet Adobe Photoshop, und erstellt ein neues Dokument mit einem weißen Hintergrund. Die Größe beträgt bei mir 800×600 Pixel, welche jedoch keine Rolle spielt. Nun sucht euch ein Wolken Foto heraus, und legt es auf die Ebene. (Vorschlag.: sxc.hu)

schritt1

Schritt 2:

1. Nun wählt ihr das Auswahlrechteck-Werkzeug (M) aus, und markiert etwa die Hälfte eurer Fläche. Geht danach auf das Verlaufswerkzeug (G) und zieht einen Verlauf von Weiß #FFFFFF zu Transparenz. Danach dreht ihr den Verlauf um etwa 45°, so dass dieser von der linken Kante oben zu der rechten Kante unten verläuft.

schritt2_1

2. Dies könnt ihr sooft wie ihr wollt wiederholen, und evtl. auch einen Verlauf von Schwarz #000000 zu Transparenz hinzufügen. Auf dem unten angehängten Bild seht ihr mein derzeitigen Stand.

schritt2_3

Schritt 3:

1. Öffnet nun Adobe Illustrator, und erstellt ein neues Dokument. Zieht nun mit dem Zeichenstfit Werkzeug (P) eine solche Form nach. Dann gebt der Linie eine Kontur von 20px, und rundet die Endungen ab.

2. Wählt nun die Linie aus, und geht auf Objekt > Umwandeln und bestätigt mit OK.

schritt3_2

TIPP: Ihr könnt die Schwingung etwas geringer machen, um einen besseren Effekt zu erzielen.

Schritt 4:

Dupliziert nun die Linie welche ihr umgewandelt habt, und gebt den Linien helle Farbtöne. Bei mir sind dies in der Reihenfolge von oben nach unten.

#979b9e, #0b88e5, #b40be5, #e57c0b, #e6097b

Speichert nun diese Grafik als Adobe Illustrator Format (.ai) ab.

schritt4

Schritt 5:

Platziert nun über Datei > Platzieren als PDF in euer Dokument, und in etwa so wie auf dem Bild unten.

schritt5

Schritt 6:

Gebt nun dieser Grafik folgende Effekte.

schritt6_1schritt6_2

Hier ein Preview vom aktuellen Status

schritt6_3

Schritt 7:

Ihr legt nun über die halbe Grafik eine weiße Fläche, welcher ihr eine 66% Deckkraft gebt.

schritt7

Schritt 8:

1. Öffnet wieder Adobe Illustrator und erstellt at this site www.cialismax.com ein weiteres Dokument. Erstellt nun anhand des Tutorials „Eigene Grid-Grafiken erstellen“ eine Gridgrafik, welche wie folgt ausschaut.

schritt8_1

2. Anschließend gebt ihr der Grid-Grafik eine Deckkraft von 50% und stellt den Effekt auf „Aufhellen“.

schritt8_2

Schritt 9:

Zu guter letzt könnt ihr noch etwas mit den Farben herumexperimentieren und fertig ist das Tutorial.
Dann wünsche ich noch viel Spaß beim experimentieren.

schritt9

Hier ein Beispiel wie es als Wallpaper aussehen könnte:

wallpaper

Creative Path Objects

Habt Ihr euch schon mal darüber geärgert wie sich die Dartsellung eurer Pixelgrafiken verhält nachdem Ihr diese Transformiert habt?! Bei perspektifischer Verzerrung (vor allem bei stärkerer Neigung) kommen oft hässliche Kanten und unschöne Übergänge zustande. In diesem Tutorial verrate ich euch http://tadalafilgenericmax.com/dont-hesitate-to-use-male-enhancement-in-order-to-improve-your-self-esteem/ wie man das verhindern, und noch bessere Effekte erzeugen kann.

Dann starten wir mal mit dem Tutorial | Schwierigkeitsstufe: mittel

Hier mein ausgearbeitetes Beispiel mit weiteren Lichteffekten. Wie bereits im Tutorial erwähnt erkläre ich euch bei weiterem Interesse auch gerne noch wie ich den Hintergrund erstellt habe.

New Tutorials

Hallo zusammen,
Ihr werdet sicher festgestellt cialismax.com haben das in letzter Zeit keine Tutorials erschienen sind. Das liegt an der momentanen Auftragslage die mir wirklich keine Luft lässt. Allerdings werde ich so bald ich kann wieder loslegen und in gewohnter Manier Freitags meine Video-Tutorial-Reihe fortsetzen. Bitte ein wenig Geduld und schaut einfach trotzdem weiterhin immer wieder mal rein.

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.