Создание типографик арта при помощи Illustrator и Photoshop. Что лучше - Photoshop или Illustrator

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

Что нам понадобится:

1 Шаг: Пишем слово в Иллюстраторе

Откройте Иллюстратор и создайте новый документ размером страницы A4. При помощи инструмента Type наберите слово LAYOUT посередине документа.

2 Шаг

Выделите это слово и выполните Object > Expand, после чего кликните Ok. Далее выполните Object > Compound Path > Release.

3 Шаг

Затем инструментом для выделения расположите буквы так, чтобы они симметрично выстроились, как показано на рисунке:

Инструментом Direct Selection Tool сдвиньте указанную точку буквы U чуть вверх, чтобы сделать ее более основательной.

Вот что должно в итоге получиться:

4 Шаг

Выделяем все буквы. Затем на панели инструментов кликаем по иконке смены местами цветов заливки и контура.

5 Шаг

Поверх буквы L растяните прямоугольник, как показано ниже.

Для уверенности в том, что он выровнен правильно, откройте окно Edit > Preferences и отметьте опцию Snap To Point, что вам здорово поможет и сэкономит уйму времени при выравнивании объектов.

6 Шаг

Теперь создайте прямоугольник позади буквы Y.

Еще один - за буквой O.

И очередной - за буквой T.

7 Шаг: Заполняем текстом букву L

Переключитесь на Type Tool. Наведите курсор на букву L и вы увидите, как вокруг курсора появится кружок. Теперь кликните внутрь фигуры L и начните заполнять ее текстом. Я использовал всем известный “lorem ipsum”, сгенерированный на lipsum . В качестве шрифта я использовал Helvetica Neue Lt Std, из-за его великолепной универсальности, да и просто потому, что он всегда мне нравился. В данном случае я использовал начертание Bold Condensed.

8 Шаг

Выполните двойной щелчок по тексту, чтобы выделить его весь. В панели настроек текста, выберите режим выравнивания по всей ширине (Justify). Далее кликните по маленькой стрелке, для раскрытия расширенного меню и выберите в нем пункт Hypenation. Передвиньте там ползунок на уровень Better Spacing.

Вот что должно выйти в результате:

9 Шаг

Теперь наложите текст еще и на прямоугольник, лежащий поверх буквы L. Смените начертание шрифта на Light Condensed.

10 Шаг: Буква Y

Теперь переключимся на букву Y. С ней придется повозиться чуть подольше - она довольно сложная. Сначала поместите текст в прямоугольник за буквой Y. Используйте при этом начертание Light Condensed.

Теперь выберите в первой строчке символы, которые лежат внутри силуэта буквы Y и смените им начертание на Bold Condensed.

Проделайте теперь это со всеми буквами, лежащими в контуре Y. Да, как я и говорил, это может отнять массу времени. Поэтому будьте аккуратны и терпеливы.

После того, как все нужные символы будут выделены жирным, кликните по значку с глазом напротив слоя Y в палитре Layers. Что получилось у меня - смотрим ниже.

11 Шаг: Буква O

Выберите внешний контур буквы O и увеличьте его так, чтобы он оказался чуть больше своего контейнера-прямоугольника по высоте.

12 Шаг

Теперь вместе с этим контуром, выберите также и прямоугольник. Затем откройте панель Pathfinder и нажмите кнопку Exclude.

13 Шаг

Выберите верхнюю и нижнюю части этой конструкции и нажмите Delete.

14 Шаг

На каждую из образовавшихся частей нанесите текст. Для левой и правой частей используйте выравнивание по ширине (Justify), для средней части - выравнивание по центру.

15 Шаг: Буква U

Выберите букву U. При помощи Move Tool поверните ее на 90 градусов.

16 Шаг

Добавьте еще одну порцию текста, используя начертание Bold Condensed.

17 Шаг

Теперь снова переключитесь на Rotate Tool и переверните U обратно в первоначальное положение.

