RSS-/Atom-Feed Twitter
Site is read-only, email is disabled

Tutorial: Gespiegelte 3D-Produktboxen

Verfasst von · Erstellt am 21 Okt 2007, zuletzt bearbeitet vor mehr als 13 Jahren CC BY-NC-Lizenz

Motivation

3D-Produktboxen sind heute auf sehr sehr vielen Seiten mit Dienstleistungen zu finden. Teilweise sind sie potthäßlich, teilweise wirklich schön. In diesem Tutorial zeige ich euch wie ihr qualitativ hochwertige Boxen herstellt, die obendrein auch noch gespiegelt sind. Nehmt euch ruhig viel Zeit ;)

Tutorial-Details

  1. 1

    Erstellt ein neues Bild. 960×768 px., schwarzer oder weißer Hintergrund. Ich habe weißen HG genommen. Nun legt ihr Hilfslinien (in Prozent) an: Geht auf Bild / Hilfslinie / Hilfslinie (Prozent):

    Hozizontal: 20% und 80%
    Vertikal: 10%, 30% und 65%

  2. 2

    Der grundlegende Vorgang ist nun die Frotseite und die rechte (von uns aus gesehen linke) Seite der Box zu erstellen. In einem weiteren Schritt lassen wir die Box dann halbautomatisch erstellen. Legt nun eine neue, transparente Ebene an. Wir kümmern uns nun um den Hintergrundeffekt. Er soll modern und geschwungen aussehen, ein ganz kleines bisschen im Windows Vista-Stil ;)

    Nehmt das Füllen-Werkzeug (der Farbeimer), stellt auf “Muster” um. Dann wählt ihr das “Stone”-Muster – es ist relativ weit hinten.

    Anschließend geht ihr auf Farben / Entsättigen.

  3. 3

    Jetzt verwenden wir den Bewegungsunschärfe-Filter: Filter / Weichzeichnen / Bewegungsunschärfe: Zoom, Wert: 85. Das kann jetzt ein Weilchen dauern, je nachdem wie stark euer Prozessor ist.

  4. 4

    Wendet nun noch Farben / Helligkeit & Kontrast: 85 / 65 an um das Bild heller zu machen.

    Das ganze sollte dann ca so aussehen.

  5. 5

    Nehmt das Spiegeln-Werkzeug oder drückt einfach SHIFT+F um es mittels Hotkey auszuwählen. Klickt dann einfach einmal auf die Ebene, es sollte gespiegelt werden.

  6. 6

    Wir fügen jetzt noch ein paar Schwingungen hinzu damit das ganze etwas lebendiger aussieht:

    Filter / Verzerren / Verbiegen. Wendet die Werte vom Bild an und drückt OK.

  7. 7

    Jetzt haben wir noch eine schöne Schwingung die das ganze etwas abwechslungsreicher macht. Nehmt das Bewegen-Werkzeug (M) und schiebt diese Ebene nun solange herum bis ihr im unten rot umrandeten Teil einen schönen Auschnitt habt – dieser wird dann für die Seiten-Wand der Box und die Frontwand verwendet. Den Rest schneiden wir weg.

  8. 8

    Nun nehmen wir das Rechtecks-Auswahlwerzeug® und ziehen eine Auswahl um den Bereich der im vorherigen Bild rot angezeichnet war. Die Hilflinien sollten ohnehin magnetisch sein, das Umranden sollte also kein Problem sein.

    Geht auf Ebene / Auf Auswahl zuschneiden.

  9. 9

    Wenn ihr zu Beginn schwarzen HG genommen habt könnt ihr diesen Schritt weglassen und mit Schritt 10 weiter machen.

    Lasst die Auswahl noch aktiv. Legt eine neue Ebene an (unterhalb der Ebene mit dem Muster) und füllt die Auswahl komplett schwarz.

  10. 10

    Deaktiviert die Auswahl: Auswahl / Nichts.

    Legt eine neue, leere Ebene an. Diese soll über allen anderen Ebenen sein. Nehmt das Verlaufswerkzeug. Stellt als VG-Farbe: #005aff, als HG-Farbe: #00ff4e ein. Aus dem Verlaufsdropdown-Menü nehmt ihr den obersten Verlauf (VG nach HG (HSV im Uhrzeigersinn)). Zieht den Verlauf dann von links unten nach rechts oben.

    Um die Farben noch mehr ineinander fließen zu lassen wenden wir Filter / Weichzeichnen / Gaußscher Weichzeichner: Wert 200px an.

  11. 11

    Stellt nun den Ebenenmodus dieser Ebene auf Farbe, den Ebenenmodus der darunterliegenden Ebene (die mit dem Muster) stellt ihr auf “Faser mischen”.

  12. 12

    Legt eine neue Ebene an. Nun sind wir mit dem HG der Box fertig. Wir erstellen nun mit dem Pfade-Werkzeug eine Kurven-Form.

    Drückt B um das Pfade-Werkzeug auszuwählen und macht an den Stellen im Bild Punkte. (Achtung: ich habe zur besseren Sichtbarkeit die anderen Ebenen ausgeblendet – das müsst ihr nicht machen).

    Den letzten Punkt verbindet ihr mit dem ersten indem ihr STRG gedrückt haltet und auf den Anfangspunkt klickt.

  13. 13

    Klickt nun den Punkt der in der Mitte der Schräge ist, haltet STRG gedrückt, klickt in den Punkt hinein, haltet die linke Maustaste weiterhin gedrückt und zieht den Mauszeiger ein bisschen nach rechts oben. Der obere Teil der Linie wird zu einer Kurve. Lasst die Maus los.

    Wenn wir nun auch den unteren Kurven-Teil beeinflussen wollen halten wir SHIFT gedrückt und bewegen das kleine Rechteck das am Ende der gestrichelten Linie ist. Zieht die Kurve nun ca so auf wie ich sie am Bild gemacht habe.

  14. 14

    Drückt dann ENTER um eine Auswahl aus dem Pfad zu erhalten. Nehmt das Fülleimer-Werkzeug und füllt die Auswahl weiß. Dann deaktiviert ihr die Auswahl: Auswahl / Nichts.

  15. 15

    Links, unten, rechts und oben stehen jetzt noch Teile drüber, die kommen jetzt noch weg.

    Wählt dazu den mittleren Teil mit den Box-Teilen aus, geht dann auf Auswahl / Invertieren – do wird alles drumherum ausgewählt, dann klickt ihr auf ENTF.

    Drückt STRG+SHIFT+A um alle Auswahlen aufzuheben.

  16. 16

    Stellt die Deckkraft der Ebene jetzt auf 80%.

    Wir machen nun noch eine Linie entlang der Schwingung: Geht auf Dialoge / Pfade oder wenn er bereits als Reiter offen ist, aktiviert ihn. Dann doppelklickt ihr auf den ersten Pfad – er sollte am Bild erscheinen.

  17. 17

    Stellt die VG-Farbe auf Weiß um. Legt nun eine neue Ebene an, nennt sie “Linie”.

    Klickt dann im Werkzeugfenster auf “Pfad nachziehen”. und wählt dort Linienbreite 10 und drückt “Nachziehen”. Danach drückt ihr M um das Bewegen-Werzeug auszuwählen. Der Pfad verschwindet und die Linie bleibt zurück.

  18. 18

    Klickt in das Bild, geht sicher dass die “Linie”-Ebene aktiviert ist. Drückt dann 4 mal die Pfeiltaste nach rechts auf eurer Tastatur. Dasselbe nochmal mit der Pfeil nach unten-Taste (4 mal).

    Wir schneiden nun noch die überstehenden Teile wie zuvor schon mal weg. Wählt den mittleren Teil aus, drückt dann auf Auswahl / Invertieren und schneidet den Teil weg (mit ENTF).

  19. 19

    Wir bringen nun noch etwas Abwechslung rein indem wir den hellen Teil etwas unschärfer machen.

    - Klickt die Ebene mit der weißen Fläche an.
    - Klickt rechts im Ebenen-Dialog auf die Ebene und wählt “Auswahl aus Alphakanal”.
    - Wechselt zur Ebene mit den grauen Strahlen.
    - Filöter / Weichzeichnen / Gaußscher Weichzeichner: 20px. Klickt OK.
    - Auswahl / Nichts auswählen.
    - Stellt den Ebenenmodus der weißen Fläche auf “Überlagern”.

  20. 20

    Nun machen wir noch eine punktierte Kurve mit Pfeil. Legt eine neue Ebene an.

    Nehmt das Pfade-Werkzeug. macht 2 Punkte und sieht eine Kurve. Mit dem Werkzeug solltet ihr schon umgehen können – In Schritt 12 und 13 habe ich es genau erklärt.

  21. 21

    Stellt als VG-Farbe schwarz ein. Geht im Werkzeugfenster auf “Pfad nachziehen”. Wählt diese Optionen, drückt Nachziehen, dann M um das Bewegen-Werzeug auszuwählen. Stellt den Ebenenmodus dann auf “Faser extrahieren”.

  22. 22

    Macht einen Pfad in Dreiecksform, drückt ENTER und füllt ihn mit Schwarz.

    - Auswahl / Nichts.

    Dann sollte es so aussehen.

  23. 23

    Jetzt schreibt ihr Text eurer Wahl auf die Flächen:

  24. 24

    Macht eine exakte gerade, weiße Linie an der Knickstelle der Box, ca 3px dick.

    Als nächstes spiegeln wir nun die Box. Das machen wir bereits jetzt da ein Spiegeln einer perspektivisch verzerrten Fläche um einiges aufwändiger ist.

    Wählt die Boxflächen aus, geht auf
    - Bearbeiten / Sichtbares kopieren
    - Bearbeiten / Einfügen

    Drückt das “Neue Ebene”-Symbol im Ebenendialog um das Eingefügte auf eine eigene Ebene zu bekommen.

  25. 25

    Nehmt das Spiegeln-Werkzeug, spigelt die Ebene vertikal (im Werkzeugfenster einstellen) und schiebt sie dann nach unten.

    Klickt die Ebene rechts im Ebenendialog und wählt: “Ebenenmaske hinzufügen”. Nehmt dann das Verlaufswerkzeug, stellt auf die Standardfarben (drückt einfach D) und zieht den Verlauf von unten nach oben. Stellt dann die Ebenentransparenz auf zB 75%.

  26. 26

    So, nun kommen wir zum schnellen Teil, nämlich dem Erstellen der 3D-Box aus unserem Bild.

    Speichert dieses bild als vorlage.xcf.

    Wählt ihr den Front-Teil plus Spiegelung aus.
    Geht auf Bearbeiten / Sichtbares kopieren.

    HINWEIS: Wenn ihr die Box auf einem anderen Hintergrund haben wollt müsst ihr diesen durch den weißen den wir haben ersetzen.

  27. 27

    Datei / Neu. Selbe Größe wie vorhin. Geht auf Bearbeiten / Einfügen und drückt den “Neue Ebene”-Button. Benennt die Ebene “Front”.

  28. 28

    Wechselt zum Original-Bild. Wählt die Seitenwand plus Spiegelung aus, geht auf Sichtbares kopieren und fügt es ebenfalls in das neue Bild ein. Nennt es “Rechts”.

  29. 29

    Schließt nun das Original-Bild und wechselt zu dem neuen Bild. Klickt das Augensymbol für die beiden eingefügten Ebenen um sie unsichtbar zu machen.

    Optional: Nehmt das Rechtecksauswahlwerkzeug und zieht eine kleine Fläche auf, füllt Sie mit einer beliebigen Farbe, ein helles Grün / Blau bietet sich an, das wird der obere Teil der Box, falls ihr ihn benötigt.

    Legt dort eine neue Ebene an uns stellt sicher, dass ihr euch auf ihr befindet.

    Geht auf Filter / Abbilden / Auf Objekt abbilden.

    Einstellungen:
    -———————————-
    Transparenter Hintergrund: JA
    Rest auf Standard lassen.

    Licht:
    -———————————-
    keine Liuchtquelle

    Material
    -———————————-
    Alles Standardwerte

    Für Quader und Ausrichtung nehmt ihr bitte die Werte vom Bild.

    Nach dem Klick auf OK wird das einige Zeit dauern.

  30. 30

    Wenn euch die Transparenz nicht passen sollte wählt ihr den gespiegelten Teil nun aus und nehmt mit Farben / Helligkeit & Kontrast oder dem Kurven-Tool Anpassungen vor.

    Ansonsten seid ihr fertig!

  31. 31

    Das Ergebnis könnte dann ca so aussehen. Die Ausrichtung und Position in Schritt 29 verändert das Aussehen der Perspektive. Experimentiert damit ruhig rum ;) Viel Spaß.

  32. 32

    Oder mit dunklem Hintergrund:

