Nola sortu tamaina zehatzeko leku-betetzeko irudi bat?

Idatzi Zabalera (px) eta Altuera (px), aukeratu koloreak edo kolore-gai bat, eta egin klik Deskargatu PNG, Deskargatu JPG edo Deskargatu SVG botoian. Besterik adierazi ezean, irudiak bere neurriak erakusten ditu etiketa gisa, adibidez 800 x 600.

Zein da sor dezakedan leku-betetzeko irudirik handiena?

Zabalera eta altuera 1 eta 4000 pixel artean egon behar dute bakoitzak. Tarte horretatik kanpoko balioek Zabalera eta altuera 1 eta 4000 px artean egon behar du errorea erakusten dute.

Nola txertatu dezaket leku-betetzeko irudi bat zuzenean HTMLn fitxategirik gabe?

Egin klik Kopiatu data URL gisa aukeran eta itsatsi img etiketa baten src balio gisa. Kopiatu HTML zatia edo Kopiatu CSS atzealdea ere erabil ditzakezu. Ez da kanpoko irudi-ostalatzailerik behar.

Sortu ditzaket sare sozialetarako edo weberako tamaina estandarrak?

Bai. Aurrez zehaztutako tamainak artean daude Instagram argitalpena, Instagram istorioa, Twitter txartela, Irekiz Grafikoa, YouTube kaxoina, Facebook estalia eta Posta-buru. Deskargatu aurretik azaroak guztiak (ZIP) aukerak hamaikak gordetzen ditu PNG formatuan.

Nola jarri ditzaket nire testua edo lerro diagonalak leku-betetzailean?

Idatzi etiketa bat testu pertsonalizatuaren eremuan, adibidez Irudi nagusia, neurriak erakutsi ordez. Markatu Erakutsi lerro diagonalak (X) diagonal leunak marrazteko. Testu luzea automatikoki txikitzen da zabalerara egokitzeko.

Bai. Tresna guztiak doakoak dira, konturik gabe eta kreditu-txartelik gabe. Lanak zure gailuan egiten dira gure zerbitzarietan egin beharrean, eta horri esker mantentzen da doakoa.

Mugikorrean funtzionatzen al du?

Bai. iOS eta Android-eko mugikorretako oraingo nabigatzaileetan funtzionatzen du, ezer instalatu gabe.

🖼️

Leku-Betetzeko Irudi Sortzailea doan

Sortu koloretako leku-betetzeko irudiak dimentsio, testu eta kolore pertsonalizatuekin. Neurri estandarrak sare sozialetarako, maketeetarako eta diseinu-konposaketetarako.

Nabigatzailean exekutatzen daEz erregistrorik, ez leihatila gainerakorikEz da saioa hasi beharBetiko doan

Zabalera (px)

Altuera (px)

Aurrez zehaztutako tamainak

Kolore-gaiak

Atzeko planoa

Testua / lerroak

Testu pertsonalizatua (utzi hutsik dimentsioentzat)

Erakutsi dimentsioak testu pertsonalizaturik ez badagoErakutsi lerro diagonalak (X)

💡 HTML prototipoentzat: erabili «Kopiatu data URL gisa» aukera eta itsatsi <img src="..."> barne ordezko irudientzat. Figma / Sketch diseinuetarako, deskargatu PNG eta arrastatu.

Ohiko erabilerak

Placeholder Irudiak Diseinua MockupsSortu tamainak kolorea kutxak Figma, Sketch, edo web diseinua mockups erabilitaketa benetakoak irudiak prest baino.
Placeholder Inlinea HTML PrototiparentzatErabili 'Kopiatu data URLan' placeholder irudiak zuzenean HTML sartzen azkarra prototiparentzat.
Placeholder CMS Eduki SlotetanCMS txantiloi agerreraean, erabili placeholder irudiak ordez eduki benetako sentikorra aurrebegietan.
Social Media Irudia TxantiloakSortu placeholder tamaina zuzenak Instagram, Facebook, Twitter, LinkedIn post txantiloen.
CSS Diseinua Probariak IrudiakSortu irudiak muturrak aspectu ratioetan CSS diseinua responsive testa-gehiaren.

Nola Funtzionatzen Du

Dena zure nabigatzailean gertatzen da HTML Canvas API eta eskuz idatzitako SVG markup erabiliz — zerbitzaririk ez, igoerarik ez, hirugarrenen zerbitzurik ez. Dimentsioak, koloreak, eta etiketa-testua ezartzen dituzu, eta tresnak irudia zuzenean margotzen du oihal-elementu batean denbora errealean, gero PNG, JPEG, edo SVG-ra serializatzen du eskariz.

1
Konfiguratu dimentsioak eta koloreak
Idatzi zabalera eta altuera bat (1–4000 px bakoitza), edo aukeratu hamaika aurrezarpenetatik bat sare sozial eta diseinu-tamaina ohikoak hartzen dituena. Aukeratu atzeko plano eta testu-kolore bat txertatutako gaietatik edo sartu edozein hamaseitarreko balio zuzenean; jatorrizko kolore-hautatzaile batek eta baliozkotutako testu-eremu batek sinkronizatuta jarraitzen dute.
2
Canvas APIak aurrebista berehala errendatzen du
React efektu batek drawPlaceholder() deitzen du aldaketa bakoitzean. Funtzio honek CanvasRenderingContext2D erabiltzen du laukizuzena atzeko plano-kolorez betetzeko, aukeran gurutze-lerro diagonal ahulak marraztuz %15 opakutasunean, gero zure etiketa-testua neurtu eta erdiratzen du — letra-tipoa automatikoki txikituz oihal-zabaleraren %90aren barruan sar dadin.
3
Esportatu PNG, JPEG, edo SVG gisa
PNG eta JPEG deskargek canvas.toDataURL() deitzen dute, base64 emaitza Blob bihurtzen dute memorian, eta deskarga abiarazten dute — dena erabiltzaile-keinuaren barruan sinkronoki iOS Safariren deskarga-arauak betetzeko. SVG esportazioak SVG kate autonomo bat eraikitzen du parekatutako lauki batekin, aukerako lerro diagonalekin, eta testu-elementu batekin, gero .svg fitxategi gisa gordetzen du.
4
Lote-esportazioa eta kopiatzeko lasterbideak
'Deskargatu aurrezarpen guztiak' botoiak dinamikoki JSZip inportatzen du, hamaika aurrezarpen-tamainak berriro errendatzen ditu pantailatik kanpoko oihal batean marrazketa-funtzio bera erabiliz, eta PNG guztiak ZIP bakar batean paketatzen ditu. Kopiatu botoiek PNG datu-URL bat, HTML img etiketa barneratu bat, edo CSS background-image deklarazio bat igortzen dute kodean berehala itsasteko.