Divi ile Ekran Maketlerinize Resim ve Video Eklemenin 5 Harika Yolu

Büyük olanlardan küçük olanlara kadar her türlü web sitesinde ekran maketlerine rastlarsınız. Önceki çalışmaları, hizmetleri ve benzerlerini sergilemeye yardımcı olurlar. Ayrıca web sitenizin tüm görünümüne ve izlenimine katkıda bulunurlar ve şirketinizin (veya müşterinizin şirketinin) teknolojiye odaklandığını vurgularlar. Bu gönderide, Divi'nin yerleşik seçenekleriyle ekran maketlerinize resim ve video eklemenin 5 harika yolunu göstereceğiz. Bu gönderi iki bölümden oluşmaktadır; ilk bölüm, ekran maketinizi Photoshop ile özelleştirmekle ilgilidir. Bu gönderide kullanacağımız maketi ücretsiz olarak indirebilirsiniz. İkinci bölümde ise size Divi ile maketlerinizi nasıl bir üst seviyeye çıkaracağınızı göstereceğiz.

Sonuç

Öğreticiye dalmadan önce, adım adım nasıl yeniden oluşturacağınızı göstereceğimiz farklı örneklere bir göz atalım.

Örnek 1

Örnek #2

Örnek 3

Örnek 4

Örnek #5

Divi ile Ekran Maketlerinize Resim ve Video Eklemenin 5 Harika Yolu

Youtube Kanalımıza Abone Olun

Bu Eğitimin Ücretsiz Ekran Modelini İndirin

Bu öğreticiyi iyi bir şekilde tamamlamanıza yardımcı olmak için, size bu eğitimde kullanılan maketi ücretsiz olarak sağlayacağız. Aslında, (yeniden) paylaştığımız kaynak aslında Tasarım Ajansı Düzen Paketimizden olduğu için size iki cihaz maketi ve birkaç yüksek kaliteli görüntü sunuyoruz. Aşağıdaki resim kaynaklarını indirdiğinizde, klasörü açıp takip etmek için MB-purefront.psd adlı dosyayı bulabilirsiniz.

Ücretsiz Ekran Modelini İndirin

Photoshop'ta Maket Dosyasını Değiştirin

Değiştireceğimiz maket dosyasının yalnızca bir kez düzenlenmesi gerekecek. Daha sonra, Divi ve Divi'nin yerleşik seçeneklerinden başka bir şey kullanmadan bu gönderideki tüm örnekleri elde etmek için aynı dosyayı kullanabilirsiniz.

Sağ Tık + Aygıt Klasörünü Birleştir

MB-purefont.psd dosyasını açtığınızda, yapmanız gereken ilk şey, Aygıt klasörünü sağ tıklayıp 'Grubu Birleştir'i seçerek birleştirmek.

Kontrol/Komut + Ekran Katmanına Tıklayın

Bunu yaptıktan sonra, kontrol veya komuta basabilir ve ekran katmanına tıklayabilirsiniz. Bunu yaparak maketinizin ekran kısmını seçeceksiniz.

Cihaz Katmanı + Katman Maskesi Ekle'ye tıklayın

Ekran seçiliyken Cihaz katmanına tıklayın ve ona bir katman maskesi ekleyin.

Control/Command+ i'yi Tersine Çevir

Maskeyi ekledikten hemen sonra, ters çevirmek için kontrol veya komut ve 'i' tuşlarına basın.

Ekran Katmanını Gizle

Ardından, ekran katmanını gizleyin. Bu noktada, ekran katmanı maketinizden kaldırılacaktır. Bundan sonra yapmamız gereken şey ekran parçamızı şeffaf hale getirmek.

Kontrol/Komut + Ekran Katmanına Tıklayın

Bunun gerçekleşmesi için kontrol veya komuta basın ve tekrar ekran katmanınıza tıklayın. Ekran alanı tekrar seçilecektir.

Arka Plan Katmanı + Katman Maskesi Ekle'ye tıklayın

Ardından, ekran katmanı seçiliyken Arka Plan katmanına tıklayın ve ona bir maske ekleyin.

Kontrol/Komut + i Tersine Çevir

Arka plan katmanını da ters çevirmemiz gerekecek, bu yüzden devam edin ve kontrol veya komut ve 'i' tuşlarına basın. Bu, çevreleyen arka plan beyaz kalırken şeffaf bir ekrana sahip olmamızı sağlayacaktır. Resmin tamamını şeffaf yapmamamızın sebebi Divi oluşturucu içerisine ekleyeceğimiz resim veya videonun ekrandan başka bir yerde görünmemesini sağlamaktır.

Görüntüyü kırp

Yapmamız gereken son şey görüntüyü kırpmak. Modelin kendisinden hiçbir şeyi kesmeden beyaz arka planı mümkün olduğunca azaltmaya çalışın. Bu, Divi oluşturucuya ekleyeceğimiz görüntünün veya videonun beyaz arka planda kaybolmamasını sağlamamıza yardımcı olacaktır.

