Tot el que pot fer l'editor

Passos

1. Crea un document nou des de l'espai de treball (icona d'app de macOS, icona d'app d'iOS o icona de carpeta).
2. Dissenya lliurement: el llenç sempre té forma d'icona i fa 1024x1024.
3. Exporta: totes les mides i escales de cada plataforma es generen a partir d'aquí.

Consells

• Les posicions es mesuren des del centre: 0/0 és el mig de la icona.

Preguntes

Quina mida té el llenç de l'editor?

Un llenç d'icona fix de 1024x1024 amb coordenades d'origen al centre. Totes les exportacions s'escalen a partir d'aquí, des de 16px fins a 4096px.

He de configurar taules de treball?

No, el document és la icona. Fes servir les taules de treball si vols diverses icones una al costat de l'altra en una mateixa sessió.

Relacionades

• Mode icona i mode carpeta
• Màscara de la icona (squircle, iOS, watchOS, cap)
• Taules de treball (diverses icones en una sessió)

Passos

1. Obre la Configuració del document a l'inspector.
2. Tria 'Icona' (icona d'app) o 'Carpeta' (carpeta de macOS).
3. El mode carpeta activa el tint de la carpeta, el desenfocament frontal i el gra de la carpeta.

Preguntes

Puc fer una icona de carpeta i una icona d'app a partir del mateix disseny?

Sí, canvia el mode del document entre Icona i Carpeta. La màscara, el tint i la forma d'exportació s'adapten automàticament.

Relacionades

• Màscara de la icona (squircle, iOS, watchOS, cap)
• Tint de la carpeta, desenfocament frontal i gra de la carpeta

Passos

1. Obre Configuració del document → Màscara de la icona.
2. Tria squircle de macOS, iOS, watchOS o Cap.
3. Les capes de la secció 'Icona interior' es retallen amb aquesta silueta; les de la secció 'Altres capes' poden arribar fins a la vora.

Consells

• Fes servir la retícula de guies per dissenyar amb seguretat dins la màscara.
• La mateixa màscara també està disponible per programació a través de l'API d'icones.

Preguntes

Què fa la màscara d'icona de macOS?

Retalla el teu disseny amb la silueta d'icona oficial de la plataforma (squircle per a macOS, quadrat arrodonit per a iOS, cercle per a watchOS) perquè el sistema no retalli mai la icona de manera estranya.

Per què la meva icona queda tallada a les cantonades?

El teu disseny surt fora de la màscara de la icona. Mou la capa a 'Icona interior' al tauler de capes, o posa la màscara a 'Cap' per exportar un quadrat sense retallar.

Relacionades

• Seccions Icona interior i Altres capes
• Graella de guies (keyline)
• Kit d'icones: Màscara de la icona

Passos

1. Configuració del document → Fons.
2. Tria Sòlid, Degradat (lineal/radial/cònic) o Taques.
3. Per a Taques: afegeix taques, tria'n els colors, arrossega-les pel llenç per moure-les i arrossega l'anell discontinu per canviar-ne la mida.
4. Comença més de pressa amb un valor predefinit (vibrant, alba, oceà, aurora, llaminadura, monocrom).

Consells

• Prova 'Suggereix colors de la icona' per treure colors del teu disseny.
• Les taques són additives, així que on se superposen s'il·lumina.

Preguntes

Com faig un fons amb degradat de malla?

Configuració del document → Fons → Taques. Superposa fins a 12 taques de color suaus sobre un color base; arrossega-les pel llenç per donar forma al degradat.

Com canvio el color de fons de la meva icona?

Configuració del document → Fons → Sòlid, o prem C per agafar qualsevol color amb el comptagotes.

Relacionades

• Fons predefinits
• Suggereix colors de la icona (paleta i harmonies)
• Edició de taques al llenç
• Reflexió procedural (brillantor global Liquid Glass)

Passos

1. Configuració del document → Fons → Predefinits.
2. Fes clic en una mostra per aplicar-la.
3. Després pots continuar editant les parades o les taques. Els valors predefinits són totalment editables.

Preguntes

Els fons predefinits es poden editar?

Sí. Un valor predefinit només configura el degradat o el color sòlid. Totes les parades, angles i taques continuen sent editables.

Relacionades

• Fons del llenç (sòlid, degradat, malla de taques)
• Plantilles i punts de partida

Passos

1. Configuració del document → Fons.
2. Fes clic a 'Suggereix colors de la icona'.
3. Tria un mode: Colors de la icona, Tons similars, Anàlegs, Complementaris o Triàdics.
4. Fes clic en una mostra per a un fons sòlid, o aplica el conjunt a un degradat o a una malla de taques.

Consells

• Complementaris fa que la icona destaqui; Tons similars la manté serena i tonal.

Preguntes

Com trio un fons que combini amb la meva icona?

Fes servir 'Suggereix colors de la icona' a la secció Fons. Llegeix els colors del teu disseny i te'ls ofereix com a mostres, juntament amb tons similars i harmonies anàlogues, complementàries o triàdiques.

Relacionades

• Fons del llenç (sòlid, degradat, malla de taques)

Passos

1. Posa Fons → Taques i activa el mode d'edició.
2. Arrossega una taca per moure-la.
3. Arrossega el seu anell discontinu per canviar-ne la mida.

Preguntes

Puc moure directament les taques d'un degradat de malla?

Sí. En el mode d'edició de Taques, arrossega cada taca per moure-la i el seu anell discontinu per canviar-ne la mida.

Relacionades

• Fons del llenç (sòlid, degradat, malla de taques)

Passos

1. Configuració del document → Vora.
2. Activa-la i tria un color.
3. Defineix el gruix en píxels.

Preguntes

Com afegeixo una vora al voltant de la meva icona?

Configuració del document → Vora: activa-la i tria'n el color i el gruix. La vora segueix la màscara de la icona activa.

Relacionades

• Màscara de la icona (squircle, iOS, watchOS, cap)
• Traç (posició, extrems, unions, guions, degradats, desenfocament)
• Efectes d'adhesiu (vora, holo, ombra corba, desenganxat)

Passos

1. Configuració del document → Reflexió.
2. Activa-la i defineix l'angle de la llum (0-360).
3. Ajusta Reflex, Reflex inferior (enllaçable), Amplada del reflex i Refracció.

Consells

• Enllaça Reflex i Reflex inferior per moure'ls tots dos alhora.
• Combina-ho amb el material Vidre per afegir-hi profunditat.

Preguntes

Com aconsegueixo la lluentor Liquid Glass d'Apple a la meva icona?

Activa Document → Reflexió. Afegeix un reflex de bisell global i refracció a tota la icona; enllaça els reflexos superior i inferior per a un aspecte simètric.

Relacionades

• Material Vidre (Liquid Glass)
• Material d'argila
• Il·luminació global i per capa

Passos

1. Posa el mode del document a Carpeta.
2. Configuració del document → Tint de la carpeta per a un tint sòlid o en degradat.
3. Ajusta el Desenfocament frontal i el Gra (intensitat / mida / llavor).

Consells

• Fes servir la mateixa llavor de gra en tot un conjunt de carpetes perquè quedin coherents.

Preguntes

Com canvio el color d'una icona de carpeta de macOS?

Posa el document en mode carpeta i després ves a Configuració del document → Tint de la carpeta. El desenfocament frontal i el gra fan creïble el material.

Relacionades

• Mode icona i mode carpeta
• Gra del document

Passos

1. Configuració del document → Gra.
2. Activa'l i defineix la intensitat.
3. Ajusta l'escala i la llavor al teu gust.

Consells

• Mantén la intensitat baixa (0.05-0.15) per a una textura semblant a la impressió.

Preguntes

Com evito que el meu degradat faci bandes?

Afegeix-hi una mica de gra del document (Configuració del document → Gra). Aplica tramat (dithering) a la superfície i hi afegeix una textura cinematogràfica.

Relacionades

• Gra per capa i tramat de sortida

Passos

1. Activa 'El clic selecciona el grup' a la Configuració del document.
2. Fes clic per seleccionar el grup pare.
3. Fes doble clic per entrar a la capa interior.

Preguntes

Com selecciono un grup sencer en lloc d'una sola capa?

Activa 'El clic selecciona el grup' a la Configuració del document. El clic agafa el grup i el doble clic entra a la capa.

Relacionades

• Grups
• Selecció per rectangle (capes i nodes)

Passos

1. Cmd + Opció + clic (Ctrl + Alt al Windows) selecciona la capa següent sota el punter, un nivell més avall a cada clic.
2. Fes clic dret al llenç i obre Selecciona la capa per triar qualsevol capa sota el punter.
3. Fes doble clic en un grup o booleà per aïllar-lo: la resta s'enfosqueix i no es pot clicar. Prem Escape o Surt per tornar.
4. Prem Cmd + Y (Ctrl + Y) o fes servir Visualització → Vista de contorns per veure i clicar cada capa pel seu contorn.

Consells

• A la vista de contorns un clic tria la capa el contorn de la qual és sota el punter, així que les peces tapades per altres són fàcils d'abastar.

Preguntes

Com selecciono una capa que és sota una altra?

Fes Cmd + Opció + clic (Ctrl + Alt al Windows) per baixar per la pila, o fes clic dret i tria-la a Selecciona la capa.

La vista de contorns canvia el que exporto?

No. La vista de contorns i l'aïllament només canvien el que mostra el llenç mentre edites; les exportacions i miniatures mostren el disseny complet.

Relacionades

• El clic selecciona el grup
• Operacions booleanes (Unió, Resta, Intersecció, Exclusió)
• Grups

Passos

1. Fes servir les seccions 'Icona interior' i 'Altres capes' del tauler de capes.
2. Arrossega una capa d'una secció a l'altra per canviar-ne el mode de límit.
3. Les capes d'Icona interior es retallen amb la màscara; les d'Altres capes es renderitzen fins a la vora.

Consells

• Posa les resplendors i els fons a sang a 'Altres capes'.

Preguntes

Per què la forma de la icona em retalla la capa?

És a la secció 'Icona interior', que es retalla amb la màscara de la icona. Arrossega-la a 'Altres capes' perquè pugui arribar fins a la vora del llenç.

Relacionades

• Màscara de la icona (squircle, iOS, watchOS, cap)
• Tauler de capes amb reordenació per arrossegament

Passos

1. Afegeix capes des de la barra d'eines (forma, text, icona, imatge, camí…).
2. Edita cada tipus a la seva secció de l'inspector.
3. Converteix entre tipus quan calgui (p. ex. Forma → Camí per editar nodes).

Consells

• Les capes d'icona donen accés a una biblioteca de més de 200.000 glifs vectorials amb cercador.

Preguntes

Quins tipus de capes puc afegir?

Deu: imatge, emplenament sòlid, degradat, forma, camí, icona (Heroicons/Lucide), SVG, text, plantilla Liquid Glass i compostos booleans, cadascun amb els seus controls a l'inspector.

Puc editar una icona després de col·locar-la?

Sí, res no queda fixat. Les formes, els camins, el text i els materials continuen sent totalment editables fins a l'exportació.

Relacionades

• Tauler de capes amb reordenació per arrossegament
• Biblioteques d'icones integrades (Heroicons i Lucide)
• Operacions booleanes (Unió, Resta, Intersecció, Exclusió)

Passos

1. Obre la pestanya Capes del tauler.
2. Arrossega les files per reordenar-les o posar-les dins de carpetes (passa per sobre d'una carpeta plegada per desplegar-la).
3. Fes clic a l'ull per amagar una capa i al cadenat per bloquejar-la.

Consells

• Les carpetes de compostos booleans no accepten que hi deixis capes, així que entra-hi directament.

Preguntes

Com poso una capa darrere d'una altra?

Arrossega-la cap avall al tauler de capes. La fila de més amunt es mostra al davant. Deixa-la anar sobre una carpeta per posar-la a dins. O prem Cmd + [ / Cmd + ] (Ctrl a Windows i Linux) per moure-la un pas enrere o endavant; afegeix Opció (Maj a Windows i Linux) per portar-la fins al final.

Relacionades

• Carpetes
• Grups
• Copia / Enganxa, Duplicat intel·ligent i Transferència d'estil

Passos

1. Crea una carpeta des del tauler de capes o el menú contextual.
2. Arrossega-hi capes cap a dins o cap a fora.
3. Reanomena-la directament; duplica-la per clonar tot el subarbre.

Preguntes

Què passa si suprimeixo una carpeta?

Les seves capes es conserven i pugen un nivell. Només se suprimeix la carpeta.

Relacionades

• Tauler de capes amb reordenació per arrossegament
• Grups
• Grups de morph

Passos

1. Selecciona diverses capes (Shift-clic o selecció per rectangle).
2. Tria Agrupa a la barra d'eines o al menú contextual.
3. Desagrupa per recuperar les capes.

Preguntes

Com moc diverses capes alhora?

Selecciona-les i agrupa-les (menú contextual). Les transformacions i els estils s'apliquen llavors a tot el grup.

Relacionades

• Carpetes
• Grups de morph
• Liquid Glass de grup

Passos

1. Selecciona capes i tria 'Agrupa com a morph' a la barra d'eines.
2. Transforma el grup de morph com una unitat.
3. Desagrupa el grup de morph o dissol-lo per seleccionar-ne les capes.

Preguntes

Què és un grup de morph?

Un grup amb una identitat de morph compartida: les capes es mouen i s'escalen com una sola unitat. Desagrupar trenca la identitat; dissoldre selecciona les capes.

Relacionades

• Grups

Passos

1. Selecciona dues o més capes de forma, camí o SVG.
2. Tria Unió, Resta, Intersecció o Exclusió al menú booleà de la barra d'eines.
3. Entra al grup booleà per editar-ne els contorns; Escape en surt un nivell.

Consells

• L'operació de cada contorn es pot canviar més endavant.

Preguntes

Com retallo una forma d'una altra?

Selecciona totes dues i tria Resta (o Exclusió) al menú booleà. Continua viu: edita les formes d'origen i el resultat s'actualitza.

Com edito les formes que hi ha dins d'un resultat booleà?

Entra al grup booleà (amb doble clic o des del tauler de capes). Prem Escape per sortir-ne un nivell.

Relacionades

• Unió de formes
• Converteix en camí
• Edició de nodes del camí

Passos

1. Agrupa les capes que vulguis fusionar.
2. Tria 'Liquid Glass de grup' al menú contextual de la capa.
3. Ajusta el material de vidre del grup.

Preguntes

Com faig que diverses formes semblin un sol objecte de vidre?

Agrupa-les i aplica 'Liquid Glass de grup'. Les fusiona en una sola superfície de vidre sobre la silueta combinada.

Relacionades

• Material Vidre (Liquid Glass)
• Grups
• Capes de plantilla Liquid Glass

Passos

1. Selecciona les formes que vulguis unir.
2. Tria Uneix al menú contextual o a la barra d'eines.
3. Converteix-ho en camí per controlar node a node el contorn fusionat.

Preguntes

Com fusiono dues formes en un sol contorn?

Selecciona-les totes dues i fes servir Unió de formes. Converteix el resultat en camí per editar-lo node a node.

Relacionades

• Operacions booleanes (Unió, Resta, Intersecció, Exclusió)
• Converteix en camí

Passos

1. Copia, retalla i enganxa capes des del menú contextual, fins i tot entre pestanyes del navegador.
2. Mou o arrossega una capa i després fes un Duplicat intel·ligent: cada duplicat repeteix el mateix desplaçament.
3. Clic dret → Copia l'estil (Cmd + Option + C) i després Enganxa l'estil (Cmd + Option + V) en una altra capa, o copia les propietats d'una sola secció de l'inspector.

Consells

• El Duplicat intel·ligent és el clàssic patró de transformar i duplicar de les eines de disseny professionals.

Preguntes

Com copio l'aspecte d'una capa a una altra?

Fes clic dret a la capa amb estil → Copia l'estil i després Enganxa l'estil a la capa de destinació. Per copiar només l'emplenament, el traç o els efectes, fes servir 'Copia les propietats de …' en aquella secció de l'inspector.

Com faig duplicats espaiats uniformement?

Mou o arrossega una capa i després fes un Duplicat intel·ligent. Cada duplicat repeteix automàticament el mateix desplaçament.

Relacionades

• Tauler de capes amb reordenació per arrossegament
• Porta-retalls entre pestanyes i del sistema

Passos

1. Copia capes en una pestanya i enganxa-les en una altra pestanya de l'editor.
2. Copia codi SVG des de fora i enganxa'l al llenç per crear una capa.

Preguntes

Puc enganxar des de Figma?

Copia el disseny com a SVG i enganxa'l al llenç: l'art multicolor es converteix en capes i carpetes editables, i una icona d'un sol color en una capa SVG editable.

Relacionades

• Copia / Enganxa, Duplicat intel·ligent i Transferència d'estil
• Importació arrossegant i deixant anar (PNG, SVG, .icns, .icon)
• Importa SVG com a capes editables

Passos

1. Selecciona una capa i obre la secció Selecció de l'inspector.
2. Introdueix valors exactes, o arrossega l'etiqueta d'un camp numèric per ajustar-lo.
3. Activa 'Bloqueja les proporcions' per escalar de manera uniforme.

Consells

• Fes clic al botó de restabliment d'un camp per tornar al valor per defecte.

Preguntes

Com defineixo una mida o posició exacta?

Fes servir l'inspector de Selecció: Desplaçament X/Y, Amplada/Alçada, Escala % i Rotació accepten números exactes. Arrossega les etiquetes dels camps per ajustar els valors.

Relacionades

• Nanses de transformació al llenç
• Alinea i distribueix
• Capgira i reflecteix

Passos

1. Selecciona una forma i obre Cantonades a l'inspector.
2. Fes servir 'Defineix cada cantonada' per a radis per cantonada, o 'Enllaça totes les cantonades' per a un sol valor.
3. Activa Squircle per a una curvatura contínua i defineix els costats de la cantonada (nitidesa 2-12).
4. En un traçat, defineix el radi de la cantonada i apuja el Suavitzat (o fes clic a iOS) per a cantonades contínues.

Consells

• Squircle encaixa millor amb el llenguatge de formes d'Apple que no pas un radi gran normal.

Preguntes

Com aconsegueixo cantonades squircle a l'estil d'iOS?

Selecciona la forma i activa Squircle a la configuració de les cantonades. 'Costats de la cantonada' (2-12) controla com de tancada és la curvatura contínua.

Puc arrodonir només algunes cantonades?

Sí, activa 'Defineix cada cantonada' i ajusta TL/TR/BR/BL de manera independent.

Relacionades

• Formes predefinides
• Màscara de la icona (squircle, iOS, watchOS, cap)

Passos

1. Selecciona una o més capes.
2. Fes servir Capgira X / Capgira Y a l'inspector, o Reflecteix horitzontalment / verticalment a la barra d'eines.

Preguntes

Com emmirallo una forma?

Capgira X / Capgira Y a l'inspector de Selecció. Per emmirallar una selecció respecte de tot el llenç, fes servir Reflecteix a la barra d'eines.

Relacionades

• Alinea i distribueix
• Transformació (posició, mida, escala, rotació)

Passos

1. Selecciona una capa per veure'n les nanses.
2. Arrossega cantonades o vores per redimensionar; arrossega just fora d'una cantonada per girar.
3. Les tecles de fletxa la desplacen 1px (Shift = 10px).

Preguntes

Com giro una capa?

Arrossega just fora d'una nansa de cantonada del quadre de selecció, o escriu un angle exacte a l'inspector de Selecció.

Relacionades

• Transformació (posició, mida, escala, rotació)
• Selecció per rectangle (capes i nodes)

Passos

1. Selecciona dues o més capes (o una sola per alinear-la al llenç).
2. Fes servir els botons d'alineació de la barra d'eines.
3. Fes servir Distribueix verticalment / horitzontalment per a un espaiat uniforme.

Consells

• L'ajustament també t'indica quan l'espaiat és igual mentre arrossegues.

Preguntes

Com centro una capa a la icona?

Selecciona la capa i fes servir Alinea al centre + Alinea al mig. Una selecció d'una sola capa s'alinea al llenç.

Relacionades

• Ajustament
• Transformació (posició, mida, escala, rotació)

Passos

1. Selecciona una capa i tria l'eina Distorsió (D).
2. Arrossega les quatre cantonades per deformar la capa.
3. Fes servir 'Restableix la distorsió' per tornar a un pla recte.

Preguntes

Com poso la meva icona sobre una superfície inclinada?

Fes servir l'eina Distorsió (D) i arrossega les cantonades perquè encaixin amb la perspectiva de la superfície. 'Restableix la distorsió' ho desfà.

Relacionades

• Eines vectorials (Selecció, Edita els punts, Formes, Ploma, Llapis, Línia, Distorsió)
• Nanses de transformació al llenç

Passos

1. Tria una eina de la barra d'eines (o prem V / A / R / O / P / N / L / D); les altres eines de forma són al menú Més eines, i el Llapis comparteix el lloc de la Ploma.
2. Ploma: fes clic per a cantonades i arrossega per a corbes (Opció/Alt trenca la nansa, Espai mou el punt, Shift manté 45°); fes clic al primer punt per tancar; Enter, Escape o un doble clic acaben i conserven el camí.
3. Línia: arrossega per dibuixar; Shift restringeix l'angle.
4. Edita els punts: arrossega nodes i nanses (en una forma, pregunta abans de convertir-la en camí); Distorsió: arrossega les quatre cantonades per deformar.

Consells

• Primer converteix el text o l'SVG en camí per editar-ne els nodes.
• Fes una selecció per rectangle de nodes per moure'ls junts.

Preguntes

Com dibuixo una forma personalitzada?

Fes servir l'eina Ploma: fes clic per a cantonades i arrossega per a corbes, fes clic al primer punt per tancar, o prem Enter o Escape per acabar un camí obert. Cada dibuix és una capa nova; per retallar un forat en un camí, tria la Ploma mentre n'edites els punts. L'eina Línia dibuixa segments rectes i el Llapis dibuixa a mà alçada.

Com edito els nodes d'una forma?

Selecciona la forma i prem Enter (o tria Edita el camí / A) per editar nodes i nanses. Enter o Escape per sortir.

Relacionades

• Edició de nodes del camí
• Converteix en camí
• Entrellaçat (camins que es creuen)
• Distorsió de perspectiva

Passos

1. Prem R (Rectangle) o O (El·lipse), o tria Polígon o Estrella al menú Més eines.
2. Arrossega al llenç: mantén premuda Maj per a un quadrat, un cercle o una forma regular i Alt per dibuixar des del centre; ↑ / ↓ canvien els costats d'un polígon o les puntes d'una estrella mentre arrossegues. Un clic col·loca una forma de la mida predeterminada.
3. Edita els costats, el radi interior d'una estrella, el radi de les cantonades o l'inici, el recorregut i l'anell d'una el·lipse a la secció Forma de l'inspector.
4. Fes doble clic en una eina de forma (o activa Mantén l'eina seleccionada) per dibuixar diverses formes seguides; Escape torna a Selecció.
5. O arrossega els tiradors d'una el·lipse, polígon o estrella seleccionats: l'inici i el final de l'arc, l'anell, la profunditat de l'estrella i el radi de cantonada (Maj per a passos de 15° o del 5 %).

Consells

• Les formes s'ajusten a les vores i als centres de les altres capes i al llenç; desactiva l'ajustament al menú Visualització per col·locar-les lliurement.
• Editar els punts d'una forma generada la converteix en un camí normal, i en desapareixen els controls de Forma.

Preguntes

Com faig un anell o el cèrcol d'una lent?

Dibuixa una el·lipse (O, amb Maj per a un cercle) i puja Anell a la secció Forma de l'inspector. Baixa Recorregut per a un arc o un indicador.

Com dibuixo diverses formes sense tornar a triar l'eina?

Fes doble clic a l'eina de la barra o activa Mantén l'eina seleccionada al menú Més eines. Apareix un petit cadenat a l'eina; Escape torna a Selecció.

Relacionades

• Eines vectorials (Selecció, Edita els punts, Formes, Ploma, Llapis, Línia, Distorsió)
• Formes predefinides
• Radis de les cantonades i cantonades squircle
• Edició de nodes del camí

Passos

1. Tria el Llapis al lloc de la Ploma de la barra d'eines (o prem N).
2. Dibuixa un traç. Acaba a prop d'on has començat per tancar-lo en una forma plena.
3. Mantén Shift per dibuixar segments rectes.
4. Ajusta el Suavitzat a la barra sobre el llenç (hi continua encara que amaguis les pistes): baix segueix cada tremolor, alt dona la corba més suau.

Consells

• Fes servir Edita els punts (A) després per afinar la corba.
• El valor de Suavitzat es recorda en aquest navegador.

Preguntes

Per què el meu dibuix té tan pocs punts?

El Llapis ajusta corbes suaus al teu traç i només conserva els nodes necessaris dins la tolerància de suavitzat, perquè el camí sigui fàcil d'editar. Abaixa el Suavitzat per seguir el traç més de prop.

Relacionades

• Eines vectorials (Selecció, Edita els punts, Formes, Ploma, Llapis, Línia, Distorsió)
• Edició de nodes del camí

Passos

1. Prem Enter sobre un camí (o tria Edita el camí) per entrar a l'edició de nodes.
2. Arrossega nodes, nanses o segments (un segment es corba); fes doble clic en un node per alternar entre cantonada i suau, o tria'n el tipus al menú del clic dret.
3. Fes Option-clic en un node per suprimir-lo; Shift-clic en una vora per afegir-ne un.
4. Cmd+J uneix els extrems seleccionats; Shift+Delete trenca la continuïtat, Delete suprimeix netament.
5. Selecciona nodes i fes servir 'Amplia el radi de cantonada' per arrodonir cantonades en corbes.
6. Selecciona dos o més punts i arrossega el quadre que els envolta: les cantonades i els costats escalen (Maj: proporcionalment, Alt: des del centre) i el tirador superior gira.

Consells

• Els punts suaus mantenen les corbes suaus amb nanses de llargada pròpia; els simètrics a més igualen les llargades; les nanses independents creen punxes.
• L'ajustament de nodes alinea els nodes amb la geometria propera.

Preguntes

Com afegeixo o suprimeixo nodes d'un camí?

Al mode Edita el camí, fes Shift-clic en una vora per afegir un node i Option-clic en un node per suprimir-lo.

Com obro un camí?

Selecciona el node o els nodes i prem Shift+Delete per trencar la continuïtat. Delete, sense més, suprimeix el node i manté el camí continu.

Com arrodoneixo la cantonada entre dues corbes?

Selecciona el node i fes servir 'Amplia el radi de cantonada' a la secció Camí.

Relacionades

• Eines vectorials (Selecció, Edita els punts, Formes, Ploma, Llapis, Línia, Distorsió)
• Converteix en camí
• Entrellaçat (camins que es creuen)
• Operacions de camí (contornejar el traç, desplaçar, simplificar, camins compostos)

Passos

1. Selecciona una capa de forma, SVG o text.
2. Tria 'Converteix en camí' (o 'Edita els nodes') a la secció Camí.
3. Confirma la finestra emergent de forma a camí si apareix, i després edita els nodes lliurement.

Consells

• Guarda'n una còpia sense convertir si més endavant vols canviar el text.

Preguntes

Com edito el contorn del meu text?

Selecciona la capa de text i fes Converteix en camí. Les lletres es converteixen en contorns editables que pots modelar node a node.

Relacionades

• Edició de nodes del camí
• Capes de text
• Vectoritza una imatge a SVG

Passos

1. Copia el disseny com a SVG a Figma, Illustrator o Sketch, o exporta un fitxer .svg.
2. Enganxa'l al llenç o deixa-hi anar el fitxer.
3. Edita les capes i carpetes que crea, o fes clic a 'Importa com a imatge' a l'avís per conservar-lo com una sola imatge.

Consells

• Els fitxers molt detallats fusionen formes veïnes del mateix color en una sola capa; per sobre de 300 capes s'importen com a imatge.

Preguntes

Per què el meu SVG ha arribat com una sola capa?

Un SVG que pinta un sol color pla s'importa com una capa SVG que pots tornar a acolorir; fes servir Converteix en camí per editar-ne el contorn. Els dissenys multicolor s'importen com a capes separades.

Què no es conserva?

Els filtres que no siguin desenfocament o ombres exteriors o interiors, les màscares suaus, els emplenaments de patró i d'imatge, les imatges incrustades i el text editable. L'avís d'importació enumera el que s'ha quedat fora.

Relacionades

• Porta-retalls entre pestanyes i del sistema
• Importació arrossegant i deixant anar (PNG, SVG, .icns, .icon)
• Converteix en camí
• Edició de nodes del camí

Passos

1. Selecciona una forma o un camí i obre Operacions de camí a la barra d'eines, Camí al menú contextual de la capa, o cerca-ho a la paleta d'ordres (Cmd + K).
2. Tria una operació. Desplaça el camí… i Simplifica… obren un petit diàleg que mostra el resultat (la mida o el nombre de nodes) abans d'aplicar-lo: defineix la distància (negativa per encongir) i les cantonades, o la tolerància, i prem Aplica.
3. Crea un camí compost uneix formes en un sol camí (les formes dins d'altres es tornen forats); Allibera el camí compost separa cada subcamí en la seva pròpia capa.

Consells

• Suavitza només actua sobre els punts seleccionats mentre edites punts.
• La llista Subcamins de la secció Camí i traç decideix quins subcamins d'un camí compost omplen i quins fan forats.

Preguntes

Com converteixo un traç en una forma?

Selecciona la capa i tria Camí → Contorneja el traç (Cmd + Option + O). El traç es converteix en un camí ple al qual pots canviar el color, donar un material o retallar amb operacions booleanes.

Com faig una còpia més fina o més gruixuda del contorn d'una forma?

Tria Camí → Desplaça el camí…, escriu una distància (negativa per encongir), tria cantonades arrodonides o en punta i deixa activat Conserva l'original per obtenir una capa nova al costat de l'original.

Relacionades

• Edició de nodes del camí
• Repeteix (matrius radials, en graella i concèntriques)
• Operacions booleanes (Unió, Resta, Intersecció, Exclusió)
• Traç (posició, extrems, unions, guions, degradats, desenfocament)

Passos

1. Selecciona una forma o un camí i tria Camí → Repeteix… (menú contextual de la capa o el menú Operacions de camí de la barra d'eines).
2. Tria Radial, Graella o Concèntric i ajusta les còpies, els espais o el pas dels anells mentre el llenç mostra el resultat.
3. Tria el centre i el resultat (una capa, capes separades o forats retallats en una altra capa) i prem Aplica.

Consells

• Desactiva Gira les còpies per mantenir drets els forats o punts al voltant d'un cercle.
• Un escombratge de menys de 360° inclou els dos extrems, útil per a les marques d'un indicador.

Preguntes

Com faig la reixeta d'un altaveu o d'un micròfon?

Dibuixa un cercle petit i el cos de la reixeta, selecciona el cercle i tria Repeteix…, escull Graella amb la disposició Bresca i posa Resultat a «Retalla forats a» el cos. Només es conserven els forats sencers dins del cos, i tots viuen a la mateixa capa del cos.

Com repeteixo el mateix patró en una altra forma?

Selecciona la forma nova i tria Camí → Torna a repetir. Reutilitza la configuració de l'última repetició.

Relacionades

• Edició de nodes del camí
• Eines de forma (Rectangle, El·lipse, Polígon, Estrella)
• Operacions booleanes (Unió, Resta, Intersecció, Exclusió)

Passos

1. Selecciona els camins superposats i tria Entrellaça.
2. Fes clic en un encreuament per canviar quin fil passa per sobre.
3. Treu l'entrellaçat per recuperar els camins originals.

Consells

• Ideal per a monogrames i marques en forma de nus.

Preguntes

Com faig línies entrellaçades?

Selecciona camins superposats i aplica Entrellaça. Cada encreuament es converteix en un interruptor: fes-hi clic per decidir quin fil queda a sobre.

Relacionades

• Edició de nodes del camí
• Eines vectorials (Selecció, Edita els punts, Formes, Ploma, Llapis, Línia, Distorsió)

Passos

1. Obre el menú + de la barra d'eines (per dibuixar una forma de la mida que vulguis, fes servir les eines de forma: R, O).
2. Fes clic en una forma predefinida per afegir-la com a capa de forma.
3. Edita el radi, l'emplenament, el traç i el material a l'inspector.

Preguntes

Com afegeixo un cercle o una píndola?

Fes servir el menú de formes de la barra d'eines: rectangle arrodonit, cercle, píndola, triangle, rombe i hexàgon estan a un sol clic.

Relacionades

• Eines de forma (Rectangle, El·lipse, Polígon, Estrella)
• Radis de les cantonades i cantonades squircle
• Emplenament (sòlid i multidegradat)
• Materials (Pla, Argila, Vidre, Relleu)

Passos

1. Obre la secció Emplenament de l'inspector.
2. Tria Sòlid o Degradat; afegeix diversos degradats per apilar-los.
3. Edita les parades a la barra del degradat o amb les nanses del degradat al llenç.

Consells

• Les nanses al llenç et permeten arrossegar directament la geometria dels degradats lineals i radials.

Preguntes

Puc posar més d'un degradat en una forma?

Sí. La pila de multidegradats de la secció Emplenament admet diversos degradats en una sola capa, cadascun amb el seu tipus, angle i espai de color.

Com faig una forma només amb traç?

Desactiva l'Emplenament a la secció Emplenament i dona estil al Traç.

Relacionades

• Controls de degradat (lineal/radial/cònic, oklab/oklch)
• Traç (posició, extrems, unions, guions, degradats, desenfocament)
• Emplenament superposat a la imatge

Passos

1. Selecciona un emplenament o un traç amb degradat.
2. Edita les parades a l'editor de parades; arrossega les nanses al llenç per a la geometria.
3. Posa la interpolació en oklab o oklch per a mescles intermèdies més vives.

Consells

• Els degradats radials mostren el centre, el radi i l'el·lipse (proporció, rotació) com a números i com a nanses; els cònics, el centre i l'angle inicial.

Preguntes

Per què els colors del meu degradat es veuen apagats al mig?

Canvia la interpolació de RGB clàssic a oklab o oklch. Mantenen les mescles vives en lloc de passar pel gris.

Com canvio l'angle d'un degradat?

Fes servir el camp d'angle dels controls de degradat, o arrossega les nanses del degradat lineal al llenç.

Com faig un anell de metall raspallat o un objectiu de càmera?

Posa el tipus de degradat a Cònic i alterna parades clares i fosques (o comença amb el valor predefinit Brushed Metal). Arrossega el centre i el control d'angle al llenç; apila-hi a sobre un radial aixafat per a la brillantor.

Relacionades

• Emplenament (sòlid i multidegradat)
• Fons del llenç (sòlid, degradat, malla de taques)

Passos

1. Obre la secció Traç i activa-la.
2. Defineix el gruix, el color (sòlid o degradat) i la posició (interior/exterior/centre).
3. Tria els extrems (arrodonits, quadrats o plans; tanquen els camins oberts i cada guió) i les unions (en punta, arrodonides o bisellades; el límit de punta talla en pla les cantonades molt agudes).
4. A Guions tria Discontinu, Puntejat o Personalitzat: escriu les longituds de guió i d'espai en px (p. ex. 8 4) i fes-les lliscar pel contorn amb Desplaçament dels guions.
5. Activa el desenfocament de fons del traç per a un anell de vidre glaçat.

Consells

• El desenfocament de fons del traç fa que l'anell sembli glaçat sobre el que tingui al darrere.
• Les unions, el límit de punta i els guions s'apliquen als contorns de formes i camins; el traç d'una icona o d'un SVG creix a partir de la seva il·lustració.

Preguntes

Com afegeixo un contorn dins de la forma?

Activa Traç i posa Posició a 'interior'. 'exterior' el dibuixa per fora de la vora i 'centre' queda a cavall de la vora.

Els traços poden ser degradats?

Sí. Canvia el tipus de traç a degradat i edita'n les parades i la interpolació com en qualsevol emplenament.

Com faig un contorn discontinu o puntejat?

Als controls de Traç posa Guions a Discontinu o Puntejat, o a Personalitzat per escriure les teves pròpies longituds de guió i d'espai en px (p. ex. 8 4). Un guió de 0 amb extrems arrodonits dibuixa punts; Desplaçament dels guions fa lliscar el patró pel contorn.

Relacionades

• Emplenament (sòlid i multidegradat)
• Vora de la icona
• Desenfocament del fons (backdrop blur)
• Operacions de camí (contornejar el traç, desplaçar, simplificar, camins compostos)

Passos

1. Selecciona una capa d'imatge.
2. Defineix el tipus d'emplenament i tria un color o un degradat superposat.
3. Només es tenyeixen els píxels opacs; la transparència es conserva.

Preguntes

Com canvio el color d'un PNG sense Photoshop?

Selecciona la capa d'imatge i fes servir l'emplenament superposat. Tenyeix els píxels opacs amb un color sòlid o un degradat i manté intacta la transparència.

Relacionades

• Emplenament (sòlid i multidegradat)
• Elimina el fons (4 tècniques)

Passos

1. Selecciona una capa de forma, camí, text o SVG.
2. Obre la secció Material i tria Pla, Argila, Vidre o Relleu.
3. Ajusta els controls lliscants del material (consulta les funcions Vidre/Argila/Relleu).

Consells

• Combina'l amb Document → Reflexió per donar brillantor a tota la icona.
• El mode Bàsic mostra les macros Vidre / Volum / Ombra.

Preguntes

Com faig una icona amb aspecte de vidre o 3D?

Selecciona la capa i posa Material a Vidre o Argila. El Vidre refracta el que té al darrere; l'Argila dona un aspecte de plastilina tova; el Relleu grava la forma a la superfície del darrere.

Quins materials es poden combinar?

Un material per capa (Pla, Argila, Vidre i Relleu són excloents entre si), però les capes s'apilen, així que pots posar vidre sobre capes d'argila. Fes servir Liquid Glass de grup per fusionar diverses capes en una sola superfície de vidre.

Relacionades

• Material Vidre (Liquid Glass)
• Material d'argila
• Material de relleu
• Controls lliscants macro del mode Bàsic (Vidre, Volum, Ombra)
• Estils predefinits de material
• Reflexió procedural (brillantor global Liquid Glass)

Passos

1. Posa el Material d'una capa a Vidre.
2. Ajusta Bisell, Gruix i Curvatura per al cos del vidre.
3. Afegeix Gelada per a un aspecte lletós i Croma per a una refracció amb vores de colors.
4. Activa Especular oposat + amplada per a l'efecte de reflexos bessons.
5. Fes servir el color/intensitat del Tint per a vidre de color; enllaça l'angle de llum amb la llum del llenç perquè les capes siguin coherents.

Consells

• Un mapa de profunditat dona a la refracció una silueta 3D de debò.
• 'Material al traç' pinta el material només al contorn.

Preguntes

Com faig una icona Liquid Glass?

Posa Material → Vidre, puja el Gruix i la Curvatura, afegeix una mica de Croma i de Gelada, i activa Especular oposat per als reflexos bessons a les vores, com els d'Apple. Document → Reflexió hi afegeix la brillantor global.

Què fa el Croma al material de vidre?

El Croma és aberració cromàtica. Separa els colors a les vores del vidre per crear una franja refractiva, com la d'un prisma.

Relacionades

• Materials (Pla, Argila, Vidre, Relleu)
• Mapa de profunditat per al vidre
• Reflexió procedural (brillantor global Liquid Glass)
• Liquid Glass de grup
• Il·luminació global i per capa

Passos

1. Posa el Material d'una capa a Argila.
2. Ajusta Bisell, Gruix i Curvatura per definir el volum.
3. Fes servir Suavitat i Enfosquiment de les vores per modelar les ombres.
4. Ajusta la Refracció del cos/de la vora per a aspectes d'argila translúcida.

Consells

• Enllaça la parella especular per a un sol reflex; desenllaça-la per a una il·luminació amb dues fonts.

Preguntes

Com faig una icona d'argila o inflada en 3D?

Material → Argila. Puja el Gruix i baixa la Suavitat per a un volum de plastilina més definit; l'Enfosquiment de les vores afegeix ombra de contacte. El control lliscant 'Volum' del mode Bàsic fa el mateix amb un sol control.

Relacionades

• Materials (Pla, Argila, Vidre, Relleu)
• Controls lliscants macro del mode Bàsic (Vidre, Volum, Ombra)
• Estils predefinits de material
• Il·luminació global i per capa

Passos

1. Posa el Material d'una capa a Relleu.
2. Ajusta la Profunditat per decidir com de gravat es veu.
3. Fes servir l'amplada del Bisell i la Suavitat per controlar l'ombrejat de la vora.

Preguntes

Com faig una icona en baix relleu o gravada?

Material → Relleu. La forma apareix gravada en allò que tingui al darrere; Profunditat i Bisell controlen el gravat.

Relacionades

• Materials (Pla, Argila, Vidre, Relleu)

Passos

1. Defineix l'angle de llum a Configuració del document o a la secció Material.
2. Activa 'usa la llum del llenç' en una capa perquè segueixi l'angle global, o dona-li el seu propi angle.
3. Activa 'Limita a la màscara' per retallar els reflexos a la forma de la icona.

Consells

• Una llum a 315° (a dalt a l'esquerra) segueix les convencions d'il·luminació de les icones de macOS.

Preguntes

Com mantinc els reflexos coherents entre capes?

Activa 'usa la llum del llenç' a cada capa amb material perquè totes segueixin l'angle de llum global del document.

Relacionades

• Material Vidre (Liquid Glass)
• Material d'argila
• Reflexió procedural (brillantor global Liquid Glass)

Passos

1. Selecciona una capa amb material Vidre.
2. Obre Mapa de profunditat i fes clic a Genera.
3. Ajusta Profunditat i Suavitzat per modelar el camp de gruix.

Preguntes

El meu vidre es veu pla. Com ho arreglo?

Genera un mapa de profunditat per a la capa de vidre (Material → Mapa de profunditat). Dona a la refracció una silueta 3D arrodonida; Profunditat i Suavitzat controlen l'efecte.

Relacionades

• Material Vidre (Liquid Glass)

Passos

1. Selecciona una capa de forma.
2. Ajusta 'Desenfocament del fons' a l'àrea de material/efectes.
3. Col·loca la capa sobre un fons colorit per veure l'efecte glaçat.

Preguntes

Com faig un vidre glaçat que desenfoqui el fons?

Puja 'Desenfocament del fons' a la capa. Desenfoca tot el que hi ha darrere la silueta (0-5), com els materials glaçats de macOS.

Relacionades

• Material Vidre (Liquid Glass)
• Desenfocament de capa i Resplendor
• Traç (posició, extrems, unions, guions, degradats, desenfocament)

Passos

1. Canvia l'inspector al mode Bàsic.
2. Arrossega Vidre, Volum o Ombra.
3. Obre el mode Avançat quan vulguis. Tots els valors subjacents es mantenen intactes.

Preguntes

Els controls lliscants de material em superen. Per on començo?

Per les tres macros del mode Bàsic: Vidre, Volum i Ombra. Ajusten molts paràmetres alhora i són totalment reversibles.

Relacionades

• Materials (Pla, Argila, Vidre, Relleu)
• Estils predefinits de material

Passos

1. Selecciona una o més capes.
2. Obre el menú d'estils predefinits.
3. Fes clic en un estil (p. ex. frostedGlass) i continua afinant els controls lliscants del material.

Consells

• L'assistent d'IA també pot aplicar estils: 'Fes-ho de vidre glaçat'.

Preguntes

Hi ha una manera ràpida d'aconseguir un aspecte de material professional?

Aplica un estil predefinit (glossy3d, softClay, pillow, ceramic, liquidGlassLook, frostedGlass, crystal, chrome) a la selecció i després afina'l.

Relacionades

• Materials (Pla, Argila, Vidre, Relleu)
• Plantilles i punts de partida

Passos

1. Selecciona les capes que vols canviar i obre Estils a l'inspector.
2. Fes clic en un acabat per aplicar-lo, o desa l'aspecte de la capa seleccionada amb un nom per reutilitzar-lo més endavant.
3. O prem I (Iguala l'estil) i fes clic a la capa de la qual la selecció ha de prendre l'aspecte.

Consells

• Canvia el nom d'un estil desat o elimina'l des del seu menú a la secció Estils.

Preguntes

Com faig que diverses peces tinguin el mateix aspecte?

Selecciona-les, prem I i fes clic a la peça que ja té l'aspecte. L'emplenament, el traç, les ombres, els efectes i el material es copien en un sol pas de desfer; les formes i les posicions no canvien.

On es desen els meus estils?

En aquest navegador (el seu emmagatzematge local), així que hi són a tots els documents que hi obris. Encara no se sincronitzen amb el teu compte, i esborrar les dades del lloc al navegador els elimina.

Relacionades

• Copia / Enganxa, Duplicat intel·ligent i Transferència d'estil
• Estils predefinits de material
• Materials (Pla, Argila, Vidre, Relleu)
• Eines vectorials (Selecció, Edita els punts, Formes, Ploma, Llapis, Línia, Distorsió)

Passos

1. Afegeix una capa de plantilla Liquid Glass.
2. Tria una plantilla: liquidGlass, frostedMetal, deepShadow, sideGlow o custom.
3. Activa o desactiva les variants d'efecte i ajusta'n la intensitat.

Consells

• Comença des d'una plantilla i posa-hi el teu propi disseny a sota.

Preguntes

Què són les capes de plantilla Liquid Glass?

Piles d'efectes de vidre ja fetes (liquidGlass, frostedMetal, deepShadow, sideGlow o custom) amb interruptors per a l'especular superior, l'ombra interior, la llum de vora, la reflexió lateral i la lluïssor metàl·lica.

Relacionades

• Material Vidre (Liquid Glass)
• Liquid Glass de grup
• Plantilles i punts de partida

Passos

1. Crea un document nou.
2. Tria En blanc, una plantilla o un fons, o canvia a Les meves plantilles o Comunitat.
3. Desa qualsevol document com a plantilla des del seu menú a la pàgina de documents ('Desa com a plantilla').
4. Canvia l'art pel teu i torna a ajustar els materials.

Consells

• Desa un document acabat com a plantilla per reutilitzar-ne la configuració en tot un conjunt d'icones.

Preguntes

Teniu plantilles d'icones per començar?

Sí. El selector de document nou té plantilles d'icones dissenyades, fons degradats i sòlids, les teves pròpies plantilles desades i tots els projectes de la comunitat. S'obren com a documents totalment editables amb els materials ja preparats.

Relacionades

• Estils predefinits de material
• Fons predefinits
• Galeria de la comunitat (explora, m'agrada, comenta, duplica)

Passos

1. Selecciona una capa → Efectes.
2. Ajusta 'Desenfocament de capa' per suavitzar, o activa Resplendor.
3. Ajusta el radi, la intensitat i el llindar de la Resplendor; tenyeix-la o fes servir els colors de la mateixa capa.

Consells

• Posa una còpia desenfocada a 'Altres capes' per a un bloom exterior personalitzat.

Preguntes

Com afegeixo una resplendor darrere la forma de la icona?

Efectes → Resplendor. Puja el radi i la intensitat; abaixa el llindar perquè hi contribueixi més part de la forma. Fes servir un color de tint per a un aspecte de neó.

Relacionades

• Diverses ombres exteriors i interiors
• Gra per capa i tramat de sortida
• Desenfocament del fons (backdrop blur)

Passos

1. Selecciona una capa → Ombres.
2. Afegeix ombres i defineix el tipus (exterior/interior), el color, el desenfocament, l'expansió i el desplaçament.
3. Fes servir 'usa el color de la capa' o 'usa el color de l'entorn' per a un ombrejat automàtic; la primera ombra exterior controla l'ombra projectada del vidre.

Consells

• Apila dues ombres (una ajustada i una àmplia) per a una profunditat de contacte convincent.

Preguntes

Com afegeixo una ombra projectada suau?

Efectes → Ombres → afegeix una ombra exterior. Puja el desenfocament i abaixa l'opacitat per suavitzar-la; 'usa el color de l'entorn' ombreja a partir del que hi ha sota la capa.

Per què l'ombra no es veu a través del vidre?

Activa 'mostra darrere les zones transparents' perquè l'ombra es filtri per les parts transparents. Així és com el vidre projecta una ombra real.

Relacionades

• Desenfocament de capa i Resplendor
• Material Vidre (Liquid Glass)

Passos

1. Selecciona una capa → Efectes → Gra.
2. Ajusta la intensitat, l'escala i la llavor.
3. Activa el tramat de sortida per exportar degradats nets.

Preguntes

Com afegeixo textura a un color pla?

Efectes → Gra en aquella capa. La intensitat, l'escala i la llavor són ajustables.

Relacionades

• Gra del document
• Desenfocament de capa i Resplendor

Passos

1. Selecciona una capa → Efectes → Destell de lent.
2. Ajusta la intensitat.
3. Tria 'usa la llum del llenç' o defineix un angle personalitzat.

Preguntes

Com afegeixo una espurna o un destell a la icona?

Efectes → Destell de lent. Ajusta la intensitat i deixa que segueixi la llum del llenç, o dona-li el seu propi angle.

Relacionades

• Il·luminació global i per capa
• Reflexió procedural (brillantor global Liquid Glass)

Passos

1. Selecciona una capa → Efectes → Adhesiu.
2. Ajusta l'amplada i el color de la vora.
3. Afegeix Holo (amb angle/escala), Ombra corba i Desenganxat (angle/rull) al teu gust.

Preguntes

Com faig que la icona sembli un adhesiu retallat?

Efectes → Adhesiu: afegeix una vora i després hi sumes la làmina holo, l'ombra corba i l'efecte de desenganxat.

Relacionades

• Diverses ombres exteriors i interiors
• Vora de la icona

Passos

1. Obre la secció Shaders (per capa, o a nivell de llenç/fons).
2. Afegeix passades des de la Biblioteca de shaders, o escriu GLSL al modal de codi.
3. Exposa paràmetres com a uniforms per obtenir controls lliscants i selectors de color automàticament.
4. Fes servir 'Genera amb IA' per descriure un efecte i obtenir un shader.

Consells

• uBackdrop dona als shaders accés al que hi ha darrere la capa.
• Els shaders s'apilen, així que l'ordre importa.

Preguntes

Puc escriure els meus propis shaders?

Sí. La secció Shaders accepta passades de fragment GLSL ES 3.00. Els uniforms que exposis es converteixen en controls lliscants o selectors de color. Inclou una biblioteca de predefinits (semitò, pixelat, CRT, duotò…).

Com afegeixo un efecte de semitò o CRT?

Obre la Biblioteca de shaders i tria semitò o CRT. S'afegeixen com a passades editables amb controls lliscants.

Relacionades

• Desenfocament de capa i Resplendor

Passos

1. Afegeix una capa de text des de la barra d'eines.
2. Fes-hi doble clic al llenç (o prem Enter) per escriure.
3. Defineix la font (selector de Google Fonts), la mida, el gruix, l'espaiat i l'alineació a la secció Text.
4. Defineix una amplada del quadre de text perquè s'ajusti; tria l'ajust per paraula o per caràcter.

Consells

• Google Fonts es carrega sota demanda, així que pots explorar tota la biblioteca.

Preguntes

Com afegeixo text a la icona?

Afegeix una capa de text i fes-hi doble clic al llenç per escriure. La secció Text té font, mida, gruix, espaiat, alineació i ajust de línia.

Com faig que el text ocupi diverses línies?

Defineix una amplada del quadre de text a la secció Text i tria l'ajust per paraula o per caràcter.

Com edito la forma de cada lletra?

Primer converteix el text en camí ('Converteix en camí') perquè les lletres es tornin contorns editables.

Relacionades

• Converteix en camí
• Emplenament (sòlid i multidegradat)
• Traç (posició, extrems, unions, guions, degradats, desenfocament)

Passos

1. Afegeix una capa d'icona i cerca a la biblioteca.
2. Col·loca el glif i canvia'n l'estil (emplenament, traç, material).
3. Converteix-lo en camí per personalitzar-lo node a node.

Preguntes

Hi ha una biblioteca d'icones que pugui fer servir?

Sí. Heroicons i Lucide hi són integrades, amb una biblioteca vectorial de més de 200k glifs que pots cercar des de la barra d'eines i l'assistent d'IA.

Relacionades

• 10 tipus de capa

Passos

1. Arrossega un fitxer sobre el llenç i deixa'l anar.
2. Els PNG/SVG es converteixen en capes; els .icns es despleguen en imatges.
3. Un .icon d'Icon Composer s'obre com un document complet amb capes.

Consells

• També pots enganxar SVG des del porta-retalls.

Preguntes

Quins fitxers puc deixar anar a l'editor?

SVG, PNG, .icns i paquets .icon d'Icon Composer. Les imatges es converteixen en capes; els paquets .icon s'obren com un document complet i editable.

Puc obrir un fitxer d'Icon Composer d'Apple?

Sí, deixa anar el paquet .icon al llenç. Importa les capes i t'avisa de les substitucions del mode Transparent, les capes soltes, els recursos que falten i els grups imbricats que no pot traslladar 1:1.

Relacionades

• Porta-retalls entre pestanyes i del sistema
• Importa SVG com a capes editables
• Paquets .icon d'Icon Composer (obrir i exportar)
• Substitueix la imatge i versions generades

Passos

1. Selecciona una capa d'imatge → Substitueix.
2. Tria un fitxer nou (o una altra versió generada).
3. Els estils, les màscares i les transformacions es mantenen.

Preguntes

Com canvio la imatge però mantinc els efectes?

Fes servir Substitueix a la capa d'imatge. Es conserven els estils, les màscares i les transformacions.

Relacionades

• Importació arrossegant i deixant anar (PNG, SVG, .icns, .icon)
• Retall / marge de màscara

Passos

1. Selecciona una capa d'imatge.
2. Defineix els valors del marge de màscara per a cada costat.
3. Esborra el marge per recuperar el mapa de bits complet.

Preguntes

Com retallo la capa d'imatge?

Fes servir els controls de marge de màscara de la capa d'imatge per retallar cada costat per separat. Posa els marges a 0 per desfer-ho.

Relacionades

• Màscares (edita la màscara, usa com a màscara, màscara de filtre)
• Substitueix la imatge i versions generades

Passos

1. Edita la màscara: selecciona una capa d'imatge i entra a l'edició de màscara; pinta/esborra l'alfa; Fet per acabar (o Enter).
2. Usa com a màscara: clic dret en una capa → 'Usa com a màscara' per retallar una altra capa amb la seva geometria; 'Esborra la màscara' per treure-la.
3. Màscara de filtre: assigna una font de màscara de filtre perquè els efectes només s'apliquin a dins (o a fora, amb inversió).

Consells

• Les màscares de filtre són perfectes per a resplendors que només han d'aparèixer darrere d'un objecte.

Preguntes

Com esborro part d'una capa d'imatge?

Entra a l'edició de màscara de la capa (prem Enter a sobre) i pinta/esborra l'alfa. 'Edita la màscara' / 'Acaba d'editar la màscara' activa i desactiva el mode.

Com faig que una forma en retalli una altra?

Clic dret a la forma que retalla → 'Usa com a màscara'. Es converteix en una màscara de geometria no destructiva; 'Esborra la màscara' la treu.

Com aplico un efecte només a una part d'una capa?

Fes servir una màscara de filtre. Els efectes només es renderitzen on la màscara ho permet. Inverteix la gira.

Relacionades

• Retall / marge de màscara
• Elimina el fons (4 tècniques)
• Màscara de la icona (squircle, iOS, watchOS, cap)

Passos

1. Selecciona una capa d'imatge (o fes servir l'acció de les tisores de la barra d'eines).
2. Tria una tècnica: Automàtic, Clau de color, Retall amb IA, Multiplica o Pantalla.
3. Per a Clau de color: tria el color i ajusta la Puresa; Detecta el troba per tu.
4. Multiplica elimina els fons blancs; Pantalla elimina els negres.

Consells

• Clau de color és exacte al píxel, ideal per a logotips sobre fons sòlids.

Preguntes

Com elimino el fons d'un logotip PNG?

Selecciona la imatge i fes clic a 'Elimina el fons'. Fes servir Clau de color per a colors plans (tria el color, ajusta la Puresa), Retall amb IA per a fotos, Multiplica per al blanc i Pantalla per al negre.

Quin eliminador de fons he de fer servir?

Fons de color pla → Clau de color. Blanc → Multiplica. Negre → Pantalla. Fotos carregades → Retall amb IA. Automàtic prova el que encaixa millor.

Relacionades

• Màscares (edita la màscara, usa com a màscara, màscara de filtre)
• Vectoritza una imatge a SVG
• Kit d'icones: Elimina el fons

Passos

1. Selecciona una capa d'imatge.
2. Tria Vectoritza i un predefinit (Per defecte / Blanc i negre / Pòster / Foto); la previsualització s'actualitza sobre la marxa.
3. Tria un mode de corba (Per defecte / Píxel / Polígon / Spline).
4. Es crea una nova capa SVG. Edita'n els nodes com en qualsevol camí.

Consells

• Fes servir el predefinit 'Blanc i negre' + el mode de corba Polígon per a camins de logotip nítids.

Preguntes

Com converteixo un PNG en un vector?

Selecciona la imatge i fes servir Vectoritza. 'Blanc i negre' és ideal per a logotips, 'Pòster' per a il·lustració plana i 'Foto' per a imatges detallades. El resultat és una capa SVG editable.

Relacionades

• Edició de nodes del camí
• Converteix en camí
• Elimina el fons (4 tècniques)

Passos

1. Obre el menú emergent Exporta.
2. Tria .icns, .png, .icon o .json.
3. Per a PNG, defineix la mida/escala (x / px / %, 16-4096px); activa 'Retalla a la màscara' per treure el farciment transparent.
4. Per a .icon, tria 'Integra els materials' (activat = coincideix amb el render de l'editor, desactivat = imatge plana perquè macOS hi apliqui el seu propi vidre).
5. Descarrega, o 'Copia al porta-retalls' per al PNG.

Consells

• 'Copia al porta-retalls' és la manera més ràpida de posar un PNG a Slack o en un document.
• Desa un projecte .json per poder tornar-lo a editar més endavant.

Preguntes

Com exporto un fitxer .icns?

Exporta → .icns. Genera automàticament tota l'escala de mides 16-1024. No cal cap Mac ni iconutil.

Com exporto només una mida de PNG?

Exporta → PNG i defineix la mida en x, px o % (16-4096px). 'Retalla a la màscara' treu el farciment transparent.

Què és 'Integra els materials' a l'exportació .icon?

Activat: els materials es renderitzen dins la imatge perquè coincideixi exactament amb l'editor. Desactivat: s'exporta una imatge plana i macOS hi aplica el seu propi Liquid Glass en temps d'execució.

Puc exportar PNG transparents?

Sí, l'exportació PNG conserva la transparència. Fes servir 'Retalla a la màscara' per treure el farciment buit al voltant de la icona.

Relacionades

• Més formats (kits per plataforma)
• Paquets .icon d'Icon Composer (obrir i exportar)
• Exporta tots els modes d'aparença (ZIP)
• Biblioteca de recursos

Passos

1. Obre Exporta → Més formats.
2. Tria .ico, .appiconset, kit de Windows, kit de Linux, Favicons o paquet de llançament.
3. Per a .appiconset, tria la plataforma (macOS / iOS / Universal).
4. Descarrega el fitxer convertit o el ZIP.

Consells

• El paquet de llançament és el botó 'dona-m'ho tot' per a un llançament.

Preguntes

Puc obtenir un .ico de Windows a partir de la meva icona?

Sí. Més formats → .ico genera una icona de Windows amb diverses mides. El kit de Windows hi afegeix rajoles MSIX en un ZIP.

Com obtinc un appiconset d'Xcode?

Més formats → .appiconset i tria macOS, iOS o Universal. Genera el catàleg de recursos complet.

Tens favicons?

Sí. Més formats → Favicons descarrega un ZIP amb un paquet de favicons web. El kit de Linux cobreix els temes hicolor i els fitxers .desktop.

Quina és la manera més ràpida de publicar a totes les plataformes?

El paquet de llançament: un sol ZIP amb .icns, .ico, .appiconset, favicons i tota la resta.

Relacionades

• Formats d'exportació (.icns, .png, .icon, .json)
• Kit d'icones: Converteix la icona

Passos

1. Deixa anar un paquet .icon al llenç per obrir-lo.
2. Revisa els avisos d'importació (substitucions del mode Transparent, capes soltes, recursos que falten, grups imbricats).
3. Edita'l com un document normal.
4. Exporta → .icon per tornar a escriure el paquet.

Consells

• Fes servir 'Exporta tots els modes d'aparença' per obtenir PNG de les aparences Per defecte, Fosc, Transparent i Tenyit per revisar-los.

Preguntes

Puc editar fitxers d'Icon Composer d'Apple?

Sí, deixa anar el .icon al llenç. S'obre com a capes que pots editar i després tornar a exportar a .icon. L'editor marca tot el que no pot traslladar exactament.

Relacionades

• Modes d'aparença (Per defecte, Fosc, Transparent, Tenyit)
• Exporta tots els modes d'aparença (ZIP)
• Importació arrossegant i deixant anar (PNG, SVG, .icns, .icon)

Passos

1. Canvia d'aparença amb el selector d'aparença de la previsualització o de l'exportació.
2. Selecciona una capa i defineix-ne els ajustos per aparença (abast d'edició: individual o totes).
3. Exporta tots els modes d'aparença com a PNG en un sol ZIP.

Consells

• Posa l'abast d'edició en 'individual' quan només hagi de canviar una aparença.

Preguntes

Com faig una versió en mode fosc de la meva icona?

Canvia a l'aparença Fosc i ajusta les capes amb ajustos per aparença: color, tint, opacitat, visibilitat i fins i tot una imatge diferent. Exporta tots els modes d'aparença per obtenir cada render en PNG.

Què són les aparences Transparent i Tenyit?

Transparent és l'aspecte translúcid d'Icon Composer (clar/fosc); Tenyit adapta la icona en monocrom al color d'èmfasi de l'usuari (clar/fosc). Cadascuna es pot configurar per separat a cada capa.

Relacionades

• Exporta tots els modes d'aparença (ZIP)
• Paquets .icon d'Icon Composer (obrir i exportar)

Passos

1. Obre Exporta.
2. Fes clic a 'Exporta tots els modes d'aparença'.
3. Descarrega el ZIP amb els renders PNG.

Preguntes

Com exporto totes les variants de la icona alhora?

Exporta → 'Exporta tots els modes d'aparença' descarrega un ZIP amb els renders PNG Per defecte, Fosc, Transparent i Tenyit.

Relacionades

• Modes d'aparença (Per defecte, Fosc, Transparent, Tenyit)
• Formats d'exportació (.icns, .png, .icon, .json)

Passos

1. Obre Exporta → Puja.
2. Escriu el nom de l'app i la categoria; confirma que n'ets l'autor.
3. Opcionalment, adjunta variants .icns i el .json del projecte.
4. Envia-la a revisió.

Preguntes

Com comparteixo la meva icona a macOSicons.com?

Exporta → Puja → Envia a macOSicons. Afegeix el nom de l'app i la categoria, confirma que n'ets l'autor i passarà per revisió abans de publicar-se.

Relacionades

• Comparteix a la comunitat (publica / actualitza / despublica)
• Formats d'exportació (.icns, .png, .icon, .json)

Passos

1. Exporta → .json per descarregar el fitxer de projecte.
2. Fes servir Importa el projecte .json per tornar-lo a obrir.
3. Continua editant des d'on ho vas deixar.

Consells

• Adjunta el .json quan facis Envia a macOSicons perquè altres el puguin remesclar.

Preguntes

Com deso la meva feina com a fitxer?

Exporta → .json descarrega el projecte editable. Importa'l més endavant per continuar treballant i recuperaràs totes les capes i materials.

Relacionades

• Formats d'exportació (.icns, .png, .icon, .json)
• Historial de versions (Time Machine)

Passos

1. Obre la Safata de previsualització des de la barra d'eines.
2. Mides: comprova la llegibilitat a mides reals en píxels.
3. Dock: mira la icona entre apps de mostra en un Dock en directe.
4. Pantalla d'inici: previsualitza-la en una graella d'iOS i al Dock.

Consells

• Dissenya a 1024, però revisa-la sempre a Mides abans d'exportar.

Preguntes

Com veig la meva icona al Dock de macOS?

Obre la Safata de previsualització → pestanya Dock. Mostra la icona en un Dock de Liquid Glass al costat d'apps de mostra, amb indicador d'execució i etiqueta inclosos.

La meva icona es llegirà bé a mides petites?

Fes servir la pestanya Mides. Mostra la icona a les mides reals en píxels del sistema perquè detectis els detalls que desapareixen en reduir-la.

Relacionades

• Previsualització en context (Dock / Pantalla d'inici / Escriptori)
• Fons de previsualització (no s'exporta)

Passos

1. Obre Previsualització en context.
2. Tria un context: Dock, Pantalla d'inici o Escriptori.
3. Tria el tema (Clar / Fosc / Tots dos) i un fons de pantalla o fons.
4. Descarrega cada render, Descarrega-ho tot o Desa a Recursos.

Consells

• Els renders desats apareixen a la pestanya Recursos de l'espai de treball amb la seva variant i projecte.

Preguntes

Puc obtenir una imatge de maqueta de la meva icona al Dock?

Sí. Previsualització en context mostra la icona en escenes de Dock, Pantalla d'inici o Escriptori amb temes clar/fosc i fons de pantalla personalitzables. Descarrega els renders o desa'ls a Recursos.

Relacionades

• Safata de previsualització (Mides, Dock, Pantalla d'inici)
• Biblioteca de recursos
• Kit d'icones: Previsualització en context

Passos

1. Obre el menú Visualització / fons de la barra d'eines.
2. Tria Automàtic, Desenfocament, Color, Degradat o Imatge.
3. Dissenya sobre aquest fons; les exportacions es mantenen transparents segons la configuració.

Preguntes

Com veig com queda la meva icona transparent sobre un fons de pantalla?

Fes servir el fons de previsualització (menú Visualització) i tria Desenfocament, Color, Degradat o Imatge darrere la icona. Només és per a la previsualització i no afecta les exportacions.

Relacionades

• Previsualització en context (Dock / Pantalla d'inici / Escriptori)
• Safata de previsualització (Mides, Dock, Pantalla d'inici)

Passos

1. Prem Cmd+Z per desfer i Cmd+Shift+Z per refer (o fes servir els botons de la barra d'eines).
2. L'historial per desfer inclou edicions, moviments, estils i canvis d'estructura.

Consells

• Necessites anar més de 50 passos enrere? Les instantànies de l'Historial de versions arriben més lluny.

Preguntes

Fins a quants passos puc desfer?

50 passos. Cmd+Z desfà i Cmd+Shift+Z refà; la barra d'eines també té botons.

Relacionades

• Historial de versions (Time Machine)

Passos

1. Prem Cmd+Option+H per obrir l'historial de versions.
2. Prem Cmd+Option+S (o el botó Desa) per desar una versió amb nom.
3. Recorre la línia de temps (desplaçant-te o amb ↑/↓) per previsualitzar estats anteriors.
4. Restaura, o 'Restaura com a còpia' per crear una branca sense perdre la feina actual.

Consells

• Posa nom a una versió abans de fer grans experiments. Restaura com a còpia és la xarxa de seguretat definitiva.

Preguntes

Puc tornar a una versió anterior de la meva icona?

Sí. L'Historial de versions (Cmd+Option+H) guarda instantànies automàtiques i les versions a les quals poses nom (Cmd+Option+S). Recorre la línia de temps i Restaura, o Restaura com a còpia per crear una branca. És una funció de macOSicons+.

Què passa quan dues versions entren en conflicte?

L'editor desa una còpia de seguretat a l'historial de versions i t'indica quina versió ha conservat ('S'ha conservat la versió més recent d'aquest navegador' / 'S'ha obert la versió més recent del núvol'). Els conflictes generats sense connexió es poden restaurar com a còpia.

Relacionades

• Desfés / Refés
• Fitxers de projecte (importació/exportació .json)
• Edició sense connexió i sincronització

Passos

1. Obre Genera icones amb IA.
2. Escriu una indicació i tria quantes opcions vols (fins a 8).
3. Revisa les opcions emmascarades i afegeix-ne una o totes al llenç.

Consells

• Les opcions arriben ja emmascarades amb la silueta de la icona.

Preguntes

Com obtinc diverses idees d'icona alhora?

Fes servir Genera icones amb IA: una sola indicació dona fins a 8 opcions d'icona emmascarades. Afegeix la que t'agradi o posa-les totes al llenç i compara-les.

Relacionades

• Descompon la imatge amb IA
• Comptador de crèdits d'IA i ofertes de facturació

Passos

1. Obre Descompon la imatge amb IA i tria una imatge.
2. Espera que es divideixi en capes amb nom.
3. Afegeix capes individuals o Afegeix-les totes al llenç.

Preguntes

Tinc un PNG pla. Com n'edito les parts?

Fes servir Descompon la imatge amb IA. Divideix la imatge en capes amb nom que pots afegir una a una o totes alhora, i després les edites com qualsevol altra capa.

Relacionades

• Genera icones amb IA (fins a 8 opcions)
• Elimina el fons (4 tècniques)

Passos

1. Mira l'etiqueta de cost abans de cada acció d'IA.
2. Executa l'acció. Els crèdits es descompten quan acaba.
3. Si et falten crèdits, tria una oferta de recàrrega a la finestra.

Preguntes

Quant costa la IA?

Cada acció mostra el seu cost en crèdits abans d'executar-la. Si no en tens prou, l'editor t'ofereix paquets de crèdits dins del mateix flux, així que no hi ha factures sorpresa.

Relacionades

• Mode convidat (sense compte fins que exportes)

Passos

1. Obre la finestra Comparteix.
2. Crea un enllaç i tria accés de lectura o d'edició.
3. Copia l'enllaç i envia'l. Fes servir Restableix els enllaços per revocar l'accés.
4. Els destinataris poden duplicar el document al seu propi espai de treball.

Consells

• Restableix els enllaços abans de fer públic un document després d'haver-hi col·laborat en privat.

Preguntes

Com comparteixo el disseny de la meva icona amb algú?

Fes servir Comparteix per crear un enllaç amb accés de lectura o d'edició. Restableix els enllaços quan vulguis per revocar-lo. Els destinataris el poden duplicar al seu propi espai de treball.

Les persones amb qui comparteixo poden editar el meu document?

Només si tries l'accés d'edició. Els enllaços de lectura són només de lectura i mostren un bàner 'Només lectura'.

Relacionades

• Col·laboració en directe (presència i cursors)
• Comparteix a la comunitat (publica / actualitza / despublica)
• Galeria de la comunitat (explora, m'agrada, comenta, duplica)

Passos

1. Activa la col·laboració i comparteix un enllaç d'edició.
2. Mira en directe els avatars i cursors dels col·laboradors al llenç.
3. Editeu alhora i els canvis se sincronitzen en temps real.

Consells

• La teva pila personal de Desfés no inclou les edicions dels col·laboradors.

Preguntes

Poden editar dues persones alhora?

Sí, amb la col·laboració en directe activada: comparteix un enllaç d'edició i veureu els avatars i cursors de l'altre mentre editeu junts en temps real.

Relacionades

• Enllaços per compartir (veure o editar)

Passos

1. Obre Comunitat des de l'àrea de projectes.
2. Explora i obre projectes; fes m'agrada i comenta.
3. Fes clic a 'Copia als meus projectes' per duplicar-ne un i estudiar-ne les capes.

Consells

• Duplicar un projecte de la comunitat és la manera més ràpida d'aprendre configuracions de materials avançades.

Preguntes

Puc veure com han fet les seves icones altres persones?

Sí, la galeria de la comunitat té projectes compartits. Obre'n qualsevol i fes clic a 'Copia als meus projectes' per obtenir el document editable complet.

Relacionades

• Comparteix a la comunitat (publica / actualitza / despublica)
• Enllaços per compartir (veure o editar)

Passos

1. Obre la finestra Comparteix → Comparteix a la comunitat.
2. Publica; actualitza-ho més endavant quan el disseny canviï.
3. Despublica-ho per retirar-ho.

Preguntes

Com publico la meva icona a la comunitat?

Finestra Comparteix → Comparteix a la comunitat → Publica. Pots actualitzar o despublicar la publicació en qualsevol moment.

Relacionades

• Galeria de la comunitat (explora, m'agrada, comenta, duplica)
• Envia a macOSicons

Passos

1. Obre l'àrea de projectes (/editor/docs).
2. Crea documents (icona de macOS / iOS / carpeta) i carpetes.
3. Cerca, canvia el nom i niua per organitzar-te.
4. Els elements suprimits van a la Paperera, on els pots restaurar o suprimir definitivament.

Consells

• Les carpetes es poden niuar, així que pots agrupar per client o per app.

Preguntes

Com organitzo els meus projectes d'icones?

El gestor de projectes té carpetes, cerca i canvi de nom. Els elements suprimits van a la Paperera, on els pots restaurar o suprimir definitivament.

Quants documents puc tenir gratis?

Un compte gratuït admet fins a 5 documents en 1 projecte, i els documents de la Paperera no compten. macOSicons+ et dona documents i projectes il·limitats.

Relacionades

• Biblioteca de recursos
• Edició sense connexió i sincronització
• Taules de treball (diverses icones en una sessió)

Passos

1. Obre l'espai de treball → pestanya Recursos.
2. Explora per variant; canvia entre vista de graella i de llista.
3. Previsualitza i torna a descarregar qualsevol recurs.

Consells

• Els renders desats des de Previsualització en context també es guarden aquí.

Preguntes

On van a parar les icones que exporto?

Cada icona que generes o exportes va a la pestanya Recursos de l'espai de treball, agrupada per variant amb el seu projecte i cost en crèdits. Torna-la a descarregar quan vulguis.

Relacionades

• Formats d'exportació (.icns, .png, .icon, .json)
• Previsualització en context (Dock / Pantalla d'inici / Escriptori)
• Gestor de projectes (documents i carpetes)

Passos

1. Obre l'espai de treball → pestanya Sense connexió.
2. Marca documents/projectes com a 'disponibles sense connexió' (o 'Mantén-ho tot disponible sense connexió').
3. Defineix un límit d'emmagatzematge i vigila l'indicador d'ús.
4. Fes servir Sincronitza ara quan tornis a tenir connexió; torna a provar els errors o reconstrueix des del servidor.

Consells

• El mode convidat és totalment local: no es desa res al núvol fins que et registres.

Preguntes

L'editor funciona sense connexió?

Sí. Marca documents com a disponibles sense connexió (amb un límit d'emmagatzematge), continua editant sense connexió i sincronitza quan tornis. L'editor mostra 'N canvis pendents de sincronitzar' i pot tornar a provar o reconstruir des del servidor si alguna cosa falla.

Relacionades

• Gestor de projectes (documents i carpetes)
• Historial de versions (Time Machine)

Passos

1. Obre /editor i comença a dissenyar. Sense cap barrera de registre.
2. Treballa al document d'esborrany de convidat (desat al navegador).
3. Registra't gratis quan vulguis exportar o desar al núvol.

Preguntes

Necessito un compte per fer servir l'editor?

No, pots dissenyar lliurement com a convidat. Necessites un compte gratuït per exportar (.icns, PNG, .icon) i per desar projectes al núvol.

Relacionades

• Formats d'exportació (.icns, .png, .icon, .json)
• Comptador de crèdits d'IA i ofertes de facturació

Passos

1. Fes servir la tira de taules de treball per passar d'una a una altra.
2. Crea una taula de treball nova d'icona o de carpeta.
3. Canvia el nom, duplica o suprimeix taules de treball des de la tira.

Consells

• Duplica una taula de treball per provar variants de la mateixa icona.

Preguntes

Puc dissenyar diverses icones alhora?

Sí. Les taules de treball mantenen diversos documents d'icona o carpeta en una tira de sessió amb miniatures. Crea, canvia el nom, duplica o canvia de taula de treball amb un clic.

Relacionades

• Gestor de projectes (documents i carpetes)
• Llenç d'icones de 1024x1024

Passos

1. El recorregut s'obre la primera vegada que entres; torna a obrir-lo des d'Ajuda → Fes el recorregut.
2. Segueix els sis passos o fes clic a 'Ves al pas N'.
3. Fes clic a 'Omet el recorregut' per tancar-lo quan vulguis.

Preguntes

Hi ha un tutorial per a l'editor?

Sí, un recorregut de 6 passos cobreix el llenç, dibuixar amb formes i la ploma, combinar formes, les capes i propietats, i l'exportació i el desament. El pots ometre o tornar a obrir quan vulguis des del menú Ajuda.

Relacionades

• Mode convidat (sense compte fins que exportes)
• Paleta d'ordres i dreceres de teclat

Passos

1. Prem Cmd + K (Ctrl + K a Windows i Linux) o tria Ajuda → Paleta d'ordres.
2. Escriu el que vols fer i prem Retorn per executar l'ordre ressaltada.
3. Prem ? o Cmd + / per veure el full de dreceres de teclat.

Consells

• La barra de pistes al peu del llenç explica els clics i les tecles de l'eina activa; la pots tornar a activar des del menú Ajuda. Amagar-la només amaga l'explicació: el Suavitzat del Llapis, el camí al qual afegeix la Ploma i els botons tàctils Acaba / Fet es queden.

Preguntes

Com trobo una eina o una ordre que no veig?

Prem Cmd + K i escriu el que vols fer, com ara «forat», «capgirar» o «porta al davant». Les ordres que no s'apliquen a la selecció actual et diuen per què.

Relacionades

• Recorregut d'introducció
• Eines vectorials (Selecció, Edita els punts, Formes, Ploma, Llapis, Línia, Distorsió)
• Amaga la interfície (mode concentració)

Passos

1. Prem Cmd + . (Ctrl + . a Windows i Linux) o fes servir el botó Mostra la interfície.
2. Treballa sobre el llenç net.
3. Torna a activar-lo per recuperar la interfície completa.

Preguntes

Com amago tots els panells per fer una captura?

Fes servir l'interruptor per amagar la interfície. Ho plega tot i deixa només el llenç. Torna'l a activar per recuperar la interfície.

Relacionades

• Fons de previsualització (no s'exporta)

Passos

1. Cmd + / Cmd - per fer zoom; Cmd+0 per restablir-lo.
2. Mantén Space i arrossega per desplaçar-te (o llisca amb dos dits al trackpad).
3. Fes clic dret al llenç per a les accions de zoom i Enganxa.

Preguntes

Com em desplaço pel llenç?

Mantén Space i arrossega, o llisca amb dos dits al trackpad. Cmd +/- fa zoom i Cmd+0 el restableix.

Relacionades

• Transformació (posició, mida, escala, rotació)

Passos

1. Activa l'Ajustament des del menú Visualització.
2. Arrossega una capa i apareixeran guies d'ajustament respecte al llenç i a altres capes.
3. Entre tres o més capes apareixen indicacions d'espai igual.

Consells

• Combina-ho amb Alinea i distribueix per tenir precisió numèrica.

Preguntes

Com alineo capes mentre les arrossego?

Activa l'Ajustament (menú Visualització). Les capes s'ajusten al llenç, a altres capes i fins i tot a espais iguals mentre arrossegues.

Relacionades

• Alinea i distribueix
• Graella de guies (keyline)

Passos

1. Activa la retícula de guies des de la barra d'eines o el menú Visualització.
2. Alinea el disseny amb les guies.
3. Amaga-la quan acabis (mai no s'exporta).

Preguntes

Per a què serveix la retícula de guies?

És una retícula d'alineació a l'estil d'Apple sobre el llenç perquè el teu disseny respecti les directrius de la plataforma. Només es veu a la previsualització i mai no s'exporta.

Relacionades

• Màscara de la icona (squircle, iOS, watchOS, cap)
• Ajustament

Passos

1. Prem C (o Ctrl+C / Alt+C) per obrir el comptagotes.
2. Fes clic a qualsevol píxel per agafar-ne el color.
3. El color va a l'emplenament, al traç o al fons segons el context.

Preguntes

Com agafo un color del meu disseny?

Prem C per obrir el comptagotes i fes clic al píxel. S'aplica a l'emplenament, al traç o al fons segons el que tinguis seleccionat.

Relacionades

• Fons del llenç (sòlid, degradat, malla de taques)
• Emplenament (sòlid i multidegradat)

Passos

1. Arrossega sobre una zona buida del llenç amb l'eina Selecció per seleccionar capes.
2. En mode Edita el camí, arrossega per seleccionar nodes.
3. Mou o suprimeix la selecció com un tot.

Preguntes

Com selecciono diverses capes o nodes alhora?

Arrossega un rectangle per sobre. Al llenç selecciona capes; en mode Edita el camí selecciona nodes.

Relacionades

• Edició de nodes del camí
• El clic selecciona el grup

Passos

1. Obre l'editor en un mòbil o una tauleta.
2. Canvia entre les pestanyes inferiors Inspector, Capes i Projectes.
3. Fes servir el menú 'Més eines' per a les accions de la barra d'eines; la resposta hàptica confirma els gestos clau.

Preguntes

L'editor funciona al mòbil?

Sí. Un disseny per a mòbil amb pestanyes inferiors (Inspector/Capes/Projectes), una barra de selecció i un menú 'Més eines' fa que l'editor complet sigui usable en pantalles petites.

Relacionades

• Taules de treball (diverses icones en una sessió)

Passos

1. Deixa que els documents es posin nom sols. Canvia'l quan vulguis.
2. Nota la resposta hàptica als dispositius tàctils compatibles.
3. Si la captura d'exportació falla amb una GPU poc habitual, l'avís et diu quina és.

Preguntes

Com es posa nom als meus documents?

Automàticament, a partir del contingut. Pots canviar el nom de qualsevol document quan vulguis.

Relacionades

• Gestor de projectes (documents i carpetes)
• Formats d'exportació (.icns, .png, .icon, .json)

Passos

1. Obre /editor/toolkit.
2. Executa qualsevol eina al navegador (màscara d'icona, generar, convertir, eliminar el fons…).
3. O crida l'endpoint corresponent a /api/v1/editor/ des del teu codi.

Consells

• Les eines del Kit d'icones funcionen sense obrir el document complet a l'editor.

Preguntes

Necessito un Mac per fer un .icns?

No, el Kit d'icones converteix i exporta .icns (i qualsevol altre format) directament al navegador o per l'API.

Hi ha una API per a aquestes eines?

Sí, cada eina del Kit d'icones té un endpoint públic a /api/v1/editor/. Consulta la documentació de l'API a la pàgina del Kit d'icones.

Relacionades

• Més formats (kits per plataforma)
• Elimina el fons (4 tècniques)

Passos

1. Kit d'icones → Màscara de la icona.
2. Puja una imatge i tria la màscara d'una plataforma.
3. Descarrega el PNG amb màscara o crida l'endpoint de l'API.

Preguntes

Com poso el meu logo amb la forma d'icona de macOS?

Kit d'icones → Màscara de la icona: puja el logo, tria la màscara de macOS i descarrega'l. El mateix amb l'endpoint icon-mask de /api/v1/editor/.

Relacionades

• Màscara de la icona (squircle, iOS, watchOS, cap)

Passos

1. Kit d'icones → Genera amb IA.
2. Escriu una indicació.
3. Descarrega les opcions o continua a l'editor.

Preguntes

Puc generar icones sense fer servir l'editor?

Sí. Kit d'icones → Genera amb IA crea opcions d'icona amb màscara a partir d'una indicació. El cost en crèdits es mostra abans d'executar-ho.

Relacionades

• Genera icones amb IA (fins a 8 opcions)
• Kit d'icones (eines independents + API pública)

Passos

1. Kit d'icones → Converteix la icona.
2. Puja el fitxer i tria el format de destinació.
3. Descarrega el resultat.

Preguntes

Com converteixo un PNG a .icns o .ico?

Kit d'icones → Converteix la icona: puja el PNG, tria .icns o .ico i descarrega'l. No calen eines de Mac.

Relacionades

• Més formats (kits per plataforma)
• Kit d'icones (eines independents + API pública)

Passos

1. Obre /editor/toolkit i tria 'Converteix imatges'.
2. Deixa anar fins a 20 imatges (25 MB cadascuna, 100 MB per tanda).
3. Tria els formats de sortida i, si vols, un preajust i una qualitat.
4. Baixa cada imatge, o totes juntes en un .zip.

Consells

• Tria diversos formats de sortida en una sola tanda: cada imatge torna en cadascun d'ells.

Preguntes

Com converteixo moltes imatges a WebP o AVIF alhora?

Fes servir 'Converteix imatges' al kit d'icones: deixa anar fins a 20 imatges, tria WebP, AVIF o qualsevol altre format de sortida i baixa-les totes en un .zip.

Relacionades

• Kit d'icones: Comprimeix imatges
• Kit d'icones: Converteix la icona
• Kit d'icones (eines independents + API pública)

Passos

1. Obre /editor/toolkit i tria 'Comprimeix imatges'.
2. Deixa anar fins a 20 imatges.
3. Tria un preajust, o ajusta la qualitat, el mode sense pèrdua, la paleta o una mida màxima.
4. Baixa els fitxers més petits, o tots junts en un .zip.

Consells

• Deixa desactivat 'Conserva les metadades' per eliminar l'EXIF i altres metadades en comprimir.

Preguntes

Puc fer els meus PNG més petits sense canviar de format?

Sí. 'Comprimeix imatges' els torna a codificar en el seu propi format; l'opció de paleta sol deixar els PNG entre un 60 i un 80 % més petits, i un fitxer que no es pot reduir torna sense canvis.

Relacionades

• Kit d'icones: Converteix imatges
• Kit d'icones (eines independents + API pública)

Passos

1. Kit d'icones → Paquet d'Icon Composer.
2. Puja el disseny.
3. Descarrega el paquet .icon.

Preguntes

Com faig un paquet .icon d'Apple sense Icon Composer?

Kit d'icones → Paquet d'Icon Composer en crea un a partir del teu disseny. Per editar per capes fitxers .icon existents, deixa'ls anar a l'editor.

Relacionades

• Paquets .icon d'Icon Composer (obrir i exportar)
• Kit d'icones (eines independents + API pública)

Passos

1. Kit d'icones → .appiconset de Xcode.
2. Puja el disseny de 1024px i tria una plataforma.
3. Deixa anar la carpeta al catàleg de recursos de Xcode.

Preguntes

Com faig un appiconset de Xcode a partir d'una sola imatge?

Kit d'icones → .appiconset de Xcode: puja una imatge de 1024px, tria macOS/iOS/Universal i deixa anar el resultat a Xcode.

Relacionades

• Més formats (kits per plataforma)
• Kit d'icones (eines independents + API pública)

Passos

1. Kit d'icones → Extreu d'un .icns.
2. Puja un fitxer .icns.
3. Descarrega les mides PNG extretes.

Preguntes

Com trec les imatges d'un fitxer .icns?

Kit d'icones → Extreu d'un .icns desempaqueta totes les mides incloses com a PNG que pots descarregar.

Relacionades

• Kit d'icones: Converteix la icona
• Kit d'icones (eines independents + API pública)

Passos

1. Kit d'icones → Elimina el fons.
2. Puja una imatge.
3. Descarrega el PNG transparent.

Preguntes

Hi ha una manera ràpida d'eliminar un fons sense l'editor?

Sí. Kit d'icones → Elimina el fons ho fa de manera independent i et torna un PNG transparent.

Relacionades

• Elimina el fons (4 tècniques)
• Kit d'icones (eines independents + API pública)

Passos

1. Kit d'icones → Paquet de favicons.
2. Puja la imatge de la icona.
3. Descarrega el zip de favicons.

Preguntes

Com faig favicons per al meu lloc web?

Kit d'icones → Paquet de favicons genera totes les mides de favicon web en un zip a partir d'una sola imatge.

Relacionades

• Kit d'icones: Paquet de llançament
• Més formats (kits per plataforma)

Passos

1. Kit d'icones → Paquet de llançament.
2. Puja el disseny de la icona.
3. Descarrega el zip complet de llançament.

Preguntes

Quina és la manera més ràpida d'aconseguir tots els formats d'icona per a un llançament?

Kit d'icones → Paquet de llançament: un zip amb .icns, .ico, .appiconset, favicons i tota la resta que necessites per publicar.

Relacionades

• Més formats (kits per plataforma)
• Kit d'icones: Paquet de favicons

Passos

1. Kit d'icones → Extreu colors.
2. Puja una imatge.
3. Copia les mostres de la paleta extreta.

Preguntes

Com trec els colors d'una icona?

Kit d'icones → Extreu colors et torna una paleta de mostres de qualsevol imatge.

Relacionades

• Suggereix colors de la icona (paleta i harmonies)
• Kit d'icones (eines independents + API pública)

Passos

1. Kit d'icones → Previsualització en context.
2. Puja una imatge d'icona i tria un context.
3. Descarrega el render de la maqueta.

Preguntes

Puc fer una maqueta del Dock sense obrir l'editor?

Sí. Kit d'icones → Previsualització en context mostra la teva icona en escenes del Dock, la pantalla d'inici o l'escriptori i en descarrega la maqueta.

Relacionades

• Previsualització en context (Dock / Pantalla d'inici / Escriptori)
• Kit d'icones (eines independents + API pública)