福井県のweb制作は有限会社ハートブレーン

イラレ&フォトショ

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

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

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

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

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

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

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

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

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

輪郭を捏造する

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

適当に塗る

そして

推理ADVの犯人みたい

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

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

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

中ボスの出来上がり

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

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

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

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

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

♥

または

&9829;

です。

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

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

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

主なフォント

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

微妙に違う

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

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

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

Photoshopで若作りする方法

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

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

簡単にまとめると

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

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

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

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

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

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

使用前
使用前

使用後
使用後

やりすぎました。

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

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

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

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

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

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

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

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

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

もしくは

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

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

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

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

枠線を見逃す常習犯です

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

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

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

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

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

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

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

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

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

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

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

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

最初にやってた手法

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

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

DTP時代に教わった手法

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

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

今日初めて学んだ手法

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

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

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

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

photoshopのweb用カラー設定の違いがわからない

photoshopのweb用保存で、痛い目に遭いました。

求めていたもの →

実際に出たもの →

よく見ると、「web用に保存」ダイアログには、プレビュー設定という隠し技が存在していました。
モニターカラー・以前のMacintosh・インターネット標準RGB・ドキュメントのプロファイルを使用
ここで「以前のMacintosh(カラーマネジメントなし)」を設定したまま保存して
こういった不幸な事態が起きたわけですね。

ブラウザやOSなどにより、色の解釈は微妙に異なるらしいのです。
カラーマネジメントとは、それぞれの環境に合うように変換することで、その差異を埋めるという
便利だけど時々DTPデザイナー泣かせな機能です。

web用に保存ダイアログ内のプレビューは
あくまでも「このカラーだとこうなるよ」というプレビューでしかないので
実際の設定は、メニューバーの 表示 → 校正設定 で行うようです。

見ただけではっきりとわかるはずもない違い

作業用CMYK と インターネット標準RGB には、基本的に違いがないようです。
以前のMacintosh RGB は、画像からは伝わりにくいですが、明らかに薄めです。
そして若干黄ばんでいるような……。
モニターRGB は、画像じゃなくても伝わりにくいのですが、すこーーーしだけ濃いめです。
彩度が上がるようです。さすがMacintosh。

ちなみに環境は、Mac OS Xの、Photoshop CS5 という微妙に新しくない環境です。
最新設備だと、また事情が違うかもしれません。

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

photoshopで文字を変形したい

実は今、webデザインの修正作業をなるべくphotoshopでしてみようと
今更すぎる努力を地味に実行しています。
元々エセコーダーではありますが、エセにも程があると我ながら思います。

そんな小者というか偽者なNではありますが
また新たにphotoshopの 初歩的とも言える 操作法を学んだので
覚え書きとしてご紹介します。

1.テキストを入力する
手順1

2.メニューバー下の右端にあるボタンをクリックする
手順2

3.出てきたボックスで変形したいタイプや大きさを設定する
手順3

4.完成
手順4

ちなみにテキストの「モテ期未来」は、「私のモテ期は未来まで続く」とかいう意味ではありません。
モテ期未だに来ず、です。中途半端に漢文のような表記です。
ラジオで「学生時代はモテて仕方なかったです〜モテ期はもう3回使っちゃいました〜」などと
ケンカ売ってるとしか思えない投稿を耳にさせられてしまったので、腹いせです。

そんなことやってるからモテないんですね。

しかし、変形に関しては、illustratorの方が自由度が高い気がします。
好き勝手に変形できる方を選ぶか、画質を選ぶかは、個人の自由、ということで。

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

illustratorでwebデザイン作成する際の留意点

一般的に、webデザインはphotoshopで作成するものらしいですね。

「らしい」というのは
実はNを含めたハートブレーンの面々は
誰一人疑問を提示することなく、illustratorを使用していたのです。
デザイン担当も、コード担当(Nです)も、作業はみんなillustrator。
コード担当がデザインに何の用事かというと、単にweb仕様に
自分が構成しやすいように
デザインのサイズや配置を微妙に変化させる、ってそれだけですけど。

というのも、ハートブレーンは今でこそwebや動画制作が多数を占めていますが
その昔、情報誌制作などしておりまして。
そちらが主な業務内容だったので、なじみが深いといえば、やはりillustratorだったのですよ。
(その名残が今も発行されているニュースレターです)
Nに至っては、photoshopでの画像のゆがみ修正は、カンバスの回転→角度指定しか方法を知らなかったくらいなので、全然ダメだこりゃ。

そんな昔とった杵柄(物はいいよう)なハートブレーンのweb制作ですが
徐々に覚えていった、illustratorでのwebデザイン(修正)方法を書き留めます。

(基準:illustrator CS5)

ファイル→ドキュメントのカラーモード→RGBカラー
CMYKとRGBでは、やはり色が違います。若干明暗が違うのもあれば、明らかに色の配合がおかしいのまで。
なので、最初から指定しておくと、Nが何度もやらかした
「あ、あれ…?色おかしいですね。すみません、私の色指定おかしかったのかな?」
と、人の良いデザイナーさんを混乱に陥れるのを防ぎます。

表示→ピクセルプレビュー
昨今のillustratorの拡大画像のキレイさに甘え切って
ブラウザで見てみたらあれ〜?という現象を避けるために
最初から現実を見ておきましょう、という対策。

表示→ピクセルにスナップ
1pxごとにピタリと合う便利仕様。
この存在を知って、世界が変わりました。(大げさ)
DTPデザイン時に、間違ってここにチェックを入れてしまっては「んもう!」となっていた機能ですが
グリッドレイアウトなんてものが推奨されるwebデザインにおいては、最強の味方です。

環境設定→一般→キー入力→1px
環境設定→単位→一般・線・書式・日本語オプション→ピクセル
基本、というかこの設定を忘れると、とてつもなく面倒です。
いざデザインしたページを素材に変えていく作業を……という段階で
12.9385px とかいうサイズになっていたら……ああ恐ろしい。

永遠の初心者Nの、今更すぎる覚え書きでした。

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

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