# Taille d’un shot Dribbble : 1600×1200 et cadrage [Canonical HTML page](https://gradiently.design/fr/guide/dribbble-shot-size) Sur Dribbble, votre travail se joue dans une grille de petites vignettes 4:3. Le cadre, le fond, le recadrage et l’air autour décident si l’on clique. ## The short version - La taille d’un shot Dribbble est 1600×1200 pixels, un cadre paysage 4:3. - Dribbble affiche les shots en vignettes 4:3 dans sa grille : la première image d’un shot doit donc se lire en petit. - Les meilleurs shots montrent une seule idée, recadrée de près, avec beaucoup d’espace autour et un fond qui soutient le travail sans lui faire concurrence. - Un fond et un cadrage constants d’un shot à l’autre font d’un profil Dribbble le portfolio d’un seul designer. - Les shots peuvent aussi être animés, ce qui convient aux interactions et au motion design quand le mouvement est court et boucle proprement. La **taille d’un shot Dribbble** est 1600×1200 pixels, un cadre paysage 4:3. Dribbble affiche chaque shot en vignette 4:3 dans sa grille : concevez donc la première image pour qu’elle se lise en petit, avec une seule idée, recadrée de près, de l’espace autour et un fond qui valorise le travail au lieu de le combattre. Les images suivantes d’un shot peuvent montrer le détail. Gardez le même cadrage et le même fond d’un shot à l’autre, et votre profil ressemble à un portfolio plutôt qu’à un tas d’imports. ## Dimensions d’un shot Dribbble | Propriété | Valeur | | --- | --- | | Taille | 1600×1200 px | | Ratio | 4:3, paysage | | Miniature de la grille | La première image, affichée en petit en 4:3 | | Types de fichiers | PNG ou JPG pour les images fixes, GIF ou vidéo pour le mouvement | | Plusieurs images | Un shot peut contenir plusieurs images ou vidéos | La page d’import de Dribbble indique ses limites actuelles de poids de fichier et de durée vidéo. Créez en 1600×1200, ou dans un multiple 4:3 plus grand comme 3200×2400 pour plus de netteté, et vous remplirez exactement le cadre. Importez exactement en 4:3. Un autre format est recadré ou complété dans la grille, et c’est Dribbble qui décide où, rarement là où vous l’auriez choisi. Le PNG garde nets les bords d’interface et le texte ; le JPG convient au travail photographique. - Shot Dribbble 1600×1200: 1600 × 1200 - Couverture Behance 1616×1264: 1616 × 1264 - Slides 4:3 1600×1200: 1600 × 1200 - Post Instagram 1080×1350: 1080 × 1350 Le shot à côté de ses voisins. Une slide 4:3 a le même cadre : un shot bien cadré se glisse donc directement dans une présentation ; la couverture Behance est proche mais pas identique. ## Comment cadrer son travail dans un shot Dribbble Le shot faible classique, c’est une page web entière réduite dans le cadre. En vignette, elle devient un rectangle gris tacheté. Choisissez une partie qui vaut le coup d’œil, recadrez dessus et laissez-lui de la place. 1. **Choisissez une idée** Un seul écran, un composant, un logo ou un jeu d’icônes. S’il faut un paragraphe pour l’expliquer, ce sont deux shots. 2. **Recadrez plus près que ce qui semble naturel** Montrez la carte de paiement, pas toute la page de paiement. Le détail qui compte doit être assez grand pour se voir dans la grille. 3. **Laissez une marge** Environ 10 à 15 % du cadre de chaque côté, soit 160 à 240 pixels sur un shot de 1600 pixels, laisse respirer le travail. 4. **Choisissez un fond qui soutient** Uni ou doucement dégradé, pris dans la palette du travail ou à son opposé. Le fond doit mettre le travail en valeur, puis s’effacer. 5. **Ajoutez les images de détail ensuite** Réservez la deuxième et la troisième image aux gros plans, aux états et au parcours complet. La première image est l’invitation. Une couverture de shot Dribbble 1600 par 1200 intitulée Paiement, repensé, sur un dégradé doux Une couverture pour un shot à plusieurs images : un titre court sur un fond calme, les écrans suivant dans les images d’après. ## Fonds pour les shots Dribbble Le fond est la scène. Une interface claire rend souvent mieux sur un fond teinté doux, un peu plus sombre que son propre blanc, pour que les bords des cartes se voient. Une interface sombre veut un fond profond avec une légère montée de couleur à proximité. Un travail de marque vif peut se poser sur un quasi-neutre pour que la couleur de marque soit la seule chose bruyante du cadre. - Pierre douce, pour une UI claire: `linear-gradient(160deg, #f5f5f4 0%, #e7e5e4 100%)` - Pervenche, pour une UI claire: `radial-gradient(circle at 50% 40%, #e0e7ff 0%, #c7d2fe 60%, #a5b4fc 100%)` - Scène profonde, pour une UI sombre: `radial-gradient(circle at 50% 35%, #312e81 0%, #1e1b4b 50%, #0b0a1a 100%)` - Papier chaud, pour l’identité de marque: `radial-gradient(circle at 30% 30%, #fde68a 0%, #fed7aa 45%, #fecdd3 100%)` Quatre fonds qui soutiennent le travail au lieu de le concurrencer. Chacun garde son point le plus lumineux derrière le centre du cadre, là où se trouve le travail. ### À éviter - Une page entière réduite pour rentrer - Un dégradé arc-en-ciel criard derrière un travail coloré - De grosses ombres portées sous chaque carte - Un travail qui touche les bords du cadre - Un fond différent à chaque shot ### À faire - Un composant ou un écran, recadré de près - Un fond plus calme que le travail - Une ombre douce et unique, ou aucune - Une marge de 10 à 15 % - Une seule famille de fonds sur tout votre profil Les mockups d’appareils peuvent aider quand le contexte compte, comme une app mobile dans une main ou un cadran de montre à un poignet. Utilisés sur chaque shot, ils rapetissent le travail et vieillissent vite. Un écran plat et net sur un bon fond est souvent plus fort. [Les fonds dégradés](https://gradiently.design/fr/guide/gradient-background) et [les fonds dégradés sombres](https://gradiently.design/fr/guide/dark-gradient-backgrounds) expliquent comment créer des fonds qui ne ressemblent pas à des presets. ## Faites de votre profil Dribbble un seul portfolio Les visiteurs jugent un profil à sa grille. Si chaque shot partage une famille de fonds, une marge et une façon de recadrer, la grille paraît choisie avec soin, et c’est votre travail, pas votre cadrage, qui change d’une vignette à l’autre. [Les conseils de portfolio de design](https://gradiently.design/fr/guide/designer-portfolio-tips) et [le design d’étude de cas](https://gradiently.design/fr/guide/case-study-design) prolongent cette réflexion jusqu’au portfolio complet. Une couverture de shot Dribbble intitulée Parcours d’onboarding sur un fond dégradé calme Un shot dans une série : le titre, puis les écrans dans les images suivantes. Une couverture de shot Dribbble assortie, intitulée Jeu d’icônes, 48 glyphes, avec le même fond et la même mise en page Le shot suivant sur le même fond et la même mise en page, pour que la grille du profil forme un seul ensemble. Donnez à chaque shot un titre simple qui dit ce que c’est, « Onboarding d’une app bancaire » plutôt que « Fresh vibes », et une courte description du problème et de votre décision. On trouve les shots par la recherche et les tags, et les clients lisent la description pour juger votre manière de penser, pas seulement de dessiner. Un fond que personne d’autre n’utilise est une signature discrète. Dans Gradiently, Dribbble shot est une taille intégrée, et un Mark que vous réservez est le seul que vous pouvez exporter : la scène derrière vos shots ne peut pas apparaître sur le profil d’un autre designer. Avec Pro, vous exportez des images fixes jusqu’en 4K ou un court MP4 quand le ralenti du Mark convient à un shot animé. Pour les shots animés en général, gardez des boucles courtes et douces ; [les fonds dégradés animés](https://gradiently.design/fr/guide/animated-gradient-background) en donnent les principes. ## FAQ ### Quelle est la taille d’un shot Dribbble ? 1600×1200 pixels, un cadre paysage 4:3. ### Puis-je importer un autre ratio sur Dribbble ? La grille de Dribbble est en 4:3 : les autres formats sont recadrés ou complétés dans la vignette. Créez en 4:3 pour maîtriser ce que l’on voit. ### Quel fond choisir pour un shot Dribbble ? Un fond calme, un peu plus sombre qu’une interface claire, ou un fond profond avec une légère montée de couleur pour les interfaces sombres. Le fond doit être plus discret que le travail. ### Les shots Dribbble peuvent-ils être animés ? Oui. Les shots peuvent contenir des GIF et des vidéos, adaptés aux interactions et au motion design. Gardez un mouvement court et une boucle propre. ### Quelle marge prévoir dans un shot Dribbble ? Environ 10 à 15 % du cadre de chaque côté, soit à peu près 160 à 240 pixels sur un shot large de 1600 pixels.