16. Oktober 2010

Photoshop-Tutorial: Contentbox für Webseiten

Filed under: Tutorials von Michael um 16:18
 

Diesmal möchte ich Euch kurz und bündig zeigen wie man für z.B. eine Webseite ein stylishes kleines Textfenster für beliebigen Content gestaltet. Designelemente sind zwar nicht unbedingt das wichtigste bei einer Webseite, aber auch nicht zu vernachlässigen wenn man seinen Besucher durch eine hübsche / interessante Optik ansprechen möchte. Zur Umsetzung sollten (wie bei praktisch allen meinen Tutorials) ein paar Grundkenntnisse im Arbeiten mit Ebenen oder den allgemeinen Photoshop-Werkzeugen vorhanden sein.

Erstellt habe ich das Tutorial mit Photoshop CS2 – aber das sollte auch mit neueren sowie etwas älteren Versionen ebenfalls problemlos umsetzbar sein.

photoshop tutorial - content box - bild 1

photoshop tutorial - content box - bild 1

Schritt 1:

Wir erstellen ein Neues Projekt in Photoshop in einer beliebigen Grösse und mit schwarzem Hintergrund. Ich selbst habe dazu frei nach Laune 600×600 Pixel Grösse genommen. Das hängt natürlich ganz davon ab in welchen Dimensionen Ihr am Ende die Box brauchen könnt.

Als erstes erstelle ich mir mit dem Rechteck-Werkzeug auf einer neuen Ebene einen Kasten in der Grösse der späteren Textbox. Damit diese abgerundete Ecken bekommt wähle ich oben in der Photoshop-Leiste das Symbol für ein Rechteck mit abgerundeten Ecken an. den Radius dafür setze ich in derselben Leiste auf 10Px. Als Farbe wähle ich einen Mittleren Grauton.

Unter Ebene –> Ebenenstil –> Schein nach innen nehmen wir die aus dem folgenen Screenshot ersichtlichen Einstellungen Vor.

photoshop tutorial - content box - bild 2

photoshop tutorial - content box - bild 2

Das Ergebnis sieht so aus:

photoshop tutorial - content box - bild 3

photoshop tutorial - content box - bild 3

Schritt 2:

Diese Ebene duplizieren wir, und unter Bearbeiten –> Frei transformieren verkleinern wir die obere der beiden Ebenen bei gedrückter Umschalt-Taste, damit die Proportionen erhalten bleiben. Das neu entstandene innere Fenster zentrieren wir, und geben ihm eine neue Farbe unter Ebene –> Ebenenstil –> Farbüberlagerung (ich habe einen dunklen Grauton gewählt.)

Auch hier wenden wir wieder den Schein nach innen an wie eben schon bei dem äusseren Kasten. Diesmal mit den folgenden Einstellungen:

photoshop tutorial - content box - bild 4

photoshop tutorial - content box - bild 4

Und unser bisheriges Ergebnis sieht aus wie folgt:

photoshop tutorial - content box - bild 5

photoshop tutorial - content box - bild 5

Schritt 3:

Wir erstellen eine neue Ebene, und benutzen erneut das Rechteck-Werkzeug mit abgerundeten Ecken um in der Farbe Weiss eine kleine Box am oberen Ende für die Überschrift zu erstellen. Da die Box nach unten hin nicht abgerundet sein soll, schneiden wir einen Teil der Box nach unten hin ab. Dazu benutzen wir einfach das Auswahlwerkzeug, und ziehen auf der Ebene der Überschriften-Box einen viereckigen Rahmen über den zu löschenden Bereich u. drücken die „Entf“ Taste.

Da das ganze noch etwas langweilig ausschaut, spendieren wir unter Ebene –> Ebenenstil der Box sowohl eine Verlaufsüberlagerung als auch einen Schein nach innen wie schon bei den Anderen Boxen. Auch ein Schlagschatten nach unten darf nicht fehlen. Für all dies habe ich die folgenden Einstellungen verwendet.

photoshop tutorial - content box - bild 6

photoshop tutorial - content box - bild 6

photoshop tutorial - content box - bild 7

photoshop tutorial - content box - bild 7

photoshop tutorial - content box - bild 8

photoshop tutorial - content box - bild 8

photoshop tutorial - content box - bild 9

photoshop tutorial - content box - bild 9

Schritt 4:

Im grunde genommen ist unsere Content-Box jetzt schon fertig. Da diese allerdings irgendwie noch etwas langweilig aussieht, verbiege ich die oberen beiden Boxen (die untere grosse äussere Box bleibt unberührt.)

Dazu benutze ich einfach Bearbeiten –> Transformieren –> Verkrümmen und verbiege beide Boxen so, dass das ganze so aussieht:

photoshop tutorial - content box - bild 10

photoshop tutorial - content box - bild 10

Nun noch ein wenig Test-Text darauf setzen, und fertig ist die Laube 🙂

photoshop tutorial - content box - bild 1

photoshop tutorial - content box - bild 1

Ich hoffe ihr könnt etwas damit anfangen. Bis zum nächsten Mal…

Michael K.


Keine Kommentare »


No comments yet.


Leave a comment




Ähnliche Beiträge zum Thema: "Photoshop-Tutorial: Contentbox für Webseiten"


Weitere Beiträge zum Thema: