Photoshop'ta Divi Image Asset Hazırlama ile Yaratıcı Olmanın 5 Yolu

Divi 100 Maratonumuzun 50. Gününe hoş geldiniz. Serinin son gününde muhteşem Divi 3.0 sürümüne geri sayarken, 100 gün boyunca muhteşem Divi kaynaklarını izlemeye devam edin!

---

Bugünkü gönderide, Divi Builder gönderilerinde ve sayfalarında kullanılmak üzere görüntü öğelerini hazırlarken benimsemenizi önerdiğimiz bir dizi ipucu ve en iyi uygulamayı inceleyeceğiz. Bu en iyi uygulamalar, görüntülerinizin kabul edilen tasarım ilkelerine, ideal Divi görüntü boyutlarına uygun olmasını sağlamaya ve daha hızlı yükleme hızlarına katkıda bulunmaya yardımcı olacaktır.

Oh, ve unutmayalım, onlar da oldukça havalı görünecekler!

Doğru Görüntüleri Seçme

Aşağıdaki photoshop ipuçlarına girmeden önce, içerik konunuzla alakalı olsun ya da olmasın, karşılaştığınız her görüntünün web sitenize sığdırmak için yeterince iyi olmadığını anlamak önemlidir. Her durumda aşağıdaki noktaları göz önünde bulundurmalısınız ve gerekirse bu yönergelere uymak için kendi görsel öğelerinizi oluşturmalısınız. Sonuç olarak bitmiş içeriğiniz muhtemelen daha güçlü olacaktır.

Görüntü Boyutları: Kural olarak, yüksek kalite/büyük boyutlarla başlamak ve aşağı doğru inmek her zaman iyi bir fikirdir. Bir Divi web sitesinde ihtiyaç duyacağınız en büyük resimler, bölüm arka plan resimleridir. 1920 piksel genişlik ve 1080 piksel yükseklik bunlar için idealdir. Bir resim bundan daha küçük başlıyorsa, muhtemelen bir bölüm arka planı için iyi bir aday değildir. Bununla birlikte, aşağıda ele alacağımız diğer kullanım durumları için ölçeği küçültebilirsiniz.

Görüntü kümeleri halinde düşünün: Bir Divi Builder sayfasının veya gönderisinin tonunu oluşturmanın ve bunu baştan sona tutarlı tutmanın harika bir yolu, stil olarak aynı olan tek bir görüntü kümesi kullanmaktır. İdeal olarak, aynı kamera ayarları, konu ve düzenleme süreci.

Renkleri tutarlı tutun: Gönderiniz veya sayfanızdaki resimlerin ve içerdikleri renklerin sitenizdeki renk paletiyle uyumlu ve uyumlu olması önemlidir. Sitenizde düzenli olarak yer alan çeşitli renk paletlerine sahip çok çeşitli resimlere sahip olmayı planlıyorsanız, içeriğinizin tonunu sayfadan sayfaya ayarlamasına izin veren minimal bir renk şeması seçmek isteyebilirsiniz. Veya resimlerinizi seçtiğiniz renk paletine uyacak şekilde düzenleyin.

Arka plan resimlerini "sessiz" ve ince tutun: Gerçekten meşgulse ve/veya başka şekillerde dikkat çekmek için yalvarıyorsa, bir arka plan resminin "arka plana dönüşmesi" zordur. Bu nedenle, tümü harika arka planlar oluşturan incelikli "doku" resimleri, bulanık veya "yumuşatılmış" resimler ve basit desenler kullanmayı tercih ediyoruz.

Photoshop'ta Divi Image Asset Hazırlama ile Yaratıcı Olmanın 5 Yolu

Artık bir resmi Divi gönderileri veya sayfaları için neyin doğru yaptığına dair bir tür temelimiz olduğuna göre, Divi resim varlıklarınızı photoshop'ta hazırlarken yaratıcı olmanın beş yoluna bir göz atalım.

1. Kendi Arka Plan Rengi Bindirmelerinizi Ekleyin

Tam genişlikli başlık modülümüzün popüler bir özelliği, arka plan rengi kaplamasıdır. Bu özellik, arka plan resminiz olarak seçtiğiniz herhangi bir resim üzerinde ayarlanabilir şeffaflığa sahip renkli bir kaplama oluşturmanıza olanak tanır. Yine de sitenizde renkli bir görüntü yerleşimi isteyebileceğiniz başka alanlar da var. Bu durumlarda, photoshop veya başka bir resim düzenleme yazılımı kullanarak resmin kendisine bir tane eklemeniz gerekir.

