Doğru web grafikleri, başka şekilde yumuşak bir siteyi markanız için çarpıcı ve güçlü bir iletişim kanalına dönüştürebilir. Güzel fotoğraflar duygusal bir ton ayarlayabilir veya sayfanızdaki metinle oluşturduğunuz bir tonu yükseltebilir. Restoran sitelerinde yemeklerin fotoğrafları veya kuaför web sitelerinin saç kesimi resimleri, potansiyel müşterilerinizin ürün ve hizmetleriniz hakkında fikir edinmesini kolaylaştırır. Ancak, web siteniz için doğru görüntüleri seçmek denklemin sadece bir parçasıdır. Bir görüntüyü çevrimiçi olarak kullanmak için doğru boyut, dosya formatı ve görüntü çözünürlüğünün yanı sıra farkında olmayabileceğiniz ek hususların seçilmesi gerekir. İster çevrimdışı pazarlama çabalarınızla daha önce kullandığınız bazı grafikleri yeniden tasarlayın, ister web sitenizde kullanmak istediğiniz yeni görüntüler varsa, takip etmeniz gereken birkaç web grafiği en iyi uygulaması vardır. Nerede resimlere ihtiyacınız var? Görüntüler çok güçlüdür, ancak kolayca kullanılabilirler. Fotoğrafları ve grafikleri yalnızca mantıklı olduğu yerde kullanmaya çalışın. Web grafiklerinizi , sitenizin her bir sayfasında sunulan içerikle alakalı tutun . Görsel bir açıklama veya gösteri, bir öğretici sunarken veya bir nesnenin ince ayrıntılarını göstermeniz gerektiğinde kitlenize yardımcı olduğunda bunları kullanın. Ancak, web sitenizin her sayfasında en az bir resminizin olması önemlidir . Belirli bir sayfadaki grafikler için doğal kullanımınız yoksa, okuyucunuzun gözünü en üste yaklaştırmak veya sayfadaki metni bölmek için bir görüntü kullanın. Tarayıcı penceresini arka plan olarak dolduran büyük bir fotoğraf kullanmak bugün çok popüler bir web tasarım trendidir ve doğru şekilde yapılırsa çok güçlü olabilir. Bu büyük arka planlar, bir sayfanın gövde alanı için gereken görüntü miktarını da sınırlayabilir. Jimdo harika arka plan özelliğimizle tam ekran kullanımını çok kolaylaştırıyor . Web sitenizi oluşturun Web grafikleriniz için doğru dosya biçimini kullanın Web'de kullanılan üç birincil dosya biçimi vardır: .jpg, .gif ve .png. Her birinin farklı artıları ve eksileri vardır. Başka dosya formatlarında resimleriniz varsa, bunları web sitenize yüklemeden önce bu üç formattan birine dönüştürmeniz gerekir. Bazı web sitesi oluşturma araçları otomatik olarak dosya formatlarını dönüştürür, ancak bunu kendi başınıza yapmak ve başlamak için doğru sürümü yüklemek en güvenlidir. .jpg Bu dosya biçimi fotoğraflar için optimize edilmiştir. Binlerce rengi çok yönetilebilir bir şekilde işler, çok makul bir dosya boyutuyla çok iyi görünümlü bir görüntü elde etmenizi sağlar. .Jpg dosyaları ( JPEG olarak da adlandırılır ) olarak dışa aktarmanıza veya kaydetmenize izin veren çoğu araç , görüntünün kalitesini dosya boyutuna göre dengeleyecek bir kalite ayarını değiştirmenize olanak tanır. JPEG Örnekleri Web için tüm fotoğrafları JPEG olarak kaydedin. Artefakt adı verilen küçük dikdörtgenlerden oluşan JPEG paraziti önlemek için kaliteyi yeterince yüksek ayarladığınızdan emin olun . En iyi görünen görüntüyü en düşük boyutta bulmak için her çıktı görüntüsü için bir deneme yanılma yöntemi kullanmanızı öneririm. Aşırı sıkıştırılmış bir .jpg dosyası, normalde aynı rengin daha büyük alanlarında, fotoğrafın renkleri içinde görünen farklı boyutlu renkli dikdörtgenlerle tanımlanır. Bu dosya biçimini, diğer seçeneklerde olduğu kadar iyi görünmeyecekleri için büyük düz renkler (birçok logo gibi) olan grafikler için kullanmaktan kaçının. .gif GIF , düz renkli grafikler için kullanılan daha eski biçimdir. 1987'de oluşturulan format, fıstık ezmesi Jif gibi telaffuz edilir. GIF'ler standart web grafikleri için gözden düşüyor, ancak tek bir dosyada birden çok kareyi kaydetme yetenekleri için hala popüler. Bu, pratik uygulama yerine eğlence değeri için daha fazla olmasına rağmen, web'de çok popüler olan animasyonlu .gif'lerin yapılmasına izin verir . GIF'ler katı renk alanlarını iyi sıkıştırır ve hatta bir rengi saydam olacak şekilde ayarlamanıza izin verir, bu da grafikleri renkli veya fotoğraflı bir arka plan üzerine yerleştirirken çok yardımcı olabilir. Gif örneği GIF'ler öncelikle bu günlerde yalnızca animasyon için kullanılır. Bir dosyayı bu biçimde kaydederken, dosyada istediğiniz renk sayısını 8 ile 256 arasında seçmeniz gerekebilir. Renkler ne kadar azsa, dosya o kadar küçük olur. Yine, özel durumunuz için doğru ayarı bulmak için deneme yanılma kullanılabilir. .png PNG dosyası bu gruptan blokta yeni çocuk. Animasyonlu olmayan durumlar için, .png dosyaları diğer tüm durumlarda GIF kullanımının neredeyse tamamen yerini almıştır. Ayrıca geniş renk alanları için mükemmeldir ve sadece saydamlığı desteklemekle kalmaz, aynı zamanda farklı şeffaflık düzeylerini de desteklerler. Bu, çok güçlüdür çünkü görüntünüzün arka planın gösterdiği yarı opak kısımlarına sahip olmanıza izin verir, ancak .gif ile çerez kesme saydamlığı hissinin tamamen aksine değil. PNG Örneği PNG'ler tamamen ve kısmen saydam alanlara sahip olabilir. Saydamlığın geleneksel sembolü gri ve beyaz bir dama tahtasıdır. Sağdaki logo sadece üç beyaz harf ve mavi bir arka plan üzerinde iki yarı saydam beyaz harf. Dosyaları PNG olarak kaydetmenin iki seçeneği vardır: 8 veya 24 bit. Yarı saydam görüntüler için, yalnızca bir avuç renkte bir şey yoksa, tüm düz grafik görüntüler için gerçekten önereceğim 24 bit'i kullanmalısınız. Bu durumlarda, görüntünün kalitesini etkilemeden küçük bir dosya boyutu kaydetmek için 8 bitlik sürümü seçebilirsiniz. Kaliteyi düşürmeden PNG'leri optimize edebilen çevrimiçi araçlar da vardır. TinyPNG gibi ücretsiz çevrimiçi araçları kullanarak kaliteden ödün vermeden dosya boyutunu önemli ölçüde azaltabilirsiniz . Görüntü dosyasının boyutuna ve çözünürlüğüne dikkat edin Bu iki terim oldukça yaygın ve biraz ilişkilidir. Dosya boyutu bir dosyanın, bu durumda bir görüntünün sabit diskte ne kadar yer kapladığını ifade eder. Web grafikleri için daha küçük dosya boyutları daha iyidir çünkü göründükleri web sitesinin daha hızlı yüklenmesine izin verirler. Bu, web'e daha yavaş bir internet bağlantısı, eski bir bilgisayar veya telefonlarından erişen birçok kişi için hala önemlidir. İşin püf noktası, dosya boyutu azaldıkça kalite de düşer. Kalite ve dosya boyutu arasında geçmişte hiç olmadığı kadar kolay olan en iyi orta yolu bulmak isteyeceksiniz. Dijital kamera veya telefonunuzla fotoğraf çektiğinizde, görüntüler oldukça büyük olabilir, genellikle birkaç megabayt olabilir. İdeal olarak, resimleriniz 1 MB'den büyük olmamalıdır, en küçük web grafikleri 100 kb veya daha azdır. Ve tam ekran arka plan gibi sadece çok büyük bir görüntü 1 MB'ye yakın bir şey olmalıdır. Peki dosya boyutunu nasıl azaltırsınız? Azaltılması çözünürlüğü büyük ölçüde ekranda görüntünün kalitesini düşürmeden dosya boyutunu azaltmak için tek yoldur. Çözünürlük, bir görüntünün ne kadar yoğun olduğunun bir ölçümüdür. DPI veya inç başına nokta cinsinden ölçülür. Matbaa dünyasından eski bir terimdir. Basılı görüntüler için, normalde 300 dpi'nin üzerinde ancak 1200 dpi'ye kadar çıkabilen çok yoğun grafikler istiyorsunuz. Bununla birlikte, çözünürlük hakkında anlaşılması gereken önemli şey, çoğu bilgisayar monitörünün yalnızca 72 dpi'de görüntülenmesidir. Bu, bundan daha yüksek herhangi bir çözünürlüğün görüntünün kalitesine hiçbir şey katmadığı, sadece dosya boyutunu artırdığı anlamına gelir. Böylece 300dpi görüntü ve aynı görüntünün 72dpi sürümü ekranda tam olarak aynı görünecek, ancak 300dpi olan görüntü dosya boyutunda dört kat daha büyük olacaktır. Photoshop yıllardır dünyadaki fiili görüntü düzenleyicisidir ve Adobe'nin “web için kaydet” adlı yerleşik bir özelliği vardır. Bu özellik, görüntünün boyutlarını değiştirmenize, çözünürlüğü 72 dpi olarak değiştirmenize ve dosyayı, farklı kalite hazır ayarları yerleşik olan üç kabul edilebilir web biçiminden birine kaydetmenize olanak tanır. Photoshop'un artık bu aracı kullanmanıza izin veren daha az pahalı sürümleri var, ancak resimlerinizi web sitenizde kullanmak için düzeltmenize, yeniden boyutlandırmanıza ve en uygun şekilde kaydetmenize olanak tanıyan Pixlr gibi ücretsiz alternatifler de var . Bazı web sitesi oluşturma araçları, sistemlerinde de temel düzenleme araçları sunar, ancak en iyi sonuçları elde etmek için bu amaç için özel olarak tasarlanmış araçları kullanarak web grafiklerinizi hazırlamanızı öneririm. Önemli bölümlere odaklanmak için bir görüntü kırpın Çoğu fotoğrafta çok fazla ekstra ve gereksiz alan var. Kırpma, etkiyi en üst düzeye çıkarmak için görüntünün bir kısmını kesme işlemidir. Bu, bir fotoğrafın konusunu daha iyi vurgulamak için fazladan arka planı kaldırmak olabilir veya konuyu resim çerçevesi içinde düzgün bir şekilde hizalayabilir. Birçok amatör fotoğraflarının konusunu kişi veya nesne, ölü merkez çerçeveye yerleştirme hatasını yapar. Bu çoğu insan için çekici değildir. Genellikle özneleri, özellikle insanların merkezden uzak olmasını tercih ederiz. Üçte iki kuralı İyi kırpma, gözleri görüntünün üçte iki çizgisinin etrafına yerleştirir. İnsanların fotoğraflarını kırparken iyi bir kural, “ üçte bir kuralı ” adı verilen ünlü bir estetik araçtır . Görüntünüzün genişliği boyunca eşit olarak dağıtılmış iki yatay çizginin üst üste bindirilmesini hayal ediyorsanız, görüntüyü üçe bölünmüş olarak görüntüleyebilirsiniz. Kişinin gözleri, yolun 2 / 3'ü olacak iki çizginin üstünde olmalıdır. Hatalı kırpma örneği Kötü kırpma izleyiciye biraz yanlış görünüyor . Konu tamamen solda ortalanmamalıdır. Sağdaki fotoğraf burun odasının olmaması nedeniyle garip görünüyor. Ayrıca, bir kişinin burnunun önündeki boşluk miktarına ( burun odası veya kurşun odası ) ve bir kişinin başının üstündeki boşluğa ( kafa odası ) dikkat edin. Birisi her iki tarafa bakıyorsa, izleyicinin nesnenin neye baktığının bir kısmını görebilmesi için biraz daha fazla burun odası (burun ve görüntünün kenarı arasındaki boşluk) koymak isteyeceksiniz. Bu, bir görüntünün öznesi açıkça hareket halinde olan bir nesne - bir yarış arabası veya bir jet olduğunda da devreye girer. Etkisini en üst düzeye çıkarmak için resimlerinizi yeniden boyutlandırın veya kırpın Çektiğiniz veya aldığınız çoğu dijital fotoğraf, web sitenizde kullanmanız gerekenden çok daha büyük olacaktır. Onları kırptıktan sonra, büyük olasılıkla web sitenize uygun hale getirmek için yeniden boyutlandırmanız gerekecektir. Çoğu web sitesi oluşturucusu, sistemlerindeki bir resmi yeniden boyutlandırmanıza olanak tanır, ancak resminizi web sayfasında olmasını istediğiniz tam boyutta hazırlayarak her zaman daha iyi sonuçlar elde edersiniz. Bununla birlikte, birçok insanın anlamadığı önemli bir gerçek , her zaman bir görüntüyü daha küçük hale getirip kaliteyi koruyabilmenizdir, ancak asla daha büyük yapamazsınız . Bir görüntüyü olduğundan daha büyük yapmaya çalışmak, temel olarak görüntü düzenleme yazılımınızın pikselleri “icat etmesini” gerektirir. Bu, bulanık kenarlara ve pikselli görüntülere neden olur. Bunu göz önünde bulundurarak, görüntünüz için tam olarak hangi boyuta ihtiyacınız olacağını bilmiyorsanız, biraz fazla büyük olmanın yan tarafında hata. Web sitenizin oluşturucusunun içinde her zaman daha küçük bir görüntü oluşturabilir ve kaliteyi koruyabilirsiniz. Not: Daha sonra değişiklik yapmanız gerektiğinde her zaman tam boyutlu düzenlenmemiş görüntünün bir kopyasını sakladığınızdan emin olun. Web sitenizi oluşturun Bir resmi web sitenize koymadan önce yasal olarak kullanabileceğinizden emin olun İnternette görüntü bulmak çok kolay olsa da, bu görüntüleri yasal olarak, özellikle de kar amaçlı bir iş web sitesinde kullanmanıza izin verildiği anlamına gelmez. Standart bir Google görsel araması kullanmak veya web'deki herhangi bir rastgele kaynaktan görüntüler indirmek ve kullanmak, sizi kolayca yasal ve finansal sorunlara sokabilir . Kendinize ait iyi bir orijinal fotoğrafınız yoksa, web'de bulduğunuz görüntüleri “ödünç almak” için alternatif olarak bazı stok fotoğraflarını almayı düşünebilirsiniz . Bazı görüntülerin ticari kullanım sınırlamaları vardır, bu nedenle lütfen kullanmayı planladığınız herhangi bir görüntünün lisansını okuduğunuzdan emin olun. Ayrıca özellikle hizmet endüstrileri veya daha genel işletme web siteleri için ortak klişe stok fotoğraflarını görmezden gelmenizi şiddetle tavsiye ederim. Hepimiz sayısız kez takım elbiseli erkeklerle el sıkışan airbrushed işkadını gördük. Web siteniz için ücretsiz veya düşük maliyetli resimler bulmak için birçok harika seçenek var . Şahsen kullandığım yerlerin listesi: Pixabay Unsplash Gratisography PicJumbo Barn Görüntüleri Her Stok Fotoğraf Fotoğraf Pimi Yeni eski stok Creative Commons Arama Google Gelişmiş Arama ("kullanım hakları" filtresini kullanın) Sonuç Çarpıcı fotoğraflar ve şık grafikler, web sitenizi rakiplerinizden ayırmanıza ve kitleniz için çok daha unutulmaz hale getirmenize yardımcı olacaktır. Tasarımınızın görsel yönlerinden maksimum etkiyi elde etmek için, doğru grafik, resim boyutu ve çözünürlüğü seçerek web grafiklerinizi hazırlamak önemlidir. Sitenizin harika görünmesini ve yine de hızlı yüklenmesini sağlamak istiyorsunuz. Duygusal yumruklarını en üst düzeye çıkarmak için resimlerinizi kırpmayı ve yeniden boyutlandırmayı unutmayın. Web siteleri için resimler hakkında sorularınız mı var? Yorumlarda bana bildirin veya ipuçlarınızı paylaşın!
