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

Give it to Someone Special: Kostenlose Weihnachts-Designs von Freepik

Wie in jedem Jahr arbeitest du wahrscheinlich wenigstens nebenbei immer noch an weihnachtlichen Aufträgen: Websites, Banner, Präsentationen, Handzettel und was nicht alles. Dafür braucht man bekanntlich eine ganze Menge Designelemente, damit die immer gleichen Ideen, die sich zwangsläufig aus dem Thema ableiten, wenigstens nicht auch immer gleich aussehen. Suchst du noch? Dann lass mich dich auf die folgende große Sammlung mit weihnachtlichen Vektorgrafiken aus dem Hause Freepik aufmerksam machen. Unsere spanischen Freunde erleichtern dir die Erstellung von Weihnachts-Illustrationen erheblich. Und das Ganze noch dazu völlig kostenlos. Es ist halt das Fest des Gebens…

Kostenlose Weihnachts-Designs von Freepik

Schneemänner, Weihnachtsbäume, Christbaumkugeln, Muster, winterliche Hintergründe und Texturen, sowie eine ganze Reihe weiterer jahreszeitlich passender Elemente lassen deine Designprodukte festlich, mindestens aber professionell erscheinen. Such dir aus dem großen Fundus von Freepik einfach das raus, was dich anspricht, lad es runter und pass es deinen Bedürfnissen an.

Los geht’s.

Kostenlose Weihnachts-Designs von Freepik by Freepik

Kostenlose Weihnachts-Designs von Freepik by Freepik

Kostenlose Weihnachts-Designs von Freepik by Freepik

Kostenlose Weihnachts-Designs von Freepik by Freepik

Kostenlose Weihnachts-Designs von Freepik by Freepik

Kostenlose Weihnachts-Designs von Freepik by Freepik

Kostenlose Weihnachts-Designs von Freepik by Freepik

Kostenlose Weihnachts-Designs von Freepik by Freepik

Kostenlose Weihnachts-Designs von Freepik by Freepik

Kostenlose Weihnachts-Designs von Freepik by Freepik

Kostenlose Weihnachts-Designs von Freepik by Freepik

Kostenlose Weihnachts-Designs von Freepik by Freepik

Kostenlose Weihnachts-Designs von Freepik by Freepik

(dpe)

Kategorien
Cartoons Essentials Exklusiv bei drweb.de

Cartoon: der perfekte Webdesigner

Ab und an darf man wohl mal einen Kalauer raushauen, was? Sicherlich ist der hier vorgestellte Webdesigner unbestreitbar effektiv und seine Designs funktionieren quasi todsicher. Dafür sehen sie aber stets gleich aus. Vielleicht ist es also doch gar nicht so verkehrt, wenn man diesen Grad der Perfektion nie erreicht. Wer will in desem Sinne schon der perfekte Webdesigner sein?

der perfekte Webdesigner

Übrigens, weitere Cartoons gibt es hier.

Der Cartoon erschien zuerst in unserem zweiwöchentlichen Newsletter. Ein Abonnement lohnt sich.

Kategorien
Cartoons Essentials Exklusiv bei drweb.de

Cartoon: Wenn ein Smartphone ein Hammer wäre…

Ich teste so ziemlich jedes Smartphone, das das Licht der Welt erblickt und maße mir daher an, einen objektiven, zumindest umfassenden Überblick über Vor- und Nachteile aller gängigen Geräte zu haben. Besonders amüsiert bin ich stets dann, wenn Android-Fans sich über iPhone-Anhänger auf der Basis technischer Spezifikationen lustig machen. „Haha, das iPhone 6s hat ja nicht mal einen Dezicore 9GHz und 12 Gigabyte Arbeitsspeicher.” Klar, ich kenne die Leistungsboliden, die schnell genug wären, um einen Pixar-Film an einem Abend zu rendern. Der Haken ist aber: Das muss ja keiner! Von daher erscheint mir der Vergleich so unnötig, wie es der heutige Cartoon kaum besser zum Ausdruck bringen könnte:

Wenn ein Smartphone ein Hammer wäre

Übrigens, weitere Cartoons gibt es hier.

Der Cartoon erschien zuerst in unserem zweiwöchentlichen Newsletter. Ein Abonnement lohnt sich.

Kategorien
Essentials Exklusiv bei drweb.de

Gewinner unseres Samsung UHD-Monitors ist …

Samsung möchte seine UHD-Baureihe in Designerkreisen bekannter machen. Das neuste Mitglied der Familie bietet einen 32-Zoll-Screen und wurde erst kürzlich ausführlich von uns unter die Lupe genommen. In einem Quiz haben wir den kleineren Bruder mit 28 Zoll Diagonale als Gewinn ausgelobt. Nur ein paar einfache Fragen mussten richtig beantwortet werden. Einer von über 400 Teilnehmern kann sich nun freuen!

samsung-u28e850r-winner_DE

Wer wollte nicht gern einen 71-Zentimeter-Monitor mit 3.840 x 2.160 Pixeln sein eigen nennen?

Der Monitor, den wir verlost haben, ist der Samsung U28E850R LED, über den Sie sich an dieser Stelle im Detail informieren können. Er entspricht von seinen Leistungsdaten dem Samsung U32E850R, den wir letzten Monat in diesem ausführlichen Review vorgestellt haben.

3_samsung_b2b_uhd_monitor_ud970

Der Unterschied besteht lediglich in der geringeren Bildschirmdiagonale, die mit 28 Zoll, also 71,12 Zentimetern immer noch mehr als üppig ist. Die unverbindliche Preisempfehlung unseres Gewinns liegt bei 609 Euro.

Genug der Vorrede. Tusch, Feuerwerk, Trommelwirbel! Gewonnen hat:

Marcel Weissenborn

Herzlichen Glückwunsch, Marcel. Du hast Post! Danke an alle anderen für die sehr rege Teilnahme.

Kategorien
Design Essentials Exklusiv bei drweb.de Webdesign

Bloomberg im Dr. Web Sitecheck

Nachrichtenportale scheinen nicht immer empfänglich zu sein für eine zeitgemäße Gestaltung und den Einsatz neuer Techniken wie HTML5 und CSS3. Oftmals wird auf ein starres Layout gesetzt, was der klassischen Bannerwerbung entgegenkommt. Eine gelungene Ausnahme ist die Website des US-amerikanischen Nachrichtenportals Bloomberg, welches vor allem für seine Wirtschaftsnachrichten international bekannt ist.