Örneğin, aşağıdaki resimde, arka plan resmi olan bir bölümün üzerinde kullanılan bir metin modülümüz var. Değiştirilmemiş durumunda, metin neredeyse okunamaz hale gelir. Metnin arkasında arka plan resimlerini kullanmaya çalışırken bu çok yaygın bir durumdur. Bazen arka plan görüntüsü çok parlak olabilir ve diğer zamanlarda çok meşgul olabilir. Görüntüyü ince bir arka plan kaplamasıyla değiştirmek, görüntüyü yumuşatabilir ve bu sorunları kolaylıkla çözebilir.

Her şeyden önce, resminizi Photoshop'ta (veya benzer bir fotoğraf düzenleme yazılımında) açmanız gerekir. Resmin üzerinde yeni bir katman oluşturun. Bu, kaplamamız için kullanacağımız katmandır.

Katman oluşturulduktan sonra, katmanı düz siyahla doldurmak için boya kovası aracını kullanın ve ardından opaklığı %50'ye düşürmek için katmanın opaklık kaydırıcısını kullanın. Fotoğrafınızın parlaklığına bağlı olarak yüzde ile oynayabilirsiniz.

Görüntü kaydedildikten ve Divi sitenize yeniden yüklendikten sonra, arka plan görüntüsü yerleşiminin üst üste binen metnin okunmasını çok daha kolay hale getirdiğini görebilirsiniz!

2. Kolajlar Oluşturun

"Hile yapmanın" ve web sitenizde küçük görseller kullanmaya devam etmenin bir yolu, çok sayıda görseli bir kolaj halinde gruplandırmaktır. Aşağıdaki örnekte olduğu gibi bir görüntü bindirmesiyle birleştirildiğinde, kolajlar harika bölüm arka planları oluşturur.

Kendi belgenizi oluşturmak için önce photoshop'ta yeni bir belge oluşturmanız gerekir. Yukarıda bahsettiğim gibi 1920 piksele 1080 piksel başlangıç ​​için genellikle iyi bir boyuttur. Gerekirse her zaman aşağı ayarlayabilirsiniz.

Ardından, diğer resimlerinizi toplamak ve tek bir klasöre koymak isteyeceksiniz; ya masaüstünüzde ya da bu proje için dosyaları organize ettiğiniz her yerde.

Başlamak için görüntü öğelerini kolajınızın "boş tuvaline" sürükleyebilirsiniz.

Böyle görünmeye başlayacak.

Her görüntü kendi katmanında olacak, ancak hepsi doğrudan birbirinin üstünde olacak. Görüntüleri tercih ettiğiniz boyutlara dönüştürmek için + T komutunu kullanın. Her şeyin orantılı olarak ölçeklenmesi için yeniden boyutlandırırken shift tuşunu basılı tuttuğunuzdan emin olun. Aksi takdirde, görüntü gergin veya ezilmiş görünecektir. Ardından, onları konumlandırmak için hareket aracını kullanın.

Sonuçlardan memnun kaldığınızda, Divi'de nasıl kullanmak istediğinize bağlı olarak bir renk katmanı eklemeyi veya eklememeyi seçebilirsiniz.

3. Daha Dramatik Paralaks için Çoklu Görüntü “Katmanları” Yaratın

Divi bölümü ve satır ayarlarında “paralaks” adı verilen bir efekti açabilirsiniz. Paralaks efekti etkinleştirildiğinde, arka plan resimlerinize, görünümün geri kalanı kaydırılarak geçerken bir noktada sabit kalıyormuş gibi bir görünüm verir. Bu efekt, tek bir görüntü birbirinin üzerinden geçen birden çok görüntüye bölündüğünde daha da vurgulanabilir. Aslında, tanım gereği paralaks etkisi, farklı mesafelerdeki iki nesneyi karşılaştırırken yaratılır. Paralaks görüntünüzün üstüne bir görüntü ekleyerek, ikisi arasındaki etkileşim yoluyla efekt artar. İşin püf noktası, birlikte iyi çalışan iki resim seçmektir.

İşte bir örnek:

Gördüğünüz gibi arka plan görüntüsü Divi bölümü ayarlarında “true paralaks” moduna ayarlanmıştır. Sayfayı aşağı kaydırdıkça, arka plandaki görüntü, sayfanın geneline göre benzer ancak biraz daha yavaş bir hızda hareket eder. Bu paralaks etkisini yaratır. Bölümün arka plan görüntüsünün hareket etme hızıyla karşılaştırıldığında sayfadaki öğeler arasındaki hız farkı bir derinlik yanılsaması yaratır.

