# Dribbble-shot: storlek 1600×1200 och inramning [Canonical HTML page](https://gradiently.design/sv/guide/dribbble-shot-size) På Dribbble tävlar ditt arbete i ett rutnät av små 4:3-rutor. Ramen runt det, bakgrunden, beskärningen och luften avgör om någon klickar. ## The short version - Storleken på en Dribbble-shot är 1600×1200 pixlar, en liggande 4:3-ruta. - Dribbble visar shots som 4:3-miniatyrer i sitt rutnät, så den första bilden i en shot måste gå att läsa i liten storlek. - De flesta starka shots visar en idé, beskuren nära, med gott om utrymme runt och en bakgrund som stöder arbetet utan att konkurrera. - En enhetlig bakgrund och inramning över dina shots får en Dribbble-profil att se ut som en designers portfolio. - Shots kan också vara animerade, vilket passar interaktions- och rörelsearbete när rörelsen är kort och loopar rent. **Storleken på en Dribbble-shot** är 1600×1200 pixlar, en liggande 4:3-ruta. Dribbble visar varje shot som en 4:3-ruta i sitt rutnät, så designa den första bilden så att den går att läsa i den lilla storleken: en idé, beskuren nära, med utrymme runt och en bakgrund som klär arbetet i stället för att kämpa mot det. Ytterligare bilder i en shot kan visa detaljer. Håll inramning och bakgrund enhetliga från shot till shot så läses din profil som en portfolio i stället för en hög uppladdningar. ## Mått för Dribbble-shots | Egenskap | Värde | | --- | --- | | Storlek | 1600×1200 px | | Bildformat | 4:3, liggande | | Miniatyr i rutnätet | Den första bilden, visad liten i 4:3 | | Filtyper | PNG eller JPG för stillbilder, GIF eller video för rörelse | | Flera bilder | En shot kan rymma flera bilder eller videor | Dribbbles uppladdningssida listar de aktuella gränserna för filstorlek och videolängd. Designa i 1600×1200, eller en större 4:3-multipel som 3200×2400 för extra skärpa, så passar du ramen exakt. Ladda upp i exakt 4:3. Ett annat format beskärs eller fylls ut i rutnätet, och Dribbble bestämmer var, vilket sällan är där du själv skulle välja. PNG håller gränssnittskanter och text skarpa, JPG passar fotografiskt arbete. - Dribbble-shot 1600×1200: 1600 × 1200 - Behance-omslag 1616×1264: 1616 × 1264 - Bildspel 4:3 1600×1200: 1600 × 1200 - Instagraminlägg 1080×1350: 1080 × 1350 Shoten bredvid sina grannar. Ett 4:3-bildspel är samma ram, så en väl inramad shot passar rakt in i en pitchpresentation. Behance-omslaget ligger nära men är inte identiskt. ## Så ramar du in arbete i en Dribbble-shot En klassisk svag shot är en hel webbsida som krympts in i ramen. I miniatyrstorlek blir den en grå rektangel med prickar. Välj en del som är värd att se, beskär till den och ge den utrymme. 1. **Välj en idé** En enda skärm, en komponent, en logotypuppställning eller en ikonuppsättning. Om det behöver ett stycke för att förklaras är det två shots. 2. **Beskär närmare än vad som känns naturligt** Visa kassakortet, inte hela kassasidan. Detaljer som spelar roll ska vara tillräckligt stora för att synas i rutnätet. 3. **Lämna en marginal** Ungefär 10 till 15 procent av ramen på varje sida, cirka 160 till 240 pixlar över en shot på 1600 pixlar, låter arbetet andas. 4. **Välj en stödjande bakgrund** Enkel eller mjukt tonad, vald ur eller mot arbetets palett. Bakgrunden ska få arbetet att se bättre ut och sedan försvinna. 5. **Lägg till detaljbilder efteråt** Använd andra och tredje bilden för närbilder, lägen och hela flödet. Den första bilden är inbjudan. Ett 1600 gånger 1200 stort Dribbble-shotomslag med texten Kassan, omgjord, på en mjuk gradient Ett omslag för en shot med flera bilder: en kort titel på en stilla bakgrund, med skärmarna i de följande bilderna. ## Bakgrunder för Dribbble-shots Bakgrunden är scenen. Ett ljust gränssnitt ser ofta bäst ut på en mjukt tonad botten som är något mörkare än dess egen vita, så att kortens kanter syns. Ett mörkt gränssnitt vill ha en djup botten med en mild färghöjning nära. Ljust varumärkesarbete kan ligga på en nästan neutral yta så att varumärkesfärgen är det enda högljudda i rutan. - Mjuk sten, för ljust UI: `linear-gradient(160deg, #f5f5f4 0%, #e7e5e4 100%)` - Förgätmigej, för ljust UI: `radial-gradient(circle at 50% 40%, #e0e7ff 0%, #c7d2fe 60%, #a5b4fc 100%)` - Djup scen, för mörkt UI: `radial-gradient(circle at 50% 35%, #312e81 0%, #1e1b4b 50%, #0b0a1a 100%)` - Varmt papper, för varumärkesarbete: `radial-gradient(circle at 30% 30%, #fde68a 0%, #fed7aa 45%, #fecdd3 100%)` Fyra bakgrunder som stöder arbetet i stället för att konkurrera med det. Var och en har sin ljusaste punkt bakom mitten av rutan, där arbetet ligger. ### Undvik - En hel sida krympt för att få plats - En högljudd regnbågsgradient bakom färgstarkt arbete - Kraftiga skuggor under varje kort - Arbete som rör vid ramens kanter - En ny bakgrund på varje shot ### Gör så här - En komponent eller skärm, beskuren nära - En botten som är lugnare än arbetet - En mjuk, enda skugga, eller ingen - En marginal på 10 till 15 procent - En bakgrundsfamilj över hela din profil Enhetsmockups kan hjälpa när sammanhanget spelar roll, som en mobilapp i en hand eller en klockskiva på en handled. Används de på varje shot krymper de arbetet och ser snabbt daterade ut. En ren platt skärm på en bra bakgrund är oftast starkare. [Gradientbakgrunder](https://gradiently.design/sv/guide/gradient-background) och [mörka gradientbakgrunder](https://gradiently.design/sv/guide/dark-gradient-backgrounds) går igenom hur du gör bottnar som inte ser ut som förinställningar. ## Få din Dribbble-profil att se ut som en portfolio Besökare bedömer en profil efter dess rutnät. Om varje shot delar bakgrundsfamilj, marginal och sätt att beskära ser rutnätet kurerat ut, och det är ditt arbete, inte din inramning, som ändras från ruta till ruta. [Tips för designportfolio](https://gradiently.design/sv/guide/designer-portfolio-tips) och [design av fallstudier](https://gradiently.design/sv/guide/case-study-design) för samma tänkande in i en hel portfolio. Ett Dribbble-shotomslag med titeln Onboardingflöde på en lugn gradientbakgrund En shot i en serie: titel, sedan skärmarna i de följande bilderna. Ett matchande Dribbble-shotomslag med titeln Ikonuppsättning, 48 glyfer, med samma bakgrund och layout Nästa shot på samma bakgrund och layout, så att profilens rutnät läses som en enda helhet. Ge varje shot en enkel titel som säger vad den är, ”Onboarding i bankapp” snarare än ”Fräscha vibbar”, och en kort beskrivning av problemet och ditt beslut. Folk hittar shots via sökning och taggar, och kunder läser beskrivningen för att bedöma hur du tänker, inte bara hur du ritar. En bakgrund som ingen annan använder är en tyst signatur. I Gradiently är Dribbble-shot en inbyggd storlek, och en Mark du säkrar är bara din att exportera med, så scenen bakom dina shots kan inte dyka upp på en annan designers profil. Med Pro kan du exportera stillbilder upp till 4K eller en kort MP4 när Markens långsamma rörelse passar en animerad shot. För rörelseshots i allmänhet, håll loopar korta och milda. [Animerade gradientbakgrunder](https://gradiently.design/sv/guide/animated-gradient-background) har principerna. ## FAQ ### Vilken storlek har en Dribbble-shot? 1600×1200 pixlar, en liggande 4:3-ruta. ### Kan jag ladda upp ett annat bildformat till Dribbble? Dribbbles rutnät är 4:3, så andra format beskärs eller fylls ut i miniatyren. Designa i 4:3 för att styra vad folk ser. ### Vilken bakgrund ska jag använda för en Dribbble-shot? En lugn botten något mörkare än ett ljust gränssnitt, eller en djup botten med en mild höjning för mörka gränssnitt. Bakgrunden ska vara tystare än arbetet. ### Kan Dribbble-shots vara animerade? Ja. Shots kan innehålla GIF-filer och videor, som passar interaktions- och rörelsearbete. Håll rörelsen kort och låt den loopa rent. ### Hur stor marginal ska en Dribbble-shot ha? Ungefär 10 till 15 procent av ramen på varje sida, cirka 160 till 240 pixlar över en shot som är 1600 pixlar bred.