• Acasă
  • Despre
  • Articolele
  • Reclamă
  • Contactati-ne

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

  • Articolul scris
  • pe 02.12.2009
  • de la 06:45
  • de admin

Cum de a crea un simplu buton verde în Photoshop

Hey guys una mai mult Photoshop. In acest tutorial voi găsi tu cum la spre a crea un simplu buton verde in Photoshop. Acest lucru este foarte simplu şi destul de eficiente tutorial. Sper că vă veţi bucura de acest tutorial.

Rezultatul final

Aceasta este ceea ce am plecat face azi

green-button-final1

Pasul # 1

Photoshop Deschideţi şi a crea un nou document, a mea este de 550px × 398px cu un fundal alb.

Green-button-step1

Pasul # 2

Completaţi în stratul de culoare de fundal, culoarea mea este # 979696.

green-button-step13

Pasul # 3

Selectaţi rotunjite dreptunghi de Instrumentul şi de a crea buton, a mea Radius este 5px, width: 219px si height: 40px..

green-button-step24

Acum, vom aplica un anumit efect

Gradient Overlay

Styling buton dublu-clic pe miniatura Layer butonului din Panoul de straturi pentru a deschide caseta de dialog Layer Stiluri, vom aplica o verticale Gradient efect pentru butonul. Apoi faceţi clic pe Gradient Culoare privind dreptul de opţiune Gradient de a deschide Color Gradient Editor.

Green-Button

Faceţi dublu-clic pe partea stanga-culoare-stop şi introduceţi valoarea de culoare # 55A646, apoi dublu-clic pe dreapta-culoare-stop şi introduceţi valoarea de culoare # A5CE3F.

green-button-step4a

Drop Shadow

Următoare se aplică Drop Shadow stil strat. Păstraţi unghiul la 120o, decât modificarea valorilor de opacitate, la distanţă şi Dimensiune. Eu aleg pentru a seta opacitatea la 20%, distanţa de la 1px şi de mărime la 5px.

green-button-step4b

Inner Shadow

Următoare se aplică stilul interior stratul de Shadow. Păstraţi unghiul la 120o, decât modificarea valorilor de opacitate, Choke şi Mărime. Eu aleg pentru a seta opacitatea la 27% şi Choke la 100% şi de mărime la 2px.

Următorul Modificaţi opţiunea Amestecul de pe Normal.

green-button-step4c

Bevel Emboss

În continuare vom aplica Bevel Emboss, Prima Schimbarea Stil pentru a interioară Bevel si Tehnica pentru a netezi, decât schimbarea valorilor de adâncime, Direcţia, dimensiune şi înmuia. Eu aleg pentru a seta adâncimea la 100%, de la Directia Up, de mărime la 1px şi moleşi la 0px

Păstraţi unghiul la 120o, altitudinea la 30o

Mod de Highlight: aleg pentru a seta opacitatea la 0%.

Shadow mode: aleg pentru a seta opacitatea la 14%.

green-button-step4d

Lovitură

În cele din urmă, vom aplica Accident vascular cerebral. În primul rând schimbarea valorilor de mărimea acestora. Să aleg pentru a seta dimensiunea la 1px. Schimbarea Poziţia la Inside

Eu aleg pentru a seta opacitatea la 50%.

Modificarea culorii Cursă de la implicit la # 529846

green-button-step4e

Ar trebui să arate acest lucru.

green-button-step4

Pasul # 4

Selectaţi orizontale Tip Tool şi text de tip pe fata.

Vom aplica un anumit efect pentru text.

green-button-step5

Gradient Overlay

Faceţi dublu-clic pe miniatura stratul de text scris în Panoul de straturi pentru a deschide caseta de dialog Layer Stiluri. În primul rând, vom aplica Gradient Overlay, vom aplica un efect vertical Gradient pentru text. Apoi faceţi clic pe Gradient Culoare privind dreptul de opţiune Gradient de a deschide Color Gradient Editor ..

green-button-step5a

