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
Bilder & Vektorgrafiken bearbeiten Design Essentials Freebies, Tools und Templates Photoshop

Brandneuer Dienst PixelBuddha bietet mindestens ein hochwertiges Design-Freebie pro Woche

Ein neuer Dienst aus Russland, betrieben von den im Designbusiness nicht unbekannten Herren Nick Frost und Greg Lapin, erblickte vor nicht ganz drei Wochen das Licht des weiten Netzes. Ein Jahr haben Frost, Lapin und ihr kleines Team am PixelBuddha gewerkelt. Sie vertreiben darüber zum einen ihre Premium-Ressourcen, wie etwa die Bezahlvariante der Smallicons, zum anderen und vor allem aber schon jetzt ein ansehnliches Häuflein kostenloser Design-Freebies, deren Qualität durchweg zu überzeugen weiß. Der PixelBuddha wird auch Ihren Werkzeugkasten erobern, da bin ich mir ziemlich sicher…

pixelbuddha-landing-page

PixelBuddha, von den Machern der Smallicons und Ballicons

Nick Frost und Greg Lapin findet man auf sämtlichen namhaften Kreativ-Marktplätzen des Netzes. Besonders ihre Icon-Kollektionen haben sie bekannt gemacht. Dabei war sicherlich unsere Verwandte, das Smashing Magazine nicht ganz unbeteiligt. Denn hier wurde die kostenlose Version der Smallicons in einer erweiterten Version bislang exklusiv zum Download angeboten. Smashing mit seinen über 10 Millionen Pageviews im Monat kann man wohl mit Fug und Recht als Sprungbrett für die Steigerung der eigenen Bekanntheit bezeichnen. Mit dem Start des PixelBuddha stehen die Smallicons auch dort zum Download bereit. Hier gibt es sogar eine aktualisierte Version 1.1 mit weiteren 70 Icons.

Ist es nicht wunderbar, heutzutage Designer zu sein? Als ich seinerzeit damit anfing, da gab es nichts umsonst. Clipart-Kollektionen kamen auf acht CDs mit Kopierschutz und das Suchen und Finden brauchbarer Elemente war eine reine Qual. Heute kann ich mir als Designer tausende von Ressourcen, noch dazu äußerst hochwertige in einem Maße verfügbar machen, dass ich schon wieder die Qual habe, aber nicht die Qual des Suchens und Findens, sondern die Qual der Wahl.

PixelBuddha, frei auch für kommerzielle Projekte

Frost und Lapin haben festgestellt, dass es ihnen eher liegt, der Designcommunity gute Dienste zu erweisen als individuellen Kunden. Der PixelBuddha wird daher wohl das zentrale Projekt des russischen Teams werden. Man darf gespannt sein, wohin sich der Dienst entwickelt.

Thematisch begrenzt sich das Team nicht. Man will sowohl UI-Kits, wie HTML-Templates, wie PSDs, wie Animationen, Vektoren, Mockups und so weiter anbieten. Alle Freebies sind kostenlos frei nutzbar, sowohl für private, wie auch für kommerzielle Projekte. Bei den Premium-Angeboten muss man genauer auf die Lizenzen achten. Interessant, das ist sonst anders herum ;-)

Naturgemäß ist der Befüllungsgrad des Dienstes, nachdem er gerade vor knapp drei Wochen gestartet ist, noch sehr überschaubar. Dennoch sind schon einige Perlen dabei. Die Macher versprechen, mindestens ein Freebie pro Woche zusätzlich verfügbar zu machen. Mehr wird ausdrücklich nicht ausgeschlossen.

Auch für externe Designer ist der Service offen. Wen Sie also wollen, senden Sie Ihr Freebie ein. Eventuell übersteht es die – nach Angaben der Macher – strengen Qualitätskriterien und wird in den Bestand übernommen. Im mit Tumblr betriebenen Blog geben Frost und Lapin Einblicke in ihre Ziele und Perspektiven, aber auch ganz profan Projektfortschritte und sonstige Neuigkeiten preis.

Damit Sie sich ein Bild machen können, habe ich hier meine Lieblings-Ressourcen zusammengestellt. Dabei habe ich auf die Smallicons und Ballicons verzichtet, weil Sie die ja sicherlich ohnehin schon kennen:

Neon Signboard Effect (PSD)

pixelbuddha-neonslide-greatwall-pool

Vintage Logo-Kit Vol. 2 (PSD mit Vektorformen)

pixelbuddha-greatevillage-vintagelogo

Numbers UI Kit (PSD-Kit für Daten, Zahlen, Statistik)

pixelbuddha-numbers-ui-kit

Buddha Line Icons Vol. 1 (PSD mit Vektorformen, PNG)

pixelbuddha-buddha-line-icons

Identity Mockup Vol. 1 (PSD mit Smart Objects)

pixelbuddha-identity-mockup

Sie sehen, der PixelBuddha hat Potential. Folgen Sie ihm auf Twitter, Facebook, Dribbble oder konventionell via RSS, um stets auf dem Laufenden zu sein. Wer’s mag, kann auch einen E-Mail-Newsletter abonnieren…

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

HTML 5 und SVG: Per PHP und ImageMagick generiertes PNG-Fallback für ältere Browser

Das SVG-Format hat zahlreiche Vorteile: Vor allem, dass es vektorbasiert ist, macht es zu einer Besonderheit unter den gängigen Bildformaten für Browser. Auch wenn alle modernen Browser das Format mittlerweile unterstützen, gibt es gerade beim Internet Explorer noch Probleme. Denn dieser unterstützt SVG erst ab Version 9. Da auch ältere Versionen noch stark verbreitet sind, bietet sich ein Fallback an. Mit PHP und ImageMagick kann ein solches PNG-Fallback automatisch generiert werden.

svg-php-imagemagick

SVG-Dateien an ein PHP-Script schicken

Das Prinzip unserer Fallback-Lösung ist einfach: Per „.htaccess“ wird zunächst dafür gesorgt, dass beim Aufruf von Dateien mit der Endung „.svg“ ein PHP-Script aufgerufen wird. Dieses Script prüft, welcher Browser in welcher Version verwendet wird. Beim Internet Explorer kleiner 9 wird das PHP-Script die SVG-Grafik per ImageMagick ins PNG-Format konvertieren und als solches ausgeben, bei allen anderen als SVG-Format.

Folgende zwei Zeilen in der „.htaccess“ genügen, um per „RewriteRule“ bei entsprechenden Anfragen ein PHP-Script aufzurufen:

RewriteEngine On
RewriteRule \.svg$ /svg.php [L]

Im nächsten Schritt wird die Weiterverarbeitung innerhalb des PHP-Scriptes definiert.

Grafik per ImageMagick in PNG konvertieren

Das PHP-Script muss zunächst wissen, welche Datei wiedergegeben werden soll. Hierzu wird der Pfad zur angeforderten SVG-Datei ausgelesen.

$datei = $_SERVER["DOCUMENT_ROOT"].$_SERVER["REQUEST_URI"];

Die Variable „$datei“ enthält den absoluten Pfad zur SVG-Datei, welche vom Browser angefragt wird. Anschließend wird der Inhalt dieser Datei ausgelesen:

$grafik = file_get_contents($datei);

Die Variable „$grafik“ enthält nun den SVG-Quelltext. Im nächsten Schritt werden Name und Version des verwendeten Browsers ermittelt. Dies kann auf zwei Arten geschehen. Per „$_SERVER["HTTP_USER_AGENT"]“ wird der User-Agent-Header des Browsers ausgelesen. Daraus können Name und Version des Browsers abgeleitet werden.

Alternativ können die Informationen über „get_browser()“ ermittelt werden. Bei Verwendung dieser Methode müssen die Werte aus dem User-Agent-Header nicht selbst extrahiert werden, sondern werden aus der Datei „browscap.ini“ bezogen, die serverseitig zur Verfügung steht. Allerdings stellen nicht alle Provider aktuelle Browserinformationen über diese Datei bereit, sodass man sich im Einzelfall für die etwas aufwändigere Methode entscheiden muss.

$browser = get_browser();

Im Beispiel wird die Variante per „get_browser()“ verwendet. Über eine „if“-Abfrage wird nun die Ausgabe der Grafik gesteuert. Bei allen Versionen des Internet Explorers kleiner 9 wird per ImageMagick die SVG-Grafik konvertiert:

if ($browser["browser"] == "IE" && $browser["majorver"] < 9) {
  $png = new Imagick();
  $png->setBackgroundColor(new ImagickPixel("transparent"));
  $png->readImageBlob($svg);
  $png->setImageFormat("png32");
  header("Content-Type: image/png");
  echo $png;
} else {
  header("Content-Type: image/svg+xml");
  echo $svg;
}

Dazu wird per „new Imagick()“ eine neues Bildobjekt von ImageMagick erstellt. ImageMagick ist bei vielen Providern installiert und wird unter anderem von TYPO3 zur internen Bildbearbeitung verwendet. Das Bildobjekt erhält einen transparenten Hintergrund, um Transparenzen der SVG-Grafik zu erhalten. Anschließend wird die SVG-Grafik ausgelesen und ins PNG-Format konvertiert.

Da die im Browser aufgerufene Datei die Endung „.svg“ besitzt, muss dem Browser per Header explizit mitgeteilt werden, dass etwas im PNG-Format ausgegeben wird. Ansonsten wird gegebenenfalls nur der Quelltext der PNG-Datei im Browser dargestellt. Im letzten Schritt wird der Inhalt der PNG-Grafik per „echo“ ausgegeben.

Während beim Internet Explorer kleiner 9 also eine PNG-Grafik wiedergegeben wird, wird bei allen anderen Browsern die SVG-Grafik einfach nur per „echo“ an den Browser geschickt.

Einschränkungen beachten

Damit ImageMagick SVG-Grafiken korrekt und vollständig auslesen kann, müssen einige Einschränkungen beachtet werden. So kann ImageMagick ausschließlich Inline-Stylesheets auslesen. Alles, was über einen Style-Block definiert wird, wird ignoriert. Auch Schriften, die per CSS definiert sind, kann ImageMagick nicht auslesen.

SVG-Animationen gehen bei der Konvertierung natürlich verloren. Auch dies sollte berücksichtigt werden.

Das Fallback per PHP und ImageMagick hat den Vorteil, dass der HTML-Quelltext nicht angefasst werden muss und auf JavaScript verzichtet werden kann. Außerdem muss die Fallback-Grafik nicht manuell bereitgestellt werden.

(dpe)

Kategorien
Freebies, Tools und Templates

Exklusives Vektor Freebie: 250 Ultimate World Monuments Icon Pack von Freepik

Und wieder einmal 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. Heute haben wir 250 Vektor-Symbole, nämlich das „Ultimate World Monuments Icons Pack“ zu bieten. Jedes dieser Icons repräsentiert ein berühmtes Gebäude oder anderen prominenten Ort aus aller Welt. Sämtliche Piktogramme sind vektor-basiert und können für jede Art von Projekt, ob privat oder kommerziell eingesetzt werden. Nur bekommen, bekommen können Sie sie nur hier (und bei Schwesterchen Noupe)…

250 Ultimate World Monuments Icons Pack: 250 weltbekannte Orte als Icons in PNG, AI, EPS, PSD and 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. Erst vor knapp zwei Monaten konnten wir Ihnen das Flat Icon Set mit 200 Symbolen exklusiv anbieten.

Freepik, the Search Engine for Design Resources

Freepik, fantastische Suchmaschine für Design-Ressourcen

Die 250 Symbole aus unserem heutigen Set sind etwas besonderes und entsprechen so gar nicht dem Klischee des durchschnittlichen Symbolsatzes. Das 7,9 MB schwere Download-Zip beinhaltet nicht nur alle Piktogramme im PNG-Format bei voller Transparenz und in den Größen 32, 64 und 128 Pixel im Quadrat. Vielmehr erhalten Sie zudem die Rohdateien in den Formaten AI und EPS, aber auch als PSD und SVG. Wenn das nicht vollständig zu nennen ist, was dann?

Die Vekordaten 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.

The Whole Set

Alle Icons im Überblick

Unser Monumente-Bundle beinhaltet berühmte Gebäude und Sehenswürdigkeiten aus aller Welt. Neben den üblichen Verdächtigen, wie der Freiheitsstatue und dem Weißen Haus, finden sich Lokationen aus Indonesien, China, Europa, Süd-Afrika, Indien, Russland oder Japan – um nur einige zu nennen. Dieses Pack wird jeden Globetrotter und Weltenbummler erfreuen, sowie sehr nützlich für bestimmte Projekte mit internationalem Bezug sein.

Vectorized Convenience

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 unserem 250 Ultimate World Monuments Icons Pack aus dem Hause Freepik…

Und hier geht es zum Download…

Download: 250 Ultimate World Monuments Icons Pack

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
Kategorien
Apps Programmierung

HTML5 Device Mockups: Populäre Geräte als Rahmen für Live-Webinhalte auf der eigenen Site nutzen

