イラレ&フォトショ

絵心のない私がPhotoshopでドット絵を描いてみた

仕事中にふと思い立って、ドット絵を描いてみたくなりました。
我ながら自分のスイッチがどこにあるのか掴めません。
社長が何やら心配していましたが、仕事はちゃんとしていましたよ、その時までは。

しかし中学校3年間は美術部、高校も2年間選択授業で美術を選んでいた私ですが、絵心というものは全くありません。
普通は上達するだろう、という環境で何一つ成長しませんでした。
しかもアメトーーク!の「絵心ない芸人」みたいな、面白い方向の下手くそではありません。
描いた絵を見た人が、何とも言えない微妙な顔をして何事もなかったような顔をする種類の、おいしくも何ともない、ただの下手くそです。
私も一度は邪神とか召喚してみたいです。
そんな私がドット絵を描こうと思ったら

他力本願しかありません。

Photoshopでゲームのようなドット絵を描く方法と設定&おすすめツール(株式会社LIG様 より)

ドット絵描く楽な方法見つけた!気がする(面白法人カヤックのデザイナーブログ様 より)

こちらで説明されている通り、グリッドを10pxに設定して表示させ、ブラシツールで四角形ブラシにして、バケツツールのアンチエイリアスは切って、影やハイライトにはレイヤー効果のソフトライトを使用しました。

今回は写真の人物をドット絵にしたいので、輪郭などは完全に自分だけがやりやすいようにしました。
少し墓穴を掘った部分もあるので、決してお勧めはしません。
というか、ドット絵職人さんがこの記事を見たら、確実に怒るか呆れるかのどちらかだと思います。

まずは顔や頭など、パーツごとにレイヤー分けします。
お好きな方法での範囲指定で(私は自動選択ツールと多角形選択ツールの併用でした)各パーツを選択し、各レイヤーで右クリックし、境界線で輪郭を描きます。

輪郭を捏造する

写真から色を吸い出し、各パーツに色を塗ります。
そして影やハイライト用にレイヤーを作成し、レイヤー効果のソフトライトを使いました。

適当に塗る

そして

推理ADVの犯人みたい

私にも邪神召喚できました!

いや、邪神ってほどでもないかも。
ゾーマがラスボスだとすると、カンダタくらいでしょうか。
というか、ファミコン時代の推理アドベンチャーゲームで、正体を暴かれて豹変した犯人が、こんな絵だったような気がします。

背景がないのは寂しいので、描いてみました。

中ボスの出来上がり

何となく雑なのは、途中で社長に見つかったからです。

次回機会があれば、今度は自分が楽できそうな部分だけを都合良く吸い出した方法で描くのではなく、本気で勉強しようと思います。

【ハートブレーン】http://heartbrain.net

各フォントにおけるハートマーク

HTML上でハートマークを出したい時は

♥

または

&9829;

です。

一方、illustratorの場合は、色々な方法があります。
楕円ツールで横長の楕円を2つ作成し、その内1つを90度回転させて十字にして、その十字を45度回転させ、パスファインダーで分割していらない部分を削除するやり方。
ガイドを使って中心となる補助線を作り、ペンツールでハートの片側半分を描き、それをコピーしてリフレクトの垂直で反転し、オブジェクト→パスで連結させるやり方。

しかし、面倒臭がりのNは、更に簡単な方法を選びます。
テキストで「ハート」と入力してハートマークを出し、書式→アウトラインを作成。
綺麗な形のハートマークができて、非常に便利です。

ただ、当然そのハートは、フォントによって違います。

主なフォント

FOT系(フォントワークス)以外はあまり変わらないのですが。
それでも、面積やカーブの角度など、微妙に違ったりします。

微妙に違う

この中から、お好みの形を選択してください。

目に見える違いは本当にほとんどないですが。

【ハートブレーン】http://heartbrain.net

Photoshopで若作りする方法

相変わらずPhotoshopには明るくない私ですが、いつもお世話になっているブログからこのような記事を発見しました。

Photoshopのハイパスフィルタを使った凄いレタッチの紹介(株式会社LIG様)

簡単にまとめると

写真のレイヤーを2枚コピー

2番目のレイヤーにぼかし(ガウス)を入れる

3番目(一番上)のレイヤーにハイパスを入れ、ぼかしと同じ数値にする

ハイパスレイヤーにマスクをかける

ごまかしたい ぼかしを入れたい部分をブラシでなぞる

いつもコピースタンプツールや画像調整でちまちま作業していたので、ありがたい方法です。
早速実践してみました。

使用前
使用前

使用後
使用後

やりすぎました。

