картинка к статье про векторная графика и кнопка HiDPI в Adobe Muse

Масштабируемая векторная графика SVG.

Векторные картинке в формате SVG, в отличии от JPG при увеличении не теряют качество. Если у вас Retina дисплей, то SVG формат отлично подходит, потому что масштабируется до бесконечности и погрешностей у картинок не появляется.

Графику вы делаете в векторном редакторе, например Adobe Iliustrator, затем выделяете нужный файл, нажимаете Ctrl+C и в проекте в Muse нажимаете Ctrl+V. Изображение экспортируется сразу в SVG  формате. Так же вы можете в Adobe Iliustrator сохранить файл в формате SVG, а в Muse нажать Command+D и выбрать этот файл.

Кнопка HiDPI для Retina-дисплеев.

Чтобы ваш сайт хорошо отображался на устройствах, которые поддерживают Retina дисплеи (MacBook Pro, iPhone и новые модели iPad ), в Muse можно сделать поддержку HiDPI. Для этого нужно изначально создать сайт в разрешении HiDPI (2x) Нас Muse предупредит об увеличении времени загрузки страницы и объёма данных. Соглашаемся и выбраем «использовать HiDPI». Кнопку HiDPI перетаскиваем на нужное место. Теперь эта кнопка видна в режиме просмотра при работе с устройства, поддерживающим Retina дисплей. Если в вашей аудитории много людей, которые используют Retina дисплеи, есть смысл использовать эту кнопку и  HiDPI режим в Adobe Muse. Если человек пользуется iPhone с медленным интернетом, он может отключить этот режим и загрузить сайт в обычном режиме.

Задание

  1. Скачайте исходные файлы.
  2. Вставьте SVG-файл в Adobe Muse, посмотрите, как это работает.
  3. Попробуйте отмасштабировать сайт в браузере. И поймите преимущества работы с SVG-файлами.

Выкладывайте в комментарии, что у вас получилось