Web sitesi için görseller nasıl birleştirilir?

Görseller birleştirilmeli mi, ayrı mı kalmalı?

Kolaj, birden fazla görseli tek dosyada toplar. Proje sayfasında kısa bir genel bakış sunabilir ya da bir konuyu yararlı bir ayrıntıyla birlikte gösterebilir. Görseller ortak bir soruyu yanıtlamalıdır: tamamlanan mutfak nasıl görünüyor ve depolama çözümleri nasıl çalışıyor?

Her görselin kendi açıklaması, bağlantısı veya yakından incelenmesi gerekiyorsa ayrı gösterin. Bir ürün galerisi, ziyaretçinin küçük bir ızgara yerine her görünümü tek tek incelemesini sağlar.

Kolaj küçük gösterildiğinde de düzenini korur. Site düzenleyicisinde ayrı eklenen görseller telefonda alt alta gelebilir; tek dosyada birleştirilenler yerlerinde kalır. Böylece düzen öngörülebilir olur, ancak sayfanın her fotoğrafı uygun büyüklükte gösterme esnekliği azalır.

Farklı bilgiler sunan görseller seçin

Bir projeyi özetlemek için iki ila dört görsel iyi bir başlangıçtır. Her birine görev verin: genel görünüm ortamı anlatır, yakın çekim ise başka türlü görülmesi zor bir özelliği gösterir. Birbirine çok benzeyen iki genel görünüm, genellikle genel görünümle yararlı bir ayrıntının birlikte sunduğundan daha az bilgi verir.

Işığı ve renkleri birbiriyle uyumlu görseller seçin. Öncesi ve sonrası karşılaştırmalarında benzer çekim açıları, kadrajlar ve ölçekler kullanarak değişimi değerlendirmeyi kolaylaştırın. Önemli bir farkı gizleyen kırpmalardan kaçının. Web sitesi için görsel seçme rehberimiz her görselin ne anlatması gerektiğini açıklar.

Görsellere uygun bir düzen seçin

Pixilo’nun üç görsellik düzeninde ilk görsel solda büyük, sonraki ikisi sağda alt alta gösterilir. Hangi fotoğrafın daha fazla alan kaplayacağını sıralamayı değiştirerek seçin. Normal ızgara soldan sağa, sonra yukarıdan aşağı dolar. Görsel sayısı bütün hücreleri doldurmazsa boş hücrelerde seçtiğiniz arka plan görünür.

Kolajın biçimini görsel alanlarına göre ayarlayın

Kolajın genişliği ve yüksekliği, içindeki görsel alanlarının biçimini belirler. Kare bir kolaj her zaman kare alanlar oluşturmaz: yan yana iki görselin her biri dikey bir alana yerleşir. İki satır ve iki sütunlu ızgarada ise aralıklar ve kenar boşlukları küçükse alanlar yaklaşık kare olur.

İki dikey fotoğrafı yan yana koyarken alanların da dikey kalması için daha yüksek bir kolaj deneyin. Geniş ve alçak kolajda alanları doldurmak, fotoğrafların üst ve altından daha çok keser. Tek sıradaki iki yatay fotoğraf için daha geniş bir kolaj her sahnenin daha büyük bölümünü koruyabilir.

Önce sayfadaki kullanılabilir alanı belirleyin, ardından fotoğraflara uygun düzen ve biçimleri deneyin. Site sabit bir biçim gerektiriyorsa onu koruyup düzeni veya görsel seçimini değiştirin. Pixilo’da biçimi değiştirmek için en boy oranının kilidini açın. Oranları koruyarak yalnızca boyutu değiştirmek istediğinizde yeniden kilitleyin.

Görselin tamamını mı göstermeli, çerçeveyi mi doldurmalı?

Görselin tamamını göster bütün kenarları korur, ancak görselin çevresinde boşluk bırakabilir. Logolar, şemalar veya kırpıldığında önemli bilgi kaybedecek ürün fotoğrafları için uygundur.

Çerçeveyi doldur görseli esnetmeden alanına göre kırpar. Fotoğraf ızgarasında düzgün kenarlar elde edilir, ancak nelerin dışarıda kaldığını kontrol etmelisiniz. Her küçük resmi seçip kırpmanın konumunu ayarlayarak önemli konuyu görünür tutun.

