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

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

  • Artikulo Written
  • on 23.09.2009
  • at 07:57
  • sa pamamagitan ng admin

Paano Gumawa ng I-Phone Tulad ng Pindutan sa Photoshop

Hey guys back-to-back Photoshop Tutorials. Sa ganitong Tutorial kukunin ko na malaman mo kung paano gumawa ng I-Phone Tulad ng Pindutan sa Photoshop. Ito ay napaka-simple at ganap epektibong tutorial. Umaasa ako na masisiyahan ka sa ito tutorial.

Final Preview

Ito ay kung ano ang aming wala na ko ngayon

final-preview-iphone-buttons-big

Hakbang # 1

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

iphone-like-buttons-step1

Hakbang # 2

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

iphone-like-buttons-step2

Hakbang # 3

Gumawa ng isang bagong pangalan ng layer layer greydyent guhit. Piliin ang hugis-parihaba MARQUEE Tool at lumikha ng puting guhit.

iphone-like-buttons-step3

Styling ang mga guhit sa Layer i-double click sa guhit Layer's thumbnail sa Layers Panel para buksan ang Layer Estilo dialog box, kami ay mag-aplay ng isang vertical gradiant epekto para sa iyong mga background. Pagkatapos i-click ang greydyent c olor sa kanan ng Gradient pagpipilian upang buksan ang Kulay ng Gradient Editor.

iphone-like-buttons-step3-b

I-double click sa kaliwa na-kulay-hihinto at ipasok ang halaga ng kulay ng # aaaaaa, i-double click sa kaliwa-center-kulay-hihinto at ipasok ang halaga ng kulay ng # cccccc, i-double click sa right-center-kulay-hihinto at ipasok ang kulay ng halaga # dddddd, pagkatapos ay i-double click sa right-kulay-hihinto at ipasok ang halaga ng kulay ng # FFFFFF.

iphone-like-buttons-step3-a

Dapat ganito ang hitsura.

iphone-like-buttons-step3-c

Hakbang # 4

Piliin ang bilugan Parihaba Tool at lumikha ng button, minahan radius ay 90X40px.

iphone-like-buttons-step4

Ngayon 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 vertical gradiant epekto para sa iyong mga pindutan. Pagkatapos i-click ang kulay greydyent sa kanan ng Gradient pagpipilian upang buksan ang Kulay ng Gradient Editor.

iphone-like-buttons-step3-b

I-double click sa kaliwa na-kulay-hihinto at ipasok ang halaga ng kulay # 000000, i-double click sa kaliwa-center-kulay-hihinto at ipasok ang halaga ng kulay ng # 222,222, i-double click sa right-center-kulay-hihinto at ipasok ang kulay ng halaga # 444,444, at pagkatapos ay i-double click sa right-kulay-hihinto at ipasok ang halaga ng kulay ng # 666,666.

iphone-like-buttons-step4-a

Bevel at magpalamuti

Susunod na mag-aplay ng Bevel at magpalamuti layer style. Pagpapalit ng estilo sa Outer Bevel, kaysa palitan ang mga halaga ng lalim, Sukat at lumambot. Pinili ko upang i-set ang Lalim sa 100%, Laki sa 1px at lumambot sa 10px

Importanteng Bahagi ng mga ito Tutorial: Ilagay ang Angle sa -90 o, Altitude sa 40 o

I-highlight ang mode: pinili ko ang mag-set ng kalabuan sa 100%.

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

iphone-like-buttons-step4-b

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 loob ng

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

Baguhin ang kulay ng Hika mula sa default sa # 222,222

iphone-like-buttons-step4-c

Dapat ganito ang hitsura.

iphone-like-buttons-step4-d

Hakbang # 5

Piliin ang text kasangkapan at uri teksto sa harap.

iphone-like-buttons-step5

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

Bevel magpalamuti

I-double click sa thumbnail sa Text layer's sa Layers Panel para buksan ang Layer Estilo kahon ng dialogo. Kami ay mag-aplay Bevel magpalamuti, Unang Pagpapalit ng style sa Outer Bevel at pamamaraan sa pait Soft, kaysa palitan ang mga halaga ng lalim, Direksyon, Sukat at lumambot. Pinili ko upang i-set ang Lalim sa 130%, Direksyon sa Down Sukat sa 1px at lumambot sa 0px

Importanteng Bahagi ng mga ito Tutorial: Ilagay ang Angle sa 90 o, Altitude sa 30 o

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

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

iphone-like-buttons-step5a

Huling Preview

Sa wakas kami ay tapos na ito tutorial.

Ito ay kung ano ang aming wala na ko ngayon

final-preview-iphone-buttons-big

I-download ang source ng file

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

iphone-gusto-buttons.rar (21.3 KB)

Filed under: Photoshop, Tutorials sa pamamagitan ng admin

Promote sa Amin

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 palimbagan palalimbagan sa Photoshop
    • Paano Gumawa ng swabe makintab Text Epekto sa Photoshop
    • Gumawa ng isang Beautiful Box Icon sa Photoshop
    • Pop Art Comic Tutorial: Photoshop
    • Retro Up Image sa loob ng 2 Minuto: Photoshop
Walang pamagat na Dokumento

Isa sa mga Komento

  1. aioon says on: Septiyembre 23, 2009 at 5:58 Said:

    nice one! gusto ko ito :)

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>


«11 Awesome kaligrapya Font
Developer's Paradise na Site of the Week para sa Septiyembre 24, 2009 »
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

    • Maghanap

      Walang pamagat na Dokumento
  • Kalendaryo

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

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

    • Css (16)
    • Design / inspirasyon (41)
    • Freebies (21)
    • Graphic Design (9)
    • Photoshop (12)
    • Resources (19)
    • Seo (1)
    • Kasangkapan (5)
    • Tutorials (25)
    • Palalimbagan (3)
    • Web-unlad (4)
    • Wordpress (5)
    • Archives

    • Septiyembre 2009
    • Agosto 2009
    • Hulyo 2009
    • Hunyo 2009
    • Mayo 2009
    • Recent Posts

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

    • Paano gumawa ng magandang naghahanap ng anyo na walang table
    • Gumawa ng isang Beautiful Box Icon sa Photoshop
    • 5 Hakbang sa Sumulat Better Css
    • Paano Gumawa ng palimbagan palalimbagan sa Photoshop
    • Developer's Paradise na Site of the Week para sa Septiyembre 10, 2009
    • Dalisay Css Dropdown Menu walang Paggamit ng Javascript
    • 6 Free at ng Mataas na Kalidad Brick Wall Textures
    • 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.