Anzeige
Tutorialbeschreibung

apple-Navigation nachbauen.

apple-Navigation nachbauen.

Weil ich die Frage schon einige Male gesehen habe, erkläre ich hier Schritt-für-Schritt wie man die Navigation der neuen Apple Homepage erstellt.



Herzlich Willkommen ...

bei meinem ersten Tutorial. Ich versuche euch heute zu erklären wie man Schritt-für-Schritt die Header-Grafik auf der neuen Apple Homepage nachbaut. Es ist zwar sehr einfach und simpel und zu 90% herumprobieren. Wir werden keine besonders ausgefallenen Techniken noch sonst etwas, denn Apple hat mit dem neuen Header den oft-kopierten, doch auch ein bisschen schwereren und inzwischen ausgelutschten so genannten Aqua Stil ersetzt. Der neue Stil passt viel mehr zum neuen Betriebssystem OS X 10.5 "Leopard" und anderer aktueller Apple Software wie dem OS X auf dem iPhone oder iTunes ect...

Also, nun ist es Zeit anzufangen. Ich verwende in der Beschreibung wenig Shortcutbezeichnung da die auf den verschiedenen Betriebssystemen teilweise unterschiedlich ausfallen.


1. Schritt

Wie so oft erstellen wir ein neues Dokument, ich wähle hier nun einfach mal 650 x 100 Pixel, RGB natürlich mit weißem Hintergrund.
Bilder



2. Schritt

Wir stellen als Vordergrundfarbe #d4d4d3 ein und wählen das "abgerundete Rechteck Werkzeug" (Shortcut U), stellen einen Radius von 4px ein. Nun ziehen wir in der Mitte des Dokumentes ein Rechteck.
Bilder


Bilder



3. Schritt

Wir öffnen nun die Ebeneneigenschaften des eben erstellten Rechteckes und setzen ein Häkchen bei "Schlagschatten" und "Verlaufsüberlagerung". Dann stellen wir die beiden Ebeneneffekte wie auf den Bildern gezeigt ein.
Bilder


Bilder


Hier die Einstellungen für den Verlauf
Bilder


Nun haben wir in etwa dieses Bild vor uns:
Bilder



4. Schritt

Als nächstes sorgen wir für die Trennlinen zwischen den einzelnen Menüpunkten. Mit dem "Bleistifttool" (B) malen wir eine 1 Pixel breite Linie in der Farbe #d9d9d9 auf einer neuen Ebene.
Bilder


 
Bilder


Diese Stellen wir auf "Multiplizieren".

