
再描画されたアイコンとは何ですか? これはそのような画像であり、色の変更、つまり塗り直しが簡単です。 これを実現するにはいくつかの方法があります。
Iconzaプロジェクトの作成時に使用したシンプルなテクノロジーについて
説明します(
AutoCadabraの車は同じテクノロジーを使用して
作成されました)。 実際、これはユーザーがアイコンの色を変更し、必要なグラフィックファイルを生成できるWebアプリケーションです。
たとえば、再描画されたフォルダーアイコンを描画します。 お気に入りのベクターエディターを使用して描画します。

この絵を再描画可能にする方法は? 秘密は、画像が2つのラスターファイルで構成されていることです-上部の半透明のハイライト/シャドウと下部の色付きの背景。 カラーベースが半透明のマスクを「貫通」していることがわかります。 マスクは次のようになります。

しかし、そのようなマスクを描く方法は? とても簡単です。 カラーベースを取り、その上にまぶしさと影を描く必要があります。
ブライトニングマスク(わかりやすくするために黒の背景に表示)、ダークニングマスク、色付きのバッキング明るくするマスクでは、異なる透明度を持つ白色のみが使用され、暗くするマスクでは黒色のみが使用されます。 背景の色は重要ではありません-どれを選択しても、変更されます。 複数のアイコンを描画する場合、単一の「テスト」色を選択する方が適切です。
なぜ明るい層と暗い層の両方が同時に必要なのですか? ユーザーが選択する色はわかりません。アイコンは常に見栄えが良いはずです。 ここでは、たとえば、ライトニングレイヤーのみを描画し、ユーザーは素材の白色を選択しました。 大惨事! 平らな、絶対に白いアイコンが表示されます。 同じ話ですが、逆もまた同様です。 そして、暗い層と明るい層がある場合、結果は悪くありません:
完全に白と黒のアンダーレイのアイコンもちろん、ほぼ白(明るい灰色)とほぼ黒(暗い灰色)を選択することをお勧めします。アイコンはよりボリュームがあり、キュートになります。 しかし、極端な値ではかなりうまくいきます。
暗くするレイヤーと明るくするレイヤーは同じファイル内にあるため、アイコンが汚れて見える危険があります-黒が白に重なって灰色になり、素材の「色」が許可されません。 これは、描画時に考慮する必要があり、複数のレイヤーを重ねることはできません。 Iconzaのアイコンレイヤーの順序は次のとおりです。

- フォルダーの半分からの影。 明るいレイヤーでは、この穴の形でマスクに「穴」が開けられます。 (カラーブラック、不透明度10%)
- 低調光バルク層。 ストロークの上にあり、オーバーラップしている必要があります。 その後、ストロークは下に向かって暗くなります。 (黒、40%)
- フォルダーの半分をフレアします。 (白、40%)
- バルク層を明るくします。 エッジをぼかします(フェザー3ポイント)。 (白、65%)
- ストロークのアイコン。 任意の色にストロークが含まれることを保証する非常に重要なこと。 (グレー、50%)
- 周囲の軽いストローク。 アイコンをより明確で鮮やかにします。 (白、25%)
- 上部の明るいバルク層。 減光と組み合わせて、「照明」アイコンが上に示されています。 (白、40%)
- アイコンの影(黒、25%)
- 色付きの背景。 (任意の色、100%)
この退屈なスキームでは不十分な場合は、
ソースをAI形式でダウンロードできます。
次に、アイコンから背景を削除し(隣に置く)、Photoshopでベクターファイルをラスタライズする必要があります。 Iconzaの秘密のメカニズムが簡単な追加で1つのファイルに接着する非常に魔法の写真を入手しました。