drweb-sitecheck-bloomberg-teaser_DE

Responsives Layout und übersichtliche Navigation

Während viele Nachrichtenseiten oftmals getrennte Desktop- und Mobilversionen haben, setzt Bloomberg auf ein responsives Layout. In der Desktopansicht findet man eine recht übersichtliche Navigation im Kopfbereich. Deutlich abgesetzt sind dort zwei Menüs angesiedelt. Oben auf der Seite gibt es einen schmalen schwarzen Balken mit Links unter anderem zum Unternehmen und seinen Produkten. Darunter ist ein größerer Bereich mit der eigentlichen Navigation. Über wenige großzügige Links erreicht man die Hauptbereiche des Portals sowie die Suche. Per Mouse-over auf die Links klappt sich ein Layer auf, der je nach Bereich zusätzliche Links und Teaser zu aktuellen Artikeln darstellt.

bloomberg_startseite_navigation
Ausgeklappte Navigation

Über einen Pfeil-Button klappt sich eine ausführliche Navigation auf, über die Unterseiten der jeweiligen Hauptbereiche direkt ausgewählt werden können. Von dort gelangt man auch zu den anderen Nachrichtenseiten „Politics“ und „View“. Bloomberg schafft mit seiner Navigation den schwierigen Spagat zwischen Übersichtlichkeit und Ausführlichkeit.

Bei Bedarf wird die übersichtliche Navigation mit ihren wenigen Links einfach erweitert. So wird man nicht sofort mit einer Vielzahl an Menüpunkten konfrontiert und kann sich sehr komfortabel weiteren Inhalten annähern.

In der Ansicht für Mobilgeräte reduziert sich die Navigation auf den Pfeil-Button sowie die Suche. So bleibt auch die mobile Navigation sehr übersichtlich.

bloomberg_startseite_mobil
Mobilansicht ohne und mit ausgeklappter Navigation

Schön ist zudem, dass Bloomberg auf einen überladenen Footer verzichtet. Auch dort findet man nur einige wenige Links.

Mehrspaltigkeit, die sich anpasst

Eine Gemeinsamkeit zu vielen anderen Nachrichtenportalen ist die Mehrspaltigkeit. In der Desktopansicht sind es vier Spalten, auf die die Inhalte verteilt werden. Die zwei schmaleren äußeren Spalten werden für Top-Nachrichten sowie Kommentare und Meinungen genutzt. In den beiden breiten Spalten sind Teaser zu einzelnen Artikeln zu finden. Da die linke Spalte deutlich länger ist als als die anderen drei, sorgt die Website per JavaScript dafür, dass sich die linke Spalte beim Scrollen schneller bewegt als die anderen. So entsteht kein unschöner Freiraum unterhalb der anderen Spalten.

bloomberg_startseite_mehrspaltigkeit
Unterschiedliche Mehrspaltigkeit – je nach verfügbarer Breite

Die Anzahl der Spalten reduziert sich bei schmaler werdender Darstellung. So verschwindet zunächst die rechte und bei noch schmalerer Darstellung auch die linke Spalte. In der Mobilansicht ist letztendlich nur noch eine Spalte vorhanden. Wie es sich für ein ordentliches responsives Layout gehört, werden die Spalten nicht ausgeblendet, sondern als Block innerhalb der verbliebenen Spalten beziehungsweise der letzten verbleibenden Spalte integriert.

Da die Bereiche für die Top-Nachrichten sowie Kommentare und Meinungen ohnehin farblich abgesetzt sind, integrieren sie sich auch gut in die verbliebenen Spalten und unterscheiden sich dank unterschiedlicher Farbgebung auch von den Artikel-Teasern.

HTML5 und CSS3 – aber Flash-Videos

Weitestgehend vorbildlich ist auch der Quelltext und der Einsatz von HTML5 und CSS3. Neben dem „<main>“-Element werden einzelne Bereiche mit dem „<section>“-Element ausgezeichnet. Teaser und Artikel sind per „<article>“-Element umschlossen. Lediglich die Navigation wird nicht mit dem passenden „<nav>“-Element ausgezeichnet.

Aber auch andere HTML-Elemente kommen zum Einsatz. So wird beispielsweise das „<time>“-Element eingesetzt, um das Veröffentlichungsdatum eines Artikels zu deklarieren.

Bei der Gestaltung wird auf CSS3 gesetzt. CSS3-Animationen werden jedoch sehr zurückhaltend eingesetzt. Zum Einblenden von Social-Media-Links werden Animationen verwendet. Während auf Desktoprechnern die Social-Media-Links per Mouse-over eingeblendet werden, lassen sie sich auf Mobilgeräten über einen Button einblenden.

bloomberg_videos
Videoeinbindung

Überraschend ist, dass die Videos der Website standardmäßig über Flash bereitgestellt werden. Lediglich auf Mobilgeräten werden Videos im HTML5-Format angeboten. Das überrascht ein wenig, da ansonsten doch recht vorbildlich HTML5 verwendet wird.

Auffallend bunte Gestaltung

Gestalterisch ist die Farbauswahl für eine Website, die sich vor allem auf Wirtschaftsnachrichten und politische Nachrichten fokussiert hat, durchaus gewagt. Der Grundton ist ein leuchtend dunkles Blau, das durch weitere eher knallige Farben ergänzt wird. Jeder Bereich erhält eine eigene Akzentfarbe.

Während die Startseite von Bloomberg noch eher zurückhaltend und konservativ gehalten ist und die knalligen Farben nur relativ dezent für Linien und Überschriften eingesetzt werden, sind viele Übersichtsseiten der verschiedenen Themenbereiche schon deutlich knalliger in der Gestaltung.

bloomberg_technology
Themenbereich „Technology“

Da rücken die Akzentfarben in den Vordergrund und sorgen für eine ungewöhnlich auffallende Gestaltung. Hier zeigt Bloomberg sehr deutlich, wie sich die Website von anderen Nachrichtenportalen unterscheidet. Insgesamt erhalten die Übersichtsseiten der Themenbereiche teils abweichende Layouts. Gemeinsame Klammer ist jeweils der Kopfbereich, der jedoch auch immer die jeweilige Farbe des Bereichs annimmt.

