Como creo unha imaxe de marcador dun tamaño exacto?

Escribe o Ancho (px) e o Alto (px), escolle cores ou un Tema de cor e preme Descargar PNG, Descargar JPG ou Descargar SVG. Por defecto, a imaxe mostra as súas dimensións, como 800 x 600, como etiqueta.

Cal é a imaxe de marcador máis grande que podo xerar?

A anchura e a altura deben estar entre 1 e 4000 px cada unha. Os valores fóra dese rango mostran o erro A anchura e a altura deben estar entre 1 e 4000 px.

Como poño unha imaxe de marcador directamente en HTML sen un ficheiro?

Preme Copiar como data URL e pégao nunha etiqueta img como o valor src. Tamén podes usar Copiar fragmento HTML ou Copiar fondo CSS. Non fai falla un servidor externo de imaxes.

Podo xerar tamaños estándar para redes sociais ou web?

Si. Os Tamaños predefinidos inclúen Publicación de Instagram, Historia de Instagram, Tarxeta de Twitter, Open Graph, Miniatura de YouTube, Portada de Facebook e Encabezado de correo electrónico. Descargar todos os presets (ZIP) garda os once como ficheiros PNG.

Como poño o meu propio texto ou liñas diagonais no marcador?

Escribe unha etiqueta en Texto personalizado, por exemplo Imaxe de cabeceira, en lugar de mostrar as dimensións. Marca Mostrar liñas diagonais (X) para debuxar diagonais tenues. O texto longo redúcese automaticamente para axustarse ao ancho.

Si. Todas as ferramentas son de uso gratuíto, sen conta nin tarxeta de crédito. O traballo execútase no teu dispositivo en lugar de nos nosos servidores, o que permite que sexa gratuíto.

Si. Funciona nos navegadores móbiles actuais en iOS e Android, sen instalar nada.

🖼️

Xerador de imaxes de marcador de balde

Xera imaxes de marcador de cor con dimensións, texto e cores personalizados. Tamaños estándar para redes sociais, maquetas e composicións de deseño.

Execútase no teu navegadorSen rexistro, sen ventás emerxentesNon é necesario iniciar sesiónDe balde para sempre

Ancho (px)

Alto (px)

Tamaños predefinidos

Temas de cor

Fondo

Texto / liñas

Texto personalizado (deixar en branco para as dimensións)

Mostrar dimensións sen texto personalizadoMostrar liñas diagonais (X)

💡 Para maquetas HTML: usa a opción «Copiar como data URL» e pégaa en <img src="..."> para marcadores de posición en liña. Para deseños Figma / Sketch, descarga o PNG e arrástralo.

Usos habituais

Imaxes de Espazo Reservado para Mockups de DeseñoXera caixas de cores dimensionadas para usar en Figma, Sketch ou mockups de deseño web antes de que as imaxes reais estean listas.
Espazo Reservado Inline para HTML PrototypesUsa 'Copiar como URL de datos' para integrar imaxes de espazo reservado directamente en HTML para prototypes rápidos.
Espazo Reservado para Slots de Contido CMSAo demostrar unha plantilla CMS, usa imaxes de espazo reservado en lugar de contido real para previsualizacións sensibles.
Modelos de Imaxe de Redes SociaisXera espazo reservado de tamaño correcto para Instagram, Facebook, Twitter, modelos de posts de LinkedIn.
Imaxes de Proba de Deseño CSSXera imaxes con relacións de aspecto extremas para probar deseños CSS responsivos.

Como funciona

Todo ocorre no teu navegador usando a API HTML Canvas e marcado SVG escrito a man — sen servidor, sen subida, sen servizo de terceiros. Estableces dimensións, cores e texto de etiqueta, e a ferramenta pinta a imaxe directamente nun elemento de lenzo en tempo real, e despois serialízaa a PNG, JPEG ou SVG cando se solicita.

1
Configura dimensións e cores
Escribe un ancho e alto (1–4000 px cada un), ou escolle un dos once predefinidos que cobren tamaños comúns de redes sociais e deseño. Escolle unha cor de fondo e de texto entre os temas integrados ou introduce calquera valor hexadecimal directamente; un selector de cor nativo e un campo de texto validado permanecen sincronizados.
2
A API Canvas renderiza a vista previa ao instante
Un efecto de React chama a drawPlaceholder() en cada cambio. Esta función usa CanvasRenderingContext2D para encher o rectángulo coa cor de fondo, opcionalmente debuxar liñas diagonais tenues de cruz ao 15% de opacidade, e despois medir e centrar o teu texto de etiqueta — reducindo automaticamente a fonte ata que caiba dentro do 90% do ancho do lenzo.
3
Exporta como PNG, JPEG ou SVG
As descargas PNG e JPEG chaman a canvas.toDataURL(), converten o resultado en base64 a un Blob en memoria, e activan a descarga — todo de forma síncrona dentro do xesto do usuario para que se cumpran as regras de descarga de iOS Safari. A exportación SVG constrúe unha cadea SVG autocontida cun rect correspondente, liñas diagonais opcionais e un elemento de texto, e despois gárdao como ficheiro .svg.
4
Exportación por lotes e atallos de copia
O botón 'Descargar todos os predefinidos' importa dinamicamente JSZip, rerenderiza cada un dos once tamaños predefinidos nun lenzo fóra de pantalla usando a mesma función de debuxo, e empaqueta todos os PNG nun único ZIP. Os botóns de copiar emiten un URL de datos PNG, unha etiqueta img SVG en liña, ou unha declaración CSS background-image para pegar inmediatamente no código.