フォトコラージュについて
WEBサイトのキービジュアルでもっともよく使用されているのがフォトコラージュです。
フォトコラージュとは、フォトモンタージュの別称で複数の写真・絵・文字などを合成して作られる作品を指します。
その中でも特に、Photoshopなどのソフトを使用して、完全デジタルで作成したものをデジタルフォトコラージュと呼ぶ場合もあります。
ホームページでよく見られるフォトコラージュは「商品＋背景＋文字」「人物＋背景＋文字」です。
素材を用意する
まずはフォトコラージュに使用する画像素材を用意します。
ここでは、「鈴木智子のホームページのアクセスアップ講座」で使用すると仮定してコンピューターと人物の画像を用意しました。
フォトコラージュと著作権
フォトコラージュを作成するにあたって注意しなければならないのが、著作権問題です。
知的財産権の一つである著作権の対象は、絵画をはじめ、音楽、建築、映画、写真、ゲームなど多岐にわたります。ほぼすべての制作物には著作権があるといって間違いありません。
商用サイトはもちろん、たとえ個人の趣味のサイトであっても、他者の著作物を無断で使用するのは違法行為ですので止めましょう。
著作権についての詳細は、下記のWEBサイトを参考にしてください。
社団法人 著作権情報センター
フォトコラージュの素材として使っても問題ないのは、下記の画像です。
フリー素材のなかでも、加工してはいけないとか、使用にあたっては報告を求めるなど、規約が決められているものもあります。ルールは守りましょう。
| 画像の種類 | 備考 |
|---|---|
| 自分で撮影したもの | 街中の写真などで人物が写っているものは、場合によっては肖像権に抵触する場合があります。 |
| フリー写真素材集 フリー素材サイトで入手したもの |
素材集・素材サイトによっては、使用に当たっての規約があります。 加工や他の著作者の著作物との合成禁止、使用した場合はサイトのどこかで素材サイトへのリンクをしなければならない（リンクウェア）などが代表的です。規約がある場合は、それに従って使用しましょう。 |
例題に使用した画像も市販のフリー素材集から得たものです。
素材提供サイトはWEB上にもたくさんありますので、探してみるのも面白いでしょう。
フォトコラージュを作成する
では、実際にコラージュしてみましょう。
まずPhotoshopを起動して、上記2枚の画像を開きます。
ここではベースに「鈴木智子のホームページのアクセスアップ講座」のワイヤーフレームを使用しますので、ワイヤーフレームのpsdデータも開きます。
[ファイル]→[開く]をクリックして、画像やpsdデータを開きます。
[ウィンドウ]で画像を表示させ、[選択範囲]→[すべてを選択]をクリックします。
[ウィンドウ]でワイヤーフレームを表示させ、キービジュアルのレイヤーに[編集]→[ペースト]で貼り付けます。
[ウィンドウ]で人物の画像を表示させ、[選択範囲]→[すべてを選択]をクリックします。
[ウィンドウ]でワイヤーフレームを表示させ、キービジュアルのレイヤーに[編集]→[ペースト]で貼り付けます。
2つの画像をコラージュするよう拡大・縮小をして配置します。
キービジュアルに丸みを持たせる為に「角丸長方形ツール」でキービジュアルの領域を描きます。
「角丸長方形ツール」を選択します。
キービジュアルの領域を描きます。
角丸長方形ツールで作成したレイヤーを2つの画像の下に移動します。
パソコンと人物の画像レイヤーを選択します。右クリックで[クリッピングマスクを作成]をクリックします。
クリッピングされた状態で配置を整えます。
[消しゴムツール]を選択し、ソフト円（300px）ブラシを設定します。
やり直しができるように、人物レイヤーをコピーしておくと便利です。
パソコンと人物の画像の境界線をぼかします。
テキストのレイヤーを右クリックして[レイヤー効果]をクリックします。
グラデーションの設定を行います。
[グラデーションオーバーレイ]を選択します。今回は開始点を#0099cc、終了点を#3399ffと設定しました。
境界線の設定を行います。
境界線を選択します。今回は2pxの外側の線として#ffffffを設定しました。
ドロップシャドウの設定を行います。
[ドロップシャドウ]を選択します。今回は#000000で2pxのシャドウを設定しました。
最後にフォントや大きさ、位置を調整します。
画像の全体的な明るさやトーン、色味を共通要素に揃えているので不自然さはありません。
原寸大の画像をこちらに上げています。ご覧ください。
現在のpsdデータをこちらに上げていますので、解凍してご覧ください。
コラージュ写真を使うと、企業のホームページという印象が強くなって、私が目指している「鈴木智子のホームページのアクセスアップ講座」の雰囲気とは違う気がします。
キービジュアルをイラストにするか、コラージュにするか、そのホームページの目的・イメージによって慎重に選択しなければなりませんね。
ここで作成したフォトコラージュは一番単純なものですが、コラージュの基本でもあります。
コラージュ作品と呼ばれる絵画的なものをはじめ、企業ページのキービジュアルやショッピングサイトの小さなバナー広告などにもフォトコラージュは使用されています。
優れたフォトコラージュをたくさん見て、良いところを取り入れましょう。
以上で「フォトコラージュについて」の解説は終了です。
