読者です 読者をやめる 読者になる 読者になる

Brian'z Imagination

ブライアンねこの、頭の中。

Brian'z Imagination

はじけ飛ぶ快感!先生、最近気になるグラフィックトレンド「Splatter Effect」ってなんなんですかネ?

デザイン

f:id:x93mg:20160610223714p:plain

ぷしゃぁ。猫、はじけ飛ぶ。

インクを撃ちあう任天堂のアクションシューティングゲームの名作「スプラトゥーン」が日本で発売されてからちょうど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

f:id:x93mg:20160606081926j:plain

オレンジやピンクのビビッドさが映えて綺麗だ。どこまで伸びているのか想像力が膨らみやすい「髪」の部分をスプラッターで表現しているのがうまい。

Colors - a photo manipulation

Afmed Mostafa in Egypt

f:id:x93mg:20160610190604j:plain

みごとに飛び散ってますね。昇天しています。
身体の輪郭を水しぶきエフェクトでぼやかしていてこれまたクール

Be free

Gus Neri in L.A.

f:id:x93mg:20160610190725j:plain

キッスをする男女。あえてちょっと暗めの色飛沫しぶきをあげているのが味を出している。

Abstract Digital Art

Alex Lucas in Ohio

f:id:x93mg:20160610190937p:plain

ブルーの飛沫しぶきやっぱり水を想像させる。夏の爽やかな感じがする。

Catcher of Dreams

Mark Reihill in UK

f:id:x93mg:20160610193339j:plain

この作品を見ると、なんだか前回紹介したDuotoneとも合いそうな気がする

Smithwick's Experience Kilkenny

Gerardo Guilmo in Costa Lica

f:id:x93mg:20160610194021j:plain

この作品の面白いところは、全部がイラストレーションではなく、水しぶきのなかに写真を当て込んでいるところだ。スプラッターの可能性を感じる一枚。

Splatter Brush

Miguel Oliveira in Portugal

f:id:x93mg:20160610194535j:plain

特に写真とか用意しなくてもこれくらいならPhotoshop駆使すればできるんじゃないかって思えるいい例。

Philophobia

Chris Lord in Canada

f:id:x93mg:20160610194829j:plain

なんか、エロティックと、モダンと、ポップが混ざった、不思議な感じがするね。こんなこともできるんだ、と関心した。

Danger

Austin Holmes in Colorado

f:id:x93mg:20160610195307j:plain

立体的にしたスプラッター

Yvonne Strahovsk dispersion effect

Holman Mesa in Colombia

f:id:x93mg:20160610195507j:plain

これは相当な想像力を掻き立てる。ってかこんなデザイン考えつくのすごい

Vórtex

Hannah Lispcomb in Virginia

f:id:x93mg:20160610195819j:plain

使い方によっては、恐怖を煽る。怖い

Splatter Me

Rian Dix in Philadelphia

f:id:x93mg:20160610200410j:plain

なにこれ。猫かわいい

MeowwW

Splatterって作れるの?簡単なの?

f:id:x93mg:20160610224113p:plain

そういうわけでなんかSplatterすごいじゃん、ってなるけれど、これを見てぼくも最初は「なにこれ。難しいの?」って思ってしまった。しかしながら、これをプロデザイナーの既得権益にしておくのも嫌だったので、実際に作ってみた。作ってみると、理屈としては至ってシンプルで、慣れれば10分くらいで簡単に作れてしまう。必要なのは、Photoshopと、ちょっとの好奇心だ。ぼくは「非デザイナーでもデザインできるに越したことない」と思っているので、超シンプルに書いていこうと思う。

デザインの重要性をまとめてある記事はこちら。

それではPhotoshopを触ってSplatter Effectに挑戦しよう。

ステップ1:猫の画像を用意

f:id:x93mg:20160610224143p:plain

いや、別に猫でなくてもいいのだけれど、たまたま手元に猫の画像があった。好きなモノを使えばいいと思うけれど、猫はかわいい。

ちなみに今回は、上のアイキャッチにもあったように右の猫をスプラトゥーンする。左はちょっと面倒くさいのでDuotoneな感じにした。

あと、このあと使うので、下準備としてSplatterチックなブラシをダウンロードしておこう。「Splatter Brushes」と検索すれば結構ヒットするけれど、今回は無料で使えたほうがいいかなと思ったので、下のサイトのブラシをチョイス。「Free Download」ボタンを押して、解凍したファイルのブラシデータを開くだけでインストールは完了する。

ステップ2:猫を消す

f:id:x93mg:20160610231233p:plain

え!?いきなり猫消しちゃうの!?いまから猫を綺麗さっぱり、まるごと消していく。

