# Indie-kehittäjän markkinointi: julkaisugrafiikat itse

[Canonical HTML page](https://gradiently.design/fi/guide/indie-hacker-launch-graphics)

Rakensit tuotteen yksin. Sitä myyvä grafiikka on pienempi työ kuin luulet: viisi aineistoa, yksi ilme ja sanat, jotka kertovat tuotteen tehtävän.

## The short version

- Indie-kehittäjän markkinointi rakentuu pienestä grafiikkasarjasta: Open Graph -kuvasta, X-kansikuvasta, julkaisupäivän postauksista ja toistettavasta kehityspäivitysten pohjasta.
- Open Graph -kuva on 1200×630 pikseliä ja näkyy jokaisessa jakamassasi linkissä, joten tee se ennen kuin kerrot tuotteesta kenellekään.
- X-kansikuva on 1500×500 pikseliä, ja profiilikuva peittää osan vasemmasta alakulmasta. Pidä sanat poissa tältä alueelta.
- Julkaisugrafiikka toimii parhaiten yhdellä alle kahdeksan sanan lauseella, joka kertoo, mitä tuote tekee ja kenelle.
- Sama tausta, fontti ja sommittelu kaikissa aineistoissa saa yhden ihmisen tuotteen näyttämään vakiintuneelta ja auttaa seuraajia tunnistamaan päivityksesi.

Hyvä **indie-kehittäjän markkinointi** tarvitsee kourallisen kuvia, jotka teet kerran ja käytät uudelleen kuukausia. Open Graph -kuva viimeistelee jokaisen jaetun linkin. Lisäksi tarvitset X-kansikuvan, julkaisupäivän ilmoituksen ja yhden pohjan julkisille kehityspäivityksille. Mikään niistä ei vaadi suunnittelijaa. Ne tarvitsevat oikeat koot, yhtenäisen ilmeen ja alle kahdeksan sanan lauseen tuotteen tehtävästä. Tämä sivu käsittelee kaikki kolme ja päättyy julkaisuviikon tarkistuslistaan, jonka voit tehdä tänä iltana.

## Julkaisugrafiikat, joita indie-kehittäjä tarvitsee

Yksin toimivat perustajat joko ohittavat grafiikat kokonaan tai käyttävät viikon laskeutumissivun kuvitukseen, jota kukaan ei huomaa. Hyödyllinen välimuoto on lyhyt. Nämä aineistot ihmiset todella näkevät tässä järjestyksessä.

| Aineisto | Koko | Missä se näkyy | Milloin teet |
| --- | --- | --- | --- |
| Open Graph -kuva | 1200×630 | Jokainen X:ssä, LinkedInissä, Slackissa, Discordissa ja viesteissä jakamasi linkki | Ennen kuin kerrot kenellekään |
| X-kansikuva | 1500×500 | Profiilisi, jonka ihmiset avaavat hyvän vastauksen jälkeen | Kaksi viikkoa ennen |
| X- tai Bluesky-julkaisu | 1600×900 | Julkaisupostaus ja merkkipaalupostaukset | Julkaisuviikolla |
| LinkedIn-pystyjulkaisu | 1080×1350 | Julkaisupostaus ammattilaisyleisölle | Julkaisuviikolla |
| Kehityspäivityksen kortti | 1080×1350 | Viikkopäivitykset X:ssä, Threadsissa ja LinkedInissä | Kerran, sitten joka viikko |

Viisi aineistoa kattaa lähes jokaisen indie-tuotteen julkaisun. Product Hunt kertoo galleriakoon julkaisulomakkeella. Tarkista se sieltä ja käytä vaakapohjiasi uudelleen.

- Open Graph 1200×630: 1200 × 630
- X-kansikuva 1500×500: 1500 × 500
- X-julkaisu 1600×900: 1600 × 900
- Pystykuva 1080×1350: 1080 × 1350

Neljä muotoa mittakaavassa. Kansikuva on ohut kaistale, ja pystyjulkaisu vie paljon suuremman osan puhelimen näytöstä kuin vaakajulkaisu.

## Aloita Open Graph -kuvasta

Open Graph -kuva ilmestyy, kun joku liittää linkkisi. Se on katsotuin kuvasi, sillä jokainen jako, URL-osoitteesi sisältävä vastaus ja uutiskirjemaininta kantaa sitä mukanaan. Ilman kuvaa alustat näyttävät tyhjän harmaan kortin tai satunnaisen rajauksen sivustasi. Tarkat säännöt löytyvät oppaasta [Open Graph -kuvan koko](https://gradiently.design/fi/guide/open-graph-image-size). Lyhyesti: 1200×630, tuotteen nimi, yksi lause ja suuri teksti keskelle.

1200 × 630 -linkkikuva, jossa lukee Laskut, jotka muistuttavat itse ja sen yläpuolella tuotteen nimi Paperweight

Kuvitteellisen laskutussovelluksen Open Graph -kuva: nimi, lupaus, ei muuta. Se on luettava myös vastauksen pienessä esikatselukuvassa.

Lisää sitten merkinnät sivusi head-osaan. Useimmissa ohjelmistokehyksissä niille on oma paikka, mutta nämä ovat olennaiset:

```html
<meta property="og:title" content="Paperweight: invoices that chase themselves">
<meta property="og:description" content="Automatic payment reminders for freelancers.">
<meta property="og:image" content="https://example.com/og-v1.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">
```

Käytä kuvalle absoluuttista URL-osoitetta. Lisää tiedostonimeen versio, sillä alustat tallentavat esikatseluja välimuistiin ja uusi nimi pakottaa uuden haun.

Jos tuotteessa on monta jaettavaa sivua, kuten julkisia profiileja tai raportteja, luo jokaiselle oma kuva yhden koko sivuston kuvan sijaan. Useimmat ohjelmistokehykset voivat piirtää ne pohjasta pyynnön yhteydessä.

## Kirjoita sanat ennen värien valintaa

Indie-tuotteen julkaisugrafiikka epäonnistuu useammin sanoissa kuin ulkoasussa. ”Tuottavuuden tulevaisuus” ei kerro selaavalle tuntemattomalle mitään. Hyödyllinen lause nimeää tehtävän ja ihmisen: mikä hänen maanantaissaan muuttuu. Kirjoita kymmenen versiota, lue ääneen ja säilytä selkein. [Tekstin kirjoittaminen kuviin](https://gradiently.design/fi/guide/writing-copy-for-visuals) auttaa lyhentämään lausetta.

### Vältä

- ”Tuottavuuden tulevaisuus”
- ”Tekoälyalusta moderneille tiimeille”
- ”Versio 1.0 on julkaistu” kertomatta, mistä on kyse
- Kuusi ominaisuutta ahdettuna yhteen kuvaan
- Koko näytön kuvakaappaus, jonka käyttöliittymätekstiä ei voi lukea

### Tee näin

- ”Laskut, jotka muistuttavat itse”
- ”Käyttökatkohälytykset suoraan puhelimeesi”
- ”Julkaistu tänään” ja tuotteen selittävä lause
- Yksi ominaisuus kuvaa kohden sarjassa
- Tiukka ja suurennettu rajaus käyttöliittymän osasta

## Valitse yksi ilme kaikkiin aineistoihin

Indie-tuotteet sekoittuvat toisiinsa, koska niin moni valitsee saman violetista siniseen liukuvan taustan ja geometrisen päätteettömän fontin. Se käy viikonloppuprojektille, mutta haittaa tuotetta, jonka haluat jäävän mieleen. Valitse pohjaväri, yksi valo tai korostusväri ja yksi fontti. Käytä niitä kaikkialla: sivustolla, OG-kuvassa, kansikuvassa ja jokaisessa julkaisussa. Kuukausia toistuva ilme saa yhden ihmisen tuotteen tuntumaan yritykseltä.

- Tumma pohja, sinivihreä valo: `radial-gradient(circle at 80% 20%, #14b8a6 0%, #134e4a 35%, #05100f 75%)`
- Lämmin paperi: `linear-gradient(160deg, #f8f4ec 0%, #efe6d6 60%, #e2d3bb 100%)`
- Tumma pohja, hiilloksen valo: `radial-gradient(circle at 20% 80%, #f97316 0%, #7c2d12 40%, #1c0a05 80%)`

Kolme lähtökohtaa tavallisen violetin sijaan. Tumma pohja yhdellä valaistulla värillä sopii kehittäjätyökaluille. Lämmin paperi sopii kirjoitus- ja taloustuotteille.

Jos et halua sekoittaa omaa taustaa, [Gradientlyn Markkinoilta](/market) saat Markin, valmiin elävän taustan omalla typografisella äänellään. Voit suunnitella ilmaiseksi millä tahansa lunastamattomalla Markilla. Lunastaminen tekee sinusta sen ainoan omistajan, joten vain sinä voit viedä sillä tehtyjä töitä eikä julkaisusi voi vastata toisen perustajan ilmettä. Lunastus on kertamaksu, johon sisältyy ensimmäinen säilytysvuosi. Sen jälkeen säilytys on Prolla ilmaista tai siitä maksetaan vuosimaksu Markia kohden. Mark piirtyy uudelleen joka koossa ja siirtää rauhallisimman alueensa sanojen taakse, jolloin vilkaskin tausta pysyy luettavana ilman laatikoita tai varjoja.

## Tunnistettavat julkiset kehityspäivitykset

Viikkopäivitys on julkisen tuotekehityksen selkäranka. Käytä samaa sommittelua joka viikko, jotta seuraajat tunnistavat julkaisusi ennen ensimmäistä sanaa. Aloita yhdellä todellisella luvulla tai opilla ja julkaise myös hitaista viikoista. Rehellinen tasainen viikko rakentaa enemmän luottamusta kuin jatkuva voittoputki. Jaa vain paikkansa pitäviä lukuja.

Pystysuuntainen kehityspäivityskortti, jossa lukee Viikko 14 ja Ensimmäiset 100 käyttäjää sekä lupaus onnistumisten ja epäonnistumisten käsittelystä

Merkkipaalun viikko: luku on otsikko, ja lisärivi lupaa tarinan julkaisun tekstissä.

Pystysuuntainen kehityspäivityskortti Viikko 15 ja Kolme julkaisemaani asiaa, listana tumma tila, CSV-tuonti ja nopeampi haku

Julkaisuviikko samalla pohjalla. Sama tausta ja typografia pitävät sarjan yhtenäisenä.

Tee kuukauden pohjat kerralla sen sijaan, että teet yhden joka perjantai. [Somesisällön luominen erissä](https://gradiently.design/fi/guide/batch-create-social-media-content) kertoo menetelmän. Anna suurille hetkille, kuten julkaisupäivälle tai liikevaihdon merkkipaalulle, oma sommittelunsa, jotta ne erottuvat viikkorytmistä.

## X-kansikuva ja profiili

X-kansikuva on 1500×500. Profiilikuva peittää sen vasemman alakulman, ja puhelimet rajaavat kaistaleen eri tavalla. Pidä sanat keskellä ja oikealla. Lisää tuotteen nimi, lyhyt lause ja URL tai pelkkä ilme. Tarkat turva-alueet löytyvät oppaasta [X-kansikuvan koko](https://gradiently.design/fi/guide/x-header-size).

Leveä X-kansikuva, jossa Rakennan Paperweightia julkisesti ja verkko-osoite ovat keskikohdan oikealla puolella

Kansikuva tekee yhden asian: kertoo kävijälle, mitä rakennat. Sanat ovat keskiosan oikealla puolella profiilikuvan ulottumattomissa.

## Julkaisuviikon tarkistuslista

1. **Kaksi viikkoa ennen: OG-kuva ja kansikuva** Julkaise metatiedot ja liitä URL-osoite itsellesi lähetettävään yksityisviestiin nähdäksesi oikean esikatselun.
2. **Viikko ennen: sanat** Kirjoita ydinlause ja kolme ominaisuuslausetta. Jokainen ominaisuus saa oman kuvansa.
3. **Suunnittele yksi pääpohja** Tee julkaisupostaus koossa 1600×900 ilmeelläsi, lauseellasi ja käyttöliittymän rajatulla osalla.
4. **Tee siitä muut koot** Sommittele sama työ uudelleen koossa 1080×1350 LinkedIniin ja Threadsiin sekä 1080×1920 tarinoihin rajaamisen sijaan. Pidä tarinan sanat keskimmäisellä [turva-alueella](https://gradiently.design/fi/guide/social-media-safe-zones). [Yksi ilme joka kokoon](https://gradiently.design/fi/guide/one-look-every-size) selittää miksi.
5. **Julkaisupäivä: yksi kuva julkaisua kohden** Julkaise, kiinnitä postaus profiiliisi ja vastaa kaikille. Pidä Product Hunt -galleria samassa ilmeessä, jotta kummastakin paikasta tulevat kävijät näkevät yhden tuotteen.
6. **Seuraava viikko: kiitä ihmisiä** Kerro tapahtumista todellisilla luvuilla ja siitä, mitä korjaat seuraavaksi. Tämä julkaisu leviää usein varsinaista julkaisua pidemmälle.

Julkaisun laajempaan kokonaisuuteen auttavat [tuotteen julkaisugrafiikat](https://gradiently.design/fi/guide/launch-day-graphics) ja ohjelmistoja myydessäsi [SaaS-brändäys](https://gradiently.design/fi/guide/saas-startup-branding). Jos vietät julkaisuviikon editorissa, Gradiently toimii myös ChatGPT:ssä, Claudessa ja muissa etä-MCP-palvelimia tukevissa avustajissa. Pyydä jo avoinna olevalta avustajalta julkaisupostaus, ja työ avautuu Studioon lopputarkistusta varten. Ohjeet ovat [MCP-sivulla](https://gradiently.design/fi/developers/mcp).

> **Testaa jokainen esikatselu ennen julkaisua** Alustat säilyttävät linkkiesikatseluja välimuistissa päiviä. Tarkista omasi ensin yksityisviestissä. Jos muutat kuvaa myöhemmin, muuta myös tiedostonimi.

## FAQ

### Minkä kokoinen Open Graph -kuvan pitäisi olla?

1200×630 pikseliä. Pidä sanat suurina ja keskellä, sillä kuva näytetään usein pienenä esikatseluna.

### Minkä kokoinen X-kansikuva on?

1500×500 pikseliä. Profiilikuva peittää vasenta alakulmaa, joten pidä teksti keskellä ja oikealla.

### Tarvitsenko suunnittelijan Product Hunt -julkaisuun?

Et. Tarvitset selkeän yhden lauseen kuvauksen, yhtenäisen ilmeen ja muutaman vaakakuvan, joista kukin näyttää yhden ominaisuuden. Voit tehdä ne itse yhdessä illassa.

### Mitä julkisen kehityspäivityksen pitäisi sisältää?

Yksi todellinen luku tai oppi otsikkona, sama sommittelu joka viikko ja tarina julkaisun tekstissä. Jaa hitaat viikot yhtä rehellisesti kuin hyvät.

### Miten pidän julkaisugrafiikat yhtenäisinä?

Valitse yksi tausta, fontti ja sommittelu ja suunnittele kaikki koot samasta pääpohjasta yhden kuvan rajaamisen sijaan.
