编辑器能做的一切

操作步骤

1. Create a new document from the workspace (macOS app icon, iOS app icon or Folder icon).
2. Design freely — the canvas is always icon-shaped and 1024x1024.
3. Export; every size and platform ladder is generated from it.

小技巧

• Positions are measured from the center: 0/0 is the middle of the icon.

常见问题

What size is the editor canvas?

A fixed 1024x1024 icon canvas with center-origin coordinates. All exports scale from it, from 16px up to 4096px.

Do I need to set up artboards?

No — the document is the icon. Use Boards if you want several icons side by side in one session.

相关功能

• Icon mode & Folder mode
• Icon mask (squircle, iOS, watchOS, none)
• Boards (multiple icons in one session)

操作步骤

1. Open Document settings in the inspector.
2. Choose 'Icon' (app icon) or 'Folder' (macOS folder).
3. Folder mode unlocks folder tint, front blur and folder grain.

常见问题

Can I make a folder icon and an app icon from the same design?

Yes — switch Document mode between Icon and Folder. The mask, tint and export shape follow automatically.

相关功能

• Icon mask (squircle, iOS, watchOS, none)
• Folder tint, front blur & folder grain

操作步骤

1. Open Document settings → Icon mask.
2. Pick macOS squircle, iOS, watchOS or None.
3. 'Inner Icon' layers clip to this silhouette; 'Other Layers' can reach the edge.

小技巧

• Use the keyline grid to design safely inside the mask.
• The same mask is available programmatically via the Icon API.

常见问题

What does the macOS icon mask do?

It clips your design to the platform's official icon silhouette (squircle for macOS, rounded square for iOS, circle for watchOS) so the system never awkwardly crops your icon.

Why does my icon get cut off at the corners?

Your artwork is outside the icon mask. Move the layer to 'Inner Icon' in the layers panel, or set the mask to 'None' for a raw square export.

相关功能

• Inner Icon & Other Layers sections
• Keyline grid
• Toolkit: Icon mask

操作步骤

1. Document settings → Background.
2. Choose Solid, Gradient (linear/radial) or Blob.
3. For Blob: add blobs, pick colors, drag them on the canvas to move, drag the dashed ring to resize.
4. Start faster from a preset (vibrant, sunrise, ocean, aurora, candy, monochrome).

小技巧

• Try 'Suggest from icon' to derive colors from your artwork.
• Blobs are additive — overlaps brighten.

常见问题

How do I make a mesh gradient background?

Document settings → Background → Blob. It layers up to 12 soft color blobs over a base color; drag them on the canvas to reshape the gradient.

How do I change the background color of my icon?

Document settings → Background → Solid, or press C to sample any color with the eyedropper.

相关功能

• Background presets
• Suggest from icon (auto palette)
• On-canvas blob editing
• Procedural reflection (global liquid-glass gloss)

操作步骤

1. Document settings → Background → Presets.
2. Click a swatch to apply.
3. Keep editing stops or blobs afterwards — presets are fully editable.

常见问题

Are the background presets editable?

Yes — a preset just sets up the gradient or solid. Every stop, angle and blob stays editable.

相关功能

• Canvas background (solid, gradient, blob mesh)
• Designed starting templates

操作步骤

1. Document settings → Background.
2. Click 'Suggest from icon'.
3. Click a suggestion swatch to apply it.

常见问题

How do I pick a background that matches my icon?

Use 'Suggest from icon' in the Background section — it extracts colors from your artwork and offers matching swatches.

相关功能

• Canvas background (solid, gradient, blob mesh)
• AI layer actions (Enhance, Make it Glass/Clay, Harmonize, Variations)

操作步骤

1. Set Background → Blob and enable edit mode.
2. Drag a blob to move it.
3. Drag its dashed ring to resize it.

常见问题

Can I move the blobs in a mesh gradient directly?

Yes — in Blob edit mode, drag each blob to move it and its dashed ring to resize.

相关功能

• Canvas background (solid, gradient, blob mesh)

操作步骤

1. Document settings → Border.
2. Enable and pick a color.
3. Set the width in pixels.

常见问题

How do I add a border around my icon?

Document settings → Border: enable, choose color and width. The border follows the active icon mask.

相关功能

• Icon mask (squircle, iOS, watchOS, none)
• Stroke (position, caps, gradients, blur)
• Sticker effects (border, holo, curved shadow, peel)

操作步骤

1. Document settings → Reflection.
2. Enable and set the light angle (0-360).
3. Adjust Highlight, Bottom highlight (linkable), Highlight width and Refraction.

小技巧

• Link Highlight and Bottom highlight to move both together.
• Combine with the Glass material for extra depth.

常见问题

How do I get the Apple liquid-glass sheen on my icon?

Enable Document → Reflection. It adds a global bezel highlight and refraction across the icon; link the top and bottom highlights for a symmetric look.

相关功能

• Liquid Glass material
• Clay material
• Global & per-layer lighting

操作步骤

1. Set Document mode to Folder.
2. Document settings → Folder tint for a solid or gradient tint.
3. Adjust Front blur and Grain (intensity / size / seed).

小技巧

• Match the grain seed across a folder set for consistency.

常见问题

How do I recolor a macOS folder icon?

Switch the document to Folder mode, then Document settings → Folder tint. Front blur and grain sell the material.

相关功能

• Icon mode & Folder mode
• Document grain

操作步骤

1. Document settings → Grain.
2. Enable and set intensity.
3. Adjust scale and seed to taste.

小技巧

• Keep intensity low (0.05-0.15) for print-like texture.

常见问题

How do I stop my gradient from banding?

Add a touch of Document grain (Document settings → Grain) — it dithers the surface and adds filmic texture.

相关功能

• Per-layer grain & output dither

操作步骤

1. Enable 'Click selects group' in Document settings.
2. Click to select the parent group.
3. Double-click to drill into the inner layer.

常见问题

How do I select a whole group instead of one layer?

Turn on 'Click selects group' in Document settings — click grabs the group, double-click drills into the layer.

相关功能

• Groups
• Marquee selection (layers & path points)

操作步骤

1. Use the layers panel sections 'Inner Icon' and 'Other Layers'.
2. Drag a layer between sections to flip its boundary mode.
3. Inner Icon layers clip to the mask; Other Layers render to the edge.

小技巧

• Put glows and full-bleed backgrounds in 'Other Layers'.

常见问题

Why is my layer getting clipped by the icon shape?

It's in the 'Inner Icon' section, which clips to the icon mask. Drag it to 'Other Layers' to let it reach the canvas edge.

相关功能

• Icon mask (squircle, iOS, watchOS, none)
• Layers panel with drag reordering

操作步骤

1. Add layers from the toolbar (shape, text, icon, image, path…).
2. Edit each type in its dedicated inspector section.
3. Convert between types when needed (e.g. Shape → Path for point editing).

小技巧

• Icon layers tap a 200k+ searchable vector glyph library.

常见问题

What kinds of layers can I add?

Ten: Image, Solid Fill, Gradient, Shape, Path, Icon (Heroicons/Lucide), SVG, Text, Liquid Glass Template and Bool compounds — each with its own inspector controls.

Can I edit an icon after placing it?

Yes — nothing is baked. Shapes, paths, text and materials stay fully editable until export.

相关功能