Dezente Werbung und Barrierefreiheit

Gerade kostenlose Dienste kommen ohne Werbung nicht aus. Das gilt auch für Bloomberg. Allerdings verzichtet die Website auf allzu große Banner. Es gibt im oberen Bereich meist ein Banner und vereinzelt in den Spalten. In keinem Fall sind die Banner aufdringlich oder haben sich über Inhalte gelegt.

Aufgrund des Einsatzes von HTML5-Elementen sind die meisten Inhalte semantisch bereits so ausgezeichnet, dass Screenreader diese entsprechend interpretieren können. Bemängeln kann man bestenfalls, dass zusätzliche ARIA-Eigenschaften für eine noch bessere Auszeichnung einzelner Elemente für Menschen mit Sehbehinderungen gesorgt hätten.

Fazit

Die Website von Bloomberg gehört gestalterisch und technisch derzeit sicher zu den Vorzeigeseiten – vor allem, was Nachrichtenportale betrifft. Responsivität und der Einsatz von HTML5 und CSS3 machen die Seite zu einem Beispiel guter Webentwicklung. Hier und da gibt es sicher Optimierungsmöglichkeiten. Aber den Vergleich zu Mitbewerbern braucht Bloomberg sicher nicht zu fürchten.

(dpe)

Kategorien
Design Essentials Exklusiv bei drweb.de Webdesign

SPIEGEL Online im Dr. Web Sitecheck

SPIEGEL Online gehört zu den beliebtesten deutschen Nachrichtenportalen. Sich der großen Bekanntheit und hohen Reputation bewusst, gibt es bei der Website ebenso wie beim gedruckten SPIEGEL Magazin nur sehr behutsame gestalterische und inhaltliche Veränderungen. Aber sind Gestaltung und Technik von SPIEGEL Online noch zeitgemäß? Wie sieht es mit der Benutzerfreundlichkeit und Barrierefreiheit aus? Zeit für einen Website-Check.

drweb-sitecheck-spon-teaser_DE

Konservative Gestaltung

Der SPIEGEL existiert seit 1947, SPIEGEL Online seit 1994. Bereits beim gedruckten Magazin erkennt man, dass gestalterische Veränderung sehr zurückhaltend zu spüren ist. Der markante Schriftzug und die Farbe sind seit Jahrzehnten fester Bestandteil und vermitteln Tradition, Werte und Beständigkeit.

Was bei einem gedruckten Magazin gut funktioniert, hinterlässt bei einer Website ganz andere Eindrücke. Die schnelle technische Entwicklung von Internet und Geräten lässt eine „traditionelle“ Gestaltung schnell alt aussehen. Das stellt man bei SPIEGEL Online durchaus fest.

spiegel-online_spalten
Klassisches zweispaltiges Layout

Wo neue Nachrichtenmagazine wie Krautreporter und Vice, die ihren Ursprung nicht im gedruckten Bereich haben, bei der Gestaltung gänzlich andere Wege gehen, findet man bei SPIEGEL Online noch die klassische Zweispaltigkeit: Während links die Inhalte präsentiert werden, ist die schmalere rechte Spalte für zusätzliche Links und andere Zusatzinformationen reserviert. Die rechte Spalte entspricht der klassischen Marginalie, wie man sie in vielen Druckmedien findet.

Design von gestern

Insgesamt ist die Gestaltung der Website wenig beeindruckend. Wo andere Nachrichtenportale mittlerweile dank fluidem Design die gesamte im Browser zur Verfügung stehende Fläche einnehmen, bleibt SPIEGEL Online stoisch bei einer festen Breite von 855 Pixel. Die Gründe für das starre Seitenformat liegen sicher auch im klassischen Online-Werbekonzept, welches nach wie vor auf starre Formate für Banner beruht und responsives Design noch nicht oder zumindest noch nicht ausreichend berücksichtigt.

spiegel-online_startseite_2000_2015
Die Startseite aus dem Jahr 2000 und 15 Jahre später

Als Schrift wird standardmäßig die „Verdana“ eingesetzt. Diese war schon zu ihren Anfangszeiten wenig ansprechend und elegant. In Zeiten unbegrenzter typografischer Möglichkeiten hätte man hier längst auf die Hausschrift des SPIEGEL setzen können.

Viel Inhalt, wenig Struktur

Insgesamt fällt auf, dass SPIEGEL Online viel Inhalt unterbringt – nicht nur auf der Startseite, sondern auch auf den Artikelseiten. Der Nachrichtenfeed auf der Startseite wird immer wieder unterbrochen von zusätzlichen Elementen, auf denen Videos, Kolumnen und Empfehlungen eingeschoben werden.

spiegel-online_startseite
Die gesamte Startseite auf einem Blick: mehr als 10.000 Pixel hoch

Diese Einschübe werden zudem kaum vom restlichen Inhalt abgesetzt. Das macht es schwer, sich auf der Website zu orientieren. Gleiches gilt für die Navigation. Allein im Kopf findet man gleich mehrere unabhängige Menüs mit teils willkürlich erscheinender Zusammensetzung. So sind im ersten Menü Abo, SPIEGEL Magazin und Forum ebenso untergebracht wie der Link zur englischsprachigen Ausgabe. Direkt daneben findet sich ein weitere Menü, das einem zu Schlagzeilen und Wetter führt. Unterhalb des Kopfbanners gibt es dann das Themenmenü.

spiegel-online_menue
Die aus mehreren Einzelmenüs zusammengesetzte Navigation

Am Seitenende erwartet einen noch einmal ein großer Block mit verschiedenen Menüs. Eine klügere Zusammenfassung der Menüpunkte würde hier zu mehr Übersichtlichkeit führen und den oder anderen Inhalt auch leichter auffindbar machen.

Nicht Stand der Technik

Neben Inhalt und Gestaltung spielt bei einer Website die Technik natürlich ebenfalls eine wichtige Rolle. Auch hier scheint SPIEGEL Online kein Freund zeitgemäßer Entwicklung zu sein. HTML5 findet man vergebens, wenn man einen Blick in den Quelltext wirft. Dabei ist der Einsatz von HTML5 gerade für die Semantik einer Website von großer Bedeutung. Suchmaschinen und Screenreader können dank der neuen HTML-Elemente die einzelnen Bereiche – Kopf, Navigation, Inhalt, Rand – besser einordnen und dem Nutzer zugänglich machen.

