Photoshop Web 2.0 Düğmesi Oluştur

Düğmeler Photoshop öğreticileri muhtemelen herhangi bir Photoshop öğreticisi sitesindeki en sıcak kategorilerden biridir ve Web 2.0 artık çok sıcak konular olduğundan, web sitelerinin herhangi bir Web 2.0 uygulaması için uygun basit bir düğme yapmayı sağlar. Atlamadan sonra öğretici.

Düğme tasarımını başlatmak için yaklaşık 500px (genişlik) x 400px (yükseklik) boyutlarında boş bir tuval oluşturun. Yeni bir katman çağrısı oluştur 'bg01'. Seçin Yuvarlatılmış Dikdörtgen Takım, SHIFT'i basılı tutun ve ortasına yuvarlak kenarlı bir kare çizin. Geçerli aşamada herhangi bir renk iyi.

Çağırmak Karıştırma seçenekleri 'bg01've aşağıdaki stilleri ayarlayın:

Düşen gölge

• Opaklık:% 40
• Mesafe: 0px
• Yayılma: 0%
• Boyut: 6px

Gradiant Yerleşimi

• Renk durağı: 0%, # d00031
• Renk durağı:% 100, # ff2b5d

CTRL tutun, sol tıklayınbg01'Layer Thumbnail' şeklini seçmek için. Gitmek seçmek -> değiştirmek -> sözleşme ve 'değerini girin2px'. Bu, seçilen alanı 2 piksel küçültecek.

Yeni bir katman çağrısı oluştur 'bg02Vurgulanan (küçültmeden sonra) alanı herhangi bir renkle doldurun. Burada # 000000 siyahı kullanıyorum. Başlatmak için 'bg02' üzerine çift tıklayın. Karıştırma seçeneği ve aşağıdaki tarzı çimdikleyin.

Gradiant Yerleşimi

• Renk durağı: 0%, # c6002f
• Renk durağı:% 100, # c6002f

Metin için başka bir yeni katman oluşturun, onu arayın 'Txt'. Düğmenizin metnini ekleyin. Temsil etmek için bir alfabe kullanacağım. Burada kullanıyorum yazı tipi stilleri aşağıdaki gibidir:

• Yuvarlak Arial Kalın
• 150pt

Aynı, metninize karar verdikten sonra, metni başlatmak için 'txt' üzerine çift tıklayın. Karıştırma seçenekleri ve aşağıdaki stilleri ince ayar yapın.

Düşen gölge

• Opaklık:% 25
• Mesafe: 0px
• Yayılmış: 0px
• Boyut: 5px

İç gölge

• Opaklık:% 10
• Mesafe: 0px
• Boğulma: 0
• Boyut: 10px

Konik kabartma

• Derinlik: 1 piksel
• Yön: Aşağı
• Boyut: 0px
• Softten: 0px
• Vurgu Modu Opaklığı:% 32
• Gölge Modu Opaklığı:% 32

Gradiant Yerleşimi

• Renk Durdurma: 0% # d2d2d2
• Renk Durdurma:% 100 # f0efef

Düğme neredeyse bitti. Üst kısım üzerinde biraz parıldayalım. Ambar CTRL, sol tık 'bg02Dış şekli vurgulamak için 'Layer Thumbnail'; seçmek Eclipse Seçim Çerçevesi Aracı. Şimdi bekle ALT, Eclipse Marquee Tool seçiliyken, sürükleme vurgulanan alanın alt yarısını eksi yapmak üzere boyuncadır. Yukarıdaki resme bakın.

Üst kısım vurgulanmış ve Eclipse Marquee Tool hala seçili durumdayken, sağ tıklayın ve seçin Tüy; girmek 15px yarıçap için.

Yeni bir katman oluşturun, onu arayın 'parıltıVurgulanan kısmı beyaz [#ffffff] ile doldurun. Bu, düğmenizin üst kısmına ışıma efekti eklemelidir. Nihai ürün aşağıdaki resimdeki gibi görünmelidir.

Öğreticiyi İndir

Fazladan bir şey…

'Nin Harmanlama Seçeneklerini İnce Ayarlabg01' ve 'bg02'size daha ilginç düğmeler verecek. İşte daha önce yaptığım düğmeyle ilgili başka bir Photoshop eğitimi - Web 2.0 için Parlak düğme oluşturma

Örnek İndir