kulturbanause blog » Tutorials

Screencast: Moderne Web-Icons entwerfen

Jonas Hellwig — Wed, 28 Sep 2011 12:36:58 +0000

In Folge 69 der Photoshop-Profis wurde ein Screencast von mir zum Thema Icon-Design veröffentlicht. Das etwa 11 Minuten lange Video behandelt die Grundlagen der Icon-Erstellung und zeigt wie man mit Photoshop-Basics wie den Ebenenstilen und Formebenen sehr schnell zu einem ansehnlichen Ergebnis kommt. Auch die Arbeit mit Lichtern und Verläufen wird ausführlich beschrieben.

Die Photoshop-Profis beschreiben den Inhalt so:

Individuelle Icons verleihen Ihrer Webseite einen unverwechselbaren Look. In dieser Folge der »Photoshop-Profis« zeigt Ihnen Webdesigner Jonas Hellwig, wie Sie mit wenigen Mitteln ein Web-Icon erstellen. Dabei erfahren Sie, wie Sie das Icon mit Gold überziehen und ein Symbol einstanzen. [...]

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Transparentes Rauschen: Photoshop und CSS3

Jonas Hellwig — Wed, 27 Jul 2011 08:11:55 +0000

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.

Alle Dateien dieses Tutorial könnt ihr herunterladen. Das Download-Paket umfasst eine Photoshop-Datei, eine PNG-Struktur und das HTML-Beispiel.

Beispieldateien herunterladen

Datei anlegen und Smart-Filter vorbereiten

Erstellt zunächst einen neue Datei mit weißer Hintergrundfarbe. Ich habe in diesem Beispiel mit einer 500x300 Pixel großen Arbeitsfläche gearbeitet - die Abmessungen der Datei sind für das Verständnis dieser Technik allerdings irrelevant.

Wandelt nun die Hintergrundebene in eine normale Ebene um. Das erreicht ihr entweder mit einem Doppelklick auf die Hintergrundebene innerhalb der Ebenenpalette, oder alternativ über das Menü. "Ebene → Neu → Ebene aus Hintergrund".

Wandelt nun über "Filter → Für Smartfilter konvertieren" die Ebene in ein Smart-Objekt um. Das hat den Vorteil, dass ihr später den Rausch-Effekt noch anpassen könnt, ohne das ihr die Pixel unwiderruflich zerstört habt.

In Smart-Object umgewandelte Hintergrundebene.

Rauschfilter anwenden

Wählt nun über "Filter → Rauschfilter → Rauschen hinzufügen" den Rauschfilter aus und erstellt ein leichtes, gleichmäßiges, monochromatisches Rauschen.

Rauschen hinzufügen: leicht, gleichmäßig, monochromatisch

Auswahl aus Farbbereich erstellen

Erstellt jetzt eine zusätzliche Ebene oberhalb des Smart-Objektes. Auf dieser Ebene werden wir nun mit Hilfe einer automatischen Auswahl das transparente Rauschen erzeugen.

Achtet darauf, dass ihr die neue Ebene ausgewählt habt und ruft nun über "Auswahl → Farbbereich" den Farbbereich-Dialog auf. Mit diesem Werkzeug könnt ihr nun Pixel auf eurer Arbeitsfläche auswählen und anschließend eine Auswahl aller gleichfarbigen Pixel erstellen lassen. Die Toleranz bestimmt wie viele farblich benachbarte Pixel ebenfalls in die Auswahl aufgenommen werden.

Ich habe in diesem Beispiel mit einer Toleranz von 15 gearbeitet. Die Miniaturansicht zeigt welche Pixel ihr ausgewählt habt. Versucht hier ein möglichst gleichmäßiges Verhältnis von Schwarz und Weiß zu erreichen.

Photoshop: Farbbereiche auswählen

Bestätigt nun den Dialog und füllt die Auswahl anschließend über "Bearbeiten → Fläche füllen" schwarz ein. Jetzt könnt ihr die Auswahl wieder aufheben (Auswahl → Auswahl aufheben).

Struktur fertigstellen

Ihr könnt nun die ehemalige Hintergrundebene (Ebene 0) ausblenden oder löschen. Anschließend reduziert ihr die Deckkraft der Rausch-Ebene auf 5%-10% - je nachdem wie stark ihr das Rauschen einsetzen möchtet.

Struktur exportieren

Die transparente Rausch-Struktur ist nun fertig und muss lediglich exportiert werden. Speichert die Daten nun also über "Datei → Für Web und Geräte speichern" im PNG24-Format ab. Nur so erreicht ihr die benötigte Transparenz im Hintergrund.

Als PNG24 speichern

Struktur mit CSS3 kombinieren

Die fertige Struktur könnt ihr nun wie gewohnt per CSS auf ein Element anwenden. Die Technik wird allerdings erst richtig interessant, wenn ihr fortgeschrittene CSS3-Techniken - wie Verläufe oder 3D-Effekte - mit der Rausch-Struktur noch weiter aufwertet.

Das folgende Live-Beispiel zeigt einen simplen CSS3-Button mit angewandter Rausch-Textur. Der Code wurde in Firefox, Chrome und Safari getestet.

Im direkten Vergleich nun das Beispiel ohne Rauschen.

CSS-Code des Beispiel-Buttons

.button {
	padding:15px 17px;	

	background-color: #b5bdc8;
	background-image:url(rauschen.png);
	border-top:1px solid rgba(255,255,255,0.4);

	color:#222;
	font:22px Arial, Helvetica, sans-serif;
	font-weight:bold;
	text-decoration:none;
	text-shadow: rgba(255,255,255,.3) 0 1px 0;

	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;

	-webkit-box-shadow:
		inset 0px -5px 35px rgba(0,0,0,0.7),
		inset 0px 5px 15px rgba(255,255,255,.7),
		inset 0px -1px 0px rgba(255,255,255,0.3),
		0px 3px 3px rgba(0,0,0,0.5);

	-moz-box-shadow:
		inset 0px -5px 35px rgba(0,0,0,0.7),
		inset 0px 5px 15px rgba(255,255,255,.7),
		inset 0px -1px 0px rgba(255,255,255,0.3),
		0px 3px 3px rgba(0,0,0,0.5);

	-ms-box-shadow:
		inset 0px -5px 35px rgba(0,0,0,0.7),
		inset 0px 5px 15px rgba(255,255,255,.7),
		inset 0px -1px 0px rgba(255,255,255,0.3),
		0px 3px 3px rgba(0,0,0,0.5);

	-o-box-shadow:
		inset 0px -5px 35px rgba(0,0,0,0.7),
		inset 0px 5px 15px rgba(255,255,255,.7),
		inset 0px -1px 0px rgba(255,255,255,0.3),
		0px 3px 3px rgba(0,0,0,0.5);

	box-shadow:
		inset 0px -5px 35px rgba(0,0,0,0.7),
		inset 0px 5px 15px rgba(255,255,255,.7),
		inset 0px -1px 0px rgba(255,255,255,0.3),
		0px 3px 3px rgba(0,0,0,0.5);
}

Download aller Beispiel-Dateien

Ihr könnt alle Dateien dieses Beispiels hier herunterladen. Das Paket enthält eine Photoshop-Datei mit der Basis-Struktur, die exportier PNG und das HTML-Beispiel mit dem Button.

Beispieldateien herunterladen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Screencast: Holzstruktur in Photoshop erstellen

Jonas Hellwig — Sat, 09 Jul 2011 17:20:11 +0000

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.

Die Photoshop-Profis beschreiben den Inhalt des ca. 14-minütigen Videos so:

Sie möchten Ihre Webseite mit ansprechenden Holzstrukturen veredeln? In dieser Folge der Photoshop-Profis zeigt Ihnen Webdesign-Experte Jonas Hellwig, wie Sie mit wenigen Handgriffen eigene Holzstrukturen entwerfen. Dazu erzeugen Sie zunächst mit dem Fasern-Filter eine Grundstruktur, auf der Sie schließlich die Astlöcher und Baumringe anbringen. Die Holzstruktur können Sie übrigens auch verwenden, um anschließend Holzbretter für einen Parkettboden zu simulieren.

Edle Holzstrukturen nachbauen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Screencast: Kunstfaser-Struktur mit Photoshop erzeugen

Jonas Hellwig — Tue, 31 May 2011 04:30:11 +0000

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.

Zeichenfilter anwenden

Der Kunstfaser-Effekt ist sehr einfach hergestellt. Eine schwarz eingefärbte Arbeitsfläche wird mit dem Zeichenfilter "Feuchtes Papier" bearbeitet. Anschließend kann die Struktur noch verfeinert und farblich angepasst werden.

Die HD-Version findet ihr hier.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Screencast: Wassertropfen mit Photoshop erstellen

Jonas Hellwig — Mon, 23 May 2011 04:30:42 +0000

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.

Was wird in diesem Sceencast behandelt?

Ich möchte euch zeigen wie ihr mit Hilfe der Ebenenstile Wassertropfen selbst zeichnen könnt. Diese Vorgehensweise hat gegenüber der Arbeit mit Filtern einige Vorteile.
Zum einen könnt ihr den fertigen Stil abspeichern und mehrfach verwenden. Zum anderen könnt ihr nur so selbst festlegen, wo welcher Wassertropfen platziert werden soll und wie er geformt ist. Für die grafische Qualität des Layouts ist das sehr entscheidend. Ein Filter lässt sich für diesen Effekt zu ungenau steuern.

Die HD-Version findet Ihr auf Vimeo

Download des Photoshop-Stils (*.asl)

Ihr könnt den gespeicherten Stil aus diesem Screencast hier herunterladen und per Doppelklick in Photoshop importieren. Achtet darauf, dass ihr den Stil nur auf Objekte anwendet, die über eine scharfe Kante verfügen und eine hohe Deckkraft besitzen. Anderenfalls wirkt der Stil nicht wie gewünscht.

Photoshop-Stil (*.asl) herunterladen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

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

Jonas Hellwig — Fri, 20 May 2011 06:11:23 +0000

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.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Facebook: So nutzt ihr den neuen Send-Button

Jonas Hellwig — Wed, 27 Apr 2011 09:25:49 +0000

Facebook hat ziemlich genau ein Jahr nach der Einführung des Like-Buttons (Gefällt mir) das Sortiment der Social-Plugins um einen neuen Button erweitert. Mit dem Send-Button können Website-Besucher Beiträge nun gezielt an bestimmte Freunde senden. Facebook erfährt so noch mehr über die individuellen Beziehungen der Mitglieder.
Wie Ihr den Send-Button verwenden könnt, bzw. den Like-Button um die neuen Funktionen erweitert erkläre ich in diesem Beitrag.

So sieht der Senden-Dialog aus, wenn ein Besucher den Button benutzt

Den Facebook Send-Button "normal" in die Website einbinden

Wie auch beim Like-Button steht auf developers.facebook.com/docs/reference/plugins/send ein Tool zur Verfügung mit dem Ihr den Send-Button generieren könnt. Ihr müsst lediglich die URL die ihr "senden" möchtet eintragen und eine Schriftart festlegen. Anschließend erhaltet ihr folgendes Snippet:

Solltet Ihr bereits ein anderes Facebook-Social-Plugin wie die Like-Box oder den Like-Button eingebunden haben, so nutzt ihr bereits die Facebook-JavaScript-API. In diesem Fall reicht es den Button ohne JavaScript einzubinden.

Den Gefällt-Mir-Button um die Senden-Funktion erweitern

Wenn Ihr bereits den Like-Button (Gefällt-Mir-Button) auf Eurer Seite verwendet, so könnt ihr ihn ganz einfach um die "send"-Funktion erweitern.

Dazu müsst ihr in den bestehenden Code des Like-Buttons folgendes Attribut einfügen.

send=true

Anschließend stellt Facebook beide Buttons nebeneinander dar. Es wäre sicherlich schöner gewesen die Buttons irgendwie zu kombinieren - aber vielleicht kommt das ja noch.

