Использование объектов Photoshop в Adobe Illustrator. Создание типографик арта при помощи Illustrator и Photoshop

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

V Adobe Illustrator mojno otkryvat" ili pomeschat" faily Photoshop, poetomu net neobhodimosti sohranyat" ili eksportirovat" izobrajenie Photoshop v drugoi format faila.

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

  1. Если файл изображения открыт в Photoshop, сохраните его как Photoshop (PSD) и закройте файл.
  2. В Adobe Illustrator выполните одно из следующих действий.

      Чтобы открыть файл непосредственно в Illustrator, выберите «Файл» > «Открыть». Укажите путь к изображению в диалоговом окне «Открыть файл» и нажмите кнопку »Открыть».

      Чтобы встроить изображение в существующий файл Illustrator, выберите «Файл» > «Поместить». Укажите путь к файлу в диалоговом окне «Поместить», убедитесь, что параметр «Связать» не выбран, и нажмите кнопку »Поместить».

      Чтобы поместить изображение в файл с сохранением связи с оригиналом, выберите «Файл» > «Поместить». В диалоговом окне «Поместить» укажите путь к файлу, выберите параметр «Связать» и нажмите кнопку »Поместить». Illustrator размещает изображение по центру в открытой иллюстрации. Красный значок X, перечеркивающий изображение, указывает на то, что изображение связано с оригиналом и не может быть изменено.

  3. При открытии или помещении изображения без сохранения связи отображается диалоговое окно «Импорт Photoshop». Выберите соответствующий параметр, как показано ниже, и нажмите кнопку «ОК»:

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

      «Выполнить сведение слоев Photoshop в единое изображение», чтобы объединить все слои в один. При выборе этого параметра сохраняется внешний вид изображения, но отдельные слои редактированию уже не подлежат.

Известный графический редактор «Фотошоп» выпускает американская корпорация Adobe. Она же является разработчиком программы «Иллюстратор». Для чего предназначено данное решение?

Факты о фотошопе

Программа «Фотошоп» (официальное ее наименование - Adobe Photoshop) является графическим редактором, адаптированным главным образом к работе с растровыми изображениями. Это коммерческое ПО.

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

Факты об «Иллюстраторе»

Программа «Иллюстратор» (официальное ее наименование - Adobe Illustrator) - это также редактор графики, относящейся, однако, к категории векторных. Как и фотошоп, является коммерческим ПО.

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

Сравнение

Ключевой критерий, предопределяющий отличие фотошопа от «Иллюстратора», - преимущественный тип графических файлов, обрабатываемый программой.

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

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

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

Так, фотошоп предполагает работу с проектом, размещенным только на одном холсте - окне, в котором находятся те или иные графические элементы. «Иллюстратор» позволяет распределять редактируемые картинки по нескольким векторным площадкам для обработки графики.

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

Таблица

Итак, мы изучили то, в чем разница между фотошопом и «Иллюстратором». Резюмируем теперь выявленные нами критерии в таблице.

Фотошоп «Иллюстратор»
Что общего между программами?
Один разработчик - компания Adobe Systems.
Обе программы - коммерческие
Чем отличаются программы?
Предназначен для обработки главным образом растровых картинок Предназначен для обработки главным образом векторных картинок
Удобен для рисования изображений с нуля, обработки готовых картинок посредством широкого спектра инструментов Удобен для иллюстрирования медиапродуктов, решения соответствующих дизайнерских задач
Предполагает работу главным образом на 1 холсте Позволяет работать с несколькими векторными площадками
1 слою соответствует 1 графический объект 1 слою может соответствовать несколько графических объектов

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

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

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