Un editor vectorial hecho solo para iconos: materiales, efectos, herramientas vectoriales, ayuda con IA y exportación con un clic. Todas las funciones, en un solo lugar.
El lienzo del icono de 1024x1024, máscaras, fondos y ajustes a nivel de documento.
Lienzo de icono de 1024x1024
Un editor vectorial que solo hace iconos.
Cada documento es un lienzo de icono de 1024x1024 con coordenadas centradas en el origen, así que lo que diseñas es exactamente lo que esperan macOS e iOS. Sin mesas de trabajo que configurar ni cálculos de exportación que adivinar.
Pasos
Crea un documento nuevo desde el espacio de trabajo (icono de app de macOS, icono de app de iOS o icono de carpeta).
Diseña con libertad: el lienzo siempre tiene forma de icono y mide 1024x1024.
Exporta; todos los tamaños y variantes de cada plataforma se generan a partir de él.
Consejos
Las posiciones se miden desde el centro: 0/0 es el centro del icono.
Preguntas
¿Qué tamaño tiene el lienzo del editor?
Un lienzo de icono fijo de 1024x1024 con coordenadas centradas en el origen. Todas las exportaciones se escalan a partir de él, desde 16px hasta 4096px.
¿Tengo que configurar mesas de trabajo?
No, el documento es el icono. Usa las Mesas de trabajo si quieres tener varios iconos uno al lado del otro en la misma sesión.
Cambia un documento entre icono de app e icono de carpeta de macOS. Las capas, los materiales y las exportaciones siguen al modo, así que un mismo diseño sirve para ambos.
Pasos
Abre Ajustes del documento en el inspector.
Elige 'Icono' (icono de app) o 'Carpeta' (carpeta de macOS).
El modo carpeta desbloquea el tinte de carpeta, el desenfoque frontal y el grano de carpeta.
Preguntas
¿Puedo crear un icono de carpeta y un icono de app con el mismo diseño?
Sí, cambia el modo del documento entre Icono y Carpeta. La máscara, el tinte y la forma de exportación se adaptan automáticamente.
Máscara del icono (squircle, iOS, watchOS, ninguna)
La silueta exacta de cada plataforma de Apple.
Recorta el lienzo con el squircle de macOS, el cuadrado redondeado de iOS, el círculo de watchOS o sin máscara. Lo que ves dentro de la máscara es lo que se publica.
Pasos
Abre Ajustes del documento → Máscara del icono.
Elige squircle de macOS, iOS, watchOS o Ninguna.
Las capas de 'Icono interior' se recortan a esta silueta; las de 'Otras capas' pueden llegar al borde.
Consejos
Usa la retícula de guías para diseñar sin salirte de la máscara.
La misma máscara está disponible de forma programática con la Icon API.
Preguntas
¿Qué hace la máscara del icono de macOS?
Recorta tu diseño con la silueta oficial del icono de cada plataforma (squircle en macOS, cuadrado redondeado en iOS, círculo en watchOS) para que el sistema nunca recorte tu icono de forma extraña.
¿Por qué se corta mi icono en las esquinas?
Tu diseño está fuera de la máscara del icono. Mueve la capa a 'Icono interior' en el panel de capas o pon la máscara en 'Ninguna' para exportar un cuadrado sin recortar.
Pon como fondo del icono un color sólido, un degradado lineal/radial o un 'degradado de malla' de Manchas con hasta 12 manchas de color aditivas sobre un color base. Siempre recortado a la máscara del icono.
CCuentagotas: toma un color para el relleno, el trazo o el fondo
Pasos
Ajustes del documento → Fondo.
Elige Sólido, Degradado (lineal/radial) o Manchas.
Con Manchas: añade manchas, elige colores, arrástralas por el lienzo para moverlas y arrastra el anillo discontinuo para cambiar su tamaño.
Empieza más rápido con un preajuste (vibrant, sunrise, ocean, aurora, candy, monochrome).
Consejos
Prueba 'Sugerir desde el icono' para sacar los colores de tu diseño.
Las manchas son aditivas, así que donde se solapan el color se aclara.
Preguntas
¿Cómo creo un fondo con degradado de malla?
Ajustes del documento → Fondo → Manchas. Superpone hasta 12 manchas de color suaves sobre un color base; arrástralas por el lienzo para cambiar la forma del degradado.
¿Cómo cambio el color de fondo de mi icono?
Ajustes del documento → Fondo → Sólido, o pulsa C para tomar cualquier color con el cuentagotas.
Preajustes de degradado y color sólido seleccionados: Ocean, Sunset, Grape, Mint, Midnight, Fire, Aurora, Rose Gold, Sky, Lime, Cotton Candy, más los sólidos Snow/Graphite/Ink/Blue/Rose/Emerald.
Pasos
Ajustes del documento → Fondo → Preajustes.
Haz clic en una muestra para aplicarla.
Después puedes seguir editando las paradas o las manchas. Los preajustes son totalmente editables.
Preguntas
¿Se pueden editar los preajustes de fondo?
Sí. Un preajuste solo configura el degradado o el sólido. Cada parada, ángulo y mancha sigue siendo editable.
En el modo de fondo Manchas, cada mancha es un manejador en el lienzo: arrástrala para moverla y arrastra su anillo discontinuo para cambiar su tamaño. Sin adivinar números.
Pasos
Pon Fondo → Manchas y activa el modo de edición.
Arrastra una mancha para moverla.
Arrastra su anillo discontinuo para cambiar su tamaño.
Preguntas
¿Puedo mover directamente las manchas de un degradado de malla?
Sí. En el modo de edición de Manchas, arrastra cada mancha para moverla y su anillo discontinuo para cambiar su tamaño.
Una pasada global de especular y refracción con brillo de bisel, brillo inferior (enlazable), anchura del brillo y 'lustre' de refracción. Hace que todo el icono parezca Liquid Glass, como en macOS.
Pasos
Ajustes del documento → Reflejo.
Actívalo y define el ángulo de la luz (0-360).
Ajusta Brillo, Brillo inferior (enlazable), Anchura del brillo y Refracción.
Consejos
Enlaza Brillo y Brillo inferior para moverlos a la vez.
Combínalo con el material Vidrio para dar más profundidad.
Preguntas
¿Cómo consigo el brillo Liquid Glass de Apple en mi icono?
Activa Documento → Reflejo. Añade un brillo de bisel global y refracción en todo el icono; enlaza los brillos superior e inferior para un aspecto simétrico.
Tinte de carpeta, desenfoque frontal y grano de carpeta
Materiales de carpeta de macOS de verdad.
En el modo carpeta: tiñe el cuerpo de la carpeta con un sólido o un degradado, desenfoca la solapa frontal y añade grano de carpeta configurable (intensidad, tamaño, semilla).
Pasos
Pon el modo del documento en Carpeta.
Ajustes del documento → Tinte de carpeta para un tinte sólido o degradado.
Ajusta el Desenfoque frontal y el Grano (intensidad / tamaño / semilla).
Consejos
Usa la misma semilla de grano en todo un conjunto de carpetas para que sean coherentes.
Preguntas
¿Cómo cambio el color de un icono de carpeta de macOS?
Cambia el documento al modo carpeta y ve a Ajustes del documento → Tinte de carpeta. El desenfoque frontal y el grano hacen creíble el material.
Una pasada global de grano de película sobre todo el icono, con control de intensidad, escala y semilla, que añade una textura sutil y evita el banding en los degradados planos.
Pasos
Ajustes del documento → Grano.
Actívalo y define la intensidad.
Ajusta la escala y la semilla a tu gusto.
Consejos
Mantén la intensidad baja (0.05-0.15) para una textura tipo impresión.
Preguntas
¿Cómo evito el banding en mi degradado?
Añade un toque de grano del documento (Ajustes del documento → Grano). Aplica tramado (dithering) a la superficie y le da una textura de película.
Una opción de interacción del lienzo: un clic selecciona el grupo padre y un doble clic selecciona la capa interior (el ritmo de anidación al estilo de Figma).
Pasos
Activa 'El clic selecciona el grupo' en Ajustes del documento.
Haz clic para seleccionar el grupo padre.
Haz doble clic para entrar en la capa interior.
Preguntas
¿Cómo selecciono un grupo entero en lugar de una sola capa?
Activa 'El clic selecciona el grupo' en Ajustes del documento. Un clic toma el grupo y un doble clic entra en la capa.
Tipos de capa, orden de apilado, carpetas, grupos y compuestos booleanos.
Secciones Icono interior y Otras capas
Dentro, la forma segura; fuera, a sangre.
Las capas viven en dos secciones: 'Icono interior' se recorta a la forma segura del icono y 'Otras capas' puede extenderse hasta el borde del lienzo. El panel de capas refleja ese límite para que siempre sepas qué se enmascara.
Pasos
Usa las secciones 'Icono interior' y 'Otras capas' del panel de capas.
Arrastra una capa de una sección a otra para cambiar su modo de límite.
Las capas de Icono interior se recortan a la máscara; las de Otras capas llegan hasta el borde.
Consejos
Pon los resplandores y los fondos a sangre en 'Otras capas'.
Preguntas
¿Por qué la forma del icono recorta mi capa?
Está en la sección 'Icono interior', que se recorta a la máscara del icono. Arrástrala a 'Otras capas' para que llegue hasta el borde del lienzo.
Capas de imagen, relleno sólido, degradado, forma, trazado, icono (glifos de Heroicons y Lucide), SVG, texto, plantilla Liquid Glass y compuestos booleanos. Todo sigue vivo y editable, sin misteriosos mapas de bits acoplados.
Pasos
Añade capas desde la barra de herramientas (forma, texto, icono, imagen, trazado…).
Edita cada tipo en su sección propia del inspector.
Convierte entre tipos cuando lo necesites (p. ej., Forma → Trazado para editar los puntos).
Consejos
Las capas de icono tiran de una biblioteca de más de 200k glifos vectoriales con búsqueda.
Preguntas
¿Qué tipos de capa puedo añadir?
Diez: imagen, relleno sólido, degradado, forma, trazado, icono (Heroicons/Lucide), SVG, texto, plantilla Liquid Glass y compuestos booleanos, cada uno con sus propios controles en el inspector.
¿Puedo editar un icono después de colocarlo?
Sí, nada se rasteriza. Las formas, los trazados, el texto y los materiales siguen siendo totalmente editables hasta que exportas.
Un árbol de capas completo con miniaturas en directo, interruptores de visibilidad y bloqueo, reordenación por arrastre (incluido meter y sacar de carpetas) y expansión al pasar por encima de carpetas contraídas mientras arrastras.
Pasos
Abre la pestaña Capas del panel.
Arrastra las filas para reordenarlas o anidarlas en carpetas (pasa por encima de una carpeta contraída para expandirla).
Pulsa el ojo para ocultar una capa y el candado para bloquearla.
Consejos
Las carpetas de compuestos booleanos no aceptan que sueltes capas en ellas, así que entra en ellas.
Preguntas
¿Cómo pongo una capa detrás de otra?
Arrástrala hacia abajo en el panel de capas. La fila de más arriba se dibuja delante. Suéltala sobre una fila de carpeta para anidarla.
Agrupa capas en carpetas con nombre y reordénalas arrastrándolas dentro y fuera. Al eliminar una carpeta se conservan sus hijas (que pasan al nivel superior), y las carpetas se pueden renombrar o duplicar.
Pasos
Crea una carpeta desde el panel de capas o el menú contextual.
Arrastra capas dentro o fuera de ella.
Renómbrala en línea; duplícala para clonar todo su contenido.
Preguntas
¿Qué pasa si elimino una carpeta?
Sus capas se conservan y suben un nivel. Solo se elimina la carpeta.
Agrupa capas con una identidad morph compartida ('Agrupar como morph') para que se transformen juntas como una única unidad transformable, y disuélvelo seleccionando las hijas cuando necesites recuperar las piezas.
Pasos
Selecciona capas y elige 'Agrupar como morph' en la barra de herramientas.
Transforma el grupo morph como una unidad.
Desagrupa el grupo morph o disuélvelo para seleccionar las capas hijas.
Preguntas
¿Qué es un grupo morph?
Un grupo con una identidad morph compartida: las capas se mueven y escalan como una sola unidad. Desagrupar rompe la identidad; disolver selecciona las capas hijas.
Combina formas con Unir / Restar / Intersecar / Excluir. El resultado es un compuesto booleano vivo con operaciones por contorno. Cambia una forma de origen y el compuesto se actualiza.
EscapeSalir un nivel del grupo booleano
Pasos
Selecciona dos o más capas de forma, trazado o SVG.
Elige Unir, Restar, Intersecar o Excluir en el menú booleano de la barra de herramientas.
Entra en el grupo booleano para editar los contornos; Escape te saca un nivel.
Consejos
Puedes cambiar la operación de cada contorno más adelante.
Preguntas
¿Cómo recorto una forma con otra?
Selecciona ambas y elige Restar (o Excluir) en el menú booleano. Sigue siendo editable: modifica las formas de origen y el resultado se actualiza.
¿Cómo edito las formas dentro de un resultado booleano?
Entra en el grupo booleano (con doble clic o desde el panel de capas). Pulsa Escape para salir un nivel.
Copiar / Pegar, Duplicado inteligente y Transferencia de estilo
Un duplicado que recuerda hacia dónde ibas.
Copia, corta y pega capas (entre pestañas del navegador y con el portapapeles del sistema), usa el Duplicado inteligente que repite tu último desplazamiento, Copiar estilo / Pegar estilo para transferir apariencias y la copia de propiedades por sección (p. ej. 'Copiar propiedades de Relleno').
Pasos
Copia, corta y pega capas desde el menú contextual, también entre pestañas del navegador.
Mueve o arrastra una capa y luego usa Duplicado inteligente: cada duplicado repite el mismo desplazamiento.
Clic derecho → Copiar estilo y luego Pegar estilo en otra capa, o copia las propiedades de una sola sección del inspector.
Consejos
El Duplicado inteligente es el clásico patrón de transformar y duplicar de las herramientas de diseño profesionales.
Preguntas
¿Cómo copio el aspecto de una capa a otra?
Haz clic derecho en la capa con estilo → Copiar estilo y luego Pegar estilo en la capa de destino. Para copiar solo el relleno, el trazo o los efectos, usa 'Copiar propiedades de …' en esa sección del inspector.
¿Cómo creo duplicados con espaciado uniforme?
Mueve o arrastra una capa y luego usa Duplicado inteligente. Cada duplicado repite el mismo desplazamiento automáticamente.
Desplazamiento X/Y numérico (±2048), Anchura/Altura, Escala % y Rotación (±180°) con botones de restablecer, además de bloqueo de proporciones para que las imágenes se redimensionen de forma uniforme.
Selecciona una capa y abre la sección Selección en el inspector.
Introduce valores exactos o arrastra la etiqueta de un campo numérico para ajustarlo.
Activa 'Bloquear proporciones' para escalar de forma uniforme.
Consejos
Haz clic en el botón de restablecer de un campo para volver a su valor predeterminado.
Preguntas
¿Cómo fijo un tamaño o una posición exactos?
Usa el inspector de Selección: Desplazamiento X/Y, Anchura/Altura, Escala % y Rotación admiten números exactos. Arrastra las etiquetas de los campos para ajustar los valores.
Un radio único o radios por esquina (vincula todas las esquinas, con limitación al estilo CSS), además de un interruptor Squircle para esquinas de curvatura continua como las de Apple, con nitidez ajustable (2-12).
Pasos
Selecciona una forma y abre Esquinas en el inspector.
Usa 'Ajustar cada esquina' para radios por esquina o 'Vincular todas las esquinas' para un solo valor.
Activa Squircle para una curvatura continua y ajusta los lados de esquina (nitidez 2-12).
Consejos
Squircle encaja mejor con el lenguaje de formas de Apple que un simple radio grande.
Preguntas
¿Cómo consigo esquinas squircle al estilo iOS?
Selecciona la forma y activa Squircle en los ajustes de esquina. 'Lados de esquina' (2-12) controla lo cerrada que es la curvatura continua.
¿Puedo redondear solo algunas esquinas?
Sí, activa 'Ajustar cada esquina' y define TL/TR/BR/BL por separado.
Voltea una capa en horizontal o en vertical, o refleja una selección respecto al lienzo, ideal para construir iconos simétricos.
Pasos
Selecciona una o varias capas.
Usa Voltear X / Voltear Y en el inspector, o Reflejar en horizontal / vertical en la barra de herramientas.
Preguntas
¿Cómo hago el espejo de una forma?
Usa Voltear X / Voltear Y en el inspector de Selección. Para reflejar una selección respecto a todo el lienzo, usa Reflejar en la barra de herramientas.
Manejadores en esquinas y bordes para redimensionar a mano, manejadores de rotación fuera de las esquinas y movimiento con el teclado para el último píxel.
Arrows / Shift+ArrowsMover 1px / 10px
Pasos
Selecciona una capa para ver sus manejadores.
Arrastra esquinas o bordes para redimensionar; arrastra justo fuera de una esquina para girar.
Las flechas mueven 1px (Shift = 10px).
Preguntas
¿Cómo giro una capa?
Arrastra justo fuera de un manejador de esquina del cuadro de selección, o escribe un ángulo exacto en el inspector de Selección.
Alinea a la izquierda, centro, derecha, arriba, en medio o abajo dentro de una selección o respecto al lienzo, y distribuye capas de forma uniforme en vertical u horizontal.
Pasos
Selecciona dos o más capas (o una sola para alinearla al lienzo).
Usa los botones de alineación de la barra de herramientas.
Usa Distribuir en vertical / horizontal para un espaciado uniforme.
Consejos
El ajuste también te indica los espaciados iguales mientras arrastras.
Preguntas
¿Cómo centro una capa en el icono?
Selecciona la capa y usa Alinear al centro + Alinear en medio. Con una sola capa seleccionada, se alinea al lienzo.
Deforma cualquier capa como si estuviera sobre una superficie.
Deforma libremente las esquinas de una capa con desplazamientos por esquina para maquetas en perspectiva, calcomanías y ángulos dinámicos. Puedes restablecerla cuando quieras.
DHerramienta Distorsionar
Pasos
Selecciona una capa y elige la herramienta Distorsionar (D).
Arrastra las cuatro esquinas para deformar la capa.
Usa 'Restablecer distorsión' para volver a un plano liso.
Preguntas
¿Cómo pongo mi icono sobre una superficie inclinada?
Usa la herramienta Distorsionar (D) y arrastra las esquinas hasta que encajen con la perspectiva de la superficie. 'Restablecer distorsión' lo deshace.
Dibuja iconos como en una herramienta de diseño profesional.
Cinco herramientas dedicadas con atajos de una sola tecla: Seleccionar (V), Pluma para dibujar curvas bézier libres, Línea (L), Editar trazado (A) y Distorsionar (D).
VHerramienta Seleccionar
LHerramienta Línea
AHerramienta Editar trazado
DHerramienta Distorsionar
EnterConfirmar el borrador de pluma / activar la edición de trazado en forma, SVG o texto
EscapeCancelar el borrador o salir de la edición de trazado
Shift (hold)Ajustar mientras dibujas con pluma/línea
Pasos
Elige una herramienta en la barra (o pulsa V / L / A / D).
Pluma: haz clic y arrastra para colocar puntos bézier; Shift ajusta; Enter confirma; Escape cancela.
Línea: arrastra para dibujar; Shift restringe el ángulo.
Editar trazado: edita puntos de ancla y manejadores; Distorsionar: arrastra las cuatro esquinas para deformar.
Consejos
Convierte primero el texto o el SVG en trazado para editarlo punto a punto.
Selecciona puntos con un recuadro para moverlos juntos.
Preguntas
¿Cómo dibujo una forma personalizada?
Usa la herramienta Pluma: haz clic (o clic y arrastra para curvas) para colocar puntos, mantén Shift para ajustar, Enter para confirmar y Escape para cancelar. La herramienta Línea dibuja segmentos rectos.
¿Cómo edito los puntos de una forma?
Selecciona la forma y pulsa Enter (o elige Editar trazado / A) para editar puntos de ancla y manejadores. Enter o Escape para salir.
Control a nivel de punto de ancla, al estilo Figma.
Edita puntos de ancla y manejadores de entrada/salida con modos lineal, simétrico o independiente. Selecciona puntos con un recuadro, haz Option-clic para quitarlos, Shift-clic en un segmento para añadir uno, une extremos (Cmd+J), rompe la continuidad (Shift+Delete) o borra (Delete), expande el radio de esquina en los puntos seleccionados, ajusta puntos de ancla y distribuye puntos.
Cmd + JUnir puntos/extremos seleccionados del trazado
DeleteBorrar puntos manteniendo la continuidad
Shift + DeleteRomper el trazado en la selección
Pasos
Pulsa Enter sobre un trazado (o elige Editar trazado) para entrar en la edición de puntos.
Arrastra puntos de ancla y manejadores; cambia el modo del manejador entre lineal, simétrico e independiente.
Haz Option-clic en un punto para quitarlo; Shift-clic en un segmento para añadir uno.
Cmd+J une los extremos seleccionados; Shift+Delete rompe la continuidad y Delete borra limpiamente.
Selecciona puntos y usa 'Expandir radio de esquina' para redondear esquinas en curvas.
Consejos
Los manejadores simétricos mantienen curvas suaves; los independientes crean picos marcados.
El ajuste de puntos de ancla alinea los puntos con la geometría cercana.
Preguntas
¿Cómo añado o quito puntos de un trazado?
En el modo Editar trazado, haz Shift-clic en un segmento para añadir un punto y Option-clic en un punto para quitarlo.
¿Cómo abro un trazado?
Selecciona el punto o los puntos y pulsa Shift+Delete para romper la continuidad. Delete a secas quita el punto manteniendo el trazado continuo.
¿Cómo redondeo la esquina entre dos curvas?
Selecciona el punto de ancla y usa 'Expandir radio de esquina' en la sección Trazado.
Texto, formas y SVG se convierten en contornos editables.
Convierte formas, capas SVG y texto en trazados bézier editables ('Editar puntos'). El texto se calca en polilíneas para que las letras sean totalmente moldeables.
EnterActivar la edición de trazado (Editar puntos) en forma/trazado/SVG
Pasos
Selecciona una capa de forma, SVG o texto.
Elige 'Convertir en trazado' (o 'Editar puntos') en la sección Trazado.
Confirma el aviso de forma a trazado cuando aparezca y edita los puntos de ancla libremente.
Consejos
Guarda una copia sin convertir si más adelante quieres cambiar el texto.
Preguntas
¿Cómo edito el contorno de mi texto?
Selecciona la capa de texto y usa Convertir en trazado. Las letras pasan a ser contornos editables que puedes remodelar punto a punto.
Convierte trazados superpuestos en hebras entrelazadas. Cambia qué hebra queda encima en cada cruce, o quita el entrelazado para volver a los trazados normales.
Pasos
Selecciona los trazados superpuestos y elige Entrelazado.
Haz clic en un cruce para cambiar qué hebra pasa por encima.
Quita el entrelazado para recuperar los trazados originales.
Consejos
Ideal para monogramas y marcas tipo nudo.
Preguntas
¿Cómo creo dibujos de líneas tejidas o entrelazadas?
Selecciona trazados superpuestos y aplica Entrelazado. Cada cruce se convierte en un interruptor: haz clic para decidir qué hebra queda encima.
Rellena capas con un color sólido o con degradados, incluida una pila de varios degradados (shapeGradients) en la que conviven varios degradados ordenados en una misma capa vectorial, cada uno con su tipo, ángulo, geometría e interpolación. Puedes desactivar el relleno para formas solo con trazo.
CCuentagotas para relleno/trazo/fondo
Pasos
Abre la sección Relleno en el inspector.
Elige Sólido o Degradado; añade varios degradados para apilarlos.
Edita las paradas en la barra del degradado o con los manejadores de degradado en el lienzo.
Consejos
Los manejadores en el lienzo te permiten arrastrar directamente la geometría de los degradados lineales y radiales.
Preguntas
¿Puedo poner más de un degradado en una forma?
Sí. La pila de degradados de la sección Relleno admite varios degradados en una capa, cada uno con su tipo, ángulo y espacio de color.
¿Cómo hago una forma solo con trazo?
Desactiva el Relleno en la sección Relleno y dale estilo al Trazo.
Controles de degradado (lineal/radial, oklab/oklch)
Mezclas vivas sin tonos medios apagados.
Degradados lineales (ángulo, inicio/fin) y radiales (centro, radio) con un editor de paradas completo, manejadores para arrastrar en el lienzo y espacios de color de interpolación (clásico, oklab y oklch) para mezclas vivas sin grises.
Pasos
Selecciona un relleno o trazo con degradado.
Edita las paradas en el editor de paradas; arrastra los manejadores en el lienzo para la geometría.
Pon la interpolación en oklab u oklch para que los tonos intermedios sean más vivos.
Consejos
Los degradados radiales muestran el centro X/Y y el radio como números y como manejadores.
Preguntas
¿Por qué los colores de mi degradado se ven apagados en el centro?
Cambia la interpolación de RGB clásico a oklab u oklch. Mantienen las mezclas vivas en lugar de pasar por el gris.
¿Cómo cambio el ángulo de un degradado?
Usa el campo de ángulo en los controles del degradado, o arrastra los manejadores del degradado lineal en el lienzo.
Contornos con color o degradado, grosor de 0 a 128, posición interior/exterior/centrada, extremos redondeados o cuadrados, desenfoque de fondo opcional en el trazo (anillo esmerilado) y un modo 'Material en el trazo', con vista previa en directo.
Pasos
Abre la sección Trazo y actívala.
Ajusta el grosor, el color (sólido o degradado) y la posición (interior/exterior/centrada).
Elige los extremos (redondeados/cuadrados) y activa el desenfoque de fondo del trazo para un anillo de vidrio esmerilado.
Consejos
El desenfoque de fondo del trazo hace que el anillo se vea esmerilado sobre lo que haya detrás.
Preguntas
¿Cómo añado un contorno dentro de mi forma?
Activa el Trazo y pon la Posición en 'interior'. 'exterior' dibuja por fuera del borde y 'centrada' queda a caballo sobre él.
¿Los trazos pueden ser degradados?
Sí. Cambia el tipo de trazo a degradado y edita sus paradas e interpolación como en cualquier relleno.
Pinta un color sólido o un degradado solo sobre los píxeles opacos de una capa de imagen. Recolorea ilustraciones sin editar el mapa de bits.
Pasos
Selecciona una capa de imagen.
Elige el tipo de Relleno y un color o degradado para la superposición.
Solo se tiñen los píxeles opacos; la transparencia se conserva.
Preguntas
¿Cómo recoloreo un PNG sin Photoshop?
Selecciona la capa de imagen y usa la superposición de relleno. Tiñe los píxeles opacos con un color sólido o un degradado y mantiene la transparencia intacta.
Materiales Plano, Arcilla, Vidrio y Relieve, iluminación y mapas de profundidad.
Materiales (Plano, Arcilla, Vidrio, Relieve)
Los materiales que usa de verdad macOS.
Cualquier capa vectorial puede ser Plano, Arcilla (plastilina mullida), Vidrio (vidrio con refracción al estilo Liquid Glass) o Relieve (tallado en la superficie de detrás). Es el aspecto característico del editor, renderizado en directo con WebGL.
Pasos
Selecciona una capa de forma, trazado, texto o SVG.
Abre la sección Material y elige Plano, Arcilla, Vidrio o Relieve.
Ajusta los controles del material (consulta las funciones de Vidrio, Arcilla y Relieve).
Consejos
Combínalo con Documento → Reflejo para dar brillo a todo el icono.
El Modo básico ofrece los controles macro Vidrio, Volumen y Sombra.
Preguntas
¿Cómo hago un icono con aspecto de vidrio o 3D?
Selecciona tu capa y pon el Material en Vidrio o Arcilla. Vidrio refracta lo que tiene detrás; Arcilla da un aspecto de plastilina mullida; Relieve talla la forma en la superficie de detrás.
¿Qué materiales se pueden combinar?
Un material por capa (Plano, Arcilla, Vidrio y Relieve son excluyentes), pero las capas se apilan, así que puedes poner vidrio sobre capas de arcilla. Usa 'Liquid Glass de grupo' para fusionar varias capas en una sola superficie de vidrio.
Un material de vidrio con refracción que incluye Bisel (10-140), Grosor (0-180), Curvatura (-1..1), Aberración cromática (0-18), Escarcha (0-32), Especular (0-1), Especular opuesto con anchura (los dos reflejos de borde que usa Apple), color y fuerza del tinte, ángulo de luz por capa o vinculado al lienzo, y modo de silueta con mapa de profundidad.
Pasos
Pon el Material de una capa en Vidrio.
Ajusta Bisel, Grosor y Curvatura para dar cuerpo al vidrio.
Añade Escarcha para un efecto lechoso y Aberración cromática para una refracción con franjas de color.
Activa Especular opuesto y su anchura para conseguir el doble brillo.
Usa el color y la fuerza del tinte para un vidrio de color; vincula el ángulo de luz a la luz del lienzo para que las capas sean coherentes.
Consejos
Un mapa de profundidad da a la refracción una silueta 3D de verdad.
'Material en el trazo' aplica el material solo al contorno.
Preguntas
¿Cómo hago un icono Liquid Glass?
Pon Material → Vidrio, sube Grosor y Curvatura, añade un poco de Aberración cromática y Escarcha, y activa Especular opuesto para los dos brillos de borde al estilo Apple. Documento → Reflejo añade el brillo global.
¿Qué hace Aberración cromática en el material Vidrio?
Separa los colores en los bordes del vidrio y crea una franja de refracción tipo prisma.
Un material de arcilla 3D suave con Bisel, Grosor, Curvatura, refracción del cuerpo, refracción del borde, Especular (vinculable), Suavidad, Especular opuesto y anchura, oscurecimiento de bordes y anchura, y ángulo de luz por capa o vinculado al lienzo.
Pasos
Pon el Material de una capa en Arcilla.
Ajusta Bisel, Grosor y Curvatura para el volumen.
Usa Suavidad y el oscurecimiento de bordes para dar forma al sombreado.
Ajusta la refracción del cuerpo y del borde para un aspecto de arcilla translúcida.
Consejos
Vincula el par especular para un único brillo; desvincúlalo para iluminación de dos fuentes.
Preguntas
¿Cómo hago un icono de arcilla o con volumen 3D?
Material → Arcilla. Sube Grosor y baja Suavidad para un volumen de plastilina más definido; el oscurecimiento de bordes añade sombreado de contacto. El control 'Volumen' del Modo básico hace lo mismo con un solo control.
Un material de relieve o bajorrelieve con Profundidad (0-1), Bisel (1-80px) y Suavidad (0-1), para que la forma parezca presionada sobre la capa de debajo.
Pasos
Pon el Material de una capa en Relieve.
Ajusta Profundidad para decidir cuánto se hunde.
Usa la anchura del Bisel y la Suavidad para controlar el sombreado del borde.
Preguntas
¿Cómo hago un icono en bajorrelieve o grabado?
Material → Relieve. La forma aparece tallada en lo que tenga detrás; Profundidad y Bisel controlan el tallado.
Un ángulo de luz de reflejo global que pueden seguir todos los materiales, o ángulos de luz por capa para vidrio y arcilla si quieres iluminación mixta. 'Limitar a la máscara' mantiene los brillos dentro de la silueta del icono.
Pasos
Ajusta el ángulo de luz en Ajustes del documento o en la sección Material.
Activa 'usar la luz del lienzo' en una capa para que siga el ángulo global, o dale uno propio.
Activa 'Limitar a la máscara' para recortar los brillos a la forma del icono.
Consejos
Una luz a 315° (arriba a la izquierda) sigue las convenciones de iluminación de los iconos de macOS.
Preguntas
¿Cómo mantengo los brillos coherentes entre capas?
Activa 'usar la luz del lienzo' en cada capa con material para que todas sigan el ángulo de luz global del documento.
Genera un mapa de profundidad para la silueta de una capa de vidrio y ajusta Profundidad y Suavizado para que la refracción se curve como un cuerpo 3D real y no como una lente plana.
Pasos
Selecciona una capa con material de Vidrio.
Abre Mapa de profundidad y haz clic en Generar.
Ajusta Profundidad y Suavizado para dar forma al campo de grosor.
Preguntas
Mi vidrio se ve plano. ¿Cómo lo arreglo?
Genera un mapa de profundidad para la capa de vidrio (Material → Mapa de profundidad). Da a la refracción una silueta 3D redondeada; Profundidad y Suavizado controlan el efecto.
Un desenfoque de fondo detrás de la silueta de una capa (multiplicador de 0 a 5) para que lo que haya detrás se vea esmerilado. Glassmorphism de verdad, no una imitación pintada.
Pasos
Selecciona una capa de forma.
Ajusta el Desenfoque de fondo en la zona de material y efectos.
Coloca la capa sobre un fondo colorido para ver el esmerilado.
Preguntas
¿Cómo hago un vidrio esmerilado que desenfoque el fondo?
Sube el Desenfoque de fondo de la capa. Desenfoca lo que hay detrás de la silueta (0-5), como los materiales esmerilados de macOS.
Controles macro del Modo básico (Vidrio, Volumen, Sombra)
Tres controles, resultados profesionales.
Controles macro pensados para principiantes que mueven varios parámetros del material a la vez (Vidrio, Volumen y Sombra, de 0 a 100) sin pérdida, así que puedes pasar a los controles avanzados más tarde sin perder nada.
Pasos
Cambia el inspector a Modo básico.
Arrastra Vidrio, Volumen o Sombra.
Abre Avanzado cuando quieras. Todos los valores de fondo siguen intactos.
Preguntas
Me abruman los controles de material. ¿Por dónde empiezo?
Por los tres controles macro del Modo básico: Vidrio, Volumen y Sombra. Ajustan muchos parámetros a la vez y son totalmente reversibles.
Estilos de un clic que se aplican a la selección actual: glossy3d, softClay, pillow, ceramic, liquidGlassLook, frostedGlass, crystal y chrome. Cada preajuste escribe una configuración de material completa que puedes seguir ajustando.
Pasos
Selecciona una o varias capas.
Abre el menú de preajustes de estilo.
Haz clic en un preajuste (por ejemplo, frostedGlass) y sigue afinando los controles del material.
Consejos
El asistente de IA también puede aplicar preajustes: 'Hazlo de vidrio esmerilado'.
Preguntas
¿Hay una forma rápida de conseguir un material con aspecto profesional?
Aplica un preajuste de estilo (glossy3d, softClay, pillow, ceramic, liquidGlassLook, frostedGlass, crystal, chrome) a la selección y luego afínalo.
Pilas de efectos de vidrio predefinidas como tipo de capa (liquidGlass, frostedMetal, deepShadow, sideGlow o custom), además de variantes de efecto (topSpecular, innerShadow, rimLight, sideReflection, metalSheen) con control de intensidad.
Pasos
Añade una capa de plantilla Liquid Glass.
Elige una plantilla: liquidGlass, frostedMetal, deepShadow, sideGlow o custom.
Activa o desactiva las variantes de efecto y ajusta su intensidad.
Consejos
Parte de una plantilla y coloca tu propio diseño debajo.
Preguntas
¿Qué son las capas de plantilla Liquid Glass?
Pilas de efectos de vidrio ya montadas (liquidGlass, frostedMetal, deepShadow, sideGlow o custom) con interruptores para especular superior, sombra interior, luz de borde, reflejo lateral y brillo metálico.
Empieza con un icono diseñado, no con un lienzo en blanco.
Seis plantillas de documento diseñadas: glass-tile, clay-button, glass-on-clay, monogram, glass-disc y mono-clay. Son configuraciones completas y editables, no imágenes acopladas.
Pasos
Crea un documento nuevo y elige una plantilla.
Cambia el diseño o el glifo por el tuyo.
Deja los materiales tal cual o vuelve a ajustarlos.
Preguntas
¿Tienes plantillas de iconos para empezar?
Sí: glass-tile, clay-button, glass-on-clay, monogram, glass-disc y mono-clay. Son documentos totalmente editables con los materiales ya configurados.
Desenfoque, resplandor, sombras, grano, efectos de pegatina y shaders GLSL personalizados.
Desenfoque de capa y Resplandor
Suaviza y haz brillar.
Desenfoque gaussiano de capa (0-128px) y un efecto de Resplandor con radio, intensidad, umbral, tinte opcional y color del resplandor.
Pasos
Selecciona una capa → Efectos.
Ajusta el Desenfoque de capa para suavizar, o activa Resplandor.
Ajusta radio, intensidad y umbral del Resplandor; tíñelo o usa los colores de la propia capa.
Consejos
Pon una copia desenfocada en 'Otras capas' para un halo exterior personalizado.
Preguntas
¿Cómo añado un resplandor detrás de la forma de mi icono?
Efectos → Resplandor. Sube el radio y la intensidad; baja el umbral para que contribuya más parte de la forma. Usa un color de tinte para un aspecto neón.
Una lista ilimitada de sombras por capa, exteriores e interiores: color, opacidad, desenfoque, extensión, desplazamiento y visibilidad. Opciones inteligentes: usar el color de la propia capa, tomar el color que hay debajo, control de oscuridad y mostrar detrás de las zonas transparentes para que las sombras del vidrio se filtren bien.
Pasos
Selecciona una capa → Sombras.
Añade sombras y define el tipo (exterior/interior), color, desenfoque, extensión y desplazamiento.
Usa 'usar color de la capa' o 'usar color del entorno' para un sombreado automático; la primera sombra exterior controla la sombra paralela del vidrio.
Consejos
Apila dos sombras (una ceñida y otra amplia) para una profundidad de contacto convincente.
Preguntas
¿Cómo añado una sombra paralela suave?
Efectos → Sombras → añade una sombra exterior. Sube el desenfoque y baja la opacidad para suavizarla; 'usar color del entorno' la tiñe con lo que hay debajo de la capa.
¿Por qué no se ve mi sombra a través del vidrio?
Activa 'mostrar detrás de las zonas transparentes' para que la sombra se filtre por las partes transparentes. Así es como el vidrio proyecta una sombra real.
Grano de película por capa (intensidad 0-0,5, escala 0,1-16, semilla) y un paso de tramado de salida para eliminar las bandas de los degradados al exportar.
Pasos
Selecciona una capa → Efectos → Grano.
Ajusta intensidad, escala y semilla.
Activa el tramado de salida para exportar degradados limpios.
Preguntas
¿Cómo añado textura a un color plano?
Efectos → Grano en esa capa. Puedes ajustar la intensidad, la escala y la semilla.
Efectos de pegatina (borde, holográfico, sombra curva, despegado)
Aspecto de pegatina troquelada.
Convierte una capa en una pegatina: anchura y color del borde (blanco o cualquier otro), lámina holográfica con ángulo y escala, sombra paralela curva (desenfoque/opacidad) y un efecto de despegado (ángulo/curvatura).
Pasos
Selecciona una capa → Efectos → Pegatina.
Ajusta la anchura y el color del borde.
Añade Holográfico (con ángulo y escala), Sombra curva y Despegado (ángulo y curvatura) a tu gusto.
Preguntas
¿Cómo hago que mi icono parezca una pegatina troquelada?
Efectos → Pegatina: añade un borde y luego suma la lámina holográfica, la sombra curva y el despegado.
Apila pasadas de fragment shader GLSL ES 3.00 personalizadas en una capa, en el fondo o en todo el lienzo. Los parámetros se conectan solos a uniforms (controles deslizantes para floats, selectores de color); incluye una Biblioteca de shaders con preajustes (halftone, pixelado, aberración cromática, onda, duotono, CRT…), un modal de código para ver y editar el GLSL, y 'Generar con IA' para crear shaders nuevos. Tiene en cuenta el fondo mediante uBackdrop.
Pasos
Abre la sección Shaders (por capa, o a nivel de lienzo o fondo).
Añade pasadas desde la Biblioteca de shaders, o escribe GLSL en el modal de código.
Expón parámetros como uniforms para obtener controles deslizantes y selectores de color automáticamente.
Usa 'Generar con IA' para describir un efecto y obtener un shader.
Consejos
uBackdrop da a los shaders acceso a lo que hay detrás de la capa.
Los shaders se apilan, así que el orden importa.
Preguntas
¿Puedo escribir mis propios shaders?
Sí. La sección Shaders admite pasadas de fragment GLSL ES 3.00. Los uniforms que expongas se convierten en controles deslizantes o selectores de color. Incluye una biblioteca de preajustes (halftone, pixelado, CRT, duotono…).
¿Cómo añado un efecto halftone o CRT?
Abre la Biblioteca de shaders y elige halftone o CRT. Se añaden como pasadas editables con controles deslizantes.
Capas de texto con fuentes, espaciado y edición en el propio lienzo.
Capas de texto
Texto que sigue siendo editable.
Capas de texto con Google Fonts, tamaño 8-512, grosor 100-900, espaciado entre letras, interlineado, alineación, anchura de caja de texto al estilo Figma con ajuste por palabra o carácter, color de relleno y color y anchura del trazo. Haz doble clic para editar en el sitio.
EnterEditar en el sitio la capa de texto seleccionada
Pasos
Añade una capa de texto desde la barra de herramientas.
Haz doble clic sobre ella en el lienzo (o pulsa Enter) para escribir.
Elige fuente (selector de Google Fonts), tamaño, grosor, espaciado y alineación en la sección Texto.
Define una anchura de caja de texto para que ajuste las líneas; elige ajuste por palabra o por carácter.
Consejos
Google Fonts se carga bajo demanda, así que puedes explorar la biblioteca completa.
Preguntas
¿Cómo añado texto a mi icono?
Añade una capa de texto y haz doble clic sobre ella en el lienzo para escribir. La sección Texto tiene fuente, tamaño, grosor, espaciado, alineación y ajuste de líneas.
¿Cómo reparto el texto en varias líneas?
Define una anchura de caja de texto en la sección Texto y elige ajuste por palabra o por carácter.
¿Cómo edito la forma de cada letra?
Convierte primero el texto en trazado (Convertir en trazado) para que las letras pasen a ser contornos editables.
Importación de mapas de bits, eliminación de fondo, vectorización, máscaras y recorte.
Bibliotecas de iconos integradas (Heroicons y Lucide)
Más de 200k glifos para buscar.
Añade glifos vectoriales de las bibliotecas Heroicons y Lucide como capas de icono totalmente personalizables, que puedes buscar desde la barra de herramientas y desde el asistente de IA.
Pasos
Añade una capa de icono y busca en la biblioteca.
Coloca el glifo y cambia su estilo (relleno, trazo, material).
Usa Convertir en trazado para personalizarlo punto a punto.
Preguntas
¿Hay una biblioteca de iconos que pueda usar?
Sí. Heroicons y Lucide vienen integradas, con una biblioteca vectorial de más de 200k iconos que puedes buscar desde la barra de herramientas y el asistente de IA.
Importar arrastrando y soltando (PNG, SVG, .icns, .icon)
Suelta un archivo y tendrás una capa.
Suelta imágenes SVG o PNG, archivos de icono .icns o un paquete .icon de Icon Composer (que se abre como un documento completo y editable) directamente sobre el lienzo.
Pasos
Arrastra un archivo sobre el lienzo y suéltalo.
Los PNG/SVG se convierten en capas; los .icns se descomprimen en ilustraciones.
Un .icon de Icon Composer se abre como un documento completo con capas.
Consejos
También puedes pegar SVG desde el portapapeles.
Preguntas
¿Qué archivos puedo soltar en el editor?
SVG, PNG, .icns y paquetes .icon de Icon Composer. Las imágenes se convierten en capas; los paquetes .icon se abren como un documento completo y editable.
¿Puedo abrir un archivo de Icon Composer de Apple?
Sí, suelta el paquete .icon sobre el lienzo. Importa las capas y te avisa de los ajustes específicos de Transparente, las capas sueltas, los recursos que faltan y los grupos anidados que no puede trasladar 1:1.
Reemplaza el mapa de bits de una capa de imagen conservando todo el estilo y las transformaciones, y alterna entre versiones de una imagen generada con IA.
Pasos
Selecciona una capa de imagen → Reemplazar.
Elige un archivo nuevo (u otra versión generada).
Los estilos, las máscaras y las transformaciones se mantienen.
Preguntas
¿Cómo cambio la ilustración sin perder mis efectos?
Usa Reemplazar en la capa de imagen. Se conservan el estilo, las máscaras y las transformaciones.
Máscaras (editar máscara, usar como máscara, máscara de filtro)
Enmascara lo que quieras con lo que quieras.
Tres herramientas de máscara: Editar máscara (pinta o borra el alfa de una capa en el lienzo), Usar como máscara (una máscara de geometría no destructiva a partir de otra capa) y Máscara de filtro (una máscara que solo afecta a los efectos, con opción de invertir).
EnterActivar o desactivar la edición de máscara en una capa de imagen
Pasos
Editar máscara: selecciona una capa de imagen y entra en la edición de máscara; pinta o borra el alfa; pulsa 'Terminar de editar máscara' (o Enter).
Usar como máscara: haz clic derecho en una capa → Usar como máscara para recortar otra capa con su geometría; Quitar máscara la elimina.
Máscara de filtro: asigna una fuente de máscara de filtro para que los efectos solo se apliquen dentro de ella (o fuera, si la inviertes).
Consejos
Las máscaras de filtro son perfectas para resplandores que solo deben verse detrás de un objeto.
Preguntas
¿Cómo borro parte de una capa de imagen?
Entra en la edición de máscara de la capa (pulsa Enter sobre ella) y pinta o borra el alfa. 'Editar máscara' / 'Terminar de editar máscara' activa y desactiva el modo.
¿Cómo hago que una forma recorte a otra?
Haz clic derecho en la forma que recorta → 'Usar como máscara'. Se convierte en una máscara de geometría no destructiva; 'Quitar máscara' la elimina.
¿Cómo aplico un efecto solo a una parte de una capa?
Usa una Máscara de filtro. Los efectos solo se dibujan donde la máscara lo permite. Invertir le da la vuelta.
Quita el fondo de una imagen de cuatro formas: Automático, Clave de color (relleno desde el borde con precisión de píxel, con selector de color, detección y pureza), Recorte con IA (segmentación), Multiplicar (para blanco) y Trama (para negro), todas con control de pureza.
Pasos
Selecciona una capa de imagen (o usa la acción de las tijeras de la barra de herramientas).
Elige una técnica: Automático, Clave de color, Recorte con IA, Multiplicar o Trama.
Con Clave de color: elige el color y ajusta la Pureza; Detectar lo encuentra por ti.
Multiplicar elimina fondos blancos; Trama elimina los negros.
Consejos
Clave de color tiene precisión de píxel, ideal para logos sobre fondos sólidos.
Preguntas
¿Cómo quito el fondo de un logo en PNG?
Selecciona la imagen y pulsa Quitar fondo. Usa Clave de color para colores planos (elige el color y ajusta la Pureza), Recorte con IA para fotos, Multiplicar para blanco y Trama para negro.
¿Qué método para quitar el fondo debo usar?
Fondos de color plano → Clave de color. Blanco → Multiplicar. Negro → Trama. Fotos recargadas → Recorte con IA. Automático prueba la mejor opción.
Calca un mapa de bits en una nueva capa SVG con preajustes (Predeterminado, Blanco y negro, Póster, Foto) y modos de curva (Predeterminado, Píxel, Polígono, Spline).
Pasos
Selecciona una capa de imagen.
Elige Vectorizar y un preajuste (Predeterminado / Blanco y negro / Póster / Foto).
Elige un modo de curva (Predeterminado / Píxel / Polígono / Spline).
Se crea una nueva capa SVG. Edita sus puntos como cualquier trazado.
Consejos
Usa el preajuste 'Blanco y negro' + el modo de curva Polígono para calcar logos nítidos.
Preguntas
¿Cómo convierto un PNG en un vector?
Selecciona la imagen y usa Vectorizar. 'Blanco y negro' va genial para logos, 'Póster' para ilustraciones planas y 'Foto' para imágenes detalladas. El resultado es una capa SVG editable.
Formatos de exportación, kits por plataforma, archivos de proyecto y envíos.
Formatos de exportación (.icns, .png, .icon, .json)
Requiere cuenta
Todos los formatos que necesita un desarrollador de Mac.
Exporta como .icns (la escala completa de tamaños de 16 a 1024), .png (cualquier tamaño), .icon (paquete de Icon Composer) o .json (archivo de proyecto), con vista previa en directo, recorte a la máscara, control de tamaño/escala en x / px / % (16-4096px), descarga o copia al portapapeles, y una opción de 'hornear materiales' para los paquetes .icon.
Pasos
Abre el menú emergente Exportar.
Elige .icns, .png, .icon o .json.
Para PNG, ajusta el tamaño/escala (x / px / %, 16-4096px); activa Recortar a la máscara para quitar el relleno transparente.
Para .icon, elige Hornear materiales (activado = igual que el render del editor, desactivado = ilustración plana para que macOS aplique su propio Liquid Glass).
Descarga, o Copia al portapapeles en el caso del PNG.
Consejos
Copiar al portapapeles es la forma más rápida de pegar un PNG en Slack o en un documento.
Guarda un proyecto .json para poder volver a editarlo más tarde.
Preguntas
¿Cómo exporto un archivo .icns?
Exportar → .icns. Genera automáticamente la escala completa de tamaños de 16 a 1024. No necesitas un Mac ni iconutil.
¿Cómo exporto un PNG de un solo tamaño?
Exportar → PNG y ajusta el tamaño en x, px o % (16-4096px). Recortar a la máscara quita el relleno transparente.
¿Qué es 'hornear materiales' al exportar a .icon?
Activado: los materiales se renderizan dentro de la ilustración para que coincida exactamente con el editor. Desactivado: se exporta la ilustración plana y macOS aplica su propio Liquid Glass en tiempo de ejecución.
¿Puedo exportar PNG transparentes?
Sí, la exportación a PNG conserva la transparencia. Usa Recortar a la máscara para quitar el relleno vacío alrededor del icono.
Conversiones en el servidor mediante api.macosicons.com: .ico (Windows, varios tamaños), .appiconset (catálogo de recursos de Xcode para macOS/iOS/Universal), kit de Windows (.ico + mosaicos MSIX, en zip), kit de Linux (tema de iconos hicolor + .desktop, en zip), Favicons (pack de favicons web) y un Pack de lanzamiento con todos los archivos en un solo zip.
Pasos
Abre Exportar → Más formatos.
Elige .ico, .appiconset, kit de Windows, kit de Linux, Favicons o Pack de lanzamiento.
Para .appiconset elige la plataforma (macOS / iOS / Universal).
Descarga el archivo convertido o el zip.
Consejos
El Pack de lanzamiento es el botón de 'dámelo todo' para un lanzamiento.
Preguntas
¿Puedo sacar un .ico de Windows de mi icono?
Sí. Más formatos → .ico genera un icono de Windows con varios tamaños. El kit de Windows añade mosaicos MSIX en un zip.
¿Cómo consigo un appiconset de Xcode?
Más formatos → .appiconset y elige macOS, iOS o Universal. Genera el catálogo de recursos completo.
¿Hay favicons?
Sí. Más formatos → Favicons descarga un zip con un pack de favicons web. El kit de Linux cubre los temas hicolor y los archivos .desktop.
¿Cuál es la forma más rápida de publicar en todas partes?
El Pack de lanzamiento: un solo zip con .icns, .ico, .appiconset, favicons y todo lo demás.
Paquetes .icon de Icon Composer (abrir y exportar)
Requiere cuenta
Paridad total con Icon Composer.
Abre paquetes .icon de Icon Composer de Apple como documentos editables (con avisos sobre ajustes específicos de Transparente, capas sueltas, recursos que faltan y grupos anidados) y vuelve a exportarlos a .icon, incluidos los renders por apariencia Predeterminado/Oscuro/Transparente/Tintado.
Pasos
Suelta un paquete .icon sobre el lienzo para abrirlo.
Revisa los avisos de importación (ajustes específicos de Transparente, capas sueltas, recursos que faltan, grupos anidados).
Edítalo como un documento normal.
Exportar → .icon para volver a escribir el paquete.
Consejos
Usa 'Exportar todos los modos de apariencia' para obtener los PNG Predeterminado/Oscuro/Transparente/Tintado y revisarlos.
Preguntas
¿Puedo editar archivos de Icon Composer de Apple?
Sí, suelta el .icon sobre el lienzo. Se abre como capas que puedes editar y luego puedes volver a exportarlo a .icon. El editor señala todo lo que no puede trasladar con exactitud.
Modos de apariencia (Predeterminado, Oscuro, Transparente, Tintado)
Requiere cuenta
Diseña una vez para todas las apariencias de macOS.
Previsualiza y crea el aspecto de cada apariencia (Predeterminado, Oscuro, Transparente claro, Transparente oscuro, Tintado claro, Tintado oscuro) con ajustes por capa para el color, el tinte, el especular, la escarcha, la opacidad, la fusión, la visibilidad e incluso para cambiar la ilustración.
Pasos
Cambia de apariencia en el selector de apariencia de la vista previa o de la exportación.
Selecciona una capa y define ajustes por apariencia (alcance de edición: individual o todas).
Exporta todos los modos de apariencia como PNG en un solo ZIP.
Consejos
Pon el alcance de edición en 'individual' cuando solo deba cambiar una apariencia.
Preguntas
¿Cómo hago una versión en modo oscuro de mi icono?
Cambia a la apariencia 'Oscuro' y ajusta las capas con ajustes por apariencia: color, tinte, opacidad, visibilidad e incluso una imagen distinta. Exporta todos los modos de apariencia para obtener cada render en PNG.
¿Qué son las apariencias Transparente y Tintado?
Transparente es el aspecto translúcido de Icon Composer (claro/oscuro); Tintado adapta el icono en monocromo al color de acento del usuario (claro/oscuro). Cada una se puede diseñar por separado en cada capa.
Envía tu icono a la biblioteca pública de macOSicons con el nombre de la app, la categoría y la confirmación de autoría, y si quieres incluye variantes .icns de tema oscuro/Liquid Glass y el .json del proyecto. Los envíos se revisan antes de publicarse.
Pasos
Abre Exportar → Subir.
Escribe el nombre de la app y la categoría; confirma la autoría.
Si quieres, adjunta variantes .icns y el .json del proyecto.
Envíalo a revisión.
Preguntas
¿Cómo comparto mi icono en macOSicons.com?
Exportar → Subir → Enviar a macOSicons. Añade el nombre de la app y la categoría, confirma que eres el autor y pasará por revisión antes de publicarse.
Renderizados de vista previa por tamaño, en el Dock, en la Pantalla de inicio y en contexto.
Bandeja de vista previa (Tamaños, Dock, Pantalla de inicio)
Míralo donde va a vivir.
Una bandeja de vista previa flotante con tres pestañas: Tamaños (el icono a tamaños reales en píxeles del sistema), Dock (un escritorio de macOS con un Dock de Liquid Glass, apps de ejemplo, indicador de ejecución y nombre en el Dock) y Pantalla de inicio (una cuadrícula de iOS con Dock).
Pasos
Abre la Bandeja de vista previa desde la barra de herramientas.
Tamaños: comprueba que se lee bien a tamaños reales en píxeles.
Dock: mira el icono entre apps de ejemplo en un Dock en directo.
Pantalla de inicio: previsualízalo en una cuadrícula y un Dock de iOS.
Consejos
Diseña a 1024, pero comprueba siempre en Tamaños antes de exportar.
Preguntas
¿Cómo veo mi icono en el Dock de macOS?
Abre la Bandeja de vista previa → pestaña Dock. Muestra tu icono en un Dock de Liquid Glass junto a apps de ejemplo, con indicador de ejecución y etiqueta incluidos.
¿Se leerá bien mi icono a tamaños pequeños?
Usa la pestaña Tamaños. Muestra el icono a tamaños reales en píxeles del sistema para que detectes los detalles que desaparecen al reducirlo.
Vista previa en contexto (Dock / Pantalla de inicio / Escritorio)
Maquetas que puedes descargar.
Renders de vista previa en contexto completo con temas Claro / Oscuro / Ambos, muestras de color de fondo de pantalla o un color/imagen personalizados, y fondos Automático/Desenfoque/Degradado/Imagen. Descarga cada render, descárgalos todos o guárdalos en tu biblioteca de Recursos.
Pasos
Abre Vista previa en contexto.
Elige un contexto: Dock, Pantalla de inicio o Escritorio.
Elige el tema (Claro / Oscuro / Ambos) y un fondo de pantalla o fondo.
Descarga cada render, Descargar todo o Guardar en Recursos.
Consejos
Los renders guardados aparecen en la pestaña Recursos del espacio de trabajo con su variante y su proyecto.
Preguntas
¿Puedo obtener una maqueta de mi icono en el Dock?
Sí. Vista previa en contexto muestra tu icono en escenas de Dock, Pantalla de inicio o Escritorio con temas claro/oscuro y fondos de pantalla personalizables. Descarga los renders o guárdalos en Recursos.
Fondos de vista previa detrás del icono (Automático, Desenfoque, Color, Degradado, Imagen), solo para valorar el contraste y la transparencia; nunca se incluyen en las exportaciones.
Pasos
Abre el menú Ver / fondo en la barra de herramientas.
Elige Automático, Desenfoque, Color, Degradado o Imagen.
Diseña sobre él; las exportaciones siguen siendo transparentes según lo configurado.
Preguntas
¿Cómo veo cómo queda mi icono transparente sobre un fondo de pantalla?
Usa el fondo de vista previa (menú Ver) y elige Desenfoque, Color, Degradado o Imagen detrás del icono. Es solo para la vista previa y no afecta a las exportaciones.
Deshacer/rehacer e historial de versiones al estilo Time Machine.
Deshacer / Rehacer
50 pasos atrás, sin miedo.
Una pila de deshacer de 50 pasos (Cmd+Z / Cmd+Shift+Z y botones de la barra de herramientas) que cubre cada edición, sin incluir los cambios de los colaboradores en tu pila personal.
Cmd + ZDeshacer
Cmd + Shift + ZRehacer
Pasos
Pulsa Cmd+Z para deshacer y Cmd+Shift+Z para rehacer (o usa los botones de la barra de herramientas).
El historial de deshacer cubre ediciones, movimientos, estilos y cambios estructurales.
Consejos
¿Necesitas volver más de 50 pasos atrás? Las instantáneas del Historial de versiones llegan más lejos.
Preguntas
¿Hasta dónde puedo deshacer?
50 pasos. Cmd+Z deshace y Cmd+Shift+Z rehace; la barra de herramientas también tiene botones.
Versiones con nombre (Cmd+Option+S) más instantáneas automáticas mientras editas. Recorre una línea de tiempo ('Desplázate o pulsa ↑ para volver atrás en el tiempo') y después Restaura, Restaura como copia o elimina una versión. Incluye puntos de restauración creados antes de cada restauración y gestiona los conflictos entre la nube y el equipo guardando una copia de seguridad. Una función de macOSicons+.
Cmd + Option + HAbrir el historial de versiones
Cmd + Option + SGuardar versión con nombre
Pasos
Pulsa Cmd+Option+H para abrir el historial de versiones.
Pulsa Cmd+Option+S (o el botón Guardar) para guardar una versión con nombre.
Recorre la línea de tiempo (desplazándote o con ↑/↓) para previsualizar estados anteriores.
Restaura, o usa 'Restaurar como copia' para crear una rama sin perder el trabajo actual.
Consejos
Ponle nombre a una versión antes de experimentar a lo grande. Restaurar como copia es la red de seguridad definitiva.
Preguntas
¿Puedo volver a una versión anterior de mi icono?
Sí. El Historial de versiones (Cmd+Option+H) guarda instantáneas automáticas y las versiones a las que pones nombre (Cmd+Option+S). Recorre la línea de tiempo y Restaura, o Restaura como copia para crear una rama. Es una función de macOSicons+.
¿Qué pasa cuando dos versiones entran en conflicto?
El editor guarda una copia de seguridad en el historial de versiones y te dice qué versión ha conservado ('Se ha conservado la versión más reciente de este navegador' / 'Se ha abierto la versión más reciente de la nube'). Los conflictos sin conexión se pueden restaurar como copia.
Asistente que convierte instrucciones en capas, generación de imágenes, descomposición y acciones rápidas con IA.
Asistente de IA por chat (de la instrucción a capas)
Plus
Describe el icono y obtén capas editables.
Un asistente de chat que entiende de diseño y conoce todo el lienzo. Muestra su actividad en directo (razonamiento y llamadas a herramientas), edita capas reales, se puede detener a mitad de generación, recuerda el historial de instrucciones (↑/↓), acepta imágenes de referencia adjuntas y archivos arrastrados, y ofrece sugerencias rápidas y un chip para 'recrear una imagen de referencia como capas editables'.
↑ / ↓ in promptRecuperar el historial de instrucciones
Pasos
Abre el panel de IA y describe lo que quieres ('un icono de vidrio al estilo del Finder').
Sigue el flujo de actividad; pulsa detener para interrumpirlo.
Adjunta una imagen de referencia (con el clip o arrastrándola sobre el campo de instrucciones).
Pulsa ↑/↓ en el campo de instrucciones para recuperar instrucciones anteriores.
Pide cambios sobre la marcha: 'suaviza el fondo', 'conviértelo en arcilla'.
Consejos
Sé concreto con los materiales: 'vidrio con escarcha 20 y especular opuesto' funciona mejor que 'hazlo bonito'.
El asistente puede criticar y mejorar su propio resultado (revisión de diseño).
Preguntas
¿Qué puede hacer el asistente de IA?
Diseña y edita con capas reales: crea, actualiza y elimina capas, dibuja y edita trazados, hace operaciones booleanas, define fondos y reflejos, aplica shaders y preajustes de estilo, busca en la biblioteca de más de 200k vectores, genera imágenes, agrupa, alinea, duplica y enmascara, convierte en trazado, entrelaza y mucho más.
¿La IA cambia todo mi diseño?
Solo lo que le pidas. Puedes detener la generación en cualquier momento y deshacer todo lo que haya hecho, porque sus ediciones van a tu pila de deshacer normal.
¿La IA puede usar una imagen de referencia?
Sí, adjunta o arrastra una imagen sobre el campo de instrucciones. Usa el chip 'Recrear una imagen de referencia como capas editables' para reconstruirla como capas reales en lugar de un mapa de bits plano.
Genera hasta 8 opciones de icono ya enmascaradas a partir de una instrucción, con selector de cantidad y una etiqueta de coste clara. Añade las opciones una a una o usa 'Añadir todas' para llevarlas al lienzo.
Pasos
Abre Generar iconos con IA.
Escribe una instrucción y elige cuántas opciones quieres (hasta 8).
Revisa las opciones enmascaradas y añade una o todas al lienzo.
Consejos
Las opciones llegan ya enmascaradas con la silueta del icono.
Preguntas
¿Cómo consigo varias ideas de icono a la vez?
Usa Generar iconos con IA: una sola instrucción te da hasta 8 opciones de icono enmascaradas. Añade la que más te guste o mételas todas y compáralas.
Divide una imagen en capas editables con nombre ('una capa por línea…') y luego añade cada pieza, o todas, al lienzo: convierte arte plano en un documento de verdad.
Pasos
Abre Descomponer imagen con IA y elige una imagen.
Espera a que se divida en capas con nombre.
Añade capas sueltas o pulsa Añadir todas para llevarlas al lienzo.
Preguntas
Tengo un PNG plano. ¿Cómo edito sus partes?
Usa Descomponer imagen con IA. Divide la imagen en capas con nombre que puedes añadir una a una o todas a la vez, y después editarlas como cualquier otra capa.
Un medidor de créditos muestra exactamente cuánto cuesta una acción de IA antes de ejecutarla ('Generando iconos', 'Descomponiendo esta imagen'). Si te faltan créditos, las ofertas de pago integradas te permiten recargar al instante.
Pasos
Fíjate en la etiqueta de coste antes de cada acción de IA.
Ejecuta la acción. Los créditos se descuentan al terminar.
Si te faltan créditos, elige una recarga en la ventana modal.
Preguntas
¿Cuánto cuesta la IA?
Cada acción muestra su coste en créditos antes de ejecutarla. Si te faltan, el editor te ofrece paquetes de créditos en el mismo flujo, así que no hay cargos sorpresa.
Enlaces para compartir, edición conjunta en directo y la galería de la comunidad.
Enlaces para compartir (ver o editar)
Requiere cuenta
Envía un enlace, no un archivo.
Crea enlaces para compartir con acceso de lectura o de edición, cópialos al instante y restablécelos para revocar el acceso. Quien solo puede ver encuentra el aviso 'Solo lectura · compartido por X' con 'Duplicar en mi espacio de trabajo'; quien puede editar ve 'Editando juntos · documento de X'.
Pasos
Abre la ventana Compartir.
Crea un enlace y elige acceso de lectura o de edición.
Copia el enlace y envíalo. Usa Restablecer enlaces para revocar el acceso.
Quien lo reciba puede duplicar el documento en su propio espacio de trabajo.
Consejos
Restablece los enlaces antes de hacer público un documento en el que has colaborado en privado.
Preguntas
¿Cómo comparto mi diseño de icono con alguien?
Usa Compartir para crear un enlace con acceso de lectura o de edición. Restablece los enlaces cuando quieras para revocarlo. Quien lo reciba puede duplicarlo en su propio espacio de trabajo.
¿Pueden editar mi documento las personas con las que lo comparto?
Solo si eliges acceso de 'edición'. Los enlaces de lectura no permiten cambios y muestran el aviso 'Solo lectura'.
Coedición multijugador en tiempo real con avatares de presencia, cursores en directo y sincronización basada en operaciones (tras el flag de colaboración).
Pasos
Activa la colaboración y comparte un enlace de edición.
Verás los avatares y cursores de los colaboradores en directo sobre el lienzo.
Todos editan a la vez y los cambios se sincronizan en tiempo real.
Consejos
Tu historial personal de deshacer no incluye las ediciones de los colaboradores.
Preguntas
¿Pueden editar dos personas a la vez?
Sí, con la colaboración en directo activada: comparte un enlace de edición y cada uno verá los avatares y cursores del otro mientras editan juntos en tiempo real.
Galería de la comunidad (explorar, me gusta, comentar, duplicar)
Aprende de cada icono compartido.
Una galería de proyectos de iconos compartidos en /editor/docs/community. Explora publicaciones, dales me gusta y coméntalas, y duplica cualquier proyecto en tu espacio de trabajo para ver exactamente cómo se hizo.
Pasos
Abre Comunidad desde el área de proyectos.
Explora y abre proyectos; dales me gusta y coméntalos.
Haz clic en 'Copiar a mis proyectos' para duplicar uno y estudiar sus capas.
Consejos
Duplicar un proyecto de la comunidad es la forma más rápida de aprender configuraciones avanzadas de materiales.
Preguntas
¿Puedo ver cómo han hecho otros sus iconos?
Sí, la galería de la comunidad tiene proyectos compartidos. Abre cualquiera y pulsa 'Copiar a mis proyectos' para tener el documento completo y editable.
Gestor de proyectos, papelera, biblioteca de recursos y sincronización sin conexión.
Gestor de proyectos (documentos y carpetas)
Requiere cuenta
Todos tus proyectos de iconos, organizados.
Un espacio de trabajo con Proyectos (documentos y carpetas anidadas), búsqueda, cambio de nombre y preajustes de Nuevo documento para icono de app de macOS / icono de app de iOS / icono de carpeta. Además, una Papelera con restauración y borrado definitivo.
Pasos
Abre el área de proyectos (/editor/docs).
Crea documentos (icono de macOS / iOS / carpeta) y carpetas.
Busca, renombra y anida para organizarte.
Lo que eliminas va a la Papelera, donde puedes restaurarlo o borrarlo definitivamente.
Consejos
Las carpetas se pueden anidar, así que puedes agrupar por cliente o por app.
Preguntas
¿Cómo organizo mis proyectos de iconos?
El gestor de proyectos tiene carpetas, búsqueda y cambio de nombre. Lo que eliminas va a la Papelera, donde puedes restaurarlo o borrarlo definitivamente.
Cada recurso generado o exportado se guarda automáticamente, agrupado por variante con su coste en créditos y su proyecto de origen. Vista de cuadrícula o lista, vistas previas y nueva descarga: la red de seguridad para '¿dónde ha ido ese archivo?'.
Pasos
Abre el espacio de trabajo → pestaña Recursos.
Explora por variante; cambia entre vista de cuadrícula y de lista.
Previsualiza y vuelve a descargar cualquier recurso.
Consejos
Los renders guardados desde Vista previa en contexto también se guardan aquí.
Preguntas
¿Dónde van mis iconos exportados?
Cada icono que generas o exportas acaba en la pestaña Recursos del espacio de trabajo, agrupado por variante con su proyecto y su coste en créditos. Puedes volver a descargarlo cuando quieras.
Haz que documentos o proyectos enteros estén disponibles sin conexión con un selector de espacio de almacenamiento y un medidor de uso, sincroniza manualmente, reintenta los fallos y reconstruye desde el servidor si hace falta. Un aviso de sin conexión y un contador de cambios pendientes te mantienen al tanto; los documentos de prueba de invitado funcionan por completo en el navegador.
Pasos
Abre el espacio de trabajo → pestaña Sin conexión.
Marca documentos/proyectos como 'disponibles sin conexión' (o 'Mantener todo sin conexión').
Fija un límite de almacenamiento y vigila el medidor de uso.
Usa Sincronizar ahora cuando vuelvas a tener conexión; reintenta los fallos o reconstruye desde el servidor.
Consejos
El modo invitado es totalmente local: no se guarda nada en la nube hasta que te registras.
Preguntas
¿Funciona el editor sin conexión?
Sí. Marca documentos como disponibles sin conexión (con un límite de almacenamiento), sigue editando sin conexión y sincroniza al volver. El editor muestra 'N cambios pendientes de sincronizar' y puede reintentar o reconstruir desde el servidor si algo falla.
Cualquiera puede abrir el editor y empezar a diseñar al momento como invitado, en un documento de prueba en el navegador con todas las herramientas. Para exportar y guardar en la nube se te pide un registro gratuito.
Pasos
Abre /editor y empieza a diseñar. Sin muro de registro.
Trabaja en el documento de prueba de invitado (guardado en el navegador).
Regístrate gratis cuando quieras exportar o guardar en la nube.
Preguntas
¿Necesito una cuenta para usar el editor?
No, diseña libremente como invitado. Necesitas una cuenta gratuita para exportar (.icns, PNG, .icon) y para guardar proyectos en la nube.
Recorrido guiado, diseño para móvil, modo concentración, ajuste y detalles de interfaz que hacen la vida más fácil.
Mesas de trabajo (varios iconos en una sesión)
Una tira de iconos, uno al lado del otro.
Trabaja en varias mesas de trabajo de icono o de carpeta en una misma sesión con una tira de miniaturas. Crea, renombra, duplica y elimina mesas de trabajo sin salir del lienzo.
Pasos
Usa la tira de mesas de trabajo para cambiar de una a otra.
Crea una nueva mesa de trabajo de icono o de carpeta.
Renombra, duplica o elimina mesas de trabajo desde la tira.
Consejos
Duplica una mesa de trabajo para iterar sobre variantes del mismo icono.
Preguntas
¿Puedo diseñar varios iconos a la vez?
Sí. Las Mesas de trabajo mantienen varios documentos de icono/carpeta en una tira de sesión con miniaturas. Crea, renombra, duplica o cambia de una a otra con un clic.
Un recorrido guiado de 4 pasos que puedes saltarte: Bienvenida → Construye en el lienzo → Capas y propiedades → Exportar y guardar. Pulsa Saltar recorrido o ve directamente a cualquier paso.
Pasos
El recorrido se abre en tu primera visita.
Sigue los cuatro pasos o haz clic en Ir al paso N.
Pulsa Saltar recorrido para cerrarlo en cualquier momento.
Preguntas
¿Hay algún tutorial del editor?
Sí, un recorrido de 4 pasos cubre el lienzo, las capas y propiedades, y cómo exportar y guardar. Puedes saltártelo o volver a abrir la guía cuando quieras.
Oculta todos los elementos del editor y deja solo el lienzo para trabajar sin distracciones o sacar capturas limpias. Recupera la interfaz con el mismo interruptor.
Show Interface shortcut (see doc page)Mostrar u ocultar los elementos del editor
Pasos
Usa el interruptor Mostrar interfaz (atajo en la ayuda de la página del documento).
Trabaja sobre el lienzo desnudo.
Vuelve a pulsarlo para recuperar la interfaz completa.
Preguntas
¿Cómo oculto todos los paneles para hacer una captura?
Usa el interruptor de ocultar interfaz. Lo oculta todo y deja solo el lienzo. Vuelve a pulsarlo para recuperar la interfaz.
Haz zoom con Cmd +/- y Cmd+0 para restablecerlo, desplázate manteniendo Espacio y arrastrando, usa dos dedos en el trackpad, y abre el menú contextual del lienzo con Acercar/Alejar/Restablecer zoom/Pegar.
Cmd + / Cmd -Acercar / alejar
Cmd + 0Restablecer zoom
Space (hold) + dragDesplazar el lienzo
Pasos
Cmd + / Cmd - para hacer zoom; Cmd+0 para restablecerlo.
Mantén Espacio y arrastra para desplazarte (o desliza con dos dedos en el trackpad).
Haz clic derecho en el lienzo para ver las acciones de zoom y Pegar.
Preguntas
¿Cómo me desplazo por el lienzo?
Mantén Espacio y arrastra, o desliza con dos dedos en el trackpad. Cmd +/- hace zoom y Cmd+0 lo restablece.
Al arrastrar, las capas se ajustan al lienzo, a otras capas y a espaciados iguales, con el mismo motor de ajuste a reglas que usa la retícula de guías.
Pasos
Activa Ajuste desde el menú Ver.
Arrastra una capa y aparecerán guías de ajuste respecto al lienzo y a otras capas.
Entre tres o más capas aparecen indicaciones de espaciado igual.
Consejos
Combínalo con Alinear y distribuir para tener precisión numérica.
Preguntas
¿Cómo alineo capas mientras las arrastro?
Activa Ajuste (menú Ver). Las capas se ajustan al lienzo, a otras capas e incluso a espaciados iguales mientras arrastras.
Muestra u oculta sobre el lienzo una retícula de guías y alineación al estilo de Apple para que los glifos y las formas queden donde esperan las directrices de la plataforma.
Pasos
Activa o desactiva la retícula de guías desde la barra de herramientas o el menú Ver.
Alinea tu diseño con las guías.
Ocúltala cuando termines (nunca se exporta).
Preguntas
¿Para qué sirve la retícula de guías?
Es una retícula de alineación al estilo de Apple sobre el lienzo para que tu diseño respete las directrices de la plataforma. Solo se ve en la vista previa y nunca se exporta.
Toma muestras de cualquier color, en cualquier sitio.
Un cuentagotas pensado para el teclado (C, o Ctrl+C en macOS / Alt+C en otros sistemas) que toma una muestra de color y la envía al canal adecuado (relleno, trazo o fondo) según tu selección.
C (Ctrl+C on macOS / Alt+C elsewhere)Abrir el selector de color / cuentagotas
Pasos
Pulsa C (o Ctrl+C / Alt+C) para abrir el cuentagotas.
Haz clic en cualquier píxel para tomar la muestra.
El color va al relleno, al trazo o al fondo según el contexto.
Preguntas
¿Cómo tomo un color de mi diseño?
Pulsa C para abrir el cuentagotas y haz clic en el píxel. El color se aplica al relleno, al trazo o al fondo según lo que tengas seleccionado.
Arrastra un marco sobre el lienzo para seleccionar varias capas, o sobre un trazado abierto para seleccionar puntos de ancla y moverlos o eliminarlos en bloque.
Pasos
Arrastra sobre una zona vacía del lienzo con la herramienta Seleccionar para seleccionar capas con un marco.
En el modo Editar trazado, arrastra para seleccionar puntos con un marco.
Mueve o elimina la selección como un todo.
Preguntas
¿Cómo selecciono varias capas o puntos a la vez?
Arrastra un marco sobre ellos. En el lienzo selecciona capas; en el modo Editar trazado selecciona puntos de ancla.
Un diseño adaptable con pestañas inferiores (Inspector / Capas / Proyectos), una barra de selección móvil (Hecho / '{n} capas') y un menú 'Más herramientas', con respuesta háptica en los dispositivos compatibles.
Pasos
Abre el editor en un móvil o una tablet.
Cambia entre las pestañas inferiores Inspector, Capas y Proyectos.
Usa el menú Más herramientas para las acciones de la barra de herramientas; la respuesta háptica confirma los gestos clave.
Preguntas
¿El editor funciona en móviles?
Sí. Un diseño para móvil con pestañas inferiores (Inspector/Capas/Proyectos), una barra de selección y un menú Más herramientas hace que el editor completo sea usable en pantallas pequeñas.
Comodidades (nombres automáticos, respuesta háptica, exportación segura en GPU)
Los pequeños detalles, bien hechos.
Los documentos se nombran solos a partir de su contenido, los dispositivos compatibles ofrecen respuesta háptica en los gestos clave y la captura de exportación es segura en GPU, con un aviso de error claro que indica la GPU si la captura falla.
Pasos
Deja que los documentos se nombren solos. Puedes cambiarles el nombre cuando quieras.
Nota la respuesta háptica en los dispositivos táctiles compatibles.
Si la captura de exportación falla en una GPU poco común, el aviso te dice cuál es.
Preguntas
¿Cómo se nombran mis documentos?
Automáticamente, a partir de su contenido. Puedes cambiar el nombre de cualquier documento cuando quieras.
Herramientas independientes de un solo clic y la API pública de iconos.
Kit de iconos (herramientas independientes + API pública)
Requiere cuenta
Las mismas herramientas, como botones y como API.
El Kit de iconos en /editor/toolkit ofrece las herramientas de un solo paso del editor como herramientas web independientes (no necesitas un Mac), y cada herramienta es también un endpoint REST público en /api/v1/editor/ para usarla desde código.
Pasos
Abre /editor/toolkit.
Usa cualquier herramienta en el navegador (máscara del icono, generar, convertir, quitar fondo…).
O llama al endpoint correspondiente en /api/v1/editor/ desde tu propio código.
Consejos
Las herramientas del kit funcionan sin abrir un documento completo en el editor.
Preguntas
¿Necesito un Mac para crear un .icns?
No, el Kit de iconos convierte y exporta .icns (y cualquier otro formato) directamente en el navegador o mediante la API.
¿Hay una API para estas herramientas?
Sí, cada herramienta del kit tiene un endpoint público en /api/v1/editor/. Consulta la documentación de la API en la página del kit.
Generación independiente de iconos con IA a partir de una instrucción: la vía rápida cuando quieres opciones con máscara sin una sesión de edición completa.
Pasos
Kit de iconos → Generar con IA.
Escribe una instrucción.
Descarga las opciones o sigue en el editor.
Preguntas
¿Puedo generar iconos sin usar el editor?
Sí. Kit de iconos → Generar con IA crea opciones de icono con máscara a partir de una instrucción. El coste en créditos se muestra antes de ejecutarlo.
Crea paquetes .icon a partir de tus ilustraciones.
Crea un paquete .icon de Apple Icon Composer a partir de tus ilustraciones con una herramienta independiente, o abre archivos .icon completos en el editor para trabajarlos a fondo.
Pasos
Kit de iconos → Paquete de Icon Composer.
Sube tu ilustración.
Descarga el paquete .icon.
Preguntas
¿Cómo creo un paquete .icon de Apple sin Icon Composer?
Kit de iconos → Paquete de Icon Composer crea uno a partir de tu ilustración. Para editar por capas archivos .icon existentes, suéltalos en el editor.
Genera un .appiconset de Xcode completo (macOS, iOS o Universal) a partir de una sola imagen, con Contents.json y todos los tamaños necesarios incluidos.
Pasos
Kit de iconos → .appiconset de Xcode.
Sube tu ilustración de 1024px y elige una plataforma.
Suelta la carpeta en tu catálogo de recursos de Xcode.
Preguntas
¿Cómo creo un appiconset de Xcode a partir de una imagen?
Kit de iconos → .appiconset de Xcode: sube una imagen de 1024px, elige macOS/iOS/Universal y suelta el resultado en Xcode.
Maquetas en contexto independientes (Dock, Pantalla de inicio, Escritorio) para obtener rápidamente renders para compartir de cualquier imagen de icono.
Pasos
Kit de iconos → Vista previa en contexto.
Sube una imagen de icono y elige un contexto.
Descarga el render de la maqueta.
Preguntas
¿Puedo obtener una maqueta del Dock sin abrir el editor?
Sí. Kit de iconos → Vista previa en contexto muestra la imagen de tu icono en escenas del Dock, la Pantalla de inicio o el Escritorio y descarga la maqueta.
cómo hago que mi icono parezca Liquid Glass / vidrio de Apple
Pon el Material de la capa en Vidrio y sube el Grosor y la Curvatura; después añade un poco de Aberración cromática y Escarcha y activa Especular opuesto para los dos brillos en los bordes. Activa Documento → Reflejo para dar brillo a todo el icono.
cómo cambio el color de fondo / hago un fondo con degradado de malla
Ajustes del documento → Fondo: elige Sólido, Degradado o Manchas (malla). El modo Manchas te deja arrastrar hasta 12 manchas de color por el lienzo; 'Sugerir desde el icono' saca colores a juego a partir de tu diseño.
cómo quito el fondo de una imagen / la hago transparente
Selecciona la imagen y pulsa Quitar fondo. Usa Clave de color para colores planos, Multiplicar para el blanco, Trama para el negro o Recorte con IA para fotos.
cómo exporto un .icns / PNG / favicon / icono de Windows
Exportar → .icns, .png, .icon o .json. Más formatos incluye .ico, .appiconset, kit de Windows, kit de Linux, Favicons y el Pack de lanzamiento todo en uno.
Cambia a la apariencia 'Oscuro' y ajusta las capas con valores específicos por apariencia (color, tinte, opacidad e incluso otra ilustración). 'Exportar todos los modos de apariencia' te da cada renderizado como PNG en un ZIP.
Selecciona la imagen y usa Vectorizar (preajustes Predeterminado / Blanco y negro / Póster / Foto). El resultado es una capa SVG editable que puedes remodelar punto a punto.
cómo edito los puntos / el contorno de una forma o un texto
Pulsa Enter sobre la capa para entrar en el modo Editar trazado (si hace falta, convierte antes el texto o el SVG en trazado). Shift-clic en un borde para añadir puntos, Option-clic para quitarlos, Cmd+J para unirlos.
Selecciona las dos formas y usa Unir, Restar, Intersecar o Excluir en el menú de operaciones booleanas. Unión de formas suelda varias formas en un único contorno.
Añade una capa de Texto y haz doble clic en ella para escribir. La sección Texto tiene un selector de Google Fonts, tamaño, grosor, espaciado, alineación y ajuste de línea.
cómo añado una sombra / un resplandor / un contorno
Efectos → Sombras para apilar sombras exteriores e interiores, Efectos → Resplandor para un halo de luz y la sección Trazo para contornos interiores, exteriores o centrados (incluso trazos con degradado).
Sí. El asistente de IA convierte instrucciones en capas editables, Generar iconos crea hasta 8 opciones a la vez, Descomponer imagen separa ilustraciones planas en capas y clic derecho → Preguntar a la IA cambia el estilo de una selección (Vidrio, Arcilla, Mejorar, Armonizar, Variaciones).
La Bandeja de vista previa tiene pestañas en directo de Tamaños, Dock y Pantalla de inicio. Vista previa en contexto genera maquetas descargables (Dock / Pantalla de inicio / Escritorio, en claro y oscuro). El Kit de iconos también hace maquetas por separado.
Diseña gratis como invitado sin cuenta, aunque para exportar necesitas un registro gratuito. Los documentos pueden estar disponibles sin conexión, con límites de almacenamiento local y sincronización al recuperar la conexión.
Cmd+Z deshace 50 pasos. El Historial de versiones (Cmd+Option+H, macOSicons+) guarda instantáneas automáticas y versiones con nombre (Cmd+Option+S) que puedes restaurar o restaurar como copia.
Compartir crea enlaces de solo lectura o de edición (puedes restablecerlos cuando quieras). La Colaboración en directo añade presencia y cursores. Compartir con la comunidad lo publica en la galería, donde cualquiera puede duplicar tu proyecto para aprender de él.
Exportar → Subir → Enviar a macOSicons: añade el nombre de la app y la categoría, confirma la autoría y, si quieres, adjunta variantes .icns y el archivo del proyecto. Pasa por revisión antes de publicarse.
El gestor de proyectos tiene carpetas anidadas, búsqueda, cambio de nombre y Papelera. Todo lo que exportas o generas acaba en la pestaña Recursos. Las Mesas de trabajo mantienen varios iconos uno junto a otro en una misma sesión.
hay una API / puedo automatizar la generación de iconos
Sí. Cada herramienta del Kit de iconos es también un endpoint público bajo /api/v1/editor/ (máscara, conversión, appiconset, favicons, pack de lanzamiento y más). Consulta la documentación de la API en /editor/toolkit.
