kulturbanause Blog

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


Google +1-Button lädt jetzt auch asynchron (= schneller)

Google hat ein Update des +1-Buttons bereitgestellt. In den erweiterten Optionen kann nun festgelegt werden, dass die Scripte des Buttons asynchron geladen werden. Diese Option führt dazu, dass der Google-Button schneller geladen wird und nicht wie bisher den Seitenaufbau spürbar ausbremst.

Ich habe meinen früheren Artikel zur Integration des Buttons entsprechend angepasst. Solltet ihr das Snippet verwenden, so prüft bitte euren Code.

Transparentes Rauschen: Photoshop und CSS3

Photoshop CSS3

Moderne Websites realisieren mittlerweile einen Großteil der grafischen Elemente vollständig über CSS3. Hierbei stehen die Möglichkeiten von CSS3 denen von Photoshop in nichts nach, und es lassen sich mitunter sehr beeindruckende Effekte erzielen.
Leider wirken über Code erstellte Grafiken häufig zu glatt und zu einheitlich, was den fotorealistischen Gesamteindruck negativ beeinflusst. Es liegt ja gerade im Trend dezente Strukturen einzusetzen und so dem Design etwas mehr "Griff" zu geben. Was also tun? Die Lösung ist eine Kombination aus Photoshop-Pattern und CSS3.
In diesem Tutorial möchte ich euch zeigen, wie ihr zunächst eine transparente Struktur in Photoshop erstellt, und diese anschließend auf CSS3-generierte Objekte anwenden könnt.

Beitrag zu Ende lesen

Photoshop CS5: Mehrere Ebenen auf einmal sperren, entsperren oder fixieren

Um in Photoshop eine Ebene vor weiterer Bearbeitung zu schützen, benutzen wir in der Regel das Schloss-Icon am oberen Rand des Ebenen-Bedienfeldes. Das Schloss sperrt die Ebene komplett, die anderen Icons in diesem Bereich schützen immer nur bestimmte Eigenschaften der Ebene. Beispielsweise die Position.
Ärgerlich wird es sobald mehr als eine Ebene ausgewählt ist. Dann sind diese Icons nämlich ausgegraut und können nicht mehr betätigt werden. Um mehrere Ebenen zu sperren bzw. zu entsperren müssen wir also alle Ebenen der Reihe nach auswählen und die Einstellung vornehmen. Doch es geht auch schneller, denn die Funktion zum sperren/entsperren mehrerer Ebenen existiert ebenfalls.

Beitrag zu Ende lesen

Was bedeutet eigtl. die Photoshop-Füllmethode „Hindurchwirken“?

Die Füllmethoden von Photoshop - wie z.B. "multiplizieren" oder "weiches Licht" - bestimmen wie die Pixel verschiedener Ebenen miteinander verrechnet werden. Hierbei wirkt sich in der Regel die ausgewählte, und mit einer Füllmethode versehene, Ebene auf die darunter liegende aus.
Ihr findet die Füllmethoden im Ebenen-Bedienfeld und könnt hier den Modus für die aktuell ausgewählte Ebene festlegen. Wenn ihr nichts verändert, so steht der Wert auf "Normal". Doch sobald ihr einen Ordner erstellt, ändert Photoshop die Füllmethode auf "Hindurchwirken", einen Wert der für Ebenen nicht zur Verfügung steht. Was diese Füllmethode bewirkt, möchte ich euch kurz erklären.

Beitrag zu Ende lesen

normalize.css statt CSS-Reset

Webbrowser haben ja bekanntlich die Eigenschaft CSS-Stile unterschiedlich zu rendern. Damit eine Website trotzdem in allen Browsern gleich - oder zumindest sehr ähnlich - aussieht, verwenden wir daher in der Regel einen so genannten CSS-Reset. Das Projekt Normalize.css geht einen etwas anderen Weg und bietet eine solide Ausgangsbasis für Webprojekte.

Beitrag zu Ende lesen

Welche Technologien nutzt eine Website?

Wenn ihr erfahren möchtet welche Technologien eine Website einsetzt, sei es nun Apache, WordPress, HTML5 oder jQuery, dann schaut euch mal das Web-Tool "Under The Site" an.
Nach Eingabe der URL listet der Dienst alle verwendeten Technologien und Dienste auf, ergänzt durch eine kurze Erklärung.
Ein sehr interessantes Tool um fremde Websites und die dort zum Einsatz kommenden Funktionen einmal unter die Lupe zu nehmen.

Beitrag zu Ende lesen

Screencast: Holzstruktur in Photoshop erstellen

Mit realistischen Strukturen lässt sich die grafische Qualität einer Website spürbar verbessern, und auch im App-Design gehören simulierte Materialien wie Leder, Papier, Metall oder Holz heutzutage einfach dazu. Die Photoshop-Profis haben in Folge 58 einen Screencast von mir veröffentlicht, in dem ich erkläre, wie ihr mit Hilfe einiger Photoshop-Filter und etwas Handarbeit, eine realistische Holzstruktur herstellen könnt.

Beitrag zu Ende lesen