Kommentare

Hier kannst du Kommentare, Fragen und Anregungen loswerden. Der Autor und die anderen Benutzer können deinen Beitrag sehen und darauf antworten.

Natürlich kannst du auch im Chat fragen.

Abo-Verwaltung

Diese Funktion steht nur angemeldeten Benutzern zur Verfügung.

Benutzerbewertung

Dieses Thema (Gespiegelte 3D-Produktboxen) wurde insgesamt mit 4,5 von 5 Punkten bewertet.

New comments are disabled because of spam.

devvv Mitglied seit mehr als 17 Jahren devvv 1475 Kommentare
vor mehr als 11 Jahren

Ich tippe darauf, dass das irgendwas mit den Ebenenmaßen zu tun hat. Die Ebenen die auf die Flächen projeziert werden dürfen nur genausogroß sein wie ihr tatsächlicher Inhalt (da darf nichts transparentes dabei sein).

khell
vor mehr als 11 Jahren

Moin Moin!

Super Tutorial - danke....allerdings ein paar Dinge sind nicht wirklich einfach zu verstehen.
Ganz zum Schluss will meine Front Fläche einfach nicht auf die Vorderseite der Verpackung passen. Ist viel kleiner....Wie kann ich das ändern?

Ein paar Rechtschreibfehler sind im Text...

