Divi's Gradient Builder'da Gradyan Türlerini Karşılaştırma

Gradyan türleri, yeni Divi Gradient Builder'ın bir parçasıdır. Yeni Divi degrade türleri, arka planlarınıza farklı şekiller ve renkler ekleme olanağı sağlar. Bu gönderide, bu degrade türlerini karşılaştıracağız ve bunları benzersiz arka planlar oluşturmak için nasıl kullanacağınızı göstereceğiz!

Başlayalım.

Divi Gradyan Türleri Nelerdir?

Divi'nin yeni Gradyan Oluşturucusu, degrade türlerini içeren birkaç yeni degrade özelliği ekler. Aralarından seçim yapabileceğiniz dört gradyan türü vardır:

• Doğrusal
• dairesel
• Eliptik
• Konik

Türlerin her biri degradeyi farklı şekilde görüntüler. Bir daire, bir elips veya bir koni içinde doğrusal bir renk deseni olarak görüntülenecek degradeyi şekillendirmek için kullanılırlar. Bunları örneklerimizde ayrıntılı olarak göreceğiz.

Degrade türleri ayrıca konum, tekrarlanıp tekrarlanmadığı, degrade kaydırma çubuğunun ölçü birimi ve degradenin arka planın üzerine yerleştirilmesi gibi diğer kontrollerden de etkilenir.

Her ayarın gradyan üzerinde küçük veya büyük bir etkisi olabilir. Degrade ince olabilir veya göze çarpabilir. Tek bir ayar ile küçük veya büyük değişiklikler yapılabilir.

Bunu akılda tutarak, degrade türlerinin her birini kullanan birkaç degrade örneğine bakalım. Her degrade türünden üç örnek göstereceğiz. İlki, web'de göreceğiniz standart bir degrade türü olacaktır. Sonraki ikisi, sadece degrade türleriyle neler yapılabileceğini görmek için biraz daha deneysel olacak.

Gradyan Türleri Örnekleri

Degrade türü örnekler için Divi'de bulunan ücretsiz Oda ve Kahvaltı Düzen Paketinin açılış sayfasındaki kahraman bölümünü kullanıyorum. Bu bölümde zaten bir gradyan var, ancak onu değiştireceğiz ve biraz deney yapacağız. Orijinal arka plan gradyanını silebilir veya değiştirebiliriz. Sonuçlar aynı. Basit olması için değiştireceğim.

Başlık metnini siyahtan beyaza değiştirerek özelleştirdim.

Doğrusal Gradyan Tipi

Doğrusal degradeler, degradeyi sayfa boyunca yayılmış gibi görüntüler.

Birinci Doğrusal Gradyan Örneği

İşte ilk örneğimize bir bakış. Aralarında yumuşak bir geçiş ile ekranın solunda daha açık bir renk ve sağda daha koyu bir renk görüntüler.

Bu örneği oluşturmak için iki renk ekleyin. Birincisi , %0 konumunda rgba(92,158,82,0.76)'dir. İkincisi , %97 konumunda rgba(0,10,4,0.76)'dır.

• Renk 1: rgba(92,158,82,0.76) (%0 konumunda)
• Renk 2: rgba(0,10,4,0.76) (%97 konumunda)

Ardından, Degrade Türünü Doğrusal olarak değiştirin ve Yönü 131 derece olarak ayarlayın. Tekrar etmesin . Birimi Yüzde olarak ayarlayın. Gradyanı arka plan görüntüsünün üzerine yerleştirin.

• Gradyan Türü: Doğrusal
• Yön: 131 derece
• Tekrar: Hayır
• Birim: Yüzde
• Gradyanı Arka Plan Resminin Üstüne Yerleştir: Evet

İkinci Doğrusal Gradyan Örneği

İşte ikinci doğrusal gradyan örneğine bir bakış. İlki gibi çalışıyor, ancak solda daha koyu bir gölgenin devraldığı sert bir durağı var.

Bunu oluşturmak için üç Gradyan Durağı ekleyin. Birincisi %13 konumunda rgba(18,76,41,0.76). İkincisi , %13 konumunda rgba(92,158,82,0.76). Renk 3 , %34 konumunda rgba(18,76,41,0.76)'dir.

