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
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
(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
Bilder & Vektorgrafiken bearbeiten Design Photoshop

BlendMeIn: Kostenlose Photoshop-Extension bietet direkten Zugriff auf Dutzende von Icon-Sets

Anfang Oktober stellten wir an dieser Stelle das Projekt Flaticons aus dem Hause Freepik vor. Die Spanier hatten eine Photoshop Extension entwickelt, mit deren Hilfe man auf die rasant wachsende Icon-Sammlung, die mittlerweile über 13.000 Symbole beinhaltet, zugreifen kann. Das Konzept, direkt in Photoshop auf Vektor-Icons aus dem Online-Portfolio Freepiks Zugriff zu nehmen, ist nicht für Mockups ideal, weil extrem zeitsparend. Mit BlendMeIn gibt es nun eine Alternative zu Flaticons, die etwas anders angelegt ist.

blendmein-homepage

BlendMeIn: Ebenfalls kostenlose Extension für CS6 und CC

Flaticons und BlendMeIn gemeinsam ist der Preis. Beide Extensions sind kostenlos. Während sich Flaticons auf das eigene Angebot beschränkt, integriert BlendMeIn eine wachsende Zahl externer Icon- und UI-Sets. Aktuell sind knapp zwei Dutzend verschiedener Symbolsätze, darunter bislang ein UI-Set wählbar. Unter den verfügbaren Sammlungen finden sich bekannte Vertreter wie Entypo und einige Sets von VisualIdiot und Brankic, durchweg solides Material also.

blendmein-overview
Startansicht der Extension mit einer Liste der verfügbaren Sets

In meinen Test erwies sich zudem das Angebot aus dem Hause BlendMeIn als stabiler, zumindest unter der 64bit-Version von Photoshop CC. Die 32bit-Version leistete sich Bedenkpausen von teilweise mehreren Minuten, was die Bequemlichkeit der direkten Integration natürlich grandios zunichte macht. Anders als Freepiks Extension stürzte BlendMeIn indes nicht ein einziges Mal ab. Man wird sehen, ob das ein struktureller Vorteil ist oder lediglich an der geringeren Zahl integrierter Symbolsätze liegt.

Aktuell ist Freepiks Portfolio noch deutlich größer als BlendMeIns eingebundene Werke. BlendMeIn lässt jedoch auf der eigenen Website keinen Zweifel daran, dass man durchaus beabsichtigt, das größte Angebot dieser Art zu werden. Ebenfalls auf der Website findet sich entsprechend die Aufforderung, eigene Sets zur Integration einzuschicken. Das erfolgt am besten direkt als PSD mit entsprechend sinnvoll benannten Ebenen und einer pro Icon.

blendmein-single-set
Ansicht eines einzelnen Symbolsatzes

Um den eigenen Bekanntheitsgrad zu verbessern, verlangt BlendMeIn einmalig ein Teilen der Invite-URL über ein soziales Netzwerk. Erst danach werden alle integrierten Symbolsätze freigeschaltet. Das jedoch ist meines Erachtens ein durchaus fairer Preis für die Leistung, die BlendMeIn bietet.

BlendMeIn: So einfach binden Sie die Icons ein

Der Zugang zu den einzelnen Piktogrammen ist einfach. In der Startansicht, die man über Fenster > Erweiterungen > BlendMeIn erreicht, findet sich eine Liste aller integrierten Symbolsätze. Ein Klick auf eine der Sammlungen führt zur Übersicht der enthaltenen Icons. Hier zieht man nun das gewünschte Symbol per Drag & Drop in das Photoshop-Layout. Die nach Sätzen sortierte Darstellung ist äußerst sinnvoll, da die einzelnen Sets von ihrem Design her nicht aufeinander abgestimmt sind.

Ganz so wie in Freepiks Lösung, ist es auch bei BlendMeIn möglich, mit Suchbegriffen zu arbeiten. Ich suchte etwa nach sign und erhielt diese kleine Liste:

blendmein-suche-sign
Suchergebnisansicht

Die Suche findet nahezu verzögerungsfrei statt und zeigt im Ergebnis, was ich bereits erwähnte: Eine wilde Mischung aller Icons aus allen Sammlungen ist unter dem Gesichtspunkt eines konsistenten Designs nicht zu empfehlen.

Die Installation der Extension geht reibungslos und wie gewohnt vonstatten. In der Regel reicht der Download der rund 600 kb schweren .zxp, sowie ein anschließender Doppelklick darauf, um den Extension-Manager zu öffnen und die Installation abzuschließen.

blendmein-extman

Um das Produkt weiter verbessern zu können, bittet BlendMeIn an vielen Stellen um die Teilnahme an einem Interview und lockt mit einem 20 Dollar Gutschein für Amazon. Wer keine Lust oder Zeit für ein Gespräch hat, kann dem Entwicklerteam natürlich auch per Mail behilflich sein.

Mein Fazit: BlendMeIn ist eine stabile Lösung für den Photoshopper, dabei kostenlos und mit einer bislang guten Auswahl verfügbarer Symbolsätze. Ich finde kein Haar in der Suppe.

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
Design HTML/CSS UI/UX

Buttons: Einfache CSS-Bibliothek zur Erstellung vielfältiger Schaltflächen

JavaScript- und Ruby-Entwickler Alex Wolfe aus San Francisco legt mit Buttons eine CSS-Bibliothek vor, die sich um nichts anderes als um die einfache, aber variantenreiche Gestaltung von Schaltflächen auf Websites kümmert. Buttons entsteht unter Verwendung von Sass und Compass, wobei man von diesen beiden Begriffen nur dann etwas gehört haben muss, wenn man die Buttons-Bibliothek an seine persönlichen Bedürfnisse anpassen will. Will man das nicht, reichen CSS-Grundkenntnisse…

Buttons: Einfache CSS-Bibliothek zur Erstellung vielfältiger Schaltflächen

Buttons: Einfach mit CSS, etwas aufgemotzt mit Font Awesome und getunt mit jQuery

Neun verschiedene Button-Styles erstellte Wolfe, darunter auch einen Satz im beliebter werdenden Flat Design. Die Verwendung aller verfügbaren Varianten ist sehr einfach. Hierzu bedarf es lediglich des Befolgens der vorgegebenen Syntax. Button-Styles werden als Klassen übergeben. Wolfe hat sich dabei dafür entschieden, normal sprachliche Bezeichnungen zu verwenden. Darüber lässt sich streiten. Grundsätzlich zeigen sich alle virteullen Knöpfe in diesem Farbschema:

Buttons: Einfache CSS-Bibliothek zur Erstellung vielfältiger Schaltflächen

Wieso die farbigen Buttons nun auf die Bezeichner primary, action, highlight, caution und royal hören, ist letztlich nicht vollständig nachvollziehbar. Insbesondere die Kombination des Bezeichners royal mit der Farbe Violett gibt mir doch Rätsel auf. Aber gut, betrachten wir es als eine Art Vokabeln. Die muss man nicht verstehen, die muss man nur wissen.

Neben den Knöpfen im Flat Design gibt es noch welche mit Glow-Effekt (einem farbigen Schein außen rum), gewölbte, runde und etliche mehr. Will man Icons innerhalb der Elemente einsetzen, ist es erforderlich, Font Awesome mit einzubinden. Die erforderlichen Dateien werden mitgeliefert.

Um Schaltflächen mit Drop-Down-Optionsmenüs zu verwenden, auch das bietet das Framework, ist es erforderlich, die mitgelieferte JavaScript-Datei einzubinden. jQuery wird nicht mitgeliefert, aber ebenfalls vorausgesetzt. Natürlich lassen sich alle Varianten kombinieren.

Zusätzlich enthält das Framework noch einige Wrapper, mit denen man beispielsweise die skeuomorphe Optik einer Türklingel nachbilden kann.

Buttons: Einfache CSS-Bibliothek zur Erstellung vielfältiger Schaltflächen

Wollen Sie sich mit den von Wolfe gelieferten Standards nicht zufrieden geben, benötigen Sie Sass und Compass nebst der entsprechenden Kenntnisse, um im Sourcecode rumzuschrauben. Wolfe erweitert sein Projekt allerdings ebenfalls kontinuierlich. Vielleicht tut es schon etwas Geduld.

So sehen die bisher verfügbaren Schaltflächen im Überblick aus:

Buttons: Einfache CSS-Bibliothek zur Erstellung vielfältiger Schaltflächen

Buttons steht auf Github zum kostenlosen Download und unter Apache Lizenz 2.0 zur kostenfreien Verwendung auch in kommerziellen Projekten zur Verfügung.

Links zum Beitrag

Kategorien
Design HTML/CSS Responsive Design

CIKONSS 1.0: Responsive Icons mit purem CSS, die sogar im IE funktionieren

Icons auf der Basis von PNG, GIF oder meinetwegen auch JPG sind nichts neues. Neuer ist die Vorgehensweise, PNG-Icons in einer Datei als sog. Sprites zu versammeln, um so einiges an Requests zu sparen. Noch interessanter ist es aber, Icons nur mit purem CSS zu erstellen und so auf Overhead komplett zu verzichten. CIKONSS setzen diesen Gedanken um, wobei sie ungewöhnlicherweise auf CSS2 basieren. Auf diese Weise funktionieren die Symbole sogar im Internet Explorer 8.

cikonss-startpage-550

CIKONSS: Und es hat Zzap gemacht

Milana Cap aus Serbien arbeitet seit 5 Jahren als Webdesignerin unter dem Namen Zzap. Daneben ist sie klassische Musikerin am serbischen Nationaltheater. Man kann sicher sagen, dass ihr sehr um die schönen Künste gelegen ist. Von sich selbst sagt sie, dass sie alles, was sie heute über das Web weiß und kann, von der Open Source Community gelernt hat. Das Projekt CIKONSS hat sie aufgelegt, um eben dieser Community etwas zurück zu geben. Meiner Meinung nach ist dieser Versuch durchaus als gelungen zu bezeichnen.

CIKONSS: 43 Icons in unterschiedlichen Größen und Formen

Da die CIKONSS auf CSS2 basieren, sind sie hinsichtlich ihrer Vielfalt etwas eingeschränkt, funktionieren dafür browser-übergreifend, insbesondere auch im ansonsten stets etwas widerspenstigen Internet Explorer. Milana Cap erstellte insgesamt 43 Icons, die allesamt dem UI-Design zuzurechnen sind. Jedes Icon steht in fünf Größen und drei Stilen zur Verfügung.

Die Einbindung in die eigene Website ist simpel. Ich gehe davon aus, dass Sie sich die CIKONSS von Github heruntergeladen und wieder auf Ihren Webspace hochgeladen haben. Nun binden Sie sie wie folgt ein:

Unter Verwendung der Kombination verschiedener Klassen platzieren Sie nun die Icons an beliebiger Stelle Ihrer Website. Das kann zum Beispiel so passieren:

Im Ergebnis sähe das dann so aus:

icon-mail

Jedes Icon wird über die Kombination zweier Span-Elemente definiert. Das erste Span besteht aus der Angabe der Klasse icon, eventuell in Kombination mit einer Größenangabe wie icon-mid für ein Symbol mittlerer Größe. Das zweite Span definiert dann das eigentliche Symbol, in unserem Beispiel einen Briefumschlag als Icon für Mail, hier icon-mail.

Innerhalb des ersten Span kann als dritter Parameter noch ein Stil angegeben werden. Unterbleibt die Angabe, erscheinen die Icons ohne umgebenden Rahmen. Will man die Symbole indes mit einem quadratischen oder runden Rahmen versehen, würde man icon-square oder icon-rounded hinzufügen.

icon-variants
Alle zur Verfügung stehenden Stile

Die definierten Größen der Symbole sind im mitgelieferten CSS einfach anzupassen, so man das möchte. Sie basieren auf em. Für die Icons mittlerer Größe sieht die Standarddefinition so aus:

.icon-mid {
    font-size: 2em;
}

CIKONSS 1.0 steht auf Github, wie auch auf der Projektwebsite zum kostenlosen Download bereit. Es kann unter der MIT-Lizenz sowohl für persönliche, wie auch kommerzielle Zwecke frei eingesetzt werden. Das Projekt ist knappe zwei Wochen alt, also noch ganz frisch. Get it while it’s hot…

Links zum Beitrag

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 Freebies, Tools und Templates Icons & Fonts

Map Icons Designer: 200 Karten-Symbole plus 10 Stecknadel-Icons zur kostenlosen kommerziellen Nutzung

Icons sind diese kleinen Dinger, von denen man als Designer im Grunde nie genug haben kann. Mit dem Set „Map Icons Designer“ legt WebIconSet.com eine große Sammlung von Bildzeichen vor, die sich besonders für den Einsatz auf Landkarten eignen. Zusätzliche zehn Stecknadel-Bildchen für die Aufnahme der eigentlichen Symbole sorgen für ein frisches und zeitgemäßes Gesamtbild. Und kosten soll die ganze Collection auch nichts. Was will man mehr?

map-icons-in-use (640)

Map Icons Designer: Symbole in verschiedenen Größen plus PSD

200 Karten-Symbole beherbergt das Set Map Icons Designer in einem 2,2 MB schweren Downloadpaket, das sich nach dem Entpacken zu runden 5 MB aufbläst und eine gut strukturierte Dateiordnung aufzuweisen hat.

Die Karten-Icons liegen in den Größen 24, 48 und 72 Pixel zum Quadrat, sowie als PSD-Datei mit Vektorformen vor. Die PSD-Datei ist ebenfalls übersichtlich angelegt, verfügt über ein Hilfslinien-Grid und Beschriftungen zu jedem Symbol. Aufgrund der Verwendung von Vektoren sind die Icons auf nahezu jede beliebige Größe zu skalieren.

maps-icons-psd (640)

Ähnliches gilt für die schicken Location-Pins, die Varianten der bekannten Karten-Nadeln aus Google Maps darstellen. Diese liegen als PNG in den Größen 24, 32, 48 und 64 Pixel zum Quadrat, sowohl als einzelne PSD-Dateien und noch einmal zusammengefasst in einer einzigen PSD-Datei vor. Vollständiger kann man nicht liefern.

location-pins (640)

Die Nutzungsbedingungen sind sehr liberal und erlauben sowohl die private, wie auch die kommerzielle Verwendung. Verboten ist lediglich, aber das sollte ohnehin selbstverständlich sein, der Verkauf der Icons, sowie die Verfügbarmachung als Download auf anderen als den Original-Seiten. Nicht zwingend gefordert, aber sehr gern gesehen, wird ein Backlink zu WebIconSet.com, wenn man die Symbole in einem Projekt zum Einsatz bringt.

map-icons-few-examples (640)
Ein kleiner Auszug aus Map Icons Designer

Die Icons können sowohl allein, wie auch in Kombination mit den Location-Pins genutzt werden. Zumeist ist das durchgehend einfarbig schwarze Design der Symbole so gehalten, dass sie universell als Piktogramme für jeglichen Zweck herhalten können. Die Kartennutzung ist lediglich die naheliegendste.

Die Kreativen von WebIconSet.com versprechen die Sammlung regelmäßig zu erweitern und wer andere Kollektionen desselben Hauses kennt, der weiß, sie meinen das ernst.

Links zum Beitrag

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

Exklusiv für Dr.Web-Leser: Freepiks Web Mega Bundle mit 500 Icons kostenlos

Heute haben wir ein ganz besonderes Freebie für die Leserinnen und Leser von Dr. Web und Noupe Magazine. Die Betreiber der bereits mehrfach hier erwähnten Suchmaschine für Design-Ressourcen Freepik stellten uns exklusiv ein dickes Icon-Paket mit 500 verschiedenen Symbolen zur Verfügung. Das Web Mega Bundle 500 gibt es nur bei uns. Lesen Sie weiter…

freepik-web-icon-mega-bundle-article-img

Freepiks Web Icon Mega Bundle 500: 3 verschiedene Größen, PNG und AI

Freepik stellten wir bereits im Sommer 2012 hier vor. Einen Link zu unserem damaligen Beitrag finden Sie weiter unten. Erst vor wenigen Tagen lernten Sie das neueste Projekt der Freepik-Macher hier bei Dr. Web kennen, CSS Matic, einen WYSIWYG-Editor für CSS-Elemente. Auch diesen Beitrag finden Sie weiter unten verlinkt.

freepik-search

Das Freepik Web Mega Bundle umfasst 500 Symbole, die sich besonders gut im Webdesign, aber nicht nur dort nutzen lassen. Das rund 5,3 Megabyte große Downloadpaket beinhaltet die Icons im PNG-Format mit Hintergrundtransparenz in 32, 64 und 128 Pixeln Breite wie Höhe. Die Symbole selbst sind in Graustufen gehalten und fügen sich besonders gut in Flat Designs ein.

Der Anwendungsbereich ist breit angelegt. Neben Piktogrammen für gängige Anwendungslogik, Cloud-Computing und Kommunikation, finden sich auch solche zur Illustration von Transportmitteln, Wetter oder E-Commerce. Ebenso sind Wegweiser-Symbole enthalten. Weiterhin finden sich Avatare und Nutzersymbole.

freepik-web-icon-mega-bundle-teaser

Neben den drei verschiedenen PNG-Größen liegt dem Paket die Quelldatei im Adobe Illustrator Format bei. Diese unterliegt keinen Restriktionen, alle Pfade sind einzeln bearbeitbar. Lediglich die pro Icon erfolgte Gruppierung muss in Illustrator hierzu aufgehoben werden. Auf diese Weise kann aus den 500 Icons jeder machen, was er möchte, mindestens beliebige Größenvarianten erstellen.

web-icon-mega-bundle

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 dem Web Icon Mega Bundle 500…

Und hier geht es zum Download

Download: Web Icon Mega Bundle 500

Links zum Beitrag

  • Die Macher des Bundle und ihre Designressourcen-Suchmaschine | Freepik
  • 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