Блог: статьи

Инструментарий. Часть 1. Векторная

Дмитрий ЖуковАвтор: Дмитрий Жуков
14 июня 2006

Рождение ВенерыНа заре моей творческой карьеры для меня единственным векторным редактором был Corel Draw. Я даже не задумывался о том, что бывают и другие. В Corel Draw все было как надо, пока дело не доходило до процесса растеризации. Хуже растеризации я за всю жизнь не видел. Для того чтобы импортировать все это счастье в Photoshop, приходилось сохранять вектора в чуждый для Corel и родной для Adobe формат EPS, теряя при этом часть эффектов.

Так что мое знакомство с Adobe Illustrator состоялось от безысходности. Егор — тот вообще великий мученик. Прошел через Corel Draw, Xara и Macromedia Fireworks, и блуждал бы еще долго, если бы не зацепился бы за Adobe Illustrator. Только Денисочка, умненький мальчик, тот сразу решил осваивать векторный редактор от Adobe и даже купил себе книжку.

Это я все к тому, что Adobe Illustrator для нас вовсе не идеологический выбор, как некоторые могли бы подумать, а единственный инструмент, подходящий для создания векторных иконок. Была бы возможность, мы с радостью поменяли бы его на другой. В конкурсе на самый отвратительно и неаккуратно написанный программный продукт за 500$ Illustrator занял бы почетное первое место, причем с огромным отрывом. Количество ошибок просто поражает воображение и порой выводит из себя. Но не будем о грустном…

Будем о приятном. В Adobe Illustrator совершенно загадочным образом собрались несколько возможностей, которых в таком сочетании больше нигде нет (я очень надеюсь, что когда-нибудь будут).

Как все порядочные дизайнеры, я рисовал свои первые иконки в технике пиксельной графики в Adobe Photoshop. В одной из статей Ромы Воронежского я прочитал, что для каждого файла можно открыть сколько угодно новых окон и задать в каждом из них свой масштаб. Совершенно неудивительно, что такая же возможность нашла свое место и в другом продукте компании. Разумеется, я говорю про Illustrator.

New window

Несмотря на то, что большинство иконок в наш XXI век рисуется в векторных редакторах, их вывод все равно осуществляется из растровых ресурсов. Многие могут подумать, что в этом виноваты ленивые программисты, которые не хотят реализовать поддержку по-настоящему векторных иконок. На самом деле бездушная машина просто не может растеризовать векторные иконки в небольших размерах (до 48×48 пикселей), сохранив четкость и понятность. Тут нужна рука мастера. Вы, наверное, уже догадались, что наши руки вполне подходят для этой задачи. Благодаря этому наши работы и приобрели некоторую популярность. Для многих все это время было огромной загадкой, как же мы добиваемся такой четкости. Да все просто, дорогие мои! Мы видим эти самые пиксели, но очень, сука, крупными. Помогает нам в этом волшебный и магический Pixel Preview.

Pixel preview

Как видно из нижеследующей иллюстрации, несколько окон для одного файла в сочетании с Pixel Preview способны творить чудеса.

Три окна

  1. В нижнем самом большом окне мы рисуем.
  2. В правом верхнем видим свою работу в 100%.
  3. В левом верхнем смотрим попала наша линия в пиксел или нет.

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

Layer options

В наш век, когда Adobe Photoshop стал стандартом де-факто, одним из основных требований к векторному редактору стал легкий экспорт в этот самый Photoshop. Правда у Illustrator и здесь небольшие подводные камни. К счастью, есть способ эти камни обойти. За более подробной информацией стоит обратится к давней работе Егора «Растрирование в Adobe Illustrator».

Slice toolsВ процессе экспорта и создания промежуточных изображений для демонстрации заказчику можно обойтись и без Photoshop. Наверное, все знают, что в Illustrator, как и в его растровом брате, есть функция «Save for web…». А самые внимательные, наверное, замечали упоминания в разных меню неких slices. Вообще, это тема для отдельной статьи, так что сейчас я расскажу об этом буквально в двух словах. С помощью этого инструмента вы можете разметить определенные области, каждая из которых при использовании «Save for web…» будет сохранена в отдельную картинку. Но здесь наш любимый Illustrator оказался нелюбимым сыном (а может даже дочкой) компании Adobe. В Photoshop вы можете задавать имена будущих slices прямо в процессе работы над изображением. В Illustrator все не так. Конечные имена файлов, а также формат экспорта и параметры оптимизации можно задать только в самом диалоге «Save for web…», что не очень удобно. Кстати, и при таком методе экспорта не следует пренебрегать методом растеризации, описанным в заметке «Растрирование в Adobe Illustrator». Особенно это касается шрифтов.

Напоследок хочу попросить помолиться вместе, чтобы следующая версия Illustrator с несчастливым номером 13 была написана прямыми руками и не вылетала в самый неподходящий момент.

Чуть не забыл, милости прошу качать tools1-baloon.ai, из которого я делал иллюстрации для статьи.

Условия использования

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

Комментарии

За подсказку со слайсами спасибо, попробуем :)
И все-таки вопрос с «попаданием в пиксель» остается открытым: исользовать snap to pixel или «долго и упорно» искать положения иконок, когда картинка выглядит наименее размыленной (обычно для этого приходится ставить точки в центр пикселя)? На моей лично практике от режима snap to pixel толку было мало.
Это я к чему говорю: в pixel preview прекрасно видно, к чему приведет растеризация вектора при размещении линии между пикселями. Хотелось бы выведать секреты фирмы по борьбе с подобной напастью :)
И еще: на иллюстрации обводка это Align stroke to outside?

P.S.: а бедный Jimmac умудряется-таки рисовать неплохие иконки в Inkscape :)

P.P.S.: в качестве иллюстрации на любимую многими тему «а вот скоро все иконки будут векторными» приведу неплохую статью Firewheel design.

Ответить SacRat, 14 июня 2006

Я упустил пару моментов в статье:

  1. мы стараемся не использовать Stoke, разве что в качестве промежуточного инструмента;
  2. вместо Stoke используем Offset path;
  3. координаты точке стараемся задавать руками в палитре Transform и/или рисуем в режиме Snap to pixel

Ответить joukov, 14 июня 2006

о, последний коммент отбросил часть волнений )

Ответить compgraf, 15 июня 2006

Если не секрет, то откуда такая нелюбовь к stroke?

Ответить SacRat, 15 июня 2006

Имхо, путь каждого профессионала – от панацеи к разнообразию…

Ответить Dante, 15 июня 2006

Совсем не секрет. Ну нелюбовью это назвать нельзя, а это скорее здоровое отвращение. Были времена, когда мы даже блики по краям объекта делали с помощью stroke. Но со временем пришлось отказаться от использования stroke, так как его качество растеризации заметно хуже, чем у fill. Ну и градиентом их не зальешь.

Ответить joukov, 15 июня 2006

А можно пару примеров для наглядности?
Что градиентом не зальешь, то верно, не поспоришь :)

Если не ошибаюсь, Foods как-то упоминал, что использует отдельную программу для растеризации. Может, есть смысл поэкспериментировать :) Хотя на его ранних иконках часто можно заметить алиасинг и промахи мимо пикселов.

Ответить SacRat, 16 июня 2006

Спасибо! Очень познавательно было, кстати вопрос, как вам Corel X3 по функционалу?

Ответить Игорь Иной (Onlime.ru), 27 декабря 2006

мне кажется вы зря ставите Fireworks на четвёртое место…
у него есть все вышеперечисленные функции:
- несколько окон с разным масштабом
- пиксельное превью и привязка
- слайсы (без глюков)
- кроссплатформенность и совместимость с осталными продуктами adobe

(единственное нету «mesh» заливки, но и без нее можно жить)

Ответить ArtCraft, 25 июня 2007

ArtCraft, где это мы ставим Fireworks на четвертое место? Скорее уж на третье, но не по значимости, а просто хронологически так получилось: сперва я работал в Corel Draw, потом в Xara, и потом уж в Fireworks. Перешел на AI потому, что в FW привязка к пиксельной сетке была уж очень лютая. Все таки FW — растровый редактор с векторными возможностями, а нам нужно наоборот. Сейчас, быть может, все изменилось, последние версии я не видел.

Ответить yegor, 25 июня 2007

А что можете сказать про такую поделку, как InkScape? Достойная ли это свободная альтернатива?

Ответить Werdn, 26 июня 2008

А на что же еще из хотя бы бесплатного ПО можно обратить внимание (или это единственный вариант)?
Покупать себе позволить не могу тяжеловесное по финансовому вопросу ПО. Крякать – я не утка.
В OpenOffice рисовалка совсем не нравится.

Ответить Werdn, 26 июня 2008

По рисование иконок как примере, как по мне, лучше сразу рисовать в Фотошопе. В илюстарторе есть существенный недостаток http://i.piccy.info/i5/02/11/1561102/Untitled-3.jpg

Ответить PJey, 29 мая 2011

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

Ответить joukov, 26 июня 2008

Напишите комментарий

Вы можете использовать ваш twitter или facebook. Для этого вам нужно будет авторизоваться на одном из этих сайтов, после чего вы сможете оставлять комментарии.

Connect with Facebook

Если у вас есть OpenID (например, myopenid.com), воспользуйтесь им для авторизации.

Авторизуйтесь при помощи аккаунта Турбомилк. Вы также можете зарегистрироваться на нашем сайте.

Закрыть