Kategorien
Essentials Icons & Fonts Inspiration Showcases Webdesign

UI mit Hui-Faktor: 40 hochwertige Schaltflächen und PSD-Tipps für eigene Buttons

Der Button ist ein kleines, doch recht wichtiges Designelement einer Website. Oftmals soll er eine Aktion des Besuchers als „Call-To-Action“ auslösen, muss also gut sichtbar und selbsterklärend sein. Wir haben gleich 40 sehr gute Photoshop-Tutorials zusammengestellt, die zu eleganten, minimalistischen und manchmal auch verspielten Ergebnissen führen. So gelangen Sie zu Buttons, die etwas abgewandelt sofort für eigene Projekte eingesetzt werden können. Wie gewohnt, haben wir unsere Sammlung um einige eigene Tipps für den Photoshopper ergänzt…

Quick Tip: Design a Pretty Dropdown Button in Photoshop

Designer: Patrik Larsson
Website: webdesign.tutsplus.com

photoshop-buttons1

© Patrik Larsson


Photoshop Calculater Button Logo Icon

Designer: adobeperson.com
Website: adobeperson.com

photoshop-buttons2

© adobeperson.com

Create an icon of the short message in several simple steps (Original Tutorial)

Designer: 4-designer.com
Website: 4-designer.com

photoshop-buttons3

© 4-designer.com

Glossy-Style Carbon Fibre Navigation Buttons

Designer: Photoshop Star Staff
Website: photoshopstar.com

photoshop-buttons4

© Photoshop Star Staff

Photoshop For Beginners: Creating buttons for web

Designer: Sebastiano
Website: wegraphics.net

photoshop-buttons5

© Sebastiano

Learn To Make Photo-Realistic Volume knob in Photoshop

Designer: Shaina
Website: tutorialized.com

photoshop-buttons6

© Shaina

Deep Analysis on How to Create a High-precision Button

Designer: 4-designer.com
Website: 4-designer.com

photoshop-buttons7

© 4-designer.com

Design a Delicious, Shining Circle Play (Web) Button in Photoshop

Designer: psdvault.com
Website: psdvault.com

photoshop-buttons8

© psdvault.com

Create beautiful buttons in Photoshop

Designer: thethemefoundry.com
Website: thethemefoundry.com

photoshop-buttons9

© thethemefoundry.com

Glossy buttons tutorial

Designer: AlonDiviX
Website: alondivix.deviantart.com

photoshop-buttons10

© AlonDiviX

 

Dr.Web Buttontrend #1: Wie gezeichnet

Eine Option, wie ein Button mal ganz anders wirken kann, ist diesen von Hand zu zeichnen oder die Zeichnung in Photoshop oder Illustrator zu simulieren. In Photoshop erstellen Sie einen Pfad, den Sie mit einer passenden Werkzeugspitze nachzeichnen lassen. Dazu gehen Sie im Pfadbedienfeld unten auf die Schaltfläche Pfadkontur mit Pinsel füllen.

buttontrend1

 

Design a Beautifully Detailed Web Button

Designer: Liam McCabe
Website: webdesign.tutsplus.com

photoshop-buttons11

© Liam McCabe

Clean White Navigation Bar

Designer: James Hewett
Website: photoshoptutorials.ws

photoshop-buttons12

© James Hewett

Professional Menu Button

Designer: Photoshop Star Staff
Website: www.photoshopstar.com

photoshop-buttons13

© Photoshop Star Staff


Create a Nice Stylish Glossy Button in Photoshop

Designer: coregfx.org
Website: coregfx.org

photoshop-buttons14

© coregfx.org

Blue on Black Navigation Bar

Designer: James Hewett
Website: photoshoptutorials.ws

photoshop-buttons15

© James Hewett

Create a Wii Web Header in Photoshop

Designer: originmaker.com
Website: originmaker.com

photoshop-buttons16

© originmaker.com

Glass Button
Photoshop Tutorial

Designer: yourphotoshopguide.com
Website: yourphotoshopguide.com

photoshop-buttons17

© yourphotoshopguide.com

Principles for Successful Button Design

Designer: Pete Orme
Website: webdesign.tutsplus.com

photoshop-buttons18

© Pete Orme

Create a Realistic Telephone Keypad Using Layer Styles

Designer: Jim Nielsen
Website: design.tutsplus.com

photoshop-buttons19

© Jim Nielsen

Photoshop Buzline Button Logo Icon

Designer: goodbus
Website: tutorialagent.com

photoshop-buttons20

© goodbus

 

Dr.Web Buttontrend #2: Grundform

Ein leichter Weg hin zum eigenen Button führt über eine Grundform, die Sie etwa über das Abgerundete-Rechteck-Werkzeug aufziehen. Die Farbe bestimmen Sie über die aktuelle Vordergrundfarbe, die Rundung in der Optionsleiste unter Radius. Leicht können Sie Ihre Schaltfläche beschriften und mit weiteren Formen kombinieren, für einen schönen 2D-Look im Flat-Design.

buttontrend2

 

Web Button Making Tutorial 1

Designer: easydisplayname
Website: easydisplayname.deviantart.com

photoshop-buttons21

© easydisplayname

RSS button

Designer: adobetutorialz.com
Website: adobetutorialz.com

photoshop-buttons22b

© adobetutorialz.com

Design a Textured Button in Photoshop

Designer: Caleb Kimbrough
Website: bittbox.com

photoshop-buttons23

© Caleb Kimbrough

Perfect Shine Button or Icon

Designer: boon
Website: boonage.pjss2.net

photoshop-buttons24

© boon

Design panic button logo icon in photoshop

Designer: gnews
Website: adobeperson.com

photoshop-buttons25

© gnews

Quick Tip: Create a Round Switch Button in Photoshop

Designer: Paul Flavius
Website: design.tutsplus.com

photoshop-buttons26

© Paul Flavius

Stylish Metallic Button in Photoshop

Designer: abduzeedo
Website: abduzeedo.com

photoshop-buttons27

© abduzeedo

Glossy Web 2.0 Button

Designer: avivadirectory.com
Website: avivadirectory.com

photoshop-buttons28

© avivadirectory.com

How to Design an Inset Button in Photoshop

Designer: paper-leaf.com
Website: paper-leaf.com

photoshop-buttons29

© paper-leaf.com

Nice ‘n’ Simple Subscribe Badges

Designer: Photoshop Star Staff
Website: photoshopstar.com

photoshop-buttons30

© Photoshop Star Staff

 

Dr.Web Buttontrend #3: Buttonserie

Sehr praktisch ist auch die Buttonserie. Wir sparen uns Zeit bei der Umsetzung und gehen sicher, dass alle Buttons gut zusammen passen. Eine Grundform wird dazu unterteilt und mit einigen Icons ausgestattet, die komplexer sein können oder wie hier, eher minimalistisch. Selbst einen Mouseover-Zustand können Sie schön in Photoshop simulieren.

buttontrend3

 

Photoshop Tutorials for Beginners – How To Create Simple Flat Button

Designer: Dropcolors Studio
Website: youtube.com

photoshop-buttons31

© Dropcolors Studio

Photoshop Tutorial: Interface Style – Indented Rim

Designer: Stratzeh
Website: youtube.com

photoshop-buttons32

© Stratzeh

Animated Glowing Button in Photoshop CS6 | IceflowStudios

Designer: Howard Pinsky
Website: youtube.com

photoshop-buttons33

© Howard Pinsky

Photoshop Tutorial: Create a Glossy Button

Designer: RiverCityGraphix
Website: youtube.com

photoshop-buttons34

© RiverCityGraphix

Create a Simple Record Button — Photoshop Tutorial

Designer: tutvid
Website: youtube.com

photoshop-buttons35

© tutvid

Photoshop Tutorial #179 – Creating a shiny button with inset text

Designer: Art Starter
Website: youtube.com

photoshop-buttons36

© Art Starter

Adobe Photoshop Tutorial – Interface And Orb Tutorial – FPST

Designer: FlewDesigns – Photoshop Tutorials
Website: youtube.com

photoshop-buttons37

© FlewDesigns – Photoshop Tutorials

Cable/Tube – Photoshop-Tutorial

Designer: Grufix-Board.de – Dein Tutorial-Kanal
Website: youtube.com

photoshop-buttons38

© Grufix-Board.de – Dein Tutorial-Kanal

Create Slick Web Tags — Photoshop CS5 Tutorial

Designer: tutvid
Website: youtube.com

photoshop-buttons39

© tutvid

Photoshop: Carbon Fiber Power Button | IceflowStudios

Designer: Howard Pinsky
Website: youtube.com

photoshop-buttons40

© Howard Pinsky

(dpe)

Kategorien
Best-of HTML/CSS/PSD-Ressourcen Essentials Icons & Fonts Inspiration

Konturiert: 30 kostenlose GUI, Icons und Website PSD-Templates

Trends im Webdesign kommen und gehen wie in der Modewelt. Gute Designer stürzen sich nur auf solche Trends, die Substanz und Wert haben. Dieser Tage unumgänglich ist das Flat Design. Microsofts Metro UI startete den Trend, aber erst durch Apples iOS7 erhielt er einen mächtigen Schub. Seitdem präferieren Designer rund um den Erdball flache Formen, einfache Illustrationen, minimale Farben, starke Typografie und verzichten dafür auf alles, was irgendwie pompös wirken könnte. Flat Design zieht sich durch alle Bereiche. Nicht nur Icons, das gesamte Interface erstrahlt im flachen Glanze.

Der Trend hin zu den sogenannten Ghost-Buttons gehört ebenfalls in diese Kategorie. Diese Art, Schaltflächen zu gestalten, verzichten auf jeden plastischen Effekt und stellt Buttons im Grunde als umrandete Textboxen dar, die sich on hover subtil verändern. Und obwohl diese Schaltflächen zumeist transparente oder semi-transparente Hintergründe aufweisen, fügen sie sich gut auch in Videos oder vollillustrierte, farbenfrohe Websites ein. Zusätzlich ist Typografie hier ein wesentliches Element.

Unsere heutige Sammlung widmet sich den genannten Trends. Wir haben drei Hauptbereiche gefüllt, nämlich grafische User-Interfaces, Icons und komplette Website-Layouts. Viel Spaß beim Stöbern…

The White Stripes UI Kit 

white stripes

Erstellt von/für: Valik Boyev
Lizenz: Frei für die persönliche und kommerzielle Nutzung

Elegant Outline GUI Set part 1 

outline ui

Erstellt von/für: Land-of-web
Lizenz: Frei für die persönliche und kommerzielle Nutzung

ios7 style ui kit 

ios7

Erstellt von/für: Mahmoud Fahim and Mohamed Marakshy
Lizenz: Attribution, nicht-kommerziell

Reach UI Kit 

reach ui

Erstellt von/für:Piotr Makarewicz
Lizenz: Frei für die persönliche Nutzung

Flat Style & iOS 7 Line Style UI Kit

flat ui

Erstellt von/für: Graphicsfuel
Lizenz: Frei für die persönliche und kommerzielle Nutzung

Simple UI Pack 

simple ui

Erstellt von/für: Samuel James Oxley
Lizenz: Attribution, nicht-kommerziell

Mobile Wireframe Kit 

mobile ui

Erstellt von/für: CssAuthor
Lizenz: Frei für die persönliche und kommerzielle Nutzung

Flatimus iOS 

flatimus

Erstellt von/für: Satys
Lizenz: Frei für die persönliche Nutzung

Flat + Transparent UI 

transparent

Erstellt von/für: Monkee-boy
Lizenz: Frei für die persönliche und kommerzielle Nutzung

Vector Wireframe Kit & Symbol Library

vector wireframe

Erstellt von/für: Giles Newman
Lizenz: Attribution Share Alike.

Basiliq 

basiliq

Erstellt von/für: CloudCastleGroup
Lizenz: Frei für die persönliche und kommerzielle Nutzung

Line and Vector UI

line

Erstellt von/für: Saqib Ahmad
Lizenz: Attribution, nicht-kommerziell

Free Agency Web Template 

agency

Erstellt von/für: CssAuthor
Lizenz: Frei für die persönliche und kommerzielle Nutzung

Minimalist PSD Landing Page Template 

minimal

Erstellt von/für: Techandall
Lizenz: Frei für die persönliche Nutzung

Moose Free Homepage 

moose

Erstellt von/für: Elemisfreebies
Lizenz: Frei für die persönliche Nutzung

Elegant Coming Soon Page 

coming

Erstellt von/für: Land-of-web
Lizenz: Frei für die persönliche und kommerzielle Nutzung

One Page Portfolio 

one page

Erstellt von/für: Techandall
Lizenz: Frei für die persönliche Nutzung

BrandaLoka 

banda

Erstellt von/für: Andreansyah Setiawan
Lizenz: Attribution, nicht-kommerziell

Treehouse 

treehouse

Erstellt von/für:Freebiesxpress
Lizenz: Frei für die persönliche Nutzung

Simple Line Icons 

simple line

Erstellt von/für: Mirko Monti
Lizenz: Frei für die persönliche Nutzung

Icons

squared

Erstellt von/für: Martin J.Berthelsen
Lizenz: Frei für die persönliche Nutzung

iOS7 Vector Icons 

ios7 icons

Erstellt von/für: Streamlineicons
Lizenz: Frei für die persönliche Nutzung

Pictograms Giveaway 

picto

Erstellt von/für: Jamila Hodges
Lizenz: Attribution, nicht-kommerziell

Nasty Icons 

funny

Erstellt von/für: Nastyicons
Lizenz: Frei für die persönliche Nutzung

Stripes & Co – A Line-Styled Icon Set 

speckyboy

Erstellt von/für: Speckyboy
Lizenz: Frei für die persönliche und kommerzielle Nutzung

Simple Weather Icons 

weather

Erstellt von/für: Dan Vierich
Lizenz: Lizenzfrei

Vector Outline Icon Set 

icons2

Erstellt von/für: Techandall
Lizenz: Frei für die persönliche Nutzung

Gicons

gicons

Erstellt von/für: Designbeep
Lizenz: Lizenzfrei

Icon Square Ilepixeli Set

squared3

Erstellt von/für: Piotr Makarewicz
Lizenz: Frei für die persönliche Nutzung

Thin Rounded Icons 2 

round

Erstellt von/für: Sebastien Gabriel
Lizenz: Frei für die persönliche Nutzung

(dpe)

Kategorien
Essentials Icons & Fonts

Font Town: Mehr als 30.000 Fonts zum freien Download

Font Town aus Australien ist nicht direkt ein neuer Dienst. Er existiert seit 2009, macht aber derzeit verstärkt auf sich aufmerksam und wurde kürzlich nicht nur funktional deutlich erweitert. Vor allem die Zahl der angebotenen Fonts ist in letzter Zeit stark gestiegen, mittlerweile finden sich mehr als 30.000 Schriftarten im gut organisierten Portfolio. Alle Schriften sind freie Downloads, das Handling des Dienstes ist intuitiv möglich, die Verwendung der Schriften selbst ist dabei nicht durchgängig so einfach. Wir haben uns Font Town, die Stadt der Schriftarten, näher für Sie angeschaut.

fonttown-homepage

Font Town: Nüchterner Look erleichtert die Handhabung

Wer Font Town zum ersten Mal besucht, wird nicht vor Ehrfurcht erstarren. Das Design der Seite ist nicht eben das, was man als State of the Art bezeichnen würde. Zumindest aber ist das schlichte Layout so auf mobilen Geräten ordentlich bedienbar, wenn man auch seltener von derlei Equipment aus das Bedürfnis verspüren dürfte, eine Schriftart zu laden. Im Planungsprozess, der zumindest bei mir gern mal in freier Natur stattfindet, ist die Mobiltauglichkeit jedoch durchaus nützlich.

Font Town ist seit seinem Start im Jahr 2009 auf über 30.000 Fonts gewachsen, was hauptsächlich damit zu tun haben dürfte, dass hier Font-Entwickler selber ihre Schriftarten bereitstellen können. Nach Aussagen der Betreiber handelt es sich um das größte Font-Angebot dieser Art in den Weiten des Netzes. Nachdem jeder Font-Entwickler seine Werke per einfachem Upload beisteuern kann, ist allerdings nicht nur schnelles Wachstum vorprogrammiert.

Font Town: Viel Auswahl, aber auch viel Aufwand mit Lizenzierungsfragen

Ebenso führt diese Vorgehensweise dazu, dass der interessierte Verwender der Schriftarten nach Art eines Luchses aufpassen muss, keine Lizenzbestimmungen zu verletzen. Font Town sichert sich selber noch weiter ab, indem sie sich von der Verbindlichkeit der auf den jeweiligen Detailseiten zum Font getroffenen Aussagen zur Lizenz distanzieren. Stattdessen verweisen Sie auf die jeweiligen Entwickler der Schriftart, auf deren Profilseiten, nötigenfalls auf deren verlinkten Webseiten man sich nochmals absichern sollte. Jedem Download, der in jedem Fall von Font Town gehostet wird, ist überdies eine Readme beigefügt, die auf die Bestimmung des DMCA verweist, wonach sich Entwickler, die Lizenzrechte verletzt sehen, direkt mit dem Löschverlangen an den Betreiber wenden können.

fonttown_font-detailpage

Zunächst fand ich diese Vorgehensweise etwas unsympathisch, hinterließ sie doch von Beginn an den Eindruck, sich auf dünnem Eis zu befinden. Bei näherem Hinsehen gelangte ich schließlich doch zu dem Eindruck, dass es sicherlich besser ist, im Vorfeld möglicherweise überdeutlich, aber besser als gar nicht auf Problempotenziale hinzuweisen. Schaut man sich auf Font Town um, stellt man schnell fest, dass die Entwickler in ihrer Mehrzahl klare Vorgaben machen, an die man sich recht problemlos halten kann.

fonttown_author_profile

Ausnahmen bestätigen die Regel. So gibt es auch Entwickler, die geben vor, in welchen Themenzusammenhängen ihre Schriften benutzt werden dürfen. Ein Entwickler erlaubt die Verwendung beispielsweise nicht, wenn es um Projekte mit Fernsehbezug geht. Das ist schon schwer nachvollziehbar. Von solchen Fonts lasse ich dann lieber ganz die Finger.

Font Town: Download als OTF und/oder TTF

Der Download der Schriftarten erfolgt unkompliziert über einen Download-Link, der an mehreren Stellen unobfuskiert platziert ist. Ein Klick darauf startet den Download ohne Umschweife und sorgt dafür, dass ein Zip-Archiv auf der lokalen Festplatte landet. Dieses Zip-Archiv beinhaltet stets alle vorhandenen Varianten der gewählten Schriftart. Sie müssen nicht jeden einzelnen Schnitt oder das favorisierte Format einzeln laden.

Damit Sie nicht Font um Font einzeln anklicken müssen, führte Font Town die sogenannten Swatches ein. Dabei handelt es sich um eine Art Warenkorb, bei Stockfotos als Lightbox bekannt, in der die gewünschten Schriftarten per einfachem Klick zwischengespeichert werden können.

fonttown-swatch-example

Ist man mit seinem Streifzug durch Font Town fertig, können die in den Swatches gelagerten Fonts einer nach dem anderen herunter geladen werden. Für die nahe Zukunft ist eine Funktion geplant, die es erlaubt, alle Fonts aus den Swatches in einem Rutsch zu laden. Selbstverständlich lassen sich versehentlich in den Korb gelegte Fonts unkompliziert daraus entfernen. Ebenso können Sie mit Klick auf "Clear" den gesamten Korb entleeren.

Font Town: Registrierung nicht zwingend, aber vorteilhaft

Dieser ist indes ohnehin bei Ihrem nächsten Besuch wieder leer, es sei denn, Sie legen einen Account auf Font Town an. Dieser ist für das reine Downloaden nicht erforderlich, sondern nur dann zwingend, wenn man Fonts uploaden oder Kommentare hinterlassen will. Eingeloggt bleiben aber auch die angelegten Swatches erhalten.

Fonts, die Sie uploaden, werden übrigens nicht automatisch zum Download frei gegeben, sondern müssen erst einen redaktionellen Prozess durchlaufen, bei dem im Wesentlichen geprüft wird, ob die Wahrscheinlichkeit einer Urheberrechtsverletzung besteht und natürlich, ob der Font eine Qualität aufweist, die es erlaubt, ihn guten Gewissens unters Volk zu bringen.

Font Town macht den Zugang zu den Schriftarten einfach

Bei über 30.000 Fonts bedarf es schon einer vernünftigen Organisation, sonst ist kein geordnetes Suchen und Finden möglich. Font Town bietet mehrere gute Wege, den gewünschten Font zu finden.

Zum einen verfügt der Dienst über eine gute Kategorisierung des Gesamtangebots. Neben den naheliegenden Kategorien mit Unterkategorien, sorgt eine Kategorie namens Foreign dafür, dass sich Schriften in exotischen Zeichensätzen, etwa japanisch oder arabisch, nicht in den Tiefen des Portfolios verstecken.

fonttown-browse

Neben Kategorien gereichen Schlagwörter, sog. Tags ebenfalls zur Suche. Ein Klick auf einen Tag zeigt alle entsprechend verschlagworteten Fonts an. Wer sich gern am Mainstream orientiert, findet auf Font Town die unvermeidlichen Kategorien "Top Downloaded" und "Most Liked". Veteranen der Plattformen werden sich am ehesten für "New Fonts" interessieren.

Aber nicht nur die vorgegebenen Wege wissen zu überzeugen, auch die freie Suchfunktion führt zu vernünftigen Ergebnissen, wie ich überprüfen konnte, als ich eine Schriftart für einen Flyer zu einer (Pseudo-)Strandparty suchte und dabei den Begriff "beach" verwendete. Sehen Sie selbst:

fonttown-beachfont

Das Suchergebnis lässt sich weiter verfeinern, indem man an verschiedenen Parametern dreht. So könnten Sie direkt bestimmte Lizenzen und Formate für die Suche vorgeben. Allerdings, angesichts des weiter oben zu Lizenzen gesagten, ist das nur bedingt aussagefähig, hilft aber wenigstens schon mal bei der groben Vorauswahl.

fonttown-filter

Font Town: Ist das benötigte Sonderzeichen enthalten?

Leider ist nicht einfach ersichtlich, welchen Umfang die jeweilige Schriftart hat. Verfügt sie über Sonderzeichen und wenn ja welche? Hierzulande geht praktisch kein Font ohne Umlaute, sobald man ihn nicht nur für kurze Überschriften benötigt.

Um sicherzustellen, dass sich eine Schriftart auch insofern eignet, als sie die benötigten Zeichen beinhaltet, empfehlen sich zwei Wege. Zum einen können Sie auf der Detailseite zu jeder Schriftart einen eigenen Text, sinnvollerweise mit Umlauten, eingeben und per Klick auf "Update" im Formular "Live Preview" anzeigen lassen. Auf der Detailseite lassen sich zusätzlich die im jeweiligen Font enthaltenen Glyphen und Ligaturen ansehen.

