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

Видобування CSS | Illustrator

Пошук
Illustrator

Illustrator

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

Дізнайтеся, як виокремити й експортувати CSS-код для окремих об’єктів або всього макета, створеного в програмі Illustrator.

За допомогою програми Illustrator можна розробляти дизайн HTML-сторінок. Це – гарний наочний посібник, на основі якого веб-дизайнер у подальшому зможе написати код для відтворення макету, стилів та об’єктів у HTML-редакторі. Однак відтворення ідентичного вигляду і положення компонентів та об’єктів – це дуже тривалий і кропіткий процес.

У програмі Illustrator під час створення макета для HTML-сторінки можна також згенерувати та експортувати відповідний CSS-код, який утворює вигляд компонентів і об’єктів сторінки. За допомогою CSS-коду визначається вигляд тексту й об’єктів (аналогічно до роботи стилів символів і графіки в програмі Illustrator).   

Перегляд і виокремлення CSS-коду

Панель Властивості CSS дозволяє користувачам виконувати наведені далі дії.

  • Переглядати й копіювати CSS-код виділених об’єктів.
  • Експортувати один, кілька або всі виділені елементи документа Illustrator у CSS-файл.
  • Експортувати растеризовані зображення, використані в документі Illustrator.
  • Генерувати CSS-код для певного браузера.
Код властивостей CSS

A. Попередження, якщо деякі стилі не вдалося перетворити на CSS-код B. Діалогове вікно параметрів експорту до CSS C. Експорт виділеного CSS-коду до файлу D. Копіювання виділеного стилю до буфера обміну E. Створення CSS F. Меню панелі «Властивості CSS» G. Стилі, використані у виділених об’єктах H. CSS-код 

Щоб переглянути й виокремити CSS-код, виконайте наведені нижче дії.

  1. Виберіть Вікно > Властивості CSS.

    Примітка.

    Переконайтеся, що об’єкти у вашому документі Illustrator мають назви на панелі шарів.

  2. Щоб відобразити згенерований CSS-код:

    Для одного об’єкта:

    Виділіть об’єкт. CSS-код цього об’єкта відображатиметься на панелі Властивості CSS.

    Для кількох об’єктів:

    Натисніть і утримуйте клавішу Shift, виділіть кілька об’єктів і виберіть Генерувати CSS на панелі властивостей CSS.

    Для всіх об’єктів:

    Натисніть комбінацію клавіш Ctrl/Cmd + A, щоб виділити всі об’єкти, а потім виберіть Генерувати CSS на панелі властивостей CSS.

  3. Щоб використати згенерований CSS-код, виконайте одну з таких дій:

    Щоб скопіювати виділений код:

    • Виділіть певний код і виберіть Копіювати виділений стиль , щоб скопіювати його в буфер обміну.
    • Виберіть меню панелі властивостей CSS  , а потім виберіть Експортувати виділений CSS-код , щоб експортувати вміст у файл.

    Щоб скопіювати всі коди:

    • Не виділяйте жодної ділянки CSS-коду й виберіть Копіювати виділений стиль, щоб скопіювати його в буфер обміну.
    • Виберіть меню панелі властивостей CSS  , а потім виберіть Експортувати все, щоб експортувати вміст у файл.

  4. Зберігаючи CSS-код у файлі, вибирайте варіанти, наведені в діалоговому вікні Параметри експорту в CSS.

    Діалогове вікно «Параметри експорту в CSS»
    Параметри експорту в CSS

Зразок CSS-коду

Прямокутник із застосуванням градієнта (для всіх браузерів)

.GRADIENT_BOX { background : -moz-linear-gradient(0% 50% 0deg,rgba(255, 242, 0, 1) 0%,rgba(254, 236, 1, 1) 10.31%,rgba(253, 218, 4, 1) 24.34%,rgba(251, 190, 9, 1) 40.51%,rgba(247, 150, 15, 1) 58.28%,rgba(243, 99, 24, 1) 77.37%,rgba(238, 37, 34, 1) 97.27%,rgba(237, 28, 36, 1) 100%); background : -webkit-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(255, 242, 0, 1) ),color-stop(0.1031,rgba(254, 236, 1, 1) ),color-stop(0.2434,rgba(253, 218, 4, 1) ),color-stop(0.4051,rgba(251, 190, 9, 1) ),color-stop(0.5828,rgba(247, 150, 15, 1) ),color-stop(0.7737,rgba(243, 99, 24, 1) ),color-stop(0.9727,rgba(238, 37, 34, 1) ),color-stop(1,rgba(237, 28, 36, 1) )); background : -o-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); background : -ms-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF200', endColorstr='#ED1C24' ,GradientType=0)"; background : linear-gradient(90deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); border-style : Solid; border-color : #231F20; border-color : rgba(35, 31, 32, 1); border-width : 1px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF200',endColorstr='#ED1C24' , GradientType=1);
}

Прямокутник із застосуванням градієнта (лише для браузерів на основі WebKit)

.GRADIENT_BOX { background : -webkit-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(255, 242, 0, 1) ),color-stop(0.1031,rgba(254, 236, 1, 1) ),color-stop(0.2434,rgba(253, 218, 4, 1) ),color-stop(0.4051,rgba(251, 190, 9, 1) ),color-stop(0.5828,rgba(247, 150, 15, 1) ),color-stop(0.7737,rgba(243, 99, 24, 1) ),color-stop(0.9727,rgba(238, 37, 34, 1) ),color-stop(1,rgba(237, 28, 36, 1) )); background : linear-gradient(90deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); border-style : Solid; border-color : #231F20; border-color : rgba(35, 31, 32, 1); border-width : 1px;
}

Кілька об’єктів

.NormalCharacterStyle { font-family : Myriad Pro; font-size : 12px; } .st0 { border-style : Solid; border-color : #FFFFFF; border-color : rgba(255, 255, 255, 1); border-width : 0px; } .GRADIENT_BOX { background : -webkit-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(255, 242, 0, 1) ),color-stop(0.1031,rgba(254, 236, 1, 1) ),color-stop(0.2434,rgba(253, 218, 4, 1) ),color-stop(0.4051,rgba(251, 190, 9, 1) ),color-stop(0.5828,rgba(247, 150, 15, 1) ),color-stop(0.7737,rgba(243, 99, 24, 1) ),color-stop(0.9727,rgba(238, 37, 34, 1) ),color-stop(1,rgba(237, 28, 36, 1) )); background : linear-gradient(90deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); border-style : Solid; border-color : #231F20; border-color : rgba(35, 31, 32, 1); border-width : 1px;
}

Пов’язані теми

Маєте запитання чи ідею?

Запитайте у спільноти

Якщо ви маєте запитання або хочете поділитися ідеєю, долучайтеся до обговорень у Спільноті Adobe Illustrator. Будемо раді почути вашу думку.

Отримуйте допомогу швидше й простіше

Новий користувач?

Швидкі посилання

Переглянути всі ваші плани Керування вашими планами
Переглянути швидкі посилання
Приховати швидкі посилання

Юридична інформація    |    Політика онлайн-конфіденційності