読者です 読者をやめる 読者になる 読者になる

OMGmag

デザイン、アート etc...センスでご飯を食べてるblog

ライブのフライヤーなんかに使える『汚し』のテクニックまとめ_Photoshop Lesson07

大阪のおっさんが教えるAdobe Photoshop

わしや(^ω^) 

ひさしぶりやんけ!元気しとったけェワレ!前回からちょっと間空いてもたけどな、
久し振りにいくどー!いつものように先見てもらお。今回はコレや。

f:id:omg-ox:20160904200049j:plain

パンクとかのライブのフライヤーでこんなんあるやんけ?コラージュしたりスプレーのステンシルとか、単色刷りみたいな表現とかアナログで作ったみたいな雰囲気のやつやんけ!今回はコレ作っていこ!言うとくけど全部Photoshop上でできるさかいな!

こういう汚れたような表現を「グランジ」いうねんけどな。わざとばっちぃしてんねん。綺麗なデザインもええけど、あえてアナログっぽい風合いを出してみよちゅうこっちゃな。タイトルにもあるとおりバンドのフライヤーのデザインとかに使えるんちゃうけ?知らんけど。おっちゃんは昔からパンクやハードコアなんかが好きゃさかい、自分らもこんなん作れたらええんちゃうかなーおもて。

いくつかのテクニックをまとめてっさかい、今回はちょっと長いでぇ!まぁひとつひとつはそんなに難しいことあらへん!順番にやってこか!

スポンサーリンク

 

まずは紙のテクスチャを用意や

今回のんはA4のフライヤーみたいな雰囲気で作りたいさかい、
まずは新規書類をA4サイズで作ってくれるけ?(210×297mm)

f:id:omg-ox:20160904201955j:plain

ほな次はやな、紙のテクスチャやねんけど、今回はフリーの素材を使わしてもろたわ。シミがついてたり折り目がついてたりして汚れてる紙のテクスチャや。こんなんはネット上にフリー素材として公開されてることが多いから、ええのん見つけたらストックしといたらええんちゃうけ?(使用ライセンスは自己責任で頼むで!)

http://bashcorpo.deviantart.com/art/Grungy-paper-texture-v-6-37649221

f:id:omg-ox:20160904202139j:plain

ほんでこの紙のテクスチャの上にベージュの塗りを追加して、

f:id:omg-ox:20160904202740j:plain

描画モードを乗算、不透明度を50%にしてくれや!コレで土台のベースが完成したで!この上にレイヤーを重ねながら作っていくわなー。

 人物写真の段取りせえや!

今回使こたんはたまたま彫刻の写真や。バンドのポスターの体(テイ)やし、人物がええかなおもてんけど、エエ写真無かったし、彫刻を人間に見立ててみたけど、まぁ自分らは好きなんつこたらええわい!

元の写真はコレや

f:id:omg-ox:20160904203229j:plain

https://unsplash.com/search/Sculpture?photo=HtQRGemW_40

どや、最初こういう状態やねんけどな。だいぶと雰囲気変わるやろ?
まずは人物を切り抜いてくれるけー?もうこの辺は詳しく説明省かしてもらうさかいな!ええけ?切り抜いたらこんな感じになるわな。右下のおっさんは使わへんかったわ。

f:id:omg-ox:20160904201722j:plain

写真に質感を追加すんで!

テーマは「汚し」やからキレイなまんまの写真ではイマイチや。せやしあらかじめアナログっぽい質感を追加しとくねん!そやなーイメージはコピー機で何回かコピーしたみたいなザラザラ感やちゅうとこやな。

まずは、切り抜いた人を新規ファイル上に配置してモノクロ変換してくれるけ?

f:id:omg-ox:20160904214820j:plain

コントラストを上げんで!

f:id:omg-ox:20160904214957j:plain

ほなコントラストと明るさを上げてや。白と黒の色合いがパキッとするかんじ感じでええわ。今回の場合はこの数値やけど、元の画像にようって変わるさかい、あんじょうやってくれや!

アンシャープマスクでさらに明暗をつけるで!

f:id:omg-ox:20160904215146j:plain

f:id:omg-ox:20160904215248j:plain

[フィルター]→[シャープ]→[アンシャープマスク]とすすんで数値を画像のように設定してくれるかー。さっきよりもっと明暗がハッキリしたな!コレでええねん。

ノイズを追加してくれや!

f:id:omg-ox:20160904215357j:plain

f:id:omg-ox:20160904215511j:plain