Noch besser ist, dass es die Live Preview auch für Ergebnislisten gibt. Oberhalb der Liste geben Sie wieder Ihren Vorschautext ein und nach einem Klick auf Update sieht die Liste beispielsweise so aus:

fonttown-uebersichtlich

Alles in allem kann ich Ihnen Font Town ans Herz legen. Was mir besonders gut gefällt, ist der unverschleierte Download. Bei anderen Diensten dieser Art finden sich allzu häufig ein halbes Dutzend Downloadlinks, von denen dann fünf Werbeumleitungen sind und nur einer, meistens der unauffälligste, tatsächlich zum gewünschten Erfolg führt.

Für die Suche nach guten Fonts für Ihr Printdesign machen Sie sich einen Besuch bei Font Town zur Gewohnheit. Schaden kann es jedenfalls nicht…

Links zum Beitrag

Kategorien
(Kostenlose) Services Essentials Icons & Fonts

Glyphter: Mit dieser kostenlosen Web-App bauen Sie im Handumdrehen Ihren eigenen Icon Font aus beliebigen SVGs

Glyphter.com ist einer dieser Dienste, der mich aus dem Stand überzeugte. Er ist sehr einfach zu bedienen, arbeitet komplett fehlerfrei, sieht schick aus und hält auch ansonsten alle seiner Versprechen. Noch dazu ist er kostenlos nutzbar. Was könnte man mehr wollen? Lesen Sie weiter und sehen Sie, wie Sie Ihren eigenen Icon Font aus beliebigen SVGs erzeugen und das in einer Zeit, in der eine Senseo eine Tasse Kaffee brüht.

glyphr_prefilled_icons

Glyphter arbeitet mit jeder SVG und unterstützt bekannte Icon Fonts

Glyphter sieht auf den ersten Blick aus wie eine an Kinder gerichtete Kreation aus dem Hause Disney. Lebendige Farben, große Schrift, einfache Formen, ein knuddeliges Maskottchen – alles da für kleine Prinzen und Prinzessinnen…

Und ich muss zugeben, ich bin bei solchen einfachen Interfaces stets skeptisch. Zu oft musste ich schon erleben, dass sich diese Einfachheit auch im Featureset und dem übrigen Gesamtbild niederschlägt. Häufig wird eine zu einfache UI der Komplexität des Featureset auch nicht gerecht, so dass sich der vermeintliche Vorteil ins Gegenteil verkehrt. Aber, dass muss ich einräumen, das gilt alles nicht für Glyphter. Die UI passt perfekt zum Featureset. Eine Dokumentation oder auch nur eine kurze Einleitung ist gar nicht erforderlich.

Haben Sie Glyphter geöffnet, haben Sie im Wesentlichen zwei Wahlmöglichkeiten. Entweder klicken Sie das große Buch-Icon an der rechten unteren Ecke des Browserfensters. Auf diese Weise öffnen Sie eine Palette der populärsten Icon Fonts. Etwa ein halbes Dutzend Schriften der Kaliber Linecons, Font Awesome, Entypo und einige andere stehen bereit. Wählen Sie ein Icon aus und ziehen es mit gedrückter Maustaste auf die Mitte des Browserfensters, wo ein rötliches Grid darauf wartet, mit Icons befüllt zu werden. Legen Sie das gewählte Icon in einem der leeren Quadrate ab.

Oder klicken Sie ein leeres Quadrat direkt an. Auf diese Weise öffnen Sie den Öffnen-Dialog Ihres lokalen Dateisystems. Jetzt bewegen Sie sich zu dem gewünschten SVG-File, wählen es per Klick aus und bestätigen den Button "Öffnen". Ebenso funktioniert es, wenn Sie ein SVG mit der Maustaste aus einem Verzeichnis auf das Grid ziehen und auf einem leeren Quadrat los lassen. Diese Methode führt zum selben Ergebnis, ist aber viel schneller, jedoch naheliegenderweise nur für größere Auflösungen geeignet, in denen man zumeist eh nicht mit dem Browser in voller Bildschirmauflösung unterwegs ist.

Ist das Symbol aus dem gewählten Icon Font oder dem übergebenen SVG dann geladen, zeigt es sich als kleine Preview innerhalb des vormals leeren Quadrats. Hovern Sie mit der Maus über die Preview, erscheinen verschiedenen weitere Symbole. Mit einem Klick auf das sichtbar werdende X löschen Sie das Icon wieder, während das Stift-Symbol einen Editor auf der linken Seite des Browserfesters öffnet.

glyphr_edit_fonticon

Der Editor erlaubt Ihnen den Zugriff auf jeden einzelnen Pfad innerhalb des SVG. Eine Reihe per Schaltfläche erreichbarer Befehle bietet vielfältige Manipulationsmöglichkeiten. So können Sie Pfade löschen, bewegen, spiegeln, rotieren und skalieren. Auf diese Weise verändern Sie die Piktogramme bis zur Unkenntlichkeit, wenn Sie mögen.

glypher_edit_svg

Haben Sie Ihre Icons dann schlussendlich auf dem Grid verteilt und – nicht notwendigerweise – bearbeitet, geben Sie Ihrem Font einen Namen, klicken auf “Download Font” und warten Sie auf den Download, der als TTF, also im True Type Format erfolgt. Vor dem Download wird Ihnen angeboten, einen Account anzulegen, was Sie nicht tun müssen. Tun Sie es aber, werden Ihre Fonts auf der Plattform gespeichert und können so immer wieder von Ihnen bearbeitet werden, ohne dass Sie jedesmal von vorn beginnen müssen. Interessiert Sie diese Option nicht, klicken Sie “Just Download” und Ihr TTF sollte sich unverzüglich auf den Weg zu Ihnen machen.

Glyphter.com kann komplett kostenlos verwendet werden.

Kategorien
Essentials Icons & Fonts

Total Recall #5: 45+ grandiose freie Web- und Icon-Fonts

Im fünften Teil unserer Serie „Total Recall“ widmen wir uns freien Web-Fonts und ebenso freien Icon-Fonts. Für die Font-Nutzung im Web haben wir die Lizenz jeweils mit angegeben.

Kategorien
Essentials Freebies, Tools und Templates Icons & Fonts

Iconion: Neues Tool konvertiert Icon-Fonts zu Icon-Dateien

Icon-Fonts sind klar auf dem Vormarsch. Die Vorteile liegen auf der Hand. Auch hier bei Dr. Web haben wir uns schon mehr als einmal damit beschäftigt. Natürlich ist es sinnvoller, einfach einen Font einzubetten und selektiv zu nutzen, als mit einer großen Zahl an Einzel-Icons in unterschiedlichen Auflösungen oder mehr oder weniger großen Sprites zu arbeiten. Ein Font mit allen Icons in beliebiger Auflösung, stets knackescharf, egal ob auf HiDPI-27" oder dem iPhone ist interessant. Alle sind zufrieden. Im Prototyping sieht die Sache dann weniger schön aus. Sicherlich, es gibt für jeden mir bekannten Web-Font auch eine Desktop-Variante, aber das Handling ist nicht ganz einfach und editieren lassen sich die Icons auch nicht. Mit Iconion tritt ein neues Werkzeug an, das die Umwandlung von Piktogrammen aus Icon-Fonts in einzelne Icon-Dateien ermöglicht. Besonders die Bearbeitungsmöglichkeit ist der Knaller…

iconion-landing-page

Iconion: Icon-Design ganz einfach

Zum jetzigen Zeitpunkt steht Iconion als kostenloser Download für Windows zur Verfügung. Eine Version für Mac OSX ist nach Angaben der Entwickler in Arbeit. Nachdem man den Download und die Installation aus dem rund 19 MB schweren Archiv hinter sich gebracht hat, lächelt einem diese simple UI entgegen.

iconion-glass-icons

Im linken Drittel der Anwendungsoberfläche finden Sie die populären Icon-Fonts Typeicons, Linecons, Font Awesome und Entypo. Aus diesen Beständen können Sie Icons zur Bearbeitung wählen. Künftige Versionen von Iconion sollen mit beliebigen Symbol-Fonts arbeiten können. Derzeit ist diese Funktionalität, anders als es die Website des Projekts suggeriert, nicht gegeben. Hat man ein Icon gewählt, wird es im mittleren Bildschirmbereich angezeigt. Einer der Styles aus dem rechten Fensterdrittel ist dann bereits zur Anwendung gelangt.

Es war dieser Styles-Bereich, der mich direkt begeisterte. Derzeit kann man zwischen 31 Styles wählen. Ein Style ist eine Art Designvorlage, mit der das Icon bearbeitet wird, vergleichbar mit einer Photoshop-Action. Von kresirunden Icons, über den dunnemals populären Glass Look hin zu Long Shadows, quadratischen Symbolen und dem iOS7-Stil ist alles vertreten, was Rang und Namen hat. Ein Editor unterhalb der Styles-Sektion erlaubt die komplette Veränderung aller vorgefertigten Styles. Auf diese Weise sind Ihrer Fantasie keine Grenzen gesetzt.

iconion-in-action

Alle Bildsymbole, an denen man gearbeitet hat, werden unterhalb des Vorschaubereichs gesammelt, so dass man sie im Nachgang in einem Rutsch downloaden kann. Icons können in vordefinierten Größen von 14 bis 1024 Pixel im Quadrat oder in einer benutzerdefinierten Auflösung gespeichert werden. Ich versuchte es mit einem Wert von 5200 Pixeln und es funktionierte, wenn auch mit leichter Verzögerung, einwandfrei. Speichern lassen sich die Symbole dann als PNG, JPG oder BMP.

Iconion: Noch unentschlossen hinsichtlich der Lizensierung

Obschon mich Iconion direkt zu begeistern verstand und ich bereits etliche Kreationen damit erstellt habe, die mich ansonsten Stunden gekostet hätten, fiel mir eine Sache schon während der Installation negativ auf.

Im Rahmen der Installation scrollte ich gewohnheitsmäßig durch die Lizenzbedingungen und stutzte. Obwohl die Betreiber überall von "free" sprechen, musste ich anderslautende ToS abnicken. Darin war auf einmal die Rede von zwei verschiedenen Lizenzen. Die eine sprach von kostenloser Nutzung für nicht-kommerzielle Zwecke. Die andere sprach vom Erfordernis einer "kommerziellen" Lizenz, sollte man das Tool irgendwie mit dem Ziel des Geldverdienens nutzen. Die Website bot mir keine weiteren Informationen. Nirgends war die Rede von zwei Lizenzen, nirgends gab es Informationen zu Preisen. Also wandt ich mich direkt an die Entwickler, die einige Tage brauchten, um mir zu antworten.

Die Antwort, die mich am heutigen Tage erreichte, ist vage. Danach sei man sich noch nicht schlüssig, ob und wenn ja wie man eine kommerzielle Lizenz einführen wolle. Man habe daher zunächst beschlossen, die aktuelle Version komplett freizugeben und auch die ToS während der Installation zu bereinigen. Aktuelle Downloads verlangen dementsprechend nicht mehr, sich auf die nicht-kommerzielle Nutzung festzulegen, wenn man Iconion nutzt.

Weitere Informationen gibt es nicht. Bleibt Iconion mit dem jetzigen Feature-Set kostenlos? Keine Ahnung.

Bringen wir es auf den Punkt: Iconion ist ziemlich grandios und sehr einfach in der Verwendung. Es liefert großartige Ergebnisse in beliebiger Auflösung. Es arbeitet derzeit aber nicht, wie an sich annonciert, mit jedem Symbol-Font, sondern nur mit den vier fest eingebauten. Und die Lizenz ist perspektivisch unklar. Kostenlos, ja oder nein? Über welchen Preis sprechen wir? Alles unbekannt. Dennoch empfehle ich Ihnen, sich selbst ein Urteil zu bilden. Funktional ist Iconion kaum zu kritisieren.

