T-Shirt-Mockup-Generator (3D-Vorschau)

Sehen Sie Ihr Design auf einem echten 3D-T-Shirt, das Sie drehen, zoomen und umfärben können. Laden Sie ein Logo oder Artwork hoch und laden Sie das Mockup als PNG herunter. 100% im Browser.

Der T-Shirt-Mockup-Generator rendert ein fotorealistisches 3D-T-Shirt direkt in Ihrem Browser über WebGL. Laden Sie ein Logo, eine Illustration oder ein Foto hoch und sehen Sie, wie es mit realistischer Beleuchtung und Stoff-Shading auf dem Shirt erscheint. Drehen, zoomen, umfärben und skalieren Sie das Artwork interaktiv und exportieren Sie anschließend ein hochauflösendes PNG-Mockup, das für Ihr Portfolio, Ihren E-Commerce-Eintrag, Ihre Kickstarter-Seite oder Ihren Social-Media-Beitrag bereit ist. Nichts wird hochgeladen; das gesamte Rendering erfolgt lokal auf Ihrem Gerät.

Deine Daten bleiben in deinem Browser
Tutorial

So verwenden Sie es

1
1

Laden Sie Ihr Design hoch

Ziehen Sie ein Logo, eine Illustration oder ein Foto per Drag-and-drop in den Upload-Bereich. PNG-Dateien mit transparentem Hintergrund erzeugen die saubersten Mockups, da das Tool Ihren Negativraum unverändert lässt.

2
2

Wählen Sie eine Shirt-Farbe und justieren Sie die Größe

Klicken Sie auf ein Farbfeld, um die Stofffarbe in Echtzeit zu ändern. Nutzen Sie den Größenregler, um das Artwork zu vergrößern oder zu verkleinern, bis es korrekt auf der Brust sitzt.

3
3

Drehen Sie die 3D-Ansicht und exportieren Sie

Ziehen Sie im Viewport, um das Shirt zu drehen, scrollen Sie zum Zoomen und klicken Sie bei passendem Blickwinkel auf Mockup herunterladen, um ein hochauflösendes PNG zu speichern.

Guide

Vollständiger Leitfaden zu T-Shirt-Mockups

Warum 3D besser ist als 2D-Mockup-Vorlagen

Klassische Mockups legen Ihr Design per Photoshop-Displacement-Map auf ein flaches Foto. Das Ergebnis wirkt aus einem Winkel überzeugend, bricht jedoch zusammen, sobald Sie die Perspektive ändern, und Sie brauchen für jede Farbe, Pose und Kleidungsart eine neue Vorlage. Ein 3D-Mockup rendert das Shirt live in WebGL, sodass Rotation, Beleuchtung und Farbe sofort reagieren und ein einheitliches Erscheinungsbild über Ihren gesamten Produktkatalog entsteht, ohne Hunderte von PSD-Dateien kaufen zu müssen.

Ihr Artwork vorbereiten

Exportieren Sie Ihr Design mit 2000×2000 px oder größer und transparentem Hintergrund. Reduzieren Sie mehrschichtige Quelldateien zuerst. Dunkles Artwork auf dunklem Shirt und helles Artwork auf hellem Shirt lesen sich beide schlecht; fügen Sie in Ihrem Vektorwerkzeug einen dezenten Schatten oder eine Kontur hinzu, um den Kontrast zu verbessern. Halten Sie feine Details über einem Äquivalent von 1 mm; die Stofftextur eines bedruckten Shirts schluckt alles Feinere.

Grundlagen des Farbmanagements

Der 3D-Renderer arbeitet im sRGB-Farbraum. Nutzt Ihr Artwork einen größeren Gamut (DCI-P3, Adobe RGB), wird der Export beschnitten. Für druckfertige Mockups arbeiten Sie durchgehend in sRGB und prüfen auf einem kalibrierten Monitor. Bedenken Sie, dass Stoff Licht anders absorbiert als ein Bildschirm; Vorschauen am Modell wirken oft etwas lebendiger als das endgültig bedruckte Kleidungsstück.

