アイコンの薄さと厚さ。 Sketch Pro、レンダリング機能、線の太さゲーム

この記事では、グラフィックパッケージからベクトルアイコンをエクスポートする際のニュアンスを分析します。 ベクトルアイコンが1年以上正常に操作されているという事実にもかかわらず、アイコンの表示が正しくない不幸な状況がまだあります：線の太さが揺れたり、ぼかしが表示されたり、フィレットが消えたり、その逆-シャープなコーナーが予想される場所にフィレットが表示されます。

3つの主な理由があります：グラフィックパッケージからアイコンをエクスポートおよび最適化する機能（またはバグ）、機能とレンダリングエラー（ChromeブラウザーまたはElectronシェルによるレンダリングに焦点を当てます）、経験の浅いデザイナーのミス。 グラフィックパッケージ自体ではすべてが良さそうに見えましたが（この場合、Sketchを検討していますが、どこにでも同様の問題があります）。




原則として、アイコンの歪みは、次の場合（およびその組み合わせ）に表示されます。

1. 細い（単一ピクセルの）要素（ぼやけたり、線が切れたり、単一ピクセルの線が太すぎたりする）。
2. 塗りつぶし領域は、設計上で空であるはずの領域を塗りつぶします。
3. Retinaディスプレイではアイコンは見た目は良いが、外部モニターを接続する場合は非常に悪い。 Retina以外のディスプレイでの品質の低下は避けられないことは明らかですが、場合によっては、「ピクセル化」が善と悪の境界を超えていることは明らかです。

サイトの場合、アイコン上の小さなkosyachkiは特に重要ではありません。 誰もがそれに慣れており、二次的な完璧主義者の問題を解決するために多くのリソースを費やすことをいとわない人はほとんどいません。 特に、頻繁に使用されるアプリケーションでは、おそらくこれはより慎重に扱われます。 特に完璧主義者に出くわした場合（「 デザインのデモンストレーションで異議を扱う 」の記事を参照）。

SVGファイルトラッシュとオプティマイザー

アンロード中にアイコンが線の一部を失った場合、ねじれ、コンポーネントに分解します-SVGファイルの中を見るのは理にかなっています。 これはプログラマにとっては問題ではありません。形式自体は、かなり明確な構造とコンテンツをレンダリングするための一連のコマンドを持つXMLファイルです。 多くの場合、単純なケースでは、このコードにより、保存時に「グラフィック」パッケージが正確に「保存」されたものを理解できます。 たとえば、分数の値を表示するには、明らかにそうではないはずです。 または追加のパス。 またはいくつかのゴミ。 手動でSVGファイルを編集することは趣味であり、見込みはありません。 しかし、多くの場合、ソースファイルによって何が間違っているのかを正確に理解することができます。

従来のSketch + Zeplinバンドルを使用すると、SVGファイルの「ゴミ」の問題がなくなるだけでなく、悪化する可能性もあります。 ポイントは、Zeplinが組み込みオプティマイザーを介してsvgファイルコードを実行する方法です。 生成するコードから判断すると、おそらくSVGOが使用されます。

ところで、この非常に多くのライブラリは、たとえばwebpack（より具体的には、すでに下位レベルでSVGOを使用しているimage-webpack-loader ）を使用してプロジェクトを構築する場合など、後の段階でアイコンが破損する原因になることが非常に多くあります。 ゴミは残る可能性がありますが、重要な要素は捨てることができます。 アイコンが壊れているという問題が突然発生した場合は、まずオプティマイザーを削除して、問題が解決したかどうかを確認できます。

さらに、Zeplinのオンラインバージョンとそのデスクトップアプリケーションは、アンロード時に異なる結果をもたらします。 最適化中、アイコンのソースコードによっては、アイコンの重要な部分が失われる場合があります。 そして、異なるバージョンの異なる方法で。 激怒します。

オンラインバージョンのZeplinのコード（Sketchからダウンロードしたアイコンの下、さらに低い）を比較します。 2番目のケースでは、コードの断片が消えていることがわかります。




そして、これは次のようなものです。

最初のアイコンはSketchから直接ダウンロードされ、2番目はZeplinのオンラインバージョンから、3番目は本来あるべきものです