18 Шаг: Буква T

Теперь добавляем текст букве T.

19 Шаг

Теперь откройте меню шрифтов и увеличьте значение Text Leading в два раза. В моем случае это было с 7.2 до 14.

20 Шаг

Теперь добавим текст в прямоугольник позади буквы T. Используйте тот же межстрочный интервал, что и в шаге 19.

21 Шаг

Теперь зададим Minus Leading. У меня было значение 7, поэтому я задал -7.

В результате получилось так, что оба текста отлично наложились друг на друга и образовали полноценную букву T.

23 Шаг: Буква A

Над буквой A мы еще не работали, поэтому при помощи инструмента Pen Tool создайте фигуру, покрывающую левую половинку буквы.

24 Шаг

Вставьте туда блок текста.

25 Шаг

При помощи Move Tool поверните фигуру, пока текст не впишется в нее идеально по горизонтали.

26 Шаг

При помощи Rotate Tool верните фигуру с текстом на прежнее место.

27 Шаг

Проделайте то же самое для правой части буквы.

28 Шаг

Не забудьте нанести текст на поперечную часть A. После этого контур буквы можно также спрятать.

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

29 Шаг: Экспорт в PDF

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

30 Шаг: Импорт в Photoshop

Запустите Photoshop и откройте File > Open. Выберите тот PDF, который мы создали и задайте разрешение в 300 ppi.

Почему мы используем 300ppi разрешение?

Режим Press Quality сохраняет файлы с разрешением 300ppi. Поэтому, импортируя файлы в таком же разрешении в Photoshop, мы загружаем их в полном размере, не теряя при этом ни единого пикселя. Это означает, что мы не теряем так же ни одной детали, созданной в Illustrator. Рисунок ниже показывает часть импортированного изображения в 100% размере на белом фоне. Как видите - текст остается очень четким.

31 Шаг

PDF загружается, как прозрачное изображение.

32 Шаг: Начинаем работать в Photoshop

Нажмите Ctrl + A, затем Ctrl + C и создайте новый файл размером A4 и разрешением 300ppi. Нажмите Ctrl + V и вставьте свой текст туда.

Нажимаем Ctrl + I, чтобы инвертировать цвет текста в белый. Затем кликаем Layer > Convert to Smart Object. Нажмите Ctrl + T и поверните текст.

До недавнего времени в работе я использовала Adobe Photoshop. И считала, что лучше фотошопа CS4 только фотошоп CS5.

Но по мере роста объёма работы и количества заказов пришла к выводу, что пора инструмент менять. Постараюсь резюмировать свой опыт работы в этой программе.

Adobe Photoshop для дизайна сайтов:

Плюсы

1. Множество возможностей по работы с изображениями.
2. …а, в общем-то, и всё.

После знакомства с Adobe Illustrator привычный фотошоповский интерфейс со слоями и свойствами текста кажется неуклюжим недоразумением.

Минусы

Как метко выразился Валера Попов в своей статье «Почему я не использую фотошоп для дизайна сайтов »,
на придумывание и творчество уходит 10% рабочего времени, а всё остальное — рутинная работа по перемалыванию страниц.

1. Неудобная навигация по страницам. Для крупных интернет-магазинов количество страниц с индивидуальным дизайном может доходить до сотни. И как быть в таком случае? Как быстро найти на панели закладок нужную?
2. Нет возможности создать master-pages - для элементов, одинаковых на всех страницах. Например, шапка и меню. Говорят, в последних версиях ввели функцию Layer comps, но работает она весьма криво.
3. Для дублирования одинаковых элементов, которые стоят в одном и том же месте на разных страницах, нужно каждый раз рожать ежа и проходить ужасно муторную неудобную процедуру.
4. Нет возможности прописать стили отдельных блоков и помочь верстальщику.
5. При большом количестве страниц фотошоп нереально тормозит. Даже при всех остальных закрытых программах. Даже на новейшей сборке моего компа в офисе. А уж про старенький домашний и говорить не приходится.

