Создаем паттерн в Фотошопе
Создаем паттерн в Фотошопе
Паттерн, регулярный узор, бесшовный фон… Называйте, как хотите, но смысл один – заполнение фона (сайта, документа) повторяющимися элементами, между которыми нет видимой границы или перехода.
В этом уроке будет рассказано о том, как сделать узор в Фотошопе.
Здесь рассказывать особенно нечего, поэтому сразу приступаем к практике.
Создаем документ с размерами 512х512 пикселей.
Далее необходимо разыскать (нарисовать?) однотипные элементы для нашего паттерна. Тематика нашего сайта компьютерная, поэтому я подобрал такие:
Берем один из элементов и помещаем в рабочую область Фотошопа на наш документ.
Затем перемещаем элемент на границу холста и дублируем его (СTRL+J).
Теперь идем в меню «Фильтр – Другое – Сдвиг».
Смещаем объект на 512 пикселей вправо.
Для удобства выделим оба слоя с зажатой клавишей CTRL и поместим их в группу (CTRL+G).
Помещаем новый объект на холст и перемещаем к верхней границе документа. Дублируем.
Снова идем в меню «Фильтр – Другое – Сдвиг» и перемещаем объект на 512 пикселей вниз.
Таким же способом помещаем и обрабатываем другие объекты.
Осталось лишь заполнить центральную область холста. Я мудрить не буду, а помещу один большой объект.
Паттерн готов. Если требуется его использование в качестве фона веб страницы, то просто сохраняем в формате JPEG или PNG.
Если же планируется заливать паттерном фон документа в Фотошопе, то нужно сделать еще пару шагов.
Шаг первый – уменьшаем размер изображения (если требуется) до 100х100 пикселей.
Затем идем в меню «Редактирование – Определить узор».
Даем имя узору и нажимаем ОК.
Давайте посмотрим, как будет выглядеть наш паттерн на холсте.
Создаем новый документ с любыми размерами. Затем нажимаем сочетание клавиш SHIFT+F5. В настройках выбираем «Регулярный» и ищем в списке созданный паттерн.
Нажимаем ОК и любуемся…
Вот такой несложный прием для создания паттернов в Фотошопе. У меня получился симметричный узор, Вы же можете располагать объекты на холсте хаотично, добиваясь более интересных эффектов.
Отблагодарите автора, поделитесь статьей в социальных сетях.
Как создать бесшовный паттерн: в Photoshop, в Gimp и вручную
Легкомысленные цветочные мотивы на обоях, уютная и основательная клетка на пледе, яркий узор на упаковочной бумаге. согласитесь, без принтов и орнаментов наш быт был бы намного скучнее. Мы часто рассказываем вам, как использовать их в интерьере, а на этот раз решили поделиться секретом создания.
Бесшовные паттерны — это узоры, состоящие из повторяющихся элементов, граница между которыми не очевидна. Конечно, это весьма условное определение: даже на принтах, которые называют бесшовными, найти границу может быть проще или сложнее. Посмотрите на примеры ниже. В первом мы легко находим «элементарную частицу» и понимаем, что это просто нарисованные на квадратном холсте четыре арбузные дольки. А вот как сделать паттерн наподобие второго, не настолько очевидно. Что ж, этим мы сегодня и займемся!
Вручную
Написать этот материал нас вдохновил мастер-класс иллюстратора Джулии Ротман, в котором она показала, что паттерны можно создавать и без компьютера под рукой. Бумага, фломастер, ножницы и скотч — вот все, что вам понадобится, чтобы понять основной принцип.
1. Берем лист бумаги (любого формата) и рисуем на нем часть будущего принта. Постарайтесь заполнить большую его часть, при этом не касаясь краев.
2.Теперь лист нужно очень аккуратно разрезать на четыре части. Сдвиньте фрагменты по диагонали (так, чтобы левый нижний оказался вверху справа, левый верхний — внизу справа и т.д.) и очень аккуратно соедините с изнанки скотчем. Чем незаметнее будут швы, тем меньше времени придется тратить потом на доработку изображения.
3.Заполните изображением образовавшуюся пустоту.
На этом бумажная часть работы заканчивается. На основе этого паттерна уже можно сделать, например, трафарет. Впрочем, практика показывает, что идеально разрезать и склеить фрагменты не получается, так что лучше довести рисунок до ума в графическом редакторе.
4. Отсканируйте изображение и попробуйте вручную соединить несколько копий, оставляя между ними зазор в один пиксель. Вы наверняка обнаружите, что во многих местах стыки заметны. Исправьте недостатки, работая только с основным, центральным фрагментом, и после этого удалите все лишние копии.
5. Все готово к тому, чтобы использовать ваш рисунок для создания паттерна. Переходите к пункту № 5 в инструкциях ниже!
Photoshop
Совсем не обязательно уметь рисовать — тем более на бумаге.— чтобы создать паттерн. Вполне можно обойтись красивыми кистями для графического редактора. Показываем, как это сделать, и рассказываем о всех этапах создания цифрового паттерна.
1. Создайте пустой документ небольшого размера с длиной сторон, пропорциональной двум.
2. Заполните любым узором пространство в центре листа. Важно оставить пространство по краям листа; в любом случае нужно следить, чтобы узор не касался его краев.
3. В эксперименте с бумагой нам пришлось вручную разрезать лист и склеивать его снова. В Photoshop это делается одним нажатием кнопки, с помощью инструмента Сдвиг/Offset.
Фильтры → Другое → Сдвиг
Go to Filter → Other → Offset
Значение сдвига сделайте равным половине ширины/высоты вашего изображения. Отметьте пункт «Вставить отсеченные фрагменты».
4. Заполните пустоту, продолжая следить, чтобы рисунок не выходил за края изображения.
5. Сохраните изображение как паттерн.
Редактирование → Определить узор.
Edit → Define Pattern
6. Теперь паттерном можно заполнять любую выбранную область, просто используйте инструмент Заливка (G) и в его настройках вместо «Основной цвет» выберите «Узор».
Paint Bucket Tool, Pattern
Gimp — открытый аналог Photoshop, который можно скачать совершенно бесплатно. Для профессиональных нужд его используют не часто, но он вполне заменит продукт Adobe, если вам нужно подкрутить резкость на фотографии или — создать паттерн.
1. Создайте новое изображение. Мы уже знаем, что длина и ширина его должны быть пропорциональны двум.
2. Создайте в центре листа рисунок.
3. Для того, чтобы разрезать и склеить изображение, воспользуемся инструментом Смещение.
Слои → Преобразования → Сместить
Layer → Transform → Offset
В отличие от Photoshop, здесь не обязательно в уме делить размеры изображения на два, достаточно нажать на кнопку под полями ввода значений. Не забудьте отметить пункт «Залить изображением»/Wrap around.
4. Дорисуйте недостающие фрагменты паттерна.
5. Сохраните изображение как паттерн.
Правка → Вставить как → Новая текстура
Edit → Paste as → New pattern
6. Заполните паттерном лист любого размера, используя инструмент Плоская заливка/Busket fill (Shift + B) и выбрав в меню Цвет заливки/Fill type опцию Текстурой/Pattern fill.
P. S. Для чего мне уметь создавать паттерны, можете спросить вы? Для того, чтобы создать уникальный трафарет для декора стен, упаковать рождественские подарки в бумагу с именами одариваемых, сделать на заказ подушку с принтом мечты, которую все не удавалось найти в продаже. Мы верим, что творчески подойти можно ко многим делам, а умение пользоваться разными инструментами никогда не бывает лишним.
Создание паттерна в Фотошопе
Наверняка, при работе в Фотошопе, вы не раз использовали различные паттерны, для того, чтобы сделать фон более интересным или же, чтобы придать какому-либо объекту больше стиля. В любом случае паттерн – “штука” очень полезная.
В этом уроке мы разберемся с вами, как сделать в Фотошопе свой собственный паттерн.
Создание паттерна
- Для начала, как обычно, создаем новый документ в программе. Размеры холста выбираем на свое усмотрение. Главное, чтобы он был квадратным – это обязательно.
- После, мы должны определиться с тем, из каких элементов будет состоять наш паттерн. Нужно нарисовать/найти что-то однотипное, но при этом интересное. Мы будем делать паттерн для музыкального сайта. А для него идеально подойдут логотипы известных музыкальных сервисов (рисовать не будем, т.к. займет много времени).
- Приступим непосредственно к созданию паттерна. Переносим первый объект (логотип YouTube) в наш документ.
Откроется окно настроек сдвига. В нашем случае мы установим ползунок в пункте “По горизонтали” на отметке -1000 пикс. (т.к. ширина холста 1000 пикс). 
После применения изменений, получаем готовый вариант одного элемента (YouTube) для паттерна:
Если хотим, чтобы он был прозрачным, то просто удаляем слой с белым фоном и сохраняем исключительно в формате PNG. Если же нам нужен паттерн с белым фоном, то сохраняем, как есть в формате JPG или PNG, по желанию.
Давайте посмотрим, как будет выглядеть наш паттерн, если его размножить на большой холст, скажем размером в 4000×4000 пикс.
Неплохо, очень неплохо для потраченных на это 10-15 минут.
Сохранение паттерна в узорах
Если вы считаете, что в дальнейшем созданный вами паттерн понадобится снова, то его можно сохранить в узорах.
- Для этого переходим в меню “Изображение” ->“Размер изображения”
и уменьшаем хотя бы до 500×500 пикс. 
Вы не обязаны этого делать. Здесь все по желанию – можно оставить размер, каким он был. - Далее в главном меню выбираем “Редактирование” ->“Определить узор”.
В открывшемся окне вводим желаемое название узора и кликаем “ОК”. 
Готово.
Заливка фона паттерном
Теперь, при создании новых документов, вы всегда сможете выбрать данный узор для работы в Фотошопе. Приведем просто пример – заливка фона нашим паттерном.
Для этого, после создания нового документа (абсолютно любого), нажмите SHIFT+F5. Перед нами появится окно с настройками заполнения. Выбираем в пункте “Использовать” – “Регулярный”. После, в пункте “Заказной узор”, выбираем наш паттерн и кликаем “ОК”.
Результат выглядит таким образом: 
На этом все! До встречи в наших следующих уроках!
База знаний / Как делать паттерны в фотошопе
Что такое паттерн?
Паттерн (от англ. pattern – шаблон) фокусируется на повторении.
В сравнении с мелкими текстурами паттерны являются едиными цельными элементами. Они могут включать любой способ повторения объектов, слов, цветов или фигур. Детали паттерна расположены в четкой последовательности, которая может развиваться бесконечно. Такая функциональная возможность делает их и впрямь универсальным инструментом, который идеально подходит для «резиновой» верстки современных сайтов, полиграфической продукции, а также при оформлении массивных конструкций наружной рекламы.
Совершенно любое изображение может служить основой для паттерна, включая созданные образы с помощью передовых компьютерных технологий, точно воспроизводящих поверхность различных материалов (дерево, камень, кирпич, кожа и т.д.).
В веб-дизайне
Паттерны всегда были неотъемлемой частью веб-дизайна, поэтому им всегда уделялось внимание в первую очередь. Применяя их, вы создадите страницы своего корпоративного сайта или личного блога более динамичными и нестандартными, что поможет не только привлечь внимание, но и увеличить охват вашей целевой аудитории. Такой вариант дизайна используется во многих разделах веб-сайтов, но особенно популярен при выборе фона. Паттерны идеально заменяют собой стандартную и скучную белую или серую расцветку.
В фирменном стиле
Паттерны являются весьма полезными инструментами, которые часто применяются в качестве фона рекламно-графических материалов, сувенирной продукции и корпоративной деловой документации. Использование паттерна в фирменном стиле формирует уникальность и повышает узнаваемость вашей компании даже без таких дополнительных подсказок, как логотип, название, слоган и т.п. Например, всем известен знаменитый паттерн Louis Vuitton (золотистые орнаменты и перекрещенные буквы LV на коричневом фоне) или узнаваемый многими паттерн бренда Burberry (красно-бело-черно-желтая «клетка»).
Уникальное сочетание стилеобразующих элементов, их выстроенная ритмическая структура, выразительность и характерность позволяют паттерну наравне с логотипом быть основным идентификатором бренда.
В оформлении конкретных продуктов
Очень часто паттерны можно увидеть на различной продукции, связанной с индустрией моды, где приветствуется максимальная креативность. Законченные или частичные узоры активно применяют для оформления новых образов в одежде, обуви, парфюмерии и разнообразных аксессуаров.
В последнее время особую популярность приобретает размещение паттернов на упаковке товаров. Своеобразный орнамент колоритно и гармонично декорирует упаковочные материалы, привлекая внимание потенциальных клиентов и оказывая влияние на рост продаж.
Как создать паттерн?
Разработка уникального паттерна с нуля занимает достаточно много времени, особенно если необходимо создать многогранный образ с большим количеством мелких деталей. Важно помнить, что просто нарисовать элемент или взять фотографию может быть недостаточно, чтобы стать полноценным «резиновым» узором. Для этого нужно научиться создавать бесшовные паттерны – это узоры, основанные на повторяющихся элементах, граница между которыми не очевидна.
Как создать паттерн?
Разработка уникального паттерна с нуля займет немало времени, особенно если вам необходим многогранный узор с большим количеством мелких деталей. Важно помнить, что просто нарисовать элемент или взять фотографию может быть недостаточно, что бы стать полноценным «резиновым» узором. Для этого нужно научиться создавать бесшовные паттерны– это узоры, состоящие из повторяющихся элементов, граница между которыми не очевидна.
- Берем наше готовое изображение или рисуем часть будущего принта (важно оставить пространство по краям листа). А затем разрезаем его на 4 части инструментом «Раскройка».
- Теперь наше изображение нужно сдвинуть по диагонали (так, чтобы левый нижний угол оказался вверху справа, левый нижний угол – внизу справа и т.д.) В Photoshop это можно сделать с помощью инструмента Сдвиг/Offset
Фильтры > Другое > Сдвиг
Go to Filter > Oter > Offset
В значении сдвига сделайте равным половине ширины/высоты вашего изображения. Отметьте пункт «Вставить отсеченные фрагменты»
- Заполняем образовавшуюся пустоту элементами, которые не будут соприкасаться с краями.
- Сохраните изображение как узор.
- Воспользуйтесь инструментом «Прямоугольная область» на изображении, чтобы выбрать область, предназначенную для применения в качестве узора. Параметр «Растушевка» должно быть присвоено значение 0 пикселей.
- Редактирование > Определить узор
- Введите имя для узора в диалоговом окне «Имя узора».
Подготовленные варианты узоров воспроизводятся на всплывающих панелях на панели параметров для инструментов «Заливка», «Узорный штамп», «Восстанавливающая кисть» и «Заплатка», а также в диалоговом окне «Стиль слоя». Изменять способ отображения узоров на всплывающих панелях можно, выбирая вариант отображения во всплывающем меню панели. Предусмотрен также диспетчер установки для возможности управлять наборами узоров.
Загрузка...
