pictSQUAREでのオンラインイベントで使用できるアバター素体を作りました。
今回はペアアバターです。二頭身くらいの可愛らしいサイズ感を目指しました。仲良く手を繋いでもらっています。
ペアアバター素体
素体を元に作成したアバターがこちら。本来ひとりのスペースにふたり詰め込んで作っているので、ちんまりと可愛らしいサイズです。
実際に作ったペアアバター
このページではペアアバター素体の配布と、素体を使用したアバターの作り方を紹介します。
関連記事
ピクスクのアバター作成についての基礎的な解説及び、簡単なアバターの作り方はこちら↓
ピクスクの店舗外観の作り方はこちら↓
二人で手を繋いで歩くペアアバター素体の配布
アバター素体(512×384px)
こちらが自作したアバター素体です。
縦512px、横384px。背景は透過してあります。
こちらは配布しますので、保存してご自由にお使いください。描き足し・色変え等の加工をしていただいて構いません。
自作発言や二次配布はご遠慮くださいね。
加工した画像を配布する際は当サイト https://www.soramade.info/ の記載をお願いします。
以下の項目で紹介するアバターの作り方でも、こちらの素体を使用します。
ピクスクアバター作成用ガイドライン(512×384px)
こちらはアバター作成の際に便利なガイドラインを引いたものです。
縦512px 横384px。黒のラインがアバター1つ辺りのサイズで、更にオレンジのラインで中心線を表しています。
以下の項目で紹介するアバターの作り方でも、こちらの素材を使用します。
当サイトで配布しているアバター素体及び作成用ガイドラインの画像サイズについて
pictSQUAREにおけるアバターの必要サイズは縦128px、横96px。当サイトで配布しているアバター素体と作成用ガイドラインの画像サイズは縦512px、横384pxです。
iPadだと写真アプリの仕様上の問題で、画像ファイルのサイズが小さいと画像変換処理が働いて透過pngが反映しなくなることがあるようで、そのままのサイズだと背景が白塗りになってしまったため、4倍のサイズに拡大しています。
配布している縦512px、横384pxサイズでも描画可能ですし、そのままpictSQUAREにてアバター登録すれば自動でリサイズされて、アバターとして使用できます。
私はドット絵を描きたかったので、お絵描きアプリで画像解像度を変えて縦128px横96pxで描画しています。
また、iPhoneやiPad等のデバイスをお使いで透過png保存が上手くできない場合等は、画像解像度を大きくすることで対処可能かもしれません。
下記に2つのお絵描きアプリでの画像解像度変更方法を解説しておきますね。
ibisPaintでの画像解像度 変更方法
①ibisPaintを起動、新規キャンパスの写真読み込みから、素体の画像を選択する
ibisPaintでの画像解像度変更方法
②キャンパスを選択する
ibisPaintでの画像解像度変更方法
③画像解像度変更を選ぶ
ibisPaintでの画像解像度変更方法
④幅と高さを変更する
縮小計算式は「線形」がぼやけ方が少ないように感じます。
ibisPaintでの画像解像度変更方法
⑤デジタルペン1pxで描画する
後は描画していきます。
ibisPaintでの画像解像度変更方法
ibisPaintを使用したアバターの作り方は、過去記事にて解説しています↓
CLIP STUDIO PAINTでの画像解像度 変更方法
①CLIP STUDIO PAINTを起動、ファイル→フォトフォルダから新規作成より、アバター素体を選択する
CLIP STUDIOでの画像解像度変更方法
②編集→画像解像度を変更を選択する
CLIP STUDIOでの画像解像度変更方法
③画像解像度を変更する
CLIP STUDIOでの画像解像度変更方法
今回はCLIP STUDIOを使用したアバターの作り方を以下で解説します。
配布アバター素体の使用例
アバターを作る前に、実際にpictSQUARE会場をアバターで歩いてみました。
見え方の参考にどうぞ。
アバター素体
大きさの参考になるように、噴水の前で写真撮影してみました。前面。
アバター素体
こちらから見て右向き。
アバター素体
左向き。
アバター素体
背中。
作成したアバター素体
次は実際に作成したアバターです。前向き。
作成したアバター
こちらから見て右向き。
作成したアバター
左向き。本来は左の子が前に来るように作るのですが、今回はふたりの関係性を考えて右の子が前に来るように作っています。
作成したアバター
後ろ向き。
それでは次項より作り方を解説します。
配布アバター素体を使用したペアアバターの作り方
このページではCLIP STUDIO PAINTを使用します。
ibisPaintを使用してのアバターの作り方はこちらをどうぞ↓
ペアアバターを描く前に
アバター素体とガイドラインをフォルダに入れて不透明度を下げ、下に作った新しいレイヤーに描画していきます。
ブラシはドットペンを使用。1コマ毎にフォルダ分けしています。
作成したペアアバター
完成したペアアバターはこちら。
空き時間にちょこちょこ作ったので正確な作業時間はわかりませんが、大体2時間程でした。
ペアアバター(前面)を描く
①髪の毛を描く
アバターを描画する
頭の輪郭を参考に髪の毛を描画します。
アバターを描画する
髪の色を置きます。
③顔を描く
アバターを描画する
素体を参考に顔を描きます。
アバターを描画する
素体フォルダは時々非表示にして、色味を確認します。
アバターを描画する
バランスを見ながら髪を加筆します。
アバターを描画する
pictSQUAREを歩かせるととっても小さいので、明暗は最低限の描写で充分だと感じます。影を描いてもよく見えないです。
③身体を描く
アバターを描画する
同様に、素体のラインを参考に服を着せます。
アバターを描画する
大まかに着せたら素体フォルダを非表示にして、色味を確認しながら調整します。
アバターを描画する
右の子も同じように描きます。作画コストが高い衣装なので、デフォルメ化するのが難しかったです。
④コピー＆ペーストしたものを加筆修正して、前面一列を描きます。
アバターを描画する
⑤pictSQUAREで試運転する
アバターを描画する
前一列が描けたので、試しにpictSQUAREで歩いてもらいます。可愛い！
前しか描いていないので左右上方向に動くと消えてしまいますが、動作確認をして加筆修正します。今回は手の肌の色が背景と同化して見にくかったので、輪郭を加筆しました。
pictSQUAREでのアバター登録方法は後述します。
ペアアバター(左右)を描く
①頭の輪郭を参考に、髪を描く
ペアアバター(左右)を描く
髪を描いていきます。
ペアアバター(左右)を描く
前面と同じようにハイライトを入れました。
②顔を描く
ペアアバター(左右)を描く
顔も描きます。
③身体を描く
ペアアバター(左右)を描く
素体に着せるように身体を描きます。
④右の子も描く
ペアアバター(左右)を描く
同様に、もうひとり描きます。
⑤コピー＆ペーストに加筆修正を加えて、隣の素体も完成させる
ペアアバター(左右)を描く
ペアアバター(左右)を描く
ざっくり描けたら素体フォルダを非表示にして、色味を見ながら細かく書き込みます。
ペアアバターを描画する
こつこつとドットを打っていきます。左右反転を駆使してなるべく労力を少なくしていきます。
基本的には左に向かう時は左の子が前、右に向かう時は右の子が前で良いと思うのですが、弊ふたりの場合は右の子に前を歩いてもらいたかったので途中で全部描き直しました。そのため解説の画像の前後が途中から変わっています。
ペアアバター(後ろ)を描画する
①背中を描きます。前面のアバターをコピー＆ペーストします。
ペアアバター(後ろ)を描画する
②髪を描き足し、服を加筆修正して背中を描く
ペアアバター(後ろ)を描画する
背中を描きます。
ペアアバター(後ろ)を描画する
ふたりとも後ろ姿になりました。
③コピー＆ペーストして同様に後ろ姿を描く
ペアアバター(後ろ)を描く
全て描けました！めでたい！
透過pngで保存する
用紙レイヤーが非表示(背景が透明/市松模様)であることを確認してからpngで保存します。
透過pngで保存する
ファイル→画像を統合して書き出し→png を選択。背景が透明になっていれば自動的に透過pngで保存されます。
【お絵描きアプリでは背景が透明なのに、保存すると背景が白塗りになっている場合】
iPhoneやiPadの場合、先述のように画像サイズが小さすぎると、写真アプリの仕様上の問題で画像変換処理が働いて透過pngが反映しなくなることがあるようです。
その場合、画像サイズを大きくすることで解決することがあります。
①編集→画像解像度を変更 を選択する
透過pngで保存する
②画像解像度を任意の値に変更する
画像解像度を変更する
私は128 ×96pxの4倍の値できちんと透過pngで保存されるようになりました。ご参考にどうぞ。
pictSQUAREでアバター登録する
透過pngで保存した画像をpictSQUAREでアバター登録します。
①pictSQUAREにログインし、左上の三点リーダーを選択、「アバター設定」を選択する
pictSQUAREでアバター登録する
②「アバター画像」の「ファイルを選択」から作成したアバター画像をアップロードし、「アバター設定を保存する」を選択する
pictSQUAREでアバター登録する
選択後、アバター画像が表示されます。
③三点リーダーから「テスト出展」を選択する
pictSQUAREでアバター登録する
この記事では「テスト出展」からアバターの動作確認します。
イベントにサークル参加登録済みであれば、イベント会場への時間外入場からでも同様に動作確認が可能です。こちらの場合は他のサークル参加者に遭遇する可能性があります。
④「テスト出展会場を確認する」を選択する
pictSQUAREでアバター登録する
⑤左上にいる自作アバターを選択し、イベントホールに入る
pictSQUAREでアバター登録する
⑥アバターを自由に動かして動作確認する
pictSQUAREでアバター登録する
可愛い！！！！
完成したアバターを愛でながら、おかしなところがないか確認します。
満足のいくまで修正すれば自作アバターの完成です！以上、2人で手を繋いで歩くペアアバターの作り方でした。
コメント