Illustrator содержит различные инструменты для разработки макетов веб-страниц, а также создания и оптимизации веб-графики. Например, используйте безопасные веб-цвета, ищите компромисс между качеством и размером файла и выбирайте наилучший формат файла для своей графики. Веб-графика обладает преимуществом в отношении фрагментов и карт ссылок, и вы можете выбирать из множества вариантов оптимизации и работать с Device Central, чтобы убедиться в правильном отображении файлов в Интернете.

О веб-графике

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

Для принятия обоснованных решений по веб-графике помните три следующие рекомендации:

Используйте безопасные веб-цвета.

Цвет часто является ключевым аспектом объекта. Однако цвета в монтажной области — это не всегда те цвета, которые появятся в веб-браузере другой системы. Можно предотвратить дизеринг (метод имитации недоступных цветов) и другие проблемы с цветом, приняв две меры предосторожности шагов при создании веб-графики. Во-первых, всегда работайте в цветовом режиме RGB. Во-вторых, используйте безопасный веб-цвет.

Ищите компромисс между качеством и размером файла.

Для распространения изображений в Интернете важно создавать небольшие файлы. Изображения меньшего размера веб-серверы могут хранить и передавать более эффективно, а средства просмотра быстрее загружают такие изображения. Размер и предполагаемое время загрузки веб-графики можно увидеть в диалоговом окне Сохранить для Web и устройств.

Выберите наилучший формат файла для своей графики.

Для качественного отображения и создания небольших файлов для Интернета необходимо сохранять разные типы графики в файлах разных форматов. Дополнительные сведения о форматах представлены в разделе Параметры оптимизации веб-графики.

Примечание.

Многие шаблоны Illustrator созданы специально для Интернета, включая веб-страницы и баннеры. Для выбора шаблона выберите «Файл» > «Новый из шаблона».

О режиме просмотра в виде пикселей

Чтобы разработчики веб-приложений могли создавать точные пиксельные модели, в Illustrator необходимо добавить свойство выравнивания по пикселям. Если для объекта включено свойство выравнивания по пикселям, все его горизонтальные и вертикальные сегменты выравниваются по пиксельной сетке, что обеспечивает четкость обводок. Пока данное свойство задано для объекта при любых преобразованиях, он повторно выравнивается по пиксельной сетке в соответствии с новыми координатами. Чтобы включить данное свойство, требуется установить флажок «Выровнять по пиксельной сетке» на палитре «Трансформирование». В Illustrator на уровне документа также доступен флажок «Выровнять новые объекты по пиксельной сетке», который по умолчанию установлен для веб-документов. Если данное свойство включено, для любого рисуемого объекта свойство выравнивания по пикселям задается по умолчанию.

Дополнительные сведения представлены в разделе Рисование контуров, выровненных по пикселам, при создании проектов для Интернета.

Сохраняя объект в битовом формате (например, в виде файла JPEG, GIF или PNG), Illustrator растрирует объект с разрешением 72 пикселя на дюйм. Выбрав «Просмотр» > «Просмотр в виде пикселов», можно увидеть, как будут выглядеть объекты после растрирования. Это очень удобно, если требуется проконтролировать точное расположение, размер и сглаживание объектов в растрированной графике.

Чтобы понять, как Illustrator разделяет объекты на пиксели, откройте файл с векторными объектами, выберите команду «Просмотр» > «Просмотр в виде пикселов» и увеличьте объект так, чтобы видеть каждый пиксель. Расположение пикселей определяется пиксельной сеткой, делящей монтажную область с шагом в один пункт (1/72 дюйма). Пиксельную сетку можно увидеть, если выбрать масштаб 600%. При перемещении, добавлении или преобразовании объект привязывается к пиксельной сетке. В результате любое сглаживание вдоль «привязанных» краев объекта (обычно левого верхнего края) исчезает. Теперь отмените выбор команды «Просмотр» > «Просмотр в виде пикселов» и переместите объект. Теперь можно расположить объект между линиями сетки. Посмотрите, как это влияет на сглаживание объекта. Видно, что даже незначительные корректировки могут влиять на растрирование объекта.

«Просмотр в виде пикселов» выключен (сверху) и включен (снизу)
«Просмотр в виде пикселов» выключен (сверху) и включен (снизу)

Примечание.

Пиксельная сетка зависит от начала координат линейки (0,0). Перемещение начала координат линейки изменит растрирование объекта Illustrator.

Использование Adobe Device Central с программой Illustrator

Приложение Device Central позволяет пользователям Illustrator определять внешний вид файлов Illustrator на различных мобильных устройствах.

Например, художник-оформитель может проектировать с помощью Illustrator фоновые рисунки для мобильных телефонов. После создания файла художник может легко протестировать этот файл на самых разных моделях телефонов. Далее художник может внести изменения, например исправить файл таким образом, чтобы он хорошо выглядел на телефонах нескольких различных типов, или создать два отдельных файла, каждый из которых будет соответствовать нескольким распространенным размерам экрана для телефонов.

Доступ в Illustrator из Adobe Device Central

  1. Запустите приложение Device Central.
  2. Выберите «Файл» > «Новый документ в» > «Illustrator».

    В приложении Device Central откроется палитра «Новый документ» с соответствующими параметрами создания нового документа для мобильного устройства в выбранном приложении.

  3. Внесите необходимые изменения, выбирая такие параметры, как «Версия проигрывателя», «Разрешение растра», «Версия Flash» и «Тип содержимого».
  4. Выполните одно из следующих действий:
    • Выберите параметр «Пользовательский размер для всех типов устройств» и введите ширину и высоту (в пикселях).

    • Выберите одно или несколько устройств в списке «Наборы устройств» или в списке Доступные устройства.

  5. При выборе нескольких устройств приложение Device Central установит нужные размеры автоматически. Если нужно выбрать другой размер, отметьте другое устройство или группу устройств.
  6. Нажмите кнопку «Создать».

    Новый мобильный документ откроется в выбранном приложении, готовый для редактирования.

