5 Görüntü eklemenin olağanüstü yolu & amp;Ekranınızı divi ile toplamak için video
Her türlü web sitesinde, büyüklerden küçük olanlara ekran maketleri bulursunuz. Daha önce işlerin, hizmetlerin ve benzerlerinin gösterilmesine yardımcı oldular. Ayrıca web sitenizin genel görünümüne ve hissine katkıda bulunurlar ve şirketinizin (veya müşteri şirketinizin) teknolojiye odaklandığını vurgularlar. Bu yazıda, Divi varsayılan seçenekleriyle ekran maketinize resim ve video eklemenin 5 olağanüstü yolu göstereceğiz. Bu yazı iki parça içerir; İlk bölüm, ekran maketinizi Photoshop’a ayarlamakla ilgilidir. Bu yazıda kullanacağımız mockup’u ücretsiz olarak indirebilirsiniz. Ve ikinci bölümde, Mockup’ınızı Divi ile bir sonraki seviyeye nasıl getireceğinizi göstereceğiz.
Sonuçlar Eğiticiye girmeden önce, size adım adım nasıl yeniden yapacağınızı göstereceğimiz farklı bir örneğe bakalım. örnek 1
Mockup’u İndirin Ücretsiz Ekran Değiştir Mockup dosyaları, değiştireceğimiz Photoshop Mockup dosyalarında yalnızca bir kez düzenlenmesi gerekir. Bundan sonra, varsayılan Divi ve Divi seçeneklerini kullanarak bu yazıdaki tüm örnekleri almak için aynı dosyayı kullanabilirsiniz. Sağ tıklayın + Aygıt klasörünü birleştirin mb-purefont.psd dosyasını açtıktan sonra, yapmanız gereken ilk şey, klasör cihazını sağ tıklayarak ve ‘birleştirme grubu’ seçerek birleştirmektir. Kontrol/komut + tıklayın. Bunu bitirdikten sonra ekran Kontrol veya komut basabilir ve ekran katmanına tıklayabilirsiniz. Bunu yaparak Mockup ekranınızı seçeceksiniz. Aygıt Katmanı’na tıklayın + Katman Maskesini Ekle Ekranı seçerken katman aygıtını tıklayın ve katman maskesini ekleyin. Kontrol/Komut+ I bir maske ekledikten hemen sonra tersine dönecek, kontrol veya komuta ve ‘i’ tuşuna basın. Bir sonraki ekran katmanını gizleyin, ekran katmanını gizleyin. Bu noktada, ekran katmanı maketinizden silinecektir. Yapmamız gereken aşağıdaki şey ekran bölümümüzü şeffaf hale getirmektir. Control/Command + Gerçekleştirmek için ekran katmanına tıklayın, kontrol veya komut tuşuna basın ve ekran katmanınızda tekrar tıklayın. Ekran alanı bir kez daha seçilecektir. Arka plan katmanını tıklayın + Maske katmanını ekleyin, ekran katmanını seçerken arka plan katmanını tıklayın ve maskeyi ekleyin. Kontrol/Komut + I Ters olarak arka plan katmanını çevirmemiz gerekir, bu yüzden devam edin ve kontrol veya komuta basın ve ‘I’ tuşuna basın. Bu, etrafındaki arka plan beyaz kalırken şeffaf bir ekrana sahip olmamızı sağlayacaktır. Tüm şeffaf görüntüleri yapmamamızın nedeni, Divi Builder’a ekleyeceğimiz görüntü veya videonun ekrandan başka bir yerde görünmemesini sağlamaktır. Mockup’un kendisinden hiçbir şey kesmeden, mümkün olduğunca çok beyaz arka planı azaltmaya çalışın. Bu, divi üreticisine ekleyeceğimiz resmin veya videonun beyaz arka planda kaybolmamasını sağlamamıza yardımcı olacaktır. Görüntü tamamlandıktan sonra Web için kaydedin, dışa aktarma> Web için kaydederek web için kaydedebilirsiniz. Şeffaf arka planın kalması için PNG görüntülerini dışa aktardığınızdan emin olun. Bu öğreticiyi mümkün olduğunca kolay hale getirmek için ilk dört örnek için genel çizgi ayarı, önceki dört örneğin her biri için satır düzenlemesini göstereceğiz. Ancak beşinci başka düzenlemeler gerektirecektir. Bu yazıda beşinci örneği bulduktan sonra bu farklı ayarları ele alacağız. Sütun Yapısı İlk dört örneğin her biri için, sadece bir sütunlu bir satır kullanıyoruz. Arka plan rengimiz de her çizgi için beyaz bir arka plan kullanır. Bunun nedeni, Photoshop’ta değişiklik yaparken Mockup için seçtiğimiz arka plan rengiyle eşleşmemizdir. Başka bir arka plan rengi kullanmak istiyorsanız, Photoshop’ta başka bir arka plan rengi de kullanmanız gerekir. Ekimiz de çizgimize özel dolgular da uygulayacaktır. Görüntü modülüne değil, hatta özel bir dolgu eklememizin nedeni, mockup’a eklediğimiz arka planın etkilenmemesini sağlamaktı. Kullanacağımız özel dolgu aşağıdaki gibidir:
Üst dolgu: 0px Sağ dolgu: 200px (masaüstü), 20px (tablet), 10 piksel (cep telefonu) Aşağıda dolgu: 0px
Sol dolgu: 200px (masaüstü), 20px (tablet), 10 piksel (cep telefonu)
Bir Örnek #1 Bir Örnek Oluşturun İlk örnek size nasıl yeniden yapacağımızı göstereceğiz, her türlü görüntüyü maketinize eklemenize ve rengi değiştirmenize izin verir. Sadece çok değiştirilmiş bir mockup’a ihtiyacınız var. O zamandan beri, ona farklı görüntüler veya ekran görüntüleri eklemeniz gerektiği kadar çok maket kullanabilirsiniz.
Bir sütun satırınıza bir görüntü modülü ekleyerek ve Mockup resminizi yükleyerek Mockup Resim ve Yükleme Modülünü Ekleyin.
Arka plan resmi ekleyin, içerik sekmesinde arka plan alt kategorisini açın ve arka plan görüntüsünü aşağıdaki ayarlarla ekleyin: Arka Plan Görüntü Boyutu: Kapak Arka Plan Görüntü Pozisyonu: Orta Arka plan görüntüsünün tekrarlanması: Tekrar yok
Arka Plan Görüntü Karışımı: Normal
Gerekirse bir gradyan arka plan ekleyin, örneğin gradyanın arka planını ekleyerek görüntünün rengini değiştirebilirsiniz. Aşağıdaki resimde arka plan gradyanı aşağıdaki ayarlara sahiptir: İlk renk: #0c71c3
Renk İkinci: #E09900
Gradyan yönü: 180 derece
Başlangıç Pozisyonu:% 19
Son pozisyon:% 61
Gradyanın arka planını arka plan görüntüsünüze eklemek için, arka plan görüntüsünüzün bir karışımı olarak ‘çarpın’ seçeneğini seçin.
Tasarım sekmesinin filtre alt kategorisine girerek sahip olduğunuz başka bir seçeneğe ihtiyacınız varsa filtreyi görüntünüze uygulamaktır. Aşağıdaki örnek için aşağıdaki değişiklikleri yaptık:
Doygunluk:% 123
Kontrast:% 121
İlk renk: #EDF000
Renk İkinci: #4D0184 Sütun Gradyan Türü: Doğrusal Sütun gradyan yönü: 180deg
Başlangıç Pozisyon Sütunu:% 0
Sütun Final Konumu:% 50
Mockup görüntüsü ve yükleme modülünü ekleyin, ardından görüntü modülünü ekleyin ve Mockup’u tekrar seçin.
Bir arka plan görüntüsü ekleyin ve bir sonraki CSS paralaks yöntemini kullanın, arka plan alt kategorisini açın, arka plan resimlerini yükleyin, ‘paralaks efekti kullanın’ etkinleştirin ve paralaks yöntemi olarak ‘CSS’ seçin.
Yapmanız gereken son resim modülüne karışım modu ekleyin Filtre alt kategorisinden ‘sert ışık’ olarak değiştirmek. . Biri ekran görüntüleri olan Mockup’a her türlü video ekleyebilirsiniz.
Mockup Resim ve Yükleme Modülünü bir kez daha ekleyin, görüntü modülünü ekleyerek ve Photoshop ile yaptığımız mockup’u seçerek başlayın. Arka plan videosu daha sonra ekleyin, videoyu resim modülünüzün arka plan alt kategorisine ekleyin ve bitirin! Bir Örnek #4 Yeniden Yaratın Yeniden yaratacağımız bir sonraki örnek, maketinizin görünümünü ve hissini değiştiren görüntünün arka planıyla birlikte bir video arka planından oluşur. Sütun 1’e bir arka plan resmi ekleyin, satır ayarlarınızı açarak başlayın, arka plan görüntüsünü arka plan alt kategorisine ekleyin ve aşağıdaki ayarları kullanın: Sütun Arka Plan Görüntü Boyutu: Kapak Sütun Arka Planının Konumu Görüntü: Orta Arka Plan Görüntü Sütunu Tekrar: Tekrarla Sütun Arka Plan Karışımı Görüntü: Normal Mockup Resim ve Yükleme Modülünü daha sonra ekleyin, bu yazının Photoshop bölümünde oluşturduğumuz Mockup ile görüntü modülünü ekleyin.
Bir sonraki arka plan videosunu ekleyin, videonun arka planını görüntü modülüne ekleyin.
Karışım modunu görüntü modülüne ekleyin ve son olarak, görüntü modülünün filtre alt kategorisindeki ‘Liften’ karışım modunu etkinleştirin.
Bir Örnek #5 Yeniden Yaratın Yeniden oluşturacağımız son örnek, ekranın tüm genişliğini karşılayan bir arka plan görüntüsü eklemenize olanak tanır. Görüntülenen Mockup ayrıca, kullanılan görüntünün arka planına sahip çok iyi bir video arka planına sahiptir. Son örnek için satır sütun yapısının satır ayarı biraz farklı bir ayara sahiptir. Bir sütunla bir satır seçerek başlayın.
Sütun 1 Arka plan görüntüsü Ardından, aşağıdaki ayarlarla arka plan görüntüsünü sütuna ekleyin: Sütun Arka Plan Görüntü Boyutu: Kapak Sütun Arka Planının Konumu Görüntü: Orta Arka Plan Görüntü Sütunu Tekrar: Tekrarla Sütun Arka Plan Karışımı Görüntü: Normal Bir sonraki yapıştırıcı, hattınızın boyutunun alt kategorisini açın ve aşağıdaki değişiklikleri uygulayın: Bu çizgiyi tamamen genişletin: evet
Özel Talang genişliği kullanın: evet
Talang genişliği: 0
Mesafe Bazı özel rulmanlara ve özel sütunlara ihtiyaç vardır:
Üst, sağ, alt ve sol dolgu: 0px Dolgu Üst Sütunu: 70px
Dolgu sağ sütun: 300 piksel (masaüstü), 200px (tablet), 100 piksel (telefon)
Sütun altında dolgu: 70px
Sol dolgu sütunu: 300 piksel (masaüstü), 200px (tablet), 100 piksel (telefon) Mockup Resim ve Yükleme Modülünü Ekleyin Satır ayarlarıyla bitirdikten sonra, görüntü modülünü ekleyebilir ve bu yazının Photoshop bölümünde oluşturduğumuz mockup’u seçebilirsiniz.
Arka plan videosu daha sonra ekleyin, görüntü modülünün arka plan alt kategorisine bir video ekleyin.
Son fakat en az değil görüntü modülüne karışım modu ekleyin, tasarım sekmesinin filtre alt kategorisinde bir karışım modu olarak ‘çarpın’ seçin ve bitti!
