Divi ile Renk Filtreleri, Efektler ve Karışım Modu Örnekleri Nasıl Yeniden Oluşturulur (Bölüm 1)

Divi ile renk filtrelerimizi, efektlerimizi ve karışım modu örneklerimizi nasıl yeniden oluşturacağımıza ilişkin 2 bölümlük serimize hoş geldiniz. Birlikte neler yaratacağımız hakkında bir fikir edinmek için bu örneklere göz atmak için filtre demo sayfamıza göz atabilirsiniz.

Divi'nin yeni Filtreler, Efektler ve Karışım Modlarının son sürümüyle, Görsel oluşturucu içinde eksiksiz bir tasarım araçları cephaneliğine sahipsiniz. Artık bu tür ayarlamalar yapmak istediğinizde Photoshop'a gitmek zorunda değilsiniz çünkü bu yeni seçenekler Divi içindeki herhangi bir öğeye uygulanabiliyor. Ve tasarım sürecini kesintiye uğratmak zorunda kalmadan, anında tarayıcınızda görsel ayarlamalar yapabilmenizi seviyorum.

Bugün size demonun ilk 3 bölümünü nasıl yeniden oluşturacağınızı ve bölümlerde kullanılan farklı filtreleri, efektleri ve karışım modlarını nasıl vurgulayacağınızı göstereceğim. Bu yeni seçeneklerin nasıl çalıştığı hakkında size daha fazla fikir verecek olan gönderi boyunca öne çıkanlara dikkat edin.

Başlayalım.

gizli zirve

İşte bugün oluşturacağımız iki bölüm.

Gerekli Tasarım Öğeleri

Demomuzdan örnekler oluşturacağım için aynı görselleri ve tasarım ayarlarını kullanacağım. İhtiyacınız olan tek tasarım öğeleri, ilerledikçe sağlayacağım bu eğitimde kullanacağım resimler. Bu gönderiye gömülü olan görseli kullanmak için, onu sayfadan masaüstünüze veya istediğiniz klasöre sürüklemeniz yeterlidir.

Bunun dışında, ihtiyacınız olan tek şey güncellenmiş bir Divi yüklemesidir ve gitmeye hazırsınız.

Divi ile Renk Filtreleri, Efektler ve Karışım Modu Örnekleri Nasıl Yeniden Oluşturulur (Bölüm 1)

Youtube Kanalımıza Abone Olun

Divi ile Bölüm 1'i Yeniden Oluşturma

Bölüm Öne Çıkanlar

Kullanılan Karışım Modu: Parlaklık
Kullanılan Filtreler ve Efektler: Doygunluk, Opaklık ve Bulanıklık

Bu bölüm, Parlaklık Karışımı modunun ve Bulanıklaştırma efektinin kullanımını vurgular. Sonuç, tasarımı gerçekten bir araya getirmek için harmanlanmış eşleşen renklerle ve belirli derinliklerde yüzer gibi görünen bir grup görüntüdür. İşte nasıl inşa edileceği.

Normal Bir Bölüm Oluşturun

Visual Builder'ı kullanarak boş bir tuvalden başlayacağız. Halihazırda bir sütun satırı olan normal bir bölümünüz olmalıdır. Bölümü düzenleyerek ve aşağıdakileri güncelleyerek başlayın:

İçerik Sekmesinin altında…
Arka Plan Degrade Renkleri: #1300bf, #ff00a1
Gradyan Yönü: 120deg

Tasarım Sekmesinin altında…
Özel Dolgu: 130 piksel Üst, 130 piksel Alt

Ayarları kaydet

Satırın Sütun Yapısını Değiştir

Şu anda satır için tek sütunlu bir yapımız var. Bunu dörtte bir buçuk dörtte bir sütun yapısıyla değiştirin.

Başlık Bölümü için bir Metin Modülü Ekleyin

Bölümümüz için bir başlık ekleyelim. Satırın orta sütununa bir metin modülü ekleyin ve ayarları aşağıdaki gibi güncelleyin:

İçerik sekmesi altında…
İçerik:

<h2>New Features</h2>
Suspendisse pulvinar lacus nec sollicitudin finibus.Pellentesque sed euismod mauris. Nec sollicitudin finibus, ligula quam dui maximus ornare ex nulla ut lacus, sit amet cursus leo.

Tasarım sekmesi altında…
Metin Rengi: Açık
Metin Yazı Tipi: Poppins
Metin Metin Boyutu: 16px
Metin Satır Yüksekliği: 2em
Metin Yönü: Ortalanmış
H2 sekmesini seçin
Başlık 2 Yazı Tipi: Poppins
Başlık 2 Metin Boyutu: 56px
Başlık 2 Çizgi Yüksekliği: 1.3em
Özel Kenar Boşluğu: 10 piksel Alt
Animasyon Stili: Slayt
Animasyon Yoğunluğu: 20%
Animasyon Opaklığı Başlatma: %100

Resimleriniz için Üç Sütunlu Satır Ekleyin

Doğrudan önceki satırın altına üç sütun (1/3 1/3 1/3) satırı eklemek için tıklayın. Bu, üç resmimizi sergilememiz olacaktı. Satır ayarlarında tasarım sekmesine gidin ve aşağıdakileri güncelleyin:

Özel Oluk Genişliğini Kullan: EVET
Oluk Genişliği: 2
Sütun 1 Özel Dolgu: %3 Üst, %3 Sağ, %3 Alt, %3 Sol
Sütun 3 Özel Dolgu: %5 Üst, %5 Sağ, %5 Alt, %5 Sol

Karışım Modu: Parlaklık

İlk Sütuna Resim Ekle

İlk sütunda, bir resim modülü ekleyin ve içerik sekmesi ayarları altında resminizi yükleyin/ekleyin. İşte kullandığım resim (kullanmak istiyorsanız masaüstünüze sürükleyin):

Satır için ayarlanan Parlaklık karıştırma efekti nedeniyle, görüntünüz satır sütununa eklenirken otomatik olarak yeni bir "karışımlanmış" renk alacaktır. Bunun nedeni, görüntünün harmanlanmış katmana veya satıra dahil edilmiş olmasıdır.

Tasarım sekmesine gidin ve aşağıdakileri güncelleyin:

Özel Kenar Boşluğu: 60px Alt, -6px Sol (tablet ve akıllı telefon için -6px Sol kenar boşluğunu çıkarın)
Kutu Gölgesi: 1. seçim
Kutu Gölge Dikey Konumu: 16px
Kutu Gölge Bulanıklığı Gücü: 100 piksel

Doygunluk: %64
Opaklık: %49
Bulanıklık: 4 piksel

Animasyon Stili: Slayt
Animasyon Yönü: Yukarı
Animasyon Süresi: 1250ms
Animasyon Yoğunluğu: %9
Animasyon Opaklığı Başlatma: %100

İkinci Sütunda İkinci Bir Görüntü Oluşturmak için Görüntü #1 Modülünü Kopyalayın

Yapmamız gerekenden daha fazla çalışmamıza gerek yok. O halde az önce oluşturduğunuz image modülünü ikinci sütuna kopyalayıp yapıştıralım ve seçeneğin sağındaki varsayılanı geri yükle simgesine tıklayarak aşağıdakini varsayılan ayara geri yükleyelim.

Doygunluk: %64 (varsayılana geri yükle)
Opaklık: %49 (varsayılana geri yükle)
Bulanıklaştırma: 4 piksel (varsayılana geri yükle)

Ardından aşağıdaki animasyon ayarlarını güncelleyin:

Animasyon Süresi: 1300ms
Animasyon Yoğunluğu: %19

Değişiklikleri Kaydet

Üçüncü Sütunda Üçüncü Bir Görüntü Oluşturmak için Görüntü #1 Modülünü Kopyalayın

İlk sütundaki image modülünü tekrar kopyalayıp üçüncü sütuna yapıştırın ve tasarım sekmesindeki image modülü ayarlarını aşağıdaki gibi güncelleyin:

Doygunluk: %48
Opaklık: %24
Bulanıklık: 10 piksel

Animasyon Süresi: 1350ms
Animasyon Yoğunluğu: %7

Ayarları kaydet

Düğmeyi Ekle

Eşleşen düğmeyi üç görüntünün altına eklemek için tek bir sütun satırı oluşturun, bir düğme modülü ekleyin ve aşağıdakileri güncelleyin:

Düğme için Özel Stilleri Kullan: EVET
Düğme Metin Boyutu: 14px
Düğme Metin rengi: #4444ff
Düğme Harf Aralığı: 1px
Düğme Yazı Tipi: Poppins
Yazı Ağırlığı: Yarı Kalın
Düğme Vurgulu Harf Aralığı: 1 piksel
Özel Dolgu: 12px Üst, 24px Sağ, 12px Alt, 24px Sol

Yeni filtre efektlerine göz atın:

Bölüm #2'yi Yeniden Oluşturma

Bu sonraki bölüm, güzel bir tasarım ve paralaks efekti oluşturmak için iki arka plan görüntüsünü bir araya getirmek için Çarpma karıştırma modunu gösterir. İşte nasıl inşa edileceği.

Normal Bir Bölüm Oluşturun