Der Code für einen Like-Button inkl. Send-Funktion sieht dann beispielsweise so aus:

Den Like und Send-Button in WordPress verwenden

Wenn Ihr den Button in WordPress verwenden möchtet, so müsst Ihr den Permalink als URL angeben. Der Code inkl. Send-Button sähe dann beispielsweise so aus:

Der Button scheint Probleme mit einem Permalink in einer lokalen Serverumgebung wie MAMP zu verursachen. Bei mir wurde der Button erst online angezeigt.

Sprache festlegen

Wenn Ihr Probleme mit der Sprache des bzw. der Facebook-Plugins haben solltet, so schaut nach ob Ihr die Facebook JavaScript-API richtig eingebunden habt. Für gewöhnlich wird nämlich die englische Variante eingebunden. Um die Buttons auf Deutsch anzuzeigen müsst ihr das nachfolgende Snippet verwenden.

Bekanntes Problem im Internet Explorer 7/8

Im Internet Explorer 7 bzw. 8 wird der Button häufig nicht angezeigt. Sollte das bei euch der Fall sein, so achtet darauf, dass ihr die Facebook-JavaScript-API vor dem Like-Button eingebunden habt. Also nicht im Footer. Mehr dazu findet ihr in diesem Artikel.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Screencast: Futuristische Navigation mit Oberflächenglanz

Jonas Hellwig — Thu, 21 Apr 2011 12:28:11 +0000

Die Photoshop-Profis haben in Folge 48 erneut einen Screencast zum Thema Webdesign von mir veröffentlicht.
In diesem 14-minütigen Video-Tutorial beschreibe ich wie Ihr mit Grundformen und Verläufen eine futuristische anmutende "Web 2.0"-Navigationsleiste entwerfen könnt.
Die Online-Redakteure von Photoshop-Profis beschreiben den Inhalt des Videos wie folgt:

Sie können mit Photoshop auch eigene Navigationselemente für Webseiten entwerfen. Jonas Hellwig erklärt Ihnen in dieser Folge der »Photoshop-Profis«, wie Sie eine Navigationsleiste mit Glanz- und Glüh-Effekten sowie abgerundeten Ecken komplett in Photoshop gestalten. Dabei zeigt er Ihnen gleich zwei verschiedene Wege, um einen Oberflächenglanz in Photoshop zu simulieren.

Die Photoshop-Profis - Folge 48: Navigationsleisten für Web 2.0

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Websites mit CSS3 Media Queries für iPhone, iPad, Android & Co. optimieren

Jonas Hellwig — Mon, 11 Apr 2011 07:14:40 +0000

Das Web ist längst mobil geworden und moderne Websites müssen nicht nur auf dem Monitor, sondern auch auf unzähligen Ausgabemedien eine Top-Figur machen. Zwar rufen die meisten User Websites noch über einen Computer auf, aber die Zugriffe über mobile Endgeräte wie iPad, Smartphones und portable Spielekonsolen steigt stetig an. Wie soll man da eine Website für all diese Geräte optimieren können? Mit CSS3 Media Queries ist das gar nicht so schwierig.
In diesem Beitrag möchte ich Euch die Vor- und Nachteile dieser Technik erklären und an einem praktischen Beispiel zeigen wie schnell Ihr auch Eure Website für Smartphones und Tablet PCs optimieren könnt.

Von CSS2 Media Types zu CSS3 Media Queries

Media Queries bieten die Möglichkeit CSS-Inhalte für bestimmte Medien auszugeben. Sie haben also eine ähnliche Funktion wie das media-Attribut (auch als media-type bezeichnet) mit dem Ihr bestimmen könnt für welches Ausgabemedium, z.B. den Monitor oder Drucker, ein Stylesheet verwendet werden soll.

Die bisherige Einbindung eines Stylesheets unter Berücksichtigung des Media-Types sieht so aus:

Ihr könnt auch bestimmte Bereiche innerhalb des CSS-Dokuments entsprechend kennzeichnen. In diesem Beispiel wird nur die Bildschirmansicht berücksichtigt.

@media screen {
  h1 { background:red; }
}

CSS3 Media Queries gehen hier noch einen Schritt weiter. Neben der Art des Ausgabemediums könnt Ihr auch festlegen für welche Auflösung, Bildschirmgröße, Ausrichtung oder Farbdarstellung ein Stylesheet gelten soll. Dabei habt Ihr nach wie vor die Wahl ob Ihr Media Queries bei der Einbindung des CSS-Dokuments verwendet, oder ob Ihr bestimmte Abschnitte innerhalb der CSS-Datei definiert. Auf die Unterschiede beider Varianten gehe ich später noch einmal im Detail ein.

Wenn Ihr die entsprechenden Rahmenbedingungen kennt, so könnt Ihr also beispielsweise ganz gezielt ein Stylesheet für die Darstellung der Website auf dem iPad im Querformat erstellen. Oder Ihr optimiert die Website für alle modernen Smartphones (iOS, Android). Oder für Bildschirme mit stark reduzierter Farbdarstellung, oder oder oder ...

Optimierte Darstellungs-Varianten meines Blogs mit Media-Queries

Welche Werte könnt Ihr mit Media Queries abfragen?

Mit Media Queries lassen sich erstaunlich viele Eigenschaften abfragen. Damit die späteren Beispiele leichter verständlich sind möchte ich hier einmal einige Optionen auflisten. Diese fünf Eigenschaften sind die wichtigsten wenn es um das Ansprechen mobiler Endgeräten geht.

width: Viewport-Breite (z.B.: Der zur Verfügung stehende Platz innerhalb des Browserfensters)
Beispiel: @media handheld and (min-width: 20em) { ... }
height: Viewport-Höhe (z.B.: Der zur Verfügung stehende Platz innerhalb des Browserfensters)
Beispiel: @media screen and (max-height: 700px) { … }
device-width: Breite des Mediums (Smartphone-Bildschirm, Monitorgröße etc. )
Beispiel: @media screen and (device-width: 800px) { … }
device-height: Höhe des Mediums (Smartphone-Bildschirm, Monitorgröße etc.)
Beispiel: @media screen and (device-height: 400px) { … }
orientation: Beschreibt ob ein Gerät im Querformat (landscape) oder im Hochformat gehalten wird (portrait).
Beispiel: media all and (orientation:portrait) { … }

Wenn Ihr es ganz genau wissen wollt, so findet Ihr die oben genannten Beispiele sowie alle zur Verfügung stehenden Eigenschaften und den sehr komplexen Syntax auf der Website des W3C.

W3C - Official Specs

Wie können Medien Queries verwendet werden?

Wie ich zu Beginn bereits erklärt habe könnt Ihr Media Queries auf zwei Arten verwenden.
Zunächst könnt Ihr direkt bei der Verknüpfung des CSS-Dokuments im Eurer Website die entsprechenden Angaben machen und somit verschiedene Stylesheets für verschiedene Endgeräte einbinden.

Wenn Ihr also eine CSS-Datei für die Desktop-Version Eurer Website anlegen möchtet und eine für die iPhone-Version, dann kann das Ganze so aussehen.

Zur Info: Smartphones und Tablet-PCs melden sich als screen bei einer Website an. Der Media-Type handheld ist für diese Geräte also nicht geeignet.

Alternativ könnt Ihr auch bestimmte Bereiche innerhalb eines CSS-Dokuments mit Media Queries ansprechen. Im folgenden Beispiel wird der body auf dem iPhone rot eingefärbt.

only screen and (max-device-width: 480px) {
  body {background:red;}
}

Ich persönlich empfehle die zweite Variante da Ihr nur ein CSS-Dokument laden müsst. Somit vermindert Ihr HTTP-Requests und beschleunigt die Ladezeiten Eurer Website.

Die Website für iPhone und iPad optimieren

Nun möchte ich Euch gerne anhand eines Beispiels zeigen wie Ihr mithilfe von Media Queries eine simple Website für die Desktop-Darstellung, für das iPad und für das iPhone optimieren könnt.
In diesem Beispiel erstellen wir eine sehr simple Website mit einem Header, einem Content-Bereich sowie zwei Sidebars. In der Desktop-Version befinden sich beide Sidebars nebeneinander. In der iPad-Version steht in der Breite zu wenig Platz zur Verfügung, daher rutscht die eine Sidebar unter den Content. In der iPhone-Version werden dann alle Inhalte untereinander dargestellt.

Ich erkläre Schritt für Schritt wie ich vorgegangen bin. Das fertige Beispiel findet Ihr hier.

Demo-Seite anzeigen

Anordnung der Inhalte für die Desktop-, iPad- und iPhone-Version

HTML-Grundgerüst

Der HTML-Aufbau des Beispiels ist denkbar einfach. Innerhalb eines umschließenden

habe ich den Header, den Content und die Sidebar eingebunden. Ganz unten seht Ihr noch einen Div mit Inline-CSS. Dieser dient dazu die späteren CSS-floats wieder aufzuheben. Die Lösung mit Inline-CSS dient nur der Übersichtlichkeit des Beispiels und ist kein guter Code!




Websites mit CSS3 Media Queries für iPhone, iPad, Android & Co. optimieren





  header
  content
  sidebar 1
  sidebar 2

CSS-Code der Desktop-Anzeige

Wir beschäftigen uns zunächst mit der Desktop-Anzeige der Website. Den nachfolgenden CSS-Code habe ich im des Dokuments eingebunden. Ich verwende zunächst einen CSS-Reset und weise anschließend den Seitenelementen Ihre Grundeigenschaften zu.

Auffällig ist vielleicht, dass ich dem #container eine feste Breite zugewiesen habe. Innerhalb des Containers habe ich dann alle Elemente mit %-Breiten definiert. Diese Technik hat für mich den Vorteil, dass ich in der Desktop-Version mit festen Werten arbeiten kann. In den späteren mobilen Versionen ändere ich dann die Breite des Containers und passe das Verhältnis der Inhalte aneinander an.

DIe Angabe von Prozentwerten ist wichtig um nicht nur iPhones und iPads anzusprechen sondern auch andere Smartphones und Tablets die mit sehr ähnlichen Abmessungen arbeiten. Die Angabe fixer Pixelwerte kann leicht zu Fehldarstellungen auf diversen Geräten führen und wir können ja nicht alles testen und anpassen.

* {
	margin:0;
	padding:0;
	color:white;
}

#container {
	margin:30px auto;
	width:960px;
}

#header {
	width:100%;
	background:#80c9e3;
	margin-bottom: 2%;
	height:150px;
}

#content {
	float:left;
	width:56%;
	margin-right:2%;
	background:#3f90ae;
	height:800px;
}

#sidebar1 {
	float:left;
	width:20%;
	margin-right:2%;
	background:#2e6a80;
	height:800px;
}

#sidebar2 {
	float:left;
	width:20%;
	background:#153a48;
	height:800px;
}

CSS-Code der iPad-Version

Wenn die Desktop-Version der Website steht können wir mit Media-Queries jetzt die iPad-Version optimieren. Dazu füge ich unterhalb meines bisherigen CSS-Codes den entsprechenden Media Querie ein und überschreibe alle Eigenschaften die ich verändern möchte.
Um das iPad gezielt ansprechen zu können müsst Ihr natürlich wissen welche Abmessungen das Gerät bzw. der Bildschirm hat. Diese Werte könnt Ihr der Liste am Ende dieses Tutorials entnehmen.

Bitte beachtet, dass ich in diesem Beispiel die Eigenschaft width anstelle von device-width verwende. Das hat für mich den Vorteil, dass ich das Verhalten meiner Website testen kann indem ich die Größe des Browserfensters verändere. device-width wirkt sich auf die Größe des Bildschirms aus - das Beispiel wäre dann also nur auf einem iPad sichtbar.

Ich spreche also zunächst alle Viewports bis zu einer Breite von 1024 Pixeln an und vergebe anschließend einige neue Eigenschaften. Der Content wird breiter und Sidebar 2 erhält eine Breite von 100%.

@media only screen and (max-width: 1024px) {

#container { width:100%; }

#content { width:78%; }

#sidebar1 {
	width:20%;
	margin-right:0;
	margin-bottom:2%;
}

#sidebar2 {
	width:100%;
	height:200px;
}

}

CSS-Code der iPhone-Version (inkl. Smartphones mit Android etc.)

Die Smartphones lassen sich nach dem gleichen Prinzip ansprechen. Auch hier müsst Ihr lediglich die Abmessungen kennen und anschließend den CSS-Code anpassen.
DIe iPhone-Version dieses Beispiels sieht wie folgt aus und wird unterhalb des iPad-Codes eingebunden:

@media only screen and (max-width: 480px) {

#content {
	width:100%;
	margin-right:0;
	margin-bottom:2%;
}

#sidebar1 {
	width:100%;
	height:200px;
	margin-right:0;
	margin-bottom:2%;
}

#sidebar2 {
	width:100%;
	height:200px;
	margin-top:2%;
}
}

Zoom deaktivieren, Skalierung festlegen

Smartphones ermöglichen es dem User in der Website zu zoomen. Das macht nur dann Sinn wenn die Dektop-Version auf dem Handy angezeigt wird. Bei einer optimierten Version ist der Zoom eher störend. Über einen -Tag kann der Zoom deaktiviert werden.
Darüber hinaus kann (und sollte) die minimale und maximale Skalierung festgelegt werden.

Das war auch schon alles.

Demo-Seite anzeigen

Nach exakt diesem Prinzip habe ich auch die Anpassung an die verschiedenen Endgeräte für meine eigene Seite umgesetzt. Ich habe mich auch dafür entschieden den Viewport (width) und nicht die Größe des Endgeräts abzufragen (device-width). Außerdem verwende ich eigene Abmessungen und nutze nicht exakt die iPad und iPhone-Werte. Aber das ist alles Geschmacksache und abhängig vom Projekt.
Da in den Kommentaren zum Relaunch meiner Seite von Lukas die Frage gestellt wurde wie ich die verschiedenen Anpassungen umgesetzt habe, hoffe ich sehr die Frage mit diesem Artikel nun beantwortet zu haben.

Und das sind die wichtigsten Formate

Damit Ihr nicht lange suchen müsst findet Ihr hier die Media Queries der wichtigsten Endgeräte.

Wenn Ihr diese Liste ergänzen könnt (Android, Windows Phone, Nokia, etc.) dann schreibt doch bitte einen Kommentar.

iPhone / iPod Touch: @media only screen and (max-device-width: 480px) {}
iPhone mit Retina Display: @media only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { }
iPad: @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : landscape) {}
oder:
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : portrait) {}

Browser-Unterstützung

Der native Browser-Support für Media Queries beschränkt sich auf die folgenden Browser-Versionen: Chrome, Safari 3+, Firefox 3.5+, Opera 7+, Internet Explorer 9. Das insbesondere ältere Browser die Technik nicht interpretieren können halte ich aber für nicht sonderlich schlimm. Wenn Ihr Media Queries für die Anpassung an mobile Endgeräte einsetzt, könnt Ihr nämlich auf einen sehr umfangreichen Support bei den mobilen Browsern zurückgreifen.
Solltet Ihr dennoch für einen veralteten Desktop-Browser Media Queries einsetzen müssen, so hilft Euch sicher folgendes jQuery-Plugin um die Technik per JavaScript nachzurüsten.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Screencast: Stift-Icon entwerfen mit Photoshop

Jonas Hellwig — Fri, 25 Mar 2011 07:58:23 +0000

Auf dem hauseigenen Video-Blog "Photoshop-Profis" hat der Galileo-Verlag einen Screencast von mir veröffentlicht. In diesem 13 Minuten langen Video schaut Ihr mir bei der Erstellung eines Buntstift-Icons mit Photoshop CS5 über die Schulter. Ich arbeite in diesem Beispiel mit diversen Verlaufsüberlagerungen und einem Smart-Object.
Galileo Press schreibt folgendes über den Inhalt dieses Screencasts:

Anhand eines Buntstift-Icons zeigt Ihnen Jonas Hellwig in dieser Folge der »Photoshop-Profis«, wie Sie mit Photoshop individuelle Icons und Symbole gestalten können. Im ersten Schritt zeichnen Sie mit Hilfslinien und dem Pfad-Werkzeug die Form und füllen sie anschließend mit Farbe. Zum Schluss setzen Sie Glanzlichter und Schatten ein, um die Plastizität des Objekts zu unterstreichen. Für eine möglichst realistische Ausleuchtung sorgen außerdem gezielte Verlaufsüberlagerungen.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Photoshop: Wasserspiegelungen mit Verschiebungsmatrix

Jonas Hellwig — Tue, 01 Mar 2011 17:30:25 +0000

Spiegelungen sind ein wichtiges Gestaltungsmittel. Insbesondere im Webdesign wird der sogenannte Wet-Floor-Effekt gerne verwendet um einen hochwertigen und sauberen Eindruck zu erzeugen. Allerdings sollte der Effekt dezent eingesetzt werden denn der Glossy-Trend ist vorbei und stark glänzende Objekte und Flächen wirken schnell billig statt hochwertig. Und nicht nur im Webdesign werden Spiegelungen gerne verwendet. Insbesondere in Illustrationen oder naturalistischeren Abbildungen sind sie unverzichtbar um ein realistisches Gesamtbild zu simulieren.
In diesem Screencast möchte ich Euch zeigen wie einfach es ist mit Hilfe einer Verschiebungsmatrix eine wellige Wasseroberfläche zu simulieren. Die generellen Basics im Bezug auf Spiegelungen habe ich bereits in einem früheren Beitrag erklärt.

Das verwendete Bildmaterial stammt von William Murphy (Flickr-User Informatique):

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Photoshop-Profis-Screencast: Eigene Bedienfelder erstellen

Jonas Hellwig — Wed, 23 Feb 2011 14:16:42 +0000

Auf Photoshop-Profis.de - der Screencast-Website von Galileo Press - wurde heute ein Video von mir veröffentlicht. In ca. zehn Minuten Spielzeit zeige ich Euch wie einfach Ihr eigene Bedienfelder für Photoshop CS5 herstellen könnt. Die Vorgehensweise demonstriere ich an einem Beispiel aus dem Webdesign: Ich fasse alle für mich relevanten Arbeitsschritte beim Button-Design in einem Bedienfeld zusammen und teste es anschließend in Photoshop.
Darüber hinaus gehe ich am Beispiel von Twitter auch auf die Integration von Websites in Photoshop ein.

Photoshop-Profis

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Facebook: Fanpage mit iFrame-Tabs erweitern

Jonas Hellwig — Mon, 21 Feb 2011 13:26:13 +0000

Mit der Einführung der neuen Fanpages hat Facebook auch die schon lange angekündigten iFrame Tabs veröffentlicht. Mit Einführung dieser Tabs werden die bisher gebräuchlichen FBML-Tabs überflüssig und in Kürze nichtmehr unterstützt. Insbesondere wenn Ihr neue Seiten hinzufügen wollt müsst Ihr zukünftig iFrame-Tabs verwenden.
Ich möchte Euch kurz erklären was Ihr benötigt um die iFrame-Tabs nutzen zu können, wie Ihr einen neuen Tab erstellt, und wo die Vor- und Nachteile der neuen Tabs liegen.

Voraussetzungen für iFrame-Tabs

Bisher war es so, dass Ihr für die Benutzung von FBML-Tabs lediglich eine bereits existierende Anwendung zu Eurer Facebook-Seite hinzufügen musstet. Anschließend ermöglichte es Euch diese Anwendung Quellcode in die Facebook-Seite zu schreiben und somit individuelle Inhalte darzustellen.
Bei iFrame-Tabs ist das Ganze etwas anders: Ihr müsst zunächst für jede zusätzliche Unterseite (also jeden Tab) eine neue, eigene Facebook-Anwendung erstellen. Diese Anwendung zieht sich dann Quellcode von externem Webspace und stellt diesen mittels iFrame dar. Im letzten Schritt müsst Ihr die Anwendung Eurer Fan-Page hinzufügen.
Die Vorraussetzungen für die Einrichtung eigener Fanpage-Tabs sind damit etwas höher geworden: Um eine Anwendung erstellen zu können müsst Ihr Euch zunächst als Developer verifizieren. Dafür könnt Ihr Eure Kreditkarte oder Euer Handy benutzen.

Handy: facebook.com/confirmphone.php
Kreditkarte: secure.facebook.com/cards.php

Darüber hinaus benötigt Ihr ab sofort natürlich auch eigenen Webspace auf den Ihr den Code Eurer Fan-Page-Unterseite hochladen könnt.

Wenn all diese Vorraussetzungen erfüllt sind ist das Erstellen eines iFrame-Tabs keine große Sache mehr. Wir wollen uns das mal im Detail Schritt für Schritt anschauen.

Neue Anwendungen erstellen

Öffnet zunächst den Entwickler-Bereich von Facebook (facebook.com/developers) und klickt oben rechts auf "Erstelle eine neue Anwendung".

Im nachfolgenden Screen vergebt Ihr einen beliebigen Namen (kann nachträglich geändert werden), bestätigt die AGB und klickt auf "Anwendung erstellen".

Nach einer eventuellen Sicherheitsabfrage werdet Ihr zu den Anwendungs-Einstellungen weitergeleitet. In den Anwendungs-Optionen habt Ihr nun umfangreiche Möglichkeiten Angaben zu Eurer neuen Anwendung zu machen und Einstellungen festzulegen. Ich beschränke mich jetzt nur auf die Optionen die nötig sind um einen iFrame Tab zu erstellen.

Einstellungen "Website"

In den Website-Einstellungen müsst Ihr die Adresse zu Eurem eigenen Webspace eintragen. Hierbei muss ein Ordner angegeben werden (mit / am Ende!), keine einzelne Datei.

Einstellungen "Facebook-Einbindung"

In den Settings zu den "Facebook-Einbindungen" müsst Ihr ebenfalls einige Angaben machen. Im Abschnitt "Canvas" gebt Ihr sowohl die Canvasseite, als auch die Canvas-URL an.
Bei der Canvasseite könnt Ihr einen beliebigen Namen vergeben. Unter dieser Adresse ist die Facebook-Anwendung dann verfügbar.
Die Canvas-URL muss Euer Webspace sein. Hier tragt Ihr demnach den identischen Pfad ein wie zuvor in den Website-Einstellungen.

Im Abschnitt "Page Tabs" müssen ebenfalls Angaben gemacht werden. Tragt hier zunächst die Bezeichnung des Tabs ein. Dieser Name wird später in der Navigation angezeigt. Achtet darauf, dass als Typ "iFrame" ausgewählt ist und vergebt zuletzt die "URL des Reiters". Hierbei muss jetzt die Datei (üblicherweise index.html oder index.php) angegeben werden die auf Eurem Webspace liegt und den Code des späteren Tabs beinhaltet.

Ihr könnt jetzt alle Optionen speichern und werdet zum Bildschirm "Meine Anwendungen" weitergeleitet.

Externe Daten hochladen und bereitstellen

Ihr habt jetzt eine eigene Anwendung erstellt und Euren externen Webspace hinterlegt. Falls noch nicht geschehen müsst Ihr jetzt natürlich den externen Inhalt bereitstellen. Hierfür habt Ihr alle Möglichkeiten die beim coden einer normalen Website auch zur Verfügung stehen. Also Multimedia, jQuery, PHP, Tracking-Tools etc. Viele der neuen Möglichkeiten waren mit den bisherigen FBML-Tabs nicht realisierbar.
Erstellt eine neue HTML/PHP-Datei, fügt Inhalt ein und ladet diese Datei unter dem zuvor angegebenen Dateinamen in das zuvor angegebene Verzeichnis hoch.
Achtung! Aktuell sind die iFrame-Tabs auf eine Höhe von 800 Pixeln begrenzt.

