# Dribbble-bildestørrelse: 1600×1200 og god innramming

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

På Dribbble konkurrerer arbeidet ditt i et rutenett av små 4:3-bilder. Innrammingen, bakgrunnen, beskjæringen og luften rundt avgjør om noen klikker.

## The short version

- Dribbble-bildestørrelsen er 1600×1200 piksler, et liggende 4:3-format.
- Dribbble viser bilder som 4:3-miniatyrer i rutenettet, så det første bildet må være tydelig i liten størrelse.
- De fleste sterke Dribbble-bilder viser én idé med tett beskjæring, god luft rundt og en bakgrunn som støtter arbeidet uten å konkurrere.
- Enhetlig bakgrunn og innramming får en Dribbble-profil til å se ut som én designers portefølje.
- Bildene kan også være animerte, noe som passer interaksjon og bevegelse når animasjonen er kort og går jevnt i løkke.

**Dribbble-bildestørrelsen** er 1600×1200 piksler, et liggende 4:3-format. Dribbble viser hvert bilde som en 4:3-rute, så lag det første bildet for den lille størrelsen: én idé, tett beskåret, med luft rundt og en bakgrunn som fremhever arbeidet fremfor å kjempe mot det. Flere bilder i samme innlegg kan vise detaljer. Hold innramming og bakgrunn enhetlig fra bilde til bilde, så profilen virker som en portefølje fremfor en haug opplastinger.

## Mål for Dribbble-bilder

| Egenskap | Verdi |
| --- | --- |
| Størrelse | 1600×1200 px |
| Størrelsesforhold | 4:3, liggende |
| Miniatyrbilde i rutenettet | Det første bildet, vist lite i 4:3 |
| Filtyper | PNG eller JPG til stillbilder, GIF eller video til bevegelse |
| Flere bilder | Et innlegg kan inneholde flere bilder eller videoer |

Opplastingssiden til Dribbble oppgir gjeldende grenser for filstørrelse og videolengde. Lag designet på 1600×1200, eller en større 4:3-størrelse som 3200×2400 for ekstra skarphet, så passer det nøyaktig.

Last opp i nøyaktig 4:3. Andre former beskjæres eller får ekstra luft i rutenettet, og Dribbble bestemmer hvor, sjelden der du selv ville valgt. PNG holder grensesnittkanter og skrift skarpe; JPG passer fotoarbeid.

- Dribbble-bilde 1600×1200: 1600 × 1200
- Behance-omslag 1616×1264: 1616 × 1264
- Lysbilder 4:3 1600×1200: 1600 × 1200
- Instagram-innlegg 1080×1350: 1080 × 1350

Dribbble-bildet ved siden av naboformatene. Et 4:3-lysbilde har samme form, så et godt innrammet bilde passer rett i en presentasjon; Behance-omslaget er nært, men ikke identisk.

## Slik rammer du inn arbeid i et Dribbble-bilde

Et klassisk svakt bilde er en hel nettside krympet inn i rammen. Som miniatyr blir det et grått rektangel med prikker. Velg én del som er verdt å se, beskjær til den og gi den plass.

1. **Velg én idé** Én skjerm, en komponent, en logosammensetning eller et ikonsett. Trenger det et avsnitt for å forklares, er det to innlegg.
2. **Beskjær tettere enn det føles naturlig** Vis betalingskortet, ikke hele betalingssiden. Viktige detaljer må være store nok til å synes i rutenettet.
3. **La det være en marg** Omtrent 10 til 15 prosent på hver side, rundt 160 til 240 piksler i et 1600 piksler bredt bilde, lar arbeidet puste.
4. **Velg en støttende bakgrunn** Ensfarget eller med en myk gradient, valgt fra eller i kontrast til arbeidets palett. Bakgrunnen skal få arbeidet til å se bedre ut og så tre i bakgrunnen.
5. **Legg til detaljbilder etterpå** Bruk det andre og tredje bildet til nærbilder, tilstander og hele flyten. Det første er invitasjonen.

Et Dribbble-omslag på 1600 ganger 1200 med teksten Betaling, redesignet på en myk gradient

Et omslagsbilde til et innlegg med flere bilder: en kort tittel på rolig bakgrunn, med skjermene i bildene som følger.

## Bakgrunner til Dribbble-bilder

Bakgrunnen er scenen. Et lyst grensesnitt ser ofte best ut på en mykt tonet bakgrunn litt mørkere enn grensesnittets hvitt, så kortkantene synes. Et mørkt grensesnitt trenger en dyp bakgrunn med en mild fargelysning i nærheten. Fargerikt profilarbeid kan ligge på nesten nøytralt, så merkevarefargen er det eneste sterke i bildet.

