WordPressテーマ『十二単』リリース 🎉

【Photoshop】1分でイラストをドット絵に変換する方法

とある経緯からドット絵のフリー素材が大量に欲しかったのですが、全く見つからず……。「なら作ってしまえばいいのか」と方法を色々探していたんですが、写真をドット絵風にする情報しか見当たらなかったので色々参考にしつつ模索してイラストをドット化する方法がある程度確立できました。

下の手順ではあえて白い背景の画像を使用して透過させていますが、最初から透過背景の画像を用意できるならその方が手順圧縮できて好ましいです

もくじ

完成図

1分でイラストをドット絵にする手順

STEP1🚚 背景を透過させる

自動選択ツールで背景をクリックし、背景が点線で囲われた状態にします。

backspaceキーを押せば背景が透過されます。

こうなっていればOK。単色背景でない場合の透過方法についてはこの方法とは少し異なるため、こちらのチュートリアル記事などを参考にしましょう。

STEP2🚚 コントラストを最大まで上げる

イメージ>色調補正>明るさ・コントラストを選択

コントラストを最大限まで引き上げて、昔の色調っぽくします。

STEP3🚚 境界線をつけてドット絵感を出す

境界線をつけることでドット絵化した時のドット絵感が増します。

境界線は1pxを指定します。

もし、レイヤースタイルが選択できないときは、レイヤーが背景である可能性があります。鍵マークをクリックし、背景状態を解除しましょう

STEP4🚚 フィルターでモザイク処理を施す

フィルター>ピクセレート>モザイクからモザイク処理が施せます。

セルの大きさは画像サイズの1/100くらいで指定するといい感じになりやすいです。

STEP5🚚 カラーモードを変更する

イメージ>モード>インデックスカラーを選択します。

完成

ちなみにPhotoshopの単純作業は自動化もできるそう

Photoshopの単純作業は結構簡単に自動化できるそうな。なんでもjsx形式でファイルを作成し、それをPhotoshopで読み込むといった具合だそうな。

普通にツールバーにありますね。作業手順を記録してその作業を繰り返すことができるそう。詳しくはググってください。

CTAエリアイメージ

WordPressテーマ『十二単』

無料のWordPressテーマです。絶賛開発中。
詳しくみる

✒️ Writer ✒️

たかさき

しがないたかさきです。HTML/CSS/JS/PHP/Ruby/SQLちょっと書けます、Photoshopちょっと使えます。Vue勉強中、埼玉とか都内の勉強会良いのあれば教えてください〜。メディア売買経験あります、ミドルレベルでの検索結果1位何回か取ったことあります。詳しくはこちら

Follow Me:)

COMMENT

コメントする

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。


内容をご確認の上、送信してください。