Из чего состоит идеальный паттерн? Что и как нужно рисовать, чтобы получился по-настоящему отличный повторяющийся рисунок. Советы дают художники со всего мира, занимающиеся созданием паттернов профессионально.
Лучшие художники по части паттернов — ведущие иллюстраторы и дизайнеры текстиля — делятся советами, о том как рисовать прекрасные повторяющиеся узоры с использованием Photoshop, Illustrator, карандашей, ручек, и красок.
Динара Миртлипова (Dinara Mirtlipova), Узбекистан:
1. Создавать повторяющиеся паззлы для меня как собирать мозаику, собирать что-то из лего или играть в тетрис. Ритм каждого паттерна зависит от его назначения и от того, как его планируется его использовать. Когда я создаю что-то, что станет обоями, мне нужно удостовериться в том, что узор выглядит гладко и красиво даже на трехметровой стене.
Если рисунок для ткани, то масштаб уже не играет такую важную роль, а вот цвета — да. Поэтому я стараюсь не сочетать похожие тона. Если вы поставите рядом розовый и оранжевые или небесно-голубой и лазурный, то после печати на ткани они скорее всего окажутся одним и тем же цветом.
Рис. 1. Паттерн Динары Миртлиповой
2. В свободное время я люблю рисовать “свободные паттерны”. Это не технический термин, просто я так их называю. Суть в том, что у меня нет предварительного плана в голове — я просто черчу квадрат 15х15 и начинаю рисовать в нем паттерн.
Рис. 2. Паттерн Динары Миртлиповой
3. Иногда я использую уже готовые иллюстрации и использую их для изготовления паттернов — это довольно интересное занятие. Прямо как калейдоскоп — каждый раз, когда я меняю или добавляю элемент, вся картина уже выглядит по-другому.
Рис. 3. Элементы паттерна Динары Миртлиповой с Рис.3.
Лотта Хюльхорн (Lotta Kühlhorn), Швеция:
4. Чтобы создать запоминающийся повторяющийся рисунок, прежде всего нарисуйте много разных мотивов и форм в ручную. У меня нет светового стола, так что вместо этого я использую две ручки разной толщины, а также блокнот с прозрачной калькой, чтобы срисовывать мотивы прямо с фотографий.
Я обвожу только контуры — контуры самих объектов и контуры бликов на них. Для этой техники очень важно, чтобы линия была ровной и непрерывной. Все формы должны быть замкнутыми, потому что это усложнит заливку цветами на компьютере. Когда рисуешь, довольно просто пропустить какую-то дырку, но ее можно закрыть позже, в Photoshop-е.
Рис.4. Паттерн Лотты Кюльхорн
5. Обычно, когда я сканирую свои рисунки, я делаю линии более черными и убираю ненужные части бумаги через настройку уровней (levels) в Photoshop-е. Я применяю настройки таким образом, чтобы сделать черные тона еще более черными, а белые еще более белыми, чем есть на рисунке.
Если оказывается, что это необходимо, я разделяю картинки, чтобы обработать их в Photoshop-е так, чтобы каждая часть мотива имела абсолютно одинаковые тона и чтобы все они были размещены на отдельных слоях.
6. Создайте три разных оригинала (например, для консервной банки для сардин я сделала три версии: в желтом, в черном, и в розовом цвете). Залейте все части, которые должны быть сплошного цвета, черным, используя инструмент Заливка в Photoshop-е.
Для этого вам нужно, чтобы линия была сплошная, иначе черный зальет всю страницу. Продолжайте разделять картинки, пока все изображения в оттенках серого не станут черно-белыми. Потом, когда вы разберетесь со всеми частями паттерна, переходите к их раскрашиванию.
Эбигейл Борг (Abigail Borg), Великобритания:
7. Не бойтесь экспериментировать с цветами. Забудьте все правила о сочетаниях цветов. Если вам кажется, что какие-то цвета хорошо смотрятся вместе, так и оставьте.
Поиграйте со своим рисунком, если, конечно, вас не поджимает дедлайн, назначенный клиентом, не торопитесь.
Повторяющиеся картинки могут быть каверзными. Мне обычно помогает вернуться к работе над дизайном через несколько дней после начала и посмотреть на паттерн свежим взглядом, чтобы понять, куда идет дело, и как надо действовать дальше.
Рис.5. Паттерн Эбигейл Борг на наволочке.
8. Оставьте время на эксперименты с такими элементами, которые в вашей голове совершенно не сочетаются. Не ограничивайте себя и не пытайтесь заранее спланировать, какие элементы вы будете повторять в своем паттерне.
Вы можете начать паттерн и сказать “Я хочу, чтобы здесь были розы и пионы и все”. Сложно представить, как в итоге будет выглядеть такой паттерн. В моей истории, самые удачные и привлекательные паттерны получались совершенно случайно.
Рис.6. Эбигейл Борг, процесс создания паттерна.
Рейчел Кейв (Rachel Cave), Великобритания:
9. Все мои работы начинаются в Illustrator-е, потому что я предпочитаю нырять в работу сразу и начинать создание форм, используя инструмент Перо (Pen tool). Иногда я могу сначала сделать несколько быстрых традиционных компоновочных эскизов, но обычно я играю с формами и узорами прямо сразу на компьютере.
Используя Pen tool, я сначала рисую простые формы паттерна, обычно они носят или цветочный, или геометрический характер. Также я использую панель текстур, которые тоже могут дать очень интересные эффекты, например уголь, карандаш или краска. У моего стиля очень простой и графический вид, но никогда не помешает добавить немного текстур.
Рис.7. Рисование цветочных элементов пером в Illustrator-е.
10. Когда каждый элемент нарисован и раскрашен, я просто начинаю их повторять в зависимости от того, каким я представляю паттерн, до тех пор, пока не добьюсь такого результата, который будет меня радовать.
Очень полезный совет — использовать направляющие (‘Guides’) в Illustrator-е. Они помогут аккуратно разметить повторяющиеся плитки, что необходимо для создания идеального паттерна.
Рис.8. «Выбираю элементы, которыми довольна. С помощью направляющих, размечаю нужный кусок и вымеряю повторение. Когда все размечено, обрезаю. Получаю идеально повторяющийся кусок паттерна.»
11. У меня есть библиотека, или коллекция, своих работ. Всегда полезно держать под рукой все, что вы ранее напридумывали, потому что никогда не знаешь, когда захочется к чему-то вернуться и использовать заново. Огромное количество дизайнов можно переработать или перекрасить. Плюс к тому, эти материалы вашего собственного производства могут быть ценными референсами.
Мэри Танана (Mary Tanana), США:
12. Я помню, как один из моих преподавателей по иллюстрации в колледже сказал мне: “не покрывай глазурью пирог, пока он не испечен!” И в работе с паттернами я до сих пор придерживаюсь этой философии.
Я действительно провожу очень много времени, работая над эскизом ,над “костями” паттерна. Начала я рисую в черно-белой гамме, потому что я считаю, что добавление цветов сразу, очень сильно сбивает с толку.
Рис.9. Работа над дизайном паттерна в ч/б.
13. Когда схема готова, я добавляю цвета. Цвет нужно распределять равномерно, так что я включаю лупу, чтобы периодически переключаться на уменьшение, чтобы проверить то, как баланс цветов выглядит издали. На работу с цветами, чтобы добиться того что мне нужно, я тоже трачу очень много времени.
Рис.10. Работа над покраской ч/б дизайна.
14. Когда я заканчиваю работу с цветом, я делаю “точечный тест”, чтобы посмотреть, как выбранные цвета взаимодействуют между собой. Это помогает в работе с принтами и здорово экономит время.
Рис.11. «Точечный тест».
Лесли Тодд (Lesley Todd), Великобритания:
15. Создайте иллюзию разнообразия в своем паттерне путем отражения, поворота и перекраски повторяющихся мотивов.
Рис.12. Паттерн Лесли Тодд.
16. Я люблю придавать текстуру и узор моим мотивам, но здесь важно помнить, что Adobe Illustrator даст вам загрузить в форму в специальный инструмент для создания узоров, если вы сначала расширите свой паттерн. Мне понадобилось какое-то время, чтобы это понять!
Рис.13. «Расширение» паттерна в Adobe Illustrator.
17. Инструмент для создания паттернов в Adobe Illustrator — замечательно подходит для экспериментов. Когда я создаю паттерн, самые на мой взгляд динамичные и интересные результаты получаются, когда я использую не один мотив, а несколько.
Лесли Вуд (Leslie A Wood), США:
18. Сначала нарисуйте формы довольно общего вида, а потом перенесите каждую из них на индивидуальный слой в Photoshop, продолжая дорабатывать дизайн. Хотя на это уходит довольно много времени, эффект получается более интересный, чем со стандартным повторяющимся паттерном. Так что я создаю отдельный слой для каждой формы, а потом копирую, вставляю и двигаю, чтобы посмотреть, как они “работают” вместе.
Обычно у меня как минимум пять разных форм — это приятно разнообразит композицию и помогает добиться того, что две одинаковые формы не окажутся бок о бок. Оставляя место между формами, вы даете себе возможность впоследствии доработать паттерн, дорисовав в конце какие-нибудь мелкие элементы, которые принесут баланс в вашу картинку.
Рис.14. Паттерн Лесли Вуд.
19. Когда я начинаю работать над новой иллюстрацией, я всегда делаю несколько набросков, но особенно это полезно, когда я придумываю новый паттерн, потому что этот ход помогает понять, какой вариант расположения более удачен.
Рис.15. Эскиз к паттерну на Рис.14.
Примечание переводчика: о технической стороне компоновки паттернов подробнее здесь!
Паттерн (англ. pattern – «шаблон, образец») – это система предсказуемо повторяющихся элементов, которые создают единую структуру. В графическом дизайне паттерн – это узор, содержащий в себе повторяющиеся фигуры, и это повторение следует определенным правилам. Но об этом чуть позже.
Людей всегда окружали паттерны. Такие узоры – это не плод человеческого воображения. Повторяющиеся элементы свойственны природе – представьте волны и морскую пену, ракушки, выброшенные на песок, спирали раковин моллюсков или просто симметрию снежинок. Со временем человек перенял эту «идею» у природы и начал использовать паттерны в своих целях, в частности для визуального оформления.
Давайте разберемся, что же такое паттерн, для чего он нужен и как правильно его использовать в графическом дизайне.
Паттерн – это порядок
Понятие «паттерн» используется в нескольких дисциплинах, но этот термин всегда говорит об упорядоченной системе. Это понятие используется не только в дизайне, «паттерн» – термин обширный. Его можно встретить в психологии, в музыке, проектировании и даже в биологии. Вот несколько примеров:
- Паттерны проектирования. В программировании понятие паттерна используется в качестве подхода к проектированию как алгоритма для решения проблемы. Например, чтобы спроектировать табурет, необязательно экспериментировать с одноногими прототипами, если сотни лет до вас люди делали их с четырьмя ножками – у вас есть проверенный шаблон.
- Паттерн в музыке. Ритмический рисунок, басовая партия или повторяющийся гитарный риф – все это паттерны, которые являются неотъемлемыми частями практически любой музыкальной композиции.
- Паттерн в психологии и UX-дизайне. Набор шаблонных реакций или последовательности действий называют паттерном поведения. В частности, это используется в дизайне интерфейсов для изучения поведения пользователей.
Захватывая различные дисциплины, этот объемный термин неизбежно закрепился и в области графического дизайна. О том, насколько паттерны вжились в дизайн и для чего их вообще используют, я расскажу далее.
Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей
Подписаться
Паттерны в графическом дизайне
В графическом дизайне паттерны используют как элементы фирменного стиля, создают из них иллюстрации или просто применяют в качестве бэкграунда. Это могут быть простые узоры вроде повторяющихся фигур, логотипов или даже сложных иллюстраций в едином стиле.
Паттерны используются повсеместно в дизайне одежды и интерьеров. В интерьере узоры чаще всего можно увидеть на шторах, обоях, мебели и керамической плитке. И в одежде вы их точно встречали. У вас есть любимая рубашка с принтом или вышивкой с повторяющимися элементами? Поздравляем, вы – счастливый обладатель рубашки с паттерном!
Фишка паттернов – в последовательности элементов, которая может продолжаться до бесконечности. В графическом дизайне для этого используют бесшовные паттерны – это значит, что у них нет границ и узор начинается снова в той же точке, в которой заканчивается. Это дает возможность помещать его на любой носитель и масштабировать как угодно – от нанесения на всю длину платья до размещения на маленький блокнот.
Посмотрите на пример сложного паттерна от Akeme Brand Identity. Здесь переплетаются женские фигуры, точки и листья, и все это в одной цветовой гамме. У этого узора нет швов: его можно продолжить в любую сторону, и он всегда будет выглядеть одинаково.
Элементы паттерна всегда расположены по правилам. Если какой-то элемент выпадает из общей концепции, то он рушится (получается простая иллюстрация).
Итак, перед вами точно паттерн, если:
- элементы повторяются в определенной последовательности,
- узор выглядит однородным полотном,
- компоненты паттерна выполнены в едином стиле,
- есть логика размещения и повторения элементов (наклон, масштаб, цвет и т.д.)
Паттерн как часть фирменного стиля
Чаще всего в графическом дизайне паттерны используются как часть айдентики компании наравне с логотипом, так как его элементы – это узнаваемые детали фирменного стиля. Как правило, при создании паттерна используются фирменные цвета и фигуры, поэтому идентифицировать бренд по узору бывает легко.
В дизайне брендбука паттерны используются для оформления упаковок, фирменного мерча, униформы, фонового изображения сайта и при оформлении рекламы – все зависит от фантазии дизайнеров. Паттерн можно создать даже из логотипа, как, к примеру, поступили дизайнеры ресторана Duda – их лого превратился в узор, который теперь можно масштабировать на любую поверхность.
Обычно дизайнер создает паттерны вместе с фирменным стилем компании. Паттерн работает как полноценная часть стиля бренда или линейки продукции, с его помощью можно оформить продукт и вызвать определенные ассоциации. Например, чтобы сделать упаковку чая более романтичной, дизайнеры Sophia’s Tea добавили цветочный паттерн в пастельных тонах. Настраивает на долгое чаепитие!
Хороший паттерн помогает донести философию бренда до потребителя. Если воздушный цветочный паттерн идеально подходит для романтичной упаковки чая, то это не значит, что нечто подобное можно использовать для всех чаев на свете. Хороший пример того, как паттерн транслирует суть компании, – дизайн фирменного стиля бара Cru. В этом случае дизайнеры в качестве узора использовали морских обитателей. Это сразу дает понять, на какой кухне специализируется этот бар. А еще здесь можно заметить маленькую деталь – буква «u» в части логотипа напоминает рыболовецкий крючок, и его тоже вплели в паттерн.
Паттерны – многофункциональная штука. С их помощью можно не только показать, на чем специализируется компания, или отобразить настроение продукта – разными паттернами можно разделить однотипные продукты в линейке. Именно так сделали дизайнеры компании Alora Coffee Co., которая занимается кофейными капсулами. Каждая коробочка имеет свой узор, обозначающий вкус. Легко запомнить!
Типы паттернов
Современный графический дизайн предлагает массу стилей паттернов на любой вкус. Паттерн – это не просто узор с кружочками, иногда он включает даже персонажей или прячет в себе детали лого. В этом списке я собрала несколько самых популярных типов узоров, которые обязательно вдохновят вас на создание крутого паттерна. Давайте посмотрим!
Геометрический
В таких паттернах основа – геометрические фигуры, которые переплетаются в строгой последовательности. При этом не обязательно использовать одну и ту же фигуру – можно попробовать скомбинировать несколько разных, например, треугольники и квадраты.
Абстрактный
Абстрактные паттерны могут добавить щепотку современного искусства в ваш дизайн. Правда, такие узоры бывают сильно перегружены элементами, поэтому использовать их стоит с осторожностью. Мне очень нравятся абстрактные узоры от художника Tom Abbis Smith. Его узоры использовали для дизайна коробочек косметической продукции, в качестве принтов для одежды (есть целая коллекция!) и даже для упаковок попкорна.
Минималистский
В минимализме очень много пространства и воздуха – это его основа. Такие паттерны не требуют особого внимания зрителя – они позволяют создать основу для того, чтобы другие важные элементы дизайна сыграли главную роль. Другие примеры минимализма в паттернах можно посмотреть у художницы Ashley Goldberg, чей узор я взяла для иллюстрации.
С персонажами
Такой тип паттерна вы часто можете встретить в дизайне текстиля, особенно детского. Мне очень симпатичны милые узоры от дизайнера Laura Lhuillier. В своих работах она использует образы людей и животных, и, учитывая тренды современного дизайна, выглядит это замечательно.
Паттерн из логотипа
На этом примере бесшовный паттерн создан на основе элементов логотипа. Такой паттерн работает на узнаваемость – знакомые цвета и формы образуют узор, который теперь наравне с лого ассоциируется с брендом.
Типографика
Основа таких паттернов – буквы или слова, которые комбинируются по тем же правилам: цвет, угол, расстояние. Если вы создаете подобный узор для бренда, убедитесь, что шрифт соответствует его индивидуальности. Например, можно взять букву из названия компании или слово, которое наиболее точно транслирует философию бренда. Посмотрите, какие паттерны создали для DiaTipo SP. Узор, основу которого составляют буквы и знаки препинания, отлично выглядит на носителях разного рода: от значков до баннеров.
Как создать свой паттерн
Если, посмотрев на эти замечательные примеры узоров, вы захотели срочно создать свой, то обязательно ознакомьтесь с моей короткой инструкцией. Думаете, создать паттерн очень сложно? Возможно, но только если он состоит из множества сложных элементов, которые нужно рисовать от руки, а потом еще и соединять под разными углами. Давайте я покажу процесс создания простого паттерна с логотипом Timeweb. Весь процесс я буду показывать в программе Adobe Photoshop 2020.
- Для начала создадим новый документ. У меня это будет холст размером 200х200 пикселей.
- Теперь нужно поместить изображение, которое будет основой для нашего узора. Я подготовилась заранее, поэтому просто помещаю в документ изображение стрелочки, которую я взяла с лого Timeweb. Отрегулируйте размер элемента, захватив его за уголок с зажатыми клавишами Shift+Alt. Изображение будет трансформироваться относительно центра. Удаляем слой с фоном, предварительно сняв с него замочек. Панель со слоями расположена в правой части.
- Дублируем наш слой с элементом. Для этого нужно нажать на слой в списке слоев или просто на сам объект, а затем – Ctrl+J.
- Следующий шаг – применяем сдвиг. Выбираем наш новый скопированный слой, затем нажимаем в верхней панели вкладку «Фильтр» – «Другое» – «Сдвиг».
- В окне «Сдвиг» необходимо выбрать количество пикселей, на которое будет смещаться объект. Мой холст размером 200х200 пикселей, и я выбираю смещение на 100 пикселей по горизонтали и по вертикали. Убедитесь, что в параметрах выбран пункт «Вставить отсеченные фрагменты». Нажимаем ОК.
- Почти готово! Теперь нужно перейти во вкладку «Редактирование» и нажать «Определить узор».
- Задаем нашему узору какое-нибудь имя и нажимаем ОК.
Давайте попробуем залить этим паттерном какой-нибудь холст. Я создала документ рандомного размера. Чтобы применить узор к фону, сначала разблокируем его, а затем дважды кликнем мышью. У вас появится окно, отвечающее за стиль слоя. Здесь слева есть пункт «Наложение узора», где в выпадающем меню можно найти узор, который мы создали. Готово!
Заключение
Паттерны – это замечательная штука, которая поможет оживить дизайн. Важно использовать узоры с умом, так, чтобы они не отвлекали внимание от главных элементов (если, конечно, вы не ставите им такую задачу). В фирменном стиле паттерн несет не только декоративную функцию – его элементы включают набор визуальных знаков, поэтому правильный паттерн работает на узнаваемость и индивидуальность бренда. Надеюсь, что теперь, когда вам встретится паттерн, вы не только сразу поймете, что это не просто узор, а даже сможете определить, в каком стиле он выполнен.
Мы уже рассказывали в наших статьях, что такое паттерн и как используют паттерны в современном дизайне. В этом материале мы расскажем, где скачать паттерны, которые можно использовать в полиграфии и вебе, а также какие существуют конструкторы паттернов в онлайне.
Показываем:
- где скачать паттерн бесплатно;
- как сделать собственный паттерн онлайн;
- где получить код для встраиваемого CSS-паттерна.
Самый простой способ получить готовый паттерн — сделать запрос pattern на одном из фотостоков. Это быстрое решение, которое позволяет получить профессионально и качественно сделанный рисунок. Все изображения даже на бесплатных фотостоках проходят тщательную модерацию с достаточно высокими требованиями.
Единственный нюанс при поиске паттерна на фотостоке заключается в значении английского слова pattern ― оно означает как сам паттерн, так и просто узор. Поэтому не все найденные на фотостоке паттерны будут образовывать бесшовные текстуры ― то есть соединяться в единую плоскость без заметных стыков. Прежде чем скачать выбранный образец, оцените на глаз, совпадают ли края изображений по границам картинки. А если нет ― насколько легко это будет исправить в графическом редакторе.
Несмотря на то что все паттерны на перечисленных сайтах бесплатные, есть важное условие: нужно обязательно указать автора и источник паттерна. Это один из главных принципов использования изображений по бесплатным лицензиям.
Вопреки названию Freepik ― «бесплатная картинка», ― часть изображений на этом стоке нужно покупать. Чтобы получить только бесплатные образцы паттернов, введите слово pattern в поиск и отметьте галочкой параметр Free в настройках на странице с результатами выдачи.
Что удобно, система распознаёт запрос и вместе с отдельными паттернами показывает подборки коллекций ― например, паттернов в стиле бохо, новогодних паттернов, паттернов с радугой. Параметр фильтра Free в коллекциях не работает ― бесплатен ли образец, станет понятно после нажатия на картинку.
Кроме растровых паттернов, некоторые авторы выкладывают на Freepik исходные файлы в формате Photoshop ― PSD ― или Adobe Illustrator ― AI. Такие паттерны разрешено модифицировать ― убрать какие-то элементы, добавить, что-то передвинуть или покрасить в другой цвет. Ну а можно просто сохранить картинку в растровом формате и использовать «как есть».
Главная особенность Vecteezy в том, что в основе его коллекции лежат не фотографии, как обычно, а рисованные изображения ― их также можно использовать в дизайне.
Чтобы найти здесь бесплатный паттерн, нужно ввести слово pattern в поиск и отметить Free License в фильтрах слева. Коллекция разделена на четыре категории изображений:
- иллюстрации (Images);
- векторные изображения (Vectors);
- фотографии (Photos);
- с поддержкой прозрачности (PNGs);
- анимация (Video).
К паттернам применимы практически все из них, кроме фото и видео. К сожалению, искать сразу по нескольким категориям нельзя ― каждую придётся просмотреть отдельно. Если хочется скачать редактируемый паттерн, то начать лучше с категории Vectors, а если вы хотите управлять фоном своего паттерна ― то PNGs, эти картинки можно класть на любую подложку.
Отдельного внимания заслуживает цветовой круг в настройках поиска: с его помощью можно ограничить палитру паттерна, выбрав, например, только темно-зелёные или жёлтые светлых тонов. Если хочется сбросить эту настройку, достаточно нажать на крестик в строке Hex Color Code под кругом.
Flickr ― это огромный архив изображений, где каждый может завести себе страницу. Многие авторы выкладывают рисунки и снимки по лицензии Creative Commons ― то есть доступными для бесплатного использования.
В основном на этом сайте пользователи делятся фотографиями. Чтобы найти здесь бесплатный паттерн, нужно ввести слово pattern в поиск и в выпадающем списке Any License слева выбрать All Creative Commons. Раскрыв дополнительные настройки Advanced, в выпадающем списке Content отметьте Illustration/Art.
Паттерны здесь доступны только в растровом формате ― то есть менять рисунок в них не получится, как максимум ― сделать коррекцию цвета в графическом редакторе.
В верхнем меню Advanced находятся удобные фильтры: можно выбрать картинки только определённой тональности ― от красного до фиолетового ― или задать стиль изображения ― например, минималистичный или чёрно-белый. Среди стилей есть и Pattern, но для поиска паттернов его лучше не использовать, поскольку не все авторы заносят свои рисунки в эту категорию и есть шанс что-то пропустить.
На сайте WowPatterns нет ни фотографий, ни рисунков ― он целиком посвящён только паттернам и поэтому не столь популярен, как Freepik или Flickr. И в этом его большое преимущество. Второй его ощутимый плюс ― все паттерны здесь относятся к бесшовным текстурам. То есть их не нужно редактировать или внимательно рассматривать, точно ли образцы соединятся без стыков.
Коллекция разделена на 27 тематических категорий, некоторые из них имеют подкатегории. Можно скачать паттерны с музыкальными инструментами, акварельные паттерны или ко Дню святого Валентина. Всего в коллекции более трёх тысяч образцов, большая часть из которых выложена в векторном формате EPS.
Кроме коллекции паттернов на сайте есть отдельный инструмент для создания бесшовных текстур Pattern maker ― о нём мы расскажем ниже.
Серьёзный минус использования паттерна из бесплатных коллекций ― его можно однажды обнаружить не только в своём дизайне. Однако образцы из библиотек удобны, когда вам нужно представить на утверждение концепт, детали которого затем будут прорабатываться отдельно.
Если вы работаете с серьёзным коммерческим проектом, лучше отказаться от бесплатных библиотек и воспользоваться паттерном, созданным самостоятельно.
Паттерн можно создать в графическом редакторе, но гораздо проще ― воспользоваться одним из онлайн-сервисов. Их главное преимущество ― достаточно простые настройки и возможность получать собственные образцы без установки сложных и дорогостоящих программ.
Как мы уже сказали выше, библиотека WowPatterns располагает не только коллекцией готовых образов, но и имеет собственный сервис по созданию авторских паттернов ― Pattern maker.
Принцип его работы достаточно прост. Пользователь загружает изображение, выделяет фрагмент, после чего программа согласно разным алгоритмам отражает выбранный кусочек и размножает его на всё поле. При этом, несмотря на простоту механизма, далеко не сразу получается угадать, что же с этим кусочком произошло.
Настроек у сервиса всего несколько:
- размер фрагмента паттерна: маленький, средний и большой (к сожалению, использовать можно три фиксированных размера);
- алгоритм размножения фрагмента;
- угол наклона паттерна;
- настройки цветокоррекции.
Чтобы сохранить получившийся образец в формате PNG или JPG, нужно нажать на кнопку Export в левой части экрана. Максимальный размер сохраняемого образца ― 500 px или чуть более 13 см.
Сервис Seamless Pattern Maker создаёт паттерны на основе готовых изображений. У него есть собственная библиотека иконок, но если её не хватит ― можно загрузить практически любые картинки в формате SVG или PNG.
У каждого элемента будущего паттерна можно менять:
- размер;
- угол наклона;
- у элементов из библиотеки сервиса можно менять цвет.
Также есть возможность задать цвет фона или заменить его изображением, которое будет размножено.
После нажатия на кнопку Download получившийся паттерн будет сохранён в PNG-формате.
В сервисе GeoPattern нет ручных настроек ― он генерирует паттерны на основе вводимого текста. Напоминает лотерею ― нужно писать слова, и один из вариантов обязательно окажется удачным.
Чтобы сохранить понравившийся результат в формате PNG, нужно нажать кнопку Save Pattern внизу страницы.
Repper App ― инструмент для создания растровых паттернов. Хотя он и платный, его цена оправдана большими возможностями настроек и алгоритмов, а бесплатная демоверсия позволяет их испробовать.
Механизм работы построен на выборе небольшого кусочка картинки, который затем многократно отзеркаливается как в калейдоскопе ― выбрать можно один из более чем тридцати алгоритмов. В результате получаются причудливые узоры с незаметными стыками.
Программа сама анализирует загруженное изображение и предлагает различные интересные варианты паттернов. При этом в сервисе есть множество ручных настроек. Среди них возможности изменить:
- исходное изображение, из которого будут браться образцы;
- форму образца и алгоритм размножения;
- настройки для отдельных образцов;
- тонкие настройки цвета и специальные эффекты.
Получившийся паттерн можно оценить как на плоскости, так и примерив его на мокапы: различный текстиль или кружки. Для сохранения предусмотрено два формата: JPG и PNG, причём каждый в очень высоком разрешении.
Стоимость использования сервиса для некоммерческих проектов ― 5 долларов в месяц, опробовать все возможности Repper App можно в течение 14 дней бесплатно.
Обычно паттерн ― это картинка, которая используется в дизайне полиграфии, на сайтах и в приложениях. Но если для печатного дизайна нужно изображение в графическом формате, то разработчики сайтов могут обходиться в некоторых случаях вообще без картинок, встраивая только код.
Преимущество такого подхода в том, что такой код практически ничего не весит и будет загружен даже при самых плохих интернет-соединениях. При этом выглядеть CSS-паттерн будет как настоящая графика.
Предложенные интернет-сервисы генерируют как CSS-код, так и графические файлы, которые можно использовать в дизайне для офлайн-носителей.
На странице Doodad Pattern Generator предложено 70 образцов, разбитых на девять категорий. Для каждого из них можно менять такие параметры, как:
- цвета;
- угол наклона элементов;
- размер элементов;
- наклон образца.
Также к объектам есть возможность применять различные фильтры. Таким образом, сервис может создать десятки тысяч уникальных паттернов, каждый из которых доступен в растровых форматах JPG или PNG, векторном SVG.
Разработчики могут получить паттерн в виде строчки CSS-кода, встраиваемой на сайт.
Сервис Hero Patterns позволяет выбрать один из готовых 99 паттернов и настроить для него:
- цвет узора;
- степень прозрачности узора;
- цвет подложки.
Паттерн можно сохранить как в формате SVG, так и в виде CSS. Впоследствии вы и разработчик сможете редактировать паттерн, не прибегая к сервису: для этого нужно менять значения Background-color и Fill прямо в коде, там же можно регулировать и степень прозрачности.
Для тех, кто использует Figma, сделан удобный плагин Hero Patterns for Figma. Не стоит путать его с другим популярным плагином — Pattern Hero, о котором мы рассказываем в этой статье.
Бесшовные паттерны очень популярны на стоках, но далеко не все стокеры умеют делать их правильно. Мы решили написать ряд статей, в которых посмотрим на паттерны для стоков с непривычной стороны. Поэтому мы не будем говорить о том, как правильно обрезать узор и технически подготовить его к загрузке на микростоки. Наша задача — подумать, что побуждает покупателей выбирать тот или иной паттерн.
Начнём со структурного построения паттернов. Многие новички сталкиваются с проблемами в этом вопросе. На стоках часто можно увидеть паттерны с композиционными ошибками, которые снижают качество как превью, так и размноженного узора. А так как выбор в нише очень большой, на такие работы маленький спрос и они не продаются. В топы пробиваются только грамотно сделанные работы.
Мы подготовили эту статью по материалам лекции Анастасии Черновой. Лекция проходила на нашем канале Creative Course, запись по ссылке. Анастасия окончила МГТУ им. Косыгина, уже 10 лет работает художником-орнаменталистом и знает о построении паттернов всё и даже больше. В этой статье лишь частица этих знаний.
Создание паттернов можно разделить на два больших этапа:
- отрисовка элементов (мотивов);
- распределение этих элементов по рабочей области (тайлу);
С отрисовкой мотивов в целом всё понятно. Это творческий этап. Каждый автор рисует в своём стиле и на свои темы. Мы не будем сейчас касаться этого вопроса.
Поговорим о втором этапе. Все паттерны можно разделить на статические и динамические. Они передают разные эмоции и настроение. Когда выбираете схему для конкретной задачи, подумайте какое настроение вы хотите передать.
Статические паттерны
Спокойные, стабильные, неподвижные, ненавязчивые. Такие паттерны вы можете увидеть на детских пелёнках, в оформлении интерьера, на задниках веб-сайтов. Почти всегда такой паттерн не привлекает внимания, если не рассматривать его специально.
В статических паттернах все мотивы одинакового размера, находятся на одинаковом расстоянии друг от друга и при этом одинаково ориентированы в пространстве.
Ниже предложены схемы с подборками паттернов. Эти картинки использовались в презентации нашего вебинара. Для тех, кто не смотрел — рассказываем. В каждой из этих подборок есть картинка с треугольничками — она и является примером нашей схемы. На примере статики мы видим, что треугольнички имеют одинаковый размер, одинаково удалены друг от друга и имеют один поворот, как бы, смотрят в одну сторону.
- Основные черты паттерна
- Где используются паттерны
- Виды паттернов
- Как сделать паттерн в графических редакторах
Основные черты паттерна
Вот особенности любого паттерна:
- повтор элементов в заданной последовательности;
- логика в использовании цвета, масштаба, наклона, размера элементов;
- узор представляет собою однородное полотно, из которого визуально не выбивается ни одна деталь;
- узор выполнен в одном стиле.
Если в рисунке есть такое единство и однородность — это паттерн. Но если какая-либо деталь выбивается, становится более яркой и заметной, то изображение становится иллюстрацией, потому что для иллюстрации характерно выделение композиционного центра.
Где используются паттерны
Во-первых, паттерны являются обычным явлением для нашей с вами повседневной одежды и обстановки. Если присмотреться, то повторяющиеся узоры можно встретить на рубашках, платьях, обуви, обоях, шторах, блокнотах и многом другом.
Кроме того, паттерны применяют при оформлении узнаваемого образа компании и ее фирменного стиля. Занимаются такими задачами бренд-дизайнеры. Например, паттерны могут разместить в специальном каталоге фирменного стиля (брендбуке) вместе с узнаваемыми символами компании — логотипами и шрифтами.
Популярность паттернов в графическом дизайне связана с их универсальностью и удобством. Такие графические работы используются в оформлении сайтов, дизайне упаковок, мерча, рекламных материалов и многого другого.
Современные дизайнеры, выбирая между фото/иллюстрацией (то есть какой-то сюжетной картинкой) и паттерном, часто отдают предпочтение последнему. Причин у этого несколько:
- Паттерн хорошо масштабируется и адаптируется под разные форматы. Например, если ставить на фон сайта фото, то какая-нибудь его часть будет скрыта текстом и читатель уже не увидит, что там изображено. Если же наносить фото на кружку, то его сложно расположить красиво, без обрезки и оставленных пустот. С паттернами дело обстоит гораздо проще, их можно увеличивать или уменьшать, а также располагать различными способами без ущерба для визуального распознавания;
- Паттерн не имеет композиционного центра. Часто в графическом дизайне требуются изображения без какого-либо одного центрального элемента, привлекающего внимание. Это нужно, например, для фонов и подложек блоков на сайте, а также при дизайне одежды.
- Паттерн прост в изготовлении. Для него достаточно сделать всего 2–3 небольших уникальных элемента, а потом просто равномерно распределить их на холсте.
Виды паттернов
Выделяют обычно следующие наиболее распространенные типы узоров.
Геометрический. Основой являются круги, квадраты, треугольники, линии и прочие фигуры, которые в четкой и единообразной последовательности переплетаются друг с другом.
Абстрактный. Здесь элементами часто служат переосмысленные и сильно стилизованные предметы реального мира, например растения, небесные тела, предметы интерьера и пр.
Минималистский. Отличается от всех прочих малым количеством элементов и большим пространством. Такие паттерны служат фоном для привлечения внимания к другим более важным объектам дизайна.
Паттерны с персонажами. В них используют изображения людей и животных. Подобные узоры обычно применяют в дизайне текстиля, чаще всего детского.
Типографика. Данный вид паттерна можно сделать из различных комбинаций букв или слов. Они сочетаются по цвету, углу и расстоянию. Узоры из букв и знаков пунктуации отлично выглядят на всевозможных плакатах, баннерах и значках.
Паттерн из логотипов. Узор составляется из элементов логотипа компании, что должно привлекать внимание и вызывать ассоциацию с брендом.
Как сделать паттерн в графических редакторах
Процесс создания паттерна зависит от программ, в которых вы работаете. Рассмотрим особенности создания паттернов в Adobe Illustrator, Adobe Photoshop и Figma. Во всех этих программах нужно сначала подготовить отдельные элементы паттерна, например скачать их из интернета.
- В Illustrator затем нужно нажать Объект → Узор → Создать (Object → Pattern → Make) и установить желаемый размер картинки в пикселях. После совершения этой операции можно найти свой паттерн на панели «Образцы» и применять его уже в готовом виде.
- В Photoshop нужно создать пустой лист, заполнить его любым узором в центре, не касаясь краев. Затем нажимаем Фильтры → Другое → Сдвиг, выставляем значение, равное половине ширины/высоты вашей картинки. Затем ставим галочку в пункте «Вставить отсеченные фрагменты» и получаем паттерн.
В Figma узоры создаются чаще всего при помощи отдельных плагинов — программ-надстроек. Среди них — CoShuffler, Hero Patterns, Fizzy, Confetti и др.