ワリトイロイロ

DIY、絵、洋裁などなど ワリトイロイロやってる日々

【デジ絵】ツイッターのアイコンのつくりかた【初心者向け】

SNSのアイコン 自分で絵を描くとこから作りたい!】

写真撮ってアイコンにするのは容易だし、キレイで素敵。

でもせっかくペンタブ持ってるし、描画ソフトもあるし

なにより絵をかくのが好き!

そしたらSNSのアイコンやヘッダー画像を作りたいなあ、

って思いますよね

だがしかし私はですね、初心者なのです。

まず「描き始めのキャンバスサイズはどうすれば・・・」から不明

 

ということでいろいろ調べて、実際に自分でアイコン作ってみましたよ!

今回はクリップスタジオを使用しています

 

SNSやブログのヘッダー画像の作り方はこちらの記事をどうぞwww.toiroiro.net こちらでは「元々所持しているイラストが画像」を使用した作り方でご案内しています。

 

ソフトはPhotoshopCCを使用していますが、

作業の流れ自体はどの描画ソフトでもほぼ同じですよ! 

【新規キャンバスを作成するよ】

 f:id:kokiyu666:20180921222039j:plain 

クリップスタジオを起動して「イラスト」を選択します

単位(拡張子)は「px(ピクセル)」を選びます

ツイッターのアイコンの推奨サイズは「400×400px」ですので

キャンバスの「幅、高さ」のところに、それぞれ数値を入力します

(画像では幅1500 高さ400になっていますが、両方400で入力)

 

なお、解像度は印刷の際に必要なものですので、ここでは関係がありません

72か350にしておけばいいかなと思います

検索かけてみたところ、

アイコン専用ということなら72で作っている方が多かったです

(わたしはビビりなので350とか600で作成開始)

 

まずは「推奨サイズそのまま」のサイズで作成してみますね! f:id:kokiyu666:20180918035525j:plain 

ちっせええー

えーこれで描くの?描きづらくね?

私ちょっと自信ないや

 

ということで「3倍」の1200×1200pixelに変更しました

画像サイズが小さくて描きづらい!というときは、

指定されたサイズの「倍数」でキャンバスを作り直してみてください。

2倍、または3倍がいいかと思います。

あまり大きくすると、縮小かけたときに画像がぼやぁってします。

 

では仕切り直し!

描いてみまーす「あ、大丈夫そう」 

f:id:kokiyu666:20180918035625j:plain

これなら拡大しても線がたがたして見えなくて普通に描けそうです

 

【まずは「線が細い絵柄」で実験】

シンプルな絵柄が見やすいことは明白ですので、

わざと線が細かい感じの絵柄で描いてみます

アイコンになったときの見えやすさはどうなるかな?

線が細いとパッとしないかなあ?

 f:id:kokiyu666:20180918035648j:plain

下書き完成

鉛筆の「リアル鉛筆」9サイズくらいで描きました

  

ペン入れはシャーペンにして5とか4サイズで描いていきます

 f:id:kokiyu666:20180918035716j:plain

 

顔の横の髪が輪郭っぽく見えて変だけど…まあいいや(雑)

 

ペン入れの画像の下にレイヤー作って色塗りします

色はベースの色を箇所によってささっと塗ったあと、

クリッピングして乗算かけて塗りました

 

f:id:kokiyu666:20180921221958j:plain 

 できた! 

 

【WEB用に保存をします】

ではネットにアップロードするために「書き出し」をします

 「ファイル」→「画像を統合して書き出し」→「PNG」を選びます

  f:id:kokiyu666:20180921222141j:plain

キャンバスサイズを3倍の1200pixelで描いていたので、

ここでサイズを推奨サイズの「400pixel」に変更します

f:id:kokiyu666:20180921222231j:plain
f:id:kokiyu666:20180921222303j:plain

WEB用画像を保存をしました。これで準備万端! 

これとは別に元データの保存もお忘れなく(*^-^*)

 

ツイッターにアップロードするよ】 

実際にツイッターのアイコンをこれにしたら丸くくりぬかれるけど

どうなるかな??

 f:id:kokiyu666:20180918035844j:plain

頭の一部と鎖骨から下はサヨウナラ

つまりここの欠けちゃう部分を考慮して絵を描く必要があります

 

画面を直接写真で撮影したのでザビザビして見えますが

この時点ではぼやけ等もなくきれいでした 

 f:id:kokiyu666:20180921222346j:plain 

あっ13型ブラウザで見る分には特になにも感じないですね、

なーんて思ったんですけど 

アイコンが一番小さく表示されるこの部分で、

この線の細い絵はアイコンに適していたか?というと・・・

 f:id:kokiyu666:20180921222426j:plain

はい、なんというかはっきりしないですね(笑)

線自体が細く、細かい絵なのでいずれにしろ「よく見えない」です。

今回色も薄くしており、明暗の差がない絵なので尚更ぼやあ。

 

つまり線画細い絵は…

アイコンのように小さく表示される場合はビミョウ

ということがわかりました!

もっと色を濃くしたり、メリハリをつけるといいかんじになると思います。

 

【シンプルな絵柄だとこんなかんじ】 

じゃあこんなのだったらどうかな~ 

f:id:kokiyu666:20180921222511j:plain

 

自分のアイコンを作りました。さっきよりマシじゃないですか?

ものすごくちっちゃくなる、っていうことを考えると

もっと色もデザインもシンプルなほうが目を引きますね。

 

また、「書き出し時にリサイズしたら画像の見え方に変化はあるか?」

が気になったので

推奨サイズと、推奨サイズの倍数(3倍にしました)でそれぞれ絵を描き、

拡張子PNGとJPGとで保存して、アップロードして確認してみましたが

いずれの場合も画像の見た目の質に大きな差は見られませんでしたよ(*^-^*)

そんなわけで、新規キャンバスは推奨サイズの3倍までなら

画像が荒れる心配もなく、安心して絵を描きはじめることができそうですね。

【まとめ】

☆作りたいアイコンの「推奨サイズ」を調べる

☆書き始めのキャンバスサイズは「推奨サイズ」か、

 キャンバスが小さくて描きづらい場合は「その倍数(2~3倍)」で作成

☆解像度はWEB用なら小さくてOK

☆アップロードした際に欠ける部分がある場合、

 「見せたい部分が欠ける部分にかからないように絵をかく」

データの書き出しは「推奨サイズ」で!

 

結構簡単に作れましたよ(*^-^*)

今回はクリップスタジオを使用していますが、

他のお絵描きフリーソフトなどでも要領自体はほぼ変わらないと思います。

PCやタブレットがなくても、

携帯端末のタッチパネルとお絵描きアプリでも挑戦できますよ(*´▽`*)

 

みなさんもぜひオリジナルのイラストアイコンを作ってみてくださいね!