Adobe Photoshop Kullanarak 3B Düğmeler Nasıl Oluşturulur

Adobe Photoshop Kullanarak 3B Düğmeler Nasıl Oluşturulur

İçinde yaratabileceğiniz birçok harika şey var. Adobe Photoshop basit resim çerçevelerinden karmaşık kullanıcı arayüzlerine kadar çevrimiçi olarak kullanışlıdır. Photoshop'ta oluşturabileceğiniz en kullanışlı şeylerden biri, özel bir arayüze sahip bir blog veya web sitesi çalıştırırsanız kullanışlı olacak 3B düğmelerdir.





Bu makalede, Photoshop kullanarak 3B düğmelerin nasıl oluşturulacağını, görsel 'yukarı' ve 'aşağı' durumları ile birlikte göstereceğiz, böylece onları canlandırabilirsiniz. (Bu makalede animasyonun kendisini ele almayacağız.)



Adım 1: Belgenizi Hazırlayın

3D düğmeler en sık web sitelerinde açılırken, animasyonlu GIF'ler, maket ürün ekranları ve mobil oyunlar gibi onlar için başka uygulamalar olduğunu unutmamak önemlidir. Bu düğmeyi ne için yarattığınıza bağlı olarak, son dosya biçiminiz ve boyutları değişebilir.





Photoshop'ta bir 3B düğme oluşturmak için bunun için özel bir belge oluşturmanız gerekir. Bunu yapmak için Photoshop'u açın ve Yeni Oluştur > Özel . Değerlerinizi yazmaya başlayın.

3B düğme oluşturmak için yatay bir belge isteyeceksiniz. Bizimki için kullandık:



  • 900 x 300 piksel yüksekliğinde
  • 300 Piksel/İnç
  • RGB Renk Modu

Bu özellikler kesinlikle zor ve hızlı bir kural olmasa da, bu, çalışmak için fazlasıyla yeterli alana sahip olmanızı ve düğme boyutunuzu gerektiği gibi büyütüp küçültebilmenizi sağlayacaktır.

2. Adım: Dikdörtgeninizi 3B Düğmeniz İçin Ayarlayın

Dosyanızın özelliklerini ayarladıktan sonra çalışma alanınıza getirileceksiniz. Tek bir katmanda yatay beyaz bir tuvaliniz olacak ve bu, düğmenizi oluşturmaya başlayacağınız yer.



3D düğmenizi oluşturmak için Yuvarlak Dikdörtgen Aracı Ekranınızın sol tarafında, burada kırmızı olarak görülüyor. Kısayolu da kullanabilirsiniz sen ona erişmek için.

Beyaz katmanınıza bir kez tıklayın: bu otomatik olarak Yuvarlatılmış Dikdörtgen Oluştur kutu. Dikdörtgeninizin boyutlarını belirtmek için bu kutuyu kullanacaksınız.



Düğmemiz için şunları yaptık:

  • 300 piksel genişliğinde
  • 75 piksel yüksekliğinde

Ayrıca köşelerin 10 piksel yuvarlatıldığından emin olduk. Ne çok yüksek ne de çok düşük. sonra bastık Tamam .

Not: Düğmeler boyut ve şekle göre değişir, bu nedenle tam olarak bu boyutları kullanmanız gerektiğini düşünmeyin. Ek olarak, kısayollar hakkında daha fazla bilgi arıyorsanız, işte bunlardan bazıları: en kullanışlı Photoshop klavye komutları .

bastığınızda Tamam , Photoshop, katmanınızın içinde bu boyutlarla yuvarlak bir dikdörtgen oluşturur. değiştirebilirsiniz Doldurmak ve Felç Ekranınızın sol üst köşesindeki açılır menüleri kullanarak renkleri seçin.

Bu öğreticinin amacı için --- ve bir 'yukarı' ve 'aşağı' düğmesinin nasıl görünebileceğini göstermek için --- 'aşağı' düğmemizi kırmızı yapacağız.

3. Adım: Düğmenizi 3D Yapın

Temel düğmenizi oluşturup rengini seçtikten sonra, düğmeyi menüden ayarlamak isteyeceksiniz. Katman stili iletişim kutusu. Bu, daha fazla 3D görünmesini sağlamak içindir.

