• Heim
  • Über
  • Artikel
  • Kontaktieren Sie uns

: 91 11 9810018780 Mail an: info@aceinfowayindia.com / Call: 91 11 9810018780

  • Artikel geschrieben
  • am 02.12.2009
  • bei 06:45 AM
  • von admin

Erstellen eines Simple Green Button in Photoshop

Hey Jungs noch eine Photoshop-Tutorial. In diesem Tutorial finden ich Ihnen, wie eine einfache grüne Schaltfläche, um in Photoshop erstellen. Das ist sehr einfach und sehr effektiv Tutorial. Ich hoffe, Sie werden dieses Tutorial zu genießen.

Endergebnis

Dies ist, was wir erlebt heute tun

green-button-final1

Schritt # 1

Öffnen Sie Photoshop und ein neues Dokument erstellen, ist mein 550px × 398px mit einem weißen Hintergrund.

Green-button-step1

Schritt # 2

Füllen Sie die Farbe im Hintergrund Schicht, ist mein Farbe # 979696.

green-button-step13

Schritt 3

Wählen Sie das Werkzeug für abgerundetes Rechteck, und erstellen Sie Taste, ist mein Radius 5px, width: 219px und height: 40px..

green-button-step24

Jetzt werden wir für eine gewisse Wirkung

Verlaufsüberlagerung

Styling the Button Doppelklicken Sie auf das Vorschaubild der Button-Ebene in der Ebenen-Panel zu öffnen, die Ebenenstile Dialogfeld, werden wir für ein Vertical Gradient-Effekt für den Button aus. Dann klicken Sie auf den Farbverlauf auf der rechten Seite der Gradient Option zur Öffnung der Farbverlauf-Editor.

Green-Button

Doppelklicken Sie auf left-color-stop und geben Sie den Farbwert # 55A646, dann klicken Sie doppelt auf right-color-stop und geben Sie den Farbwert # A5CE3F.

green-button-step4a

Schlagschatten

Weiter gelten die Schlagschatten Ebenenstil. Halten Sie den Winkel von 120o, als die Werte für Deckkraft, Entfernung und Größe. Ich wähle, um die Deckkraft auf 20%, Entfernung und Größe auf 1px auf 5px gesetzt.

green-button-step4b

Inner Shadow

Weiter gelten die Inner Shadow Ebenenstil. Halten Sie den Winkel von 120o, als eine Änderung der Werte der Deckkraft, Choke und Größe. Ich wähle, um die Deckkraft auf 27% und Choke bei 100% und Größe auf 2px gesetzt.

Nächste Änderung der Blending Option auf Normal.

green-button-step4c

Bevel Relief

Als nächstes werden wir Bevel Relief, wenden Sie zuerst Ändern der Style zu Inner Bevel und Technik zu glatt, als die Werte für Tiefe, Richtung, Größe und zu mildern. Ich wähle die Tiefe auf 100% gesetzt, Richtung bei Up, Größe auf 1px und Soften auf 0px

Halten Sie den Winkel von 120o, Zielhöhe 30o

Highlight-Modus: Ich wähle, um die Deckkraft auf 0% gesetzt.

Shadow-Modus: Ich wähle, um die Deckkraft auf 14% festgesetzt.

green-button-step4d

Hieb

Schließlich werden wir für den Schlaganfall. Erstens ändern die Werte der Größe. Ich wähle die Größe auf 1px gesetzt. Ändern der Position bei Inside

Ich wähle, um die Deckkraft auf 50% festgesetzt.

Ändern Sie die Farbe aus der Stroke standardmäßig # 529846

green-button-step4e

Sollte wie folgt aussehen.

green-button-step4

Schritt # 4

Wählen Sie "Horizontal Textwerkzeug und geben Sie Text auf der Vorderseite.

Wir werden für eine gewisse Wirkung für Text.

green-button-step5

Verlaufsüberlagerung

Doppelklicken Sie auf das Vorschaubild der Textebene in der Ebenen-Panel zu öffnen, die Ebenenstile Dialogfeld. Zuerst haben wir Verlaufsüberlagerung gilt, werden wir ein Vertical Gradient-Effekt gilt für Ihren Text. Dann klicken Sie auf den Farbverlauf auf der rechten Seite der Gradient Option zur Öffnung der Farbverlauf Editor ..

green-button-step5a

Doppelklicken Sie auf left-color-stop und geben Sie den Farbwert # DDDCDC, dann klicken Sie doppelt auf Mitte-Farb-Anschlag, und geben Sie den Farbwert # FFFFFF.

green-button-step5b

Schlagschatten

Schließlich werden wir für den Schlagschatten Ebenenstil. Halten Sie den Winkel von 120o, als die Werte für Deckkraft, Entfernung und Größe. Ich wähle, um die Deckkraft auf 34%, Entfernung und Größe auf 1px auf 1px gesetzt.

green-button-step5bc

Endergebnis

green-button-final1

Wenn Sie möchten, dass Ihre Arbeit einchecken, können Sie die PSD-Datei Download für dieses Tutorial

Download-Datei [240KB]

Wenn Sie möchten mehr Inspiration von uns erhalten, prüfen Sie bitte abonnieren Sie unseren Feed von RSS-oder E-Mail.

Abgelegt unter: Photoshop, Tutorials von admin

Werbung für uns

  • Add to Mixx!

