Неоднократно сталкивался с проблемой, когда клиент отдавал на верстку готовый макет из люстры программистам со стороны и люди дико шокировались, ведь «где это слыхано, верстать из иллюстратора, когда мы работаем в фотошопе?»

Спокойно, парни, жизнь налаживается, я наконец написал заметку с подробными пояснениями как комфортно работать. Не благодарите, это и в общих интересах :)
 
 

Сохранение иллюстраций.

Это приоритет пункт. Фундаментальный.
Работа с макетом идет в связке Иллюстратор → Фотошоп → Save for web.
Быстрее, чем сохранить готовый объект за 5 секунд пока что не изобрели:

1. Выделили нужный объект в иллюстраторе → Ctrl+C
2. Развернули фотошоп → 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

Базово отображает параметры заливкии обводки.

Shift+F6

Помимо этого там же висят все наложенные эффекты на объекте. Чаще всего можно встретить следующие:

1. Pach → Offset Pach
   Увеличение или уменьшение обводки объекта (актуально для кнопок). Положительный параметр Offset — увеличивает размеры
   Отрицательный параметр — уменьшает.
2. Styliz → Drop Shadow
   Падающая тень. В параметрах висят сила размытия, цвет, прозрачность и смещение по осям X и Y.
3. Styliz → Round Corners
   Скругление краев. Ранее именно так скругляли края у кнопок в версии CS5. Теперь эта функция есть в панели Transform.
   Актуально до сих пор и для векторных объектов, которые не верстаются, а вставляются как SVG или растр.
4. Blur → Gaussian Blur
   Сила размытия. Больше актуально для приложений. В вебе встречал размытие, реализованное именно скриптом не так уж и часто.
    
    

Шрифты

В самом начале рассказал где взять шрифты из проекта.
Помимо простых шрифтов, в работе используются шрифты-иконки fontawersome. Это замечательный проект, был разработан замечательным дизайнером Dave Gandy

На сайте fontawersome можно скачать полный набор этого шрифта (декстоп, веб+цсс). Так что при желании шрифт рекомендуется именно встроить в сайт и он будет замечательно работать. Для удобства верстки воспользуйтесь базой всех шрифтов и кодами.

А можно сверстать и по старинке, сохранить в SVG или PNG.

Что еще почитать
Почему лучше дизайнить сайты в иллюстраторе, а не фотошопе

как лучше готовить исходник для работы и почему

Статья разделена на два основных этапа: Ручная подготовка материала и автоматическая, но суть является одинаковой, потому как наша цель — передать исходники программисту, чтобы он мог нормально работать с проектом.
Начнем конечно же с ручной.

1.1. Вкладываем (Embed)

Вложить файлы в исходник можно двумя почти одинаковыми способами.

Вложить конкретный файл, нажав кнопку вверху под основным меню.
Либо вложить сразу группу файлов через палитру Links (выделив все шифтом).

Вкладывать проще и быстрее как минимум вдвое-втрое, чем собирать вложенные файлы с разных папок и проектов. Это не все. Проект проще передать на использование — программист или дизайнер просто откроет pdf/ai файл и все. Не нужно будет указывать откуда искать все ссылки, не будет лишнего бардака.

Тут два варианта — когда мы вкладываем в pdf/ai залинкованные объекты и не вкладываем.

Выбор неоднозначный и скорее будет зависеть от проекта, с которым мы работаем.

На этом плюсы заканчиваются.

Начинаются минусы:

1. Исходник начинает весить больше. Случается даже что вес одного файла может быть больше, чем если бы мы просто приложили ссылки к исходнику с ссылками.
2. Из-за излишней громоздкости — запущенный проект начинает притормаживать.
3. Чтобы редактировать вложенный в проект psd надо его куда-то «отцепить» (сохранить куда нибудь)
    
    

1.2. Не вкладываем (Links)