Bir alana hem yüz hem de yanındaki etkinlik sığmıyorsa farklı kolaj biçimi veya düzeni deneyin, görselin tamamını gösterin ya da başka fotoğraf seçin. Kırpmayı kaydırmak, geniş bir sahnenin bütün parçalarını dar bir alana sığdıramaz. Orijinalden daha hassas bir kadraj seçmek için önce kırpma aracını kullanın, sonra bu kadrajın kolaja nasıl oturduğunu kontrol edin.

Görselleri aralıklarla ayırın

Küçük bir aralık, komşu fotoğrafları ayırt etmeyi kolaylaştırır. Dış boşluk kolajı çevreler, ancak fotoğraflara kalan alanı azaltır. Kolaj dar bir sütunda gösterilecekse ikisini de ölçülü tutun. Görsel küçük gösterildiğinde aralıklar ve kenar boşlukları da küçülür.

Fotoğraflarla ve sayfayla uyumlu bir arka plan seçin. Aralıklarda, kenar boşluklarında ve alanını doldurmayan görsellerin çevresinde görünür. Rengini değiştirmek veya şeffaflık seçmek, fotoğrafın içinde zaten bulunan arka planı kaldırmaz.

Görselleri Pixilo ile birleştirin

1. Görsel birleştirme aracını açın ve JPG, PNG veya WebP dosyalarınızı seçin.
2. Düzeni seçin ve küçük resimlerin altındaki oklarla sıralamayı ayarlayın.
3. Aralıklar ve dış boşluk dâhil tüm kolajın genişliğini ve yüksekliğini belirleyin.
4. Her görseli tam gösterin veya çerçevesini doldurun. Kırpma kullanıyorsanız her küçük resmi seçip konumunu ayarlayın. Kaydırıcılar yalnızca görselin kırpıldığı yönlerde kullanılabilir.
5. Aralıkları, dış boşluğu ve arka plan rengini veya şeffaflığı ayarlayın.
6. PNG’yi indirin, kalitesini kontrol edin ve yayımlayacağınız sürümü hazırlayın.

Görsel ekle ile mevcut sıra, kırpmalar ve ayarlar korunarak yeni fotoğraflar eklenebilir. Görselleri değiştir seçimi yenileriyle değiştirir. Bir büyük ve iki küçük görsellik düzen tam üç görsel gerektirir; dördüncü görseli eklemek düzeni ızgaraya çevirir.

Örnek: tamamlanan bir mutfağın dört fotoğrafı

Bir tadilat firması proje sayfasında kısa bir görsel özet sunmak istiyor. Odanın genel görünümünü, bir depolama dolabının içini, tezgâh ayrıntısını ve tezgâh üstündeki aydınlatmayı seçiyor. Her fotoğraf tamamlanmış aynı işin farklı bir yönünü gösteriyor.

Firma dört yönü de göstermek için 2 × 2 ızgarayla başlıyor. Genel görünüm asıl satış avantajı olsaydı, üç görsellik düzen ona daha fazla alan verebilirdi. İki ayrıntı yanında, dördüncü fotoğraf ise sayfanın başka bir yerinde gösterilebilirdi.

Sayfa kolajı en fazla 600 piksel genişliğinde gösteriyor. Bu örnek için 1200 × 800 piksel olarak, 16 piksel aralık, 24 piksel dış boşluk ve beyaz arka planla dışa aktarın. Dosyanın genişliği gösterimin iki katı olduğundan yüksek piksel yoğunluklu ekranlar için daha fazla ayrıntı sağlar. Bunlar örnek ayarlardır; her site için zorunlu bir boyut değildir. Web sitesi görsel boyutları rehberimiz sayfanıza uygun ölçüleri seçmeyi açıklar.

Çerçeveleri doldurun; önce genel görünümü, sonra dolabı, tezgâhı ve aydınlatmayı yerleştirin. Her kırpmayı, fotoğrafın anlatmak istediği özelliği gösterecek şekilde ayarlayın.

Telefonda 360 piksel genişliğinde gösterildiğinde her fotoğraf bu düzende yalnızca yaklaşık 170 piksel genişliğindedir. Dolap ve aydınlatma tanınabilir, fakat tezgâh birleşiminin değerlendirilemeyecek kadar küçük kaldığını varsayalım. Bu fotoğrafı kolajdan çıkarıp ayrı ve daha büyük gösterin. Kalan üç fotoğrafı genel görünüme ağırlık verecek şekilde düzenleyin. Yalnızca dışa aktarma boyutunu büyütmek, birleşime sayfada daha fazla alan vermez.