Önce bir sütun satırı olan yeni bir normal bölüm ekleyin. İlk modülümüzü eklemeden önce bölüm ayarlarına atlayın ve içerik sekmesinin altına bir arka plan resmi ekleyin. İşte kullandığım…

Ayrıca, True Parallax yöntemiyle paralaks efektini kullanmayı seçin. Bu, sayfayı aşağı kaydırırken dağların o harika görünen hareketini yaratacaktır.

Ardından Tasarım sekmesine gidin ve aşağıdakileri güncelleyin:

Özel Dolgu: 0px Üst, 0px Sağ, 0px Alt, 0px Sol

Satır Ayarlarını Düzenleyin

Buradaki amaç, satır arka plan resminin bölüm arka plan resminizle karışabilmesi için satırınızın bölümünüzün tam genişliğine ve yüksekliğine yayılmasını sağlamaktır. Bunu yapmak için satırınızın ayarlarını düzenleyin ve satırınıza yeni bir arka plan resmi ekleyin. İşte kullandığım…

CSS paralaks yöntemini kullanmak için seçin.

Şimdi satırı bölümün tüm genişliğine genişletmemiz ve karışım modumuzu eklememiz gerekiyor. Bunu Tasarım sekmesi altında aşağıdaki gibi yapabiliriz:

Özel Genişlik Kullan: EVET
Birim: %
Özel Genişlik: %100
Özel Dolgu: %20 Üst, 0px Sağ, %20 Alt, 0px Sol

Karışım Modu: Çarpma

Başlık için Metin Modülünü Ekleyin

Artık sıranız ayarlandığına göre, devam edin ve sütununuza bir Metin Modülü ekleyin ve aşağıdakileri güncelleyin:

İçerik ayarları altında…
İçerik:

<h2>Travel</h2>
EXPLORE THE WORLD

Tasarım ayarları altında…
Metin Rengi: Açık
Metin Yazı Tipi: Lato
Metin Yazı Tipi Ağırlığı: Ağır
Metin Harf Aralığı: 9px
Metin Yönü: Merkez
H2 sekmesini düzenlemek için seçin..
Başlık 2 Yazı Tipi: Lato
Başlık 2 Yazı Tipi Ağırlığı: Ağır
Başlık 2 Metin Boyutu: 12vw
Başlık 2 Harf Aralığı: -0.02em
Başlık 2 Çizgi Yüksekliği: 1.4em

Sonucu kontrol edin.

Bölüm #3'ü Yeniden Oluşturma

Bu sonraki bölüm bazı özel html/css kullanıyor ancak sonuç kesinlikle bir ilham kıvılcımı. Animasyon olmadan bile, degrade arka plan üzerindeki metnin farklı renkli harfleri, büyük metin ekranları için benzersiz bir tasarım seçeneği sergilemek üzere birlikte gerçekten iyi çalışır.

Tek Sütun Satırlı Normal Bölüm Ekleme

İlk olarak, tek sütunlu bir satıra sahip yeni bir normal bölüm ekleyin. Şimdi geri dönün ve bölüm ayarlarını aşağıdaki gibi düzenleyin:

İçerik sekmesi altında…
Gradyan Arka Plan Renkleri: #0ac9ff, #4600bf
Gradyan Yönü: 164deg

Tasarım sekmesi altında…
Özel Dolgu: 0px Üst, 0px Sağ, 0px Alt, 0px Sol

Satır Ayarlarını Güncelle

Şimdi satır ayarlarımızı biraz genişletmemiz gerekiyor. Tasarım sekmesi altındaki satır ayarlarını aşağıdakilerle güncelleyin .

Özel Genişlik Kullan: EVET
Birim: %
Özel Genişlik: %100
Özel Oluk Genişliğini Kullan: EVET
Oluk Genişliği: 3
Özel Dolgu: 200px Üst, 60px Sağ, 200px Alt, 60px

Karışım Modu: Yer Paylaşımı

İlk Metin Modülünü Ekleyin

Şimdi biraz metin ekleyelim. Aşağıdakileri içeren bir metin modülü ekleyin:

İçerik sekmesi altında…
İçerik: “Divi Teması”

Tasarım Sekmesinin altında…
Metin Rengi: Açık
Metin Yazı Tipi: Nunito
Metin Yazı Tipi Ağırlığı: Ultra Kalın
Metin Yazı Tipi Stili: Büyük Harf (TT)
Metin Metin Boyutu: 22px
Harf Metin Aralığı : 9px
Metin Yönü: Merkez

Büyük Metin İçin İkinci Metin Modülünü Ekleyin

Şimdi bu sonraki metin modülü, bölümün öne çıkan kısmıdır. Bir metin modülü ekleyin ve aşağıdakileri güncelleyin:

