しかたらむーの てっくぶろ

組み込みソフトの古参エンジニアがモダンなフロントエンドエンジニアに転生 その進化の記録です

Inkscape で自前のアイコンを作ってみる

はじめに

Webアプリを作っていく中でどうしてもオリジナルのアイコンが必要になるときってありませんか?そんなとき、ちょっとしたデザインであれば手軽に作れる方法があると結構便利ですよね。
アイコンを作る方法は様々あると思いますが、私はいつもInkscapeというフリーのツールを使っています。今回はこのツールでお手軽にアイコンを作る方法を紹介したいと思います。

こんなアイコン

png形式のこんなアイコンを作ってみます。
f:id:Shikataramuno:20190124222405p:plain

Inkscape とは

まずは Inkscape(インクスケープと発音します) とはどんなソフトなのか? ですが、一言で言うとOSSのベクトル画像編集ソフトです。
詳しくはこちらInkscape - Wikipedia
インストールの方法や画面の構成など、詳しく解説しているサイトが豊富にありますので検索してみてください。
特に以降の記述ではツールボックス、ツールコントロール、メニューバーなど画面の構成要素が登場しますので簡単な画面構成を掲載しておきます。より詳しい内容は「Inkscape 画面構成」などのキーワードで検索してみたください。豊富な情報がゲットできると思います。

f:id:Shikataramuno:20190128205658p:plain
Inkscapeの画面構成

図を描く

それでは実際に図を描いてみましょう。

  • 四角形を描き、縦横比を固定してpxでサイズ調整します。
    ツールボックスf:id:Shikataramuno:20190128210508p:plainを選択しキャンバス上でマウスをドラッグ&ドロップして四角形を描画します。
    ツールボックスf:id:Shikataramuno:20190128211018p:plainを選択し、上で描画したキャンバス上の四角形を選択します。
    ツールコントロールの鍵アイコンを閉じた状態にし、単位をpxに合わせサイズ(ひとまず26pxくらい)を指定します。 ⇩こんな感じです
    f:id:Shikataramuno:20190128212801p:plain

  • 四角形の塗りと枠線を設定します。
    メニューバーからオブジェクト=>フィル/ストロークを選択します。
    f:id:Shikataramuno:20190128213852p:plain
    フィル/ストロークのダイアログでフィルの塗り、ストロークの塗り、ストロークのスタイルをそれぞれ以下の様に設定します。
    f:id:Shikataramuno:20190128213430p:plain
    f:id:Shikataramuno:20190128213528p:plain
    f:id:Shikataramuno:20190128213553p:plain
    ここまでで一番外枠の四角形が描けたかと思います。

  • 円と丸を描く
    次は、四角形の中の円と丸です。
    ツールボックスf:id:Shikataramuno:20190128214329p:plainを選択しキャンバス上に円を描きます。
    四角形のときと同じくツールコントロールで単位をpxに合わせ鍵アイコンを閉じて縦横比を固定しサイズを合わせます(外側の円は18px、内側の円は8pxくらい)。
    フィル/ストロークで塗りと枠線のスタイルと設定します。外側の円はフィルなしでストロークの塗りは赤、スタイルで幅を2pxくらいに設定。内側の円はフィルで赤を設定。

これでアイコンの原型が出来上がりました。最後は画像データのエキスポートです。

PNGでエキスポート

PNGでエキスポートする前にオブジェクトをグループ化し、一つのオブジェクトとしてまとめておくと扱いやすくなります。 上で描いた四角形、円、丸を全部選択し、コンテキストメニューからグループ化を選択します。
f:id:Shikataramuno:20190128215634p:plain
グループ化したら、後はメニューバーからファイル=>PNG画像にエクスポートを選択します。
f:id:Shikataramuno:20190128220019p:plain
キャンバス上の出力対象オブジェクトを選択、PNG画像にエクスポートのダイアログで出力先のパス、出力サイズを指定しエキスポートを実行します。
f:id:Shikataramuno:20190128221147p:plain
これでpng形式のアイコンデータが出来上がります。

出来上がり

無事にアイコンの画像データができましたでしょうか?
本記事と合わせて以下の記事も一読いただけると効果アップと思います。 techblo.shikataramuno.com

最後まで読んでくださりありがとうございます。何かのお役に立てたならエンジニア冥利に尽きます。