Web için Kaydet

Görüntü tamamlandığında, Dışa Aktar > Web için Kaydet seçeneğine giderek web için kaydedebilirsiniz. Saydam arka planın kalması için bir PNG görüntüsünü dışa aktardığınızdan emin olun.

İlk Dört Örnek için Genel Satır Ayarları

Bu öğreticiyi olabildiğince kolaylaştırmak için, ilk dört örneğin her biri için satır ayarlarını önceden göstereceğiz. Ancak beşincisi, başka ayarlara ihtiyaç duyacaktır. Bu gönderideki beşinci örnekle karşılaştığımızda bu farklı ayarları ele alacağız.

Sütun Yapısı

İlk dört örneğin her biri için yalnızca tek sütunlu bir satır kullanıyoruz.

Arka plan rengi

Satırların her biri için de beyaz bir arka plan kullanıyoruz. Çünkü Photoshop'ta değişiklik yaparken maket için seçtiğimiz arka plan rengiyle eşleştiriyoruz. Başka bir arka plan rengi kullanmak istiyorsanız, Photoshop'ta da başka bir arka plan rengi kullanmanız gerekir.

boyutlandırma

Ayrıca sıramıza bazı özel dolgular uygulayacağız. Görüntü Modülüne değil de satıra özel dolgu eklememizin nedeni, mockup'a eklediğimiz arka planın etkilenmemesini sağlamaktır. Kullanacağımız özel dolgu aşağıdaki gibidir:

• Üst Dolgu: 0px
• Sağ Doldurma: 200px (Masaüstü), 20px (Tablet), 10px (Telefon)
• Alt Dolgu: 0px
• Sol Dolgu: 200px (Masaüstü), 20px (Tablet), 10px (Telefon)

Örnek 1'i Yeniden Oluştur

Nasıl yeniden oluşturulacağını göstereceğimiz ilk örnek, maketinize herhangi bir görüntü türü eklemenize ve renklerini değiştirmenize olanak tanır. Değiştirilen modele yalnızca bir kez ihtiyacınız olacak. Bu noktadan sonra, maketi ona farklı resimler veya ekran görüntüleri eklemek için ihtiyaç duyduğunuz kadar tekrar kullanabilirsiniz.

Bir Görsel Modülü Ekle ve Maketi Yükle

Tek sütunlu satırınıza bir Resim Modülü ekleyerek başlayın ve maket resminizi yükleyin.

Arka Plan Resmi Ekle

Ardından, İçerik sekmesindeki Arka Plan alt kategorisini açın ve aşağıdaki ayarlarla bir arka plan resmi ekleyin:

• Arka Plan Resmi Boyutu: Kapak
• Arka Plan Resmi Konumu: Merkez
• Arka Plan Resmi Tekrarı: Tekrar Yok
• Arka Plan Resmi Karışımı: Normal

Gerekirse Degrade Arka Plan Yerleşimi Ekleyin

Örneğin, degrade bir arka plan ekleyerek görüntünün renklerini değiştirebilirsiniz. Aşağıdaki resimdeki gradyan arka planı aşağıdaki ayarlara sahiptir:

• İlk Renk: #0C71C3
• İkinci Renk: #E09900
• Gradyan Yönü: 180deg
• Başlangıç ​​Konumu: %19
• Bitiş Konumu: %61

Arka plan resminize degrade arka planı eklemek için, Arka Plan Resmi Karışımınız olarak 'Çarp'ı seçin.

Gerekirse Filtreleri Kullanın

Sahip olduğunuz diğer bir seçenek de Tasarım sekmesinin Filtreler alt kategorisine giderek görselinize filtreler uygulamaktır. Aşağıdaki örnek için aşağıdaki değişiklikleri yaptık:

• Doygunluk: %123
• Kontrast: %121

Örnek 2'yi Yeniden Oluştur

Nasıl yeniden oluşturulacağını göstereceğimiz ikinci örnek, bir sütun gradyan arka planı ve bir paralaks arka plan görüntüsü içerir. Divi'nin sunduğu yeni karışım modlarıyla, çarpıcı sonuçlar oluşturmak için hem görüntüyü hem de gradyan arka planını birleştirebiliyoruz.

Sütun 1'e Gradyan Arka Planı Ekle

Satırınızın sütununa aşağıdaki gradyan arka planını ekleyerek başlayın:

• İlk Renk: #EDF000
• İkinci Renk: #4D0184
• Sütun Gradyan Türü: Doğrusal
• Sütun Gradyan Yönü: 180deg
• Sütun Başlangıç ​​Konumu: %0
• Sütun Bitiş Konumu: %50

Bir Görsel Modülü Ekle ve Maketi Yükle

Ardından, bir Görüntü Modülü ekleyin ve maketi bir kez daha seçin.

Arka Plan Resmi Ekleyin ve CSS Paralaks Yöntemini Kullanın

