Source: Love Mac | Software download link: Shapik: The Quest for Mac

提示：本文旨在详细介绍 Shapik: The Quest for Mac 的核心功能与操作流程。Shapik 是一款专为 macOS 设计的矢量图形与界面原型设计工具，以其直观的节点式工作流和强大的形状编辑能力著称，尤其适合UI/UX设计师和数字艺术家进行精确的图形创作。

一、核心界面与工作区详解

启动 Shapik 后，您将看到一个干净、模块化的界面，主要分为以下几个区域：

顶部菜单栏与工具栏：包含标准文件操作（文件、编辑、视图等）和常用工具（选择、形状、钢笔、文本等）的快捷图标。
左侧面板 – 图层面板/资源库：以树状结构显示画板（Artboards）和所有形状图层的层级关系。下方通常为预制的形状、图标等资源库。
中央区域 – 画布（Canvas）：主要的创作区域，可放置和编辑多个画板。支持无限画布和精准缩放。
右侧面板 – 检查器（Inspector）：这是核心属性编辑区，其内容根据当前选中的对象动态变化。
- 属性检查器：调整形状的尺寸、位置、旋转、圆角等几何属性。
- Style Inspector: Manage fills (solid colors, gradients, images), strokes (width, caps, dashes), shadows, blurs, and other visual effects.
- Node Inspector (key feature): When an editable shape is selected (e.g., a rectangle converted to a rounded rectangle), this panel displays the coordinates and handle information for all nodes on the path, allowing for fine Bezier-curve-level control.
- Export Inspector: Configure export formats (PNG, SVG, PDF, etc.), size multipliers, and prefixes for the selected layer or artboard.
Bottom Status Bar: Displays real-time information such as the current canvas zoom level, cursor coordinates, and the dimensions of the selected object.

II. Complete Workflow: From Creation to Export

1. Create or Open a Project

Create a New Project: After launching the software, click File > New in the menu bar or use the shortcut Cmd + N. In the dialog that appears, you can preset the canvas size (e.g., choose an iOS device preset) or customize the width and height.

Open an Existing Project: Click File > Open... in the menu bar or use the shortcut Cmd + O, then select a native Shapik file (typically in .shapik format).

2. Add and Edit Basic Shapes

Steps:

Click the “Rectangle Tool” in the left toolbar (or press the shortcut R).
Click and drag on the canvas to draw a rectangle.
Adjust properties: Select the rectangle, and in the “Properties Inspector” on the right, you can precisely enter the width, height, and X/Y coordinates. Drag the “Corner Radius” slider or directly enter a value to turn it into a rounded rectangle.
Apply styles: In the “Style Inspector,” click the “Fill” color well to choose a color. Click the “Stroke” toggle to set its border color and width.
Advanced editing – Convert to Path: Select the shape and click Layer > Convert to Outline in the top toolbar (or press Shift + Cmd + C). After that, you can use the “Direct Selection Tool” (shortcut A) to click any node on the path, adjust the node type (mirror, break, align) in the “Node Inspector” on the right, or drag the handles to freely edit the shape.

3. Draw custom paths with the Pen Tool

Steps:

Select the “Pen Tool” in the toolbar (shortcut P).
Click on the canvas to create the first anchor point, move the cursor and click again to create a straight line segment, or click and drag to create a curved anchor point with handles.
To close the path, move the cursor to the starting point and click when the small circle icon appears. To end an open path, press Esc or double-click the last point.
Use the “Direct Selection Tool” (A) to adjust the anchor points and handles of existing paths at any time.

4. Managing Layers and Artboards

Add a new artboard: Select the “Artboard Tool” (shortcut A — note: this may share a shortcut with the Direct Selection Tool depending on focus), drag on the canvas, or choose a device size from the preset list in the Inspector on the right and drag it onto the canvas.

Layer operations: In the Layers panel on the left, drag layers to reorder them. Right-click a layer to rename it, group it (Cmd + G), lock it, hide it, and more.

5. Aligning, Distributing, and Boolean Operations

