Графические редакторы для начинающих — обзор Adobe Photoshop, Adobe Illustrator и Figma

Всем привет, меня зовут Рома, в дизайне уже более 5-ти лет, на сегодняшний день я работаю UI/UX Designer, а также преподаю в Компьютерной Школе Hillel.

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

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

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

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

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

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

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

Поделюсь еще одним интересным решением, которое подарил нам Photoshop.

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

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

Благо, это время прошло, и сейчас есть более подходящие инструменты для этого)

Чуть не забыл о них)

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

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

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

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

Для понимания разберемся, что такое векторная графика.

Существует 2 вида графики — векторная и растровая. Растровая графика — это всевозможные фотографии и картинки, скачанные из интернета, растровая графика обычно форматов .png и .jpeg. Растровая графика состоит из квадратиков, и эти квадратики заполняются определенным цветом. Именно поэтому если мы увеличиваем растровую фотографию, то видим, что на фотографии появляются нежелательные ступеньки.

Давайте на примере — у вас есть фотоаппарат с разрешением 800х600 пикселей, вы делаете фото, на котором каждый из пикселей сохраняет определенный цвет. Если математически — 800 умножить на 600 = 480 000. То есть, в нашем кадре 480 000 квадратиков, каждый из которых имеет свой цвет.

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

Рассмотрим на примере, чтобы было понятнее:

С первого взгляда разницы между картинок нет, но это до того момента, пока мы не увеличим разрешение:

И тут уже видна очевидная разница между растром и вектором.

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

Что радует — это местный функционал, тут мощнейший набор инструментов с непредсказуемым результатом. И зачастую результат — пушка, гонка, картонка!

Посмотрим что можно интересного нарисовать в Illustrator:

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

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

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

Figma — не просто графический редактор, а программа для прототипирования. Не стоит так бояться этого слова, ведь она сохранила общую основу с Photoshop или Illustrator. Figma предназначена облегчить работу веб-дизайнеров и дизайнеров интерфейсов. Основным её премуществом является то, что она облачная — достаточно открыть браузер, войти в свой аккаунт, и все, вы уже в самом редакторе, облачное хранилище подгружает все ваши файлы, а еще Figma бесплатная и поддерживает мультиуправление, это означает что над одним проектом может работать одновременно более 10 человек и это безумно весело)

Но что же это за прототипирование такое?

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

Просто рассматривать 30+ картинок не очень весело, гораздо веселее настроить между этими страницами необходимые связи, чтобы кнопка «Купить товар» отправляла этот товар в корзину. Установив такие связи, мы собираем прототип и смотрим на наше приложение так, как будто оно уже работает.

Вот ссылка на готовый прототип, чтобы посмотреть, как это работает: Radar for iOS.

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

А вот их как бы и нет)) Ну серьезно)

Относительно Photoshop или Illustrator Figma проигрывает только в наборе функционала, к сожалению, в Figma нет уникальных механик.

Figma идельно подходит каждому дизайнеру, будь он начинающим учеником или маститым рисовакой.

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