Photoshop Tutorial: Web 2.0 Stil-Ikonen in 3 Schritten
Freitag, 29. Februar 2008
Dieses Photoshop Tutorial zeigt, wie "relativ" einfach, optisch ansprechende Symbole fahren, um Web 2.0 Stil mit Farben und alles andere, einfach, indem Sie die Auswirkungen auf die Ebene. Wenn Sie den Prozess zu verstehen, ist es auch möglich - freien Lauf zu lassen Ihrer Kreativität - für viele Spielvarianten zu kreieren.
SCHRITT 1 - Formular-Symbol
Wir erstellen eine Ebene und zeichnen Sie ein Rechteck
(oder Platz) mit leicht abgerundeten Ecken.

Angewandt auf dieser Ebene die folgenden Auswirkungen:

Als ich ein Inner Shadow Color # ffd800

Der Verlauf geht von # 067500 bis # 0cff00
Wir haben fast erreicht unsere Ikone! Die Neigung der Farbe, können Sie es wollen! Das Wichtigste ist, eine Abstufung von dunkel zu löschen.

SCHRITT 2 - REFLECTION
Fügen Sie eine neue Ebene oberhalb dieser cha wir gerade gemacht. Wählen Sie die Form des Symbols (Strg + Klick auf Ebene) und - wenn sie sich im neuen Ebene noch leer - aus dem Menü wählen Sie "Select-> Modify-> Contract: Geben Sie 2 Punkte:


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

Nun, ein Schliff, wählen Sie das Auswahl-Werkzeug Rundschreiben
Wählen Sie eine Ellipse, und platzieren Sie es wie unten gezeigt, und drücken Sie die Entf-Taste - wenn Sie können die Transparenz 90/80 gesetzt werden soll:



SCHRITT 3 - Texte und Symbole
Mit einem der vielen kostenlosen font-Bibliothek können Sie ein graphisches Symbol, ein Symbol in der Tat hinzuzufügen. Ist dies anzugeben, da in meinem Fall, indem die Wirkung von:

Otteremo einen schönen Effekt enthalten:


Das Einzige, was fehlt ... den Text Ihrer Wahl!













Complimenti x il Tutorial, Web 2.0 ist die Schaffung von Standards, die Webmaster können kaum zu übersehen ...
Ich suchte im Netzwerk Grafik in eine Schriftart ähnlich der Schaltflächen, die Sie verwendet aber ich habe festgestellt, aufgenommen werden, könnten Sie mir sagen, was es heißt oder wo sie zu finden? Danke
@ Mark: Vielen Dank Mark! Sie können einige Bitmap-Schriften unter dieser Adresse zu finden: http://www.orgdot.com/aliasfonts/
Photoshop Tutorial: Web 2.0 Stil-Ikonen in 3 Schritten | Undolog.com ...
Tutorial zu erstellen Stil-Ikonen mit Photoshop 2.0 ....
hei .. aber du hast vergessen, uns zu sagen, wie der Schatten, unter denen blendet!
.. Sie wissen .. Sie habe schon 99 .. Vor 100
mythischen kleinen Button .. aber es würde einen Schatten Fotze eh eh! ^. ^
@ Dapdudida:
Um mir verzeihen, machte ich einen kleinen Screencast, obwohl es kein Laut kam aus! Gehen Sie hier Techniques Reflexion 
're right
Es gibt zwei Techniken: mit der Maske auf die Ebene (das erste Beispiel) und verwenden Sie die Maske überhaupt! Ich bevorzuge die erste
Great Tutorial! Ich habe darauf gewartet, danke! Ihr Blog zu meinen Favoriten, nur
@ Artemisia: thanks!
Hallo, herzlichen Glückwunsch für die tuotorial Ich war sehr nützlich, aber die kleinen Symbole wo haben Sie?
Ich habe versucht, an der Stelle suchen, die Sie auf dem Laufenden in den Kommentaren vorstehenden Absätzen, aber ich fand nichts.
@ Agriturismo Lazio: die Symbole sind tatsächlich eine Schrift chart. Hier finden Sie viele kostenlose Schriftarten, die Zeichen anstelle der üblichen Symbole der verschiedenen Arten enthalten. Suche auf Google nach "Font Dingbats"
Das bedeutet Jungen nach diesem Schritt .. Ich weiß, es ist Scheiße, aber ich bin "on tilt" Fügen Sie eine neue Ebene über der ein gerade fertig geworden. Wählen Sie die Form (Strg + Klick auf Ebene) und Schicht noch auf dem neuen, leeren "kann jemand erklären, wie wenn ich ein Kind von 2 Jahren?
@ Mark: Sie haben in der Praxis zu tun ist, um die gleiche Form wie die Taste auf der leeren Ebene neu zu erstellen, aber ein wenig kleiner. So wählen Sie den Inhalt einer Ebene können Sie STRG + Mausklick verwenden. Auf diese Weise werden Sie ein Kästchen um die Form der Taste zu sehen. Dann wählen Sie den Layer Vakuum, das zuvor gemacht wurde, dass die Auswahl auf dieser Ebene tätig werden.
Das Problem ist, dass wenn ich auf "Gradient Overlay", dann die ganze Schicht deckt die Farbe des Verlaufs und läßt mich nicht sehen, das große Bild, dass das Formular, das habe ich den ersten Button wird. Zweitens zurückkehren, um Text, erstelle ich die Ebene zu ziehen, sondern auf dem Platz in der internen und externen Schatten ich die Ebene duplizieren einzugreifen. E 'richtig?
Wir danken Ihnen für Ihre hervorragende Anleitung! Da sah ich meine Kreationen kann sich nur verbessern!
@ Matthias: Ich danke dir! Für alle Informationen zögern Sie nicht, mich per E-Mail
Können Sie erklären, wie Sie ein Video-Tutorial Stil Popup-Fenster sichtbar verwaltet?
Nun, ich meine die Auswirkungen auf das Video zu sehen, wo visis Suggest ein Tutorial über das Erstellen von Web 2.0-Stil-Ikonen
@ Giuseppe Serra:
Ich habe die Javascript-Bibliothek ShodowBox, dass Sie die Popup-Fenster mit verschiedenen Inhalten öffnen: Bilder, ermöglicht Flash-oder Quicktime-Filme, HTML-Seiten und mehr.
einfach und bequem wie ... Ich mag es:)