JoeJoe87577
vor etwa 13 Jahren

Sehr schönes Tut. Ich habs gleich mal nachgebaut und hab ca 30 minuten gebraucht.

Hier mein Bild: http://img708.imageshack.us/img708/6026/3dproduktbox.png

Als kleine Verbesserung: Bei Schritt 29 vielleicht noch angeben, dass man einen Quader auswählen muss. Ich bin am Anfang ziemlich verzweifelt gewesen :D

J-Orca
vor mehr als 13 Jahren

Tolles Tutorial! Allerdings hab ich das Problem, daß es sich nicht kmoplett auf dem Quader abbilden läßt, sondern die Front z.B. nur mitig auf die Vorderseite gebracht wird und links und rechts davon ist frei... :( Warum?

Ciao, Jörg

Ivica sacer Bewertung für diesen Artikel: 4/5
vor mehr als 13 Jahren

Hallo tolles Tut hänge allerdings bei Schritt 4 fest da bei mir die die Linien bzw das Muster nicht von oben aus derEcke schräg nach unten läft sonder zu Mitte.

Woran liegt das?

Grüße

bato

Fuzzy Mitglied seit etwa 15 Jahren Fuzzy 4 Kommentare
vor fast 14 Jahren

he cooles Tutorial habs erst jetzt gefunden und sofort gemacht...macht echt spaß Boxen zu erstellen xD

dieter Bewertung für diesen Artikel: 5/5
vor etwa 14 Jahren

@carla:
man macht so etwas, wenn man keine schachtel hat, z.B. für eine downloadbare software ;)