Faceţi dublu-clic pe partea stanga-culoare-stop şi introduceţi valoarea de culoare # DDDCDC, apoi dublu-clic pe centru-culoare-stop şi introduceţi valoarea de culoare FFFFFF #.

green-button-step5b

Drop Shadow

În cele din urmă, vom aplica Drop Shadow stil strat. Păstraţi unghiul la 120o, decât modificarea valorilor de opacitate, la distanţă şi Dimensiune. Eu aleg pentru a seta opacitatea la 34%, distanţa de la 1px şi de mărime la 1px.

green-button-step5bc

Rezultatul final

green-button-final1

Dacă doriţi să verifice activitatea dumneavoastră, puteţi descărca fişierul PSD pentru acest tutorial

Descarca File [240KB]

Dacă doriţi să primiţi inspiraţie mai mult de la noi, vă rugăm să ia în considerare aderarea la feed noastre prin RSS sau prin e-mail.

Filed under: Photoshop, Tutoriale de admin

Promoveaza-ne

  • Add to Mixx!
Ace Hosting India

Tag-uri: Photoshop, Tutoriale

Articole înrudite:

în cazul în care aţi bucurat de citirea acestui articol, vă rugăm să verificaţi articole conexe, altele de mai jos:

    • Cum se creează Nisa Inset Text Button in Photoshop
    • Cum se creează Letterpress Tipografii în Photoshop
    • Cum se creează Nisa Easy 3D Efect Text în Photoshop
    • Cum se creează i-Phone Ca buton în Photoshop
    • Cum se creează un Nisa elegant Dark Button in Photoshop
Untitled Document

5 Comentarii

  1. designfollow spune pe: 2 decembrie 2009 la 12:52 a spus:

    mare tutorial, vă mulţumesc.

  2. FAQPAL spune pe: 4 decembrie 2009, la 2:24 a spus:

    Simple, dar eficiente rezultat final, multumesc pentru parts.
    FAQPAL's blog ultima .. HTTP Headers for Dummies My ComLuv Profil

  3. ben spune pe: 4 decembrie 2009, la 6:48 a spus:

    mare tutorial, vă mulţumesc.

  4. favSHARE spune pe: 4 decembrie 2009 la 1110: pm a spus:

    Acest articol a fost partajat de pe favSHARE.net. Du-te şi vot it!
    favSHARE's blog ultima .. 14 Cifre cheie de top şi combinaţii Font Resurse My ComLuv Profil

  5. Web Design de la Lyon Solutiosn spune pe: 19 decembrie 2009, la 10:45 a spus:

    Ar fi un sfat foarte util pentru incepatori ;)

Trimiteţi un comentariu

XHTML: Puteţi folosi aceste tag-uri: <a href="" titlu=""> <abbr titlu=""> <b> <blockquote cite=""> <cite> <code> < del datetime = ""> <em> <i> <q cite=""> <strike> <strong>