Align and distribute: Select two or more objects, and alignment icons will appear in the top toolbar (align left, horizontal center, distribute spacing evenly, etc.). Click to apply.

Boolean operations (shape combining): Select two overlapping paths, then choose “Union,” “Subtract Front,” “Intersect,” or “Exclude” from the top toolbar or right-click menu to create compound shapes. This is the foundation for creating complex icons.

6. Exporting the Final Artwork

Steps:

Select the export object: Select a shape, group, or artboard on the canvas, or check the export marker (a small square icon) to the left of the target layer in the Layers panel.
Configure Export Settings: Switch the right panel to “Export Inspector.” Click “+” to add an export preset.
- Format: Choose PNG, JPG, SVG, or PDF.
- Suffix/Scale: Can be “@2x,” etc., and set the scale factor (e.g., 2x generates double-size images).
Perform Export: Click the “Export Selected…” button at the bottom of the inspector, or use the menu bar File > Export... (Cmd + E), then choose a save location.

III. Advanced Tips for Common Features

Smart Guides & Alignment: With View > Show Smart Guides enabled (on by default), purple guide lines appear when moving objects, indicating spacing and center alignment with other objects, greatly improving layout efficiency.
Symbols/Components: Create frequently used elements (such as buttons, navigation bars) as “Symbols.” Select an object, right-click, and choose “Create Symbol.” Then drag instances of that symbol from the library onto the canvas; modifying the master symbol will automatically update all instances.
Using Masks: Place a shape (such as a circle) over an image or another shape, select both, right-click, and choose “Use Selected Shape as Mask,” or press Ctrl + Cmd + M to achieve a clipping effect.
Global Colors & Styles: After defining colors or layer styles in the “Styles Inspector,” you can click the “+” next to a color swatch or style to add it to the “Document Colors/Styles” library, making it easy to reuse throughout the entire project and ensuring visual consistency.

IV. Common Issues & Solutions

Symptom	Possible Cause	Solution
Unable to select or move a shape on the canvas	The layer may be locked or hidden; the current tool is not the “Select Tool”; the object is inside a locked or hidden group.	Check the Layers panel on the left to confirm the target layer is not locked (lock icon) or hidden (eye icon); press V to switch back to the “Select Tool”; expand the group structure to inspect.
Handles feel unresponsive when drawing with the Pen tool	The handle’s node type may be fixed.	After drawing, use the “Direct Selection Tool” (A) to select anchor points, then try switching the node type in the “Node Inspector” on the right (e.g., from “Mirrored” to “Disconnected”) for more flexible control.
Exported PNG images have a non-transparent background	The artboard or shape itself has a background color; the export settings do not have transparent background selected.	Ensure the artboard fill is set to none (configure in artboard properties); when exporting PNG, check the “Transparent Background” option in the export settings.
Unexpected shapes after boolean operations	The stacking order (layer hierarchy) of shapes affects the results of operations such as “Subtract Top.”	Adjust the order of the two shapes via the Layers panel, or try different boolean operation options.
Software runs slowly	Too many elements on the canvas, especially when using many complex gradients or shadow effects.	Try temporarily hiding complex layers; or rasterize complex graphics (right-click > Rasterize) to use as images; ensure macOS is updated to the recommended version.

V. Keyboard Shortcuts Summary (Mac Version)

Function Category	Action	Shortcut
File Operations	New File	Cmd + N
Open File	Cmd + O
Save File	Cmd + S
Save As	Shift + Cmd + S
Export	Cmd + E
Tool Selection	Selection Tool	V
Direct Selection Tool (Node Editing)	A
Artboard Tool	A (pay attention to focus)
Rectangle Tool	R
Ellipse Tool	O
Pen Tool	P
Editing Operations	Copy	Cmd + C
Paste	Cmd + V
Paste in Place	Shift + Cmd + V
Undo	Cmd + Z
Redo	Shift + Cmd + Z
Group	Cmd + G
Ungroup	Shift + Cmd + G
Convert to Outline (Path)	Shift + Cmd + C