Antworten: 5
Seite [1] |
|
 reVerBGeekboy Beiträge: 1237 |
# Thema - 05.12.2006 um 03:23 Uhr
Hier ist ein kleines Tutorial zum erstellen einer Navigation im Interface-Style Vorab ein kleines FAQ: Was ist für dich Interface-Style? Ein Interfacestyle ist für mich eine Navigation, wo alle Buttons in einem Modul zusammengesetzt sind. Wie meinst du das genau? In diesem Tutorial sieht man das besonders gut. Die einzelnen Buttons sind in einer Art Modulare Schablone eingelassen. Es ist ersichtlich, wo die Buttons sind, doch das Gesamtbild wirkt wie ein einzelnes Modul. Ist sowas auch anders realisierbar? Na sicher ! man muss es nicht so stark mit abgeflachten kannten machen. Man kann es auch im 2D Stil machen. Nun zum Tutorial: Wir nehmen als Grundlage ein PhotoShop-Dokument (PSD) in der Größe 200 Pixel (Breite) und 500 Pixel (Höhe). Es sind PhotoShop-Kenntnisse im bereich Grundlagen erforderlich. Schritt 1: Erstellt ein neues Dokument mit der gewünschten Hintergrundfarbe. Danach erstellt ihr eine neue Ebene, die Über dem Hintergrund liegt. Schritt 2: Nehmt das Auswahl-Tool im Rechteck und stellt die feste Größe 198x498 Pixel ein. Zoom das Bild auf 1600& ran und positionier die Auswahl haargenau in der Mitte. Wenn es in der Mitte ist, könnt ihr zurück zoomen. Dann geht ihr oben in der Menü-Leiste auf Auswahl > Auswahl verändern > Abrunden ... und stellt 20 Pixel ein (Nach belieben wählbar - nur für das Tut 20) und bestätigt mit OK. Dann geht ihr in der Menü-Leiste auf Auswahl > Auswahl verändern > Erweitern ... und stellt dort auf 1 Pixel und bestätigt wieder mit OK. Zuletzt füllt ihr die Auswahl in der vorhin neu erstellten Ebene mit einer Farbe (Ich habe Weinrot verwendet) Nun sollte es in etwa so aussehen:  Schritt 3: Nun fertigt ihr die Buttons an. Dazu solltet ihr am besten eine neue Ebene erstellen, die über alle anderen liegt. Nun nehmt ihr das Auswahl-Tool und stellt als Feste Größe 175x25 ein. Positioniert es in eurem Farbigen bereich, geht auf Auswahl > Auswahl verändern > Abrunden ... und stellt 5 Pixel ein (Nach belieben wählbar - nur für das Tut 5) und füllt es mit einer Farbe (hier Schwarz). Kopiert dieses Element und fügt es so oft untereinander ein, bis fast der Komplette Platz verbraucht ist. Ich habe noch zusätzlich ein etwas kleineres Modul als Überschrift eingefügt. Nun sollte es in etwa so aussehen:  Schritt 4: Als nächstes Gruppiert ihr alle ebenen mit den Buttons und rastert sie. Das erleichter das Arbeit. Danach markiert ihr diese Ebene und nehmt das Zauberstab-Werkzeug (Taste W) und klickt in ein freies Transparentes Feld (nicht auf einen Button klicken). Danach geht ihr auf Auswahl > Auswahl umkehren. Markiert nun die Ebene mit dem (in unserem Beispiel Rot) Farbigen abgerundeten Bereich und drückt die ENTF-Taste (entfernen). Wenn ihr jetzt die Ebene mit den Buttons unsichtbar macht, müsste es bei einem weißen Hintergrund so aussehen:  Schritt 5: Nun Wollen wir die Buttons mit Farbe versehen. Nehmt dazu 2 verschiedene Töne einer Farbe (der unterschied muss sehr gut Sichtbar sein). Nehmt dann wieder das Zauberstab-Werkzeug (Taste W) und klickt in ein freies Transparentes Feld in der Button-Ebene. Dann wieder Auswahl > Auswahl umkehren. Zuletzt geht ihr auf Filter > Rendering-Filter > Wolken. Dann sollte es so aussehen (Wenn die Button-Ebene natürlich wieder Sichtbar ist):  Schritt 6: Man kann die Buttons nun mit Filter aus der Filtergallerie verfeinern. In unserem TUT aber erstmal nicht notwendig. Nun Markiert ihr wieder die Ebene mit den Buttons und geht auf Ebene > Ebenenstil > Fülloptionen .... Dann macht ihr einen Haken bei Abgeflachte kanten und Relief,Kontur und Schein nach innen. In den haupt einstellungen von Abgeflachte kanten und Relief stellt ihr bei FARBTIEFE 1000%, bei GRÖßE 15 Pixel und bei WEICHZEICHNEN 16 Pixel ein. Danach stellt ihr bei Schein nach innen eine Rote Farbe ein, vergrößert es, 100% Deckkraft und überfüllt es EIN WENIG !!! Bei Kontur stellt ihr die Farbe Schwarz ein, macht sie 2 Pixel breit und stellt ein, das die Kontur innen gezeigt wird. Bestätigt mit OK und dann sollte es in etwa so aussehen:  Schritt 7: Zuletzt müsst ihr nur noch ein Abgeflachte kanten und Relief bei der Ebene mit dem Modul-Hintergrund einstellen. Geht dabei vor wie in Schritt 6. Die Haken bei Kontur und Schein nach innen bleiben weg. Wenn man die Buttons jetzt noch mit dem passenden Text versieht, sollte es in etwa so aussehen:  Schritt 8: Wenn man will, kann man die Schrift auch mit einer Kontur verstärken. Damit das schnell geht, Gruppiert alle Textebenen und Rastert sie. Danach geht ihr bei Markierter neuer Textebene auf Ebene > Ebenenstil > Fülloptionen ... und macht einen Haken bei Kontur. Macht die Kontur 2 Pixel breit und wählt eine Farbe aus (hier Schwarz). Dann sollte das gute Stück so glänzen:  Wenn ihr bei dem Interface noch einen Rollovereffekt wollt, erstellt ihr das ganze 2 mal und nehmt nur eine andere Konturenfarbe für die Schrift. Speichert das Separat zu einander dann ab. Hier ein Beispiel für eine andere Farbe:  Nun müsst ihr das Interface nur noch Slicen (Bei rollover beide Slicen) und anpassen. FERTIG !!! Ich hoffe das TUT kann jemand gebrauchen. |
Inaktiv |
|
| rocco Going for pro  Herkunft: Wiesbaden Beiträge: 444 |
# Antwort: 1 - 05.12.2006 um 08:10 Uhr
schönes tutorial! das einzige, was ich daran auszusetzen habe, ist, dass du keine screens von dem fülloption-fenster gemacht hast. beugt fragen und missverständnissen vor! 
------------------ WS | rocco  Projektleiter Webmedia Solutions [ www.webmedia-solutions.de ] - - - - - - - - - - - - - - - - - - - - - - - - - - - - - FSK 12 heißt: Der Held kriegt das Mädchen FSK 16 heißt: Der Böse kriegt das Mädchen FSK 18 heißt: Jeder kriegt das Mädchen - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
Inaktiv |
  |  |
