• Bagay
  • Tungkol sa
  • Artikulo
  • Makipag-ugnayan sa amin

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

  • Artikulo Written
  • on 02.12.2009
  • at 06:45
  • sa pamamagitan ng admin

Paano Gumawa ng isang Simple Green Button sa Photoshop

Hey guys isa pa Photoshop Tutorial. Sa ganitong Tutorial kukunin ko na mahanap ka Paano Gumawa ng isang Simple Green Button sa Photoshop. Ito ay napaka-simple at ganap epektibong tutorial. Umaasa ako na masisiyahan ka sa ito tutorial.

Final Result

Ito ay kung ano ang aming wala na ko ngayon

green-button-final1

Hakbang # 1

Buksan ang photoshop at lumikha ng isang bagong dokumento, minahan ay 550px × 398px na may isang puting background.

Green-button-step1

Hakbang # 2

Punan ang mga kulay sa background layer, minahan ng kulay ay # 979,696.

green-button-step13

Hakbang # 3

Piliin ang bilugan Parihaba Tool at lumikha ng button, minahan Radius ay 5px, width: 219px at taas: 40px..

green-button-step24

Ngayon kami ay mag-apply sa ilang epekto

Gradient Overlay

Styling ang Button i-double click sa pindutan Layer's thumbnail sa Layers Panel para buksan ang Layer Estilo dialog box, kami ay mag-aplay ng isang Epekto Vertical Gradient para sa iyong mga pindutan. Pagkatapos i-click ang Kulay ng Gradient sa kanan ng Gradient pagpipilian upang buksan ang Kulay ng Gradient Editor.

Green-Button

I-double click sa kaliwa na-kulay-hihinto at ipasok ang halaga ng kulay ng # 55A646, pagkatapos ay i-double click sa right-kulay-hihinto at ipasok ang halaga ng kulay ng # A5CE3F.

green-button-step4a

Drop Shadow

Susunod na mag-aplay ang mga layer Drop Shadow estilo. Panatilihin ang Angle sa 120o, kaysa palitan ang mga halaga ng kalabuan, Distance at Sukat. Pinili ko ang mag-set ng kalabuan sa 20%, Distance sa 1px at Sukat sa 5px.

green-button-step4b

Inner Shadow

Susunod na mag-aplay ng Inner Shadow layer style. Panatilihin ang Angle sa 120o, kaysa palitan ang mga halaga ng kalabuan, masamid at Sukat. Pinili ko ang mag-set ng kalabuan sa 27% at mabulunan sa 100% at Sukat sa 2px.

Next Baguhin ang opsyon na Blending sa Normal.

green-button-step4c

Bevel magpalamuti

Susunod na kami ay mag-aplay Bevel magpalamuti, Unang Pagpapalit ng style sa Inner Bevel at pamamaraan sa swabe, kaysa palitan ang mga halaga ng lalim, Direksyon, Sukat at lumambot. Pinili ko upang i-set ang Lalim sa 100%, sa Direksyon Up, Sukat sa 1px at lumambot sa 0px

Panatilihin ang Angle sa 120o, Altitude sa 30o

I-highlight ang mode: pinili ko upang i-set ang kalabuan at 0%.

Shadow mode: pinili ko ang mag-set ng kalabuan sa 14%.

green-button-step4d

Stroke

Sa wakas kami ay mag-aplay sa Hika. Una palitan ang mga halaga ng Sukat. Pinili ko upang i-set ang Sukat sa 1px. Pagpapalit ng Posisyon sa Inside

Pinili ko ang mag-set ng kalabuan sa 50%.

Baguhin ang kulay ng Hika mula sa default sa # 529,846

green-button-step4e

Dapat Hanapin tulad nito.

green-button-step4

Hakbang # 4

Piliin ang Horizontal Type Tool at uri ng teksto sa harap.

Kami ay mag-apply sa ilang epekto para sa mga teksto.

green-button-step5

Gradient Overlay

I-double click sa thumbnail sa Text layer's sa Layers Panel para buksan ang Layer Estilo kahon ng dialogo. Unang kami ay mag-aplay Gradient Overlay, kami ay mag-aplay ng isang Epekto Vertical Gradient para sa iyong teksto. Pagkatapos i-click ang Kulay ng Gradient sa kanan ng Gradient pagpipilian upang buksan ang Kulay ng Gradient Editor ..

green-button-step5a

I-double click sa kaliwa na-kulay-hihinto at ipasok ang halaga ng kulay ng # DDDCDC, pagkatapos ay i-double click sa mga sentro-kulay-hihinto at ipasok ang halaga ng kulay ng # FFFFFF.

green-button-step5b

Drop Shadow

Sa wakas kami ay mag-aplay ang mga layer Drop Shadow estilo. Panatilihin ang Angle sa 120o, kaysa palitan ang mga halaga ng kalabuan, Distance at Sukat. Pinili ko ang mag-set ng kalabuan sa 34%, Distance sa 1px at Sukat sa 1px.

green-button-step5bc

Final Result

green-button-final1

Kung nais mong suriin ang iyong trabaho, maaari mong i-download ang PSD file para sa tutorial na ito

I-download ang file [240KB]

kung nais mong makatanggap ng mas maraming inspirasyon mula sa amin, mangyaring isaalang-alang-subscribe sa aming mga feed sa pamamagitan ng RSS o sa pamamagitan ng email.