Выход есть - Adobe Illustrator

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

Стала искать замену. Ещё до слона выполнила редизайн Хельги в ИнДизайне - не понравилось. Что именно, уже не вспомню. Потом наткнулась на Adobe Illustrator. Выписала себе официальный учебник на Озоне. Примерно за полторы недели освоила по нему все нужные мне функции.

Пока новых проектов нет, проработала в нём всё того же Бумажного слона.

Все минусы фотошопа устранены:

Навигация по страницам. В одном документе создаётся множество так называемых артбордов (Artboards). Вид можно настроить так, чтобы видеть их все одновременно:

Master-pages решены при помощи символов. К примеру, элементы шапки объединяются в группу, из группы создаётся символ. И уже этот символ копируется на все страницы (функция Paste on all artboards). Если надо в нём что-то поменять, по двойному щелчку на панели символов можно перейти в режим редактирования именно этого символа.

В помощь верстальщику есть панель стилей параграфов (Paragraph styles), в которой задаются хединги и прочее. Потом эти стили можно применять к разным элементам на других страницах, а не задавать их всех с нуля.

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

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

Из минусов отмечу совместную работу с фотошопом. Если перетащить из фотошопа слой с картинкой на прозрачном фоне, фон её становится белым:

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

Ещё в люстре есть библиотека стандартных элементов - поле поиска, чекбоксы и т.д. Но, по-моему, они не слишком удобные. При изменении размеров, они перекособочиваются:

Ну, а в остальном - просто сказка! Следующий проект по плану - интернет-магазин мебели, в котором уж наверняка будет много страниц. Вот люстру и опробую в боевых условиях.

Скорее всего вы знаете, что есть два типа графики — растровая и векторная .

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

Два самых популярных растровых формата: JPEG , PNG .

Растровая графика удобна для фотореалистичных изображений. Фотография — это также растровая графика. Именно с ней мы с вами и работаем в Adobe Photoshop .

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

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

Самые популярные векторные форматы: SVG , AI , асамый популярный редактор векторной графики — Adobe Illustrator .

Как видим, у каждого формата есть свои плюсы и минусы поэтому если вы работаете с графикой, то в идеале вам надо уметь работать и с растровой и с векторной графикой.

За все годы существования проекта «Фотошоп-мастер» мы давали вам уроки только по растровой графике. Но наши подписчики и клиенты часто просили нас порекомендовать им качественные обучающие материалы по векторной графике. И вот сегодня мы смело можем вам такие материалы рекомендовать, потому что на дружественном нам проекте "Видеосмаил" вышел новый обучающий миникурс — Adobe Illustrator для новичков.

Первые три урока этого миникурса вы можете изучить уже сегодня:

Урок 1 — Знакомство с программой

Урок 2 — Интерфейс Adobe Illustrator

Урок 3 — Обводка и заливка

Урок 4 — Инструменты в Adobe Illustrator

Урок 5 — Отрисовка изображения

Урок 6 — Работа с текстом

Практический урок для закрепления

Если этот курс вам понравился и вы хотите дальше развиваться в направлении векторной графики, то у меня для вас есть хорошая новость.

Уже в понедельник — 12 февраля в рамках дружественного нам проекта «Видеосмаил» выходит большой курс Вероники Поляковой, который получил название «Супер Illustrator» .

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

Набор функций каждого графического редактора Adobe впечатляет. Но ещё эффективнее считать их инструментами единого комплекта. Рассмотрим особенности взаимодействия двух самых распространённых — Photoshop и Illustrator.

Оба продукта — флагманы Adobe и входят во все предлагаемые наборы: Design collection (Illustrator, Photoshop, InDesign, Acrobat), Publishing collection (PageMaker, Photoshop, Illustrator, Acrobat) и Web collection (GoLive, Photoshop, Illustrator, LiveMotion). Максимальная совместимость собственных продуктов — стратегия компании, поэтому взаимодействию всех разработок уделяется пристальное внимание, но особенно — Illustrator и Photoshop. Они тесно связаны по следующим позициям:

