• Ev
  • Ile ilgili
  • Makaleler
  • Bize ulaşın

: 91 11 9810018780 Mail to: info@aceinfowayindia.com / Çağrı: 91 11 9810018780

  • Madde Yazılı
  • 23.09.2009 tarihinde
  • 07:57 AM
  • admin tarafından

Nasıl-Telefon Düğme Photoshop gibi Oluşturma

Hey guys back-to-back Photoshop Tutorials. Bu eğitimde nasıl i-Phone Düğme Photoshop gibi yaratılabileceğini öğreneceksiniz. Bu çok öğretici ve oldukça etkili basittir. Bunu eğitim zevk umuyoruz.

Final Preview

Bu ne gitti bugün yapmak

final-preview-iphone-buttons-big

Adım # 1

Açık photoshop ve yeni bir belge oluşturmak, maden 550 × 398px beyaz bir arka plan ile.

iphone-like-buttons-step1

Adım # 2

Arka tabakasında renk doldurun, maden renk # 333333 olduğunu.

iphone-like-buttons-step2

Adım # 3

Yeni bir katman katman adı Şerit degrade oluşturun. Dikdörtgen Marquee Tool seçin ve beyaz şerit oluşturmak.

iphone-like-buttons-step3

Katman Stilleri iletişim kutusunu açmak için Katmanlar Masası'ndaki Şerit Katman küçük resminin üzerinde Stripe Katman çift tıklatın Styling, sizin arka plan için dikey gradiant etkisi uygulanır. Gradient seçeneği Renk Gradient Editor açma konusunda sağ c olor degrade tıklatın.

iphone-like-buttons-step3-b

Çift tıklayın sol-renk-durdurun ve renk değeri girin # aaaaaa çift tıklayın sol-merkez-renk-durdurun ve renk değeri #, sağ-merkez renk çift tıklayın cccccc-durdurup giriniz renk değeri # dddddd, sonra sağ çift tıklayın-renk-durdurun ve renk değeri girin # ffffff.

iphone-like-buttons-step3-a

Bu gibi görünmelidir.

iphone-like-buttons-step3-c

Adım # 4

Seçin Yuvarlak Dikdörtgen Aracı ve düğme oluşturmak, maden yarıçapı 90X40px olduğunu.

iphone-like-buttons-step4

Şimdi biraz efekt uygulayabilirsiniz

Gradient Overlay

Katman Stilleri iletişim kutusunu açmak için Katmanlar Masası'ndaki Düğme Katman küçük resminin üzerinde Düğme çift tıklatın Styling, sizin Düğme için dikey gradiant etkisi uygulanır. Gradient seçeneği Renk Gradient Editor açma konusunda sağdaki renk degrade tıklatın.

iphone-like-buttons-step3-b

Çift tıklayın sol-renk-durdurun ve renk değeri # 000000 girin çift tıklayın sol-merkez-renk-durdurun ve renk değeri # 222222 girin, çift sağ-merkez renk tıklayın-stop ve girin renk değeri # 444444, sonra sağ çift tıklayın-renk-durdurun ve renk değeri # 666666 girin.

iphone-like-buttons-step4-a

Bevel and Emboss

Sonraki Bevel ve Emboss katman stili uygulayabilirsiniz. Dış Konik için, derinlik, büyüklük ve yumuşatır değerleri değiştirerek daha stilini değiştirme. Ben% 100 Derinliği ayarlamak için, 1px de büyüklük ve yumuşatır 10px olarak seçin

Bu Eğitimi Önemli Bölüm: -90 o yükseklikte 40 o Açısı tutun

Highlight mode: Ben% 100 Saydamlık ayarlamak için seçin.

Shadow mod: Ben% 100 Saydamlık ayarlamak için seçin.

iphone-like-buttons-step4-b

Darbe

Son olarak Stroke uygulanır. İlk Boyut değerlerini değiştirerek. Ben de 1px boyutunu belirlemek için seçin. Içinde de konumunu değiştirme

Ben% 80 Saydamlık ayarlamak için seçin.

Default # 222222 için Stroke rengini değiştirin

iphone-like-buttons-step4-c

Bu gibi görünmelidir.

iphone-like-buttons-step4-d

Adım # 5

Ön metin aracını seçin ve metin yazın.

iphone-like-buttons-step5

Biz metin için bazı etkili uygulanacaktır.

Bevel Emboss

Katmanlar Masası'ndaki Metin tabakanın üzerlerine çift tıklayın Layer Styles iletişim kutusunu açın. Biz Dış Konik ve Technique Chisel Soft Stil değiştirme, Derinlik, Yönü, Büyüklüğü ve yumuşatır değerlerini değiştirerek daha Bevel Emboss, İlk uygulanır. Ben% 130 olarak Derinliği ayarlamak için, Aşağı boyutunda 1px ve yumuşatır 0px de Yön seçin

Bu Eğitimi Önemli Bölüm: 90 o, Rakım 30 o at Açısı tutun

Highlight mode: I 0% at Saydamlık ayarlamak için seçin.

Shadow mod: Ben% 50 Saydamlık ayarlamak için seçin.

iphone-like-buttons-step5a

Final Preview

Son olarak bu ders yaptık.

Bu ne gitti bugün yapmak

