• WEB

Photoshopでアートなコラージュデザインを制作しよう!日本語チュートリアルで丁寧に解説!

  • ジョルノ
    ジョルノ デザインちーむ
  • このエントリーをはてなブックマークに追加

こんにちは。デザインチームのジョルノです。

今回は、お気に入りの『PHOTOGRAPHIC ARTWORKS』という本を参考に、上に表示したようなコラージュデザインの制作をチュートリアル形式でご紹介したいと思います 。この本自体もそうなのですが、Photoshop(一部Illstrater)の基本的な操作は出来る方向けの内容となります。でも安心してください!必要な基本操作に関しては解説記事へのリンクを紹介しますので、初心者の方でも大丈夫です。(たぶん)

コラージュデザインについて

コラージュとは、写真や画像などの素材を自由に組み合わせて多数配置するデザインです。物事の複数の側面をひとつのビジュアルに集約する高度な表現手法です。個人的にとても好きなデザイン手法で、今後も磨いていきたいデザインのひとつです。

メリットは

パッと見で各素材のメッセージをまとめて伝えられる事、異質な素材の組み合わせによって作り出されるカオス的なインパクトです。

コラージュデザインで重要なのは

素材写真の選定とレイアウト、そして表現のコンセプトになります。

素材について

素材となる画像は自分で撮影するのが理想的ですが、スキルやコストの問題もありますし、プロの撮影した素材を使わせてもらう事でよりクオリティの高いデザインになりますので、写真素材サイトからセレクトします。その際はしっかりとライセンスを確認して、作者をリスペクトしつつ合法的に使用させてもらいましょう。今回の素材は次項にクレジット&リンクを記載します。

では制作スタートします。

素材写真の選定と切抜き

まずは素材写真の選定。『PHOTOGRAPHIC ARTWORKS』には全ての素材元が記載されていますが、今回は独自に選定した別の素材を使用します。今回使用させていただく素材写真は以下になります。もちろんお好みで素材を変えて制作してみるのもいいと思います。

素材写真一覧

material

◇女の子:Izabela Pawlicka

◇地球:Ultimate Roadgeek

◇芝生:KJIYU

◇盆栽1:Ragesoss

◇盆栽2:Erkkimon

◇盆栽3:Ragesoss

◇パラソル:てりまかし

◇オウム:Flickr upload bot

◇地図:Ratzer

◇コンパス:cicadashell

◇シャベルとバケツ:The Nick Page

◇双眼鏡:Batholith

◇キリン:Calips

◇青空:acworks

◇星空:acworks

◇風船:C_osett

以上で使用する素材写真は全てになります。写真の著作権についてよくわからないという方はこちらのサイトをご参照ください。

次に遊び場となる地球、主人公の女の子をはじめ、全ての素材写真を切抜きます。切抜きはPhotoshopの基礎となる技術ですが、ケースに応じて様々な手法もあり、奥が深いです。
まだ切抜きがうまく出来ないという方は弊社レタッチちーむ たたみさんのこちらの記事を参考にしてみてください。全ての素材の切抜きが完了したとして次に進みます。

惑星をつくる

切り抜いた地球を配置します
image_01
芝生の写真から投げ縄ツールで大陸となる部分を切り出します。かたちは任意でかまいません。
image_02
芝生を地球の上に配置します。
image_03
コピー&ペーストで芝生を増やして大陸をかたちづくっていきます。
image_04
はみ出した芝生を消す為に「Ctrl」キーを押しながら、「地球レイヤー」をクリックすると、選択範囲が指定できます。
image_05
その状態で「芝生レイヤー」を選択して、「マスクを追加」すれば、はみ出した芝生を隠す事ができます。
image_06
次に「コピースタンプ」を使って、芝生をコピーしながら自然な形に整えます。
「ウィンドウ」メニューから「ブラシプリセット」でパネルをひらき、「草」のブラシを選択してください。
image_07
「角度」や「間隔」の数値を調整しながら、芝生の側面に配置していってください。
左側にスタンプする場合は「角度」を90°右側なら-90°下側の場合は180°に設定してつかいます。
image_08
側面全てにスタンプし終わると、なかなか自然な感じになってきます。
image_09

パーツを配置する

「ファイル」→「配置」で惑星に木を植えていきます。盆栽の写真を使用する事で、リアルな木よりもアーティスティックな雰囲気になります。
image_10
「ブラシツール」のソフト円ブラシで木に影を描いていきます。不透明度20%くらいにして重ね描きをするといい感じになります。
image_11
同様の手順で他の素材も配置していきます。
image_12
全ての画像にしっかり影をつけてあげる事を忘れずに。一通り配置すると段々と雰囲気がでてきました。
image_13

惑星に穴をあけてキリンをのぞかせる

Illustratorの楕円形ツールを使用して惑星サイズの正円と、穴のサイズの楕円形を描きます。
image_14

 

 

2つの円を選択して「パスファインダ」パネルから「前面オブジェクトで型抜き」を適用します。
image_15

 

へこみのある円ができたところを「ダイレクト選択ツール」で円の左半分を削除します。
image_16

 

「アンカーポイントの追加」ツールでアンカーポイントを追加して、形を整え、穴の縁に盛り上がりの演出を加えます。
image_17

 

塗りを青、線をなしに変更して、「効果」→「3D」→「回転体」を選択。位置の数値を[-11°、0°、90°]と入力して、詳細オプションも入力、光源を2箇所に設定ます。
image_18

 

OKをクリックすると穴のあいた球体ができました。
image_19

 

IllustratorからPhotoshopに戻って、地球以外のオブジェクトを一旦非表示にします。
image_20
先ほどIllustratorで作成した球体を「スマートオブジェクト」で地球の上に重ねます。
image_21
「フィルター」メニューから「ゆがみ」ツールを使って、地球の形を球体に合わせます。
image_22
「Ctrl」キーを押しながら、「球体レイヤー」をクリックすると、選択範囲が指定できます。
image_23

地球レイヤーを選択してマスクをかける事で選択範囲からはみ出ている部分を非表示にします。
image_24

重ねた球体レイヤーの描画モードを「ソフトライト」に変更します。ブラシを使って、黒で穴のまわりにシャドウを描きます。
image_25

シャドウと同様にブラシを使って、白でハイライトを描きます。キリンを配置して、穴のカタチに合わせてマスクをかけます。穴から出ている首元に陰影をつけてなじませます。
image_26

非表示にしていたオブジェクトを表示させると、かなり出来上がってきました。
image_27

子供が覗く小さな穴をつくる

続いて、子供が覗く小さな穴をIllustratorを使って描きます。先程の球体と同じ手順で半円まで描いたら、半円の上部に「長方形」ツールで四角形を 描きます。
image_28

 

この四角形が穴の直径になります。半円と四角形を選択して「パスファインダ」パネルから「前面のオブジェクトで型抜き」を適用します。
image_29

塗りを黒にして、先程と同様に「アンカーポイントの追加」ツールでアンカーポイントを追加して、形を整え、縁に盛り上がりの演出を加えたら、「効果」→「3D」→「回転体」を選択します。
image_30

先程とは設定を変え、位置の数値を[-46°、-11°、-13°]と入力して、詳細オプションも入力、光源を穴が目立つ位置に設定ます。数値はプレビューを見ながらお好みの位置に調整してください。
image_31

コピー&ペーストでPhotoshopにもっていって、地球に重ねます。穴の周辺だけ残して余分な部分を選択ルールや、消しゴムツールなどでぼかしながら消してなじませます。
image_32

背景をつくる

次は背景です。空の素材写真はこちら
image_33

好みの位置でトリミングして、ブルーを鮮やかに色調補正します。色調補正がわからない方は弊社レタッチちーむ ノリさんのこちらの記事を参考にしてみてください。
image_34

上半分に星空の写真を重ねます。
image_35

星空の写真にマスクをかけて、グラデーションツールで境界をなじませます。描画モードは「スクリーン」に設定。
image_36

コラージュした地球を配置させるとこんな感じ。
image_37

風船をレイアウトする

素材写真から風船を切抜いたものを用意します。
image_38

コピー&ペーストで風船が溢れ出ているように配置していきます。
image_39

サイズを変えたり、角度を変えたりしながら、同じ素材のコピペだとわかりずらいようなレイアウトを心がけてみましょう。
image_40

色調を整える

仕上げの調整です。ヴィンテージ感がでるように、イエローのグラデーションを重ねてみたり。
image_41

「色調補正」→「HDRトーン」で下記のような数値を設定しました。このあたりのカラー調整はお好みで。※「HDRトーン」を使用するとレイヤーが全て結合されてしまうので、編集用に元のレイヤーを残したファイルも別名保存しておきましょう。
image_42

最後に「フィルタ」メニューから「シャープ」→「スマートシャープ」を使ってお好みで数値を調整してパキっと綺麗に整えましょう。
image_43

以上で完成です!不思議でピースな世界観。好みです。
smal-earth

おわりに

コラージュデザインのチュートリアルを探しても、いいなと思うデザインは英語表記のチュートリアルばかりだったので、今回ブログに書かせてもらいました。制作にトライしてくれた方、納得いく仕上がりになりましたでしょうか?さらに詳しく知りたい方は、今回参考にさせていただいた『PHOTOGRAPHIC ARTWORKS』をご覧ください。とてもセンスいいデザインが満載です。(ステマじゃないよリスペクト)私自身、すごくいい練習になりました。

Thanks for your time☻

※こちらの記事は参考書籍出版元の翔泳社様に掲載のご許可を頂いております。

このエントリーをはてなブックマークに追加

ジョルノが最近書いた記事

WRITERS POSTS もっと見る

他にもこんな記事が読まれています!

  • WEB
  • マーケティング
  • サーバー・ネットワーク
  • ライフスタイル
  • お知らせ