Fotorealistische Mockups vs. Flat Lays

Nutzen Sie 3D-Mockups für E-Commerce-Produktseiten, Pitch-Decks und Launch-Landingpages, auf denen sich der Käufer das Produkt am Körper vorstellen soll. Nutzen Sie Flat Lays (2D-Draufsichten) für technische Datenblätter und Tech-Packs, bei denen Druckplatzierung und Abmessungen wichtiger sind als Stimmung. Die Kombination beider Typen auf einer einzigen Produktdetailseite übertrifft häufig jede Variante allein.

Examples

Gelöste Beispiele

Einen Band-Merch-Drop starten

Eine vierköpfige Band braucht ein Hero-Bild für die Vorbestellseite ihrer neuen Single, das ihr Logo auf einem schwarzen Shirt zeigt.

1

Laden Sie band_logo.png hoch (weißes Artwork auf transparentem Hintergrund).

2

Wählen Sie das Farbfeld Schwarz und justieren Sie den Größenregler so, dass das Design rund 60% der Brustfläche ausfüllt.

3

Drehen Sie leicht aus der Achse für eine dynamischere Komposition und klicken Sie dann auf Mockup herunterladen.

Ein PNG mit 1200×1200 Pixeln, bereit für Bandcamp, Shopify und Instagram; erzeugt in unter zwei Minuten ohne Photoshop.

Eine Print-on-Demand-Produktgalerie erzeugen

Ein POD-Shop-Betreiber benötigt Produktbilder für ein Design in sechs T-Shirt-Farben.

1

Laden Sie das Artwork einmalig hoch.

2

Wechseln Sie nacheinander die Farbfelder durch, halten Sie den Kamerawinkel identisch und laden Sie nach jedem Wechsel das PNG herunter.

3

Laden Sie die sechs Exporte als Farbvarianten in Shopify oder Etsy hoch.

Eine stimmige, farblich abgestimmte Produktgalerie, erstellt in derselben Zeit, die ein einziges manuelles Photoshop-Mockup benötigen würde.

Use Cases

Anwendungsfälle

Merch vor dem Druck prüfen

Unabhängige Designer und Musiker können ein Shirt-Design auf einem realistischen 3D-Kleidungsstück prüfen, bevor sie eine Siebdruck- oder DTG-Auflage in Auftrag geben. Das Drehen des Modells deckt Skalierungsprobleme auf, die flache Vorlagen verbergen, spart bares Geld für physische Muster und reduziert die Anzahl der Produktionsiterationen vor dem Launch eines Merch-Drops.

E-Commerce-Einträge und Shopify-Shops

Print-on-Demand-Shop-Betreiber erzeugen konsistente Produktbilder über Dutzende Farbvarianten, ohne einen Fotografen zu engagieren. Derselbe 3D-Viewport exportiert jede Farbe mit identischem Winkel, Licht und Bildausschnitt und erzeugt eine stimmige Produktgalerie, die besser konvertiert als zusammengewürfelte Bilder aus einem Lieferantenkatalog.

Pitch-Decks und Kickstarter-Seiten

Beim Pitchen einer Bekleidungsmarke vermittelt ein 3D-Mockup deutlich mehr Professionalität als ein Logo auf einem flachen Rechteck. Exportieren Sie Renderings aus mehreren Blickwinkeln, um Produktdetails auf einer Crowdfunding-Seite, einem Investoren-Deck oder einem Markenleitfaden darzustellen und so Glaubwürdigkeit ohne Fotoshooting aufzubauen.

Häufig gestellte Fragen

?Welche Bildformate kann ich hochladen?

PNG, JPG, WebP und SVG funktionieren alle. Ein PNG mit transparentem Hintergrund liefert die besten Ergebnisse, da das Tool die Form Ihres Artworks erhält, anstatt einen rechteckigen Rahmen darum anzuzeigen.

?Wie drehe oder zoome ich das T-Shirt?