Carla
vor mehr als 14 Jahren

wow... das ist richtig gut gemacht... aber ich brauche keine Produktschachtel, also hat sich das für mich eig. erledigt! und außerdem, wenn man so was macht, dann kann man doch direckt die eigentliche Schachtel fotografieren... trotzdem... sehr schön gemacht:DD

SpEcIeS Mitglied seit mehr als 15 Jahren SpEcIeS 133 Kommentare
vor mehr als 14 Jahren

Obwohl dieses Tutorial schon lange da ist hab, ich es noch nie gesehn x) Habs natürlich sofort gemacht:

kevin
vor mehr als 14 Jahren

Vielleicht bin ich jetzt die Spaßbremse hier... aber warum so kompliziert? Ihr könnt auch einfach 2D-Texturen erstellen (Vorderseite und seitliche Textur) und dieses Programm benutzen, das extra dafür ausgelegt ist sowas zu erstellen:

http://www.vcware.de/more.php?q=boxspot&m=images/website.jpg&g=downloads/BoxSpot.exe

Domay
vor mehr als 14 Jahren

ich krieg ne fehlermeldung obwohls manchmal sogar scho geklappt hat mit der box ;/ kann das anner größe liegen?nja die meldung is das map-object.exe absgetürtzt is

mox
vor mehr als 14 Jahren

Bei mir bleibt gimp immer hängen, wenn ich einstelle, dass auf einen quader abgebildet werden soll. :<

Lucy Mitglied seit mehr als 14 Jahren Lucy 5 Kommentare
vor mehr als 14 Jahren

Ein Wort: WOW!

Aber bei dem "Auf Objekt abbilden"-Filter kommeich nicht mehr weiter, weil eine GIMP-Meldung kommt und da steht:

Fehler beim Aufruf der Prozedur »gimp-drawable-get-image«:
Die Prozedur »gimp-drawable-get-image« wurde mit einer ungültige ID für das Argument »drawable«. aufgerufen. Sehr wahrscheinlich versucht das Plugin eine Ebene zu bearbeiten, die nicht mehr existiert.

MichaBe
vor mehr als 14 Jahren

Hi Leuts,
wollte einfach mal mein Lob an alle Autoren von tutorials (speziell diesem hier) aussprechen. So ein Tutorial ist ein riesen Aufwand, mit den ganzen screenshoots und den ganzen Dateien. Wünsch euch noch viel Spaß
LG

