kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …


Screencast: Kunstfaser-Struktur mit Photoshop erzeugen

Im App- und Web-Design erfreut sich die Kunstfaser-Struktur aktuell allergrößter Beliebtheit. Seit Apple die dezente Struktur im iOS-Betriebssystem verwendet hat, taucht sie auch bei vielen anderen prominenten Websites und Apps auf. So nutzen beispielsweise Twitter oder Reeder die Struktur für das Interface-Design der iPad-App.
Ich möchte euch in diesem Screencast zeigen, wie ihr die Struktur in sehr kurzer Zeit und mit nur einem Filter in Photoshop umsetzt.

Beitrag zu Ende lesen

WebP-Grafiken mit Photoshop-Plugin erstellen

"Let's make the web faster". Unter diesem Leitspruch entwickelt Google unzählige Tools, Programme und Techniken um sowohl für Entwickler als auch für Anwender die Arbeit mit dem Internet so angenehm wie möglich zu gestalten. Angefangen beim hauseigenen Browser Chrome, über die Relevanz der Website-Ladezeiten für die Suchmaschinen-Platzierung, bis hin zu Webfont-Bibliotheken: die Performance einer Website wird immer wichtiger. Vor einiger Zeit wurden die Entwickler von Google beauftragt, eine neue Dateikompression für Grafiken zu erarbeiten. Die neue Bilddatei sollte mindestens der Qualität von JPG entsprechen, jedoch deutlich kleinere Dateien erzeugen. Das Ergebnis dieser Entwicklung ist das neue Grafikformat WebP (gesprochen "Weppy"). Doch leider kennt Photoshop das Format noch nicht.

Beitrag zu Ende lesen

Stock-Images sollten bewusster verwendet werden!

stock.image-krefeld-screenshot

Für viele Projekte, sei es nun eine Website oder ein Plakat, eine Broschüre oder auch nur das Icon einer App, benötigen wir Bildmaterial. Wenn seitens des Kunden keine Unterlagen zur Verfügung gestellt werden können, greifen wir meist auf so genannte Stock-Image-Portale zurück. Auf diesen Seiten kann aus tausenden von Fotos das passende Bildmaterial ausgesucht und anschließend gekauft werden. Die Qualität der Fotos ist meist auch sehr gut, so dass Designern hier ein wirklich brauchbares Hilfsmittel an die Hand gegeben wurde. Allerdings werden Stock-Images zu dem Zweck fotografiert, möglichst oft verkauft zu werden und wirken daher häufig sehr allgemein.
Trotz recht guter Voraussetzungen werden im Umgang mit Stock-Images jedoch unnötige Fehler gemacht, und so die Qualität des Endproduktes negativ beeinflusst. Worauf Ihr meiner Meinung nach achten solltet, möchte ich in diesem Artikel, anhand einiger Beispiele, erläutern.

Beitrag zu Ende lesen

Website-Ladezeiten in verschiedenen Browsern und aus unterschiedlichen Ländern testen

Um die Ladezeiten einer Website zu testen bzw. zu bewerten, gibt es mittlerweile einige brauchbare Tools: Da wäre zum Beispiel der Google-Dienst Page-Speed Online oder das Browser-Plugin YSlow von Yahoo. Beide Dienste lassen sich übrigens gemeinsam und sehr komfortabel auf GTMetrix.com online nutzen.
Wenn ihr darüber hinaus überprüfen möchtet wie sich die Ladezeit eurer Website in verschiedenen Ländern und Browsern darstellt, so lohnt sich zusätzlich ein Blick auf die Website LoadsIn.

Beitrag zu Ende lesen

Sonderzeichen per „Copy and Paste“ verwenden

Blogger und Webdesigner müssen bei ihren Projekten regelmäßig auf Sonderzeichen zurück greifen. Da wären zum Beispiel das Copyright-Zeichen im Footer einer Website (©), mathematische Zeichen zur Darstellung von Code-Snippets oder Formeln (‹, ›) und Betriebssystem spezifische Zeichen für Tastaturkürzel oder Funktionen (⌘, ⌥). Und auch die deutschen Umlaute sollten wir nicht vergessen.
Insbesondere wenn man häufig Artikel unterwegs schreibt, ein reduziertes Tastatur-Layout verwenden muss und auch nicht "mal eben" auf die Zeichentabelle von Windows oder OsX zurück greifen kann, werden Sonderzeichen zum echten Zeit-Killer. Die Website CopyPasteCharacter schafft hier Abhilfe.

Beitrag zu Ende lesen

Wassertropfen mit Photoshop erstellen

Wassertropfen können im Webdesign, wie auch in der Werbung, ein mächtiges Gestaltungselement sein. Verwenden wir Wassertropfen z.B. in Kombination mit der Abbildung von Lebensmitteln oder Getränken, so wirkte das Produkt frisch, kühl und vital. Was wäre die berühmte Coca-Cola-Flasche ohne Wassertropfen? In diesem Screencast möchte ich euch zeigen wie einfach es ist in Photoshop Wassertropfen zu zeichnen.

Beitrag zu Ende lesen

Screencast: 3D-Text mit Repoussé in Photoshop CS5

Auf Photoshop-Profis wurde mit Folge 52 erneut ein Video von mir veröffentlicht. In dieser Folge zeige ich wie ihr mit Hilfe des 3D-Dialogs "Repoussé" von Photoshop CS5 Extended, sehr schnell einen ansehnlichen 3D-Text erstellen könnt. In etwa neun Minuten Spielzeit gehe ich auf die Basics des Dialogs ein und erkläre wie Ihr aus einer Textebene ein 3D-Objekt erstellt, texturiert und beleuchtet.

Die Photoshop-Profis beschrieben den Inhalt des Videos so:

Photoshop Extended bietet Ihnen auch die Möglichkeit, 3D-​Texte zu erzeugen. In dieser Folge der »Photoshop-Profis« zeigt Ihnen Jonas Hellwig, wie Sie ein 3D-​Objekt erstellen, ausleuchten, texturieren und rendern. Als Ergebnis erhalten Sie einen Schriftzug mit modernen 3D-​Effekten, den Sie zur Gestaltung Ihrer Webseite verwenden können.

Beitrag zu Ende lesen