Dieses Photoshop-Tutorial zeigt, wie es "relativ" einfach zu auffälligen Symbole Web 2.0-Stil zu erstellen, mit Reflexionen und so weiter, einfach indem die Auswirkungen auf die Schicht. Sobald Sie den Prozess verstehen, ist es auch möglich - durch freien Lauf zu lassen Ihrer Kreativität - schaffen viele Variationen.
STEP 1 - FORM ICON
Wir schaffen eine Schicht, und wir ziehen Sie ein Rechteck
(Oder quadratisch) mit leicht abgerundeten Ecken.

Angewandt auf dieser Schicht die folgenden Effekte:

Da habe ich einen inneren Schatten Farbe # ffd800

Die Steigung geht von # 067500 bis # 0cff00
Wir haben unsere fast Icon! Die Nuance der Farbe, die es eher können! Das Wichtigste ist es, von einem dunklen zu einer klaren Abstufung starten.

SCHRITT 2 - GHOST
Fügen Sie eine neue Ebene über dieses cha wir gerade gemacht. Wählen Sie die Form des Symbols (Strg + Klick auf die Schicht) und - bleiben auf der neuen Ebene immer noch leer - wählen Sie aus dem Menü auswählen-> Ändern-> Vertrag: geben Sie 2 Pixel:


Stellen Sie die Vordergrundfarbe auf weiß
und wählen Sie das Verlauf-Werkzeug
Going von weiß zu transparent. Dann ziehen Sie einen Farbverlauf von oben nach unten, um zu erhalten:

Nun, eine abschließende Note, wählen Sie die kreisförmige Auswahl-Werkzeug
, Wählen Sie eine Ellipse und verschiebe es wie in der Abbildung unten gezeigt, und drücken Sie die Entf-Taste - wenn Sie möchten, können Sie die Transparenz auf 90/80 setzen wollen:



SCHRITT 3 - Texte und Symbole
Mit einem der vielen kostenlosen Font-Bibliotheken Sie ein grafisches Symbol, ein Symbol in der Tat hinzufügen können. Wenn dies Umrisse, wie in meinem Fall, die zu den Auswirkungen:

Sie können einen schönen Effekt zu erzielen, zurückzukehren:


Das einzige, was fehlt ... der Text Ihrer Wahl!










Herzlichen Glückwunsch x Tutorial, Web 2.0 geben die Standards, dass Webmaster kaum vergessen kann, ist ...
Ich suchte im Netz, um in einer Schriftart grafische Schaltflächen ähnlich, was Sie verwendet aufgenommen werden, aber ich habe es nicht gefunden, könnten Sie mir sagen, was es ist oder wo aufgerufen, es zu finden? Dank
@ Markus: Danke Mark! Sie können einige Bitmap-Fonts unter folgender Adresse: http://www.orgdot.com/aliasfonts/
Photoshop Tutorial: Web 2.0 Stil-Ikonen in 3 Schritten | Undolog.com ...
Tutorial bis 2,0 Stil-Ikonen mit Photoshop machen ....
hei .. aber sie vergessen, uns zu sagen, wie die Schatten unter die verfällt!
.. wissen, wie es ist .. schon hast du 99 getan .. Vor 100
mythischen kleinen Knopf .. aber es würde einen Schatten Fotze eh eh! ^. ^
@ Dapdudida:
Um mir zu verzeihen habe ich einen kleinen Screencast, auch wenn der Ton kam! Gehen Sie hier Techniken für Reflexion 
Sie haben Recht
Es gibt zwei Techniken: mit der Maske auf der Schicht (das erste Beispiel) und die Verwendung der Maske Allgemeinen! Ich bevorzuge die erste
Große Tutorial! Ich war für eine lange Zeit auf der Suche, Thanks a lot! Ihr Blog ist unter meinen Favoriten, sofort
@ Artemisia: thanks!
Hallo, herzlichen Glückwunsch für die tuotorial Ich war sehr nützlich, aber die kleinen Symbole, wo Sie sie gefunden?
Ich habe versucht, auf der Website, die Sie in den Kommentaren gepostet vorstehenden Absätzen aussehen, aber ich fand nichts.
@ Lazio Farm: Die Symbole sind eigentlich eine Schriftart Grafik. Hier finden Sie viele kostenlose Schriften, Zeichen anstelle der normalen Symbole der verschiedenen Typen enthalten. Google "Dingbatfont"
Das ist Jungs nach diesem Schritt .. wird ein Bullshit Ich weiß, aber ich bin auf tilt "In eine neue Ebene über die, die Sie gerade gemacht. Wählen Sie die Form (Ctrl + Klick auf die Ebene) und die Schicht noch auf dem neuen, leeren "kann mir jemand erklären, als ob ich ein Kind von 2 Jahren waren?
@ Marco: was Sie tun müssen, im Grunde ist die gleiche Form wie die Taste auf der leeren Ebene neu, aber ein wenig kleiner. Um den Inhalt einer Ebene, die Sie verwenden können, wählen Sie CTRL + der Maus klicken. Auf diese Weise sehen Sie die Auswahl um die Form der Schaltfläche. Wählen Sie dann die leere Ebene, so dass die vorher getroffener Auswahl wird auf dieser Ebene zu handeln.
Das Problem ist, dass, wenn ich auf "Gradient Overlay" gesetzt bekommen dann die ganze Schicht die Farbe des Gradienten abdeckt und erlaubt es mir nicht um den Platz, die Form, die ich auf den Knopf zunächst gegeben ist zu sehen. Zweitens, Rückkehr am Anfang, ich schaffe das Niveau, Zeichnen des Quadrats aber in den Schatten externen und internen unbedingt die Ebene duplizieren intervenieren. Und "richtig?
Vielen Dank für Ihre hervorragende Anleitung! Seit ich sah meine Kreationen können nur verbessern!
@ Matt: Dank an Sie! Für alle Informationen zögern Sie nicht, mich per E-Mail
Können Sie mir sagen, wie Sie ein Video-Tutorial Stil Popup-Fenster sichtbar gehandhabt?
Kurz gesagt, ich bin auf die Wirkung auf das Video, wo visisibile schlagen ein Lernprogramm zum Erstellen icons Web 2.0-Stil bezieht
@ Giuseppe Serra:
Ich benutzte die Javascript-Bibliothek ShodowBox , die Sie öffnen Pop-up-Fenster mit verschiedenen Inhalten ermöglicht: Bilder, Flash-Filme oder Videos, QuickTime, HTML-Seiten und vieles mehr.
einfach und praktisch ... just like Ich mag es :)
Hallo, wenn ich das macshera anwenden, um den zweiten Platz zu nivellieren versuchen verschwindet und die Maske auf der Schicht ist weiß und nicht schwarz, wie in dem Film wie eh und je?
@ Stephen: Du musst bei gedrückter ALT-Taste, wenn Sie die Maske anwenden
Große Führer, danke!
Ich vermisse nur eine Sache ... Die Passage in dem Sie statt der Ellipse: Ich kann es nicht geben, dass die Auswirkungen auf das Symbol klicken.
Ich kann nicht verstehen, diese Passage:
Vielen Dank im Voraus
@ Digit WM: Dies ist ein einfacher Schritt. Der schattierte Schicht geschnitten wird, vorzugsweise mit einer Kreisform. Was Sie tun müssen, ist folgen die Abbildungen, um die Wirkung ähnlich wie vorgeschlagen zu machen, aber Sie können auch für verschiedene Schnitte für verschiedene Effekte. Auf Schicht "Reflexion", was zu schneiden, verwenden Sie eine kreisförmige Auswahl, um den Bereich zu begrenzen, die gelöscht werden soll und drücken Sie die "ENTF", um den Boden zu schneiden.
Darüber hinaus die Deckkraft dieser Ebene auf 90% oder 80% in Abhängigkeit von den verwendeten Farben reduziert werden.
Ich hoffe, ich habe Ihre Frage beantwortet.
ausgezeichnet und klar! Herzlichen Glückwunsch und vielen Dank, Grüße