• Renk 1: rgba(18,76,41,0.76) (%13 konumunda)
• Renk 2: rgba(92,158,82,0.76) (%13 konumunda)
• Renk 3: rgba(18,76,41,0.76) (%34 konumunda)

Ardından, Degrade Türünü Doğrusal olarak ayarlayın ve Yönü 90 derece olarak ayarlayın. Tekrar etmesin . Birimi Yüzde olarak değiştirin. Arka plan görüntüsünün üzerine yerleştirin.

• Gradyan Türü: Doğrusal
• yön: 90 derece
• Tekrar: Hayır
• Birim: Yüzde
• Gradyanı Arka Plan Resminin Üstüne Yerleştir: Evet

Üçüncü Doğrusal Gradyan Örneği

Üçüncü örneğimiz, sağ üst köşeye çapraz olarak açık bir renk çizgisi yerleştirir ve daha koyu bir renk çizgisine dokunur.

Bunun üç rengi var. Renk 1 , %13 konumunda rgba(92,158,82,0.76)'dir. Renk 2 , %23 konumunda rgba(92,158,82,0.76)'dir. Üçüncü Renk , %32 konumunda rgba(18,76,41,0.76)'dır.

• Renk 1: rgba(92,158,82,0.76) (%13 konumunda)
• Renk 2: rgba(92,158,82,0.76) (%23 konumunda)
• Renk 3: rgba(18,76,41,0.76) (%32 konumunda)

Degrade Türünü 209deg Yönünde Doğrusal olarak ayarlayın. Tekrar etmemesini sağlayın ve Birimi Yüzde olarak ayarlayın. Gradyanı arka plan görüntüsünün üzerine yerleştirin.

• Gradyan Türü: Doğrusal
• Yön: 209 derece
• Tekrar: Hayır
• Birim: Yüzde
• Gradyanı Arka Plan Resminin Üstüne Yerleştir: Evet

Dairesel Gradyan Tipi

Dairesel degrade türü, renklerle bir daire oluşturur.

Birinci Dairesel Gradyan Örneği

İlk dairesel gradyan örneğimiz, ortada açık bir renk ve kenarlarda daha koyu bir renk yerleştirir.

Bunun 2 rengi var. Birincisi , %0 konumunda rgba(92,158,82,0.76)'dir. İkincisi , %62 konumunda rgba(0,10,4,0.76)'dır.

• Renk 1: rgba(92,158,82,0.76) (%0 konumunda)
• Renk 2: rgba(0,10,4,0.76) (%62 konumunda)

Degrade Türünü Dairesel olarak ayarlayın. Yönü ortalayın . Tekrar etmemesini sağlayın , Birimi Yüzde olarak değiştirin ve arka plan görüntüsünün üzerine yerleştirin.

• Gradyan Türü: Dairesel
• Yön: Merkez
• Tekrar: Hayır
• Birim: Yüzde
• Gradyanı Arka Plan Resminin Üstüne Yerleştir: Evet

İkinci Dairesel Gradyan Örneği

Bu degrade, ekranın ortasına net bir dairesel kenar yerleştirir.

Dört rengi vardır. İki renk yığılmış. Birincisi %13 konumunda rgba(18,76,41,0.76). İkincisi , %33 konumunda rgba(92,158,82,0.76). Renk 3 , %51 konumunda rgba(92,158,82,0.76)'dir. Renk 4 rgba'dır(18,76,41,0.76). Renk 3'ün üzerinde %51 konumuna yerleştirilmiştir.

• Renk 1: rgba(18,76,41,0.76) (%13 konumunda)
• Renk 2: rgba(92,158,82,0.76) (%33 konumunda)
• Renk 3: rgba(92,158,82,0.76) (%51 konumunda)
• Renk 4: rgba(18,76,41,0.76) (%51 konumunda)

Degrade Türünü Dairesel olarak ayarlayın ve Yönü Sol Üste yerleştirin. Tekrar etmemesini sağlayın , Birimi Yüzde olarak değiştirin ve arka plan görüntüsünün üzerine yerleştirin.

• Gradyan Türü: Dairesel
• Yön: Sol Üst
• Tekrar: Hayır
• Birim: Yüzde
• Gradyanı Arka Plan Resminin Üstüne Yerleştir: Evet