• Layers panel with drag reordering
• Built-in icon libraries (Heroicons & Lucide)
• Boolean operations (Union, Subtract, Intersect, Exclude)

操作步骤

1. Open the Layers tab in the panel.
2. Drag rows to restack or nest into folders (hover a collapsed folder to expand it).
3. Toggle the eye to hide, the lock to freeze a layer.

小技巧

• Boolean compound folders don't accept drops — drill into them instead.

常见问题

How do I move a layer behind another?

Drag it down in the layers panel — the topmost row renders in front. Drop onto a folder row to nest it.

相关功能

• Folders
• Groups
• Copy / Paste, Smart duplicate & Style transfer

操作步骤

1. Create a folder from the layer panel or context menu.
2. Drag layers into or out of it.
3. Rename inline; duplicate to clone the whole subtree.

常见问题

What happens if I delete a folder?

Its layers are kept and re-parented one level up — only the folder is removed.

相关功能

• Layers panel with drag reordering
• Groups
• Morph groups

操作步骤

1. Select multiple layers (shift-click or marquee).
2. Choose Group from the toolbar or context menu.
3. Ungroup to get the children back.

常见问题

How do I move several layers together?

Select them and Group (context menu). Transforms and styles then apply to the whole group.

相关功能

• Folders
• Morph groups
• Group Liquid Glass

操作步骤

1. Select layers and choose 'Group as Morph' from the toolbar.
2. Transform the morph group as a unit.
3. Ungroup the morph group, or dissolve it to select the children.

常见问题

What is a morph group?

A group with a shared morph identity — the layers move and scale as one unit. Ungroup breaks the identity; dissolve selects the children.

相关功能

• Groups

操作步骤

1. Select two or more shape/path/SVG layers.
2. Pick Union, Subtract, Intersect or Exclude from the toolbar's boolean menu.
3. Drill into the Bool group to edit contours; Escape pops out one level.

小技巧

• Each contour's operation can be changed later.

常见问题

How do I cut one shape out of another?

Select both and choose Subtract (or Exclude) from the boolean menu. It stays live — edit the source shapes and the result updates.

How do I edit the shapes inside a boolean result?

Drill into the Bool group (double-click or from the layer panel). Press Escape to step back out one level.

相关功能

• Shape Join
• Convert to Path
• Path point editing

操作步骤

1. Group the layers you want fused.
2. Choose 'Group Liquid Glass' from the layer context menu.
3. Tune the glass material on the group.

常见问题

How do I make several shapes look like one glass object?

Group them and apply 'Group Liquid Glass' — it merges them into one glass surface over the combined silhouette.

相关功能

• Liquid Glass material
• Groups
• Liquid Glass template layers

操作步骤

1. Select the shapes to join.
2. Choose Join from the context menu or toolbar.
3. Convert to Path for point-level control of the merged outline.

常见问题

How do I merge two shapes into one outline?

Select both and use Shape Join. Convert the result to a path for point-level editing.

相关功能

• Boolean operations (Union, Subtract, Intersect, Exclude)
• Convert to Path

操作步骤

1. Copy/cut/paste layers from the context menu — works across browser tabs.
2. Move or drag a layer, then Smart duplicate: each duplicate repeats the same offset.
3. Right-click → Copy Style, then Paste Style on another layer — or copy a single inspector section's properties.

小技巧

• Smart duplicate is the classic transform-duplicate pattern from pro design tools.

常见问题

How do I copy the look of one layer onto another?

Right-click the styled layer → Copy Style, then Paste Style on the target. To copy just fill, stroke or effects, use 'Copy … properties' on that inspector section.

How do I make evenly spaced duplicates?

Move or drag a layer, then Smart duplicate — each duplicate repeats the same delta automatically.

相关功能

• Layers panel with drag reordering
• Cross-tab & system clipboard

操作步骤

1. Copy layers in one tab; paste in another editor tab.
2. Copy SVG markup externally and paste onto the canvas to create a layer.

常见问题

Can I paste from Figma?

Copy the SVG and paste it onto the canvas — it becomes an editable SVG layer.

相关功能

• Copy / Paste, Smart duplicate & Style transfer
• Drag & drop import (PNG, SVG, .icns, .icon)

操作步骤

1. Select a layer and open the Selection section in the inspector.
2. Enter exact values, or drag a number field's label to scrub.
3. Toggle 'Lock aspect ratio' for uniform scaling.

小技巧

• Click a field's reset target to snap back to its default.

常见问题

How do I set an exact size or position?

Use the Selection inspector: Offset X/Y, Width/Height, Scale % and Rotation take exact numbers. Drag the field labels to scrub values.

相关功能

• On-canvas transform handles
• Align & Distribute
• Flip & Reflect

操作步骤

1. Select a shape and open Corners in the inspector.
2. Use 'Set each corner' for per-corner radii; 'Link all corners' for one value.
3. Enable Squircle for continuous curvature and set corner sides (sharpness 2-12).

小技巧

• Squircle matches Apple's shape language better than a plain large radius.

常见问题

How do I get iOS-style squircle corners?

Select the shape and enable Squircle in the corner settings. 'Corner sides' (2-12) controls how tight the continuous curvature is.

Can I round only some corners?

Yes — enable 'Set each corner' and set TL/TR/BR/BL independently.

相关功能

• Shape presets
• Icon mask (squircle, iOS, watchOS, none)

操作步骤

1. Select a layer or layers.
2. Use Flip X / Flip Y in the inspector, or Reflect Horizontally / Vertically in the toolbar.

常见问题

How do I mirror a shape?

Flip X / Flip Y in the Selection inspector. For a full-canvas mirror of a selection, use Reflect in the toolbar.

相关功能

• Align & Distribute
• Transform (position, size, scale, rotation)

操作步骤

1. Select a layer to reveal its handles.
2. Drag corners/edges to resize; drag just outside a corner to rotate.
3. Arrow keys nudge 1px (Shift = 10px).

常见问题

How do I rotate a layer?

Drag just outside a corner handle of the selection box, or type an exact angle in the Selection inspector.

相关功能

• Transform (position, size, scale, rotation)
• Marquee selection (layers & path points)

操作步骤

1. Select two or more layers (or one layer to align to canvas).
2. Use the align buttons in the toolbar.
3. Use Distribute Vertically / Horizontally for even spacing.

小技巧

• Snapping also hints at equal spacing while dragging.

常见问题

How do I center a layer on the icon?

Select the layer and use Align Center + Align Middle — a single selection aligns to the canvas.

相关功能

• Snapping
• Transform (position, size, scale, rotation)

操作步骤

1. Select a layer and choose the Distort tool (D).
2. Drag the four corners to warp the layer.
3. Use 'Reset Distortion' to return to a flat plane.

常见问题

How do I put my icon on a slanted surface?

Use the Distort tool (D) and drag the corners to match the surface perspective. 'Reset Distortion' undoes it.

相关功能

• Vector tools (Select, Pen, Line, Edit Path, Distort)
• On-canvas transform handles

操作步骤

1. Pick a tool from the toolbar (or press V / L / A / D).
2. Pen: click-drag to place bezier points; Shift snaps; Enter commits; Escape cancels.
3. Line: drag to draw; Shift constrains the angle.
4. Edit Path: edit anchors and handles; Distort: drag the four corners to warp.

小技巧

