illustration-grainy-gouache について
デザインやコーディングに取り組む動物を描いた、温かみのあるエディトリアルカード向けのスキルです。粒状感のある柔らかな陰影、ホットピンクの背景、繰り返し使う小物と構図を定義します。
主な機能
- 01輪郭線のない柔らかな陰影形状
- 02縁に集まる細かな粒状感
- 03ホットピンクのカードとクリーム色の装飾
- 04デザインやコーディングをする動物キャラクター
- 05共通要素用の SVG ヘルパー
活用シーン
- 01空状態のイラスト制作
- 02オンボーディング用アートの作成
- 03季節ブログのヘッダー制作
- 04作業中ページのビジュアル制作
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ mengto/ skills --skill illustration-grainy-gouacheインストール後、Claude Code で/illustration-grainy-gouacheを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
style.jsonagents/openai.yamldemo/index.htmlPROMPT.mdexamples/cozy-commit.svgnight-shift.svgrainy-refactor.svgreferences/craft.mdscripts/gouache.mjslint.mjsrender.mjs詳細
イラスト:粒子感のあるガッシュ
温かみのあるエディトリアルスタイルです。かわいい動物がデザインやコーディングに取り組む様子を、輪郭線のない平面的な形で描き、柔らかな陰影と細かな暗い粒子を加えます。鮮やかなホットピンクのカードに、クリーム色のきらめきと舞い落ちる秋の葉を添えます。空の状態、オンボーディング、季節感のあるブログのヘッダー、「ただいま対応中です」といったページなど、製品に温かみと魅力を加えたい場面で使います。
使い分け:テクスチャも動物もない、すっきりとしたフラットベクターには illustration-flat を使います。白地にハッチングと動く目を描いた、手描き風の動物には illustration-ink-sketch を使います。インクの輪郭線がある人物には illustration-outlined-cartoon を使います。このスタイルには人物のカードがありません。人物が必要な依頼では、代わりにいずれかのスタイルを使ってください。
14 種類のスタイルで、デザインやコーディングをテーマにしたオリジナルカードを 42 枚集めたセットから抽出しました。examples/ にある 3 枚のカードは、このスタイルの公開済みカードです。
見た目を一文で
輪郭線のない形を、それぞれ淡い色から濃い色へ変化するグラデーションで塗り、その上に細かな暗い粒子を散らします。粒子は形の縁や影に向かって濃くなります。背景にはホットピンク #FF81BE を使い、その下にチョークのような質感の紫色のたまりを置きます。
縁に集まる粒子を取り除けば、ただのフラットベクターになります。ピンクを変えると、このセットらしさが失われます。
パレット
サンプルから測定した値です。大きな形状にはすべてグラデーションを使用し、単色にはしません。正規の値はすべて style.json に記載されています。
| 役割 | Hex | 使用箇所 |
|---|---|---|
| カード背景 | #FF81BE | 全面塗りの長方形、夜や雨のシーンも含むすべてのカード |
| クリーム | #FDD5A8 | きらめき、バースト、ドット、湯気、コードのテキスト、雨、ポンポン、毛並みの線 |
| クリームライト | #FFF3E2 | 雨粒とポンポンに入れる小さな輝きのみ |
| プールの影/中心 | #B95A93 / #A04A80 | チョークのような床の影。最も重い物体の下に不透明度 0.8 で中心色を重ねます |
| ブラッシュ | #FF7FB0 | 不透明度 0.6 の頬の楕円 |
| バーミリオン | #FF4816 | エディターのドット、ブックマーク、コミットノードなどの単色アクセント |
| バーミリオンのグラデーション | #FF5A24 #F2440F #F0420E #B02B08 #9C2306 | マグカップ、植木鉢、キツネの毛並み(放射状のグラデーション #FF5A26→#FB4714→#D9380C→#9C2406) |
| コーラル | #FF6A3A | コードのアクセント、マグカップの縁、付箋 |
| ニット | #EE430F+#C2320A、濃色 #D2360B+#A42807、リブ #E03A0C+#A8290A | セーター、袖、ビーニー、袖口 |
| オーカー/ゴールド | #E7A13A / #D88A1E | コードのキーワード、付箋、帯の縁/金色の罫線、フリンジ、フクロウの足指 |
| オーカーのグラデーション | #E38C1E #C96E05 #9E5004 | 窓枠、本の表紙 |
| 木材の天板 | #F0A23C→#D98418、縁 #F6B860、接地面 #7A3A04 @0.38 | 机の天板、窓台 |
| マルーンのグラデーション | #8A220A #701001 #4A0901、濃色 #5A0E02 #3A0601 | 本、机と窓台の前面、丸窓の枠、エプロン |
| 端の影 | #1A0402 | 箱と本の背の両端に 0.4〜0.5 で重ねるグラデーション |
| スクリーン | #8A2632→#621626→#3A0A14 | スクリーン。夜空は #3A1424→#1C0910、雨の窓ガラスは #22090F→#4E1420 |
| ほぼ黒 | #191113 のベゼル、グラデーション #3A2E31→#0D0809、縁 #6A5A5F | ノートパソコン、モニター、ランプ、足、耳の先 |
| 顔のインク | #0D0809 の瞳/鼻、#120A0B #1A0E0F の線、#F7D6A6 の目のリング | 顔 |
| クリーム色の毛 | #FFE6C4→#FCD9AE→#F0BF88 | 口元、胸、尾の先(放射状) |
| アイビー | #16592C #0F4A23 | #0C3F1D #082F15、葉脈 #06150A | アイビーの葉、つる |
| オリーブ | #7A7318 #6A6416 | #524810 #3C350C、葉脈 #1C1804。マグカップは #5E5712 | オリーブの葉、植物、マグカップ |
| オリーブのアクセント | #A8B030 のコード用グリーン、#8A9416 のエディターのドット、#545C01 のスカーフ | 小さなアクセントのみ |
| オーク | #E08A1C #D47A0C | #C96E05 #A85A05、葉脈 #3A1404 | オークの葉 |
| 毛皮、アンバー | #E59240→#CF7426→#A9531A→#7A3510。手足 #B85E1E→#5E280C、足 #6A3418→#32150A | 茶色の動物 |
| 毛皮、フクロウ | #F0962E→#DC7A14→#B85A08→#8A3E04。翼 #7E2A06→#461402 | オレンジ色の動物 |
禁止事項:形状の輪郭線。プール以外での青、ティール、紫、グレー。ランプの光の円錐以外での純白。#FF81BE 以外の背景。単色の大きな形状。グローやリムライト。クリーム色の装飾をクリーム色の毛に重ねないこと。また、バーミリオンの頭部をピンクだけの背景に置かないこと。暗い面の前に配置してください。
線と塗り
幅480の場合:
- 図形は塗りで表現し、線で縁取りません。 値または色相に差をつけ、エッジに粒子感を加えて図形を分けます。マグカップや頭の周囲に線を引くのは、スタイルが異なることを示す最初の兆候です。
- 細い暗色のディテール線のみを使用し、端は丸くし、
#000は決して使いません。葉脈は0.6-0.7、葉の茎は0.9、ひげは0.75-0.8(#1A0E0Fまたは#3A1A0C)、口とふたの線は1.05-1.3(#120A0B)、指のしわは0.7(#1A0A04)、羽毛の線は0.9-1.1です。 - クリーム色の線: 湯気は1.15-1.35、放射線は1.3、スカーフの留め具は1.1、雨はstroke-opacity 0.22-0.5で1.0、耳の毛の短い線は1.1です。
- 画面上のコード: 線幅2.2-2.6、端は丸くし、行間は7-8.4、各行に黄土色、クリーム色、コーラル色、オリーブグリーンの線分を2-3本配置します。
- グラデーション: 丸い形には放射状グラデーション(cx 0.42-0.46、cy 0.30-0.34、r 0.72-0.78。ストップは明色0、中間色0.5、陰影0.82、エッジ1)を使います。板状の形には垂直方向の線形グラデーション(上部を明るく、下部を暗く)を使います。円筒形には水平方向の5ストップグラデーション(暗色0、中間色0.22、ハイライト0.45、中間色0.75、最暗色1)を使います。
- オーバーレイは新しい色を追加せずに奥行きを加えます。ボックス全体に
gEnds、円筒の底部にgBase(#5A0E020→0.5)、頭頂部にクリップした頭頂バンド(#7A3510@0.3)、胴体に重ねる放射状の「汗」(縁に#5A0E020→0.55)、袖のグラデーション(外側は暗いマルーン色0.55→内側は#FF8A500.12-0.22)を使います。 - キャラクター内部のキャストシャドウ: 袖のパスを
#4A0901で塗り、ぼかし2.4(soft)、3.5 pxずらし、胴体にクリップして、不透明度0.85にします。 - 粒子感: 塗りつぶした図形グループはすべて
filter="url(#p-grain)"で囲みます。明るい大きな面(窓枠、机の天板)にはgrainLを使います。顔のディテール、コード、クリーム色の装飾、ひげ、葉脈はくっきりしたままにします。粒子グループの外側に描画し、その後に配置してください。 - パターン(userSpaceOnUse):ニットは7x6のシェブロン、リブは3.2x10のストライプ、フェアアイル模様のバンドは12x11(マルーン色、クリーム色のしずく、黄土色のドット)、スカーフは22x19、羽毛のシェブロンは8x7です。
キャラクター
例に登場する動物はキツネ、カワウソ、フクロウのみです。新しいカードでは、新しい動物またはすでに登場した動物を1匹追加します(ウサギ、ハリネズミ、クマの子、アライグマ、ネコ、アナグマなどが適しています)。
- プロポーション: 頭幅は胴体と同じか、それより広くします(84-92 px)。頭の高さは胴体の高さ(肩から座面まで)の0.8-1.0倍です。頭頂部から座面までは110-150 px、脚が床まで届く場合はさらに30-40 px加えます。手足は短くし、首は見せません。あごを肩に8-10 px重ねます。SVGで測定してください。頭と胴体の比率が0.6だと、セットのほかのキャラクターよりひょろ長く見えます。
- 頭: 放射状の毛並みグラデーションを使った、滑らかな閉じたパスを1つにします。上部に濃い色の頭頂部の帯を配置し、クリップします。クリーム色のマズル(
gCream)と、その1.6 px下に0.55の不透明度で濃い色の複製を配置して影にします。耳には濃い色の内側の形(#C2300Aまたは#5A2408)を付けます。キツネの耳先はclipPathで黒くします。頭のグループは、動物の視線の方向に5-9度傾けます。 - 目(特徴的な部分): クリーム色の輪(
#F7D6A6、r 10-12)、視線の方向に0.22 rずらした黒目(#0D0809、半径0.81 r)、視線側の中心より上にクリーム色の4点星(スケール0.52-0.78)、反対側の下にクリーム色の点(r 1.35-1.6)を配置します。目の中心間は29-37 pxとし、目がほぼ触れ合うようにします。眠そうなバリエーションでは、毛色のまぶたを上部にクリップし、1.3のまぶたの線と、目尻に短い跳ね上げを加えます。 - 鼻と口:
#0D0809の、幅10-17 pxの丸みを帯びた逆三角形に、#6A5A5Cの光沢の楕円を重ね、そこから1.05の「w」字の口を垂らします。カワウソには、#7A4A30の鼻口点(r 0.9)を付けます。 - ひげ: 片側に2本ずつ、太さ0.75-0.8、長さ28-75 pxで、少し扇状に広げます。頬の赤み:
#FF7FB0@0.6、rx 4.4-6.6、ry 2.6-3.4を、左右それぞれの外側の目尻の下に配置します。 - 前足はこのスタイルの手です。 物を握る場合(カワウソのマグカップ):毛色の前腕チューブは幅12 → 9.5で、幅17 → 15.5のリブ編み袖口から伸ばします。濃い色の前足(
#6A3418→#32150A)には、約9 x 15の手のひらブロック、幅4.6 → 4.2、長さ5.8-6.8の指チューブ3本を付け、マグカップの手前を横切るように4.7間隔で配置します。親指チューブは幅5.6 → 4で、側面から上にアーチ状にかぶせ、指の列の間に0.7のしわを付けます。休める場合:gBlackのつま先に切れ込みのある前足(幅19 px)を、面に平らに置きます。止まり木にとまる場合:足ごとに幅4.6 → 3.8のつま先チューブを3本、横木に巻き付け、それぞれの先端に1.3の濃い色の鉤爪を付け、下向きに丸めます。親指チューブは、references/craft.mdの左右の手の指定に従います。前足には動物自身の毛色のグラデーション(または濃い色の前足用グラデーション)を使います。クリーム色の物(紙のロケットやクリーム色のマグカップなど)にクリーム色の前足を重ねると、見えなくなります。 - 服: ニットのセーター(胴体は
pKnitD、袖はpKnit。リブ編みの襟、袖口、裾付き)と、オプションのフェアアイル柄の帯(黄土色の縁取りは1.3)。マフラーには幅7-8 pxの金色の房を付けます。ニット帽は、ニットのドーム、リブ編みの折り返し、#FFF0DCのきらめきを付けたクリーム色のポンポン(r 8.6)で構成します。折り目は線ではなく、陰影のオーバーレイで表現します。 - 座るポーズ: 腰を台の上面に4-6 px重ねます。脚のチューブ(19 → 13)は台の前面に垂らし、水かきのある足につなげます(水かき部分に、
#3E1A0Aのつま先の楕円4つ、rx 2.35 ry 3.3)。足は8-20度外向きにします。しっぽのチューブ(17 → 4.6)は後ろに伸ばしてカールさせます。低い座席(プーフやスツール)では、太ももをひとつの膝に見える形にして手前に向け、腰幅を超えないようにし、膝の膨らみを2つ付けます。すね(30 → 25)は座席の前面に垂らし、足は床に置いて、接地部分に#7A3A04の楕円を付けます。 - うまくいくポーズ: 前足を前に伸ばしてノートパソコンのデッキの上で丸まる(キツネ)。窓辺に座り、両方の前足でマグカップを持つ(カワウソ)。ランプのアームにとまり、画面に向けて頭を傾ける(フクロウ)。プーフに座り、片方の前足を上げて小道具を頭上に掲げ、もう片方の前足をノートパソコンのキーに置く(セルフテストのウサギ)。
装飾と小物
- 背景の装飾: クリーム色のバーストを2つ(8本の光線、スケール0.75~0.9、1つは12~14度回転)、クリーム色の4点星を6~7個(スケール0.55~0.95)、クリーム色のドットを18~21個(半径1.0~1.4)。余白だけに配置し、シーンから少なくとも8 px離してください。
- 葉: カード1枚につき7~8枚、種類は3つ(アイビー、オーク、オリーブ)、スケール0.55~1.4、木目を入れます。x < 80とx > 400に、ゆるく2~3つのまとまりで配置し、上部付近に単独の葉を置く場合は最大1枚までにします。それぞれの葉を葉脈に沿って二分し、明るい側と暗い側に分けます。
- 小物: ノートパソコン(ベゼルは
#191113、rx 4~8、コードが表示されたマルーン色の画面、半径1.5~1.9のエディターのドットを3つ)、黒いスタンド付きモニター(テキストはモノスペースの7 px02:14のみ使用可)、マグカップ(朱色、オリーブ色、またはクリーム色の円筒形、クリーム色の湯気の曲線を2~3本、三日月やリングと横棒などのクリーム色の模様)、本の積み重ね(マルーン、アイビー、黄土色。金箔風の線は幅1.6、点線の縁取りは半径0.9で7 pxごと)、窓(アーチ型の黄土色または丸いマルーン色の枠。雨、月、星は窓ガラスの内側だけに描く)、デスク(天板は黄土色、前面はマルーン、取っ手は真鍮)、デスクランプ(黒い筒状のアーム、光の円錐に斑点)、鉢植え(朱色の鉢、扇状に広がるオリーブ色の葉を5枚、アイビーのつる)、付箋(黄土色またはコーラル色、角を折る)。 - カードごと: 主役の動物を1匹、小物を3~5個。人物、UIキットのパネル、ロゴ、アイコン、青空、数文字を超えるテキストは使いません。
構図
- カード:
<rect width="480" height="360" fill="#FF81BE"/>、続いて装飾、葉、シーングループの順に描画します。 - シーンのサイズ: 幅330~360 px(カードの70~75%)、高さ250~290 pxとし、横方向の中心をx 240から10 px以内に合わせます。床の色だまりの下端はy 310~330に置き、家具の両側から10~20 pxずつはみ出すようにします。
- 焦点: 動物の顔を上部中央(y 100~190)に配置します。暗い面(画面、窓ガラス、丸窓、または夜空のグラデーション内の黒板)の手前に置き、オレンジ色が映えるようにします。
- 地面: 床の線は引きません。チョーク状の色だまりを地面として使います。デスクや窓台に置く物には、
#7A3A04@0.38の接地楕円(ry 1.7~2)を付け、縁に#F6B860の0.9ハイライト線を入れます。 - グループの変形: まずシーンを描き、次に1つのラッパーで中央に配置します。
translate(0 -20)またはtranslate(0 10)、あるいはtranslate(240 178) scale(1.07) translate(-240 -178)を使います。装飾や葉にはこの変形を適用しません。 - 密度: 中程度にします。どの象限にも装飾を置き、シーンの周囲にはピンクの余白を確保します。
テクニック
scripts/gouache.mjsは共通の定義を指定したプレフィックス付きで出力し、繰り返し使うビルダーを提供します。スキルフォルダーから実行します。
node scripts/gouache.mjs defs wk- # filters, leaves, sparkles, common ramps, knit patterns
node scripts/gouache.mjs --demo /tmp/g.svg # a test card using every builder
import fs from 'node:fs';
import * as G from '/abs/path/to/illustration-grainy-gouache/scripts/gouache.mjs'; // relative to THIS file, not the cwd
const p = 'wk-';
const extraDefs = ''; // your fur ramps, clothing gradients and clipPaths
const body = [
G.background(p, { seed: 3 }), // pink + bursts, stars, dots
G.leaves(p, [['ivy', 40, 112, -20, 1.15], ['oak', 436, 60, 22, 0.95]]),
G.shadow(p, 70, 410, 312, { core: [90, 330] }), // chalky pool
G.grained(p, `<path d="${G.tube([[201, 260], [200, 271], [198, 281]], [19, 16, 13])}" fill="url(#${p}gMaroon)"/>`),
G.eye(p, 197, 143, 10.8, [1, 0.3]), // glossy eye, looking right
].join('\n');
fs.writeFileSync('card.svg', G.card(p, G.defs(p) + extraDefs, body, 'Title, Grainy gouache style'));
G.defs(p)は、次のIDをすべてプレフィックス付きで定義します。フィルター:grain、grainL、chalk、speck、soft。シンボル:ivy、oak、olv、star、burst、drop。グラデーション:gBlack、gMaroon、gOchre、gTop(木の天板)、gEnds、gBase、gScreen、gDeck、gCream、gVerm、gOliveCyl、gCreamCyl、gCone、および葉用のグラデーション。パターン:pKnit、pKnitD、pRib。動物の毛皮のグラデーション、服のグラデーション、clipPathsは、独自のextraDefs文字列に追加します。ビルダー:background、leaves、shadow、grained(p, svg, 'grain' | 'grainL')、tube、smooth、eye、blush、use、card。
1. エッジの木目。 フラクタルノイズ(基本周波数2.1)を暗い茶紫色の斑点にします。マスク2.0 x alpha - 1.8 x blur(alpha, 3.2)は各縁のすぐ内側の帯です。2つ目の項で塗りの暗さに応じて重み付けし、斑点をシェイプに乗算します。ヘルパー内のgrainFilter()にこの処理が含まれています。密度はdens(1.0~1.08)で調整し、baseFrequencyは変更しないでください。
2. 陰影のある形状。 ベースグラデーションを適用し、同じクリップ内でオーバーレイを重ねてから、グループに木目を加えます。
<g filter="url(#wk-grain)">
<path d="M74 288 L314 288 C318.5 293 319 309 314 314 L74 314 C69.5 309 69.5 293 74 288 Z" fill="url(#wk-gMaroon)"/>
<path d="M74 288 L314 288 C318.5 293 319 309 314 314 L74 314 C69.5 309 69.5 293 74 288 Z" fill="url(#wk-gEnds)"/>
</g>
<path d="M174 299.5 L204 299.5 M174 303 L196 303" stroke="#701001" stroke-width="1.2" stroke-linecap="round"/>
3. 手足と尾にはG.tube(points, widths)を使います。滑らかな中心線に沿った、端が丸い(手足が袖に入る部分ではcap0/cap1: false)先細りの塗りつぶしチューブです。
4. 色だまりの影には、chalkフィルター(変位を加え、アルファをまだらにする)を通した2つのブロブを使います。最初は#B95A93、次に#A04A80の中心部分を不透明度0.8で重ねます。
失敗パターン
- 背景が変わるとセットが崩れます。 Night Shift と Rainy Refactor は最初、藍色とティールの背景で描かれ、審査員の評価はどちらも 7 でした。
#FF81BEに戻すと、評価はそれぞれ 8.5 と 9 になりました。夜、雨、天気は窓や画面の中だけに描いてください。 - 粒子が汚れたテレビの砂嵐のように見えます。 最初のドラフトでは、全体に均一な粒子を使っていました。粒子を端や暗い色調に集めてください(上記のフィルターを使用)。明るい大きな面には
grainLを使い、クリーム色の毛並み、顔の細部、装飾はくっきりさせてください。 - 光彩がデジタルに見えます。 夜のシーンから、放射状の光彩とリムライトのグラデーションを取り除きました。光には、
speckフィルターを通した不透明度 0.5 の白い光の円錐と、斑点状の光だまりを使います。 - 主役が目立たなくなります。 鮮やかなピンクの背景では、オレンジ色の毛並みとのコントラストがほとんどありません。頭部は暗い画面、窓枠、または額縁を背景に配置してください。
- ミトンのような前足。 前足を暗い塊で描くと、手袋のように見えます。手のひら、指の筒状のパーツ、親指の筒状のパーツ、0.7 のしわで組み立て、指は持ち物の手前に、親指はそれを包むように配置してください。
- 膝の上がスカートに見えます。 自己テストでは、腰幅より広い膝の上の形と、その内側に配置した細いすねが、緑のチュチュのように見えました。膝の上は腰幅以内に収め、すねは膝とほぼ同じ幅にしてください。
- 動物が浮いて見えます。 座った動物の体が縁で途切れていると、宙に浮いているように見えます。腰を面に 4〜6 px 重ね、足を縁の手前に垂らし、グループ全体の下に光だまりの影を置いてください。
- 輪郭線が入り込んでしまいます。 小道具の周囲に 1 px の線を引くと、別のスタイルに見えてしまいます。色の明度差を使ってください。
- ごちゃつき。 シーン枠の中に葉や装飾が 8 個を超えると、カードが窮屈になります。葉は余白に配置してください。
- テキスト。 ワードマークやラベルがあると、絵画的な印象が損なわれます。画面に表示するのは、最大 7 px の等幅フォントの時計だけにしてください。
例
examples/cozy-commit.svg(Cozy Commit):本の山の上の開いたノートパソコンで丸くなるキツネ、{ }の模様が入ったスカーフ、ココアのマグカップ。横たわるポーズ、休めた前足、眠そうな半開きの目、スカーフの模様、gEndsを使った本の陰影、画面上のコミットグラフを示しています。examples/rainy-refactor.svg(Rainy Refactor):雨の降る窓辺でニットセーターを着て、両方の前足でティーマグを持つカワウソ。物をつかむ前足の作り方、ニット/リブ/フェアアイル柄、袖の落ち影、足を縁から垂らした座りポーズ、窓ガラス内に収めた雨、小型ノートパソコン上の差分を示しています。examples/night-shift.svg(Night Shift):デスクランプのアームにとまって、02:14 にモニターを見つめるニット帽をかぶったフクロウ。とまり木をつかむ足指、羽が段状に重なる翼、斑点状のランプの光、丸い夜の窓、付箋、脚と接地影のある机を示しています。
ワークフロー
スキルフォルダー(このファイルがあるフォルダー)からコマンドを実行します。wk- などのプレフィックスを選びます。
- 概要: 主題を3語で表し、それを示す動作を1つ決めます(「ウサギがサイドプロジェクトを公開する」なら、デプロイボタンを押す、小さなロケットのステッカーなど)。動物と、その頭の背後に置く暗い背景を1つ選びます。
- ポーズと主役: 作例にあるポーズ、またはそれに近いポーズを選びます。各前足の役割(握る、休める、乗せる)を決め、握る前足については左右と親指の位置を決めます(
references/craft.md)。 - ブロックアウト: 作業用フォルダーにジェネレーター(
gen.mjs)を作成し、絶対パスでscripts/gouache.mjsをインポートします(ES のインポートは cwd ではなくジェネレーターファイルを基準に解決されます)。家具、プール状の影、動物の大きな形をまずベタ塗りで配置し、レンダリングします。 - 描画: ベタ塗りをグラデーションとオーバーレイに置き換え、模様、顔、前足、小物を追加します。装飾と葉は最後に、余白へ追加します。
- レンダリング:
node scripts/render.mjs card.svg card.png。 - シート:
node scripts/render.mjs --sheet sheet.png examples/*.svg card.svg。「同じ手、同じセット?」と確認します。 - 拡大表示: 顔、各前足、足、接触箇所(腰と棚、マグカップと面)を対象に、
node scripts/render.mjs card.svg z-face.png --zoom x,y,w,h --scale 8を実行します。 references/craft.mdの5つの基準で厳しく批評し、修正して再レンダリングします。4回の反復を見込んでください。- リント:
node scripts/lint.mjs card.svg --prefix wk- --palette style.json。すべての ERROR を修正します。各 WARN は、意図的な毛並みまたは色合いのグラデーションでなければなりません。
確認
- 背景は
rxのない、全面塗りの#FF81BEの rect 1つです。 - どの図形にも輪郭線がありません。ストロークは、0.6~1.3 の詳細線、クリーム色の装飾線、コード線のみです。
- 大きな形にはすべてグラデーションがあり、
grainまたはgrainLグループ内に配置されています。8倍に拡大すると、粒子が端で濃くなります。 - 顔の細部、ひげ、コード、クリーム色の装飾はくっきりしています(grain グループの外に配置)。
- 目:クリーム色のリング、ずらした瞳、視線の向き側に星形のハイライト、反対側に小さな点があり、両方の瞳は同じ方向を向いています。
- チークは 0.6、哺乳類にはひげがあり、鼻には光沢があります。
- 各前足は指または足指の筒状パーツで構成され、親指は利き手に応じた側にあります。
- 動物の頭は暗い面の手前にあります。
- チョークのような
#B95A93のプールがグループ全体の下にあり、何も浮いていません。接触部分は数 px 重なっています。 - 葉は7~8枚、バーストは2つ、星は6~7個、点は18~21個あり、すべて余白に配置されています。シーンにもカードの端にも触れていません。
- シーンの幅は330~360 px、x 240 を中心に左右10 px以内、プールの下端は y 310~330 です。
- ごく小さな等幅フォントの画面ラベル以外にテキストはありません。ランプの光が当たる範囲の外に青、灰色、純白はありません。
- 頭の幅は胴体以上で、頭の高さは胴体の高さの少なくとも0.8倍です(パスを測定します)。
- すべての id がプレフィックスで始まり、リントが成功します。