【Webデザイン】オリジナルWebデザイン : 水族館の仮想HP - 2 背景用波形素材をつくる

背景

公開のワイヤーフレームからのデザイン作成課題。
前回は自作ロゴの作成についてまとめました。

今回は、セクション境界に使用した波形素材の制作についてまとめます。

成果物

制作時間 : 1.5h

デザインカンプ使用時 :
波形素材のデザインカンプ使用時

学習ポイント

Photoshopで波形を描く方法
- 変形フィルター : 波形を使用する
  参考 : Photoshopで一瞬で波線を作る | Output48
Photoshopでシェイプに変換
参考 : Photoshop CC（2017）選択範囲からシェイプに変換する PCまなぶ
Photoshopエラー｢書き出す有効なアセットがありません｣
再起動で解決。参考 : Twitterより

振り返って

波形のSVG作成については、これまでネット上の制作ツールGet Wavesを使用してきましたが、今回は振幅・波長ともに一定に変化する波形が欲しかったため、自作しました。

Photoshopでの作成で、｢波形｣という便利な変形フィルターを知ることができました。応用すればジグザグ形も簡単に作成できそう...！

そして、最後SVGに書き出すときにつまずいた
｢書き出す有効なアセットがありません｣というエラーが。
これには調べるのに時間をかけたのですが、
結局3回ほど再起動して直すことができました。
今度からよくわからないエラーが出たらまずは再起動... 記憶。

さらに、このエラーを調べていく中で｢画像アセット｣という機能を知りました。
レイヤーに出力したいファイルの拡張子をつけておき(細かいオプションも名前に追加できる)、 ｢ファイル｣→｢生成｣→｢画像アセット｣で指定した形式のファイルが作成できる、というもの！
参考 : スライス不要！画像アセット生成で効率的に画像を作成しよう | 走りがき

今回はエラー解決で力尽きこれは実践できなかったのですが、次に画像を自作するときに試してみたいと思います。

波形SVGの作成ではつくったものも素材1つ、時間も1時間ちょっとだったにも関わらず、
新しく触れるものも多く、学びの大きいものとなりました。

次回、PC版デザインカンプ全体のまとめです。

次記事へ