Что такое паттерн в графическом дизайне

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

vlada_maestro / shutterstock

Дарья Тамилина

Пишет о дизайне в Skillbox Media, а в перерывах и сама орудует графическим планшетом. Влюблена в советские шрифты, японскую рекламу и русский язык.

Кажется, это что-то из психологии?

Да, в психологии есть понятие «поведенческий паттерн» — последовательность действий, которую человек повторяет в разных ситуациях. Кстати, в UX-дизайне под словом «паттерн» как раз подразумевают привычки пользователей.

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

Покажете пример?

Пожалуйста. Вот, например, паттерн в африканском стиле:

*Изображение: kirkchai benjarusameeros / Shutterstock*

Эффектно! А как такое делают?

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

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

Вообще, это изобретение не ново — паттерны ещё в древности использовались как декоративный элемент на предметах быта, стенных росписях и тканях. Сделать такой узор и нигде не ошибиться было непростой задачей.

Древнегреческая ваза
*Фото: Viacheslav Lopatin / Shutterstock*

Постойте ― мне точно встречались паттерны, где рисунок не повторялся точь-в-точь!

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

А для обоев такой паттерн можно сделать?

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

Образец рисунка для ткани от Варвары Степановой, 1924 год
*Изображение: Собрание ГМИИ имени А. С. Пушкина / Архив А. Родченко и В. Степановой*

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

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

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

Вообще, несложные паттерны достаточно быстро можно сделать в современных графических редакторах, например, Photoshop или Figma. Для этих программ есть даже специальные плагины.

Рассказываем, как работать с бесплатными плагинами для создания паттернов в Figma в этой статье.

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

*Изображение: RODINA OLENA / Shutterstock*

Почему паттерны так популярны?

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

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

Мне попадался термин «текстура». Это то же, что и паттерн?

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

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

А из текстуры может получиться паттерн?

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

О том, как сделать бесшовную текстуру в Photoshop, читайте в нашем руководстве.

Кажется, бесшовная текстура выглядит не слишком современно

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