Обратите внимание, что вся информация на этом портале переведена с других языков, поэтому некоторые фразы могут быть неточными. Надеемся на ваше понимание и желаем успешной работы с сайтом! С уважением, создатели сайта. Наша почта: info@rubookmac.com

Как сделать и установить Retina-Ready iOS Bookmark Icon для веб-сайта

Веб-разработчики и владельцы веб-сайтов обращают внимание: вам нужно установить значок закладки iOS с сетчаткой. Значки закладок называются значком Apple Touch, и эти пользовательские изображения становятся значком, который отображается на главном экране пользователя, когда они добавляют закладки на iPad, iPhone или iPod touch в iOS или панель закладок Safari для ОС X. Без пользовательского набора файлов с яблочным прикосновением пользователи получат скучную и часто уродливую миниатюру самой веб-страницы, и без использования значка с сетчаткой значок закладки будет выглядеть неровным и вообще ужасным на новом iPad экран.

Вот что вам нужно сделать, чтобы создать идеальную иконку Apple Touch для сетчатки для любого веб-сайта за несколько простых шагов.

1) Создайте иконку веб-сайта iOS для Retina-Ready

Используйте шаблон или создайте свой собственный. Я использовал простой набор значков сетчатки DIY, упомянутый в предыдущем посте, это PSD-файл, который делает проектирование красиво выглядящих значков iOS такими же легкими, как щелчок или два. Вставьте на веб-сайт или логотип компании, и вы очень хорошо пойдете. Если вам нечего редактировать PSD-файлы, Photoshop CS6 beta отлично и бесплатно загружается и используется до тех пор, пока окончательная версия не появится позже в этом году.

Сделать значок закладки iOS

2) Сохранить как PNG & Назовите сайт Retina Bookmark Icon

Значок должен быть PNG, и его нужно назвать одной из двух вещей. Каждое имя файла имеет несколько иной вид значка, отображаемого на главном экране пользователя:

  • «Apple-touch-icon.png» добавит наложение наложения пузырьков к значку
  • «Apple-touch-icon-precomposed.png» отобразит значок как первоначально созданный, без наложения подсветки

Создать значок Apple Touch

Используйте последнюю опцию -представление, если вы создали свою собственную подсветку или хотите, чтобы значок выглядел более плоским без вездесущего пузыря, который появляется на большинстве значков Apple по умолчанию.

3) Загрузите ссылку на закладку веб-сайта в базовый веб-каталог

Используйте SFTP-клиент (OS X включает FTP в Finder, а CyberDuck или Filezilla — бесплатно), чтобы скопировать файл apple-touch-icon.png в корневой каталог. Обычно это то же место, что и основной файл индекса сайта. После загрузки подтвердите, что он находится в правильном месте, открыв веб-браузер и перейдя в «http://SITEURL.com/apple-touch-icon.png» и убедившись, что он загружается.

Вот пример значка закладки 512 × 512 с сетчатой ​​сеткой от OSXDaily.com:

Иконка Retina Apple Touch для OSXDaily

Обратите внимание, что без флага -precomposed в приведенном выше значке отобразится пузырь выделения. Вы можете увидеть разницу между ними, сравнив фактический значок с показанным на снимках экрана как закладку.

4) Использование устройства iOS и закладки сайта

Это самая легкая часть, захватите устройство iOS (желательно iPad 3 для подтверждения аспекта сетчатки) и откройте Safari. Обновите веб-сайт, на который вы загрузили значок, затем нажмите значок стрелки и выберите «Добавить в Homescreen» название закладки, затем вернитесь на Homescreen, чтобы подтвердить, что он есть.

Добавить закладку веб-сайта на рабочий стол

Несмотря на то, что он имеет размер 512 х 512 пикселей, значок сетчатки будет уменьшаться на старых устройствах iPhone и не-сетчатки. Если вы действительно этого хотите, вы можете использовать CSS и HTML для отображения значков разного размера для разных устройств, но это действительно не нужно.

Теперь, если кто-то закроет ваш веб-сайт на iPad с дисплеем сетчатки, он будет выглядеть намного лучше на своем домашнем экране. Это действительно все, что нужно. И да, мы уже писали о значке Apple touch, но теперь заслуживает упоминания о том, что iPad 3 требует значительно более высокого разрешения значков и графики.

Понравилась статья? Поделиться с друзьями: