Adobe Photoshop vs Adobe Illustrator 490 просмотров 18 мая 2012

Дисклэймер

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

Часть номер ноль

Дизайн интернет-приложений уже давно стал отдельной веткой графического дизайна. Тут тебе и свои правила, законы, и про юзабилити не забудь, и про цвета думай, отступы... Эдакая смесь творчества и высшей математики на основе исследований и кучи цифр. Соответственно став отдельной сферой — веб-дизайн требует особого, отдельного подхода. Методики подхода, планирования, подготовки и реализации рассматривать не будем, но давайте коснемся инструментов. Сегодня попытаемся внести ясность в извечный холивар Photoshop vs Illustrator в версии CS5. Почему, зачем и нужно ли вообще. Дело то оно конечно не благодарное, сравнивать настолько разные пакеты, но так как оба продукта активно используют для наших задач — попробуем впихнуть невпихуемое.

Организация рабочего процесса

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

Особенности приручения Illustrator:

Этот дядя предлагает нам огромный контроль над элементами, тут тебе и страницы (Artboards), и слои, и группы, и символы. Все удобно, быстро, качественно. Возможность использовать режим изоляции (Isolation mode). Для этого надо всего лишь кликнуть дважды на объект.

Так как по счету изучения Иллюстратор был вторым, было весьма непривычно. Все время забывал про панель слоев, забывал создавать слои, группы — получалась каша. Со временем привык, и теперь, когда приходиться дизайнить в Фотошоп, очень не хватает артбордов и изолирования.

Artboards — появились в Иллюстраторе совсем недавно (c CS4-й, если не ошибаюсь). Такая себе многостраничность. Удобно. Позволяет размещать и оперировать в рамках одного документа кучей кучей всего всего. На практике позволяет вести все отрисовываемые страницы в одном документе. Добавляет каши в слои, т.к. постраничное разделение только визуальное. Очень не хватает Corel-овских страниц (структура аля страница — слой — объект). Надеюсь, Адоб реализует это в новых проектах.

Стоит так же отметить точный контроль над объектами. Поворот, высота, ширина, сдвиг и тп — все это вплоть до пикселя.

Скудность Photoshop:

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

Работа и не работа с растром

Фотошоп тут, конечно же побеждает. Причем даже не сражавшись. Тут тебе все! Растро-клондайк, графидилия, картинкотопия — как хочешь называй. Фильтры, каналы, резинки, маски векторные, маски растровые, adjustment-layers, фильтры, подробная настройка параметров смешивания, продолжать можно бесконечно, но надо ли? В наше время, когда общество требует уборщиц с высшим образованием, любая стреднестатистическая домохозяйка хоть раз, да пыталась сваять себе аватарку в фотошопе. Пожалуй и ты, дорогой читатель, представляешь себе возможности редактирования растра в фотошоп.

Иллюстратор и растр. В иллюстраторе растр можно таскать по артбордам, менять размер и... и... и все. Более он ни на что не годен. Тогда как быть с коллажами и прочими вкусняшками? Плэйс — говорит нам Ил. Такая себе ссылка на графический документ. Именно ссылка. т.к. после изменения оригинала, (например, не побоюсь этого слова пээсдэ-шника) в иллюстраторе тоже произойдут изменения. Удобно ли? Количество файлов растет, усложняется структура хранения проекта на диске, но! реальный размер иллюстраторовского файла не растет, что позволяет сохранять быстродействие. Но об этом позже.

Работа с текстом или кто на что учился

Современный сайт разумеется, нельзя представить себе без текстового контента. И именно поэтому он так важен. Причем важен как контроль начертаний, так и удобство просто "потягать". Прошли те времена, когда у разработчика было три стандартных гарнитуры шрифта на выбор. Теперь хочешь тебе Cufon хочешь Google Fonts — а там вкусняшек уж поболе будет. Шрифты на любой вкус цвет и размер. А этими шрифтами надо управлять.

Ни Photoshop ни Illustrator конечно же не In-design, но все-таки разработчик нам что-то оставил. Причем оставили практически идентичные инструменты. Только расположены чуть иначе. Долго рассуждать смысла нет, обсудим только яркие отличия.

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

Нужна ли работа с вектором?

Думаю вектору быть. Имхо рисовать элементы UI, иконки легче в векторе, т.к. всегда можешь подправить мелкие составляющие, форму, цвет... При надобности можешь менять размер от шестнадцатипиксельной иконки, до здоровенной заставки на весь экран. Удобно и редактируемо.

Снова теперь уже бедный Шопчик помер под Иллюстратора репчик. Не удивительно. Иллюстратор изначально задумывался именно как редактор векторной графики. Посему и побеждает он сильно и больно, по наглой синей роже. Все что душа пожелает — инструменты для создания, редактирования, преобразования, покраски. Найдется все.

В фотошопе конечно тоже есть попытки добавить векторный функционал. Но все-таки он слаб. Слишком слаб, чтоб конкурировать. Проще делать векторные элементы в Иллюстраторе и добавлять смарт-объектами в Фотошоп.

