Советы по созданию векторных изображений с помощью кода

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

Редакция рубрики «Интерфейсы» публикует перевод беседы.

Мэттью Оссагель: Привет, Крис. Ты лидер во всем, что касается SVG-изображений (Scalable Vector Graphics - масштабируемая векторная графика). И при этом ты пишешь и редактируешь их прямо в коде - можешь объяснить, что это значит?

Крис Гэннон: SVG-формат тем и хорош, что это просто код. Конечно, чем сложнее изображение, тем объемнее этот код, тем не менее, это все те же цифры и символы, которые можно легко изменить в браузере.

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

Вот блестящий пример - Pod Slider:

Pod Slider Криса Гэннона

Ты всегда делал дизайн прямо в коде?

Нет, раньше для создания графики я использовал Flash, а сейчас перешел на Adobe Illustrator. Я всегда анимировал отдельные элементы, так что сравнительно недавно стал делать дизайн в коде.

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

В чем преимущества такой работы?

Самое главное преимущество - это то, что изменения в SVG сразу отображаются в браузере. Плюс мгновенный просмотр в CodePen и изобилие библиотеки GreenSock - с ними вы можете очень быстро перебирать и совершенствовать ваши идеи. Немедленный просмотр результатов после изменения кода помогает гораздо быстрее достичь цели, и так же быстро можно избавляться от неудачных идей.

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

Interactive Info Graph Криса Гэннона

Как проходит разработка?

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

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

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

Я стараюсь ограничивать число инструментов, потому что у меня было много проблем, когда я работал с Flash, Edge и Animate. Мне не нравится зависимость от лицензионных программ, хотя не всегда есть возможность быть полностью свободным от них.

Мой рабочий процесс выглядит примерно так: Бумага? Adobe Illustrator? Sublime Text? браузер (CodePen или GreenSock).

Я делаю наброски на бумаге, потом грубо перерисовываю их в Adobe Illustrator и переношу в редактор кода Sublime Text. Подойдет и любой другой редактор, он нужен для того, чтобы разобрать, переорганизовать и переименовать SVG-графику. Затем я копирую все в браузер (конкретно - в CodePen) и анимирую с помощью GreenSock.

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

All Devices Криса Гэннона

Чем именно разработка изображений в коде принципиально отличается от разработки в Photoshop и Sketch?

Я не работаю в Sketch, потому что его нет для Windows, и не использую Photoshop, потому что Illustrator мне нравится больше. Если бы я делал дизайн в графическом приложении, это бы здорово меня отвлекало.

Поэтому обычно я рисую совсем немного, только чтобы получить представление о композиции и цветовой гамме, а затем быстро перебираюсь в Sublime Text и CodePen и принимаюсь за дело. Я сохраняю все файлы в Illustrator, и если сравнить, как выглядит финальная анимация и та, что находится в AI-файле, видно, что они совершенно не похожи друг на друга.

Ты создаешь анимации для приложений?

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

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

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

Splat Radio Button Криса Гэннона

Могут ли другие люди использовать их в приложениях?

Могут ли люди использовать их? Ты шутишь? Да они постоянно используют их, причем без какого-либо разрешения с моей стороны и даже без ссылок. Иногда это просто бесит. Не поймите меня неправильно, открытые источники - это хорошо, но должны же быть какие-то границы. Некоторые думают, что открытые источники означают бесплатное использование чужого кода без указания авторства. Это очень раздражает.

Я делаю свои работы по многим причинам, в том числе для того, чтобы делиться своими знаниями с другими людьми. Если вы хотите купить мои работы - пожалуйста. Учитесь на них, адаптируйте их, изменяйте, но не надо тупо использовать их в своих проектах. Это говорит о вашей лени и неуважении и отбивает всякое желание чем-то делиться.

Я все чаще вижу, как мои работы используют без всякого разрешения (обычно их просто копируют из CodePen), а когда я связываюсь с теми, кто их украл, то понимаю - они не знают, что нужно указывать авторство. Хорошо, что это поняла администрация CodePen (это не я им подсказал), и теперь лицензия располагается на видном месте. Надеюсь, что ситуация изменится к лучшему.

Конечно, мы все немножко «сороки», и мы все таскаем идеи друг у друга, и я тоже не исключение. Но я стараюсь брать только концепты идей, менять их (надеюсь, к лучшему), а затем встраивать во что-то большее, где эта идея будет только маленькой частью целого. Я никогда не беру чью-то готовую работу и не выдаю ее за свою собственную. Какой смысл так поступать? Так я ничему не научусь.

Download Dot Bounce (кнопка загрузки) Криса Гэннона

Есть у тебя какая-нибудь любимая анимация?

Мне нравятся проекты, пока я над ними работаю. После окончания работы я еще несколько недель (или часов) ненавижу и не хочу больше никогда видеть все это. А если серьезно, последняя вещь, которую я сделал, обычно и бывает моей любимой - сейчас это Pull To Launch. Было весело ее делать - мне нравится то, что инопланетянин выглядит грустным, когда ракета улетает. Интересно рассказывать маленькие истории и вызывать эмоции в крошечном интерактивном пространстве.

Хотя, с точки зрения исполнения, мои любимые анимации - это Balloon Slider и Interactive SVG Info Graph. Я сделал каждую из них всего за несколько часов, и еще несколько дней понадобилось для тонкой настройки.

Я четко представлял, как они должны работать, как их сделать и как их можно потом использовать. Сам творческий процесс был спокойным, я был в состоянии «потока». Они потребовали гармоничного сочетания разных техник и дисциплин (взаимодействие, анимация, фильтры, дизайн, пользовательский интерфейс и пользовательский опыт).

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

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

Собираешься ли ты создавать больше уроков вроде How to make An SVG Lava Lamp?

У меня есть канал на YouTube, где я выкладываю видео всяких приемов и хитростей. Я понял, что могу кому-то помочь (особенно в том, что касается GreenSock и SVG). Снимая такие видео, я и сам лучше начинаю понимать суть предмета - таким образом, я не только помогаю другим, но также закрепляю эти концепты и технологии в собственной голове.

Но подобные вещи требуют времени. Публикацию по созданию Lava Lamp я писал бескорыстно - я только что закончил эту анимацию, и хотел, как обычно, сразу перейти к следующей. Но тут мне пришлось вернуться, проанализировать то, что я делал, и изложить это по возможности лаконично и просто. Не мне судить, удалось ли это.

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

Kiosk Icon Menu Криса Гэннона

Видеоурок Криса Гэннона «Как создать анимированную радио-кнопку с помощью функции Cycle из библиотеки GreenSock»: