MastersForum

Lol, da haste Dir ja mit Eyeballdesign gleich eins der schwersten PSP-Designs ausgesucht die es gibt.

Du wirst kein Tutorial finden, das das komplette Eyballdesign erklärt. Um sowas zu machen musst Du Dir mehrere zusammensuchen, die aber wenn man sie 2-3 mal gemacht hat und vor allem das Prinzip dahinter verstanden hat!! relativ schnell zu dem "boah ist das simpel" Effekt führen.

Deutsche Tutorials gibt es zwar, die besten sind aber meist in Englisch. Da sie aber fast alle mit Bildern sind, ist das eigentlich auch nicht so schwer.

- Fangen wir mal an:
http://www.hilfdirselbst.ch/diverse_seit…ebersetzung.php

Dort sind alle Werkzeuge und Standard-Filter (die Du brauchen wirst, externe Filter werden in Tutorials so gut wie nie benutzt) übersetzt für Englisch-Deutsch.

- Eine deutsche Seite ist:
http://www.photoshoptutorials.de/main.php

Ist nicht mehr so gut wie sie mal war, für Basics aber noch ganz in Ordnung.

http://www.good-tutorials.com/

DIE Link Seite für Tutorials. Absolut aktuell (1990 Tutorials)

Um so ein Design wie bei Eyeball zu machen, brauchst Du vor allem drei Techniken:

Smooth Metal, Glas-Orb und Engraved Text.

http://www.photoshoptutorials.de/tut_button07.php
für Glas-Button und Smooth-Metal.

Meine Lieblings-Seite für Tutorials ist:

http://www.eyesondesign.net

Sehr gut erklärt und vor allem ausführlich.

http://www.eyesondesign.net/index.htm
http://screaming-art.com/tutorials.php
http://www.daeng2k.de/ (deutsche Seite, die Tutorials konzentrieren sich aber meist auf Inters-Experts).
http://www.dwphotoshop.com/photoshop/ (hauptsächlich Basic-Tuts, englisch)
http://www.phong.com/index.php (wenn Du mal weinen möchtest, das Design ist klasse)

Und zu guter letzt:

http://robouk.mchost.com/tuts/ps.php

dort findestst Du fast alles, was mit Metal-Future-Design zu tun hat. Besonders sind dort das Smooth-Metal und das LCD-Orb Tutorial zu empfehlen. Robouk hat sich zwar mehr auf WinAMP-Skin-Design konzentriert aber sehr gut erklärt.

Viel Spass und üben, üben, üben

Wenn Du Fragen zu Techniken hast, frag einfach. Wenn Du mal ein paar Bilder für den Papierkorb gemacht hast, stellst Du relativ schnell fest, dass eigentlich nur ganz wenige Filter und Techniken immer und immer wieder benutzt werden und viele Sachen gefährlicher aussehen, als sie eigentlich sind.

hey wörni hast du sonst nix zu tun oder wie?!

hab mal gegoogelt, damit ich checke, um was es hier überhaupt geht

und hier mal 2 n00b-links, die ich auf die schnelle gefunden:

pdf tutorial auf seite weiter unten
2ter link

frau edith:
aber ich seh schon...krüml is hier die xpertIn

Dann übersetz ich es Dir mal, denn der Aqua Button ist wirklich simpel. Schritt für Schritt

- Zuerst drücke "D" und dann "X" (Default Colors und Chance Foreground-/Backgroundcolor)
- Erstell ein neues Bild (Datei -> Neu oder STRG+N, Grösse 500x500 Pixel, Auflösung: 300 Pixel/Inch, Modus: RGB, Inhalt: Hintergrund)

Das erstellt Dir ein 500x500 Bild mit schwaren Hintergrund.

- Neue Ebene (Ebene -> Neu -> Neue Ebene oder Shift + STRG + N)

- Marquee-Tool (M, Auswahlrechteck), änder dies auf Auswahlelipse (entweder SHIFT + M oder per Mausclick)

- Ziehe einen Kreis (wir fangen mit einem Kreis an, komplexere Objekte funktionieren genauso, aber erst mal nur einen Kreis). Halte beim Erstellen des Kreises ALT + SHIFT gedrückt, so wird er exakt rund.

