Фрагменты и карты ссылок
Веб-страницы могут содержать много элементов — текст HTML, растровые изображения, векторную графику и др. В Illustrator можно использовать фрагменты для определения границ различных веб-элементов в объекте. Например, если какое-то растровое изображение в объекте должно быть оптимизировано в формат JPEG, а остальная часть объекта — в формат GIF, можно изолировать растровое изображение как фрагмент. Если объект сохраняется как веб-страница с помощью команды Сохранить для Web и устройств , можно сохранить каждый фрагмент как независимый файл со своим форматом, настройками и таблицей цветов.
Фрагменты документа Illustrator соответствуют ячейкам таблицы на итоговой веб-странице. По умолчанию область фрагмента экспортируется как файл изображения, заключенный в ячейку таблицы. Если нужно, чтобы ячейка таблицы содержала не файл изображения, а текст HTML и фоновый цвет, можно задать для фрагмента тип «Без изображения». Если требуется преобразовать текст Illustrator в текст HTML, можно задать для фрагмента тип «HTML-текст».
A. Фрагмент «Без изображения» B. Фрагмент «Изображение» C. Фрагмент «Текст HTML»
Увидеть фрагменты можно в монтажной области и в диалоговом окне Сохранить для Web и устройств . Illustrator нумерует фрагменты слева направо и сверху вниз, начиная с верхнего левого угла объекта. При изменении расположения или общего количества фрагментов номера фрагментов соответственно обновляются.
Когда создается фрагмент, Illustrator с помощью веб-таблицы делит окружающую графику на автофрагменты для сохранения макета. Существует 2 типа автоматически создаваемых фрагментов: автофрагменты и подфрагменты. Автофрагменты — это области объекта, которые не определены вами как фрагмент. Illustrator обновляет автофрагменты каждый раз, когда вы добавляете или редактируете фрагмент. Подфрагменты определяют, как будут делиться пересекающиеся пользовательские фрагменты. Хотя подфрагменты пронумерованы и обознаются символом «фрагмент», невозможно выделить их отдельно от основного фрагмента. Illustrator обновляет подфрагменты и автофрагменты по мере надобности во время работы пользователя.
Создание фрагментов
Выполните одно из следующих действий:
- Выделите один или несколько объектов в монтажной области и выберите «Объект» > «Фрагменты» > «Создать».
- Выберите инструмент «Фрагмент» и протащите по области, где хотите создать фрагмент. Чтобы фрагмент имел форму квадрата, перетаскивайте инструмент при нажатой клавише Shift. Чтобы рисовать из центра, перетаскивайте инструмент при нажатой клавише Alt (Windows) или Option (Mac OS).
- Выделите один или несколько объектов в монтажной области и выберите «Объект» > «Фрагмент» > «Создать по выделенной области».
- Разместите направляющие там, где требуется разделить объект на фрагменты, и выберите «Объект» > «Фрагменты» > «Создать по направляющим».
- Выделите существующий фрагмент и выберите «Объект» > «Фрагменты» > «Создать дубликат фрагмента». Совет. Чтобы размеры фрагмента соответствовали границам элемента в объекте, используйте команду «Объект» > «Фрагменты» > «Создать». При перемещении или изменении элемента область фрагмента автоматически корректируется для охвата нового объекта. С помощью этой команды можно также создать фрагмент, который включает текст и основные параметры форматирования из текстового объекта.Совет. Если размеры фрагмента не должны зависеть от основного объекта, используйте инструмент «Фрагмент» и команду «Создать по выделенной области» или «Создать по направляющим». Фрагменты, созданные одним из этих способов, отображаются как элементы в палитре «Слои», и их можно перемещать, изменять и удалять так же, как и другие векторные объекты.
Выделение фрагментов
Используйте инструмент «Выделение фрагмента», чтобы выбрать фрагмент в окне иллюстрации или в диалоговом окне «Сохранить для Web и устройств».
- Чтобы выделить фрагмент, нажмите на него.
- Чтобы выделить несколько фрагментов, нажмите на них при нажатой клавише Shift (в диалоговом окне Сохранить для Web и устройств также можно перетаскивать инструмент при нажатой клавише Shift).
- Чтобы выделить основной фрагмент при работе с пересекающимися фрагментами, нажмите его видимую часть. Кроме того, можно выделять фрагменты в окне иллюстрации одним из следующих способов:
- Чтобы выделить фрагмент, созданный с помощью команды «Объект» > «Фрагменты» > «Создать», выделите соответствующий объект в монтажной области. Если фрагмент привязан к группе или слою, выделите значок рядом с группой или слоем на палитре «Слои».
- Чтобы выделить фрагмент, созданный с помощью инструмента «Фрагмент», команды «Создать по выделенной области» или команды «Создать по направляющим», укажите его на палитре «Слои».
- Щелкните на контуре фрагмента с помощью инструмента «Выделение» .
- Чтобы выделить сегмент контура фрагмента или опорную точку фрагмента, нажмите на них инструментом «Частичное выделение». Примечание. Выделить автофрагменты невозможно. Эти фрагменты недоступны.
Установка параметров фрагмента
Параметры фрагмента определяют, как будет выглядеть и работать фрагмент на веб-странице.
Выполните одно из следующих действий с помощью инструмента «Выделение фрагмента»:
- Выделите фрагмент в окне иллюстрации, и выберите команду «Объект» > «Фрагменты» > «Параметры фрагмента».
- В диалоговом окне Сохранить для Web и устройств дважды нажмите на фрагмент инструментом «Выделение фрагмента».
Выберите тип фрагмента и задайте соответствующие параметры:
Изображение
Выберите этот тип, если область фрагмента на веб-странице должна представлять собой файл изображения. Если нужно, чтобы изображение было ссылкой HTML, введите URL-адрес и целевой набор фреймов. Можно также задать сообщение, которое должно появляться в области статуса браузера, когда мышь находится над изображением, дополнительный текст, который должен появляться, когда изображение не отображается, а также цвет фона для ячейки таблицы.
Без изображения
Выберите этот тип, если требуется, чтобы область фрагмента на веб-странице содержала текст HTML и цвет фона. Введите текст для вывода в текстовом окне «Текст в ячейке» и отформатируйте его с помощью стандартных тегов HTML. Не вводите больше текста, чем можно отобразить в области фрагмента (если введено слишком много текста, он перейдет на соседние фрагменты и изменит макет веб-страницы; но так как текст не виден в монтажной области, это проявится только при просмотре веб-страницы в веб-браузере). Задайте параметры «По горизонтали» и «По вертикали» для изменения выравнивания текста в ячейке таблицы.
Текст HTML
Этот тип становится доступным только при создании фрагмента, если выделить текстовый объект и выбрать команду «Объект» > «Фрагменты» > «Создать». На веб-странице текст Illustrator преобразуется в текст HTML с основными атрибутами форматирования. Чтобы отредактировать текст, обновите его в своем объекте. Задайте параметры «По горизонтали» и «По вертикали» для изменения выравнивания текста в ячейке таблицы. Можно также выбрать цвет фона для ячейки таблицы. Совет. Чтобы отредактировать текст для фрагментов «Текст HTML» в диалоговом окне «Параметры фрагмента», выберите тип фрагмента «Без изображения». Это разрывает связь с текстовым объектом в монтажной области. Чтобы форматирование текста не учитывалось, введите как первое слово в текстовом объекте.
Блокировка фрагментов
Блокировка фрагментов предотвращает случайные изменения (например, перемещение или изменение размера).
- Чтобы заблокировать все фрагменты, выберите «Просмотр» > «Закрепить фрагменты».
- Для блокировки отдельных фрагментов нажмите столбец редактирования фрагментов на палитре «Слои».
Корректировка границ фрагментов
Если фрагмент создан с помощью команды «Объект» > «Фрагменты» > «Создать», позиция и размер фрагмента привязываются содержащемуся в нем объекту. Поэтому при перемещении или изменении размера объекта границы фрагмента корректируются автоматически.
Если фрагмент создается с помощью инструмента «Фрагмент», команды «Создать по выделенной области» или команды «Создать по направляющим», можно откорректировать фрагменты вручную следующими способами.
- Для перемещения фрагмента перетащите его на новое место с помощью инструмента «Выделение фрагмента» . Чтобы ограничить перемещение вертикальной, горизонтальной линией или диагональной под углом 45°, нажмите и держите клавишу Shift.
- Для изменения размера фрагмента выделите фрагмент с помощью инструмента «Выделение фрагмента» и тащите любой угол или сторону фрагмента. Для изменения размера фрагментов можно использовать также инструмент «Выделение» и палитру «Трансформирование».
- Для выравнивания или распределения фрагментов используйте палитру «Выравнивание». Выравнивание фрагментов может устранить ненужные автофрагменты и создать небольшой, более эффективный файл HTML.
- Для изменения порядка размещения фрагментов перетащите фрагмент на новую позицию на палитре «Слои» или выберите команду «Объект» > «Монтаж».
- Для разделения фрагмента выделите его и выберите «Объект» > «Фрагменты» > «Разделить фрагменты». Можно объединять фрагменты, созданные любым методом. Выделите фрагменты и выберите «Объект» > «Фрагменты» > «Объединить фрагменты». В этом случае фрагмент получает свои размеры и позицию от прямоугольника, созданного путем соединения внешних краев объединенных фрагментов. Если объединенные фрагменты несмежные, имеют разные пропорции или выравнивание, новый фрагмент может пересечься с другими фрагментами. Чтобы изменить размер всех фрагментов до границ монтажной области, выберите команду «Объект» > «Фрагменты» > «Обрезать по монтажной области». Фрагменты, выходящие за монтажную область обрезаются до размеров монтажной области, а автофрагменты, лежащие внутри монтажной области, расширяются до ее границ; ничего в объекте не меняется.
Удаление фрагментов
Чтобы убрать фрагменты, можно их удалить или освободить в соответствующем объекте.
- Для удаления фрагмента выделите фрагмент и нажмите кнопку «Удалить». Если фрагмент создан с помощью команды «Объект» > «Фрагменты» > «Создать», одновременно удаляется и соответствующий объект. Чтобы сохранить соответствующий объект, не удаляйте фрагмент, а освободите его.
- Для удаления всех фрагментов выберите команду «Объект» > «Фрагменты» > «Удалить все». Фрагменты, созданные с помощью команды «Объект» > «Фрагменты» > «Создать», не удаляются, а освобождаются.
- Для исключения фрагмента выделите его и выберите команду «Объект» > «Фрагменты» > «Расформировать».
Отображение и скрытие фрагментов
- Чтобы скрыть фрагменты в окне иллюстрации, выберите команду «Просмотр» > «Спрятать фрагменты».
- Чтобы скрыть фрагменты в диалоговом окне «Сохранить для Web и устройств», нажмите кнопку «Переключить видимость фрагментов» .
- Чтобы спрятать номера фрагментов и изменить цвет линий фрагмента, выберите «Редактирование» > «Установки» > «Быстрые направляющие и фрагменты» (Windows) или «Illustrator» > «Установки» > «Быстрые направляющие и фрагменты» (Mac OS).
Создание карт ссылок
Карты ссылок позволяют связать одну или несколько областей изображения (так называемых активных областей) с URL-адресом. Когда пользователь нажимает активную область, веб-браузер загружает связанный с ней файл.
Основная разница между использованием карт ссылок и фрагментов для создания связей состоит в том, как объект экспортируется на веб-страницу. Использование карт ссылок сохраняет объект в виде единого файла изображения, а в случае использования фрагментов объект делится на несколько отдельных файлов. Еще одна разница между картами ссылок и фрагментами состоит в том, что карты позволяют связывать многоугольные или прямоугольные области в объекте, а фрагменты — только прямоугольные. Если нужно связать только прямоугольные зоны, лучше использовать фрагменты, а не карту ссылок.
Примечание.
Во избежание неожиданных результатов не создавайте активные области карты ссылок во фрагментах, содержащих URL-ссылки, так как в некоторых браузерах ссылки карты или ссылки фрагментов могут игнорироваться.
Растровая и векторная графика
Давайте попробуем разобраться, в чём отличие растровой графики от векторной.
Растровая графика
Наиболее распространённые растровые форматы: JPEG, PNG, WebP.
Растровое изображение, как мозаика, складывается из множества маленьких ячеек — пикселей, где каждый пиксель содержит информацию о цвете. Вы легко отличите растровое изображение, если увеличите его масштаб — в какой-то момент вы заметите множество маленьких квадратов. Это и есть пиксели.
Растровая графика удобна для создания качественных фотореалистичных изображений, цифровых рисунков и фотографий.
Самый популярный редактор растровой графики — Adobe Photoshop.
Преимущества
- Можно создавать сложные изображения — со множеством деталей и широкой цветовой гаммой.
- С растровой графикой легко работать: её проще создавать и редактировать.
Недостатки
- Много весят. Чем больше «размер» картинки, тем больше в ней пикселей и, соответственно, тем больше места нужно для хранения или передачи этого изображения.
- Нельзя растянуть или сжать без потери качества.
Векторная графика
Самые популярные векторные форматы: SVG, AI.
В отличие от растровых, векторные изображения состоят не из пикселей, а из множества опорных точек и соединяющих их кривых. Векторное изображение описывается математическими формулами. Сколько ни увеличивай масштаб векторного изображения, вы никогда не увидите пикселей.
Применение
Векторная графика используется для иллюстраций, иконок, логотипов и технических чертежей. Но она сложна для воспроизведения фотореалистичных изображений.
Самый популярный редактор векторной графики — Adobe Illustrator.
Преимущества векторных картинок
- Мало весят. Размер векторных изображений меньше, потому что они содержат мало информации.
- Отлично масштабируются — можно бесконечно изменять размер изображения без потери качества.
Недостатки
- Чтобы отобразить векторное изображение, нужно выполнить ряд вычислений. Соответственно, сложные изображения могут требовать повышенных вычислительных мощностей.
- Не каждую графическую сцену можно нарисовать в векторе. Для сложного изображения с широкой цветовой гаммой требуется множество точек и кривых, что сводит «на нет» все преимущества векторной графики.
- Чтобы создавать и редактировать векторную графику, нужны определённые знания и навыки. Например, нужно уметь работать в Adobe Illustrator.
Материалы по теме
- Форматы изображений для веба
- Фигма или Фотошоп. Что выбрать новичку
- Как добавить фильтры на фотографию в CSS
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Знакомство с HTML
Привет, будущие фронтенд-разработчики! Добро пожаловать в увлекательный мир веб-разработки. Перед тем как двигаться дальше, давайте разберёмся с основами — языком разметки гипертекста или просто HTML.
Что такое HTML?
HTML (Hypertext Markup Language) — это стандартный язык, который используется для создания веб-страниц. Представьте, что ваша веб-страница — это книга. Тогда HTML — это скелет этой книги, костяк, который определяет структуру: где будет заголовок, абзацы, изображения и так далее.
Основы разметки
Всё начинается с тегов. Тег — это элемент языка разметки, который определяет, какой тип содержимого будет представлен.
Теги обычно идут парами: открывающий тег
Мой заголовок
Это мой первый абзац. Привет, мир!
Некоторые теги можно не закрывать:
Теги и атрибуты
У тегов могут быть атрибуты. Это дополнительные характеристики, которые помогают определить свойства элемента. Например, у тега атрибут src указывает путь к изображению:
Атрибут alt описывает изображение, это полезно, если изображение не загрузится или для программ чтения экрана.
Формы и элементы форм
Формы используются для сбора данных от пользователей. Например, когда вы вводите что-то в поисковой строке или заполняете регистрационную форму.
- — это тег формы.
- action — куда отправляются данные.
- method — метод отправки (обычно get или post ).
- — поле для ввода данных. Тип text означает текстовое поле.
- — метка для поля ввода.
Списки в HTML
Списки позволяют нам организовывать данные в упорядоченном (нумерованном) или неупорядоченном (с маркерами) виде.
Упорядоченные списки создаются с помощью тегов (ordered list) и (list item):
- Первый элемент списка
- Второй элемент списка
- Третий элемент списка
- Элемент списка с маркером
- Еще один элемент с маркером
Ссылки и навигация
Чтобы ваши пользователи могли переходить от одной страницы к другой, используются ссылки. Тег для создания ссылки — , атрибут href указывает на адрес, куда должна вести ссылка:
Таблицы
Имя Возраст Джон 30 Элис 25
Использование изображений
Семантическая разметка
Семантическая разметка важна для доступности и SEO. Это использование элементов HTML по их предназначению, например:
Заголовок статьи
Первый абзац статьи.
Это основы, которые сформируют крепкий фундамент для начала работы с HTML. Следующий шаг — погружение в CSS, чтобы оживить и улучшить визуальную составляющую ваших веб-страниц. Но об этом — в нашей следующей статье. Стройте свои веб-страницы с удовольствием и не бойтесь экспериментировать! ��
- 1 ноября 2023
Специальные символы в HTML
HTML использует особенные комбинации символов, чтобы корректно отображать определенные знаки на веб-страницах. Например, вместо простого знака «меньше» мы видим комбинацию <. В этой статье представлен список таких символов. Это небольшой справочник для тех, кто хочет быстро найти нужный код.
- 23 октября 2023
Простое диалоговое окно на HTML
Вот короткое демо:
- 18 октября 2023
Зачем нужен метатег viewport
Каждый из нас хоть раз в жизни сталкивался с веб-страницами, которые кажутся «сломанными» или странно отображаются на мобильных устройствах. Одной из причин такого поведения может быть отсутствие маленького, но важного элемента в коде страницы — метатега viewport .
Метатеги — это инструкции для браузера о том, как отображать содержимое страницы. Один из таких метатегов — viewport , который говорит браузеру, как масштабировать и отображать страницу на разных устройствах, особенно на смартфонах и планшетах.
Важно, чтобы сайты классно выглядели не только на компьютерах, но и на маленьких экранах смартфона. Если не использовать viewport , то сайт может выглядеть как уменьшенная версия десктопного сайта на мобильном экране, что делает его трудночитаемым и неудобным для использования. Конечно, нужно ещё много всего сделать для адаптивности, но viewport тоже нужен.
- 18 сентября 2023
Атрибут class в HTML на примерах
Атрибут class используется для добавления CSS-классов элементам HTML. Классы позволяют применять одни и те же стили CSS или поведение JavaScript к разным элементам на странице.
Так, одному элементу можно присвоить один или несколько классов, разделяя их пробелами.
- 14 сентября 2023
В чём отличия цитат blockquote, cite и q
В HTML есть разные теги для цитирования и указания источников. Основные из них: , и . Давайте разберёмся в их различиях.
- 12 сентября 2023
Осмысленный alt-текст: 6 правил
Альтернативный текст — это описание изображения словами. Это описание должно помогать людям, которые читают или слышат это описание, иначе оно не нужно и лучше вообще его не указывать.
Мы уже обсудили основные правила написания alt-текста для фотографий и изображений. В этот раз поговорим о том, каким именно должно быть описание, чтобы в нём был смысл.
- 31 июля 2023
Как понять, что перед вами заголовок
Заголовки используются для организации и структурирования содержимого на сайте. В HTML существует шесть уровней заголовков, обозначаемых тегами от до . Каждый уровень заголовка имеет свой семантический вес, где имеет наибольший вес, а — наименьший.
Часто кажется, что заголовок — это простой и понятный тег. Но это впечатление обманчиво, потому что не всегда крупный и выделенный текст на макете является заголовком.
При вёрстке сайта важно соблюдать семантику, чтобы все теги использовались корректно и ресурс работал без ошибок. Если напутать уровни заголовков, то структура страницы будет не семантичной, а скринридеры неправильно прочтут сайт.
В статье разберёмся, как верно определять заголовки по макету, какие из них лучше делать скрытыми и почему.
- 8 июня 2023
Как правильно вставлять SVG
Есть несколько способов вставки SVG-изображения. Выбор одного из них зависит от задач, которые стоят перед верстальщиком.
SVG — это формат векторной графики, дословно: масштабируемая векторная графика. МВГ? SVG! В векторных форматах хранится не само изображение, а инструкция по его построению по точкам и кривым.
В растровых форматах информация о конкретном числе точек изображения плотно упакована в бинарный кирпич. В него бесполезно заглядывать и менять его можно только в редакторах графики.
�PNG IH�aV PLTE�������0� IDAcZ�d���� �W= S�3�o;���]P ���IEND�B`�~ Формат SVG тоже можно создавать и менять в редакторах графики, например, в Illustrator или Figma. Но ещё он текстовый, а значит его можно открыть как HTML или CSS в любом редакторе кода.
SVG — это как отдельная HTML-страница. Когда вставляете SVG, вы, на самом деле, вставляете не просто картинку, а целую страницу. Со своей системой координат, вьюпортом, стилями, скриптами и удивительными особенностями.
Если смотреть на SVG как на отдельную страницу — становится понятнее, какой способ вставки вам нужен.
- 1 июня 2023
Как создавать адаптивные изображения. Атрибут srcset
Адаптивные изображения автоматически изменяют свой размер, чтобы соответствовать экрану пользователя, что улучшает вид страницы и ускоряет загрузку.
Давайте рассмотрим несколько способов создания адаптивных изображений.
�� В статье мы говорим о пикселях и ретина-дисплеях. Если вы не знаете, что это такое — прочитайте статью.
- 25 мая 2023
10 полезных уловок для работы в Adobe Illustrator
Векторный графический редактор Adobe Illustrator – это мощная программа, обладающая большими возможностями. Изучение всей массы функций может стать весьма непростой задачей. Благо при создании больших проектов и иллюстраций нет необходимости знать «назубок» все мелочи. Достаточно освоить несколько уловок, облегчающих работу.
Совет № 1: Изучите комбинации клавиш
Время не терпит пренебрежения. Потратив несколько минут на изучение комбинаций клавиш, в будущем вы сможете сэкономить массу времени. Вам не нужно запоминать все существующие варианты: подумайте, какие команды вы используете чаще всего? Выучите их, и пользуйтесь ими в работе. Изучение иконок на Панели инструментов поможет вам хорошо ориентироваться в иллюстраторе.
Несколько примеров использования «горячих» клавиш для Windows:
- «Ctrl + V» запускает инструмент Selection tool (курсор, стрелочка чёрного цвета), который делает активной любую векторную кривую.
- «Ctrl + А» — включает Direct Selection tool (белый курсор), позволяет выделять элементы кривой и перетаскивать их в нужное вам место.
- «Ctrl + R» — активирует Rotate tool, с помощью которого можно вращать выбранные объекты вокруг центральной точки на 360 градусов.
- «Shift + E» даёт вам возможность воспользоваться ластиком (Eraser tool) и стереть ненужное.
Совет № 2: Освойте хитрости локального копирования
Одними из часто используемых функций иллюстратора являются копирование и вставка. Это достаточно простые операции, однако при необходимости вставить объект в одно и то же место, могут возникнуть трудности. Чтобы вставить изображение на передний (Paste in Front) или задний (Paste in Back) план необходимо воспользоваться соответствующими командами в меню Редактирование (Edit).
Весьма полезными являются следующие комбинации клавиш:
— «Ctrl + F» позволяют вставить изображение сверху того места, откуда оно было скопировано, а «Ctrl + В» — ниже него.
Здесь же пригодится знание горячих клавиш, вызывающих инструмент вращения Rotate tool. Выделив объект нужно дважды «кликнуть» на инструмент. После этого появиться меню, в котором вам необходимо выбрать угол «О» и нажать «копировать». И словно по волшебству копия изображения окажется в том же месте!
Совет № 3: Не забывайте о клавишах Alt и Shift!
Клавиши Alt и Shift буквально творят чудеса! Простой фокус: выделите объект и подвигайте его в разные стороны. Нажатие клавиши Alt переключит инструмент и позволит сделать дубликат вашего объекта. А если зажатие клавиши Shift ограничивает передвижение объекта по горизонтали или вертикали. Если вам понадобиться дублировать изображение, которое расположено строго по горизонтали или вертикали, то поможет знание сочетания клавиш «Alt + Shift».
Совет № 4: Воспользуйтесь Smart Guides.
Сложно преувеличить значение выравнивающего инструмента (Align), однако ему под силу далеко не всё. Остальное сделает для вас Smart Guides. Чтобы включить «умные направляющие» выбираем в Панели инструментов меню «Вид». Затем находим команду Просмотр (View) и включаем функцию Smart Guides. Впрочем, можно пойти более простым путём и воспользоваться комбинацией клавиш «Ctrl + U».
После активации Smart Guides вы сразу же заметите, что при наведении на объект появляются линии подсветки и надписи: путь, центр, опорная точка. Теперь вы сможете наложить один контур на другой — Smart Guides подскажет, где объекты пересекаются.
Простой пример: Попробуйте выровнять по центру два круга. Сделать это просто: держите за «центр» первый круг и перемещайте его в «центр» второго.
Совет № 5: Выравниваем прозрачность
Иллюстрации с обработкой прозрачности выглядят очень эффектно, поскольку появляется возможность регулировать визуальную глубину рисунка: чтобы сквозь объекты на переднем плане были видны изображения, находящиеся позади. Причём для разных объектов можно применять различный уровень прозрачности. Но иногда нам необходимо выровнять прозрачность, для этого следует воспользоваться командой «Разобрать оформление» (Outline Stroke), которая отделит обводку объекта от заливки. Для того чтобы выделить обводку пунктирной линией и разъединить с заливкой, понадобиться команда Обработки прозрачности (Flatten Transparency). Ищем её в меню «Объект» (Object) и устанавливаем уровень прозрачности на 100. Эта опция пригодится вам для разделения мазков кисти, создания эффектов деформации, в цветовых переходах.
Совет № 6: Группируем объекты
Группировка объектов необходима в случае, когда нужно работать с ними, как с единым целым. При использовании команды «Сгруппировать» (Group) объекты будут накладываться друг на друга позади одного изображения, которое находится на переднем плане. Часто возникает потребность расположить объекты определённым образом в нужном вам слое. В этом деле команда «Сгруппировать», действительно, незаменима.
- Необходимо поместить объект на задний план (В меню «Объект» кликаем на команду Монтаж (Arrange), а затем нажимаем на «Поместить на задний план» (Send to Back).
- После выделения контура зажмите Shift и выделите тот объект, под слоем которого хотите разместить предыдущий.
- Объедините оба объекта, воспользовавшись командой «Сгруппировать» в меню «Объект» или комбинацией горячих клавиш «Ctrl + G». Это закрепит объекты в нужной вам последовательности.
Совет № 7: Хитрости трансформации
Палитра Transform, расположенная в меню «Объект» и позволяющая изменять размеры изображений, имеет весьма полезную команду – «Повторить трансформирование» (Transform Again). Пользоваться ею следует в ситуации, когда необходимо поместить копию объекта на определённом расстоянии от оригинала. Для этого необходимо копировать нужный нам слой (зажав кнопку Alt) и переносим его в нужное нам место. Затем, к полученной копии применяем команду «Повторить трансформирование». В результате получаем ещё один дубликат, расположенный с таким же интервалом, как и первые два.
Совет № 8: Создаём плавные переходы
Команда «Превращение» (Blend) используется для создания «группы превращения», а также промежуточных объектов из используемых исходных форм (контуры, объекты с градиентными заливками). Для того чтобы создать плавные переходы необходимо задать нужное нам количество шагов в переходе.
Чтобы понять принцип действия, нарисуйте рядышком квадрат и круг. Затем в меню «Объект» находим команду «Превращение» (Blend) и одну из её опций – «Параметры превращения» (Blend Options). Открывшееся диалоговое окно задаём нужное нам количество шагов с помощью команды «Заданное число шагов» (Specified Steps). Затем выделяем оба наши контура, после чего выбираем другую опцию команды «Превращение» — «Создать» (Make). В итоге получаем несколько контуров, являющих собой нечто среднее между кругом и квадратом. Для дальнейшего редактирования созданных контуров можно использовать команду «Обработка прозрачности».
Совет № 9: Работаем с текстовыми полями
Начиная работать в Иллюстраторе с текстовой информацией, быстро понимаешь, что пользоваться только инструментом «Текст» (Text tool) неудобно. Поскольку в итоге получается текст, расположенный на одной линии, дальнейшая обработка которого занимает много времени.
Для того чтобы избежать этого, можно предварительно создать контур для будущей надписи, после чего вписать в него, с помощью инструмента «Текст» нужную вам информацию. Или пойти ещё более простым путём и воспользоваться инструментом «Текст в области» (Text in box).
Совет № 10: Перевоплощение Звезды в Треугольник
Не каждый может подарить звезду с неба, но нарисовать её в иллюстраторе по силам любому. Однако не многие знают, что с помощью инструмента «Звезда» (Star) можно создавать и другие геометрические фигуры. Нарисуйте звезду и, удерживая её мышью, попробуйте добавлять и удалять опорные точки (кнопками «вверх» и «вниз»). Например, если нажать кнопку «вниз», то получите замечательный треугольник! Если вам нужно расположить его параллельно странице, просто нажмите на Shift, перед тем, как отпустить клавишу мыши.
Поторопитесь воспользоваться этими советами в своей работе и не бойтесь экспериментировать!
Просмотр графических объектов
В любой момент можно изменить настройки документа по умолчанию: единицы измерения, отображение сетки прозрачности, цвет фона и такие параметры текста, как язык, стиль кавычек, размер верхних и нижних индексов, выпуск за обрез и экспортируемость. Кнопка «Редактировать монтажные области» закрывает это диалоговое окно и активирует инструмент «Монтажная область».
Выберите команду «Файл» > Параметры документа или нажмите кнопку Параметры документа на панели «Управление» (эта кнопка отображается, если ничего не выбрано).
Задайте необходимые параметры.
Если требуется изменить параметры монтажных областей (например, сменить портретную ориентацию на альбомную), нажмите кнопку «Редактировать монтажные области» для перехода в режим редактирования.
Примечание.
Параметр «Имитировать цветную бумагу» удобен, если документ предназначен для печати на цветной бумаге. Например, если нарисовать синий объект на желтом фоне, объект будет выглядеть зеленым. Имитация выполняется, только если не отображается сетка прозрачности.
О разбиении страниц
По умолчанию Illustrator печатает каждую монтажную область на отдельном листе бумаги. Однако, если размер графического объекта превышает размер бумаги в принтере, имеется возможность печати на нескольких листах.
Деление монтажной области таким образом, чтобы оно уместилось на бумаге доступного размера, называется разбиением. Разбиение можно задать в разделе «Основные» диалогового окна «Печать». Чтобы отобразить границы разбиения на монтажной области, выберите команду «Просмотр» > «Показать разбиение для печати».
Если разбить монтажную область на несколько фрагментов, страницы нумеруются слева направо и сверху вниз, начиная с 1. Эти номера страниц отображаются на экране только для справки, они не печатаются. Эти номера позволяют печатать все страницы в файле или указать определенные страницы для печати.
Увеличение и уменьшение масштаба графического объекта
Существует несколько способов увеличить или уменьшить масштаб графического объекта.
- Выберите инструмент «Масштаб» . Курсор примет вид лупы со знаком «плюс» в центре. Нажмите в середине области, которую нужно увеличить, или, нажав и не отпуская клавишу Alt (Windows) или Option (macOS), нажмите в середине области, которую нужно уменьшить. Каждый щелчок увеличивает или уменьшает масштаб до предыдущего заданного количества процентов.
Примечание.
При увеличении или уменьшении масштаба графического объекта в Illustrator с помощью инструмента «Масштаб» или комбинаций клавиш выделенный объект будет отображаться в центре представления. Если выделенная область содержит опорные точки или сегменты, они также будут отображаться в центре представления в Illustrator при масштабировании. Чтобы отключить приближение выделенного объекта, выберите Установки > Отображение выделения и опорных точек , затем снимите флажок Приближение выделенного объекта .
- Выберите инструмент «Масштаб» и очертите участок, который нужно увеличить, пунктирным прямоугольником, именуемым областью выделения. Чтобы переместить область по графическому объекту, нажмите клавишу «Пробел» и, не отпуская ее, перетащите область в новое место.
- Выберите Просмотр > Увеличение или Просмотр > Уменьшение . Каждый щелчок увеличивает или уменьшает масштаб до следующего заданного количества процентов.
- Установите масштаб в левом нижнем углу главного окна или на панели «Навигатор».
- Чтобы отобразить файл в масштабе 100 % выберите Просмотр > Реальный размер или дважды щелкните инструмент «Масштаб».
- Чтобы масштабировать монтажную область по размеру окна документа выберите Просмотр > Подогнать монтажную область по размеру окна или дважды щелкните инструмент «Рука».
- Чтобы просмотреть все объекты в окне, выберите Просмотр > Подогнать все по размеру окна .
Предварительный просмотр в реальном размере
Как дизайнеру печатных материалов вам захочется предварительно просмотреть работу перед печатью, чтобы проверить, как она будет выглядеть в натуральную величину. Для этого создайте предварительный просмотр документа в реальном размере при масштабе 100 %.
Выберите Просмотр > Реальный размер, чтобы отобразить элементы в натуральную величину независимо от размера и разрешения экрана. При просмотре документа в масштабе 100 % размер каждого объекта в документе соответствует физическому размеру данного объекта. Например, при открытии новой монтажной области размером A4 можно нажать Реальный размер, чтобы отобразить монтажную область в реальном размере листа A4.
Реальный размер применим ко всем разрешениям, коэффициентам масштабирования и режимам просмотра (кроме просмотра в виде пикселей).
Примечание.
При использовании нескольких мониторов функция отображения в натуральную величину работает только на главном мониторе.
Примечание.
Опция Реальный размер включена по умолчанию, что означает, что документ всегда отображается в реальном размере при масштабе 100 %. Однако, если вы не хотите, чтобы документ менялся при масштабе 100 %, вы можете отключить опцию Реальный размер. Чтобы это сделать, выполните следующие шаги.
- Выберите Редактирование >Установки >Основные (Windows) или Illustrator >Установки >Основные (macOS).
- Снимите флажок с параметра Отображать в реальном размере при масштабе 100 %.
Дополнительная информация о настройке документов для печати приведена в разделе Настройка документов для печати.
Изменение области просмотра
Можно просмотреть другую часть монтажной области одним из следующих способов:
- Выберите Просмотр >Подогнать все по размеру окна, чтобы отобразить на экране все монтажные области.
- Выберите Просмотр >Подогнать монтажную область по размеру окна, чтобы отобразить на экране активную монтажную область.
- На панели «Навигатор» нажмите область миниатюры, которую нужно просмотреть в окне иллюстрации. Или перетащите область просмотра (цветную рамку) в другое место на миниатюре.
- Выберите инструмент «Рука» и перетащите графический объект в нужном направлении.
Обзор панели «Навигатор»
Панель «Навигатор» («Окно» > «Навигатор») используется для быстрого изменения вида графического объекта с помощью миниатюры. Цветная рамка на панели «Навигатор» (называемая областью просмотра) соответствует области, видимой в настоящее время в окне иллюстрации.
A. Миниатюра графического объекта B. Панель меню панели C. Поле «Масштаб» D. Кнопка «Уменьшение» E. Область просмотра F. Шкала настройки масштаба G. Кнопка «Увеличение»
Панель «Навигатор» можно настроить следующими способами:
- Чтобы отображать на панели «Навигатор» части графического объекта, находящиеся за пределами монтажной области, снимите в меню панели флажок с параметра «Просмотр только содержимого монтажных областей».
- Чтобы изменить цвет области просмотра, выберите в меню панели пункт «Параметры». Выберите стандартный цвет в меню «Цвет» или дважды щелкните цветное поле, чтобы выбрать заказной цвет.
- Чтобы пунктирные линии в документе отображались на панели «Навигатор» как сплошные, нажмите в меню панели пункт «Параметры палитр» и выберите параметр «Преобразовывать пунктирные линии в сплошные».
Предварительный просмотр изображения в виде контуров
По умолчанию в Adobe Illustrator задан просмотр всего графического объекта в цвете. Однако можно выбрать отображение только внешних очертаний (или контуров) графического объекта. Просмотр графического объекта без атрибутов цвета ускоряет перерисовку экрана при работе со сложными графическими объектами.
В режиме контуров связанные файлы по умолчанию отображаются в виде контуров прямоугольников со значком X внутри. Для просмотра содержимого связанных файлов выберите Файл > Параметры документа и установите флажок Показывать изображения как контуры.
В Illustrator можно просматривать иллюстрации в режиме предварительного просмотра GPU на экранах с разрешением не менее 2000 пикселей в ширину или высоту. Просмотр иллюстрации в режиме «Контуры, ГП» обеспечивает большее сглаживание контуров и ускоряет перерисовку сложных иллюстраций на экранах с высокой плотностью пикселей.
- Чтобы просмотреть все иллюстрации как контуры, выберите «Просмотр» > «Контур» или нажмите клавиши Ctrl+E (Windows) или Command+E (macOS). Выберите меню «Просмотр» > «Иллюстрация», чтобы снова просмотреть графический объект в цвете.
- Чтобы просмотреть весь графический объект в слое в виде контуров, нажмите клавишу Ctrl (в Windows) или Command (в macOS) и, не отпуская ее, нажмите значок глаза для слоя на панели «Слои». Снова нажмите этот значок, удерживая клавишу Ctrl (в Windows) или Command (в macOS), чтобы вернуться к просмотру графического объекта в цвете. Когда включен режим контуров, у значка глаза пустая середина
, когда включен режим иллюстрации — заполненная середина 
. - Чтобы просмотреть все элементы в невыделенных слоях как контуры, нажмите значок глаза для выбранного слоя, удерживая клавиши Alt+Ctrl (в Windows) или Option+Command (в macOS). Или в меню панели «Слои» выберите команду «Преобразовать остальное в кривые». Совет. Чтобы для всех элементов на панели «Слои» вернуть режим предварительного просмотра, выберите в меню этой панели команду «Предпросмотр всех слоев».
Использование нескольких окон и видов
Можно открыть одновременно несколько окон для одного документа. В каждом окне могут быть свои настройки просмотра. Например, в одном окне может быть настроен крупный масштаб для работы с деталями объектов, а в другом окне масштаб может быть мельче для раскладки этих объектов на странице.
Примечание.
В Windows можно расположить несколько открытых окон нужным образом с помощью параметров в меню «Окно». Параметр «Каскадом» располагает окна одно поверх другого со смещением вниз из левого верхнего к правому нижнему углу экрана; параметр «Мозаикой» располагает окна рядом, кромка к кромке; параметр «Упорядочить значки» располагает свернутые окна внутри окна программы.
Можно создать не несколько окон, а несколько видов. Для каждого документа можно создать и сохранить до 25 видов.
Далее приведены различия между несколькими окнами и несколькими видами:
- Если есть несколько видов, они сохраняются вместе с документом, а несколько окон — нет.
- Несколько окон можно просматривать одновременно.
- Несколько видов отображаются одновременно, только если открыто несколько окон для их показа. При изменении вида меняется текущее окно, а не открывается новое.