Wie ihr vielleicht seht, erscheint der Blog erneut in einem neuen Look. Das ist die verbesserte Version von “Winegum”.
Diesen Theme könnt ihr auch nutzen und ihn auch selbst anpassen.

Den Download-Link findet ihr auf http://lgkonline.com/winegum/.

Über das Dashboard von WordPress könnt ihr Winegum weiter anpassen. So könnt ihr z.B. das Header-Hintergrundbild, ein eigenes Logo setzen und noch einiges mehr.
Auch könnt ihr entscheiden, ob ihr eine Sidebar wollt und wenn, wo sie überall angezeigt werden soll.

Außerdem könnt ihr Links zu sozialen Netzwerken setzen, z.B. zu eurem Facebook- oder Twitter-Profil.
Derzeit werden diese Dienste angeboten:

• Facebook
• Twitter
• YouTube
• Instagram
• GitHub
• Vine
• Google+

Schon länger liegt eine verbesserte Version von orange_files auf meiner Festplatte rum. Nun bin ich endlich dazu kommen, diese fertig zu stellen.

Auffälligste Änderung ist die neue Oberfläche. Diese basiert nun auf das Framework Bootstrap und ich damit auch responsive.
Lässt sich also auch prima auf Tablets und Handys nutzen.

Ebenfalls lassen sich in OPTIONS.php die Thumbnails jetzt komplett abschalten. Auch die Icons für die verschiedenen Dateiformate bekamen ein Facelift.

Das fancyBox-Plugin ist nun bereits bei dem Installations-Paket integriert. Bilder werden so in einer schicken Lightbox angezeigt.
In der Datei OPTIONS.php lassen sich die Plugins aber auch ganz einfach deaktivieren.

Auf zur orange_files-Website »

Was neu ist, dass die Dateien nun alphabetisch angeordnet werden. Außerdem gibt es nun Video-Dateien ein Symbol.

Okay, das war’s auch schon. Die Version ist jetzt 0.1.0 und kann hier heruntergeladen werden.

Aber auch Google und nun auch Apple ziehen nun mit.

Ein Bestandteil von Flat Design sind “Long Shadows”. Vor allem bei App-Icons findet man diese.

Seht einfach selbst:

Weitere Beispiele findet ihr in diesem Artikel auf designmodo.com.

Tutorial

Aber dies soll ein Tutorial sein, darüber wie man “Long Shadow”-Icons mit Photoshop verwirklichen kann.

Für den Schatten verwende ich eine selbstgemachte Vorlage, womit es einfacher ist den Schatten zu erstellen.

Die Vorlage hier als PSD: 45-Grad-Form.psd

Wie bei dem Beispiel mit dem Google Fonts-Icon, erstellen wir einen 45°-Schatten, welcher nach unten rechts scheint.

Für den Icon-Hintergrund erstellen wir ein abgerundetes Quadrat in der Farbe #00a89b.

Für das Tutorial wollen wir ein “Home”-Icon machen.
Also fügen wir ein Haus-Symbol ein. Das Icon stammt von iconmonstr.com. Dort findet ihr noch viele weitere Icons, die ihr verwenden könnt.

Da das Symbol aus zwei Körpern (Haus und Schornstein) besteht, erstellen wir zwei voneinander getrennte Schatten.

Zuerst ist das Haus dran. Wir fügen die beiden Ebenen aus der Schatten-Vorlage ein und bewegen diese zu der jeweils äußersten Kante des Hauses.

In einer neuen Ebene unter dem Haus-Symbol färben wir den unteren Bereich mit dem Pinsel-Werkzeug (B) schwarz. Das Schwarz muss dabei über der Vorlage liegen.

Das Schwarze soll unser Schatten werden. Der Teil des Schattens, das nun über die Vorlage steht soll nun abgeschnitten werden.

Dafür müssen wir die beiden Vorlagen-Ebenen in eine Auswahl umwandeln. Am einfachsten geht das, wenn man STRG gedrückt hält und auf die entsprechende Ebenen-Miniatur klickt.

Halte ich zu STRG auch noch SHIFT (Umschalt) gedrückt, kann ich eine Ebene zur Auswahl hinzufügen.

Wechseln wir nun wieder zur “Schatten”-Ebene und drücken ENTF, werden die überschüssigen Teile sauber abgetrennt.

Die Auswahl kannst du übrigens mit STRG + D aufheben.

Blendest du nun die Vorlagen-Ebenen aus (in meinem Fall sind es Ebene 4 und Ebene 3), wirst du sehen, dass ein Teil des Schattens noch über den Icon-Hintergrund übersteht.

Auch hier, geht es am einfachsten, wenn du den Icon-Hintergrund mit STRG und Klick auf die Miniatur auswählst.