Klicken und ziehen Sie im 3D-Viewport, um zu drehen. Verwenden Sie das Mausrad, die Pinch-Geste am Trackpad oder das Zwei-Finger-Scrollen auf dem Smartphone, um zu zoomen. Das Verschieben per Rechtsklick ist deaktiviert, damit das Shirt stets zentriert bleibt.

?Kann ich die Shirt-Farbe ändern?

Ja. Wählen Sie aus acht voreingestellten Farben (Weiß, Schwarz, Grau, Marineblau, Rot, Grün, Senfgelb, Rosa). Die Farbe wird in Echtzeit auf das 3D-Material angewendet und nicht in die Textur eingebrannt, sodass der Wechsel sofort erfolgt.

?Welche Auflösung hat das exportierte PNG?

Der Export entspricht der Viewport-Auflösung zum Zeitpunkt des Klicks, skaliert mit dem Pixel-Verhältnis Ihres Geräts. Auf einem typischen Desktop ergibt das ein PNG von etwa 1200×1200 Pixeln, ausreichend für Web und Social Media.

?Erhalte ich eine Vorder- und Rückansicht?

Die aktuelle Version rendert die Vorderseite des T-Shirts. Durch Drehen des Viewports sehen Sie Rücken und Seiten, doch das Design wird in dieser Version nur auf die vordere Brustfläche angewendet.

?Wird mein Design auf einen Server hochgeladen?

Nein. Alles läuft lokal in Ihrem Browser über WebGL und JavaScript. Ihr Artwork, die 3D-Szene und das exportierte PNG bleiben auf Ihrem Gerät; nichts wird an einen Server gesendet.

?Ist dieses Tool kostenlos?

Ja. Vollständig kostenlos, ohne Limits, ohne Anmeldung, ohne Wasserzeichen im Export und ohne Premium-Stufe. Nutzen Sie es so oft Sie möchten für private oder kommerzielle Projekte.

?Darf ich die exportierten Mockups kommerziell nutzen?

Ja, das exportierte PNG gehört Ihnen. Das zugrunde liegende 3D-T-Shirt-Modell von JC4862 steht unter CC-BY 4.0, was eine kommerzielle Nutzung erlaubt, sofern Sie den Urheber bei der Veröffentlichung des Modells selbst nennen (nicht beim Mockup-Rendering).

?Warum ist der 3D-Viewport kurz leer?

Beim ersten Laden wird das 3D-Modell (etwa 1 bis 2 MB) gestreamt und die WebGL-Shader werden kompiliert. Nachfolgende Ladevorgänge werden vom Browser gecacht, sodass das Shirt sofort erscheint.

Ähnliche Tools

Hilf uns besser zu werden

Wie gefällt Ihnen dieses Tool?

Jedes Tool bei Kitmul wird auf Basis echter Nutzeranfragen gebaut. Ihre Bewertung und Ihre Vorschläge helfen uns, Bugs zu beheben, fehlende Funktionen hinzuzufügen und die Tools zu bauen, die Sie wirklich brauchen.

Dieses Tool bewerten

Tippen Sie auf einen Stern, um uns zu sagen, wie nützlich dieses Tool für Sie war.

Vorschlag machen oder Bug melden

Eine Funktion fehlt? Einen Bug gefunden? Haben Sie eine Idee? Sagen Sie es uns und wir schauen es uns an.

Empfohlene Lektüre

Empfohlene Bücher zu T-Shirt-Design, Siebdruck und Merch-Business

Als Amazon-Partner verdienen wir an qualifizierten Verkäufen.

Erweitern Sie Ihre Fähigkeiten

Professionelle Produkte für T-Shirt-Designer und Merch-Marken

Als Amazon-Partner verdienen wir an qualifizierten Verkäufen.

Newsletter

Erhalte Produktivitätstipps und Neue Tools Zuerst

Schließe dich Machern und Entwicklern an, die Datenschutz schätzen. Jede Ausgabe: neue Tools, Produktivitäts-Hacks und Updates — kein Spam.

Prioritätszugang zu neuen Tools
Jederzeit abbestellen, ohne Rückfragen