Посібник користувача Скасувати

Формат SVG

  1. Посібник користувача Illustrator
  2. Ознайомлення з Illustrator
    1. Знайомство з Illustrator
      1. Нові можливості в Illustrator
      2. Поширені запитання
      3. Системні вимоги для Illustrator
      4. Illustrator для Apple Silicon
    2. Робоче середовище
      1. Основи роботи з робочим середовищем
      2. Створення документів
      3. Інструменти
      4. Персоналізація комбінацій клавіш
      5. Монтажні області
      6. Персоналізація робочого середовища
      7. Панель «Властивості».
      8. Налаштування параметрів
      9. Робоче середовище, оптимізоване для сенсорного керування
      10. Підтримка маніпулятора Surface Dial від Microsoft у програмі Illustrator
      11. Відновлення, скасування й автоматизація
      12. Повернути перегляд
      13. Лінійки, сітки й напрямні
      14. Доступність у програмі Illustrator
      15. Безпечний режим
      16. Перегляд ілюстрацій
      17. Використання сенсорної панелі Touch Bar у Illustrator
      18. Файли та шаблони
      19. Синхронізація налаштувань за допомогою Adobe Creative Cloud
    3. Інструменти в Illustrator
      1. Виділення
        1. Огляд
        2. Виділення
        3. Часткове виділення
        4. Ласо
        5. Монтажна область
      2. Навігація
        1. Огляд
        2. Масштабування
        3. Повернути перегляд
      3. Розфарбувати
        1. Огляд
        2. Градієнт
        3. Створення фігур
      4. Введення
        1. Огляд
        2. Текст
        3. Текст на контурі
  3. Illustrator на iPad
    1. Основні відомості про Illustrator на iPad
      1. Огляд програми Illustrator на iPad
      2. Запитання й відповіді щодо програми Illustrator на iPad
      3. Вимоги до системи | Illustrator на iPad
      4. Що можна та не можна робити в Illustrator на iPad
    2. Робоче середовище
      1. Робоче середовище програми Illustrator на iPad
      2. Сенсорні клавіші-модифікатори й рухи
      3. Комбінації клавіш для Illustrator на iPad
      4. Керування параметрами програми
    3. Документи
      1. Робота з документами в програмі Illustrator на iPad
      2. Імпорт документів Photoshop і Fresco
    4. Виділення та впорядкування об’єктів
      1. Створення повторюваних об’єктів
      2. Змішати об’єкти
    5. Малювання
      1. Малювання й редагування контурів
      2. Малювання й редагування фігур
    6. Введення
      1. Робота з текстом і шрифтами
      2. Створення текстових написів уздовж контуру
      3. Додавання власних шрифтів
    7. Робота із зображеннями
      1. Перетворення растрових зображень на векторні
    8. Колір
      1. Застосування кольорів і градієнтів
  4. Хмарні документи
    1. Основи
      1. Працюйте з хмарними документами в Illustrator
      2. Надання спільного доступу до хмарних документів Illustrator і співпраця над ними
      3. Збільшення обсягу хмарного сховища для Adobe Illustrator
      4. Хмарні документи Illustrator | Поширені запитання
    2. Пошук та усунення несправностей
      1. Усувайте проблеми зі створенням або зберіганням хмарних документів Illustrator
      2. Вирішення проблем із хмарними документами Illustrator
  5. Додавайте й редагуйте вміст
    1. Малювання
      1. Основи малювання
      2. Редагування контурів
      3. Створення бездоганної піксельної ілюстрації
      4. Малювання за допомогою інструментів «Перо», «Олівець» або «Малювання кривих»
      5. Малювання простих ліній і форм
      6. Трасування зображення
      7. Спрощення контуру
      8. Визначення сіток перспективи
      9. Інструменти для роботи із символами й набори символів
      10. Налаштування відрізків контуру
      11. Створення квітки за 5 простих кроків
      12. Малювання об’єктів у перспективі
      13. Символи
      14. Створення контурів, вирівняних за піксельною сіткою, для робочих процесів в Інтернеті
    2. 3D-ефекти та матеріали Adobe Substance
      1. Про 3D-ефекти в Illustrator
      2. Створення 3D-графіки
      3. Створення 3D-об’єктів
      4. Створення 3D-тексту
    3. Колір
      1. Про колір
      2. Вибір кольорів
      3. Використання та створення зразків
      4. Налаштування кольорів
      5. Використання панелі тем Adobe Color
      6. Групи кольорів (гармонії)
      7. Панель тем Color
      8. Зміна кольорів ілюстрації
    4. Розфарбування
      1. Про розфарбування
      2. Розфарбування за допомогою заливки й обведення
      3. Групи об’єктів зі швидкою заливкою
      4. Градієнти
      5. Пензлі
      6. Режими прозорості та накладання
      7. Застосування обведення до об’єктів
      8. Створення й редагування візерунків
      9. Сітки
      10. Візерунки
    5. Виділення та впорядкування об’єктів
      1. Виділення об’єктів
      2. Шари
      3. Групування й розгортання об’єктів
      4. Переміщення, вирівнювання та розподілення об’єктів
      5. Стекування об’єктів    
      6. Блокування, приховування й видалення об’єктів
      7. Створення дублікатів об’єктів
      8. Повертання та дзеркальне відображення об’єктів
    6. Зміна форм об’єктів
      1. Кадруйте зображення
      2. Трансформування об’єктів
      3. Об’єднання об’єктів
      4. Розрізання, розділення й обрізка об’єктів
      5. Деформація гумової сітки
      6. Масштабування, нахил та деформація об’єктів
      7. Змішати об’єкти
      8. Зміна форми за допомогою конвертів
      9. Зміна форми об’єктів з ефектами
      10. Побудова нових фігур за допомогою інструментів створення фігур
      11. Робота з динамічними кутами
      12. Удосконалені робочі процеси змінення форми об’єкта завдяки підтримці сенсорного керування
      13. Редагування відсічних масок
      14. Динамічні фігури
      15. Побудова фігур за допомогою інструмента «Створення фігур»
      16. Глобальне редагування
    7. Введення
      1. Створення тексту
      2. Шрифти й типографіка
      3. Форматування тексту
      4. Імпорт та експорт тексту
      5. Форматування абзаців
      6. Спеціальні символи
      7. Створення тексту за контуром
      8. Стилі символів та абзаців
      9. Вкладки
      10. Текст і набір
      11. Пошук відсутніх шрифтів (процес Typekit)
      12. Оновлення тексту Illustrator 10
      13. Арабський шрифт і шрифт івриту
      14. Шрифти | Поширені запитання й поради з усунення проблем
      15. Створення ефекту 3D-тексту
      16. Творчі проєкти типографіки
      17. Масштабування й повертання тексту
      18. Інтервали між рядками й символами
      19. Розставлення переносів і розривів рядків
      20. Удосконалення роботи з текстом
      21. Орфографічні й мовні словники
      22. Форматування азіатських символів
      23. Компонувальники для наборів символів азійських мов
      24. Створення текстових проєктів із переходами між об’єктами
      25. Створення текстового плаката за допомогою трасування зображення
    8. Створення спеціальних ефектів
      1. Робота з ефектами
      2. Стилі графіки
      3. Створення тіні
      4. Атрибути вигляду
      5. Створення ескізів і мозаїк
      6. Тіні, свічення й розтушовка
      7. Основні дані про ефекти
    9. Веб-графіка
      1. Передові методи створення веб-графіки
      2. Діаграми
      3. SVG 
      4. Створення анімацій
      5. Фрагменти й мапи посилань
  6. Імпорт, експорт і збереження
    1. Імпорт
      1. Імпорт файлів ілюстрацій
      2. Імпорт бітових зображень
      3. Імпорт ілюстрацій із Photoshop
      4. Поміщення кількох файлів | Illustrator CC
      5. Скасовування вбудування зображень
      6. Імпорт файлів Adobe PDF
      7. Імпорт файлів EPS, DCS й AutoCAD
      8. Інформація про зв’язки
    2. Бібліотеки Creative Cloud Libraries у програмі Illustrator 
      1. Бібліотеки Creative Cloud Libraries у програмі Illustrator
    3. Зберегти
      1. Збереження ілюстрації
    4. Експорт
      1. Використання малюнків Illustrator у програмі Photoshop
      2. Експорт ілюстрацій
      3. Збирання ресурсів і груповий експорт
      4. Пакування файлів
      5. Створення файлів Adobe PDF
      6. Видобування CSS | Illustrator CC
      7. Параметри Adobe PDF
      8. Відомості про файл і метадані
  7. Друк
    1. Підготовка до друку
      1. Підготовка документів до друку
      2. Зміна розміру і орієнтації сторінки
      3. Визначення позначок кадрування для обрізання або вирівнювання
      4. Початок роботи з великим полотном
    2. Друк
      1. Накладання
      2. Друк із керуванням кольором
      3. Друк PostScript
      4. Стилі друку
      5. Позначки і дообрізний формат принтера
      6. Друк і збереження прозорої ілюстрації
      7. Трепінг
      8. Друк кольороподілів
      9. Друк градієнтів, сіток і накладань кольору
      10. Білі накладання
  8. Автоматизація завдань
    1. Об’єднання даних за допомогою панелі «Змінні»
    2. Автоматизація за допомогою сценаріїв
    3. Автоматизація за допомогою дій
  9. Пошук та усунення несправностей 
    1. Проблеми з аварійним завершенням роботи
    2. Відновлення файлів після аварійного завершення роботи
    3. Проблеми з файлами
    4. Проблеми з драйверами графічного процесора
    5. Проблеми з пристроєм Wacom
    6. Проблеми з файлом DLL
    7. Проблеми з пам'яттю
    8. Проблеми з файлом налаштувань
    9. Проблеми зі шрифтами
    10. Проблеми з принтером
    11. Поділитися з Adobe звітом про аварійне завершення роботи