Auch Videos werden standardmäßig noch per Flash ausgeliefert, statt per HTML5. Nur, wenn kein Flash zur Verfügung steht, wird auf HTML5 gesetzt. Eigentlich sollte es, falls man Flash-Videos überhaupt noch unterstützen will, umgekehrt sein.

CSS3-Eigenschaften werden eingesetzt, um beispielsweise abgerundete Ecken und Schlagschatten darzustellen. Die Animationsmöglichkeiten von CSS3 bleiben ungenutzt.

Kein responsives Design, keine Barrierefreiheit

Die Liste der nicht unterstützten Techniken lässt sich fortsetzen. So besitzt SPIEGEL Online kein responsives Layout. Mobilgeräte werden auf die eigene Mobilversion umgeleitet. Die flexiblen Möglichkeiten eines responsives Designs, die vor allem die zahlreichen Displaygrößen berücksichtigen können, werden außen vor gelassen.

spiegel-online_mobil
Die eigenständige Mobilversion

Auch Barrierefreiheit wird vernachlässigt. Der Verzicht auf semantische HTML5-Elemente ist eines. Dazu kommt, dass auch ARIA-Auszeichnungen, welche gerade für sehbehinderte Nutzer wichtig sind, fehlen.

Fazit

Für eines der bedeutendsten deutschen Nachrichtenseiten vernachlässigt SPIEGEL Online viele gestalterische und technische Möglichkeiten. Vor allem aber die fehlende Barrierefreiheit fällt negativ auf. Dass ein Nachrichtenmagazin, welches seit Bestehen der Bundesrepublik existiert, behutsam mit Veränderungen umgeht, ist in Ordnung.

Aber vor allem Barrierefreiheit und eine bessere Unterstützung mobiler Geräte sollten für ein solches Portal, das ja auch native Apps für Mobilgeräte bereitstellt, kein Neuland sein.

(dpe)

Kategorien
Exklusiv bei drweb.de

Dr. Web-Newsletter: Verlosungsaktion – letzte Chance zur Teilnahme (beendet)

Teilnahmeschluss für die Verlosung ist heute, der 30.7.2015. Er ist wieder da. Der Dr. Web-Newsletter. Wir haben ihn nach 8 Jahren Kältestasis erfolgreich reanimiert. Empfänger des Newsletters bekommen alle zwei Wochen Dienstags exklusiven Webworkerstoff in ihren Posteingang geliefert. In Zeiten, wo viele Newsletter nicht mehr sind als eine automatisiert erstellte Ansammlung von Artikelteasern des eigenen Magazins, soll sich der Dr. Web-Newsletter als eigenständige Publikation zu lesen lohnen. Zwei Ausgaben sind schon raus. Die Öffnungsraten und Beitragklicks zeigen, dass wir auf einem guten Weg sind. Werter Leser, überzeugen Sie sich am besten selbst davon, dass der Dr. Web-Newsletter lesenswert ist. Als kleines Dankeschön können Sie sofort nach der Anmeldung zwei eBooks heruntersaugen. Und, wenn Ihnen Fortuna gewogen ist, gewinnen Sie vielleicht ein iPad, oder ein Wacom-Tablet, oder ein Protonet-Server,…

drweb_newsletter_logo

[drweb_newsletter_signup_form default_campaign=“drweb-newsletter-post“]

Hier anschauen: Aktuelle Ausgabe #305
Nächste Ausgabe (#306): 28.7.2015

Zwei kostenlose eBooks zum Sofort-Download

Dr.Web-eBook-Photoshop-Thumbnail-200px
Der Photoshop-Experte Dirk Metzmacher verrät Tipps & Tricks im Umgang mit der Bildbearbeitungssoftware Nr. 1.

Dr.Web-eBook-WordPress-Thumbnail-200px
Und WordPress-Profi Andreas Hecht unterstützt Webworker und Seitenbetreiber, die mit dem weltweit beliebtesten Content Management System erfolgreich arbeiten wollen.

Große Verlosungaktion, exklusiv für alle Newsletterabonnenten

Wir lassen uns nicht lumpen. Der Gabentisch biegt sich unter Preisen, die hoffentlich bei jedem Webworker den „Haben wollen“-Reflex aktiviert und ihn umgehend zum Abonnenten werden lässt.
Teilnahmeschluss ist der 30.7.2015.

Wir verlosen:
Newsletter-Verlosungsaktion-Schmuckbild

Abspann. Letzte Chance ;-)

[drweb_newsletter_signup_form default_campaign=“drweb-newsletter-post“]
Kategorien
Cartoons Essentials Exklusiv bei drweb.de

Dr. Web Cartoons: Klar!!

Seit einigen Monaten veröffentlichen wir in loser Folge Cartoons rund um Design, Designer und ihre Kunden. Nachdem wir schon ziemlich oft auf den Kunden rumgehackt haben, soll heute etwas Gerechtigkeit geschehen. Denn natürlich ist es auch ein großes Problem für den "echten" Designer, dass es haufenweise Leute gibt, die sich ebenfalls so nennen, aber nicht die geringste oder eben nur die geringste Ahnung von der Thematik haben. Das kann dann so aussehen wie in unserem Cartoon hier.

Klar

Ich persönlich finde es durchaus erstaunlich, dass auch nach über 20 Jahren des Webdesign noch immer die breite Bevölkerung nichts oder kaum etwas mit den entsprechenden Berufsbildern anzufangen weiß. Während jeder eine ziemlich genaue Vorstellung vom Beruf eines Elektrikers oder KFZ-Mechanikers hat, heißt es bei Internetberufen noch immer häugig, "der macht irgendwas mit Medien". Und das ist dann schon eine der qualifizierteren Umschreibungen.

Während sich der fortbildungswillige Designer mit breitem Grundlagenwissen über diesen Zustand ärgert, freuen sich tausende halbseidener Gescheiterter, die für 20 Euro ein Gewerbe anmelden und sich fortan Webdesigner nennen. Was ich da schon alles erlebt habe…

