Bir renk filtresi örneği nasıl yeniden yapılır, efekt & amp;Divi ile karışım modu (Bölüm 1)
Bir renk filtresi, efekt ve divi ile karışık bir mod örneği nasıl oluşturulacağına dair 2 bölüm serimize hoş geldiniz. Birlikte ne yapacağımıza genel bir bakış almak için bu örnekleri görmek için demo filtre sayfamızı görebilirsiniz. Yeni Blend Divi filtresi, efekt ve modunun piyasaya sürülmesiyle, görsel üreticide eksiksiz bir tasarım aracı deposu var. Artık bu tür bir ayar yapmak istediğinizde Photoshop’a gitmenize gerek yok çünkü bu yeni seçenek Divi’deki herhangi bir öğeye uygulanabilir. Ve tasarım sürecine müdahale etmek zorunda kalmadan doğrudan tarayıcınızda görsel ayarlamaları nasıl hızlı bir şekilde yapabileceğinizi seviyorum.
Bugün size demonun ilk 3 bölümünü nasıl yeniden oluşturacağınızı ve tüm parçalarda kullanılan çeşitli filtreleri, efektleri ve karışık modları nasıl vurgulayacağınızı göstereceğim. Gönderi boyunca, bu yeni seçeneğin nasıl çalıştığı hakkında daha fazla bilgi verecek spot ışığı izleyin. Başlayalım. Buraya kayan zirve bugün yapacağımız iki bölüm.
Buna ek olarak, ihtiyacınız olan tek şey güncellenmiş Divi kurulumu ve bunu yapmaya hazırsınız. Bir Renk Filtresi, Efekt ve Karışım Modu Örneği Divi ile (Bölüm 1) YouTube kanalımıza abone olma Örneği, Bölüm #1, spot ışığı Divi Karışımı Modu Bölümüyle 1 numaralı Bölüm: Kullanılan Filtre ve Kullanılan Etkiler: Doygunluk, Opaklık ve bu bölümü bulanıklaştırma karışımı ve bulanıklık etkilerinin kullanımını vurgulamaktadır. Sonuç, tasarımı gerçekten birleştirmek için birleştirilmiş bir renkle yüzen ve belirli bir derinlik görünen bir grup görüntüdür. Nasıl oluşturulacağı aşağıda açıklanmıştır. Görsel bir inşaatçı kullanarak boş bir tuvalden başlayarak düzenli bölümümüzü yapın. Bir satır sütun içeren 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 … Gradyan Renk Arka Plan: #1300BF, #FF00A1 Gradyan Yönü: 120deg
Tasarım sekmesinin altında … Dolgu Özel: Top 130 piksel, alt 130 piksel Ayarları Kaydet Sıra sütununun yapısını değiştirin. Bunu çeyrek çeyrek çeyrek sütun yapısına dönüştürün. Metin modülünü başlık bölümüne ekleyin, başlığı bölümümüze ekleyelim. Metin modülünü satırın orta sütununa girin ve ayarları aşağıdaki gibi güncelleyin: İçerik sekmesinin altında … İçindekiler:
Yeni özellikler
Askı pulvinar lacus nec solisitudin finibus. Pellentesque sed euismod mauris. NEC SOLITIDUDIN FINIBUS, Ligula Quam DUI Maximus Ornare Ex Nulla UT Lacus, Sit amet Cursus Leo. Tasarım sekmesinin altında … Metin Rengi: Yazı tipi Yazı Tipi Metin: Poppins Metin Boyutu: 16px Yüksek Satır: 2EM Metin Yönlendirme: Merkezi Seçim H2 Başlık 2 Yazı Tipi: Poppins Başlık 2 Metin Boyutu: 56px POS 2 Hat Yüksekliği: 1.3EM Özel Marj: 10px’in Altında Animasyon Stili: Slayt Yoğunluğu Animasyon:% 20 Animasyon Başlangıç Opaklık:% 100 Üç sütun ekleyin Üç sütun satırı (1/3 1/3 1/3) eklemek için tıkladığınız görüntü için doğrudan bir önceki satırın altına . Burası üç fotoğrafımızı sergilemek için yerimiz olacak. Satır ayarlarında aşağıdaki tasarım sekmesini açın ve güncelleme:
Özel olukları kullanın: Evet Oluklar: 2 Sütun 1 Özel Dolgu:% 3 üst,% 3 sağ,% 3 alt,% 3 Sol Sütun 3 Dolgu Özel:% 5 üst,% 5 sağ,% 5 alt,% 5 Sol Karışık Mod : Parlaklık
İlk sütundaki ilk sütuna resim ekleyin, resim modülünü ekleyin ve içerik sekmesi ayarlarının altına görüntünüzü yükleyin/girin. İşte kullandığım resim (kullanmak istiyorsanız masaüstünüze çekin): Çizgi için ayarlanan parlaklık karışımı, görüntünüz otomatik olarak yeni “karışım” rengini satır sütununa eklerken alacaktır. Bunun nedeni, resmin katmana veya karışıma dahil edilmesidir. Aşağıdaki Tasarım ve Güncelleme sekmesini açın: Özel kenar boşluğu: 60px dip, -6px sol (tabletler ve akıllı telefonlar için -6px sol kenar boşluğunu kaldır) Gölge Kutusu: İlk Seçim Dikey Konum Gölge Kutusu: 16px Bulanık Kuvvet Gölge Kutusu: 100pxSosation:% 64 Opaklık :% 49 komik: 4px
Filtre vurguları ve efektleri: Doygunluk, renklerin yoğunluğunu veya bir şeyin rengini ortadan kaldırmak için ne kadar gri eklendiğini kontrol eder. Opaklık, bir şeyin ne kadar şeffaf veya bulanık olması gerektiğini tanımlar. Bulanıklık, bir şeyin vizyondan bulanıklaştığı piksel değerini tanımlar. Bu üç filtre, uzaktan oturan görüntü efektleri oluşturmak için birleştirilir. Animasyon Stili: Slayt Animasyon Yönü: Animasyon Süresi: 1250ms Animasyon Yoğunluğu:% 9 Animasyon Başlangıç Opaklığı:% 100
İkinci sütunda ikinci resmi yapmak için #1 görüntü modülünü kopyalayın. Bu nedenle, yeni oluşturduğunuz görüntü modülünü kopyalayıp ikinci sütuna geçelim ve seçeneğin sağındaki varsayılan simgeyi tıklayarak aşağıdakileri varsayılan ayarlara döndürelim.
Doygunluk:% 64 (varsayılana dönün) Opaklık:% 49 (varsayılana dönüş) Bulanıklık: 4px (varsayılana dönün) Sonra aşağıdaki animasyon ayarlarını güncelleyin: Animasyon Süresi: 1300ms Animasyon Yoğunluğu:% 19 Kaydet Salin Salin Şekil Modülü #1 Üçüncü sütunda bir görüntüyü üçüncü yapmak için ilk sütundaki görüntü modülünü kopyalayın ve üçüncü sütuna yapıştırın ve tasarım sekmesindeki görüntü modülü ayarlarını şu
Etki Önemli Noktaları: Opaklık değeri azalır ve görüntünün arka planda daha derin olduğu ve bu nedenle daha az görünür olduğu izlenimini vermek için bulanıklık değeri arttırılır. Animasyon Süresi: 1350ms Animasyon Yoğunluğu:% 7 Kaydet ayarları
Üç görüntünün altına uygun bir düğme eklemek için bir düğme ekleyin, sadece sütunun bir satırını oluşturun, aşağıdaki düğme modülünü ekleyin ve güncelleyin: Düğme için özel kuvvet kullanın: evet düğmenin metin boyutu: 14px renk metin düğmesi: # 4444FF Mesafe Mektup Düğmesi: 1px Yazı Tipi Düğmesi: Poppins Mektup Ağırlığı: Yarı Kalın Mesafe Gezinme Düğmesi: 1 Piksel Dolgu Özel: Üst 12px, sağ 24px, alt 12px, sol 24px yeni filtre etkisine bakın: Bir sonraki #2 bölümünü yeniden oluşturun, güzel tasarımlar ve paralaks efektleri üretmek için iki arka plan görüntüsünü birleştirmek için bir çarpma karışım modu görüntüleyin. İşte nasıl inşa edileceğiniz aşağıda açıklanmıştır.
İlk Düzenli Bölümü Oluşturun Bir satır sütun içeren yeni bir düzenli bölüm ekleyin. İlk modülümüzü eklemeden önce, bölümün ayarlarını girin ve içerik sekmesinin altına arka plan görüntüsünü ekleyin. Aşağıdakiler kullandığım şey …
Ayrıca, gerçek paralaks yöntemiyle bir paralaks efekti kullanmayı seçin. Bu, sayfayı kaydırırken havalı görünen dağlık bir hareket yaratacaktır. Ardından aşağıdaki tasarım sekmesini açın ve güncelleme: Dolgu özelliği: 0px üst, 0px sağ, 0px alt, 0px Sol Düzenleme Ayarları Buradaki amaç, hattınızın arka planla arka planla entegre edilebilmesi için tam ve yükseklik genişliğinize ulaşması içindir rolünüzü görün. Bunu yapmak için satır ayarlarınızı düzenleyin ve satırınıza yeni arka plan resimleri ekleyin. Kullandığım şey bu … CSS paralaks yöntemini kullanmayı seçin. Şimdi satırı tam genişliğe genişletmeli ve karışık modumuzu eklememiz gerekiyor. Bunu tasarım sekmesinin altında aşağıdaki gibi yapabiliriz: Özel genişliği kullanın: evet birim:% özel genişlik:% 100 özel dolgu:% 20 üst, 0px sağ,% 20 daha düşük, 0px sol karışık mod: çarpın Karışım modu vurguları: Karışık karışık mod, bu örneğin spot ışığıdır. Bu karışım modu temel olarak akım katmanı/satırını (arka plan ve metin) aşağıdaki bir katmanla (o parçanın dağ arka planı) çarpar. Etkiyi düşünmenin kolay yolu, slayt projektöründe diğerinin arkasına istiflenmiş iki slayt hayal etmektir. Ekranda iki görüntü yansıtıyorsanız, biraz daha karanlık bir kombinasyon elde edersiniz.
Satırınız ayarlandıktan sonra geçerli başlık için metin modülünü ekleyin, devam edin ve metin modülünü sütununuza ekleyin ve aşağıdakileri güncelleyin: İçerik ayarlarının altında … İçerik:
Seyahat
Dünyayı keşfet Tasarım Ayarlarının Altında … Metin Rengi: Yazı Tipi Yazı Tipi Metin: Lato Metin Yazı Tipi Ağırlık: Alan Harflerinin Ağırlığı Metin: 9px Metin Oryantasyonu: Orta Seçim sekmesi H2’yi seçin .. Başlık 2 Yazı Tipi: Lato Başlık 2 Yazı Tipi Ağırlık: Ağırlık Başlık 2 Metin Boyutu: 12VW Aralık Başlık 2 Harf: -0.02EM POS 2 Çizgi Yüksekliği: 1.4EM Sonuçlara bakın. Animasyon olmasa bile, renkli harfler, büyük bir metnin görünümü için benzersiz bir tasarım seçeneği görüntülemek için birlikte çok iyi çalışan gradyanın arka planından farklıdır. İlk sütun satırı ile normal bölümü ekleyin, bir sütun satırı ile yeni bir normal parça ekleyin. Şimdi Ayarlar Bölümü’ne geri dönün ve düzenleyin: İçerik sekmesinin altında … Gradyan Arka Plan Rengi: #0AC9ff, #4600BF DEĞERLENDİRME yönü: 164deg Tasarım sekmesinin altında … Özel Dolgu: 0px üst, 0px sağ, 0px alt, 0px Sol Güncelleme Satır Ayarları Şimdi çizgi ayarlarımızı hafifçe genişletmemiz gerekiyor. Satır ayarlarını Tasarım sekmesinin altındaki aşağıdakilerle güncelleyin. Özel genişliği kullanın: Evet Birim: % Özel Genişlik: % 100 Özel Talang Genişliği: Evet Talang Genişliği: 3 Özel Dolgu: 200px Top, 60px Sağ, 200px Alt, 60px Karışık Mod: GenişlemeKarışım Modu Vurguları: Kaplama Karışım Modu, diğer katmanlarla birleştirildiğinde, karanlık alanı daha koyu (çarpma gibi) ve daha parlak alanlar (ekranlar gibi) hale getireceği çarpma ve ekran karışım modlarının bir kombinasyonudur. Bu örnekte, bu etkiyi parçanın arka planıyla karıştıracak farklı renkli harflerle görebileceksiniz. İlk Metin Modülünü Ekleyin Şimdi biraz metin ekleyelim. Metin modülünü aşağıdakilerle ekleyin: İçerik sekmesinin altında … İçerik: Tasarım sekmesinin altında “Divi Tema” … Metin Rengi: Yazı tipi Yazı Tipi Metin: Nunito Ağırlık Yazı Tipi Metin: Çok Kalın Metin Yazı Tipi Tarzı: COPER (TT) Metin Boyutu Metin: 22 PX Metin Alanı: 9px Metin Yönlendirme: Orta Büyük Bir Metin İçin İkinci Bir Metin Modülü Ekle Şimdi bir sonraki metin modülü bu bölümün spot ışığıdır. Aşağıdaki metni ve güncelleme modülünü ekleyin: İçindekiler:
c o n d e n s e d
Tasarım sekmesinin altında … H2 Sekme … Başlık 2 Yazı Tipi: Nunito Başlık 2 Yazı Tipi Ağırlık: Kalınlık Başlık 2 Metin Seviyesi: Orta Başlık 2 Metin Boyutu: 16VW Başlık 2 Renk Metin: RGBA (0.0,0,0.36) Post 2 SPACKING: -0.2EM
Gelişmiş sekmesi altında … CSS Sınıfı: Aralık mektubu Not: Bu CSS sınıfı, genişletilmiş animasyon eklemek için bazı özel CSS eklemek için kullanılacaktır.
-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 CSS Custom kullanılması, çocuğun temasını kullanmadan belirli bir sayfaya harici CSS eklemenin kolay bir yoludur.Bu CSS’ye başka bir sayfada ihtiyacımız olmadığından, bu en makul.Daha fazlasını bilmek ister misin?Filtreler, efektler ve karışık modlar arasındaki farkı açıklamaya yardımcı olan Photoshop referansları için bu bağlantıya bakın: http://photoblogstop.com/photoshop/photoshop-blend-modes-splained https://helpx.adobe.com/premiere-pro / Kullanarak/ harmanlama-modes.html bu öğreticinin bir sonraki bölümünde gelecek, size demo örneğinin 4 ve 5. bölümlerini nasıl oluşturacağınızı ve boyunca kullanılan filtre ve karışık modları nasıl tartışacağınızı göstereceğim.Sizi orada görmeyi umuyorum! Yorumlarınızı aşağıya eklemekten çekinmeyin.Başka bir zamana kadar …
