Bir web sitesi için retina hazır bir ios yer imi simgesi nasıl oluşturulur ve ayarlanır

Web geliştiricileri ve web sitesi sahiplerinin dikkatine: retina hazır bir iOS yer imi simgesi ayarlamanız gerekir. Yer imi simgelerine Apple Dokunmatik Simgesi denir ve bu özel görüntüler, iOS'ta bir iPad, iPhone veya iPod touch'ta bir web sitesine veya OS için Safari'nin yer imleri panelinde bir web sitesine yer işareti koyduğunda kullanıcıların ana ekranında görüntülenen simge haline gelir. X. Özel bir apple-touch-icon dosya seti olmadan, kullanıcılar web sayfasının sıkıcı ve sık sık çirkin bir resmini çekeceklerdir ve retina hazır bir simge kullanmadan, yer imleri simgesi yeni iPad'de pikselli ve genellikle korkunç görünecektir. ekran.

İşte birkaç kolay adımda herhangi bir web sitesi için retina mükemmel bir Apple Touch Icon oluşturmak için yapmanız gerekenler.

1) Retina Hazır iOS Web Sitesi Simgesini Yaratın

Bir şablon kullanın veya kendinizinkini tasarlayın. Bir önceki yazıda belirtilen kolay DIY retina simge kitini kullandım, bir ya da iki tıklama kadar kolay görünen güzel görünümlü iOS simgeleri tasarlamayı sağlayan bir PSD dosyası. Bir web sitesine veya şirket logosuna yapıştırın ve gitmeniz çok iyi. PSD dosyalarını düzenlemek için bir şeyiniz yoksa, Photoshop CS6 beta, son sürüm yılın ilerleyen saatlerinde çıkana kadar indirmek ve kullanmak için mükemmel ve ücretsizdir.

2) PNG Olarak Kaydet ve Retina Web Sitesi Yer İşareti Simgesini Adlandır

Simge bir PNG olmalı ve iki şeyden biri olarak adlandırılmalıdır. Her dosya adı, kullanıcıların giriş ekranında görüntülenen simgenin biraz farklı bir görünümünü sunar:

• “ Apple-touch-icon.png ”, vurgulanan balon kaplamasını simgeye ekler
• “ Apple-touch-icon-precomposed.png ”, vurgulama kaplaması olmadan, simgeyi orijinal olarak oluşturulduğu gibi görüntüler.

Kendi vurgulamanızı oluşturduysanız veya simgenin Apple'ın varsayılan simgelerinin çoğunda görünen her yerde bulunmayan bir balon olmadan daha düz görünmesini istiyorsanız, sonuncusu-önceden oluşturulmuş seçeneğini kullanın.

3) Web Sitesi Yer İşareti Dokunmatik Simgesini Temel Web Dizinine Yükleyin

Apple-touch-icon.png dosyasını root web dizinine kopyalamak için bir SFTP istemcisi kullanın (OS X Finder'da FTP içerir ve CyberDuck veya Filezilla ücretsizdir). Bu genellikle sitelerin ana dizin dosyasının bulunduğu konumdur. Yüklendikten sonra, bir web tarayıcısı açıp “http://SITEURL.com/apple-touch-icon.png” adresine giderek ve yüklendiğinden emin olarak doğru konumda olduğunu onaylayın.

OSXDaily.com'dan 512 × 512 retina hazır bir yer imi simgesi örneği:

Önceden oluşturulmuş bayrak olmadan, yukarıdaki simgenin vurgulu balonu gösterdiğine dikkat edin. Asıl simgeyi ekran görüntülerinde yer imi olarak gösterilenle karşılaştırarak ikisi arasındaki farkı görebilirsiniz.

4) Bir iOS Cihazı Kullanın ve Siteyi İşaretleyin

Bu en kolay kısmı, bir iOS cihazı (tercihen retina yönünü onaylamak için bir iPad 3) alın ve Safari'yi açın. Simgeyi yüklediğiniz web sitesini yenileyin ve ardından ok simgesine dokunun ve yer işaretini adlandırmak için “Ana Ekrana Ekle” yi seçin, sonra orada olduğunu onaylamak için Ana Ekrana dönün.

512 x 512 piksel olmasına rağmen, retina simgesi eski iPhone'larda ve retina olmayan cihazlarda iyi ölçeklenecek. Gerçekten isterseniz, farklı boyutlardaki simgeleri farklı cihazlara görüntülemek için CSS ve HTML'yi kullanabilirsiniz, ancak bu gerçekten gerekli değildir.

Şimdi eğer birileri web sitenizi retina ekranlı bir iPad'e yerleştirirse, ana ekranlarında çok daha iyi görünecektir. Orada gerçekten hepsi bu. Ve evet, biz daha önce Apple touch ikonu hakkında yazmıştık, fakat şimdi iPad 3'ün önemli ölçüde daha yüksek çözünürlüklü ikonlar ve grafikler talep ettiği bir başka sözü hak ediyor.