Auch die Umschulungszentren, die sich vornehmlich aus Mitteln der Arbeitsagentur speisen, bringen nur höchst selten rühmliche Ergebnisse hervor. Stattdessen werden Ahnungslose im Rudel durch sechs Monate Internetgrundlagen gepeitscht und können dann einen Qualifizierungsnachweis nach Hause tragen. Faktisch steckt nichts dahinter…

Der Cartoon erschien zuerst in unserem zweiwöchentlichen Newsletter. Ein Abonnement lohnt sich.

Kategorien
Cartoons Essentials Exklusiv bei drweb.de

Cartoon: Spaß mit CMYK

Einen etwas speziellen Humor darf man uns Webdesignern ruhig ungestraft unterstellen. Wenn schon das konventionelle soziale Element nicht sonderlich ausgeprägt ist, kann ein schräger Sinn für Späße auch nicht mehr schaden. Unser Sonntags-Cartoon setzt genau an dieser Stelle, an der außer einem Designer kaum einer den Witz versteht, an. Es schadet auch nicht, wenn Sie zu den etwas älteren Semestern der Branche gehören ;-)

It's fun to stay at the CMYK

Kategorien
Design Editoren Essentials Exklusiv bei drweb.de HTML/CSS

Dr. Web verlost zehn Lizenzen des WebAnimator Plus

„WebAnimator Plus: Anspruchsvolle Animationen für moderne Browser erstellen“ – So titelte Dr. Web vor genau einem Monat und stellte Ihnen eine Software vor, die nicht nur auf den ersten Blick an das gute alte Flash erinnert. Anders als der Urzeit-Bolide aus dem Hause Adobe, arbeitet der WebAnimator Plus dabei nicht mit proprietären Formaten, sondern basiert vollständig auf HTML5 und CSS3. Der Hersteller Incomedia freute sich über das gute Abschneiden seines Produkts in unserem Test und stellte uns nun zehn Lizenzen des WebAnimator Plus zur Verlosung zur Verfügung. Die Teilnahme ist – wie immer – einfach. Machen Sie mit!

WebAnimator Plus

Kollege Denis Potschien, seit zehn Jahren Webentwickler und Autor des einschlägigen Fachbuches Pure HTML5 und CSS3, zog folgendes Fazit zur Animationssoftware:

Der WebAnimator Plus ist eine umfangreiche Anwendung zum Erstellen komplexer und individueller Animationen. Der Funktionsumfang der Anwendung erlaubt es, komplette Webprojekte zu realisieren – ähnlich wie es mit Adobes Flash möglich ist. Anders als Flash setzt WebAnimator ganz auf HTML5 und CSS3, sowie auf JavaScript. Das sorgt dafür, dass Projekte auch auf mobilen Geräten laufen – und das ganz ohne Plug-ins.

Wenn Sie sich für die ausführliche Vorstellung der Funktionalitäten interessieren, versäumen Sie nicht, diesen Artikel zu lesen.

Das Executive Summary liest sich schneller:

WebAnimator Plus läuft auf Windows-Systemen, ist für 89,99 Euro erhältlich und kann vorab für zwei Wochen getestet werden. Hier bekommen Sie die Testversion. Es gibt eine ausführliche Dokumentation sowie ein deutschsprachiges Forum zum Austausch mit anderen Anwendern. Eine Seitenbau-Software, landläufig Homepage-Baukasten genannt, bietet Incomedia unter dem Namen WebSite X5 Professional 11 ebenfalls an.

10 x WebAnimator Plus: so einfach ist die Teilnahme

Genug der Vorrede, lassen Sie uns zu den Teilnahmeregeln für die Verlosung kommen. Diese sind, unsere regelmäßigen Leser wissen es, stets sehr einfach. Sie hinterlassen lediglich einen Kommentar unter diesem Beitrag. Darin teilen Sie uns kurz und knackig mit, warum Sie Interesse an dem Produkt haben. Die Teilnahme ist ab sofort möglich und endet am Mittwoch, den 20. Mai 2015 um 18:00 Uhr.

Die Gewinner werden aus allen eingegangenen Kommentaren ermittelt. Damit wir Sie im Gewinnfalle erreichen können, stellen Sie bitte sicher, dass Sie eine gültige E-Mail-Adresse zum Kommentieren verwenden. E-Mail-Adressen werden nur zur Benachrichtigung der Gewinner und zu keinem anderen Zweck verwendet.

Bleibt mir nur zu wünschen: Viel Glück!

Kategorien
Essentials Exklusiv bei drweb.de Inspiration Photoshop Wissenstests

Photoshop-Wissen für Einsteiger und Neulinge (Lösungen zum Wissenstest)

Hallo und herzlich willkommen zur Auflösung unseres Wissenstests. Unser Photoshop-Quiz für Einsteiger und Neulinge im Bereich Photoshop war wohl doch nicht so leicht, wie zunächst angenommen. Deshalb hier als kleiner Spickzettel und zum Lernen die Auflösung aller Fragen im Detail. Für den ein oder anderen Photoshop-Fan gibt es sicher Überraschungen zu entdecken und selbst der Profi kann nicht alle Ecken und Kanten einer so komplexen Software kennen. Lesen Sie den Beitrag auch, wenn Sie zwar nicht am Quiz teilgenommen haben, sich aber generell für den Einstieg in Photoshop interessieren. Denn wir nennen nicht nur die richtigen Lösungen, sondern erklären auch, was wie funktioniert…

photoshop-wissenstest01-loesung-teaser

01 Mit dem Tastenkürzel Strg+D wird in Photoshop…?

Strg+D entspricht dem Menüeintrag Auswahl > Auswahl aufheben. Solch ein Tastenkürzel beschleunigt stark die Arbeit in Photoshop und so einige gehören einfach zum Standard, den jeder Photoshop-Anwender kennen sollte. Um etwa den zuletzt genutzten Filter noch einmal anzuwenden, drücken Sie Strg+F auf der Tastatur. Das Tastenkürzel Strg+T steht dagegen für das Freie Transformieren.

ps-quiz1
Silver Dollar | Eldad Carin | Bildnummer: 135584042

02 Punktieren, Mezzotint und Farbraster sind alles Filter aus der Kategorie:

