Экономия пространства диска и отсутствие головной боли.

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

Часть первая: создание базовых паттернов

Для начала мы создадим базовую неперекрывающую текстуру, чтобы понять общий принцип построения. Откроем Sketch и создадим артборд размером 100х100 пикселей. Вы можете сделать это, нажав A на клавиатуре, и удерживая shift, кликнуть и протянуть на артборде.

создадите артборд в пропорции 1:1
Удерживая Shift, создадите артборд в пропорции 1:1

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

Паттерн № 01
Паттерн № 01

Ничего не накладывается друг на друга, все элементы рисунка сидят внутри только что созданного квадрата. Добавим цвет фона. Для этого выделите артборд, и увидите опцию добавления цвета фона в панели справа. Убедитесь, что эта опция включена, выберите нужный цвет (у меня выбран #E6E1DD). Обязательно проследите, чтобы переключатель “include in export” был также активирован. Без этого при попытке создать текстуру только что созданный фон будет отсутствовать.

сохранить цвета на будущее в селекторе палитры.
Вы можете сохранить цвета на будущее в селекторе палитры.

После добавления цвета фона вы можете добавить фигуры, из которого будет состоять рисунок паттерна. Первый объект будет круг 40×40 пикселей посередине артборда. Своему кругу я задал цвет #C59144.

выравнивания можно выровнять один выделенный объект относительно артборда

С помощью инструментов выравнивания можно выровнять один выделенный объект относительно артборда.

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

Треугольник
Треугольник

Теперь, когда уже есть основание паттерна, можно экспортировать что-то, что позволит использовать текстуру в дизайнах. Выделите артборд, содержащий паттерн, и в нижней части правой панели Sketch вы увидите опцию “make exportable”. Кликните на ней для входа в опции экспорта. Мы сохраним этот образец в формате 1x PNG, назвав как-то вроде “pattern_01.png”. Или вы можете назвать по-другому. Сохраните этот файл в легкодоступном месте. Для этого урока я сохранил его в папке “Patterns” на рабочем столе.

Вы можете экспортировать в разных размерах (1x, 2x, 3x и т.д.).
Вы можете экспортировать в разных размерах (1x, 2x, 3x и т.д.).

Наконец, можно воспользоваться созданным паттерном. Нарисуйте круг или прямоугольник (или любую другую фигуру) в файле Sketch. Вместо задания однотонной заливки мы зальем эту фигуру картинкой. Для этого кликните на цвете в опциях заливки и найдите иконку, которая напоминает иконку фото приложения iPhone (или которая выглядит как цветок для пользователей Android и 15 Windows). Кликните на ней, выберите опцию “Choose Image”, выберите файл с только что созданным паттерном. Как только выбрали файл, объект должен залиться соответствующей текстурой.

текстура в sketch готова
Магия

Тут уже можно поиграть с размером текстуры, можно сделать ее больше или меньше; тем не менее, если вам нужно сильно увеличить ее размер, паттерн может выглядеть мозаично, могут выделяться отдельные пиксели. Но этого можно избежать, снова экспортировав паттерн, но уже в 2x или 3x.

Гораздо проще, чем создавать новые паттерны снова и снова.
Гораздо проще, чем создавать новые паттерны снова и снова.

Часть два: создание перекрывающих паттернов

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

Паттерн № 02
Паттерн № 02

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

Можно легко проверить правильность позиционирования, скопировав артборд и поместив его либо рядом, либо над/под первым артбордом.

Паттерн вручную дублируется, чтобы проверить выравнивание
Паттерн вручную дублируется, чтобы проверить выравнивание

Очевидно, что вы можете создать гораздо более сложные паттерны, это всего лишь пример, с чего начать этот процесс.

Есть вопросы? Комментарии? Замечания? Обязательно обсудим их в комментариях.