Das hier macht Freude. Wir kennen Finnland ja bereits für eine ganze Reihe toller Dinge, etwa Gummistiefel und – äh – Helsinki. Die Entwickler Angelos Arnis und Tomi Hiltunen wollen diesem famosen Portfolio finnischer Bekanntheit eine weitere Facette hinzufügen. Sie veröffentlichten vor wenigen Tagen auf Basis von PNG und HTML5/CSS3 einen Satz an Mockups verschiedener populärer, vor allem mobiler Geräte, nebst der Möglichkeit, den Viewports dieser Geräte echte Webinhalte, nicht etwa nur Screenshots, zu implementieren. Das ist ideal, wenn man demonstrieren will, wie das eigene Portfolio, etwa als Entwickler mobiler Web-Apps, auf verschiedenen Geräten angezeigt werden wird. Ich bin sicher, die Lösung von Arnis und Hiltunen wird schnell Freunde finden…

html5-device-mockups-w640

Pures CSS oder HTML5 Data-Attribute steuern das Look & Feel

Aktuell besteht das Set von HTML5 Device Mockups aus acht populären und verbreiteten (mit Ausnahme des Lumia 920 und des Surface-Tablets) Geräten. Es gibt das iPhone5 und das iPad in Hoch- und Querformat, jeweils in weiß und schwarz. Desweiteren steht ein iMac und ein MacBook Pro bereit. Die Android-Fraktion freut sich über das Galaxy S3 in blau und weiß und verschiedenen Ausrichtungen, sowie ein Nexus 7. Last und auch least ist es möglich, Webinhalte zusätzlich in den Viewport eines Lumia 920, sowie eines Surface-Tablet zu stecken. Schön am Lumia, es ist in gelb implementiert…

Neben den für die Darstellung erforderlichen PNGs mit Alpha-Transparenz liefern Arnis und Hiltunen die PSD-Dateien zu den einzelnen Geräten mit. Auf diese Weise kann man die Mockups auch für Druck-Präsentationen, Flyer und ähnliches nutzen.

Der Motor des Projekts, das auf Github gehostet wird, besteht aus zwei CSS-Dateien. Beide erledigen die gleiche Aufgabe. Der Unterschied besteht darin, dass die Datei device-mockups.css mit zusätzlichen CSS-Klassen arbeitet, während die Datei device-mockups2.css das gleiche Ergebnis unter Verwendung von HTML5 Data-Attributen erzielt.

Das folgende Beispiel arbeitet auf der Basis der zweiten Variante, aber greifen wir nicht zu weit vor. Als erstes bauen wir das entsprechende CSS in unsere Website ein:

Dann verwenden wir die mitgelieferte Mockup Device Generator.html, indem wir sie in einem Browser unserer Wahl aufrufen, alternativ verwenden wir den Generator der Demo-Site. Jetzt klicken wir das gewünschte Mockup zusammen und lassen uns den korrespondierenden Code anzeigen. Per Copy & Paste übernehmen wir diesen in unsere Website.

Ich wählte entsprechend ein weißes iPhone im Querformat. So sieht das aus:

white-iphone5-landscape-w640

Und dieser Code gehört dazu:

Wie Sie sehen, erfolgt die Definition des entsprechenden Geräts komplett mittels Data-Attributen. Die andere Variante hätte zusätzliche CSS-Klassen verwendet.

Der wichtigste Teil innerhalb dieses kleinen Code-Schnipsels findet sich als das div mit der Klasse screen. Hier können Sie den gewünschten Inhalt einfügen. Dieser Inhalt kann im Grunde alles sein, was man auch ansonsten auf Websites präsentieren würde, also beispielsweise Medien, wie Videos und Bilder, oder JavaScript-Anwendungen oder was auch immer man in einen iframe packen kann. Das div mit der Klasse button erlaubt es, dem Home-Button eine Funktionalität zuzuweisen. Kann man machen, oder man entfernt das Div komplett.

embedded-content-w640
Beispiele von der Projekt-Website

Viel Fantasie bedarf es nicht, den Nutzen der Lösung zu erkennen. Der offensichtlichste Anwendungsfall dürfte wohl der sein, für mobile Geräte konzipierte Lösungen auch außerhalb dieser Geräte auf der eigenen Website zu zeigen.

Die HTML5 Device Mockups, so der offizielle Projekt-Name, stehen kostenfrei, sowohl zur privaten, wie kommerziellen Nutzung zur Verfügung. Auch die Modifikation ist erlaubt, wie mir einer der beiden Entwickler eben per E-Mail bestätigte..

Was halten Sie von dem Projekt? Lassen Sie es mich wissen.

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