Schauen wir einmal in das Menü unter den Filtern: Punktieren, Mezzotint und Farbraster gehören genau wie Kristallisieren, Facetten-, Mosaik- und Verwackelungseffekt zu den Vergröberungsfiltern. Unter Sonstige Filter gibt es etwa den Hochpass-Filter oder den Verschiebungseffekt zu entdecken, unter Stilisierungsfilter zum Beispiel Extrudieren, Konturen nachzeichnen und Solarisation.

ps-quiz2
Female warrior | Fotokvadrat | Bildnummer: 159700838

03 Um eine Hintergrundebene in eine normale, verschiebbare Ebene umzuwandeln, …?

Tatsächlich reicht ein Doppelklick auf die Hintergrundebene aus, wodurch sich diese in eine Ebene 0 verwandelt. Dieser Vorgang entspricht einem Klick im Hauptmenü auf Ebene > Neu > Ebene aus Hintergrund. So wird die Ebene verschiebbar. Um aus einer normalen Ebene wieder eine Hintergrundebene zu erzeugen, führt der Weg über Ebene > Neu > Hintergrund aus Ebene.

Das PSB-Format entspricht dem PSD-Format, allerdings wurde dabei die Datenbegrenzung von 2 Gigabyte aufgehoben, welche das reguläre Dateiformat von Photoshop hat. Die Ebenen werden in beiden Formaten gleichwertig unterstützt. Da eine Hintergrundebene fixiert ist, kann die Füllmethode (Mischmodus) dabei nicht geändert werden.

ps-quiz3
Ancient Greek warrior | Fotokvadrat | Bildnummer: 204762733

04 Was ermöglicht der Maskierungsmodus?

Der Maskierungsmodus dient der Auswahl eines Bildbereiches. Drücken Sie dazu Q auf der Tastatur. Die rote Farbe zeigt den Bereich an, der nicht ausgewählt (also maskiert) ist. Malen Sie mit dem Pinsel und schwarzer Farbe über einen unmaskierten Bereich, so erscheint die rote Farbüberlagerung, malen Sie dagegen mit weißer Farbe in das Bild, so verschwindet die Maskierung wieder. Drücken Sie noch einmal Q, um den Maskierungsmodus zu beenden. Eine Auswahl wurde erzeugt.

ps-quiz4
Pirate with a saber | Fotokvadrat | Bildnummer: 100925209

05 Der Regler Fläche im Ebenenbedienfeld bewirkt was?

Anders als die Deckkraft reduziert die Fläche nur den Ebeneninhalt, nicht aber die Transparenz der Ebenenstile. So könnten etwa Formen einen Schlagschatten werfen, dabei selbst aber unsichtbar erscheinen. Die Farbe einer Farbfläche wird über einen Doppelklick auf die Ebenenminiatur geändert.

ps-quiz5
Wood Texture | vovan | Bildnummer: 112994473

06 Auf welchem Wege können Ebenenstile nicht immer hinzugefügt werden?

Ein Doppelklick auf die Ebene und auch ein Rechtsklick auf die Ebene mit der Auswahl der Fülloptionen ermöglicht ein Hinzufügen der Ebenenstilen. Ein Doppelklick auf die Ebenenminiatur dagegen führt bei Textebenen, Smartobjekten und Formebenen nicht zu den Ebenenstilen, sondern zur Auswahl des Textes, der Bearbeitung der Inhalte des Smartobjektes oder der Änderung der Farbe, je nach Ebenenart.

ps-quiz6
Viking warrior | Fernando Cortes | Bildnummer: 183397286

07 Sie möchten ein Bild zurecht schneiden und gerade ausrichten: in nur einem Schritt. Welches Werkzeug oder welche Funktion wählen Sie?

Der Menüpunkt Bild > Freistellen funktioniert dann, wenn Sie zuvor eine entsprechende Auswahl erzeugt haben. Mit dem Linealwerkzeug können Sie eine Linie entlang des Horizontes ziehen, müssten dann aber noch Ebene gerade ausrichten in der Optionsleiste anklicken und das Bild zurecht schneiden. Das Freistellungswerkzeug ermöglicht dagegen eine Auswahl durch Aufziehen, die sich auch noch drehen lässt. Damit wurden beide Vorgaben erfüllt.

ps-quiz7
Camera with tripod | Shahril KHMD | Bildnummer: 185111837

08 Sie möchte einen Bereich des Bildes im Tonwertumfang nicht-destruktiv (also jederzeit editierbar) korrigieren. Welchen Schritt sollten Sie gehen?

Die Tonwertangleichung (zu erreichen über das Menü und Bild > Korrekturen) setzt (für das komplette Dokument) den hellsten Bereich auf Weiß, den dunkelsten auf Schwarz. Damit wird der Tonwertumfang zwar geändert, jedoch destruktiv. Ebenenstile sind nicht-destruktiv, da sie sich jederzeit editieren lassen, doch bieten sie uns keine punktgenaue Änderung des Tonwertumfanges an. Die Lösung ist also eine Neue Einstellungsebene > Tonwertkorrektur, welche die Tonwerte beeinflusst und auch gleich eine Maske mitbringt, um gezielt Bereiche des Bildes von der Bearbeitung auszuschließen.

ps-quiz8
Pasta with Sausage | Foodio | Bildnummer: 167558708

09 Unter welchem Menüeintrag können Sie die Weiche Kante entdecken?

Über Schrift > Antialiasing können Sie zwar Ihren Text weicher umsetzen (etwa über den Eintrag Abrunden), die Weiche Kante finden Sie aber im Menü unter Auswahl > Auswahl verändern. Eine Auswahl hat normalerweise eine harte Kante. Möchten Sie diese fließend gestalten, so stellen Sie den Radius entsprechend ein. Je höher die Zahl, desto weicher der Übergang.

ps-quiz9
Taking self portrait | gpointstudio | Bildnummer: 195277949

10 Wie können Sie eine Hilfslinie erstellen?

Photoshop bietet uns mit den Hilfslinien eine gute Option an, Bildelemente genau ausgerichtet zu positionieren. Über das Rausziehen aus dem Lineal haben Sie den richtigen Weg gewählt. Mit dem Linealwerkzeug können Sie etwa den Abstand zwischen zwei Punkten im Arbeitsbereich messen oder eine Ebene gerade ausrichten. Über Ansicht > Anzeigen werden die Hilfslinien nur aus- oder wieder eingeblendet, falls schon vorhanden.

ps-quiz10
Bokeh background | wongwean | Bildnummer: 105746540