Создание мобильного содержимого с помощью приложений Adobe Device Central и Illustrator

  1. В Illustrator выберите «Файл» > «Новый».
  2. В окне «Новый профиль документа» выберите «Мобильные телефоны и устройства».
  3. Нажмите кнопку «Device Central», чтобы закрыть диалоговое окно в приложении Illustrator и открыть Device Central.
  4. Выберите тип содержимого.

    Список «Устройства» слева обновится, и будут показаны устройства, которые поддерживают выбранный тип содержимого.

  5. В Device Central выберите одно или несколько устройств либо набор устройств.

    На основе выбранных устройств и типа содержимого Device Central предложит создать монтажные области разных размеров. Чтобы за один раз создавалось по одному документу, выберите предложенный размер документа (или выберите параметр «Пользовательский размер для всех выбранных устройств» и введите пользовательские значения параметров «Ширина» и «Высота»).

  6. Нажмите кнопку «Создать».

    В приложении Illustrator откроется пустой файл AI заданного размера. Для нового файла по умолчанию задаются следующие параметры.

    • Цветовой режим: RGB

    • Разрешение растрового изображения: 72 ppi

  7. Заполните пустой файл AI содержимым в Illustrator.
  8. После этого выберите «Файл» > Сохранить для Web и устройств.
  9. В диалоговом окне «Сохранить для Web и устройств» выберите желаемый формат и, при необходимости, настройте другие параметры экспорта.
  10. Нажмите кнопку «Device Central».

    На вкладке «Эмулятор Device Central» отобразится временный файл с указанными параметрами экспорта. Чтобы продолжить тестирование, дважды нажмите имя другого устройства в списке Наборы устройств или Доступные устройства.

  11. Если по итогам предварительного просмотра файла в приложении Device Central окажется, что в него нужно внести изменения, вернитесь в Illustrator.
  12. В диалоговом окне «Сохранить для Web и устройств» приложения Illustrator внесите желаемые изменения: например, укажите другой формат или качество экспорта.
  13. Чтобы еще раз проверить файл с новыми параметрами экспорта, нажмите кнопку «Device Central».
  14. Когда будет получен желаемый результат, нажмите кнопку «Сохранить» в диалоговом окне «Сохранить для Web и устройств» в Illustrator.

    Примечание.

    Чтобы просто открыть программу Device Central из Illustrator (без создания и проверки файла), выберите «Файл» > «Device Central».

Советы по созданию изображений Illustrator для мобильных устройств

Чтобы оптимизировать графическое содержимое для мобильных устройств, сохраните графические объекты, созданные в программе Illustrator в любом формате SVG, включая SVG-t, который предназначен специально для мобильных устройств.

Следуйте приведенным ниже советам, чтобы изображения, созданные в программе Illustrator, отображались на мобильных устройствах качественно.

  • Создавайте содержимое в соответствии со стандартом SVG. При публикации векторных изображений на мобильных устройствах в формате SVG создаются файлы небольшого размера, достигается независимость от размера экрана, обеспечивается превосходное управление цветами, появляется возможность масштабирования, а текст становится доступным для редактирования (в составе исходного кода). Кроме того, формат SVG основан на XML, поэтому он позволяет включать в изображения такие интерактивные средства, как выделение подсветкой, подсказки по инструментам, специальные эффекты, звуки и анимацию.

  • Рекомендуем с самого начала организовывать работу с учетом конечных размеров целевых мобильных устройств. Хотя формат SVG поддерживает масштабирование, работой в установленных размерах можно гарантировать, что конечные изображения будут оптимизированы для целевых устройств по качеству и размеру.

  • В качестве цветового режима программы Illustrator задайте RGB. Формат SVG можно просматривать на устройствах с растровым дисплеем RGB, например на мониторах.

  • Чтобы уменьшить размер файла, попытайтесь сократить количество объектов (включая группы) или сделать их менее сложными (содержащими меньше точек). Использование меньшего количества точек способствует значительному уменьшению количества текстовой информации, необходимой для описания графических объектов в файле SVG. Чтобы сократить количество точек, выберите «Объект» > «Путь» > «Упростить» и поэкспериментируйте с различными сочетаниями параметров, пока не найдете баланс, позволяющий добиться нужного качества при минимальном количестве точек.

  • При возможности используйте символы. Символы определяют векторы, которые описывают объект всего один раз. Это удобно, если композиция содержат такие объекты, как фоновые изображения кнопок, применяемые многократно.

  • Выполняя анимацию изображений, ограничивайте количество используемых объектов, и по возможности старайтесь использовать объекты повторно, чтобы уменьшить размер файла. Применяйте анимационные преобразования к группам объектов, а не к отдельным объектам. Это позволит избежать повторения кода.

  • Старайтесь использовать версию SVGZ, т. е. версию SVG со сжатием программой gzip. Сжатие, в зависимости от содержимого, позволяет значительно уменьшить размер файла. Лучше всего сжимается текст, но содержимое с двоичной кодировкой, например встроенные растровые изображения (файлы JPEG, PNG или GIF), сжимаются лишь незначительно. Файлы SVGZ можно распаковать с помощью любого приложения, которое открывает файлы, упакованные программой gzip. Для успешного использования SVGZ необходимо проверить, поддерживается ли на целевом устройстве распаковка файлов gzip.

Эта работа лицензируется в соответствии с лицензией Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported  На посты, размещаемые в Twitter™ и Facebook, условия Creative Commons не распространяются.

Правовые уведомления   |   Политика конфиденциальности в сети Интернет