1. Поддержка связей с иллюстрациями и отслеживание изменений.
2. Копирование/вставка изображений и векторных объектов через системный буфер обмена.
3. Использование формата PSD как универсального средства обмена между приложениями.

Импорт изображений

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

Если опция Link включена (значение по умолчанию), дальнейшая работа Illustrator со связанным изображением определяется настройками редактора в Preferences, Files & Clipboard («Предпочтения», «Файлы и буфер»):

Automatic — автоматическое обновление (при изменении файла он будет заново импортирован в редактор при первой же активизации программы);

Ask when modified — запрос на обновление изображения;

Links (Manually) — никаких действий не выполняется, текущий статус картинки отображается в палитре.

Наличие обновлённой версии файла проверяется в палитре Links («Связи»): жёлтый треугольник с восклицательным знаком означает, что экранная версия изображения не соответствует версии на диске. Для загрузки обновлённого варианта изображения служит пиктограмма Update Link («Обновить связь»). Photoshop для редактирования PSD-файла загружается кнопкой Edit Original («Редактировать оригинал»).

Таким образом, автоматическая поддержка связей с изображениями и отслеживание изменений облегчают работу с Illustrator, освобождая дизайнеров от рутинной ручной работы.

Векторные контуры и прозрачность — через буфер обмена

Поскольку векторные контуры сохраняются в буфере обмена в формате PostScript, они распознаются любой другой программой, понимающей этот формат. При копировании области выделения (например, из Illustrator) данные о ней заносятся в буфер в двух форматах: в виде битовой картинки (Windows BMP или Macintosh PICT) — для доступности широкому кругу приложений, а также в версиях PDF и/или AICB, позволяющих передавать дополнительную информацию, — для приложений Adobe. PDF используется пакетом InDesign, прозрачность поддерживается как атрибут картинки.

AICB — диалект EPS, поэтому прозрачность поддерживается за счёт формирования в виде крошечных непрозрачных растровых картинок, восстанавливающих с определённой точностью первоначальное изображение. Для активной работы в связке с Photoshop и версией AICB необходимо определить, в каком виде прозрачные изображения будут вставлены в макет — режим Preserve Path («Сохранять контур») либо Preserve Appearance («Сохранять вид»).

При вставке из буфера в Photoshop данных, несущих информацию об объекте Illustrator, редактор предложит выбрать метод их интерпретации своими средствами: Pixels, Path или же Shape layer. Первый аналогичен внедрению файла формата EPS через стандартную операцию Place (объект растрируется), второй позволяет вставить контур как векторный объект типа Path (он появится в виде Work Path в палитре Pathes), а при использовании третьего в Photoshop появится новый слой — векторный, типа Shape, несущий полную информацию о вставленном объекте. Если копируемый из Illustrator объект не имеет прозрачности, выбор режима (Preserve Path либо Preserve Appearance) значения не имеет — объект копируется с сохранением всех характеристик.

Иначе обстоит дело при вставке в Photoshop из Illustrator областей изображения с частичной прозрачностью. Если в Illustrator установлена опция AICB Preserve Path, в Photoshop информация о прозрачности вообще никак не передаётся — только выделенный объект, к которому прозрачность как бы и не применялась вовсе.

При активизации опции AICB Preserve Appearance, в Photoshop передаётся и форма самого объекта, и форма его маски прозрачности, хотя информация о самой прозрачности не передаётся . При этом вставленный объект оказывается состоящим из трёх частей: сохранившей его изначальную форму и двух возникших после применения прозрачности. Несмотря на такое ограничение, это очень удобно: форма части, к которой была применена прозрачность, передана полностью, остаётся средствами Photoshop определить её как маску прозрачности.

Как уже говорилось, перенос через буфер обмена в формате PDF для Photoshop значения не имеет: пакет воспринимает все данные, как при включённой установке AICB Preserve Path. Непонятно, почему Adobe до сих пор не обеспечила полной переносимости информации через буфер обмена, — будем надеяться, что в очередных версиях это будет исправлено.

Но неужели разработчики не предлагают ничего взамен? Не всё так плохо: в серьёзных макетах на помощь придут возможности собственных форматов редакторов — AI и PSD.

Перенос из Illustrator в Photoshop

Представьте, что набросок макета вы сделали в Illustrator. Разместили необходимые элементы, кое-где использовали эффекты, в общем, заготовка готова. И тут в неё нужно добавить ещё кое-что, причём без помощи Photoshop уже никак не обойтись. Что делать? Сохранять слои по отдельности в формате EPS и затем размещать их в новом макете в Photoshop? Долгий и неудобный путь. Гораздо быстрее перекинуть макет в редактор в формате PSD. Интересно, что при этом поддерживается максимум возможностей — вся информация о слоях, прозрачности, её типе (Blending), масках, даже шрифт сохраняется как редактируемый. Доступна эта операция через меню File, Export, где в списке типов Save as выберите Photoshop. Указываете расположение, название файла программа подсказывает сама — готово! Формат PDF тут не подходит, поскольку является, по большому счёту, тем же PostScript, очищенным от избыточной информации.

Среди настроек экспорта — выбор цветовой модели (Color Mode), разрешения (Resolution), включение сглаживания граничных областей (Anti-aliasing), сохранение редактируемого текста (Editable Text), включение невидимых слоёв (Include Hidden Layers), разбиение изображения на установленные фрагменты для формирования HTML-таблицы (Write Slices), запись карт изображений (Write Image Maps), внедрение профилей для корректной цветопередачи (Embed ICC profiles), которые не нуждаются в подробном описании. Но самые интересные и часто приводящие к непредсказуемым результатам установки — Write Layers, Write Nested layers, Write Compound Shapes — требуют детального объяснения.

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

Не забудьте, что при включении опции Write Layers все слои макета Illustrator будут преобразованы в соответствующие слои документа Photoshop. Выключенная опция приведёт к сохранению сведённой версии (flatten) файла. Далее. Если опция Write Nested layers активизирована, подслои (sub-layers) будут переданы в PSD как слои, входящие в группу слоёв (Layer Set, при этом название основного слоя полностью сохранится в Photoshop в виде названия группы). Иначе все подслои будут преобразованы в один слой.

Сосредоточьтесь на проверке объектов с режимом смешения, отличным от Normal: случается, что слои, на которых они располагаются, конвертируются в PSD не в виде отдельного слоя, а склеиваются с нижерасположенным (теряется возможность вносить в него изменения). В качестве решения советую в Illustrator в палитре Transparency для проблемного объекта включить параметр Isolate Blending. Тогда действие эффекта ограничится объектами, расположенными на одном подслое или же входящими в одну группу, поэтому слой должен, по идее, оставаться отдельной единицей, не склеиваясь с другими. Если это не помогает, попробуйте установить Isolate Blending для всего слоя.

Случается, что самый обыкновенный с виду слой почему-то отказывается сохраняться как отдельный слой PSD. Причём создание нового и перенос туда проблемных элементов ничего не даёт. Рекомендую воспользоваться самым действенным методом — перенести проблемные объекты на отдельный подслой в структуре его же собственного «родного» слоя (выделив объекты и выбрав команду Collect in New Layer). Мне всегда удавалось перехитрить Illustrator и корректно перевести все слои AI в слои PSD.

Следующая опция при экспорте в формат PSD — Write Compound Shapes. Она определяет, каким образом будут транслироваться объекты, созданные операцией Make Compound Shape. Если опция включена, объекты останутся редактируемыми и в Photoshop (в виде векторных контуров) и доступными для трансформации стандартными средствами редактора. Естественное ограничение Illustrator — он не позволяет сохранять в виде отдельных объектов фигуры с применёнными к ним стилями, различными художественными кистями и т. п.

