Anzeige
Tutorialbeschreibung

Apple-Box Teil II:Addons

Apple-Box Teil II:Addons

1.: Buttons

Wenn euch die Buttons aus dem ersten Tutorial nicht gefallen, könnt ihr wie folgt recht simple eure eigenen machen:

Schritt 1:

Erstellt zunächst ein neues Dokument für euren ersten Button. Es sollte 12*12px groß sein und einen transparenten Hintergrund haben:

Bilder

Wählt nun das Auswahlellipse-Werkzeug

Bilder
und zieht eine Auswahl von links oben über euer gesamtes Bild. Haltet die Shift-Taste gedrückt, um einen perfekten kreis zu erhalten:

Bilder

Füllt das ganze jetzt mit der Farbe #f73031 für einen roten Button. Natürlich könnt ihr auch eine andere Farbe verwenden!
Ich bleib allerdings bei rot:

Bilder

Schritt 2:

Erstellt eine neue Ebene, entweder indem ihr auf

Bilder
klickt oder [STRG+SHIFT+N] auf eurer Tastatur drückt. Füllt die Auswahl auf der neuen Ebene mit weiß (#ffffff):

Bilder

Wählt wieder das Auswahl-Werkzeug

Bilder
und drückt auf eurer Tastatur den Pfeil nach oben, um die Auswahl um einen Pixel nach oben zu verschieben. Drückt dann [ENTF] auf der Tastatur, um den überflüssigen Inhalt zu entfernen. Das ganze sollte dann etwa so aussehen:

Bilder

Schritt 3:

Wir verfahren hier ähnlich wie bei Schritt 2. Schiebt die Auswahl in ihre Ausgangsposition zurück und füllt sie auf einer neuen Ebene mit schwarz (#000000). Drückt anschließend bei aktivierten Auswahl-Werkzeug

Bilder
zwei mal den Pfeil nach unten auf eurer Tastatur, um die Auswahl zwei Pixel nach unten zu verschieben. Dürckt nun wieder [ENTF]. Das ganze sollte jetzt in etwa so aussehen:

Bilder

Setzt die Deckkraft der neuen Ebene etwas herunter.

Ihr könnt die Auswahl jetzt mit [STRG+D] aufheben.

Schritt 4:

Wählt nun weiß (#ffffff) als Vordergrundfarbe.
Erstellt mit dem Pinsel-Werkzeug

Bilder
mit einer Pinselspitze von etwa 3Px und 50% härte eine Reflexion, zunächst am unteren Ende des Buttons:

Bilder

Wählt eine etwas kleinere Werkzeugspitze und erstellt die obere Reflexion:

Bilder

Setzt die Deckkraft der Ebene etwas herunter.
Um die Reflexion echter erscheinen zu lassen könnt ihr noch den Graußscher Weichzeichner [Filter -> Weichzeichnungsfilter -> Graußscher Weichzeichner] mit einem Radius von etwa 0,5 Pixeln anwenden.

Schritt 5:

Wählt nun wieder die Ebene mit eurem schwarzen Schatten darauf. Klickt mit der rechten Maustaste darauf und wählt "Fülloptionen". Macht einen Haken bei "Schlagschatten" und verwendet folgende Einstellungen:

Bilder

Somit wären die Buttons schonmal fertig :o)

Um die Farbe der Buttons zu ändern müsst ihr nun nur die Farbe der untersten Ebene änder. Das könnt ihr über [Bearbeiten -> Anpassungen -> Farbton/Sättigung..] machen.

Meine Outcomes:

Bilder

Ich gebe zu, dass sie nicht 100% original aussehen, aber kommt doch recht nah heran, wie ich finde.

 

2.: Scrollleiste

Die typische blaue Scrolleiste ist gar nicht so schwer zu machen. Hier steht wies geht :)

Schritt 1:

Erstellt ein neues Dokument, dass ungefähr 35 Pixel breit und etwas höher sein sollte, als ihr den Scrollbalken benötigt. Er wird zwar nicht 35 Pixel breit, aber da wir einen Schlagschatten anwenden wollen, machen wir das Dokument eben etwas breiter:

Bilder

Schritt 2:

Erstellt mit dem Abgerundetes-Rechteck-Werkzeug

Bilder
bei folgenden Einstellungen eine etwa 12 Pixel breite Form.

Bilder

Macht die Form zu hoch, wie eurer Scrollbalken werden soll:

Bilder

Klickt jetzt mit der rechten Maustaste in den eben erstellten pfad und wählt "Auswahl erstellen..." Klickt im anschließenden Fenster auf Ok.

Bilder

Schritt 3:

Füllt die Auswahl nun mit der Farbe #4b8bdc:

Bilder

Klickt mit der rechten Maustaste auf die Ebene, wählt Fülloptionen und nehmt die folgenden Einstellungen vor:

Bilder

Bilder

 

Schritt 4:

Den Schritt der jetzt kommt kennt ihr schon. Füllt die Auswahl auf einer neuen Ebene mit der Farbe #283880, schiebt die Auswahl um einen Pixel nach rechts und drückt [ENTF] auf eurer Tastatur. Scheibt die Auswahl wieder zurück, füllt sie diesesmal mit der Farbe #4b8bdc, schiebt sie um einen Pixel nach links und drückt ein weiteres mal [ENTF.]. Das sollte dann etwa so aussehen:

Bilder

Schritt 5:

Erstellt eine neue Ebene und wählt das Pinselwerkzeug. Werkzeugspitze: 9Px, Härte:0%.
Erstellt nun Reflexionen, die wie folgt aussehen:

Bilder

Ladet die Auswahl der untersten Ebene [Klick auf die unterste Ebene -> Auswahl -> Auswahl laden] und verkleinert sie um eine Pixel [Auswahl -> Auswahl verändern -> Verkleinern]. Kehrt die Auswahl um [Auswahl -> Auswahl umkehren] und drückt [ENTF]. Fahrt anschließend die Deckkraft der Ebene noch etwas herunter (ca. 60%). Das ganze sollte dann so aussehen:

Bilder

Schritt 6:

Kopiert die Ebene jetzt, indem ihr sie auf das Symbol "Neue Ebene Erstellen"

Bilder
zieht. Schiebt sie anschließend um etwa 15 Pixel nach unten. Dieses Schritt wiederholt ihr solange, bis die ganze Scrollleiste mit solchen Reflexionen gefüllt ist:

Bilder

Sieht doch schon recht gut aus :o)

