前の記事の続きです。
お絵かきソフトを使ってふぁびこんを作ってみましょう。

興味のある方は続きからどうぞ。
(注意：超長いですよ、超長いですよ!!）

[0回]

はい、ではお絵かきしていきます。前の記事にも書きましたが、お絵かきできるソフトならペイントでもなんでもかまいません。

ソフトを開いたら、まずイラストの大きさを変更します。
『AzPainter』なら上部メニューの「編集」→「サイズの変更」で16×16にします。
『ペイント』なら上部メニューの「変形」→「キャンバスの色とサイズ」で変更します。
はい、キャンバスがちぃーっさくなりましたね。
普通の大きさで書いておいて最後に縮小するのもアリですが、そうするとどうしても画質が悪くなるというか、ぼやけてしまう可能性があるので、出来たら16*16にしてから書き始めるとよいと思います。

えーでもあたし、絵苦手だしィ～と思ってるそこのあなた。16*16のお絵かきは普通のお絵かきと違います。ドット絵です。
あのパズルで数字でマス目を塗りつぶしていくと絵が出てくる的なアレな感じです。
はい、わかんねえぇぇですね、すみませんorz。名前が浮かんでこない。何ていうパズルだっけ。
まぁ、ドット絵ですドット絵。どんなにイラストが上手な人でも複雑な絵は書けません。
そんなわけで、ちまちま書きます。
ねこも今度のクリスマスイベントのページで使ってみようと思ってこんなん書いてみました。





はい。小さくて見難くてごめんなさい。
拡大に拡大をした状態で、ひとマスずつ書いていきました。
てっぺんに猫が乗ったクリスマスツリー・・・・・のつもりです。

あ、せっかくなので「レイヤー」の説明を付け加えると。（いらねーよって人は飛ばして下さい）
①猫の飾りの部分
②赤青黄の電飾の部分
③緑（ツリーの葉っぱ）の部分
④茶色（ツリーの幹）の部分
と、4つのレイヤーで書きました。
そうすれば、電飾の位置ずらしたいなーって思ったときに周りの緑の葉っぱの部分を消さなくても済むし、
猫の飾りが中心からずれたー、って時も、そこだけ範囲選択してずらすこともできます。
もちろん猫の飾りのレイヤーで大胆に大きな消しゴムを使っても、他のパーツは消えません。はい便利。

書き終わったら名前を付けて保存します。
『AzPainter』の場合は上部メニュー「ファイル」→「別名で保存」で、保存形式は.gifまたは.pngにしてください。
これは、これからこの絵をアイコンに変換するときに、gifまたはpng形式しか対応していないからです。

ちなみに『AzPainter』ではそのまま保存すると.apdという形式で保存されます。
この形式は『AzPainter』でしか開けない形式で、レイヤーが別れた状態で保存されます。描きかけのときにはこれで保存しましょう。
他の形式にすると全部のレイヤーを合体させた状態で保存されます。もう一度開いてもレイヤーは1枚にまとまってます。


ここで、画像の形式についてご紹介いたします。
主なところで「bmpファイル」「gifファイル」「pngファイル」「jpgファイル」の4つを簡単に。
コピペですすみません。

●bmp（びっとまっぷ）はwindouw標準の基本画像形式です。
圧縮してないので超きれいですがファイルサイズが超でかいです。
元の画像（写真）を綺麗にそのまま保存できます。

●gif（じふ）はインターネット上でよくつかわれている形式です。
保存するときに自動で256色まで圧縮されるので、いろんな色を使いまくってるイラストや写真などには向きません。
サイズが軽く、透過処理やアニメーションも作れます。

●png（ピング）はあまり普及していなく対応していないOSもあるようです。
ファイルサイズは少し大きめですが保存できる最大色数が超多く、綺麗に保存できる新しい形式です。

●jpg（じぇーぺぐ）はbmpと同じ量の色を保存できます。フルカラーってやつです。サイズは一番軽いです。
複雑なイラストや写真に向きますが、文字には向きません。ぼやけます。
圧縮率を調整できて、圧縮すればするほどサイズは軽くなりますが画質は悪くなります。
あと保存したものをもう一回開いて編集したりすると、どんどん荒くなっていきます。

こんな感じです。色を超絶多く使う！とかじゃないなら、データ上で使うイラストならgifがよいと思います。たぶん。
あと携帯電話の待ち受けはgifファイルです。pngは表示されませんでした。jpgは・・・調べてません><（てへ


本題に入る前にながくなっちゃったなあ。ごめんなさい。
16*16でgifまたはpngで保存したら、

http://favicon.htmlkit.com/favicon/

のサイトで変換します。外部サイトに飛ぶよ！
このサイト、英語ですが、英語力皆無の猫でもいけました！！

Image to Use　の隣の欄の「参照」ボタンを押して作ったイラストを選択します。
その下の「Generate Favicon.ico（ファビコンを作る!)」ボタンを押せばOK。プレビューページに飛びます。
「Yor favicon preview：」のとこに表示されるプレビューを見て、おっいいじゃんー。と思ったら、
その下の(ねこのパソコンだと）背景緑になってるとこの「Download favicon Pacage」で保存します。
(左っかわのFreeDownloadとは違います)

保存される形式がzip(圧縮)形式です、解凍ソフトが必要ですのでご注意。
解凍ソフトはその辺にフリーで落ちてます。ねこは『Lhaca』というソフトを使ってます。フリーで落としました。


やっべえ超長くなっちゃった。ごめんなさい。
それでは次の記事で実際にHPブラウザに、こんどこそ設定してみましょう！