erişmek için Katman stili iletişim kutusu, gidebilirsiniz Katman > Katman Stili üst menüden. Ayrıca, otomatik olarak getirmek için düğmenizi içeren katmana çift tıklayabilirsiniz. Bu yol çok daha hızlı ve biz şahsen tercih ediyoruz.

Katman Stili kutunuz dolduğunda, seçeneğe gidin Konik kabartma . Aç onu.

Bu, düğmenizin kenarlarına daha yüksek, '3D' bir görünüm vermenin hızlı ve kolay bir yoludur. Bu eğitim için kullandığımız ayarlar şunlardır:

Yapı

  • stil: İç Eğim
  • teknik: yumuşak keski
  • Derinlik: 605
  • Yön: Yukarı
  • Boy: 5
  • yumuşatmak: 1

gölgeleme

  • Açı: 90
  • Rakım: 37
  • Vurgu Modu: Renk Soldurma, %55 Opaklık
  • Gölge modu: Çoklu, %25 Opaklık

İşin püf noktası, ayarları biraz fark görebileceğiniz kadar yüksek yapmaktır, ancak bunaltıcı olacak kadar güçlü değildir.

Bevel & Emboss ile işimizi bitirdikten sonra kontur ve bunu da açtı. Kontur, Bevel & Emboss tanımını biraz daha güçlü hale getirir ve bu eğitim için ayarı seçtik Koni - Ters .

Ardından, aç Gradyan yerleşimi . Düğmeye yuvarlak, hafif 'parlak' bir görünüm veren şey budur. Ayarlar aşağıdaki gibidir:

  • Karışım Modu: Kaplama
  • opaklık: 90
  • stil: Doğrusal
  • Açı: 90
  • Ölçek: 100

Sonunda açtık Düşen gölge , düğmenin bir web sitesinin veya blogun beyaz arka planından biraz 'kaldırılmış' görünmesini sağlamak için. Yine, işte ayarlar:

video duvar kağıdı nasıl alınır

Yapı

  • Karışım Modu: çoklu
  • opaklık: 35
  • Açı: 90
  • Mesafe: 2
  • Yayılmış: 6
  • Boy: 8

Kalite

  • kontur: Doğrusal
  • Gürültü: 0
  • Katman Alt Gölgeyi Yıkıyor: Açık

Şimdi bu özellikleri bir Katman Stili olarak kaydetme zamanı.

Adım 4: Katman Stili Olarak Kaydet

Düğmenizin ayarlarını bitirdiğinizde, 3D görünmeye başlayacaktır. Birden fazla 3D düğme oluşturma olasılığınız yüksek olduğundan, bunu yapmanın hızlı ve kolay bir yolunu bulmamız gerekiyor.

İşte nasıl.

tıklamadan önce Tamam içinde Katman stili iletişim kutusu, tıklayın Yeni stil . Bunu yaptığınızda Photoshop, düğmeniz için yaptığınız bu katman stilini kaydeder.

Photoshop CC kullanıyorsanız bu yeni stil, Kütüphaneler bölüm, yukarıda gördüğünüz gibi. Erişimi çok hızlı ve kolaydır.

Adım 5: Kaydedilmiş Katman Stili Nasıl Kullanılır

Düğmenizi tasarladığınıza ve Katman Stili olarak kaydettiğinize göre, şimdi 'yukarı' durumunuz için eylemde görelim. Yalan yok, bu çalışma sürenizi yarıya indirecek.

İlk olarak kırmızı buton katmanının hemen üstünde başka bir buton oluşturalım, bunun gibi. Vurgu için yeşil yapalım.

Sonraki---katmanın kendisine çift tıklamak yerine Katman Stilleri iletişim kutusu --- dosyanızdaki katman stiline çift tıklayın Kütüphaneler panel.

Bunu yaptığınızda Photoshop, yeni rengini ve şeklini korurken kaydettiğiniz stili yeni düğme katmanınıza otomatik olarak uygular. Artık iki düğmeniz var --- biri yukarı durumda ve diğeri aşağı durumda --- ve yapması çok basit. Bu kısayolu seviyorum.

6. Adım: Düğmenize Metin Ekleyin

Ardından, butona metin ekleyeceğiz.

