Design

Design

SmallPDF: Umfassender PDF-Werkzeugkasten als Web-App

4. August 2015
von
SmallPDF: Umfassender PDF-Werkzeugkasten als Web-App

Adobe Acrobat ist nach wie vor die Standardlösung für das Erstellen, Bearbeiten und Optimieren von PDF-Dateien. Seit es die Document Cloud gibt, steht einem neben der Desktopanwendung auch eine Webanwendung mit den wichtigsten PDF-Funktionen zur Verfügung. Mit smallpdf gibt es einen ganz ähnlichen Dienst, mit dem man per Webanwendung PDF-Dateien unter anderem erstellen, konvertieren und zusammenfügen kann. Im Gegensatz zur Document Cloud von Adobe ist smallpdf kostenlos.

Design

SVG Circus: Animationen per Web App

3. August 2015
von
svgcircus-teaser_DE

Mit dem SVG-Format ist es nicht nur möglich, statische Vektorgrafiken zu erstellen. Auch Animationen lassen sich damit realisieren. Während Grafikprogramme wie Adobe Illustrator das Speichern statischer SVG-Formate ermöglichen, gibt es kaum Anwendungen, mit denen auch SVG-Animationen erstellt werden können. Über die Web App SVG Circus können genau solche animierten Grafiken im SVG-Format angelegt werden. Anders als bei vielen JavaScript-SVG-Frameworks muss man hier weder JavaScript, noch SVG-Auszeichnung beherrschen. Alles läuft über eine grafische Oberfläche, die sehr einfach zu bedienen ist.

Bilder & Vektorgrafiken bearbeiten

Icons in Illustrator erstellen: So geht es

30. Juli 2015
von
iconsillustrator_teaser_DE

Es mangelt sicher nicht an guten und auch kostenlosen Iconsets, die man für eigene Zwecke anpassen und einsetzen kann. Aber manchmal muss oder soll es dann doch mal etwas Eigenes und Individuelles sein. Gerade die Entwicklung von Icons ist eine anspruchsvolle Sache. Sie müssen möglichst einfach in der Gestaltung sein und dennoch eine eindeutige und klar verständliche Botschaft vermitteln. Dazu kommt, dass Icons innerhalb eines Sets ein einheitliches Aussehen haben müssen.

Design

Speed Design: 14 schnelle Tipps für die Arbeit mit Illustrator

29. Juli 2015
von
Speed Design: 14 schnelle Tipps für die Arbeit mit Illustrator

Für viele Webdesigner ist Photoshop nach wie vor erste Wahl, wenn es um die Gestaltung von Weblayouts geht. Aber da das Webdesign dank des SVG-Formates zunehmend auf vektorbasierte Grafiken setzt, wird Illustrator auch für Webdesigner immer wichtiger. Für alle, die (noch) keine Profis im Umgang mit Illustrator sind, gibt es Speed Design. Die Website stellt 14 schnelle Tipps vor, die die Arbeit mit Illustrator vereinfachen.

Design

10 coole Sachen, die man mit HTML-Elementen machen kann

27. Juli 2015
von
coolesachen-html-teaser_DE

Bis heute sind insgesamt 142 HTML-Elemente vom W3C standardisiert worden, mit Ausnahme derer, die sich noch in der Phase der Standardisierung befinden und natürlich denen, die man als überholt kennzeichnet. Das bedeutet, dass man durchaus einige Elemente nicht kennt und daher nicht benutzt, obwohl sie vielleicht sehr nützlich sein könnten. In diesem Beitrag stellen wir Ihnen daher einige wenig genutzte Elemente vor, die Ihnen jedoch viel Arbeit bei der Entwicklung neuer Websites und Anwendungen abnehmen und somit hilfreich sein könnten. Auch im Sinne der Webstandards ist es wichtig, für gewisse Aufgaben auch dasjenige Markup zu verwenden, das für diese Aufgabe an sich vorgesehen ist.

Bilder & Vektorgrafiken bearbeiten

