Interface 1
Dieses Tutorial zeigt wie man mit Photoshop-Stilen und -Formen, ein Interface für z.B. eine Website erstellt.
Bild 2 zeigt euch das Endergebnis!
1. Zuerst erstellt ihr ein neues Dokument ("Datei->Neu...") mit den Einstellungen:
Breite/Höhe -> 600/250 Pixel
Auflösung -> 72 Pixel/Zoll
RGB-Farbe - 8 Bit
Hintergrund -> Weiß
2. Als nächstes benötigt ihr zwei Formen (Bild 3/4). Wie man diese erzeugt, soll an dieser Stelle nicht erwähnt werden. Dazu gibt es diverse Tutorials im Internet.
Für die faulen unter euch, gibt es die kompliziertere Form (Bild 3) hier zum Download.
Wenn ihr die beiden Formen erstellt habt, legt ihr sie so wie in Bild 5 zu sehen ist übereinander.
3. So, jetzt kommen die Ebenen-Stile zum Einsatz! Klickt mit der rechten Maustaste auf die Ebene mit der Form aus Bild 3 und wählt "Fülloptionen ...".
Die Bilder 7-15 zeigen euch die Einstellungen. Die Farbwerte des Verlaufs aus Bild 13 sind folgendermaßen: 1 => #a08c82, 2 => #6f625c, 3 => #c8bab3, 4 => #e5e3e3, 5 => #ffffff. Die Farbwerte des Verlaufs aus Bild 16 sind folgendermaßen: 1 => #33180f, 2 => #ffffff. Eine Besonderheit ist im Bild 14 zu sehen. Hier wird ein Muster, bestehend aus drei diagonal angeordneten schwarzen Pixeln, verwendet. (Wie ihr so ein Muster erstellt, könnt ihr im "Button Design 2" Tutorial unter Punkt 9 nachlesen)
Nachdem ihr alle Einstellungen vorgenommen habt, sollte das Ergebnis so wie in Bild 6 aussehen.
4. Jetzt wählt ihr die andere Form-Ebene aus, und wendet auch hier einen Ebenen-Stil an. ( Einstellungen zu sehen in Bild 18-22) Die Farbwerte des Verlaufs aus Bild 22 sind folgendermaßen: 1 => #004aa5, 2 => #31afff, 3 => #ddf2ff.
Bild 17 zeigt das Zwischenergebnis.
5. Als letztes müßt ihr noch die Buttons erstellen. Hierzu erzeugt ihr für jeden Button eine Rechteckform und wendet ebenfalls Ebenen-Stile an (Bild 23/24).
Für den Normal-Zustand habe ich einen Grauverlauf gewählt (Bild 24) mit den Farben: #cccccc (grau) und #ffffff (weiß). Der aktive Zustand des Buttons hat den Farbverlauf von #2fadfe nach #2168b8.
6. Das Logo überlasse ich jedem selbst.
Bild 2 zeigt das Endergebnis.
Viel Spass beim ausprobieren!!
p.s. Die Stile "Blue Sky" und "Metallix" aus dem 
Download-Bereich (Stile), sind denen der hier verwendeten sehr ähnlich. Ich würde aber trotzdem jedem raten die Werte per Hand einzugeben. Der Lerneffekt ist dadurch wesentlich größer.
Bild 1
Bild 2
Bild 3
Bild 4
Bild 5
Bild 6
Bild 7
Bild 8
Bild 9
Bild 10
Bild 11
Bild 12
Bild 13
Bild 14
Bild 15
Bild 16
Bild 17
Bild 18
Bild 19
Bild 20
Bild 21
Bild 22
Bild 23
Bild 24
19 Antworten zum »Interface 1« Tutorial
Hinterlasse eine Nachricht
Sonntag, 27-01-08 22:32
Hey echt geiles tutorial...
Respect ;)
Lg Kevin
Freitag, 20-04-07 14:42
@ Anderson Batista Gomes
Nice!!! :)
Montag, 16-04-07 18:22
I'm a student.
Sonntag, 27-08-06 13:05
Danke Tom jetzt hab ichs auch geschafft..!
Habe es auch fertigg emacht zwa rnicht so gut wie beim tutorials aber auch gut also find ich ..!
Zum TuT: Das Tutorial ist richtig gut ich finde am besten das man die form und so runnaalden kann einsame Spitze :-)
Hoffe du wirst weitere so geile tutorials amchen so zum Header wie man geile HeaderZ macht so mit interface sachen usw..!
Sonntag, 27-08-06 01:40
Hi Resul,
wie man eine Form in Photoshop einläd und anwendet kannst du hier unter "Downloads" -> "Eigene Formen" nachlesen.
Samstag, 26-08-06 12:38
Habe ma ne frage ehm dieses download form ne wie kan iuch das einfügen oder so ???
Sonntag, 02-07-06 09:19
Wenn du Lust hast mal ein Tutorial zu schreiben, das hier dann veröffentlicht wird, nur zu!!! Teil mir doch mal über das Kontaktformular deine E-Mail Adresse mit. Es ist glaube ich einfacher und sinnvoller, sich über E-Mail als über diesen Kommentarbereich auszutauschen.
Donnerstag, 29-06-06 19:06
Machst du bitte nochmehr von solchen Tutorials? :) Vielleicht könnwa ja mal was zusammen machen :D
Montag, 26-06-06 19:20
Gefällt mir sehr gut!!!
tom :)
Sonntag, 25-06-06 03:45
Hi, habs nun fertig, vielleicht gefällts dir sogar :) Hier der Link:
http://www.black-alliance.de/daten/mem/gallery/12/p0218.jpg
lg.
Dienstag, 20-06-06 13:28
Jo, fand das sehr stylisch :) n paar Ideen wie ich es weiterführen soll?
Dienstag, 20-06-06 08:43
Sehr schön!!
Auch geschickt wie du das Wallpaper "Wurmschwanz" eingebunden hast!
Dienstag, 20-06-06 00:09
Oki, ich zeig dir mal scghon den Header den ich bis jetzt schon mal gebaut habe :) nur dank dir kamen mir solch schöne Ideeen :)
http://www.black-alliance.de/daten/mem/gallery/12/p0214.jpg
Sonntag, 18-06-06 22:13
Ja, würde mich natürlich interessieren wenns fertig ist.
zu 2. Kein Problem! Kannst ja nen Link zu 24-psd.de setzen - das würde mich schon freuen.
Sonntag, 18-06-06 19:31
hehe Dankesehr :) Ich bin gerade dran ein komplettes Template damit zu entwerfen. Meine Frage erstens willst du es mal sehen wenns fertig ist, und zweitens darf ich denn das Tutorial für einen Clan benutzen? Ich mach das eh kostenlos.
Sonntag, 18-06-06 18:58
Wow!!!
Das sieht ja richtig gut aus!
Schönes Logo und coole Buttons!
Sonntag, 18-06-06 14:58
Achso, mein Ergebnis will ich dir mal zeigen :)
http://www.black-alliance.de/daten/mem/gallery/12/p0212.jpg
Vielen Dank nochmal!
Sonntag, 18-06-06 14:48
Hi Ve[n]0m,
vielen Dank für die Blumen!!!
Schau einfach mal hier unter "Links", da gibt es jede Menge tolle Tutorial-Seiten. Oder Google mal ein bischen (Suchwörter "Interface Photoshop Tutorials")
Sonntag, 18-06-06 13:34
HAmmer!!! Das erste Tutorial, mit dem ich mal was anfangen kann und was einfach nur Toll aussieht. Mher Tutorials von der Sorte wären wünschenswert, hast du vielleicht noch ein paar Adressen wo man solche speziellen Tutorials herbekommen kann?