Извлечение CSS | Illustrator

  1. Руководство пользователя Illustrator
  2. Основы работы с Illustrator
    1. Введение в Illustrator
      1. Новые возможности в приложении Illustrator
      2. Часто задаваемые вопросы
      3. Системные требования Illustrator
      4. Illustrator для Apple Silicon
    2. Рабочая среда
      1. Основные сведения о рабочей среде
      2. Создание документов
      3. Инструменты/комбинации клавиш по умолчанию | Illustrator
      4. Настройка комбинаций клавиш
      5. Монтажные области
      6. Настройка рабочей среды
      7. Панель «Свойства»
      8. Установка параметров
      9. Рабочая среда «Сенсорное управление»
      10. Поддержка Microsoft Surface Dial в Illustrator
      11. Восстановление, отмена и автоматизация
      12. Поворот вида
      13. Линейки, сетки и направляющие
      14. Специальные возможности в Illustrator
      15. Безопасный режим
      16. Просмотр графических объектов
      17. Работа в Illustrator с использованием Touch Bar
      18. Файлы и шаблоны
      19. Синхронизация настроек в Adobe Creative Cloud
    3. Инструменты в Illustrator
      1. Выделение
        1. Обзор
        2. Выделение
        3. Частичное выделение
        4. Лассо
      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. Создание цветка в пять простых шагов
      12. Рисование перспективы
      13. Символы
      14. Рисование контуров, выровненных по пикселям, при создании проектов для Интернета
    2. 3D-эффекты и материалы Adobe Substance
      1. Подробнее о 3D-эффектах в Illustrator
      2. Создание трехмерной графики
      3. Создание трехмерных объектов
      4. Создание трехмерного текста
    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. Вeб-графика
      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. Экспорт иллюстрации
      2. Сбор ресурсов и их массовый экспорт
      3. Упаковка файлов
      4. Создание файлов Adobe PDF
      5. Извлечение CSS | Illustrator CC
      6. Параметры Adobe PDF
      7. Информация о файле и метаданные
  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

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

При создании макета страницы HTML в Illustrator можно также сформировать и экспортировать лежащий в его основе код каскадных таблиц стилей, определяющий внешний вид компонентов и объектов на данной странице. Каскадные таблицы стилей позволяют управлять внешним видом текста и объектов (подобно стилям символов и графики). Экспорт кода каскадных таблиц стилей возможен как для отдельного объекта, так и для всего макета, разработанного в Illustrator.   

На палитре «Свойства каскадных таблиц стилей» («Окно» > «Свойства CSS») пользователи могут выполнять следующие действия.

  • Просмотр кода каскадных таблиц стилей для выбранных объектов
  • Копирование кода каскадных таблиц стилей для выбранных объектов
  • Экспорт одного, нескольких или всех выбранных элементов Illustrator в файл каскадных таблиц стилей
  • Экспорт используемых изображений, допускающих растеризацию
  • Формирование кода каскадных таблиц стилей для конкретного браузера

Просмотр и извлечение кода каскадных таблиц стилей

Примечание.

Для формирования кода CSS выполните одно из действий, описанных ниже.

  • Убедитесь в том, что на палитре данного слоя объектам в документе Illustrator присвоены имена.
  • Выберите «Окно» > «Свойства CSS», затем во всплывающем меню выберите > «Окно» и установите флажок «Создать каскадную таблицу стилей для неназванных объектов»
  1. Выберите «Окно» > «Свойства CSS».

    Код свойств CSS

    A. Предупреждение о том, что некоторые стили не удалось сконвертировать в код каскадных таблиц стилей B. Диалоговое окно «Параметры экспорта каскадных таблиц стилей» C. Экспорт выделенных каскадных таблиц стилей в файл D. Копировать выделенный стиль в буфер обмена E. Создать CSS F. Всплывающее меню G. Стили, используемые в выделенных объектах H. Код каскадных таблиц стилей 

  2. В открытом документе Illustrator выполните одно из действий, описанных ниже.

    • Выберите один объект. На палитре «Свойства каскадных таблиц стилей» отображается код каскадных таблиц стилей для этого объекта.
    • Удерживая нажатой клавишу Shift, выберите несколько объектов, затем нажмите кнопку «Генерировать каскадную таблицу стилей» на палитре «Свойства каскадных таблиц стилей».
    • С помощью сочетания клавиш Ctrl/Cmd + A выберите все объекты, затем нажмите кнопку «Генерировать каскадную таблицу стилей» на палитре «Свойства каскадных таблиц стилей».

    Отображается сформированный код каскадных таблиц стилей.

  3. Для получения сформированного кода каскадных таблиц стилей выполните одну из следующих процедур.

    • Для копирования части кода выберите ее, затем выполните следующие действия.
      • Выберите «Скопировать выделенный стиль» для копирования в буфер обмена.
      • Щелкните на всплывающем меню, затем выберите «Экспортировать выбранные CSS»
        для экспорта в файл.
    • Для копирования всего кода убедитесь в том, что в коде каскадных таблиц стилей ничего не выбрано, затем выполните следующие действия.
      • Выберите «Скопировать выделенный стиль» для копирования в буфер обмена.
      • Щелкните на всплывающем меню, затем выберите «Экспортировать все» для экспорта в файл.
  4. При сохранении кода каскадных таблиц стилей в файл выберите один из следующих вариантов.

    Параметры экспорта в 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

Вход в учетную запись