Antes: ¿Cómo crear una plantilla de foto?
En el editor de plantillas (Template Editor) existen tres métodos distintos para configurar el fondo de una plantilla y no deben mezclarse. (1) Color de Antecedentes del lienzo: es la base que se sitúa en la parte inferior del lienzo, no se puede eliminar ni mover; solo puede ser un color sólido o un degradado, no admite imagen y es única. (2) Capa Color (Color): es un bloque real relleno de color sólido o degradado que se puede mover, redimensionar y eliminar. (3) Capa Image (Imagen): es una capa real que muestra un archivo de imagen; se convierte en fondo de imagen poniendo 'Ajustar' en 'Portada', agrandándola hasta cubrir el lienzo y bajándola del todo con 'Bajar'. El método 1 es la base; los métodos 2 y 3 son capas. El selector de color (sólido/degradado) es el mismo tanto para el método 1 como para el método 2.
- Debe haber una plantilla creada o una plantilla existente abierta en edición (la pantalla del editor de plantillas / Template Editor canvas debe estar visible)
- En el lado izquierdo debe verse el panel de capas (con el elemento Lienzo en la parte superior), en el lado derecho el panel de propiedades y arriba el botón Añadir capa
- Para la capa de imagen, debe estar preparado el archivo de imagen (jpg/png) que se usará en el dispositivo
Paso a paso
Paso 1 · Conoce los paneles del editor
Editor de plantillas (lienzo del editor)
Abre el editor de plantillas. Revisa la estructura de la pantalla: a la izquierda está el panel de capas (con el elemento Lienzo en la parte superior), a la derecha el panel de propiedades y, en la franja superior, el botón morado Añadir capa junto con los botones de deshacer/rehacer. Todas las operaciones de fondo se realizan desde estos dos paneles.
🔎 Elementos en pantalla: Izquierda: panel Capas + elemento Lienzo; Derecha: panel Propiedades; Arriba: botón Añadir capa; barra de herramientas flotante inferior (herramientas/zoom).
Paso 2 · Método 1 — Abre las propiedades del lienzo (base no eliminable)
Editor de plantillas — Panel de propiedades (Lienzo seleccionado)
Haz clic en el elemento Lienzo situado en la parte superior del panel de capas de la izquierda (o haz clic en una zona vacía del lienzo para deseleccionar todas las capas). El panel de propiedades de la derecha vuelve al encabezado Lienzo; allí se muestran los ajustes de Tamaño, Antecedentes e Impresión.
🔎 Elementos en pantalla: elemento Lienzo en el panel de capas; encabezado Lienzo en el panel derecho, grupo Antecedentes.
Paso 3 · Método 1 — Abre el selector de color del fondo
Editor de plantillas — Panel de propiedades (Lienzo seleccionado)
En el grupo Antecedentes del panel derecho, haz clic en la casilla de color (pequeña muestra cuadrada/swatch) que está junto a la etiqueta Color. Se abre un selector de color. Esta base cubre todo el lienzo, por detrás de todas las capas; no es una capa aparte, no se puede eliminar ni mover.
🔎 Elementos en pantalla: grupo Antecedentes, etiqueta Color, casilla de color en la que se puede hacer clic (color-result-swatch); ColorSettingPicker que se abre.
Paso 4 · Método 1 — Elige un color sólido para la base
Editor de plantillas — Selector de color (Antecedentes)
En el selector de color que se abre, asegúrate de que esté seleccionada la pestaña Sólido de la parte superior. Elige un color en la rueda de color o introduce #RRGGBB en la casilla hex. El color que elijas se convierte de inmediato en la base del lienzo. Si quieres un degradado, pasa al siguiente paso.
🔎 Elementos en pantalla: pestañas Sólido / Degradado en el selector de color; en modo Sólido, rueda de color + casilla de introducción hex.
Paso 5 · Ajuste de degradado (común al fondo y a la capa de color)
Editor de plantillas — Selector de color (modo Degradado)
En el selector de color, cambia a la pestaña Degradado. Elige el tipo Lineal o Radial. Ajusta las dos paradas de color marcadas con '1' y '2' (con la rueda de color o hex). Si el tipo es Lineal, elige la dirección en el menú Ángulo (8 opciones: ↑ 0°, ↗ 45°, → 90°, ↘ 135°, ↓ 180°, ↙ 225°, ← 270°, ↖ 315°). La barra de vista previa de la parte inferior muestra el resultado en vivo. Este selector es exactamente el mismo tanto para el 'Fondo' del método 1 como para la capa Color del método 2.
🔎 Elementos en pantalla: pestaña Degradado; subpestañas Lineal / Radial; paradas de color '1' y '2'; menú 'Ángulo' solo en Lineal; barra de vista previa del degradado en la parte inferior.
Paso 6 · Método 2 — Añade una capa Color (Color)
Editor de plantillas — Menú Añadir capa
Haz clic en el botón Añadir capa de la franja superior; en el menú que se abre, elige el elemento Color (Color). Se añade al lienzo un bloque de color de 200×200, relleno de gris sólido (#CCCCCC). Es una capa real que se puede mover, redimensionar, girar y eliminar; no es la base.
🔎 Elementos en pantalla: botón Añadir capa arriba; elemento Color en el menú de tipos de capa que se abre (el nombre aparece en inglés en el menú).
Paso 7 · Método 2 — Ajusta el relleno de la capa de color
Editor de plantillas — Panel de propiedades (capa de color seleccionada)
Con la capa de color seleccionada, busca el grupo Color en el panel de propiedades de la derecha; haz clic en la casilla de color junto a la etiqueta Relleno. Se abre el mismo selector de color que en el método 1: puedes elegir color sólido o degradado (como en el paso 5).
🔎 Elementos en pantalla: grupo Color en el panel derecho, etiqueta Relleno y casilla de color; ColorSettingPicker que se abre (sólido/degradado).
Paso 8 · Método 2 — Coloca el bloque de color (usarlo como base, opcional)
Editor de plantillas — Lienzo + Panel de propiedades
Mueve la capa de color arrastrándola, redimensiónala con los tiradores de las esquinas o introduce los valores X/Y/W/H del grupo Posición y tamaño y la Opacidad. Si quieres usar el bloque de color como un fondo completo, agrándalo hasta cubrir el lienzo y bájalo del todo con Bajar (la diferencia con el método 1: este bloque se puede mover y eliminar).
🔎 Elementos en pantalla: marco de selección + tiradores de las esquinas; grupo Posición y tamaño (X/Y/W/H), Opacidad; botón Bajar en el panel de capas.
Paso 9 · Método 3 — Añade una capa Image (Imagen)
Editor de plantillas — Menú Añadir capa
Haz clic en el botón Añadir capa de arriba; en el menú, elige el elemento Image (Imagen). Se añade una capa de imagen vacía (Ajustar predeterminado = Estirar/fill). También es una capa real que se puede mover, redimensionar y eliminar.
🔎 Elementos en pantalla: elemento Image en el menú Añadir capa (el nombre aparece en inglés en el menú).
Paso 10 · Método 3 — Elige el archivo de imagen
Editor de plantillas — Panel de propiedades (capa de imagen seleccionada)
Con la capa de imagen seleccionada, usa el selector de archivos del grupo Imagen en el panel de propiedades de la derecha; en el selector de archivos nativo que se abre, elige la imagen que quieras usar. La imagen aparece dentro de la capa.
🔎 Elementos en pantalla: grupo Imagen en el panel derecho; componente FilePicker (selección de archivos).
Paso 11 · Método 3 — Haz que la imagen cubra el lienzo (Ajustar → Portada)
Editor de plantillas — Panel de propiedades (capa de imagen seleccionada)
En el grupo Imagen, pon el menú Ajustar en Portada (Cover): así la imagen llena la caja de la capa sin dejar espacios. Luego, con los tiradores de las esquinas o con los valores W/H del grupo Posición y tamaño, agranda la capa de imagen hasta que cubra todo el lienzo. Ajusta la posición de la imagen dentro de la caja desde el menú Alineación. (Si quieres, puedes aplicar redondeo de esquinas con Radio y croma/green-screen con Eliminar fondo.)
🔎 Elementos en pantalla: grupo Imagen: menú Ajustar (Contener / Portada / Estirar), menú Alineación, Radio, Eliminar fondo + Color de croma; tiradores de las esquinas del marco de selección.
Paso 12 · Método 3 — Envía la imagen al fondo (Bajar)
Editor de plantillas — Panel de capas (Acciones)
Con la capa de imagen seleccionada, en la sección 'Acciones' del panel de capas de la izquierda, pulsa el botón Bajar (o ⌘[) repetidamente hasta que la imagen quede debajo de todas las capas. Así la imagen se convierte en el fondo; las ranuras de foto, el texto y las demás capas aparecen por delante de ella. (No hay un 'enviar al fondo' en un solo paso; cada pulsación la baja una posición.)
🔎 Elementos en pantalla: grupo 'Acciones' que aparece con una sola capa seleccionada en el panel de capas: botones de icono Duplicar, Subir, Bajar, Eliminar (atajo ⌘[ / ⌘]).
La esencia de los tres métodos: Método 1 (Antecedentes del lienzo) = base única no eliminable ni movible, solo color/degradado. Método 2 (capa Color) = bloque de color-degradado que se puede mover y eliminar. Método 3 (capa Image) = imagen; para convertirla en fondo: Portada + agrandar + Bajar.
El mismo selector de color se usa tanto en la base Antecedentes como en la capa Color; el ajuste sólido/degradado es idéntico en ambos.
En el degradado solo se editan 2 paradas de color ('1' y '2'). El Ángulo (dirección) solo existe en el degradado lineal; en el radial no hay ángulo.
Los cambios de color/hex se aplican con un retardo de ~0,5 s (debounce): si no cambia de inmediato, espera un momento.
Para convertir una imagen en fondo completo, pon obligatoriamente Ajustar en Portada y agranda la capa al tamaño del lienzo; si la dejas solo en Contener, la imagen queda pequeña en el centro.
Los nombres de los elementos del menú Añadir capa aparecen en inglés (Color, Image, Text ...); en cambio, los títulos del panel de propiedades de la derecha están en español (Color, Imagen).
Si agrandas el bloque de color (método 2) hasta cubrir el lienzo y lo bajas del todo, se comporta como una base, pero, a diferencia del método 1, se puede mover y eliminar.
Buscar una opción de imagen en el grupo Antecedentes del lienzo: la base solo admite color o degradado; para una imagen hay que añadir obligatoriamente una capa Image (Imagen) (método 3).
Añadir la capa de imagen y olvidar enviarla al fondo con Bajar: la imagen tapa las ranuras de foto y el texto.
Dejar el menú Ajustar en Contener (Contain) y quejarse de que la imagen no llena el lienzo: para el fondo hace falta Portada (Cover) y la capa debe agrandarse al tamaño del lienzo.
Creer que la capa Color (Color) es una base permanente: es un bloque que se puede mover y eliminar. Para una base permanente y no eliminable, usa el método 1 ('Fondo' del lienzo).
Buscar un tercer color en el degradado: en el selector solo se pueden editar dos paradas ('1' y '2').
Buscar el Ángulo en el degradado radial: el ángulo solo aparece en el degradado lineal.
Temas relacionados
sablon-olusturma sablon-duzenleme