Дізнайтеся, як працювати з форматом SVG, щоб використовувати XML і JavaScript для створення веб-графіки, що реагує на дії користувача витонченими ефектами на кшталт виділення, відображення підказок, відтворення аудіо та анімації.

Про формат SVG

Формати бітових зображень для Інтернету – GIF, JPEG, WBMP та PNG – описують зображення за допомогою сітки пікселів. Файли, які отримуються у результаті, зазвичай громіздкі, обмежені до певної роздільної здатності (часто низької) та складно передаються через Інтернет. З іншого боку, SVG є векторним форматом, який описує зображення у вигляді форм, контурів, тексту та фільтрових ефектів. Кінцеві файли компактні та забезпечують високоякісну графіку у Інтернеті, при друці та навіть на портативних, обмежених у ресурсах пристроях. Користувачі можуть збільшувати перегляд SVG-зображень на екрані без нанесення шкоди таким параметрам як різкість, деталізація або прозорість. До того ж SVG забезпечує високий рівень підтримки тексту та кольорів, що гарантує відображення зображень у тому вигляді, який вони мають у монтажній області Illustrator користувача.

Формат SVG повністю базується на XML та пропонує багато переваг як для розробників, так і для користувачів. З форматом SVG ви можете використовувати XML і JavaScript для створення веб-графіки, що реагує на дії користувача витонченими ефектами на кшталт виділення, відображення підказок, відтворення аудіо й анімації.

