Icondesign Rules

Icons-AB

Hier stelle ich allen Interessierten ein UI-Iconset mit 192 Icons in zwei Größen zur Verfügung. In der PSD sind alle Icons als Pfade angelegt, können also beliebig skaliert werden. Die Icons dürfen frei für kommerzielle und nichtkommerzielle Projekte genutzt und/oder modifiziert, jedoch nicht weiterverkauft werden.

Hier das Iconset downloaden.

Als kleine Ergänzung ein paar Tipps für den Photoshop-Workflow, nämlich

5 kleine Dinge, die ich gern früher gewusst hätte:

1) Snap to Pixel

Inzwischen ein alter Hut: Beim Aufziehen von Formen bietet Photoshop die Möglichkeit, die Form am Pixelraster auszurichten. Unscharfen Kanten wird damit vorgebeugt.

2) Vektormasken

Vektormasken sind großartig, wenn man später den Ausschnitt nochmal verändern möchte – oder das UI-Design für Retina hoch- oder für Default-Displays herunterskalieren muss.

Auch unerwünschte Nebenwirkungen von Ebeneneffekten lassen sich so wunderbar kaschieren, beispielsweise das seitliche “Hervorquellen” des Dropshadows, der ggf. ausschließlich unten zu sehen sein soll. Im Beispiel links ein 90° Dropshadow nach unten, linke Kante unmaskiert, rechte Kante maskiert.

3) Addieren von identischen Ebeneneffekten

Photoshop lässt nur eine Fülloption-Instanz pro Ebene zu. Manchmal möchte man zwei oder mehr, beispielsweise für einen irregulären Verlauf – halb radial, halb linear. Dem kann man sich mit einer zweiten Ebene behelfen, deren Fläche auf 0% gestellt wird. Der zweite Effekt wird dann mittels Multiplizieren o.ä. Effekten mit der darunter liegenden Ebene verrechnet.

Im Beispiel ist die Gradient Radial Ebene zudem größer, da der Standard-Radial Verlauf oft zu klein ausfällt und sich auf maximal 150% skalieren lässt. Mit dem Trick aus 2) schneiden wir die Radialebene passend zu.

4) Füllmethode für Assets immer auf “Normal” stellen.

Multiplizieren, Ineinanderkopieren usw. lassen sich nicht in einer transparenten PNG abbilden. Ein Workaround wäre, per Multiplizieren die gewünschte Zielfarbe zu finden und diese dann mit der Füllmethode “Normal” auf den Ebenenstil zu übertragen (statt bspw. Weiß zum Aufhellen, Schwarz zum Abdunkeln).

5) Nicht-destruktive, skalierbare und gebogene Schatten

Gebogene Schatten erstelle ich gern mit einer zweiten Formebene. Dank des Formebenen-Pfades kann man die Biegung wunderbar feinjustieren.

FacebooktumblrTwitterPinterestEmailGoogle+LinkedIn

Simon Schmidt

"Mal sehn was google dazu sagt...!"

Letzte Artikel von Simon Schmidt (Alle anzeigen)