Anwendung der eigenen Seite hinzufügen

Wenn Ihr Euch im Dialog "Meine Anwendungen" (facebook.com/developers/apps.php) befindet, so klickt nun auf "Anwendungs-Profilseite".

Ihr gelangt auf eine weitere Seite über die Ihr Eure neue Anwendung bewerben könntet. Hier stehen ähnliche Möglichkeiten zur Verfügung wie dies auch bei privaten Profilen und FanPages der Fall ist. Klickt auf "Zur Anwendung" um Euren iFrame-Tab-Inhalt zu testen.
Über den Link "Zu meiner Seite hinzufügen" fügt Ihr diesen Tab nun Eurer Fan-Page zu.

Anschließend erscheint der Tab unter dem zuvor angegebenen Namen in der linken Navigationsleiste. In den Einstellungen zu Eurer Seite könnt Ihr zudem festlegen, dass Besucher als Startseite einen iFrame-Tab sehen. Auch das Icon des neuen Tabs lässt sich über die Anwendungs-Einstellungen individualisieren.

Das war's auch schon. Diese Prozedur müsst Ihr nun ab sofort für jede zusätzliche Unterseite der Fan-Page durchführen. Ihr habt Ergänzungen oder Anmerkungen zu diesem Artikel? Dann schreibt einfach einen Kommentar.
Was haltet Ihr von den neuen iFrame Tabs? Überwiegen die Vorteile und die Freiheiten beim Coding oder findet Ihr die neuen Tabs zu kompliziert, lästig oder gar überflüssig?

Update: Sichere Verbindungen sind nun Pflicht

Facebook erlaubt seit Oktober 2011 nur noch sichere Tabs. Was das zu bedeuten hat und wie ihr einen Tab mit einem Sicherheitszertifikat ausstattet erfahrt ihr hier: So geht’s: Sicheres durchstöbern (https) für Facebook-Fanpages gewährleisten

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Photoshop: Strahlen-Effekt mit Polarkoordinaten

Jonas Hellwig — Mon, 27 Dec 2010 11:52:47 +0000

Einen Strahlen-Effekt kann man wirklich häufig gebrauchen. Insbesondere im Webdesign wird die Technik häufig eingesetzt um Gestaltungselemente im Header zu betonen. Wie Ihr den Effekt in Sekunden umsetzt zeigt dieses Photoshop-Mini-Tutorial.

Ausgangsmaterial

Legt eine neue Datei mit quadratischen Abmessungen an und erstellt auf einer neuen Ebene ein vertikales Linienmuster. In diesem Beispiel ist die Arbeitsfläche 500x500 Pixel groß. Die Linien sind 20 Pixel breit, die Abstände zwischen den Linien ebenfalls.

Wenn Ihr ganz schnell ein Linienmuster mit Hilfe von Photoshop erstellen wollt, so lest auch Photoshop-Tipp: Objekte mit gleichen Abständen positionieren

Polarkoordinaten-Filter anwenden

Nun öffnet Ihr über "Filter > Verzerrungsfilter > Polarkoordinaten" den Polarkoordinaten-Filter und wählt im nun erschienenen Dialog "Rechteckig -> Polar" aus. Anschließend bestätigt Ihr den Dialog. Das wars auch schon.

Wie Ihr seht wird der Strahlen-Effekt zum Zentrum hin ein wenig pixelig. Es empfiehlt sich also das Objekt immer größer anzulegen als eigentlich benötigt. Durch die Skalierung in Photoshop wird diese Verpixelung korrigiert.

Anwendungsbeispiel

Nehmt die gleiche Datei und zeiht auf der Hintergrundebene einen radialen Farbverlauf von #844a0e zu #2c0000 auf. Anschließend fügt Ihr über "Filter > Rauschfilter > Störung hinzufügen" eine ganz leichte Körnung hinzu. Ich habe hier eine Stärke von 1% mit gaußscher Verteilung und monochromatischer Farbgebung eingestellt.
Zur Verdeutlichung habe ich in der folgenden Grafik die "Strahlen-Ebene" ausgeblendet.

Nun wählt Ihr wieder die Strahlen-Ebene aus, reduziert die Deckkraft auf 15% und zeichnet die Ebene anschießend über "Filter > Weichzeichnungsfilter > Gaußscher Weichzeichner" nach Belieben weich.

Im letzten Schritt fehlt natürlich noch das Objekt was optisch betont werden soll. Ich habe hier mein Logo verwendet und über die Ebeneneffekte einen Schein nach außen und nach Innen hinzugefügt. Anschießend habe ich die Strahlen-Ebene kopiert und ein wenig gedreht.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Facebook-Power Teil 3: Open Graph Protocol nutzen

Jonas Hellwig — Thu, 25 Nov 2010 10:49:39 +0000

Der berühmte „gefällt mir/like“-Button ist weit mehr als lediglich eine simple Verlinkung zu Facebook. Vielmehr ist er ein wesentlicher Bestandteil von Facebooks Schnittstelle um mithilfe des Open Graph Protocols Websiteinhalte in den Social Graph zu integrieren. Aber mal der Reihe nach.

Der Social Graph dient dazu die verschiedenen und sehr komplexen Beziehungen zwischen Objekten (z.B. Facebook-Usern) auszudrücken. Er ist allerdings nicht auf Facebook allein beschränkt sondern besteht global und schließt beispielsweise auch den E-Mail-Verkehr oder Aktivitäten auf anderen Netzwerken und Blogs ein.

Quelle: designforfun.com

Das Open Graph Protocol ermöglicht es Euch nun mithilfe des Like-Buttons externe Web-Inhalte in den Social Graph auf Facebook zu integrieren. In erster Linie ist das Protokoll dafür gedacht reale Dinge wie ein Restaurant oder einen Kinofilm auf Facebook zu repräsentieren aber Ihr könnt es auch einsetzen um Euren Blog zu vermarkten. Ich möchte Euch erklären wie das funktioniert und welche Vor- und Nachteile abgewogen werden müssen.

Das Wichtigste zuerst

Bitte lest diesen Artikel erst komplett durch bevor Ihr anfangt die Funktionen in Eure Website zu integrieren. Somit sollten sich einige Fragen bereits erübrigen und Probleme vermeiden lassen.

Sollte sich auf der Seite die Ihr um Graph-Funktionen erweitern wollt bereits ein Like-Button befinden, so könnt Ihr die URL nur dann nachträglich an den Graph andocken wenn Ihr bisher keinen "Like" erhalten habt. Das hängt damit zusammen, dass Graph-Objekte sich tief in die Benutzerprofile von Facebook-Usern schreiben und es wohl technisch kaum möglich ist nachträglich hier noch Änderungen vorzunehmen. Was genau alles passiert wenn ein Objekt Bestandteil des Graphs ist erläutere ich später im Detail.

Open Graph verwenden

Um Website-Inhalte wie beispielsweise einen Blog-Post in den Social Graph zu intergrieren müssen die Inhalte zunächst in ein sogenanntes Graph-Element umgewandelt werden. Das geschieht mit Hilfe von -Befehlen im der entsprechenden Seite. Neben einem Titel, einer Beschreibung und der Quelle kann auch eine Kategorie und ein Bild bereit gestellt werden. Kickt anschießend ein Besucher auf den "gefällt mir"-Button werden diese Meta-Informationen an Facebook übertragen und lösen dort eine Reihe von Aktionen aus. Dazu später mehr.

Das folgende Beispiel zeigt die Einbindung der -Tags anhand dieses Artikels. Achtet darauf, dass auch der -Tag erweitert werden muss.



 ... 








...

...

Wenn Ihr WordPress im Einsatz habt, so sollten die Werte natürlich dynamisch geladen werden. In diesem Fall könnte der -Bereich so aussehen.

Das soeben gezeigte Beispiel nutzt die Standard-Werte für Graph-Objekte die ich nun kurz erklären möchte:

og:title: Titel des gesamten Objekts
og:site_name: Titel der aktuellen Seite. Zum Beispiel der aktuelle Artikel.
og:description: Beschreibungstext
og:type: Kategorie. Welche Kategorien zur Verfügung stehen steht Ihr hier: http://developers.facebook.com/docs/opengraph#types
og:url: Permalink/Permanente URL
og:image: Grafik die innerhalb des Objekts dargestellt werden soll. Die Grafik sollte mindestens 50x50 Pixel groß sein und ein möglichst quadratisches Format haben. Maximal ist ein 3:1 Verhältnis umsetzbar – das sieht allerdings nicht schön aus.
fb:admins: User-ID des Administrators. Wenn die Seite von mehreren Leuten administriert wird können durch Komma getrennt auch mehrere IDs angegeben werden
fb:app_id: Facebook-Application ID al Alternative zum Admin

Es lassen sich allerdings auch noch weitere Attribute nutzen die Ihr ebenfalls der folgenden Liste entnehmen könnt, die im Beispiel jedoch keine Anwendung finden. Eine detaillierte Anleitung findet Ihr auf http://opengraphprotocol.org. Bedenkt auch, dass Graph-Objekte in Kombination mit Mikroformaten verwendet werden können.

og:latitude: Breitengrad: zum Beispiel „37.416343“
og:longitude: Längengrad: zum Beispiel: „122.153013“
og:street-address: Straße
og:locality: Stadt
og:region: Bundesland/-Staat
og:postal-code: Postleitzahl
og:country-name: Land/Staat
og:email: E-Mail-Adresse
og:phone_number: Telefonnummer (inkl. intern. Vorwahl)
og:fax_number: Faxnummer (inkl. intern. Vorwahl)

Um zu testen ob Ihr die Werte korrekt eingetragen habt und welche Werte wie übertragen werden empfiehlt es sich folgendes Facebook-Tool zu nutzen: http://developers.facebook.com/tools/lint

Like-Button einbinden

Nachdem Ihr nun die -Daten in Eure Seite integriert habt fehlt lediglich der „gefällt mir“-Button. Hierzu könnt Ihr das Tool auf http://developers.facebook.com/docs/reference/plugins/like nutzen oder folgenden Code einbinden.

Lösung mit iframe:

Lösung mit FBML

Wenn Ihr WordPress nutzt, so lest hier nach wie Ihr die URL korrekt übergeben könnt: Facebook „gefällt mir“-Button in WordPress einbinden

Fluch und Segen von Graph-Objekten

Das war im Grund schon alles um den Like-Button funktionell zu erweitern und die Website an den Social Graph anzuschießen. Wenn jetzt ein Besucher auf den "gefällt mir" Button klickt werden eine Reihe von Funktionen ausgelöst die ich nun im Detail beschreiben möchte. Beachtet bitte, dass je nach Projekt entschieden werden muss ob es Sinn macht eine Website an den Graph anzuschießen, bzw. welche Meta-Daten übertragen werden sollen.

Automatisch erzeugte Facebook (Fan-)Pages

Sobald der Like-Button betätigt wird generiert Facebook aus den Meta-Daten und der URL eine Micro-Fanpage! Facebook nennt diesen Seitentyp schicht "Seite". Da Ihr selbst in der Regel Administrator Eurer Seite seid (Zur Erinnerung: Ihr übergebt die Admin-ID in den Meta-Daten) werdet Ihr zunächst davon ausgehen, dass diese Seite eine "normale" Fan-Page ist und für jeden User sichtbar. Das ist nicht der Fall - nur Ihr könnt sie sehen.

Um auf die Seite nun zugreifen zu können gibt es zwei mir bekannte Möglichkeiten. Zum Einen wird der Like-Button in der entsprechenden Quelle um einen "Administrator-Link" erweitert der Euch zur Seite führt. Dieser ist natürlich auch nur für Euch sichtbar.
Alternativ wird für jede Seite der Seitenliste innerhalb Eures Profils hinzugefügt. Ihr erreicht sie also in der Hauptnavigation über "Konto > Seiten verwalten".