Kolajı sayfanın mobil düzeninde kontrol edin

Sayfayı bilgisayar ve telefon genişliklerinde, yakınlaştırmadan önizleyin. Ziyaretçinin gerçekten ne anlayabildiğine bakın: iki yüzey görünümünü karşılaştırabilir, depolama çözümünü görebilir veya adımları izleyebilir mi? Yararlı ayrıntı kaybolduysa ana konuyu tanımak yeterli değildir.

Yalnızca indirilen dosyayı değil, sayfadaki görseli de kontrol edin. Site teması sabit bir görsel alanına sığdırmak için ek kırpma uygulayabilir. Kolajın bir kısmı kesiliyorsa alanı veya gösterim ayarlarını değiştirin.

Düzen sıkışık görünüyorsa sadeleştirin veya fotoğrafları ayrı tutun. Site oluşturucunuz mobil için farklı görsel destekliyorsa daha az fotoğraflı ya da dikey düzenli bir sürüm hazırlayın. Duyarlı görseller rehberimiz bu yaklaşımı açıklar.

Başlıkları ve önemli etiketleri sayfa metni olarak tutun. Görselin içindeki metin onunla küçülür ve güncellenmesi daha zordur. Açıklayıcı görsel altı yazılarını site düzenleyicisinde ekleyin.

Görsel altı açıklama ve yararlı alternatif metin ekleyin

Görsel altı açıklama projeyi tanıtabilir ve fotoğrafların sırasını anlatabilir. Dört mutfak fotoğrafı için: “Tamamlanan mutfak tadilatı. Sol üstten saat yönünde: genel görünüm, dışarı çekilen dolap bölmesi, tezgâh aydınlatması ve tezgâh ayrıntısı.” Bir fotoğrafı taşırsanız veya kaldırırsanız açıklamayı son düzene göre güncelleyin.

Tek dosya olarak dışa aktarılan, bilgi veren bir kolajın tamamı için alternatif metin gerekir. Bu örnekte şöyle olabilir: “Dışarı çekilen dolap bölmesi, düz tezgâh birleşimi ve tezgâh üstünde lambaları olan yenilenmiş mutfak.” Yalnızca “Dört fotoğraflı kolaj” yazmak yerine önemli olanı anlatın.

Görseller ayrıntılı bir karşılaştırma yapıyorsa tüm açıklamayı alternatif metne sığdırmaya çalışmayın; temel farkları görselin yanındaki sayfa metninde verin. W3C’nin karmaşık görseller rehberi kısa alternatif metni daha kapsamlı bir açıklamayla birlikte kullanmayı anlatır. Alternatif metin ve dosya adları rehberimiz sayfaya uygun açıklamalar yazmanıza yardımcı olur.

Dosyayı web siteniz için hazırlayın

Pixilo kolajı PNG olarak kaydeder; şeffaflığı korur ve dışa aktarırken ek kayıplı sıkıştırma uygulamaz. Bu, kaynak fotoğraflarda bulunmayan ayrıntıları geri getirmez. Küçük bir görsel çerçeveyi doldurmak için büyütüldüğünde, özellikle dar bir kırpmadan sonra bulanık görünebilir. İndirilen kolajdaki her fotoğrafı inceleyin. Biri diğerlerinden belirgin biçimde daha az netse daha büyük orijinal kullanın veya daha küçük alan verin.

Çoğunlukla fotoğraflardan oluşan bir kolaj büyük PNG dosyası üretebilir. Site için bir kopya hazırlamak üzere PNG’den WebP’ye dönüştürme aracını veya şeffaflık gerekmiyorsa PNG’den JPG’ye dönüştürme aracını kullanın. Dosya boyutunu ve görünen kaliteyi PNG ile karşılaştırın. Kaliteyi ayarlarken ince ayrıntıları ve kenarları kontrol edin; en küçük dosya, göstermek istediğiniz özelliği belirsizleştiriyorsa işe yaramaz.

Sayfanın arka planı görselin içinden görünmeliyse şeffaflığı koruyan bir sürüm tutun. JPG bunu desteklemez. Web için görsel biçimleri rehberimiz seçenekleri daha ayrıntılı ele alır.

Seçtiğiniz sürümü yükleyin ve sayfanın doğru dosyayı ve boyutları kullandığını doğrulayın. Gelecekteki değişiklikler için orijinal fotoğrafları saklayın: indirilen PNG’nin içindeki fotoğrafları yeniden sıralayamazsınız.