Daha İyi Görünen Web Siteleri için Retina Görüntü Varlıkları Nasıl Oluşturulur

Yeni web sitenizi mükemmel hale getirmek için çok zaman harcadınız, peki onu iPhone'unuzda görüntülediğinizde neden bu kadar bulanık görünüyor? Güzel, yüksek kaliteli resimler kullandığınızdan emin oldunuz, ancak bunlar hiç düzgün görüntülenmiyor gibi görünüyor. Panik yapın!

Pek çok kişi, daha yeni aygıtların, özellikle de Apple'ın aygıtlarının, görüntülerin nasıl görüntüleneceğini etkileyen gelişmiş görüntüleme teknolojisi kullandığını bilmiyor. Neyse ki, web sitenizin iPhone'unuz gibi cihazlarda mükemmel görünmesini sağlamak için resimlerinizin optimize edildiğinden emin olmak için kullanabileceğiniz bazı hileler var.

Bu makale retina ekranı konusunu ve web sitenizin resimlerini nasıl etkilediğini tanıtacak, ardından retina ekranlarında iyi görüntülenecek resim varlıklarını nasıl oluşturacağınızı gösterecektir.

Retina Ekran Görüntüleri Açıklaması

Cihaz ekranlarının kalitesi son birkaç yılda gelişmeye devam etti ve özellikle Apple ekranlarını son derece net ve görüntülenebilir hale getirmek için çalışıyor – aslında 'Retina Ekran' Apple'ın ekranlarını tanımlamak için kullandığı bir marka adıdır. daha yeni cihazlar.

Retina ekranlar, çıplak gözle görülebilen pikseller olmadan metin ve görüntüleri mümkün olduğunca keskin görüntülemeyi amaçlar. Tasarımcılar için zorluk, retina ekranların bir standart olmamasıdır – cihazın ekranının boyutuna (örneğin, bir tablete kıyasla bir saat ekranı) ve tipik bir kullanıcının ekrana ne kadar yakın olacağına bağlı olarak değişir.

Retina ekranlardan bahsederken, bir ekranın sabit bir mesafeye sığdırabileceği piksel sayısı olan piksel yoğunluğunu düşünmemiz gerekir. Bu, bir cihazın tüm yüksekliği ve genişliği boyunca piksel sayısı olan çözünürlükle aynı şey değildir. Daha büyük bir ekranla (iPad gibi) aynı çözünürlüğe sahip daha küçük bir ekran (iPhone gibi) daha yüksek piksel yoğunluğuna sahip olacaktır.

Ekranın fiziksel genişliğini yatay olarak görüntülenen piksel sayısına bölmek bize inç başına piksel sayısını verir (ppi, inç başına nokta için dpi olarak da adlandırılır). 'Yüksek DPI', inç başına 200 pikselin üzerinde olan herhangi bir cihazı ifade etmek için kullanılır. Bu, Apple'ın tüm retina görüntüleme cihazlarını ve diğer üreticilerin bazı cihazlarını içerir. Daha ayrıntılı bir açıklama için Tasarımcının DPI Kılavuzundaki bu makaleye bakın.

Geleneksel olarak, web grafikleri 72 dpi'de optimize edildi. Herhangi bir yüksek DPI cihazında (özellikle bir retina ekranında) görüntülenen bu yoğunluktaki bir görüntü iki yoldan biriyle görüntülenecektir:

1. Cihazın DPI'sında gösteriliyorsa, boyutun bir kısmı olarak.
2. Ekstra pikseller tahmin edilmiş (enterpolasyonlu) ve görüntünün kalitesini düşürecek şekilde doldurulmuş orijinal boyutlarında gösterilir.

Bu, retina ekranlı cihazlarda en kaliteli görüntü gösterimi için daha yüksek çözünürlüklü görüntülerle çalışmanız gerektiği anlamına gelir. Bu, görüntünün bu yeni ekranlar için uygun bir piksel yoğunluğunda görüntülenebilmesini sağlar. Bunu Photoshop'unuzda nasıl yapabileceğinize bir göz atalım.

Retina Ekran Görüntüleri Oluşturmak için Photoshop Nasıl Kullanılır