Was ist jetzt das Besondere an dieser Seite? Ganz einfach: Links könnt Ihr sehen welchen Benutzern dieser Beitrag gefällt. Das könnt Ihr sonst so ohne weiteres nicht herausfinden wenn Ihr nicht selbst mit dem Benutzer befreundet seid.
Darüber hinaus hat die Micropage eine eigene Pinnwand. Wenn Ihr nun hier eine Statusmeldung verfasst postet Ihr diese Nachricht auf die Pinnwand aller User die auf "gefällt mir" geklickt haben. Je nach Art des Inhalts kann diese Methode enorm effektiv sein um eine bestimmte Zielgruppe zu erreichen.

Automatisch erzeugte Interessen in User-Profilen

Wenn ein Besucher auf den „Like-Button“ klickt, so werden die Meta-Informationen mit übertragen. Im Info-Tab des entsprechenden Benutzers werden die Interessen und „gefällt mir“ kategorisiert. Hier greift der og:type und ordnet das Objekt entsprechend ein. Das passiert bei einem Objekt was nicht an den Graph angeschlossen ist nicht. Auch das Benutzerbild wird übertragen und ein Link zur Website!

Seiten und externe Links in der Facebook-Suche

Jede neue Micro-Facebook-Page wird in die Facebook-Suche aufgenommen. Besonders interessant an dieser Sache ist, dass die Links von Facebook weg auf Eure Seite führen. Wenn Ihr die Funktion also in Euren Blog einbaut so könnt Ihr über längere Zeit eine enorme Menge an Content und externen Verlinkungen von Facebook aus generieren. Wie das genau mit PageRank etc. aussieht kann ich im Moment jedoch noch nicht sagen.

Teilen, Empfehlen und Co.

Die Meta-Daten werden auch dann verwendet wenn ein Benutzer innerhalb von Facebook eine Statusmitteilung mit seinen Freunden teilt. Das Benutzerbild wird beispielsweise angezeigt was die Mitteilung zumindest optisch hervorhebt.

Fazit, Hinweise, Bedenken

Ich gebe zu die Funktion ist ebenso mächtig wie unübersichtlich. Auch kann ich aktuell schlecht einschätzen wie groß eine eventuelle Gefahr ist.
Sofern man wie ich eine "echte" Fan-Page betreibt muss man zumindest damit rechnen, dass die automatisch generierten Seiten eine Konkurrenz zur Fan-Page darstellen. Ich für meinen Fall habe mich dazu entschlossen alle meine Blog-Posts vorerst an den Graph anzudocken. Ich schaue dann mal wie sich das alles entwickelt und gehe das Risiko ein, dass es schief geht.

Für elementar halte ich auch ein eventuelles Datenschutz-Problem. Ich weiß nicht in wie fern ich den Besucher darüber informieren muss, sollte etc, dass die Informationen in sein Profil geschrieben werden. Und hier ist eben nicht von der Pinnwand die Rede sondern von den Interessen die - je nach Privatsphäre-Einstellungen - öffentlich sichtbar sind. Was allerdings wiederum gut für mich ist da öffentliche Inhalte auch von Google indexiert werden können. Wenn hier jemand einen Link oder Anregungen hat dann immer her damit.

Zuletzt möchte ich darauf hinweisen, dass die Funktion natürlich auch missbraucht werden kann. Ich wäre durchaus in der Lage Werbung (inkl. Bild!) in die Meta-Daten einzupflegen um alle bereits besprochenen Vorteile zum Spamming zu nutzen. Vor allem da der Besucher nicht direkt sieht welche Daten übertragen werden wenn er den Button klickt.

Update: Das Open-Graph-Protocol erzeugt invaliden HTML-Code. Wie ihr das Problem in den Griff bekommt habe ich in einem weiteren Artikel beschrieben.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Facebook-Power Teil 2: Tabs, Apps, FBML, Design

Jonas Hellwig — Mon, 22 Nov 2010 20:55:43 +0000

Dieser Beitrag ist der zweite Teil meiner Artikel-Serie zur PhotoCon 2010 in der ich erkläre wie Ihr eine individualisierte Facebook-Fanpage erstellt.

Im vorausgegangenen Artikel habe ich beschrieben was Ihr hinsichtlich des Profils beachten müsst und wie alles richtig angelegt wird. Nun geht es darum die Fan-Page mit Anwendungen zu individualisieren, das Design anzupassen und eine Vanity-URL festzulegen.

Willkommens-Seite

Im letzten Beitrag haben wir die Basis-Settings der Fan-Page besprochen. Was wir nun benötigen ist eine individuelle Start-Seite für unsere Fan-Page.

Die Willkommens-Seite hat den Sinn den Besucher Willkommen zu heißen und Ihm kurz und knapp zu erklären was für Informationen er hier findet. Darüber hinaus sollte ein Hinweis auf den „Gefällt mir“-Button eingebunden werden, denn diesen soll der Besucher ja betätigen damit Ihr mehr Fans bekommt. Um Ihm das alles etwas schmackhafter zu machen ist es sinnvoll einen Anreiz zu bieten. Das könnte zum Beispiel ein exklusives Gewinnspiel sein.

Wenn Ihr keine echten Anreiz bieten könnt, so "verkauft" dem Fan eine Standard-Funktion. Frei nach dem Motto "Klickt auf gefällt mir und bekommt ab sofort alle unsere Statusmitteilungen direkt auf die Pinnwand übertragen."

FBML-Anwendung installieren

Achtung! Facebook erlaubt keine neuen FBML-Anwendungen mehr. Das bedeutet, dass Ihr nur dann mit FBML arbeiten könnt wenn bereits vorher die Anwendung installiert war. Der Ersatz für FBML nennt sich iFrame-Tab. Alles was Ihr dazu wissen müsst habe ich hier zusammengefasst: Facebook-Fanpage mit iFrame-Tabs erweitern

Um individuelle Tabs in unsere Navigation einbinden zu können müssen wir zunächst eine zusätzliche Anwendung (Facebook-App) installieren. In diesem Fall gehen wir in die Suche und suchen nach „static FBML“. FBML bedeutet Facebook Markup Language und erlaubt es uns gleich innerhalb eines neuen Facebook-Tabs HTML-Code und FBML zu schreiben.

Nachdem Ihr die Anwendung gefunden habt und Euch auf der Anwendungs-Seite befindet klickt Ihr links auf „Zu meiner Seite hinzufügen“. Im Nachfolgenden Screen wählt Ihr die Fan-Page auf welcher static FBML installiert werden soll.

Ihr wechselt wieder zu Eurer Fan-Page (am schnellsten über die Suche) und geht erneut auf „Seite bearbeiten → Anwendungen“. Hier findet Ihr nun die soeben installierte App unter dem Namen „FBML 1“. Klickt auf „Zur Anwendung“ um den neuen Tab mit Inhalten zu befüllen.

Hier könnt Ihr nun einen Titel für den neuen Navigations-Tab festlegen und Inhalte hinzufügen. Um die Inhalte zu strukturieren und auszuzeichnen müsst Ihr HTML-Code schreiben worauf ich an dieser Stelle nicht im Detail eingehen werde.

Wenn Ihr Grafiken verwenden wollt so müsst Ihr diese auf einen eignen Webspace hochladen und absolut verlinken. Das kann sowohl mit HTML als auch mit (Inline-)CSS geschehen.

Auf diese Weise lassen sich sehr individuelle Willkommens-Tabs gestalten.

Es gibt übrigens unzählige Anwendungen wie Flickr, Twitter und Co. über die Ihr auch externe Dienste in Eure Fan-Page integrieren könnt. Bedenkt jedoch immer: Informationen nach Facebook rein: Kein Problem! Daten aus Facebook raus: Sehr schwierig bis unmöglich!

Standard-Tab festlegen

Ihr habt nun Euere Fanpage schon sehr weit individualisiert. Allerdings wird bei Besuchern immer noch die Pinnwand als erstes geladen. Um das zu ändern begebt Ihr Euch über „Seite bearbeiten → Genehmigungen verwalten“ und stellt unten den „Standard-Tab“ ein.

Diese Einstellung ist für Euch übrigens nicht sichtbar. Admins sehen als Startseite immer entweder „Los geht’s“ oder die Pinnwand. Also nicht wundern.

Facebook-Design

Mir als Designer ist es natürlich besonders wichtig, dass das Layout der Willkommens-Seite möglichst schön ist. Aus diesem Grund habe ich mir selbst eine Photoshop-Vorlage für Fan-Pages erstellt die ich Euch hier auch gerne zur Verfügung stelle. Die Vorlage enthält alle Elemente und Hilfslinien, so dass Ihr hier optimal mit der Gestaltung loslegen könnt. Eine exportiere Photoshop-Farbfelder-Palette unterstützt Euch ebenfalls beim Design.
Wenn Euch etwas fehlt oder Ihr Verbesserungsvorschläge habt, dann schreibt mir und ich ergänze die Datei gerne.

Achtet darauf, dass Ihr auch das Benutzerbild als Gestaltungselement einsetzen könnt. So lassen sich auch innerhalb von Facebook einigermaßen ansehnliche Layouts realisieren.

Facebook Fan-Page Photoshop Template

Vanity-URL

Sobald Eure Fan-Page 25 Personen gefällt könnt Ihr eine so genannte Vanity URL beantragen. Das bedeutet, dass Ihr in der Adresszeile des Browsers keine schrecklichen IDs angezeigt bekommt sondern einen schönen Namen der sich auch in der E-Mail Signatur gut macht und leichter zu merken ist.

Sobald Ihr 25 Fans habt geht Ihr auf http://www.facebook.com/username/ und könnt dort für Eure Fan-Page einen Namen festlegen. Das funktioniert auch für Euer Benutzerprofil.

Ihr müsst Euch hierfür mit einem Handy legitimieren.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Facebook-Power Teil 1: Profile, FanPage, Benutzerbild etc.

Jonas Hellwig — Fri, 19 Nov 2010 21:20:43 +0000

Facebook wird immer mächtiger und ersetzt in vielen Teiles des Webs bereits Micropages und Online-Dienste. Auch wenn ich der Meinung bin, dass man auf eine eigene, individuell gestaltete und programmierte Website nicht verzichten darf, so möchte ich Euch trotzdem erläutern wie Ihr Facebook zum erfolgreichen Online-Marketing nutzen könnt und worauf zu achten ist.

In dieser Artikel-Serie lernt Ihr welche Profilart genutzt werden muss, was Ihr beim Profilbild beachten solltet, wie Ihr die Fanpage individuell mit Facebook Markup-Language (FBML) gestalten könnt und welche Inhalte am effektivsten sind. Diese Artikelserie ist im Rahmen der PhotoCon 2010 entstanden.

Facebook-Profile

Ich unterscheide im Folgenden zwischen zwei verschiedenen Profilarten innerhalb von Facebook. Es gibt noch weitere wie Places, Gruppen, die mittlerweile abgeschafften Unternehmenskonten etc. aber für unseren Zweck sind diese beiden wichtig:

Privates Benutzerprofil
Unternehmensprofil bzw. Fan-Page

Wenn Ihr das falsche Profil für den falschen Zweck einsetzt, so habt Ihr von Anfang an etwas falsch gemacht was sich später meist nicht ohne weiteres korrigieren lässt und mehr als ärgerliche Folgen haben kann.

Wichtig ist, dass Ihr für Euer Unternehmen unbedingt ein Unternehmensprofil (= FanPage) anlegen müsst.

Erstens ist es verboten private Profile für Unternehmen zu missbrauchen, zweitens verfügen FanPages über andere Eigenschaften als private Profile was Euch in Windeseile zum Verhängnis werden kann. So könnt Ihr bestimmte Anwendungen nicht installieren, seid in der Anzahl der „Freunde“ beschränkt und habt vollkommen andere Infofelder zur Verfügung.

Fan-Page erstellen

Um eine Fan-Page anzulegen geht Ihr zunächst auf http://www.facebook.com/pages/create.php. Hier gebt Ihr im rechten Teil des Fensters die entsprechenden Kategorien an.