- Myk stein, til lyst grensesnitt: `linear-gradient(160deg, #f5f5f4 0%, #e7e5e4 100%)`
- Gravmyrtblått, til lyst grensesnitt: `radial-gradient(circle at 50% 40%, #e0e7ff 0%, #c7d2fe 60%, #a5b4fc 100%)`
- Dyp scene, til mørkt grensesnitt: `radial-gradient(circle at 50% 35%, #312e81 0%, #1e1b4b 50%, #0b0a1a 100%)`
- Varmt papir, til profilarbeid: `radial-gradient(circle at 30% 30%, #fde68a 0%, #fed7aa 45%, #fecdd3 100%)`

Fire bakgrunner som støtter arbeidet fremfor å konkurrere. Hver har sitt lyseste punkt bak midten, der arbeidet ligger.

### Unngå

- En hel side krympet inn i rammen
- En sterk regnbuegradient bak fargerikt arbeid
- Kraftige slagskygger under hvert kort
- Arbeid som berører bildekantene
- En ny bakgrunn på hvert bilde

### Gjør heller

- Én komponent eller skjerm, tett beskåret
- En bakgrunn som er roligere enn arbeidet
- Én myk skygge, eller ingen
- En marg på 10 til 15 prosent
- Én bakgrunnsfamilie gjennom profilen

Enhetsmockuper kan hjelpe når sammenhengen betyr noe, som en mobilapp i en hånd eller en urskive på et håndledd. Brukt på hvert bilde krymper de arbeidet og blir fort utdaterte. En ren, flat skjerm på god bakgrunn er vanligvis sterkere. [Gradientbakgrunner](https://gradiently.design/nb/guide/gradient-background) og [mørke gradientbakgrunner](https://gradiently.design/nb/guide/dark-gradient-backgrounds) viser hvordan du lager bakgrunner som ikke ligner standardvalg.

## Få Dribbble-profilen til å ligne én portefølje

Besøkende vurderer profilen ut fra rutenettet. Når hvert bilde deler bakgrunnsfamilie, marg og beskjæringsmåte, virker rutenettet gjennomtenkt. Arbeidet, fremfor innrammingen, endres fra rute til rute. [Tips til designporteføljen](https://gradiently.design/nb/guide/designer-portfolio-tips) og [design av prosjektstudier](https://gradiently.design/nb/guide/case-study-design) tar samme tankegang videre til en hel portefølje.

Et Dribbble-omslag med tittelen Introduksjonsflyt på rolig gradientbakgrunn

Ett bilde i en serie: tittelen først, deretter skjermene i de neste bildene.

Et matchende Dribbble-omslag med tittelen Ikonsett, 48 tegn og samme bakgrunn og oppsett

Neste bilde med samme bakgrunn og oppsett, så profilrutenettet fremstår som en samlet arbeidsportefølje.

Gi hvert innlegg en enkel tittel som sier hva det er, «Introduksjon til bankapp» fremfor «Friske vibber», og en kort beskrivelse av problemet og valget ditt. Folk finner bilder gjennom søk og tagger, og kunder leser beskrivelsen for å vurdere hvordan du tenker, ikke bare hvordan du tegner.

En bakgrunn ingen andre bruker, er en stille signatur. I Gradiently er Dribbble-bilde en innebygd størrelse, og en Mark du sikrer deg er din alene å eksportere med. Dermed kan scenen bak bildene dine ikke dukke opp på en annen designers profil. Med Pro kan du eksportere stillbilder opptil 4K eller en kort MP4 når Markens langsomme bevegelse passer et animert bilde. Hold løkker korte og rolige generelt; [animerte gradientbakgrunner](https://gradiently.design/nb/guide/animated-gradient-background) har prinsippene.

## FAQ

### Hvilken størrelse har et Dribbble-bilde?

1600×1200 piksler, et liggende 4:3-format.

### Kan jeg laste opp et annet størrelsesforhold til Dribbble?

Rutenettet i Dribbble er 4:3, så andre former beskjæres eller får ekstra luft i miniatyren. Design i 4:3 for å styre hva folk ser.

### Hvilken bakgrunn bør jeg bruke til et Dribbble-bilde?

En rolig bakgrunn litt mørkere enn et lyst grensesnitt, eller en dyp bakgrunn med mild lysning til mørke grensesnitt. Bakgrunnen bør være roligere enn arbeidet.

### Kan Dribbble-bilder animeres?

Ja. Innlegg kan inneholde GIF-er og videoer, som passer interaksjon og bevegelse. Hold animasjonen kort og la den gå jevnt i løkke.

### Hvor stor marg bør et Dribbble-bilde ha?

Omtrent 10 til 15 prosent av bildet på hver side, rundt 160 til 240 piksler i et 1600 piksler bredt bilde.