• Convert text or SVG to a path first for point-level editing.
• Marquee-select points to move them together.

常见问题

How do I draw a custom shape?

Use the Pen tool: click (or click-drag for curves) to place points, hold Shift to snap, Enter to commit, Escape to cancel. The Line tool draws straight segments.

How do I edit the points of a shape?

Select the shape and press Enter (or choose Edit Path / A) for anchor and handle editing. Enter or Escape leaves.

相关功能

• Path point editing
• Convert to Path
• Weave (interlaced paths)
• Perspective distort

操作步骤

1. Press Enter on a path (or choose Edit Path) to enter point editing.
2. Drag anchors/handles; switch handle mode between linear, mirrored and split.
3. Option-click a point to remove it; Shift-click an edge to add one.
4. Cmd+J joins selected endpoints; Shift+Delete breaks continuity, Delete deletes cleanly.
5. Select points and use 'Expand Corner Radius' for rounded corners on curves.

小技巧

• Mirrored handles keep smooth curves; split handles make sharp cusps.
• Anchor snap aligns points to nearby geometry.

常见问题

How do I add or remove points on a path?

In Edit Path mode, Shift-click an edge to add a point, Option-click a point to remove it.

How do I break a path open?

Select the point(s) and press Shift+Delete to break continuity. Plain Delete removes the point while keeping the path continuous.

How do I round the corner between two curves?

Select the anchor and use 'Expand Corner Radius' in the Path section.

相关功能

• Vector tools (Select, Pen, Line, Edit Path, Distort)
• Convert to Path
• Weave (interlaced paths)

操作步骤

1. Select a shape, SVG or text layer.
2. Choose 'Convert to Path' (or 'Edit points') in the Path section.
3. Confirm the Shape-to-Path popover when prompted, then edit anchors freely.

小技巧

• Keep an un-converted copy if you still want to change the wording later.

常见问题

How do I edit the outline of my text?

Select the text layer and Convert to Path — the letters become editable outlines you can reshape point by point.

相关功能

• Path point editing
• Text layers
• Vectorize image to SVG

操作步骤

1. Select the overlapping paths and choose Weave.
2. Click a crossing to flip which strand passes on top.
3. Remove the weave to restore the original paths.

小技巧

• Great for monogram and knot-style marks.

常见问题

How do I make woven/interlaced line art?

Select overlapping paths and apply Weave. Each crossing becomes a toggle — click it to decide which strand is on top.

相关功能

• Path point editing
• Vector tools (Select, Pen, Line, Edit Path, Distort)

操作步骤

1. Open the shape menu in the toolbar.
2. Click a preset to add it as a shape layer.
3. Edit radius, fill, stroke and material in the inspector.

常见问题

How do I add a circle or pill shape?

Use the shape menu in the toolbar — rounded rect, circle, pill, triangle, diamond and hexagon are all one click.

相关功能

• Corner radii & Squircle corners
• Fill (solid & multi-gradient)
• Materials (Flat, Clay, Glass, Emboss)

操作步骤

1. Open the Fill section in the inspector.
2. Choose Solid or Gradient; add multiple gradients to stack them.
3. Edit stops on the gradient bar or with on-canvas gradient handles.

小技巧

• On-canvas handles let you drag linear and radial gradient geometry directly.

常见问题

Can I put more than one gradient on a shape?

Yes — the multi-gradient stack in the Fill section holds several gradients on one layer, each with its own type, angle and color space.

How do I make a stroke-only shape?

Disable Fill in the Fill section and style the Stroke instead.

相关功能

• Gradient controls (linear/radial, oklab/oklch)
• Stroke (position, caps, gradients, blur)
• Image fill overlay

操作步骤

1. Select a gradient fill or stroke.
2. Edit stops in the stops editor; drag on-canvas handles for geometry.
3. Set interpolation to oklab or oklch for more vivid mid-blends.

小技巧

• Radial gradients expose center X/Y and radius as numbers and handles.

常见问题

Why do my gradient colors look muddy in the middle?

Switch interpolation from classic RGB to oklab or oklch — they keep blends vivid instead of passing through gray.

How do I change a gradient's angle?

Use the angle field in the gradient controls, or drag the linear gradient handles on the canvas.

相关功能

• Fill (solid & multi-gradient)
• Canvas background (solid, gradient, blob mesh)

操作步骤

1. Open the Stroke section and enable it.
2. Set width, color (solid or gradient) and position (inner/outer/center).
3. Pick caps (rounded/square) and enable stroke background blur for a frosted-glass ring.

小技巧

• Stroke background blur makes the ring look frosted over whatever is behind it.

常见问题

How do I add an outline inside my shape?

Enable Stroke and set Position to 'inner'. 'outer' draws outside the edge, 'center' straddles it.

Can strokes be gradients?

Yes — switch the stroke kind to gradient and edit its stops and interpolation like any fill.

相关功能

• Fill (solid & multi-gradient)
• Icon border
• Background blur (backdrop blur)

操作步骤

1. Select an image layer.
2. Set Fill kind and pick an overlay color or gradient.
3. Only opaque pixels are tinted; transparency is preserved.

常见问题

How do I recolor a PNG without Photoshop?

Select the image layer and use the fill overlay — it tints the opaque pixels with a solid or gradient and keeps transparency intact.

相关功能

• Fill (solid & multi-gradient)
• Remove background (4 techniques)

操作步骤

1. Select a shape, path, text or SVG layer.
2. Open the Material section and pick Flat, Clay, Glass or Emboss.
3. Tune the material's sliders (see the Glass/Clay/Emboss features).

小技巧

• Combine with Document → Reflection for a whole-icon gloss.
• Basic mode exposes Glassiness / Puffiness / Shadow macros.

常见问题

How do I make a glassy or 3D-looking icon?

Select your layer and set Material to Glass or Clay. Glass refracts what's behind it; Clay gives a pillowy plasticine look; Emboss carves the shape into the surface behind.

Which materials can be combined?

One material per layer (Flat, Clay, Glass and Emboss are mutually exclusive), but layers stack — put glass over clay layers. Use Group Liquid Glass to fuse several layers into one glass surface.

相关功能

• Liquid Glass material
• Clay material
• Emboss material
• Basic-mode macro sliders (Glassiness, Puffiness, Shadow)
• Material style presets
• Procedural reflection (global liquid-glass gloss)

操作步骤

1. Set a layer's Material to Glass.
2. Adjust Bezel, Thickness and Curvature for the body of the glass.
3. Add Frost for milkiness and Chroma for color-fringing refraction.
4. Enable Opposite specular + width for the twin highlight look.
5. Use Tint color/strength for colored glass; link the light angle to the canvas light to keep layers consistent.

小技巧

• A depth map gives refraction a proper 3D silhouette.
• 'Material on Stroke' paints the material just on the outline.

常见问题

How do I make a liquid glass icon?

Set Material → Glass, raise Thickness and Curvature, add a little Chroma and Frost, and enable Opposite specular for the twin Apple edge highlights. Document → Reflection adds the global gloss.

What does Chroma do in the glass material?

Chroma is chromatic aberration — it splits colors at the glass edges for a refractive, prism-like fringe.

相关功能

• Materials (Flat, Clay, Glass, Emboss)
• Depth map for glass
• Procedural reflection (global liquid-glass gloss)
• Group Liquid Glass
• Global & per-layer lighting