Wenn Ihr hier eine falsche Kategorie wählt könnt Ihr das nachträglich nicht mehr ändern! Je nach Kategorie verfügt Euer Profil über andere Infofelder – passend zur Branche. Eine Übersicht aller Branchen und Felder stellt das Cheatsheet von Facebookmarketing.de übersichtlich dar.

Facebook plant wohl eine Überarbeitung des "Seite anlegen"-Bildschirms. Icons sollten die Navigation vereinfachen. Bisher ist die Funktion nur in den USA online. Ich würde mich freuen wenn Ihr mir einen Kommentar schreibt sobald Ihr das Feature auch auf der deutschen Seite entdeckt - dann kann ich den Artikel anpassen.
So wird es bald aussehen: New Page Creation Flow

Fan-Page mit Benutzerprofil verknüpfen

Sobald Ihr nun die Fan-Page angelegt habt und das Profil per E-Mail bestätigt wurde befindet Ihr Euch auf der Startseite. Diese Seite ist zwar jetzt schon eine Fan-Page verfügt aber noch nicht über alle Funktionen die wir benötigen um erfolgreiches Facebook-Marketing zu betreiben. Zum Beispiel könnt Ihr keine Anwendungen installieren. Für vollständige Funktionalität muss die Fan-Page nun mit einem privaten Benutzerprofil verknüpft werden.

Sofern Ihr noch kein privates Profil habt klickt Ihr in der Hauptnavigation auf „Erstelle dein Profil“ und gebt im nachfolgenden Screen die gewünschten Infos ein.

Solltet Ihr bereits ein privates Benutzerprofil haben so klickt Ihr links in der Navigation unter dem Profilbild zunächst auf „Seite bearbeiten“ und anschießend auf „Administratoren verwalten“. Nun könnt Ihr die E-Mail Eures Profils angeben um die Verknüpfung herzustellen.

Fan-Page unsichtbar schalten

Die Fan-Page ist nun angelegt und mit einem Profil verknüpft. Nun widmen wir uns der Gestaltung der Seite. Da wir bei Facebook nicht offline arbeiten können sollten wir zunächst die Seite für Gäste deaktivieren. Dazu wählt Ihr „Seite bearbeiten → Genehmigungen verwalten“ und setzt oben den Haken bei „Nur Administratoren können diese Seite sehen“.

Vergesst nicht die Seite später auch wieder sichtbar zu schalten!

Benutzerbild hochladen

Nun ist es an der Zeit ein wenig am Design unserer neuen Seite zu feilen. Als erstes sollen wir ein Benutzerbild hochladen. Hier solltet Ihr folgendes beachten: Das Bild darf maximal ~~200x600~~ 180x540 (Update mit Einführung der neuen FanPages) Pixel groß sein. Es lohnt sich also diese Größe auch auszunutzen.

Darüber hinaus wird das kleine quadratische Avatar was immer neben Statusmeldungen erscheint aus diesem Benutzerbild ausgewählt. Es sollte also das Logo im Benutzerbild auftauchen. Das folgende Beispiel (facebook.com/klosterkirche) zeigt wie das Benutzerbild als Gestaltungselement verwendet wird und gleichzeitig eine Grundlage für den Mini-Avatar bildet.

Navigation anpassen

Wenn Ihr Euch auf der Fan-Page befindet könnt Ihr die Navigation per Drag and Drop verschieben. Darüber hinaus solltet Ihr unbedingt alle Tabs entfernen die Ihr nicht benötigt. Dafür klickt Ihr zunächst den Reiter an. Sobald Ihr Euch auf der entsprechenden Seite befindet könnt Ihr über den Stift ein kleines Menü öffnen in welchem sich der Tab entfernen lässt.
Solltet Ihr den Reiter später doch benötigen so lässt er sich über „Seite bearbeiten → Anwendungen“ wieder aktivieren.

Teil 2 dieser Artikelserie lesen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Photoshop-Tutorial: Rauch-Effekt erstellen

Jonas Hellwig — Wed, 10 Nov 2010 20:06:56 +0000

In diesem Photoshop Tutorial zeige ich wie Ihr in sehr kurzer Zeit einen überzeugenden Rauch-Effekt herstellen könnt. Wir benötigen dazu ein paar Filter und ein wenig handwerkliches Geschick. Das Tutorial behandelt die grundlegende Technik. Anschließend kann jede gewünschte Rauch-Form entsprechend realisiert und auf beliebige Hintergrundbilder angewendet werden.

Grundform

Wir starten mit einer neuen Datei und einer schwarz eingefärbten Hintergrundebene. Wählt nun zunächst einen sehr weichen Pinsel mit geringer Deckkraft und zeichnet auf der Hintergrundebene mit Weiß eine beliebige Form ein. Ihr könntet auch auf einer neuen Ebene arbeiten, in diesem Fall erschwert Ihr Euch aber selbst im kommenden Schritt die Arbeit.

Verflüssigen-Filter anwenden

Nun wählt Ihr "Filter → Verflüssigen" um den Verflüssigen-Dialog zu öffnen. Hättet Ihr hier im ersten Schritt eine neue Ebene für den Rauch erstellt, so wäre dieser jetzt auf transparentem Hintergrund und im Bearbeitungsdialog entsprechend schwer zu erkennen.

Auf der linken Seite habt Ihr verschiedene Werkzeuge zur Auswahl mit denen Ihr die Ebene bearbeiten könnt. Wählt hier das "Vorwärts-Krümmen-Werkzeug" (ganz oben) und verflüssigt den Rauch auf der Arbeitsfläche so lange bis Euch die Form zusagt. Dieser Arbeitsschritt kann mitunter etwas länger dauern. Auf der rechten Seite findet Ihr Einstellungsmöglichkeiten um die Werkzeugspitze anzupassen.

Effekt wiederholen

Erstellt nun weitere Ebenen und fügt zusätzliche Rauch-Effekte ein. Die Vorgehensweise ist dabei die selbe wie gerade beschrieben. Da der Hintergrund aller Ebenen schwarz ist seht Ihr immer nur die oberste Ebene. Um die Ebenen in einander überblenden zu lassen wählt Ihr daher den Blendeffekt "Negativ Multiplizieren". Dieser Effekt bewirkt, dass Schwarz unsichtbar wird; je weißer der Tonwert desto höher die Sichtbarkeit. Die Blendeffekte könnt Ihr oben in der Ebenenpalette einstellen.

Um die Effekte zu verfeinern könnt Ihr bestimmte Stellen noch manuell weichzeichnen.

Farbigkeit hinzufügen

Je nachdem welche Art von Rauch Ihr erstellen wollt sollte jetzt noch eine Farbe hinzukommen. Angenommen wir möchten Zigarettenrauch herstellen, so sollten die Grautöne ein wenig Blau eingefärbt werden um realistisch zu wirken.

Stellt zunächst sicher, dass alle Rauch-Ebenen auf eine Ebene zusammengefasst wurden (Alle Ebenen markieren, dann: Ebenen → Auf eine Ebene reduzieren). Anschließend markiert Ihr die verbliebene Ebene im Bedienfeld "Ebenen" und fügt über das entsprechende Symbol am unteren Ende eine neue Einstellungsebene "Farbton/Sättigung" hinzu. Es öffnet sich das Korrekturen Bedienfeld indem Ihr die entsprechenden Farbeinstellungen vornehmen könnt. Der Vorteil der Einstellungsebene liegt darin, dass Ihr die Farbkorrektur auch nachträglich noch anpassen könnt da keine Pixel zerstört wurden.

Zusätzliche Effekte

Das war eigentlich auch schon die Grund-Technik um Rauch zu erstellen. Wenn Ihr den Effekt nun auf ein Foto anwenden wollte so reduziert erneut alles auf eine Ebene und wendet den Blendmodus "Negativ Multiplizieren" an um die schwarzen Bildbereiche unsichtbar zu schalten.

Um den Rauch zur Perfektion zu bringen bietet es sich an mit dem Abwedler/Nachbelichter bestimmte Rauch-Bereiche zu beleuchten bzw. abzudunkeln. So könnt Ihr zusätzlich Plastizität in die Grafik einbringen.

Damit sich der Rauch nicht so stark vom Untergrund abhebt empfiehlt es sich eine Wolken Ebene einzusetzen. Erstellt hierfür eine neue Ebene und wählt den Renderfilter "Wolken". Anschließend bearbeitet Ihr die Wolken Ebene mit einer Maske und passt ggf. die Farbe hinsichtlich der Rauch-Farbe an.

Bildquelle Hintergrundstruktur: flickr.com/photos/benhosking/4538955291

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Photoshop-Screencast: CD/Blu-Ray-Disc Icon mit Ebenenstilen

Jonas Hellwig — Tue, 05 Oct 2010 20:15:44 +0000

In diesem Photoshop CS5-Screencast möchte ich Euch zeigen wie einfach es ist mit simplen Grundformen und ein paar Ebenenstilen ein realistisches CD/Blu-Ray Disc Icon zu erstellen. Der Schwerpunkt liegt in der Erstellung individueller Farbverläufe und Ebenenstile. Das Tutorial ist auch als Text-Tutorial verfügbar.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Photoshop-Tutorial: CD/Blu-Ray-Disc Icon mit Ebenenstilen

Jonas Hellwig — Tue, 05 Oct 2010 20:15:29 +0000

In diesem Photoshop CS5-Tutorial möchte ich Euch zeigen wie einfach es ist mit simplen Grundformen und ein paar Ebenenstilen ein realistisches CD/Blu-Ray Disc Icon zu erstellen. Der Schwerpunkt liegt in der Erstellung individueller Farbverläufe und Ebenenstile. Das Tutorial ist auch als Screencast verfügbar.

Endergebnis

Zunächst wollen wir uns einmal anschauen auf welches Ziel wir hinarbeiten.

Grundformen anlegen

Öffnet eine neue Datei (500 x 500px) und färbt zunächst den Hintergrund dunkelgrau ein. Anschließend legt die Grundformen für die CD an. Wählt hierzu das Auswahlellipe-Werkzeug [M] und wählt daraufhin in der Optionsleiste "Feste Größe". Nun gebt die folgenden Werte ein und erstellt auf je einer separaten Ebene eine entsprechende Auswahl. Es ist vorerst egal wenn die Ebenen nicht übereinander ausgerichtet sind, darum kümmern wir uns gleich.

Mit dem Füllwerkzeug [G] füllt Ihr die jeweilige Auswahl ein; achtet darauf die angebenden Farben einzuhalten. Das erleichtert Euch später die Arbeit enorm.