Links zum Beitrag:

Kategorien
Essentials Icons & Fonts

Total Recall #3: Die 95+ besten kostenlosen Icon-Sets

Nachdem wir dich in den ersten beiden Teilen schon mit über 250 Design-Ressourcen aus den Bereichen HTML/CSS/PSD Vorlagen für Websites und GUI-Kits für die professionelle Benutzeroberfläche versorgten, geben wir dir heute eine weitere Riesenliste an die Hand. Dieses Mal beschäftigen wir uns mit den besten Icon-Sets des Jahres 2013. Knapp 100 dieser nützlichen Sammlungen wollen von dir erforscht werden.

Kategorien
Apps Essentials Icons & Fonts

Brandneue App für Mac OS: 2.800 kostenlose Icons für Designer

Ivan Boyko kennen viele Designer sicherlich als den kreativen Kopf hinter icons8. Auf der gleichnamigen Website können 2.800 Icons, davon 1.600 in der Designsprache des Windows 8 und 1.200 im Stile von iOS 7 kostenfrei heruntergeladen werden. Seit ein paar Stunden können Designer, die mit einem Mac arbeiten, noch einfacher auf den Gesamtbestand zugreifen. Denn Boyko veröffentlichte das komplette Set als Gratis-App im Mac App Store.

icons8-websearch

icons8: 2.800 zeitgemäße Icons im PNG-Format

Auf der Website icons8 stehen über 2.800 Icons im PNG-Format zum freien Download bereit. Dabei können entweder komplette Sets oder einzelne Icons heruntergelasen werden. Die 2.800 Symbole teilen sich in zwei Sets, eines im Designstil von Windows 8, eines im Stil von iOS 7. Um die kompletten Sets in einem Rutsch zu erhalten, ist die Angabe einer E-Mail-Adresse erforderlich, an die der Downloadlink gesendet werden kann. Boyko verspricht überdies, die E-Mail-Adressen ansonsten nur dazu zu verwenden, gelegentlich kostenfreie Vektor-Icons zu versenden.

Einzelne Icons sind ohne Angabe der E-Mail erhältlich. Hierzu verwendet man die Suchfunktion der Seite, bei der man noch unterscheiden kann, ob der einzugebende Freitext über beide Sets oder nur entweder in den Windows- oder den iOS-Icons gesucht werden soll. Auf der Suchergebnisseite können Sie dann noch die Anzeigegröße der Symbolvorschau wählen, maximal 64 Pixel lassen sich hier einstellen. Die Anzeigegröße definiert aber nicht die tatsächliche Größe der Downloaddatei.

Nachdem Sie ein Icon aus den Suchergebnissen gewählt haben, gelangen Sie auf die Detailseite, von wo aus Sie den PNG-Download kostenfrei und ohne weitere Umschweife anstoßen können. Der Download kommt im Zip-Format auf die heimische Platte und enthält das gewählte Icon in den Auflösungen 25, 32, 50, 75, 100, 128, 256 und 512 Pixeln (jeweils zum Quadrat).

Grundsätzlich steht jedes Symbol auch als AI, EPS und SVG zur Verfügung. Diese Formate sind jedoch nicht kostenfrei, sondern erfordern den Erwerb einer von mehreren möglichen Lizenzen, deren Preise von 20 Dollar für ein einzelnes Symbol bis hin zu rund 200 Dollar für eines der beiden kompletten Sets reichen. Für rund 250 Dollar pro Set erhält man nicht nur die Vektordateien dazu, sondern zusätzlich alle im Verlaufe des folgenden Jahres erscheinenden Icons ebenfalls. Laut Boyko wird es sich dabei um rund 1.000 weitere Symbole handeln.

Wir halten fest: Kostenfrei gibt es lediglich die PNG-Dateien in unterschiedlichen Größen bis 512 x 512 Pixel. Diese dürfen sowohl in privaten, als auch in kommerziellen Projekten Verwendung finden, sofern die Lizenzbestimmungen eingehalten werden. Für Webprojekte muss eine Verlinkung zur Hersteller-Website erfolgen. Es reicht, einen Link im Footer zu platzieren, der etwa “Icons erstellt von icons8” betitelt ist.

icons8 als Mac OS App

Ganz frisch über den App Store erhältlich ist das gesamte Angebot seit dem heutigen Tage als native App für Mac OS X ab Version 10.8. Einmal gestartet, nistet sich die App als Symbol in der Statusleiste am oberen Bildschirmrand ein. Ein Klick darauf öffnet ein kleines Fenster, in welchem sich zuoberst ein Suchfeld befindet. Die Organisation der Icons erfolgt intern via Tags, so dass es für eine erfolgreiche Suche nicht darauf ankommt, den Namen des Icons so gut wie möglich zu erahnen, sondern darauf, wie aufwändig die Symbole getaggt sind. In dieser Hinsicht hat sich Boyko nichts vorzuwerfen. Alle Bildzeichen sind sinnvoll verschlagwortet und so im Kontext gut zu finden.

icons8-appsearch

Wie auf der Website lässt sich in der App auswählen, ob man Set-übergreifend suchen oder nur Piktogramme aus einem der beiden Sätze angezeigt bekommen will. Die Anzeige des Suchergebnisses erfolgt maximal in 50 x 50 Pixel. Die Auswahl der Pixelgröße über das entsprechende Selektionsfeld bestimmt die Größe des eigentlich zu übernehmenden Piktogramms.

Die Übernahme eines Icons zur Weiterverarbeitung ist sehr einfach. Entweder Sie ziehen das gewünschte Symbol mit der Maus in die entsprechende Anwendung, etwa Photoshop oder Sie rechtsklicken das Symbol und wählen Copy. Das ist die ganze Kunst. Wollen Sie die App stets präsent haben, können Sie sie über die Preferences in den Autostart hieven.

Das folgende Video erklärt die Vorgehensweise noch einmal in Wort und Bild:

Alle Symbole liegen übrigens auf Ihrer lokalen Festplatte im Nutzerverzeichnis unter dem etwas schwer zu merkenden Pfad /Library/Containers/com.visualpharm.Icons8AppWithContent/Data/Documents/Icons/. Gut zu wissen jedenfalls, dass Sie für die Funktionalität des Tools nicht auf eine Onlineverbindung angewiesen sind.

Für die Nutzung der Icons via App gelten die identischen Lizenzbestimmungen wie bei der Nutzung via Web. Anders als bei der Webnutzung gibt es über die App nicht die Möglichkeit, Vektorformate zu kaufen oder ganze Sets zu laden.

Im Ergebnis stellt die App eine sehr ordentliche Arbeitserleichterung für Designer dar, die ohnehin mit einem aktuellen Mac arbeiten. Selbst, wenn man schlussendlich ein Vektorformat benötigt, ist das Prototyping mit der Drag & Drop-Funktionalität der icons8-App beschleunigt. Nachdem das Featureset komplett kostenlos ist, spricht nicht viel dagegen, der App eine Chance zu geben. Das haben übrigens in der kurzen Zeit seit ihrer Veröffentlichung schon dermaßen viele Developer getan, dass die App in diversen internationalen Charts auf dem Weg nach ganz oben ist…

Links zum Beitrag

Kategorien
E-Business E-Commerce Essentials Icons & Fonts

E-Commerce-Freebie bei Dr. Web: 50+ Icons internationaler Zahlungssysteme

Das Jahr ist fast zu Ende. Weihnachten ist vorbei. Möglicherweise können Sie noch ein bisschen entspannen, sind aber sicherlich schon wieder gedanklich in den Vorbereitungen für das Jahr 2014. Für unsere werten Seitenbetreiberinnen und -betreiber, die gerade jetzt ihre Online-Shops fit für den Jahresbeginn machen, haben wir in neuerlicher Kooperation mit den Spaniern von Freepik ein Icon-Paket zum Thema "Internationale Zahlungssysteme" zusammengestellt. 50+ Icons im modernen Flat Design warten darauf, Ihren Online-Shop zu modernisieren. Wie immer, sind alle Piktogramme kostenfrei verwendbar, sowohl für private, wie vor allem auch für kommerzielle Zwecke. Bekommen können Sie das Set aber nur hier bei uns und drüben bei unserer großen Schwester Noupe…

credit-cards-teaser

Credit Card Flat Icons: 50+ Symbole als PNG, AI, EPS und SVG

Sie kennen Freepik noch nicht? Unter den Links zum Beitrag finden Sie alle Dr. Web-Artikel zu den verschiedenen Projekten der Spanier zum Nachlesen. Über den Verlauf des Jahres 2013 konnten wir Ihnen immer wieder das ein oder andere Freebie der Spanier kredenzen.

Freepik, the Search Engine for Design Resources

Freepik, fantastische Suchmaschine für Design-Ressourcen

Heute erhalten Sie die Möglichkeit, ein Set mit über 50 Flat Icons herunterzuladen, die sich sämtlich mit diversen Zahlungssystemen befassen. Von Visa über American Express bis hin zu Maestro ist vieles vertreten, was Rang und Namen hat.

Die Piktogramme liegen dabei in verschiedenen Formaten vor, die Ihnen die Verwendung, aber auch die Anpassung sehr einfach machen. Für Freunde und Verwender der Adobe-Lösungen dürfte die beste Nachricht die sein, dass die Credit Card Flat Icons, so Freepiks Bezeichnung, als Adobe Illustrator-Format geliefert werden und bis auf die Ebene des einzelnen Vektors bearbeitbar sind. Personen, die andere Vektor-Editoren bevorzugen, greifen einfach zu EPS oder SVG, beide Formate finden sich im Download-Paket. Wer möchte, nutzt die ebenfalls mitgelieferte PNG-Datei als Sprite und spricht die einzelnen Icons per CSS an.

Die mitgeliferten Dateiformate sorgen nicht für Beschränkungen, die Lizenz ebensowenig. Sie können die Symbole frei für private und kommerzielle Zwecke ohne Einschränkungen verwenden. Sie dürfen das Set jedoch nicht auf anderen Websites zum Download anbieten und/oder so tun, als seien Sie der Urheber. Diese Regeln des Fairplay schränken indes nicht wirklich ein.

credit-cards-overview

Insofern: Viel Spaß mit den mehr als 50 Icons aus dem Credit Card Flat Icons Paket…

Und hier geht es zum Download…

Das ZIP-Archiv wiegt knappe 2,5 Megabyte und sollte selbst auf verhältnismäßig behäbigen Internetanbindungen nicht zu lange auf sich warten lassen.

Download: 50+ Credit Card Flat Icons

Links zum Beitrag

  • Die Macher des Bundle und ihre Designressourcen-Suchmaschine | Freepik
  • Exklusiv für Dr.Web-Leser: Freepiks Web Mega Bundle mit 500 Icons kostenlos | Dr. Web Magazin
  • Ein weiteres Produkt aus dem Hause Freepik | CSS Matic
  • Freepik: Suchmaschine für kostenlose Design-Ressourcen | Dr. Web Magazin
  • CSS Matic – “What You See Is What You Get” für die CSS-Entwicklung | Dr. Web Magazin
  • Exklusiv für Dr. Web-Leser: 200 kostenlose Icons im Flat Look von Freepik | Dr. Web Magazin
  • Flaticon.com: Über 11.000 kostenlose Icons direkt in Photoshop nutzen | Dr. Web Magazin
