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/cónico 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/cónico) 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 colores del 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.
Lee los colores de tu diseño y te sugiere fondos a partir de ellos en cinco modos: Colores del icono, Tonos similares, Análogos, Complementarios y Triádicos. Un fondo sólido toma la muestra en la que haces clic, un degradado usa todo el conjunto como paradas y una malla de manchas le da a cada mancha uno de los colores.
Pasos
Ajustes del documento → Fondo.
Haz clic en 'Sugerir colores del icono'.
Elige un modo: Colores del icono, Tonos similares, Análogos, Complementarios o Triádicos.
Haz clic en una muestra para un fondo sólido, o aplica el conjunto a un degradado o a una malla de manchas.
Consejos
Complementarios hace que el icono destaque; Tonos similares lo mantiene sereno y tonal.
Preguntas
¿Cómo elijo un fondo que combine con mi icono?
Usa 'Sugerir colores del icono' en la sección Fondo. Lee los colores de tu diseño y te los ofrece como muestras, junto con tonos similares y armonías análogas, complementarias o triádicas.
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.
Vista de contornos, aislamiento y seleccionar debajo
Llega a cada pieza de un icono complejo.
Los iconos apilan muchas piezas. Los clics caen en lo que se dibuja, así que el hueco de un anillo te deja hacer clic en el cristal de debajo; Cmd + Opción + clic baja por todo lo que hay bajo el puntero, y clic derecho → Seleccionar capa lo lista. Haz doble clic en un grupo o booleano para aislarlo y pulsa Cmd + Y para la vista de contornos, que muestra cada capa como un contorno fino.
Cmd + YActivar o desactivar la vista de contornos
Cmd + Option + ClickSeleccionar la siguiente capa bajo el puntero
EscapeSalir del aislamiento
Pasos
Cmd + Opción + clic (Ctrl + Alt en Windows) selecciona la siguiente capa bajo el puntero, un nivel más abajo en cada clic.
Haz clic derecho en el lienzo y abre Seleccionar capa para elegir cualquier capa bajo el puntero.
Haz doble clic en un grupo o booleano para aislarlo: el resto se atenúa y no se puede pulsar. Pulsa Escape o Salir para volver.
Pulsa Cmd + Y (Ctrl + Y) o usa Ver → Vista de contornos para ver y pulsar cada capa por su contorno.
Consejos
En la vista de contornos un clic elige la capa cuyo contorno está bajo el puntero, así que las piezas tapadas por otras son fáciles de alcanzar.
Preguntas
¿Cómo selecciono una capa que está debajo de otra?
Haz Cmd + Opción + clic (Ctrl + Alt en Windows) para bajar por la pila, o haz clic derecho y elígela en Seleccionar capa.
¿La vista de contornos cambia lo que exporto?
No. La vista de contornos y el aislamiento solo cambian lo que muestra el lienzo mientras editas; las exportaciones y miniaturas muestran el diseño completo.
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.
Cmd + ]Traer adelante
Cmd + [Enviar atrás
Cmd + Option + ] (Ctrl + Shift + ] on Windows and Linux)Traer al frente
Cmd + Option + [ (Ctrl + Shift + [ on Windows and Linux)Enviar al fondo
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. O pulsa Cmd + [ / Cmd + ] (Ctrl en Windows y Linux) para moverla un paso atrás o adelante; añade Opción (Mayús en Windows y Linux) para llevarla hasta el final.
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').
Cmd + Option + CCopiar estilo (el aspecto de la capa seleccionada)
Cmd + Option + VPegar estilo en la selección
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 (Cmd + Option + C) y luego Pegar estilo (Cmd + Option + V) 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.
Pega capas en cualquier sitio, desde cualquier sitio.
Las capas copiadas en una pestaña del navegador se pegan en otra, y el SVG copiado fuera de la app (Figma, una web, un archivo) se pega como capa.
Pasos
Copia capas en una pestaña y pégalas en otra pestaña del editor.
Copia código SVG desde fuera y pégalo en el lienzo para crear una capa.
Preguntas
¿Puedo pegar desde Figma?
Copia el diseño como SVG y pégalo en el lienzo: el arte multicolor se convierte en capas y carpetas editables, y un icono de un solo color en una capa SVG editable.
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). Los trazados y los polígonos, estrellas y arcos generados admiten un Suavizado en sus esquinas redondeadas para la misma curvatura continua, con un ajuste iOS (60 %).
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).
En un trazado, define el radio de esquina y sube el Suavizado (o pulsa iOS) para esquinas continuas.
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.
Shift + HVoltear en horizontal
Shift + VVoltear en vertical
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.
Option + HAlinear centros verticales
Option + VAlinear centros horizontales
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.
Herramientas dedicadas en la barra, la mayoría con un atajo de una sola tecla: Seleccionar (V), Editar puntos (A), las herramientas de forma —Rectángulo (R), Elipse (O), Polígono y Estrella—, Pluma (P) para dibujar curvas bézier con precisión, Lápiz (N) para trazos a mano alzada, Línea (L) y Distorsionar (D).
VHerramienta Seleccionar
AHerramienta Editar puntos
RHerramienta Rectángulo
OHerramienta Elipse
PHerramienta Pluma
NHerramienta Lápiz
LHerramienta Línea
DHerramienta Distorsionar
IHerramienta Igualar estilo
EnterTerminar el trazado de pluma / activar la edición de trazado en forma, SVG o texto
EscapeTerminar el trazado de pluma, cancelar un trazo de lápiz o salir de la edición de trazado
BackspaceQuitar el último punto de pluma mientras dibujas
Shift (hold)Restringir a 45° mientras dibujas con pluma/línea
Alt (hold)Romper el manejador mientras arrastras un punto de pluma
Space (hold)Mover el punto de pluma que estás colocando
Pasos
Elige una herramienta en la barra (o pulsa V / A / R / O / P / N / L / D); las demás herramientas de forma están en el menú Más herramientas, y el Lápiz comparte el hueco de la Pluma.
Pluma: haz clic para esquinas y arrastra para curvas (Opción/Alt rompe el manejador, Espacio mueve el punto, Shift mantiene 45°); haz clic en el primer punto para cerrar; Enter, Escape o un doble clic terminan y conservan el trazado.
Línea: arrastra para dibujar; Shift restringe el ángulo.
Editar puntos: arrastra los puntos de ancla y los manejadores (en una forma, pregunta antes de convertirla en trazado); 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 para esquinas y arrastra para curvas, haz clic en el primer punto para cerrar, o pulsa Enter o Escape para terminar un trazado abierto. Cada dibujo es una capa nueva; para recortar un hueco en un trazado, elige la Pluma mientras editas los puntos de ese trazado. La herramienta Línea dibuja segmentos rectos y el Lápiz dibuja a mano alzada.
¿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.
Herramientas de forma (Rectángulo, Elipse, Polígono, Estrella)
Dibuja formas exactas, anillos y estrellas arrastrando.
Dibuja rectángulos, elipses, polígonos regulares y estrellas arrastrando un recuadro en el lienzo, con Mayús para cuadrados, círculos y formas regulares, Alt para dibujar desde el centro y ajuste a otras capas. Las elipses se convierten en arcos, sectores y anillos, y los polígonos y las estrellas conservan editables sus lados, su profundidad y su radio de esquina en el inspector.
RHerramienta Rectángulo
OHerramienta Elipse
Shift (hold)Cuadrado, círculo o forma regular
Alt (hold)Dibujar desde el centro
↑ / ↓Más o menos lados o puntas mientras arrastras
EscapeCancelar la forma o volver a Seleccionar
Pasos
Pulsa R (Rectángulo) u O (Elipse), o elige Polígono o Estrella en el menú Más herramientas.
Arrastra en el lienzo: mantén pulsada Mayús para un cuadrado, un círculo o una forma regular y Alt para dibujar desde el centro; ↑ / ↓ cambian los lados de un polígono o las puntas de una estrella mientras arrastras. Un clic coloca una forma del tamaño predeterminado.
Edita los lados, el radio interior de una estrella, el radio de esquina o el inicio, el barrido y el anillo de una elipse en la sección Forma del inspector.
Haz doble clic en una herramienta de forma (o activa Mantener la herramienta seleccionada) para dibujar varias formas seguidas; Escape vuelve a Seleccionar.
O arrastra los tiradores de una elipse, polígono o estrella seleccionados: el inicio y el final del arco, el anillo, la profundidad de la estrella y el radio de esquina (Mayús para pasos de 15° o del 5 %).
Consejos
Las formas se ajustan a los bordes y centros de otras capas y al lienzo; desactiva el ajuste en el menú Ver para colocarlas libremente.
Editar los puntos de una forma generada la convierte en un trazado normal, y sus controles de Forma desaparecen.
Preguntas
¿Cómo hago un anillo o el aro de una lente?
Dibuja una elipse (O, con Mayús para un círculo) y sube Anillo en la sección Forma del inspector. Baja Barrido para un arco o un indicador.
¿Cómo dibujo varias formas sin volver a elegir la herramienta?
Haz doble clic en la herramienta en la barra o activa Mantener la herramienta seleccionada en el menú Más herramientas. Aparece un pequeño candado en la herramienta; Escape vuelve a Seleccionar.
Dibuja un trazo y obtén un trazado vectorial limpio.
Dibuja a mano alzada con ratón, trackpad, el dedo o el Apple Pencil. Al levantar, el trazo se suaviza en un trazado bézier con pocos puntos de ancla, listo para editarse como cualquier otro trazado.
NHerramienta Lápiz
Shift (hold)Dibujar un segmento recto
EscapeCancelar el trazo que estás dibujando
Pasos
Elige el Lápiz en el hueco de la Pluma de la barra (o pulsa N).
Dibuja un trazo. Termina cerca de donde empezaste para cerrarlo en una forma rellena.
Mantén Shift para dibujar segmentos rectos.
Ajusta el Suavizado en la barra sobre el lienzo (sigue ahí aunque ocultes las pistas): bajo sigue cada temblor, alto da la curva más suave.
Consejos
Usa Editar puntos (A) después para afinar la curva.
El ajuste de Suavizado se recuerda en este navegador.
Preguntas
¿Por qué mi dibujo tiene tan pocos puntos?
El Lápiz ajusta curvas suaves a tu trazo y solo conserva los puntos de ancla necesarios dentro de la tolerancia de suavizado, para que el trazado sea fácil de editar. Baja el Suavizado para seguir el trazo con más fidelidad.
Control a nivel de punto de ancla, al estilo Figma.
Edita puntos de ancla y manejadores de entrada/salida con los tipos de punto esquina, suave, simétrico o independiente. Arrastra un segmento para curvarlo (Option-arrastrar lo mueve), haz Option-clic o doble clic en un segmento para seleccionar su subtrazado y clic derecho para el menú de puntos (tipo de punto, radio de esquina, unir, cortar, borrar, subtrazados, transformar, distribuir). Selecciona puntos con un recuadro, haz Option-clic para quitarlos, clic en el punto de un segmento para añadir uno, une extremos (Cmd+J), rompe la continuidad (Shift+Delete) o borra (Delete), fija X/Y/W/H de los puntos seleccionados en el inspector, ajusta puntos de ancla y distribuye puntos. Selecciona dos o más puntos para escalarlos o girarlos desde el cuadro que los rodea.
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, manejadores o segmentos (un segmento se curva); haz doble clic en un punto para alternar entre esquina y suave, o elige su tipo en el menú del clic derecho.
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.
Selecciona dos o más puntos y arrastra el cuadro que los rodea: las esquinas y los lados escalan (Mayús: proporcionalmente, Alt: desde el centro) y el tirador superior gira.
Consejos
Los puntos suaves mantienen las curvas suaves con manejadores de longitud propia; los simétricos además igualan las longitudes; los manejadores 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.
Trae tus diseños de Figma, Illustrator y Sketch, listos para editar.
Pega o suelta un SVG multicolor y cada forma se convierte en su propia capa de trazado editable: conserva rellenos, degradados, trazos (con sus extremos, uniones y guiones), opacidad y sombras, los grupos pasan a ser carpetas, los huecos contornos de hueco y los trazados de recorte máscaras de capa. Los iconos de un solo color siguen llegando como una capa SVG que puedes recolorear.
Pasos
Copia el diseño como SVG en Figma, Illustrator o Sketch, o exporta un archivo .svg.
Pégalo en el lienzo o suelta el archivo encima.
Edita las capas y carpetas que crea, o pulsa 'Importar como imagen' en el aviso para conservarlo como una sola imagen.
Consejos
Los archivos muy detallados fusionan formas vecinas del mismo color en una sola capa; por encima de 300 capas se importan como imagen.
Preguntas
¿Por qué mi SVG llegó como una sola capa?
Un SVG que pinta un único color plano se importa como una capa SVG que puedes recolorear; usa Convertir en trazado para editar su contorno. Los diseños multicolor se importan como capas separadas.
¿Qué no se conserva?
Los filtros que no sean desenfoque o sombras exteriores o interiores, las máscaras suaves, los rellenos de patrón e imagen, las imágenes incrustadas y el texto editable. El aviso de importación enumera lo que se ha quedado fuera.
Operaciones de trazado (contornear trazo, desplazar, simplificar, trazados compuestos)
Convierte trazos en formas, ensancha bordes y ordena los puntos de ancla.
El menú Trazado transforma trazados en un paso: Contornear trazo convierte un trazo en una forma rellena, Desplazar trazado ensancha o encoge un contorno una distancia, Añadir brillo pone una media luna brillante en el borde que mira a la luz, Simplificar quita los puntos de ancla que el contorno no necesita, Suavizar convierte esquinas en curvas, Invertir dirección intercambia los extremos de un trazo abierto, y Crear / Liberar trazado compuesto une formas en un solo trazado con agujeros o lo vuelve a separar en capas. Repetir y Repetir de nuevo también están aquí.
Cmd + Option + OContornear trazo
Pasos
Selecciona una forma o un trazado y abre Operaciones de trazado en la barra de herramientas, Trazado en el menú contextual de la capa, o búscalo en la paleta de comandos (Cmd + K).
Elige una operación. Desplazar trazado… y Simplificar… abren un pequeño diálogo que muestra el resultado (su tamaño o el número de puntos de ancla) antes de aplicar: ajusta la distancia (negativa para encoger) y las esquinas, o la tolerancia, y pulsa Aplicar.
Crear trazado compuesto une formas en un solo trazado (las formas dentro de otras se vuelven agujeros); Liberar trazado compuesto separa cada subtrazado en su propia capa.
Consejos
Suavizar actúa solo sobre los puntos seleccionados mientras editas puntos.
La lista Subtrazados de la sección Trazado y trazo decide qué subtrazados de un trazado compuesto rellenan y cuáles abren agujeros.
Preguntas
¿Cómo convierto un trazo en una forma?
Selecciona la capa y elige Trazado → Contornear trazo (Cmd + Option + O). El trazo se convierte en un trazado relleno al que puedes cambiar el color, dar un material o recortar con operaciones booleanas.
¿Cómo hago una copia más fina o más gruesa del contorno de una forma?
Elige Trazado → Desplazar trazado…, escribe una distancia (negativa para encoger), elige esquinas redondas o en punta y deja activado Conservar el original para obtener una capa nueva junto a la original.
Repetir (matrices radiales, en cuadrícula y concéntricas)
Rejillas, láminas de diafragma y anillos de lente de una vez.
Copia una forma alrededor de un centro, en una cuadrícula (cuadrada o de panal) o en anillos concéntricos. Todas las copias van a una sola capa de trazado, así que incluso cientos de copias siguen siendo rápidas; también pueden recortarse como agujeros en un cuerpo o crearse como capas separadas en una carpeta.
Pasos
Selecciona una forma o un trazado y elige Trazado → Repetir… (menú contextual de la capa o el menú Operaciones de trazado de la barra de herramientas).
Elige Radial, Cuadrícula o Concéntrico y ajusta las copias, los espacios o el paso de los anillos mientras el lienzo muestra el resultado.
Elige el centro y el resultado (una capa, capas separadas o agujeros recortados en otra capa) y pulsa Aplicar.
Consejos
Desactiva Girar las copias para mantener rectos los agujeros o puntos alrededor de un círculo.
Un barrido de menos de 360° incluye ambos extremos, útil para las marcas de un indicador.
Preguntas
¿Cómo hago la rejilla de un altavoz o un micrófono?
Dibuja un círculo pequeño y el cuerpo de la rejilla, selecciona el círculo y elige Repetir…, escoge Cuadrícula con la disposición Panal y pon Resultado en «Recortar agujeros en» el cuerpo. Solo se conservan los agujeros enteros dentro del cuerpo, y todos viven en la propia capa del cuerpo.
¿Cómo repito el mismo patrón en otra forma?
Selecciona la nueva forma y elige Trazado → Repetir de nuevo. Reutiliza los ajustes de la última repetición.
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/cónico, oklab/oklch)
Mezclas vivas sin tonos medios apagados.
Degradados lineales (ángulo, inicio/fin), radiales (centro, radio y una elipse que puedes achatar y girar) y cónicos (centro, ángulo inicial) 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. Los barridos cónicos son la base del metal cepillado, los anillos de objetivo y los mandos.
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, el radio y la elipse (proporción, rotación) como números y como manejadores; los cónicos, el centro y el ángulo inicial.
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.
¿Cómo hago un anillo de metal cepillado o un objetivo de cámara?
Pon el tipo de degradado en Cónico y alterna paradas claras y oscuras (o empieza con el preajuste Brushed Metal). Arrastra el centro y el control de ángulo en el lienzo; apila encima un radial achatado para el brillo.
Contornos con color o degradado, grosor de 0 a 128, posición interior/exterior/centrada, extremos redondeados, cuadrados o planos, uniones en punta (con límite de punta), redondas o biseladas, guiones discontinuos o punteados con desfase, 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 o planos; cierran los trazados abiertos y cada guion) y las uniones (en punta, redondas o biseladas; el límite de punta corta en plano las esquinas muy agudas).
En Guiones elige Discontinuo, Punteado o Personalizado: escribe las longitudes de guion y hueco en px (p. ej. 8 4) y deslízalas por el contorno con Desfase de guiones.
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.
Las uniones, el límite de punta y los guiones se aplican a los contornos de formas y trazados; el trazo de un icono o un SVG crece a partir de su ilustración.
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.
¿Cómo hago un contorno discontinuo o punteado?
En los controles de Trazo pon Guiones en Discontinuo o Punteado, o en Personalizado para escribir tus propias longitudes de guion y hueco en px (p. ej. 8 4). Un guion de 0 con extremos redondeados dibuja puntos; Desfase de guiones desliza el patrón por el contorno.
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.
Estilos: acabados, aspectos guardados e Igualar estilo
Un acabado, todas las piezas.
Reutiliza un aspecto en las piezas de un icono. La sección Estilos del inspector aplica acabados integrados (aluminio cepillado, cromo pulido, LED rojo brillante, plástico naranja, cristal oscuro de lente, vidrio esmerilado, relieve suave y negro mate) y aspectos que guardas de tus propias capas. Igualar estilo (I) da a la selección el aspecto de la capa en la que hagas clic, y Copiar / Pegar estilo (Cmd + Option + C / V) lo lleva de una capa a otra. Un aspecto es el relleno y sus degradados, el trazo, las sombras, los efectos y el material; nunca la forma ni su posición.
IIgualar estilo: haz clic en una capa para dar su aspecto a la selección
Pasos
Selecciona las capas que quieres cambiar y abre Estilos en el inspector.
Haz clic en un acabado para aplicarlo, o guarda el aspecto de la capa seleccionada con un nombre para reutilizarlo después.
O pulsa I (Igualar estilo) y haz clic en la capa cuyo aspecto debe tomar la selección.
Consejos
Cambia el nombre de un estilo guardado o elimínalo desde su menú en la sección Estilos.
Preguntas
¿Cómo hago que varias piezas tengan el mismo aspecto?
Selecciónalas, pulsa I y haz clic en la pieza que ya tiene el aspecto. El relleno, el trazo, las sombras, los efectos y el material se copian en un solo paso de deshacer; las formas y las posiciones no cambian.
¿Dónde se guardan mis estilos?
En este navegador (su almacenamiento local), así que están en todos los documentos que abras en él. Todavía no se sincronizan con tu cuenta, y borrar los datos del sitio en el navegador los elimina.
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.
El selector de nuevo documento te deja empezar desde un lienzo en blanco, una plantilla de icono diseñada (App Store, WebBites, macOSicons y un icono de macOSicons de vidrio), un fondo degradado o sólido, una de tus propias plantillas guardadas o cualquier proyecto de la galería de la comunidad. Cada plantilla se abre como un documento completo y editable con sus materiales ya preparados, no como una imagen aplanada.
Pasos
Crea un documento nuevo.
Elige En blanco, una plantilla o un fondo, o cambia a Mis plantillas o Comunidad.
Guarda cualquier documento como plantilla desde su menú en la página de documentos ('Guardar como plantilla').
Cambia el arte por el tuyo y vuelve a ajustar los materiales.
Consejos
Guarda un documento terminado como plantilla para reutilizar su configuración en todo un conjunto de iconos.
Preguntas
¿Tenéis plantillas de iconos para empezar?
Sí. El selector de nuevo documento tiene plantillas de iconos diseñadas, fondos degradados y sólidos, tus propias plantillas guardadas y todos los proyectos de la comunidad. Se abren como documentos totalmente editables con sus materiales ya preparados.
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.
TAñadir una capa de texto
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 vista previa en directo, usando preajustes (Predeterminado, Blanco y negro, Póster, Foto) y modos de curva (Predeterminado, Píxel, Polígono, Spline). Las imágenes pequeñas se limpian antes de calcarlas, así que los logotipos de baja resolución salen limpios.
Pasos
Selecciona una capa de imagen.
Elige Vectorizar y un preajuste (Predeterminado / Blanco y negro / Póster / Foto); la vista previa se actualiza sobre la marcha.
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.
Generar iconos con IA (hasta 8 opciones)
Plus
Ocho opciones de icono con una sola instrucción.
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. Las cuentas gratuitas admiten hasta 5 documentos (los de la Papelera no cuentan) en 1 proyecto; macOSicons+ elimina ambos límites.
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.
¿Cuántos documentos puedo tener gratis?
Una cuenta gratuita admite hasta 5 documentos en 1 proyecto, y los documentos de la Papelera no cuentan. macOSicons+ te da documentos y proyectos ilimitados.
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 6 pasos que puedes saltarte: Bienvenida → Construye en el lienzo → Dibuja con formas y la pluma → Combina formas → Capas y propiedades → Exportar y guardar. Sáltatelo, ve a cualquier paso o vuelve a abrirlo cuando quieras desde Ayuda → Hacer el recorrido.
Pasos
El recorrido se abre en tu primera visita; vuelve a abrirlo desde Ayuda → Hacer el recorrido.
Sigue los seis 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 6 pasos cubre el lienzo, dibujar con formas y la pluma, combinar formas, las capas y propiedades, y cómo exportar y guardar. Sáltatelo o vuelve a abrirlo cuando quieras desde el menú Ayuda.
Encuentra cualquier comando escribiendo lo que quieres hacer.
Pulsa Cmd + K para buscar cualquier acción del editor por su nombre o por lo que quieres conseguir («hacer un agujero», «redondear esquinas», «matriz») y ejecutarla, con su atajo al lado. Pulsa ? para ver una hoja con buscador de todos los atajos de teclado, agrupados por herramienta. Ambos están también en el menú Ayuda.
Cmd + KAbrir la paleta de comandos
?Mostrar los atajos de teclado
Cmd + /Mostrar los atajos de teclado
Pasos
Pulsa Cmd + K (Ctrl + K en Windows y Linux) o elige Ayuda → Paleta de comandos.
Escribe lo que quieres hacer y pulsa Intro para ejecutar el comando resaltado.
Pulsa ? o Cmd + / para ver la hoja de atajos de teclado.
Consejos
La barra de pistas al pie del lienzo explica los clics y las teclas de la herramienta activa; puedes volver a activarla desde el menú Ayuda. Al ocultarla solo se oculta la explicación: el Suavizado del Lápiz, el trazado al que añade la Pluma y los botones táctiles Terminar / Listo se quedan.
Preguntas
¿Cómo encuentro una herramienta o un comando que no veo?
Pulsa Cmd + K y escribe lo que quieres hacer, como «agujero», «voltear» o «traer al frente». Los comandos que no se aplican a la selección actual te dicen por qué.
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.
Cmd + .Mostrar u ocultar los elementos del editor
Pasos
Pulsa Cmd + . (Ctrl + . en Windows y Linux) o usa el botón Mostrar interfaz.
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.
Suelta hasta 20 imágenes y elige uno o varios formatos de salida (PNG, JPEG, WebP, AVIF, GIF, TIFF, BMP, ICO o ICNS): cada imagen vuelve en cada formato que elijas. Lee PNG, JPEG, WebP, AVIF, GIF, TIFF, BMP, ICO, ICNS, HEIC y SVG, y los preajustes y los controles de cada formato ajustan la compresión. Cada imagen de salida cuenta como una conversión, y la misma herramienta es el endpoint público /api/v1/images/convert.
Pasos
Abre /editor/toolkit y elige 'Convertir imágenes'.
Suelta hasta 20 imágenes (25 MB cada una, 100 MB por tanda).
Elige los formatos de salida y, si quieres, un preajuste y una calidad.
Descarga cada imagen, o todas juntas en un .zip.
Consejos
Elige varios formatos de salida en una sola tanda: cada imagen vuelve en cada uno de ellos.
Preguntas
¿Cómo convierto muchas imágenes a WebP o AVIF a la vez?
Usa 'Convertir imágenes' en el kit de iconos: suelta hasta 20 imágenes, elige WebP, AVIF o cualquier otro formato de salida y descárgalas todas en un .zip.
Vuelve a codificar hasta 20 imágenes PNG, JPEG, WebP, AVIF, GIF o TIFF en su propio formato con una compresión más ajustada, reducción de tamaño opcional y eliminación de metadatos. Los preajustes, la calidad, el modo sin pérdida y una paleta de 256 colores lo ajustan, y si un archivo no puede ser más pequeño recibes el original intacto. La misma herramienta es el endpoint público /api/v1/images/compress.
Pasos
Abre /editor/toolkit y elige 'Comprimir imágenes'.
Suelta hasta 20 imágenes.
Elige un preajuste, o ajusta la calidad, el modo sin pérdida, la paleta o un tamaño máximo.
Descarga los archivos más pequeños, o todos juntos en un .zip.
Consejos
Deja desactivado 'Conservar metadatos' para eliminar el EXIF y otros metadatos al comprimir.
Preguntas
¿Puedo hacer mis PNG más pequeños sin cambiar de formato?
Sí. 'Comprimir imágenes' los vuelve a codificar en su propio formato; la opción de paleta suele dejar los PNG entre un 60 y un 80 % más pequeños, y un archivo que no puede reducirse vuelve sin cambios.
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 colores del 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.
Pulsa N para el Lápiz (comparte el hueco de la Pluma en la barra) y dibuja. Al levantar, el trazo se convierte en un trazado suave con pocos puntos; termina cerca del inicio para cerrarlo. Ajusta el Suavizado en la barra sobre el lienzo.
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í. Generar iconos crea hasta 8 opciones con máscara a partir de una sola instrucción, y Descomponer imagen separa ilustraciones planas en capas editables. Ambas añaden sus resultados al lienzo como capas.
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.
cómo hago una rejilla / repito una forma en círculo o en cuadrícula
Selecciona la forma y elige Trazado → Repetir…. Radial la copia alrededor de un centro, Cuadrícula la dispone en filas (Panal las escalona) y Concéntrico crea anillos; pon Resultado en «Recortar agujeros en» para perforar un cuerpo en una sola capa.
¿cómo encuentro un comando? / ¿cuáles son los atajos de teclado?
Pulsa Cmd + K (Ctrl + K en Windows y Linux) y escribe lo que quieres hacer; la paleta lo ejecuta y te muestra su atajo. Pulsa ? para ver la hoja completa de atajos de teclado. Ambos están en el menú Ayuda.
cómo doy el mismo aspecto a varias piezas / reutilizo un estilo
Selecciona las piezas, pulsa I (Igualar estilo) y haz clic en la pieza que ya tiene el aspecto correcto, o aplica un acabado desde Estilos en el inspector. Guarda ahí un aspecto para reutilizarlo en otros documentos, y usa Cmd + Option + C / V para copiarlo y pegarlo.
cómo importo mi icono de Figma / Illustrator / Sketch como capas editables
Cópialo como SVG (o exporta un .svg) y pégalo o suéltalo en el lienzo. Cada forma se convierte en su propia capa de trazado con sus rellenos, degradados y trazos, los grupos pasan a ser carpetas y el aviso enumera lo que no se pudo importar. Elige ahí 'Importar como imagen' para conservarlo como una sola imagen.
Selecciona la forma o el trazado, activa su trazo y pon Guiones en Discontinuo o Punteado (o en Personalizado para escribir las longitudes de guion y hueco en px, p. ej. 8 4). Con extremos redondeados, los guiones de longitud 0 son puntos; Desfase de guiones desliza el patrón.
cómo convierto un trazo en una forma / desplazo, simplifico o creo un trazado compuesto
Selecciona la capa y abre el menú Operaciones de trazado de la barra (o Trazado en su menú contextual): Contornear trazo (Cmd + Option + O), Desplazar trazado…, Simplificar…, Suavizar, Invertir dirección y Crear / Liberar trazado compuesto.
cómo convierto o comprimo muchas imágenes a la vez
Abre el kit de iconos: 'Convertir imágenes' pasa hasta 20 imágenes a cualquier combinación de PNG, JPEG, WebP, AVIF, GIF y más, y 'Comprimir imágenes' las reduce en su propio formato. Descárgalas una a una o en un .zip, o llama a /api/v1/images/convert y /api/v1/images/compress.
