С каждым новым гаджетом от компании Apple, все больше появляется экранов с технологией Retina Display. Сегодня экраны Retina установлены на iPhone, iPod, iPad и различных моделях MacBook, а их общее число пользователей впечатляет. Давайте узнаем, как создавать специальные изображения retina для вашего сайта, чтобы он смотрелся более навороченным, ярким и четким на мощных экранах такого типа.
Зачем нужна поддержка экранов retina?
Вначале я не ожидал, что число пользователей девайсов с экранами retina будет таким внушительным, ведь эту технологию стали использовать относительно недавно. Но потом, через свой аккаунт на Analytics, я просмотрел статистику по мобильным гаджетам и пришел к выводу, что продукты компании Apple лидировали по всем показателям, и в первую очередь среди них iPhone, iPod и iPad- а все они работают на технологии retina. Что касается 13″ или 15″ MacBook Pro с экраном Retina, то самые популярные пользовательские браузеры- это Chrome, Firefox, Safari и Internet Explorer. Поэтому, если вы работаете в Opera, то, скорее всего, число потенциальных посетителей вашего сайта меньше, чем число пользователей девайсов с Retina в целом (если смотреть по статистике моего собственного сайта, по крайней мере).
Как создавать изображения retina
Вы можете предположить, что изображения Retina сохраняются с более высоким разрешением PPI, но суть не в этом. Все, что нужно сделать - это сохранить несколько копий ваших изображений Retina в увеличенном вдвое размере, чтобы, к примеру, картинка с разрешением 200x200px стала 400x400px. Эти увеличенные изображения затем отображаются в первоначальном размере, что позволяет добиться этой четкой, чистой графики на экранах с высокой плотностью пикселей.
Звучит просто, но как вы собираетесь получить эти увеличенные изображения?
Создавайте логотипы и иконки в Illustrator
Идеальное решение для создания изображений retina- это векторная графика. Если ваш логотип или иконка сделаны в формате EPS или Ai file, то его параметры можно изменять перед тем, как переносить или копировать его в Photoshop. Отметьте элемент как Smart Object, и он сохранит свою векторную форму, так что его можно будет увеличить вдвое и сохранить отдельно как специальное изображение retina.
Используйте функции для векторной графики в Photoshop
В основе приложения Photoshop, прежде всего, лежит пиксельная графика, но это не значит, что в нем нет функций для векторных изображений. Любой инструмент изменения формы может создавать векторной слой вместо пикселей, а масштабы всех ваших эффектов для разметки Layer Style по-прежнему можно будет изменять. Когда вы увеличите масштабы элементов в два раза, все эффекты нужно будет масштабировать для создания почти точной, увеличенной вдвое, копии.
Схитрите, чтобы масштабировать свои изображения
Один из самых твердых принципов настоящих Дизайнеров – это не увеличивать в размере изображение, но если вы уже создали сайт и хотите вернуться на шаг назад и добавить поддержку retina, то вам ничего не остается, кроме как переделать каждое изображение вручную. Обычно в результате масштабирования изображения мы получаем размытую картинку с множеством дополнительных линий, но есть одна лазейка в меню Photoshop Image Size под названием Nearest Neighbor. Эта функция поможет избежать размытия ваших изображений и оставит границы четкими, что позволяет применять ее для маленьких иконок и однотонных объектов. Это не приведет к таким же результатам, как полное переделывание элемента, но это хорошая альтернатива на какое-то время.
Как насчет дизайна в масштабе 200%, а потом уменьшения в обратную сторону?
Вы можете подумать «А почему бы мне просто не создать полностью свою собственную разметку в двойном масштабе, а потом я могу уменьшить объекты до стандартных размеров?». В теории печатного дизайна это бы сработало, но что касается веб-дизайна, мы работаем на уровне пикселей, и создаем идеальные формы и линии. Даже сжатие картинок в Photoshop приведет к размытому изображению, в особенности если речь идет об иконках маленького размера.
Как кодировать графику Retina
После того, как вы создали и перенесли копии всех ваших стандартных изображений в двойном размере, вы можете начать добавлять их на ваш сайт различными способами. Пару слов о названии файла: сохраняйте ваши изображения retina прямо в вашу папку с изображениями с тем же именем файла, но добавляя of@2x в конце. К примеру, snarf.jpg изменится на snarf@2x.jpg.
Простое решение при помощи Javascript
Самый простой способ сделать так, чтобы ваши картинки retina работали- это использовать скрипт retina.js. Retina.js выберет все изображения @2x в вашем списке изображений и автоматически изменит их.
Ручной способ, используя CSS@
background-image: url(images/blogspoon-logo@2x.png);
background-size: 164px 148px;
}
Еще один вариант - вы можете добавить ваши изображения retina вручную, чтобы сохранить все стилистическое оформление вашей странички в формате CSS. Промежуточный запрос содержит min-device-pixel-ratio: 2, для объектов с двойной плотностью пикселей. Таким образом, вы замените каждое изображение на его увеличенную вдвое @2x копию, но не забывайте вернуть исходный размер изображения, используя параметр background-size.
HTML для встроенных изображений
Метод CSS отлично подходит для фоновых изображений, но для встроенных в HTML-страничку изображений вам придется изменять теги <img>. Просто добавьте изображение @2x к исходным атрибутам, потом используйте width и height, чтобы вернуть первоначальные параметры.
Автор: Крис Спунер (Chris Spooner)
Оригинал статьи:
Добавить комментарий