Body: 300 x 300 Pixel. Farbe: Grau (#8d8d8f)
Ebene 1: 300 x 300 Pixel. Farbe: Grau (#8d8d8f)
Ebene 2: 90 x 90 Pixel, Farbe Schwarz (#000000)
Ebene 3: 60 x 60 Pixel, Farbe Weiß (#ffffff)
Ebene 4: 25 x 25 Pixel, Farbe Rot (#ff0000)

Nachdem Ihr alle benötigten Grundebenen erstellt habt markiert Ihr im Ebenen-Bedienfeld alle Ebenen außer der Hintergrundebene und wählt danach "Auswahl > Alles auswählen". Jetzt klickt Ihr in der Optionsleiste auf die folgenden Buttons um alle Ebenen übereinander auszurichten. Anschließend könnt Ihr die Auswahl aufheben [Cmd/Strg] + [D].

Ihr habt nun die groben Grundelemente erstellt. Eine Kleinigkeit muss allerdings noch erledigt werden: Klickt zunächst auf die Ebenenminiatur von Ebene 4 (kleiner roter Kreis) um alle Pixel dieser Ebene zu markieren. Anschließend wählt Ihr die Ebene Body aus. Achtet darauf, dass die Auswahl nach wie vor besteht und löscht über [Backspace/Entf.] den Auswahl-Bereich.

Die folgende Abbildung zeigt nur die Ebene body, alle anderen Ebenen habe ich ausgeblendet.

Jetzt könnt Ihr Ebene 4 wieder löschen, wir brauchen sie nicht mehr.

Schnittmasken erstellen

Nun müssen einige Schnittmasken erstellt werden. Markiert Ebene 1 und wählt anschließend "Ebene > Schnittmaske erstellen". Alternativ könnt Ihr auch [Alt] drücken und auf die Kante zwischen den Ebenen klicken um die Schnittmaske zu erstellen. Ein veränderter Cursor zeigt Euch an wenn die Funktion bereit steht. Erstellt nun Schnittmasken von Ebene 1, Ebene 2 und Ebene 3.

Das schwierigste ist schon geschafft, nun arbeitet Ihr mit Ebenenstilen weiter.

Ebene 1: Verlaufsüberlagerung erstellen

Doppelklickt Ebene 1 im Ebenen-Bedienfeld um die Ebenenstile zu öffnen. Nun wählt Ihr den Bereich Verlaufüberlagerung. Stellt hier zunächst Winkel als Verlaufsart ein. Das Ergebnis sollte nun wie folgt aussehen.

Nun klickt Ihr innerhalb des Dialogs in den Farbverlauf um die erweiterten Verlaufseigenschaften zu öffnen. Hier habt Ihr die Möglichkeit den Verlauf nach Belieben anzupassen. Unter dem Farbverlauf werden Farbunterbrechungen angezeigt. Klickt eine Markierung an um die hier Farbe zu verändern oder die Position der Unterbrechung anzugeben. Erstellt nun einen Verlauf von Weiß zu Weiß.

Wenn Ihr zusätzliche Unterbrechungen einfügen wollte, so klickt unter den Verlauf. Es wird nun eine weitere Markierung eingefügt die Ihr entsprechend anpassen könnt. Erstellt drei weitere Unterbrechungen auf den Positionen 25%, 50% und 75% und passt die Farben entsprechend des Screenshots an.

Ihr werdet gleich mehrfach mit diesem Verlauf arbeiten. Klickt daher jetzt auf den Button "Neu" innerhalb des Dialogs um den Verlauf zu speichern. Er wird neben allen anderen Verläufen in der Vorauswahl angezeigt und kann mehrfach verwendet werden.

Anschließend könnt Ihr die Verlaufsbearbeitung schließen.

Das Ergebnis sollte jetzt in etwa so aussehen:

Der Verlauf ist bisher zu gerade. Ändert daher den Winkel innerhalb der Verlaufsüberlagerung auf 45°.

Ebene 1: Kontur mit Verlauf erstellen

Wechselt nun innerhalb der Ebenenstile in den Bereich Kontur und stellt eine Stärke von 3 Pixeln sowie einen Winkel von 135° ein. Wählt als Art "Winkel" und als Position "Innen" aus. Nun klickt Ihr in den Verlauf um die soeben kennengelernten Verlaufsbearbeitungs-Optionen zu öffnen. Hier klickt Ihr den abgespeicherten Verlauf an und bestätigt alle Dialoge mit "OK". Das Ergebnis sollte nun so aussehen.

Da Ihr den wichtigsten Verlauf bereits abgespeichert habt ist die kommende Arbeit im Handumdrehen erledigt.

Ebene 2 und 3: Verlaufsüberlagerung

Wählt Ebene 2 aus und begebt Euch erneut in die Verlaufsüberlagerung. Wählt als Art "Winkel", als Winkel "45°" sowie den bereits abgespeicherten Verlauf aus. Anschließend reduziert Ihr die Deckkraft der Verlaufsüberlagerung auf 93%.

Nun wählt Ihr den Bereich Kontur aus und richtet eine nach "Innen" gekehrte, 1 Pixel starke, schwarze Kontur ein. Reduziert die Deckkraft auf ca 20%.

Euer Ergebnis sollte jetzt so aussehen:

Erstellt nun auf gleiche Art und Weise eine Verlaufsüberlagerung der Ebene 3. Die Verlaufsüberlagerung muss hier nicht ganz so stark sein. Eine Deckkraft von 45% ist ausreichend. Anschließend wirkt die weiße Fläche in der Mitte nicht mehr ganz so eintönig.

Regenbogen-Effekt hinzufügen

Die CD selbst ist nun fertig. Es fehlt aber noch die Prisma-Lichtbrechung. Klickt zunächst bei gedrückter [Cmd/Strg]-Taste auf die Ebenenminiatur von Ebene 1 um alle Pixel auszuwählen. Nun erstellt Ihr oberhalb von Ebene 1 eine neue Ebene (Rainbow) und füllt hier die Auswahl rot ein. Eventuell ist die Schnittmaske aller darüber liegenden Ebenen verloren gegangen. Achtet darauf, dass die Schnittmaske noch aktiv ist und hebt die Auswahl anschließend wieder auf.

Nun reduziert Ihr innerhalb des Ebenen-Bedienfeldes die Fläche auf 0%. Die Ebene ist nun unsichtbar, Ebenenstile können jedoch nach wie vor angewandt werden. Öffnet anschließend die bereits bekannte Verlaufsüberlagerung.

Als Art stellt Ihr "Winkel" ein und öffnet die Verlaufs-Bearbeitungs-Optionen. Hier wählt Ihr den Regenbogen-Verlauf aus den Photoshop standardmäßig installiert hat und verschiebt die Verlaufsunterbrechungen entsprechend des Screenshots.

Bestätigt nun die Ebenestile und reduziert die Deckkraft der Ebene auf ca.15%.

Um den Effekt auf der anderen Seite der CD ebenfalls erscheinen zu lassen könnt Ihr entweder neue Verlaufsunterbrechungen dem bestenenden Verlauf hinzufügen oder alternativ die Rainbow-Ebene kopieren und in der Verlaufsüberlagerung den Winkel umkehren. Letztere Variante ist schneller aber "unsauberer". :)

Schatten hinzufügen

Um den Eindruck zu erwecken die CD würde schweben erstellt Ihr zunächst eine neue Ebene oberhalb der Hintergrundebene. Nun wählt Ihr Schwarz als Vordergrundfarbe und das Verlaufswerkzeug [G]. In der Optionsleiste stellt Ihr sicher, dass der Verlauf radial ist und von Vordergrundfarbe zu Transparent verläuft. Anschließend zieht Ihr einen kleinen Verlauf auf.

Über "Bearbeiten > Transformieren > Skalieren" [Cmd/Strg + T] könnt Ihr den Verlauf nun in die richtige Form bringen. Reduziert auch die Deckkraft damit der Schatten nicht zu stark wird.

Einstellungsebenen verwenden

Wenn Ihr nun aus der CD eine Blu-Ray- oder eine beliebige andere Disc erstellen wollt, so geht das seit Photoshop CS5 mit einer simplen Einstellungsebene. Klickt hierzu zunächst auf das entsprechende Icon innerhalb der Ebenenpalette und wählt "Farbton/Sättigung" aus. Es wird eine neue Einstellungsebene eingefügt die Ihr nun über das "Korrekturen"-Bedienfeld anpassen könnt.

In den Korrekturen setzt Ihr den Haken bei "Färben" und passt die restlichen Einstellungen nach Belieben an. Anschließend könnt Ihr die Einstellungsbene wie eine normale Ebene an die gewünschte Position innerhlab der Ebenenpalette verschieben. Die Einstellungsebene wirkt sich immer auf alle Ebenen unter Ihr aus.

Der Vorteil der Einstellungsebene liegt darin, dass Ihr den Farbton auch nachträglich noch anpassen könnt.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Screencast: Photoshops Formgitter im täglichen Workflow

Jonas Hellwig — Fri, 01 Oct 2010 16:02:44 +0000

In Photoshop CS5 hat Adobe eine Funktion integriert die bisher nur aus After Effects bekannt war: Puppet Warp zu Deutsch Formgitter. Die Übersetzung lässt sicher Raum für Diskussionen - die Funktion hingegen überzeugt mich auf ganzer Linie. Aus eben diesem Grund habe ich auf der Photokina gezeigt wie das Transformations-Tool arbeitet und wie man es vor allem sinnvoll in den täglichen Workflow einbinden kann. Dieser Aspekt bliebt nämlich für meinen Geschmack bei Adobes Präsentationen bisher immer ein wenig auf der Strecke.

Selbstverständlich möchte ich auch Euch dieses Feature nicht vorenthalten.

Screencast

Die in diesem Screencast gezeigten Bilder stammen von Flickr: Portrait Lady (Autor: lord-helmet). Snowboarder (Autor: cristiano esclapon)

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Photoshop-Screencast: Elemente verlustfrei beleuchten

Jonas Hellwig — Fri, 17 Sep 2010 20:35:45 +0000

In diesem Screencast möchte ich Euch zeigen wie ich in Photoshop Objekte beleuchte, bzw. einfärbe ohne die Pixel des Haupobjektes zu zerstören. Diese Vorgehensweise setze ich in der Regel bei allen in sich abgeschlossenen Körpern ein und kann das Element so problemlos für spätere Projekte weiterverwenden. Über die Jahre sammelt sich so eine recht üppige Datenbank an Objekten an - je eher Ihr also damit anfangt desto leichter habt Ihr es in der Zukunft. Der Screencast ist mit Photoshop CS5 Extended erstellt, lässt sich aber problemlos auf ältere Photoshopversionen übertragen.

Screencast

Fazit

Wie erwähnt versuche ich alle Objekte auf diese Weise zu erstellen um sie später weiterverwenden zu können. Wie arbeitet Ihr? Hat der Tipp was gebracht?

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

WordPress: Admin-Passwort im Localhost wiederherstellen

Jonas Hellwig — Thu, 05 Aug 2010 19:00:23 +0000

WordPress während der Entwicklung neuer Themes in einer lokalen Testumgebung (localhost) zu installieren hat in erster Linie Vorteile. Zum einen müsst Ihr eine halbfertige Version nicht online hinterlegen und ggf. mit einem Passwort vor zufälligen Besuchern sperren. Darüber hinaus müssen Daten auch gar nicht erst hochgeladen werden – was die Entwicklung neuer Themes natürlich deutlich beschleunigt. Allerdings stößt auch eine lokale Serverinstallation mitunter an ihr Grenzen. Zum Beispiel wenn Ihr – wie ich … - das Passwort Eures Admin-Accounts vergessen habt. E-Mail-Benachrichtungen funktionieren auf dem Localhost nämlich unter Umständen nicht, ergo kann man sich das vergessene Passwort auch nicht zuschicken lassen. Und jetzt?

Vorgeschichte

Nicht, dass hier der Eindruck entsteht ich würde andauernd meine Passwörter vergessen. In meinem Keepass befinden sich knapp 380 verschiedene Passwörter, Zugangsdaten und Benutzeraccounts, alles penibel sortiert und aktuell. Bis auf das Admin-Passwort meiner lokalen Testumgebung - dieses Passwort war (bisher) nur im Schlüsselbund des Firefox gespeichert.
Ich habe mich jedoch vor kurzem entschlossen komplett auf Chrome umzusteigen weil mir der Firefox einfach zu träge geworden ist. Und genau hier liegt der Ursprung des Problems: Ich habe alle Passwörter die Firefox kannte gelöscht.

Das Problem

Wenn Ihr das Passwort von einem Online gehosteten Blog vergessen habt, so könnt Ihr im Anmeldefenster von WordPress auf Passwort vergessen klicken. Anschließend gebt Ihr E-Mail-Adresse oder Benutzernamen ein und könnt anschließend das Passwort wiederherstellen.

Je nachdem wie die lokale Testumgebung eingerichtet ist wurde das E-Mail System nicht konfiguriert. Das ist bei mir der Normalfall. In einem solchen Fall kann WordPress keine E-Mail verschicken.

phpMyAdmin

Öffnet zunächst phpMyAdmin und wählt die Datenbank Eurer WordPress-Installation aus. Ihr erreicht phpMyAdmin im Normalfall über:

http://localhost/phpmyadmin (XAMPP-Installation)
http://kulturbanause.de/MAMP (MAMP-Installation)

Je nach Konfiguration kann der Pfad allerdings abweichen. Das nachfolgende Bild zeigt die Datenbank wordpress.

Info: In der hier dargestellten Testinstallation befinden sich zusätzliche Tabellen für BuddyPress und Plugins die in der Standardinstalltion von WordPress nicht vorhanden sind.

wp_users-Tabelle öffnen

Nun müsst Ihr die Benutzertabelle von WordPress identifizieren und öffnen. Während der Installation konntet Ihr wählen welches Tabellenpräfix Ihr für die WordPress-Tabellen vergeben wollt. Wenn Ihr hier nichts geändert habt, so wird wp_ vergeben. Die Benutzertabelle heißt in diesem Fall wp_users.
Öffnet die Tabelle und sicht den passenden Benutzer, z.B. Admin, heraus. Das Passwort ist verschlüsselt und kann nicht verwendet werden. Klickt anschließend auf den Stift um den Benutzer zu editieren.

Passwort editieren

Nun müssen lediglich zwei Einträge angepasst werden um das Passwort wiederherzustellen. In der Zeile mit dem Feld users_pass stellt Ihr unter Funktion MD5 (Message-Digest Algorithm 5) ein und vergebt anschließend als Wert ein beliebiges Passwort. Zuletzt speichert Ihr die Angaben.

Das Passwort wurde in diesem Beispiel auf kulturbanause geändert. Ihr könnt Euch nun wie gewohnt einloggen.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Photoshop-Tutorial: Fotorealistischer Apfel

Jonas Hellwig — Mon, 26 Jul 2010 18:29:59 +0000

In diesem Photoshop-Tutorial möchte ich Euch zeigen wie Ihr einen realistischen Apfel in Photoshop erstellt. Wir beginnen mit einer simplen Grundform, fügen Struktur, Licht und Schatten hinzu und passen im letzten Schritt einige Details an.

Ausgangsform

Als Ausgangsposition habe ich eine weiße Arbeitsfläche von 500x400 Pixeln im RGB-Farbmodus eingerichtet. Wir beginnen mit der Grundform für unseren Apfel. Wählt das Pfadwerkzeug [P] und zeichnet eine grobe Apfel-Form. Achtet darauf, dass in der Optionsleiste Pfade und Zeichenstift ausgewählt ist. Solltet Ihr Schwierigkeiten haben die Grundform Freihand zu zeichnen, so sucht Euch einfach ein passendes Foto und zeichnet den Apfel auf einer neuen Ebene nach.

Wählt nun ein mittleres Grün (z.B. #458516) als Vordergrundfarbe. Anschließend erstellt Ihr eine neue Ebene Cmd/Strg+Shift+N, macht hier einen Rechtsklick/Cmd+ Klick innerhalb Eures Pfades und wählt Pfadfläche füllen. Im folgenden Dialog stellt Ihr sicher, dass Vordergrundfarbe als Füllwert eingestellt ist und bestätigt die Einstellungen. Die Pfadform wird nun Grün eingefärbt.

Struktur erstellen und anpassen

Erstellt zunächst eine neue Ebene an oberster Position und füllt diese mit der Vordergrundfarbe ein Alt + Backspace. Wählt nun als Hintergrundfarbe ein helleres Grün (z.B. #7dbf4d) und wählt Filter > Renderfilter > Fasern. Stellt im nun erscheinenden Dialog eine Varianz von 20 und eine Stärke von 15 ein und bestätigt den Dialog.

Damit sich die Struktur nur auf die darunterliegende Apfel-Form auswirkt erstellt Ihr nun über Ebene > Schnittmaske erstellen eine Schnittmaske. Anschließend wählt Ihr Bearbeiten > Transformieren > ~~Verzerren~~Verkrümmen. Es wird ein Gitter über der Ebene eingeblendet was es Euch ermöglicht die Struktur der Apfel-Form anzupassen. Verzerrt nun die Fasern so, dass die Struktur sich der Form des Apfels anpasst und bestätigt die Bearbeitung.

Licht und Schatten

Erstellt zunächst eine zusätzliche Ebene an oberster Position. Jetzt wählt Ihr Bearbeiten > Fläche füllen . Im nun erscheinenden Dialog wählt Ihr bei Verwenden: 50% Grau und als Füllmethode Weiches Licht.

Bestätigt nun den Dialog - Ihr werdet feststellen, dass Ebene zwar erstellt wurde, jedoch unsichtbar ist. Das liegt an der gewählten Füllmethode: Weiches Licht lässt 50% Grau verschwinden. Alles was heller bzw. dunkler ist wird wieder sichtbar und wirkt sich unmittelbar auf darunterliegende Ebenen aus. Erstellt nun auch von der grauen Ebene eine Schnittmaske.

Evtl. wird die Füllmethode nicht übernommen! Sollte das der Fall sein, so stellt im oberen Bereich des Ebenen-Bedienfeldes die Füllmethode nachträglich ein.

Ihr habt nun alle nötigen Voreinstellungen getroffen um Schattierungen und Lichter hinzuzufügen. All dies passiert jetzt ausschließlich auf der neuen Grauebene. Der Vorteil liegt darin, dass Ihr verlustfrei arbeitet und Fehler nachträglich sehr leicht korrigieren könnt. Darüber hinaus könnt Ihr die Grundform des Apfels mehrmals verwenden da Ihr die Lichtsituation separat angelegt habt.
Wählt nun das Nachbelichter-Werkzeug [O] und zeichnet auf der Grauebene die Schatten ein. Hierzu wählt Ihr eine große, weiche Pinselspitze (150px) und eine geringe Belichtung (bis zu 15%).

Auf die gleiche Art zeichnet Ihr nun die Lichter ein. Hierzu wählt Ihr das Gegenstück zum Nachbelichter - das Abwedler-Werkzeug [O]. Sollte Euch die Belichtung zu schwach sein, so wechselt die Füllmethode von Weiches Licht zu Hartes Licht.

Tipp: Wenn Ihr während der Benutzung von Abwedler oder Nachbelichter die Alt-Taste drückt, so wechselt Ihr in das jeweilig andere Werkzeug. Alle Einstellungen werden 1:1 übernommen.

Struktur anpassen

Reduziert nun die Deckkraft Eurer Fasern-Struktur soweit, dass die Fasern noch leicht zu erkennen sind. Eventuell müsst Ihr auch einige Stellen nun nachträglich Transformieren um die Struktur an die Oberfläche anzugleichen. In diesem Beispiel habe ich oben am Apfel, dort wo der Stil nachher eingesetzt wird, noch ein paar Korrekturen vorgenommen.

Stil hinzufügen

Erstellt eine neue Ebene und malt mit einer kleinen, harten Pinselspitze [B] einen Stil. Achtet darauf, dass der Stil nicht zu gerade oder perfekt wird, dann wirkt das Ergebnis nichtmehr realistisch. Die obere Kante des Stils sollte heller sein - hier fällt das Licht auf.

Schlagschatten

Unter dem Apfel muss noch ein Schlagschatten hinzugefügt werden. Erstellt unterhalb der Grundform des Apfels eine zusätzliche Ebene und wählt das Verlaufswerkzeug [G]. Nun stellt Ihr in der Optionsleiste einen radialen Verlauf von Schwarz zu transparent ein. Erstellt einen Verlauf und transformiert Cms/Strg + T diesen anschließend so, dass er flach auf den gedachten Untergrund fällt.

Damit der Apfel nicht wirkt als würde er schweben muss die unterste Kante des Apfels, da wo sich Objekt und Schatten berühren, fast schwarz sein.

Struktur einfärben

Um die Struktur einzufärben muss zunächst die Schnittmaske der Grauebene aufgehoben werden. Aktiviert dazu die Grauebene und wählt anschließend Ebene > Schnittmaske zurückwandeln. Anschließend markiert Ihr die Grundform des Apfels und die Ebene mit der Fasern-Struktur und fasst beide Ebenen zu einer Ebene zusammen Ebene > Auf eine Ebene reduzieren. Anschließend erstellt Ihr eine Kopie der soeben zusammengefassten Ebene Cmd/Strg + J.

Öffnet nun das Korrekturen-Bedienfeld (Fenster > Korrekturen) und wählt hier die Korrektureigenschaft Farbton/Sättigung. Passt nun das Grün des Apfel so an, dass es Rot wird.

In der Ebenenpalette ist nun eine Einstellungsebene mit der soeben gewählten Korrektureigenschaft erstellt worden. Diese Ebene verfügt automatisch über eine Maske. Aktiviert zunächst die Maske indem Ihr sie anklickt. Wählt nun Weiß als Vordergrundfarbe und arbeitet den rechten Teil des Apfels so heraus, dass das Grün sichtbar wird. Hierbei solltet Ihr eine mittelgroße, sehr weiche Pinselspitze und eine sehr geringe Deckkraft wählen.

Fasst nun die Einstellungsebene, sowie beide Strukturebenen zu einer Ebene zusammen (Alle markieren: Cmd/Strg + E). Anschließend könnt Ihr die Grauebene wieder zu einer Schnittmaske umwandeln.

Details

Um das Endergebnis zu verbessern könnt ihr noch Wassertropfen auf den Apfel zeichnen. Das geht kinderleicht. Erstellt zunächst eine neue Ebene an oberster Position. Nun wählt Ihr das Lasso-Werkzeug [L] und erstellt tropfenförmige Auswahlen auf den Apfel. Um mehrere Auswahlen erstellen zu können drückt Ihr die Shift-Taste.

Füllt die Auswahl nun in einer beliebigen Farbe ein (Bearbeiten > Fläche füllen) und hebt die sie anschließend auf Cmd/Strg + D. Nun reduziert Ihr die Fläche der Ebene auf 0%. Alle Wassertropfen sind nun unsichtbar.

Öffnet über einen Doppelklick auf die Ebene die Ebenenstile. Die Ebenenstile wirken sich auch auf Ebenen mit einer Fläche von 0% aus.
Übernehmt nun im Bereich Schlagschatten die Werte aus der folgenden Grafik.

Anschließend wechselt Ihr in den Bereich Abgeflachte Kante und Relief und übernehmt hier ebenfalls die Werte aus der Grafik. Achtet darauf, dass die Füllmethode für den Tiefenmodus auf Normal geändert wurde.

Fertig!

Das war's auch schon. Euer komplett selbst erstellter Apfel ist nun fertig! Evtl. müssen nun noch kleinere Details an der Belichtung oder dem Schatten unter dem Apfel vorgenommen werden. Auch die Farbe des Apfels sowie die Beleuchtung lässt sich nachträglich natürlich problemlos anpassen.
Hat Euch das Tutorial gefallen? Wurde ein Detail zu ungenau erklärt oder kennt Ihr eine alternative Lösung für bestimmte Arbeitsschritte? Ich freue mich auf Eure Kommentare.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Screencast: Eigene Bedienfelder in Photoshop CS5

Jonas Hellwig — Fri, 04 Jun 2010 04:00:16 +0000

In diesem Screencast möchte ich Euch zeigen wie einfach es ist individuelle Bedienfelder in Photoshop CS5 zu erstellen. Als Beispiel integriere ich Facebook und Twitter um auch während der Arbeit stehts up to date zu bleiben.
Um das Beispiel selbst umsetzen zu können benötigt Ihr den Configurator 2.0 sowie die aktuelle Version von Adobe AIR und Photoshop CS5. Solltet Ihr ältere Versionen von Photoshop verwenden so müsst Ihr leider auf den Configurator 1.0 ausweichen.

Wie steht es bei Euch mit dem Configurator? Nutzt Ihr bereits Version 1 oder 2 oder haltet Ihr das Tool für überflüssig? Wenn Ihr Euch in die Materie einlesen wollt so empfehle ich Euch die offizielle Anleitung von Adobe (englisch). Viel Spass!

Adobe Configurator Users Guide (PDF)

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.