Kategorien
Essentials Icons & Fonts

Typecast für Google Fonts: Web-Typografie mit Spaßfaktor

Monotype und Google kooperieren erneut und bringen mit einer speziellen Version von Monotypes Typecast-App eine kostenlose und sehr komfortable Möglichkeit, mit Google Fonts realitätsnah zu experimentieren. Die Einfachheit der Bedienung und das beachtliche Featureset könnten der Web-Typografie weiteren Auftrieb geben. Designer sollten sich die Typecast-App auf jeden Fall näher ansehen. Und genau das haben wir im folgenden Beitrag getan.

typecast-landing

Web-Typografie: Im Kommen, aber noch unterstützungsbedürftig

Das Experimentieren mit passenden Web-Fonts hat, zumindest in meiner täglichen Praxis, nichts mit Spaß zu tun. Besser wurde es vor einiger Zeit, als Monotype das Produkt SkyFonts für die Verwendung mit Google Fonts kostenfrei verfügbar machte. Auch wenn es sich nicht eine Anwendung handelt, die tatsächlich Webfonts unterstützt, so erleichterte die Verfügbarkeit der Google Fonts als Desktop-Schrift doch die Beurteilung der Layouts für das Web.

SkyFonts stellte ich im Dr. Web Magazin in dem Beitrag “SkyFonts: Die beste Art, Google Fonts auf dem Desktop zu nutzen” ausführlicher vor. Vor SkyFonts behalf ich mir mit dem Komplett-Download aller Google Fonts. Die Vorgehensweise dazu beschrieb ich für das Dr. Web Magazin im Beitrag “So laden Sie alle 500+ Google Web-Fonts auf Ihren lokalen Desktop”.

Seit ein paar Tagen existiert eine nahezu ideale Lösung, denn Monotype und Google verstehen sich offenbar dermaßen gut, dass eine weitere, für den Nutzer kostenlose Kooperation in den Stiel gestoßen wurde. Ab sofort steht Monotypes Typecast App für die Verwendung mit dem kompletten Google Fonts Repository ohne Anmeldung oder sonstige Bürokratismen frei zur Verfügung. Erreichbar ist Typecast über eine spezielle Landingpage, sowie direkt aus dem Google Fonts Directory über die jeweiligen Pop-Outs der einzelnen Schriften.

typecast-in-google-fonts

Typecast wurde 2013 mit dem „Game Changer of the Year“-Award des Magazins „.net“ ausgezeichnet und das erscheint schon auf den ersten Blick völlig berechtigt. Typecast erlaubt es, Schriften mit echten Inhalten in echten Strukturen innerhalb lebensnaher Layouts auszuprobieren.

„Eine Schrift losgelöst vom inhaltlichen Kontext und anderen Textteilen auszuwählen, ist eine schwierige Aufgabe. Das Typecast Design-Tool macht es einfach, Schriften aus dem Google Font-Verzeichnis auszuprobieren und mit ihnen zu experimentieren.“

– Filip Zembowicz, Product Manager Google

Die Vorgehensweise ist dabei sehr einfach. Entweder über die Landingpage der Typecast-App oder über das Pop-Out der jeweiligen Schrift im Google Font Directory startet man Typecast und erhält eine Oberfläche, die derjenigen eines herkömmlichen Word-Prozessors nicht unähnlich ist. Auch Adobe-Anwender werden sich umgehend heimisch fühlen.

typecast-menu-preview

Der rechts neben dem Menü angeordnete Arbeitsbereich ist direkt mit den Standardinhalten aus Google Fonts gefüllt, so dass eine unmittelbare Beurteilung der Optik möglich ist. Über das Menü kann nun das erforderliche CSS/HTML heruntergeladen werden. Für die Weitergabe und Beurteilung durch Kunden und/oder Co-Worker lassen sich PNGs erzeugen.

typecast-vollvorschau
PNG des Ergebnisses

Typecast: Kleiner Exkurs zur Vollversion

In der kostenpflichtigen Vollversion der Typecast-App, die dann nicht nur Zugriff auf die Google Fonts zulässt, ist es möglich, mehrere Versionen für ein späteres Review zu speichern, Previews auch online mit anderen zu teilen, Tests auf mehreren Geräten durchzuführen oder schnell einen kompletten Styleguide zu generieren. Ab 29 Dollar netto muss man für diesen Funktionsumfang allerdings monatlich einkalkulieren.

Die Version für Google Fonts ist eher für das schnelle Experimentieren gedacht und als solches eine sehr gute Alternative zu bisherigen Verfahrensweisen. Sicherlich setzt Monotype darauf, dass die zusätzliche Bequemlichkeit der Premium-Funktionen möglichst viele Verwender der kostenlosen Version zu zahlenden Kunden werden lässt.

Bei mir wird das indes nicht funktionieren, denn ich weigere mich, den Preismodellen der Web-Font-Anbieter Raum zu geben. Nicht nur sind mir diese Dienste schon im Ansatz zu kostspielig, sondern was mir am meisten missfällt ist die Abhängigkeit des Preises von Parametern, die man kaum beeinflussen kann, in allererster Linie die Korrelation zwischen Preis und Traffic. Natürlich mag das ein jeder für sich anders beurteilen. Ich bleibe jedenfalls vorerst bei Lösungen wie Google Fonts.

„Es freut mich, dass Fans von Google Fonts diese neue, kostenlose Version der Typecast-App jetzt nutzen können. Der Service von Google ist extrem beliebt und viele Designer machen ihre ersten Erfahrungen mit Web Fonts dieser kostenlosen Bibliothek. In unserem Bestreben, die Online-Nutzung von Web Fonts zu fördern und neue Zugriffsmöglichkeiten zur Typecast-App zu schaffen, ist Google für uns der perfekte Partner. Wir hoffen, durch unsere kostenlose, frei zugängliche Version mehr Schriftliebhaber zu unterstützen und auf längere Sicht mehr Fürsprecher guter Typographie zu gewinnen. Aus unserer Sicht wäre das ein echter Gewinn für das Web, Kunden, Leser und Designer aller Bereiche.“

– Paul McKeever, Director von Typecast

Typecast: Visuelle Layoutanpassungen sorgen für realistische Tests

Klickt man irgendwo in den Text, verschwindet das linksseitige Menü und ein Arbeitsbildschirm zeigt sich, der alle Features mitbringt, die man auf den ersten Blick für einen ordentlichen Test einer potenziell in Frage kommenden Schriftart benötigt.

typecast-editor

Das Menü wird durch ein Floating Windows ersetzt, welches man frei auf dem Bildschirm positionieren kann und welches jederzeit die Eigenschaften des aktiven Elements zeigt und editierbar macht. Schriftvarianten, -größe, Zeilenhöhe, Text- und Hintergrundfarbe und Abstandswerte werden hier verwaltet. Ebenso lässt sich die Schriftart hier auch gleich komplett ändern.

Noch ausgefeilter sind die Manipulationsmöglichkeiten in den einzelnen Textcontainern selbst. Von der Breite der einzelnen Elemente in px, em oder Prozent über die Textausrichtung bis hin zur Anpassung von CSS-Details ist alles möglich. Dabei werden Veränderungen direkt in der Preview sichtbar. Ein optional einblendbares Baseline Grid erlaubt weiteres Finetuning.

Wer sich nicht auf die visuellen Bearbeitungsmöglichkeiten verlassen will, der kann jederzeit einen CSS-Editor aufrufen und manuelle Anpassungen vornehmen. Möchte man seine mühsam vorgenommenen Parametrisierungen zur späteren Verwendung oder weiteren Bearbeitung speichern, ist man allerdings gezwungen, zum zahlenden Kunden zu werden.

Von daher werde ich Typecast sicherlich nicht bis ins letzte ausreizen und noch am letzten Parameter feilen. Bei mir kommt Typecast für die schnelle, realitätsnahe Vorabprüfung zum Einsatz. Nicht mehr, aber auch nicht weniger.

Und für diesen Einsatzzweck kenne ich keine bessere, vor allem günstigere App. Machen Sie sich selbst ein Bild!

Links zum Beitrag:

Kategorien
(Kostenlose) Services Essentials Icons & Fonts

TypeWonder hilft bei der Auswahl des richtigen Web-Font

Gerade Google Fonts erfreut sich steigender Beliebtheit. Weit über 500 kostenlose Schriftarten für die Nutzung im Web und anderswo hält der Dienst bereit. Diese Vielfalt ist nur schwer im Griff zu behalten. Wie wird Font X auf der Website aussehen? Sicherlich wird man nicht jede Schriftart tatsächlich testweise einbauen wollen. Dank Typewonder müssen Sie das auch nicht.

typewonder-homepage

TypeWonder: Live-Preview mit einer Einschränkung

Der neue Webdienst Typewonder, der in englischer und türkischer Sprache verfügbar ist, tritt an, den Dschungel des Google Font Directory zu lichten. Dabei ist die Vorgehensweise sehr simpel und stellt selbst Hobby-Seitenbetreiber nicht vor Schwierigkeiten.

Drei Schritte sind zu gehen. Zunächst tippt man im zentral angeordneten Formularfeld die URL der Seite ein, die man mit einer alternativen Schriftart versehen will.

Im zweiten Schritt wählt man einen der implementierten Fonts aus, der im dritten Schritt auf die Website angewendet wird.

typewonder-schriftwahl

typewonder-schriftwahl-auswirkung

Innerhalb der Preview kann man sich den Embed-Code generieren lassen und erhält Anweisungen zum Einbau. Erweiterte Optionen erlauben die Auswahl verschiedener Varianten der gewählten Schrift.

typewonder-schriftwahl-auswirkung-implement

Ich habe TypeWonder auf mehrere unserer Websites losgelassen und konnte mich ein ums andere Mal von der zuverlässigen Funktion überzeugen. Anders als bei anderen Diensten bricht TypeWonder nicht das Layout im Übrigen, sondern hält was es verspricht.

Der einzige Nachteil des Dienstes besteht darin, dass er nicht in der Lage ist, mehrere Schriftarten zur Anwendung zu bringen. In aller Regel will man schließlich nicht den Font der Headings auch für den Fließtext verwenden.

Unter Verwendung von TypeWonder bleibt einem derzeit nichts anderes übrig, als die Fonts durchzuprobieren und per Auge die einzelnen Textbereiche zu fokussieren. Habe ich also einen Font für den Fließtext gewählt, schaue ich mir entsprechend die Wirkung an dieser Stelle an.

Interessant wäre es indes auch, die verschiedenen Fonts im Zusammenspiel zu sehen. Da muss TypeWonder passen. Aber immerhin, wir erhalten einen zuverlässig arbeitenden Dienst für lau. Da wollen wir mal die Messlatte nicht so hoch legen.

Übrigens: Installiert man die Chrome-Extension, spart man sich den ersten Schritt mittels Klick auf das Extension-Icon auf einer beliebigen Website.

typewonder-chrome-extension

Links zum Beitrag:

Kategorien
(Kostenlose) Services Essentials Icons & Fonts

Fontastic.me: Frische Web-App zum freien Zusammenstellen eigener Icon Fonts

Vincent Le Moign aka Webalys ist kein Unbekannter unter Webdesignern. Erst kürzlich stellten wir Ihnen sein Projekt Agile Designers, ein Sammelbecken hochwertiger Design-Ressourcen vor. Darüber hinaus erstellt und vertreibt Webalys das Riesenset Minicons mit rund 1.500 einzelnen Piktogrammen. Massenhaft Freebies säumen seinen Weg. Heute stellen wir Ihnen mit Fontastic.me Le Moigns Interpretation eines gelungenen Icon Font-Baukastens vor. Dieser ist nicht nur leistungsfähig, sondern zudem kostenlos…

