Содержание
С Illustrator CC 2014 вы можете извлекать CSS из макетов и вставлять их в свой любимый редактор кода, который может включать в себя Dreamweaver CC или Edge Reflow от Adobe. В этой статье мы рассмотрим, как работает этот процесс.
Начиная
Ниже представлен простой макет в Illustrator с открытой панелью «Слои». Каждому слою присвоено имя элемента CSS.
Чтобы получить CSS для каждого компонента, просто перейдите в Window: CSS Properties. Эта панель позволяет:
- Просмотр кода CSS для выбранных объектов
- Скопируйте код CSS для выбранных объектов
- Экспорт одного или нескольких или всех выбранных элементов Illustrator в файл CSS.
- Используется экспорт растеризуемых изображений
- Создание кода CSS для конкретного браузера
Имейте в виду, что если вы не называете объекты на панели «Слои» именами классов, вы получите это сообщение в диалоговом окне «Свойства CSS»: ’Код CSS не был создан. Чтобы создать CSS для безымянных объектов, либо назовите объект на панели слоев, либо включите параметр «Создать CSS для безымянных объектов» в диалоговом окне «Параметры экспорта CSS».’
На снимке экрана ниже выбран элемент коробки, который дает вам доступ к CSS.
Вы можете использовать CSS из Illustrator по-разному. Внизу диалогового окна есть несколько выделенных значков: Параметры экспорта, Экспорт CSS, Копировать выбранный стиль и Создать CSS. Другой вариант - просто скопировать CSS из диалогового окна «Параметры экспорта CSS» и использовать его как есть. Эти параметры также отображаются в верхней части диалогового окна во всплывающем меню.
Варианты экспорта
Выбор параметров экспорта вызывает диалоговое окно «Параметры экспорта CSS», в котором вы можете выбрать, что экспортировать. Когда появляется диалоговое окно, оно делает это с настройками по умолчанию.
В разделе «Параметры» не установлен флажок «Создать CSS для безымянных объектов». Этот вариант открыт для вас, если вы не называете слои в Illustrator. Но лучше назвать все элементы CSS в Illustrator, так как это упростит их отслеживание в редакторе кода.
Также в разделе «Параметры» вы заметите, что Illustrator может создавать префиксы поставщиков для Webkit, Firefox, Internet Explorer и Opera.
В диалоговом окне вы увидите два других раздела: «Внешний вид объекта», «Положение и размер». В разделе «Внешний вид объекта» включены все параметры. В разделе «Положение и размер» мы включим флажок «Размеры», чтобы CSS отразил его в выбранном редакторе кода (которым в данном случае будет Dreamweaver).
Копировать или экспортировать
Когда вы будете удовлетворены своим выбором, нажмите OK, чтобы принять. Чтобы добавить CSS в свою дизайнерскую программу, вы можете скопировать его напрямую или использовать параметры экспорта CSS.
Как видите, наш блок в Illustrator теперь присутствует в Dreamweaver.
Другой вариант - скопировать текст в поле, показанном ниже. Для этого щелкните текст, чтобы выделить его. CSS появится в диалоговом окне «Свойства CSS». Обратите внимание, что текст имеет следующий вид: NormalCharacterStyle.
Если у вас есть разные блоки текста, вы можете захотеть переименовать их в веб-элементы, такие как h1, h2 и т. Д. Другой вариант - скопировать текст в Dreamweaver и переименовать его в соответствующий веб-элемент, в данном случае 'p'. Когда вы копируете текст в Dreamweaver, он будет выглядеть так, как показано ниже.
Экспорт SVG
Важно понимать, что сложные изображения не могут быть представлены как CSS и должны выводиться как SVG (масштабируемая векторная графика). Для этого перейдите в Файл: Сохранить как. В диалоговом окне выберите SVG и введите имя файла. В диалоговом окне «Параметры SVG» нажмите кнопку «Дополнительные параметры».
Убедитесь, что в развернутом виде установлен флажок «Адаптивный». Когда вы сохраните иллюстрацию, ее можно будет масштабировать в браузере.
Ограничения
Как видите, Adobe создала несколько ресурсов, чтобы помочь веб-дизайнерам превратить свои проекты в CSS. Однако есть кривая обучения, и, несмотря на прохождение различных руководств, весь рабочий процесс не был намечен. Эти пробелы создадут дополнительную работу для пользователя.
В отличие от Photoshop, Adobe не создала плагин Generator для Illustrator. Чтобы заполнить этот пробел, Дэвид Дераэдт создал расширение под названием Layer Exporter, которое можно использовать для автоматизации создания ресурсов изображений. Есть видеоурок, который поможет вам, но без повествования, что усложняет восприятие.
Помимо этих проблем, Adobe определенно движется в правильном направлении со своими инструментами преобразования CSS, которые ускорят рабочий процесс для веб-дизайнеров.
