Photoshop Tutorial: Web 2.0 Stil-Ikonen in 3 Schritten

Bild Dieses Photoshop Tutorial zeigt, wie es "verhältnismäßig" einfach zu erstellen ist Blickfang Ikonen für Web 2.0-Stil mit Reflexionen und so weiter, einfach, indem Sie die Auswirkungen auf die Schicht. Wenn Sie verstehen den Prozess, ist es auch möglich - freien Lauf zu lassen Ihrer Kreativität - zu viele Variationen zu erstellen.

STEP 1 - FORM ICON

Wir schaffen eine Ebene und zeichnen Sie ein Rechteck Bild (Oder quadratisch) mit leicht abgerundeten Ecken.

Bild

Wenden Sie diese Schicht folgende Auswirkungen:

Bild

Bild
Wie habe ich einen inneren Schatten Farbe # ffd800

Bild
Die Steigung geht aus # 067500 bis # 0cff00

Wir haben fast unser Symbol! Die Rotfärbung, dass Sie es mögen! Wichtig war, eine Abstufung von dunkel bis klar.

Bild

SCHRITT 2 - REFLECTION

Fügen Sie eine neue Ebene oberhalb dieser cha wir gerade gemacht haben. Wählen Sie die Form des Symbols (Ctrl + Klick auf Schicht) und - wenn sie sich im neuen leeren Ebene - wählen Sie aus dem Menü Select-> Modify-> Contract: Geben Sie 2 Pixel:

BildBild

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

Bild

Nun, den letzten Schliff, wählen Sie eine kreisförmige Selektion Bild , Wählen einer Ellipse und platzieren Sie es, wie unten dargestellt, und drücken Sie die Entf-Taste - wenn man Sie hier die Transparenz zu 90/80 setzen möchten:

BildBildBild

STEP 3 - Text und Symbole

Mit einer der vielen Bibliotheken kostenlose Fonts Sie ein graphisches Symbol, ein Symbol in kurzer hinzufügen können. Wenn dieser Entwurf ist, in meinem Fall, indem die Wirkung:

Bild

Otteremo ein schöner Effekt, um zurückzukehren:

BildBild

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