[フィルター]→[ノイズ]→[ノイズを加える]→【ガウスの分布】にチェック入れてノイズの数値は5%や。あんまりやりすぎるとなんのこっちゃわからんので、控えめにしいや。あくまで「質感・雰囲気」やから、やりすぎはアカンでぇワレェ!

人物の処理はひとまずこれでしまいや!元になるファイルに配置して~。こんな感じになるな。あとは同じ容量で残りの3人も処理して配置せえや!

f:id:omg-ox:20160904215654j:plain

f:id:omg-ox:20160904215821j:plain

こんな感じや。それぞれレイヤー分かれとるさかい、
位地とか大きさの微調整はあとからでかめへん!とりあえず大体でええわ~。

各画像の処理やってくわ

単色刷り

そしたら見本のような感じに加工していくど。まずは【人物1】のレイヤーからや。
【単色刷り】みたいにしてこか。まずレイヤーをコピーしてくれるけぇ。

f:id:omg-ox:20160904215939j:plain

見本のように赤一色刷りを再現するにには、まず塗りの部分を赤に設定せんかいワレ!(わかりやすいようにR250にしとこか)

f:id:omg-ox:20160904220158j:plain

この状態で[フィルター]→[スケッチ]→[ハーフトーンパターン]と進む。

f:id:omg-ox:20160904220330j:plain

f:id:omg-ox:20160904220421j:plain

ほなこんな感じの画面が開くわな!この赤色はさっき指定したR250の色や。赤い害にも好きな色でやったらええんやで!ここでもちょっとコントラスト上げるとええかんじや。

f:id:omg-ox:20160904220548j:plain

ほな【人物1のコピー】レイヤーはこうなる。そんでから描画モードを【乗算】に変更してくれるけ~。

f:id:omg-ox:20160904220648j:plain

乗算に変更したらその下の元画像【人物1】レイヤーは非表示でかめへん。
どや、これで見本どおりになったやろが!これでしまいやんけ!

版ズレを再現

ほなつぎは右サイドの画像の加工や。これはさっきの加工と作り方一緒やけど、最後だけちょっとちがうねんな。同じようにコピー作ってハーフトーンパターンで緑にしてくれるけ?こんな感じやな。

f:id:omg-ox:20160904221020j:plain

ほんでからこの画像は下の元画像のレイヤーは残したまま、上で緑に変更したカラーハーフトーンのレイヤーをズラしたらしまいやがな!簡単やんけ(^ω^) 

f:id:omg-ox:20160904221251j:plain

できたけー?これで緑の版がズレたみたいな表現ができたな。同じように左下の写真は青にしたで。これあれやんけ、前やった【アナグリフ】作るやつと似とるやろ。手軽やし覚えときや~。

www.omg-ox.org

スポンサーリンク

 

汚し加工のクオリティは「ブラシ」で決まんで!

今回の特徴はスプレーを吹いたような加工と、タイトル部分のハケで書いたような黒い帯やな。これなブラシやねん。もちろんデフォルトではこんなブラシは用意されてないわな。これもありがたいことに、どこぞの男前がフリーで公開してくれてるんやな!ダウンロードさしてもろて使わせてもらお!(これも使用ライセンスは要確認、自己責任で頼んまっさ)

今回使わせしてもろたんはこの2つや。おおきにやでぇ!

blog.spoongraphics.co.uk

wegraphics.net

使い方はダウンロードしたファイルをPhotoshopで展開したら
すぐ使えるようになるわ。

f:id:omg-ox:20160904222847j:plain

ダブルクリクリやな(^ω^)

ブラシを使ってマスクをかける

ほな今ダウンロードした素材使こて真ん中のオッサンの加工やってこ!ブラシいうても塗るだけとちごて、マスクを編集するときにももちろん使えるんやで。

f:id:omg-ox:20160904223134j:plain

【人物2】レイヤーのレイヤーマスクを追加→スプレー状のブラシを使ってマスクをかけるとこうなる。

f:id:omg-ox:20160904223226j:plain

f:id:omg-ox:20160904223500j:plain

おっさんの方が消えてるところがスプレー状になっとるのわかるけ?こんな感じやな。マスクのかけ方はこれも前に説明しとるさかい、よかったら参考にしてやー

 

www.omg-ox.org

ロゴマークもスプレーで描いたような質感にできんにゃで!

次は右下の部分や。スプレーで描いたみたいなロゴマークや。これもブラシを使って作ることができるで!まずは黒いスプレーを適当なトコにしゅしゅーーしてや。

f:id:omg-ox:20160904223708j:plain

f:id:omg-ox:20160904223816j:plain

