VS アイコン作成時の留意点 追補

自分でプログラムを書く ... 。
はい。　　アイコンも欲しくなりますね。
アイコン作成時の留意点 を以前に書きましたが、
画像編集ソフトで作る時の 留意項目 追補 を。


2019 年の早々に、以下の投稿を書いています。
VS アイコン作成時の留意点
https://shiroyuki-mot-says.blogspot.com/2019/01/vs-design-notice-for-icons-2.html
もっと古くは、2016 年の夏にも。
VS アイコンの有効範囲
https://shiroyuki-mot-says.blogspot.com/2016/07/vs-design-notice-for-icons.html

さて、
此れ等では、アイコンのデザイン時に 被さる 特殊なものがあるから、
留意しよう！　が趣旨でした。


重ねて書きますが、
個人的には、 GIMP で、アイコンをデザインしています。
各用途別サイズは 16px 32px 48px 96px 128px 256px を基本に、　128 px を省略したりしています。
そして、基本全サイズは 16 20 24 32 40 48 64 96 128 256 とされていました。

本格的にするなら、
全サイズをベクターで作るのかも知れませんが、
所詮、素人の真似事。
そんな技量は持ち合わせていません。


写真加工等で、GIMP は頻繁に使いますから、
手慣れた手法を酷使しましょう。
そう、　画像編集のテクニックです。
なので、基本サイズひとつ から、拡大縮小 に頼る事が多いです。


ご存知の様に、
拡大縮小結果は どうしても ぼやけたり つぶれたり します。
殊に、拡大での品質低下は甚だしいので、
最大サイズの 256px で　先ずは　攻めます。
でも、其れを其のまま縮小すれば、
何が何だか判ら無いものが誕生します。
そう、各辺 で 1/16 程の大きさしか無いのですから、当然です。
相当縮小される事を忘れてはいけません。
もし、其の本体（プログラム）の出来が良ければ、
Desktop に アイコン として置かれる事になるでしょうから、
頻繁に目にする機会が多いのは 48px になりますね。
なので、先ずは、256px から 48px に縮小し、
視認性を検討しましょう。

デザインのコツは、
縮小される前提で、細々した要素は割り込ませ無い かも知れません。
そうすれば、多少は　楽　です。
シンプルであれば、後々、悩む要素も減少しますし。

欲張って、256px に 細々と詰め込み過ぎ は避けたいもの。
其のサイズで 間延びして見える 位 で、丁度良いかも知れませんよ。
256px サイズは そうは お目に掛から無い 筈 ですし。

さて、縮小後。
最初に試すのは、シャープネスの誇張 (GIMP) です。
　　シャープネスを利かせると、色も濃くなる傾向がありますので、
　　一度に大幅に上げずに、小まめに複数回 が お勧め です。
それでも、駄目なら、
48px 以下のサイズでは、デザインを変えた方が良い場合も多いと思います。
　　私は、最近、大抵のケースで、デザインを変更しています。
さて、此処からが難題。
32px と 16px とです。
更に小さいので、苦労します。
先の シャープネス適応 は 何れのケースでも 必須 でしょう。
デザインの単純化が必要かも知れません。
最悪のケースは、全て、作り直し！。


では、例示を。

C# 自作アプリのバージョン 追補　で、アイコン無し だったものへ、
アイコンを捧げようとしています。
敢えて、修正前で ご覧戴きましょう。

256px で作図したものを、各サイズに縮小して並べました。
画像編集は加えていません。　　此の説明用に作業しています。
左上から時計廻りで、256 48 32 16 の順です。
各サイズの下には薄いグレーを置いています。
図柄判別が難しい条件下になりますね。
つまり、実際には、周辺は透過になっています。

さて、見ればお分かりの様に、
サイズが小さくなるにつれ、もやっ！ として仕舞います。
右上、48px 時に何とか判別出来た文字も、その下では ？ ですね。

　　私の傾向として、アイコンの中に 文字込み が結構多いです。
　　絵 だけで作るのは ... 意外と 難しい ですから。

此れでは、使い物にはなりませんので、
実際には、シャープネスを誇張します。
文字のサイズ自体も小さいサイズ用に拡大しています。
そう、字だけひと廻り大きくしたイメージですね。
小さなサイズではコントラストを上げても、視認性の点からは、良い結果を招きます。
でも、　程々に。　　;)

　　尚、デザインコンセプトは、
　　Desktop Folder に収められた Visual Studio VB.net & C# のプログラムへの Shortcut から、
　　実行ファイルのバージョン等を確認（操作）する為のものなので、
　　VS exe と ver の文字（白く枠取り）、Shortcut Icon（敢えて、ぼけぼけ）、
　　我が スパゲティ コード の どうどうめぐり を現す 架空の アイコン図　で構成しています。

　　もし、此れの Shortcut を作れば、２重に Shortcut Icon が被る形になりますね。
　　なので、周辺に空白を大きめに空けた次第です。


まぁ、編集したとは言え、五十歩百歩感は否め無いですが、
少なく共、前よりは、多少 ... 。
で、　32px の例。　　上図で右中央に相当。

いやぁ～、アイコンのデザインは ... 難しい！　　X( 。