Стильные эффекты

Эффекты в иллюстраторе или стили в фотошопе штука актуальная и почти равноценная. Фотошоп атакует весьма широким набором, Иллюстратор в свою очередь мстит удобным управлением эффектов, бесконечным количеством наслоений этих элементов, но при этом у иллюстратора урезали разнообразность этих эффектов. 6 иллюстраторовских против 10 фотошоповских. Но. Ко всему привыкаешь, и вот уже спустя неделю, ты без проблем делаешь любой визуальных эффект в иллюстраторе, пусть и упрощенным способом.

Равносильно организованны и способы хранения и массового применения. Как иллюстратор, так и фотошоп умеют сохранять набор эффетктов в стили. Что так же существенно ускоряет работу.

Быстродействие и стабильность

Весьма размытое понятие. Т.к. оно напрямую зависит от документа, с которым работаешь. Но какие-то общие моменты можно все-таки отметить.

Фотошоп быстр, молод и свеж. Полноценная поддержка x64, использование возможностей графических карт при отрисовке значительно ускоряют процесс во всех его видах. Стабильность на высоком уровне, но все-таки бывает валиться. Как показывает практики, на уставшей от жизни, или неухоженной системе — раз в день бывает. А на "здоровом" и "свежем" компьютере — явление экзотическое.

Иллюстратор. Первое что бросается в глаза — длительная загрузка. То ли по причине отсутствия поддержки x64, толи из вредности своей природы, толи для придания внушительности :) После загрузки все весьма приятно, но все же далековато до ФШ. Частенько подвисает, на доли секунд, как бы дает время на подумать. Падает чаще чем шоп, бывают веселия при сохранении, бывает, сам портит свой файл, но все эти ахи страхи можно уменьшить, если отключать компрессию файлов и внедрение профилей. А вот совместимость стоило б оставить для фотошопа. Мало ли)

Полезные отличия

Align&Distribute

Отличительная черта Иллюстратора. Подобные функции в фотошопе скудноваты и недоработаны. Очень помогает при расстановке элементов на сайте. выравнивание по листу, по объектам, расстояния между ними и тп.

Select similar

И этим все сказано. Когда я впервые узнал про эту феню, я утратил сон, аппетит и дар речи. Это то, что в фотошопе вряд ли появиться скоро. Пример. Рисовался сайт под один шрифт/текст. А заказчик такой с утра проснулся, и передумал. Мол надо поменять. Толи шрифт, толи цвет у всех элементов... Что делаем? Выделяем, применяем. Повторять до обеда. Так бы вы делали в Фотошоп. А в иллюстраторе низя, низя такое делать. Выделяем один элемент, выделяем подобные по свойству (шрифт/цвет заливки/контура и тп), назначаем новые свойства. И гуляем до обеда. Кра со та.

Градиенты, мыши и цвета на экспорт

Ну очень, очень неудобные в иллюстраторе градиенты. К ним конечно же привыкаешь, но все же. Тем кто много и часто градиентит, придется столкнуться с этой проблемой. Кроме того, забудьте про всякие извращенные формы градиентов. У иллюстратора их две — линейная и радиальная. Точка. Часто в такие моменты вспоминаешь про фотошоп, вздыхаешь, пьешь валерьянку и идешь колбасить мэшами. Мэши! Мэши это как мыши, только полезные. Используют в вебе редко, но иногда без них никак. Мэш это такой себе сложный градиент. словами не описать в общем. Садитесь до пробуйте.

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

Smart objects и symbols

Еще одна вкусная плюшечка, которая и у ваших и у наших сделана классно. Символ — очень многогранная фича. В применении к вебу стоит отметить следующее: символ — некая повторяемая группа векторных объектов. Например: рисуем 100500 кнопок, и когда надо подправить один пиксел, делаем это 100500 раз, или один раз правим символ.

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

Подведем под монастырь. Вот только кого?

Выбор любого инструмента всегда сводиться к четкому определению задач. А затем уже поиск инструмента. Очевидно.

К великому сожалению в современной среде программного обеспечения, нет пакетов, которые четко позиционировали себя как "пакет для разработки веб-интерфесов и дизайна". Есть жалкие редакторишки, от мелких производителей, с жуткими инструментами и все они как-то ни о чем. Выбирать приходиться из графического редактора Photoshop и векторного редактора Illustrator. В современном веб-дизайне и разработке преобладают тенденции упрощения до невозможного. Все больше и больше уделяется внимание пользовательскому интерфейсу, а не ярким коллажам, типографике, а не анимации. в связи с этим, ИМХО, векторный редактор для этих целей годиться больше.

Отказаться от иллюстратора или фотошопа вовсе — глупо. Т.к. эти два брата очень дополняют друг друга. Использовать Фотошоп как основной, и Иллюстратор как вспомогательный, или наоборот — дело личное каждого. Надеюсь эти строки помогут кому-то сделать окончательный выбор.