操作步骤

1. Set a layer's Material to Clay.
2. Adjust Bezel, Thickness and Curvature for the puffiness.
3. Use Softness and Edge darkening to shape the shadowing.
4. Set Body/Rim refraction for translucent clay looks.

小技巧

• Link the specular pair for a single highlight; unlink for dual-source lighting.

常见问题

How do I make a clay / 3D puff icon?

Material → Clay. Raise Thickness and lower Softness for a tighter plasticine puff; Edge darkening adds contact shading. Basic mode's 'Puffiness' slider does the same in one control.

相关功能

• Materials (Flat, Clay, Glass, Emboss)
• Basic-mode macro sliders (Glassiness, Puffiness, Shadow)
• Material style presets
• Global & per-layer lighting

操作步骤

1. Set a layer's Material to Emboss.
2. Adjust Depth for how carved it looks.
3. Use Bevel width and Softness to control the edge shading.

常见问题

How do I make a debossed/engraved icon?

Material → Emboss. The shape appears carved into whatever is behind it; Depth and Bevel control the carve.

相关功能

• Materials (Flat, Clay, Glass, Emboss)

操作步骤

1. Set the light angle in Document settings or the Material section.
2. Toggle 'use canvas light' on a layer to follow the global angle, or give it its own.
3. Enable 'Confine to mask' to clip highlights to the icon shape.

小技巧

• A 315° (top-left) light matches macOS icon lighting conventions.

常见问题

How do I keep highlights consistent across layers?

Turn on 'use canvas light' for each material layer so they all follow the document's global light angle.

相关功能

• Liquid Glass material
• Clay material
• Procedural reflection (global liquid-glass gloss)

操作步骤

1. Select a Glass material layer.
2. Open Depth map and click Generate.
3. Adjust Depth and Smooth to shape the thickness field.

常见问题

My glass looks flat — how do I fix it?

Generate a depth map for the glass layer (Material → Depth map). It gives the refraction a rounded 3D silhouette; Depth and Smooth control the effect.

相关功能

• Liquid Glass material

操作步骤

1. Select a shape layer.
2. Set Background blur in the material/effects area.
3. Place the layer over a colorful background to see the frost.

常见问题

How do I make frosted glass that blurs the background?

Raise Background blur on the layer — it blurs whatever is behind the silhouette (0-5), like macOS's frosted materials.

相关功能

• Liquid Glass material
• Layer blur & Glow
• Stroke (position, caps, gradients, blur)

操作步骤

1. Switch the inspector to Basic mode.
2. Drag Glassiness, Puffiness or Shadow.
3. Open Advanced at any time — every underlying value is intact.

常见问题

I'm overwhelmed by material sliders — where do I start?

Basic mode's three macros: Glassiness, Puffiness and Shadow. They set many parameters at once and are fully reversible.

相关功能

• Materials (Flat, Clay, Glass, Emboss)
• Material style presets

操作步骤

1. Select one or more layers.
2. Open the style presets menu.
3. Click a preset (e.g. frostedGlass) and keep refining the material sliders.

小技巧

• The AI assistant can apply presets too: 'Make it frosted glass'.

常见问题

Is there a quick way to get a professional material look?

Apply a style preset (glossy3d, softClay, pillow, ceramic, liquidGlassLook, frostedGlass, crystal, chrome) to the selection, then fine-tune.

相关功能

• Materials (Flat, Clay, Glass, Emboss)
• Designed starting templates
• AI layer actions (Enhance, Make it Glass/Clay, Harmonize, Variations)

操作步骤

1. Add a Liquid Glass Template layer.
2. Pick a template: liquidGlass, frostedMetal, deepShadow, sideGlow or custom.
3. Toggle effect variants and set their intensities.

小技巧

• Start from a template and swap in your own artwork underneath.

常见问题

What are Liquid Glass template layers?

Pre-built glass effect stacks — liquidGlass, frostedMetal, deepShadow, sideGlow (or custom) — with toggles for top specular, inner shadow, rim light, side reflection and metal sheen.

相关功能

• Liquid Glass material
• Group Liquid Glass
• Designed starting templates

操作步骤

1. Create a new document and choose a template.
2. Swap the artwork/glyph for your own.
3. Keep the materials as-is or retune them.

常见问题

Do you have icon templates I can start from?

Yes — glass-tile, clay-button, glass-on-clay, monogram, glass-disc and mono-clay. They're fully editable documents with materials already set up.

相关功能

• Material style presets
• Background presets

操作步骤

1. Select a layer → Effects.
2. Set Layer blur to soften, or enable Glow.
3. Tune Glow radius, intensity and threshold; tint it or use the layer's own colors.

小技巧

• Put a blurred copy in 'Other Layers' for a custom outer bloom.

常见问题

How do I add a glow behind my icon shape?

Effects → Glow. Raise radius and intensity; lower the threshold so more of the shape contributes. Use a tint color for neon looks.

相关功能

• Multiple outer & inner shadows
• Per-layer grain & output dither
• Background blur (backdrop blur)

操作步骤

1. Select a layer → Shadows.
2. Add shadows and set type (outer/inner), color, blur, spread and offset.
3. Use 'use layer color' or 'use surrounding color' for automatic shading; the first outer shadow drives the glass drop shadow.

小技巧

• Stack two shadows (tight + wide) for convincing contact depth.

常见问题

How do I add a soft drop shadow?

Effects → Shadows → add an outer shadow. Raise blur and lower opacity for softness; 'use surrounding color' shades from what's beneath the layer.

Why doesn't my shadow show through my glass?

Enable 'show behind transparent areas' so the shadow bleeds through the transparent parts — that's how glass casts a real shadow.

相关功能

• Layer blur & Glow
• Liquid Glass material

操作步骤

1. Select a layer → Effects → Grain.
2. Set intensity, scale and seed.
3. Enable output dither for clean exported gradients.

常见问题

How do I add texture to a flat color?

Effects → Grain on that layer — intensity, scale and seed are all adjustable.

相关功能

• Document grain
• Layer blur & Glow

操作步骤

1. Select a layer → Effects → Lens Flare.
2. Set intensity.
3. Choose 'use canvas light' or set a custom angle.

常见问题

How do I add a sparkle/flare to my icon?

Effects → Lens Flare. Set the intensity and let it follow the canvas light, or give it its own angle.

相关功能

• Global & per-layer lighting
• Procedural reflection (global liquid-glass gloss)

操作步骤

1. Select a layer → Effects → Sticker.
2. Set border width and color.
3. Add Holo (with angle/scale), Curved shadow and Peel (angle/curl) to taste.

常见问题

How do I make my icon look like a die-cut sticker?

Effects → Sticker: add a border, then layer on the holo foil, curved shadow and peel effects.

相关功能

• Multiple outer & inner shadows
• Icon border

操作步骤

1. Open the Shaders section (per layer, or canvas/background level).
2. Add passes from the Shader Library, or write GLSL in the Code modal.
3. Expose parameters as uniforms to get sliders and color pickers automatically.
4. Use 'Generate with AI' to describe an effect and get a shader.

小技巧

• uBackdrop gives shaders access to what's behind the layer.
• Shaders stack — order matters.

常见问题

Can I write my own shaders?