レンダリングエラー

残念なことに、デザイナ、グラフィックパッケージ、またはオプティマイザだけが、曲がったアイコンのせいになっている可能性があります。 レンダリングを担当するソフトウェアに応じて、結果は大きく異なる場合があります。 たとえば、Chromeブラウザでの単一ピクセルラインのアンチエイリアス処理のレンダリングなど、厄介なエラーもあります。この問題は少なくとも2016年から知られていますが、解決策はまだありません （2018年10月）。 残念！

アイコンの純度を求める闘争における制限とライフハック

次に、レンダリングの問題を完全に解決するか、少なくとも適切な結果を達成するのに役立つ多くのヒント、制限、ライフハックを収集しました。

1.アイコン要素を変換しない

アイコンを使用した変換（スケーリング、軸に沿った回転、または水平/垂直の反射）が多いほど、コードに表示されるパス属性（または単にポイントのシーケンス）が多くなります。 より多くのパス-ブラウザによるレンダリングの最適化後、アイコンが曲がって見える可能性が高くなります。


「グループ」アイコンの代わりに-5番目のポイントに似たもの

2.要素とテキストをベクターからアウトラインに変換（アウトラインに変換）
要素を持つすべてのレイヤーを1つに結合します（図形の結合）

テキストをテキストとして残し、レイヤーを個別に残した場合、ポイントの主なシーケンス（パス）は確実にいくつかに分割され、エクスポート時にそれらは自分の心になります。

3.避妊のルール：各アイコンに名前を付ける-一意

プログラマーにとって明らかなルール。 残念ながら、経験の浅い、またはずさんすぎる創造的なデザイナーによって混乱する可能性があります。 あるアイコンの名前が別のアイコンの名前と一致する場合、Sketchはそれらを1つのオブジェクトに結合できます。 便宜上、合理的な命名システムを事前に考えてください。 たとえば、名前の形式はpopup-icon-closeです。popupはアイコンが使用されるブロック、iconはアイコン自体、closeはこのアイコンの意味です。 また、ファイル名の末尾にサイズを追加できます-たとえば、16x16。

多くのアイコンがあり、それらが複数のレイアウトで繰り返される場合、それぞれをシンボルに変換すると便利です（シンボルの作成）。 シンボル内のサイズを変更したり、色を付けたりすると、これらのパラメーターは、すべてのレイアウト上のすべてのアイコンに対して変更されます。 これらのアイコンのエクスポート設定は、シンボル内でも最適に設定されます。 アイコンだけでなく、ボタン、テキストフィールド、チェックボックスなどのすべての標準コントロールにも専門的にシンボルを使用します。

4. SVGO CompressorをSketchに直接インストールします

これは、最適化されたアイコンをSketchから直接ダウンロードできるプラグインです。 これは、最適化プロセスを制御するのに役立ちます（webpackからオプテ​​ィマイザーにそれ自体を許可しません）。 最適化のジャムがすぐに表示される場合、特に複雑でいくつかの部分で構成されている場合は、アンロード直後にアイコンのソースコードを確認できます。 しかし、ほとんどの場合、このプラグインでエクスポートすると、すべてがスムーズに進みます。

5.手動でエクスポートするときにアイコンを選択し、エクスポート可能にするプロパティをそれらに設定します。

そうしないと、エクスポート中にアイコンの一部が再び失われる可能性があります。

6.バックグラウンドで「エクスポートに含める」オプションのチェックを外します

それ以外の場合、アイコンは周囲に白い背景とともにエクスポートされます。

7.他のすべてが失敗した場合：各サイズ-独自のアイコン

これは野生のゲームです。 ベクトルアイコンは、さまざまなサイズに使用するために考案されました。 残念ながら、スケーリング後にvyrviglaznyの結果が得られる状況があります。 原則として、明確な線が必要な場所では石鹸を使用します。 これは主に、スケーリング時に一部のラインが分数のピクセル値に該当するという事実によるものです。 たとえば、ベースアイコンが16×16で、導関数が24×24である場合（2の累乗で、ほとんどの場合はすべて正常ですが、中央の縦線には例外があります）。 そのような状況では、条件に合わせることができますが、残念ながら、使用するサイズごとにアイコンを手で持って行く必要があります。