どうにか美魔女に続くような美老人として雑誌に載るようなイケメンにしようと思ったのですが、別の意味で何かに掲載されそうな老人に仕上がってしまいました。

ちなみに今回は省略しましたが、やりすぎたと思った時はブラシの色を白に変えてなぞっていくそうです。

この方法は人物修正だけでなく、粗すぎる画像を修正する手段としても使えそうな気がします。

【ハートブレーン】http://heartbrain.net

Photoshopのレイヤー上で写真を切り抜きたい時

Photoshopで画像素材を作る時などに

は虫類嫌いな私には諸刃の剣

こんなことをしたい場合、背景をレイヤーにした上で、背景をくり抜いて透明にして、その下のレイヤーに画像を重ねる以外に、画期的な方法が2つもあるそうです。

1.背景レイヤーの上に画像レイヤーを重ねる
2.くり抜きたい範囲を選択
3.メニューバーのウィンドウ → チャンネル → アルファチャンネルを新規作成
4.メニューバーのレイヤー → レイヤーマスク → 選択範囲外をマスク

もしくは

1.背景レイヤーの上に画像レイヤーを重ねる
2.くり抜きたい範囲を選択
3.メニューバーのウィンドウ → パス → 選択範囲から作業用パスを作成 → 作業用パスをダブルクリックしてパスを保存
4.メニューバーのレイヤー → ベクトルマスク → 現在のパス

どちらの場合も、画像の位置や拡大・縮小などの調整時には、レイヤーの表示に注意しましょう。
不用意に画像を編集してしまうと、せっかく作ったマスクがずれて、意味がなくなってしまいます。

豆粒大でもカエルはカエル

まず画像とマスクのリンクを外した後、画像の方が選択されているのを確認してから、画像表示を調整してください。

枠線を見逃す常習犯です

この方法だと、くり抜く位置の調整もできるので便利です。

いや、知らなかった事実に本気で驚かれた私が偉そうに言えた立場ではないのですが。

【ハートブレーン】http://heartbrain.net

今更すぎる!?Photoshopで画像を明るくする手法

Photoshop操作中。
同僚「これ、クイックマスク使えばいいじゃないですか」
N「クイックマスク、使ったことないんです。難しくて(笑)」
同僚(ダメだこいつ……!早く何とかしないと……!)

という訳で、現在、少しずつPhotoshopのプロっぽい操作法を教えてもらっています。

実はこの会社、元々は情報誌発行や印刷物デザインがメインだったので、昔からいたメンバーはDTPデザイナーだったのですよ。
なので、Photoshop=写真を明るくするためのツール、という悲惨な認識だったのです。

と、そのデザインさえできなかった私が言い訳をしてみたところで

その明るくする手法すら、効率性とはかけ離れていたらしいことを暴露いたします。

「何だか怖い」と好評をいただいた、夏の夜にふさわしいこんな画像があったとして

呪われそうな雰囲気ではある

実は入社当初、私の使っていた方法といえば

最初にやってた手法

トーンカーブで曲線の真ん中を上に押し上げる、操作としては一番楽な方法でした。
明度もコントラストも調整できるので、細かく設定したい場合はお勧めです。
実は今も、少しだけ明るさのみを変えたい場合、明度を上げてコントラストは下げたい場合などは、こちらを使います。
しかし、不器用な手と太い指という困ったスペック持ちの私は、時間がかかることも。

そんな私が教わった手法は、レイヤーをコピーして、重ねた上の方をスクリーンモードにし、不透明度で調整するというものでした。

DTP時代に教わった手法

細かく設定できない分、指が滑ったりすることによる色合いの不自然さも出てきにくいため、綺麗に出力されるようです。
勘違いだったらごめんなさい。
元の画像も別レイヤーに残るため、元に戻すのも簡単です。
難点は、白飛びしやすいことです。

そんな私が今日初めて聞いたのが、レベル補正レイヤー。

今日初めて学んだ手法

レイヤー → 新規調整レイヤー → レベル補正
こちらも細かい設定ができる上、元に戻すのも簡単。(psd形式で保存すること前提ですが)
画像全体を見ながら右ウィンドウの中で調節できるのもありがたいです。

ちなみに、複数のレイヤーを1つにまとめるショートカットキーは、command(windowsはctrl) + shift + E
複数のレイヤーそのものは残し、1つになった状態のレイヤーをコピーするのは、command(windowsはctrl) + shift + option + E

パソコンの環境設定によって違うかもしれません。
私はまず、ショートカットキーを覚えるところから始めた方がいいような気もします。

【ハートブレーン】http://heartbrain.net

1 2
メールでのお問合せ・お見積りはコチラ