Bölümün üstündeki görüntü sayfanın geri kalanıyla birlikte hareket eder ve şeffaf bir PNG görüntüsü olduğundan, arkasındaki paralaks görüntüsünü görmek için görüntüdeki boşluklardan bakabiliriz! Bu sadece normal bir Divi görüntü modülüdür. İşin püf noktası, birlikte harika çalışan iki resim seçmek ve ardından üstteki resmi şeffaf bir PNG'ye dönüştürmektir.

Yukarıdaki örnekte kullanılan iki resim:

Gördüğünüz gibi, soldaki görüntü (paralaks arka plan görüntüsünün üstüne oturan görüntü modülü) şeffaf arka plana sahip bir PNG'dir. Aşağıdaki paralaks görüntüsünü görebilmeniz için tüm boşluklar silinmiştir. Photoshop'ta, düz (ideal olarak beyaz) bir arka plana sahip bir görüntüyle çalıştığınız sürece bunu yapmak oldukça kolaydır.

Görüntüyü açın ve görüntüdeki her öğe arasındaki beyaz boşluğu seçmek için Sihirli Değnek aracını kullanın. Her şey seçildikten sonra beyaz arka planı kaldırmak için sil tuşuna tıklayın. Kaydet > Dışa Aktar > PNG Olarak Hızlı Dışa Aktar'a tıklayın ve işiniz bitti!

4. Diğer Divi İçeriği için Alan Bırakın (veya Oluşturun)

Bu ipucu belki de en basitidir ancak görsel olarak diğerlerinden daha az çarpıcı değildir. Buradaki hile, ya içinde fazladan boş arka plan alanı olan bir görüntü bulmak (yukarıdaki görüntü gibi) ya da photoshop'ta bazılarını oluşturmak, böylece diğer Divi modüllerini "içerisine" yerleştirmek için yer açmaktır.

