HTH-C.com - Forum
Latest News Latest Threads
Neuerung: Persönliche Galerie
Informationen zur Übernahme der Erweite..
HTH Blog - Version 2.0
#HTH.Systems - Betatester gesucht
Neueröffnung - PHPKit-Award.de
HTH Webchat v3
Letzter Beitrag Happy Birthday Bottyline Weiblicher Benutzer Heute, 0:00 Zeit der letzten Antwort
Letzter Beitrag Gibt es eigentlich noch jemand der PHPki.. Dooki Männlicher Benutzer 16.07.2024 - 20:47 Zeit der letzten Antwort
Letzter Beitrag PHPKit 1.6.6 WEBI Männlicher Benutzer 24.06.2024 - 13:58 Zeit der letzten Antwort
Letzter Beitrag Herzlich Willkommen Botty Männlicher Benutzer 07.06.2024 - 02:42 Zeit der letzten Antwort
Letzter Beitrag PHPKit 1.6.6 ohne ASCE auf PHP8x Myrddin Männlicher Benutzer 22.03.2023 - 13:36 Zeit der letzten Antwort
 54.227 Posts & 4.945 Themen in 78 Foren
Forenübersicht » Computer & Technik » Webdesign » Photoshop > Userbar

Photoshop > Userbar
1 Beitrag in diesem Thema
 Seiten (1):    1  
10.11.2009 - 21:56 Uhr
Beitrag: #1
Hier wird gezeigt wie man schnell und einfach eine Userbar erstellen kann.

Schritt 1 - 1. Hintergrund


Hintergrund
Zunächst einmal erstellt ihr ein neues Bild (Strg-N) mit folgenden Maßen:

Breite 350; Höhe 19; Auflösung 72; Farbmodus RGB 8Bit; Hintergrundinhalt Transparent

Anschließend wählt ihr das Verlaufswerkzeug (G) - Tool aus und stellt folgende Optionen ein:

Modus: Normal; Deckkraft: 100%; Dither und Trasparent einen Haken setzten. die Farbgebung überlasse ich euch.




Schritt 2 - 2. Scanlines


So sollte das mit scanlines aussehen.
Nun zu den Scanlines: Mit Strg+N öffnet ihr ein neues Bild mit den Maßen 3 x 3 Pixel auf transparentem Hintergrund. Anschließend zoomt ihr auf 1600%, drückt D und zeichnet mit dem Buntstift (B) - Tool eine diagonale Line, das sollten nur Drei Punkte insgesmmt später sein. rechts oben, in der Mitte und einer links unten.

Dann geht ihr im Menü auf “Bearbeiten” - “Muster festlegen” und gebt dem Ganzen einen Namen eurer Wahl. Nachdem ihr dann wieder zu eurer Userbar gewechselt seid, drückt ihr zuerst Strg+A (alles markieren), dann Shift+F5 und klickt “OK”.




Schritt 3 - 3. Objekt


Hier mein Resultat
Jetzt sucht ihr euch nur noch ein passendes Objekt für eure Userbar aus. Da ich eine Adobe Photoshop CS2 Userbar mache, habe ich dieses ausgewählt: Adobe Photoshop Schriftzeichen inkl Logo!

Ihr öffnet euer Objekt, markiert alles (Strg+A), kopiert es anschließend mit Strg+C und wechselt dann zu eurer Userbar. Hier erstellt ihr eine neue Ebene mit dem Tastenkürzel Strg+Shift+N und fügt das Objekt mit Strg+V wieder ein. Jetzt muss es nur noch ausgerichtet werden. Ich bevorzuge dabei die linke Seite der Userbar.




Schritt 4 - 4. Text


Userbar inkl Text
Nun ist es an der Zeit ein wenig Text auf eure Userbar zu bringen. Bei Userbars benutzt man fast immer das Font “Visitor TT2 (BRK)” mit der Schriftgröße 13 und AntiAliasing “ohne”. Solltet ihr das Font nicht haben, könnt ihr es auf http://www.dafont.com herunterladen.

Wie wäre es mit “Adobe Photoshop CS2 User”? Ihr braucht den Text dann nur noch auszurichten und einen 1px Stroke (Kontur) einzufügen.




Schritt 5 - 5. Shine-Effekt

Jetzt fehlt nur noch ein netter Shine-Effekt, der die Userbar ein wenig 3D aussehen lässt. Ihr wählt das Auswahlellipsewerkzeug (W) - Tool aus und zieht einen Bogen, der hinterher so Aussehen sollte:

Nun erstellt ihr mit Strg+Shift+N eine neue Ebene und füllt die Markierung mit dem
Füllwerkzeug (G) - Tool mit weißer Farbe. Danach stellt ihr den Deckkraft Wert auf ca. 20%.




Schritt 6 - 6. Rahmen

Wir nähern uns dem Finish. Es fehlt nur noch ein Rahmen, der unsere Userbar ziert.
Ganz einfach eine neue Ebene erstellen (und an erster Stelle platzieren). Anschließend mit dem - Tool mit einer Farbe füllen und auf 0% Fläche gehen. Dann klickt ihr mit der rechten Maustaste auf diese Ebene und gibt folgendes bei den “Fülloptionen...” ein:

Kontur ->
Stärke: 1
Position: Innen
Füllmethode: Normal
Deckkraft: 100%
Füllart: Farbe
Farbe: #000000 (Schwarz)

Nun "OK" drücken und das war es auch schon.

 
Zum Anfang der Seite
 Seiten (1):    1  

Ähnliche Themen
 
Plauderecke Plauderecke » Photoshop Tutorials - Letzte Antwort von WEBI am 20.09.06, 22:14 Photoshop Tutorials  (20.09.06, 22:14)
Videos Videos » Photoshop Profi - Letzte Antwort von Gash am 28.05.07, 18:03 Photoshop Profi  (28.05.07, 18:03)
Webdesign Webdesign » Photoshop > Shine / Scheineffekt - Letzte Antwort von Jardin am 11.11.09, 23:33 Photoshop > Shine / Scheineffekt  (11.11.09, 23:33)
Webdesign Webdesign » Photoshop -> Augen färben - Letzte Antwort von Fidus am 16.06.10, 20:05 Photoshop -> Augen färben  (16.06.10, 20:05)
Webdesign Webdesign » Photoshop -> Smooth Skin / Sanfte Haut - Letzte Antwort von Fidus am 17.02.10, 17:08 Photoshop -> Smooth Skin / Sanfte Haut  (17.02.10, 17:08)

HTH-C.com - Webmedien & Community