Inkscape で、花のアイコンを簡単に描く方法

Inkscape(インクスケープ)で、花のアイコンを簡単に描く方法についての詳細解説記事。
梅の花を描いたわけではないが、梅の花っぽいかもしれない。

material-icon-flower-101124-16x16-ff8080ff.pngmaterial-icon-flower-101124-24x23-ff8080ff.pngmaterial-icon-flower-101124-32x31-ff8080ff.pngmaterial-icon-flower-101124-48x47-ff8080ff.pngmaterial-icon-flower-101124-64x63-ff8080ff.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.gif「グリッド」タブを開く。「矩形グリッド」を選択し、「新規」をクリック。「メジャーグリッドラインの頻度:」を、「4」に設定し、4px ごとにメジャーグリッドラインを表示させる。

レイヤー1

楕円ツール

inkscape-tool-box-ellipse.jpg左にあるツールボックスのinkscape-tool-box-ellipse-button.jpg「楕円ツール」をクリック。
もしくは、キーボードの「 F5 」を押して、「楕円ツール」を選択することもできる。
inkscape-snap-bar-grid.jpg右にあるスナップバーのinkscape-snap-bar-page-button.jpg「ページの境界にスナップ」とinkscape-snap-bar-grid-button.gif「グリッドにスナップ」をクリックして、有効にしておくと、ページやグリッドに吸着するので、描きやすい。
inkscape-icon-flower-step-1.pngページの中心に、
直径24px の正円を描く。

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

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

inkscape-object-fill-stroke.jpgメニューバーの「 オブジェト -> フィル/ストローク 」、もしくは、「 Shift + Ctrl + F 」で、「フィル/ストローク」のダイアログを開く。
オブジェクトが選択されていない場合は、左にあるツールボックスのinkscape-tool-box-select-button.png「選択ツール」でオブジェクトを選択。

inkscape-fill-and-stroke-dialog-stroke-paint.jpg「ストロークの塗り」タブを開く。inkscape-fill-and-stroke-dialog-no-fill.gif「塗りなし」を選択。

inkscape-fill-and-stroke-dialog-fill-550000ff.png「フィル」タブを開く。inkscape-fill-and-stroke-dialog-single-color.gif「単一色」を選択。
今回は、えんじ色やボルドーに近い色の #550000 を設定。
RGBAの欄に、「550000ff」を入力した。

カラーパレット

色については、下の方にあるカラーパレットの上から、オブジェクトへ、塗りたい色を、ドラッグ&ドロップすることで、オブジェクトの色を変更することもできる。
inkscape-color-palette.jpg

レイヤー2

新規レイヤー

inkscape-layer-new.pngメニューバーの「 レイヤー -> 新規レイヤー 」、もしくは、「 Shift + Ctrl + N 」で、「レイヤーを追加」ダイアログを開く。
inkscape-new-layer-dialog.png追加ボタンを押して、
新規レイヤーを追加する。

スターツール

inkscape-tool-box-stars.png左にあるツールボックスのinkscape-tool-box-stars-button.png「スターツール」をクリック。
もしくは、キーボードの「 Shift + F9 」又は「 * 」を押して、「スターツール」を選択することもできる。
ツールコントロールのinkscape-stars-tool-controls-stars-button.png星ボタンをクリック。
inkscape-stars-tool-controls-stars-5-0_1-1_5.png角を「5」に、スポーク比を「0.010」に、丸めを「-1.500」に設定。

inkscape-icon-flower-step-2.png中央から、ページの上端へ向かって、オブジェクトを描く。

放射状グラデーション

inkscape-fill-and-stroke-dialog-radial-gradient.jpgスターツールで作成したオブジェクトを選択した状態で、「フィル/ストローク」のダイアログの「フィル」タブ内のinkscape-fill-and-stroke-dialog-radial-gradient-button.jpg「放射状グラデーション」ボタンを選択。

グラデーションツール

inkscape-tool-box-gradient.jpg左にあるツールボックス内の「グラデーションツール」を選択し、グラデーションハンドルを表示させる。
inkscape-icon-flower-step-3.png四角いグラデーションハンドルをクリック。

inkscape-icon-flower-step-4.pnginkscape-fill-and-stroke-dialog-fill-ffd5d5ff.png「フィル/ストローク」のダイアログの「フィル」タブ内で、薄いピンク色の「#ffd5d5」に設定。
RGBAの欄に、「ffd5d5ff」を入力。

inkscape-icon-flower-step-5.pnginkscape-fill-and-stroke-dialog-fill-ff8080ff.png丸いグラデーションハンドルをクリック。
「フィル/ストローク」のダイアログの「フィル」タブ内で、ピンク色系の「#ff8080」に設定。
RGBAの欄に、「ff8080ff」を入力。

放射状グラデーション

inkscape-icon-flower-step-6.pnginkscape-fill-and-stroke-dialog-stroke-gradation.pngキャンバス内のどこかをクリックして、丸いグラデーションハンドルの選択を解除。「フィル/ストローク」のダイアログの「ストローク」タブ内のinkscape-fill-and-stroke-dialog-radial-gradient-button.jpg「放射状グラデーション」ボタンを選択。

グラデーションエディタ

inkscape-icon-flower-step-7.png四角いグラデーションハンドルをダブルクリックし、「グラデーションエディタ」を開く。

inkscape-gradation-editor-00000000.pngRGBAの欄に、「00000000」を入力する。
inkscape-icon-flower-step-8.png  ファイル形式: image/png

inkscape-gradation-editor-000000ff.png丸いグラデーションハンドルをダブルクリックし、「グラデーションエディタ」を開く。
RGBAの欄に、「000000ff」を入力する。
inkscape-icon-flower-step-9.png

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

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

inkscape-bitmap-export-dialog.gifファイル名を指定し、エクスポートボタンをクリックし、PNGファイルに出力。
大きさを変えて出力することもできる。
material-icon-flower-101124-16x16-ff8080ff.pngmaterial-icon-flower-101124-24x23-ff8080ff.pngmaterial-icon-flower-101124-32x31-ff8080ff.pngmaterial-icon-flower-101124-48x47-ff8080ff.pngmaterial-icon-flower-101124-64x63-ff8080ff.png

スポンサード リンク

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