3D

Dreidimensionalität wird auch im Webdesign immer wichtiger, und mit modernen Web-Technologien lassen sich erstaunliche Effekte erzielen. Mit CSS könnt ihr dezente plastische Effekte gestalten und mit CSS3 können Objekte transformiert oder gedreht werden. Mit JavaScript könnt ihr Animationen und Scrolling-Effekte realisieren und mit HTML5-Tags wie canvas könnt ihr “echte” 3D-Effekte herstellen.

CSS Flip Animation – Objekte umdrehen

flip

Bei sog. CSS-Flips (CSS3-3D-Animationen) wird ein Objekt umgedreht, so dass die Rückseite sichtbar ist. Um den Effekt zu erreichen, setzen wir CSS3-3D-Transformationen und CSS3-Transitions ein. Spannend an diesem Beispiel sind auch die perspektivischen Möglichkeiten von CSS.

Beitrag zu Ende lesen

Photoshop CS6 mit überarbeiteten 3D-Funktionen

photoshop-cs6-3d

Zorana Gee, Photoshop Product Manager, hat im Sneek Peak #7 neue 3D-Funktionen von Photoshop CS6 Extended vorgestellt. Die 3D-Funktionen wurden in den vergangenen Photoshop-Versionen bereits mehrfach ausgebaut und erhalten nun erneut ein vollständiges Performance und Usability-Update.

Beitrag zu Ende lesen

Screencast: Mit Linien arbeiten – Photoshop Grundlagen

linien-beleuchtung-webdesign

Die "Photoshop-Profis" haben einen zehn Minuten langen Screencast von mir veröffentlicht, in dem ich die Grundlagen der Arbeit mit Linien im Webdesign erkläre. Behandelt werden plastische sowie pixelgenaue Linien und Beleuchtungseffekte, Linien die mit angepassten Pinselspitzen entstanden sind und Linien die auf Grundlage eines Pfades erstellt wurden.

Beitrag zu Ende lesen

Screencast: 3D-Text mit Repoussé in Photoshop CS5

photoshop-cs5-repousse-3d

Auf Photoshop-Profis wurde mit Folge 52 erneut ein Video von mir veröffentlicht. In dieser Folge zeige ich wie ihr mit Hilfe des 3D-Dialogs "Repoussé" von Photoshop CS5 Extended, sehr schnell einen ansehnlichen 3D-Text erstellen könnt. In etwa neun Minuten Spielzeit gehe ich auf die Basics des Dialogs ein und erkläre wie Ihr aus einer Textebene ein 3D-Objekt erstellt, texturiert und beleuchtet.

Die Photoshop-Profis beschrieben den Inhalt des Videos so:

Photoshop Extended bietet Ihnen auch die Möglichkeit, 3D-​Texte zu erzeugen. In dieser Folge der »Photoshop-Profis« zeigt Ihnen Jonas Hellwig, wie Sie ein 3D-​Objekt erstellen, ausleuchten, texturieren und rendern. Als Ergebnis erhalten Sie einen Schriftzug mit modernen 3D-​Effekten, den Sie zur Gestaltung Ihrer Webseite verwenden können.

Beitrag zu Ende lesen

3D-Typo mit Photoshop CS5 Repoussé

repoussee-photoshop-3d-typo

Eine der neuen Funktionen von Photoshop CS5 Extended ist das 3D-Feature Repoussé. Mit Repoussé lassen sich aus Pfad- oder Textebenen 3D-Objekte erstellen; ganz ähnlich der aus Illustrator bereits bekannten Funktion "Extrudieren (Extrude & Bevel)". In diesem Screencast möchte ich Euch die neue Funktion am Beispiel einer Textebene einmal vorstellen.

Beitrag zu Ende lesen

Parametrische Anpassungen mit Photoshop und 3D-Modeling

parametrische-anpassung

Eine sehr interessante Entwicklung in Sachen digitaler Körper-Manipulation ist es 3D-Modelle des abgebildeten Menschen zu generieren und diesen anschließend nach belieben zu verformen. Was wir alle von Fotos der Stars längst kennen wird nun einfach wie noch nie. Zunächst wird eine Auswahl erstellt anhand derer das 3D-Modell berechnet werden kann. Anschließend können über Schieberegler Körpereigenschaften wie Größe und Gewicht angepasst werden. Das Foto wird entsprechend der 3D-Eigenschaften neu berechnet und entsprechend verformt. Es lassen sich somit wirklich erstaunliche Ergebnisse erzielen!

Beitrag zu Ende lesen