Tags: Photoshop, Tutorials

In Verbindung stehende Artikel:

Wenn Sie genossen diesen Artikel lesen, schauen Sie bitte auf ähnliche Artikel unter:

    • Erstellen Nizza Inset Button Text in Photoshop
    • Erstellen Buchdruck Typografie in Photoshop
    • Wie nach Nizza Easy 3D-Text-Effekt in Photoshop erstellen
    • Erstellen I-Phone Wie Button in Photoshop
    • How to Create a Nice Sleek Dark Button in Photoshop
Untitled Document

Eine Kommentare

  1. designfollow sagt am: 2. Dezember 2009 um 12:52 Said:

    großes Tutorial, vielen Dank.

Submit a Comment

XHTML: Sie können diese Tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> < del datetime = ""> <em> <i> <q cite=""> <Stark>


CommentLuv Enabled mehr
«5 Steps to Write Better CSS Teil II
Untitled Document

    Abonnieren

  • Abonnieren Sie unseren Feed
  • Abonnieren per E-Mail
  • Folgen Sie uns auf Twitter
  • Sponsor
  • Sponsor
  • Sponsor
  • Sponsor
  • Sponsor
  • Sponsor

    • Suche

  • Kalender

    Dezember 2009
    M T W T F S S
    «Nov
    1 2 3 4 5 6
    7 8 9 10 11 12 13
    14 15 16 17 18 19 20
    21 22 23 24 25 26 27
    28 29 30 31
    • Seiten

      • Heim
      • Über
      • Artikel
      • Kontaktieren Sie uns
    • Kategorien

    • Css (21)
    • Design / Inspiration (51)
    • Freebies (36)
    • Graphic Design (10)
    • Photoshop (18)
    • Ressourcen (33)
    • Seo (1)
    • Tools (9)
    • Tutorials (33)
    • Typografie (4)
    • Web-Entwicklung (5)
    • Wordpress (6)
    • Archiv

    • Dezember 2009
    • November 2009
    • Oktober 2009
    • September 2009
    • August 2009
    • Juli 2009
    • Juni 2009
    • Mai 2009
    • Neueste Beiträge

    • Css
    • Design / Inspiration
    • Freebies
    • Graphic Design
    • Photoshop
    • Beliebte Posts

    • 5 Steps to Write Better CSS Teil II
    • Wie erzeugt man gut aussehende Form ohne Tisch
    • Wie nach Nizza Scalable CSS erstellen Grundlage Breadcrumbs
    • 30 Webseiten mit maximaler Orange
    • Erstellen Buchdruck Typografie in Photoshop
    • 5 Steps to Write Better Css
    • Erstellen Sie eine schöne Box Icon in Photoshop
    • Tag cloud

    Css Design Fonts Freebies Graphic Design Grafik Design Icons Inspiration Inspitation Photoshop Resources Tools Tutorials Typografie Web development Wordpress

    • Freunde

      • Abduzeedo
      • Neben Alist
      • Bittbox
      • CrazyLeaf Design
      • CSS-Tricks
      • David Walsh
      • Fudgegraphics
      • Fuel Your Creativity
      • Entwickler-Hilfe
      • Instant Shift
      • Line25
      • Mirificampress
      • My Ink Blog
      • Noupe
      • PSDFan
      • PSDTUTS
      • Sagen Brain
      • Six Revisions
      • Spoon Graphics
      • Toxel
      • Vandelay Design
      • Wir fungieren
      • Web Designer Depot
      • Web Designer-Ledger
      • Web Designer Wall
      • You The Designer
    • Translator

      English flagItalian flagKorean flagChinese (Simplified) flagChinese (Traditional) flagPortuguese flagGerman flagFrench flagSpanish flagJapanese flagArabic flagRussian flagGreek flagDutch flagBulgarian flagCzech flagCroat flagDanish flagFinnish flagHindi flagPolish flagRumanian flagSwedish flagNorwegian flagCatalan flagFilipino flagHebrew flagIndonesian flagLatvian flagLithuanian flagSerbian flagSlovak flagSlovenian flagUkrainian flagVietnamese flagAlbanian flagEstonian flagGalician flagMaltese flagThai flagTurkish flagHungarian flag
  • SPONSOREN

    Check out UPrinting auf YouTheDesigner.


    Business Cards Online

    Web Design Blog Directory

.
Untitled Document
Zurück zum Anfang

General

Diese vielleicht von Interesse
  • Über unser Unternehmen
  • Testimonials
  • Kontakt Details
  • Blog
  • Social - Twitter, Flickr

Works

Beispiele aus früheren Projekten
  • Über unser Unternehmen
  • Testimonials
  • Kontakt Details
  • Blog
  • Social - Twitter, Flickr

Services

Das ist was, wo heute verkaufen
  • Über unser Unternehmen
  • Testimonials
  • Kontakt Details
  • Blog
  • Social - Twitter, Flickr

Kontakt Details

Willst du uns mieten? beginnen Sie hier ...
  • Freies Projekt Assesment
  • E-Mail - info@aceinfowayindia.com
  • Tel: 91 11 9810018780

© Copyright 2009, Alle Rechte vorbehalten, Ace Infoway Indien Autovermietung Ace Infoway Indien für Ihren nächsten Design-Projekt. Sehen Sie sich unsere Portfolios.