Yes — the Shaders section takes GLSL ES 3.00 fragment passes. Uniforms you expose become sliders/color pickers. A library of presets (halftone, pixelate, CRT, duotone…) is included.

How do I add a halftone or CRT effect?

Open the Shader Library and pick halftone or CRT — they drop in as editable passes with sliders.

相关功能

• Layer blur & Glow
• AI chat assistant (prompt to layers)

操作步骤

1. Add a Text layer from the toolbar.
2. Double-click it on canvas (or press Enter) to type.
3. Set font (Google Fonts picker), size, weight, spacing and alignment in the Text section.
4. Set a text box width to wrap; choose word or character wrapping.

小技巧

• Google Fonts loads on demand so you can browse the full library.

常见问题

How do I add text to my icon?

Add a Text layer, then double-click it on the canvas to type. The Text section has font, size, weight, spacing, alignment and wrapping.

How do I wrap text onto multiple lines?

Set a Text box width in the Text section and choose word or character wrap.

How do I edit individual letter shapes?

Convert the text to a path first (Convert to Path) — the letters become editable outlines.

相关功能

• Convert to Path
• Fill (solid & multi-gradient)
• Stroke (position, caps, gradients, blur)

操作步骤

1. Add an Icon layer and search the library.
2. Place the glyph and restyle it (fill, stroke, material).
3. Convert to Path for point-level customization.

常见问题

Is there a library of icons I can use?

Yes — Heroicons and Lucide are built in, with a 200k+ vector library searchable from the toolbar and the AI assistant.

相关功能

• 10 layer types
• AI chat assistant (prompt to layers)

操作步骤

1. Drag a file over the canvas and release.
2. PNG/SVG become layers; .icns unpacks into artwork.
3. An Icon Composer .icon opens as a full document with layers.

小技巧

• You can also paste SVG from the clipboard.

常见问题

What files can I drop into the editor?

SVG, PNG, .icns and Icon Composer .icon bundles. Images become layers; .icon bundles open as a full editable document.

Can I open an Apple Icon Composer file?

Yes — drop the .icon bundle on the canvas. It imports the layers and warns about Clear overrides, loose layers, missing assets and nested groups it can't map 1:1.

相关功能

• Cross-tab & system clipboard
• Icon Composer .icon bundles (open & export)
• Replace image & generated versions

操作步骤

1. Select an image layer → Replace.
2. Pick a new file (or another generated version).
3. Styles, masks and transforms stay in place.

常见问题

How do I swap the artwork but keep my effects?

Use Replace on the image layer — styling, masks and transforms are preserved.

相关功能

• Drag & drop import (PNG, SVG, .icns, .icon)
• Crop / mask inset

操作步骤

1. Select an image layer.
2. Set the mask inset values for each side.
3. Clear the inset to restore the full bitmap.

常见问题

How do I crop my image layer?

Use the mask inset controls on the image layer — crop each side independently. Set insets to 0 to undo.

相关功能

• Masks (edit mask, use as mask, filter mask)
• Replace image & generated versions

操作步骤

1. Edit mask: select an image layer and enter mask editing; paint/erase alpha; Done to finish (or Enter).
2. Use as Mask: right-click a layer → Use as Mask to clip another layer by its geometry; Clear Mask to remove.
3. Filter mask: assign a filter mask source so effects only apply inside (or outside, with invert) it.

小技巧

• Filter masks are perfect for glows that should only appear behind an object.

常见问题

How do I erase part of an image layer?

Enter mask editing on the layer (press Enter on it) and paint/erase the alpha. 'Edit mask' / 'Done editing mask' toggles the mode.

How do I make one shape clip another?

Right-click the clipping shape → 'Use as Mask'. It becomes a non-destructive geometry mask; 'Clear Mask' removes it.

How do I apply an effect to only part of a layer?

Use a Filter mask — effects only render where the mask allows. Invert flips it.

相关功能

• Crop / mask inset
• Remove background (4 techniques)
• Icon mask (squircle, iOS, watchOS, none)

操作步骤

