イラストレーター

【チュートリアル】文字だけのファビコンの作り方

こんにちは。illustrator勉強中のネロリ(@nerolidesign)です!

このページでは、illustratorを使って「文字だけのファビコン」を作る方法をご紹介します。

ネロリ
ネロリ
シンプル好きな人におすすめだよ!

STEP1. 新規ドキュメントを開こう

 

illustratorを立ち上げたら「新規作成」をクリック。

 

 

幅「512 px」、高さ「512 px」に変更し「作成」をクリック。

今回はワードプレスで有名なテーマ「Cocoon」「SANGO」「JIN」などが推奨しているファビコンの大きさで作成しています。

 

 

新規ドキュメントが開きました。

STEP2. 背景の正方形を描こう

 

[長方形ツール]を選択。

 

 

画面上のどこでもいいので左クリック。

長方形の幅を「512 px」、高さを「512 px」に変更して「OK」をクリック。

 

 

指定した正方形ができました。

 

 

[選択ツール]を選択。

 

 

正方形を新規ドキュメントの上にぴったり重ねます。

STEP3. 正方形に色をつけよう

 

正方形を選択してから[ウィンドウ]-[アピアランス]をクリック。

 

 

[塗り]の横にある下矢印をクリックして、好きな色を選択。

自分で色を指定したい場合は[スウォッチオプション]をクリックしよう。

 

 

スウォッチオプションでは自分の好きな色を指定することができます。

 

 

正方形の線は「なし」を選択。

STEP4. 文字を描こう

 

[文字ツール]を選択。

 

 

画面いっぱいに選択範囲を指定してから、好きな文字を1文字描きます。

 

 

[選択ツール]を選択し、描いた文字を選択。

 

 

画面右にある[プロパティ]で、好きなフォントとサイズを指定。

STEP5. 文字に色をつけよう

 

文字を中心に配置したらアピアランスの「文字」をダブルクリック。

 

 

文字の線を「なし」、塗りを「なし」にする。

ちなみに文字が黒いままアピアランスで色を追加すると、追加した色の下に元のテキストの黒が残ってしまいます。

見た目には変わりませんが思わぬ事故の原因になる場合もありますので、テキストの塗りは「なし」にしてから作業しましょう。

文字の塗りは「なし」にしてから作業しよう。

 

 

文字を選択して、アピアランスの[新規塗りを追加]をクリック。

 

 

好きな色の塗りを選択。

 

 

これで文字だけのファビコンが完成!

ネロリ
ネロリ
とってもシンプルだね

 

背景の色を変えたい

 

背景の色を変えたい場合は、正方形を選択してからアピアランスの「塗り」の色を変更してください。

文字の色を変えたい

 

文字の色を変えたい場合は、文字を選択してからアピアランスの「塗り」の色を変更してください。

ネロリ
ネロリ
画像では正方形の「塗り」を白にしているよ!

 

 

アピアランスの「塗り」の色を変更するだけで、雰囲気の違うファビコンがいろいろできますね!

ネロリ
ネロリ
簡単に色が変えられて、とっても便利!

 

STEP6. 「JPEG」か「PNG」で保存しよう

 

[ファイル]-[書き出し]-[Web用に保存]をクリック。

 

 

ファイル形式、画像サイズを確認したら、

 

 

「保存」をクリック。

 

 

保存先を選択し、ファイル名を付けたら「保存」をクリック。

 

 

警告文がでてきても「OK」をクリック。

この警告文はファイル名、フォルダ名、パス名などに全角文字が含まれる場合に表示されるようです。

 

これで文字だけのファビコンの完成です!

ネロリ
ネロリ
いろいろな色を組み合わせて作ってみてね!

おわり

こちらの記事では他にもいろいろなファビコンをご紹介しています。

【illustrator】でファビコンを作ろう!こんにちは。illustrator勉強中のネロリ(@nerolidesign)です! illustratorを使って、いろいろなフ...

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です