Чтобы все заработало как полагается — все залинкованные объекты копируем в одну отдельную папку и отдаем эту папку вместе с файлом проекта, а программист/дизайнер уже при открытии указывает где искать ссылки.

Самый большой плюс — это в целом общий вес проекта: Сохраняя итерации и используя одни и те же ссылки psd/jpeg/png/svg, отдельно каждый ai/pdf будет весить значительно меньше. В районе 5-10мб в среднем, реже ближе к 20+

На скриншоте видно, как резко увеличился вес с 7мб, до 77 и 600+ и как затем вес упал до 55мб.

Для наглядности подкрасил зоны цветом:

1. Обходясь ссылками, проект всегда будет иметь вес, схожий с зеленой зоной
2. В красной зоне были вложены иллюстрации внутрь исходника
3. В синей иллюстрации заменял на урезанные версии. Оригиналы для верстки высылал отдельным архивом.

Благодаря весу, проект не зависает и позволяет резво работать.
Все psd можно сразу закинуть в фотошоп и работать без лишних затрат времени.

Минусы:
Затраты времени при подготовке к передаче:
Если все исходники-ссылки я заблаговременно не перенес в выделенную папку проекта, а накидал в люстру из смежных или других проектов, то начинается долгий сбор всех файлов из кучи папок.

Для кого-то — неудобное хранение, держать отдельно папку и разводить там этот бардак вложенных ссылок. Правда этого бардака не избежать, если нужно будет редактировать psd, но это история выше.

В целом этот минус скорее «приукрашен», нежели является реальным

2. Package (Автоматическая подготовка)

Эта функция знакома полиграфистам, работающим в InDesign. Там тоже нужно собирать все залинкованные картинки, исходники и шрифты для передачи в печать. В полиграфии количество шрифтов может быть заведомо большим и для автоматизации процесса, пользуются этой функцией.

Работает принципу сбора линков руками

Функция доступна по пути File → Package или комбинацией Alt+Shift+Ctrl+P

Проект экспортированный через Package с вложением всех файлов в проекте, включая шрифты

В иллюстраторе же, ее я обнаружил при переходе с CS5 на CC 17.1
Это полноценная альтернальтива подготовки макета к передаче, если бы мы собирали все ссылки руками, только теперь за вас это делает иллюстратор.

Итого

Соберем все в одну табличку…

… и получим следующую картину: Процедура автоматического сбора «ссылок» решила все проблемы, с которыми ранее сталкивался дизайнер, подготавливая исходник на передачу руками.

Вкладывать файлы в проект есть смысл, когда в нем мало графики: нету смысла заморачиваться ради пары тройки вложенных растровых картинок.

В остальных случаях всегда пользоваться Package. Теперь это делается даже быстрее чем прикреплять файлы внутрь проекта и еще плюс к этому программа сама вытащит нужные шрифты и сделает дубликаты в проекте, на случай если если их вдруг не будет.

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

Можно сложить, отнять, умножить и разделить.

В Скетче, к слову, такая возможность тоже есть, но об этом наверное итак знают.
К сожалению, фотошоп не знает что так можно делать. Может быть когда нибудь и научится, но не в 2015 CC.

Подчеркивание можно сделать руками или встроенными средствами в программе.

Во втором случае — единственный и одинокий плюс: это скорость (линия завязана на конкретном слое и в случае форматирования текста, подчеркивание не придется двигать руками).

А вот о таких возможностях как толщина, цвет, размер пунктира и отступ линии можно забыть даже не вспоминать, если линию делаете автономно, а не руками.

Функция пунктирной линии и ее параметры доступна только в иллюстраторе

Автоматическое подчеркивание глючит: Если не обратили на это внимания сразу, то посмотрите в картинку в шапке блога (линия стала в 3й строке толщиной в 2px).

Выводы:
Да, это дольше, но значительно круче.
Чаще всего, дизайнер, игнорирующий сей факт — закономерно приравнивается к неопытному: Халатность непростительна.