これらの7つのルールに従ってアイコンを作成すると、Zeplinプラグインを使用してもエクスポートは成功します。 しかし、アイコンの美しいsvg-sourceを取得し、ブラウザで表示されたときにアイコンがバラバラにならず、変形しない場合でも、異なる密度の画面ですべてが正常であることを保証しません。

MacBookでRetinaディスプレイのすべてをチェックしたとしましょう。 多かれ少なかれ平均的な外部モニターを接続してみてください。 ほとんどの場合、1ピクセルの線はぼやけています。 簡単な計算：4×4ピクセルの正方形の真ん中に1ピクセルの太さの線を描くと、線はピクセルの間に落ちてぼやけます。 線の太さが整数で指定されていない場合-同じこと。

これらのトラブルに関する詳細情報はこちらです。 問題を解決するオプションとして-Bjangoのアプリケーションのアイコンテンプレート：その魅力は、Android、iOS、macOS、tvOS、watchOS、Windows、Windows Phoneなどの仕様をすぐに考慮することです。少なくとも参照として使用できます。 さまざまなデバイスの仕様リストの詳細については、 Google Device Metricsをご覧ください。画面サイズ、ピクセル密度、およびユーザーの目から画面が位置するおおよその距離まで調べることができます。 そして、この問題を克服するのに役立つもう1つのことは、DPIとPPIに関するデザイナーのマニュアルです。 AndroidとiOSのデザイナー向けに、さらに微妙で実用的なテクニックを学ぶのに役立ちます。

方法：




しない方法：




ちなみに、私たちは多くのサイトやアプリケーションで単一ピクセルのアイコンを平均的な表示品質でチェックしました。そして、主に「石鹸」を見ました。 つまり、この問題を解決してアイコンを調整することは頑固なやり方（非常に時間がかかる）であるため、「調整」の決定は非常に人気があります。 2番目に人気のある解決策は、少なくとも2ピクセルの線幅を使用することです（これはGoogleが多くの場所で行っていることです）。 それにもかかわらず、プロジェクトに多大な時間を費やす頑固な完璧主義者にとって、各サイズに適合するソリューションは最も明確な結果をもたらします。



それとは別に、輪郭のレンダリングだけでなく、塗りつぶし領域も確認する価値があることに注意してください。 特に、アイコンが「塗りつぶされたアイコンとアウトライン」のペアで使用されている場合（ホバー時など）。

エクスポートアイコン（アフィニティ、イラストレーターなど）

オブジェクトをSketchに変換することを禁止すると、すべての要素をひどく描くのに時間がかかるため、一部のデザイナーにとっては、たとえばAffinityでアイコンを描いてからSketchにアップロードする方が便利です。

すべてが非常に簡単です：

1. ピクセルグリッドでアフィニティアイコンをレンダリングします！ すべて同じ：グリッド内のミスによる境界のぼやけがないようにします。
2. アフィニティでアイコンを選択し、スケッチにコピーします。
3. スケッチでは、サイズが数ピクセル以内で異なる可能性があります。次に、希望のサイズに合わせてスケールツールを使用し、線のサイズと太さが整数のままであることを確認する必要があります。
4. 要素とフォントをアウトラインに変換します。 サイズと位置をもう一度確認してください。
5. レイヤーを結合します。
6. エクスポート可能にするプロパティを設定し、アートボード上のアイコンを選択します。
7. エクスポート-出来上がり、非常に予測可能な動作をする単一のパスを持つ完璧なsvgファイルがあります。

結論

ほとんどの場合、デザイナーによるレンダリングの特性、アンロードまたは最適化、またはレンダリングのニュアンスによってアイコンに小さな歪みが生じても、苦情は発生しません。 最終的に、アイコンのほとんどはアイコンパックから取得され、「そのまま」使用されます。 しかし、微調整とフィッティングが正当化される状況があります。 たとえば、Electronプラットフォームでアプリケーションを構築していて、すべてのプラットフォームで最大限の明瞭さを実現したい場合。 いずれにせよ、アイコンを扱う一般的なスタイルにデザイナーが来るのは理にかなっています（たとえば、 簡単なチェックリストを基礎として使用できます）。

頑張って！