fontastic-homepage

Icon Fonts und modernes Webdesign

Icon Fonts setzen sich durch. Anstelle einzelner Grafiken oder Sprite-Sets mit mehreren Grafiken in einer Datei werden zunehmend Icons in der Form von Schriftarten eingesetzt. Diese erzeugen nicht für jedes Icon einen Request und müssen vor allem nicht für unterschiedliche Auflösungen in unterschiedlichen Varianten vorgehalten werden. Die freie Skalierbarkeit der Icon Fonts prädestiniert sie für den immer wichtiger werden Einsatz auf HiDPI-Geräten, wie dem Nexus 10 oder dem iPad5 oder der neuen Riege von FullHD-Smartphones.

fontastic-select-1v3

Nun gibt es eine ganze Reihe unterschiedlicher, qualitativ hochwertiger Icon Fonts am Markt. Was aber, wenn man nur einige wenige Icons aus einem Font mit 300 Zeichen verwenden will oder ergänzend noch einige Symbole aus Font X, Y und Z verwenden möchte? In diesen Fällen ist es sinnvoll, sich einen angepassten Icon Font zu konfektionieren, der lediglich die tatsächlich verwendeten Piktogramme enthält.

Genau zu diesem Zweck gibt es ein paar Dienste, denen sich jüngst ein weiterer zur Seite stellte. Mit Fontastic.me tritt ein neuer Dienst an den Start, der sich als direkter Konkurrent zu Icomoon und Fontello positioniert.

Sowohl IcoMoon, wie auch Fontello stellten wir unseren Leserinnen und Lesern bereits einzeln vor. Die Links zu den entsprechenden Artikeln finden Sie weiter unten in den Links zum Beitrag. Nur kurz zur Einordnung sei in Erinnerung gerufen, dass es sich bei IcoMoon um ein kommerzielles Angebot handelt, das auch in der Lage ist, Icons als Grafikdateien zu liefern, während Fontello ein freies Projekt ohne kommerziellen Hintergrund ist und via Github sogar als selbstgehostete Lösung eingesetzt werden kann.

Fontastic.me kombiniert die Vorzüge von IcoMoon mit denen von Fontello

Von der Handhabung und in Ansätzen auch hinsichtlich des Designs wirken Fontastic.me und Fontello extrem ähnlich. Fontastic.me integriert jedoch knapp 2.000 einzelne Icons, Fontello liegt deutlich darunter. Genau wie IcoMoon ist Fontastic.me in der Lage, vom User hochzuladende SVG-Dateien in den eigenen Icon Font zu integrieren. Fontello bietet diese Möglichkeit nicht.

Wollen Sie sich einen eigenen Font mit Fontastic zusammenstöpseln, so bedarf es lediglich einer unkomplizierten Registrierung mit Festlegung einer E-Mail-Adresse und eines Passworts. Danach werden Sie ohne Umschweife in den Font-Baukasten weitergeleitet. Hier greifen Sie wie in IcoMoon und Fontello per Mausklick die gewünschten Symbole auf, die dann unter einem frei zu vergebenden Namen als Custom Icon Font gesammelt werden.

fontastic-customize-2v3

Wie bei der Konkurrenz ist die Festlegung individueller Unicode-Zeichen für die Ansprache der Piktogramme vorgesehen. Weiterhin lassen sich die CSS-Klassen, die zur Ansteuerung der Icons über das CSS verwendet werden können, anpassen.

Eine Besonderheit von Fontastic.me ist die Möglichkeit, Icons per Data-Attribut, als Alternative zur klassenbasierten Ansteuerung, zu platzieren. Hierzu vergibt man einen Shortcut für jedes Zeichen und ruft das Icon entsprechend beispielsweise so auf:

Text neben Icon

Neben dem Import einzelner SVG-Dateien erlaubt Fontastic.me auch den Import kompletter SVG-Fonts. Der Dienst funktioniert nahezu intuitiv und kommt mit ausführlichen Erläuterungen zur Verfahrensweise daher, weshalb er sich ausgesprochen gut für Designer eignet, die sich dem Thema Icon Fonts eben erst nähern. Fontastic.me soll auf Dauer kostenfrei bleiben. Hinsichtlich der Nutzungsrechte an den integrierten Icon Fonts muss man im Zweifel ein bisschen aufpassen. Nicht alle sind voll kommerziell verwendbar, die Lizenzen sind jedoch prominent genannt.

fontastic-download-3v3

Fontastic.me wird in meinem Umfeld aufgrund der erweiterten Möglichkeiten und der noch einen Tick komfortableren UI das bisher favorisierte Fontello ablösen. Was halten Sie von dem Dienst?

Links zum Beitrag

  • Join the Icon Fonts Revolution | Fontastic.me
  • Agile Designers: Interessante Anlaufstelle für Design-Ressourcen | Dr. Web Magazin
  • Fontello: IcoMoon-Konkurrent hilft beim Zusammenstellen eigener Iconfonts | Dr. Web Magazin
  • IcoMoon: Hunderte Icons kostenlos als individueller Webfont | Dr. Web Magazin
Kategorien
Essentials Exklusiv bei drweb.de Icons & Fonts

Exklusiv für Dr. Web-Leser: 200 kostenlose Icons im Flat Look von Freepik

Und wieder können wir unseren Leserinnen und Lesern in Kooperation mit unserer großen Schwester Noupe und den Betreibern der Design-Ressourcen-Suchmaschine Freepik aus dem sonnigen Spanien einen Satz Icons schenken. Die 200 Symbole aus dem „Flat Icon Set“ folgen dem Trend zum Flat Design und können kostenfrei für private, wie kommerzielle Anwendungen verwendet werden. Die Piktogramme gibt es exklusiv bei uns…

flat_icon_set_excerpt-640px
Nur ein kleiner Ausschnitt…

Flat Icon Set: 200 Symbole als PNG, AI und EPS

Sie kennen Freepik noch nicht? Unter den Links zum Beitrag finden Sie alle Dr. Web-Artikel zu den verschiedenen Projekten der Spanier zum Nachlesen. Erst vor knapp zwei Monaten konnten wir Ihnen das Web Mega Icon Bundle mit 500 Symbolen exklusiv anbieten. Die Piktogramme dieses Sets waren in Graustufen gehalten, orientierten sich auch bereits in Richtung Flat Design.

Die 200 Icons aus unserem heutigen Angebot sind farbig gestaltet. Das rund 6,5 MB große Downloadpaket enthält alle Symbole im Format PNG in den Größen 64, 128 und 256 Pixel. Zusätzlich enthalten sind die Rohdateien in den Vektorformaten AI und EPS. Diese unterliegen keinen Restriktionen, alle Pfade sind einzeln bearbeitbar. Lediglich die pro Icon erfolgte Gruppierung muss in Illustrator hierzu aufgehoben werden. Damit steht der freien Anpassbarkeit der Bildchen auf den eigenen Bedarf, etwa die eigenen Farben oder andere Größen und Formate, nichts im Wege.

preview-1-w640
Alle Icons im Überblick

Wie schon beim Web Mega Icon Bundle ist auch bei den Flat Icons der Anwendungsbereich breit angelegt. Neben Symbolen zur Entwicklung (mobiler) Apps, finden sich eine ganze Reihe von Icons zu Social Media. Ebenfalls enthalten sind Wetter-Icons und Visualisierungen verschiedener Dateiformate.

preview-3-w640
Alle Icons liegen zusätzlich als Vektoren bei

Hinsichtlich der lizenzrechtlichen Beschränkungen gibt es ebenfalls keine Überraschungen. Sie können die Symbole frei für private und kommerzielle Zwecke ohne Einschränkungen verwenden. Sie dürfen das Set jedoch nicht auf anderen Websites zum Download anbieten und/oder so tun, als seien Sie der Urheber. Diese Regeln des Fairplay schränken indes nicht wirklich ein.

Insofern: Viel Spaß mit unseren 200 Flat Icons aus dem Hause Freepik…

Und hier geht es zum Download

Download: 200 Flat Icons Set

Links zum Beitrag

  • Die Macher des Bundle und ihre Designressourcen-Suchmaschine | Freepik
  • Exklusiv für Dr.Web-Leser: Freepiks Web Mega Bundle mit 500 Icons kostenlos | Dr. Web Magazin
  • Ein weiteres Produkt aus dem Hause Freepik | CSS Matic
  • Freepik: Suchmaschine für kostenlose Design-Ressourcen | Dr. Web Magazin
  • CSS Matic – “What You See Is What You Get” für die CSS-Entwicklung | Dr. Web Magazin
Kategorien
Essentials Freebies, Tools und Templates Icons & Fonts

Icons in Massen: 50 ungewöhnliche, kostenlose Sets, die auch kommerziell genutzt werden dürfen

Der kleinste Bestandteil einer grafischen Benutzeroberfläche ist wohl das Icon. Wir zeigen diese kleinen Kunstwerke in aller Pracht in dieser Kollektion von mehreren hundert einzelnen Icons, oftmals zu Themen in Sets im gleichen Stil kombiniert. Hier pocht das Grafikerherz gleich schneller. Von minimalistisch und flach, bis hin zu fotorealistisch und dreidimensional sind alle Farben und Formen vertreten. Zwischen den Icons finden Sie noch einige Photoshop-Tipps zur Modifikation und Erweiterung der Sets…

Fliraneo Icon Pack

Website: lazycrazy.deviantart.com
Urheber: LazyCrazy
Frei für: Kommerzielle / Private Anwendungen
iconset1

© LazyCrazy

Gentle Romantic Icons

Website: lazycrazy.deviantart.com
Urheber: LazyCrazy
Frei für: Kommerzielle / Private Anwendungen
iconset2

© LazyCrazy

Currency Stock Icons

Website: antialiasfactory.deviantart.com
Urheber: antialiasfactory
Frei für: Private Anwendungen
iconset3

© antialiasfactory

Lovely Website Icons Pack 1

Website: lazycrazy.deviantart.com
Urheber: LazyCrazy
Frei für: Kommerzielle / Private Anwendungen
iconset4

© LazyCrazy

Lovely Website Icons Pack 2

Website: lazycrazy.deviantart.com
Urheber: LazyCrazy
Frei für: Kommerzielle / Private Anwendungen
iconset5

© LazyCrazy

Gifts Icons Pack 1

Website: miniartx.deviantart.com
Urheber: Miniartx
Frei für: Kommerzielle / Private Anwendungen
iconset6

© Miniartx

Cute Critters Free Icon Pack

Website: tutorial9.net
Urheber: Elio Rivero
Frei für: Kommerzielle / Private Anwendungen
iconset7b

© Elio Rivero

Icecream Icon Set

Website: miniartx.deviantart.com
Urheber: Miniartx
Frei für: Kommerzielle / Private Anwendungen
iconset8

© Miniartx

Gifts Icons Pack 2

Website: miniartx.deviantart.com
Urheber: Miniartx
Frei für: Kommerzielle / Private Anwendungen
iconset9

© Miniartx

So sweet

Website: i-love-icons.deviantart.com
Urheber: i-love-icons
Frei für: Kommerzielle / Private Anwendungen
iconset10

© i-love-icons

Free Set of Photography Icons

Website: vandelaydesign.com
Urheber: Iconshock
Frei für: Kommerzielle / Private Anwendungen
iconset11

© Iconshock

[Freebie] “Webcons” High Quality Web Icon Set

Website: hongkiat.com
Urheber: Rafi
Frei für: Kommerzielle / Private Anwendungen
iconset12

