私のウェブサイトで使用するアイコンをオンラインで探すとき、よくデザインされた無料のアイコンセットをよく見つけます。
ただし、多くの場合、これらのアイコンセットは単一のサイズでのみ使用できます。たとえば、アイコンセットhttp://designdeck.co.uk/a/1245）は48x48pxサイズしかありません。
Photoshopでこのアイコンセットを24x24pxまたは32x32pxにサイズ変更するには、どの方法が最適ですか？
初心者向けの優れたチュートリアルをオンラインで見つけることができませんでした。ありがとう
回答:
この特定のセットは形状とテキストで構成されているので、サイズを変更しても品質に影響はありませんが、これらのアイコンのサイズを小さくすることはできません。アイコンは特別な種類のインフォグラフィックです。その目的は、任意のサイズで簡単に認識できる情報を伝達することです。そのため、何かのスケーリングを開始する前の最初のステップは、アイコンのどの部分に情報が含まれているかを識別することです。これらは読みやすくする必要があり、残りは使い捨てです。
この場合、円の形状には情報が含まれていませんが、場合によっては色が含まれているため、それらを除去することはできません。あなたはできるものの、自由に拡大縮小します。サークル内のグラフィック要素には重要な情報が含まれているため、より慎重に扱う必要があります。
PSDから作業して、このセットを48ピクセルから24ピクセルにスケーリングする方法は次のとおりです。
いずれかのアイコンのレイヤーセットを開きます。Google+アイコンを選択してみましょう。
円を選択し、を選択しますEdit > Transform > Scale。変換コントロールプロキシの中心点が選択されていることを確認し、WフィールドとHフィールドの間のリンクを切り替えて、スケーリングが比例するようにします。
この時点では、円の直径は24ピクセルですが、「g」と「+」が大きすぎます。
選択両方の「G」形状の層と「+」テキストレイヤー、および選択Edit > Transform > Scale以前のように、今回、WまたはHフィールドに80を入力し、Enterキーを押し/リターンを入力します。
「g +」レイヤーを微調整して、円の中央に配置します。
この縮小されたアイコンは、同じ情報を明確に伝えますが、必要なサイズであり、拡大縮小したときにセットの残りの部分と一致します。
残りのアイコンを同様に扱います。円は境界を定義するため、すべて50％にスケーリングされます。各グラフィックを拡大縮小する量は変化するため（Skypeアイコンは80％ではなく75％でより効果的に機能します）、少し実験する必要があります。あなたが行くにつれて経験があなたを教えてくれます。
サイズが異なれば、異なる比率と適切なスケーリング量が必要になります。重要なことは、情報と装飾とを区別することです。装飾をスケーリングまたは破棄できます。情報を読みやすくする必要があります。
絵の「アイコン」や詳細が多いアイコンは、単純に拡大縮小することはできません。彼らは、しなければならない簡略化されサイズを小さくするときの情報が明らかに残るようにあなたは小さいサイズのために別のアイコンを作成する必要がありますので、。ロゴのデザイン-名刺のポスターでうまく機能するものを大幅に簡略化する必要がある-やタイプデザインでも、同じ原則に従います。
答えは、ベクトルとラスタライズされたアイコンの両方に適用されます。
大きなアイコンには詳細が含まれています。これらの細部は、128×128のアイコンに適していますが、32×32のアイコンでは邪魔になります。アイコンを視覚的に識別するのではなく、逆のことを行います。たとえば、キーボードの大きなアイコンには、キーボードのすべてのキーが含まれている場合があります。16×16アイコンの場合、4つのキーで十分です。4つ描画して、ユーザーがそれらがキーであることを理解するか、さらに多く描画してすべてがフラットになります。
何が起こるか見てみましょう。私はWindows 7で使用されているグラフィック的に優れたキーボードアイコンを取り上げます。
次に、左側の縮小されたアイコンと、Photoshopで大きいサイズのアイコンからサイズ変更したアイコンを並べて比較します。
左側はかなりはっきりしています。右側の画面は奇妙な形をしたPDAで、画面下部に2つのボタン、画面下部に1つの大きなボタンがあります。さらに小さなスケールに移動するとどうなるか見てみましょう。
Windows 7で使用されている左側のアイコンは、解像度が低くてもかなりはっきりしています。右側のアイコンは、大きなアイコンのサイズを変更したバージョンであり、完全に無意味です。それは、PDA、シルバーボックス、またはその他のものである可能性があります。実際には、PF-19686592電卓のように見えます。
オブジェクトの詳細レベル以外の要素も考慮する必要があります。
たとえば、影は64×64のアイコンに付けると便利ですが、同じ影は16×16のファビコンでは愚かに見えます。
アイコンが大きい場合、オブジェクトが回転して遠近法になることがあります。小さい場合は、平らに描きます。
サイズが小さくなると、オブジェクトの数も少なくなるはずです。たとえば、メモ帳の大きなアイコンには、鉛筆でメモ帳を表示できます。小さいアイコンでは、メモ帳を覆わないように鉛筆を描くのに十分な場所がなく、同時に鉛筆として認識されます。
これらのルールは、実際にはWindows XPのアイコンに準拠しています。
つまり、UXとデザインの品質が重要である場合、アイコンを縮小して元のアイコンと同じように明確にすることはできません。質問でリンクするアイコンセットを考えると、24×24のアイコンのアイコンの周りに円を保持したくないのは明らかです。円を削除し、コンテンツのみを保持します。
しばらく様子を見てみましょう。この画像：
になる：
左側で、サークルを削除しました。右側では、元の画像を縮小しました。右側に見えるものを教えていただけますか？
より良い品質を達成するために、あなたはまだしたいかもしれません：
同じ比率を維持します（明らかに）。
2の倍数で除算してサイズを変更します。128×128から32×32を取得できますが、41×41のアイコンを作成すると奇妙な結果になる場合があります。
さまざまなサイズ変更アルゴリズムを試してください。私はlanczosがよりよく機能することを期待しますが、すべてのアイコンに対してではないかもしれません。シャープネスも品質を向上または低下させる場合があります。
私は常にアイコンをベクター形式で（Illustratorを使用して）作成しています。このようにして、アートを任意のサイズおよび任意の形式でエクスポートできます。まあ、完全に真実ではありません。ピクセルの配置のためにアイコンを調整する必要があるからです。CS5はうまく機能しますが、すべての問題をカバーするわけではありません...
フォトショップでは、ピクセルを使用しているため、必要な最大の形式でアイコンを作成し、それを縮小すると、最良の結果が得られます。また、「アンシャープマスク」を使用して、縮小サイズのアルゴリズムではシャープネスが失われるため、縮小サイズの画像をより鮮明にする必要があります。