Daha iyi bir web sitesi ekranı için retina ekran görüntü varlıkları nasıl yapılır
Yeni web sitenizi mükemmel hale getirmek için çok zaman harcadınız, o zaman neden iPhone’da gördüğünüzde bu kadar bulanık görünüyor? Güzel bir yüksek kaliteli görüntü kullandığınızdan emin olursunuz, ancak doğru görüntülenmez. Panik işareti! Birçok kişi, daha yeni cihazların – özellikle Apple’dan kaynaklananlar – görüntünün görüntülenme şeklini etkileyen sofistike ekran teknolojisi kullandığını fark etmez. Neyse ki, web sitenizin iPhone’unuz gibi cihazlarda mükemmel görünmesini sağlamak için görüntünüzün optimize edildiğinden emin olmak için kullanabileceğiniz bazı püf noktaları vardır.
Bu makale, retina ekranının konusunu ve web sitesi görüntüsünü nasıl etkilediğini tanıtacak, daha sonra Retina ekranında düzgün görüntülenecek görüntü varlıklarının nasıl yapılacağını gösterecektir. Retina ekran görüntüsü, cihaz ekranı ile açıklandı Son birkaç yıldır kalitesini artırmaya devam ediyor ve özellikle Apple ekranlarını çok netleştirmeye çalıştı ve görülebilir – aslında ‘Retina Display’ Apple’ın marka adıdır cihazlarının ekranını tanımlamak için kullanılır. daha yeni cihaz. Retina ekranı, çıplak gözle görülen pikseller olmadan metin ve görüntüleri mümkün olduğunca keskin görüntülemeyi amaçlamaktadır. Tasarımcılar için zorluk, retina ekranının standart olmamasıdır – bu, cihazın ekranının boyutuna (örneğin tabletlere kıyasla bir saat ekranı) ve kullanıcının ekranla ne kadar yakın olduğuna bağlı olarak değişir.
Retina ekranı hakkında konuşurken, ekran tarafından belirli bir mesafede yerleştirilebilen piksel sayısı olan piksel yoğunluğunu düşünmeliyiz. Bu, cihazın tüm yüksekliğindeki ve genişliğindeki piksel sayısı olan çözünürlükle aynı değildir. Daha büyük ekranla (iPad gibi) aynı çözünürlüğe sahip daha küçük ekranlar (iPhone gibi) daha büyük bir piksel yoğunluğuna sahip olacaktır. Ekranın fiziksel genişliğini yatay olarak görüntülenen piksel sayısıyla bölmek bize inç başına piksel verir (PPI, inç başına nokta için de olarak da adlandırılır). ‘Yüksek DPI’, inç başına 200 pikselden fazla olan herhangi bir cihaza atıfta bulunmak için kullanılır. Bu, Apple’dan gelen tüm retina ekran cihazlarını ve diğer üreticilerden birkaç cihaz içerir. Daha derin bir açıklama için, DPI için tasarımcı kılavuzundaki bu makaleye bakın. Geleneksel olarak web grafikleri 72DPI’da optimize edilmiştir. Yüksek DPI cihazlarında (özellikle retina ekranları) gösterilen yoğunluklu görüntüler iki yoldan biriyle görüntülenecektir:
DPI cihazında görüntülenirse boyutun küçük bir parçası olarak.
Orijinal boyutta ekstra ekstra piksel (enterpolasyon) ile görüntülenir ve görüntü kalitesini azaltmada doldurulur.
Retina ekranı için optimize edilmeyen görüntüler soldaki görüntü gibi pikselasyon gösterilecektir.
Bir retina ekran görüntüsü yapmak için Photoshop nasıl kullanılır İki veya dört kez çözünürlüğe sahip bir görüntü ile çalışır, bu da ince ayrıntıları görmek için büyütmeniz gerekebileceği anlamına gelir, ancak çok büyük bir görüntü dosyası performans sorunlarına ve dosya depolamaya neden olabilir zorluklar. Çoğu tasarımcı için çözüm, birkaç katman ve grup oluşturmak, Photoshop’un Comps özelliğini kullanarak gerektiği gibi açmak ve kapatmak veya orijinal çözünürlük üzerinde çalışmak ve ihtiyaç duydukları boyutu dışa aktarmaktır (Retinize gibi eylemler kullanarak). Bu iki yöntemle ilgili zorluk, aynı anda birçok görüntü görememenizdir. Gerekli boyuttaki görüntülerdeki farka bakmanız gerekiyorsa, bunlar arasında geçiş yapmanız veya dışa aktarmanız ve daha sonra yeniden yapmanız gerekir. Neyse ki bizim için Photoshop severler için Adobe, birçok görüntüyü kolaylaştıran işlevsellik eklemiştir. Artık sanat tahtası özelliğini kullanarak bazı tuvalleri yan yana yapabilirsiniz ve oluşturma kullanarak birkaç görüntü boyutu yapabilirsiniz. Retina ekranı için görüntü yapmak için bunun nasıl çalıştığını görelim. 1. İlk Artboard’unuzu Oluşturun Photoshop CC 2015’te tanıtılan yeni bir sanat tahtası aracı, hareketin arkasında gizli bulunabilir. Menüdeki araçlara tıklayabilir veya taşıma ve sanat tahtası arasında geçiş yapmak için Shift+V kullanabilirsiniz:
Artboard oluşturmak için alanı tıklayın ve sürükleyin. Yeni sanat tahtası, varsayılan Artboard 1 adıyla katmanlar panelinde görüntülenecektir. 2. Sanat kartınızı hazırlayın, ihtiyacınız olan herhangi bir katmanı sanat tahtanıza ekleyebilirsiniz ve katman grubuna benzer şekilde yuva yaparlar – uygun bir katman yapısı oluşturmanıza izin verir. Bir sonraki adıma devam etmeden önce ihtiyaçlarınıza göre konumlandırılacak şekilde şekil ve tip gibi çeşitli varlıklar eklemenizi öneririz. 3. İlk sanat tahtanız ihtiyaçlarınıza göre ayarlandıktan sonra, içerikli bir menü kullanarak çoğaltabilirsiniz. Sağ -katmanlar panelinde Artboard 1’e tıklayın ve yinelenen sanat tahtasını seçin. Bu, tüm varlıklarla aynı katman yapısını içeren aynı boyutta ve konuma sahip başka bir sanat tahtası yapar: Artboard’unuzu çoğaltmak size piksel düzeninin mükemmel bir kopyasını verir.
4. Artboard’ları kullanarak sanat tahtanızın büyük bir avantaj olduğu konumu, tüm resimlerinizi aynı anda görebilmektir. Bunu yapmak için, sanat tahtanızı gerektiği gibi konumlandırmanız yeterlidir. Artboard’u hareket ettirmenin birkaç yolu vardır: Sanat tahtası, sanat tahtasının sol üst köşesi için X ve Y koordinatlarını girmek için seçildiğinde görüntülenen özellikler panelini kullanın. Seçilen sanat tahtasını Photoshop’taki herhangi bir konuma sürükleyin. Artboard, etkinleştirilen akıllı bir kılavuzdur, böylece birkaç sanat sahasını otomatik olarak hizalayabilirsiniz ve konumu önceki mesafeye kilitlenir.
Seçilen sanat tahtasını hareket ettirmek için klavye ok düğmenizi kullanın. Ok düğmesinin kendisi bir pikselin bir kartını iterken, Shift+oku tutarak on piksel kadar hareket ettirir. Sanat tahtası boyutunuzu değiştirin (gerekirse) Sanat kartınızın boyutunu ayarlamanız gerekiyorsa, birkaç seçeneğiniz daha var:
Artboard’u seçtiğinizde görünen tutamaç kullanarak boyutu değiştirin.
Prassice boyutunu seçmek, özelliğin genişliğini veya yüksekliğini ayarlamak veya portrelerin ve manzaraların yönü arasında geçmek için dosya menüsünün hemen altındaki seçenek panelini kullanın.
Sanat tahtası boyutunu değiştirmek ve önceden ayarlanmış boyuta erişmek için seçildiğinde görüntülenen özellikler panelini kullanın.
Özellikler sekmesini kullanarak sanat tahtanızın ön ayarının boyutunu seçebilirsiniz.
6. Sanatınızı şimdi sanat tahtanızla çalışabileceğiniz, görüntü varlıklarını değiştirebileceğiniz ve gerektiğinde değişiklik yapabileceğiniz. İlk ayarlarınızın iyi gittiğini varsayarsak, artık doğru yerde tüm varlıklara sahip mükemmel bir piksel görüntüsünüz olacak.
7. Aracı oluşturmak için aracı hazırlayın, özel adlandırma sözdizimi kullanan eserleri, katmanları veya grupları dışa aktarmanıza olanak tanır. Bu, web için bir depolama kısayolu görevi görür. PSD’niz için oluşturun etkinleştirilmesini sağlamak için Dosya> Oluştur> Görüntü Varlıkları:
8. Grup katmanı adına ayarladığınız seçeneklere göre veya bu durumda sanat tahtanızda çalışırken, görüntü varlıklarını saklayarak çalışmayı ürettiğiniz sanat tahtasının adını değiştirin. Belirleyebileceğiniz birkaç seçenek var:
Çıktı ölçeği. Görüntünün adından önce bir yüzde veya piksel (yüksekliğe göre genişlik) ekleyerek çıkış ölçeğini ayarlayabilirsiniz (örn.% 100 başlık-main.png8).
Bazı fotoğraflar. Görüntünün adını ayırmak için bir virgül veya artı işareti kullanarak aynı sanat tahtasından bazı görüntüleri dışa aktarabilirsiniz. Böylece, her görüntünün her benzersiz görüntü adı için kendi seçenekleri olabilir, örneğin% 100 başlık-main.png8,% 200 header-main.png8. Bu seçeneği birleştirmek, sanat tahtanızdan sürekli olarak karmaşık görüntü varlıkları yapmanızı sağlar:
Tüm sanat kutularınız için standart bir görüntü gerekiyorsa, oluşturma aracı her birine uygulanacak varsayılan ayarları yapmanızı sağlar. Bu ayarı yapmak için, aşağıdaki seçeneklerle belgenizin üst kısmına boş katmanı ekleyin:
Anahtar Kelimeler Varsayılan: Varsayılan olarak kullanmak için tofu üretmek için ad bununla başlamalıdır.
Çıktı Ölçeği: Daha önce olduğu gibi, çıkış ölçeğini yüzde veya piksel (yüksekliğe göre genişlik) ile ayarlayın.
Klasör/Sonek: Görüntünün kaydedilmesi gereken klasörün adını ve dosya adına eklenecek soneki ayarlayın.
Birkaç seçenek ekleyerek, retina ekranı için ihtiyacınız olan görüntüyü otomatik olarak oluşturabilirsiniz – örneğin, varsayılan% 100 uç/@1x,% 200 End/@2x,% 300 End/@3x. Daha sonra varsayılan seçeneği kullanarak dışa aktarmak istediğiniz tahtaya uzantılar ekleyebilirsiniz. Eskizler gibi diğer tasarım araçlarını kullanıyorsanız, kendi dışa aktarma mekanizmaları var – ancak bir Photoshop fanıysanız, bu iş akışı, retina ekranı için gerekli görüntüleri yapmak için ihtiyacınız olan süreyi büyük ölçüde kesecektir. Retina görüntüleme görüntüsünüz nasıl optimize edilir. Web siteniz için resim oluştururken her zaman ana husustur. Görüntü ziyaretçinizin tarayıcısına yüklenmelidir, böylece dosya boyutu ne kadar büyük olursa, siteniz o kadar yavaş yüklenir. Beklemek istemedikleri için ziyaretçilerinizin görülmemesi olasılığını yüklemek için uzun zaman süren güzel bir web sitesi. Dosyayı Photoshop’a kaydederken ilgili seçeneği kullandığınızdan emin olarak web sitesi görüntüsünüzü optimize etmeye başlayabilirsiniz. Yukarıdaki iş akışında tartıştığımız gibi, görüntünüzü bir JPEG veya PNG dosyası olarak kaydedeceksiniz. JPEG formatı, dosya boyutunu azaltmak için sıkıştırma kullandığından birçok renkte fotoğraflar için daha iyidir. PNG biçimi, simgeler ve düğmeler gibi ekran görüntüleri ve tasarım çizimleri için en iyi işlev görür, ancak dosya boyutunun daha yüksek olması için kayıpsız sıkıştırma kullanır. WordPress ayrıca, WordPress sitenize resim yüklerken birkaç resim yaparak optimize etme konusunda biraz yardım sunar. Bu, uygun boyutta görüntüleri kullanmanıza yardımcı olur – örneğin, küçük resim birkaç yayın listesinde kullanılacaktır. Ayrıca, yüklendiğinde herhangi bir görüntünün optimize edilmesine yardımcı olacak bir eklenti optimize eden bir eklenti vardır. Bu sonuç, web siteniz için şaşırtıcı yüksek çözünürlüklü görüntüleri çok iyi seçer, ancak yüklemeden önce doğru bir şekilde hazırlamadıysanız, daha yeni bir retina ekran cihazında görüntülendiğinde görüntünün beklenmedik olduğu görülebilir. Photoshop’ta bir retina ekran görüntüsü yapmak çok kolaydır-Adımlar: Artboard’unuzu yapın, yönetmeye, çoğaltmaya ve doğru şekilde konumlandırmaya dikkat edin.
Söz konusu görüntüyü oluşturmadan önce gerekirse sanat kartınızın boyutunu değiştirin.
Görüntülerinizi dışa aktarmaya yardımcı olmak için aracı üretecek şekilde hazırlayın.
Gerekirse varsayılan bir seçenek olarak ayarlayın.
Yukarıda paylaşılan ipuçları, daha yeni bir cihaz ekranında görüntülenecek optimize edilmiş bir görüntünün nasıl yapılacağını anlamanıza yardımcı olacak ve tüm ekranlarda beklediğiniz gibi görünen güzel görüntüler yapmanıza izin verecektir. Bir retina ekran görüntü varlığı ile çalışma deneyiminiz varsa, aşağıdaki yorumlar bölümüne abone olarak bunları oluşturmak ve optimize etmek için ipuçlarınızı ve püf noktalarınızı duymaktan mutluluk duyarız! Makale Küçük Resim Blablo101 / Çizilmiş Keeper / Shutterstock.com
