# Avoimen lähdekoodin projektin brändäys: README ja julkaisut

[Canonical HTML page](https://gradiently.design/fi/guide/open-source-project-branding)

Useimmat kohtaavat avoimen lähdekoodin projektin linkin esikatselussa, README-tiedostossa ja versiojulkaisussa. Pieni brändäystyö näissä kolmessa saa projektin näyttämään ylläpidetyltä, luotettavalta ja tähden arvoiselta.

## The short version

- Avoimen lähdekoodin projektin brändäys näkyy pääasiassa neljässä paikassa: logossa, README-otsakkeessa, tietovaraston some-esikatselukuvassa ja versiojulkistuksissa.
- Hyvä avoimen lähdekoodin logo erottuu 16 pikselin faviconina ja pienessä riippuvuuslistassa.
- GitHubin README voi vaihtaa otsakekuvan vaalean ja tumman version välillä HTML:n picture-elementillä ja prefers-color-scheme-ehdolla.
- Some-esikatselukuva näkyy tietovaraston linkkiä jaettaessa, joten sen pitäisi kertoa projektin nimi ja tehtävä.
- Yhtenäiset versiojulkaisut auttavat käyttäjiä huomaamaan uudet versiot ja yhdistämään ne samaan projektiin.

**Avoimen lähdekoodin projektin brändäys** ei vaadi suunnittelutoimistoa. Se tarvitsee neljä kerran tehtävää ja yhtenäisenä pidettävää asiaa: yksinkertaisen logon, vaaleassa ja tummassa tilassa luettavan README-otsakkeen, tietovaraston jakokuvan sekä tunnistettavan pohjan versiojulkistuksille. Yhdessä ne kertovat muutamassa sekunnissa projektin olevan ylläpidetty ja harkittu. Se voi tuoda ensimmäisen tähden tai osallistujan.

## Miksi brändäys merkitsee avoimen lähdekoodin projektille

Kehittäjät arvioivat projektit nopeasti huolenpidon merkeistä: selkeä README, tuoreet julkaisut ja helposti uudelleen löydettävä nimi. Yhtenäinen visuaalinen identiteetti on yksi näistä merkeistä. Se auttaa muistamaan projektisi samankaltaisten kirjastojen joukossa ja antaa osallistujille sekä konferenssipuhujille jotain diaan laitettavaa. Se ei korvaa hyvää dokumentaatiota, vaan tekee siitä helpommin huomattavan.

## Avoimen lähdekoodin logo, joka toimii 16 pikselissä

Logo näkyy faviconina, GitHub-avatarina, dokumentaatiosivun pienenä tunnuksena ja joskus tarrana. Suunnittele pienin käyttö ensin. Yksi vahva muoto tai kirjain varmassa kirjasimessa voittaa yksityiskohtaisen kuvituksen. Vie SVG verkkoon ja läpinäkyvät PNG:t muualle. [SVG vai PNG](https://gradiently.design/fi/guide/svg-vs-png) kertoo käyttökohteet, ja [faviconin suunnittelu](https://gradiently.design/fi/guide/favicon-design) käsittelee pienimmät koot.

### Vaikea käyttää

- Yksityiskohtainen maskotti ohuilla viivoilla
- Viisi väriä, jotka katoavat pienessä koossa
- Avatarissa lukukelvottoman pitkä sanalogo
- Vain PNG valkoisella pohjalla

### Helppo käyttää

- Yksi muoto tai kirjain, joka erottuu 16 px:ssä
- Yksi tai kaksi väriä ja tausta
- Lyhyt tunnus avatareihin, sanalogo otsakkeisiin
- SVG ja läpinäkyvä PNG, vaaleat ja tummat versiot

Aseta tunnus liukuväripohjalle avatareissa ja otsakkeissa, niin se lakkaa näyttämästä oletuskuvakkeelta. Pidä liukuväri rauhallisena logon kohdalla. [Logo liukuväritaustalla](https://gradiently.design/fi/guide/logo-on-gradient-background) näyttää miten.

- Päätteen sininen: `linear-gradient(135deg, #0d1117 0%, #1f2a44 55%, #3b82f6 100%)`
- Koostamisen vihreä: `radial-gradient(circle at 25% 25%, #a7f3d0 0%, #10b981 45%, #064e3b 100%)`
- Julkaisun violetti: `linear-gradient(160deg, #1a1033 0%, #6d28d9 50%, #f0abfc 100%)`
- Lämmin meripihka: `linear-gradient(120deg, #fff7ed 0%, #fdba74 50%, #c2410c 100%)`

Neljä projektipohjaa, jotka sopivat GitHubin tumman ja vaalean teeman rinnalle. Kopioi yksi avatareihin, otsakkeisiin ja some-esikatseluun.

## README-otsake, joka toimii tummassa tilassa

Moni kehittäjä lukee GitHubia tummassa tilassa, jolloin valkoiselle tehty otsake loistaa kuin taskulamppu. GitHub tukee Markdownissa HTML:n `<picture>`-elementtiä, joten voit tarjota samasta otsakkeesta vaalean ja tumman version. Blogibannerin kokoinen 1200×600-banneri on README:lle sopiva leveys. [Tumman tilan suunnittelu](https://gradiently.design/fi/guide/dark-mode-design) käsittelee värejä.

```html
<p align="center">
  <picture>
    <source media="(prefers-color-scheme: dark)" srcset="./.github/header-dark.png">
    <img alt="Tidepool: a tiny job queue for Postgres" src="./.github/header-light.png" width="600">
  </picture>
</p>
```

Liitä README.md:n alkuun. GitHub näyttää tumman kuvan tumman tilan lukijoille ja vaalean muille. Vie molemmat koossa 1200×600 ja näytä 600 pikselin levyisinä terävyyden säilyttämiseksi suuren pikselitiheyden näytöillä.

Laita otsakkeeseen kolme asiaa: logo, projektin nimi ja yksirivinen kuvaus. Merkit, asennuskomennot ja kuvakaappaukset kuuluvat sen alle tekstinä, jotta ne voi kopioida ja päivittää.

## Näin lisäät GitHubin some-esikatselukuvan

Kun tietovarastosi linkki liitetään keskusteluun, foorumille tai julkaisuun, alusta näyttää **some-esikatselukuvan**. Ilman omaa kuvaa GitHub luo oletuskortin tietovaraston tiedoista. Lataa oma kuva tietovaraston Settings-kohdan Social preview -osioon. GitHub näyttää siellä suositusmitat. Käytä 1200×630-linkkiesikatselupohjaasi ja pidä sanat keskellä, jotta pienet muotoerot eivät rajaa niitä pois. [Open Graph -kuvan koko](https://gradiently.design/fi/guide/open-graph-image-size) selittää rajaukset, ja [Open Graph -tagit](https://gradiently.design/fi/guide/open-graph-tags) käsittelee samaa kuvaa dokumentaatiosivullasi.

Tidepool-nimisen avoimen lähdekoodin projektin vaakasuuntainen some-esikatselukuva yksirivisellä kuvauksella

Some-esikatselu koossa 1200×630: nimi, yksi rivi, ei mitään reunoilla.

## Versiojulkistuksen grafiikat, jotka huomataan

Moni kuulee uudesta versiosta julkaisusta eikä muutoslokista. Yhtenäinen grafiikka, sama tausta ja asettelu vain versionumeron ja otsikon vaihtuessa, opettaa tunnistamaan ilmoituksesi. Aloita siitä, mitä käyttäjä voi nyt tehdä, älä pelkästä versionumerosta.

Avoimen lähdekoodin projektin version 2.0 vaakajulkistus otsikolla Uusintayritykset kasvavin viivein

X:n tai Blueskyn versiojulkaisu koossa 1600×900: ominaisuus johtaa, versio tukee.

Neliömuotoinen grafiikka Tidepool 2,0:n kohokohdista samalla liukuvärillä

LinkedInin neliöversio koossa 1200×1200 listaa kohokohdat.

| Grafiikka | Koko | Käyttöpaikka |
| --- | --- | --- |
| README-otsake | 1200×600 px | Tietovaraston yläosa |
| Some-esikatselu | Linkin esikatselupohja, 1200×630 px | Jaetut tietovarastolinkit |
| Versiojulkaisu | 1600×900 px | X ja Bluesky |
| Versiojulkaisu, neliö | 1200×1200 px | LinkedIn |
| Yhteisöbanneri | 960×540 px | Discord-palvelimen banneri |
| Dokumentaation esikatselu | 1200×630 px | Jaetut dokumentaatiolinkit |

Projektin perusaineistot. Yksi suunnitelmapohja kattaa ne kaikki.

1. **Tee tunnus** Yksi muoto tai kirjain, testattuna 16 px:ssä. Vie SVG ja läpinäkyvä PNG.
2. **Valitse yksi pohja** Liukuväri tai väri, joka sopii GitHubin tummiin ja vaaleisiin teemoihin.
3. **Rakenna README-otsake** Vaalea ja tumma versio, logo, nimi ja yksi rivi.
4. **Lataa some-esikatselu** Tietovaraston Settings, Social preview. Testaa liittämällä linkki keskusteluun.
5. **Tee versiojulkistuksen pohja** Säilytä asettelu, vaihda joka kerta versio ja otsikko.

Gradiently sopii ylläpitäjille, jotka eivät mielellään avaa suunnittelutyökalua. Se toimii ChatGPT:ssä, Claudessa ja kaikissa etä-MCP-palvelimia tukevissa avustajissa. Voit siis pyytää versiografiikkaa julkaisumuistiinpanoja kirjoittaessasi, ja design avautuu Studiossa lopputarkistukseen. Designit käyttävät Markia, liukuväritaustaa, jolla kukaan muu ei voi viedä tiedostoja lunastettuasi sen. Projektin ilme on siis vain sen oma. [MCP-asennusopas](https://gradiently.design/fi/developers/mcp) vie muutaman minuutin.

## FAQ

### Miten lisään some-esikatselukuvan GitHub-tietovarastoon?

Avaa tietovaraston Settings, etsi Social preview ja lataa kuva. GitHub näyttää suositusmitat siinä. Pidä teksti keskellä, jotta mitään tärkeää ei rajata pois.

### Miten saan README-kuvan vaihtumaan tummassa tilassa?

Käytä HTML:n picture-elementtiä, source-elementtiä ehdolla prefers-color-scheme: dark ja img-varakuvaa vaalealle tilalle. GitHub näyttää sen Markdown-tiedostoissa.

### Tarvitseeko avoimen lähdekoodin projekti logon?

Se ei ole pakollinen, mutta yksinkertainen logo helpottaa tunnistamista avatareissa, dokumentaatiossa ja puheissa. Suunnittele se erottumaan favicon-koossa.

### Mitä versiojulkistuksen grafiikkaan kuuluu?

Projektin nimi, versio ja pääominaisuus kerrottuna siitä, mitä käyttäjät voivat nyt tehdä. Pidä asettelu samana jokaisessa julkaisussa.