Kategorien
Essentials Icons & Fonts

Captain Icon: Kostenloses Set mit 350+ Flat Icons in vielen Formaten

Mario Del Valle aus Valladolid im sonnigen Spanien ist ein waschechter Kreativer aus ganzem Herzen. Nach eigener Aussage war er schon als kleiner Junge ein begeisterter Zeichner. In jüngerer Zeit kam noch der Wunsch dazu, seine Werke mit anderen zu teilen. Also setzte er sich an sein Tablett und begann Ideen zu generieren, zu verwerfen, zu generieren…

Kategorien
Essentials Icons & Fonts

Freebie: 50 derb-lustige Funny Icons

Oh, äh. Entschuldigung, der ist mir so raus gerutscht. Halte einfach eine Weile die Luft an. Hier draußen verzieht sich sowas ja schnell… Ja, das finde ich lustig. Sehr lustig sogar. Lies am besten nur weiter, wenn es dir auch so geht.

Kategorien
Essentials Exklusiv bei drweb.de Freebies, Tools und Templates Icons & Fonts

Freebie: Human Pictos mit 500 Icons zu Menschen in Aktion

Es ist wieder soweit. Die Menschen stürmen die Innenstädte auf der Jagd nach dem perfekten oder wenigsten irgendeinem Weihnachtsgeschenk für ihre Lieben oder weniger Lieben. Unser Geschenk erfordert lediglich die Bewegung deiner rechten oder (je nachdem) linken Hand.

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 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
Webdesign

Designers Basisausstattung: 10 nützliche Freebies

Sicherlich, jedes Projekt ist anders, aber dann doch wieder ähnlich. Die Ähnlichkeit nimmt zu, je länger man im Designer-Geschäft tätig ist. Dadurch wird es bisweilen schwierig, sich stets auf’s neue hochkreativ zu zeigen, wenn der Kunde es erwartet. Die Problematik intensiviert sich im Laufe der Karriere. Das ist auch normal, denn man ist Mensch und lebt als solcher in seinen eigenen mentalen Grenzen. Als intelligenter Mensch ist man natürlich vorbereitet und hat sich Strategien zur Inspiration zurechtgelegt. Wildes Surfen, aber auch Bleistiftskizzen auf weißem Papier gehören zu den probaten Mitteln. Wenn man es etwas hemdsärmeliger angehen will, kann man sich auch gleich mit fertigen Elementen umgeben. Da sind Freebie-Sammlungen immer gern gesehen…

Die folgenden 10 Freebies sind Teil meines Basis-Baukastens geworden. Manche sind ganz frisch, andere fanden sicherlich schon ein halbes Dutzend Verwendungen. Vielleicht ist auch für Sie was dabei?

1. SEO-Icons im Flat Look

Das ist die neueste Ergänzung meines Werkzeugkastens. Diese 12 SEO Icons im Flat Design passen gut zum aktuellen Trend, besitzen aber genügend Eigenständigkeit, um nicht wie das nächste iOS7 zu wirken, auch die Farbpalette überzeugt. Und wenn iOS7 dann erstmal offiziell ist, werden viele Kunden nach genau so einem Stil fragen. Sie werden sehen…

flat-seo-icons

2. Texturen im Grunge-Look

Diese 25 Texturen habe ich mir ebenfalls erst kürzlich zugelegt. Sie kommen als JPG in 5.000 x 5.000 Pixeln bei 300 ppi und sind kompatibel zu jedwedem Bildbearbeitungsprogramm. Sinnvoll einsetzen lassen sie sich naheliegenderweise nur in Anwendungen, die mit Ebenen arbeiten oder eben im Web.

texture

3. PSD-Vorlage "Modus Versus"

Bootstrap ist beliebt, sehr beliebt sogar. Und wenn das auch bei Ihnen so ist, dann sollten Sie sich dieses Template näher ansehen. Modus Versus ist ein kostenloses Mehrzweck-PSD auf der Basis des 1.170 Grid Systems aus Bootstrap. Das prädestiniert es für den Gebrauch mit responsiven Frameworks, wie eben – Bootstrap…

website-template

4. Flat UI-Kit

iOS (seite neuestem), Windows Modern GUI und Android Jellybean befördern den Trend zu responsivem Design. Dieses Freebie hier hilft beim Einstieg in das Thema. Ob man nun Flat Design eher als eine Reduktion oder eher als einen eigenen Stil definieren will, in jedem Fall ist das Flat UI Kit zeitgemäß.

flat-ui-kit

5. "Media Black" UI-Kit

Das "Media Black" UI-Kit wartet in meinem Werkzeugkasten die meiste Zeit auf seinen Einsatz. Mit seiner dunklen Ausrichtung und den klar fokussierten Einsatzbereichen ist es eher der Ecke "Special Interest" zuzuordnen. Es beinhaltet grafische Elemente für jede Art von Media-Anwendung, also Audio- und Video-Player, liefert aber zusätzlich passende Navigationselemente mit. Das Kit ist auch kommerziell frei nutzbar.

black-media-kit

6. Visitenkarten-Vorlage im Retro-Look (PSD)

Diese Photoshop-Vorlage bereichert Ihren Werkzeugkasten um eine äußerst elegante und moderne Variante einer Visitenkarte, die zudem aufgrund ihres minimalistischen Stylings schnell und umfassend angepasst werden kann. Dieser Freebie besteht aus zwei separaten PSDs und kann sowohl privat, wie kommerziell frei genutzt werden.

business-card

7. Infografiken leicht gemacht mit dem Infographic Vector Kit

Infografiken sind der Knaller momentan. So ist es kein Wunder, dass Kunden auf die Idee kommen, statt langweiliger Powerpoint-Folien doch lieber schicke Infografiken erstellen zu lassen. In solchen Fällen verlasse ich mich zunächst auf das Infographic Vector Kit. Damit habe ich schon einmal die wichtigsten Elemente in einem Kit abgedeckt.

infographic-freeibies

8. Apple-Geräte-Icons

Dazu muss man wohl nicht viel sagen. In diesem Set versammeln sich 10 Darstellungen der Apple-Bestseller. Auf Detailtreue wurde Wert gelegt, geliefert werden PNGs und Illustrator-Dateien. Da das Set schon etwas älter ist, fehlt das iPhone 5. Aber gut, in Illustrator den oberen Ankerpunkt des 4s packen und etwas nach oben ziehen… Fertig ;)

apple-products-icons

9. Simplito: Kostenloses Set mit Social Icons

Aus 2011, aber erst jetzt richtig trendy, flat und so, kommt dieses Set von 24 Icons aus dem Social Media-Umfeld in Form von JPGs und PNGs daher. Ein PSD wird ebenfalls geliefert, so ist umfassende Anpassung möglich. Die Icons können sowohl privat, wie kommerziell unter den Bedingungen des mitgelieferten Lizenz-Files verwendet werden.

social-icons

10. Rahmen & Bänder im Retro-Style

Ich dachte nicht, sowas jemals zu benötigen. Meine Kundschaft sieht das in zunehmendem Maße anders. Der Trend geht auf der einen Seite zu Flat und auf der anderen Seite zu Retro. Und letzteres bedienen diese handgezeichneten Rahmen und Bänder ganz sicherlich. Alle 46 Elemente wurden zunächst auf Papier erstellt und dann digitalisiert und in das Vektor-Format überführt. Durch den comic-artigen Zeichenstil wirken sie fast schon wieder modern. Ich verwende sie gern im Umfeld von Printprodukten, die im weitesten Sinne mit Veranstaltungen zu tun haben.

ribbon

(wa/dpe)

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)