Twitterアイコン用 ドット絵テンプレ
TwitterなどSNSで使うプロフィールアイコンが大体どこでも"丸"で囲まれるようになって久しいわけですが、この"丸"にあわせて絵が欠けてしまうことがあるのがつらい!
あらかじめどこが"丸"の外側になってしまうかわかれば描き直しも減るのに~ということで、テンプレ画像を作成してみました。
下の画像3点は、それぞれ16x16ドット、24x24ドット、48x48ドットの画像用のものです。必要な画像をダウンロードしてご利用ください。
※大抵のブラウザは右クリックして[名前をつけて保存]的なコマンドでダウンロードできるはずです。
16x16ドット用テンプレート画像(中央部10x10ドット)
24x24ドット用テンプレート画像(中央16x16ドット)
48x48ドット用テンプレート画像(中央32x32ドット)
色数にご注意
3画像とも、noteの仕様で圧縮されてしまうことを防ぐためにGIF形式になっています。GIF形式は256色に限定されてしまうので、ご利用のグラフィックツールによっては、利用時に色数をフルカラー(1677万色)に設定しなおす必要があるかもしれません。
利用手順は、以下のとおりです。
1. ブルーの部分にドット絵を描く!
・ブルーの部分が欠けてしまわずに描ける範囲です。ここに心のおもむくままにドット絵を描きましょう!
・濃いグレーの部分は丸の外です。
・薄いグレーは境界線上にあり、丸の外の色にあわせて(アンチエイリアシングがかかり)色が少し変化してしまう部分です。
なお厳密には、ブルーの部分も外周近くで数ドットだけごくわずかに色が変わってしまう部分があります。ただしRGBの数値で250が251に変化する程度でほぼ視認できないため、丸の範囲内としてあります。
2. 描き終えたら384x384ドットに拡大する
ドット絵を描き終えたら、画像を384x384ドットに拡大してPNG形式で保存します。なぜ384x384ドットなのかは、以下の『にちよう企画班』の記事に書いておきました。
もちろんこのとき、テンプレ画像のグレーの部分は消して、アイコン全体の背景色を統一しましょう。
あとは保存した画像をTwitterのアイコンとして設定すれば完了です。
補足
ブルーの部分の中央の、一段濃い四角形の部分はワンサイズ小さめの正方形画像を収められる範囲を示しています。この記事のタイトル画像はそのサンプルとなっており、左から順に
・16x16アイコンに10x10画像を収めたもの
・24x24アイコンに16x16画像を収めたもの
・48x48アイコンに32x32画像を収めたもの
となっています。
ドット絵初心者の場合は、まず濃いブルーの正方形にあわせてドット絵を描き始めてみて、はみだしたら「それもヨシ!」としてしまうのが気楽でオススメです。