Weiterbilden #3: 3d und Webdesign

  • von Lennart Prange

3d Hier ist der nächste Teil meiner Artikelserie “Weiterbilden”. Dieses Mal geht es um die Möglichkeit, 3d Elemente in den eigenen Designs zu verbauen. Das wird meiner Meinung nach noch zu selten gemacht, obwohl da viel Potenzial liegt. Man muss nur wissen, wie man es am besten anstellt. In diesem Beitrag bekommt ihr Tipps, Inspiration und Tutorials zum Thema.

Bisher in der Artikelserie “Weiterbilden”:

Weiterbilden #1: Maskottchen selber machen!
Weiterbilden #2: Icon-Design
Weiterbilden #3: 3d und Webdesign

Kommentare und Social Bookmarks würden mich freuen.

An die Sache herangehen

Wo kann man das einsetzen?

Auf einer Agentur Website macht sich ein schöner 3d-Roboter ganz gut. Eigentlich kann man sagen, dass 3d Elemente so ziemlich überall ihren Platz finden können, außer auf sehr Contentlastigen Seiten (z.B. Newsseiten). Sie sind aber so gut wie nie ein Muss, können die Website aber entscheidend aufwerten.

Was muss ich lernen?

  • Perspektivisch zeichnen – Einfache geometrische Körper werden von Programmen automatisch generiert, trotzdem ist es meiner Meinung nach notwendig, perspektivisch zeichnen zu lernen. Was man nicht auf das Papier bringen kann, wird man nur schwer auf dem Computer zusammensetzen können. Für Skizzen usw. ist die Fähigkeit, gut mit Perspektive umgehen zu können, unerlässlich.
  • Sehen – Bevor ihr realistische 3d Modelle erschaffen könnt, müsst ihr erst mal richtig “gucken”. Viele sehen die Dinge und sehen sie aber völlig falsch. Ich weiß, dass ist schlecht ausgedrückt, aber es ist nun mal so.
    Eine gute Erklärung zum Thema findet ihr hier. Ich zitiere:

Einem Anfänger fällt es z.B. extrem schwer, einen auf ihn weisenden Arm zu zeichnen, der „perspektivisch verkürzt“ ist, weil er diesen nicht als ein Ensemble von Linien mit bestimmten Steigungen sieht sondern eben als einen dreidimensionalen Arm, der eine bestimmte Größe und Länge hat und dessen Verkürzung in seinem Kopf weggerechnet wird.

  • Umgang mit Licht und Schatten – 3-dimensionale Dinge haben Licht und Schatten. Ohne diese beiden Eigenschaften wären sie nicht 3-dimensional. Man muss lernen mit Licht und Schatten umzugehen und sie in der realen Welt zu sehen und in der Komposition umzusetzen.
    Vielen Anfängern passiert es, dass sich die 3d Elemente in ihrer Komposition widersprechen, da sie alle den Schatten in eine andere Richtung werfen und keine eindeutige Lichtquelle vorhanden ist. Durch solche Fehler wirkt eine Komposition unrealistisch.
  • Texturieren – Wenn man den fertigen Körper hat, muss dieser auch noch irgendwie ein Aussehen bekommen. Das geschieht für gewöhnlich mit einer Textur. Diese Texturen kann man hervorragend mit Photoshop erstellen.

Welche Programme brauche ich?

Einfachste 3d Effekte sind schon mit Photoshop möglich. Allerdings sind hier die Funktionen sehr beschränkt und wenn es mal etwas komplexer werden soll, bietet Photoshop nichts wirklich geniales. Illustrator kann hier schon mehr. Es bietet einen 3d Effekt, der auch komplexere Formen erstellen kann.

Für richtig gute und umfangreiche 3d Modelle, sollte man aber schon zu einem Programm greifen, welches darauf spezialisiert ist. Beispiele wären Cinema 4d oder auch 3dsMax.

Tutorials

Tutorials zum Thema zu liefer ist nicht einfach, da es ein völlig neues Gebiet ist und sich als extrem umfangreich herausstellte. Daher findet ihr hier ganze Seiten zum Thema 3d und nicht nur einzelne Tutorials.

3dsMax

1

Tutorialsammlung

2

Tutorialsammlung

Cinema4d

3

Tutorialsammlung

4

Tutorialsammlung

Photoshop

Photoshop bietet nur sehr bescheidene Möglichkeiten in diesem Bereich. Ich würde es nur zum Texturieren empfehlen.

5

Hier gibt es ein gutes Tutorial

6

Dieses Tutorial zeigt, wie man einen 3d Text erstellt

7

Ein cooler 3d Effekt mit Licht und Schatten

Illustrator

8

Adobe erklärt die Möglichkeiten von Illustrator

9

Das Bild sagt wohl alles

10

Dieses Tutorial zeigt, wie man ein Buch gestaltet

11

Dieses Tutorial zeigt, wie man ein Kalendar (Icon) gestaltet

12

Hier wird eine "VectorCola" Flasche erstellt

Inspiration
13

Mediaave aus Düsseldrof zeigt ein technisches 3d Objekt

14

Der Tresor im Header sorgt für das gewisse Etwas

15

Dragoninteractive zeigt eindrucksvoll, wie man Tiefe zu einem Design hinzufügen kann

15 Kommentare

  1. WordPress › Fehler

    Es gab einen kritischen Fehler auf deiner Website.

    Erfahre mehr über die Problembehandlung in WordPress.