10 Jahre am Start: das COMMAG-Magazin von PSD-Tutorials.de

21. Juli 2015
von
10 Jahre am Start: das COMMAG-Magazin von PSD-Tutorials.de

10 Jahre sind im Digitalzeitalter eine Ewigkeit. Solange bringen Matthias und Stefan Petri von PSD-Tutorials.de schon ihr COMMAG heraus. Das monatlich erscheinende Magazin zirkuliert um Themen wie Fotografie, Grafikdesign und Digital Composing. In der aktuellen Juli-Ausgabe gibt der Fotograf Frank Fischer von reckordzeitstudio Tipps für den optimalen Bildaufbau. Der Layouter Stavros Vlahopulos bricht eine Lanze für die Open Source-Software Inkscape als Budget-Alternative zu Illustrator. Und der Composingkünstler Heiko Weidlich erzählt im Interview, was ihn an der Erschaffung von Landschaften im Herr der Ringe-Stil fasziniert.

Design

CSS3: Lade-Animationen mit loaders.css

21. Juli 2015
von
css3-loaderscss-teaser_DE

Zwar sollte im Web immer alles ganz schnell gehen. Aber gerade komplexe Webanwendungen brauchen schon mal ihre Zeit, bis alle Inhalte geladen sind. Mit statischen Grafiken oder kleinen Animationen wird dann gerne mal darauf aufmerksam gemacht, dass noch Daten geladen werden. In den Zeiten von CSS3 müssen solche Lade-Animationen längst nicht mehr mit animierten GIFs realisiert werden. loaders.css stellt eine Reihe von Animationen zur Verfügung, die allesamt per CSS3 gestaltet und animiert sind.

Design

Animiertes SVG-Morphing mit Illustrator

17. Juli 2015
von
Animiertes SVG-Morphing

Das SVG-Format löst mehr und mehr Flash für vektorbasierte und animierte Grafiken ab. Aufgrund der XML-Syntax des SVG-Formates lassen sich Grafiken im Grunde per Texteditor erstellen, was in den meisten Fällen jedoch wenig sinnvoll ist. Denn Zeichenprogramme wie Illustrator verfügen über die Möglichkeit, Grafiken ins SVG-Format zu exportieren. Animationen lassen sich damit allerdings nicht umsetzen, so dass hier doch der Texteditor zu Hilfe genommen werden muss. Allerdings ist es relativ einfach, mit Illustrator und einem Texteditor eine SVG-Grafik in Bewegung zu bringen – zum Beispiel als Morphing-Animation.

Design

webfont|test: Schriftauswahl leicht gemacht

14. Juli 2015
von
webfonttest-teaser_DE

Die Zeiten, in denen man aus einer Handvoll Systemschriften für die typografische Gestaltung einer Website auswählen konnte, sind glücklicherweise vorbei. Alle modernen Browser unterstützen Webfonts und die Auswahl an Anbietern reicht von kostenpflichtig bis kostenlos. Aber je größer die Auswahl ist, desto schwieriger wird es oft, die richtige Schrift für ein Webprojekt zu finden. Der „webfont|test“ hilft bei der Auswahl geeigneter Schriften, stellt diese zum Vergleich nebeneinander und ermöglicht auch das Hochladen eigener Schriftdateien.

HTML/CSS

matchMedia() – Media Queries mit JavaScript

10. Juli 2015
von
matchMedia()

Dass eine Website auch auf mobilen Geräten funktionieren und vernünftig aussehen muss, ist mittlerweile zu einer Selbstverständlichkeit und jüngst sogar zu einem Ranking-Faktor geworden. Dank Media Queries ist es zum Glück relativ einfach, per CSS das Aussehen für unterschiedliche Displaygrößen und -orientierungen zu definieren. Die JavaScript-Methode „matchMedia()“ ermöglicht es zudem, Media Queries auch in JavaScript einzusetzen. Somit stehen uns alle Möglichkeiten moderner Frontend-Programmierung offen.