Inkscape で、4分音符のアイコンを描く方法

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

material-icon-quarter-note-101123-6x16-000000.pngmaterial-icon-quarter-note-101123-11x32-000000.pngmaterial-icon-quarter-note-101123-23x64-000000.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-rectangle.png左にあるツールボックスのinkscape-tool-box-rectangle-button.png「矩形ツール」をクリック。
もしくは、キーボードの「 F4 」又は「 r 」を押して、「矩形ツール」を選択することもできる。
inkscape-snap-bar-grid.jpg右にあるスナップバーのinkscape-snap-bar-grid-button.gif「グリッドにスナップ」をクリックして、有効にしておくと、グリッドに吸着するので、描きやすい。
inkscape-rectangle-tool-controls-2-46.png「 幅:2px、高さ:46px 」の矩形を描く。
inkscape-icon-quarter-note-step-1.png右の画像のように、上は2マス、下は7マス、端から離して描く。

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

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

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-000000ff.png「フィル」タブを開く。inkscape-fill-and-stroke-dialog-single-color.gif「単一色」を選択。
今回は、黒の #000000 を設定。
RGBAの欄に、「000000ff」を入力した。

カラーパレット

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

符頭(たま)を描く

楕円ツール

inkscape-tool-box-ellipse.jpg左にあるツールボックスのinkscape-tool-box-ellipse-button.jpg「楕円ツール」をクリック。
もしくは、キーボードの「 F5 」を押して、「楕円ツール」を選択することもできる。
inkscape-snap-bar-grid.jpg右にあるスナップバーのinkscape-snap-bar-grid-button.gif「グリッドにスナップ」をクリックして、有効にしておくと、グリッドに吸着するので、描きやすい。
inkscape-icon-quarter-note-step-2.png右の画像を参考にしながら、楕円を描く。

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

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

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-000000ff.png「フィル」タブを開く。inkscape-fill-and-stroke-dialog-single-color.gif「単一色」を選択。
今回は、黒の #000000 を設定。
RGBAの欄に、「000000ff」を入力した。

カラーパレット

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

選択ツール

回転ハンドル

inkscape-tool-box-select.png左にあるツールボックスのinkscape-tool-box-select-button.png「選択ツール」をクリック。
もしくは、キーボードの「 F1 」を押して、「選択ツール」を選択することもできる。
inkscape-icon-quarter-note-step-3.png選択オブジェクトをクリックして、回転ハンドルに切り替える。
回転ハンドルをドラックし、反時計回りに、30度回転させ、ドロップ。
「 Ctrl 」を押しながら回転すると、15度刻みで回転するので、回転しやすい。

拡大縮小ハンドル

inkscape-snap-bar-page.jpg右にあるスナップバーのinkscape-snap-bar-grid-button.gif「グリッドにスナップ」が有効になっている場合は、クリックして、無効にしておく。
inkscape-icon-quarter-note-step-4.png選択オブジェクトをクリックして、拡大縮小ハンドルに切り替える。
先ほど矩形で描いた「符幹(ぼう)」のオブジェクトの右端に合わせる。

結合

左にあるツールボックスのinkscape-tool-box-select-button.png「選択ツール」をクリック。
inkscape-select-tool-controls.png
inkscape-icon-quarter-note-step-5.pngツールコントロールのinkscape-select-tool-controls-select-all-button.png「全オブジェクトまたは全ノードを選択」ボタンをクリックし、「符幹(ぼう)」のオブジェクトと「符頭(たま)」のオブジェクトを選択する。

inkscape-paths-join.pngメニューバーの「 パス -> 結合 」をクリック、もしくは、「 Ctrl + + 」を押し、「符幹(ぼう)」のオブジェクトと「符頭(たま)」のオブジェクトを結合する。これにより、1つのオブジェクトになる。

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

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

inkscape-bitmap-export-dialog.gifファイル名を指定し、エクスポートボタンをクリックし、PNGファイルに出力。
大きさを変えて出力することもできる。
material-icon-quarter-note-101123-6x16-000000.pngmaterial-icon-quarter-note-101123-11x32-000000.pngmaterial-icon-quarter-note-101123-23x64-000000.png

スポンサード リンク

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