kulturbanause Blog

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

Photoshop-Dateien verknüpfen und inkludieren

Bei der Programmierung einer Website lagert man identische Seitenelemente, also beispielsweise den Header oder die Hauptnavigation, in separate Dateien aus. Anschließend verknüpft man die verschiedenen Dokumente untereinander. Diese Vorgehensweise hat den Vorteil, dass Änderungen immer nur an einer Stelle vorgenommen werden müssen. Das geht schneller und minimiert gleichzeitig das Risiko einen Bereich beim Update zu übersehen.
Das Plugin „Can Link It“ erweitert Photoshop um die Möglichkeit externe Dokumente zu inkludieren. Eine Funktion die Smartobjekte eigentlich schon bieten sollten. Photoshop hat in Version 14.2 diese Funktion erhalten. Einen ausführlichen Beitrag findet ihr hier.

Beitrag zu Ende lesen

Frame-Animation mit Photoshop – Einen Ladebalken animieren

Mit Photoshop lassen sich verschiedene Arten von Animationen herstellen. Eine davon ist die sog. Frame-Animation, in der verschiedene Einzelbilder nacheinander abgespielt werden. In diesem Video-Tutorial zeige ich euch am Beispiel eines Ladebalkens, wie ihr das Grundobjekt gestaltet und anschließend mit Hilfe der Photoshop-Zeitleiste animiert. Das Ergebnis speichern wir als GIF-Animation ab.

Beitrag zu Ende lesen

Die wichtigsten non-destruktiven Photoshop-Techniken + Tipps, Tricks & Videos

Wer kreativ arbeitet, probiert aus, nimmt häufig Korrekturen und Anpassungen vor und verwirft die Entscheidungen evtl. einen Tag später wieder. Um trotz des sprunghaften Ablaufs effektiv zu sein, sollte man möglichst wenig Pixel unwiederbringlich zerstören. Korrekturen lassen sich nur so schnell und unkompliziert vornehmen. Dieses Prinzip nennt sich non-destruktives oder verlustfreies Arbeiten und ist die Basis eines professionellen Workflows. Mit jeder Photoshop-Version kommen neue verlustfreie Methoden hinzu. In diesem Beitrag möchte ich euch die wichtigsten Techniken vorstellen.

Beitrag zu Ende lesen

Höhe von Facebook iframe-Tabs anpassen

Aus aktuellem Anlass (und da ich bereits diverse Mails erhalten habe) ein kurzer Hinweis. Um den Scrollbalken in langen Facebook-Tabs zu deaktivieren und die Höhe des Tabs an den Inhalt anzupassen, wird ein kleines JavaScript benötigt. Das bisherige Snippet funktioniert seit einigen Tagen nicht mehr! Ich habe den entsprechenden Beitrag hier im Blog aktualisiert. Ersetzt einfach das alte Snippet mit dem neuen Code und tragt eure App-ID und die Höhe des Inhalts ein.

Scrollbalken in Facebook-iFrame-Tabs deaktivieren →

WordPress: Code nur dann ausgeben wenn Inhalte vorhanden sind

WordPress wird nicht nur für Blogs und klassische Internetseiten eingesetzt, auch andere Website-Typen bieten sich durchaus an. Lebensläufe, Galerien, Bug-Tracker ... die Einsatzmöglichkeiten sind unzählig.
Je exotischer der Einsatzbereich, desto eher kann es vorkommen, dass der Inhaltsbereich nicht zwangläufig ausgefüllt wird. Beispielsweise weil nicht immer eine Beschreibung zu einem Produkt verfügbar ist. Mit folgendem Snippet lässt sich prüfen ob <?php the_content();?> gefüllt ist und je nach Ergebnis ein entsprechender Inhalt ausgeben.

Beitrag zu Ende lesen

Syntax Highlighting mit Prism

Prism Syntax Highlighter

Plugins und Scripte zum farbigen Strukturieren von Quellcode gibt es einige. Mit Prism ist ein weiteres Script erschienen, das im Vergleich zu den anderen mir bekannten Methoden einige Vorteile bietet. Ihr müsst beispielsweise keinen für das Plugin angepassten Quellcode verwenden, sondern werdet vielmehr gezwungen semantisch korrektes HTML5-Markup zu schreiben. Das Script lässt sich darüber hinaus kinderleicht anpassen, kommt in drei Designs daher und ist gerade einmal 1.5KB groß.

Beitrag zu Ende lesen

Link-Tipps zum Thema