İçerik:

<h2>C<span style="color:rgba(247,247,247,0.4);">o</span></span style="color:rgba(219, 8, 215, 0.4);">n</span><span style="color:rgba(185, 255, 10, 0.47);">d</span><span style="color:rgba(1, 55, 91, 0.47);">e</span><span style="color:rgba(0, 192, 198, 0.77);">n</span><span style="color:rgba(8, 17, 204, 0.52);">s</span>e<span style="color:rbga(0, 224, 201, 0.69);">d</span></h2>

Tasarım Sekmesinin altında…
H2 sekmesine tıklayın…
Başlık 2 Yazı Tipi: Nunito
Başlık 2 Yazı Tipi Ağırlığı: Kalın
Başlık 2 Metin Hizalama: Orta
Başlık 2 Metin boyutu: 16vw
Başlık 2 Metin Rengi: rgba(0,0,0,0.36)
Başlık 2 Sıkıştırmaya İzin Verme: -0.2em

Gelişmiş Sekmesi altında…
CSS Sınıfı: harf aralığı

Not : Bu css sınıfı, genişleyen bir animasyon eklemek için bazı özel CSS eklemek için kullanılacaktır.

Düğmeyi Ekle

Ancak özel CSS'mizi eklemeden önce, Button modülünü aşağıdaki ayarlarla ekleyelim:

İçerik Sekmesi altında…
Düğme Metni: Şimdi Katılın

Tasarım Sekmesi altında…
Düğme Hizalama: Merkez
Metin Rengi: Açık
Düğme için Özel Stilleri Kullan: EVET
Düğme Harf Aralığı: 3px
Düğme Yazı Tipi: Nunito
Yazı Ağırlığı: Kalın
Yazı Tipi Stili: Büyük Harf (TT)
Düğme Vurgulu Harf Aralığı: 3px
Özel Dolgu: 10px 30px 10px 30px

Ayarları kaydet

Sayfa Ayarları Modalına Özel CSS Ekleme

Şimdi mektuplarımızı canlandırmak için özel CSS'mizi ekleyelim. Alt kısımdaki ayarlar menüsünü genişletmek için açın ve sayfa ayarlarını açmak için tıklayın. Sayfa Ayarları Kalıcı'dan Gelişmiş sekmesine tıklayın ve aşağıdaki Özel CSS'yi ekleyin:

.letter-spacing .et_pb_text_inner h2 {
white-space: nowrap;

-webkit-animation: et_pb_fade_2 4s infinite ease !important; /* Safari 4+ */
  -moz-animation:    et_pb_fade_2 4s infinite ease !important; /* Fx 5+ */
  -o-animation:      et_pb_fade_2 4s infinite ease !important; /* Opera 12+ */
  animation:         et_pb_fade_2 4s infinite ease !important; /* IE 10+, Fx 29+ */

}

@-webkit-keyframes et_pb_fade_2 {
  0%   { opacity: 0; letter-spacing: 0em; }
  50% { opacity: 1; letter-spacing: -0.25em; }
  100%   { opacity: 0; letter-spacing: 0em; }
}


@-moz-keyframes et_pb_fade_2 {
  0%   { opacity: 0; letter-spacing: 0em; }
  50% { opacity: 1; letter-spacing: -0.25em; }
  100%   { opacity: 0; letter-spacing: 0em; }
}

@keyframes et_pb_fade_2 {
  0%   { opacity: 0; letter-spacing: 0em; }
  50% { opacity: 1; letter-spacing: -0.25em; }
  100%   { opacity: 0; letter-spacing: 0em; }
}

NOT: Sayfa ayarlarında Özel CSS'yi kullanmak, Alt Tema kullanmadan belirli bir sayfaya harici CSS eklemenin uygun bir yoludur. Başka bir sayfada bu CSS'ye ihtiyacımız olmadığı için bu en mantıklısı.

Daha Fazla Bilgi İster misiniz?

Filtreler, efektler ve karışım modları arasındaki farkı açıklamaya yardımcı olan faydalı Photoshop referansları için bu bağlantılara göz atın:

http://photoblogstop.com/photoshop/photoshop-blend-modes-explained

https://helpx.adobe.com/premiere-pro/using/blending-modes.html

geliyor

Bu Eğitimin bir sonraki bölümünde, size demo örneklerinin 4. ve 5. bölümlerini nasıl yeniden oluşturacağınızı göstereceğim ve bunun yanında kullanılan filtreleri ve karışım modlarını tartışacağım. Orada görüşmek dileğiyle!

Lütfen yorumlarınızı aşağıya eklemekten çekinmeyin.

Bir sonrakine kadar…