水没する風景

渋谷を水没させる唯一の方法。【Photoshopで水没描写のGIFアニメ−ション制作】

 

執筆:Daily GIF89a編集部(中坂明子)

この記事で理解できること(文章量:5分)

・作業時間10分ほどで、Photoshopを用いてGIFアニメを作ることができる。

・すでにある風景写真から、水没風の風景の画像を作成する方法を理解することができる。

 

今回制作したGIFアニメ

66
渋谷109の前の交差点に、謎の液体が満ちている。液体がゆっくりとたゆたう様は、見慣れた風景を妖しい情景にと仕立てあげている。

 

使用した素材

66

引用元URL:http://www.tokyo-date.net/
今回利用した画像のように、目立つ建物、タワーなどが映り込んだ、メリハリのある風景の方がインパクトある画像になる。

制作手順

1.水面のゆがみ演出の基になるファイルを作成、まずノイズを適用する。

400×400pxで新規ファイルを作成、
フィルター>ノイズ>ノイズを加える から、ガウス分布 量400%
1

 

2.ぼかし(ガウス)を適用する。

フィルター>ぼかし>ぼかし(ガウス) から、半径 2.2
2

3.エンボスをチャンネル レッドに適用する。

レイヤーウィンドウのタブの左、チャンネルウィンドウを開き、レッドを選択した状態で、
フィルター > 表現手法 > エンボス  角度:180° 高さ:1 量500%
4

4.エンボスをチャンネル グリーンに適用する。

同じく、チャンネルウィンドウを開き、グリーンを選択した状態で、
フィルター > 表現手法 > エンボス  角度:90° 高さ:1 量500%
5

5.画面下側を拡大する。

全体を選択、変形>遠近法より画面下側を拡大。
いくらか水面の雰囲気がわかるだろうか?
6

6.PSDファイルとして、水面.psdの名称で保存する。

7

7.加工したい風景画像を開き、図のように水平線の少し上辺りでレイヤーを複製、反転する。

9
10

 

8.複製したレイヤー全体を選択、ツールボックス下部(画像の赤い四角内)のボタンでクイックマスクの状態にして、マスク部分を消しゴムツールを使って道のある方向にパースを付け、選択範囲を変形させる。

12

9.パースを付けたときの余計な部分を削除する。

これで道に沿って水面を作ることができる。
13

 

10.反転させた部分の風景を複製、それぞれぼかし(移動)をかける。

角度90° 距離20px とした。
14
やや水面らしくなったが、まだ作りこんでいく。

 

11.レイヤーを複製する。

反転させた部分の風景レイヤーを2回複製する。元レイヤーを「A」、2枚目を「B」、
3枚目を「水の色」とし、上から水の色、B、Aの順に重ねる。
15

16

12.水の色レイヤーの着色。

今回はピンク色で、透明度100%~74%のグラデーションを作成した。
17

18

 

13.選択範囲はそのままで、Aレイヤーを選択し、置き換え効果をかける。

フィルター>変形>置き換え 水平比率20 垂直比率10とする。
20
OKを選択すると、ファイル選択画面が開くので、先に作った水面.psdを選択する。
21
このようにAレイヤーに水面の模様が置き換えられるのが確認できるだろう。
22

 

14.おなじく選択範囲はそのままで、Bレイヤーを選択し、置き換え効果をかける。

フィルター>変形>置き換え 水平比率10 垂直比率10とする。
23
Aレイヤーとは少し違った形で、Bレイヤーにも水面の模様が置き換えられる。
24

15.水面レイヤーの不透明度を50%に調整

25

ここまでの手順で、ゆらぎの違う2つの水面反射模様が生成された。
次に、よりリアルに仕上げるため、水面近くの水蒸気を作成する。

16.新規レイヤーを作成、「水蒸気」レイヤーとする。Aレイヤーの空白部分を選択した状態にし、白100%~0%のグラデーションで水面近くを着色する。

263031

 

17.選択を解除し、水蒸気レイヤーの水面との境界付近をぼかしツールでぼかす。

32

 

18.アニメーションを作成する。

ウィンドウ>タイムライン からタイムラインウィンドウを表示、
「フレームアニメーションを作成」をクリック。
35

すべてのレイヤーを表示した状態で2秒、Bレイヤーのみを非表示の状態で0.5秒、繰り返し 無限と設定する。それぞれ画像内赤い四角で示した部分、下向きの三角をクリックすると設定できる。
32
再生ボタンも青い四角で示した部分にあるので使ってみるとよいだろう。

19.最後にGIFとして保存する。

ファイル>WEB用に保存 GIFとして保存する。
34

完成したGIFアニメ

66

 

制作を終えて

水の色を変えることで、いろいろな雰囲気を出せる加工方法である。青や緑だと本物の池のような雰囲気、赤や黄色だと幻想的な雰囲気を作ることができるだろう。
駆け足で紹介したが、置き換え部分の比率などを試行錯誤すると、自分なりの方法も編み出せるかと思う。

 

執筆:Daily GIF89a編集部(中坂明子)

 

【GIFMAGAZINE】http://gifmagazine.net/

GIFアニメ好きのためのGIF作品投稿・共有プラットフォーム

GIFMAGAZINE_appstore_googleplay

 

GIFMAGAZINEアプリ版のダウンロードはこちら

 

android appstore
iOS:https://itunes.apple.com/ja/app/gifmagazine-animated-gif-magazine/id734489230?l=ja&mt=8
Android:https://play.google.com/store/apps/details?id=jp.createbox.gifmagazine

GIFMAGAZINE