# Dribbble Shot Größe: 1600×1200 und wie du Arbeiten rahmst

[Canonical HTML page](https://gradiently.design/de/guide/dribbble-shot-size)

Auf Dribbble konkurriert deine Arbeit in einem Raster kleiner 4:3-Kacheln. Rahmen, Hintergrund, Ausschnitt und Luft ums Motiv entscheiden, ob jemand klickt.

## The short version

- Die Dribbble Shot Größe ist 1600×1200 Pixel, ein 4:3-Querformat.
- Dribbble zeigt Shots als 4:3-Thumbnails in seinem Raster, das erste Bild eines Shots muss daher in kleiner Größe lesbar sein.
- Die meisten starken Shots zeigen eine Idee, eng angeschnitten, mit viel Raum drumherum und einem Hintergrund, der die Arbeit stützt, ohne zu konkurrieren.
- Ein einheitlicher Hintergrund und Bildausschnitt über deine Shots lässt ein Dribbble-Profil wie das Portfolio eines Designers wirken.
- Shots können auch animiert sein, was zu Interaktions- und Motion-Arbeiten passt, wenn die Bewegung kurz ist und sauber loopt.

Die **Dribbble Shot Größe** ist 1600×1200 Pixel, ein 4:3-Querformat. Dribbble zeigt jeden Shot als 4:3-Kachel im Raster, gestalte also das erste Bild so, dass es in dieser kleinen Größe lesbar ist: eine Idee, eng angeschnitten, mit Raum drumherum und einem Hintergrund, der die Arbeit schmückt, statt mit ihr zu kämpfen. Weitere Bilder in einem Shot können Details zeigen. Halte Rahmung und Hintergrund von Shot zu Shot einheitlich, und dein Profil wirkt wie ein Portfolio statt wie ein Haufen Uploads.

## Dribbble Shot: Maße

| Eigenschaft | Wert |
| --- | --- |
| Größe | 1600×1200 px |
| Seitenverhältnis | 4:3, Querformat |
| Raster-Thumbnail | Das erste Bild, klein in 4:3 gezeigt |
| Dateitypen | PNG oder JPG für Standbilder, GIF oder Video für Bewegung |
| Mehrere Bilder | Ein Shot kann mehrere Bilder oder Videos enthalten |

Dribbbles Upload-Seite nennt die aktuellen Grenzen für Dateigröße und Videolänge. Gestalte in 1600×1200 oder einem größeren 4:3-Vielfachen wie 3200×2400 für mehr Schärfe, und du füllst das Format exakt.

Lade in exakt 4:3 hoch. Eine andere Form wird im Raster zugeschnitten oder aufgefüllt, und Dribbble entscheidet, wo, was selten dort ist, wo du es wählen würdest. PNG hält Interface-Kanten und Schrift scharf; JPG passt zu fotografischer Arbeit.

- Dribbble-Shot 1600×1200: 1600 × 1200
- Behance-Cover 1616×1264: 1616 × 1264
- Folien 4:3 1600×1200: 1600 × 1200
- Instagram-Beitrag 1080×1350: 1080 × 1350

Der Shot neben seinen Nachbarn. Eine 4:3-Folie ist dasselbe Format, ein gut gerahmter Shot passt also direkt in ein Pitch-Deck; das Behance-Cover ist nah dran, aber nicht identisch.

## So rahmst du Arbeiten in einem Dribbble-Shot

Ein klassisch schwacher Shot ist eine ganze Webseite, ins Bild geschrumpft. In Thumbnailgröße wird sie zu einem grauen Rechteck mit Pünktchen. Wähle einen sehenswerten Teil, schneide darauf an und gib ihm Raum.

1. **Wähle eine Idee** Ein einzelner Screen, eine Komponente, ein Logo-Lockup oder ein Icon-Set. Braucht es einen Absatz zur Erklärung, sind es zwei Shots.
2. **Schneide enger an, als es sich natürlich anfühlt** Zeige die Checkout-Karte, nicht die ganze Checkout-Seite. Wichtige Details sollten groß genug sein, um im Raster zu erkennen zu sein.
3. **Lass einen Rand** Etwa 10 bis 15 Prozent des Bildes an jeder Seite, bei einem Shot in 1600 Pixeln etwa 160 bis 240 Pixel, lassen die Arbeit atmen.
4. **Wähle einen stützenden Hintergrund** Schlicht oder sanft verlaufend, aus der Palette der Arbeit gewählt oder im Kontrast dazu. Der Hintergrund sollte die Arbeit besser aussehen lassen und dann verschwinden.
5. **Füge Detailbilder danach hinzu** Nutze das zweite und dritte Bild für Nahaufnahmen, Zustände und den ganzen Ablauf. Das erste Bild ist die Einladung.

Ein Dribbble-Shot-Cover in 1600 mal 1200 mit dem Text Checkout, neu gedacht, auf einem sanften Verlauf

Ein Titelbild für einen Shot mit mehreren Bildern: ein kurzer Titel auf ruhigem Hintergrund, die Screens folgen in den nächsten Bildern.

## Hintergründe für Dribbble-Shots

Der Hintergrund ist die Bühne. Ein helles Interface wirkt oft am besten auf einem sanft getönten Grund, etwas dunkler als sein eigenes Weiß, damit die Kartenkanten zu sehen sind. Ein dunkles Interface will einen tiefen Grund mit sanftem Farbschimmer in der Nähe. Helle Brand-Arbeit kann auf einem Fast-Neutralton sitzen, damit die Markenfarbe das Einzige Laute im Bild ist.

- Weicher Stein, für helle UI: `linear-gradient(160deg, #f5f5f4 0%, #e7e5e4 100%)`
- Vergissmeinnicht, für helle UI: `radial-gradient(circle at 50% 40%, #e0e7ff 0%, #c7d2fe 60%, #a5b4fc 100%)`
- Tiefe Bühne, für dunkle UI: `radial-gradient(circle at 50% 35%, #312e81 0%, #1e1b4b 50%, #0b0a1a 100%)`
- Warmes Papier, für Brand-Arbeit: `radial-gradient(circle at 30% 30%, #fde68a 0%, #fed7aa 45%, #fecdd3 100%)`

Vier Hintergründe, die Arbeit stützen, statt mit ihr zu konkurrieren. Jeder hält seinen hellsten Punkt hinter der Bildmitte, wo die Arbeit sitzt.

### Vermeiden

- Eine ganze Seite, passend geschrumpft
- Ein lauter Regenbogenverlauf hinter bunter Arbeit
- Schwere Schlagschatten unter jeder Karte
- Arbeit, die die Bildränder berührt
- Ein anderer Hintergrund bei jedem Shot

### Besser so

- Eine Komponente oder ein Screen, eng angeschnitten
- Ein Grund, der ruhiger ist als die Arbeit
- Ein weicher, einzelner Schatten oder keiner
- Ein Rand von 10 bis 15 Prozent
- Eine Hintergrundfamilie über dein Profil

Geräte-Mockups können helfen, wenn Kontext zählt, etwa eine mobile App in einer Hand oder ein Zifferblatt am Handgelenk. Bei jedem Shot eingesetzt, verkleinern sie die Arbeit und wirken schnell veraltet. Ein sauberer flacher Screen auf gutem Hintergrund ist meist stärker. [Verlaufshintergründe](https://gradiently.design/de/guide/gradient-background) und [dunkle Verlaufshintergründe](https://gradiently.design/de/guide/dark-gradient-backgrounds) zeigen, wie du Gründe machst, die nicht wie Presets aussehen.

## Lass dein Dribbble-Profil wie ein Portfolio wirken

Besucher beurteilen ein Profil nach seinem Raster. Teilen alle Shots eine Hintergrundfamilie, einen Rand und eine Art des Anschnitts, wirkt das Raster kuratiert, und was sich von Kachel zu Kachel ändert, ist deine Arbeit, nicht deine Rahmung. [Tipps für Design-Portfolios](https://gradiently.design/de/guide/designer-portfolio-tips) und [Case-Study-Design](https://gradiently.design/de/guide/case-study-design) tragen denselben Gedanken in ein ganzes Portfolio.

Ein Dribbble-Shot-Cover mit dem Titel Onboarding-Ablauf auf ruhigem Verlaufshintergrund

Ein Shot aus einer Serie: Titel, dann die Screens in den folgenden Bildern.

Ein passendes Dribbble-Shot-Cover mit dem Titel Icon-Set, 48 Glyphen, mit demselben Hintergrund und Layout

Der nächste Shot auf demselben Hintergrund und im selben Layout, damit das Profilraster als ein Werk wirkt.

Gib jedem Shot einen schlichten Titel, der sagt, was er ist, „Onboarding einer Banking-App“ statt „Frische Vibes“, und eine kurze Beschreibung von Problem und Entscheidung. Leute finden Shots über Suche und Tags, und Kunden lesen die Beschreibung, um zu beurteilen, wie du denkst, nicht nur, wie du zeichnest.

Ein Hintergrund, den sonst niemand nutzt, ist eine leise Signatur. In Gradiently ist Dribbble Shot eine eingebaute Größe, und einen Mark, den du gesichert hast, kannst nur du exportieren, die Bühne hinter deinen Shots taucht also nicht im Profil eines anderen Designers auf. Mit Pro exportierst du Standbilder bis 4K oder ein kurzes MP4, wenn die langsame Bewegung des Mark zu einem animierten Shot passt. Für Motion-Shots allgemein gilt: Halte Loops kurz und sanft; [animierte Verlaufshintergründe](https://gradiently.design/de/guide/animated-gradient-background) nennt die Prinzipien.

## FAQ

### Welche Größe hat ein Dribbble-Shot?

1600×1200 Pixel, ein 4:3-Querformat.

### Kann ich ein anderes Seitenverhältnis auf Dribbble hochladen?

Dribbbles Raster ist 4:3, andere Formen werden im Thumbnail zugeschnitten oder aufgefüllt. Gestalte in 4:3, um zu steuern, was Leute sehen.

### Welchen Hintergrund sollte ich für einen Dribbble-Shot nehmen?

Einen ruhigen Grund, etwas dunkler als ein helles Interface, oder einen tiefen Grund mit sanftem Schimmer für dunkle Interfaces. Der Hintergrund sollte leiser sein als die Arbeit.

### Können Dribbble-Shots animiert sein?

Ja. Shots können GIFs und Videos enthalten, die zu Interaktions- und Motion-Arbeiten passen. Halte die Bewegung kurz und lass sie sauber loopen.

### Wie viel Rand sollte ein Dribbble-Shot haben?

Etwa 10 bis 15 Prozent des Bildes an jeder Seite, bei einem Shot mit 1600 Pixeln Breite grob 160 bis 240 Pixel.