Metin eklemek için iki düğme katmanınızın üzerinde yeni bir katman oluşturun. Tıkla Yazı aracı yazmaya başlamak için.

Bu eğitim için, web sitelerinde ve sosyal medya platformlarında oldukça sık gördüğünüz bir şey olduğu için 'abone ol' kelimesini yazacağız.

Ayrıca san serif web uyumlu bir yazı tipi kullanacağız. Kendi düğmeniz için hangisini kullanacağınız konusunda son seçim size kalmış. Montserrat, Proxima Nova, Arial ve Verdana'nın tümü yaygın olarak kullanılan alternatiflerdir ve web için güvenlidir.

Ancak bu yapıldıktan sonra, bu metni 'pop' haline getirmek için yapmanız gereken birkaç ince değişiklik daha var.

İlk olarak, metninizi içeren katmana çift tıklayın, böylece onu sayfanızda açabilirsiniz. Katman stili iletişim kutusu.

Ardından, üzerine tıklayın İç gölge , metninize biraz çöküntü (veya batık alan) eklemek için. Bu, harflerin düğmeye oyulmuş gibi görünmesini sağlar. Bu eğitim için kullandığımız tam ayarlar aşağıdadır.

Yapı

  • Karışım Modu: Çarpmak
  • opaklık: 35
  • Açı: 90
  • Mesafe: 2
  • Boğulma: 4
  • Boy: 1

Kalite

  • kontur: Doğrusal
  • Gürültü: 0

Ardından, bir Gradyan Yerleşimi düz görünmeden düğmeye daha kolay karışmalarını sağlamak için bu harflere. Yine bizimkiler için ayarlar:

  • Karışım Modu: Renk Yanığı
  • opaklık: 90
  • stil: Doğrusal
  • Açı: 90
  • Ölçek: 100

Adım 7: Bitirme

Bu metin stilini oluşturduktan sonra --- özellikle tekrar kullanmak istiyorsanız --- adresine gidin. Yeni stil ve tıklamadan önce kaydedin Tamam .

Tamamlandığında, 'yukarı' ve 'aşağı' durumlarının nasıl göründüğünü görmek için iki düğme katmanınız arasındaki görünürlük üzerinde hızla ileri geri geçiş yapabilirsiniz.

Oldukça havalı, ha? Dosyanızı kaydetmek için Dosya > Farklı Kaydet , ve üzerinde çalışıyor olabileceğiniz herhangi bir proje için uygun dosya formatı olarak kaydedin.

Blogunuzu 3D Düğmeler ve Widget'larla Özelleştirin

Artık Photoshop'ta 3B düğmelerin nasıl oluşturulacağını bildiğinize göre, ihtiyaçlarınıza göre kendi 3B düğmelerinizi tasarlayarak onunla yaratıcı olabilirsiniz. Cephaneliğinizdeki bu becerilerle, yalnızca profesyonel değil, aynı zamanda kişisel görünümlü bir ürün yapabilirsiniz.

Bu programla yapabileceğiniz diğer şeyler hakkında bilgi edinmek ister misiniz? işte Photoshop'ta bir arka plan nasıl kaldırılır .

Paylaş Paylaş Cıvıldamak E-posta Android'de Google'ın Yerleşik Kabarcık Düzeyine Nasıl Erişilir

Bir şeyin düz olduğundan emin olmanız gerekiyorsa, artık telefonunuzda saniyeler içinde bir baloncuk seviyesi elde edebilirsiniz.

Sonrakini Oku İlgili konular
  • Yaratıcı
  • Adobe Photoshop
  • Resim Düzenleme İpuçları
  • Photoshop Eğitimi
Yazar hakkında Shianne Edelmayer(136 Makale Yayınlandı)

Shianne Tasarım alanında lisans derecesine ve podcasting geçmişine sahiptir. Şimdi Kıdemli Yazar ve 2D Illustrator olarak çalışıyor. MakeUseOf için yaratıcı teknoloji, eğlence ve üretkenliği kapsar.

Shianne Edelmayer'dan Daha Fazla

Haber bültenimize abone ol

Teknik ipuçları, incelemeler, ücretsiz e-kitaplar ve özel fırsatlar için bültenimize katılın!

Abone olmak için buraya tıklayın