はじけ飛ぶ快感！先生、最近気になるグラフィックトレンド「Splatter Effect」ってなんなんですかネ？
ぷしゃぁ。猫、はじけ飛ぶ。
インクを撃ちあう任天堂のアクションシューティングゲームの名作「スプラトゥーン」が日本で発売されてからちょうど1年ほど経つ。ぼくは結局やってないのだけれど、山手線でCMが放映されているのを見たことがあって、面白そうだなと思った。ゲームのアイデアとして面白い。そしてデザインのトレンド的にもインクや水滴が弾けるような「Splatter」なデザインが最近気になっている。
ところでぼくはホラー映画が好きだ。ホラー映画には「スプラッターホラー」という血のやたら飛び散るジャンルがある。ぼくはその中でも「テキサスチェーンソー」という映画が好きで、レザーフェイスというモンスターがチェーンソーではらわたをえぐるシーンは目を見張ってしまう(女の子に楽しそうにこの話をすると文字通りドン引きされるのだが、何はともあれ一度見て欲しい笑)。赤くはないけれど、そんなインクが飛び散っているエフェクトが「Splatter Effect」だ。
今回は、そんな「Splatter Effect」の魅力を紹介していきながら、じゃあ実際に作ってみようってところまで紹介していこうと思う。
Splatter Effectってのは何でしょう？
Splatterを英和辞典で調べると「バシャバシャ跳ね飛ばす」という意味が出てくる。すなわちSplatter Effectとは文字通り「水滴」で跳ね飛ばすような効果だ。
対象物の境界線を曖昧にするというのは、グラフィックの常套手段だといえる。ただ、これまで最もよく使われてきたのはBlur(ぼかし)効果だ。Blur(ぼかし)は焦点の合っていないカメラやメガネなどを想起させる。対象物だけでなく画面全体をぼかすこともある。一方、Splatterは水滴やインクのような液体を想起させるので、実体のあるもの(例えば猫のような生き物や人間の身体の一部)にSplatter Effectを加えると、非現実的で新鮮な気持ちにさせる。そういう意味でグラフィックにおけるSplatterは、使い方によってはシュルレアリズムを感じる。
こうしたエフェクトは一部の優れたデザイナーにしか描けないと思ってしまうけれど、PhotoshopやIllustratorのおかげで少しのステップでとっても簡単に作れるようになった。
なにはともあれ、まずはケーススタディ！
Splatterがどんな表現かは、見てもらったほうが早い。まずはBehanceから世界のクリエイターの作品をいくつか紹介していこう。
Dragomir Sokolov in Bulgaria
オレンジやピンクのビビッドさが映えて綺麗だ。どこまで伸びているのか想像力が膨らみやすい「髪」の部分をスプラッターで表現しているのがうまい。
Afmed Mostafa in Egypt
みごとに飛び散ってますね。昇天しています。
身体の輪郭を水しぶきエフェクトでぼやかしていてこれまたクール。
Gus Neri in L.A.
キッスをする男女。あえてちょっと暗めの色で飛沫をあげているのが味を出している。
Alex Lucas in Ohio
ブルーの飛沫はやっぱり水を想像させる。夏の爽やかな感じがする。
Mark Reihill in UK
この作品を見ると、なんだか前回紹介したDuotoneとも合いそうな気がする。
Smithwick's Experience Kilkenny
Gerardo Guilmo in Costa Lica
この作品の面白いところは、全部がイラストレーションではなく、水しぶきのなかに写真を当て込んでいるところだ。スプラッターの可能性を感じる一枚。
Miguel Oliveira in Portugal
特に写真とか用意しなくてもこれくらいならPhotoshop駆使すればできるんじゃないかって思えるいい例。
Chris Lord in Canada
なんか、エロティックと、モダンと、ポップが混ざった、不思議な感じがするね。こんなこともできるんだ、と関心した。
Austin Holmes in Colorado
立体的にしたスプラッター。
Yvonne Strahovsk dispersion effect
Holman Mesa in Colombia
これは相当な想像力を掻き立てる。ってかこんなデザイン考えつくのすごい。
Hannah Lispcomb in Virginia
使い方によっては、恐怖を煽る。怖い。
Rian Dix in Philadelphia
なにこれ。猫かわいい。
Splatterって作れるの？簡単なの？
そういうわけでなんかSplatterすごいじゃん、ってなるけれど、これを見てぼくも最初は「なにこれ。難しいの？」って思ってしまった。しかしながら、これをプロデザイナーの既得権益にしておくのも嫌だったので、実際に作ってみた。作ってみると、理屈としては至ってシンプルで、慣れれば10分くらいで簡単に作れてしまう。必要なのは、Photoshopと、ちょっとの好奇心だ。ぼくは「非デザイナーでもデザインできるに越したことない」と思っているので、超シンプルに書いていこうと思う。
デザインの重要性をまとめてある記事はこちら。
それではPhotoshopを触ってSplatter Effectに挑戦しよう。
ステップ１：猫の画像を用意
いや、別に猫でなくてもいいのだけれど、たまたま手元に猫の画像があった。好きなモノを使えばいいと思うけれど、猫はかわいい。
ちなみに今回は、上のアイキャッチにもあったように右の猫をスプラトゥーンする。左はちょっと面倒くさいのでDuotoneな感じにした。
あと、このあと使うので、下準備としてSplatterチックなブラシをダウンロードしておこう。「Splatter Brushes」と検索すれば結構ヒットするけれど、今回は無料で使えたほうがいいかなと思ったので、下のサイトのブラシをチョイス。「Free Download」ボタンを押して、解凍したファイルのブラシデータを開くだけでインストールは完了する。
ステップ２：猫を消す
え！？いきなり猫消しちゃうの！？いまから猫を綺麗さっぱり、まるごと消していく。
念のため元レイヤー(背景レイヤー)をコピーしておき、飛沫をとばしたい対象を消していく。方法としては、縄かけ選択をしたり、マジックウォンドを使って右の猫を選択し、「Ctrl＋F」で猫だけ増やしておく(上の図では網かけにしてあるが、たぶんマジックウォンドを使ったほうが綺麗)。もとの画像の猫は「コピースタンプツール」で背景と近い色で消していく。
猫だけ増やすのを忘れずに。
ちなみにコピースタンプツールの基本的な使い方が分からないひとは、こちらの記事がわかりやすい。
こんな感じで猫が消えればOK。これが背景のレイヤーになる。
ステップ３：単体の猫を複製し、クリッピングマスクを編集
先ほど「Ctrl＋F」で増やした単体の猫を２体用意し、２体目を歪ませる。２体目のレイヤーを選び、「フィルター」→「ゆがみ」をクリック。
すると、猫ちゃんを引き伸ばすことができるので、飛沫をとばしたい方向に猫をぐーんと伸ばしていこう。このレイヤーが、飛沫の素材となるレイヤーになる。(猫がおでぶになった…)
そうすると、いまこんな感じになっている。これだけ見ると何だか滑稽だ。
レイヤーのところで右クリックし、クリッピングマスクを作成する。２枚のうち、１枚目は白いままでかまわないが、２枚目は黒く塗りつぶしておく。ちなみに上の図だと３枚目も可視化してあるけれど、不要なので「目」のマークを押して見えないようにしておこう。
ステップ４：飛沫(しぶき)を加える
先ほどインストールしたSplatterブラシを使ってしぶきを加えていく。
いくつかインストールされているので、それっぽいブラシを選んで、２枚目の黒いクリッピングマスクレイヤーに白色でブラシをつけていく。ドラッグしたままだと線になるため、１クリックずつ、スタンプを押すようにポチポチ押していく。
するとこんな感じで猫が内側に侵食されるのだ。ちなみに侵食しすぎた場合は、もう一度黒い色でブラシをつければ復活する。
同様に１枚目の白いクリッピングマスクレイヤーに黒色のブラシを１クリックずつ付けていく。すると、上の図のように隠れていたビッグ・ファット・キャットが姿をあらわす。これが飛沫の正体だ。
これだけで一応完成なのだけれど、左の猫が可哀想だったので、Duotoneな感じにした。文字は、内側にだけ、先ほどと同様に黒のクリッピングマスクレイヤーに飛沫をスタンプした。
これで完成。ぷしゃぁ。
まとめ
本来液体でないものが、液体のようにはじけ飛ぶという表現方法は結構面白いなあと思ったんだけれど、残念ながら前回紹介したDuotoneのようにWebデザインにまではそんなに取り入れられていない。逆にいうと、Webデザイン的にはまだまだブルーオーシャンなので、誰か流行らせてくれないかなぁと他人事になっている…(笑)。
これから夏になるのでTシャツがますます売れていくが、正直「プリントTシャツのデザイン」としてしか役立てないのはもったいない。フォーマルな名刺にあえて取り入れてみたり、建築に取り入れてみたり、遊びごころを持って寛大に活用してほしい。
また、たまに「Photoshop持ってないんですー」っていう相談を受けるのだけれど、そこは迷わず「持ってたほうがいいよ」とアドバイスしている。LightRoom(スマホアプリでよくある、クリックひとつで画像補正できるソフト)もついて980円から手に入れられるので、正直そこは惜しまず入手すべき。Gimpに代表される割と優秀なフリーソフトもあるけれど、プラグインの数が圧倒的にPhotoshopが多いのと、書店でも並んでいるのは圧倒的にPhotoshop関連本ばかりなので、初心者は本やブログで簡単にリソースを入手することができる。学生で月額課金が面倒なひとは12か月版がオススメ。千円追加すればIllustratorやPremierなどフルコンプで使えるセットもある。ぼくのは年季が入っているので若干動きがポンコツだけれど、最近のPCは性能がよく、クラウドで自動アップデートもされるので安心だ。
いよいよ夏到来。Splatterではないけれど、水を浴びたくなる。暑くなってきたので、豊島園にでも出かけるか。
今日のひとりごと
最近、トイレの小で繰り広げられる数々の技に、興味津々である。
スーツでリュックスタイルとかなんなんとか思ってたけど、あれは機能性抜群やな。トイレで小するとき、最強やな。コペルニクス的転回やな。
— ブライアンねこ (@x93mg) 2016年6月9日
あれよね、先っぽだけ振らすひともいれば、身体全体を使うタイプもあるよね。このあいだジャンプしてるひともいた。トイレの小の話。
— ブライアンねこ (@x93mg) 2016年6月11日
そうだ！読者になろう！
ブックマークもお忘れなく！
Recommend!
