Bir renk filtresi örneği nasıl yeniden yapılır, efekt & amp;Divi ile karışım modu (Bölüm 2)
Bu Seri 2 Serisinin bir renk filtresi, efekt ve Divi ile karışık modumuzun örneğini nasıl yeniden oluşturacağınızla ilgili son bölümüne 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. Son öğreticide, Filtre Demo sayfasından Bölüm #1, #2 ve #3’ü yeniden oluşturuyorum. Bazı ilham verici örnekler yapmak için parlaklık, çarpma ve bindirme karışım modlarının bir dizi filtre ve efekt ile birleştirildiğini vurguladım. Sağ ucuna atlamak ve ayrıldığımız yerden bitirmekten heyecan duydum.
Bugün, demo’nun 4 #4 ve #5’ini nasıl yeniden oluşturacağınızı göstereceğim ve bu kısım boyunca kullanılan çeşitli filtreler, efektler ve karışık modları (inklüzyonlar ve ekranlar gibi) vurgulayacağım. Haritalar ve video modülleri için filtrelerin ve efektlerin nasıl kullanılacağını bile gözden geçireceğim. Başlayalım. Buraya kayan zirve bugün yapacağımız iki bölüm.
Bu bölüm, çok fazla renk doygunluğunu feda etmeyen arka plan görüntüleri için tutarlı bir gri renk oluşturmak için filtreler ve efektlerle birleştirilmiş istisnaların bir karışım modu kullanır. Bu, arka plan görüntüsünün ayrıntılarını korumak istediğinizde geniş bir arka planı kullanmak için iyi bir alternatiftir. Logoya istisnaların kombinasyonu açıkça spot ışığıdır, çünkü daha hafif bir arka plan rengi versiyonu gösterir. Bu şekilde inşa edersiniz. İlk normal bölümü ekleyin Bir satır sütun ile yeni bir normal parça 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. Kullandığım şey aşağıdadır … Ayrıca, “Evet” için paralaks efekti kullanın ve gerçek paralaks yöntemini kullanın. Tasarım sekmesinin altında … Özel Dolgu: 0px üst, 0px sağ, 0px alt, 0px Sol Düzenleme ayarlarını kaydedin Parçanızın arka plan görüntüsü yerinde olduktan sonra, tam genişliğe sahip bir çizgi aralığı yapalım ve arka plan rengini ekleyelim istisnalarımızın karışımı için kullanılacaktır. Satır ayarlarını açın ve aşağıdakileri güncelleyin: İçerik sekmesinin altında … Arka Plan Rengi: #00ffaa Tasarım sekmesinin altında … Özel genişliği kullanın: Evet Birim:% Özel Genişlik:% 100 Özel Dolgu: Top 288px, sağ 0px, alt 288px, Sol 0px Renk: 208 Derece Doygunluk:% 0 Geri Dön:% 100% 100 Filtre Anlaşmaları ve Efektler: Filtreler Tersine Çeviren Renkleri Ters Renk Tekerleğinin ucundaki renklerle değiştirin. Bu yüzden beyaza döndüğünüzde siyaha döneceksiniz.
Karışık Mod: İstisna
Karışım Modu Vurgulama: Dışlama Karışım Modu temel olarak üst katmanın alt katmanını azaltır ve farklı renkleri tersine çevirir ve gri gibi rengi değiştirir. Bu örnekte, satıra eklenen yeşil arka plan rengi birkaç yerde çıkarılacak ve arkanın arka planının rengi ile ters çevrilecektir. (Bu durumda istisnaların bir karışım modu). Bir sütun satırına görüntü modülünü girerek ve resim ayarlarınızın içerik sekmesinin altında logoyu ekleyelim logo resminizi yükleyin. Kullandığım şey bu:
Tasarım sekmesinin altında … Görüntünün Uygulanması: Orta Animasyon: Roll Yoğunluk Animasyonu:% 31 Animasyon Başlangıç Opaklığı:% 100 Gördüğünüz gibi, siyah logo, arkasındaki siyahları “iptal ederek” istisnaların bir karışımını devralır ve sonuç daha parlak bir logo arka planıdır. Soğuk! Tüm bu bölüm #4 için. Yeniden Oluşturma #5 Karışım Modu Kullanılan: Filtre Ekranları ve Kullanılan Etkiler: Doygunluk, Parlaklık ve Kontrast Bu bölüm benim en sevdiğim tasarım olabilir. Yanlış olabilirim, ama bu tasarımcıların dakikalar değil, yapması saatler sürüyor. Kaçınılmaz olarak tasarım tarafı (benim gibi) ile mücadele eden bir serbestçiye verilecek değeri düşünüyorum. Buradaki vurgu, aşağıdaki katmanı çarpan ve Bölüm 2’de gördüğümüz çarpma modundan daha hafif bir karışım üreten bir ekran karışım modudur. İşte nasıl yapılacağı. Ayarların bir kısmını güncelleyebilmemiz için herhangi bir modül eklemek için 2 sütun (1/2 1/2) satırı ile normal bölüm için normal bir bölüm oluşturun. Demo sırasında bölümlerimizin her biri için aynı temel tasarım ayarlarını kullandığımız için, devam edelim ve doğru tıklayın seçeneğini kullanalım ve önceki parçayı kopyalayıp yeni bölümümüze bağlı kalın. Şimdi yapmamız gereken arka plan görüntüsünü değiştirmek. Kullanıyorum bu … Row’u şimdi düzenleyin Parçamız bittikten sonra, çizgi ayarlarımızı düzenlemeye geçelim. İçerik sekmesinin altında … Sütun 1 Arka Plan Rengi: Tasarım sekmesinin altındaki #ffffff … Bu satırı tam genişliği yapın: Evet Özel Gutch Genişliği: Evet Gapthang Genişliği: 1 Eşit Yükseklik Sütunu: Evet Özel Dolgu: 0px üst, 0px Sağ, 0px aşağıda, 0px sol sütun 1 dolgu özel: 40px üst, 40px sağ, 40px alt, 40px kaldı Karışık Mod: Ekran
Karışım Modu Vurgulama: Ekran Karışımı Modu Çarpma Karışımı Moduna benzer, ancak karışımdan daha koyu bir versiyon görüntülemek yerine, daha hafif bir versiyon gösterir. Ayarlarınızı düzenlerken çarpma ve ekran arasında geçiş yaparsanız bu açıktır.
Ayarları Kaydet
Sol sütunda metin modülünü aşağıdaki başlıkla ekleyin:
İhtiyacınız olan tek araç
Tasarım sekmesinin altındaki seçeneği güncelleyin … H2 sekmesi başlık 2 yazı tipini seçin: Lato Başlık 2 Yazı Tipi Ağırlık: Ağırlık Başlık 2 Metin Seviyesi: Orta Başlık 2 Metin Boyutu: 9VW (masaüstü), 16VW (tablet), 40px (akıllı telefon) Aralık Başlık 2 harfler: -0.02em
Düğmeyi ekleyin Seçilen ekran karışımı moduna sahip bir düğme eklediğinizde ne tür bir şekilde. Geçerli metin modülünün altına düğme modülünü ekleyin ve içerik sekmesindeki “İndir” Metin düğmesini girin. Tasarım sekmesinin altında … Düğme Düşmanları: Orta Düğme için Özel Bir Stil Kullanın: Evet Metin Boyutu Düğmesi: 24px Renk Düğmesi Metin: #ffffff Renk Arka Plan Anahtar Düğmesi: #A58461 Genişlik Genişlik Düğmenin sınırı: 0px mesafe harf tuşları : 4px yazı tipi Yazı tipi Düğmesi: Lato Ağırlık Harfleri: Yazı Tipi Kuvvet Ağırlığı: Büyük K Bölümü (TT) Düğme simgesini görüntüleyin: Arka plan yok Düğme: #000000 Harfin Gezinmesi: 4pxmargin Özel: 80px Üst Özel Dolgu: Top 12px, sağ 24px , alt 12px, sol 24px, 24 piksel sol, 24 piksel sol, 24 piksel sol
İkinci resmi sağ sütunda ekleyin Şimdi sağ sütundaki ikinci resmimize hazırız. Görüntü modülünü sağ sütuna ekleyin ve görüntünüzü içerik sekmesinin altına yükleyin. Tasarım sekmesinin altında … Zorla Tam Genişlik: Evet Doygunluk:% 0 Parlaklık:% 113 Kontrast:% 173
