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

İlan

İçinde oluşturabileceğiniz birçok şaşırtıcı şey var Adobe Photoshop basit resim çerçevelerinden karmaşık kullanıcı arayüzlerine kadar çevrimiçi olarak yararlı olan Yapabileceğiniz en faydalı şeylerden biri Photoshop'ta oluştur, özel bir arayüzle bir blog veya web sitesi çalıştırırsanız kullanışlı olacak 3D düğmelerdir.

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

Adım 1: Belgenizi Hazırlayın

3D düğmeler web sitelerinde en sık açılırken, animasyonlu GIF'ler, mock-up ürün ekranları ve mobil oyunlar gibi başka uygulamalar da bulunduğunu belirtmek önemlidir. Bu düğmeyi ne için oluşturduğunuza bağlı olarak, son dosya biçiminiz ve boyutları değişebilir.

Photoshop'ta bir 3D düğmesi 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.

3D düğmesi oluşturmak için yatay bir belge isteyeceksiniz. Bizim için kullandık:

• 900 x 300 piksel yüksek
• 300 Piksel / İnç
• RGB Renk Modu

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

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

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

3D düğmenizi oluşturmak için Yuvarlatılmış Dikdörtgen Aracı ekranınızın sol tarafında, burada kırmızı renkte görünür. Kısayolu da kullanabilirsiniz U erişmek için.

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

Düğmemiz için:

• 300 piksel genişlik
• 75 piksel yüksek

Ayrıca köşelerin 10 piksel yuvarlandığından da emin olduk. Çok yüksek ve çok düşük de değil. Sonra bastırdık tamam.

Not: Düğmeler boyut ve şekle göre değişir, bu nedenle bu tam boyutları kullanmanız gerekmez. Ayrıca, kısayollar hakkında daha fazla bilgi arıyorsanız, işte size en kullanışlı Photoshop klavye komutları.

Tuşuna bastığınızda tamamPhotoshop katmanınızın içinde bu boyutlara sahip yuvarlatılmış bir dikdörtgen oluşturur. Değiştirebilirsiniz dolgu ve inme ekranınızın sol üst köşesindeki açılır menüleri kullanarak renkleri seçin.

Bu öğreticinin amacı için —ve “yukarı” ve “aşağı” düğmelerinin nasıl görünebileceğini göstermek için “aşağı” düğmemizi kırmızı yapacağız.

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

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

Erişmek için Katman stili iletişim kutusuna gidebilirsiniz Katman> Katman Stili tıklayın. Ayrıca, düğmenizi içeren katmanı otomatik olarak getirmek için çift tıklayabilirsiniz. Bu şekilde çok daha hızlı ve bizzat tercih ediyoruz.

Katman Stili kutunuz bittiğinde, seçeneğe gidin Konik kabartma. Aç onu.

Bu, düğmenizin kenarlarına daha yüksek, “3B” bir görünüm kazandırmanın hızlı ve kolay bir yoludur. Bu öğretici için, kullandığımız ayarlar şunlardır:

yapı

• Stil: İç Eğim
• Tekniği: Yumuşak Keski
• Derinlik: 605
• Yön: yukarı
• Boyut: 5
• yumuşatır: 1

gölgeleme

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

İşin püf noktası, ayarları görebileceğiniz kadar yüksek yapmak, ancak bunaltıcı olacak kadar güçlü değil.

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

Sonra açın Degrade yer paylaşımı. Yuvarlak, hafif “parlak” bir görünüm veren bir düğme budur. Ayarlar aşağıdaki gibidir:

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

Sonunda açtık Düşen gölge, düğmeyi bir web sitesinin veya blogun beyaz arka planından biraz "kaldırılmış" hale getirmek için. Yine, ayarlar şunlardır:

yapı

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

Kalite

• Kontur: Doğrusal
• Gürültü, ses: 0
• Katman Gölge Altını Vurur: üzerinde

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

Adım 4: Katman Stili Olarak Kaydet

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

İşte böyle.

Tıklamadan önce tamam içinde Katman stili iletişim kutusunda, Yeni stil. Bunu yaptığınızda, Photoshop düğmeniz için yaptığınız bu katman stilini kaydedecektir.

Photoshop CC kullanıyorsanız, bu yeni stil bilgisayarınıza kaydedilecektir. Kütüphaneler bölümünde görebilirsiniz. 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 artık Katman Stili olarak kaydettiğinize göre, "yukarı" durumunuz için çalışırken görelim. Yalan söyleyecek bir şey yok, bu çalışma sürenizi yarıya indirecek.

İlk olarak, kırmızı düğme katmanının hemen üzerinde başka bir düğme oluşturalım. Vurgulamak için yeşil yapalım.

İleri - katmanı getirmek için katmanın kendisine çift tıklamak yerine Katman Stilleri iletişim kutusu — cihazınızdaki katman stilini çift tıklayın. Kütüphaneler panel.

Bunu yaptığınızda, Photoshop yeni rengini ve şeklini korurken kaydedilen stilinizi yeni düğme katmanınıza otomatik olarak uygular. Artık biri yukarı, diğeri aşağı olmak üzere iki düğmeniz var ve bunu yapmak çok kolay. Bu kısayolu seviyorum.

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

Ardından, düğmeye metin ekleyeceğiz.

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

Bu eğitici yazıda, “abone ol” kelimesini yazacağız çünkü bu, web sitelerinde ve sosyal medya platformlarında sıkça gördüğünüz bir şeydir.

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

Ancak bu yapıldıktan sonra, bu metnin "pop" olması için yapmanız gereken birkaç küçük değişiklik daha var.

İlk olarak, metninizi içeren katmanı çift tıklayın, böylece metninizi Katman stili iletişim kutusu.

Sonra tıklayın İç gölge, metninize biraz depresyon (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 ayarlar aşağıdadır.

yapı

• Karışım Modu: Çarpmak
• Saydamlık: 35
• Açı: 90
• Mesafe: 2
• jikle: 4
• Boyut: 1

Kalite

• Kontur: Doğrusal
• Gürültü, ses: 0

Ardından, Gradyan Yer Paylaşımı Bu harflere, düz görünmeden düğmenin daha kolay karışmasını sağlamak için. Yine, bizim için ayarlar:

• Karışım Modu: Renk Yanması
• Saydamlık: 90
• Stil: Doğrusal
• Açı: 90
• Ölçek: 100

7. Adım: Tamamlama

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

Bu 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üğü hızlı bir şekilde ileri ve geri alabilirsiniz.

Çok havalı ha? Dosyanızı kaydetmek için Dosya> Farklı Kaydetve üzerinde çalıştığınız proje için uygun dosya biçimi olarak kaydedin.

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

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

Bu programla yapabileceğiniz diğer şeyler hakkında bilmek ister misiniz? İşte Photoshop'ta bir arka plan nasıl kaldırılır Photoshop'ta Arka Plan Nasıl KaldırılırAdobe Photoshop'ta herkesin izleyebileceği açık adım adım talimatlarla arka planı nasıl kaldıracağınız aşağıda açıklanmıştır. Daha fazla oku .