Articles by Denis Potschien

Google Profile: http://plus.google.com/+DenisPotschien

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.

JavaScript & jQuery

Blip. und die Web Audio API: Einfach mit Audiodateien arbeiten

24. Juli 2015
von
Blip. und die Web Audio API: Einfach mit Audiodateien arbeiten

Mit Einführung der Web-Audio-API ist das Erstellen und Manipulieren von Sounds per JavaScript möglich geworden. Die Audio-Library Blip. stellt Methoden zur Verfügung, mit denen schnell und relativ unkompliziert Klänge eingebunden, verändert und abgespielt werden können. So können Sie etwa die Abspielgeschwindigkeit beeinflussen, Sounds übereinander legen oder sie in einer Schleife abspielen. Das funktioniert verhältnismäßig einfach. Im folgenden Beitrag stelle ich ein paar funktionierende Beispiele für den Soforteinsatz vor…

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.

Design

CSS Contact Form: Schicke Kontaktformulare sehr einfach

7. Juli 2015
von
csscontactform-teaser_DE

Die Gestaltung benutzerfreundlicher und ansprechender Formulare ist nicht immer einfach. Pflichtfelder sollten gut erkennbar und Fehlermeldungen auffällig sein. Dazu kommt, dass Felder wie Radio-Buttons und Checkboxen nur auf Umwegen mit gänzlich eigenem Aussehen versehen werden können. Wie man Kontaktformulare raffiniert, übersichtlich und sehr individuell gestalten kann, zeigt das CSS Contact Form von CodyHouse.

Bilder & Vektorgrafiken bearbeiten

Wissenswert: So setzen Sie Stockfotos richtig ein

6. Juli 2015
von
stockfotos-teaser_DE

Fotos spielen eine wichtige Rolle im Grafik- und Webdesign. Sie lockern auf, vermitteln Stimmungen und Eindrücke und regen zum Lesen beziehungsweise Weiterlesen von Texten an. Daher sind Fotos in Unternehmenswebsites und in Blogs ein nahezu unverzichtbares Mittel der Kommunikation. Da man nicht immer das passende Foto zur Stelle hat und dieses oft auch mit keinem vertretbaren Aufwand selbst geschossen werden kann, gibt es Stockfotos. Diese bieten zu jedem Thema passendes Bildmaterial, oft zu recht erschwinglichen Preisen, zum Teil auch gänzlich kostenlos. Hier bei DR. Web haben wir die ultimative Übersicht der kostenlosen Anbieter für Sie. Und auch den kostenpflichtigen Bereich leuchteten wir bereits aus. Aber was gilt es zu beachten, will man Stockfotos nicht bloß erhalten, sondern vor allem richtig einsetzen?

Design

Brandneu: Photoshops Zeichenflächen erleichtern das Webdesign

3. Juli 2015
von
photoshop-zeichenflaeche-teaser_DE

Eine der größten Neuerungen der aktuellen Creative Cloud von Adobe ist die Einführung von Zeichenflächen in Photoshop. Aus Illustrator kennt man diese Funktion bereits. Sie erlaubt es, innerhalb eines Dokumentes mehrere eigenständige Bereiche anzulegen, die unabhängig zu anderen gestaltet werden können. Gedacht ist diese neue Möglichkeit vor allem für das Erstellen von Weblayouts.