Üçüncü Dairesel Gradyan Örneği

Bu örnek, dairenin ortasından başlayarak koyu rengin içine birkaç açık daire yerleştirir.

Bu aynı zamanda bu tasarımı elde etmek için iki rengi belirli bir sırayla istifler. İlk renk, %13 konumunda rgba(18,76,41,0.76)'dır. Renk 2 , %44 konumunda rgba(18,76,41,0.76)'dir. Üçüncü renk, ikinci rengin üzerine yığılır. %44 konumunda rgba(92,158,82,0.76). Renk 4 , %51 konumunda rgba(92,158,82,0.76)'dir.

• Renk 1: rgba(18,76,41,0.76) (%13 konumunda)
• Renk 2: rgba(18,76,41,0.76) (%44 konumunda)
• Renk 3: rgba(92,158,82,0.76) (%44 konumunda)
• Renk 4: rgba(92,158,82,0.76) (%51 konumunda)

Degrade Türünü Dairesel olarak değiştirin. Yönü En Altta Yerleştirin. Bunu Tekrar Ettirin . Birimi Yüzde olarak ayarlayın ve degradeyi arka plan görüntüsünün üzerine yerleştirin.

• Gradyan Türü: Dairesel
• yön: Alt
• Tekrar: Evet
• Birim: Yüzde
• Gradyanı Arka Plan Resminin Üstüne Yerleştir: Evet

Eliptik Gradyan Tipi

Eliptik gradyanlar, renkleri elips şeklinde yerleştirir.

İlk Eliptik Gradyan Örneği

İlk eliptik örneğimiz ekranın ortasına açık renkli bir elips ve çevresinde daha koyu renkli bir elips yerleştirir.

Bunun iki rengi var. Birincisi , %0 konumunda rgba(92,158,82,0.76)'dir. İkincisi , %50 konumunda rgba(0,10,4,0.76)'dır.

• Renk 1: rgba(92,158,82,0.76) (%0 konumunda)
• Renk 2: rgba(0,10,4,0.76) (%50 konumunda)

Degrade Türünü Eliptik olarak değiştirin. Yönü Merkez olarak ayarlayın. Bunu tekrar etmeyin , Birimi Yüzde olarak ayarlayın ve arka plan görüntüsünün üzerine yerleştirin.

• Gradyan Türü: Eliptik
• Yön: Merkez
• Tekrar: Hayır
• Birim: Yüzde
• Gradyanı Arka Plan Resminin Üstüne Yerleştir: Evet

İkinci Eliptik Gradyan Örneği

İkinci örneğimiz, degrade boyunca çok sayıda ince dairesel çizgi yerleştirir.

İki rengi vardır. Birincisi , 34pt konumunda rgba(92,158,82,0.76). İkincisi , 39pt konumunda rgba(0,10,4,0.76)'dır.

• Renk 1: rgba(92,158,82,0.76) (34pt konumunda)
• Renk 2: rgba(0,10,4,0.76) (39pt konumunda)

Gradyan Türünü Eliptik olarak değiştirin ve Yönü Sola ayarlayın. Bunu tekrarla . Birimi Puan olarak değiştirin. Arka plan görüntüsünün üzerine yerleştirin.

• Gradyan Türü: Eliptik
• Yön: Sol
• Tekrar: Evet
• Birim: Puan
• Gradyanı Arka Plan Resminin Üstüne Yerleştir: Evet

Üçüncü Eliptik Gradyan Örneği

Üçüncü örneğimiz degradenin içine birçok yarım daire yerleştirir.

Bunun iki rengi var. Birincisi 34vmin konumunda rgba(32,68,35,0.73). İkincisi rgba(0,10,4,0.76) 39vmin konumunda.

• Renk 1: rgba(32,68,35,0.73) (34vmin konumunda)
• Renk 2: rgba(0,10,4,0.76) (39vmin konumunda)

Gradyan Türünü Eliptik olarak değiştirin ve Yönü Üst olarak ayarlayın. Bunu tekrarla . Birimi Minimum Görünüm Alanı olarak değiştirin. Arka plan görüntüsünün üzerine yerleştirin.

