Inkscape で、桜の花のアイコンを描く方法

Inkscape(インクスケープ)で、桜の花のアイコンを描く方法についての詳細解説記事。

material-icon-sakura-101124-16x15-ffaaaaff.pngmaterial-icon-sakura-101124-24x23-ffaaaaff.pngmaterial-icon-sakura-101124-32x30-ffaaaaff.pngmaterial-icon-sakura-101124-48x46-ffaaaaff.pngmaterial-icon-sakura-101124-64x61-ffaaaaff.pngmaterial-icon-sakura-101124-96x91-ffaaaaff.pngmaterial-icon-sakura-101124-128x122-ffaaaaff.png

64px × 64px のファイルを新規作成

inkscape-file-new-icon_64x64.jpgメニューバーの「 ファイル -> 新規 -> icon_64x64 」で、64px × 64px のファイルを新規作成。

inkscape-status-bar-zoom.jpgズームは、500%程度にしておくと作業しやすい。

グリッドを表示

inkscape-file-document-settings.jpgグリッドを表示させておくと便利。メニューバーの「 ファイル -> ドキュメントの設定 」で、「ドキュメントの設定」ウィンドウを開く。キーボードで「 Shift + Ctrl + D 」を同時に押しても、「ドキュメントの設定」ウィンドウを開くことができる。

inkscape-document-settings-grid-major_2.png「グリッド」タブを開く。「矩形グリッド」を選択し、「新規」をクリック。「メジャーグリッドラインの頻度:」を、「2」に設定し、2px ごとにメジャーグリッドラインを表示させる。

ペンツール(ベジエツール)

inkscape-tool-box-pen.png左にあるツールボックスのinkscape-tool-box-pen-button.png「ペンツール(ペジエツール)」をクリック。
もしくは、キーボードの「 Shift + F6 」を押して、「ペンツール(ペジエツール)」を選択。
inkscape-snap-bar-grid.jpg右にあるスナップバーのinkscape-snap-bar-grid-button.gif「グリッドにスナップ」をクリックして、有効にしておくと、グリッドに吸着するので、描きやすい。
inkscape-bezier-tool-controls-bezier-paths.png
ペン(ペジエ)ツールのツールコントロールのinkscape-bezier-tool-controls-bezier-paths-button.png「ペジエパスを作成」を選択。
inkscape-icon-sakura-step-1.png右の画像のノードの位置を見ながら、ノードを追加していく。
inkscape-icon-sakura-step-2.png最後に始点をクリックして閉じる。

ノードツール

inkscape-tool-box-node.png左にあるツールボックスのinkscape-tool-box-node-button.png「ノードツール」をクリック。
もしくは、キーボードの「 F2 」か「 n 」を押して、「ノードツール」を選択。
inkscape-node-tool-controls.png
ノードツールのツールコントロールの
inkscape-node-tool-controls-bezier-curve-handle-button.png「選択ノードのペジエ曲線ハンドルを表示」を選択。
inkscape-icon-sakura-step-3.pngキーボードの Shift を押しながら、右上のノードをドラッグし、右の画像のように動かし、ドロップ。

inkscape-icon-sakura-step-4.png同様の作業を、右の画像を参考にしながら、右上、左上のノードで行う。

クローン作成と回転を5回繰り返す

クローンを作成

inkscape-edit-clone-create-clone.pngメニューバーの「 編集 -> クローン -> クローンを作成 」、もしくは、「 Alt + D 」で、クローンを作成する。

回転

inkscape-icon-sakura-step-5.png左にあるツールボックスのinkscape-tool-box-select-button.png「選択ツール」でオブジェクトを選択。選択したオブジェクトをクリックし、回転ハンドルに切り替える。

inkscape-icon-sakura-step-6.png選択したオブジェクトの中心にある「+」をドラッグし、ページの中心へ移動。

変形ダイアログ

inkscape-object-transformations.pngメニューバーの「 オブジェト -> 変形 」で、変形ダイアログを開く。

inkscape-transformations-dialog-rotation-72.png回転タブを開き、角度を「72」を設定し、「適用」ボタンをクリック。

inkscape-icon-sakura-step-7.png右の画像のようになる。

inkscape-icon-sakura-step-8.pngクローン作成と回転を5回繰り返し、右の画像のようにする。

フィルとストロークの色を設定

フィル/ストロークのダイアログ

inkscape-icon-sakura-step-9.png左にあるツールボックスのinkscape-tool-box-select-button.png「選択ツール」で、クローンでないオリジナルのオブジェクトを選択。

inkscape-object-fill-stroke.jpgメニューバーの「 オブジェト -> フィル/ストローク 」、もしくは、「 Shift + Ctrl + F 」で、「フィル/ストローク」のダイアログを開く。

inkscape-icon-sakura-step-10.pnginkscape-fill-and-stroke-dialog-stroke-ff8080ff.png「ストロークの塗り」タブを開く。
inkscape-fill-and-stroke-dialog-single-color.gif「単一色」を選択。
今回は、ピンク色系の #ff8080 を設定。
RGBAの欄に、「ff8080ff」を入力。

inkscape-icon-sakura-step-11.pnginkscape-fill-and-stroke-dialog-fill-gradation1.png「フィル」タブを開く。
inkscape-fill-and-stroke-dialog-gradation_button.png「グラデーション」を選択。

グラデーションツール

inkscape-icon-sakura-step-12.png右の画像を参考に、四角いグラデーションハンドルを移動する。

inkscape-icon-sakura-step-13.png右の画像を参考に、丸いグラデーションハンドルを移動する。

グラデーションエディタ

inkscape-icon-sakura-step-14.png四角いグラデーションハンドルを、ダブルクリックし、グラデーションエディタを開く。
薄いピンク色系の #ffaaaa を設定。
RGBAの欄に、「ffaaaaff」を入力。

inkscape-icon-sakura-step-15.png丸いグラデーションハンドルを、ダブルクリックし、グラデーションエディタを開く。
白の #ffffff を設定。
RGBAの欄に、「ffffffff」を入力。

ビットマップにエクスポート

inkscape-file-bitmap-export.jpgメニューバーの「 ファイル -> ビットマップにエクスポート 」で、「ビットマップにエクスポート」ダイアログを開く。

inkscape-bitmap-export-dialog.gifファイル名を指定し、エクスポートボタンをクリックし、PNGファイルに出力。
大きさを変えて出力することもできる。
material-icon-sakura-101124-16x15-ffaaaaff.pngmaterial-icon-sakura-101124-24x23-ffaaaaff.pngmaterial-icon-sakura-101124-32x30-ffaaaaff.pngmaterial-icon-sakura-101124-48x46-ffaaaaff.pngmaterial-icon-sakura-101124-64x61-ffaaaaff.pngmaterial-icon-sakura-101124-96x91-ffaaaaff.pngmaterial-icon-sakura-101124-128x122-ffaaaaff.png

スポンサード リンク

カテゴリー: Inkscape, チュートリアル パーマリンク