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. Sebastian Erhardt
    19. Oktober 2008 um 21:43 Uhr

    die letzte Seite ist ja echt genial

  2. Lennart Prange
    19. Oktober 2008 um 21:55 Uhr

    @Sebastian: Jo, finde ich auch. Wer übrigens so etwas lernen will, kann mal hier gucken.

  3. Justin
    19. Oktober 2008 um 22:31 Uhr

    Finde solche 3D Design wirklich Klasse und diese werden sich in der Zukunft auch mehr finden. Also ich denke das ganze 3D Zeug hat eine Zukunft, auch wenn ich es allein nicht umsetzten kann ist es für mich schön zu sehen was alles möglich ist.

    Aber natürlich muss ich das ganze auch wieder aus der SEO Sicht sehen, desto mehr Bilder, je weniger Text kann ich einbauen.

    Justins letzter Beitrag..Geld verdienen mit Nischen Webseiten

  4. Tartanrocker
    19. Oktober 2008 um 22:53 Uhr

    Blender 3D nicht zu vergessen 😉

    Wobei die meisten 3D-Progs so komplex sind, dass man die nicht mal eben lernt. Man kann auf die schnelle vielleicht einen Würfel rendern lassen, aber kompliziertere Gebilde als Webdesigner zu entwerfen, texturieren und rendern … das ist doch eine völlig andere Welt – leider.

    Besser man hat die Connection zu jemand ders draufhat 😀

    Wie stehts eigentlich “echtem” 3d im Webdesign? Kann man irgendwo/irgendwann interaktiv durch Websites laufen, ist das die Zukunft, wie vermutlich auf dem PC? (Du hast dich ja nur auf die 2D-Abklatsche von 3D bezogen?!)

    Tartanrockers letzter Beitrag..Das Happy-End-Massaker

  5. Lennart Prange
    19. Oktober 2008 um 22:57 Uhr

    @ Tartanrocker: Ich denke, dass es sehr schwer wird “echtes” 3d im Webdesign einzusetzen. Die Entwicklung wäre sehr komplex und wir müssen wohl noch etwas warten, bis die Bandbreiten dafür reichen.
    Ich denke aber, dass hier die Zukunft liegt. Die Entwicklung steht nicht still und Webdesign wird wohl aufwendiger werden.

  6. clown
    27. Oktober 2008 um 09:44 Uhr

    Das schaut ja sehr zukunftweisend aus. Die Webseite mit dem Monitor (Mediave) hat das prima gelöst. Ich finde den Aufbau trotz Annimation und Sound sehr stimmig. Klickt da mal auf Internetmarketing 🙂

  7. Alberto
    14. Juli 2010 um 10:25 Uhr

    Danke für die Einführung. Werde das Thema 3D jetzt etwas mehr angehen.

  8. Hermann
    14. September 2010 um 13:28 Uhr

    Hallo
    und danke für Deinen Blog insgesamt! Ich habe keine Ahnung warum ich erst heute darauf gestoßen bin, doch es ist nun mal so und ich bin von dem was ich hier als Anregungen finde, wahrlich begeistert!
    Nun aber zu deinem Artikel,
    ich Arbeite bei 3 D Objekten gerne mit Sketchup von Google ( M.E. eines der ganz wenigen Dinge die diese Fa. wirklich gut gemacht hat und das sogar schon in der Freeversion).
    Hier lassen sich auch Komplexere Objekte schnell erstellen und was das Wichtigste ist, sie lassen Sich in 3D-Modelle COLLADA (DAE) Exportieren.

    Ich Exportiere die Objekte dann zur Nacharbeit dann in PS (CS5) wo sich die Objekte dann einfach bearbeiten lassen.

    Das ist für mich der leichteste Weg wirklich gute Objekte zu erstellen ohne das ich mich in eine Komplett andere Software einarbeiten mit hohen Lernaufwand muss.
    Natürlich muss man sich auch in Sketchup einarbeiten, doch der Aufwand ist im Gegensatz zu anderen 3D Programmen relativ einfach.
    Euch allen viel Erfolg bei Euren Projekten.
    Gruß
    Hermann

    • Hermann
      14. September 2010 um 13:33 Uhr

      ich schäme mich,
      da ich meinen Beitrag hier und da noch geändert habe sind mir wohl einige echt dumme Fehler passiert.
      So sind mir leider einige Worte und Satzfragmente verrutscht!
      Ich bitte das zu entschuldigen und hoffe das man trotzdem noch den Sinn meines Kommentars versteht!
      Gruß noch mal,
      Hermann

      • ntagas
        28. September 2010 um 00:47 Uhr

        Kein Problem Hermann, man kann trotzdem alles verstehen. Danke für den post, sehr verständlich.

  9. Alex Abel
    10. Februar 2011 um 17:45 Uhr

    Sehr informative Einführung ins 3D Design. Danke!

Trackbacks/Pingbacks