リンクスin名古屋。

リンクスパートナーズ株式会社です。よろしくお願いいたします。

ドット絵を劣化させずにアイコンにしたい!その方法は

必要な物:Photoshop

 

ゲーム等でよく利用されるドット絵

かわいらしいですね。

f:id:linkspartners-creative:20161121191341g:plain

たとえばこの赤いキノコ。

Twitterのアイコンにしたいとします。

 

 

まず、そのまま載せてみます。

f:id:linkspartners-creative:20161121191818p:plain

 

……ピンぼけしてるーー!!!

そうです。サイズの小さいドット絵

そのまま載せてしまうと画像が劣化してしまうのです。

 

では拡大してから載せればよいのでは…?と思ったあなた。

惜しいです、それでもこうなります。

MKの使っているMacのプレビューでサイズを拡大して載せてみましょう。

f:id:linkspartners-creative:20161121192226p:plain

プレビューで開きます。

f:id:linkspartners-creative:20161121192234p:plain

サイズをパーセントで変更。

f:id:linkspartners-creative:20161121192314p:plain

500%くらいにしてみましょう。

OKをどーん!

f:id:linkspartners-creative:20161121192343p:plain

劣化してしまったよ…。

 

ドット絵はそのまま拡大すると劣化します

最初にそのまま載せたアイコンも、拡大されちゃってるからですね。

 

 

そこでどうすればよいか。

「画像解像度」を変更すればよいのです。

f:id:linkspartners-creative:20161122113943p:plain

 Photoshopで画像を開きます。

拡大表示してますのでグリッドも見えちゃってますね。(気にしない)

f:id:linkspartners-creative:20161122114022p:plain

イメージから「画像解像度」を開いて、

f:id:linkspartners-creative:20161122114056p:plain

ここで幅と高さをいじります。

f:id:linkspartners-creative:20161122114139p:plain

Twitterのアイコンサイズ400*400に近いものにします。

ここで一番下のボックスが

「ニアレストネイバー法(ハードな輪郭)」

になっているかどうかチェック。

なっていなければそうしてください。

できたらOKをどーん!

f:id:linkspartners-creative:20161122114342p:plain

 きれいに拡大できました!

Twitterのアイコンにしてみましょう。

f:id:linkspartners-creative:20161122120549p:plain

いい感じにできました(*' ▽'*)

こんな感じで、ドット絵を拡大する時には画像解像度をいじりましょう。

くれぐれもキャンパスサイズを変えないように!

 

まとめ ドット絵拡大(Photoshop

画像解像度で幅と高さを調整する。

ニアレストネイバー法をセットしておく。