Ви можете зберегти ілюстрацію у  форматі SVG  за допомогою команд «Зберегти», «Зберегти як», «Зберегти копію» або «Зберегти для Інтернету та пристроїв». Для доступу до повного набору параметрів експорту SVG скористайтеся командою «Зберегти», Зберегти як або «Зберегти копію». Команда Зберегти для Інтернету та пристроїв відкриває доступ до підмножини параметрів експорту SVG, які можна застосовувати до робіт, призначених для публікації в Інтернеті.

Налаштування ілюстрації у Illustrator матиме вплив на кінцевий файл SVG. Пам’ятайте наступні рекомендації:

  • використовуйте шари для додавання структури до файлу SVG. Коли ви зберігаєте ілюстрація у форматі SVG, кожен шар перетворюється на груповий (<g>) елемент. (Наприклад, шар із назвою Button1 стає <g id="Button1_ver3.0"> у файлі SVG). Вкладені шари стають вкладеними SVG-групами, а приховані шари зберігаються із присвоєнням властивості SVG display="none".

  • Якщо ви хочете, щоб об’єкти відображувалися прозоро на різних шарах, налаштуйте непрозорість кожного об’єкту, а не кожного шару. Якщо ви зміните непрозорість на рівні шарів, кінцевий файл SVG не відображатиме прозорість у тому вигляді, у якому вона відображувалася в Illustrator.

  • Растрові дані не підлягають масштабуванню у програмі перегляду SVG та не можуть редагуватися як інші елементи SVG. При можливості уникайте створення ілюстрацій, які підлягатимуть растеризації у файлі SVG. Сітчасті градієнти та об’єкти, які використовують ефекти растеризації, імітації, розмиття, мазків, деформації, оформлення, різкості, ескізу, стилізації, текстури та відео, підлягають растеризації під час збереження у форматі SVG. Так само й стилі графіки, які містять у собі ці ефекти, здійснюють растеризацію. Для додавання ефектів графіки без спричинення растеризації використовуйте ефекти SVG.

  • Для покращення відображення SVG використовуйте символи та спрощуйте контури у ілюстрації. Також уникайте використання пензлів, які створюють багато контурних даних, таких як вугільно-сірий, сріблясто-сірий та перо прокрутки, якщо якісне відображення ілюстрації для вас найголовніше.

  • Для додавання веб-посилань до файлу SVG використовуйте фрагменти, мапи посилань та сценарії.

  • Мова сценарію, наприклад, JavaScript відкриває безмежні функції для файлу SVG. За допомогою курсору та комбінацій клавіш можна викликати функції сценарію, наприклад, ефекти ролловеру. Сценарії також можуть використовувати об’єктну модель документа (DOM) для доступу та модифікації файлу SVG, наприклад, для вставляння або видалення елементів SVG.

