creatersnest68

美しいfaviconを作成するために覚えておきたい10のコツ


こんにちは!たかひろまーきゅりーです。

さて、皆さん始まってそうそうですが唐突な質問を投げかけていいですか?
faviconとはなんでしょうか?ファミコンと語感が似ていることから機械を思い浮かべた方もいるのではないでしょうか笑

faviconとはfavorite icon略称で、サイトのシンボルマーク的な存在です。

ファビコン

サイトタイトルの横についている、こやつです。
今回はこのfaviconを美しく作るためのコツを紹介します。

まずは環境を整えよう。

faviconの作成するためのソフトはいくつか存在します。
しかし、今回はPhotoshopを用いてfaviconを作成するのでそれらのソフトは必要ありません。
しかし、Photoshopそのままの状態ではfaviconを作成することができません。
意外ですよね?

その理由はfaviconの拡張子にあります。faviconの拡張子は「.ico」が一番望ましいでしょう。
望ましいという意味は、faviconは「gif」、「png」でも表示することができます。
しかしそれだと古いブラウザが対応していない場合があるのです。
なので「.ico」を拡張子として採用したいのですが、Photoshopは「.ico」に対応していないのです。

なのでプラグインを挿入しましょう。

プラグイン

上のサイトではプラグインをインストールする方法を詳しく解説してあります。ぜひとも参考にしております。

 

.icoファイルの作成方法。

ファイル作成法
さて、インストールを終えたら早速「.ico」ファイルを作成していきましょう。
上記のサイトに詳しい方法が記載されています。

気をつける点としては「Web用に保存」ボタンは押さないようにしましょう。

 

ドット絵を書く環境を設定しよう。

ドット絵設定

さあさあ、用意ができたらドット絵を書く環境を整えていきましょう。

要するにグリッド線を引いてドット可視化させるのですが、上のサイトでは32×32の設定ですが、
favicon作成なら16×16に設定したほうが良いでしょう。

 

拡大しても美しいドット絵の作成方法。

ドット絵

http://psgips.blog24.fc2.com/blog-entry-490.html

faviconとは要するに16×16の狭い枠内でいかにドットを用いて絵を表現するかという、簡単なようで奥深い芸術の世界なのです。

いきなり作れと言われても普段から制作していない人にとっては何をどうしたらいいかわかりませんね。

なので!上記のサイトを初めてのfavicon作りのお手本として推奨いたします。
いきなりキャラクターを描くのは難しいと思う貴方も、説明通りに作っていけば結構簡単にできちゃうもんですよ!

とにかくお手本を真似て、感覚を掴んでみましょう!

ドット絵

正直言って、ドットを一つ一つ置いていくような細かい作業は苦手だという貴方。
もちろんそういう方もいるでしょう、しかしそれでも作らなければいけない事情がある時には
上記のサイトを参考にしてドット絵を作成してみてはいかがでしょうか。

Photoshopのレイヤー効果などの機能を使い、効率的に作成をする方法です。

 

専用ソフトで作製したドット絵に遜色無いドットを作る方法。

ドット絵作成http://cutiephotoshop.blog133.fc2.com/blog-entry-256.html

実はドット絵を作成する為のツールはたくさんあります。
しかし、初めて見るUIに戸惑うよりかは、使い慣れたPhotoshopで作っていきたい
それが今回の記事の趣旨なので、Photoshopで専用ソフト並みのドット絵を作成するチュートリアルを紹介します。

 

ドット絵を書く際に役に立つPhotoshop機能。

ドット絵http://albatrus.com/main/photoshop/2942

Photoshopはドット絵に特化したツールではありませんが、ドット絵を書く際に役に立つ機能はいくつか存在します。
上のサイトでは、ピクセルの移動方法や中間色の抽出の仕方を解説しています。

 

イラストを元にドット絵を作成する方法。

ドット絵http://cocopon.me/blog/?p=4644

人物イラストを書く際に大切なことは特徴を強調するということです。
ドット絵を書く時も同じで、如何にドットで特徴を捉えるかが、イラストからドット絵を書く際に重要なことです。

 

 アニメーションのfaviconを作ろう。

アニメーション

http://psgips.blog24.fc2.com/blog-entry-509.html

faviconはアニメーションにすることも可能なんです!
でもアニメーションって難しそう・・・と思っちゃいますよね?

でも、上記のサイトを見てみるとパターンを構成してしまえばあとはズラすだけ!
この方法を応用して、アニメーションfaviconを作成しましょう!

 

立体的なfaviconの作り方。

ドット絵http://blog.livedoor.jp/dotez/archives/50725423.html

エッジを際立たせて、立体的なfaviconの作成に応用できる基礎知識を学ぶことができます。

 

faviconを設定する方法。

htmlhttp://www.akagami.jp/other/favicon.html

さて、faviconを作成したら、htmlで実装しましょう。
上記のサイトではfaviconをhtmlで表示させる方法を紹介しています。

 

おわりに

いかかでしたか??
favicvonを知らなかった人も少し興味を持てたのではないでしょうか?

写真と見分けが付かないほどグラフィカルな画像が当たり前な現代ですが、
レトロなものに関心を抱く人もいつの時代も一定層存在します。
なのでドット絵を作成する技術は覚えておいて損はありません。

ぜひ、ドット絵の世界にどっぷりハマってドット絵師になってください!

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


NESTonlineBlog編集部

NESTonlineBlog編集部です。ご寄稿頂いた記事などを公開していきます。

Next ArticleGithub-flowで実践する初心者でも取り組みやすいGitワークフロー