Was ist der beste Ansatz beim Entwerfen von Website-/App-UI-Symbolen in Photoshop?

Wie der Titel schon sagt, würde ich gerne wissen, was beim Einfügen/Verwenden eines Symbols beim Entwerfen einer Website-/App-Benutzeroberfläche am besten anzugehen ist. Soll ich es als „intelligentes Objekt“, schriftbasiertes Symbol oder Vektormaske einfügen?

Ich habe mir Tonnen von Websites in Bezug auf das UI-Design angesehen und wie scharf / pixelgenau ihre Designs sind, hauptsächlich in Bezug auf die Verwendung von Symbolen, und glaube leider, dass die meisten von ihnen gerastert sind! Obwohl die meisten SVGs verwenden, sind sie immer noch nicht so scharf, wie Sie es erwarten würden, und neigen immer dazu, verpixelte und unscharfe Kanten zu haben.

Schauen Sie sich zum Beispiel dies an;

Ich habe festgestellt, dass dies für viele Websites gilt und nicht nur für eBay! Dies gilt unabhängig davon, ob sie schriftbasierte Symbole oder SVG-Symbole verwenden.

Ich stehe oft vor diesem Problem, wenn ich ein neues Design in Photoshop beginne und es dann kodiere. Zum Beispiel finde ich manchmal, dass intelligente Objekte schärfer sind als schriftbasierte Symbole und manchmal sogar Vektormasken. Ich weiß nicht, was genau dieses Problem verursacht oder warum. Selbst wenn Sie die Größe in Illustrator ändern, passiert es immer noch und es endet immer damit, dass es NICHT im richtigen Pixel einrastet. Dasselbe gilt für schriftbasierte Symbole.

Sie werden nie scharf genug, es sei denn, Sie erstellen es mit dem Stiftwerkzeug, so wie ich es für das obige Beispiel getan habe. Aber das ist nicht immer möglich, da nicht alle Formen/Symbole einfach neu gezeichnet oder mit dem Stiftwerkzeug so einfach korrigiert werden können.

Was ist also die Lösung dafür und wie gehen Sie persönlich damit um, wenn Sie eine Benutzeroberfläche entwerfen, wenn es um Symbole geht?

Danke im Voraus.