Photoshop Tutorial: Web 2.0 Stil-Ikonen in 3 Schritten

Freitag, 29. Februar 2008

Bild 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 Bild (oder Platz) mit leicht abgerundeten Ecken.

Bild

Angewandt auf dieser Ebene die folgenden Auswirkungen:

Bild

Bild
Als ich ein Inner Shadow Color # ffd800

Bild
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.

Bild

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:

BildBild

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

Bild

Nun, ein Schliff, wählen Sie das Auswahl-Werkzeug Rundschreiben Bild 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:

BildBildBild

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:

Bild

Otteremo einen schönen Effekt enthalten:

BildBild

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

Verwandte Post

War dieser Artikel hilfreich?: Per nientePocoAbbastanzaMoltoMoltissimo
Loading ... Loading ...

17 Kommentare zu "Photoshop Tutorial: Web 2.0 Stil-Ikonen in 3 Schritten"

  1. getAvatar 1,0
    Der 09. März 2008 Mark:

    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

  2. getAvatar 1,0
    Der 09. März 2008 Giovambattista Fazioli:

    @ Mark: Vielen Dank Mark! Sie können einige Bitmap-Schriften unter dieser Adresse zu finden: http://www.orgdot.com/aliasfonts/

  3. getAvatar 1,0
    28. April 2008 groggit.com:

    Photoshop Tutorial: Web 2.0 Stil-Ikonen in 3 Schritten | Undolog.com ...

    Tutorial zu erstellen Stil-Ikonen mit Photoshop 2.0 ....

  4. getAvatar 1,0
    06 mag, 2008 dapdudida:

    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! ^. ^

  5. getAvatar 1,0
    06 mag, 2008 Giovambattista Fazioli:

    @ Dapdudida:
    're right :) Um mir verzeihen, machte ich einen kleinen Screencast, obwohl es kein Laut kam aus! Gehen Sie hier Techniques Reflexion
    Es gibt zwei Techniken: mit der Maske auf die Ebene (das erste Beispiel) und verwenden Sie die Maske überhaupt! Ich bevorzuge die erste ;)

  6. getAvatar 1,0
    12. Juli 2008 Artemisia:

    Great Tutorial! Ich habe darauf gewartet, danke! Ihr Blog zu meinen Favoriten, nur ;-)

  7. getAvatar 1,0
  8. getAvatar 1,0
    25. Juli 2008 ländlichen Ontario:

    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.

  9. getAvatar 1,0
    03 Aug, 2008 Giovambattista Fazioli:

    @ 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" P

  10. getAvatar 1,0
    23. Oktober 2008 MARCO:

    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?

  11. getAvatar 1,0
    24. Oktober 2008 Giovambattista Fazioli:

    @ 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.

  12. getAvatar 1,0
    24. Oktober 2008 MARCO:

    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?

  13. getAvatar 1,0
    11. November 2008 Matthias:

    Wir danken Ihnen für Ihre hervorragende Anleitung! Da sah ich meine Kreationen kann sich nur verbessern!

  14. getAvatar 1,0
    11. November 2008 Giovambattista Fazioli:

    @ Matthias: Ich danke dir! Für alle Informationen zögern Sie nicht, mich per E-Mail :)

  15. getAvatar 1,0
    28. November 2008 Giuseppe Serra:

    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

  16. getAvatar 1,0
    28. November 2008 Giovambattista Fazioli:

    @ Giuseppe Serra:

    Können Sie erklären, wie Sie ein Video-Tutorial Stil Popup-Fenster sichtbar verwaltet?
    Nun meine ich das Video zu sehen, wo al'effetto visis Schlagen Sie eine Anleitung zum Erstellen von Web 2.0-Stil-Ikonen

    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.

  17. getAvatar 1,0
    18. Juni 2009 Photoshop-Tutorial:

    einfach und bequem wie ... Ich mag es:)

Leave a comment

TAG XHTML Berechtigungen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERTION CODE:
 <pre></pre>         // blocco generico [code][/code]       // blocco generico [as][/as]           // Actionscript [css][/css]         // CSS Style Sheet [html][/html]       // HTML [js][/js]           // Javascript [objc][/objc]       // Objective-C [php][/php]         // PHP [sql][/sql]         // SQL