Kaip sukurti tikslaus dydžio vietos žymeklio vaizdą?

Įveskite Plotis (px) ir Aukštis (px), pasirinkite spalvas arba Spalvų temą, tada spustelėkite Atsisiųsti PNG, Atsisiųsti JPG arba Atsisiųsti SVG. Pagal numatytuosius nustatymus vaizdas rodo savo matmenis, pvz., 800 x 600, kaip užrašą.

Kokio didžiausio dydžio vietos žymeklio vaizdą galiu sugeneruoti?

Plotis ir aukštis turi būti nuo 1 iki 4000 pikselių. Už šio intervalo esančios reikšmės rodo klaidą Plotis ir aukštis turi būti nuo 1 iki 4000 px.

Kaip įdėti vietos žymeklio vaizdą tiesiai į HTML be failo?

Spustelėkite Kopijuoti kaip duomenų URL ir įklijuokite jį į img žymą kaip src reikšmę. Taip pat galite naudoti Kopijuoti HTML fragmentą arba Kopijuoti CSS foną. Išorinio vaizdų talpinimo nereikia.

Ar galiu generuoti standartinius socialinių tinklų ar interneto dydžius?

Taip. Iš anksto nustatyti dydžiai apima Instagram įrašas, Instagram istorija, Twitter kortelė, Open Graph, YouTube miniatiūra, Facebook viršelis ir El. pašto antraštė. Atsisiųsti visas numatytąsias reikšmes (ZIP) išsaugo visus vienuolika kaip PNG failus.

Kaip ant vietos žymeklio uždėti savo tekstą ar įstrižas linijas?

Įveskite užrašą lauke Pasirinktinis tekstas, pvz., Hero image, užuot rodžius matmenis. Pažymėkite Rodyti įstrižas linijas (X), kad nubrėžtumėte silpnas įstrižaines. Ilgas tekstas automatiškai sumažinamas, kad tilptų į plotį.

Taip. Kiekvienas įrankis yra nemokamas, nereikia nei paskyros, nei kredito kortelės. Darbas atliekamas jūsų įrenginyje, o ne mūsų serveriuose, todėl jis ir yra nemokamas.

Ar veikia mobiliuosiuose įrenginiuose?

Taip. Veikia šiuolaikinėse mobiliosiose naršyklėse iOS ir Android sistemose, nieko diegti nereikia.

🖼️

Vietos žymeklio vaizdų generatorius nemokamai

Generuokite spalvotus vietos žymeklio vaizdus su pasirinktiniais matmenimis, tekstu ir spalvomis. Standartiniai dydžiai socialinei žiniasklaidai, maketams ir dizaino eskizams.

Veikia jūsų naršyklėjeBe registracijos, be iššokančių langųPrisijungimo nereikiaNemokamai amžinai

Plotis (px)

Aukštis (px)

Iš anksto nustatyti dydžiai

Spalvų temos

Fonas

Tekstas / linijos

Pasirinktinis tekstas (palikite tuščią matmenims)

Rodyti matmenis, jei nėra pasirinktinio tekstoRodyti įstrižas linijas (X)

💡 HTML maketams: naudokite „Kopijuoti kaip duomenų URL“ ir įklijuokite į <img src="..."> vietos žymekliams. „Figma“ / „Sketch“ dizainams atsisiųskite PNG ir nutempkite.

Dažniausi naudojimo būdai

Vietos žymeklio vaizdai projekto paruošaiSukurkite dydžio spalvos dėžes naudojimui Figma, Sketch arba internetinio projekto nuorodose prieš nuotraukas yra paruoštos.
Įterptas vietos žymekliai HTML nuorodosNaudokite 'Kopijuoti kaip duomenų URL', kad tiesiogiai į HTML įterptumėte vietos žymeklio vaizdus greitoms nuorodams.
Vietos žymekliai CMS turinio lizdamsDemonstruojant CMS šablonus, naudokite vietos žymeklio vaizdus tikriausios turinio vietoje jautrūs peržiūras.
Socialinio žiniasklaidos vaizdų šablonaiSukurkite teisingai dydžio vietos žymekliai Instagram, Facebook, Twitter, LinkedIn paracijas šablonams.
CSS išdėstymo bandymo vaizdaiSukurkite vaizdus su ekstremaliomis aspektų santykiais, kad apkrautų atsakioje CSS išdėstymą.

Kaip tai veikia

Viskas vyksta jūsų naršyklėje, naudojant HTML Canvas API ir rankomis parašytą SVG žymėjimą — jokio serverio, jokio įkėlimo, jokios trečiosios šalies paslaugos. Nustatote matmenis, spalvas ir etiketės tekstą, o įrankis realiu laiku nupiešia paveikslėlį tiesiai ant drobės elemento, tada pagal poreikį serializuoja jį į PNG, JPEG ar SVG.

1
Sukonfigūruokite matmenis ir spalvas
Įveskite plotį ir aukštį (1–4000 px kiekvienam) arba pasirinkite vieną iš vienuolikos iš anksto nustatytų profilių, apimančių dažnus socialinio tinklo ir dizaino dydžius. Pasirinkite foną ir teksto spalvą iš įtaisytų temų arba tiesiogiai įveskite bet kokią HEX reikšmę; natyvus spalvos parinkiklis ir patikrintas teksto laukas išlieka sinchronizuoti.
2
Canvas API akimirksniu atvaizduoja peržiūrą
React efektas iškviečia drawPlaceholder() su kiekvienu pakeitimu. Ši funkcija naudoja CanvasRenderingContext2D, kad užpildytų stačiakampį fono spalva, pasirinktinai nupieštų blankias įstrižas kryžiaus linijas 15% permatomumu, tada išmatuotų ir centruotų jūsų etiketės tekstą — automatiškai mažindama šriftą, kol jis tilps į 90% drobės pločio.
3
Eksportuokite kaip PNG, JPEG ar SVG
PNG ir JPEG atsisiuntimai iškviečia canvas.toDataURL(), konvertuoja base64 rezultatą į Blob'ą atmintyje ir suaktyvina atsisiuntimą — viskas sinchroniškai, vartotojo veiksmo metu, kad būtų patenkintos iOS Safari atsisiuntimo taisyklės. SVG eksportas sukuria savarankišką SVG eilutę su atitinkančiu rect elementu, pasirenkamomis įstrižomis linijomis ir teksto elementu, tada išsaugo ją kaip .svg failą.
4
Masinis eksportas ir kopijavimo trumpiniai
Mygtukas „Atsisiųsti visus profilius“ dinamiškai importuoja JSZip, iš naujo atvaizduoja kiekvieną iš vienuolikos iš anksto nustatytų dydžių ekrane nematomoje drobėje, naudodamas tą pačią piešimo funkciją, ir supakuoja visus PNG failus į vieną ZIP. Kopijavimo mygtukai sukuria PNG duomenų URL, vidinę SVG img žymą arba CSS background-image deklaraciją tiesioginiam įklijavimui į kodą.