Illustrator сохраняет текстовые слои редактируемыми для Photoshop (опция Editable Text), передавая каждый текстовый блок в виде отдельного слоя. Но, как и следовало ожидать, сохранение кириллицы — проблема. При открытии PSD, в котором используются полноценные шрифты Type 1 (с поддержкой Unicode), Photoshop предупреждает о необходимости обновления параметров текста (Update) — с тем, чтобы он оставался редактируемым. После такой, кажущейся невинной, операции символы вообще пропадают, хотя название слоя сохраняется, равно как и все параметры форматирования текста (в момент открытия файла заметно, что на мгновение кириллица отображается правильно). Если же текст не обновлять, он растрируется с разрешением документа. Не спасает и русифицированный Photoshop. С английским языком, разумеется, никаких сложностей.

Ещё один совет: перед финальным сохранением AI в виде PSD желательно проводить тестовую конвертацию файла — с упрощёнными параметрами (выбрать разрешение 72 dpi и выключить сглаживание). Это значительно сократит время на «отлов» проблемных мест, которые в сложных макетах, к сожалению, возникают не так уж и редко.

Вместе — они сильнее!

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

Об авторе: Михаил Борисов ([email protected] ), пишет для Publish обзоры программного обеспечения и полезные советы по допечатной подготовке и веб-дизайну.

Созданный в 1988 году, Photoshop стал первой и единственной программой для многих дизайнеров. Для некоторых он является удобным инструментом для манипуляций с фотографиями, но, на само деле, Photoshop может гораздо больше.

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

Но какая программа лучше? Очевидно, что ответ зависит от конкретной ситуации. Поэтому я хочу провести краткий обзор о том, что и когда лучше использовать.

Что лучше для создания логотипов?

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

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

Созданная в Photoshop растровая графика не может изменять размер без пикселизации и потери качества. Использование Illustrator позволяет создавать логотип в качестве векторного объекта, который не является частью растрового изображения. Это означает, что логотип может изменять форму и размер без потери качества. Photoshop, конечно, может использоваться для создания логотипов, но я рекомендую Illustrator.

ПОБЕДИТЕЛЬ: Illustrator

Что лучше для веб-дизайна?

Так как графика, созданная в Photoshop, основана на пиксельной растровой графике, она прекрасно подходит для проектирования медиа-экранов.

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

Более совместимый

Так как мы стремительно движемся в сторону адаптивного и гибкого Web, мы всё сильнее нуждаемся в графике, меняющей размеры (т.е. SVG и растровые шрифты).

По большей части, здесь выигрывает Photoshop. Но я не могу полностью исключить Illustrator. Довольно часто я использую эту программу для создания интерфейсов, но всё-таки большую часть работы я выполняю с помощью Photoshop.

ПОБЕДИТЕЛЬ : Photoshop

Какой инструмент лучше для цифрового искусства?

Illustrator лучше подходит для чистых графических иллюстраций, в то время как Photoshop - для картинок на основе фото. Фотография VFS Digital Design.

Может показаться, что Illustrator в данном случае является очевидным решением, но всё зависит от вида картинки. Иллюстрации, как правило, начинают жизнь с бумаги, и потом проходят этапы рисования, сканирования и перенесения в программу.

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

ПОБЕДИТЕЛЬ: рисование

Какой ин струмент лучше для набросков и варфрейминга?

Illustrator намного проще использовать для быстрого создания варфреймов.

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

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

ПОБЕДИТЕЛЬ: Illustrator

И окончательный победитель это …

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

Хорошо разбираться в Photoshop и Illustrator - необходимо для большинства дизайнеров, будь то веб-дизайнер, графический или модный дизайнер, или любой другой иллюстратор. Знание этих программ позволит сделать правильный выбор при создании необходимого продукта.