dremox Mitglied seit etwa 15 Jahren dremox 1 Kommentar
vor etwa 15 Jahren

Hey, super tut...

hab es während der arbeit gleich mehrfach nach "gebaut" :-)...

anbei noch mein bild..

Jan
vor etwa 15 Jahren

saugut!!!

[img]http://www.students.uni-marburg.de/~Rossbacj/gimp_Box.png[\img]

A-Style Mitglied seit fast 16 Jahren A-Style 25 Kommentare
vor fast 16 Jahren

Geniales Tutorial!

Felix
vor fast 16 Jahren

Super Tutorial, das war das erste mal, das alles klappt und ich nicht improvisieren muss ;)

Quigi Mitglied seit fast 16 Jahren Quigi 6 Kommentare
vor fast 16 Jahren

So ein Müll bin gerade bei Punkt 17 angekommen und dann hängt sich der PC auf so nen scheiß!!!

Cooler_mongo
vor etwa 16 Jahren

Wow, der Hammer das Tut! Hier auch mein Lob und Dank an den Autor

Hirntumor
vor etwa 16 Jahren

Riesen Lob an den Autor!

joni Mitglied seit mehr als 16 Jahren joni 5 Kommentare
vor etwa 16 Jahren

joa hab mich au ma dran versucht ;) aba lustsch isses scho

Tim
vor mehr als 16 Jahren

Super Tutorial...
Das hat mir echt geholfen. Danke dafür!!!
Bis denn

@Darths:
Das ist bei der neuen Version bei Gimp so...Wenn Du bei "Auf Objekt Abbilden" bist, stelle in der Angabeliste einfach "abbilden auf Quader" ein. Dann erscheint der Reiter.
Viel Spaß.

Darths
vor mehr als 16 Jahren

Schönes Zuz,aber ich finde bei Filter/Auf Objekt abbilden Quader nicht,,, ;.~

jonnysbaby Mitglied seit mehr als 16 Jahren jonnysbaby 2 Kommentare
vor mehr als 16 Jahren

ok hat sich geklärt aber sieht echt geil aus großes lob

jonnysbaby Mitglied seit mehr als 16 Jahren jonnysbaby 2 Kommentare
vor mehr als 16 Jahren

Bei wird beim letzten Schritt der Reiter mit dem Quader nicht angezeigt was soll ich da machen???

Jonathan
vor mehr als 16 Jahren

Super Tutorial! Hat bei mir super geklappt, danke!

kaaskopp Mitglied seit fast 17 Jahren kaaskopp 15 Kommentare
vor mehr als 16 Jahren

joa, derb geil, werd ich auf jeden fall nomma machen.

PS: die Box würd noch realistischer aussehen wenn man sie von halb schräg oben so ankukkt. glaub ich.

FL4PJ4CK
vor mehr als 16 Jahren

So, ich hatte es mit transparenz hoch geladen, damit konnte wohl die Site (oder wer auch immer) nicht mit umgehen. Jetzt nochmal mit weißem Hintergrund. Wenn das auch so aussieht, geb ich auf :D
Srry für Doppelpost

FL4PJ4CK
vor mehr als 16 Jahren

Ja komisch, auf dem Rechner sieht es viel sauberer aus, die Web-Version da ist anscheinend komprimiert.
Naja, egall, bei mir siehts gut aus ;)
Danke!

devvv Mitglied seit mehr als 17 Jahren devvv 1475 Kommentare
vor mehr als 16 Jahren

danke, freut mich dass es auch gefällt. super gelungen, FL4PJ4CK, solltest aber eher weißen hintergrund nehmen ^^

FL4PJ4CK
vor mehr als 16 Jahren

Sehr geiles Tut, danke dafür!

ZIP17
vor mehr als 16 Jahren

Echt Klasse, da kann man nur staunen!

Alessa Mitglied seit etwa 17 Jahren Alessa 6 Kommentare
vor mehr als 16 Jahren

Kann mich meinem Vorredner nur anschließen! Wirklich klasse gemacht. Auf so Ideen würd ich gar nicht kommen.

Gruß Alessa

Eraser Mitglied seit etwa 17 Jahren Eraser 221 Kommentare
vor mehr als 16 Jahren

WoW, da staun ich nicht schlecht...
Sehr Sehr großes Lob von mir. So ein cooles Tut hab ich schon lange nicht mehr gesehen. Werd mich mal daran setzen...

Gruß,
E