Adobe Muse'u kullanarak yüksek çözünürlüklü web siteleri oluşturma

Adobe Muse CC 2014.3 Sürümünde Geliştirilen Özellikler | Şubat 2015

Adobe Muse şimdi Windows çalıştıran HiDPI ekranları destekliyor. Bir Windows HiDPI donanımı kullanıyorsanız Adobe Muse arabiriminin çok daha net göründüğünü fark edeceksiniz.

Açılımı high dots per inch olan HiDPI, yüksek piksel yoğunluğu olan veya basitçe yüksek çözünürlüklü ekranlar için kullanılan bir terimdir. Piksel yoğunluğu yüksek olan HiDPI ekranlar, metin ve grafikleri standart ekranlara göre daha ayrıntılı gösterir. Örneğin, iPhone, iPad, bazı Windows cihazları, iPod touch ve daha pek çok Apple aygıtında bulunan Retina Ekran yüksek çözünürlüklü metin ve grafikleri görüntüleyebilir.

Adobe Muse ile oluşturulan web tasarımlarında, Apple Retina ekranlar gibi yüksek çözünürlüklü (HiDPI) ekranlar ile sağlanan görüntü kalitesinden tam anlamıyla yararlanılabilir.

Muse'da HiDPI'dan yararlanmak gayet kolaydır:

• Site çözünürlük ayarını HiDPI olarak değiştirin
• Sitede görüntülenecek olandan en az iki kat (2x) daha büyük görüntüler oluşturun

Bir HiDPI sitesini Muse'dan yüklediğinizde veya dışa aktardığınızda oluşturulan kod, hem standart görüntüleri hem de iki kat büyüklükteki (2x) görüntüleri içerir ve site bir HiDPI ya da standart çözünürlüklü ekranda görüntülendiğinde hangi görüntülerin kullanılacağını otomatik olarak algılar.

Adobe Muse'da HiDPI'yı etkinleştirme

Yeni site iletişim kutusunda bulunan çözünürlük menüsünde, Standart ile HiDPI (2x) arasında tercih yapma seçeneği sunulur.

Bir site oluşturduktan sonra Dosya > Site Özellikleri'ni seçerek çözünürlük ayarını değiştirebilirsiniz.

2x görüntü verileri ile varlıklar oluşturma

HiDPI ekranlardan en iyi şekilde yararlanmak ve yüksek kalitede görüntüleme yapabilmek için varlıklarınızın yüksek çözünürlüklü olması gereklidir. Bir varlığın boyutu sitenizde görüntülenen boyuttan en az 2 kat daha büyük olmalıdır.

2x görüntüler oluşturmak kolay bir işlemdir. Bir 2x varlık, ekranda görüntüleneceği görsel boyuttan en az iki kat daha büyük olmalıdır. Örneğin:

Web sayfası tuvaline bir HiDPI varlığı yerleştirdiğinizde, Adobe Muse görüntü boyutunu %50 oranında küçülterek görüntüyü optimize eder. Görsel boyutun küçültülmesi, daha sorunsuz ve verimli bir tasarım deneyimi sağlama amaçlıdır. Bu tip görüntüler, Varlıklar panelinde "2x" simgesi ile gösterilir. Adobe Muse, orijinal varlığın verilerini koruyarak, varlık bir HiDPI ekranda görüntülendiğinde yüksek piksel yoğunluğu sunulmasını sağlar. Adobe Muse, yayınlama veya dışa aktarma işlemleri sırasında, rasterleştirilmiş metinleri ve görüntü halinde çıktı alınan efektleri otomatik olarak 2 katı büyüklüğünde ve standart boyutta görüntüler şeklinde oluşturur.

Varlıklarınızın 2 katı büyüklükte görüntüler olduğundan ve dolayısıyla daha yüksek kalitede görüntülenmeye yetecek kadar veri içerdiğinden emin olmak için Varlıklar panelini açın (Pencere> Varlıklar). Bir varlık yeteri kadar veri içerdiğinde, listedeki yerinin yanında 2x simgesi görünür. Varlığınızın yanında 2x simgesi görünmüyorsa en yüksek kalitede görüntülenmeye yetecek kadar veri içermiyor demektir; bu nedenle varlık standart çözünürlükte görüntülenecektir.

HiDPI görüntüleri dışa aktarma

Adobe Muse, belirli durumlarda yüksek çözünürlüklü, yani 2 kat büyüklükte veri içeren görüntüleri dışa aktarmaz. Görüntüler kaplara sığacak şekilde ölçeklendiğinde (örneğin arka plan görüntüleri bulunan sayfalar, tam ekran slayt gösterileri gibi), Adobe Muse yayınlama sırasında görüntünün HiDPI versiyonunu dışa aktarmaz. Daha açık bir şekilde ifade etmek gerekirse şu durumlarda görüntünün standart versiyonu dışa aktarılır:

• %100 genişlik: Sığacak şekilde ölçekle/dolduracak şekilde ölçekle
• Tam ekran slayt gösterisi: Sığacak şekilde ölçekle/dolduracak şekilde ölçekle
• Tarayıcı/sayfa arka planı: Sığacak şekilde ölçekle/dolduracak şekilde ölçekle

Ayrıca, döşenmiş arka plan görüntüleri, Sığacak şekilde ölçekle/dolduracak şekilde ölçekle komutuyla ayarlanmış arka plan görüntülerine göre farklı şekilde ele alınır. Döşenmiş görüntüler olması durumunda, Adobe Muse web sitesini dışa aktarırken standart ve HiDPI ekranlar için sırasıyla standart ve yüksek çözünürlüklü görüntüler sağlar.   Adobe Muse'da çalışırken, 2 kat büyüklükte veri içeren yüksek çözünürlüklü bir görüntü döşediğinizde, görüntü diğer herhangi bir görüntü gibi ele alınır ve web sayfası tuvaline orijinal boyutun %50'si oranında küçültülerek yerleştirilir. Dışa aktarma sırasında, %50 oranında küçültülmüş olan görüntü, standart çözünürlüklü görüntü olarak, yerel görüntü ise 2 kat büyüklükte veri içeren yüksek çözünürlüklü görüntü olarak dışa aktarılır.

Site ziyaretçilerinizi dikkate alma

HiDPI ekranlar, site ziyaretçilerinin daha fazla görüntü verisi kullanarak web içeriklerini en yüksek görsel kalitede görüntülemelerini sağlar. 2x görüntü boyutları, sonuç olarak görüntü boyutlarının standart çözünürlüklü görüntülerden 4 kat daha büyük olmasını sağlar. Site ziyaretçileri, HiDPI görüntüleri görmek için 4 kat daha fazla veri yüklemelidir. İçeriklerin HiDPI sitelerinde daha hızlı görüntülenmesini sağlamak için Muse HiDPI varlıklarını ve Standart çözünürlükteki varlıkları dışa aktarır. Öncelikle standart çözünürlükteki varlıklar yüklenir. HiDPI varlıklar ise standart versiyonların üzerine aşamalı olarak yüklenir.

HiDPI (açma/kapama) Düğmesi widget'ı

Aşamalı yükleme çözümü pek çok site ziyaretçisi için rahat bir yol olsa da sınırlı veri planına sahip site ziyaretçileri veya sınırlı ya da pahalı indirme kotaları olan diğer bağlantılar açısından sorun yaratabilir. Bu gibi site ziyaretçileri için HiDPI (açık/kapalı) Düğmesi Widget'ı eklemeyi tercih edebilirsiniz. Bir sayfaya HiDPI (açık/kapalı) Düğmesi yerleştirildiğinde, bu sayfa öncelikle yalnızca standart çözünürlüğü yükler ve HiDPI düğmesi kapalı durumda görünür. Site ziyaretçisinin HiDPI Düğmesini açık konumuna getirmesiyle HiDPI (açık/kapalı) düğmesi bulunan tüm sayfalar, siteyi görüntüleyen kişi HiDPI'yı kapatana, tarayıcıdan çıkış yapana veya tanımlama bilgilerini temizleyene kadar HiDPI görüntüleri yükler. HiDPI (açık/kapalı) düğmesi içermeyen sayfalar bir HiDPI veya retina ekranda görüntülendiklerinde her zaman HiDPI görüntüleri yükleyecektir. Site bir HiDPI ekran ya da retina aygıtta görüntülenmediğinde, düğme kullanılamaz durumunda olacak ve yalnızca standart çözünürlükteki görüntüler yüklenecektir.