7x bewertet

Web 2.0 Titelleiste

von Darkness  |  27.02.2010 um 14:33 h
Tutorial bearbeiten Tutorial löschen
Grafik Effekte
Typ: Grafik Effekte
Programm: Photoshop
Stufe:Einfach Mittelmäßig
INFORMATION: Da Giatu Probleme hat mit Anführungszeichen werden immer Backslashes davor angezeigt. Dies liegt nicht an mir! :) Ausserdem ist die Qualität der Bilder leider etwas schlechter, da Giatu die Größe der Bilder automatisch der Größe des Contents anpasst.

Als erstes öffnet euer Photoshop und erstellt ein neues Dokument. Edentweder ihr geht dafür direkt oben auf Datei -> Neu ... oder drückt STRG + N. Beides möglich, ich bevorzuge den Shortcut STRG + N. Ich nehme die Größe 595px x 80px.
Bild

Nun nehmt das Abgerundetes-Rechteck-Werkzeug
Bild
und erstellt eine neue Ebene. Nun wählt euch eine Farbe aus und zieht eine Linie. Es sollte nun ca. wie folgt aussehen:
Bild

Jetzt macht einen Rechtsklick auf eure Ebene und wählt die Option \"Fülloptionen ...\". Geht zur Option \"Verlaufsüberlagerung\" und stellt eure Optionen dementsprechend mit eurer Farbe ein. Bei mir sieht es so aus:
Bild

Als nächstes müsst ihr eure Ebene duplizieren, dies tut ihr indem ihr einen Rechtsklick auf eure Ebene der Linie macht und die Option \"Ebene duplizieren ...\" wählt.Bild

Schiebt eure duplizierte Ebene nun hinter die Originalebene:
Bild

Gut, klickt nun mit der rechten Maustaste erneut aber diesmal direkt auf euer Dokument, sodass das Auswahlmenü erscheint. Wählt die Option \"Frei transformieren ...\".
Bild
Nun verschiebt die duplizierte Ebene um ca. 5px nach unten. Dies sollte nun ca. so aussehen:
Bild

Bald sind wir fertig. Nehme nun wie im Tutorial \"How to make an Orbit?\" das Abgerundete Auswahlwerkzeug
Bild
und ziehe es über die Linie. Da ich nicht genau weiß wie ich es euch erklären soll hier erneut ein Screenshot:
Bild
Auf dem Screenshot könnt ihr auch schon gleich den nächsten Schritt sehen. Nehmt den weichen 300px Standartkreisbrush und umkreist die Auswahl, sodass ein sanfter Innenschein entsteht.

Zuletzt machen wir die Leuchtpunkte im Hintergrund vom Innenschein. Erstellt eine neue Ebene und nehmt zuerst erneut den 300px Standartkreisbrush (weich) und brusht in die Mitte der Linie:
Bild
Wiederholt diesen Schritt erneut mit einem 100px weichen Standartkreisbrush aus Photoshop und brusht diesmal nur an den Seiten der Linie. Fertig! Mein Endergebnis:
Bild

Bei Fragen, Problemen bei der Umsetzung oder sonstiger Kritik schreibt einfach ein Kommentar!



10 Kommentare




SmaX

sieht ganz ok aus.. Aber warum Web 2.0 Titelleiste..?! Das sieht eher aus wie ein Button..
am 27.02.2010 um 19:39 Uhr


Web 2.0 Titelleiste, naja. Das soll eine Linie darstellen, wo mein seinen Homepagenamen hineinschreiben kann , dadrunter einen Header usw. Verstehen? Smilie xD
am 27.02.2010 um 22:23 Uhr


SmaX

Asoo.. jetzt nja.. egal xD
am 27.02.2010 um 23:57 Uhr


@smax:
hä? omg jetzt bin ich verwirrt. xD
am 01.03.2010 um 19:32 Uhr


SmaX

xDD ja ich check meinen eigenen satz auch net xD
is ja auch egal.. des tut is auf jedenfall (für die dies brauchen) echt cool xDD
am 01.03.2010 um 21:51 Uhr


werock2040

Tolles Tut,genau das was ich gesucht hab :) Smilie
am 02.03.2010 um 09:01 Uhr


Haha egal trotzdem danke @Smax! <3

@WEROCK2040:
Freut mich. *-*
am 02.03.2010 um 19:34 Uhr


Porzelaine

hört sich super an...wenn ich jetzt auch noch die bilder dazu sehen könnte wärs super Smilie
gefaved XD
am 02.03.2010 um 21:15 Uhr


@Porzelaine siehst du nun die Bilder? :′o weil eigentlich müsste man die sehen .. ansonsten schick ich sie dir per PN! :) sag einfach bescheid.
am 04.03.2010 um 22:09 Uhr


Miss_Jennii

Bilder funktionieren nicht ...
am 02.01.2011 um 21:26 Uhr