撮影した紙素材を組み合わせて風合いのあるデザインを表現 | デザインってオモシロイ -MdN Design Interactive-

撮影した紙素材を組み合わせて風合いのあるデザインを表現

2024.4.23 TUE

【サイトリニューアル!】新サイトはこちらMdNについて

ちょっとした素材制作や撮影ならデザイナー自身でやれる!
DIYで実現する理想のデザイン

撮影した紙素材を組み合わせて風合いのあるデザインを表現
このデザインのおもな制作工程

 

しわをつけた紙の画像の前面に写真やテキストを重ねていくことで、ビジュアルを作成。
…………………………………………………………………………………………………………………………………
それぞれのレイヤーの[描画モード]を変更することで全体をなじませ、自然な仕上がりにしている。
…………………………………………………………………………………………………………………………………

step1紙の輪郭線に沿って画像を切り抜く

最初に下準備をしていく。まず、しわをつけた紙を撮影し、Photoshopで画像を開く 1-1 。続いて、ペンツールを選択し紙の輪郭線に沿ってパスを作成 1-2 。次にパスパネルメニュー→“選択範囲を作成...”を実行したあと、コピーする。さらにdeleteキーを押して紙の部分を削除し、影の部分を残す 1-3

1-1
P030-031-1-1

1-2
P030-031-1-2

1-3
P030-031-1-3

step2紙の画像と影の画像を別々に配置する

次にグラフィックのベースを作成していく。木目の画像を用意し、Photoshopで開く 2-1 。この木目の画像の前面に、先ほどコピーしておいた紙の画像をペースト 2-2 。続いて、STEP1で切り抜いておいた紙の影の部分を作業ファイルにコピー&ペーストする 2-3 。この影のレイヤーをレイヤーパネルで[描画モード:乗算]に変更 2-4 。こうして本物の影を重ねることでリアリティを出す。

2-1
P030-031-2-1

2-2
P030-031-2-2

2-3
P030-031-2-3

2-4
P030-031-2-4

step3タグの画像を配置したあとロゴを追加

続いてタグの画像を用意 3-1 。次に紙のときと同様にしてタグとタグの影を別々にコピー&ペーストで作業ファイル上に配置したあと、影のレイヤーのみレイヤーパネルで[描画モード:乗算]に変更した 3-2 。このタグの画像の前面にIllustratorなどで作成したロゴを配置し、レイヤーパネルで[描画モード:焼き込みカラー]とする 3-3

3-1
P030-031-3-1

3-2
P030-031-3-2

3-3
P030-031-3-3

step4写真の描画モードを変えて紙となじませる

さらに写真を貼り込んでいく。紙の画像の前面に人物写真の画像を配置 4-1 。この写真のレイヤーをレイヤーパネルで[描画モード:焼き込みカラー]に変更した 4-2 。これで紙に写真がなじみ自然な仕上がりとなる。

4-1
P030-031-4-1

4-2
P030-031-4-2

step5文字要素や写真画像などを加えていく

次にIllustratorなどでテキストやロゴを作成する。これらをPhotoshop の作業ファイルに配置し、[描画モード:焼き込みカラー]に変更 5-1 。さらにTシャツなどの画像を作業ファイルにコピー&ペーストし、これらも[描画モード:乗算]や[描画モード:焼き込み(リニア)]に変更して、紙となじませる 5-2

5-1
P030-031-5-1

5-2
P030-031-5-2

step6フセンの画像を配置してアクセントをつける

続いてフセンの画像を用意してPhotoshopで開く 6-1 。次にペンツールでフセンの輪郭線のパスを作成。このパスから選択範囲を作成したあとコピーする。さらにdeleteキーを押してフセンの部分を削除し、影の部分を残す。ここでコピーしたフセンを作業ファイルにペースト 6-2 。続いて影の部分を作業ファイルにコピー&ペーストする 6-3 。この影のレイヤーを[描画モード:乗算]に変更したあと文字を加えた 6-4 。ほかのフセンも同様の手順で加えて文字要素などを足す。

6-1
P030-031-6-1

6-2
P030-031-6-2

6-3
P030-031-6-3

6-4
P030-031-6-4

step7紙の質感を加えて古ぼけた印象を出す

さらに古ぼけた質感を加えていく。まず、 7-1 のような黒い紙の画像を用意。これを作業ファイルの前面にコピー&ペーストで配置する。このレイヤーをレイヤーパネルで[描画モード:覆い焼きカラー]に変更 7-2 。質感が加わったら、ここですべてのレイヤーを統合する。続いて背景レイヤーのレイヤーサムネールをダブルクリックして通常レイヤーにしたあと、ぼかしツールで画像の上下をぼかす 7-3

7-1
P030-031-7-1

7-2
P030-031-7-2

7-3
P030-031-7-3a

矢印


P030-031-7-3b

CHECK!
破れやかすれで紙の質感を強調する
…………………………………………………………………………………

ここで使用する黒い紙は、質感を出すためにわざと破れたところやかすれ、汚れなどをつくっておくといい。また、紙の色にムラがあるほうがより質感を強調できる。

コラム

DIYで実現!
破れたノートでつくる風合いにあるデザイン

完成イメージ

これで、ノートやタグを配置したアナログテイストのデザインが完成だ。このデザインは、ノートの切れ端やタグ、フセンなど身の回りにある小物の画像を活用してつくっている。紙の質感などを生かすことで、このようなデザインを作成することが可能だ。



>>>「DIYで実現する理想のデザイン」トップへ

本記事は『MdN』2010年6月号(vol.194)からの転載です。
『MdN』2010年6月号(vol.194)表紙

楽天ブックスで買う

そのほかには下記のような記事が掲載されています。
(▼クリックすると画像が大きく表示されます)

『MdN』2010年6月号(vol.194)p.026-027『MdN』2010年6月号(vol.194)p036-037

特集のすべての記事は誌面でお読みになれます。
月刊『MdN』掲載記事号の情報はこちら!

■そのほかの月刊『MdN』からの転載記事
Photoshopで出来る表現、その全貌!(『MdN』2010年5月号より)
理想のガールズ・イラストを描く方法(『MdN』2010年4月号より)
ここでしか読めない“プロ領域”のグラフィックの技!(『MdN』2010年3月号より)


twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在