【Webデザイン】オリジナルWebデザイン : アイスクリーム専門店の仮想LP - 3 自作の水彩背景素材をつくる 【Adobe Fresco】
背景
アイスクリーム専門店の仮想LPの作成過程をまとめています。
前回は、自作ロゴの制作についてまとめました。
本記事では、メニューセクションにて使用した
水彩背景素材についてまとめていきます！
制作物
制作期間
制作期間 : 2/4
合計制作時間 : 約2.0h
使用ソフト/ツール
着想
Webサイトのお題をアイスクリーム専門店と決め、
そのカラフルかつナチュラルな印象に合っていたのが水彩でした。
そこで、ここのところ毎日さわっていたFrescoで描くことのできる
デジタルでの水彩をつかって素材をつくることを決めました。
作業過程
Frescoにて、ブラシは水彩筆、アイスクリームと同系色の色を選択。塗ります。
ただし、単一の色相だけでは暗くなってしまうチョコレートや
味の組み合わさったベリー&チーズは
それぞれ味から連想される色を複数使用しました。
濃い色で端から半分程度塗ったあと、薄い色に変えて残りを塗り、
中央を中間色でぼかすことでグラデーションを表現。
互い違いのレイアウトの中で使用するので、
最後に適宜左右・上下反転させて、完成です。
気になった点
Frescoで水彩素材を作ってみて、気になった点が2つありました。
- 水彩筆で描いたものは全体の透明度を均一にできない
- 水彩素材使用時の背景色に注意
水彩筆で描いたものは全体の透明度を均一にできない
SP版グローバルメニューの背景のようにCSSでopacity: XX%; と指定すると
全体が均一に透けた状態になりますが、
水彩筆で描いた素材が背景となるとopacityが100%でも
予め薄く透ける部分と濃くて透けない部分とが出てきます。
水彩ならではと言えばそれまでで当たり前と言えば当たり前ですが、
注意しておかないと意図しない仕上がりになりそうだったので気をつけたいです。
水彩素材使用時の背景色に注意
今回は白背景の中で使用する前提で、
制作時にはFrescoのデフォルトで白背景レイヤが追加されていたため、
特に意識せずとも問題ありませんでした。
でも、もし白でなく黒や暗い色の背景の中で使用する場合はどうでしょうか。
黒い色画用紙に色鉛筆で塗ったようにまったく発色が変わってしまうはずです。
画像出力してから気付いた、作り直し！ということがないように、
最初から素材使用時の背景色を意識する必要があると思いました。
まとめと感想
この背景素材については、理論的な説明がつくというよりは
思いつき・感性のままにつくってしまったという感じでした。
気になっていたFrescoで、
Webデザイン使用前提のアウトプットを形にできたのがうれしかったです！
今後の制作に活かしていきます！
次回
つぎは、Photoshopで作成した
アイスクリームの背景透明画像についてです。
(↓のアイスクリーム画像。メニュー別に作成)
