# Dribbble-kuvan koko: 1600×1200 ja työn esittely

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

Dribbblessä työsi kilpailee pienten 4:3-kuvien ruudukossa. Ympäröivä kehys, tausta, rajaus ja väljyys ratkaisevat, napsauttaako kukaan.

## The short version

- Dribbble-kuvan koko on 1600×1200 pikseliä, vaakasuunnassa 4:3.
- Dribbble näyttää julkaisut ruudukossa 4:3-pikkukuvina, joten ensimmäisen kuvan pitää toimia pienessä koossa.
- Vahva kuva näyttää yhden ajatuksen läheltä, väljästi kehystettynä ja työtä tukevalla taustalla, joka ei kilpaile sen kanssa.
- Yhtenäinen tausta ja kehystys tekevät Dribbble-profiilista yhden suunnittelijan portfolion.
- Julkaisut voivat olla myös animoituja. Lyhyt, siisti silmukka sopii vuorovaikutus- ja liikesuunnittelun esittelyyn.

**Dribbble-kuvan koko** on 1600×1200 pikseliä, vaakamuoto 4:3. Jokainen julkaisu näkyy ruudukossa 4:3-ruutuna. Suunnittele ensimmäinen kuva toimimaan pienenä: yksi ajatus läheltä, tilaa ympärillä ja työtä korostava tausta. Muut kuvat voivat näyttää yksityiskohdat. Pidä kehystys ja tausta yhtenäisinä, niin profiili tuntuu portfoliolta latausten kasan sijaan.

## Dribbble-kuvan mitat

| Ominaisuus | Arvo |
| --- | --- |
| Koko | 1600×1200 px |
| Kuvasuhde | 4:3, vaaka |
| Ruudukon pikkukuva | Ensimmäinen kuva pienenä kuvasuhteessa 4:3 |
| Tiedostomuodot | PNG tai JPG still-kuville, GIF tai video liikkeelle |
| Useita kuvia | Julkaisu voi sisältää useita kuvia tai videoita |

Dribbblen lataussivu kertoo tiedostokoon ja videon pituuden nykyiset rajat. Suunnittele kokoon 1600×1200 tai terävämpään 4:3-kerrannaiseen, kuten 3200×2400, niin kehys sopii tarkasti.

Lataa tarkalleen 4:3-muodossa. Muut muodot rajataan tai täydennetään ruudukossa, ja Dribbble valitsee kohdan harvoin kuten itse valitsisit. PNG säilyttää käyttöliittymän reunat ja tekstin terävinä, JPG sopii valokuvatyöhön.

- Dribbble-kuva 1600×1200: 1600 × 1200
- Behance-kansi 1616×1264: 1616 × 1264
- Diat 4:3 1600×1200: 1600 × 1200
- Instagram-julkaisu 1080×1350: 1080 × 1350

Kuva rinnakkaisformaattien vieressä. 4:3-dia on samaa kokoa, joten hyvin kehystetty kuva sopii suoraan esitykseen. Behance-kansi on lähellä, mutta eri.

## Työn kehystäminen Dribbble-kuvaan

Klassinen heikko kuva on kokonainen verkkosivu pienennettynä kehykseen. Pikkukuvana siitä tulee harmaa suorakulmio pilkkuineen. Valitse yksi näkemisen arvoinen kohta, rajaa siihen ja anna tilaa.

1. **Valitse yksi ajatus** Yksi näkymä, komponentti, logokokonaisuus tai kuvakesarja. Jos selitys tarvitsee kappaleen, tee kaksi julkaisua.
2. **Rajaa luonnollista tiukemmin** Näytä kassakortti, älä koko kassasivua. Tärkeän yksityiskohdan pitää näkyä ruudukossa.
3. **Jätä marginaali** Noin 10:stä 15 prosenttiin jokaisella sivulla, eli noin 160:stä 240 pikseliin 1600 pikselin kuvassa, antaa työlle tilaa.
4. **Valitse tukeva tausta** Tasainen tai pehmeä liukuväri työn paletista tai sitä vasten. Taustan tulee parantaa työtä ja jäädä sitten huomaamattomaksi.
5. **Lisää yksityiskohtakuvat jälkeenpäin** Käytä toista ja kolmatta kuvaa lähikuviin, tiloihin ja koko polkuun. Ensimmäinen kuva on kutsu.

1600×1200-kokoinen Dribbble-kansi tekstillä Kassa uudelleen suunniteltuna pehmeällä liukuvärillä

Monikuvajulkaisun kansi: lyhyt otsikko rauhallisella taustalla, näkymät seuraavissa kuvissa.

## Dribbble-kuvien taustat

Tausta on näyttämö. Vaalea käyttöliittymä näyttää usein parhaalta hieman omaa valkoistaan tummemmalla, pehmeästi sävytetyllä pohjalla, jotta kortin reunat erottuvat. Tumma käyttöliittymä tarvitsee syvän pohjan ja lempeän värinousun lähellä. Kirkas brändityö voi olla lähes neutraalilla, jolloin brändiväri on ainoa voimakas elementti.

