アイコン自体はPNG画像なのでPNG形式で保存された画像であれば、何れでもアイコンに出来るのですが背景が透過出来なかったりオリジナルティー（独創性）に欠けますよね。種別・名称別にしたいと思っていませんか。
日々パソコンを使用していると、書類やPDF、画像ファイルなど溜まって行きます。用途別にフォルダを作って選別している事と思いますが何が何処にあって、このフォルダには何が入っているのか忘れてしまうことも度々だと思います。WEB上には種々多彩なアイコンがあります。皆さん通常は色々探して使っている事と思います。ですが自分でフォルダに分かり易く、画像と名称が入れられたら便利だと思いませんか。
そんな悩み（でも無いか？）を自分で解決しましょう。
今回はIllustrator（ベクター（パス）形式）で図形を作成したのは「エッジの効いた」アイコンを作ることを目的に使用しました。
フォルダアイコンを作ってみよう。
当サイト管理人の制作環境は以下です。
①MacOS
②Adobe Illustrator→(代替可) Affinity Designer
③Adobe Photoshop→(代替可) Affinity Photo→(代替可) GIMP
④Mac標準プレビュー→Windows「ペイント」
既にIllustratorやPhotoshopを使用している方は理解出来ると思いますが、初心者の方、これから覚えようとする方にもなるべく分かり易く説明して行きます。
Affinity V2は試用版が必要なくなったので削除（期限切れですが）してしまったので、Adobe CCにて説明して行きます。
IllustratorやAffinity Designerはベクター（パス）形式で図形が描けるので、アイコンの図形を制作するには最適です。
STEP 1
Illustratorを起動→ファイル→新規→サイズA4縦
①パーツとなる作図を長方形ツールで二点作成します。作図の大きさはやり易い大きさで大丈夫です。この見本では80mm×70mmです。小さいより大きい方が作業し易いでしょう。線の太さは見やすい太さでOKです。最後に線は見えなくしてしまいます。最終的に好みの形になる様上下・左右バランスを取って下さい。
STEP 2
①作図したアイテムを選択、メニューバー→効果→スタイライズ→角を丸くする②
見本では4mmに設定しました。好みでOKです。二点同じ工程を繰り返します。
STEP 3
③Ⓐのアイテムを下方向に移動させます。左ラインを揃えながら、Ⓐの角丸が隠れればOKです。
パスファインダーで合体させます。
STEP 4
④③のアイテムをコピーします。コピーした③のアイテムを左側ツールバーからハサミツール（消しゴムツールの中にあります）を選択、意図する図形のポイントを二ヶ所クイックします。
これでアンカーポイントが追加され、分断出来る様になりました。アイテムの上部を選択して消去します。消去できる筈なので、編集→消去のやり直しでトライして下さい。余分なポイントが残るのでこれも消去します。
STEP 5
⑤ペンツールで少し離れた場所に曲線を引きます。方向線（ハンドル）が出ますので好みの曲線を引きます。
STEP 6
⑥で今描いた曲線のアンカーポイント二ヶ所をで移動して形を整えます。結合はしません。結合すると合体になりスタイライズした「角を丸くする」が無効になってしまいます。画像だけが欲しいのでこのままで良いのです。メニューバー→オブジェクト→グループでグループ化しておきます。
STEP 7
⑦③⑥のアイテムを重ねて行きます。オブジェクトの整列を使うとピッタリ合う筈です。
アイテムのラベル部分もアンカーポイントを移動して好みに調整しましょう。
STEP 8
⑧ⒶⒷそれぞれ着色してみます。
好みの色が見つかったでしょうか。
特にⒷの部分で色の分断がある場合、アンカーポイントを上下調整して覆い隠して下さい。
着色が終わったらⒶⒷ全体を選択して左側ツールバーから「線の色」を無しにします。
STEP 9
フォルダアイコンの制作は以上です。これから此のアイテムをPNG形式の画像に変換して行きます。
メニューバー→ファイル→書き出し形式→ファイル形式をPNGにして任意の保存場所を指定します。
Illustratorでの作業はこれで終了です。
Photoshopでの作業になります。
STEP 10
次にPhotoshopでの作業になります。
ロゴもしくは画像をPNG形式で透過処理されたものをお持ちであればそれを使います。
これから制作するのであれば、Illustratorに配置してSTEP 9を参考に制作して下さい。
STEP 9で作成した画像をPhotoshopに呼び込みます。⑧で作った画像にロゴもしくはイラストなど透過処理されたPNG画像を呼び込みます。
透過処理されてない画像は開いたウィンドで処理しましょう。
保存先ドキュメントはそのままでレイヤーのコピーを作ります。
レイヤー1を選択、ゴミ箱をクイック削除します。残った「レイヤー1のコピー」は背景色があるので自動選択ツールで余白を透過処理出来ます。
次に透過処理した挿入したいロゴのサイズを調整します。
メニューバー→イメージ→画像解像度
サイズの数値を打ち込んだら「キャンセルもOK」も押さずレイヤーの複製、ドキュメントは制作原図です。OKを押さないのは保存されてしまい、再度再試行出来なくなってしまう為です。制作原図を開いてサイズが良ければ位置調整します。名称などをTEXTツールを使って入力して行きます。フォントの種類・サイズなど決定しましょう。
お気に入りのフォルダが出来上がったら、レイヤーパレットから「画像を統合」します。
ここで一枚の画像ファイルになったのですが、背景が透過処理出来ていません。もう一度レイヤーの複製をします。先ほどと同じ一番下のレイヤーを削除します。
自動選択ツールでコピーの余白を透過処理してPNGで保存しましょう。
Macロゴのウィンドに戻り「キャンセル・OK」どちらでも大丈夫です。
Photoshopは終了して構いません。
STEP 11
任意の場所に保存されたファイルをMacですと標準プレビューで開きます。
メニューバー→編集→全てを選択 選択範囲を調整して 編集→コピーします。
新規フォルダを作ります。
メニューバー→ファイル→新規フォルダ
新規フォルダを右クリックして→情報を見る
ファイルアイコンの所をクリックしてアクティブにしてペーストします。
フォルダアイコンの出来上がりです。
説明だと長くなりますが、アイコンの構図が分かれば自作することも可能です。基本的な作りさえ覚えてしまえば簡単に制作出来ます。手順・大要が分かりましたら、アレンジした新しいアイコンを制作してみて下さい。
AdobeCC（コンプリートプラン）を安く購入する方法として、デジハリのAdobeマスター講座がおススメです。
Adobeマスター講座
安く導入する方法として、ご紹介してきましたが残念ですが、当サイトでの ASP は2024/08/23で終了しました。
ご愛顧有り難うございました。
再開されるようでしたら当サイトで再度紹介したいと思います。
なお、デジハリONLINEプロモーションは引き続き運営されていますので、直接お問い合わせ下さい。
パートナースクールでは、一般の方を生徒として講座とソフトをセットで販売しています。「Adobeマスター講座」を申し込めば39.980円でAdobe Creative Cloudが1年利用できます。さらに基礎講座も学べるので、よりお得ですよね！
あれこれ迷うよりお勧めはこれ一本です。
プロの現場で使われている様に全ての機能が備わっています。他には何も必要とする事はありません。高価と思う事でしょうが、後悔することは無いでしょう。
AdobeCC（コンプリートプラン） お持ちでない方、検討中の方はお試し体験版はこちらから……
一週間の使用期限ですが、使い尽くして見て下さい。