final-preview-iphone-buttons-big

Download kaynak dosyası

Eğer işinizi kontrol etmek isterseniz, bu yazının için PSD dosyasını indirebilirsiniz.

gibi iphone-buttons.rar (21.3 kb)

Filed under: Photoshop, Tutorials by admin

Bize Reklam Verin

Etiketler: Photoshop, Tutorials

İlgili Makaleler:

Bu makaleyi aşağıdaki ilgili diğer makaleler kontrol edebilirsiniz okuma zevk:

    • Nasıl Photoshop'ta Letterpress Tipografi Oluşturma
    • Nasıl Photoshop'ta Pürüzsüz Parlak Metin etki oluşturmak için
    • Photoshop bir güzel Kutusu simgesi oluşturma
    • Pop Art Comic Eğitimi: Photoshop
    • Retro 2 Dakika Görüntü Up: Photoshop
Untitled Document

Bir Yorumlar

  1. aioon yazıyor: 5:58 23 Eylül 2009 de Said:

    nice one! i like it :)

Bir Yorum

XHTML: Bu etiketleri: <a href="" kullanabilirsiniz title=""> <abbr title=""> <acronym title=""> <b> <blockquote <cite> <code> < del datetime = ""> <em> <i> <q çağırmak=""> <strike> <strong>


«11 Awesome Hat Fontları
Developer's Paradise Siteleri Week 24 Eylül 2009 »için
Untitled Document

    Abone

  • Subscribe to our feed
  • Abone e-posta ile
  • Follow us on Twitter
  • Sponsor
  • Sponsor
  • Sponsor
  • Sponsor
  • Sponsor

    • Aramak

      Untitled Document
  • Takvim

    Eylül 2009
    M T W T F S S
    «Ağustos
    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
    • Sayfalar

      • Ev
      • Ile ilgili
      • Makaleler
      • Bize ulaşın
    • Kategoriler

    • Css (16)
    • Tasarım / Inspiration (41)
    • Freebies (21)
    • Grafik Tasarım (9)
    • Photoshop (12)
    • Kaynaklar (19)
    • Seo (1)
    • Araçlar (5)
    • Tutorials (25)
    • Tipografi (3)
    • Web geliştirme (4)
    • Wordpress (5)
    • Arşivler

    • Eylül 2009
    • Ağustos 2009
    • Temmuz 2009
    • Haziran 2009
    • Mayıs 2009
    • Son Mesaj

    • Css
    • Tasarım / Inspiration
    • Freebies
    • Grafik Tasarım
    • Photoshop
    • Popüler Yayınlar

    • Nasıl oluşturulur iyi görünüyor tablo olmadan formu
    • Photoshop bir güzel Kutusu simgesi oluşturma
    • İyi yazmak için 5 Adım Css
    • Nasıl Photoshop'ta Letterpress Tipografi Oluşturma
    • Developer's Paradise Siteleri Hafta için Eylül 2009 10.
    • Saf Css Dropdown Menü Javascript kullanmadan
    • 6 Özgür ve Yüksek Kalite Tuğla Duvar Textures
    • Tag cloud

    Css Tasarım Fontlar Freebies Grafik Tasarım Grafik Tasarım Simgeler İlham Inspitation Photoshop Kaynakları Araçlar Tutorials Tipografi Web geliştirme Wordpress

    • Arkadaşlar

      • Abduzeedo
      • Alist Apart
      • BittBox
      • CrazyLeaf Tasarım
      • Css Tricks
      • David Walsh
      • Fudgegraphics
      • Yakıt Yaratıcılığınızı
      • Geliştirici Yardım
      • Sohbet Shift
      • Line25
      • Mirificampress
      • Mürekkep my blog
      • Noupe
      • PSDFan
      • PSDtuts
      • Share Brain
      • Altı Düzenlemeler
      • Kaşık Grafikler
      • Toxel
      • Vandelay Tasarım
      • Biz fonksiyonu
      • Web Tasarımcısı Depo
      • Web Tasarımcısı Ledger
      • Web tasarımcısı Duvar
      • Sen Designer
    • Çevirmenler

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

    Check out UPrinting YouTheDesigner gör.


    Kartvizit Online

    Web Design Blog Directory

.
Untitled Document
Back to top

Genel

Bu belki biraz ilgi ve
  • Şirketimiz Hakkında
  • Testimonials
  • İletişim Bilgileri
  • Web günlüğü
  • Sosyal - Flickr

Eserler

Geçmişte proje örnekleri
  • Şirketimiz Hakkında
  • Testimonials
  • İletişim Bilgileri
  • Web günlüğü
  • Sosyal - Flickr

Hizmetler

Bunun ne olduğu bugün satmaktadır
  • Şirketimiz Hakkında
  • Testimonials
  • İletişim Bilgileri
  • Web günlüğü
  • Sosyal - Flickr

İletişim Bilgileri

Bizi işe almak ister misiniz? Buraya Başlamak ...
  • Ücretsiz Proje Değerlendirme
  • E-posta - info@aceinfowayindia.com
  • Tel: 91 11 9810018780

Copyright © 2009, Tüm Hakları Saklıdır, Ace Infoway Hindistan kiralaması Ace Infoway Hindistan sonraki tasarım projesi için. View our portföyü.