- Pehmeä kivi vaalealle UI:lle: `linear-gradient(160deg, #f5f5f4 0%, #e7e5e4 100%)`
- Talvion sävy vaalealle UI:lle: `radial-gradient(circle at 50% 40%, #e0e7ff 0%, #c7d2fe 60%, #a5b4fc 100%)`
- Syvä näyttämö tummalle UI:lle: `radial-gradient(circle at 50% 35%, #312e81 0%, #1e1b4b 50%, #0b0a1a 100%)`
- Lämmin paperi brändityölle: `radial-gradient(circle at 30% 30%, #fde68a 0%, #fed7aa 45%, #fecdd3 100%)`

Neljä työtä tukevaa taustaa. Jokaisen kirkkain piste on kehyksen keskellä työn takana.

### Vältä

- Kokonainen sivu pienennettynä
- Voimakas sateenkaariliukuväri värikkään työn takana
- Raskas varjo jokaisen kortin alla
- Työ kiinni kehyksen reunoissa
- Eri tausta jokaisessa julkaisussa

### Tee näin

- Yksi komponentti tai näkymä läheltä
- Työtä rauhallisempi pohja
- Yksi pehmeä varjo tai ei varjoa
- Marginaali 10:stä 15 prosenttiin
- Yksi taustaperhe koko profiilissa

Laitemallit auttavat, kun asiayhteys on tärkeä, kuten puhelinsovellus kädessä tai kellotaulu ranteessa. Jokaisessa julkaisussa ne pienentävät työtä ja vanhenevat nopeasti. Puhdas litteä näkymä hyvällä taustalla on yleensä vahvempi. [Liukuväritaustat](https://gradiently.design/fi/guide/gradient-background) ja [tummat liukuväritaustat](https://gradiently.design/fi/guide/dark-gradient-backgrounds) auttavat tekemään pohjia, jotka eivät näytä oletuksilta.

## Tee Dribbble-profiilista yhtenäinen portfolio

Vierailija arvioi profiilia ruudukon perusteella. Yhteinen taustaperhe, marginaali ja rajaustapa tekevät siitä harkitun. Työ vaihtuu ruudusta toiseen, kehystys pysyy. [Suunnittelijan portfoliovinkit](https://gradiently.design/fi/guide/designer-portfolio-tips) ja [työn kuvauksen suunnittelu](https://gradiently.design/fi/guide/case-study-design) vievät ajatuksen kokonaiseen portfolioon.

Dribbble-kansi otsikolla Käyttöönoton polku rauhallisella liukuväritaustalla

Yksi sarjan julkaisu: ensin otsikko, seuraavissa kuvissa näkymät.

Vastaava Dribbble-kansi otsikolla Kuvakesarja, 48 merkkiä samalla taustalla ja asettelulla

Seuraava julkaisu samalla taustalla ja asettelulla tekee profiiliruudukosta yhden työkokonaisuuden.

Anna julkaisulle selkeä sisältöä kuvaava otsikko, kuten ”Pankkisovelluksen käyttöönotto” mieluummin kuin ”Raikkaat fiilikset”, ja lyhyt kuvaus ongelmasta sekä ratkaisustasi. Kuvat löytyvät haulla ja tunnisteilla. Asiakkaat lukevat kuvauksen arvioidakseen ajatteluasi, eivät vain piirrostaitoasi.

Tausta, jota muut eivät käytä, on hiljainen tunnusmerkki. Gradientlyssä Dribbble-kuva on valmis koko. Lunastamallasi Markilla vain sinä voit viedä tiedostoja, joten taustasi ei ilmesty toisen suunnittelijan profiiliin. Prolla viet still-kuvia 4K:hon asti tai lyhyen MP4:n, jos Markin hidas liike sopii julkaisuun. Pidä liikesilmukat lyhyinä ja lempeinä. [Animoidut liukuväritaustat](https://gradiently.design/fi/guide/animated-gradient-background) kertoo periaatteet.

## FAQ

### Minkä kokoinen Dribbble-kuva on?

1600×1200 pikseliä, vaakasuunnassa 4:3.

### Voinko ladata Dribbbleen muun kuvasuhteen?

Ruudukko on 4:3, joten muut muodot rajataan tai täydennetään pikkukuvassa. Suunnittele 4:3-muodossa hallitaksesi näkyvän alueen.

### Mitä taustaa käytän Dribbble-kuvassa?

Vaalealle käyttöliittymälle hieman sitä tummempi rauhallinen pohja, tummalle syvä pohja lempeällä värinousulla. Taustan pitää olla työtä hiljaisempi.

### Voivatko Dribbble-julkaisut olla animoituja?

Kyllä. GIF-kuvat ja videot sopivat vuorovaikutus- ja liikesuunnitteluun. Pidä liike lyhyenä ja silmukka siistinä.

### Kuinka paljon marginaalia Dribbble-kuva tarvitsee?

Noin 10:stä 15 prosenttiin kehyksestä joka sivulla, eli noin 160:stä 240 pikseliin 1600 pikseliä leveässä kuvassa.