SedgeDesign イラレでファビコンを作る方法1  illustrator CC 講座10-01

イラレでファビコンを作る方法1  illustrator CC 講座10-01

ブラウザの上にならんでいるタグを見てみてください。
サイトによってさまざまな小さなアイコンが表示されています。
また例えば当ブログをブックマークしますと、そのブックマークにこのアイコンも登録されます。

こういった小さなWebサイト用のアイコンのことを、「ファビコン」といいます。

当ブログはGoogle Bloggerですが、Bloggerでは標準で対応していたため、せっかくなのでファビコンを作ってみることにしました。

今回はその手順を解説します。

そもそもファビコンって何でしょう?
私も実は「ブラウザのタグのところに出るマーク」という認識くらいしかありません。

検索してみると、「ウェブサイトのシンボルマークやイメージとして、ウェブサイトやウェブページに配置するアイコン」とのことでした。

当ブログは「Segde Design」といいます。
そこで「SD」をモチーフとしたロゴマークを作ろうと考え、スケッチしてみました。

Sをひし形に見立ててその残像がDとして横に立つ…というデザインです。
今回の単位設定は一般と線がピクセルになっております。


Illustratorに画像を配置、レイヤー管理

ロゴの下絵

こちらはiPhoneで撮影した画像ですが、これを下絵としてIllustratorでトレースをして行きます。

iPhoneに限らずスマホの写真は大抵JPEGファイルですので、ダブルクリックでIllustratorは開きません。

このため、まずはIllustratorを先に起動しておき、スタートメニューの【開く】で、下絵のファイルを選択します。

ファイルがひらきましたら、レイヤーパレットのレイヤー1という名称ダブルクリックして「下絵」などと変更してからロックします。

次に新規レイヤーボタンをクリックして新しいレイヤーを「ロゴマーク」などと変更します。

レイヤーパレット説明

「ロゴマーク」レイヤーを作成したら、「下絵」レイヤーはロックします。ロックしておかないとトレース中に下絵レイヤーを間違って選択してずれてしまったりするためです。
レイヤーパレット説明2

では「ロゴマーク」レイヤーに図形を追加していきます。このとき図形を描くレイヤーを選択していないと描き込めませんので「ロゴマーク」レイヤーを選択します。

長方形作成

ツールパレットの長方形ツールボタンを押し、画面上に正方形(Shift+ドラッグ)を描きます。サイズはこの段階ではアバウトなサイズにしています。

後述する、回転、拡大縮小でラフスケッチのサイズに合わせていきます。(図ではわかりやすくするために正方形の線の色を赤にしています)

ひし形へ変更

図形を選択したまま回転ツールをダブルクリックします。すると回転オプションウィンドウが現れますので45度と入力します。

プレビューにチェックを入れておけばどのように回転するかわかりやすいでしょう。

横幅変更

さらに拡大縮小ツールをダブルクリックし、縦横比を変更をクリックして水平方向の数値を小さくして横幅を詰めていきます。

今回は水平方向のみでほぼサイズが合いましたが、必要であれば垂直方向も調整します。
ここでもプレビューにチェックを入れておくと良いと思います。

ひし形を選択したまま、【オブジェクト】メニュー→【パス】→【パスのオフセット】を選びます。するとパスのオフセットウインドウが現れます。

ここでプレビューをオンにして、オフセット数値を-35としました。
マイナスにすることで一つ小さい形が内側に作成されます。

アウトライン作成

複合パスで中抜き型を作成

これでひし形が2重線になったところで、外側・内側の線両方を選択し、右クリック→【複合パスを作成】を選択します。

一見何も変わっていないように見えますが、内側の色を付けてみると複合パス無しのときはひし形全体が塗りつぶされた状態、複合パス有りの場合は中抜きされた状態の形になります。

複合パス設定



[Sponsor Link]

ランキング応援よろしくお願いします!
にほんブログ村 デザインブログへ



0 件のコメント :

コメントを投稿