Nochmal versuchen? Hier entlang >>

Kategorien
Essentials Exklusiv bei drweb.de Inspiration Photoshop Wissenstests

Wissenstest: 10 Fragen zu Photoshop, die selbst Neulinge beantworten können

Hier ist Ihre Herausforderung: 10 Fragen zu Adobe Photoshop, die jeder Photoshopper im Schlaf beantworten können wird. Und sollte sich diese Annahme einmal nicht bestätigen, dann bleiben Sie dran. Denn in den nächsten Tagen liefern wir die nötigen Informationen als Lösungsmaterial nach. Zunächst möchten wir allerdings, dass Sie es allein versuchen ;-) Wir wünschen Ihnen viel Spaß bei einem Quiz, das zumindest grundlegende Kenntnisse in Adobes Bildbearbeitung verlangt.

wissentest-photoshop01-teaser

Eine Anregung am Rande: Vielleicht lassen Sie sich ja auf einen kleinen Wettstreit mit Ihren Kollegen ein. Übrigens: Fortgeschrittene Anwender erhalten in der nächsten Woche ihre Chance mit einem entsprechend schwierigeren Quiz…

Testen Sie sich selbst: Können Sie diese 10 Fragen zu Photoshop beantworten?

Lächerlich leichte Fragen? Ja? Dann beisse dir doch hier die Zähne aus.

Kategorien
Cartoons Essentials Exklusiv bei drweb.de Webdesign

Cartoon: Wenn Webdesigner … wären (#001)

Wenn man als Webdesigner/-entwickler arbeitet, muss man sich ein dickes Fell anschaffen. Das gilt vor allem dann, wenn man freiberuflich unterwegs ist. Schafft man das nicht, ist langfristig die geistige Gesundheit in Gefahr. Ich bewege mich seit Anfang der Neunziger in dieser Branche und habe in dieser Zeit die ulkigsten Kunden kennenlernen dürfen. Mein Rezept für den Erhalt des Verstandes ist: Lachen. Ich weigere mich schlicht, mich zu ärgern und stelle mir in Situationen, in denen ich früher kurz vor dem Anheuern eines Profikillers stand, vor, ich wäre bei der versteckten Kamera. Lachen ist bekanntlich gesund. Um auch Ihnen das Konzept “Lachen statt ärgern” näher zu bringen, haben wir uns die Cartoon-Serie “Wenn Webdesigner … wären” ausgedacht. Jeden Montag finden Sie hier eine neue Absurdität. Wir hoffen, Sie haben mindestens so viel Spaß beim Anschauen wie wir beim Erstellen…

cartoon-series-standardimage_drweb

Folge 1: Wenn Webdesigner Tätowierer wären

Kunden tendieren dazu, den Umfang eines Auftrages anders zu definieren als Sie es tun. Wenig zahlen, viel bekommen, Geiz ist geil. Danken wir Jung von Matt für die Etablierung dieser tollen Philosophie in den Köpfen unser Kunden.

Der einzige mehr oder weniger sichere Weg, sich vor der Ausbeutung zu schützen, ist es, den Auftragsumfang so genau wie möglich schriftlich zu fixieren und weitere schriftliche Ergänzungen bei Erweiterungswünschen zu formulieren. Letztendlich wird man doch immer wieder einem besonders hartleibigen Kunden zum Opfer fallen. Dabei ist dieser vielleicht nicht einmal böswillig, sondern bloß unglaublich ignorant.

Unsere Cartoon-Serie sagt der Ignoranz den Kampf an. Sammeln Sie alle Teile und zeigen Sie Ihrem Kunden bei Bedarf den entsprechenden Cartoon. Ich bin ziemlich sicher, dass bei jedem sofort ein kognitiver Prozess startet ;-)

cartoon_001_drweb_tattoo

Farben ändern, oder? Wer kennt das nicht? Ich habe schon Tage damit zugebracht. Vor allem ganz radikale Änderungen der kompletten Palette liebe ich. Häufig genug passen dann auch die ausgewählten Fotos nicht mehr und man fängt im Grunde von vorne an…

Wollen Sie Ihren Lieblingsmoment als Cartoon sehen?

SIE sind der/die Entwickler/in und SIE kennen all diese Stories. Nennen Sie uns Ihre Lieblingssituation im Kundenprojekt und finden Sie sie möglicherweise in einem unserer kommenden Cartoons wieder. Beachten Sie, dass Name und E-Mail-Adresse keine Pflichtfelder sind. Sie können uns bei Bedarf Ihre Geschichte auch anonym erzählen. Wenn Sie uns allerdings Ihren Namen wissen lassen, werden wir den Cartoon mit einer Urheberkennzeichnung für die Idee unterhalb der Zeichnung versehen.

Erzählen Sie uns Ihren skurrilsten/nervigsten/lustigsten Kundenmoment…

[polldaddy type=“iframe“ survey=“844CEDBB7A4C136D“ height=“auto“ domain=“noupe“ id=“hoellenkunden-de“]
Kategorien
Essentials Exklusiv bei drweb.de Icons & Fonts

Fröhliche Vektor-Weihnacht 2014: 10 Weihnachtspostkartenmotive als AI und EPS, exklusiv für Dr. Web-LeserInnen

Sie erinnern sich doch sicher an Freepik, unsere Freunde aus dem sonnigen Spanien. Freepik bringen zuverlässig und in großer Menge und hoher Qualität Design-Elemente, wie Icons, Vektor-Grafiken und vieles mehr unters kreative Völkchen. Für den heutigen Beitrag haben wir uns mit Freepik zusammengesetzt, um eine Reihe von nutzwertigen Weihnachts-Ressourcen zu entwerfen, die ohne weiteres im deutschen Sprachraum zu verwenden sind. Als Tribut an die besondere Jahreszeit machten wir keine Experimente, sondern orientierten uns an traditioneller, konventioneller Motivik. Um dem Trend der Zeit doch ein wenig Raum zu bieten, entschlossen wir uns, den populären Vintage-Look als Leim, der die einzelnen Entwürfe zusammen hält zu verwenden. Wenn Sie Weihnachten mögen, müssten Ihnen unsere Kartendesigns im Grunde auch gefallen. Wir wünschen in jedem Falle viel Vergnügen mit den folgenden Ressourcen…

