Adobe Illustrator DrawとInkscapeでサイトアイコンを作成する手順

このサイトは開設してからまだ1か月ほどしか経っておらず、とりあえず記事を書いてみたはいいものの、サイトのデザインが定まっていなくてほとんどそのままのデザインで運用してきました。

ですが、やっぱり寂しいので思い切ってサイトアイコンを自作することにしました。

サイトに手を入れて自分好みのデザインにするのって記事更新のモチベーション的にも大事だと思うんですよね。

僕は絵心もデザインセンスもないのですが、簡単ながらもどうにかアイコンを作ることに成功したので、参考になればと思い手順を公開したいと思います。

スポンサーリンク
レクタングル(大)

Adobe Illustrator Drawで元になる絵を描く

Adobe Illustrator Drawについて

Adobe Illustrator Drawは無料でベクタ形式の画像を作成することができるiOSとAndroid対応のアプリです。

ベクタ形式(ベクタけいしき、vector graphics)は、コンピュータグラフィックスなどにおいて、画像を円や直線などのような解析幾何的な「図形」の集まりとして表現する形式である。平面をスキャンし、その各点の濃淡の集まりによって画像を表現する「ラスタ形式」(ビットマップ画像)と対置される。(Wikipediaより)

ベクタ形式の画像は拡大・縮小しても劣化することがないという性質を持っているため、アイコンやロゴのような簡単な図形からなり、様々なサイズを用意する必要のあるイラストを作成するのに向いています。

また、図形の組み合わせでイラストを描くので、絵心やペンタブがなくてもそれなりのイラストを描くことができます。

完成図

まずはどんなイラストを作成するか決めましょう。

僕はサイト名にちなんで「ヒキニート」のイラストを作成することにしました。

家の中に人が座り込んでいる状態ですね。

これを目指して描いていきます。

icon

初期設定

起動すると空のプロジェクトが表示されます。

真ん中の空白をタップしてイラストを作成しましょう。

IMG_8895

これがイラストの作成画面です。

左側にはブラシが5つと消しゴムが並んでいます。

1番上のブラシをタップしてください。

IMG_8896

ブラシのサイズや不透明度、カラーなどを設定することができます。

1番下の調整ボタンを押してください。

IMG_8897

より詳細な設定をすることができます。

今回は筆圧を感知してほしくないので「筆圧」をオフにします。

IMG_8898

家を描く

次に家を描いていきます。

画面上の▲と◯のボタンをタップすると様々な図形を選ぶことができます。

家を描くので四角を選びましょう。

IMG_8899

画面にこのような四角が現れます。

2本指でピンチイン・ピンチアウトするとサイズを変更できます。

2本指でドラッグすると移動することができます。

IMG_8900

矢印を左右にスライドすると変形することができます。

IMG_8901

好みの形になったら四角のふちをなぞります。

IMG_8902

☓を押すと図形が消えます。

IMG_8903

次に同様にして三角を挿入してちょうどいい形に変形して場所を合わせます。

IMG_8904
ふちをなぞります。

IMG_8905

☓を押して家のできあがりです。

IMG_8906

人を描く

次に人を描いていきます。

+ボタンを押してください。

IMG_8907

描画レイヤーを追加します。

IMG_8908

丸を挿入して頭を描きます。

IMG_8909

今度はふちをなぞるのではなく、丸の中を長押ししてください。

長押しすると図形の中を塗りつぶすことができます。

IMG_8910

次に体を描きます。

体は丸を変形して細長い楕円にして中を塗りつぶします。

IMG_8911

こんな感じです。

IMG_8912

同様にして足を手を描きます。

これで元となるイラストの完成です。

※アイコン完成後にあらためて描いたので実際のものとは異なります。

IMG_8913

この画像をiPhone本体などに保存しておいてください。

僕が保存した画像はかなり大きかったので、600 x 600くらいのサイズにトリミングしました。

Inkscapeで調整

Inkscapeについて

Inkscapeは無料版Illustratorのようなものです。ベクタ形式を扱うことができます。

Linux、Windows、Macに対応しています。

仕事や趣味でイラストをバリバリ描くのにはIllustratorが優れていますが、今回のようにちょっとしたイラストを描くのにはあまりにも高価なので、Inkscapeで代用することにします。