21 Kommentare auf "Photoshop Tutorial: Web 2.0 Stil-Ikonen in 3 Schritten"

  1. 9. März 2008 Mark :

    X Nun das Tutorial gemacht, ist Web 2.0 macht die Standards, die Webmaster kaum vergessen können ...
    Ich habe versucht, auf der Netzwerk-Graphen in einer Schrift ähnlich wie die Schaltflächen, die Sie genutzt werden, aber ich habe nicht gefunden, könnten Sie mir sagen, was es oder dort genannt, es zu finden? Dank

  2. 9. März 2008 Giovambattista Fazioli :

    @ Mark: Danke Mark! Sie können einige Bitmap-Schriften, diese Adresse zu finden: http://www.orgdot.com/aliasfonts/

  3. 28. April 2008 groggit.com:

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

    Tutorial um Icons mit Photoshop 2.0-Stil zu schaffen ....

  4. 6. Mai 2008 dapdudida:

    hei .. aber du hast vergessen, uns mitzuteilen, wie unter dem Schatten verblassen!
    ;) .. Sie wissen .. 99 .. Sie haben dies bereits getan ist 100

    mythischen kleinen Knopf .. aber es wäre ein Schatten cunt eh nehmen eh! ^. ^

  5. 6. Mai 2008 Giovambattista Fazioli :

    @ Dapdudida:
    Sie haben Recht :) Um vergib mir, ich machte einen kleinen Screencast, obwohl es kam kein Ton! Gehe hier zum Nachdenken Techniken
    Es gibt zwei Techniken: mit der Maske auf die Ebene (das erste Beispiel) und die allgemeine Verwendung von Masken! Ich bevorzuge die erste ;)

  6. 12. Juli 2008 Artemisia :

    Große Tutorial! Ich war für eine lange Zeit suchen, thanks a lot! Ihr Blog zu meinen Favoriten, nur ;-)

  7. 25. Juli 2008 auf dem Bauernhof Latium :

    Hallo, herzlichen Glückwunsch für die tuotorial Ich war sehr nützlich, aber die kleinen Icons, wo Sie gefunden?
    Ich habe versucht der Suche auf der Website, die Sie in den Kommentaren Absätzen geschrieben, aber ich fand nichts.

  8. 3. August 2008 Giovambattista Fazioli :

    @ Bauernhof Latium: die Symbole sind eigentlich eine Schriftart Diagramm. Hier finden Sie viele kostenlose Schriftarten, Zeichen anstelle der normalen Symbole verschiedener Art enthalten. Suche auf Google "Dingbatfont" : P

  9. 23. Oktober 2008 Mark :

    Das Jungs nach diesem Schritt .. Ich weiß, es ist Scheiße, aber ich bin on tilt "Add eine neue Ebene über der von Ihnen gerade erstellt haben. Wählen Sie die Form (Strg + Klick auf Ebene) und weiterhin auf die neue leere Ebene "kann mir jemand bitte erklären, wie man ein Kind von 2 Jahren waren?

  10. 24. Oktober 2008 Giovambattista Fazioli :

    @ Marco: Sie haben in der Praxis zu tun ist, die gleiche Form des Knopfes auf der Vakuum-Schicht neu, aber etwas kleiner. So wählen Sie den Inhalt einer Ebene können Sie mit Strg + Klick. Auf diese Weise werden Sie die Auswahl um der Form der Taste. Wählen Sie dann die leere Ebene, so dass die Auswahl getroffen zuvor auf dieser Ebene handeln wird.

  11. 24. Oktober 2008 Mark :

    Das Problem ist, dass wenn ich gesetzt bekommen "Gradient Overlay" und dann alles mit der Schicht der Farbe des Gradienten ist überdacht und ermöglicht es mir, die quadratische Form zu sehen, dass ich auf den Knopf zuerst. Zweitens wieder am Anfang, ich schaffe das Niveau, aber die Platzgestaltung im Schatten draußen und drinnen ich eingreifen müssen unbedingt duplizieren Sie die Ebene. Und "richtig?

  12. 11. November 2008 Matthias:

    Wir danken Ihnen für Ihre hervorragende Anleitung! Seit ich sah meine Kreationen kann nur besser!

  13. 11. November 2008 Giovambattista Fazioli :

    @ Mathias: Vielen Dank! Für alle Informationen zögern Sie nicht, mich per E-Mail :)

  14. 28. November 2008 Giuseppe Serra :

    Kannst du erklären, wie Sie ein Video-Tutorial mit sichtbaren Fenster Pop-Up-Stil bearbeitet haben?
    Kurz gesagt, bin ich um die Wirkung auf das Video verweist, wo visisibile ein Lernprogramm zum Erstellen von Web 2.0 Stil-Ikonen empfehlen

  15. 28. November 2008 Giovambattista Fazioli :

    @ Giuseppe Serra:

    Können Sie erklären, wie Sie ein Video-Tutorial mit sichtbarem Fenster Pop-Up-Stil bearbeitet haben?
    Kurz gesagt, beziehe ich mich auf Auswirkungen auf die Video-visisibile wo Sie ein Tutorial zum Erstellen von Web 2.0 Stil-Ikonen empfehlen

    Ich habe die Javascript-Bibliothek ShodowBox , dass Sie Popup-Fenster mit verschiedenen Inhalten öffnen können: Bilder, Flash-Filme oder QuickTime, HTML-Seiten und vieles mehr.

  16. 18. Juni 2009 photoshop tutorial :

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

  17. 6. März 2010 Stephen:

    Hallo, wenn ich auf die macshera der Schicht verschwindet anzuwenden versuchen und den zweiten Platz auf der Ebenenmaske ist weiß und nicht schwarz wie im Film, warum?

  18. 8. März 2010 Giovambattista Fazioli :

    @ Stephen: Sie müssen bei gedrückter ALT-Taste, wenn Sie die Maske anwenden : D

  19. 10. Juli 2010 WM-Code :

    Excellent guide, danke!
    Ich vermisse nur eine Sache ... Die Passage, in der Sie beim Einlegen der Ellipse: Das kann ich nicht geben, dass Auswirkungen auf das Symbol.

    Ich kann nicht verstehen diesem Schritt:

    Nun, den letzten Schliff, wählen Sie das Bild kreisförmige Selektion, wählen Sie eine Ellipse und legen Sie es wie unten gezeigt, und drücken Sie die Entf-Taste - wenn Sie können die Transparenz auf 90/80 gesetzt werden soll:

    Vielen Dank im Voraus

  20. 10. Juli 2010 Giovambattista Fazioli :

    Digit @ WM: Dies ist ein einfacher Schritt. Die Gradientenschicht geschnitten wird, vorzugsweise mit einer Kreisform. Was Sie tun müssen, ist folgen der dargestellten Figuren, um die Wirkung ähnlich wie vorgeschlagen, aber Sie können auch für verschiedene Werte für verschiedene Effekte. Auf Ebene "Glanz", was zu schneiden, verwenden Sie eine kreisförmige Auswahl um den Bereich abgrenzen zu löschen und drücken Sie die "DELETE" abzuschneiden unten.
    Darüber hinaus können Sie die Deckkraft der Ebene auf 90% bzw. 80% auf die verwendeten Farben basieren gesenkt werden.
    Ich hoffe, dass Ihre Frage beantwortet.

Hinterlasse einen Kommentar

XHTML TAG PERMIT: <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 [cc_actionscript][/cc_actionscript] // Actionscript [cc_actionscript3][/cc_actionscript3] // Actionscript 3 [cc_css][/cc_css] // CSS Style Sheet [cc_html][/cc_html] // HTML [cc_js][/cc_js] // Javascript [cc_objc][/cc_objc] // Objective-C [cc_php][/cc_objc] // PHP [cc_sql][/cc_sql] // SQL 


Stoppen SOPA