Photoshop’ta divi görüntü varlıklarının hazırlanmasıyla yaratıcı olmanın 5 yolu
Divi 100 maratonumuzun 50. gününe hoş geldiniz. Bu serinin son gününde Divi 3.0’ın muhteşem sürümünü geri saydığımızda Divi’nin olağanüstü kaynaklarının 100 gününü takip etmeye devam edin!
Bugünün gönderisinde, Divi Builder’ın gönderi ve sayfasında kullanılacak görüntü öğelerini hazırlarken başvurmanızı önerdiğimiz en iyi ipucu ve uygulama serisini gerçekleştireceğiz. Bu en iyi uygulama, görüntünüzün alınan tasarım prensibine, ideal divi görüntü boyutuna uygun olmasını ve daha hızlı bir yükleme hızına katkıda bulunmasına yardımcı olacaktır.
Oh, ve unutma, onlar da çok havalı görünecekler! Doğru resmi seçmek Aşağıdaki Photoshop ipuçlarını girmeden önce, bulduğunuz, içeriğinizin konusuyla alakalı, web sitenize girmek için yeterince iyi olduğunu fark etmek önemlidir. Her durumda aşağıdaki noktaları göz önünde bulundurmalısınız ve gerekirse bu yönergeye uyacak şekilde kendi görsel öğelerinizi oluşturmalısınız. Sonuç olarak, daha güçlü olması muhtemel içeriğiniz. Görüntü Boyutları: Kural olarak, yüksek kalite/büyük boyutlarla başlamak ve aşağı inmek her zaman iyi bir fikirdir. Divi web sitesinde ihtiyacınız olan en büyük resim arka plan görüntüsüdür. 1080 piksel yüksekliğe sahip 1920px genişlik bunun için idealdir. Görüntü bundan daha küçük başlarsa, olasılık parçanın arka planı için iyi bir aday değildir. Ancak, aşağıda tartışacağımız diğer kullanım durumları için azaltabilirsiniz. Divi arka plan görüntüleri genellikle tüm ekran genişliğini kapsamak zorundadır.
Bir görüntü koleksiyonunda düşünün: bir sayfa veya divi oluşturucu yayınlamanın ve tutarlı tutmanın iyi bir yolu, aynı stile sahip bir dizi görüntü kullanmaktır. İdeal olarak, kamera ayarları, konu ve düzenleme işlemi aynıdır. Bu görüntü koleksiyonu gerçekten yayını birleştirir. Tutarlı bir renk koruyun: Gönderinizdeki veya sayfanızdaki görüntünün – ve içerdiği rengin – sitenizdeki renk paletleri ile iyi çalışabilmesi ve iyi çalışması çok önemlidir. Sitenizde düzenli olarak görüntülenen çeşitli renk paletlerine sahip çeşitli görüntülere sahip olmayı planlıyorsanız, içeriğinizin tonu sayfadan sayfaya ayarlamasına izin veren minimum bir renk şeması seçmek isteyebilirsiniz. Veya görüntünüzü istediğiniz renk paletine uyacak şekilde düzenleyin.
Görüntüdeki renk site renk şeması ile tutarlıdır. “Sakin” ve ince arka plan görüntüsünü koruyun: arka plan görüntüleri için zor “arka plana soluyor” ve/veya başka şekillerde dikkat çekin. Bu yüzden pürüzsüz bir “doku” görüntüsü, bulanık veya “yumuşatılmış” ve basit desenler kullanmayı tercih ediyoruz – hepsi iyi bir arka plan haline geliyor.
Bu ay yakın çekim, yazı başlığı ve ince bir doku veya desen olarak iyi işlev görür. Özellikle overlage ile renk eklendi. Photoshop’ta divi görüntü varlıklarının hazırlanmasıyla yaratıcı olmanın 5 yolu
Şimdi, Divi’nin gönderisi veya sayfası için doğru görüntüyü neyin oluşturduğu için bir temelimiz var, Photoshop’ta divi görüntü varlıklarınızı hazırlamada yaratıcı olabileceğiniz beş yola bakalım. 1. Kendi arka plan renginizin bir gerilimini ekleyin Fullwidth başlık modülümüzün popüler özelliklerinden biri arka plan rengi kaplamasıdır. Bu özellik, arka plan görüntüsü olarak seçtiğiniz herhangi bir görüntünün üzerinde ayarlanabilen şeffaflık ile renkli kaplama yapmanızı sağlar. Sitenizde renkli görüntüler isteyebileceğiniz başka alanlar da vardır. Bu durumda, Photoshop veya başka bir görüntü düzenleme yazılımı kullanarak görüntünün kendisine bir tane eklemelisiniz. Örneğin, aşağıdaki görüntüde, arka plan görüntüsü olan parçanın üzerinde kullanılan bir metin modülümüz var. Değişmeyen bir durumda, metin neredeyse okunamaz hale gelir. Bu, metnin arkasında bir arka plan görüntüsü kullanmaya çalışırken çok yaygın bir olaydır. Bazen arka plan görüntüleri çok parlak olabilir ve bazen de çok meşgul olabilir. Pürüzsüz arka plan kaplamasıyla görüntüleri değiştirmek, görüntünün rengini azaltabilir ve bu sorunu kolayca çözebilir. Her şeyden önce, görüntünüzü Photoshop’ta (veya benzer fotoğraf düzenleme yazılımında) açmanız gerekir. Resmin üstünde yeni bir katman yapın. Bu, bindirme için kullanacağımız katmandır. Katman yapıldıktan sonra, katmanı bir jet siyahı ile doldurmak için boya kovasını kullanın ve ardından opaklığı%50 azaltmak için opaklık katmanı kaymasını kullanın. Fotoğrafınızın parlaklığına bağlı olarak bir yüzde ile oynayabilirsiniz. Görüntü depolandıktan ve divi sitenize yeniden yerleştirildikten sonra, arka plan görüntülerinin gerilmesinin üst üste binen metni okumayı kolaylaştırdığını görebilirsiniz! 2. Bir kolaj oluşturun “hile yapmanın” ve yine de web sitenizde küçük resimler kullanmanın yollarından biri, birçok görüntüyü tek bir kolajda gruplamaktır. Aşağıdaki örnekte olduğu gibi görüntülerin genişliği ile birleştirildiğinde, kolaj iyi bir parçanın arka planıdır. Bu, kolaj arka planının iyi bir örneğidir. Kendiniz yapmak için önce Photoshop’ta yeni bir belge yapmalısınız. Yukarıda bahsettiğim gibi, 1920px Times 1080px genellikle başlamak için iyi bir önlemdir. Gerekirse her zaman ayarlayabilirsiniz. Ardından, diğer resimlerinizi toplamak ve bir klasöre koymak istersiniz; Hem masaüstünüzde hem de bu özel proje için dosya ayarladığınız her yerde. Başlamak için görüntü öğesini “boş tuval” e sürüklersiniz. Bu böyle görünmeye başlayacak.
Her görüntü kendi katmanında olacaktır, ancak her şey doğrudan birbirinin üstünde olacaktır. Görüntüleri seçtiğiniz boyuta değiştirmek için + t komutunu kullanın. Ölçeğin orantılı olması için boyutu değiştirirken kaydırma düğmesini basılı tuttuğunuzdan emin olun. Değilse, görüntü esnek veya sıkışmış görünecektir. Ardından, konumlandırmak için hareketli bir araç kullanın. Sonuçlardan memnun kaldığınızda, Divi’de nasıl kullanmak istediğinize bağlı olarak renk kaplaması eklemeyi veya yapmamayı seçebilirsiniz. 3. Divi bölümünde daha dramatik paralaks için çok çizilmiş bir “katman” oluşturun ve satır ayarlarınız “paralaks” adı verilen efekti etkinleştirebilir. Paralaks efekti etkinleştirildiğinde, arka plan görüntüsünüze tek bir yerde sabit bir ekran verirken, geri kalan alanın geri kalanı içinden geçer. Bu etki, bir resim birbirinden geçen birkaç görüntüye ayrıldığında daha fazla vurgulanabilir. Aslında, tanıma göre paralaksın etkisi, farklı mesafelerde iki nesne karşılaştırılırken yapılır. Paralaks görüntüsünüzün üzerine resim ekleyerek, etki ikisi arasındaki etkileşimler yoluyla artar. İşin püf noktası, birlikte iyi çalışan iki görüntü seçmektir. Örneğin: Gördüğünüz gibi, arka plan görüntüsü Divi bölüm ayarlarında “Gerçek Paralaks” moduna göre düzenlenmiştir. Sayfayı geri çevirdiğinizde, arka plandaki görüntü aynı hızda, ancak tüm sayfadan biraz daha yavaş hareket eder. Bu bir paralaks efekti yaratır. Derinliğin arka plan görüntüsü hareketinin hızına kıyasla sayfadaki elemanlar arasındaki hız farkı. Hareketin üzerindeki resim sayfanın geri kalanı ile birlikte ve bu şeffaf bir PNG görüntüsü olduğu için, arkasındaki paralaks görüntüsünü görmek için görüntüdeki boşluğa bakabiliriz! Bu sadece sıradan bir divi görüntü modülü. İşin püf noktası, birlikte iyi çalışan iki görüntü seçmek, daha sonra yukarıdaki resmi şeffaf bir PNG olarak değiştirmektir. Yukarıdaki örnekte kullanılan iki görüntü: Gördüğünüz gibi, soldaki görüntü (paralaks arka plan görüntüsünün üzerindeki görüntü modülü) şeffaf bir arka plana sahip PNG’dir. Aşağıdaki paralaks görüntüsünü görebilmeniz için tüm beyaz boşluklar silinmiştir. Photoshop’ta, düz bir arka planı (ideal olarak beyaz) olan görüntülerle çalıştığınız sürece bunu yapmak oldukça kolaydır. Resmi açın ve resimdeki her öğe arasında beyaz bir boşluk seçmek için sihirli bir çubuk kullanın. Her şey seçildikten sonra, beyaz arka planı silmek için Sil düğmesini tıklayın. Kaydet> Dışa Aktar> PNG olarak hızlı bir şekilde dışa aktarın ve bitti!
4. Diğer divi içeriği için alan bırakın (veya yapın) Bu ipucu muhtemelen en basit ama diğerlerinden daha az çarpıcı değil. Buradaki hile, içinde ekstra boş arka plan alanı olan (yukarıdaki resim gibi) görüntüler bulmak veya Photoshop’ta yapmaktır, böylece “İçine” başka bir divi modülü yerleştirmek için yer vardır.
Buradaki hile (Divi’de) görüntüyü bölümün bir arka planı olarak ayarlamaktır. Ardından, satıra iki modül ekleyin: görüntülemek istediğiniz herhangi bir modül (bu durumda, davet modülü hareket eder) ve aşağıdaki “boş alan” modülünü yapmak için bölücü modülü, sonuçta görüntünün arka planını görüntüler. Davet modülünün arka plan renginin% 100 şeffaf olarak hareket etmesini de düzenlemek de önemlidir. Görüntünüzün üstte veya altta ekstra bir alanı yoksa, aşağıdakileri yapabilirsiniz:
Resmi Photoshop’ta açın ve ana konunuzu seçmek için bir laso aracı, hızlı seçmen veya sihirli çubuklar kullanın. Arka planlarını çıkarın ve düz renklerle değiştirin. Boşluğu divi içeriğinizin dört tarafından birinde bırakacağınız yerde bıraktığınızdan emin olun. Ayrıca tuvalin boyutunu değiştirmeniz isteyebilir veya ihtiyaç duyabilirsiniz. Benimkini 1920px kez 1080 piksel olarak ayarladım ve konumu sola doğru hareket ettirdim. Bu resimde alanı gördüğü yönde açmayı seçtim. Bu, sitemi ziyaret eden herkes için iyi bir görsel sinyal oluşturacak ve onları istediğim yere bakmaya teşvik edecek.