Allerdings musst du danach die Auswahl noch umkehren, da wir ja den Teil des Schattens außerhalb des Icon-Hintergrundes entfernen wollen.

Nun, auch dafür gibt es einen Tastenkürzel, und zwar STRG + SHIFT (Umschalt) + I.

Wechseln wir nun wieder zur “Schatten”-Ebene und drücken ENTF, wird der unschöne Überschuss entfernt.

Nun können wir noch die Deckkraft des Schattens regulieren. Ich habe sie bei mir auf 23% gestellt.

Das Resultat ist doch schon mal ganz ansprechend. Die vorherigen Schritte wiederholen wir jetzt, allerdings beim Schornstein.
Das sieht dann so aus:

Das fertige Projekt könnt ihr hier als PSD runterladen: home-long-shadow.psd

Der CSS-Standard orange css wurde nun aktualisiert.

Es gibt zwei neue Definitionen und zwei weitere Verbesserungen.

Mit den Klassen “info-box” und “error-box” können nun Benachrichtigungs-Boxen erstellt werden.
Das eignet sich z.B. Formularen sehr gut. Wurde das Formular erfolgreich abgeschickt, erscheint eine Info-Box, gab es ein Problem erscheint eine Fehler-Box.

Außerdem wurden die Tags <code> und <li> neu gestylt.

Wer orange css per Einbindung nutzt, braucht nichts zu ändern. Wer den Stylesheet runtergeladen hat, sollte sich die neueste Version von der Website runterladen: orange-css.tk

Das hauseigene CSS-Framework orange css wird jetzt für das Kontaktformular und dem Impressum verwendet: lgkonline.de/about

orange css kann von jeden kostenlos genutzt werden. Du kannst entweder den Stylesheet direkt vom Server einbinden. Damit nutzt du immer die aktuellste Version.

Oder du downloadest die aktuellste Version und bindest diese ein. Das garantiert die Verfügbarkeit.

Hier geht’s zur Seite: orange-css.tk
Eine Dokumentation gibt es auch.

Das stolze Markenzeichen von Twitter ist das Vogel-Symbol.

Dieses Symbol wurde nun leicht verändert. Der Vogel, der im Übrigen auf den Namen “Larry” hört, fliegt jetzt
nicht mehr geradeaus, sondern schräg nach oben.

Unter https://twitter.com/about/logos könnt ihr das neue
Logo runterladen und es nutzen.

Allerdings wird darauf hingewiesen, dass ihr das Logo nicht verändern sollt. Der Vogel darf weder eine Sprechblase erhalten,
gedreht werden, noch verdeckt werden. Auch sollen keine anderen Markenzeichen, wie der Schriftzug oder das “t”, mehr verwendet werden.

Um bei Windows 7 das Symbol eines an der Taskbar angepinnter Anwendung zu verändern, gibt es einen kleinen Tipp:

Halte die linke Shift-Taste gedrückt und klicke mit der rechten Maustaste auf das gewünschte Programm.
Klicke jetzt auf “Eigenschaften”. Im Reiter “Verknüpfung” lässt sich das Symbol beliebig ersetzen.

Das funktioniert allerdings nur, wenn das Programm geschlossen ist. Außerdem werden die Veränderungen erst nach einem Neustart von Windows sichtbar.

Die von mir benutzten Symbole, findet ihr hier: http://yankoa.deviantart.com/art/MetroStation-183210118

Seit dem 31. Mai ist die letzte Vorabversion von Windows 8, die Release Preview, verfügbar.

Äußerlich hat sich nicht allzu viel getan.
Allerdings haben sich die Cursor, also die Mauszeiger-Symbole, verändert.

Da dies bloß Ani-Dateien sind, lassen sich diese auch ganz einfach auf anderen Betriebssystemen verwenden.
Deshalb habe ich mir die Dateien mal rausgesucht und biete sie bei LGK Design als Download an.

Ich habe soeben die Beta-Version von Adobe Photoshop CS6 heruntergeladen und installiert.

Was sofort auffällt ist natürlich die neue düstere Optik.

Aber auch die erste neue Funktion offenbart sich sehr schnell: Die erweiterte Timeline. Damit lassen sich jetzt nicht nur Bilder und Texte bearbeiten, sondern es können auch Audio-Tracks eingebunden werden.
Somit lassen sich mit Photoshop in Zukunft auch Videos bearbeiten. Bisher konnte man nur einfache Animationen erstellen.

Für Nutzer, die mit anderen Schnittprogrammen ihre Probleme haben, mit Sicherheit eine gute Nachricht. Denn mit Photoshop ist das Schneiden sehr viel leichter.

• Photoshop CS6 Beta für Windows
• Photoshop CS6 Beta für Mac OS