1. Select an image layer (or use the toolbar's scissors action).
2. Choose a technique: Auto, Colour key, AI cutout, Multiply or Screen.
3. For Colour key: pick the colour and adjust Purity; Detect finds it for you.
4. Multiply knocks out white backgrounds; Screen knocks out black.

小技巧

• Colour key is pixel-exact — great for logos on solid backgrounds.

常见问题

How do I remove the background from a logo PNG?

Select the image and hit Remove Background. Use Colour key for flat colors (pick the color, adjust Purity), AI cutout for photos, Multiply for white, Screen for black.

Which background remover should I use?

Flat color backgrounds → Colour key. White → Multiply. Black → Screen. Busy photos → AI cutout. Auto tries the best fit.

相关功能

• Masks (edit mask, use as mask, filter mask)
• Vectorize image to SVG
• Toolkit: Remove background

操作步骤

1. Select an image layer.
2. Choose Vectorize and pick a preset (Default / Black & white / Poster / Photo).
3. Pick a curve mode (Default / Pixel / Polygon / Spline).
4. A new SVG layer is created — edit its points like any path.

小技巧

• Use the 'Black & white' preset + Polygon curve mode for crisp logo traces.

常见问题

How do I turn a PNG into a vector?

Select the image and use Vectorize. 'Black & white' is great for logos, 'Poster' for flat art, 'Photo' for detailed images. The result is an editable SVG layer.

相关功能

• Path point editing
• Convert to Path
• Remove background (4 techniques)

操作步骤

1. Open the Export popover.
2. Choose .icns, .png, .icon or .json.
3. For PNG set the size/scale (x / px / %, 16-4096px); enable Trim to mask to crop transparent padding.
4. For .icon, choose Bake materials (on = matches editor render, off = flat artwork so macOS applies its own glass).
5. Download, or Copy to clipboard for the PNG.

小技巧

• Copy to clipboard is the fastest way to drop a PNG into Slack or a doc.
• Save a .json project so you can re-edit later.

常见问题

How do I export an .icns file?

Export → .icns. It builds the full 16-1024 size ladder automatically — no Mac or iconutil needed.

How do I export just one PNG size?

Export → PNG and set the size in x, px or % (16-4096px). Trim to mask crops transparent padding.

What is 'bake materials' on .icon export?

On: materials are rendered into the artwork so it matches the editor exactly. Off: flat artwork is exported and macOS applies its own liquid glass at runtime.

Can I export transparent PNGs?

Yes — PNG export preserves transparency. Use Trim to mask to remove empty padding around the icon.

相关功能

• More Formats (platform kits)
• Icon Composer .icon bundles (open & export)
• Export all appearance modes (ZIP)
• Assets library

操作步骤

1. Open Export → More Formats.
2. Choose .ico, .appiconset, Windows kit, Linux kit, Favicons or Release kit.
3. For .appiconset pick the platform (macOS / iOS / Universal).
4. Download the converted file or zip.

小技巧

• The Release kit is the 'give me everything' button for a launch.

常见问题

Can I get a Windows .ico from my icon?

Yes — More Formats → .ico produces a multi-size Windows icon. The Windows kit adds MSIX tiles as a zip.

How do I get an Xcode appiconset?

More Formats → .appiconset and choose macOS, iOS or Universal. It generates the full asset catalog.

Do you have favicons?

Yes — More Formats → Favicons downloads a web favicon pack zip. The Linux kit covers hicolor themes and .desktop files.

What's the fastest way to ship everywhere?

The Release kit — one zip with .icns, .ico, .appiconset, favicons and everything else.

相关功能

• Export formats (.icns, .png, .icon, .json)
• Toolkit: Convert icon

操作步骤

1. Drop a .icon bundle on the canvas to open it.
2. Review any import warnings (Clear overrides, loose layers, missing assets, nested groups).
3. Edit as a normal document.
4. Export → .icon to write the bundle back out.

小技巧

• Use 'Export all appearance modes' to get Default/Dark/Clear/Tinted PNGs for review.

常见问题

Can I edit Apple Icon Composer files?

Yes — drop the .icon on the canvas. It opens as layers you can edit, then export back to .icon. The editor flags anything it can't map exactly.

相关功能

• Appearance modes (Default, Dark, Clear, Tinted)
• Export all appearance modes (ZIP)
• Drag & drop import (PNG, SVG, .icns, .icon)

操作步骤

1. Switch appearance in the preview/export appearance switcher.
2. Select a layer and set per-appearance overrides (edit scope: individual or all).
3. Export all appearance modes as PNGs in one ZIP.

小技巧

• Set edit scope to 'individual' when only one appearance should change.

常见问题

How do I make a dark-mode version of my icon?

Switch to the Dark appearance and adjust layers with per-appearance overrides — color, tint, opacity, visibility, even a different image. Export all appearance modes to get every render as PNG.

What are Clear and Tinted appearances?

Clear is the translucent Icon Composer look (light/dark); Tinted monochrome-adapts the icon to the user's accent color (light/dark). Each can be authored separately per layer.

相关功能

• Export all appearance modes (ZIP)
• Icon Composer .icon bundles (open & export)

操作步骤

1. Open Export.
2. Click 'Export all appearance modes'.
3. Download the ZIP of PNG renders.

常见问题

How do I export all my icon variants at once?

Export → 'Export all appearance modes' downloads a ZIP with Default, Dark, Clear and Tinted PNG renders.

相关功能

• Appearance modes (Default, Dark, Clear, Tinted)
• Export formats (.icns, .png, .icon, .json)

操作步骤

1. Open Export → Upload.
2. Enter the app name and category; confirm authorship.
3. Optionally attach .icns variants and the project .json.
4. Submit for review.

常见问题

How do I share my icon on macOSicons.com?

Export → Upload → Submit to macOSicons. Add the app name and category, confirm you're the author, and it goes through review before publishing.

相关功能

• Share to community (publish / update / unpublish)
• Export formats (.icns, .png, .icon, .json)

操作步骤

1. Export → .json to download the project file.
2. Use Import project .json to open it again.
3. Continue editing from where you left off.

小技巧

• Attach the .json to a Submit to macOSicons so others can remix it.

常见问题

How do I save my work as a file?

Export → .json downloads the editable project. Import it later to keep working — every layer and material comes back.

相关功能

• Export formats (.icns, .png, .icon, .json)
• Version history (Time Machine)

操作步骤

1. Open the Preview Tray from the toolbar.
2. Sizes: check legibility at real pixel sizes.
3. Dock: see the icon among sample apps in a live dock.
4. Home Screen: preview on an iOS grid and dock.

小技巧

• Design at 1024 but always sanity-check in Sizes before exporting.

常见问题

How do I see my icon in the macOS dock?

Open the Preview Tray → Dock tab — it renders your icon in a Liquid Glass dock next to sample apps, complete with running indicator and label.

Will my icon be readable at small sizes?

Use the Sizes tab — it shows the icon at real system pixel sizes so you catch detail that disappears when scaled down.

相关功能

• Preview in context (Dock / Home Screen / Desktop)
• Preview backdrop (not exported)

操作步骤

1. Open Preview in context.
2. Choose a context: Dock, Home Screen or Desktop.
3. Pick theme (Light / Dark / Both) and a wallpaper or backdrop.
4. Download each render, Download All, or Save to Assets.

小技巧

• Saved renders show up in the workspace Assets tab with their variant and project.

常见问题

Can I get a mockup image of my icon in the dock?

Yes — Preview in context renders your icon in Dock, Home Screen or Desktop scenes with light/dark themes and customizable wallpapers. Download the renders or save them to Assets.

相关功能

• Preview Tray (Sizes, Dock, Home Screen)
• Assets library
• Toolkit: Preview in context

操作步骤

1. Open the View / backdrop menu in the toolbar.
2. Pick Auto, Blur, Color, Gradient or Image.
3. Design against it; exports stay transparent as configured.

常见问题

How do I see how my transparent icon looks on a wallpaper?

Use the preview backdrop (View menu) — pick Blur, Color, Gradient or Image behind the icon. It's preview-only and won't affect exports.

相关功能

• Preview in context (Dock / Home Screen / Desktop)
• Preview Tray (Sizes, Dock, Home Screen)

操作步骤

1. Press Cmd+Z to undo, Cmd+Shift+Z to redo (or use the toolbar buttons).
2. Undo history covers edits, moves, styles and structural changes.

小技巧

• Need more than 50 steps back? Version history snapshots go further.

常见问题

How far back can I undo?

50 steps. Cmd+Z undoes and Cmd+Shift+Z redoes; the toolbar has buttons too.

相关功能

• Version history (Time Machine)

操作步骤

1. Press Cmd+Option+H to open version history.
2. Press Cmd+Option+S (or the Save button) to save a named version.
3. Scrub the timeline (scroll or ↑/↓) to preview older states.
4. Restore, or 'Restore as copy' to branch without losing current work.

小技巧

• Name a version before big experiments — Restore as copy is the ultimate safety net.

常见问题

Can I go back to an earlier version of my icon?

Yes — version history (Cmd+Option+H) keeps automatic snapshots plus versions you name (Cmd+Option+S). Scrub the timeline and Restore, or Restore as copy to branch. It's a macOSicons+ feature.

What happens when two versions conflict?

The editor keeps a safety copy in version history and tells you which version it kept ('Kept this browser's newer version' / 'Opened the newer version from the cloud'). Offline conflicts can be restored as a copy.

相关功能

• Undo / Redo
• Project files (.json import/export)
• Offline editing & sync

操作步骤

1. Open the AI panel and describe what you want ('a glassy Finder-style icon').
2. Watch the activity stream; press stop to interrupt.
3. Attach a reference image (paperclip or drag onto the prompt).
4. Press ↑/↓ in the prompt to recall past prompts.
5. Ask follow-ups: 'make the background softer', 'turn this into clay'.

小技巧

• Be specific about materials: 'glass with frost 20 and opposite specular' beats 'make it pretty'.
• The assistant can critique and iterate on its own output (design lint).

常见问题

What can the AI assistant do?

It designs and edits with real layers: create/update/delete layers, draw and edit paths, run boolean ops, set backgrounds and reflections, apply shaders and style presets, search the 200k+ vector library, generate images, group/align/duplicate/mask, convert to path, weave and more.

Does the AI change my whole design?

Only what you ask. You can stop generation at any time and undo anything it did — its edits land in your normal undo stack.

Can the AI use a reference image?

Yes — attach or drag an image onto the prompt. Use the 'Recreate a reference image as editable layers' chip to rebuild it as real layers instead of a flat bitmap.

相关功能

• Generate Icons with AI (up to 8 options)
• Decompose Image with AI
• AI layer actions (Enhance, Make it Glass/Clay, Harmonize, Variations)
• AI credit meter & billing offers

操作步骤

1. Open Generate Icons with AI.
2. Type a prompt and pick how many options (up to 8).
3. Review the masked options and add one or all to the canvas.

小技巧

• Options arrive already masked to the icon silhouette.

常见问题

How do I get several icon ideas at once?

Use Generate Icons with AI — one prompt yields up to 8 masked icon options. Add the one you like or drop them all in and compare.

相关功能

• AI chat assistant (prompt to layers)
• Decompose Image with AI
• AI credit meter & billing offers

操作步骤

1. Open Decompose Image with AI and choose an image.
2. Wait for the split into named layers.
3. Add individual layers or Add all to the canvas.

常见问题

I have a flat PNG — how do I edit its parts?

Use Decompose Image with AI. It splits the image into named layers you can add individually or all at once, then edit like any other layers.

相关功能

• AI chat assistant (prompt to layers)
• Generate Icons with AI (up to 8 options)
• Remove background (4 techniques)

操作步骤

1. Right-click a layer → Ask AI.
2. Pick Enhance, Make it Glass, Make it Clay, Harmonize Colors or Make 3 Variations.

小技巧

• 'Harmonize Colors' is great after pasting in mismatched artwork.

常见问题

How do I quickly restyle a layer with AI?

Right-click it → Ask AI: 'Make it Glass', 'Make it Clay', 'Enhance', 'Harmonize Colors' or 'Make 3 Variations'.

相关功能

• AI chat assistant (prompt to layers)
• Material style presets

操作步骤

1. Watch the cost label before each AI action.
2. Run the action — credits deduct on completion.
3. If short on credits, pick a top-up offer in the modal.

常见问题

How much does AI cost?

Every action shows its credit cost before you run it. If you're short, the editor offers credit packs right in the flow — no surprise bills.

相关功能

• AI chat assistant (prompt to layers)
• Guest mode (no account until export)

操作步骤

1. Open the Share modal.
2. Create a link and choose view or edit access.
3. Copy the link and send it. Use Reset links to revoke access.
4. Recipients can duplicate the document into their own workspace.

小技巧

• Reset links before making a doc public after private collaboration.

常见问题

How do I share my icon design with someone?

Use Share to create a link with view or edit access. Reset links anytime to revoke. Recipients can duplicate it into their own workspace.

Can people I share with edit my document?

Only if you pick 'edit' access. View links are read-only and show a 'View only' banner.

相关功能

• Live collaboration (presence & cursors)
• Share to community (publish / update / unpublish)
• Community gallery (browse, like, comment, duplicate)

操作步骤

1. Enable collaboration and share an edit link.
2. See collaborators' avatars and cursors live on canvas.
3. Edit simultaneously — changes sync in real time.

小技巧

• Your personal undo stack excludes collaborators' edits.

常见问题

Can two people edit at the same time?

Yes, with live collaboration enabled: share an edit link and you'll see each other's avatars and cursors while editing together in real time.

相关功能

• Share links (view or edit)

操作步骤

1. Open Community from the projects area.
2. Browse and open projects; like and comment.
3. Click 'Copy to my projects' to duplicate one and study its layers.

小技巧

• Duplicating a community project is the fastest way to learn advanced material setups.

常见问题

Can I see how other people made their icons?

Yes — the community gallery has shared projects. Open any of them and hit 'Copy to my projects' to get the full editable document.

相关功能

• Share to community (publish / update / unpublish)
• Share links (view or edit)

操作步骤

1. Open the Share modal → Share to community.
2. Publish; update later when the design changes.
3. Unpublish to take it down.

常见问题

How do I post my icon to the community?

Share modal → Share to community → Publish. You can update or unpublish the post at any time.

相关功能

• Community gallery (browse, like, comment, duplicate)
• Submit to macOSicons

操作步骤

1. Open the projects area (/editor/docs).
2. Create documents (macOS / iOS / Folder icon) and folders.
3. Search, rename and nest to organize.
4. Deleted items go to Trash — restore or permanently delete there.

小技巧

• Folders nest, so you can group by client or app.

常见问题

How do I organize my icon projects?

The projects manager has folders, search and rename. Deleted items go to Trash where you can restore or permanently remove them.

相关功能

• Assets library
• Offline editing & sync
• Boards (multiple icons in one session)

操作步骤

1. Open the workspace → Assets tab.
2. Browse by variant; switch grid/list view.
3. Preview and download any asset again.

小技巧

• Renders saved from Preview in context are stored here too.

常见问题

Where do my exported icons go?

Every icon you generate or export lands in the workspace Assets tab, grouped by variant with its project and credit cost — re-download anytime.

相关功能

• Export formats (.icns, .png, .icon, .json)
• Preview in context (Dock / Home Screen / Desktop)
• Projects manager (documents & folders)

操作步骤

1. Open the workspace → Offline tab.
2. Mark documents/projects 'available offline' (or 'Keep everything offline').
3. Set a storage budget and watch the usage meter.
4. Use Sync now when back online; retry failures or rebuild from server.

小技巧

• Guest mode is fully local — nothing is saved to the cloud until you sign up.

常见问题

Does the editor work offline?

Yes. Mark documents available offline (with a storage budget), keep editing without a connection, and sync when you're back — the editor shows 'N changes waiting to sync' and can retry or rebuild from the server if anything fails.

相关功能

• Projects manager (documents & folders)
• Version history (Time Machine)

操作步骤

1. Open /editor and start designing — no signup wall.
2. Work in the guest scratch document (stored in the browser).
3. Sign up free when you want to export or save to the cloud.

常见问题

Do I need an account to use the editor?

No — design freely as a guest. You need a free account to export (.icns, PNG, .icon) and to save projects to the cloud.

相关功能

• Export formats (.icns, .png, .icon, .json)
• AI credit meter & billing offers

操作步骤

1. Use the boards strip to switch between boards.
2. Create a new icon or folder board.
3. Rename, duplicate or delete boards from the strip.

小技巧

• Duplicate a board to iterate on variants of the same icon.

常见问题

Can I design several icons at once?

Yes — Boards keep multiple icon/folder documents in one session strip with thumbnails. Create, rename, duplicate or switch with one click.

相关功能

• Projects manager (documents & folders)
• 1024x1024 icon canvas

操作步骤

1. The tour opens on first visit.
2. Follow the four steps or click Go to step N.
3. Skip Tour to dismiss it at any time.

常见问题

Is there a tutorial for the editor?

Yes — a 4-step tour covers the canvas, layers & properties and export & save. You can skip it or reopen guidance anytime.

相关功能

• Guest mode (no account until export)

操作步骤

1. Use the Show Interface toggle (shortcut in the doc page help).
2. Work on the bare canvas.
3. Toggle again to restore the full interface.

常见问题

How do I hide all the panels for a screenshot?

Use the hide-interface toggle — it collapses everything to the canvas only. Toggle it back to restore the UI.

相关功能

• Preview backdrop (not exported)

操作步骤

1. Cmd + / Cmd - to zoom; Cmd+0 to reset.
2. Hold Space and drag to pan (or two-finger scroll on a trackpad).
3. Right-click the canvas for zoom actions and Paste.

常见问题

How do I pan around the canvas?

Hold Space and drag, or two-finger pan on a trackpad. Cmd +/- zooms and Cmd+0 resets the zoom.

相关功能

• Transform (position, size, scale, rotation)

操作步骤

1. Enable Snapping from the View menu.
2. Drag a layer — snap guides appear against the canvas and other layers.
3. Equal-spacing hints appear between three or more layers.

小技巧

• Combine with Align & Distribute for numeric precision.

常见问题

How do I align layers while dragging?

Turn on Snapping (View menu). Layers snap to the canvas, other layers and even equal spacing while you drag.

相关功能

• Align & Distribute
• Keyline grid

操作步骤

1. Toggle the keyline grid from the toolbar/View menu.
2. Align artwork to the keylines.
3. Hide it when done — it never exports.

常见问题

What is the keyline grid for?

It's an Apple-style alignment grid over the canvas so your artwork sits within platform guidelines. It's preview-only and never exports.

相关功能

• Icon mask (squircle, iOS, watchOS, none)
• Snapping

操作步骤

1. Press C (or Ctrl+C / Alt+C) to open the eyedropper.
2. Click any pixel to sample it.
3. The color lands in fill, stroke or background depending on context.

常见问题

How do I pick a color from my artwork?

Press C to open the eyedropper and click the pixel. It writes to fill, stroke or the background depending on what's selected.

相关功能

• Canvas background (solid, gradient, blob mesh)
• Fill (solid & multi-gradient)

操作步骤

1. Drag on empty canvas with the Select tool to marquee-select layers.
2. In Edit Path mode, drag to marquee-select points.
3. Move or delete the selection as a unit.

常见问题

How do I select several layers or points at once?

Drag a marquee over them — on the canvas it selects layers, in Edit Path mode it selects anchor points.

相关功能

• Path point editing
• Click selects group

操作步骤

1. Open the editor on a phone or tablet.
2. Switch bottom tabs between Inspector, Layers and Projects.
3. Use the More Tools menu for toolbar actions; haptics confirm key gestures.

常见问题

Does the editor work on phones?

Yes — a mobile layout with bottom tabs (Inspector/Layers/Projects), a selection bar and a More Tools menu keeps the full editor usable on small screens.

相关功能

• Boards (multiple icons in one session)

操作步骤

1. Let documents name themselves — rename any time.
2. Feel haptics on supported touch devices.
3. If export capture fails on a rare GPU, the toast tells you which one.

常见问题

How are my documents named?

Automatically from their content — rename any document yourself whenever you want.

相关功能

• Projects manager (documents & folders)
• Export formats (.icns, .png, .icon, .json)

操作步骤

1. Open /editor/toolkit.
2. Run any tool in the browser (icon mask, generate, convert, remove background…).
3. Or call the matching endpoint at /api/v1/editor/ from your own code.

小技巧

• Toolkit tools work without opening the full editor document.

常见问题

Do I need a Mac to make an .icns?

No — the Toolkit converts and exports .icns (and every other format) right in the browser or via the API.

Is there an API for these tools?

Yes — every toolkit tool has a public endpoint under /api/v1/editor/. See the API docs on the toolkit page.

相关功能

• More Formats (platform kits)
• Remove background (4 techniques)

操作步骤

1. Toolkit → Icon mask.
2. Upload an image and pick a platform mask.
3. Download the masked PNG or call the API endpoint.

常见问题

How do I put my logo into the macOS icon shape?

Toolkit → Icon mask: upload the logo, pick the macOS mask, download. Same via the /api/v1/editor/ icon-mask endpoint.

相关功能

• Icon mask (squircle, iOS, watchOS, none)

操作步骤

1. Toolkit → Generate with AI.
2. Type a prompt.
3. Download the options or continue in the editor.

常见问题

Can I generate icons without using the editor?

Yes — Toolkit → Generate with AI produces masked icon options from a prompt. Credit costs are shown before you run it.

相关功能

• Generate Icons with AI (up to 8 options)
• Icon Toolkit (standalone tools + public API)

操作步骤

1. Toolkit → Convert icon.
2. Upload and choose the target format.
3. Download the result.

常见问题

How do I convert a PNG to .icns or .ico?

Toolkit → Convert icon: upload the PNG, choose .icns or .ico, download. No Mac tools required.

相关功能

• More Formats (platform kits)
• Icon Toolkit (standalone tools + public API)

操作步骤

1. Toolkit → Icon Composer bundle.
2. Upload artwork.
3. Download the .icon bundle.

常见问题

How do I make an Apple .icon bundle without Icon Composer?

Toolkit → Icon Composer bundle builds one from your artwork. For layered editing of existing .icon files, drop them into the editor.

相关功能

• Icon Composer .icon bundles (open & export)
• Icon Toolkit (standalone tools + public API)

操作步骤

1. Toolkit → Xcode .appiconset.
2. Upload your 1024px artwork and pick a platform.
3. Drop the folder into your Xcode asset catalog.

常见问题

How do I make an Xcode appiconset from one image?

Toolkit → Xcode .appiconset: upload a 1024px image, choose macOS/iOS/Universal, and drop the result into Xcode.

相关功能

• More Formats (platform kits)
• Icon Toolkit (standalone tools + public API)

操作步骤

1. Toolkit → Extract from .icns.
2. Upload an .icns file.
3. Download the extracted PNG sizes.

常见问题

How do I get the images out of an .icns file?

Toolkit → Extract from .icns unpacks every embedded size as PNGs you can download.

相关功能

• Toolkit: Convert icon
• Icon Toolkit (standalone tools + public API)

操作步骤

1. Toolkit → Remove background.
2. Upload an image.
3. Download the transparent PNG.

常见问题

Is there a quick way to remove a background without the editor?

Yes — Toolkit → Remove background does it standalone and returns a transparent PNG.

相关功能

• Remove background (4 techniques)
• Icon Toolkit (standalone tools + public API)

操作步骤

1. Toolkit → Favicon pack.
2. Upload your icon image.
3. Download the favicon zip.

常见问题

How do I make favicons for my website?

Toolkit → Favicon pack generates every web favicon size in one zip from a single image.

相关功能

• Toolkit: Release kit
• More Formats (platform kits)

操作步骤

1. Toolkit → Release kit.
2. Upload your icon artwork.
3. Download the complete release zip.

常见问题

What's the fastest way to get every icon format for a release?

Toolkit → Release kit — one zip with .icns, .ico, .appiconset, favicons and everything else you need to ship.

相关功能

• More Formats (platform kits)
• Toolkit: Favicon pack

操作步骤

1. Toolkit → Extract colors.
2. Upload an image.
3. Copy the extracted palette swatches.

常见问题

How do I get the colors out of an icon?

Toolkit → Extract colors returns a palette of swatches from any image.

相关功能

• Suggest from icon (auto palette)
• Icon Toolkit (standalone tools + public API)

操作步骤

1. Toolkit → Preview in context.
2. Upload an icon image and pick a context.
3. Download the mockup render.

常见问题

Can I get a dock mockup without opening the editor?

Yes — Toolkit → Preview in context renders your icon image in Dock, Home Screen or Desktop scenes and downloads the mockup.

相关功能

• Preview in context (Dock / Home Screen / Desktop)
• Icon Toolkit (standalone tools + public API)