Filed under: Photoshop, Tutorials sa pamamagitan ng admin

Promote sa Amin

  • Idagdag sa Mixx!

Tags: Photoshop, Tutorials

Mga Kaugnay na Akda:

kung ikaw Naging masaya pagbabasa ng artikulong ito, mangyaring tingnan ang iba pang mga kaugnay na artikulo sa ibaba:

    • Paano Gumawa ng Nice tanim Text Pindutan sa Photoshop
    • Paano Gumawa ng palimbagan palalimbagan sa Photoshop
    • Paano Gumawa ng Nice Madali 3D Text Epekto sa Photoshop
    • Paano Gumawa ng I-Phone Tulad ng Pindutan sa Photoshop
    • Paano Gumawa ng isang Nice magpakinis Maitim Pindutan sa Photoshop
Walang pamagat na Dokumento

Isa sa mga Komento

  1. designfollow says on: Disyembre 2, 2009 at 12:52 Said:

    dakilang tutorial, salamat sa iyo.

Magsumite ng isang Puna

XHTML: Maaari mong gamitin ang mga tag: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> < datetime del = ""> <em> <i> <q cite=""> <strike> <strong>


CommentLuv Enabled ipakita ang mas
«5 Hakbang sa Sumulat Better CSS Part II
Walang pamagat na Dokumento

    Mag-subscribe

  • Mag-subscribe sa aming mga feed
  • Mag-subscribe sa pamamagitan ng email
  • Sundin sa amin sa Twitter
  • Sponsor
  • Sponsor
  • Sponsor
  • Sponsor
  • Sponsor
  • Sponsor

    • Maghanap

  • Kalendaryo

    Disyembre 2009
    M T W T F S S
    «Nobyembre
    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
    • Pahina

      • Bagay
      • Tungkol sa
      • Artikulo
      • Makipag-ugnayan sa amin
    • Mga Kategorya

    • Css (21)
    • Design / inspirasyon (51)
    • Freebies (36)
    • Graphic Disenyo (10)
    • Photoshop (18)
    • Resources (33)
    • Seo (1)
    • Kasangkapan (9)
    • Tutorials (33)
    • Palalimbagan (4)
    • Web-unlad (5)
    • Wordpress (6)
    • Archives

    • Disyembre 2009
    • Nobyembre 2009
    • Oktubre 2009
    • Septiyembre 2009
    • Agosto 2009
    • Hulyo 2009
    • Hunyo 2009
    • Mayo 2009
    • Recent Posts

    • Css
    • Design / inspirasyon
    • Freebies
    • Graphic Design
    • Photoshop
    • Popular Posts

    • 5 Hakbang sa Sumulat Better CSS Part II
    • Paano gumawa ng magandang naghahanap ng anyo na walang table
    • Paano Gumawa ng Nice scalable CSS Batay Breadcrumbs
    • 30 Ang mga website na may Pinakamataas na Orange
    • Paano Gumawa ng palimbagan palalimbagan sa Photoshop
    • 5 Hakbang sa Sumulat Better Css
    • Gumawa ng isang Beautiful Box Icon sa Photoshop
    • Tag ulap

    Css Design Font Freebies graphic Design Graphics Design icon inspirasyon Inspitation Photoshop Resources Tools Tutorials palalimbagan Web unlad Wordpress

    • Mga kaibigan

      • Abduzeedo
      • Alist hiwalayin
      • Bittbox
      • CrazyLeaf Design
      • Css Tricks
      • David Walsh
      • Fudgegraphics
      • Gasolina ang iyong pagkamalikhain
      • Tulong Developer
      • Instant Shift
      • Line25
      • Mirificampress
      • My Blog Tinta
      • Noupe
      • PSDFan
      • PSDtuts
      • Share Brain
      • Anim na pagbabago
      • Kutsara Grapika
      • Toxel
      • Vandelay Design
      • Function namin
      • Web Designer Depot
      • Web Designer Ledger
      • Taga-disenyo ng Web Wall
      • Ikaw Ang 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
  • Sponsors

    Check out UPrinting sa YouTheDesigner.


    Business Cards Online

    Web Design Blog Directory

.
Walang pamagat na Dokumento
Bumalik sa tuktok

Pangkalahatang

Ang mga ito marahil ng ilang mga interes
  • Tungkol sa aming Company
  • Testimonials
  • Contact Details
  • Blog
  • Social - Twitter, Flickr

Gawain

Mga halimbawa ng mga nakaraang proyekto
  • Tungkol sa aming Company
  • Testimonials
  • Contact Details
  • Blog
  • Social - Twitter, Flickr

Mga Serbisyo

Ito ay kung ano kung saan nagbebenta ngayon
  • Tungkol sa aming Company
  • Testimonials
  • Contact Details
  • Blog
  • Social - Twitter, Flickr

Contact Details

Want to hire sa amin? makapagsimula dito ...
  • Libreng Project Assesment
  • Email - info@aceinfowayindia.com
  • Tel: 91 11 9810018780

Copyright © 2,009, All Right Reserved, Ace Infoway Pilipinas Hire Ace Infoway Pilipinas para sa iyong susunod na disenyo ng proyekto. Tingnan ang portfolio aming.