Photoshop Tutorial: Web 2.0-Stil-Ikonen in 3 Schritten

Freitag, 29. Februar 2008

Bild Das Photoshop-Tutorial zeigt, wie man als "relativ einfach zu erstellen Blickfang Symbole von Web 2.0-Stil, mit Spiegelungen und so weiter, ganz einfach, indem Sie die Auswirkungen auf die Ebene. Sobald sie den Prozess, ist ebenfalls möglich - und kostenlos, Ihre Kreativität - zu schaffen, viele Variationen.

SCHRITT 1 - FORM ICONA

Erstellen Sie eine Ebene und zeichnen ein Rechteck Bild (oder Platz) mit leicht abgerundeten Ecken.

Bild

Auf dieser Schicht, die folgende Auswirkungen:

Bild

Bild
Innere Schatten Farbe, wie ich einen # ffd800

Bild
Die Nuance ist von # 067500 bis # 0cff00

Wir haben fast erreicht unser Symbol! Die Schatten der Farbe kann es manchmal so! Wichtig ist, eine Abstufung von dunkel bis klar.

Bild

SCHRITT 2 - REFLECTIONS

Fügen Sie eine neue Ebene oberhalb dieser cha haben wir gerade vor. Wählen Sie die Form des Symbols (Strg + Klick auf Ebene) und - immer auf der neuen Ebene noch leer - von der Auswahl-Menü-> Bearbeiten-> Collapse: Geben Sie 2 Pixel:

BildBild

Stellen Sie die Vordergrundfarbe auf weiß Bild und wählen Sie den Schatten Bild Die von weiß zu transparent. Zeichnen Sie ein Schatten ab, so zu erhalten:

Bild

Nun, eine endgültige Note, wählen Sie die Auswahl-Werkzeug, um Bild Wählen Sie eine elisse und legen Sie sie wie unten gezeigt, und drücken Sie die Entf-Taste - wenn Sie möchten, können Sie die Transparenz für 90/80:

BildBildBild

STEP 3 - Texte und Symbole

Mit einem der vielen freien font-Bibliothek können Sie ein graphisches Symbol, ein Symbol kurz. Wenn dieser Entwurf ist, wie in meinem Fall, indem die Wirkung von:

Bild

Otteremo einen schönen Effekt enthalten:

BildBild

Nicht nur den Text Ihrer Wahl ...!

