Miten luon paikkakuvan, joka on tietyn kokoinen?

Kirjoita Leveys (px) ja Korkeus (px), valitse värit tai Väriteema ja napsauta sitten Lataa PNG, Lataa JPG tai Lataa SVG. Oletuksena kuva näyttää mittansa, kuten 800 x 600, tunnisteena.

Mikä on suurin paikkakuva, jonka voin luoda?

Leveyden ja korkeuden on kumpikin oltava 1–4000 pikseliä. Tämän alueen ulkopuoliset arvot näyttävät virheen Leveys ja korkeus on oltava välillä 1–4000 px.

Miten laitan paikkakuvan suoraan HTML:ään ilman tiedostoa?

Napsauta Kopioi data URL:nä ja liitä se img-tagin src-arvoksi. Voit käyttää myös Kopioi HTML-koodinpätkä tai Kopioi CSS-tausta -toimintoa. Ulkoista kuvapalvelinta ei tarvita.

Voinko luoda vakiokokoisia kuvia sosiaaliseen mediaan tai verkkoon?

Kyllä. Valmiit koot sisältävät Instagram-postitus, Instagram-tarina, Twitter-kortti, Open Graph, YouTube-pikkukuva, Facebook-kansi ja Sähköpostin otsikko. Lataa kaikki esiasetukset (ZIP) tallentaa kaikki yksitoista PNG-tiedostoina.

Miten laitan omaa tekstiä tai vinot viivat paikkakuvaan?

Kirjoita tunniste Mukautettu teksti -kenttään, esimerkiksi Hero image, mittojen näyttämisen sijaan. Valitse Näytä vinot viivat (X) piirtääksesi heikot vinoviivat. Pitkä teksti pienenee automaattisesti sopimaan leveyteen.

Onko se todella ilmainen?

Kyllä. Jokainen työkalu on ilmainen, eikä vaadi tiliä tai luottokorttia. Työ tehdään laitteellasi palvelimiemme sijaan, minkä ansiosta se pysyy maksuttomana.

Toimiiko se mobiililla?

Kyllä. Se toimii nykyaikaisissa mobiiliselaimissa iOS:llä ja Androidilla, eikä mitään tarvitse asentaa.

🖼️

Paikkakuvageneraattori ilmaiseksi

Luo värillisiä paikkakuvia mukautetuilla mitoilla, tekstillä ja väreillä. Vakiokoot sosiaaliselle medialle, mockupeille ja suunnitteluluonnoksille.

Toimii selaimessasiEi rekisteröitymistä, ei ponnahdusikkunoitaEi kirjautumista tarvitaIlmainen ikuisesti

Leveys (px)

Korkeus (px)

Valmiit koot

Väriteema

Tausta

Teksti / viivat

Mukautettu teksti (jätä tyhjäksi mitat)

Näytä mitat, jos ei mukautettua tekstiäNäytä vinot viivat (X)

💡 HTML-malleille: käytä Kopioi data URL:nä -vaihtoehtoa ja liitä <img src="..."> -elementtiin sisäisiksi paikkamerkeiksi. Figma- / Sketch-malleille lataa PNG ja vedä sisään.

Yleiset käyttötavat

Paikkamerkki-kuvat suunnittelun prototyyppeihinLuo väritettyjä ruutuja koolle käytettäväksi Figmassa, Sketchissa tai verkon suunnittelun prototyyppeihin ennen kuin varsinaiset kuvat ovat valmiita.
Paikalliset paikkamerkit HTML-prototyyppeihinKäytä 'Kopioi tietojen URL-osoitteeksi' upottaaksesi paikkamerkki-kuvat suoraan HTML-koodiin nopeita prototyyppejä varten.
Paikkamerkit CMS:n sisällön paikoilleKun esittelet CMS-mallia, käytä paikkamerkki-kuvia todellisen sisällön sijaan arkaluontoisille esikatseleille.
Sosiaalisen median kuvamallitLuo oikean kokoisia paikkamerkkejä Instagram-, Facebook-, Twitter- ja LinkedIn-viestimalleihin.
CSS-asettelun testikuvatLuo kuvia äärimmäisissä kuvasuhteissa vastaavanaikaisten CSS-asettelujen testaamista varten.

Miten se toimii

Kaikki tapahtuu selaimessasi HTML Canvas -rajapinnalla ja käsin kirjoitetulla SVG-merkinnällä — ei palvelinta, ei latausta, ei kolmannen osapuolen palvelua. Asetat mitat, värit ja nimiketekstin, ja työkalu maalaa kuvan suoraan kanvaselementtiin reaaliajassa, ja serialisoi sen sitten PNG:ksi, JPEG:ksi tai SVG:ksi pyynnöstä.

1
Määritä mitat ja värit
Kirjoita leveys ja korkeus (1–4000 px kumpikin), tai valitse yksi yhdestätoista esiasetuksesta, jotka kattavat yleiset sosiaalisen median ja suunnittelun koot. Valitse tausta- ja tekstiväri sisäänrakennetuista teemoista tai anna mikä tahansa heksa-arvo suoraan; natiivi värivalitsin ja validoitu tekstikenttä pysyvät synkronoituina.
2
Canvas-rajapinta piirtää esikatselun välittömästi
React-efekti kutsuu drawPlaceholder()-funktiota jokaisella muutoksella. Tämä funktio käyttää CanvasRenderingContext2D:tä täyttääkseen suorakulmion taustavärillä, valinnaisesti piirtäen himmeitä diagonaalisia ristikkoviivoja 15 %:n peittävyydellä, ja mittaa sekä keskittää nimiketekstisi — pienentäen fonttia automaattisesti, kunnes se mahtuu 90 %:iin kanvaan leveydestä.
3
Vie PNG:nä, JPEG:nä tai SVG:nä
PNG- ja JPEG-lataukset kutsuvat canvas.toDataURL()-funktiota, muuntavat base64-tuloksen Blobiksi muistissa, ja käynnistävät latauksen — kaikki synkronisesti käyttäjän eleen sisällä, jotta iOS Safarin latausäännöt täyttyvät. SVG-vienti rakentaa itsenäisen SVG-merkkijonon vastaavalla suorakulmiolla, valinnaisilla diagonaaliviivoilla ja tekstielementillä, ja tallentaa sen sitten .svg-tiedostona.
4
Erävienti ja kopiointipikakuvakkeet
'Lataa kaikki esiasetukset' -painike tuo dynaamisesti JSZip-kirjaston, piirtää jokaisen yhdestätoista esiasetuskoosta uudelleen näytön ulkopuoliseen kanvaaseen samalla piirtofunktiolla, ja pakkaa kaikki PNG:t yhdeksi ZIP-tiedostoksi. Kopiointipainikkeet tuottavat PNG-data-URL:n, inline SVG img-tagin tai CSS background-image-määrityksen välitöntä liittämistä koodiin varten.