Чем отличается photoshop от illustrator. 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. Статья охватывает главным образом три программных обеспечения в сфере искусства и дизайна, а именно - Adobe Illustrator, Adobe Photoshop, Adobe InDesign. Поскольку с каждой версией выпускается все больше и больше возможностей и обновлений, для неопытного дизайнера важно понять, какая программа будет являться лучшим решением для достижения оптимальных результатов в конкретных целях.

Adobe Illustrator

Что такое Adobe Illustrator

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

Adobe Illustrator, как правило, используется для:

Разработки логотипов, фирменных знаков и прочих символов компании;

Предпечатной подготовки;

Веб-графики;

Создания иных векторных изображений.

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

Illustrator не может реализовывать анимацию. Если вы ищете программное средство для разработки анимации, то Illustrator точно не для вас. Лучшим решением будет создать изображения в Illustrator и перевести их в любую подходящую программу для анимирования, например, Adobe Flash.

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

Прямое использование Adobe Illustrator

Как уже говорилось выше, Illustrator отлично подходит для дизайна логотипа, товарных знаков, разработки различного брендинга, а также создания поздравительных открыток, приглашений на свадьбу и прочего.

После выхода Illustrator CS4 стало возможным создавать сложные брошюры, годовые отчеты и даже книги. Единственное, чем Illustrator уступает Indesign, так это отсутствием некоторых утилит, таких как шаблоны книги или нумерация страниц. Несмотря на это, Illustrator версии CS4 и выше имеет поддержку нескольких монтажных областей для создания «книг», но лишь для того, чтобы создавать небольшие брошюры или переводить несколько страниц дизайна в PDF формат для демонстрации результатов работы вашим клиентам.

Adobe Photoshop

Что такое Adobe Photoshop

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

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

Adobe Photoshop, как правило, используется для :

Редактирования фото и цветокоррекции;

Разработки дизайна пользовательского интерфейса мобильных приложений;

Веб-графики;

Реализации фотоэффектов и эффектов с текстом.

Типичные ошибки и заблуждения

Одним из распространенных заблуждений является то, что Photoshop используется для создания логотипов и ряда прочих элементов дизайна. Ради сбережения своего же времени выбросите эту идею за окно. Взять за пример даже те же самые визитные карточки. Существует немалое количество интерактивных учебных пособий, которые разъясняют вам, как создавать визитки в Photoshop. Несмотря на тот результат, который получится в результате обучения по этим урокам, это не лучшая практика, чтобы сделать её привычкой. Возможно визитка и будет выглядеть после печати нормально, но сколько головомороки можно было бы избежать, если сделать это в надлежащей для таких потребностей программе. Может Photoshop и «умеет» создавать векторные объекты и редактировать их, существует даже возможность переноса «путей» из Illustrator, но самое главное из всего этого то, что, в конце концов, они все же окажутся в виде пиксельных данных, которые не могут быть увеличены без искажений. Конечно, существуют некоторые элементы, которые можно создать с помощью Photoshop (например, текстовые эффекты, текстуры, фрагменты фотографий), но стоит помнить, что для грамотного представления пикселей необходимо заранее установить 300 пикселей на дюйм с использованием цветового режима CMYK (ни в коем разе не RGB).

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

Прямое использование Adobe Photoshop

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

Adobe Indesign

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

Indesign, как правило, используется для:

Разработки полноценного дизайна полиграфической продукции (разговор идет не о создании отдельных элементов, а о представлении дизайна страницы в целом);

Грамотной верстки и предпечатной подготовки журналов, брошюр, буклетов, книг, газет и прочей полиграфической продукции;

Редактирования и создания элементов дизайна (минимальный набор инструментов);

Создания интерактивных PDF документов.

Типичные ошибки и заблуждения

Несмотря на то, что существует возможность «нарисовать» объекты в Indesign, этот процесс реализуется на деле не особенно комфортно. Вместо рутинного горе-рисования стоит использовать такие «заточенные» для этих целей программы, как Photoshop или Illustrator, а затем импортировать полученное изображение в Indesign. Создание логотипа в Indesign очень затруднительно из-за отсутствия требуемого количества возможностей и инструментов.

Чаще всего, увидев меню Эффекты (Effects), у людей складывается ошибочное впечатление того, что обработать фотографию или осуществить с ней какой-то эффект здесь предоставляется возможность, аналогичная Photoshop. Нет, нет и ещё раз нет! Indesign не имеет подобающего функционала для редактирования фотографий.

Хотя существует и не так много заблуждение относительно Indesign, но все же получил довольно широкое распространение спор о том, что Illustrator имеет гораздо более удобные настройки для расположения элементов на странице, чем Indesign. Тут основной вопрос стоит о потребностях пользователя и правильности настроек.

Прямое использование Indesign

Если ваш проект состоит из нескольких страниц, то сверстать их (то есть распределить) для Indesign не составит никакого труда. Indesign также имеет отличную поддержку построения текста в три и более колонки. А в целом Indesign под силу все то размещение текста и объектов, что вы привыкли видеть на страницах газет, журналов и прочей цветной и черно-белой полиграфической продукции.

Итоговое сравнение

Illustrator против Indesign :

Illustrator не имеет возможности верстки заглавных страниц;

Illustrator не «умеет» нумеровать страницы;

Indesign не предназначен для создания объектов такой же сложности, как в Illustrator;

Indesign имеет превосходные возможности быстрой «упаковки» файлов для отправки их ресурсам принтера, в то время как в Illustrator это операция осуществляется немного запутанно;

Indesign превосходно стравляется со всевозможными операциями с блоками текстов, а Illustrator в этом деле, конечно, дилетант.

Illustrator по сравнению с Photoshop :

Illustrator имеет шикарную поддержку векторного изображения, по сравнению с тем, что в Photoshop она сильно ограничена;

Illustrator создает макет страницы лучше, чем Photoshop;

Illustrator не «умеет» обрабатывать пиксельные изображения и применять к ним эффекты так же превосходно, как это делается в Photoshop;

Photoshop является лучшей программой для цветокоррекции фотографий;

Illustrator поддерживает создание многостраничных PDF документов, а Photoshop этого делаеть не «умеет»;

Организация работы со слоями в Photoshop гораздо проще, чем в Illustrator;

Экспорт формата EPS у Illustrator лучше, чем у Photoshop;

Illustrator поддерживает взаимосвязь своих файлов (через импортирование и экспортирование графики), а PSD форматы Photoshop не могут обмениваться данными между собой таким же образом;

Photoshop имеет огромное количество эффектов на основе фильтров, в Illustrator же эта возможность сильно ограничена.

Indesign по сравнению с Photoshop:

Indesign профессионально создает макеты страниц, в то время как Photoshop этого не делает;

Indesign создает элементы, которые могут закреплять за собой ссылки, а в Photoshop эта функция отсутствует (Indesign обладает возможностью создания интерактивных документов, а Photoshop нет);

Indesign поддерживает многостраничные PDF файлы (например, для печати), а в Photoshop - всего лишь одна страница;

В Indesign отсутствуют эффекты, аналогичные Photoshop (и частично Illustrator).

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