最近はインタフェース側のフレームワークも充実してきて、あんまり手間暇かけないでサイト制作ができるようになった来てる。
TwitterのBootstrap2とか、HTML Kickstartとか。
それらのフレームワークをそのまま使ってもいいけど、色合いとかレイアウトは変えたいよね、って思う人もいると思う。
それはそれで、気軽にテーマチェンジできるようなサービスサイトがあったりするんで、それを使えばいいと思うんだけど、それとは別にちょっと気になることがある。
faviconだ。
faviconだけデフォルトのまま変えてないってサイトが多い。
意外に気づかないのかな？
例えばCakePHPで作ったサイト、faviconがcakephpのままになってたりする。HTML5テンプレートジェネレータでもそう。あの『5』って書いたアイコンとか普通に表示されてたりする。
トップページでよく使われているデカいイメージ画像がもし、リンク間違えてて『x』表示だったら、『なんじゃこりゃ？』って思うと思うんだよな。俺はfaviconに手が入れられてなかったり、何も用意されてないサイトを見ると、結構同じように思ってしまう。
今なら検索すれば、画像アップロードで簡単にfavicon生成してくれるサイトも見つかるし、フリーのグラフィックエディタとかでも結構気軽に作れると思うんだ。
■まったく近頃の若手Webデザイナは勉強会に参加してばっかりで自分からはぜんぜん勉強しないから多分出会いが目的なんじゃなかろうかと思うけどそれはそれで国策としてはすごく良い事なので来たれベビーブーム！！
というわけで、favicon.icoは是非作ろうじゃないか。
そして出来ればマルチアイコンにしておきたいともわないか？
今回は、フリーの高機能グラフィックエディタであるGIMPを使って、誰でも簡単にマルチアイコンが作れる手順を説明しようと思う。
簡単に流れを説明すると、
- 下絵の準備
- GIMPで開く
- レイヤを複数用意
- レイヤのサイズ変更
- ソース書き出し
- icon形式で書き出し
下絵の準備だけど、GIMPで書いてもいいし、ベクターベースで書いてもOKだ。今回は同じくフリーのInkScapeで下絵を書いてみようと思う。
なのでまず、以下のソフトウェアをインストールして使える状態にしておく必要がある。
両方ともクロスプラットフォームなので、LinuxでもWindowsでもMacでも動くはず。
詳しいインストール方法は割愛する。それぞれのプラットフォーム名で検索すれば、すぐにでてくるでしょ。
■全く近頃の若手Webデザイナは出会い目的で勉強会に参加するけどいざ来てみたら全員男で虚しくテーブルにスイーツがおいてあった日には瞬時に勉強会終わったあとの親睦会への参加をキャンセルするかどうかフラグが立ったりするから困ったものですわい対策をしていただきたい
さて、まずはInkScapeで簡単なアイコンの下絵を作ってみようじゃないか。
おもむろにInkScapeを起動すると、以下のような画面になる。
Illustratorとかとは全然テイストが違うので注意。
まず、画面に角丸の正方形を書きたい。あぁ書いてみたい。書いてなンぼ。
それはどうするのか？教えてあげたいが、我が家の家訓で教えることが出来ない。
というのは冗談で、以下の手順で角丸な正方形がかける。
まず色を決めよう。
色設定などをするため、[Ctrl]+[Shift]+[F]で『フィル/ストローク』を表示させる
『フィル』タブで色を好きに調整する
フィルは塗りつぶしの色だ。ストロークは塗りとスタイルがあるが、これは枠線の色と形。例えば赤いいろで破線、とかを選択できる。
というわけで適当に色を決めておいてほしい。あとから好きなだけ変更することもできるので、ちょっとでも迷ったらもうその色に決めてしまうが良い。
次にシェイプを使って角丸の正方形を描画する。
画面左側に並んでるツールボタンの中から『矩形ツール』（上から5番目くらいの水色の四角）をクリックする。
この状態で画面をドラッグすると、選択した色で四角が書けるんだけど、正方形にするには[Ctrl]を押しながらドラッグしよう。
ドラッグ中にガタガタする場合、グリッドにフィットしてしまっている可能性があるので気をつける。
最終的には縮小されるので、最初は大きめに作ろう。
作ったら、シェイプの右上にある丸いポインタを動かし、角丸の範囲を決める。
と言うわけで、こんな感じで作ってみた。
次に、この上に1文字書いてみようと思う。
[Ctrl]+[Shift]+[L]を押して、レイヤを表示させよう。
表示させたら『＋』ボタンを押し、『文字』という名前でレイヤを追加する。名前は何でもいいけど、わかりやすいのが良いよな。
そして『文字』レイヤが選択されている状態で作業する。
画面左側のツールボタンから『A』と書かれたボタンをクリックすると、文字入力になる。
この状態で、先程つくった四角の内側メいっぱいに四角をドラッグしよう。
枠ができたはず。ここに文字を表示させるんだ。
今回は『H』という文字を書いてみた。
なんでHかというと、そりゃお前、俺変態だし、Hでいいじゃんかおっぱいおっぱい！
最初はやたら小さい文字なので、これを大きくしてみよう。
[Ctrl]+[Shift]+[T]で『テキストとフォント』を表示させる。
今入力した『H』が表示された状態で、フォントやサイズを変更できる。
これをつかって任意のサイズに変更してみよう。
ついでに色の変更もしておく。
以下のようになっていると思う。
このままではまだサイズが小さいので、拡大してしまおう。
左側にあるツールボタンの一番上にある矢印アイコンをクリックする。
この状態でオブジェクトをクリックすると、クリックするたびに任意拡大、任意回転を切り替えることができる。オブジェクトを選択した時に各端に表示される矢印が内外を向いてる状態にして、この矢印をドラッグしてサイズ変更できる。
以下のようなサイズにしてみよう。
もし拡大した時に文字がぼやけたりするなら、そのフォントはビットマップだ。別のフォントを選択しよう。
次に、正方形と文字の位置合わせをしたいので、[Ctrl]+[Shift]+[A]をタイプし、『整列と配置』を表示させる。
表示させたら、[Shift]を押しながら正方形と文字をクリックし、両方選択された状態にする。
『整列と配置』にある『配置』フィールドの『基準』項目が『選択範囲』になっている状態で、その下にあるアイコン『中心を垂直軸に合わせる』と『中心を水平軸に合わせる』の2つのボタンをクリックする。
これで2つのオブジェクトが中心揃えになった。
いろいろ凝ったアイコンにしてもいいが、今回はあくまで下絵の説明であり、InkScapeの使い方説明ではないので、これでアイコンは完成とする。
■全く近頃のWebデザイナ勉強会では女性の参加率が高くなってきておっさんとしては嬉しいことこの上なしだけど既婚者だし子供もいるしどうせワシなんか相手にされてないから説得力ないよねって思ってると意外に人気があったりするから嬉しいでござる
早速PNG画像として書きだしてみよう。
実はエクスポート機能というのがあって、作ったベクタデータの存在する部分だけを自動的に矩形で出力することができる。
画面上部にあるツールメニューから『ファイル』＞『ビットマップにエクスポート』を選択しよう。以下のようなウィンドウが表示されるはずだ。
『参照』ボタンで出力したい場所を選び、『エクスポート』ボタンを押すだけ。
エクスポートが終わったらこの『ビットマップにエクスポート』は閉じてしまって構わない。実はエクスポートしても自動で閉じないので、手動で閉じる必要がある。
さて、次にせっかく作ったこのファイル、InkScape形式のファイルとして保存しておこう。実はInkScapeはSVG形式で保存する。
[Ctrl]＋[S]で保存することができる。
■全くワシは仕事中になにやってるんだ？
というわけで、次回はこのPNG画像をGIMPでマルチアイコンにする手順を説明するよ。
1回で終わらなくて残念だったね。
そういうこともあるんだよ。
facebook
twitter
google+
fb share