Als letzten Schritt könnt ihr oben und unten links noch schwarze Schatten hinzufügen. Das geh am besten auf die gleiche Weise wie wir die Reflexion gemacht haben, mit dem Pinsel. Mein Ergebnis sieht so aus:

Bilder

Auf meiner Mac-Box sieht das ganze dann so aus:

Bilder

Naja, das schafft ihr bestimmt besser :)

 


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von wahke
  • 26.12.2010 - 01:53

wo finde ich die box xD mehr wollte ich nicht :S

Portrait von MinatoKojima
  • 06.05.2010 - 16:15

Die eigen erstellten Buttons stimmen komischerweise vom aussehen her überhaupt nicht mit denen im Endresultat überein. Scheinbar wurden da doch wieder die vorgefertigten verwendet und diese auch im Miniaturbild vom Tutorial verwendet. Enttäuschend...

Portrait von Blauzweig
  • 24.04.2010 - 09:56

Vielen Dank für das Tutorial! Sehr gut beschrieben und leicht nachzubauen :)

Portrait von derdamitdemstift
Portrait von derdamitdemstift
Portrait von face_zero
  • 17.03.2010 - 11:45

Top. Danke. Bin auch noch am lernen.

Portrait von vedel
  • 11.03.2010 - 19:51

kannst du mir die bilddatei geben ? ( mac box ohne alles ? )

Portrait von lordin
  • 29.12.2009 - 17:28

Top. Danke. Bin noch am lernen. Sieht man, wie man vorgehen muss.

Portrait von denninho49
  • 13.11.2009 - 19:20

tolles tut (20 zeichen)

Portrait von UltimateX
  • 09.11.2009 - 20:48

super schnell gemacht und sieht fast wie echt aus thx

Portrait von JasonOfTheB
  • 18.10.2009 - 17:37

Und Danke für den zweiten Teil...

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 22.07.2009 - 01:27

Richtig toll sieht fast wie das original thy toller effekt

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 15.07.2009 - 17:17

Hab's auch auf Anhieb hinbekommen obwohl ich noch gar nicht so lange mit Photoshop arbeite ;)

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 19.06.2009 - 15:28

hey den trick die Auflösung pixelig zu machen kannte ich gar nicht danke

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 23.11.2008 - 22:37

sehr gutes und leicht nachvollziehbares tutorial. bin kompletter neueinsteiger und habe es auf anhioeb hinbekommen!

Portrait von MaedeG
  • 27.08.2008 - 17:11

nicht schlecht. genau das richtige für mein deckblat^^

mfg: maede

Portrait von Blicki
  • 23.07.2008 - 20:11

Super! Nun sieht mein Windows-PC bald besser aus ;-)

Portrait von Xsen7X
  • 11.07.2008 - 07:35

Super Tutorial! Einfach erklärt und Top Ergebnis!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 15.06.2008 - 21:46

alles gut erklärt nur ich würde noch gerne diesen metall-look haben

Portrait von iuvavum
  • 17.04.2008 - 07:05

Vielen dank für das tolle Tutorial :)

Ist genau das, wonach ich gesucht habe ^^ Für mich als Apple Freak ist das genau das passende *hehe*

x
×
×