| reVerB Thread-Ersteller Geekboy Beiträge: 1237 |
# Antwort: 2 - 05.12.2006 um 12:54 Uhr
Habe ja vor dem Tutorial geschrieben, das man Grundkenntnisse bei PhotoShop benötigt. Dann sollte eigentlich keiner ein Problem damit haben. Wo die Funktionen sitzen sind meiner Meinung nach auch gut beschrieben. Ich denke mir die Ergebnisse der einzelnen Schritte sind wichtiger. Aber klar !!! Hätte man machen können. |
Inaktiv |
| |
| rocco Going for pro Herkunft: Wiesbaden Beiträge: 444 |
# Antwort: 3 - 05.12.2006 um 13:53 Uhr
klar, is auch ein gutes tut! allerdings sehe ich das so: wer "grundkenntnisse" in photoshop hat, sollte so eine navi hinbekommen. und die, die keine grundkenntnisse haben, sind froh über screens, damit sie die effekte besser/einfacher lernen/nachbauen können bzw. sich besser erinnern können (<- fotografisches gedächtnis ).
------------------ WS | rocco Projektleiter Webmedia Solutions [ www.webmedia-solutions.de ] - - - - - - - - - - - - - - - - - - - - - - - - - - - - - FSK 12 heißt: Der Held kriegt das Mädchen FSK 16 heißt: Der Böse kriegt das Mädchen FSK 18 heißt: Jeder kriegt das Mädchen - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
Inaktiv |
| |
UnKn0wn  Geekboy  Beiträge: 1160 |
# Antwort: 4 - 05.12.2006 um 16:38 Uhr
ja nettes Tutorial aber ein Interface ist das nun wirklich nicht 
------------------ Mit freundlichen Grüßen SEBEL-DESIGN http://www.sebel-design.com |
Inaktiv |
| |
| SCHIRI Weltmeister Herkunft: Hamburg Beiträge: 5299 |
# Antwort: 5 - 03.03.2007 um 11:58 Uhr
jo, schönes tut, wobei das ergebnis "nicht so mein ding is"^^ ------------------ www.laszlokorte.de |
Inaktiv |
| |
Antworten: 5
Seite [1] |
|
| Sie müssen sich registrieren, um zu antworten. |
