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

Передові методи створення веб-графіки

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

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

Про веб-графіку

Під час розробки оформлення для Інтернету потрібно враховувати інші фактори, ніж під час розробки графіки для друку. 

Приймаючи рішення щодо веб-графіки, пам’ятайте наступне:

Використовуйте безпечні кольори Інтернету

Колір завжди є ключовим аспектом ілюстрації. Однак, ті кольори, які ви бачите на вашій монтажній області, не завжди будуть виглядати так само в браузері на іншій системі. Ви можете уникнути тремтіння (метод моделювання неіснуючих кольорів) та інших проблем з кольорами, дотримуючись описаних нижче принципів під час створення веб-графіки. По-перше, завжди працюйте в режимі RGB. По-друге, використовуйте «безпечні» кольори, що підтримуються всіма браузерами.

Дотримуйтесь балансу між якістю та розміром файлу.

Для розповсюдження зображень у Інтернеті важливо створювати файли з графікою малого розміру. Веб-сервери пересилають та зберігають файли малого розміру більш ефективно, а користувачі можуть завантажувати зображення швидше. Розмір і приблизний час завантаження веб-графіки можна переглянути в діалоговому вікні Зберегти для Інтернету та пристроїв.

Оберіть найкращий файловий формат для вашої графіки.

Різні типи графіки потрібно зберігати в різних файлових форматах, щоб вони відображалися найкращим чином, та розмір файлу найкраще підходив для Інтернету. Додаткові відомості про формати файлів можна знайти в статті Параметри оптимізації веб-графіки.

Примітка.

Існує багато шаблонів Illustrator, розроблених спеціально для Інтернету, у тому числі для веб-сторінок та банерів. Оберіть «Файл» > «Створити з шаблону», щоб обрати шаблон.

Про режим перегляду у вигляді пікселів

В Illustrator додано атрибут вирівнювання за піксельною сіткою, щоб веб-дизайнери могли створювати чіткі ілюстрації без розмиття пікселів. Коли для об’єкта ввімкнено вирівнювання за піксельною сіткою, усі горизонтальні та вертикальні контури об’єкта вирівнюються за піксельною сіткою, утворюючи чіткі, нерозмиті обведення. Поки цей атрибут об’єкта ввімкнено, після будь-якого трансформування об’єкт знову буде вирівняно за піксельною сіткою. Щоб увімкнути цей атрибут, на панелі «Трансформування» виберіть параметр «Вирівняти за піксельною сіткою». В Illustrator також можна встановити параметр вирівнювання за піксельною сіткою для всього документа, при цьому в документах для Інтернету цей параметр увімкнено за замовчуванням.  Коли цей параметр увімкнено, усі нові створені об’єкти будуть автоматично вирівнюватись за піксельною сіткою.

Докладніше про це читайте в розділі Створення контурів, вирівняних за піксельною сіткою, для робочих процесів в Інтернеті.

Під час збереження ілюстрації в растровому форматі, наприклад JPEG, GIF або PNG, Illustrator встановлює значення дискретизації 72 ppi. Ви можете переглянути як об’єкти виглядатимуть після растеризації, обравши «Перегляд» > «Перегляд у вигляді пікселів». Це особливо зручно, коли вам потрібно точно управляти вставленням, розміром і згладжуванням об’єктів у  растеризованих  .

Щоб зрозуміти як Illustrator поділяє об’єкти на пікселі, відкрийте файл, що містить векторні об’єкти, та оберіть «Перегляд», «Перегляд у вигляді пікселів» та збільшить ілюстрацію, щоб побачити окремі пікселі. Положення пікселів визначається піксельною сіткою, яка ділить монтажну область із приростом в 1‑пункт (1/72 дюйма). Щоб побачити піксельну сітку, потрібно збільшити масштаб  до  600 %. Під час переміщення, додавання або трансформування об’єктів вони прив’язуються до піксельної сітки. Внаслідок цього зникає ефект згладжування на «прив’язаних» краях об’єкта (зазвичай лівий та верхній краї). Тепер зніміть виділення з команди «Перегляд» > «Прив’язка до пікселів», та перемістіть об’єкт. Тепер ви зможете розташувати об’єкт між лініями сітки. Зверніть увагу на те, як це впливає на згладжування об’єкту. Отже, виконання  навіть  найменших корегувань може вплинути на растеризацію об’єкта.

Перегляд у вигляді пікселів вимкнений (зверху) порівняно з увімкненим (знизу)
Перегляд у вигляді пікселів вимкнений (зверху) порівняно з увімкненим (знизу)

Примітка.

Піксельна сітка є чуттєвою до початку лінійки (0,0). Якщо перемістити початок лінійки, Illustrator буде по-іншому растеризувати ілюстрацію.

Поради щодо створення зображень Illustrator для мобільних пристроїв

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

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

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

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

  • Встановіть колірний режим Illustrator у RGB. SVG візуалізується на пристроях із растровим відображенням RGB, наприклад на моніторах.

  • Аби зменшити розмір файлу, спробуйте зменшити число об’єктів (включно з групами) або зробити їх менш складними (з меншим числом точок). Використання меншого числа точок значно зменшує кількість текстової інформації, потрібної для опису художньої ілюстрації в SVG-файлі. Щоб зменшити число точок, виберіть «Об’єкт» > «Шлях» > «Спрощення» і спробуйте різні комбінації, щоб знайти рівновагу між якістю і числом точок.

  • Де можна, використовуйте символи. Символи визначають вектори, що описують об’єкт один раз, а не кілька разів. Це корисно, якщо ілюстрація містить такі об’єкти, як кнопки чи фон, що використовуються повторно.

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

  • Зауважте використання SVGZ, стисненої gzip-версії SVG. Стиснення може значно зменшити розмір файлу залежно від вмісту. Зазвичай текст стискається сильно, але вміст у двійковому кодуванні, такий як вбудовані растри (файли JPEG, PNG або GIF) стискаються незначним чином. SVGZ-файли можна розпаковувати будь-якою програмою, що розпаковує файли, стиснуті gzip. Аби успішно використовувати SGVZ, перевірте, чи здатен цільовий мобільний пристрій розпаковувати gzip-файли.

Логотип Adobe

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