四角いアバターは、小さなスペースでも多くの役割を果たします。複雑なデザインソフトを使わず、目で確認して試せる選択に絞って解説します。
Face Square Generator は、個別のレイヤーを組み合わせてピクセル調の四角いアバターを作れるブラウザツールです。最初から自分でパーツを選ぶことも、Random で出発点を作ってから、顔、髪、色、アクセサリー、背景を少しずつ整えることもできます。
このガイドでは、現在のジェネレーターで使える操作をそのまま紹介します。以下のスクリーンショットと動画は実際の画面なので、記事の手順をそのままページ上で試せます。
1. エディターを開き、レイヤーを選ぶ
中央のプレビュー画面には、作業中のアバターが表示されます。右側のカテゴリタブでは、背景、顔、前髪、サイドヘア、目、眉、鼻、口、細部、眼鏡、服、アクセサリー、バイカラー効果を選べます。カテゴリを選んでからタイルをクリックすると、そのパーツがすぐにプレビューへ反映されます。
左側にはよく使う操作があります。Random は新しい組み合わせを作成し、Download は現在の PNG を保存、Share は現在のデザインへのリンクをコピー、Config は PNG サイズの選択を開きます。ランダム操作中に残したいレイヤーがあれば、先に Lock for random を使いましょう。
2. Random で試して、気に入った部分を残す
Random を使うと、自分では選ばなかった組み合わせもすばやく試せます。下の短い録画では、ライブプレビューのアバターが切り替わります。以前の状態に戻したいときは Undo を使えます。残したいパーツがある場合は、もう一度 Random を使う前にそのレイヤーをロックしてください。
3. 選択したパーツの色を設定する
エディターで色のカテゴリを選ぶと、その素材に使えるスウォッチが表示されます。下の例では、前髪の色と前髪の境界線の色を別々に設定できます。スウォッチを選べばすぐに変更でき、細かく指定したいときは Custom で 16 進数の色を入力できます。
塗りと境界線を分けると、コントラストを作りやすくなります。明るい髪色に濃い境界線を付ければ、明るい背景でも見やすくなります。髪、服、追加パーツに同系色のアクセントを使えば、装飾を増やしすぎずにまとまりを作れます。
4. 選択中レイヤーの位置とズームを調整する
View & Layer Tools の方向ボタンを使うと、選択中のレイヤーを上、下、左、右へ移動できます。マイナスとプラスのボタンはズームレベルを調整します。眼鏡、帽子、アクセサリー、髪のレイヤーの周りに少し余白を作りたいときに便利です。
試した結果が合わない場合は、Reset layer を選ぶと、そのレイヤーだけを初期位置と初期サイズに戻せます。アバター全体をリセットせず、ひとつの細部だけを直せます。
5. ダウンロード前に PNG サイズを選ぶ
主な操作ボタンのそばにある Config を選ぶと、256 × 256、512 × 512、1024 × 1024 の 3 種類を選べます。プレビューのサイズ表示も選択した寸法に切り替わり、その後 Download を選ぶと、現在のアバターが正方形 PNG として保存されます。
軽い小さなアイコンには 256 × 256 が適しています。多くのプロフィール画像には 512 × 512 が実用的です。コミュニティのプロフィール、配信用グラフィック、将来のトリミングにも使いたい場合は 1024 × 1024 を選びましょう。
編集できる状態も残しておく
ダウンロードする前にプレビューを小さく見て、顔、髪の形、主なアクセサリーが見分けられるか確認しましょう。完成版を PNG として保存するだけでなく、編集を続けたい組み合わせには Share も使ってください。コピーしたリンクには現在の maker state が保存されるため、後で同じ組み合わせを開いてブラウザで編集を続けられます。