5 заметок с тегом

illustrator

Как верстать веб из иллюстратора

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

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

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

Это приоритет пункт. Фундаментальный.
Работа с макетом идет в связке Иллюстратор → Фотошоп → 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.

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

 87   2016   illustrator   верстка   программисту

Экспорт в люстре — про package

cover! white transparent

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

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


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
Это полноценная альтернальтива подготовки макета к передаче, если бы мы собирали все ссылки руками, только теперь за вас это делает иллюстратор.


Итого

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

Embed Links Package
Скорость подготовки к работе + +
Удобство подготовки + +
Быстродействие проекта + +
Вес проекта + +
Малая численность файлов +
Вложенные шрифты +

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

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

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

 72   2016   illustrator   package

Математика в иллюстраторе

cover!

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

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

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

 47   2016   illustrator   фишка

Ссылки в макете — делаем круто

cover!

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

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

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

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

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

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

 132   2015   illustrator   photoshop   underline   подчеркивание   ссылка

Почему стоит работать именно в иллюстраторе?

cover!

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

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

Статья, написанная на Хабре от Turbomilk в 2012 году, актуальна и сейчас. Хотя в 2015 году уже и в фотошопе появились артборды, остальной инструментарий по прежнему не такой комфортный и грань между программами хоть и стала незначительной, но чувствуется и предпочтение все равно отдается иллюстратору. И тому 10 причин, которые можно считать дополнением записи 2012 года.

1. Артборды

Наглядная разница между фотошопом и иллюстратором до 2015 года.

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

CTRL+F — вставить поверх выделенного объекта

CTRL+B — вставить под выделенный объект

CTRL+SHIFT+V — скопировать объект во все артборды

Продуктивность увеличивается, когда необходимо изменить утвержденный элемент на 20 страницах макетов. В таких случаях экономия времени начинается с сокращения сроков вдвое-втрое-вдофига раз.

Как это происходит:
Правлю 1 Артборд → Удаляю старые объекты на остальных → Вставляю правки

2.Режим (юнитной/модульной) сетки

Одна из самых важных и удобных функций, без которой вы вряд ли уже представите себе работу удобной. Чуть больше года работы в режиме «сижу на люстре» я всегда генерировал на сайте модульную сетку с нужным числом колонок. Теперь обхожусь без нее, за счет включения режима отображения сетки. Месяц назад во время сотрудничества Андрей Ревин открыл мне глаза на ее действительную необходимость. Но при условии настройки по своей методе.

CTRL+’’ — вкл./откл. отображения сетки

CTRL+SHIFT+’’ — вкл./откл. привязки к сетке

Таким образом я всегда уверен что объект вписанный в модуль занимает 100рх и все кнопки и картинки в макете выравниваю по юнитам. Работа с текстом тоже упростилась — сетка показывает и вертикальный ритм.

Для большего удобства работы, сетка настраивается на шаг «Юнита» 10рх, а «Модуля» 100рх.

Для более быстрой и удобной работы рекомендуется не только включать саму сетку, но и привязку к ней, хотя в отдельных случаях (например в работе с текстом) от привязки придется отказаться и передвигать объекты по пикселям.

3. Работа с шрифтом

Часть работы состоит в подборе шрифтов, поэтому в макете часто получается микс из разных наборов, который нужно «причесать». В таких ситуациях жизненно важно помогает инструмент пипетка. Простое нажатие копирует стиль (цвет, фонтфемили, размер), а игра с альтом и шрифтом копировать лишь часть параметров.
Гифки для наглядности:

Клик пипеткой копирует стили объекта: цвет, фонтфемили, стиль начертания, прозрачность.
Зажатый шифт — копирует лишь цвет. Стиль и фонтфемили остается прежним.
 
Зажатый альт — альтернальтива обычному режиму: взятый первым кликом стиль, применяется ко всем объектам, на которые применена пипетка.

Есть еще и возможность изменить написание слова/фразы/предложения через Type → Change case в строго строчные, каждое слово с заглавной буквы и т. д. т.п.

4. Режим просмотра Outline

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

Переход в Outline — CTRL+Y

Слева показан обычный режим, справа аутлайн.

5. Группы объектов

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

Вход в группу изолирует от объектов, находящихся вне группы.

 
А для еще более удобной работы, можно использовать Direct Selection Tool. Белый курсор игнорирует группы и выделяет объект в прямой видимости.

Direct Selection Tool игнорирует группы и позволяет выделить один или несколько нужных объектов

6. SVG

Иконки и иллюстрации в SVG, это малый вес файла (а значит и быстрая его загрузка на сайте) да и безупречное (пользователи Retina оценят) качество.

7. Формат файлов

Можно работать и в формате ai. Но истинной ценностью для меня стал pdf. Исходник можно открыть даже не имея дополнительного ПО (Акробат стоит у всех, так как работа с ним связана даже у менеджера). Значит, мне как исполнителю не нужно сохранять дубликаты исходников в виде превью в jpeg, а клиенты всегда имеют возможность быстро найти нужный исходник и просмотреть его. Экономия времени, отсутствие бардака. Все счастливы.

8. Вес проекта

Иллюстратор позволяет работать с графикой, ссылаясь на местоположение файла. Дублирование «ссылки» по артбордам не увеличивает вес до размеров автобуса, так как физически мы по прежнему имеем только одну картинку, которая отображается на нескольких Артбордах проекта. При этом вес проекта сокращается с 2Гб, до 300Мб. Числа взяты из реальных примеров.

9. Экспорт множества артбордов

При работе с прототипированием и кучей экранов, команда File → Export облегчат жизнь и сократят время на сохранение материала в 3-4 раза, делая экспорт артбордов автономно без вашего участия. В больших проектах это как урок выживания.

10. Продуктивность

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

На скорость работы влияет и подход программы к обработке информации. Проект весит в десятки раз меньше и потому обрабатывается значительно быстрее.

И еще несколько приятных мелочей

  1. Иллюстратор более адекватно и приближенно к вебу отображает шрифты. Понятное дело что каждый браузер рендерит все по своему, но в отличии от фотошопа, люстра хотя бы не так сильно лжет.
    2. Иллюстратор корректнее (нежели фотошоп) сохраняет растровую графику, которая претерпела редакцию (искажение, масштабирование, поворот). Качество картинки на выходе может быть разительным. Кто бы мог подумать.
  2. Не смотря на всю направленность на «вектор», есть режим пиксельного отображения результата. Режим позволяет увидеть как будет выглядеть результат работ при экспорте проекта в растровое изображение.
  3. В версии CC есть функция работы с CSS стилями. Программист скажет спасибо.

Что еще почитать
Как верстать из иллюстратора

 1 комментарий    119   2015   illustrator   веб   дизайн