Як стварыць выяву-загаршчык дакладнага памеру?

Увядзіце Шырыня (px) і Вышыня (px), выберыце колеры або Каляровую тэму, затым націсніце Спампаваць PNG, Спампаваць JPG або Загрузіць SVG. Па змаўчанні на выяве паказваюцца яе памеры, напрыклад, 800 x 600, у якасці надпісу.

Якога максімальнага памеру я магу згенераваць выяву-загаршчык?

Шырыня і вышыня павінны быць ад 1 да 4000 пікселяў кожная. Значэнні па-за гэтым дыяпазонам выклікаюць памылку Шырыня і вышыня павінны быць ад 1 да 4000 px.

Як уставіць выяву-загаршчык непасрэдна ў HTML без файла?

Націсніце Капіяваць як data URL і ўстаўце яго ў тэг img у якасці значэння src. Вы таксама можаце выкарыстоўваць Копіяваць фрагмент HTML або Копіяваць CSS фон. Знешні хостынг выяў не патрэбны.

Ці магу я генераваць стандартныя памеры для сацыяльных сетак або вэба?

Так. Гатовыя памеры ўключаюць Пост Instagram, Гісторыя Instagram, Карта Twitter, Open Graph, Мініяцюра YouTube, Обкладынка Facebook і Загаловак электроннай пошты. Загрузіць ўсе прэсеты (ZIP) захоўвае ўсе адзінаццаць у выглядзе файлаў PNG.

Як дадаць уласны тэкст або дыяганальныя лініі на выяву-загаршчык?

Увядзіце надпіс у поле Карыстальніцкі тэкст, напрыклад, Галоўная выява, замест паказу памераў. Пастаўце галачку Паказваць дыяганальныя лініі (X), каб намаляваць ледзь прыкметныя дыяганалі. Доўгі тэкст аўтаматычна памяншаецца, каб змясціцца па шырыні.

Гэта сапраўды бясплатна?

Так. Кожны інструмент бясплатны, без уліковага запісу і банкаўскай карты. Праца выконваецца на вашай прыладзе, а не на нашых серверах, што і дазваляе заставацца бясплатным.

Ці працуе гэта на мабільным тэлефоне?

Так. Працуе ў сучасных мабільных браўзерах на iOS і Android, нічога ўсталёўваць не трэба.

🖼️

Генератар выяў-загаршчыкаў — бясплатна

Генеруйце каляровыя выявы-загаршчыкі з уласнымі памерамі, тэкстам і колерамі. Стандартныя памеры для сацыяльных сетак, макетаў і дызайнерскіх макетаў.

Працуе ў браўзерыБез рэгістрацыі і ўсплывальных вокнаўУваход не патрабуеццаБясплатна назаўсёды

Шырыня (px)

Вышыня (px)

Гатовыя памеры

Каляровыя тэмы

Фон

Тэкст / лініі

Уласны тэкст (пакіньце пустым для памераў)

Паказваць памеры, калі няма ўласнага тэкстуПаказваць дыяганальныя лініі (X)

💡 Для HTML-макетаў: выкарыстоўвайце «Капіяваць як data URL» і ўстаўце ў <img src="..."> для ўбудаваных запаўняльнікаў. Для Figma / Sketch загрузіце PNG і перацягніце.

Тыповыя выкарыстанні

Заместніцкія выявы для дызайну макетаГаспадар памеры каляравыя скрыні для выкарыстання ў Figma, Sketch, ці вэб-дызайн макеты перад рэальнымі выявамі готовыя.
Убудаваны заместніцтвам для HTML прототыпаўВыкарыстоўвайце \'Копіраваць як URL даных\' каб убудаваць адмеціньля выявы дырэктна ў HTML для хуткіх прототыпаў.
Заместніцкі для CMS слотаў контэнтаПры дэманстрацыі CMS шаблона, выкарыстоўвайце заместніцкія выявы замест рэальнага контэнта для сенсітыўных папярэджанняў.
Шаблоны выяў сацыяльных медыяўГаспадар правільна памераў заместніцаў для Instagram, Facebook, Twitter, LinkedIn шаблонаў посцаў.
CSS вёрстка тэстовання выяўГаспадар выявы ў экстрэмных адносінах аспекту каб стрэс-тэст адпаведны CSS вёрстка.

Як гэта працуе

Усё адбываецца ў вашым браўзеры з дапамогай HTML Canvas API і ўласнаручна напісанай разметкі SVG — без сервера, без загрузкі, без сэрвісу трэціх бакоў. Вы задаяце вымярэнні, колеры і тэкст пазнакі, а інструмент малюе малюнак непасрэдна на элеменце канваса ў рэальным часе, потым серыялізуе яго ў PNG, JPEG ці SVG па запытанні.

1
Наладзьце вымярэнні і колеры
Увядзіце шырыню і вышыню (1–4000 пікселяў кожная), ці абярыце адзін з адзінаццаці набораў, якія ахопліваюць распаўсюджаныя памеры сацыяльных сетак і дызайну. Абярыце колер фону і тэксту з убудаваных тэм ці ўвядзіце любое шаснаццатковае значэнне непасрэдна; нацыўны выбарнік колеру і правераны тэкставае поле застаюцца сінхранізаванымі.
2
Canvas API рэндэрыць папярэдні прагляд імгненна
Эфект React выклікае drawPlaceholder() пры кожнай змене. Гэтая функцыя выкарыстоўвае CanvasRenderingContext2D, каб запоўніць прамавугольнік колерам фону, апцыянальна намаляваць бледныя дыяганальныя перакрыжаваныя лініі пры 15% непразрыстасці, потым вымераць і цэнтраваць ваш тэкст пазнакі — аўтаматычна памяншаючы шрыфт, пакуль ён не ўпасецца ў 90% шырыні канваса.
3
Экспарт як PNG, JPEG ці SVG
Спампоўванні PNG і JPEG выклікаюць canvas.toDataURL(), пераводзяць вынік base64 у Blob у памяці і выклікаюць спампоўванне — усё сінхронна ўнутры жэсту карыстальніка, так што правілы спампоўвання iOS Safari задавальняюцца. Экспарт SVG будуе самадастатковы радок SVG з адпаведным прамавугольнікам, апцыянальнымі дыяганальнымі лініямі і элементам тэксту, потым захоўвае яго як файл .svg.
4
Масавы экспарт і скароты капіравання
Кнопка 'Спампаваць усе набары' дынамічна імпартуе JSZip, паўторна рэндэрыць кожны з адзінаццаці памераў наборы на закадравым канвасе з дапамогай той жа функцыі малявання, і пакуе ўсе PNG у адзін ZIP. Кнопкі капіравання вырабляюць URL дадзеных PNG, убудаваны тэг img SVG ці дэкларацыю CSS background-image для неадкладнай устаўкі ў код.