前回、前々回はRPG等でよく使われるアイテム系のアイコンを作成しました
今回は少し変えてUI系のアイコンを作成しました
今まで作成したものもかなりシンプルな作りでしたが、今回はそれよりもかなりシンプルになっています
カラーも統一しハイライトや影もつけていません。
ただやはりシンプルなものは難しいですね、特にチェックマークやバッテンの斜め線が大変でしたね
矢印
矢印は上下左右で作成しました。
今回作った中では比較的やりやすかったと思います。
今回作成した矢印は、斜めの部分にどうしても段差が出てしまいますが、まあ16×16サイズの場合はしょうがないことでもあるようです
むしろあまり滑らかにしすぎると少しぼやけた印象になってしまうので、UI素材などではこれくらいの方が使い安いってこともあるみたいです
もし気になる場合は、段差の外側に1pxだけ中間色を置くことで、少しなめらかに見せることもできます
これを行うことで簡易的なアンチエイリアスをかけることが出来るようです
ただし入れすぎると逆にぼやけてしまうので、軽く調整するくらいがちょうど良さそうでした
チェックマーク
次はチェックマークです
左右の端を開けるパターンと埋めるパターンで作成しましたが、開けたほうが良いかな？
一見するとかなりシンプルな形ですが、16×16というサイズでは斜めの角度にあまり融通がきかず
思っていたよりもバランスを取るのが難しく感じました
特に線の太さや長さを少し変えただけでも印象が変わるので、調整しながらしっくりくる形を探していく作業になりました
バツマーク
次は×マークです
ただの棒をクロスさせるだけのシンプルな形ですが、やはり16×16では斜めの角度に融通がきかず
思っていたよりバランス調整が難しかったです
縦や横のラインであれば簡単に揃えられるのですが、斜めになるだけで見え方が変わるので、そのあたりを調整しながら作成しました
普通に十字を出力して編集ソフトで斜めにすれば良いかな？と思いましたが、全然上手くいきませんでした
ただ画像を傾けているだけな気がするんですけど、なんかやり方おかしかったんですかね？
まとめ
今回は矢印やチェックマーク、×マークといったシンプルなUIアイコンを作成しました
どれも簡単そうに見えるのですが、実際に作ってみると16×16では1pxの違いで見え方がかなり変わるため、バランスを取るのが思ったより難しかったです
特にやっぱり斜めのラインですよね
融通がきかず、回転で済ませられるかと思った部分も最終的には手で調整する必要があり、なかなか苦戦しました
小さいサイズほどシンプルにまとめたり、細かい調整が大変だなと思いました