Verwandte Post

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

  1. getAvatar 1,0 Sonntag, 09. März 2008 um 11:28
    Mark sagte:

    Complimenti x il Tutorial, Web 2.0 ist, die Standards, die der Webmaster kann nicht lassen ...
    Ich habe versucht eine Schrift auf der Karte, die in Tasten ähnlich wie Sie, aber ich habe gefunden, können Sie mir sagen, wie man telefonisch oder wo Sie sie finden? Danke

  2. getAvatar 1,0 Sonntag, 09. März 2008 um 16:15
    Giovambattista Fazioli sagte:

    @ Marco: Dank Mark! Hier finden Sie einige Bitmap-Font zu dieser Adresse: http://www.orgdot.com/aliasfonts/

  3. getAvatar 1,0 Montag, 28. April 2008 um 21:50
    groggit.com sagte:

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

    Tutorial für die Stil-Ikonen mit Photoshop 2,0 ....

  4. getAvatar 1,0 Dienstag, 06. Mai 2008 um 11:10
    dapdudida sagte:

    hei .. aber Sie vergessen, uns zu sagen, wie das zu tun, unter dem Schatten verblasst!
    ;) .. Sie wissen, was .. Sie haben bereits 99 .. Vor 100

    mythischen Schaltfläche .. aber wir möchten gerne ein Schatten fica eh eh! ^. ^

  5. getAvatar 1,0 Dienstag, 06. Mai 2008 auf 14.33 Uhr
    Giovambattista Fazioli sagte:

    @ Dapdudida:
    Sie haben Recht :) Um mir verzeihen, ich habe einen kleinen Screencast, auch wenn der Sound kommt nicht! Hier finden Sie die Reflexion Techniken
    Es gibt zwei Techniken: mit der Maske auf die Ebene (die erste Instanz) und die allgemeine Maske! Ich bevorzuge die erste ;)

  6. getAvatar 1,0 Samstag 12. Juli 2008 bei 10:21
    Artemisia sagte:

    Sehr Gut Tutorial! Ich habe für eine lange Zeit, ich danke Ihnen sehr! Ihr Blog zu meinen Favoriten, nur ;-)

  7. getAvatar 1,0 Samstag 12. Juli 2008 bei 11:09
    Giovambattista Fazioli sagte:

    @ Artemisia: Vielen Dank! :)

  8. getAvatar 1,0 Freitag 25. Juli 2008 um 22:25
    Agriturismo Lazio sagte:

    Hallo, herzlichen Glückwunsch für die tuotorial Ich war nützlich, aber die Symbole, wo Sie sich befinden?
    Ich habe versucht, sich auf die Seite, die Sie gebucht haben in den letzten Kommentaren, aber ich nichts gefunden nn.

  9. getAvatar 1,0 Sonntag, 03. August, 2008 14:31
    Giovambattista Fazioli sagte:

    @ Agriturismo Latium: die Symbole sind tatsächlich eine Schrift Chart. Hier finden Sie viele kostenlose Schriftarten, die das normale Symbole der verschiedenen Arten. Google-Suche "font Dingbats" : P

  10. getAvatar 1,0 Donnerstag, 23. Oktober 2008 bei 23:33
    Marco sagt:

    Dh Jungen nach diesem Schritt .. ist ein cavolata wissen, aber ich bin in der Neigung "Hinzufügen einer neuen Ebene über die gerade. Wählen Sie die Form (Strg + Klick auf Ebene) und die übrigen auf der neuen Ebene noch leer "jemand kann mir erklären, wie wenn ich ein Kind von 2 Jahren?

  11. getAvatar 1,0 Freitag, 24. Oktober, 2008 um 11:35 Uhr
    Giovambattista Fazioli sagte:

    @ MARCO: Sie zu tun haben, in der Praxis, ist wieder die gleiche Form der Taste auf der leeren Ebene, aber ein bisschen kleiner. Um den Inhalt einer Schicht können Sie die Tastenkombination STRG + Mausklick. Auf diese Weise sehen Sie die Auswahl um die Form der Taste. Dann wählen Sie den Vakuum-Schicht, so dass die Auswahl Arbeit bisher auf dieser Ebene.

  12. getAvatar 1,0 Freitag, 24. Oktober, 2008 um 22:15
    Marco sagt:

    Das Problem ist, dass, wenn ich kommen, um Überschneidungen Nuance ", dann die ganze Schicht bezieht sich auf die Farbe der Schatten, und ich kann sehen, dass der Platz ist die Form, die ich ursprünglich auf die Taste. Zweitens, der Rückkehr zum Text, die Ebene, sondern auch den Platz Design, in der internen und externen Schatten unbedingt zu duplizieren die Ebene. E Recht?

  13. getAvatar 1,0 Dienstag, 11. November 2008 bei 21:56
    Martin sagte:

    Vielen Dank für Ihre hervorragende Anleitung! Seit ich meine Kreationen kann nur besser!

  14. getAvatar 1,0 Dienstag, 11. November 2008 bei 22:53
    Giovambattista Fazioli sagte:

    @ Martin: Vielen Dank! Wenn Sie irgendwelche Informationen zögern Sie nicht, schreiben Sie mir :)

  15. getAvatar 1,0 Freitag, 28. November 2008 bei 20:46
    Giuseppe Serra gesagt:

    Ich kann erklären, wie Sie ein Video-Tutorial mit sichtbaren Stil Popup-Fenster?
    Also ich meine al'effetto visisibile, wo, eine Video-Tutorial zum Erstellen von Web 2.0-Stil-Ikonen

  16. getAvatar 1,0 Freitag, 28. November 2008 bei 23:31
    Giovambattista Fazioli sagte:

    @ Giuseppe Serra:

    Ich kann erklären, wie Sie ein Video-Tutorial mit sichtbaren Stil Popup-Fenster?
    Also ich meine al'effetto visisibile, wo, eine Video-Tutorial zum Erstellen von Web 2.0-Stil-Ikonen

    Ich habe die JavaScript-Bibliothek ShodowBox, das Ihnen erlaubt, zu öffnen Popup-Fenster mit verschiedenen Inhalten: Bilder, Flash-Filme oder QuickTime-, HTML-Seiten und mehr.

Hinterlasse einen Kommentar

TAG XHTML erlaubt: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Verwenden Sie <pre> Anlagen-Code