念のため元レイヤー(背景レイヤー)をコピーしておき、飛沫しぶきをとばしたい対象を消していく。方法としては、縄かけ選択をしたり、マジックウォンドを使って右の猫を選択し、「Ctrl+F」で猫だけ増やしておく(上の図では網かけにしてあるが、たぶんマジックウォンドを使ったほうが綺麗)。もとの画像の猫は「コピースタンプツール」で背景と近い色で消していく。

f:id:x93mg:20160610231843p:plain
猫だけ増やすのを忘れずに。

ちなみにコピースタンプツールの基本的な使い方が分からないひとは、こちらの記事がわかりやすい。

f:id:x93mg:20160610231728p:plain

こんな感じで猫が消えればOK。これが背景のレイヤーになる

ステップ3:単体の猫を複製し、クリッピングマスクを編集

f:id:x93mg:20160611000438p:plain

先ほど「Ctrl+F」で増やした単体の猫を2体用意し、2体目を歪ませる。2体目のレイヤーを選び、「フィルター」→「ゆがみ」をクリック。

f:id:x93mg:20160611000530p:plain

すると、猫ちゃんを引き伸ばすことができるので、飛沫をとばしたい方向に猫をぐーんと伸ばしていこう。このレイヤーが、飛沫の素材となるレイヤーになる。(猫がおでぶになった…)

f:id:x93mg:20160611001023p:plain

そうすると、いまこんな感じになっている。これだけ見ると何だか滑稽だ。

f:id:x93mg:20160610234640p:plain

レイヤーのところで右クリックし、クリッピングマスクを作成する。2枚のうち、1枚目は白いままでかまわないが、2枚目は黒く塗りつぶしておく。ちなみに上の図だと3枚目も可視化してあるけれど、不要なので「目」のマークを押して見えないようにしておこう。

ステップ4:飛沫(しぶき)を加える

先ほどインストールしたSplatterブラシを使ってしぶきを加えていく。

f:id:x93mg:20160611001433p:plain

いくつかインストールされているので、それっぽいブラシを選んで、2枚目の黒いクリッピングマスクレイヤーに白色でブラシをつけていく。ドラッグしたままだと線になるため、1クリックずつ、スタンプを押すようにポチポチ押していく。

f:id:x93mg:20160611001635p:plain

するとこんな感じで猫が内側に侵食されるのだ。ちなみに侵食しすぎた場合は、もう一度黒い色でブラシをつければ復活する。

f:id:x93mg:20160611001913p:plain

同様に1枚目の白いクリッピングマスクレイヤーに黒色のブラシを1クリックずつ付けていく。すると、上の図のように隠れていたビッグ・ファット・キャットが姿をあらわす。これが飛沫の正体だ。

これだけで一応完成なのだけれど、左の猫が可哀想だったので、Duotoneな感じにした。文字は、内側にだけ、先ほどと同様に黒のクリッピングマスクレイヤーに飛沫をスタンプした。

f:id:x93mg:20160610224113p:plain

これで完成。ぷしゃぁ。

まとめ

本来液体でないものが、液体のようにはじけ飛ぶという表現方法は結構面白いなあと思ったんだけれど、残念ながら前回紹介したDuotoneのようにWebデザインにまではそんなに取り入れられていない。逆にいうと、Webデザイン的にはまだまだブルーオーシャンなので、誰か流行らせてくれないかなぁと他人事になっている…(笑)。

これから夏になるのでTシャツがますます売れていくが、正直「プリントTシャツのデザイン」としてしか役立てないのはもったいない。フォーマルな名刺にあえて取り入れてみたり、建築に取り入れてみたり、遊びごころを持って寛大に活用してほしい

また、たまに「Photoshop持ってないんですー」っていう相談を受けるのだけれど、そこは迷わず「持ってたほうがいいよ」とアドバイスしている。LightRoom(スマホアプリでよくある、クリックひとつで画像補正できるソフト)もついて980円から手に入れられるので、正直そこは惜しまず入手すべき。Gimpに代表される割と優秀なフリーソフトもあるけれど、プラグインの数が圧倒的にPhotoshopが多いのと、書店でも並んでいるのは圧倒的にPhotoshop関連本ばかりなので、初心者は本やブログで簡単にリソースを入手することができる。学生で月額課金が面倒なひとは12か月版がオススメ。千円追加すればIllustratorやPremierなどフルコンプで使えるセットもある。ぼくのは年季が入っているので若干動きがポンコツだけれど、最近のPCは性能がよく、クラウドで自動アップデートもされるので安心だ。

いよいよ夏到来。Splatterではないけれど、水を浴びたくなる。暑くなってきたので、豊島園にでも出かけるか。

今日のひとりごと

最近、トイレの小で繰り広げられる数々の技に、興味津々である。

そうだ!読者になろう!
ブックマークもお忘れなく!

Recommend!