Weiterbilden #3: 3d und Webdesign
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
Tutorialsammlung
Tutorialsammlung
Cinema4d
Tutorialsammlung
Tutorialsammlung
Photoshop
Photoshop bietet nur sehr bescheidene Möglichkeiten in diesem Bereich. Ich würde es nur zum Texturieren empfehlen.
Hier gibt es ein gutes Tutorial
Dieses Tutorial zeigt, wie man einen 3d Text erstellt
Ein cooler 3d Effekt mit Licht und Schatten
Illustrator
Adobe erklärt die Möglichkeiten von Illustrator
Das Bild sagt wohl alles
Dieses Tutorial zeigt, wie man ein Buch gestaltet
Dieses Tutorial zeigt, wie man ein Kalendar (Icon) gestaltet
Hier wird eine "VectorCola" Flasche erstellt
Inspiration
Mediaave aus Düsseldrof zeigt ein technisches 3d Objekt
Der Tresor im Header sorgt für das gewisse Etwas
Dragoninteractive zeigt eindrucksvoll, wie man Tiefe zu einem Design hinzufügen kann
Sebastian Erhardt
19. Oktober 2008 um 21:43 Uhrdie letzte Seite ist ja echt genial
Lennart Prange
19. Oktober 2008 um 21:55 Uhr@Sebastian: Jo, finde ich auch. Wer übrigens so etwas lernen will, kann mal hier gucken.
Justin
19. Oktober 2008 um 22:31 UhrFinde 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
Tartanrocker
19. Oktober 2008 um 22:53 UhrBlender 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
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.
clown
27. Oktober 2008 um 09:44 UhrDas 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
Alberto
14. Juli 2010 um 10:25 UhrDanke für die Einführung. Werde das Thema 3D jetzt etwas mehr angehen.
Hermann
14. September 2010 um 13:28 UhrHallo
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 Uhrich 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 UhrKein Problem Hermann, man kann trotzdem alles verstehen. Danke für den post, sehr verständlich.