CommentLuv Enabled arătaţi mai multe
«5 paşi pentru a scrie o mai bună CSS Partea a II -
Developer's Paradise Site-uri de la Săptămâna de 4 decembrie 2009 »
Untitled Document

    Aboneaza-te

  • Aboneaza-te la feed nostru
  • Abonare prin e-mail
  • Urmaţi-ne pe Twitter
  • WooThemes - În cazul în care există un Woo, există o cale!
  • DreamTemplate - template-uri web

    • Căuta

  • Calendarul

    Decembrie 2009
    O T V T ° ELE ELE
    «Noi Jan »
    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
    • Pages

      • Acasă
      • Despre
      • Articolele
      • Reclamă
      • Contactati-ne
    • Categorie

    • CSS (23)
    • Design / Inspiraţie (61)
    • Freebies (44)
    • Graphic Design (12)
    • Photoshop (25)
    • Resurse (38)
    • SEO (1)
    • Tools (9)
    • Tutoriale (38)
    • Tipografie (6)
    • Web development (6)
    • Wordpress (6)
    • Arhivele

    • Ianuarie 2010
    • Decembrie 2009
    • Noiembrie 2009
    • Octombrie 2009
    • Septembrie 2009
    • August 2009
    • Iulie 2009
    • Iunie 2009
    • Mai 2009
    • Recent Posts

    • Css
    • Design / Inspiraţie
    • Freebies
    • Graphic Design
    • Photoshop
    • Posturi populare

    • 5 paşi pentru a scrie o mai bună CSS Partea a II -
    • Cum se creează Nisa scalabile CSS Bazat Breadcrumbs
    • Cât de a crea good looking forma fara masa
    • 21 Big, Bold Tipografii Website Design
    • 30 Site-uri cu maxim Orange
    • 20 Exemplu de asomare, Infographics pentru inspiraţie dvs.
    • 33 "Hello" Pagini exemplu, pentru inspiratia
    • Tag cloud

    CSS Design Fonturi Freebies Design Grafic Design de grafica Icoane Inspiraţie Inspitation Photoshop Resurse Instrumente Tutoriale tipografie Web dezvoltare Wordpress

    • Prieteni

      • Abduzeedo
      • Alist Apart
      • Bittbox
      • CrazyLeaf Design
      • Css Tricks
      • David Walsh
      • Fudgegraphics
      • Combustibil creativitatea
      • Ajutor pentru dezvoltatori
      • Instant Shift
      • Line25
      • Mirificampress
      • My Blog de cerneală
      • Noupe
      • PSDFan
      • PSDtuts
      • Share Brain
      • Şase Revizuiri
      • Spoon Graphics
      • Toxel
      • Vandelay Design
      • Suntem Funcţia
      • Web Designer Depot
      • Web Designer Ledger
      • Web designer de perete
      • Tu Designer
    • Community News

        • Google despre pentru a obţine o Makeover

          "Oricine doreste succesul constantă trebuie să se schimbe în mod constant", şi este ce în ce mai mult şi mai evident că Google subscrie la această şcoală de gândire. Online Marketing Blog este o raportare ...

          11 decembrie 2009
        • Cum de a crea un simplu buton verde în Photoshop

          lui este foarte simplă şi destul de eficiente tutorial. Sper că vă veţi bucura de acest tutorial.

          9 decembrie 2009
        • 11 Free Fonturi Grunge pentru designeri

          În acest post, veţi găsi 11 gratuit Fonturi Grunge pentru designeri. Aceste fonturi gratuite sunt perfecte pentru dureros desenele dumneavoastră. Sper să vă veţi bucura de acest lucru.

          9 decembrie 2009
        • 21 Big, Bold Tipografii Website Design

          au o privire la aceste 21 Beautiful Mare, Bold Tipografii Website Design şi să ne gândurile dvs. în comentariu.

          9 decembrie 2009
    • Add News

      Puteţi trimite link-urile dvs. folosind formularul de mai jos şi ele vor fi aprobate de obicei, în câteva ore.






      Se incarca ...

    • Traducător

      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
  • SPONSORII

    Check out UPrinting pe YouTheDesigner.


    Business Cards Online

    Web Design Blog Directory

.
Untitled Document
Back to top

Generale

Aceste Poate de oarecare interes
  • Compania noastra Despre
  • Testimoniale
  • Detalii Contact
  • Blog
  • Social - Twitter, Flickr

Lucrări

Exemple de proiecte din trecut
  • Compania noastra Despre
  • Testimoniale
  • Detalii Contact
  • Blog
  • Social - Twitter, Flickr

Services

Aceasta este ceea ce în cazul în care vinde de azi
  • Compania noastra Despre
  • Testimoniale
  • Detalii Contact
  • Blog
  • Social - Twitter, Flickr

Detalii Contact

Vrei să angajeze noi? a începe aici ...
  • Drum liber Project Assesment
  • E-mail - info@aceinfowayindia.com
  • Tel: 91 11 9810018780

Copyright © 2009, All Right Reserved, Ace Infoway India Închiriez Ace Infoway India, pentru proiectul dumneavoastra de proiectare următoare. Portofoliul nostru de View.