ほなその上にロゴマークを配置や。まだキレイな状態のままやろ?

f:id:omg-ox:20160904223917j:plain

f:id:omg-ox:20160904224003j:plain

ロゴを選択した状態で[選択範囲の変更]→[境界をぼかす]半径10pixel

f:id:omg-ox:20160904224120j:plain

その選択範囲を保持したまま(解除せず)ロゴのコピーを作成してくれるけ?

f:id:omg-ox:20160904224241j:plain

今コピーしたレイヤーを白いスプレーのブラシでクリクリするとこんな感じなるで!ステンシルで作ったみたいになったわな!次はもう少しラフさを追加する為に選択範囲を解除してスプレーの飛沫を追加してみいや!

f:id:omg-ox:20160904224500j:plain

最終こんな感じやな。あんまりやりすぎるのだけは注意やで!この辺は自分のセンスでなんとかせんかいワレェ!!

 

www.omg-ox.org

 

タイトル部分つくってこか!

今回は上にもおっちゃんとこのロゴマークを入れてみたで!ほんでさっきやったスプレー状のブラシでマスクをかけて、汚しを入れたんや!

f:id:omg-ox:20160904224851j:plain

f:id:omg-ox:20160904224904j:plain

でや、つぎはこの上からハケでブワーかいたみたいなブラシを重ねていくで。
ほんで上にタイトルを重ねる

f:id:omg-ox:20160904225016j:plain

f:id:omg-ox:20160904225054j:plain

レイヤーを意識して微調整せえや!

見てもうたらわかるけど、赤い人の上に思いっきり文字のっとるわなぁ。これはアカンね。レイヤーの重なりを意識しながら微調整していくで!こういう細かいところが大事やしなホンマ。この場合は“[Lesson]と[ロゴ_大]のレイヤーにマスクかけて処理しよ。

f:id:omg-ox:20160904225425j:plain

f:id:omg-ox:20160904225457j:plain

こんな感じかな?顔が見えとったほうがええやんけ!レイヤーマスク便利やし覚えといてなーーー!!て何回言わすねん!たのむでほんま!

同じ要領で下のほうは赤いブラシでブワーー!いこけ!こんな感じや!もう説明せんでも大丈夫やろ??

f:id:omg-ox:20160904225758j:plain

実際の紙に見立ててレイヤー構造を設計する

コレがほんま大事やねんな。デジタル上の処理言うたかて「アナログ風」に処理するわけやから、実際の紙にどういう工程を踏んで印刷されとるかちゅうのんを考えるとよりリアル感が増すんやで。ほんでおっちゃんが最終的にレイヤーの前後関係と各要素の大きさ、位置を調整したんがこれや。

f:id:omg-ox:20160904230127j:plain

どやろか。今回は説明しやすいように多少大げさに加工してるけどな。だいたいこんな感じで雰囲気つかめたんちゃうやろか?

最後の仕上げわすれとったァ!

上のレイヤー構造見てもらうと文字レイヤーが一番上に来とるわなぁ?これどういうことか分かるけ?文字には何の汚しの加工もかかってへんちゅことやんけコラ!!

ほなどないすんねんちゅたら、紙テクスチャを一番上にコピーしてきて

f:id:omg-ox:20160904230659j:plain

f:id:omg-ox:20160904230710j:plain

乗算で重ねたらしまいやぁーーー!
ザッツオーールちゅてな!!ちがうか。

f:id:omg-ox:20160904230755j:plain

これで文字の上にもかすれたような質感が出たやんけ!細かいことやけど、こういうのんが大事やねん!分かるけ?!!

まとめや

  • 実際の紙の印刷をイメージしながら作らんかい
  • 細部のクオリティにこだわって作りや
  • 加工はやりすぎ厳禁や!

この加工のポイントは「いかにリアリティを出せるか」ちゅうことに尽きるわ。実際のスプレーや、ハケでペンキ塗ったりしたらどうなるんかな?ちゅてイメージしながら作っていくと上手いこと行くおもうで。今日のやつは細かいテクニックをいくつか紹介したさかいちょっと長めやったかな。 こういうアナログっぽいもんも簡単に作れるんや。おもろいやろ(^ω^)

 あと「これからPhotoshopはじめたいやけどおっさん!」ちゅう人はこの記事参考にしてみてくれるけ?ソフトの導入から独学のポイントなんかまとめたから読んでくれたらええんちゃうかな。

www.omg-ox.org

よっしゃ!これでしまいや。大体やり方分かったけ?
けっこうおもろいから色々作ってみてや(^ω^)
ほなさいなら!!