Wir erstellen noch eine neue Ebene und zeichnen links und rechts der gerade eben gemachten Linie jeweils eine in Weiß (#ffffff). Diese Ebene stellen wir nun auf 10% Fläche. Der Einfachkeit halber packen wir diese beiden Ebenen in eine neu gemacht Gruppe und nennen diese "Linie".
Bilder



5. Schritt

Wir erstellen jetzt die Beschriftung für die einzelnen Navigationspunkte. Apple benutzt für die Beschriftung die Schriftart "Myriad Pro" welche bei Photoshop, beziehungs der Creative Suite enthalten sein sollte. (Mindestens ab CS2, ich benutze CS3, hier gibt es sie auf jeden Fall). Den genauen Schriftschnitt gibt es nicht dabei aber "Myriad Pro Semibold" kommt ziemliche Nahe an das Ergebnis von Apple heran.

Wir schreiben mit der Schriftgröße 14 Punkt und 25 Spationierung unseren Navigationspunktnamen und duplizieren diesen sofort.
 
Bilder


Der obere Text bekommt die Farbe #434241 und der untere #d8d8d7. Weiters wird der untere auf 75% Deckkraft gesetzt. Diesen wählen wir wieder aus und schieben ihn 1 Pixel nachts und 1 Pixel nach unten. Nun haben wir den Effekt, dass die Schrift wie "eingestempelt" aussieht und das ohne den schlechten "Abgerundete Kanten und Relief" Ebeneneffekt von Photoshop.
Bilder



6. Schritt

Wir kopieren nun die Trennlinie so oft wie wir sie brauchen. (Anzahl der Menüpunkte).
Bilder



Das war es eigentlich, was ich euch noch zeigen will ist das Suchfeld.


7. Schritt

Wir nehmen wieder das "Abgerundetes Rechteck" Werkzeug, diesmal mit einem Radius von 20 Pixeln und als Farbe weiß (#ffffff).
Die so erstellte Ebene versehen wir mit folgenden Ebeneneinstellungen und fertig ist das Suchfeld.
Bilder


Bilder



Hier was ihr nun hoffentlich vor euch seht:
Bilder


Doch schon recht nah am Original, nicht?
Bilder


Nun sind wir doch sehr nahe am Original, ich hoffe es hat euch gefallen und ihr habt alles verstanden, bei Fragen einfach bei mir melden.

DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von vound
  • 06.05.2013 - 11:08

Super trutz ein paar schwierigkeiten.
verstosse ich gegen apples copyright erecht wenn ich das auf meiner seite nachbaue ?

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 20.10.2012 - 10:25

Einfaches Tutorial zum Nachbauen.

Portrait von NewRoses
  • 14.12.2011 - 02:11

Super, hat mir echt weitergeholfen. Einfach erklärt, sehr nah am Original!

Portrait von AaronDark2
  • 08.01.2011 - 13:30

@buunz: Nein, nur die Idee ist "geklaut". Es wurde nicht einfach kopiert, es wurde selbst erstellt und ist daher LEGAL!

Portrait von Darkearth
  • 02.12.2010 - 16:34

Gutes Tutorial, allerdings muss ich buuunz recht geben^^

Portrait von noodl
  • 11.10.2010 - 14:19

Gutes Tutorial, allerdings muss ich buuunz recht geben^^

Portrait von themo_23
  • 01.10.2010 - 14:35

Einfach zum nachbauen, vielen dank

Portrait von buuunz
  • 28.09.2010 - 10:26

wem das hilft, der klaut dafür braucht man denke ich entweder kein tutorial oder man sollte diese navigation nicht bauen, denn dann ist sie einfach geklaut ;)

Portrait von captainthriller
  • 17.08.2010 - 12:01

wem das hilft, der klaut
dafür braucht man denke ich entweder kein tutorial oder man sollte diese navigation nicht bauen, denn dann ist sie einfach geklaut ;)

Portrait von funtick
  • 03.08.2010 - 15:33

super tutorial hat mir sehr geholfen!

Portrait von Crasher
  • 22.07.2010 - 23:14

Top Tutorial. Danke!

Portrait von renner96
  • 29.05.2010 - 17:30

super Tutorial! Hast wirklich alles sehr gut erklärt!

Portrait von tomlin
  • 21.05.2010 - 11:49

Sehr schönes Tutorial!

Portrait von Zicco
  • 12.05.2010 - 13:40

klasse ding =) mehr davon!

Portrait von bazzo
  • 03.05.2010 - 13:03

super tutorial. kann ich gut gebrauchen. :-)

Portrait von rock3t
  • 17.04.2010 - 05:02

geniales Einstertutorial! Optimal ;)

Portrait von TheTempest
  • 04.04.2010 - 16:28

das ist nicht nur sehr na am Original das ist es!
Perfekt!

Portrait von Martin2212
  • 31.03.2010 - 23:30

Top aber kann man des iwie mit Links versehen

Portrait von aka_Robin
  • 30.03.2010 - 12:36

ein gelungenes tutorial, hat mir doch sehr weitergeholfen

Portrait von FearCatalyst
  • 29.03.2010 - 15:34

Danke, war für mich als Laie auch sehr verständlich und gut erklärt *thumps up*

x
×
×