Застосування SVG-ефектів

Ви можете використовувати ефекти SVG для додавання до ілюстрації графічних властивостей таких як тінь. Ефекти SVG відрізняються від їхніх бітових прототипів тим, що вони базуються на XML та не залежать від роздільної здатності. Насправді ефект SVG є ні чим іншим як серією властивостей XML, які описують різні математичні операції. Кінцеві результати відносяться до кінцевого об’єкту, а не до графіки оригіналу.

Illustrator забезпечує набір ефектів SVG за замовчуванням. Ви можете використовувати ефекти із їхніми властивостями за замовчуванням, редагувати XML-код для створення персональних ефектів або писати нові ефекти SVG.

Примітка.

Щоб змінити стандартні фільтри SVG у програмі Illustrator, відредагуйте в текстовому редакторі файл «Adobe SVG Filters. svg»,  що зберігається в папці Documents and Settings/<ім’я користувача>/Application Data/Adobe/Adobe Illustrator <номер версії> Settings/<розташування>.  Ви можете змінювати наявні визначення фільтрів, видаляти їх або додавати нові визначення.

  1. Виділіть об’єкт або групу (або кінцевий шар на панелі «Шари»).
  2. Виконайте одну з наведених нижче дій.
    • Для застосування ефекту зі стандартними налаштуваннями виберіть ефект у нижній частині вкладки «Ефект» > підменю «Фільтри SVG».

    • Для застосування ефекту з власними налаштуваннями виберіть «Ефект» > «SVG-фільтри» > «Застосувати SVG-фільтр». У діалоговому вікні виберіть ефект, а потім натисніть кнопку «Редагувати фільтр SVG» . Відредагуйте встановлений за замовчуванням код і натисніть «OK».

    • Для створення й застосування нового ефекту виберіть «Ефект» > «Фільтри SVG» > «Застосувати фільтр SVG». У діалоговому вікні натисніть кнопку «Створити фільтр SVG» ,  введіть новий код і натисніть «OK».

      Під час застосування ефекту SVG-фільтру Illustrator відображує на монтажній області растеризовану версію ефекту. Ви можете керувати роздільною здатністю зображення, яке переглядається, шляхом зміни параметру роздільної здатності растеризації у документі.

      Примітка. SVG-ефект повинен бути останнім застосованим ефектом, якщо об’єкт використовує декілька ефектів; іншими словами, він повинен відображуватися в нижній частині панелі «Вигляд» (як раз над даними прозорості). Якщо за SVG-ефектом слідують ще якісь ефекти, вивід SVG складатиметься із растрових об'єктів.

