Divi ile Çift Katmanlı Arka Plan Kaydırma Efekti Nasıl Oluşturulur

Web sitenizi öne çıkarmanın bir yolunu arıyorsanız, çift katmanlı arka planları nasıl oluşturacağınızı öğrenmek isteyebilirsiniz. Çift katmanlı arka planlar oluşturmak, arka plan resminizi hareket yoluyla hayata geçirmenize yardımcı olacaktır. Bugünkü eğitimde size Divi ile nasıl çift katmanlı arka plan tasarımı oluşturacağınızı göstereceğiz. Bu eğitim üç bölümden oluşmaktadır:

1. Adobe Photoshop'ta iki görüntü dosyası hazırlama
2. Divi içinde tasarım oluşturma
3. Arka planı canlandırmak için kaydırma efektlerini uygulama

JSON ve görüntü dosyalarını da ücretsiz olarak indirebileceksiniz!

Hadi hadi bakalım.

Ön izleme

Eğiticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.

masaüstü

Mobil

Düzeni ÜCRETSİZ İndirin

Ellerinizi ücretsiz düzene koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

1. Photoshop'ta Görüntü Dosyaları Oluşturun

Ürün Resmini Temiz Arka Planla Seçin ve Photoshop'ta Açın

Bu öğreticinin ilk bölümünde, Divi öğreticisi boyunca kullanacağımız görüntü dosyalarını oluşturacağız. Bunları oluşturmak için Adobe Photoshop kullanacağız, ancak istediğiniz diğer görüntü düzenleme yazılımlarını kullanmaktan çekinmeyin. Çift katmanlı arka plan görüntüsü efekti, üzerinde çalıştığınız görüntü aşağıdaki özelliklere sahipse en iyi sonucu verir:

1. Görüntünün içindeki bir nesneye net bir odaklanma
2. Temiz bir arka plan

Aşağıdaki resim mükemmel bir örnektir. Bu resim dosyasını, bu gönderinin indirme alanında paylaşılan sıkıştırılmış klasörde bulabilirsiniz.

Yinelenen katman

Görüntüyü Photoshop'ta açtıktan sonra, orijinal katmanı bir kez klonlayın. Yinelenen katman üzerinde çalışacağız.

Orijinal Katmanı Gizle

Öğreticide aşağı inerken sonucu gördüğümüzden emin olmak için orijinal katmanı gizleyin.

Görüntüdeki Nesne Seçiminden PNG Oluşturun

Plakada Hızlı Seçim Aracını Kullanın

Eğitim için toplamda iki resim dosyasına ihtiyacımız olacak:

1. nesnenin bir PNG'si, bu durumda plaka
2. nesne olmadan arka planın bir JPEG'si

Nesneyi arka planından ayırıyoruz, böylece onları Divi ortamına girdikten sonra ayrı ayrı manipüle edebiliriz.

Nesneyi seçmeye başlamak için araç çubuğundaki “Hızlı Seçim Aracı”nı seçin ve nesnenin mümkün olduğunca çoğunu kapsamaya çalışın.

Seç + Maske Seçimi

Nesne seçiminin hala yeterince iyi olmadığını fark edeceksiniz. Seçime sağ tıkladığınızda “Seç ve Maskele” seçeneğini kullanarak seçiminizin nasıl görüneceğine ince ayar yapabilirsiniz. Bir kez orada, opaklık, pürüzsüzlük vb. ile oynayabilirsiniz.

Seçimden Katman Maskesi Oluşturun

Düzgün bir seçim oluşturmuş olmamıza rağmen, nesnenin içinde henüz seçilmemiş kısımlar var. Aşağıdaki baskı ekranında görebileceğiniz katman maskesi butonuna tıklayarak bu parçaları manuel olarak seçimimize ekleyeceğiz:

Fırçalı Maske İçinde İnce Ayar Seçimi

Katman maskeniz oluşturulduktan sonra katman maskesini değiştirmek için bir fırça kullanmaya başlayabilirsiniz. Katman maskenizin seçili olduğundan emin olun.

