DEĞERLENDİRME DEĞİŞİKLİK OLARAK DEĞERLENDİRME KAPSAMININ KULLANILIR?
Photoshop gibi görüntü düzenleme yazılımına alışkınsanız, maskeye de aşina olabilirsiniz. Maskeler iki katmanı birleştirmenize ve benzersiz sonuçlar yaratmanıza yardımcı olur. Divi ile yaratıcı olabilir ve bir arka plan görüntüsü ile birlikte bir gradyan arka plan kullanarak sayfanızda kendi maskeyi oluşturabilirsiniz. Bu öğreticide, üzerinde çalıştığınız her türlü tasarım için 8 farklı arka plan maskesi nasıl yapacağınızı adım adım göstereceğiz. Bu öğretici, görüntü düzenleme yazılımına dokunmak zorunda kalmadan sayfanıza hızlı bir tasarım ayarlaması oluşturmanıza yardımcı olacaktır.
Haydi Yapalım şunu! Önizleme Eğiticiye girmeden önce, sonuçlara farklı bir ekran boyutunda bir göz atalım.
Üst dolgu: 150px
Dolgu Alt: 150 piksel Sütun yapısının yeni bir satırı ekleyin. Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin: Blurb Modülünü #1 olarak ekleyin İçindekleri ekleyin Modül eklemeye başlamanın zamanı geldi! Toplamda 8 bulanık modüle ihtiyacımız var. Her bulanıklık modülünde benzersiz bir değişiklik yapmadan önce ilk olarak genel değişiklikler yaparak ve 7 kez klonlayarak başlayacağız. İlk sütuna yeni bir bulanıklık modülü ekleyin ve bazı seçim içeriği ekleyin. Metin Ayarları Tasarım sekmesine geçin ve sonraki metin ayarlarını değiştirin.
Metin Oryantasyonu: Orta
Metin Rengi: Karanlık Başlık metin ayarları da başlık metin ayarlarını açın ve birçok şeyi değiştirin.
Yazı Tip Başlığı: Antic Didone
Başlık Metin Boyutu: 23px
Yüksek çizgi başlığı: 1.5em Son kutu gölgesi, bulanıklık modülüne de pürüzsüz bir kutu gölgesi ekleyin.
Bulanık Güç Gölgesi Kutusu: 80px
Kutunun gölgesinin dağılımının gücü: -10px
Gölge Rengi: RGBA (0.0,0,0,3) Klon Blurb Modül 7 kez ve Place 4 İkinci sütunda 4 kopya bir bütün olarak tüm değişiklikleri yaptıktan sonra, bulanık modülünü 7 kez devam edip klonlayabilirsiniz. Sırının ikinci sütununa dört kopya yerleştirin ve ilk sütunda üç tane bırakın. Gradyan’ın 1 numaralı arka planını değiştirin Şimdi her bir bulanıklık modülüne benzersiz ayarlar eklemeye başlayabiliriz. Sütun 1’deki ilk bulanıklık modülünü açın ve gradyanın arka planını ona ekleyin.
Renk 1: RGBA (255,255,255.0)
Renk 2: #ffffff
Gradyan Türü: Radyal
Radyal yön: aşağıda
Başlangıç Pozisyonu:% 45
Son pozisyon:% 45
Degradeyi arka plan görüntüsünün üzerine yerleştirin: evet Arka plan görüntüsü Degradenin arka planını ekledikten sonra, bir arka plan görüntüsü ekleyebilir ve aşağıdaki arka plan ayarlarıyla birleştirebilirsiniz:
Arka Plan Görüntü Pozisyonu: Üst Orta
Arka plan görüntüsünün tekrarlanması: Tekrar yok Son fakat en az değil, her şeyin uygun olması için özel bir yatak ekleyin.
Üst dolgu: 100 piksel
Dolgu Alt: 350 piksel
Sol dolgu: 50 piksel
Sağ dolgu: 50px Blurb #2 gradyan arka plan modülünü değiştirin Bir sonraki bulanıklık modülüne (ikinci sütundaki ilk modül) dönelim ve gradyanın arka planını ekleyin.
Renk 1: RGBA (255,255,255.0)
Renk 2: #ffffff
Gradyan Türü: Radyal
Radyal yön: sağ üst
Başlangıç Pozisyonu:% 45
Son pozisyon:% 45
Degradeyi arka plan görüntüsünün üzerine yerleştirin: evet Arka plan görüntüsü aşağıdaki arka plan ayarları ile birlikte bir arka plan görüntüsü ekleyerek devam edin. Arka plan görüntü konumu: Sağ üst
Arka plan görüntüsünün tekrarlanması: Tekrar yok
Uzay ayarlarına özel dolgu değerleri ekleyerek mesafe ve bitiş tasarımı. Üst dolgu: 350px
Dolgu Alt: 100 piksel
Sol dolgu: 50 piksel
Sağ dolgu: 200px (masaüstü ve tablet), 50 piksel (telefon)
Blurb Modül #3 gradyan arka planını üçüncü bulanıklık modülüne (ilk sütundaki ikinci açıklama modülü) değiştirin. Ayarları açın ve gradyanın arka planını ekleyin. Renk 1: RGBA (255,255,255.0)
Renk 2: #ffffff
Gradyan Türü: Radyal
Radyal yön: sol üst
Başlangıç Pozisyonu:% 45
Son pozisyon:% 45
Degradeyi arka plan görüntüsünün üzerine yerleştirin: evet
Arka plan görüntüsü bir sonraki arka plan görüntüsünü ekleyerek devam edin. Arka plan görüntü konumu: sol üst
Arka plan görüntüsünün tekrarlanması: Tekrar yok
Mesafe ve şekil için modüle bazı özel pedler ekleyin.
Üst dolgu: 350px
Dolgu Alt: 100 piksel
Sol dolgu: 200px (masaüstü ve tablet), 50 piksel (telefon)
Sağ dolgu: 50px
Bulanık modül #4 gradyan arka planını ikinci sütundaki ikinci modüle değiştirin! Bulanık modül ayarlarını açın ve gradyanın arka planını ekleyin.
Renk 2: #ffffff
Gradyan Türü: Radyal
Radyal Yön: Üst
Başlangıç Pozisyonu:% 45
Son pozisyon:% 45
Degradeyi arka plan görüntüsünün üzerine yerleştirin: evet
Arka plan görüntüsü bir sonraki arka plan görüntüsünü ekleyerek devam edin. Arka Plan Görüntü Pozisyonu: Üst Orta
Arka plan görüntüsünün tekrarlanması: Tekrar yok
Uzay ayarlarına özel dolgu değerleri ekleyerek tasarımın mesafesi ve tamamlanması. Dolgu Alt: 100 piksel
Sol dolgu: 50 piksel
Sağ dolgu: 50px
Blurb Modülünü Değiştir #5 Arka Plan gradyanını değiştirin Bir sonraki modüle, birinci sütundaki üçüncü modüle devam edin. Modülü açın ve gradyanın arka planını ekleyin.
Renk 1: RGBA (255,255,255.0) Renk 2: #ffffff
Gradyan Türü: Radyal
Radyal Yön: Sol
Başlangıç Pozisyonu:% 35
Son pozisyon:% 35
Degradeyi arka plan görüntüsünün üzerine yerleştirin: evet
Arka plan görüntüsü, aşağıdaki arka plan ayarlarıyla birlikte arka plan resimleri ekleyerek devam edin:
Arka plan görüntü konumu: sol üst Arka plan görüntüsünün tekrarlanması: Tekrar yok
Uzaklık ve uzay ayarlarına da bazı özel dolgu değerleri ekleyin.
Üst dolgu: 100 piksel Dolgu Alt: 100 piksel
Sol dolgu: 240 piksel (masaüstü ve tablet), 150 piksel (telefon)
Sağ dolgu: 50 piksel (masaüstü ve tablet), 20px (cep telefonu)
Bulanık Modül #6 gradyan arka planını ikinci sütunda üçüncü modüle değiştirin! Ayarları açın ve gradyanın arka planını ekleyin.
Renk 1: RGBA (255,255,255.0) Renk 2: #ffffff
Gradyan Türü: Doğrusal
Gradien yönü: 140deg
Başlangıç Pozisyonu:% 60
Son pozisyon:% 60
Degradeyi arka plan görüntüsünün üzerine yerleştirin: evet
Arka plan görüntüsü Bir sonraki uygun arka plan ayarlarına sahip bir arka plan görüntüsü ekleyin.
Arka Plan Görüntü Pozisyonu: Üst Orta Arka plan görüntüsünün tekrarlanması: Tekrar yok
Uzay ayarlarında bazı özel dolgu değerleri kullanarak tasarımın mesafesi ve tamamlanması.
Üst dolgu: 100 piksel Dolgu Alt: 350 piksel
Sol dolgu: 50 piksel
Sağ dolgu: 200px (masaüstü ve tablet), 50 piksel (tablet)
Blurb Modülünü Değiştir #7 Arka Plan Gradyanı Sütun 1’deki bir sonraki bulanıklık modülü aşağıdaki gradyan arka planını kullanır: Renk 1: RGBA (255,255,255.0)
Renk 2: #ffffff Gradyan Türü: Doğrusal
Gradyan yönü: 220deg
Başlangıç Pozisyonu:% 60
Son pozisyon:% 60
Degradeyi arka plan görüntüsünün üzerine yerleştirin: evet
Arka plan görüntüsü de arka plan görüntüleri ekleyin.
Arka Plan Görüntü Pozisyonu: Üst Orta
Arka plan görüntüsünün tekrarlanması: Tekrar yok Uzaklık ve boşluk ayarlarında gerekli özel dolgu değerlerini ekleyin.
Üst dolgu: 100 piksel
Dolgu Alt: 350 piksel Sol dolgu: 200px (masaüstü ve tablet), 50 piksel (telefon)
Sağ dolgu: 50px
Bulanık modül #8 gradyan arka planını son bulanıklık modülüne değiştirin! Ayarları açın ve gradyanın arka planını ekleyin.
Renk 1: RGBA (255,255,255.0)
Renk 2: #ffffff Gradyan Türü: Radyal
Radyal yön: doğru
Başlangıç Pozisyonu:% 35
Son pozisyon:% 35
Degradeyi arka plan görüntüsünün üzerine yerleştirin: evet
Arka plan görüntüsü bir sonraki arka plan görüntüsünü yükleyin.
Arka plan görüntü konumu: sol üst
Arka plan görüntüsünün tekrarlanması: Tekrar yok Modül mesafe ayarlarına bazı özel pedler ekleyerek tasarım ve öğreticinin mesafesi ve tamamlanması.
Üst dolgu: 100 piksel
Dolgu Alt: 100 piksel Sol dolgu: 50 piksel (masaüstü ve tablet), 20px (cep telefonu)
Sağ dolgu: 240px (masaüstü ve tablet), 170px (cep telefonu)
Önizleme Şimdi tüm adımlardan geçtik, nihai sonuçlara farklı ekran boyutlarında bakalım.
