0

OG vaizdų generatorius – socialinio bendrinimo vaizdo kūrimo priemonė

Sukurkite 1 200 × 630 „Open Graph“ socialinio bendrinimo vaizdą su pavadinimu, subtitrais, fonu ir logotipu, pateiktą gyvai ant tikros drobės – tada peržiūrėkite, kaip jis atrodo įrėmintas „Twitter“ / X, „Facebook“, „LinkedIn“ ir „Discord“ nuorodų kortelėse prieš atsisiųsdami švarų PNG.

Buy Me a Coffee at ko-fi.com
Apdorojama... 0%
Vaizdo komponavimas
Atvaizdavimo platformos peržiūros
Atlikta

Rezultatas

„Open Graph“ vaizdas yra paveikslėlis, kuris rodomas, kai nuoroda įklijuojama į pokalbį, tviterį ar „Slack“ kanalą – ir kiekviena platforma, kurioje tikimasi, kad drobė būtų maždaug 1200 × 630 pikselių, „Facebook“ og:image ir „Twitter“ suvestinės_didelio_vaizdo kortelės buvo sukurtos pagal dydį. Neteisingai nustatykite dydį ir vaizdas bus apkarpytas, neryškus arba suspaustas; neteisingas išdėstymas, o pavadinimas rodomas kaip neįskaitoma skeveldra prieš užimtą nuotrauką. Šis įrankis sukuria vaizdą realia tiksline skiriamąja geba naudojant „Canvas 2D“ API, todėl peržiūroje matote tikslų pikselių tinklelį, kuris pateikiamas PNG formatu.

Pasirinkite foną – vienodą spalvą, dviejų žingsnių linijinį gradientą, sukurtą iš dviejų pasirinktų spalvų, arba įkeltą nuotrauką, kuri apkerpama, kad užpildytų visą 1200 × 630 kadrą taip pat, kaip ir CSS fono dydžio: viršelis, užuot ištemptas neproporcingai. Įveskite pavadinimą ir pasirenkamą paantraštę: abu simboliai matuojami pagal drobės šrifto metriką, todėl antraštė, kuri per ilga, kad tilptų vienoje eilutėje, perkeliama į antrą arba trečią eilutę ties tikros žodžio riba, o ne išsilieja iš krašto ar nematomai sutrumpėja. Pasirinkite lygiavimą centre arba kairėje, pasirinkite teksto spalvą, kuri skaitoma fone, ir numeskite pasirenkamą fiksuoto, įskaitomo dydžio logotipą į kampą.

Po drobėmis keturios mažos kortelės apytiksliai parodo, kaip baigtas vaizdas atrodo, kai tikra platforma jį apvynioja savo chromu: „Twitter“ / X kortelėje rodomas tik domenas ir paryškintas pavadinimas po vaizdu be aprašymo eilutės, „Facebook“ prideda didžiosiomis raidėmis domeno juostelę virš pavadinimo ir aprašo bloko, „LinkedIn“ pateikia domeną po pavadinimu be jokio aprašymo, įterpia savo pavadinimą ir įveda savo aprašymą virš vaizdo. tema. Tai yra planavimo tikslais sudaryti apytiksliai apytiksliai stiliai – aiškiai pažymėti kaip iliustruojantys, su domeno eilute, kurią įvedėte patys, o ne realių platformų tiesioginis gavimas ar ekrano kopija, nes bendrinant nuorodą ir leidžiant kiekvienos platformos tikrintuvui nuskaityti tikrąją jūsų puslapio metažymeles og:image ir og:title, iš tikrųjų sukuriama tiesioginė kortelė.

Viskas pateikiama lokaliai HTML drobės elemente jūsų naršyklėje: pavadinimas, paantraštė, įkeltas fonas ir logotipas niekada nepalieka jūsų įrenginio, o eksportuotas failas yra švarus canvas.toBlob() PNG, kuriame yra tik tai, ką sukūrėte – atsisiųstame vaizde neįtraukiami maketų kraštiniai, netikros naršyklės juostos ar platformos logotipai. Jei taip pat reikia pakeisti eksportuoto PNG dydį arba konvertuoti jį vėliau, šios svetainės vaizdo dydžio keitimo ir vaizdo keitiklio įrankiai veikia ten, kur baigiasi.