簡単にSketchでアバターが作れるライブラリ【Avataaars】を紹介

Design Web

つい最近、Pablo StanleyさんがデザインしたアバターのSketchライブラリが出ました。

Pablo StanleyさんはCarbon Health(ヘルスケアアプリ)の共同創設者で、デザインのワークショップをしたり、SketchやPhotoshopなどのチュートリアル動画をYouTubeにあげているデザイナーです。
Website / YouTube / Twitter

YouTubeでは英語でPodcastはスペイン語で色々デザインについて発信しているので、英語・スペイン語がわかる人でデザインに興味がある人は要チェックです。

では早速、Avataaarsを使っていきましょう〜

スポンサードリンク

Avataaarsの使い方

使うまでの手順を写真付きで紹介していきます。
あっという間に終わりますww

YouTubeの説明欄に

Use it freely for your personal or commercial projects.

「個人・商用に自由に使っていいよ」とあるので、気にせず自由に使えるみたいです。

まず、Avataaarsをダウンロード
こちら→Avataaars
「Get the library」をクリックすると Dropboxのページに飛びます。

右上の「ダウンロード」をクリック

ダウンロードに以下のライブラリがあるのでダブルクリックで開いてください

開くとたくさんのアバターが出迎えてくれます
左側にあるHow to useのページに英語で使い方が書いてあります。

まず、環境設定「Preference」にいきます。

「Libraries」をクリックします。

「Add Library」をクリックします。

ダウンロードにある「AvatatLibrary.sketch」を選びます。

以上でライブラリの追加完了です。

実際にAvataaarsを使ってみる

「Insert」→「Symbols」→「Avataaar」にいきます。

「Circle」は円の背景有りで、「Default」は円の背景無しです。

どちらかを選んで、アートボードにカーソルを持っていくとカーソルのところに薄くアバターが表示されます。

クリックすると、その場所にアバターが表示されます。
(別に新しくアートボードを用意しました)

右の「Overrides」から髪型、髪色、メガネ、肌の色、目、口、服、など色々変更できます。

こんな感じ
(ちょっと長いですが・・・)

なかなか面白いです

色々なパターンがあるので、遊んでみてください。

ちょっとおまけ : Avataaarsのカスタマイズ方法

最初にダウンロードしたライブラリのファイルを開いてSymbolのページから自分の好きなようにカスタマイズできます。
*元のデザインをそのままいじらずに、複製してカスタマイズしましょう。

服を「Graphic Shirt」を選ぶとTシャツのロゴ(Graphic)を変更できるみたいだったので、「こんにちは!」Graphicを試しに追加してみました。

ClothingのYour textをCommand + dで複製

テキストを「こんにちは!」にして終わりですww

Command + sで保存して、反映されているか確認のために新しくアバターを作ります。
服のところで、Graphic Shirtを選びます。

Graphicがみにくいので、色を変えます。

先ほど作ったSymbolが追加されているので、それを選びます。

こんな感じになりました

髪の毛と被ってますが、、、ww

こんな感じでちょろっといじることができますので、自分の好みのアバターにカスタマイズしてみてください。
*Symbolをそのまま編集すると、その時に使っているSymbolが変わるので複製して編集することをおすすめします。

以上、Pablo Stanleyさんがデザインしたアバターのライブラリ【Avataaars】の紹介でした〜

やっぱり I love Sketch.

I love Sketch too!!という方はこちら

では〜

Webのコトでお困りの方

ホームページの制作・修正・リニューアル等のお手伝い致します!!詳細はこちら

まずは下のリンクから気軽にご相談ください^ ^

SNSからのDMの方が早くレスポンスできます。