Імпорт ефектів із файлу SVG

  1. Виберіть «Ефект» > «Фільтр SVG» > «Імпортувати фільтр SVG».

  2. Виберіть файл SVG, з якого потрібно імпортувати ефекти, і натисніть «Відкрити».

Огляд панелі інтерактивності SVG

Для додавання інтерактивності ілюстрації під час експорту або перегляду в браузері користуйтеся панеллю інтерактивності SVG («Вікно» > «Інтерактивність SVG»). Наприклад, при створенні події, яка запускає команду JavaScript, ви можете швидко створювати рух на веб-сторінці в той час, коли користувач рухає курсором мишки по об’єкту. Панель інтерактивності SVG також дозволяє бачити всі елементи та файли JavaScript зв’язані із поточним файлом.

Видалення події з панелі інтерактивності SVG

  • Для видалення однієї події виділіть її та натисніть кнопку «Видалити» або виберіть команду «Вилучити подію» на меню панелі.
  • Для видалення всіх подій виберіть команду «Видалити події» в меню панелі.

Занесення до списку, додавання або видалення зв’язаних із файлом подій

  1. Натисніть кнопку «Прив'язати файли JavaScript» .
  2. У діалоговому вікні «Файли JavaScript» виберіть дані JavaScript і виконайте одну із запропонованих нижче дій.
    • Натисніть «Додати» для перегляду додаткових файлів JavaScript.

    • Натисніть «Видалити» для видалення виділених даних JavaScript.

Додавання інтерактивності SVG до ілюстрації

  1. На панелі «Інтерактивність SVG» виділіть подію. (Див. розділ «Події SVG».)

  2. Введіть відповідний JavaScript та натисніть клавішу Enter.

Події SVG

подія onfocusin

Запускає дію, коли елемент знаходиться у фокусі, наприклад, ви навели на нього курсор.

подія onfocusout

Запускає дію, коли елемент знаходиться не у фокусі (часто ц трапляється тоді, коли у фокусі знаходиться інший елемент).

подія onactivate

Запускає дію натисканням кнопки миші або клавіші, в залежності від елементу SVG.

подія onmousedown

Запускає дію, коли кнопка миші знаходиться у натисненому вигляді на елементі.

подія onmouseup

Запускає дію, коли кнопку миші відпускають на елементі.

подія onclick

Запускає дію, коли кнопкою миші клацають на елементі.

подія onmouseover

Запускає дію, коли курсор переміщають на елемент.

подія onmousemove

