Извлечение CSS | Illustrator
Узнайте, как извлечь и экспортировать код CSS для отдельного объекта или для всего макета, созданного в Illustrator.
В Illustrator можно создать вариант оформления для страницы HTML. Он может служить наглядным руководством для разработчика веб-страниц, создающего код макета, стилей и объектов на странице с помощью редактора HTML. Однако точная реализация внешнего вида и положения компонентов и объектов требует значительных затрат времени и усилий.
При создании макета страницы HTML в Illustrator можно также сформировать и экспортировать лежащий в его основе код каскадных таблиц стилей, определяющий внешний вид компонентов и объектов на данной странице. Каскадные таблицы стилей (CSS) позволяют управлять внешним видом текста и объектов (подобно стилям символов и графики).
Просмотр и извлечение кода каскадных таблиц стилей
С помощью панели Свойства CSS можно выполнить следующие действия:
- Просмотр и копирование кода CSS для выбранных объектов.
- Экспорт одного, нескольких или всех выбранных элементов Illustrator в файл CSS.
- Экспорт используемых изображений, допускающих растеризацию.
- Формирование кода CSS для конкретного браузера.
A. Предупреждение о том, что некоторые стили не удалось сконвертировать в код каскадных таблиц стилей B. Диалоговое окно «Параметры экспорта каскадных таблиц стилей» C. Экспорт выделенных каскадных таблиц стилей в файл D. Копировать выделенный стиль в буфер обмена E. Создать CSS F. Меню панели «Свойства CSS» G. Стили, используемые в выделенных объектах H. Код каскадных таблиц стилей
Чтобы просмотреть и извлечь код CSS, выполните следующие действия:
Используем Adobe Illustrator для создания макета страницы
Для начала посмотрите на то, что мы будем стараться сделать:
Шаг первый
Создадим новый документ шириной 960px и произвольной высотой. Я выбрал такую ширину, потому что, судя по посетителям нашего сайта, у большинства из них немаленькие мониторы.
Не забудьте выставить Color Mode в RGB.
Шаг второй
Чёрные границы на картинке ниже обозначают размеры создаваемого нами документа (область между ними ещё называют artboard). Мне нравится помещать скриншот с чистым окном браузера в качестве подложки: гораздо легче воспринимать страницу такой, какой она должна получиться.
Шаг третий
Следуюший шаг очень важен. Вы, разумеется, можете выбрать произвольный масштаб (Zoom) и даже изменять его в процессе работы, но имейте в виду, что текст на странице должен быть удобочитаемым при масштабе 100% (1:1). Для изменения масштаба вы можете использовать отмеченное ниже поле.
Шаг четвёртый
Вы можете скрывать и отображать границы рабочей области тогда, когда вам это нужно. Для её сокрытия вам нужно выбрать команду View > Hide Artboard. Есть только одна проблема: такая операция занимает слишком много времени. Поэтому, советую вам использовать специальное сочетание клавиш для этого: Command + Semicolon (;).
Шаг пятый
Чтобы легко разметить иерархию документа и сбалансансировать её, вы можете, для начала, разметить страницу серыми прямоугольниками, как это сделал я. Тонкие длинные прямоугольники — это будущий текст.
Шаг шестой
Когда вы будете уверенным в разметке страницы, вы можете удалить прямоугольники, заменив их направляющими (Guide lines).
Шаг седьмой
Используя в качестве отправных точек направляющие, добавьте на страницу различные элементы: навигацию, текст, логотип, изображения и иконки, по вашему вкусу. Когда вы наиграетесь с элементами интерфейса, попробуйте убрать направляющие и посмотреть на плоды своей работы. Может возникнуть такая ситуация, что направляющие будут работать против вас. Подстройте их, чтобы они знали своё место.
Шаг восьмой
Доведите шапку страницы до совершенства, добавив в неё изображения, иконки.
Шаг девятый
Я решил добавить голубого цвета в шапке.
Шаг десятый
Теперь можно переходить к оформлению текста. Определите, как будут выглядеть заголовки и ссылки. Я считаю, что лучше сразу сделать это, чтобы потом можно было сосредоточиться на разработке сайта (когда прийдёт время).
Шаг одиннадцатый
Существует несколько способов подготовки дизайна для WYSIWYG-редакторов (например, Adobe Dreamweaver). Первый предполагает использование слайсов (Slice). Их можно создать с помощью тех же направляющих или выделением. Сделаем с помощью направляющих: перетащим и расположим их вокруг каждого элемента-ссылки на странице. В нашем примере, все четыре иконки являются ссылками: ведут на отдельные страницы на нашем сайте.
Шаг двенадцатый
Когда вы разметите направляющими нужные блоки на странице, можно превратить их в настоящие слайсы. Для этого используем команду Object > Slice > Create from Guides. Я заметил, что Illustrator может не сделать соответствующие слайсы по первому требованию, поэтому я повторяю эту операцию три или четыре раза. Когда всё будет готово, появятся чёрные пронумерованные блоки.
Шаг тринадцатый
Для сохранения сделанных слайсов, используйте File > Save for Web & Devices. . Выделяйте с помощью Slice Select Tool (k) нужные для сохранения слайсы. Вы можете выбрать несколько таких блоков, зажав Shift. На панели справа выберите нужные вам параметры сохранения изображений. JPEG, например, больше подходит для изображений с несколькими цветами, GIF — для изображений с маленьким числом цветов и большими однотонными областями, а PNG — для сохранения прозрачности в изображениях (однако же, вам предстоит встретиться с чудаком по имени Internet Explorer в случае использования последней). Выберите нужное вам качество (можете поиграться с настройками) и нажимайте Сохранить.
Шаг четырнадцатый
Выберите место для сохранения файлов. Я выбрал Рабочий стол. Не забудьте выставить в поле Format значение Images Only.
Шаг пятнадцатый
На вашем рабочем столе появится папка с именем Images. Внутри — слайсы, которые теперь стали изображениями.
Шаг шестнадцатый
Очистите все направляющие командой View > Guides > Clear Guides. Далее, нарисуйте направляющие вокруг тех объектов, которые вы намерены разрезать сейчас. При наведении указателя на меню, оно должно менять свой цвет. Вам нужно разрезать его для всех используемых вами оттенков.
Шаг семнадцатый
Выберите слайсы, которые вы хотите сохранить. Навигация в моём примере как раз подходит для сохранения в GIF (не содержит изображений и большого количества цветов). Если вы хотите использовать обычные шрифты, то вам следует оформить нафигацию с помощью HTML.
Шаг восемнадцатый
Назовите изображения как вам угодно. Если вам не хочется этого делать, их имена будут выбраны автоматически.
Шаг девятнадцатый
При сохранении изображений в ту же папку, что и в прошлый раз, она будет содержать и новые, и старые изображения. Не забудьте повторить шаги 16-18 для других состояний кнопок навигации.
Шаг двадцатый
Имейте в виду, что это не единственный вариант развития событий. Вы можете экспортировать слайсы вместе, включая или отключая нужные при редактировании страницы.
Другой метод создания слайсов заключается в выделении объекта и выполнении команды Object > Slice > Create from Selection. Вы можете использовать любой способ для создания слайсов, какой больше нравится.
Шаг двадцать первый
В определённых случаях вам не понадобится написанный прямо в Illustrator текст, поэтому вы его можете спокойно удалить (до экспорта слайсов).
Шаг двадцать второй
Снизу изображение, указывающее на то, что я удалил текст после разметки слайса. Теперь его можно экспортировать.
Крайний шаг
Посмотрите ещё раз на то, что у нас получилось.
Я уверен, что вы почувствовали лёгкость при работе с Adobe Illustrator. В нём очень просто создавать макеты любой сложности: вы можете полностью контролировать процесс создания макета страницы.
Как сделать флаер [часть 3]
![Как сделать флаер [часть 3]](http://verovski.com/wp-content/uploads/2011/02/preview2.jpg)
Вот мы подошли к заключительной части этого глобального обзора. В прошлой статье о флаере мы закончили графику. В этой мы создадим правильный файл в Иллюстраторе и закончим верстку. По правде говоря дизайн флаера выполнен таким образом, что никакого графического файла в Фотошопе можно было и не создавать. Судите сами, из графики на флаере лишь кегли и грудастая тетенька. Сам флаер выполнен в весьма «векторообразно». Тетеньку и кегли можно было вполне обработать отдельно, а сам флаер с нуля создавать в в Adobe Illustrator. Все зависит от графики флаера. Иногда создать флаер в полный размер в Фотошопе необходимо, иногда хватит лишь несколько растровых элементов, которые потом будут импортированы в Illustrator, CorelDRAW, InDesign или что вам больше нравится. Так как же правильно верстать? Стоит ли закончить флаер в Фотошопе? Или же него в нем даже не нужно начинать? Возможно удобнее было бы подготовить пару картинок, импортировать их в Иллюстратор, и там все закончить? Никакой принципиальной разницы нет. Все зависит от того, как вам удобнее.
Верстка в Фотошопе или Иллюстраторе?
Ниже я подготовил несколько пояснительных примеров.
Мы видим 2 отдельных кофейных куска. Не трудно заметить что они оба дублируют друг друга. Очевидно это одно и тоже изображение. Как именно оно было сверстано сказать сложно. Возможно дизайнер создал цельный файл под флаер в Фотошопе, как это сделали мы с нашим флаером. А может он просто закинул картинку с кофе в Иллюстратор, дублировал её и поместил в маску.
В этом флаере лишь перчатки намекают на растровость. Хотя, конечно, флаер полностью мог быть выполнен и в Фотошопе. Лично я склоняюсь к мнению, что и перчатки, и надпись «Двойной удар», капли, брызги и задний фон были полностью сделаны именно в нем, хотя бы потому что кисти с гранжевыми кистями значительно проще найти для Фотошопа, как и все остальное. А вот серые полосы с информацией были наложены уже в векторной программе. Тем не менее, этот флаер мог с таким же успехом быть полностью выполнен в Иллюстраторе. При таком раскладе перчатки были бы импортированы в него как отдельный растровый элемент.
В этом примере растровое покрытие занимает всю поверхность листовки. На вектор намекают лишь изображения йог и надписи. Все это к тому, что если вы плохо владеете Фотошопом, вам не обязательно подготавливать в нем всю графику для флаера. Рисуйте флаер в Иллюстраторе и импортируйте лишь необходимые картинки. Если вы плохо владеете Иллюстратором, не городите в нем дизайн. Воспользуйтесь Фотошопом, а в Иллюстраторе расставьте лишь небольшие логотипы и маленькие надписи. Верстать текст в Фотошопе не критично, если этот текст достаточно большой, но только большой, заголовочный. Не увлекайтесь. Если хотите, чтобы получилось действительно качественно и хорошо, верстайте весь небольшой текст и не крупные элементы вроде логотипов в Иллюстраторе.
Создание нового файла в Иллюстраторе
Откройте Иллюстратор и создайте новый файл. Начнем с самого начала:
New Document Profile — предлагает выбрать готовые шаблоны настроек на все случаи жизни. Увы нам это не подходит, мы настроим все сами.
Number of Artboards — предлагает нам количество рабочих поверхностей, на случай если мы создаем многостраничный документ. Нам нужна только одна.
Size — предлагает выбрать размер из готовых шаблонов, но нам и это не интересно, мы создаем свои настройки.
Width и Height — размеры нашего флаера 100 на 210 миллиметров. На этот раз учитывать края на резку не нужно, для этого есть специальные механизмы.
Bleed — обозначит специальной рамочкой края под резку. При сохранении файла мы сможем сами настроить линии реза. Поставьте туда 3 мм.
Color Mode — цветовой режим конечно же CMYK, а если вы не знаете почему, вам прямая дорога в мою статью о цветовой модели CMYK.
Raster Effects — растеризация при сохранении картинки в 300dpi
Остальное пока не важно и не существенно. Нажмите ОК.
Мы получили рабочую область с красной окантовкой. Все что находится в области черной линии — это и есть наш флаер 210 на 100 мм. Расстояние до красной полоски и есть запасная часть которая пойдет на срез. А сама линия реза пройдет ровно по 210 на 100 мм. Вы помните, что мы предусмотрели область под срез и сделали флаер на 3 мм больше. Теперь встроим нашу графику в Иллюстратор. File > Place. В появившемся окне найдите наш фотошопский файл. Я надеюсь вы сохраняли его в родной формат PSD. Ведь мы работаем в программах семейства Adobe которые прекрасно совмещены друг с другом и избавляют от постоянных сохранений в разные TIFF и прочее. Если вы сделали все правильно наш дизайн появится на рабочей области.
Во время прикрепления графики у вас может появиться неожиданное окно смысл которого сводится к следующему: эй приятель, к твоей графике прикреплен профиль Euroscale Coated v2, а к этой рабочей области прикреплен совершенно другой цветовой профиль профиль Coated FOGRA27. В каком из этих двух профилей мне работать? В первой части этой статьи я останавливался на цветовых профилях. Прежде всего настройте настройки цвета так же как в вашем Фотошопе Edit > Color Settings или просто используйте профиль прикрепленного изображения вместо того, что у вас стоит по дефолту.
Теперь на вашей рабочей области графика к флаеру. Скорее всего она импортировалась не ровно. Выровняйте её Windows > Align, не забудьте отметить галочку Align Artboards.
Линк или не Линк растровой графики в Иллюстраторе?
Импортируя графику в иллюстратор мы связываем её ссылкой. Графика фактически не находится в самом файле. Вместо этого в нем находится ссылка на неё. Это крайне удобно, если вам необходимо постоянно править графический файл. Посудите сами. Вы сохраняете TIFF. Импортируете. А далее вам говорят что здесь и здесь надо подправить. Вы возвращаетесь в исходник, исправляете, сохраняете TIFF, встраиваете его, подгоняете. А если исправления постоянно? А если таких файлов 10? А если подобное каждый день. В свое время это была основная причина по которой я пересел с Corel Draw на Illustrator. Корел связан со своим растровым редактором — Photo-Paint PRO. А Иллюстратор с Фотошопом. Но смысл ссылки прежде всего в том, что размер графического файла не находится в файле Иллюстратора. Таким образом у вас получается комплексный проект из нескольких файлов, которые прикреплены друг к другу.
Конечно же графику можно и прикрепить к Иллюстратору. В этом случае она потеряет связь с Фотошопом, как и возможность быстрого редактирования. Так как же лучше? Оставлять ссылку или встраивать всю графику внутрь? Я бы сказал так: серьезную графику с множеством слоев и размером под 100 мг импортировать ссылкой. А всякую мелочь, вроде небольших картиночек прикреплять.
Верстка в Иллюстраторе, почему?
Итак вы уже знаете, шрифты, маленькие, а заодно и большие необходимо накладывать в Иллюстраторе, или любой другой векторной программе подходящей для верстки. А почему же нельзя закончить свой любимый флаер в Фотошопе и не мудрить? Все очень просто. 300dpi достаточно чтобы напечатать качественную растровую фотографию, но не достаточно, что бы напечатать текст шрифтом 6pt. Вся графика при печати рипуется, то есть растрируется в битмап. Шрифты, а точнее векторные пути рипуются на офсете с разрешением 2400dpi. Соответственно текст будет обрабатываться РИПом, образно выражаясь, как растр разрешения 2400dpi с соответствующим качеством краев. А теперь представьте фотографию с разрешением в 2400dpi. Такая фотография будет весить гигабайты.
Растровые картинки (фотореалистичные изображения) не нуждаются в таком разрешении т.к. визуально на отпечатке детализация не теряется, поэтому для просчета на РИПе достаточно разрешения картинок 225-300dpi (иначе фотография будет риповаться неделю). Т.к. вы не можете использовать в Фотошопе внедренный растр разного разрешения, то остается вариант делать текст вектором. Хотя для тех, кто любит поизвращаться, можно в программах, позволяющих работать с разным разрешением в одном файле (Illustrator, InDesign) импортировать текст, созданный в растре с разрешением 2400dpi.
Сохранение в PDF в Иллюстраторе
Повторюсь, в этой статье мы не учимся работать в Иллюстраторе и Фотошопе. Мы не учимся создавать красивые флаеры и не учимся дизайну. Мы лишь проходим весь этап от подготовки графики к верстке, до самой верстки и подготовки файла к печати. Остаток дизайна я нарисовал простейшими инструментами иллюстратора — Pen, Reqtangular, Type tool. Выбор шрифтов, размер, расположение. Результаты моих потуг, которые я подготовил для этой статьи вы увидите ниже, а сейчас поговорим о правильном сохранении для печати. Не забудьте только превратить в кривые весь ваш текст, по окончанию работы, на случай если вам понадобится файл в будущем, а шрифты вы уже потеряете.
Открываем File > Save Copy и выбираем PDF. В появившемся диалоговом окне очень много функций и их разбор потянет на новую статью, но нам крайне важны лишь некоторые из них.
Adobe PDF Preset — содержит готовые шаблоны настроек, но в этот раз, мы воспользуемся ими. Выбирайте PDF/X-1a 2001. По сути эта опция полностью подготавливает файл к печати, так как является на сегодняшний день основным печатным стандартом. Не смотря на то, что Adobe в последствии его усовершенствовала, выпустив и PDF/X-1a 2003 и PDF/X-3a 2002 и PDF/X-4a 2008 другие настройки PDF широкого распространения не имеют.
Добавьте по желанию галочку на Embed Page Tumbnails и View PDF after Saving и переходите к вкладке Marks and Bleeds
Линии реза (Bleeds)
Если вы помните то размер нашего файла в Иллюстраторе 100 на 210 мм в то время как размер реальной графики 106 на 216 мм. Лишнее, грубо говоря, торчит за пределами рабочей области. При сохранении PDF Иллюстратор обрезает все, что находится за реальными размерами рабочей области. Линии реза же выставляются на уровне этих размеров. Проблему исправляет настройка краев, которая позволяет открывать наш запас на нужное количество миллиметров. 
В графе Bleed кликните по галочке Use Document Bleeds Settings, что означает «Используйте настройки линий реза документа». Если же вы не выставляли эти настройки при создании файла, просто выставите их сейчас. Так как в начале статьи мы заполнили их, просто нажимаем галочку. В разделе Marks (метки) поставьте Trimm Marks (Линии реза), а так же Color Bars и Page information. Вот и все! 
Как верстать веб из иллюстратора
Неоднократно сталкивался с проблемой, когда клиент отдавал на верстку готовый макет из люстры программистам со стороны и люди дико шокировались, ведь «где это слыхано, верстать из иллюстратора, когда мы работаем в фотошопе?»
Спокойно, парни, жизнь налаживается, я наконец написал заметку с подробными пояснениями как комфортно работать. Не благодарите, это и в общих интересах 🙂
Сохранение иллюстраций.
Это приоритет пункт. Фундаментальный.
Работа с макетом идет в связке Иллюстратор → Фотошоп → Save for web.
Быстрее, чем сохранить готовый объект за 5 секунд пока что не изобрели:
- Выделили нужный объект в иллюстраторе → Ctrl+C
- Развернули фотошоп → Ctrl+N → Ctrl+V → Ctrl+Shift+Alt+S
Пояснение:
Скопированный объект из иллюстратора хранится в памяти с параметрами размеров и других свойств. При создании полотна, ФШ предлагает размер, подходящий под объект из буфера (Document type: Clipboard). Поэтому вводить ничего не нужно, вставляй и сохраняй.
Базовая настройка Иллюстратора
При открытии проекта, иллюстратор спросит где искать все залинкованные иллюстрации, которые были вложены в проект. Показать что в папке Links Шрифты так же прилагаются, в папке Fonts. (упаковываются туда даже стандартные, не удивляйтесь)
Комбинация Вкл/Выкл.
Сетку Ctrl+’’
Направляющие Ctrl+:
Все объекты ровняются по сетке и кратны ее размерам. Включаем сетку и направляющие, если они не включены. По ним мы сможем ориентироваться «на глаз».
Малая клетка = 10px,
Большая клетка = 100px.
Проверяем верны ли там настройки:
[скрин настройки из CS5] так выглядела настройка в CS5
[скрин настройки из CC] так выглядит настройка в CC
При необходимости ставим или убираем галочку «Grids in back».
Настройки можно проверить если очень хочется или вы работаете над мобильным приложением. Для веба я всегда выставляю размеры 10px / 100px.
Инструменты для работы
Для комфортной работы хватит 4 инструментов:
Selection tool
Чтобы выделять любые и копировать в буфер любые объекты и тексты
Горячая клавиша V
Transform
В ней отображаются параметры выделенного объекта: Размер, Положение на холсте, Скругление краев (если есть)
Палитра Shift+F8
CSS properties
Мастхев для верстки. Фишка появилась в версии CS6. Там где допустимо, показывает параметры объекта в готовом CSS коде. [скриншот]
Палитра, искать в Window
Hand tool
Чтобы быстро перемещаться по полотну, не переключаясь на сам инструмент руки, просто жми и держи пробел. Пока держишь пробел — будет вызвана рука.
Горячая клавиша H
Гикам понравятся еще пара инструментов:
Direct selection tool
Более гибкий аналог Selection tool Выделяет объект, даже если он находится в группе одним кликом. Векторные изображения выделяет не полностью, а позволяет выделять контрольные точки.
Горячая клавиша A
Type tool
В отличии от Selection tool, входит в редакцию текста не двойным кликом, а одинарным. Даже если текст в группе. Поэтому им проще работать.
Горячая клавиша T
Группы объектов
Выделяется группа слоев, вместо одного? Или разгруппировать или войти внутрь двойным кликом. Осторожно, можно встретить группу в группе, просто повторить вход, Для инструмента Direct Selection Tool (A) разгруппировывать объекты не обязательно. Достаточно кликнуть один раз по объекту и затем переключиться на Selection tool (V)
Ctrl+G — Группировать
Ctrl+Shift+G — Разгруп-ть
P.s.: Вход в сгруппированные объекты — это та самая фишка, из-за которой слои в иллюстраторе не нужны. Вся работа заключается в принципе, когда зайдя в группу, ты находишься в эффекте изоляции и объекты вне группы, становятся неприкасаемы.
Appearance
Базово отображает параметры заливкии обводки.
Помимо этого там же висят все наложенные эффекты на объекте. Чаще всего можно встретить следующие:
- Pach → Offset Pach
Увеличение или уменьшение обводки объекта (актуально для кнопок). Положительный параметр Offset — увеличивает размеры
Отрицательный параметр — уменьшает. - Styliz → Drop Shadow
Падающая тень. В параметрах висят сила размытия, цвет, прозрачность и смещение по осям X и Y. - Styliz → Round Corners
Скругление краев. Ранее именно так скругляли края у кнопок в версии CS5. Теперь эта функция есть в панели Transform.
Актуально до сих пор и для векторных объектов, которые не верстаются, а вставляются как SVG или растр. - Blur → Gaussian Blur
Сила размытия. Больше актуально для приложений. В вебе встречал размытие, реализованное именно скриптом не так уж и часто.
Шрифты
В самом начале рассказал где взять шрифты из проекта.
Помимо простых шрифтов, в работе используются шрифты-иконки fontawersome. Это замечательный проект, был разработан замечательным дизайнером Dave Gandy
На сайте fontawersome можно скачать полный набор этого шрифта (декстоп, веб+цсс). Так что при желании шрифт рекомендуется именно встроить в сайт и он будет замечательно работать. Для удобства верстки воспользуйтесь базой всех шрифтов и кодами.