Inkscapeには様々な機能があるのですが、今回はあくまで画像の調整に使用するので、イラストを描くための細かい使い方は割愛します。

位置の調整と背景の設定

Inkscapeを起動するとこの画面が表示されます。

真ん中の四角がキャンバスです。

新規ドキュメント_1_-_Inkscape_と_投稿の編集_‹_ヒキニートかく語りき_—_WordPress

アイコンを作成するためには正方形の画像が必要です。

キャンバスのサイズを変更するために「ドキュメントのプロパティ」を開いてください。

新規ドキュメント_1_-_Inkscape

幅と高さを1024、単位をpxに直してください。

OKボタンはないのでそのまま閉じてください。

ドキュメントのプロパティ_D___Shift_Ctrl_D__と__新規ドキュメント_1_-_Inkscape

「インポート」から先ほど作成した画像を取り込んでください。

_新規ドキュメント_1_-_Inkscape

これはそのままOKして大丈夫です。

png_ビットマップ画像のインポート_と__新規ドキュメント_1_-_Inkscape

ややずれた位置に表示されるので、キャンバスの中央に配置します。

_新規ドキュメント_1_-_Inkscape_と_投稿の編集_‹_ヒキニートかく語りき_—_WordPress

「オブジェクト」から「整列と配置」を選んでください。

_新規ドキュメント_1_-_Inkscape

基準を「ページ」に設定し、赤枠内のボタンを1度ずつ押してください。

_新規ドキュメント_1_-_Inkscape

画像が中央に配置されたら「PNG画像にエクスポート」を選択します。

_新規ドキュメント_1_-_Inkscape

「ページ」を選択し、幅と高さが1024pxになっていることを確認し、「エクスポート」からエクスポート先を設定してください。

ファイル名は「◯◯.png」としてください。

_新規ドキュメント_1_-_Inkscape

これで背景が透明なイラストを作成することができました。

これはファビコンに使用します。

もう1つアップルタッチアイコン用に背景が白のイラストを作成します。

「ドキュメントのプロパティ」を選んでください。

新規ドキュメント_1_-_Inkscape

「背景色」をクリックしてください。

ドキュメントのプロパティ_D___Shift_Ctrl_D__と__新規ドキュメント_1_-_Inkscape

画像のように設定します。

背景色_と_ドキュメントのプロパティ_D___Shift_Ctrl_D__と__新規ドキュメント_1_-_Inkscape

これで背景が白くなったので、先ほどと同様に「PNG画像にエクスポート」から保存してください。

ファイル名は先ほどとは異なるものにしてください。

icoファイルを作成する

icoファイルが必要な場合にはこちらのサイトで作成しましょう。

ファビコン作成。favicon.ico 無料で半透過マルチアイコンが作れます。
ファビコン(ファブアイコン)faviconを作ろう!。16x16と32x32と48x48ピクセルのマルチアイコンが簡単に作れます。作成したファビコンの画像はプレビューで確認できます。プロ仕様の詳細データ表示付き。

左の3つのボタンそれぞれから先ほど作成した透過PNGファイルを選択しましょう。

サイズが大きい場合には自動的に縮小してくれます。

設定するとプレビューが見られます。

よろしければ「ダウンロード」ボタンを押しましょう。

ファビコン作成_favicon_ico_無料で半透過マルチアイコンが作れます_と_On_Air___3___Nosub

画面を下にスクロールするとこのようなプレビューも見ることができます。

実際にどんなふうに表示されるのか想像しやすくてありがたいですね。

ファビコン作成_favicon_ico_無料で半透過マルチアイコンが作れます

ダウンロードしたらあなたの使用しているサービスに従ってファビコンとアップルタッチアイコンを設定しましょう。

WordPressでの設定方法は次の記事をご覧ください。

【Wordpress】Simplicityでファビコンとアップルタッチアイコンを設定
【Wordpress】Simplicityでファビコンとアップルタッチアイコンを設定
前回の記事でサイトアイコンとして使用するイラストを作成したので、実際にこのブログに設定してみます。 Wordpress標準機能での設定 Wordpr…
スポンサーリンク
レクタングル(大)
レクタングル(大)
ヒキニートかく語りき
Adobe Illustrator DrawとInkscapeでサイトアイコンを作成する手順
この記事をお届けした
ヒキニートかく語りきの最新ニュース情報を、
いいねしてチェックしよう!