drweb-xmas-2014

10 kostenlose Vektor-Weihnachtspostkarten von Freepik, nur bei uns erhältlich

Diese Vektor-Weihnachtskarten gibt es nur hier, beim guten alten Dr. Web. Jeder Weihnachtsgruß hat sein eigenes Zip-Archiv. In diesem Archiv befinden sich zwei Versionen der Karte im Adobe Illustrator-Format, darunter eine druckfertig vorbereitete. Zusätzlich liegt jedes Kartenmotiv als unbegrenztes EPS mit voller Pfadbearbeitbarkeit vor.

Jedes Design beinhaltet einen oder mehrere außergewöhnliche Fonts. Aus Lizenzgründen konnten diese Fonts nicht mit ins Zip gepackt werden. In einer Datei namens fonts.txt, die in jedem Archiv vorhanden ist, finden Sie aber die Download-Links der verwendeten Schriftarten, die allesamt kostenfrei genutzt werden dürfen.

Wo wir gerade beim Thema der Lizenzen sind. Alle Weihnachtskarten aus diesem Beitrag dürfen völlig frei persönlich und kommerziell, auch für Kunden, verwendet werden. Sogar der sonst bei Freepik übliche Attributionszwang entfällt. Das hier ist ein echtes Geschenk an unsere LeserInnen, präsentiert von Dr. Web und Freepik.

christmascards-all

Eine Regel gibt es denooch: Tut bitte nicht so, als seid Ihr die Urheber dieser Karten. Wenn Ihr möchtet, dass die folgenden Dateien auch eure Freunde in die Finger bekommen, dann schickt ihnen einfach den Link zu diesem Beitrag. Danke.

Und hier sind die 10 kostenlosen Weihnachtskarten als einzelne Downloads

Vektor-Weihnachtskarte | Design No. 01

christmas_christmas_01_preview

Download: vektor-weihnacht-2014_01.zip | 4.48 MB

Vektor-Weihnachtskarte | Design No. 02

christmas_christmas_02_preview

Download: vektor-weihnacht-2014_02.zip | 4.37 MB

Vektor-Weihnachtskarte | Design No. 03

christmas_christmas_03_preview

Download: vektor-weihnacht-2014_03.zip | 4.56 MB

Vektor-Weihnachtskarte | Design No. 04

christmas_christmas_04_preview

Download: vektor-weihnacht-2014_04.zip | 4.32 MB

Vektor-Weihnachtskarte | Design No. 05

christmas_christmas_05_preview

Download: vektor-weihnacht-2014_05.zip | 4.79 MB

Vektor-Weihnachtskarte | Design No. 06

christmas_christmas_06_preview

Download: vektor-weihnacht-2014_06.zip | 4.65 MB

Vektor-Weihnachtskarte | Design No. 07

christmas_christmas_07_preview

Download: vektor-weihnacht-2014_07.zip | 4.54 MB

Vektor-Weihnachtskarte | Design No. 08

christmas_christmas_08_preview

Download: vektor-weihnacht-2014_08.zip | 5.10 MB

Vektor-Weihnachtskarte | Design No. 09

christmas_christmas_09_preview

Download: vektor-weihnacht-2014_09.zip | 5.14 MB

Vektor-Weihnachtskarte | Design No. 10

christmas_christmas_10_preview

Download: vektor-weihnacht-2014_10.zip | 4.55 MB

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

Freebie der Woche: Dschungel aus Vektoren

Für unsere große Schwester haben wir gemeinsam mit den Grafikern von Freevector.com ein Set von Vektor-Dateien mit Dschungelmotiven entwickelt. Wir finden die so gelungen, dass wir sie auch den Leserinnen und Lesern von Dr. Web nicht vorenthalten wollen. Immerhin findet man so etwas, anders als das nächste Speichern-Icon, nicht alle Tage. Viel Spaß mit den 30 folgenden Elementen…

9 Geometric Animals im Vexel-Look

9 Dschungelbewohner im groben Vexel-Look passen sich auch in modernste Designs ein, soweit das Thema generell passt, natürlich. Die Gestaltung mit farbigen Flächen, scharfen Kanten und übertriebenen Schatten erfreut sich steigender Beliebtheit. Bereits mehrfach stellten wir entsprechende Showcases zu Inspirationszwecken zusammen.

Noupe-FreeVector-Animals-550px

Unsere neun Geometric Animals hier erhalten Sie als separate, hochauflösende PNGs, aber auch in den Formaten Adobe Illustrator (.ai), Scalable Vector Graphics (.svg) und Illustrator PDF.

22 wilde Dschungel-Elemente

Ebenfalls in unserem Set enthalten, sind 22 eher konventionell gestaltete Dschungel-Ingredienzen. Darunter finden sich einige weitere Elemente der dortigen Fauna, aber insbesondere etliche der dortigen Flora. Immerhin kann man nur mit Tieren schlecht einen Dschungel kreieren.

Noupe-FreeVector-Jungle-550px

Auch dieser Teil des Gesamtpakets kommt als separate, hochauflösende PNGs, aber auch in den Formaten Adobe Illustrator (.ai), Scalable Vector Graphics (.svg) und Illustrator PDF.

Das Komplettpaket besteht aus einem rund 16 MB schweren Zip-Archiv, welches Sie frei, ohne jegliche Voraussetzungen herunterladen können. Sie dürfen die Freebies komplett kostenlos, sowohl kommerziell, wie auch für private Zwecke verwenden. Sie dürfen das Paket lediglich nicht auf Drittseiten zum Download bereitstellen und/oder so tun, als hätten Sie es erstellt.

Jetzt holen Sie sich das Zip-Archiv…

… Klicken startet den Download …

Freevector.com hat noch etliche weitere Vektoren im Angebot

Wenn Sie sich nun unser Freebie-Zip gesichert haben, empfehle ich einen Klick rüber zu freevector.com. Freevector.com beschreibt sich selbst als "your ultimate source for free vector art, clipart, vector logos, illustrations & vector wallpaper graphics for your print projects or website". Ich nutze das Angebot seit einigen Monaten und konnte bislang noch immer thematisch passende Vektoren für das jeweilige Projekt finden. Insofern kann ich nichts anderes als eine Empfehlung aussprechen.

Aber, schauen Sie selbst…

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