Запускає дію, коли курсор знаходиться на елементі.

подія onmouseout

Запускає дію, коли курсор переміщають з елементу.

подія onkeydown

Запускає дію, коли клавіша натискається.

подія onkeypress

Запускає дію в той час, коли клавіша утримується натиснутою.

подія onkeyup

Запускає дію, коли клавіша відпускається.

подія onload

Запускає дію після того, як документ SVG був повністю проаналізований браузером. Користуйтеся цією подією для виклику одночасних функцій ініціалізації.

подія onerror

Запускає дію, коли елемент завантажується невірно або виникає інша помилка.

подія onabort

Запускає дію, коли завантаження сторінки зупиняється перед тим, як елемент повністю завантажується.

подія onunload

Запускає дію, коли документ SVG видаляється із вікна або з фрейму.

подія onzoom

Запускає дію, коли для документу змінюється масштаб.

подія onresize

Запускає дію, коли змінюється розмір перегляду документа.

подія onscroll

Запускає дію, коли перегляд документа прокручується або панорамується.

Функції експорту оптимізованих для роботи в Інтернеті файлів SVG

Тепер доступна нова функція експорту SVG («Файл» > «Експорт» > «SVG»). Новий робочий процес відкриває можливості створення стандартизованих та оптимізованих для роботи в Інтернеті файлів SVG. Тепер ви можете розробляти екранні матеріали та матеріали для веб-сторінок.

Нові функції:

  • Стилі: виберіть спосіб зберігання інформації про стилі в розмітці SVG.
    • Атрибути презентації: використовує окремі атрибути XML для кожної окремої властивості стилю в кожному тегу SVG. Цей формат необхідний для використання ресурсів SVG з Android Studio.
    • Внутрішній CSS: використовує єдиний тег <style> із класами CSS, обмінюючись параметрами стилю між об'єктами з однаковими стилями. Це може призвести до зменшення розміру файлу.
    • Вбудований стиль: використовує єдиний атрибут «style» для кожного тегу SVG, що містить усі властивості стилю тегу, об'єднані в синтаксисі CSS.

Примітка: за замовчуванням для SVG вибрано стиль Атрибути презентації, оскільки він поліпшує сумісність із поширеними інструментами розробників, як-от Android Studio.

  • Шрифт. Вибирайте спосіб відображення шрифтів у файлі SVG. Контури зберігають визначення шляху  і  є найбільш сумісними.
  • Зображення. Вибирайте спосіб збереження зображень: за допомогою вбудовування в документ або у вигляді прив’язаних зовнішніх файлів.
  • Ідентифікатори об’єктів. Вибирайте спосіб призначення типів ідентифікаторів (імен) об’єктам у файлі SVG. Доступні параметри «Назви шарів», «Мінімальний» або «Унікальний». Ця функція визначає подальшу долю дубльованих назв об’єктів, а також спосіб іменування об’єктів у експортованих файлах CSS.
  • Десяткові. Вибирайте точність розміщення об’єктів. Чим вище десяткове значення, тим вищою буде точність розташування об’єктів, і тим вищою буде візуальна точність під час відтворення файлів SVG. Проте збільшення десяткового значення також приводить до збільшення розміру готових експортованих файлів SVG.
  • Зменшити. Функція оптимізує розмір SVG-файлу завдяки видаленню порожніх груп і порожніх ділянок. До того ж ця функція приводить до зменшення розбірливості отримуваного коду SVG.
  • Адаптивний. Прапорець у полі напроти цього параметра дозволяє підганяти розмір створеного SVG-файлу до розмірів вікна браузера. Більше не треба зазначати абсолютний розмір.
  • Показати код. Ця функція дозволяє відкривати експортований уміст у текстовому редакторі, встановленому за замовчуванням.
  • Показати в браузері  (значок): показує зображення в браузері, що використовується за замовчуванням.
Логотип Adobe

Увійдіть до облікового запису