- Fülle den Kreis mit einer Farbe Deiner Wahl. Dafür erst Click auf die Vordergrundfarbe und dann Füllwerkzeug (G). Als Farbe nehmen wir mal ein dunkles Blau (Farbcode #336699)

Das sieht jetzt so aus:

- Jetzt erstellst Du wieder eine neue Ebene (STRG + SHIFT + N), die Kreisauswahl muss dabei erhalten bleiben. Ist dies nicht der Fall, gehe auf den Ebenen-Inspector (dass ist das Fenster unten rechts auf dem Screenshot) und clicke mit gedrückter STRG-Taste mit der linken Maustaste auf "Ebene 1" (das läd die Auswahl von Ebene 1).

- Nimm das Werkzeugspitzentool ("B") und wähle einen weichen Pinsel aus (Pinsel -> auf den Pfeil clicken -> z.b. 100 Radius mit Weichzeichner). Modus: Normal, Deckkraft: 35%, Fluss: 100%

- Wähle weiss (#FFFFFF) als Vorderrgrundfarbe und zeichne einen Halbkreis in der Auswahl, geh ruhig mehrmals drüber damit es aussen dicker wird als innen.

Das sieht dann so aus:

- Erstell eine neue Ebene, auch hier wieder die Auswahl muss erhalten bleiben.

- Nimm das Verlaufswerkzeug (SHIFT + G oder click auf das Füllwerkzeug) und wähle oben den Vordergrund zu transparent-Verlauf aus, sowie linearer Verlauf.

- Erstelle einen Verlauf vom Kreis oben bis etwa zur Mitte auf der neuen Ebene. Damit der Verlauf gerade wird, halt dabei die SHIFT Taste gedrückt.

Jetzt hast Du das:

- Jetzt gehst Du zu Filter -> Weichzeichnungsfilter -> Gaußscher Weichzeichner -> Radius: 5

- Nochmal anwenden (unter Filter steht der zuletzt benutzte immer ganz oben oder einfach STRG + F)

- Jetzt wechselst Du auf Ebene 2 im Ebenen-Inspektor (das Fenster unten rechts bei mir) und drückst dort 2x STRG+F

- Wieder zurück zu Ebene 3 fügst Du ebene 3 und 2 zusammen (Ebene -> mit darunterliegender Ebene auf eine Ebene reduzieren oder STRG + E)

- Dann noch 2x STRG + F (Filter wiederholen)

- Auswahl aufheben (STRG + D)

- Jetzt kannst Du noch an der Deckkraft der Ebene 2 was ändern, je nachdem wie massiv das sein soll.

- Füge noch zwischen Ebene 1 und 2 z.b. eine Silhouette ein und das ist das Endergebnis:

Nett gemacht Kruemelmonster.

Aber wenn ich sehe, welche Buttons heutzutage als 'Aqua' durchgehen wollen, krieg ich als Appleuser Hautausschlag.

Original Aqua Button:

Der Apple-Aqua-Button wird aber genau nach dem selben Prinzip erstellt, nur dass er 3 Ebenen mehr benutzt um mehr Spiegeleffekt hinzubekommen. Ausserdem wird die Capacity des Hintergrundes runtergesetzt um ihn transparent (glasig) zu machen. Das sind nur eine Handvoll mehr Arbeitsschritte, die aber die gleichen Tools benutzen.

Beim Apple-Aqua Button werden z.b. hauptsächlich nur die Glasfunktion (also das weisse + Gaussian Blur) verdoppelt Problem bei dem Tutorial ist zb. dass der Schatten direkt an den Hintergrund gelegt wird (per Ebeneneffekt), so dass ein nachcolorieren in einer komplett anderen Farbe sehr schwer wird.

Das Windows XP Design wird übrigens ebenfalls nach dem selben Prinzip erstellt, unterschied zum Apple ist hier auch nur die Deckkraft der Grundebene.

Wenn man mehrere davon mal gemacht hat, stellt man wie gesagt relativ schnell fest, dass das Grundprinzip eigentlich immer das selbe ist, der Unterschied ist meist nur die Transparenz.

Im Prinzip ist alles was man mit Photoshop macht dasselbe. Der genetische Code vom Menschen und Affen ist im Prinzip auch dasselbe.
Nur sind es eben die paar Prozent, die entscheiden, ob es anders wirkt.

Es ging mir auch nicht darum, den Wert Deines Tutorials zu schmälern, aber wenn Du schon etliche Tutorials postest, kann eins mehr oder weniger auch nicht schaden, oder (auch wenn meins in Englisch ist)?

Es ging mir darum, daß wenn man schon kopiert, dann sollte man es richtig tun. Und daß das von den Applebuttons kopiert ist, impliziert ja schon der Name.

Jeder Button kann nach dem selben Prinzip gemacht werden. Trotzdem ist das bei XP etwas anders als bei OS X. Luna ist doch nur ein müder Abklatsch von Aqua. Da steckt eine andere Technik hinter, die Microsoft erst in der nächsten Systemversion bringen wird. Oder pulsieren z.B. die Buttons auch unter XP?

Ah ja, den Schatten kann ich ebenfalls als Ebene definieren. Und dann ist es ein Kinderspiel, ihn umzufärben bzw. den Hintergrund anzugleichen.

Ich muß mich mal für diesen Thread bedanken, insbesondere für die Posts von Kruemelmonster. Ich bin auf http://www.photoshoptutorials.de gegangen und habe ein paar von den Sachen ausprobiert - in abgewandelter Form. Die kläglichen Versuche könnt ihr unten bewundern:

Ich hätte auch noch eine kleine Frage, die vielleicht nicht zum Thema gehört:

Wie kann ich hier im Forum einen Link so einbinden, daß dort nur ein Text steht, auf den man klicken muß? Also, daß die URL nicht im Posting zu sehen ist so wie bei den zwei Bildern von mir weiter unten?

Ich habe auch in einem anderen Forum gesehen, daß es jemand geschafft hat, ein Thumbnail einzubinden, auf das man dann klicken konnte, um das große Bild zu sehen. Wer weiß, wie das geht, immer her damit.

Thx.

Puzzle

Merkwürdiges Etwas




Edit: Danke an Woerni und Wickie@OoK, hab's jetzt.

Zitat

Original von DS_Tamger

Wie kann ich hier im Forum einen Link so einbinden, daß dort nur ein Text steht, auf den man klicken muß? Also, daß die URL nicht im Posting zu sehen ist so wie bei den zwei Bildern von mir weiter unten?

(url=http://www.page.de)Linkname(/url)

und halt eckige Klammern nehmen

Um es plastischer zu bekommen, gibt es zwei "Tricks".

Der erste ist, anstatt eines unifarbenen Hintergrund (also der blaue Kreis) nimmst Du einen mit Gradient (Farbverlauf), der von oben nach unten ein bischen heller wird.

Der nächste, allerdings etwas schwierigere (da es von Hand gemacht werden muss) ist, dass Du den oberen weissen Bereich nicht gerade runterziehst, sondern mit dem Lasso Tool einen Halbmond malst und dann dort den Gradient reinmachst. Der obere Bereich sollte immer eine höhere Deckkraft als der untere haben, gepaart mit dem Farbverlauf bekommst Du es hin, dass es plastischer aussieht.

An der blauen Kugel mit dem E drin (direkt auf der Hauptseite) sieht man sehr gut, dass für den Weiss-Gradient nur etwa 1/3 genutzt wurde und ein Farbverlauf als Hintergrund genommen wurde.

Das plastische ist eine optische Täuschung. Je kleiner der obere Bereich und desto kürzer der Farbverlauf ist, desto plastischer wird es. Oben hast Du den Farbverlauf im Prinzip über die gesamte Breit der Fläche gezogen, versuch das mal, indem Du einen kleineren Kreis halb füllst (kleiner als die Grundfläche des Kreises). Dann wirst Du sehen es wird plastischer. Ist also ganz simpel, einfach bischen ausprobieren, dann kommst Du schnell dahinter. Es ging oben auch hauptsächlich ums Prinzip, das Endergebnis muss halt so angepasst werden wie Du es gerne hättest.

Was die Kugeln aber richtig plastisch macht ist nicht die Kugel selber, sondern der Metalrahmen aussenrum (dadurch wirkt das eingebettet).

Metalkreis ist relativ simpel. Ein Kreis der mit einem schwaz-weiss Gradient gefüllt wird (von links oben nach rechts unten). Neue Ebene und ein kleinerer Kreis, der wieder mit dem Gradient gefüllt wird (nur diesmal umgekehrt von rechts unten nach links oben). Vllt noch bischen Gaussian Blur (Weichzeichner) auf den kleineren Kreis (ganz wenig, 0,5-1) und schon hast Du einen Metalring. Kugel drüber (die etwas kleiner als der kleinre Kreis sein muss) und schon sieht es so aus, als ob die Kugel in einem Metalring eingebettet ist. Das ist nur die Grundtechniken, für Feinheiten muss halt bischen rumgespielt werden, aber Übung macht ja den Meister

Zitat

Der 2. Link....ist dir echt gelungen. Hast du nen Link genau zu dieser Seite wo das beschrieben wird?

Meinst du meinen? Falls ja, das war inspiriert durch das hier:

http://www.eyeball-design.com/fxzone/frames02.htm

Dann auf Mitte rechts auf der Seite auf "Interface Skin and Bone" klicken.

Zitat

Original von SenF_Woerni
@Vigilant

Netter Button. Mal sehen ob ich mit dieser Anleitung klar komm. Hast du mehr solcher Seiten?

3 Aqua Tutorials habe ich noch:

1
2
3

oder die PSD-Datei zum anschauen:

Für's Web ist das mit den Transparenzen so eine Sache.

'Für Web speichern' ist schon richtig. Die erste Möglichkeit wäre es als GIF zu speichern. Allerdings sieht das nicht immer perfekt aus, da GIF nur eine Transparenzstufe kennt. Solltest die Hintergrundfarbe, die auch später auf der Seite ist, als Hintergrund definieren. Im Bsp. rot. (Sieht natürlich bescheiden aus, dient nur der Verdeutlichung.) Wenn mit Schatten, vergiß GIF-Transparenzen.



Oder Du speicherst das als PNG-24, daß hast Du einen Alphakanal und somit mehrer Transparenzstufen. Nachteil: Der IE kann die wohl immernoch nicht korrekt darstellen.

Dritte Möglichkeit. Direkt schon in Photoshop die Hintergrundfarbe definieren, die der Button später auch auf der Seite hat. Dann den Bereich mit dem Schatten als JPEG speichern. Sieht am vernünftigsten aus. Einziger Nachteil: Die Klickfläche für den Button ist auch schon am Schatten aktiv.
EDIT: Kann man natürlich auch umgehen, indem man nachher ein Imagemap bzw. Hotspot generiert, der genau das Gebiet des Buttons umfasst. Dann wird das aber nichts mit einem einfachen Rollovereffekt, falls Du das vorhattest. Alles nicht so einfach.

Ich hoffe, ich habe das richtig verstanden und es hilft.

Die Problem hat nicht das Programm, sondern die Spezifikation des GIF-Formats, dass halt nur 256 Farben unterstützt.
Schliesslich muss ja das auslesende Programm (in diesem Fall der Webbrowser) ja auch wissen, welche Pixel es transparent darstellen muss. Mit welchem das GIF gemacht wurde, ist dem da ziemlich egal. Das Problem ist hier nicht PSP sondern das GIF-Format, bzw. das sich das PNG Format leider nicht richtig durchgesetzt hat.

Aber Schatteneffekte auf Webseiten nehmen eh nur unnötig Platz weg. Wenn Du es trotzdem machen willst, versuch mal einfach eine Ebene drunter zu legen, die grau ist (schwarz, 50% Deckkraft, ohne Blur (Weichzeichner)). Verschieb sie nur 2 Pixel nach unten und rechs und Du hast die Illusion eines Schattens, der aber wegen der kleinen Grösse nicht auffällt, dass er hart gezeichnet ist.

Der Tipp, den Button mit der Hintergrundfarbe zu zeichnen den die Webseite haben soll funktioniert nur dann, wenn Du ausschliesslich Webfarben für den Hintergrund nimmst. Du kannst bei der Farbauswahl einen Haken setzen (nur Webfarben). Das Problem ist nämlich, das bestimmte Farben nicht jeder Browser gleich darstellt. Manche stellen sie heller oder dunkler dar, so dass dann das Bild als hässliches Viereck auffällt.

Wenn Du mit Rollover arbeiten möchtest, trennst Du den Schatten von den Button und machst ein eigenes JPEG (oder GIF, je nachdem was kleiner ist) daraus. Die Hintergrundfarbe muß vorher feststehen (wobei ich Kruemel widersprechen möchte: Man kann meiner Meinung nach mittlerweile alle Farben als Hintergrundfarben definieren, dies sollten heutzutage alle Browser beherrschen. Andernfalls ist Krümels Lösung 100% sicher) Dann brauchst Du keine Transparenz im Button. Ungefähr so:



Dann kannst Du auch die Buttons als Rollover machen. Der Schatten sollte aber nicht farbig sein, sondern grau, also dunkler als der Hintergrund. Du mußt in nur einmal machen und kannst ihn dann unter jeden Button setzen.
Bilder sind immer eckig. Deshalb löst Du auch mit dem vorher definierten Hintergrund das Problem mit den Rundungen.