© Rafi

The Ultimate Free Web Designer’s Icon Set – 750 icons, incl. PSD sources

Website: smashingmagazine.com
Urheber: Oliver Twardowski
Frei für: Kommerzielle / Private Anwendungen
iconset13b

© Oliver Twardowski

Web Designer’s Icons

Website: vandelaypremier.com
Urheber: iconshock
Frei für: Kommerzielle / Private Anwendungen
iconset14b

© iconshock

Free Credit card icons

Website: iconshock.com
Urheber: iconshock.com
Frei für: Kommerzielle / Private Anwendungen
iconset15

© iconshock.com

Free Portfolio Icon Set Designed

Website: vandelaydesign.com
Urheber: iconshock
Frei für: Kommerzielle / Private Anwendungen
iconset16

© iconshock

Free Set of Hand-Drawn Icons

Website: vandelaydesign.com
Urheber: Damian Watracz
Frei für: Kommerzielle / Private Anwendungen
iconset17

© Damian Watracz

Payment Method Icons Set Vol 1

Website: pixeden.com
Urheber: pixeden.com
Frei für: Kommerzielle / Private Anwendungen
iconset18

© pixeden.com

Freebie: Professional E-Commerce Icons Set (20 Icons)

Website: smashingmagazine.com
Urheber: WebIconSet.com
Frei für: Kommerzielle / Private Anwendungen
iconset19

© WebIconSet.com

Free E-Commerce Icons from IconShock

Website: designm.ag
Urheber: IconShock
Frei für: Kommerzielle / Private Anwendungen
iconset20

© IconShock

Photoshop-Tipp #1: Farben ändern

01 Auswahl erzeugen

Möchten Sie die Farben eines Icons etwa an die Farben eines Unternehmens anpassen, so müssen Sie diese zunächst auswählen. Gehen Sie dazu im Menü auf Auswahl > Farbbereich. Klicken Sie mit der Pipette die Farbe an, die Sie verändern möchten. Über die Toleranz regeln Sie, wie weit ähnliche Farbtöne in die Auswahl mit einbezogen werden. Bestätigen Sie über OK.

icon-farbaenderung1

02 Farbe anpassen

Die Auswahl steht. Gehen Sie im Menü auf Bild > Korrekturen > Farbton/Sättigung. Verschieben Sie den Regler Farbton, bis die gewünschte Farbe sichtbar wird. Bestätigen Sie über OK und drücken Sie Strg+D, um die Auswahl aufzuheben.

icon-farbaenderung2

Free Medical Icons Set (60 Icons)

Website: smashingmagazine.com
Urheber: User Interface Design Agentur-Centigrade GmbH
Frei für: Kommerzielle / Private Anwendungen
iconset21b

© User Interface Design Agentur-Centigrade GmbH

Socializic

Website: wegraphics.net
Urheber: WeGraphics
Frei für: Kommerzielle / Private Anwendungen
iconset22

© WeGraphics

Vintage Social Stamps

Website: designinstruct.com
Urheber: John Negoita-PSDDude
Frei für: Kommerzielle / Private Anwendungen
iconset23

© John Negoita-PSDDude

Free Gadget Icon Set from IconShock

Website: vandelaydesign.com
Urheber: IconShock
Frei für: Kommerzielle / Private Anwendungen
iconset24

© IconShock

Eldorado Mini

Website: icojam.com
Urheber: icojam.com
Frei für: Kommerzielle / Private Anwendungen
iconset25

© icojam.com

Freebie PSD – Flat Icons

Website: dribbble.com
Urheber: Alberto
Frei für: Kommerzielle / Private Anwendungen
iconset26

© Alberto

Apple flat devices – Episode#2 (PSD)

Website: dribbble.com
Urheber: Pierre Borodin
Frei für: Kommerzielle / Private Anwendungen
iconset27

© Pierre Borodin

50 Food Icon Set (PSD)

Website: psdblast.com
Urheber: psdblast.com
Frei für: Kommerzielle / Private Anwendungen
iconset28

© psdblast.com

Thermometer Free Psd

Website: dribbble.com
Urheber: Stanislava Stojanovic
Frei für: Kommerzielle / Private Anwendungen
iconset29

© Stanislava Stojanovic

Retina-Ready iOS App Icon Templates (PSD)

Website: graphicsfuel.com
Urheber: Rafi
Frei für: Kommerzielle / Private Anwendungen
iconset30

© Rafi

Photoshop-Tipp #2: Icon-Sets erweitern

Gerade bei Social Media-Icons haben wir in Deutschland oftmals das Problem, dass deutsch-sprachige Dienste wie etwa Xing in der Sammlung nicht enthalten sind. Da hilft kein Jammern und Schreien, da muss man selbst Hand anlegen und das Set erweitern. Relativ leicht geht das, wenn es sich um einfache 2D-Icons handelt, so wie hier zu sehen. Schnell mit dem Abgerundeten-Rechteck-Werkzeug die Grundform in einer passenden Farbe aufziehen und darüber das Logo einfügen. Fertig! Bei komplexen 3D-Logos ist weitaus mehr Kreativität gefragt.

icon-anpassung

Othericons

Website: othericons.com
Urheber: Luboss Volkov
Frei für: Kommerzielle / Private Anwendungen
iconset31

© Luboss Volkov

Stack Site Icons

Website: lambda.deviantart.com
Urheber: lambda
Frei für: Kommerzielle / Private Anwendungen
iconset32

© lambda

E-Commerce Icon Set

Website: webiconset.com
Urheber: WebIconSet.com
Frei für: Kommerzielle / Private Anwendungen
iconset33b

© WebIconSet.com

Autumn Breeze Icons

Website: da-flow.deviantart.com
Urheber: da-flow
Frei für: Kommerzielle / Private Anwendungen
iconset34

© da-flow

Freebie: Academic Icon Set (10 Icons + PSD Source)

Website: smashingmagazine.com
Urheber: PixelsDaily
Frei für: Kommerzielle / Private Anwendungen
iconset35b

© PixelsDaily

Social Media Icon Set

Website: 365psd.com
Urheber: 365psd.com
Frei für: Kommerzielle / Private Anwendungen
iconset36

© 365psd.com

Smashing Royal Icon Set

Website: smashingmagazine.com
Urheber: Artua Design Studio
Frei für: Kommerzielle / Private Anwendungen
iconset37

© Artua Design Studio

Furniture Illustrations

Website: sklp.deviantart.com
Urheber: sklp
Frei für: Kommerzielle / Private Anwendungen
iconset38

© sklp

20 Popular Social Media Icons – PSD & PNG

Website: graphicsfuel.com
Urheber: Rafi
Frei für: Kommerzielle / Private Anwendungen
iconset39

© Rafi

IsoIcons – Workspace

Website: artdesigner.lv
Urheber: artdesigner.lv
Frei für: Private Anwendungen
iconset40

© artdesigner.lv

Battery PSD & Icons

Website: graphicsfuel.com
Urheber: Rafi
Frei für: Kommerzielle / Private Anwendungen
iconset41

© Rafi

6 Blue Icons

Website: nick7even.deviantart.com
Urheber: Nick7Even
Frei für: Kommerzielle / Private Anwendungen
iconset42

© Nick7Even

Prostor Icons

Website: tit0.deviantart.com
Urheber: TIT0
Frei für: Kommerzielle / Private Anwendungen
iconset43

© TIT0

Icon for Transformers

Website: ypf.deviantart.com
Urheber: ypf
Frei für: Kommerzielle / Private Anwendungen
iconset44

© ypf

Nes Icons Pack

Website: ahuri.deviantart.com
Urheber: Ahuri
Frei für: Kommerzielle / Private Anwendungen
iconset45

© Ahuri

AllGN Robots Icons

Website: lambda.deviantart.com
Urheber: lambda
Frei für: Kommerzielle / Private Anwendungen
iconset46b

© lambda

Archigraphs Porcelain Icons

Website: cyberella74.deviantart.com
Urheber: Cyberella74
Frei für: Kommerzielle / Private Anwendungen
iconset47

© Cyberella74

AccBox

Website: tit0.deviantart.com
Urheber: TIT0
Frei für: Private Anwendungen
iconset48

© TIT0

Bee Mac Icon

Website: artbees.deviantart.com
Urheber: artbees
Frei für: Kommerzielle / Private Anwendungen
iconset49

© artbees

Minimal Colors Icons

Website: deep3sh.deviantart.com
Urheber: deep3sh
Frei für: Kommerzielle / Private Anwendungen
iconset50

© deep3sh

(dpe)

Kategorien
Essentials Icons & Fonts

In höchster Qualität: 44 kostenlose Fonts für kreative Gestalter

Wir haben wieder über 40 hochwertige Schriftarten für Sie recherchiert, bei denen auf den ersten Blick ersichtlich ist, ob deutsche Umlaute enthalten sind, ob nur eine private oder auch die kommerzielle Nutzung gestattet ist (trotzdem ist unsere Empfehlung immer: prüfen Sie die Lizenz noch einmal selber) und um welches Format es sich handelt. Sie wissen also schon vor dem Download und der Installation ganz genau, was sie bekommen. Fehlen die deutschen Umlaute, so könnten Sie diese für wenige Überschriften, etwa für Flyer, zumindest simulieren. Es fehlen ja zumeist nur zwei Punkte. Alles weitere liegt wie immer in Ihren kreativen Händen.

Aleo free font

Lizenz: Private und kommerzielle Nutzung
Format: OTF
Deutsche Umlaute: Ja
font1

© Alessio LAISO

Myra free font

Lizenz: Private und kommerzielle Nutzung
Format: OTF und TTF
Deutsche Umlaute: Ja
font2

© Sergiy Tkachenko

Higher – Free Font

Lizenz: Private und kommerzielle Nutzung
Format: OTF und TTF
Deutsche Umlaute: Nein
font3

© Marisa Passos

Corbert Regular – FREE FONT

Lizenz: Private und kommerzielle Nutzung
Format: OTF
Deutsche Umlaute: Ja
font4

© Jonathan Hill

Manteka

Lizenz: Private und kommerzielle Nutzung
Format: TTF
Deutsche Umlaute: Nein
font5

© Eduardo Araya

Kelson Sans

Lizenz: Private und kommerzielle Nutzung
Format: OTF
Deutsche Umlaute: Ja
font6

© Bruno Mello

Hapna Mono

Lizenz: Private und kommerzielle Nutzung
Format: OTF
Deutsche Umlaute: Ja
font7

© Mariya V. Pigoulevskaya

Fénix (FREE Typeface)

Lizenz: Private und kommerzielle Nutzung
Format: OTF
Deutsche Umlaute: Ja
font8

© Fernando Díaz

Akashi

Lizenz: Private und kommerzielle Nutzung
Format: TTF
Deutsche Umlaute: Ja
font9

© Ed Merritt

zwodrei

Lizenz: Private Nutzung
Format: TTF
Deutsche Umlaute: Ja
font10

© artill.de

Valentina, an antique Spanish didone

Lizenz: Private und kommerzielle Nutzung
Format: OTF
Deutsche Umlaute: Ja
font11

© Pedro Arilla

Tale font a free font project by Renz Abong

Lizenz: Private und kommerzielle Nutzung
Format: OTF und TTF
Deutsche Umlaute: Nein
font12

© Renz Abong

Structr // Free Font

Lizenz: Private und kommerzielle Nutzung
Format: TTF
Deutsche Umlaute: Ja
font13

© VRTU Kreative

Sintony – Free Google Web Font

Lizenz: Private und kommerzielle Nutzung
Format: Google Web Font
Deutsche Umlaute: Ja
font14