Ardından, Arka Plan Alt Kategorisini açın, arka plan resmini yükleyin, 'Paralaks Etkisini Kullan' seçeneğini etkinleştirin ve Paralaks Yöntemi olarak 'CSS'yi seçin.

Görüntü Modülüne Karışım Modu Ekle

Yapmanız gereken son şey, Filtreler alt kategorisinin Karışım Modunu 'Sert Işık' olarak değiştirmek.

Örnek 3'ü Yeniden Oluştur

Bir sonraki örnek için, makete bir resim yerine bir video ekleyeceğiz. Modele her türlü videoyu ekleyebilirsiniz, ekran görüntüsü de bunlardan biri.

Bir Görsel Modülü Ekle ve Maketi Yükle

Yine, bir Görüntü Modülü ekleyerek ve Photoshop ile oluşturduğumuz maketi seçerek başlayın.

Arka Plan Videosu Ekle

Ardından, Görüntü Modülünüzün Arka Plan alt kategorisine bir video ekleyin ve işiniz bitti!

Örnek 4'ü Yeniden Oluştur

Yeniden oluşturacağımız sonraki örnek, maketinizin görünümünü ve verdiği hissi değiştiren bir görüntü arka planıyla birlikte bir video arka planından oluşur.

Sütun 1'e Arka Plan Resmi Ekle

Satır ayarlarınızı açarak başlayın, Arka Plan alt kategorisine bir arka plan resmi ekleyin ve bunun için aşağıdaki ayarları kullanın:

• Sütun Arka Plan Resmi Boyutu: Kapak
• Sütun Arka Plan Resmi Konumu: Merkez
• Sütun Arka Plan Resmi Tekrarı: Tekrarla
• Sütun Arka Plan Resmi Karışımı: Normal

Bir Görsel Modülü Ekle ve Maketi Yükle

Ardından, bu yazının Photoshop bölümünde oluşturduğumuz maket ile bir Görüntü Modülü ekleyin.

Arka Plan Videosu Ekle

Ardından, Görüntü Modülüne bir video arka planı ekleyin.

Görüntü Modülüne Karışım Modu Ekle

Ve son olarak, Görüntü Modülünün Filtreler alt kategorisindeki 'Açıklaştır' Karışım Modunu etkinleştirin.

Örnek 5'i Yeniden Oluştur

Yeniden oluşturacağımız son örnek, ekranın tüm genişliğini kaplayan bir arka plan görüntüsü eklemenize olanak tanır. Görüntülenen model, kullanılan görüntü arka planıyla çok iyi uyum sağlayan bir video arka planına da sahiptir.

Satır Ayarları

Sütun Yapısı

Son örneğin satırında biraz farklı ayarlar var. Tek sütunlu bir satır seçerek başlayın.

Sütun 1 Arka Plan Resmi

Ardından, aşağıdaki ayarlarla sütuna bir arka plan resmi ekleyin:

• Sütun Arka Plan Resmi Boyutu: Kapak
• Sütun Arka Plan Resmi Konumu: Merkez
• Sütun Arka Plan Resmi Tekrarı: Tekrarla
• Sütun Arka Plan Resmi Karışımı: Normal

boyutlandırma

Ardından, satırınızın Boyutlandırma alt kategorisini açın ve aşağıdaki değişiklikleri uygulayın:

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 0

aralık

Bazı özel dolgulara ve sütun özel dolgularına da ihtiyaç vardır:

• Üst, Sağ, Alt ve Sol Dolgu: 0px
• Sütun Üst Dolgusu: 70px
• Sütun Sağ Dolgusu: 300px (Masaüstü), 200px (Tablet), 100px (Telefon)
• Sütun Alt Dolgusu: 70px
• Sütun Sol Dolgusu: 300px (Masaüstü), 200px (Tablet), 100px (Telefon)

Bir Görsel Modülü Ekle ve Maketi Yükle

Satır ayarlarıyla işiniz bittiğinde, bir Görüntü Modülü ekleyebilir ve bu yazının Photoshop bölümünde oluşturduğumuz maketi seçebilirsiniz.

Arka Plan Videosu Ekle

Ardından, Görüntü Modülünün Arka Plan alt kategorisine bir video ekleyin.

Görüntü Modülüne Karışım Modu Ekle

Son olarak, Tasarım sekmesinin Filtreler alt kategorisindeki Karışım modu olarak 'Çarp'ı seçin ve bitirdiniz!

Son düşünceler

Bu gönderide, ekran maketlerinize resim ve video eklemenin 5 harika yolunu gösterdik. Ücretsiz olarak indirebileceğiniz bir maket dosyasında Photoshop'ta bazı değişiklikleri nasıl yapacağınızı göstererek başladık ve istediğiniz tüm görüntü veya video içeriğini göstermek için Divi oluşturucu içindeki bu maket dosyasını nasıl değiştirebileceğinizi göstererek devam ettik. ziyaretçilerinizle paylaşın. Herhangi bir sorunuz veya öneriniz varsa; Aşağıdaki yorum bölümünde bir yorum bıraktığınızdan emin olun!