
別れ、そして出会い。LIGメディア事業部はデザイナーを募集します
こんにちは。デザイナーの佐藤タカアキです。
2年前、僕はこんな記事を見つけました。 別れ、そして出会い。LIGメディア事業部はデザイナーを募集します
LIGでデザイナーとして働いていた王さんがエンジニアに転向することになったため、新しいデザイナーを募集するという記事でした。僕はこの記事を見て採用面接を受け、今こうしてLIGのデザイナーとして働いています。
この記事の中の画像加工とデザインをしたのが、王さんご本人。
王さんのデザインはどれもテクニカルで独創的です。この記事を見つけた当時、いろんな意味で「すごいな」と圧倒されたことを今でも覚えています。
今回は、王さんが実際に作ったこの記事のアイキャッチの作り方を紐解いてみようと思います。
▼目次
今回のミッションは、さきほどご紹介した記事のアイキャッチ画像だったこちらです。
2年前に王さんがデザインしたこちらのアイキャッチ画像を、僕なりに再現してみたいと思います。
今回は背景と人物を別々に加工する必要があるので、人物用と背景用それぞれの写真を撮影しました。背景用に撮影するときは、実際にイメージする構図よりも広めの画角で撮影しておくことがポイントです。加工する段階において、「背景が足りない……!」ということを避けるためです。
2年前と同じ場所で、同じモデルの紳さん(左)とそめひこさん(右)で撮影しました。
撮影した写真は50枚を越えました。この中から一番よいものを選ぶ必要があります。写真の選定はどんな方法でも構いませんが、僕が使っているのはLightroomです。Lightroomは一覧性が高く、写真の良し悪しをスコアリングすることができるため、膨大な量の写真を選別するときに便利です。
まずは、写真をLightroomに取り込みます。
スコアリングの方法はいくつかありますが、僕は右上に表示される星マークの『レーティング』という機能を使っています。
使えそうな写真に1(★☆☆☆☆)をスコアリングしていきます。該当写真を選択した状態で、キーボードで数字を打ち込むだけでスコアリングできます。マウスを使う必要がなく簡単なのでストレスがありません。
1のスコアリングした写真だけで絞り込みました。さらに、この中でよりよいものに2(★★☆☆☆)をスコアリングし、最終的に背景用と人物用の写真を1枚ずつ選びました。
この2枚が、今回使用する写真となります。
写真が決まったらデータを書き出します。
左下の『書き出し』ボタンを押したら、フォルダを選んで実行するだけです。簡単ですね。
これでLightroomでの作業は終了です。続いて、Photoshopでの写真加工に移ります。
ここからはPhotoshopを使った写真加工の方法をご紹介します。
書き出した背景画像をPhotoshopで読み込み、実際に使いたい構図に写真を配置します。
続いて、人物を切り抜きました。切り抜いた2人には別々の加工を加えるため、それぞれ別のレイヤーに分けておきましょう。
切り抜いた2人の画像を、背景画像の上に配置します。遠近感を考えながらサイズを調整します。
続いて、背景と2つの人物のレイヤーそれぞれにブラックホールに吸い込まれていくような加工をしていきましょう。
まずは背景から加工します。今回背景レイヤーに加える加工は “うずまき変形” と “ぼかし” です。
『フィルター』→『変形』→『うずまき』を選択します。うずの中心点を決めたら、好みの角度までうずまき加工を加えます。背景はそれほど渦をまく必要がないので、ほんの少しでOKです。
『フィルター』→『ぼかし』→『ガウス』を選びます。ブラックホールに吸い込まれていく遠近感を強く出すために、背景が遠くにある印象が強まるようぼかしを強めに加えます。
これで背景は完成です。
続いて、2人の人物にも吸い込まれていくような加工をしていきます。
該当レイヤーを選択したら、『編集』→『パペットワープ』を選択します。
画像上にメッシュ状の編集点が出現するので、変形させたい場所をクリックして、好きな形に変えていきましょう。
パペットワープの詳しい使い方については、こちらの記事がおすすめです。 Photoshopのパペットワープで自由自在に写真加工する方法
背景レイヤーと同様に、『フィルター』→『ぼかし』→『ガウス』を選択します。遠近感を出すために、背景>奥の人物>手前の人物の順でぼかしの量を減らしていきましょう。
続いて、青の光線やガレキなどのエフェクトを作成していきます。
一番上の階層に新規レイヤーを作ったら、うずまきを意識したパスを描き、色を載せます。
これまでと同様に『フォルター』→『ぼかし』→『ガウス』を使って、青い部分をぼかします。
『描画モード』→『覆い焼き(リニア)−加算』を選択します。
ただの水色だった線が、光ったような色に変わりました。僕は手書きで作成しましたが、無料の素材集などを使うのもよいと思います。
続いて、ガレキやブラックホールなどを作成します。
背景と人物の間の階層に新しいレイヤーを作成し、ガレキを作成します。僕は手書きで作成しましたが、無料素材などを探してくるのもいいでしょう。
『フィルター』→『ぼかし(放射状)』を選択します。
単純なぼかしでなく『ぼかし(放射状)』を選ぶことによって、ガレキが中央に吸い込まれていくような動きのあるデザインにすることができます。
続いて、中心の奥にブラックホールを設置します。こちらも手書きでもよし、素材集から引っ張ってくるのもよし、自分がやりやすい方法で作成してください。
画像の四隅部分のみ少しぼかしておきましょう。中心のブラックホールに向かって吸い込まれていく印象が強くなります。
最後に、全体の色味を調整して作りたい世界観のイメージに近づけましょう。
今回のミッションの作品が完成しました。
2年前の王さんの作品と比べてどうでしょうか?
※(1)2年前の王さんの作品/(2)今回僕が作成した作品
ここでは書き切れなかった細かい内容について知りたい方は、ぜひ下記のPSDデータをご覧ください。ご自由にダウンロードいただけます。
これにてミッションは完了です。
今回のミッションで実際に使用したツールもご紹介させていただきます。
今回は、写真選定にLightroom CCを、写真加工にPhotoshop CCを使用しました。普段からAdobeのツールを利用していますが、僕は『Adobe CC』を使ってクラウド上でアップデートやデータ管理をしています。
デザイナーの誰もが利用するAdobe製品ですが、これまではPhotoshopやIllustratorなどを独立して買い揃えてきた方が多いと思います。しかし、月額制のCC版なら、クラウド上で常に最新状態にアップデードすることができます。また、デバイスを越えて制作物を連携させることができるようになり、制作の幅が広がりました。
AdobeCCの詳しい機能は、この記事をご覧ください。 PhotoshopやIllustratorだけじゃない!Adobe CCの主要機能まとめ
Adobe CCの利用方法は、単体プラン、PhotoshopとLightroomのみが使えるフォトグラフィプラン、すべて使えるコンプリートプランなど選択肢がさまざまあります。
大塚商会で申し込む場合、単体プランは月額3,200円(税抜)ですが、コンプリート版なら7,500円(税抜)。3つ以上のソフトを利用する場合はコンプリートプランが安くなります。デザイナーであればPhotoshop、Illustrator、Lightroomの3つはぜひ持っておきたいツールなので、コンプリートプランがお得ですね。
大塚商会なら2016年3月23日(水)まで限定で法人向けにお得なキャンペーンを実施中です。CS6を利用中の一般企業であれば、コンプリートプランが通常価格から40%OFF! たったの月額4,500円(税抜)で利用できるので、とてもおすすめです。
■ 官公庁向け:CS6所有ユーザ限定
※どちらも2016年3月23日(水)まで限定です
※キャンペーンには変更・延長の可能性もございます。詳しくはWebサイトよりご確認ください
キャンペーンの締め切りも近づいています。ぜひこの機会に検討してみてはいかがでしょうか。
今回の先輩の作品を再現するというミッションは、僕にはなかったデザインのアイディアや技術を学ぶことができたよい経験となりました。
みなさんも「これ、どうやって再現するの?」といった作品がありましたらぜひご連絡ください。僕なりの作り方をチュートリアルでご紹介したいと思います。
それでは、また。