© Eduardo Tunni

Polaris

Lizenz: Private und kommerzielle Nutzung
Format: OTF und TTF
Deutsche Umlaute: Ja
font15

© floodfonts.com

Novecento

Lizenz: Private und kommerzielle Nutzung
Format: OTF und Webfont
Deutsche Umlaute: Ja
font16

© Jan Tonellato

„Shket“ free font

Lizenz: Private und kommerzielle Nutzung
Format: OTF
Deutsche Umlaute: Ja
font17

© Juan Francisco Garrido

Barkentina Typeface and Free Font

Lizenz: Private und kommerzielle Nutzung
Format: OTF
Deutsche Umlaute: Ja
font18

© Kiril Zlatkov

Flex Display – free fonts

Lizenz: Private und kommerzielle Nutzung
Format: OTF
Deutsche Umlaute: Nein
font19

© Álvaro Thomáz

Biko Regular – Free

Lizenz: Private Nutzung
Format: OTF
Deutsche Umlaute: Ja
font20

© Marco Ugolini

Sequi – FREE Typeface

Lizenz: Private und kommerzielle Nutzung
Format: OTF
Deutsche Umlaute: Ja
font21

© João Andrade

Versa

Lizenz: Private Nutzung
Format: OTF und TTF
Deutsche Umlaute: Nein
font22

© Renz Abong

CHE’s Bone – Free Font

Lizenz: Private und kommerzielle Nutzung
Format: TTF
Deutsche Umlaute: Nein
font23

© filiz sahin

Prime free font

Lizenz: Private und kommerzielle Nutzung
Format: OTF
Deutsche Umlaute: Ja
font24

© Max Pirsky

Lytiga Pro

Lizenz: Private und kommerzielle Nutzung
Format: OTF
Deutsche Umlaute: Ja
font25

© Andriy Konstantynov

BAMQ

Lizenz: Private und kommerzielle Nutzung
Format: OTF
Deutsche Umlaute: Ja
font26

© Gulay Inceoglu

Sofia Pro Light

Lizenz: Private und kommerzielle Nutzung
Format: OTF
Deutsche Umlaute: Ja
font27

© Mostardesign

Free Font: Drebeden

Lizenz: Private und kommerzielle Nutzung
Format: TTF
Deutsche Umlaute: Nein
font28

© Serge Shi

KanKin free font

Lizenz: Private und kommerzielle Nutzung
Format: OTF und TTF
Deutsche Umlaute: Ja
font29

© Alexey Frolov

COCO – Free Fashion Typefamily

Lizenz: Private und kommerzielle Nutzung
Format: OTF
Deutsche Umlaute: Ja
font30

© Hendrick Rolandez

V.GER Grotesque

Lizenz: Private und kommerzielle Nutzung
Format: TTF
Deutsche Umlaute: Nein
font31

© Mateo Rios, Tomas Saldarriaga

Free Font Passau

Lizenz: Private und kommerzielle Nutzung
Format: OTF
Deutsche Umlaute: Ja
font32

© Austin Long

FREE SciFly Sans Font

Lizenz: Private und kommerzielle Nutzung
Format: TTF
Deutsche Umlaute: Ja
font33

© Tomi Haaparanta

Tetra free font

Lizenz: Private und kommerzielle Nutzung
Format: OTF und TTF
Deutsche Umlaute: Nein
font34

© Alexey Frolov a.k.a MRfrukta

Bitter

Lizenz: Private und kommerzielle Nutzung
Format: OTF und TTF
Deutsche Umlaute: Ja
font35

© Huerta Tipografica

Equal Sans

Lizenz: Private Nutzung
Format: TTF
Deutsche Umlaute: Ja
font36

© Måns Grebäck

Silverfake free font

Lizenz: Private und kommerzielle Nutzung
Format: OTF
Deutsche Umlaute: Nein
font37

© Alexey Frolov a.k.a MRfrukta

cassannet

Lizenz: Private und kommerzielle Nutzung
Format: OTF
Deutsche Umlaute: Ja
font38

© atipo

Forum Font

Lizenz: Private und kommerzielle Nutzung
Format: TTF
Deutsche Umlaute: Ja
font39

© Denis Masharov

Multicolore FREE Font

Lizenz: Private und kommerzielle Nutzung
Format: Adobe Illustrator CS3 AI, OTF
Deutsche Umlaute: Ja
font40

© Ivan Filipov

Free Idealist Sans

Lizenz: Private und kommerzielle Nutzung
Format: OTF und TTF
Deutsche Umlaute: Ja
font41

© Elena Kowalski

MAGNA Typeface

Lizenz: Private und kommerzielle Nutzung
Format: OTF und TTF
Deutsche Umlaute: Nein
font42

© Hendrick Rolandez

ORIGRAM Free Font

Lizenz: Private und kommerzielle Nutzung
Format: OTF
Deutsche Umlaute: Ja
font43

© Nuno Dias

Ponsi Rounded Slab

Lizenz: Private und kommerzielle Nutzung
Format: OTF
Deutsche Umlaute: Ja
font44

© Leon Hulst

(dpe)

Kategorien
Essentials Icons & Fonts

SkyFonts: Die beste Art, Google Fonts auf dem Desktop zu nutzen

Google Fonts, so heißt Googles zunächst als Web Font Directory bekanntes Verzeichnis von Schriften unter Open-Source-Lizenz seit einigen Wochen. Im Grunde verbirgt sich hinter der Namensänderung nichts von Neuigkeitswert, konnte man doch schon immer die Google Fonts auch lokal installieren und etwa in Photoshop oder beliebiger anderer Software frei nutzen. Neu ist allerdings die Integration des gesamten Angebots der Google Fonts in den Schriftenmanager SkyFonts aus dem Hause Monotype…

skyfonts-home

SkyFonts – Synchronisieren von Desktop-Fonts aus dem Portfolio von Schriftarten-Verkäufern

SkyFonts ist eine Technologie, mit deren Hilfe sich Schriftarten zwischen dem Desktop und den Angeboten einiger Type Foundries synchronisieren lassen. Ursprünglich ersann Monotype das Tool, um Designern zu ermöglichen, Schriftarten zu Designzwecken für einen begrenzten Zeitraum von fünf Minuten auf dem Rechner vorhalten zu können. So konnte evaluiert werden, ob die Schrift zum Design passt.

SkyFonts sorgt dabei nicht nur für die automatische Übertragung der gewählten Schriftart auf das eigene System und deren Verfügbarkeit über einen beliebigen Font-Wähler jeder installierten Desktop-Software, sondern vor allem auch für deren Entfernung nach Ablauf des Probierzeitraums. Derzeit ist SkyFonts nur auf dem Monotype-Angebot Fonts.com im Einsatz, prinzipiell ist die Technologie jedoch auch an andere anpassbar.

SkyFonts und Google Fonts – Gut für Open-Source-Enthusiasten

Aufgrund einer frischen Kooperation mit Google, steht SkyFonts seit kurzem auch für alle Schriften der Google Fonts zur Verfügung. Hier spielt naheliegenderweise die technische Möglichkeit der automatischen Entfernung eine eher untergeordnete Rolle. Die Synchronisation ist einfach und zuverlässig. So geht’s:

Dreh- und Angelpunkt der Integration zwischen SkyFonts und Google Fonts ist diese Seite, die Sie sich am besten direkt in die Bookmarks legen. Denn hier werden Sie des öfteren wieder vorbei schauen.

Hier angekommen, klicken Sie auf den Button „SkyFonts Download“. Es wird automatisch die richtige Version vorgewählt. Derzeit stehen Versionen für Windows 32 und 64, sowie für Mac OSX zur Verfügung. Die Mac-Version bringt einen Download von komprimiert knapp 9 MB auf die Waage, der ein DMG von fast 30 MB beherbergt. Für die Windows-Version ist das Vorhanden des .Net-Framework 4 erforderlich, welches aber auch im Zuge der Installation nachgeladen werden kann.

Nach dem Download des im Falle der Version für Windows 64bit 3,5 MB schweren Zip-Datei gilt es, den darin enthaltenen Installer aufzurufen und mit Hilfe des üblichen Assistenten das Setup zum Abschluss zu bringen.

skyfonts-services
Wenig Optionen im Client, Hauptdarsteller ist der Web-Service

Nach dem ersten Start enthält SkyFonts naheliegenderweise noch keine Schriftarten. Diese fügen Sie über den bereits erwähnten Dreh- und Angelpunkt, dort unter Verwendung des Button „Google Fonts durchsuchen“ hinzu.

Nach Klick auf die Schaltfläche öffnet sich ein modales Popup. Von hier aus sind alle Font-Varianten des Google Portfolios, derzeit über 1.100 aus über 600 Schriftarten zugänglich. Gesucht werden kann nach Namensfragmenten, über ein klickbares Alphabet oder durch schlichtes Durchscrollen.

skyfonts-access-to-google-fonts

Haben Sie eine Schriftart gefunden, die sie auf dem Desktop verwenden wollen, so klicken Sie den zugehörigen Button „SkyFonts“ auf der rechten Seite des Popup an und wählen im sich öffnenden Fenster „Hinzufügen“.

skyfonts-to-add

skyfont-added

Ein kleiner Haken im SkyFonts-Button wird sichtbar, zudem sollten Sie auf dem Desktop eine kleine Notification erhalten, die die Synchronisation bestätigt.

skyfonts-automatic-sync-notific8

Die Schriften stehen direkt und ohne weitere Eingriffe Ihrerseits sofort zur Verwendung bereit, wie Sie folgend am Beispiel von Word 2013 sehen können:

skyfonts-word-test

Innerhalb des SkyFonts-Clients können Sie stets sehen, welche Fonts installiert sind, welche entfernt wurden etc. Sie haben jedoch im Client nicht die Möglichkeit, die Schriften zu verwalten. Das ist ausschließlich über die bereits mehrfach erwähnte Website möglich.

skyfonts-client-sync

Es dürfte wohl eine Selbstverständlichkeit sein, ich weise dennoch darauf hin. SkyFonts synchronisiert ausschließlich die Desktop-Schriften, also TTF oder OTF. Die Web Fonts werden nicht auf den Rechner verfrachtet.

Ändern sich die von Ihnen gewählten Schriften im Ursprungsangebot, sorgt SkyFonts automatisch für die Synchronisation mit Ihrem Rechner. Das geht auf bis zu fünf Geräte simultan. Dafür bedarf es allerdings eines Fonts.com-Accounts, denn der Zugriff auf Google Fonts erfolgt nicht basierend auf einem vorhandenen Google-Account. Um die Synchronisation auch nach einem Neustart verfügbar zu halten, empfiehlt sich das Setzen des entsprechenden Häkchens im Client:

skyfonts-advanced

Mercurial: Google Fonts anders verwenden

SkyFonts bietet nach meiner Meinung die derzeit beste Methode, das breit gefächerte Angebot der Google Fonts strukturiert und aufwandsarm zu verwenden. Bereits vor einem Jahr stellten wir Ihnen hier im Dr. Web Magazin eine weitere, nach wie vor taugliche Alternative zu dieser Vorgehensweise vor.

Unter Nutzung von Mercurial mit den optionalen GUI-Aufsätzen MacHG für Mac und TortoiseHG für Windows saugen Sie das komplette Google Fonts Directory auf Ihre heimische Festplatte und installieren es von dort aus mit Bordmitteln. Linuxer verwenden Mercurial ohne GUI.

SkyFonts stellt allerdings die elegantere Methode dar, sofern man Windows- und/oder Mac-Nutzer ist.

Links zum Beitrag: