Шаблонов: 22,021     Фрилансеров: 2,623     Веб-студий: 199
Статьи Новости Реклама на сайте Форум
Помогаем продавать
и покупать готовый дизайн
Каталог шаблонов Каталог продавцов Продающие страницы Подписка на новые шаблоны

Как адаптировать изображения для веб-дизайна на дисплеях Retina

29 ноября 2012     Комментарии
Как адаптировать изображения для веб-дизайна на дисплеях Retina

С каждым новым гаджетом от компании 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

<script src="js/retina.js"></script>

Самый простой способ сделать так, чтобы ваши картинки retina работали- это использовать скрипт retina.js. Retina.js выберет все изображения @2x в вашем списке изображений и автоматически изменит их.

 

Ручной способ, используя CSS@

header h1 a {
    background-image: url(images/blogspoon-logo@2x.png);
    background-size: 164px 148px;
}

Еще один вариант - вы можете добавить ваши изображения retina вручную, чтобы сохранить все стилистическое оформление вашей странички в формате CSS. Промежуточный запрос содержит min-device-pixel-ratio: 2, для объектов с двойной плотностью пикселей. Таким образом, вы замените каждое изображение на его увеличенную вдвое @2x копию, но не забывайте вернуть исходный размер изображения, используя параметр background-size.

 

HTML для встроенных изображений

<img src="images/snarf@2x.jpg" width="300px" height="150px" />

Метод CSS отлично подходит для фоновых изображений, но для встроенных в HTML-страничку изображений вам придется изменять теги <img>. Просто добавьте изображение @2x к исходным атрибутам, потом используйте width и height, чтобы вернуть первоначальные параметры.

 

Автор: Крис Спунер (Chris Spooner)
Оригинал статьи:
http://line25.com/tutorials/how-to-create-retina-graphics-for-your-web-designs

Комментарии (0)

Комментариев пока нет. Вы будете первым!

Как продать дизайн?

Наши и другие рекомендации по разработке дизайна и дальнейшей публикации на сайте
Продаём фирменный стиль. Основные аспекты. Хочу продать логотип. Как это сделать? Как продать дизайн сайта
 
Advertising
Advertising


Вход в кабинет