ねこ
いぬ

寺井です。さっき隣の席で、JSに加えPerl/Pythonと「P」がつく言語も得意なのに「P」hotoshopが使えないタイゴさんが16px四方のファビコンに悪戦苦闘されていたので、ここぞとばかりに僕のPhotoshopスキルを見せつけてやりましたよ。

元画像はこちらのタイゴさん家の「小雪」ちゃん：

• 元画像をPhotoshopで開きます。
• 16px四方とサイズ制限が厳しいので、できるだけ抽象化・単純化を目指します。
• 元画像は右上を向いているけれど、目の位置が水平になるように、画像全体を回転させる。これで上下の空間が多少確保できます。
• 「猫らしさ」ってのは、丸顔に耳なので、その要素がギリギリ入るように切り抜きツールで切り抜きます。また、目と口のサイズをある程度確保したいので耳は実際よりも短くてもいいかなと判断して切り抜きました。
• コントラストを上げます。毛色・目・口が際立つように。
• 輪郭を強調させるため、猫らしい輪郭を意識しつつ周辺を塗りつぶします。（サンプルではピンク色を使用）
• この時点で16px×16pxなので、細かい部分を1pxずつ鉛筆ツールでペチペチ塗っていってもたいした作業にはなりません。5分ほど原寸と拡大を見比べながら調整します。
• これで「右向きニャンコ」完成。今回はそれをベースに猫の左半分を鏡面コピーしてリサイズ、調整することで「正面向きニャンコ」も作成しました。
• 右向き画像から左向き画像を作り、Photoshopの「ウィンドウ＞アニメーション」からコマアニメを指定し、Web書き出しでGIFアニメーション書き出しして完成。犬も同様の手順で作成しました。

ねこ：「右向き→正面→左向き→正面」と各フレームを0.5秒ずつループ表示。
いぬ：「待機（0.7秒）→ワン（0.2秒）」をループ表示。

ドット絵職人さんから見れば失笑モノでしょうが、絵心がない僕でも、下絵写真をベースにして10～15分くらいで作ることができ、さらに、予想以上にタイゴさんに感心してもらえたのでよしとします。
目・口・輪郭・コントラストが大事なのかも。