• Siyah bir fırça (#000) kullanmak, katman maskenizin parçalarını kaldıracaktır.
• Beyaz bir fırça (#fff) kullanmak, katman maskenizin arka kısımlarını ekleyecektir.

Çok fazla sertliği olmayan bir fırça kullanın, böylece çok hassas olmanıza gerek kalmaz.

Renkli Katmanlı Çift Kontrol Maskesi

Altına renkli bir katman yerleştirerek katman maskenizi her zaman iki kez kontrol edebilirsiniz. Bir noktayı kaçırdıysanız, renkli katmanlar onu daha kolay ele verecektir.

PNG Seçimini Ayrı Resim Dosyası Olarak Kaydet

Yeni Dosya Oluştur

Artık nesnenizin PNG seçimine sahip olduğunuza göre, tüm katmanı klonlayabilirsiniz, böylece her zaman ona geri dönebilirsiniz. Bir sonraki bölümde, nesne olmadan arka plan görüntüsünü oluşturmak için yinelenen katmanı kullanacağız.

Nesnemizin boyutu ilk dosya boyutundan çok daha küçük, bu yüzden nesnemiz için yeni bir dosya oluşturacağız ve onu getireceğiz.

Seçimi Yeni Dosyaya Sığdır

Katmanı, katman maskesiyle birlikte oluşturduğunuz yeni dosyanın içine kopyalayıp yapıştırın.

Web için dışa aktar

Ve web için PNG olarak dışa aktarın.

Görüntü Dosyasını Sıkıştır

Saydam arka plana sahip PNG'ler daha büyük dosya boyutuna sahip olma eğilimindedir, bu nedenle dosyayı seçtiğiniz bir araçla sıkıştırmanız önerilir.

Orijinal Görüntüdeki Nesneyi Kaldır

Katman Maskesini Seçin

İlk Photoshop dosyasına geri dönün! Orada, nesne olmadan arka plan görüntüsünü oluşturacağız. Bunu yapmak için dosyamızın içindeki en üst katmanı kullanıyoruz. İlk olarak, katman maskenizin seçili olduğundan emin olun.

Maskeyi Ters Çevir

Ardından, bu katmanın özelliklerine gidin ve “Ters Çevir” e tıklayın.

Katman Maskesini Uygula

Şimdi nesnenin ilk katmanın içinde saydam olduğunu fark edeceksiniz. Sağ tıklayıp “Katman Maskesini Uygula”yı seçerek katman maskesini katmanımıza uygulayacağız.

Klon Aracını Kullanarak Boş Alanı Doldurun

Ortada hala doldurmamız gereken bir boşluk var. Klonlama aracının kullanışlı olduğu yer burasıdır. İstediğiniz bir fırça boyutunu seçin ve resmi doldurun. Bununla çok kesin olmanıza gerek yok, Divi öğreticisinin içinde nesneyi onun üzerine yerleştireceğiz.

Görüntüyü Nesnesiz Kaydet

Web için dışa aktar

Nesne olmadan arka plan görüntüsünü tamamladığınızda, onu %70 kalitede bir JPEG dosyası olarak kaydedebilirsiniz.

Görüntü Dosyasını Sıkıştır

Bu görüntüyü de sıkıştırdığınızdan emin olun.

2. Divi'de Çift Katmanlı Arka Plan Efekti Oluşturun

Yeni Bölüm Ekle

Arka Plan Resmi Yükle

Her iki görüntü dosyanız da elinizin altında olduğunda, Divi'ye geçme zamanı! Yeni bir sayfa açın ve yeni bir bölüm ekleyin. Eğitimin ilk bölümünde oluşturduğunuz arka plan resmini yükleyin.

aralık

Bölümün tasarım sekmesine gidin ve bazı özel boşluk değerleri uygulayın. Eklediğimiz alt kenar boşluğu, etkinin yerine oturduğunu görmemize yardımcı olacak. Normalde, bu kenar boşluğu tasarımınızdaki sonraki bölümlerle değiştirilecektir.

• Alt Kenar Boşluğu: 100vh
• Üst Dolgu:
  • Masaüstü: 100 piksel
  • Tablet ve Telefon: 50px
• Alt Dolgu:
  • Masaüstü: 100 piksel
  • tablet: 600 piksel
  • Telefon: 500 piksel

1. Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:

boyutlandırma

Henüz modül eklemeden satır ayarlarını açın ve genişliği ve maksimum genişliği değiştirin. Bu ayarlar, sıranın her zaman bölüm kabının sol ve sağ taraflarına dokunmasına izin verecektir. Bu şekilde PNG ve arka plan görüntülerinin tüm ekran boyutlarında aynı dengeye sahip olmasını sağlayabiliriz.

• Genişlik: %100
• Maksimum Genişlik: %100

aralık

Sonraki satırın boşluk ayarlarına gidin ve tüm varsayılan üst ve alt dolguyu kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Konum

Ardından, tüm satırı yeniden konumlandırın.

• Pozisyon: Mutlak
• Konum:
  • Masaüstü: Merkez
  • Tablet ve Telefon: Orta Alt
• Dikey Ofset:
  • Masaüstü: /
  • Tablet & Telefon: 30vh

Satıra Görüntü Modülü Ekle

PNG Resmi Yükle

Satır ayarlarını tamamladıktan sonra, satıra bir Görüntü Modülü ekleyin ve öğreticinin ilk bölümünde oluşturduğunuz PNG dosyasını yükleyin.

hizalama

Tasarım sekmesine gidin ve görüntü hizalamasını değiştirin.

• Görüntü Hizalama: Merkez

boyutlandırma

Sonraki boyutlandırma ayarlarını değiştirin.

• Genişlik:
  • Masaüstü: %36
  • Tablet & Telefon: %60

2. Satır Ekle

Sütun Yapısı

Ardından, aşağıdaki sütun yapısını kullanarak bölüme başka bir satır ekleyin:

Arka plan rengi

Satır ayarlarını açın ve arka plan rengini değiştirin.

• Arka Plan Rengi: #ffffff

boyutlandırma

Sonraki boyutlandırma ayarlarını değiştirin.

• Genişlik: %90
• Maksimum Genişlik: 550 piksel
• Satır Hizalama:
  • Masaüstü: Sol
  • Tablet & Telefon: Merkez

aralık

Ardından, bazı özel dolgu değerleri uygulayın.

• Üst Dolgu: %11
• Alt Dolgu: %11
• Sol Dolgu: %5
• Sağ Dolgu: %5

Yatay Ofset

Konum ayarlarına da biraz yatay ofset ekliyoruz.

• Yatay Ofset:
  • Masaüstü: %5
  • Tablet ve Telefon: 0%

Metin Modülü #1'i Sütun 1'e ekleyin

H2 İçeriği Ekle

Bazı H2 içeriği içeren ilk Metin Modülü ile başlayarak modül ekleme zamanı.

H2 Metin Ayarları

H2 metnini aşağıdaki gibi biçimlendirin:

• Başlık 2 Yazı Tipi: Kumbh Sans
• Başlık 2 Metin Boyutu:
  • Masaüstü: 90 piksel
  • Tablet: 60 piksel
  • Telefon: 45 piksel

Metin Modülü #2'yi Sütun 1'e ekleyin

Açıklama İçeriği Ekle

Bir öncekinin hemen altına başka bir Metin Modülü ekleyin ve seçtiğiniz bazı açıklama içeriğini ekleyin.

Metin Ayarları

Modülün metin ayarlarını uygun şekilde değiştirin:

• Metin Yazı Tipi: Kumbh Sans
• Metin Satır Yüksekliği: 2em

Sütun 1'e Düğme Modülü Ekle

Kopya Ekle

Bu sütunda ihtiyacımız olan son modül bir Düğme Modülüdür. Seçtiğiniz bir kopyayı ekleyin.

Düğme Ayarları

Düğmeyi buna göre şekillendirin:

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 20px
• Düğme Metin Rengi: #6b6443
• Düğme Kenar Genişliği: 0px
• Düğme Sınır Yarıçapı: 0px

• Düğme Yazı Tipi: Kumbh Sans
• Düğme Yazı Ağırlığı: Kalın
• Düğme Simgesini Göster: Evet
• Düğme Simge Yerleşimi: Sol
• Yalnızca Düğmenin Üzerine Geldiğinde Simgeyi Göster: Hayır

Kutu Gölge

Bir kutu gölgesi de ekleyin.

• Kutu Gölgesi Yatay Konumu: 0px
• Kutu Gölge Dikey Konumu: 2px
• Gölge Rengi: #6b6443

3. Kaydırma Efektleri Ekleyin

Görüntü Dikey Hareket

Bu öğreticinin son bölümünde, PNG görüntü dosyasını içeren Görüntü Modülüne kaydırma efektleri eklemeye odaklanacağız. Modülün ayarlarını açın, gelişmiş sekmeye gidin ve aşağıdaki dikey hareket ayarlarını uygulayın:

• Dikey Hareketi Etkinleştir: Evet
• Başlangıç ​​Ofseti:
  • Masaüstü: 0
  • Tablet ve Telefon: 4 (%0'da)
• Orta Ofset:
  • Masaüstü: 0
  • Tablet ve Telefon: 0 (%97'de)
• Bitiş Ofseti:
  • Masaüstü: 0
  • Tablet ve Telefon: -2 (%100'de)

Görüntü Yatay Hareket

Aşağıdaki yatay hareket ayarlarını kullanarak tasarımımızı tamamlıyoruz:

• Yatay Hareketi Etkinleştir: Evet
• Başlangıç ​​Ofseti:
  • Masaüstü: 0 (%0'da)
  • Tablet & Telefon: 0
• Orta Ofset:
  • Masaüstü: 0 (%65'te)
  • Tablet ve Telefon: 0 (%97'de)
• Bitiş Ofseti:
  • Masaüstü: -10 (%100'de)
  • Tablet & Telefon: 0

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi farklı ekran boyutlarındaki sonuca son bir göz atalım.

masaüstü

Mobil

Son düşünceler

Bu gönderide, çift katmanlı bir arka planı nasıl oluşturacağınızı ve Divi'nin yerleşik kaydırma efektleriyle nasıl canlandıracağınızı gösterdik. Eğitimin ilk bölümünde Adobe Photoshop'ta resim dosyalarını hazırladık. Eğiticinin ikinci bölümünde, duyarlı bir tasarım oluşturmak için Divi içindeki görüntü dosyalarını kullanmaya odaklandık. JSON dosyasını da ücretsiz olarak indirebildiniz! Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin.

Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz Divi almak istiyorsanız, e-posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriği bilen ve bu ücretsiz içerikten yararlanan ilk kişilerden biri olursunuz.