Buradaki hile (Divi'de), görüntüyü bölüm arka planı olarak ayarlamaktır. Ardından, satıra iki modül ekleyin: hangi modülü görüntülemek istiyorsanız (bu durumda, bir harekete geçirici mesaj modülü) ve altında istenen miktarda "boş alan" oluşturmak için bir ayırıcı modül ve sonuçta arka planı görüntüler. görüntü. Eylem çağrısı modülünün arka plan rengini %100 şeffaf olarak ayarlamak da önemlidir.

Resminizin üst veya alt kısmında bunun gibi fazladan boşluk yoksa, aşağıdakileri yapabilirsiniz:

Resmi photoshop'ta açın ve ana konunuzu seçmek için kement aracını, hızlı seçiciyi veya sihirli değnek kullanın. Arka planlarını silin ve düz bir renkle değiştirin.

Divi içeriğinizin gideceği dört taraftan birine boşluk bıraktığınızdan emin olun. Ayrıca tuvali yeniden boyutlandırmak isteyebilirsiniz veya buna ihtiyacınız olabilir. Benimkini 1920 piksele 1080 piksele ayarladım ve öznemi daha sola kaydırdım.

Bu resimde, onun baktığı yönde alanı açmayı seçtim. Bu, sitemi ziyaret eden herkes için güzel bir görsel ipucu oluşturacak ve onları istediğim yere bakmaya teşvik edecek.

Şimdi, bu görüntüyü Divi'de kullandığımda, oluşturduğum açık alana bir harekete geçirici mesaj yerleştirebiliyorum.

5. Kesintisiz Bölüm Geçişleri Oluşturun

Divi Builder gönderilerinde ve sayfalarında görüntüleri kullanırken, bu görüntülerin çevreleyen içerikle nasıl ilişkili olacağını düşünmek önemlidir. Tek bir görüntünün bütüne nasıl uyduğunu öğrendikten sonra, birçok öğeyi tek bir kesintisiz içerikte birleştirmenin eğlenceli küçük yollarını bulabilirsin.

Bunu yapmanın bir yolu, görüntülerinizin üst ve alt kısımlarına geçiş gradyanları ekleyerek bir sonraki bölüme geçmelerini sağlamaktır – aşağıdaki Divi Builder demolarımızdan birinden alınan aşağıdaki resimde olduğu gibi.

Bulutlar aşağıdaki beyaz bölüme doğru kayboluyor gibi görünüyor, ancak bu sadece şanslı bir tesadüf değil. Aslında, orijinal görüntü şuna benziyordu:

Gördüğünüz gibi, beyaz bölüm ile yukarıdaki görüntü modülü arasında keskin bir engel var. Ancak görüntü üzerinde basit bir gradyan ile ikisi arasında güzel bir geçiş yaratabiliriz.

Degradeyi uygulamak için önce resminizi Photoshop'ta açmanız gerekir. Resmin altındaki bölüme geçiş yapmak istediğimiz ve alttaki bölüm beyaz arka plana sahip olduğu için resmin alt kısmına beyaz bir gradyan uygulayacağız. Görüntünün altındaki son piksel sırası beyaz olduğu sürece geçiş düzgün olacaktır.

Degrade aracını seçin ve ardından soldurmak istediğiniz rengi seçin. Degradenin mükemmel bir 90 derecelik açıyla uygulandığından emin olmak için shift tuşunu basılı tutarken degrade aracını aşağıdan yukarıya doğru sürükleyin.

Resim kaydedilip sitemize geri yüklendikten sonra, beyaz degradenin resmin alt kısmı ile aşağıdaki bölüm arasında yumuşak bir geçiş oluşturduğunu görebilirsiniz. Aynı konsept herhangi bir görüntüye ve herhangi bir bölüm arka plan rengine uygulanabilir, ancak seçtiğiniz görüntüdeki baskın renge mümkün olduğunca yakın bir renk seçmek en iyisidir. Görüntüde olmayan bir renge solmaya çalışmak, doğal olmayan bir geçişe neden olacaktır.

Resim Dosyalarınızı Düzgün Kaydetme

Yukarıdaki yaratıcı alıştırmalarınızı tamamladığınızda, dosyalarınızı düzgün bir şekilde kaydetmek için aşağıdaki ipuçlarını kullanmanızı öneririz. Bu ipuçları, dosyalarınızın doğru biçimde ve küçük olmasını sağlayacaktır. Bunu yaparken, yalnızca mümkün olduğunca hafif resimler kullanarak daha yüksek sayfa hızlarına katkıda bulunacaksınız.

Görüntü Formatları: Çoğu durumda JPG formatını kullanmak isteyeceksiniz. Bu, milyonlarca renk içeren görüntüleri kaydetmek için iyidir, bu nedenle çok fazla gölge ve degradeye sahip fotoğraflar ve grafikler için mükemmeldir. Saydam bir arka plana ihtiyaç duyduğunuz veya görüntüyü bir renk katmanının arkasına yerleştireceğiniz durumlarda PNG dosya biçimi idealdir.

Dosya Boyutu: En küçüğünden en büyüğüne kadar, görüntü dosyanızın boyutları 40 Kb ile 200 Kb arasında değişmelidir. Daha büyüğü yok. Bu, özellikle Divi düzenlerini dışa aktarırken önemlidir. Görüntü dosyası boyutları büyük olduğunda bazı hataların oluşabileceğini fark ettim.

Web İçin Kaydet: Photoshop'tan web'de kullanmak üzere bir görüntü kaydederken, Dosya > Dışa Aktar > Web için Kaydet (eski) seçeneğine gidin ve "optimize edilmiş" ve "aşamalı" onay kutuları arasından seçim yapın. Her ikisi de işe yarayacaktır, ancak aşamalı görüntünün bir yararı, ilk başta biraz bulanık görünmesi, ancak bir kez yüklendiğinde aşamalı olmayan görüntülerden daha net görünmesidir. Bu biraz netlik, resimlerinize (ve dolayısıyla sitenize) biraz avantaj sağlayabilir.

"Yüksek" ve "düşük" kalite arasında seçim yaparken, görüntünün nasıl kullanılacağını hesaba katın. Resim gönderide veya sayfada tek başına duracaksa "yüksek" kullanmak isteyebilirsiniz. Veya arka plan olarak kullanılacaksa "orta" ila "düşük" arasında seçim yapın. Ancak sonuçta her zaman görüntü kalitesi ve sıkıştırma arasında doğru dengeyi sağlamaya çalışacaksınız. Bulduğunuzda, kaydet'i tıklayın.

Toplama

Elbette, daha iyi ve daha dinamik Divi Builder gönderileri ve sayfaları elde etmek için görüntü varlıklarınızı hazırlamanın daha birçok ipucu ve yaratıcı yolu vardır. Divi demo sayfalarımızda yaptığımızı gördüğünüz bir şey varsa, aşağıdaki yorumlar bölümünde bize sormaktan çekinmeyin ve size bunu nasıl yaptığımızı göstermek için bir takip yazısı yazacağız.

Ayrıca, büyük bir duyuruyu, faydalı ipucunu veya Divi freebie'sini asla kaçırmamak için e-posta bültenimize ve YouTube kanalımıza abone olmayı unutmayın!