水滴庭園（Web作品）

水滴庭園はjquery.ripplesを使用した水紋庭園の作品です。
水紋のアニメーション表現を活かしたWeb作品を考えた際に池を連想しました。

池には蓮の葉があり、小魚が泳ぐイメージがありましたので
そこからデザインに必要な魚のアイコン、池の底の岩部、蓮の葉のイラストを作成しました。

企画・デザイン・コーディング

約3日(企画 4時間/デザインパーツ作成 4時間/コーディング調整2日)

【デザイン】
Photoshop：水面
Illustrator：魚パスを作成
After effect：岩部の背景
Premiere pro：魚のgifアニメ化
【コーディング】
Vscode：使用エディター
【使用jQuery】
jquery.ripples：水紋の表現

Process

水面の表現の作成

Photoshopで水面表現のイメージを作成しました。
※しかし水面は本当に水色なのかを考えた際にボツになりました

水底の岩

水面からは底の様子が見えるだろうと再度練り直しAfter Effectで作成
※最初はアニメーションを使用しようと思って作成しましたがjquery.ripplesとの相性が悪く静止画に変更しました。

変更後は下記

泳ぐ魚の作成

こちらはillustratorで作成後premiere proのキーフレームで作成しています。

蓮の葉の作成

水面だけだと庭感が出ないので蓮の葉も浮かせます
Illustratorで蓮の葉をPhotoshopでテクスチャの作成しました。