Photoshop-Tipps für Designer: Jede Woche neu

FontAwesome: Umwerfend einfaches Icon-Design

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Holen Sie sich jede Woche einen Praxistipp für mehr Produktivität und Kreativität mit Photoshop! Martin Dörsch greift tief in die Trickkiste und zeigt Ihnen wöchentlich, wie Sie mit Photoshop das Beste aus Ihren Designs herausholen können. Lassen Sie sich inspirieren – zu neuen Arbeitstechniken, Workflows und dem Ausprobieren neuer Werkzeuge! Die jeweiligen Praxisbeispiele werden komplett fertiggestellt und Sie können das Gelernte sofort für sich umsetzen.
05:14
  Lesezeichen setzen

Transkript

Heute geht es darum, wie man in Photoshop auf einen großen Fundus von Icons zugreifen kann und wie man diese Icons verwenden kann. Und zwar geht es darum, dass wir Font Awesome installieren und mit Font Awesome auf eben diese Icons zugreifen können, diese in Webdesigns, für Buttons, für Grafiken im Allgemeinen, aber auch für alles mögliche Kreative einsetzen können. Also starten wir damit, dass wir uns anschauen, was Font Awesome ist. Wenn es darum geht, dass man spezielle Icons hier in seinen Grafiken verwenden möchte, dann kommt man eigentlich an Font Awesome nicht vorbei. Ich öffne hier mal den Browser und auf der Webseite von "fontawesome.io", das ist hier diese Webseite, kann man über diesen Download-Button diese Schrift herunterladen und auf seinem Rechner installieren. Und was man hier erhält, sieht man da im rechten Bereich schon als Vorschau. Man bekommt verschiedene Icons, die man sowohl im Web, aber auch genau so in seinen Designs verwenden kann. Wenn man wissen möchte, welche Icons es gibt, kann man hier auf den Button "Icons" gehen, das habe ich schon da geöffnet. Und da gibt es so eine Art Cheat-Sheet, wo man schauen kann, welche Icons hier bei dieser Font, also bei dieser Schriftart, vorhanden sind. Ja, das einmal zum theoretischen Teil. Schauen wir uns einfach mal an, wie das Ganze jetzt in Photoshop ausschaut. Also, ich habe hier jetzt ein leeres Photoshop-Dokument und möchte da einmal die Hintergrundfarbe verändern. Ich nehme mir da einfach mal eine Farbfläche und nehme da irgend so eine Farbe. So etwas zum Beispiel. Genau. Und wechsle jetzt auf das Textwerkzeug. Und zwar kann ich jetzt, wenn ich die Schrift installiert habe, hier nach Font Awesome suchen. In meinem Fall habe ich hier jetzt noch den Filter "Schriften aus Typekit anzeigen" aktiviert. Wenn ich den wegnehme, dann sieht man, hier ist meine Font Awesome Regular ausgewählt. Wenn ich da jetzt hergehe und einmal reinklicke und da jetzt Buchstaben reinschreibe, dann sieht man, dass man nichts sieht, beziehungsweise dass man einfach nur die Icons, also die normalen Glyphen sieht vielmehr. Wie bekomme ich jetzt aber diese Icons von Font Awesome. Und zwar brauche ich dazu das Fenster "Glyphen". Das liegt in meinem Fall hier. Aufpassen! Aktuell sieht man, dass jetzt die Schrift wieder zurückgesprungen ist. Wenn ich da jetzt aber reingehe und sage, ich möchte hier die Font Awesome haben. So, die ist da oben. Dann sieht man, dass ich hier im rechten Bereich oder im unteren Bereich die verschiedenen Icons aufgelistet bekomme. Ich gehe da mal ganz nach oben Und nehme mir da mal mit einem Doppelklick ein Herz, und man sieht, dieses Icon ist sofort eingefügt worden. Das heißt, aus meinen Glyphen-Bedienfeld kann ich da jetzt verschiedene Icons bequem per Doppeklick hinzufügen. So. Und das kann ich da auch zumachen. Mit "Cmd+Enter" bestätige ich das Ganze jetzt. Und ich kann diese Icons jetzt beispielsweise auch weiter auseinander schieben, denn im Wesentlichen sind das ja einfach nur Schriftzeichen. Im Ebenenbedienfeld sieht man jetzt so ein kleines Fragezeichen, das heißt einfach, dass diese Zeichen jetzt keine Vorschau-Icons zur Verfügung gestellt bekommen. Das macht aber im Wesentlichen nichts, denn das kann ich ja ignorieren, ich sehe es ja ohnedies hier auf meiner Ebene. Ja, und das Schöne ist, dass ich jetzt diese Icons für mein Design verwenden kann und die jetzt ganz normal wie Schriftzeichen eben skalieren kann, drehen und was auch immer. Also wenn ich da jetzt hergehe und sage, ich möchte die zum Beispiel ganz groß haben, bestätige das hier jetzt mit Enter, und lege das da jetzt so einmal in die Mitte rein, oder ich möchte ein Zeichen löschen, dann kann ich das so jederzeit ganz schnell und bequem machen. Das heißt, ich bin hier absolut flexibel und kann mit diesen Elementen arbeiten, kann die einfach so einstellen, wie ich das haben möchte. Wenn ich da jetzt beispielsweise hier so einen Effekt, einen Ebeneneffekt drauf anwenden möchte, ich sage mal "Abgeflachte Kante und Relief". Das Ganze nach unten, ist hier eh schon interessant eingestellt. Das passt. Dann hier soll es schwarz sein. Hier eine weiße Kante. Dann bestätige ich das mit "OK". Nehme die Flächendeckkraft raus. Dann sieht man, dass ich hier eben mit dieser Font dieses Ergebnis erzielt habe. Jetzt kann ich natürlich jederzeit noch dieses Icon hier löschen und über das Glyphen-Bedienfeld, beispielsweise... ich mache mal so was da oder so was da. Da würde sich jetzt mein Kleiner drüber freuen, und kann das jetzt wiederum in der Mitte anordnen. Zack. Und habe das jetzt so wirklich sehr sehr schnell umändern können. Das heißt, über Font Awesome kann ich auf ganz ganz viele Icons zugreifen, die beliebig skalieren, ich kann sie sehr sehr schnell und intuitiv auch für Button-Designs oder Ähnliches anwenden und habe so jederzeit einen Fundus an sehr sehr interessanten Icons zur Verfügung.