Skip to content

Commit 0797f99

Browse files
lin-bot23comfyui-wiki
lin-bot23
and
comfyui-wiki
authored
docs(maskeditor): rewrite EN mask editor docs with tools, layers, shortcuts, and settings (#1058)
* docs(maskeditor): rewrite EN mask editor docs with tools, layers, shortcuts, and settings * Add images * docs(maskeditor): add screenshots and name the 3 open methods * Update image * docs(maskeditor): simplify Tools section into numbered table with screenshot * docs(maskeditor): constrain image widths with maxWidth * docs(maskeditor): revert maxWidth on main and 3ways images, keep only tool panel * docs(maskeditor): image first in overview, add numbered areas table * docs(maskeditor): update image layout and enhance overview with numbered areas table * docs(maskeditor): add TopBar actions screenshot with numbered table * docs(maskeditor): clarify video shows older Nodes 1.0 UI * docs(maskeditor): remove emoji, describe button as mask icon * docs(maskeditor): clarify Paint Bucket fill/erase behavior with Tolerance * docs(maskeditor): sync zh and ja docs with EN rewrite * docs(maskeditor): use frontend i18n translations for zh and ja * docs(maskeditor): natural translations for zh/ja, no more hardcoded English terms --------- Co-authored-by: lin-bot23 <lin-bot23@users.noreply.github.com> Co-authored-by: ComfyUI Wiki <contact@comfyui-wiki.com>
1 parent 6c2c852 commit 0797f99

7 files changed

Lines changed: 388 additions & 21 deletions

File tree

‎images/interface/maskeditor/maskeditor_3ways_to_open_maskeditor.png‎

1.46 MB
Loading

‎images/interface/maskeditor/maskeditor_main_editor.jpg‎

672 KB
Loading

‎images/interface/maskeditor/maskeditor_tool_panel.jpg‎

107 KB
Loading

‎images/interface/maskeditor/maskeditor_topbar_actions.jpg‎

212 KB
Loading

‎interface/maskeditor.mdx‎

Lines changed: 129 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,146 @@
11
---
22
title: Mask Editor - Create and Edit Masks in ComfyUI
3-
description: Learn how to use the Mask Editor in ComfyUI, including settings and usage instructions
3+
description: Learn how to use the Mask Editor in ComfyUI, including tools, layers, settings, and shortcuts
44
sidebarTitle: "Mask Editor"
55
icon: "brush"
6+
mode: wide
67
---
78

8-
The Mask Editor is a very useful feature in ComfyUI that allows users to create and edit masks within images without needing to use other applications.
9+
The Mask Editor is a built-in tool in ComfyUI that lets you create and edit masks directly on your images — no external image editor needed. It supports multiple drawing tools, layer management, undo/redo, canvas transformations, and GPU-accelerated brush rendering.
910

10-
The Mask Editor is currently triggered through the `Load Image` node. After uploading an image, you can right-click on the node and select `Open in MaskEditor` from the menu to open the Mask Editor.
11+
---
12+
13+
## How to Open
14+
15+
There are three ways to open the Mask Editor:
16+
17+
1. **Selection Toolbox** — Select a Load Image node, then click the Mask icon button in the selection toolbar above the node.
18+
2. **Image Overlay** — Hover over the image preview (gallery mode), then click the **Edit or mask image** button (mask icon) that appears in the top-left corner.
19+
3. **Right-Click Menu** — Right-click a Load Image node and select `Open in Mask Editor` from the context menu.
20+
21+
> The Mask Editor is available in both **Graph Mode** and **App Mode**.
22+
23+
![Three ways to open the Mask Editor: Selection Toolbox, Image Overlay, and Right-Click Menu](/images/interface/maskeditor/maskeditor_3ways_to_open_maskeditor.png)
24+
25+
---
26+
27+
## Interface Overview
28+
29+
![Mask Editor main interface with tool panel, canvas, and settings side panel](/images/interface/maskeditor/maskeditor_main_editor.jpg)
30+
31+
The Mask Editor opens as a modal dialog with four main areas:
32+
33+
| # | Area | Location | Description |
34+
|---|------|----------|-------------|
35+
| 1 | **Top Bar** | Top | Header with undo/redo, canvas transforms, invert/clear, save/cancel |
36+
| 2 | **Tool Panel** | Left | Tool selection and zoom info |
37+
| — | **Pointer Zone** | Center | The main canvas area for drawing and editing |
38+
| 3 | **Side Panel** | Right | Tool-specific settings and layer controls |
1139

12-
![ComfyUI Mask Editor](/images/interface/maskeditor/maskeditor.jpg)
40+
---
41+
42+
## Tools
43+
44+
The tool panel on the left side offers five tools. Select a tool to activate it, and the right panel will show its settings.
45+
46+
<img src="/images/interface/maskeditor/maskeditor_tool_panel.jpg" alt="Mask Editor tool panel with 5 numbered tools" style={{maxWidth: '300px'}} />
47+
48+
| # | Tool | Layer | Description |
49+
|---|------|-------|-------------|
50+
| 1 | **Mask Pen** | Mask | Primary tool for drawing mask regions. Left-click and drag to paint mask on the image. |
51+
| 2 | **Paint Pen** | RGB (Paint) | Paint directly onto the image's RGB layer. Useful for inpainting or touching up the base image. |
52+
| 3 | **Eraser** | Mask / RGB | Erase parts of an existing mask or paint layer. |
53+
| 4 | **Paint Bucket** | Mask | Flood-fill tool based on color similarity. Click a pixel to fill the connected region with a mask; click an already-masked area to erase from the mask. Tolerance controls how broadly the fill spreads. |
54+
| 5 | **Color Select** | Mask | Selectively mask all pixels matching a target color, with advanced matching algorithms (Simple HSL / LAB).
55+
56+
---
57+
58+
## TopBar Actions
59+
60+
![Mask Editor TopBar actions labeled 1–10](/images/interface/maskeditor/maskeditor_topbar_actions.jpg)
1361

14-
![ComfyUI Mask Editor](/images/interface/maskeditor/maskeditor_ui.jpg)
62+
The top bar provides canvas-wide operations:
1563

16-
You can then click with your mouse on the image to create and edit masks.
64+
| # | Action | Description |
65+
|---|--------|-------------|
66+
| 1 | **Undo** (Ctrl+Z) | Revert the last action |
67+
| 2 | **Redo** (Ctrl+Shift+Z / Ctrl+Y) | Reapply a reverted action |
68+
| 3 | **Rotate Left** | Rotate all layers 90° counter-clockwise |
69+
| 4 | **Rotate Right** | Rotate all layers 90° clockwise |
70+
| 5 | **Mirror Horizontal** | Flip all layers horizontally |
71+
| 6 | **Mirror Vertical** | Flip all layers vertically |
72+
| 7 | **Invert** | Invert the mask (black ↔ white) |
73+
| 8 | **Clear** | Clear the entire mask |
74+
| 9 | **Save** | Save the mask and close the editor |
75+
| 10 | **Cancel** | Close without saving |
76+
77+
> **Note**: Rotate and mirror operations affect all three layers (mask, paint, and base image) simultaneously. GPU-accelerated textures are recreated after transforms.
78+
79+
---
80+
81+
## Layers
82+
83+
The right panel includes a **Layers** section where you can toggle visibility of each layer independently:
84+
85+
- **Mask Layer**: The mask overlay. You can adjust its **opacity** and **blending mode**:
86+
- `Black` — Mask renders as black overlay
87+
- `White` — Mask renders as white overlay
88+
- `Negative` — Inverted mask rendering
89+
- **Paint Layer**: The RGB paint layer (visible when using Paint Pen)
90+
- **Base Image Layer**: The original source image
91+
92+
Click **Activate Layer** on a layer to switch drawing focus to it.
93+
94+
Refer to the main editor screenshot above — the right panel includes brush settings and the Layers section at the bottom.
95+
96+
---
97+
98+
## Brush Settings
99+
100+
When a brush-based tool (Mask Pen, Paint Pen, or Eraser) is active, the side panel shows brush settings:
101+
102+
| Setting | Range | Description |
103+
|---------|-------|-------------|
104+
| **Shape** | Arc / Rect | Round brush or square brush |
105+
| **Color** | Any hex color | The paint color (for Paint Pen) or mask color |
106+
| **Thickness** | 1–250 | Brush diameter in pixels |
107+
| **Opacity** | 0–1 | Brush stroke transparency |
108+
| **Hardness** | 0–1 | Edge softness. 1 = hard edge, 0 = very soft |
109+
| **Step Size** | 1–100 | Spacing between brush dabs. Lower values give smoother strokes |
110+
111+
Use **Reset to Default** to restore the default brush parameters.
112+
113+
---
114+
115+
## Canvas Navigation & Shortcuts
116+
117+
| Shortcut | Action |
118+
|----------|--------|
119+
| **Space + Drag** | Pan the canvas |
120+
| **Ctrl + Scroll** | Zoom in/out |
121+
| **Click zoom %** | Reset zoom to 100% |
122+
| **Ctrl + Z** | Undo |
123+
| **Ctrl + Shift + Z** or **Ctrl + Y** | Redo |
124+
| **Alt + Right-click + Drag** | Adjust brush: left/right changes **size**, up/down changes **hardness** |
125+
126+
---
127+
128+
## Settings
129+
130+
In the ComfyUI Settings panel, you can configure the following Mask Editor options:
131+
132+
| Setting | Category | Default | Description |
133+
|---------|----------|---------|-------------|
134+
| **Brush adjustment speed multiplier** | Mask Editor → Brush Adjustment → Sensitivity | 1.0 (0.1–2.0) | How quickly the brush size and hardness change when using Alt+Right-click drag |
135+
| **Lock brush adjustment to dominant axis** | Mask Editor → Brush Adjustment → Use Dominant Axis | On | When enabled, the adjustment affects only size OR hardness based on your dominant movement direction |
136+
137+
---
17138

18139
## Video Tutorial
19140

20141
<video controls>
21142
<source src="/images/interface/maskeditor/maskeditor.mp4" type="video/mp4"/>
22143
Your browser does not support the video tag.
23144
</video>
145+
146+
> **Note**: This video demonstrates an older version of the Mask Editor (Nodes 1.0 UI) showing brush size adjustment and mask preview creation. The overall workflow remains the same in the current version.

‎ja/interface/maskeditor.mdx‎

Lines changed: 130 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,146 @@
11
---
22
title: マスクエディター - ComfyUI 内でマスクの作成と編集を行う
3-
description: ComfyUI のマスクエディターの設定や使用方法を含め、その使い方について学びます
3+
description: ComfyUI のマスクエディターの使い方を学びます。ツール、レイヤー、設定、ショートカットを網羅
44
sidebarTitle: "マスクエディター"
55
icon: "brush"
6-
translationSourceHash: 3f296e3a
7-
translationFrom: interface/maskeditor.mdx, zh/interface/maskeditor.mdx
6+
mode: wide
87
---
98

10-
マスクエディターは、他のアプリケーションを使用せずに画像内でマスクを作成および編集できる、ComfyUI の非常に便利な機能です。
9+
マスクエディターは ComfyUI に組み込まれたツールで、外部画像編集ソフトを使わずに画像上で直接マスクを作成・編集できます。複数の描画ツール、レイヤー管理、元に戻す/やり直し、キャンバス変換、GPU アクセラレーションによるブラシ描画をサポートしています。
1110

12-
マスクエディターは現在、`Load Image` ノードを介して起動されます。画像をアップロードした後、ノードを右クリックし、メニューから `Open in MaskEditor` を選択してマスクエディターを開くことができます。
11+
---
12+
13+
## 開き方
14+
15+
マスクエディターを開くには 3 つの方法があります：
16+
17+
1. **選択ツールバー** — Load Image ノードを選択し、ノード上部の選択ツールバーにある Mask アイコンボタンをクリックします。
18+
2. **画像オーバーレイ** — 画像プレビュー（ギャラリーモード）にマウスを乗せ、左上に表示される「Edit or mask image」ボタン（mask アイコン）をクリックします。
19+
3. **右クリックメニュー** — Load Image ノードを右クリックし、メニューから「マスクエディタで開く」を選択します。
20+
21+
> マスクエディターは**グラフモード**と**アプリモード**の両方で使用できます。
22+
23+
![マスクエディターを開く 3 つの方法：Selection Toolbox、Image Overlay、右クリックメニュー](/images/interface/maskeditor/maskeditor_3ways_to_open_maskeditor.png)
24+
25+
---
26+
27+
## インターフェース概要
28+
29+
![マスクエディターのメインインターフェース：ツールパネル、キャンバス、設定パネル](/images/interface/maskeditor/maskeditor_main_editor.jpg)
30+
31+
マスクエディターはモーダルダイアログとして開き、4 つの主要エリアで構成されています：
32+
33+
| # | エリア | 位置 | 説明 |
34+
|---|-------|------|------|
35+
| 1 | **トップバー** | 上部 | 元に戻す/やり直し、キャンバス変換、反転/クリア、保存/キャンセル |
36+
| 2 | **ツールパネル** | 左側 | ツール選択とズーム情報 |
37+
| — | **キャンバスエリア** | 中央 | 描画・編集を行うメインキャンバスエリア |
38+
| 3 | **サイドパネル** | 右側 | ツール固有の設定とレイヤーコントロール |
1339

14-
![ComfyUI マスクエディター](/images/interface/maskeditor/maskeditor.jpg)
40+
---
41+
42+
## ツール
43+
44+
左側のツールパネルには 5 つのツールがあります。ツールを選択すると、右側パネルに対応する設定が表示されます。
45+
46+
<img src="/images/interface/maskeditor/maskeditor_tool_panel.jpg" alt="マスクエディターのツールパネル（5 つのツール番号付き）" style={{maxWidth: '300px'}} />
47+
48+
| # | ツール | レイヤー | 説明 |
49+
|---|-------|---------|------|
50+
| 1 | **Mask Pen** | マスクレイヤー | マスク描画の主要ツール。左クリック＋ドラッグで画像上にマスクを描きます。 |
51+
| 2 | **Paint Pen** | ペイントレイヤー（RGB） | 画像の RGB レイヤーに直接描画します。インペイントやベース画像の修正に便利です。 |
52+
| 3 | **Eraser** | マスクレイヤー / ペイントレイヤー | 既存のマスクやペイントレイヤーの一部を消去します。 |
53+
| 4 | **Paint Bucket** | マスクレイヤー | 色の類似性に基づく塗りつぶしツール。ピクセルをクリックすると接続領域にマスクを塗りつぶします。マスク済み領域をクリックするとマスクを消去します。許容値（Tolerance）で塗りつぶしの広がりを制御します。 |
54+
| 5 | **Color Select** | マスクレイヤー | ターゲット色に一致する全ピクセルを選択的にマスクします。高度なマッチングアルゴリズム（Simple / HSL / LAB）に対応。 |
55+
56+
---
57+
58+
## TopBar 操作
59+
60+
![マスクエディター TopBar 操作（1–10 の番号付き）](/images/interface/maskeditor/maskeditor_topbar_actions.jpg)
1561

16-
![ComfyUI マスクエディター](/images/interface/maskeditor/maskeditor_ui.jpg)
62+
上部バーではキャンバス全体に対する操作が行えます：
1763

18-
その後、マウスで画像上をクリックすることで、マスクの作成と編集が行えます。
64+
| # | 操作 | 説明 |
65+
|---|------|------|
66+
| 1 | **元に戻す**（Ctrl+Z） | 最後の操作を元に戻す |
67+
| 2 | **やり直し**（Ctrl+Shift+Z / Ctrl+Y） | 元に戻した操作をやり直す |
68+
| 3 | **左に回転** | 全レイヤーを反時計回りに 90° 回転 |
69+
| 4 | **右に回転** | 全レイヤーを時計回りに 90° 回転 |
70+
| 5 | **左右反転** | 全レイヤーを水平反転 |
71+
| 6 | **上下反転** | 全レイヤーを垂直反転 |
72+
| 7 | **反転** | マスクを反転（黒 ↔ 白） |
73+
| 8 | **クリア** | マスク全体をクリア |
74+
| 9 | **保存** | マスクを保存してエディターを閉じる |
75+
| 10 | **キャンセル** | 保存せずにエディターを閉じる |
76+
77+
> **注**：回転と反転操作は 3 つのレイヤー（マスク、ペイント、ベース画像）すべてに同時に適用されます。変換後に GPU テクスチャが再作成されます。
78+
79+
---
80+
81+
## レイヤー
82+
83+
右側パネル下部の **レイヤー** セクションでは、各レイヤーの表示/非表示を個別に切り替えられます：
84+
85+
- **マスクレイヤー**：マスクオーバーレイ。**マスク不透明度**と**マスク合成オプション**を調整可能：
86+
- `黒` — マスクを黒のオーバーレイとして表示
87+
- `白` — マスクを白のオーバーレイとして表示
88+
- `ネガティブ` — マスクを反転表示
89+
- **ペイントレイヤー**：RGB ペイントレイヤー（Paint Pen 使用時に表示）
90+
- **ベース画像レイヤー**：元のソース画像
91+
92+
レイヤーの **レイヤーを有効化** をクリックすると、そのレイヤーに描画フォーカスが切り替わります。
93+
94+
上のメインエディターのスクリーンショットを参照 — 右側パネルにはブラシ設定と下部のレイヤーセクションが含まれています。
95+
96+
---
97+
98+
## ブラシ設定
99+
100+
ブラシベースのツール（Mask Pen、Paint Pen、Eraser）がアクティブな場合、サイドパネルにブラシ設定が表示されます：
101+
102+
| 設定 | 範囲 | 説明 |
103+
|------|------|------|
104+
| **ブラシ形状** | Arc / Rect | 丸ブラシまたは四角ブラシ |
105+
| **カラーピッカー** | 任意の 16 進色 | ペイント色（Paint Pen 用）またはマスク色 |
106+
| **太さ** | 1–250 | ブラシ直径（ピクセル） |
107+
| **不透明度** | 0–1 | ブラシストロークの透明度 |
108+
| **硬さ** | 0–1 | エッジの柔らかさ。1 = 硬いエッジ、0 = 非常に柔らかい |
109+
| **ステップサイズ** | 1–100 | ブラシの打点間隔。値が低いほど滑らかなストローク |
110+
111+
**デフォルトにリセット** でブラシパラメーターをデフォルトに戻せます。
112+
113+
---
114+
115+
## キャンバス操作とショートカット
116+
117+
| ショートカット | 操作 |
118+
|--------------|------|
119+
| **Space + ドラッグ** | キャンバスのパン |
120+
| **Ctrl + スクロール** | ズームイン/アウト |
121+
| **ズーム％をクリック** | ズームを 100% にリセット |
122+
| **Ctrl + Z** | 元に戻す |
123+
| **Ctrl + Shift + Z** または **Ctrl + Y** | やり直し |
124+
| **Alt + 右クリック + ドラッグ** | ブラシ調整：左右で**サイズ**、上下で**硬さ**を変更 |
125+
126+
---
127+
128+
## 設定
129+
130+
ComfyUI の設定パネルで、以下のマスクエディターオプションを設定できます：
131+
132+
| 設定 | カテゴリー | デフォルト | 説明 |
133+
|------|-----------|-----------|------|
134+
| **Brush adjustment speed multiplier** | Mask Editor → Brush Adjustment → Sensitivity | 1.0 (0.1–2.0) | Alt+右クリックドラッグ時のブラシサイズ・硬さ変更速度。値が大きいほど速い |
135+
| **Lock brush adjustment to dominant axis** | Mask Editor → Brush Adjustment → Use Dominant Axis | オン | 有効にすると、移動の主軸方向に応じてサイズ**または**硬さのみが調整される |
136+
137+
---
19138

20139
## 動画チュートリアル
21140

22141
<video controls>
23142
<source src="/images/interface/maskeditor/maskeditor.mp4" type="video/mp4"/>
24143
お使いのブラウザは video タグをサポートしていません。
25-
</video>
144+
</video>
145+
146+
> **注**：この動画は旧バージョンのマスクエディター（Nodes 1.0 UI）を示しており、ブラシサイズ調整とマスクプレビュー作成の基本フローをデモンストレーションしています。現在のバージョンでも基本的なワークフローは同じです。

0 commit comments

Comments
 (0)