• Gradyan Türü: Eliptik
• yön: Üst
• Tekrar: Evet
• Birim: Görüntü Alanı Minimum
• Gradyanı Arka Plan Resminin Üstüne Yerleştir: Evet

Konik Gradyan Tipi

Konik gradyan tipi, gradyanı koni yukarıdan görülüyormuş gibi bir koni şeklinde görüntüler.

İlk Konik Gradyan Örneği

Bu örnek, degradenin ortasından sola, bir tarafında açık renkli ve diğer tarafında koyu renkli bir çapraz çizgi yerleştirir.

İki rengi vardır. Birincisi , %0 konumunda rgba(92,158,82,0.76)'dir. İkincisi , %50 konumunda rgba(0,10,4,0.76)'dır.

• Renk 1: rgba(92,158,82,0.76) (%0 konumunda)
• Renk 2: rgba(0,10,4,0.76) (%50 konumunda)

Degrade Türünü Konik olarak değiştirin. Yönü 221deg olarak ayarlayın. Konumu ortalayın ve tekrar etmemesini sağlayın . Gradyanı görüntünün üzerine yerleştirin.

• Gradyan Türü: Konik
• Yön: 221 derece
• Pozisyon: Merkez
• Tekrar: Hayır
• Gradyanı Arka Plan Resminin Üstüne Yerleştir: Evet

İkinci Konik Gradyan Örneği

Bu örnek bir öncekine benzer, ancak çizgiyi merkezden yukarıya doğru yerleştirir.

Bunun dört rengi var. Birincisi %7 konumunda rgba(20,40,20,0.76). Renk 2 , %24 konumunda rgba(30,73,25,0.68)'dir. Renk 3 , %65 konumunda rgba(103,132,30,0.68)'dir. Dördüncü renk, %85 konumunda rgba(38,86,26,0.68)'dir.

• Renk 1: rgba(20,40,20,0.76) (%7 konumunda)
• Renk 2: rgba(30,73,25,0.68) (%24 konumunda)
• Renk 3: rgba(103,132,30,0,68) (%65 konumunda)
• Renk 4: rgba(38,86,26,0,68) (%85 konumunda)

Gradyan Tipini konik olarak ve Yönü 0deg olarak ayarlayın. Pozisyonu Ortalayın . Tekrar etmemesini ve görüntünün üzerine yerleştirmesini sağlayın.

• Gradyan Türü: Konik
• Yön: 0 derece
• Pozisyon: Merkez
• Tekrar: Hayır
• Gradyanı Arka Plan Resminin Üstüne Yerleştir: Evet

Üçüncü Konik Gradyan Örneği

Son örneğimiz, degradenin üst merkezinden dışa doğru her yöne doğru bir çizgi patlaması yerleştirir.

Bunun iki rengi var. Birincisi 5 derece konumunda rgba(30,73,25,0.68). İkincisi , 7deg konumunda rgba(20,40,20,0.76).

• Renk 1: rgba(30,73,25,0.68) (5 derece konumunda)
• Renk 2: rgba(20,40,20,0.76) (7 derece konumunda)

Eth Gradient Type'ı Konik olarak ve Yönü 221deg olarak ayarlayın. Pozisyonu En Üste Yerleştirin. Bunu tekrar edin ve arka plan görüntüsünün üzerine yerleştirin.

• Gradyan Türü: Konik
• Yön: 221 derece
• Pozisyon: Üst
• Tekrar: Evet
• Gradyanı Arka Plan Resminin Üstüne Yerleştir: Evet

Biten Düşünceler

Divi's Gradient Builder'daki gradyan türlerini karşılaştırmaya bakışımız bu. Bu örneklerde görebileceğiniz gibi ayarlar basittir, ancak bunlardan herhangi biri degrade tasarımında büyük bir fark yaratabilir. En iyi sonuçlar için, farklı yönlere ve konumlara sahip degrade türlerini deneyin ve ne oluşturabileceğinizi görmek için tekrar seçeneğini etkinleştirin veya devre dışı bırakın.

Senden duymak istiyoruz. Divi Gradient Builder'da farklı degrade türlerini kullandınız mı? Yorumlarda deneyiminizi bize bildirin.