Table of Contents
動画を見る：Spoon Graphics「How to Create a Colourful Embroidered Patch in Illustrator」（チャンネル：Spoon Graphics）
レトロなナショナルパーク風パッチを、ベクターの美しさはそのままに“糸の質感”までリアルに。Illustratorで設計し、Photoshopアクションで刺繍の立体感へ。デザインも質感も両立させたい人のための、実践ワークフローです。
このガイドでは、動画の流れに沿って要点を日本語で整理。六角形のベースづくり、風景レイヤーの組み立て、二重ストロークの縁取り、文字組のセンタリング、色ごとのオブジェクト整理、PSD書き出し、そしてアクションの適用・色復元・微調整までを一気に駆け抜けます。
—
学べること
- ナショナルパーク風のレトロパッチをIllustratorで設計する手順
- 形状の重なりをクリーンに整理し、色ごとにまとめる方法
- Photoshopアクションで刺繍のステッチと糸目を表現するコツ
- 色の“青被り”をOverlayで戻す現実的ワークアラウンド
- エラー回避と完成度を高める仕上げの見直しポイント
—
イントロダクション：レトロなナショナルパーク・パッチを設計する
チュートリアルのテーマは「タトゥイーンを題材にした夕景バッジ」。単純化したシルエットと、水平のレトロストライプ、そして二重ストロークの縁取りが、どこか懐かしい国立公園風の空気をつくります。Illustratorで平面的に設計しつつ、最終出力ではPhotoshopのアクションで糸の凹凸や布地の歪みまで再現していくのがポイントです。
プロのコツ：完成を急がず、まずはベクターを“清潔に”整える。Photoshopでの質感づくりは、ベースが整理されていてこそ威力を発揮します。
注意：動画では外部のカラーパレットが参照されていますが、正確なHEX値は明示されていません。色は近似で構いません。
—
ステップ1：Illustratorドキュメントの準備
A4の新規ドキュメントを作成し、単位はピクセルに。View > Hide Artboardsで作業領域を広げます。ベースは六角形。Polygon ToolでShiftを押しながら描き、90度回転、縦長にスケールして土台のプロポーションを決めます。
六角形をややラウンドさせて、硬さを取り除きます。Direct Selection Toolでコーナーウィジェットをドラッグして角丸に。これで“バッジらしい”柔らかい輪郭になりました。
—
ステップ2：タトゥイーンの風景を組み立てる
Pencil Toolで前景の地平線をフリーハンドで描き、閉じたシェイプに。カラーはパレットから最も暗いブラウンをサンプル。六角形の外に出てしまった部分は、Shape Builder ToolでAltを押しながら不要領域を削除して、枠内にきれいに収めます。
続けて中景の山並みを描き、紫系で塗って前景とのレイヤー差をつくります。ここでもShape Builder Toolで外側を落とし、必要なら背面へ送って前景を優先表示にします。
プロのコツ：Pencil Toolは閉じたパスにしてから塗りを適用。閉じ忘れると塗りが漏れて見えます。Undoを活用し、選択対象を確認しながらShape Builderでトリムしましょう。
—
レトロストライプの夕空をつくる
Rectangle Toolで横長の帯を重ね、濃い赤、オレンジ、淡い赤の順で3本のストライプを作成。Smart Guidesを頼りに、山並みの背後へと回しながら正確に整列させます。これでアイコニックなレトロ空の完成です。
—
ステップ3：イラスト要素と二重ボーダーを追加
タトゥイーンの“二つの太陽”をEllipse Toolで配置。1つは淡い黄色で山の稜線に半分埋もれる位置へ。もう1つは小さめにして色をやや薄く。山に隠れる部分は、山形を複製して前面へ持ってきてからPathfinderのMinus Frontで太陽の下側を切り落とすと、すっきり綺麗に回避できます。
バッジの縁取りは二重ストローク。メインの六角形を選んでAppearanceパネルで新規ストロークを追加し、外側に5ptの薄い黄色、その下に20ptの濃いブラウンを重ねます。順序を入れ替えるときはドラッグでOK。これで“細い内縁＋太い外縁”のリッチな輪郭が完成です。
シルエットのディテールとして、前景にモイスチャーファーム風の小建物を矩形から作成。上部角だけを丸めてドーム状にすれば、最低限の形でも十分に伝わります。
注意：Appearanceパネルのストローク順を逆にすると内縁が隠れます。薄い黄色が上、濃いブラウンが下になるよう確認を。
—
ステップ4：タイポグラフィと文字スタイリング
Type Toolでメインタイトル「TATOOINE」を追加（Titling Gothic）。塗りは淡い黄色、サイズはバランスを見ながら調整。精密に中央揃えするため、文字をCreate Outlinesに変換し、六角形をキーオブジェクトに指定してAlignパネルで水平方向中央に。
サブの「NATIONAL PARK」は圧縮系ウェイトにし、トラッキングを広めに（動画では400）。左右にドットを配置してアクセントをつけます。「Visit the」はスクリプト体（Scriptorama）、「OUTER RIM」はワイドなサンセリフ。スクリプトはわずかにShear（縦方向5°）で流れをつけ、SansはDirect Selectionでコーナーをほんの少し丸める（大きい文字で約1.5px、小さい文字で約0.5px）と、硬さが抜けて上質に仕上がります。
プロのコツ：ライブテキストのままでは正確な整列が難しいケースがあります。アウトライン化→キーオブジェクト基準のAlignが安全で再現性も高い方法です。
—
ステップ5：Photoshop用に整えて書き出す
まずは外観を確定させるため、全選択してObject > Expand Appearance。つづいてPathfinderのDivideで重なりを分割後、Ungroupでバラし、色ごとにSelect > Same > Fill Color→PathfinderのUniteで“一色＝一つの形”へ統合します。これを全色に繰り返して、色単位のクリーンな構造に。
クイックチェック：色ごとにひとつの形状だけが残っているか。分割片が残っていると、Photoshop側で予期しない分割・エラーの原因になります。
File > Export > Export AsからPhotoshop（PSD）を選択。解像度はHigh（300ppi）にして、Write Layersを必ずオン。こうすることで各色が独立レイヤーとしてPhotoshopへ渡ります。
注意：Write Layersを忘れると、PSDは1枚絵になります。設定ダイアログを毎回確認する習慣を。
—
ステップ6：Photoshopでリアル刺繍エフェクトを適用
PSDをPhotoshopで開き、Envato Elements配布の「Realistic Embroidery」アクションを色レイヤーごとに個別適用。推奨の順序は、縫い目の外周（Stitched Outline）→面の糸目（Fill Detail）→最終レンダー（Render）。各色の処理が終わるたびに、アクション出力レイヤーをリネームして上書き衝突を防ぎます。
アクションは既定で青系の糸色が乗るため、元のカラーグループ（Illustrator由来の色レイヤー）を最前面に移動し、ブレンドモードをOverlayへ。これで元の色味が刺繍テクスチャと自然に合成されます。小さな文字のボーダーは“不要なら外す”、ドロップシャドウは状況に応じてオフ、Cloth Displaceは一部のレイヤーに限定するなど、スマートオブジェクト内で個別に調整すると精度が上がります。
プロのコツ：対象オブジェクトが小さすぎるとアクションが失敗することがあります。必要に応じてサイズを大きくしてから処理を。
—
クイックチェック
- 各色レイヤーに対して、Stitched Outline→Fill Detail→Renderの順で適用したか。
- アクション出力レイヤーにわかりやすい名前をつけ、次の処理で上書きされないようにしたか。
- 元カラーグループを最上段にしてブレンドモードOverlayを適用したか（青被り対策）。
- 小さな文字は不要なボーダーや影をオフにして、視認性を確保したか。
—
トラブルシューティング
- 仕上がりが色あせて見える：元カラーグループを最前面にしてOverlay。必要ならスマートオブジェクト内のカラーオーバーレイをオフ。
- PSDが1レイヤーで開く：IllustratorのExport AsでWrite Layersをオン。書き出し前にExpand/Divide/Uniteで色を統合。
- アクションが途中で止まる（Make/Invert/Apply不可）：処理対象のサイズが小さすぎる可能性。拡大して再試行。Photoshopのバージョン差異による非対応コマンドがある場合は、同アクションの説明書を確認。
- Illustratorにアクションを読み込めない：これはPhotoshop用です。Illustrator内では動作しません。
—
コメントから：よくある質問と答え
- 「AIだけでできないの？」— 動画はPhotoshopアクションで仕上げる前提。Illustrator内のエンベリッシュ（Scribble等）での代替は動画では扱っていません。
- 「リンクが動かない」— コメント欄でリンクの案内がありますが、動作状況は時期により変わることがあります。取得先は動画の説明欄を参照してください。
- 「アクションが青に染まる」— 元カラーグループを最前面＋Overlayで色を戻します。
- 「レイヤーが分かれない」— Expand→Divide→Unite→Write Layers（300ppi）で再書き出しを。
—
もし実機で刺繍化したいなら
本チュートリアルは“見た目をリアルにするモックアップ”です。実機での刺繍データ化（例えば.PESなどのステッチデータ生成）は別工程となり、本動画では扱っていません。量産や依頼時は、業者の入稿仕様（カラーカウント、最小ステッチ長、糸種など）に合わせて、専用デジタイジングが必要です。なお、実機での試作・量産を見据えるなら、保持力の高いフレーミングや生地固定も品質に直結します。たとえば、磁気 刺繍枠は素早い着脱と安定固定に優れ、ステッチのズレを抑えやすいのが利点です。
また、メーカー別に適合するフレームを選ぶことも重要です。たとえばbrother 刺繍枠やjanome 刺繍ミシン、工業機ならtajima 刺繍枠など、機種対応の情報を事前に確認しておきましょう。さらに、水平荷重に強いmagnetic フレームや、着磁クランプ系のmighty hoopは厚物や多層生地でも安定した固定を実現しやすく、試作効率を高めます。これから始める人は、入門に向いた機材・糸・芯地・枠のスターター構成を検討するのも有効です（刺繍ミシン for beginners）。
—
まとめ
- 形を作る：六角形のベースと角丸、前景と中景、レトロストライプ、二つの太陽、シルエットの小物で“物語性”を加える。
- 文字で締める：アウトライン化とキーオブジェクト整列で、構図の軸を正確に。
- データを整える：Expand→Divide→Uniteで色単位の単一形状にし、PSDはWrite Layers＋高解像度で書き出す。
- 質感を仕上げる：色ごとにアクションを適用し、Overlayで色を復元。必要に応じて影や布地変形を微調整。
この流れを一度身につければ、他の風景やテーマ（街、山、海、SF）にも応用自在。ベクターの明快さと、刺繍の温度感。二つの魅力を、あなたの次のパッチで両立させてください。
—
注意：商標・著作物に関する取扱いは地域・用途によって異なります。動画でも言及がありましたが、特定の名称や意匠を使用する場合は、必ず事前に権利範囲を確認してください。