Görüntülerle iki veya dört kat çözünürlükte çalışmak, her türlü ince ayrıntıyı görebilmek için yakınlaştırmanız gerekebileceği anlamına gelir, ancak aşırı büyük görüntü dosyaları performans sorunları ve dosya depolama zorlukları yaratabilir.

Çoğu tasarımcı için çözüm, Photoshop'un comps özelliğini kullanarak gerektiğinde açıp kapatarak birden çok katman ve grup oluşturmak veya orijinal çözünürlükte çalışmak ve ihtiyaç duydukları boyutları dışa aktarmak (retinize gibi bir eylem kullanarak) olmuştur. o).

Bu yöntemlerin her ikisindeki zorluk, aynı anda birden fazla görüntüyü görememenizdir. Görüntülerdeki farklılıkları gerekli boyutlarda görmeniz gerekiyorsa, bunlar arasında geçiş yapmanız veya dışa aktarmanız ve ardından yeniden işlemeniz gerekir.

Neyse ki biz Photoshop severler için Adobe, birden fazla görüntü oluşturmayı daha da kolaylaştıran bir işlevsellik ekledi. Artık çalışma yüzeyi özelliğini kullanarak birden çok tuvali yan yana oluşturabilir ve Oluştur'u kullanarak birden çok görüntü boyutu oluşturabilirsiniz. Bunun retina ekranlar için görüntü oluşturmak için nasıl çalıştığını görelim.

1. İlk Çalışma Yüzeyinizi Oluşturun

Photoshop CC 2015'te tanıtılan yeni Çalışma Yüzeyi aracı, Taşıma aracının arkasına gizlenmiş olarak bulunabilir. Menüdeki araca tıklayabilir veya Taşı ve Çalışma Yüzeyi arasında geçiş yapmak için Shift+V tuşlarını kullanabilirsiniz:

Çalışma yüzeyi oluşturmak için bir alanı tıklayıp sürükleyin. Yeni çalışma yüzeyi, Çalışma Yüzeyi 1 varsayılan adıyla Katmanlar panelinde görüntülenecektir.

2. Çalışma Yüzeyinizi Ayarlayın

İhtiyacınız olan herhangi bir katmanı çalışma yüzeyinize ekleyebilirsiniz ve katman gruplarına benzer şekilde iç içe yerleşerek uygun bir katman yapısı oluşturmanıza olanak tanır. Bir sonraki adıma geçmeden önce ihtiyaç duyduğunuz şekilde konumlandırılmaları için şekiller ve tür gibi çeşitli varlıklarınızı eklemenizi öneririz.

3. Çalışma Yüzeyinizi Kopyalayın

İlk çalışma yüzeyinizi ihtiyaçlarınıza göre ayarladıktan sonra bağlamsal menüyü kullanarak çoğaltabilirsiniz. Katmanlar panelinde Çalışma Yüzeyi 1'e sağ tıklayın ve Çalışma Yüzeyini Çoğalt öğesini seçin. Bu, dahil edilen tüm varlıklarla tamamen aynı katman yapısını içeren aynı boyut ve konumda başka bir çalışma yüzeyi oluşturur:

4. Çalışma Yüzeylerinizi Konumlandırın

Çalışma yüzeylerini kullanmanın en büyük avantajı, tüm resimlerinizi aynı anda görebilmenizdir. Bunu yapmak için çalışma yüzeylerinizi gerektiği gibi konumlandırın. Bir çalışma yüzeyini taşımanın birkaç yolu vardır:

1. Çalışma yüzeyinin sol üst köşesi için X ve Y koordinatlarını girmek için bir çalışma yüzeyi seçildiğinde görüntülenen Özellikler panelini kullanın.
2. Seçili çalışma yüzeyini Photoshop içinde herhangi bir konuma sürükleyin. Çalışma yüzeyi akıllı kılavuz etkindir, böylece birden çok çalışma yüzeyini otomatik olarak hizalayabilirsiniz ve konumları önceki boşluğa kilitlenir.
3. Seçili bir çalışma yüzeyini taşımak için klavye ok tuşlarınızı kullanın. Ok tuşu tek başına tahtayı bir piksel sürüklerken, Shift+Ok tuşlarını basılı tutmak onu on piksel hareket ettirir.

5. Çalışma Yüzeylerinizi Yeniden Boyutlandırın (Gerekirse)

Çalışma yüzeylerinizin boyutunu ayarlamanız gerekirse, yine birden çok seçeneğiniz vardır:

1. Bir çalışma yüzeyi seçtiğinizde görünen tutamaçları kullanarak bunları yeniden boyutlandırın.
2. Önceden ayarlanmış boyutları seçmek, özel genişlikler veya yükseklikler ayarlamak veya dikey ve yatay yön arasında geçiş yapmak için Dosya menüsünün hemen altındaki Seçenekler panelini kullanın.
3. Boyutu değiştirmek ve önceden ayarlanmış boyutlara erişmek için bir çalışma yüzeyi seçildiğinde görüntülenen Özellikler panelini kullanın.

6. Sanatınızı Yaratın

Artık çalışma yüzeylerinizle çalışabilir, görüntü varlıklarını değiştirebilir ve gerektiğinde değişiklik yapabilirsiniz. Orijinal kurulumunuzun iyi gittiğini varsayarsak, artık tüm varlıkların doğru yerde olduğu mükemmel piksel görüntülerine sahip olacaksınız.

7. Oluşturma Aracını Ayarlayın

Generate , özel bir adlandırma sözdizimi kullanarak çalışma yüzeylerini, katmanları veya grupları dışa aktarmanıza olanak tanır. Web için Kaydet kısayolu görevi görür. PSD'niz için Oluştur'un açık olduğundan emin olmak için Dosya > Oluştur > Görüntü Varlıkları'na gidin:

8. Çalışma Yüzeylerinizi Yeniden Adlandırın

Katman grubu veya bu durumda çalışma yüzeyiniz adına ayarladığınız seçeneklere dayalı olarak çalışırken görüntü varlıklarını kaydederek çalışmalar oluşturun . Ayarlayabileceğiniz birkaç seçenek vardır:

• Dosya formatı. İlgili dosyayı kaydetmek için bir uzantı ( -opt.jpg , .gif veya .png gibi) ekleyin – örneğin, header-main.png. Görüntü varlıkları, PSD dosyasıyla aynı klasöre kaydedilir, ancak bir -assets son eki bulunur.
• Dosya Sıkıştırması. Uzantıdan sonra, kullanılan sıkıştırma düzeyini gösteren bir rakam ekleyebilirsiniz. opt.jpg için yüzdeleri ve için kullanabilirsiniz. png , ilgili bit biçimleri için 8 , 24 veya 32 kullanır – örneğin, header-main.png8.
• Çıkış ölçeği. Çıktının ölçeğini, görüntü adından önce yüzde veya piksel (genişlik-yükseklik) ekleyerek ayarlayabilirsiniz (örn. %100 header-main.png8 ).
• Birden fazla resim. Görüntü adlarını ayırmak için virgül veya artı işareti kullanarak aynı çalışma yüzeyinden birden çok görüntüyü dışa aktarabilirsiniz. Bu nedenle, her görüntü adı benzersiz olduğu sürece her görüntünün kendi seçenekleri olabilir – örneğin, %100 header-main.png8, %200 header-main.png8 .

Bu seçenekleri birleştirmek, çalışma yüzeylerinizden tutarlı bir şekilde karmaşık görüntü varlıkları oluşturmanıza olanak tanır:

Tüm çalışma yüzeyleriniz için standart görüntüler gerekiyorsa, Oluştur aracı her birine uygulanacak varsayılan bir ayar oluşturmanıza olanak tanır. Bu ayarı oluşturmak için belgenizin üstüne aşağıdaki seçeneklerle boş bir katman ekleyin:

• Varsayılan anahtar kelime: Generate'in bunu varsayılan olarak kullanacağını bilmesi için ad bununla başlamalıdır.
• Çıktı ölçeği: Daha önce olduğu gibi, çıktının ölçeğini bir yüzde veya piksel (genişlik ve yükseklik) ile ayarlayın.
• Klasör/son ek: Görüntülerin kaydedileceği klasör adını ve dosya adlarına eklenecek bir son eki ayarlayın.

Birden fazla seçenek ekleyerek, retina ekranlar için ihtiyaç duyduğunuz görüntüleri otomatik olarak oluşturabilirsiniz – örneğin, varsayılan %100 bitiş/@1x, %200 bitiş/@2x, %300 bitiş/@3x. Ardından, varsayılan seçeneği kullanarak dışa aktarmak istediğiniz herhangi bir panoya uzantı ekleyebilirsiniz.

Sketch gibi diğer tasarım araçlarını kullanırsanız, bunların kendi dışa aktarma mekanizmaları vardır – ancak bir Photoshop hayranıysanız, bu iş akışı, retina ekranlar için gereken birden çok görüntüyü oluşturmanız için gereken süreyi önemli ölçüde azaltır.

Retina Ekran Görüntü Varlıklarınızı Nasıl Optimize Edebilirsiniz?

Web siteniz için resim oluştururken dosya boyutu her zaman önemli bir husustur. Resimlerin ziyaretçinizin tarayıcılarına yüklenmesi gerekir, bu nedenle dosya boyutları ne kadar büyükse siteniz o kadar yavaş yüklenir. Yüklenmesi sonsuza kadar süren güzel bir web sitesi, ziyaretçileriniz beklemek istemeyecekleri için büyük olasılıkla görülmeyecektir.

Dosyalarınızı Photoshop'ta kaydederken ilgili seçenekleri kullandığınızdan emin olarak web sitenizin resimlerini optimize etmeye başlayabilirsiniz. Yukarıdaki iş akışında ele aldığımız gibi, resimlerinizi JPEG veya PNG dosyaları olarak kaydedeceksiniz . Dosya boyutunu küçültmek için sıkıştırma kullandığından, JPEG formatı çok renkli fotoğraflar için daha iyidir. PNG formatı en iyi şekilde ekran görüntüleri ve simgeler ve düğmeler gibi tasarım görüntüleri için çalışır, ancak dosya boyutlarının daha yüksek olması için kayıpsız sıkıştırma kullanır.

WordPress ayrıca, WordPress sitenize resim yüklerken birden fazla resim boyutu oluşturarak optimizasyon konusunda size bazı yardımlar sunar. Bu, uygun boyutta bir resim kullandığınızdan emin olmanıza yardımcı olur – örneğin, küçük resimler birden fazla gönderi listesinde kullanılacaktır. Ek olarak, herhangi bir görüntüyü yüklenirken optimize etmeye yardımcı olacak görüntü optimizasyon eklentileri vardır.

Çözüm

Web siteniz için harika, yüksek çözünürlüklü görüntüler seçmek çok iyi bir şey, ancak bunları yüklemeden önce doğru şekilde hazırlamadıysanız, daha yeni retina görüntüleme cihazlarında görüntülendiğinde beklenmedik şekilde pikselli görünebilirler.

Photoshop'ta retina ekran görüntüleri oluşturmak çok kolay – hadi adımları tekrarlayalım:

1. Çalışma yüzeylerinizi, kuruluma özen göstererek, çoğaltarak ve doğru şekilde konumlandırarak oluşturun.
2. Söz konusu görüntüleri oluşturmadan önce gerekirse çalışma yüzeylerinizi yeniden boyutlandırın.
3. Görüntülerinizi dışa aktarmaya yardımcı olması için Oluştur aracını kurun.
4. Çalışma yüzeylerinizi, gerekirse varsayılan seçenekler olarak ayarlayarak Generate içinde yeniden adlandırın.

Yukarıda paylaşılan ipuçları, daha yeni cihaz ekranlarında görüntülenmek üzere optimize edilmiş görüntülerin nasıl oluşturulacağını anlamanıza yardımcı olur ve tüm ekranlarda beklediğiniz gibi görünen güzel görüntüler oluşturmanıza olanak tanır.

Retina ekran görüntü varlıklarıyla ç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ı duymayı çok isteriz!

Makale küçük resmi, Blablo101 / Drawn Keeper / Shutterstock.com