Inkscape で、向日葵(ひまわり)の花のアイコンを描く方法

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

material-icon-sunflower-101121-16x16.pngmaterial-icon-sunflower-101121-24x24.pngmaterial-icon-sunflower-101121-32x32.pngmaterial-icon-sunflower-101121-48x48.pngmaterial-icon-sunflower-101121-64x64.png

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

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

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

グリッドを表示

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-sunflower-step-1.pngページの中心に、
直径40px の正円を描く。

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

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

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

inkscape-fill-and-stroke-dialog-stroke-paint-000000ff.png「ストロークの塗り」タブを開く。
inkscape-fill-and-stroke-dialog-single-color.gif「単一色」を選択。
今回は、黒色の #000000 を設定。
RGBAの欄に、「000000ff」を入力した。

inkscape-icon-sunflower-step-2.pnginkscape-fill-and-stroke-dialog-fill-radial-gradient.png「フィル」タブを開く。inkscape-fill-and-stroke-dialog-radial-gradient-button.jpg「放射状グラデーション」を選択。

グラデーションエディタ

inkscape-icon-sunflower-step-3.png四角いグラデーションハンドルを、ダブルクリックし、グラデーションエディタを開く。
茶系の #aa0000 を設定。
RGBAの欄に、「aa0000ff」を入力。

inkscape-icon-sunflower-step-4.png丸いグラデーションハンドルを、ダブルクリックし、グラデーションエディタを開く。
オレンジ系の #ff6600 を設定。
RGBAの欄に、「ff6600ff」を入力。

レイヤー2

レイヤーを複製

inkscape-layer-layer.jpgメニューバーの「 レイヤー -> レイヤー 」、もしくは、「 Shift + Ctrl + L 」で、「 レイヤーダイアログ 」を開く。
inkscape-layer-dialog.jpg

inkscape-layer-dialog-copy.jpgレイヤー名の上で、右クリックし、「現在のレイヤーを複製」を、左クリック。

レイヤーをロック

inkscape-layer-dialog-lock-layer1.jpg念のため、レイヤー 1 をinkscape-layer-lock-button.jpgロック。

ストロークの塗り

inkscape-fill-and-stroke-dialog-stroke-paint.jpgレイヤー2のオブジェクトを選択した状態で、「ストロークの塗り」タブを開く。
inkscape-fill-and-stroke-dialog-no-fill.gif「塗りなし」を選択。

フィル

inkscape-icon-sunflower-step-5.pnginkscape-fill-and-stroke-dialog-fill-pattern-checkered.png「フィル」タブを開く。
inkscape-fill-and-stroke-dialog-fill-pattern-checkered-button.png「パターン」を選択。
「パターンフィル」は、「市松模様」を選択。

ノードツール

inkscape-icon-sunflower-step-6.pnginkscape-tool-box-node.png左にあるツールボックスのinkscape-tool-box-node-button.png「ノードツール」をクリック。
もしくは、キーボードの「 F2 」か「 n 」を押して、「ノードツール」を表示。

inkscape-icon-sunflower-step-7.png右の画像のように、パターンフィルを縮小させる。

inkscape-icon-sunflower-step-8.pnginkscape-fill-and-stroke-dialog-fill-pattern-checkered-feathering-5.png市松模様のぼかしを「5.0」に設定。

inkscape-icon-sunflower-step-9.pnginkscape-layer-dialog-layer2-opacity_60.pngレイヤーの不透明度を「60」に設定。

レイヤー3

新規レイヤー

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

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

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-sunflower-step-10.png右の画像のノードの位置を見ながら、ノードを追加していく。
inkscape-icon-sunflower-step-11.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-sunflower-step-12.pngキーボードの Shift を押しながら、右上のノードをドラッグし、右の画像のように動かし、ドロップ。

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

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

クローンを作成

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

回転

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

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

変形ダイアログ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

グラデーションツール

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

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

グラデーションエディタ

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

inkscape-icon-sunflower-step-27.png丸いグラデーションハンドルを、ダブルクリックし、グラデーションエディタを開く。
オレンジ色系の #ff7f2a を設定。
RGBAの欄に、「ff7f2aff」を入力。

レイヤーを最背面へ

inkscape-icon-sunflower-step-28.pnginkscape-layer-behind-all.pngメニューバーの「 レイヤー – レイヤーを最背面へ 」で、レイヤーを最背面へ移動。

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

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

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

スポンサード リンク

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