Как создать паттерн: Создаем детальный бесшовный паттерн в Adobe Photoshop

Содержание

Как сделать паттерн | verovski

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

Чем паттерн отличается от текстуры

Что такое текстура, думаю объяснять не нужно. Википедия отвечает на этот вопрос так:

Текстура — изображение, состоящее из более или менее близких по восприятию элементов.

Беспроигрышный вариант создания текстуры — это сфотографировать её самому, или найти/купить изображение в Интернете. Подробнее этот вопрос я освещал в статье Как подобрать текстуру в Фотошопе.

Термины «текстура» и «паттерн»

между собой постоянно путаются. Паттерн называют текстурой, а текстуру паттерном. Но разобраться в разнице между ними очень просто. Паттерн тоже является в некоторой степени текстурой. Но в отличии от текстуры, паттерн может повторяться, и повторяясь он складывается в единые неделимые текстурные «обои».

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

Как это происходит?

Предположим у вас есть изображение текстуры и Объект, определенного размера, на который надо эту текстуру натянуть. Изображение текстуры меньше объекта, и единственный способ натянуть её на объект — увеличить в размере, потеряв в качестве.

Использовать текстуру как паттерн не получится, так как её швы не сходятся друг с другом. Придется такую текстуру либо увеличивать, либо вручную работать с масками и слоями, чтобы полностью натянуть на объект.

Паттерн, в отличии от куска текстуры, устроен так, что его края сходятся друг с другом, образуя непрерывное полотно.

Как сделать паттерн?

Паттерн делается очень просто. Достаточно выделить инструментами выделения любой участок изображения и открыть Edit > Define Pattern.

После этого выделенный кусок будет преобразован в паттерн и появится в стилях слоя во вкладке Pattens. Так же его можно будет найти в менеджере настроек Presets Manager. 

Определить кусок графики как паттерн, не значит сделать настоящий повторяющийся паттерн.

Виды паттернов

Паттерн паттерну рознь. Паттерны бывают как простыми, так и сложными. Самый простой паттерн — это паттерн из находящихся на расстоянии друг от друга элементов. Сделать такой паттерн не трудно. Создайте новый фаил с размерами 10 на 10 пикселей. По левому краю нарисуйте полоску в 1 пиксель. Сделайте выделение и определите графику как паттерн Edit > Define Pattern

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

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

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

Как сделать паттерн из текстуры

Для примера мы возьмем текстуру травы, которая представляет из себя обычную фотографию. Не паттерн. Её края друг с другом никак не соединяются, и если нам вздумается из такой текстуры сделать паттерн, мы отчетливо получим швы на соединении.

Вместо того чтобы делать такой кривой паттерн, я применю эффект Filter > Other > Offset суть которого заключается в том, что он сдвигает края внутрь рабочей области.

Теперь когда мы соединили края графики внутри, заретушируем швы их обычными инструментами ретуши вроде Clone Stamp или Spot Healing Brush. Но вместо того чтобы орудовать этими инструментами я поступлю ещё проще. Я сделаю выделение краев инструментом Lasso Tool. Криво и неровно, чтобы при заливке области смотрелись неправильно в хорошем смысле.

И выберу Edit > Fill с настройкой Content-Aware.

Если на ваш взгляд соединения скрыты успешно, выделяйте графику и применяйте Edit > Define Patten. Паттерн из текстуры готов к использованию.

Понравился урок? Подписывайся на Вконтакт, Фэисбук или твиттер, чтобы следить за новыми статьям.

Автор:

Дмитрий Веровски

Работа с узорами (паттернами) в Фотошоп., Уроки

Применение узоров в Adobe Photoshop является необходимым процессом творчества для добавления различных интересных элементов в дизайне.

Узоры просты в использовании, но они могут значительно влиять на восприятие ваших композиций и гармонично дополнять их. В этом уроке Фотошоп

вы узнаете, как создавать, использовать узоры и управлять ими на практике.

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

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

1. Обзор узоров программы с функцией «Управление наборами» (Preset Manager) .

2. Три различных способа применения паттернов в Фотошоп.

3. Как создать собственный узор.

4. Создание и применение линейного диагонального узора на практике.

5. Установка Фотошоп-паттерна в библиотеке программы.

6. Создание библиотеки узоров.

Изучение узоров программы с функцией «Управление наборами» (Preset Manager) .

Вы можете найти узоры программы, заданные по умолчанию через функцию «Управление наборами». Доступ к наборам осуществляется через верхнее меню программы во вкладке Редактирование-Управление наборами (Edit > Preset Manager) . По умолчанию, окно Управления (Preset Manager) отображает палитру кистей (Brushes).

В открывшемся диалоговом окне найдите опцию «Тип набора» (Preset Type) и нажмите на стрелочку вниз. Из выпадающего подменю выберите параметр «Узоры» (Patterns) и вы увидите появившийся по умолчанию программы набор.

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

Для загрузки шаблонов библиотек программы Фотошоп нажмите на стрелку справа в окне «Управление наборами». В выпадающем подменю вы увидите список наборов различные узоров.

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

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


Применение паттернов в Фотошоп.

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


Наложение узора при помощи команды «Заливка» (Fill).

Самый простой способ наложения паттерна заключается в заполнении им выделенной области. Например, активируйте инструмент «Прямоугольное выделение» (Rectangular Marquee Tool (M)) и выделите участок любого размера на холсте. Затем, перейдите в меню Редактирование-Выполнить заливку (Edit> Fill (Shift + F5)) и в диалоговом окне заливки в опции «Использовать» (Use) укажите параметр Регулярный/Шаблон (Pattern).

Заливка узором позволяет использовать опцию «Заказной узор»

(Custom Pattern) . Нажмите на стрелку параметра и вызовите подменю с библиотеками паттернов, нажав стрелочку справа. Выбрав нужный набор или узор, кликните по нему и нажмите ОК, чтобы заполнить им ваше выделение.

Важным преимуществом наложения узора способом Заливки является и то, что данный узор может использоваться на отдельном слое, не затрагивая остальные слои документа.

Наложение узора в «Стилях слоя».

Если вы хотите применить узор для любого выбранного слоя, двойным кликом по миниатюре этого слоя откройте окно «Стили слоя» (Layer Style) . Почти в самом низу найдите параметр «Наложение узора» (Pattern Overlay) и активируйте его. Откроется диалоговое окно опции, где вы можете так же, как и в предыдущем примере, выбрать необходимый паттерн и применить его к слою.

Этот способ требует от вас большей гибкости в использовании: вы можете скрывать, отображать, настраивать и удалять узор слоя, не затрагивая сам слой.

Совет: Чтобы отрегулировать положение узора на холсте, в параметре «Наложение узора» активируйте флажок Просмотр

(Preview) , а затем поместите курсор мыши на холст и, удерживая ее нажатой, передвигайте ваш паттерн в основном окне программы в любом направлении.

Рисование узором при помощи инструментов «Заливка» (Paint Bucket Tool) и «Узорный штамп» (Pattern Stamp Tool) .

Если вы хотите применить узор, рисуя им по холсту, используйте инструменты Заливка и Узорный штамп. Активируйте их и настройте на применение узоров, а не цвета в верхней панели программы.

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

Но рисование узором займет у вас значительно больше времени, чем способ наложения узора при помощи команды «Заливка» или «Стилей слоя».

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


Создание собственного узора в Фотошоп.

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

Чтобы создать узор, используйте инструмент «Прямоугольное выделение» (Rectangular Marquee Tool (M)) и выделите область, которую хотите поместить в узор. Затем перейдите во вкладку Редактирование-Определить узор (Edit> Define Pattern) , чтобы определить выделенную область как паттерн и присвойте ему имя в диалоговом окне.

Совет: Многие предпочитают создавать узор для своей работы за пределами рабочего документа. Это хорошая практика. Создавая Новый документ (Ctrl+N) для своего узора, вы тем самым, концентрируетесь на данной работе, не отвлекаясь ни на что более.


Создание и применение диагонального линейного узора.

Давайте попробуем сделать один из моих любимых паттернов в фотошоп: диагональный узор, который был применен для дизайна сайта «Design Instruct».

Создаем новый документ (Ctrl+N) в Фотошоп размером 600х600 рх и разрешением 72 рх/ дюйм c белым фоном.

Активируем инструмент «Горизонтальный текст» (Horizontal Text Tool (T)) и пишем фразу Design Instruct в верхней части холста. Выберите темный цвет для текста (#000000) , чтобы ясно видеть нашу работу. В данном варианте использован шрифт Helvetica Neue Medium размером 30 pt, но можно выбрать любой другой шрифт программы (например, Arial).

Теперь переходим к созданию узора для нашего основного документа. Его мы будем рисовать в отдельном документе Фотошоп. Создаем новый документ (Ctrl+N) размером 3х3 рх и разрешением 72 рх/дюйм. Цвет фона Прозрачный (Transparent) .
При сохранении узора в программе позже будет выбран белый цвет фона по умолчанию.

Так как холст довольно маленького размера, увеличим его инструментом Zoom Tool (Z) (лупа), приблизив. Я увеличил холст до 3200% от основного размера, что является максимальным увеличением.

Теперь будем рисовать белые диагональные линии по направлению из верхнего левого угла к нижнему правому. Для этого активируем инструмент Карандаш (Pencil Tool (B)) .

Установим цвет переднего плана (Foreground) на белый (#ffffff) и настроим размер карандаша на 1 рх с жесткостью (Hardness) 100%. Убедитесь, что опции Непрозрачность (Opacity) и Нажим (Flow) равны 100%.

Я в своем примере специально переключился на другой цвет, чтобы вы могли ясно видеть весь процесс создания узора. Удерживая Shift, нажмите Карандашом (Pencil Tool) в левом верхнем углу холста, а, затем в правом нижнем. Получилось ровное диагональное соединение из квадратов.

Вот как должен выглядеть получившийся узор у вас (я переключился на исходный белый цвет):

После создания диагональной линии, перейдите в Выделение – Все (Select> All (Ctrl+A)) , чтобы выделить весь холст.

Теперь перейдите во вкладку Редактирование-Определить узор (Edit> Define Pattern) и в диалоговом окне присвойте имя вашей линии, т.е введите любое название для вашего узора. После нажмите ОК.

Теперь закройте документ с узором (его не нужно сохранять) и вернитесь в исходный рабочий документ.
Применим наш выполненный узор к документу тремя вышеописанными способами.


Команда «Заливка» (Fill).

Создаем новый слой выше слоя с текстом (Ctrl+Shift+N) . Выделим текст, удерживая Ctrl и кликнув по иконке этого слоя.

Переходим в Редактирование-Выполнить заливку (Shift+F5) . В диалоговом окне в опции Использовать (Use) выбираем Узор (Pattern) , а в опции Заказной узор (Custom Shape) находим наш нарисованный паттерн с диагональными линиями.

Нажимаем Ок, чтобы применить узор с помощью команды Заливка (Fill).

Положительным моментом данной техники является то, что заливка узором находится на отдельном слое, что позволяет добавлять к паттерну разные стили слоя, которые не влияют на текстовой слой под ним. Давайте попробуем так сделать. Уменьшим непрозрачность (Opacity) слоя с узором до 80%.

Совет: Хорошей практикой является использование узора на отдельном от объекта слое. Но, чтобы объект перемещался по холсту вместе с примененным к нему узором, используйте функцию Связать слои (Link Layers) . Иконка этой функции имеет форму скрепки и находится внизу панели слоев. Выделите нужные слои ( Ctrl +клик по миниатюре слоя) и нажмите на значок скрепки, или правой кнопкой мыши кликните по выделенным слоям и выберите опцию - Связать слои.


Применение диагонального узора в «Стилях слоя».

Теперь скройте верхний слой с узором (глазик напротив иконки слоя) или удалите его, перетянув слой на иконку корзины внизу панели слоев.

Дважды щелкните по текстовому слою, чтобы вызвать окно «Стилей слоя» (Layer Style) и выберите параметр «Наложение узора» (Pattern Overlay) . В окне параметра нажмите на стрелку с узором и из набора выберите ваш созданный диагональный паттерн. Включите функцию Предварительного просмотра (Preview) , чтобы контролировать процесс наложения узора и, если необходимо, изменить что-либо.

Вот вкратце разъяснение опций окна «Наложение узора» (Pattern Overlay) :


1. Изменение режима смешивания в узоре (Умножение, Перекрытие, Осветление основы и т. д.)

2. Управление непрозрачностью узора. Чем ниже уровень непрозрачности, тем прозрачнее узор.

3. Окно узора. Открыв его, можно выбрать любой узор для наложения на объект.

4. Создание нового имени для данного узора.

Нажав на окно узора, а затем на стрелку справа, вы можете выбрать функцию из выпадающего меню – Сохранить узор (Save Pattern) и сохранить его под другим именем в наборе. Если вы сделали с узором какие-либо изменения (масштаб, режим смешивания или непрозрачность), то они также будут сохранены вместе с выбранным образцом.

5. Масштаб (Scale) регулирует масштаб и разрешение узора.

6. Связать со слоем (Link with Layer)

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

Наложение узора при помощи инструмента «Узорный штамп» (Pattern Stamp Tool (S)) .

Теперь попробуем использовать в работе наш диагональный узор при помощи «Узорного штампа». По своему стилю данный инструмент похож на использование Кисти (Brush Tool (B)) , только рисуем мы не цветом, а узором по холсту.

Для начала, скройте видимость слой-эффекта «Наложение узора» на текстовом слое или удалите его, нажав правой кнопкой мыши по строке слоя и выбрав опцию – Очистить стили слоя.

Далее, активируйте инструмент «Узорный штамп» (Stamp Tool (S)) в панели инструментов.

В верхнем меню настроек нажмите на окно палитры узоров и найдите наш диагональный узор. Активируйте его и настройте дополнительные параметры: размер кисти штампа, непрозрачность или нажим.

На Новом слое (Ctrl+Shift+N) начните рисовать поверх текста узором. Вы можете видеть, что я использовал штамп лишь в некоторых местах текста и менял непрозрачность (Opacity) инструмента для уникального эффекта.
В отличие от предыдущих двух способов наложения узора (Заливки и Стилей слоя) этот прием немного сложнее и требует определенного навыка.


Установка узоров в Фотошоп.

Если вы хотите использовать узоры, скачанные с других сайтов, то загрузить их в программу довольно просто. Перейдите в Редактирование-Управление наборами (Edit> Preset Manager) и в диалоговом окне нажмите на функцию «Загрузить» (Load) справа. Помните, что ваш скачанный узор должен иметь расширение РАТ, чтобы программа установила его. В открывшемся окне загрузки укажите место нахождения вашего файла с узором и нажмите «Загрузить».

Обычно узоры устанавливаются программой в папку по такому пути : Adobe Photoshop [Photoshop Version] > Presets > Patterns .

Вот несколько бесплатных ресурсов, которыми вы можете воспользоваться при поиске нужных узоров:



Adobe – Photoshop Exchange Patterns
deviantART
Brusheezy
The Ultimate Collection Of Free Photoshop Patterns

Создание библиотеки узоров.

Чтобы создать шаблоны узоров в библиотеке программы, перейдите во вкладку Редактирование-Управление наборами (Edit > Preset Manager) . Выберите в списке образцы, которые вы хотите добавить в библиотеку, удерживая Ctrl и делая клик по нужным узорам, выделяя их. Далее нажмите кнопку «Сохранить» (Save Set) . Сохраните набор выбранных узоров в любом месте вашего компьютера.

Теперь этот файл можно установить и на других компьютерах. Успехов в освоении программы!

Как сделать паттерн лучше? | artlab.club

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

Сразу определимся, что для меня значит «сделать лучше» — интереснее, однороднее, красивее и более применимым к реальной жизни.

Для меня паттерны условно делятся на две большие группы собственного изобретения — геометричные и хаотичные. Геометричные, это когда элементы выстраиваются в определенном порядке и по сетке, отражаются друг относительно друга и складываются в четкие композиции. Хаотичные — когда элементы просто разбросаны по плоскости без особенного порядка. В основном я делаю именно хаотичные паттерны, потому что мне они кажутся более креативными и интересными.

Итак, как улучшить паттерн.

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

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

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

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

Ограничить цветовую палитру
Здесь отлично работают палитры с сайтов а-ля [необходимо войти на сайт или зарегистрироваться] Этот способ хорош еще тем, что помогает сбалансировать содержимое паттерна и ограничить цветовой расколбас. Если у вас проблемы с подбором цветов и вы тяготеете к грязным и невзрачным оттенкам — это реальный выход. Причем сгруппировав элементы по цвету, можно легко попробовать несколько палитр и выбрать лучшую.

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

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

Экспериментировать с цветами обводок и их удалением
Это в том случае, если вы рисуете контурные картинки как я. Часто изменение цвета контура преображает картинку до неузнаваемости и делает ее гораздо красивее.

Комбинировать цветное с монохромным
Это сильный прием и часто действительно помогает сильно изменить паттерн и правильно расставить акценты.

Ну и конечно сами исходники из которых составляется паттерн должны быть интересными, красивыми и стильными, тогда и результат будет соответствующим.
Интересно было бы послушать ваши идеи, как улучшить паттерны. Может у вас есть какие-то свои необычные находки — милости прошу делиться в комментариях.

Все примеры паттернов взяты из Пинтереста.

Создание паттернов в генераторе от Flaticon (функции и плюсы)

При подготовке очередного набора иконок обнаружили в проекте Flaticon интересную функцию, позволяющую создавать паттерны онлайн из найденных там материалов. Фишка достаточно необычная, как нам показалось, и достойная небольшого обзора. Вы можете сразу зайти в сам генератор по адресу Pattern.flaticon.com либо увидите соответствующую кнопку в процессе работы.

После клика по «Create a pattern with these icons» также попадаете на страницу данного веб-инструмента. Причем по умолчанию в качестве доступных исходных картинок вам будут предложены изображения из того набора, который вы только что рассматривали. Допустим, это были иконки цветов для сайта «Flowers».

Весь алгоритм работы состоит из трех шагов, которые расположены в левой колонке страницы:

  • Search — выбор иконок и непосредственно создание паттерна.
  • BG — установка фона, если нужно.
  • Download — скачивание результата.

Находить картинки можете с помощью блока поиска или просто пролистывая весь список доступных наборов — «Packs». При выборе одного из них вы автоматически переключитесь в закладку «Icons», откуда будете непосредственно добавлять изображения для своего паттерна.

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

Не менее крутая штука — редактирование конкретных элементов.

Кроме изменения размера объектов, при клике по нему появится всплывающее меню, где можно:

  • изменить все цвета в иконке;
  • сделать зеркальное преобразование изображения;
  • выбрать прозрачность;
  • дублировать элемент;
  • удалить лишние материалы.

Когда наиграетесь с этими настройками, переходите к фону (BG).

На этой странице генератора паттернов от Flaticon расположен инструмент с выбором цветовой палитры для фона. Определитесь с цветом, яркостью и прозрачностью.

Последний шаг «Download» позволяет указать формат картинки (PNG, SVG, JPG, B64) и ее размеры. После задания всех параметров жмете «Download Pattern», и работа на этом закончена. Далее просто подключаете изображение на сайт через свойство background-image в CSS. Пример реализации для SVG найдете в статье про архив SVG фонов Hero Patterns.

Если знаете еще интересные сервисы создания паттернов онлайн, присылайте названия ниже в комментах.

Как создать бесшовный паттерн в Иллюстраторе

6 Май 2015       Юрий Хрипачев      Главная страница » О софте      Просмотров:   8546

Приветствую Вас на своем блоге!
Хочу поделиться с вами своим опытом работы в программе Adobe Illustrator и показать, как создать бесшовный паттерн в Иллюстраторе самому, затратив на это всего несколько минут.
Pattern – это узор, который повторяясь заполняет своим рисунком всю рабочую область, которую мы им заполняем. Часто он используется, как задний фон на сайтах, но еще его можно применить и как фон для обложки книг или рисунка на футболке и кружке.

Для таких узоров можно использовать цветы, животных, технику, дома, просто разные фигурки и узоры. Сделать такой рисунок легко и справится с этим любой пользователь, главное найти изображение, которое вы будете использовать при создании узора.
Если вы не можете рисовать, то можно взять рисунок или несколько рисунков в сети и сделать с их помощью уникальный pattern, которого ни у кого нет.

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

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

Я создал квадрат размером 300х300 пикселей, вы можете создать файл любого размера, и перенес на него свои рисунки.

Для работы нужно выбрать инструмент “Выделение”, это темный курсор в самом верху выбора инструментов, для его выбора можно нажать клавишу V на клавиатуре.

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

Теперь нужно скопировать наши картинки с одной стороны нашего квадрата на другой край полотна так, чтобы при соединении квадратов они создавали единое целое. Начнем с левой стороны нашего квадрата.
Выделите один или сразу все элементы с левой стороны нашей формы. Для того, чтобы выбрать сразу несколько рисунков нужно нажать клавишу Shift и удерживая ее выделять курсором рисунки.

Теперь нажмите на правую кнопку мыши и в меню выберите:

Трансформировать – Перемещение

или просто нажмите сочетание клавиш

Shift+Ctrl+M

Для того чтобы сместить рисунки слева направо их нужно переместить по горизонтали.

Размер моего квадрата 300х300 пикселей, значит нужно значение “По горизонтали” выставить 300 пикселей, а “По вертикали” 0 пикселей. Отметив галочкой пункт “Просмотр”, вы сразу увидите, как переместится ваш рисунок. Затем нужно нажать на кнопку “Копировать”.

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

Также вызываем окно “Перемещение”, но уже значение “По горизонтали” ставим 0 пикселей, а “По вертикали” на 300 пикселей.

И ваши рисунки переместятся сверху вниз и при соединении квадратов, получится бесшовное изображение.

Перемещать рисунки нужно на то расстояние, какое имеет ваша форма. Если она у вас 400 пикселей на стороне, то и перемещать изображение нужно на 400 пикселей.

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

Для того, чтобы изменить прозрачность всей картины, выделите сразу все изображение, нажав сочетание клавиш Ctrl+A и измените ее прозрачность.

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

Для того ,чтобы сохранить свой рисунок, перейдите по пути:

Файл – Сохранить для интернета

или нажмите сочетание клавиш:

Alt+Shift+Ctrl+S

И выберите нужный вам формат и сохраните его.

Сохранится у вас уже примерно такой рисунок, без лишних деталей.

И смотреться он будет отлично, никаких швов.
Теперь вы знаете, как создать бесшовный паттерн в Иллюстраторе и легко это сможете сделать.
Кстати, если вы хотите изменить цвет при работе с созданием паттерна, но не знаете какой выбрать, программа Just Color Picker поможет вам сделать выбор.
Удачи!

С уважением Юрий Хрипачев.

    Метки: бесшовный паттерн, паттерн     

Урок Illustrator - Как быстро создать растительный бесшовный паттерн - Уроки

Цель урока

В этом уроке мы научимся создавать бесшовный паттерн, используя режим создания паттернов в Adobe Illustrator CS6, Width Gradient Tool и Width Selector Tool. С этими инструментами создавать паттерны намного проще. Вы уже попробовали?

Шаг 1

Начнем наш урок с создания скелета бесшовного узора. При помощи InkScribe Tool я создал десяток криволинейных сегментов, которые представляют собой равномерные пути.

Выделяем созданные пути, затем переходим Object > Pattern > Make, что ведет к переходу в режим Pattern Creation. Выбираем Tile Type: Brick by Row, затем берем Pattern Tile Tool в панеле Pattern Options.

Pattern Tile Tool позволяет нам изменять размеры плитки, то есть регулировать расстояние между элементами паттерна.

Шаг 2

Продолжим создавать скелет нашего растительного паттерна, не выходя из режима Pattern Creation. Создаем новые криволинейные сегменты при помощи InkScribe Tool или Pen Tool (P). Режим создания паттернов  позволяет нам создавать новые элементы, которые не будут накладываться на уже существующие, так как мы видим соседние плитки.

Продолжим заполнять пробелы между элементами паттерна.

Шаг 3

Теперь превратим наши кривые в путипеременной ширины. В этом нам помогут Width Gradient Tool и Width Selector Tool, которые являются инструментами нового плагина WidthScribe .

Итак, берем Width Gradient Tool и открываем его панель (Window > Width Scribe > Width Gradient panel).   Теперь выберем V образный вид распределения ширины вдоль линии действия градиента из всплывающего меню панели.

Выбираем режим Liner и устанавливаем абсолютные значения для минимальной и максимальной ширины пути.

Теперь выделяем путь, показанный на рисунке ниже, и применяем к нему градиент, используя метод "нажал - перетащил".

Шаг 4

Мы получили путь переменной толщины, с которым продолжим работать при помощи Width Selector Tool. После выбора этого инструмента мы можем видеть все маркеры ширины, которые имеет путь.

Здесь я хочу заметить, что количество маркеров ширины зависит от значения уровня оптимизации (Optimisation Level) в панели Width Gradient.

Выделяем верхний маркер ширины выделенного пути при помощи Width Selector Tool, затем открываем панель инструмента (Window > Width Scribe > Width Selector panel).

Нажимаем на кнопку Taper Stroke в этой панеле, что приведет к заострению верхней части обводки пути.

Шаг 5

При помощи Width Selector Tool вы можете выделить любой маркер и изменить его ширину, установив необходимое значение в числовом поле Specify Width.

Это намного удобней, чем использовать открывающиеся диалоговые окна, как это происходит при использовании стандартного инструмента Adobe Illustrator  - Width Tool (W). Вы также можете удалить любой выделенный маркер, кроме начального и конечного маркера, нажав на кнопку Delete width markers.

Шаг 6

Применим к другому выделенному пути Liner Width Gradient на этот раз с линейным распределением ширины.

Для того чтобы округлить конец пути выберем опцию Round Cap в панели Stroke.

Шаг 7

Для быстрого выделения всех маркеров ширины пути, выделите один из его маркеров, затем нажмите на кнопку "Select all markers on path”.

Для тех же целей вы можете использовать область выделения.

Теперь у нас есть возможность одновременно изменять ширину всех выделенных маркеров ширины на величину, выраженную в процентах. Для этого установите необходимое значение в числовое поле Change Width, затем увеличивайте или уменьшайте ширину пути,  нажимая на кнопки "+” или "-"

Шаг 8

Создадим форму еще одного листочка нашего растительного орнамента. В этот раз я использовал Liner Width Gradient с A-образным распределением ширины от начальной до конечной точки градиента.

Берем Width Selector Tool, затем нажимаем на клавишу Turn / Enter для открытия диалогового окна Width Selector Preferences. Теперь отмечаем "Shift Stroke From Side to Side.

Выделяем центральный маркер ширины при помощи Width Selector Tool, затем нажимаем на клавишу ] для перемещения обводки в месте выделенного маркера в правую сторону.

Шаг 9

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

Для того чтобы паттерн не выглядел таким тяжелым я создал путь переменной толщины белого цвета, используя Width Gradient Tool и Width Selector Tool.

И наконец, при помощи Ellipse Tool (L) я создал несколько окружностей белого цвета на лепестках орнамента.

Шаг 10

Теперь, когда бесшовный паттерн готов, нажимаем на Done в верхней части окна режима Pattern Creation. Это действие приведет к выходу из режима и сохранению паттерна в панеле Swatches.

Теперь вы можете применять созданный бесшовный паттерн к объектам любой формы.

Для того чтобы ознакомится со всеми возможностями инструментов WidthScribe плагина, посмотрите учебные видео ролики.

Как создавать и редактировать узоры

Что вы узнали: Создайте образец узора из изображения и примените его как заливку

Создать выкройку

  • Выберите иллюстрацию, которая будет использоваться для узора, и выберите «Объект»> «Узор»> «Создать».

При создании рисунка вы работаете в режиме редактирования рисунка. В режиме редактирования узора открывается панель «Параметры узора». Вы видите предварительный просмотр повторяющегося узора в окне документа, и узор сохраняется как образец узора на панели «Образцы».Также в верхней части окна документа появляется серая полоса с параметрами для сохранения рисунка (Готово), создания копии рисунка (Сохранить копию) или отмены операции.

Параметры редактирования рисунков

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

На панели параметров узора вы можете сделать следующее:

  • Назовите шаблон.
  • Выберите тип плитки или способ повторения рисунка.
  • Установите размер плитки с рисунком в соответствии с изображением.
  • Измените ширину и высоту плитки узора.
  • Установите, как перекрываются изображения, и многое другое.

По завершении редактирования параметров узора и рисунка нажмите «Готово» на серой панели в верхней части окна документа, чтобы сохранить изменения рисунка.

Примените образец узора к иллюстрации

Вы можете применить созданный вами узор к заливке или обводке изображения.

  • Выберите иллюстрацию и щелкните цвет заливки или цвет обводки на панели свойств. Выбрав параметр «Образцы», щелкните образец узора, чтобы применить его.

Редактировать выкройку

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

Как создавать повторяющиеся узоры в Adobe Photoshop

Может быть трудно понять, как работают плавно повторяющиеся узоры. Любые объекты, которые «упали» с одной стороны, должны снова появиться на противоположной стороне плитки узора, как в ретро-аркадной игре Asteroids. Это позволяет рисунку продолжаться в бесконечной области за счет увеличения области рисунка по мере дублирования графического изображения плитки. К счастью, в Photoshop можно использовать хитроумную технику, которая упрощает процесс создания пользовательских узоров.В этом уроке я покажу вам, как создать повторяющийся узор в деревенском стиле с помощью фильтра смещения Photoshop.

Узор, который я буду создавать в этом уроке, основан на некоторых прекрасных рисунках из пакета Акварель, который является лишь одним из сотен премиальных дизайнерских ресурсов, доступных участникам Access All Areas. Подборка иллюстраций случайным образом складывается в плитку узора, которая плавно повторяется без каких-либо пробелов.

Поскольку этот узор будет создан из нескольких отдельных иллюстраций, простой способ открыть их в Photoshop - использовать скрипт «Загрузить файлы в стек», который автоматически поместит каждую графику на отдельный слой в одном документе.

Выберите диапазон изображений для использования в плитке узора через меню «Обзор». Убедитесь, что опция Auto Align не отмечена.

Исходные изображения иллюстраций довольно большие. Масштабируйте, а затем уменьшите, уменьшив размеры в меню «Изображение»> «Размер изображения».

Перейдите в меню «Изображение»> «Размер холста» и создайте гораздо большую рабочую область, чтобы собрать всю иллюстративную графику. Точная цифра зависит от вашего конечного использования и того, насколько большим должен быть ваш узор, но помните, что вы всегда можете уменьшить масштаб без потери качества, но вы не можете масштабировать растровую графику вверх.

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

Переместите каждый элемент в его собственное пространство внутри холста, но убедитесь, что они не выходят за край документа. Активация параметра «Автоматический выбор» инструмента «Перемещение» на верхней панели инструментов упрощает выбор каждого слоя.

Используйте CMD + T (CTRL + T для Windows) для преобразования, чтобы изменить размер любых иллюстраций.Расставьте предметы, чтобы они составили основу вашего выкройки.

Создайте снимок документа на новом слое, используя сочетание клавиш CMD + ALT + Shift + E, или удерживайте клавишу ALT, щелкнув меню «Слой»> «Объединить видимые».

В настоящее время все элементы находятся в центре холста. Перейдите в Фильтр> Другое> Смещение, затем измените значения по горизонтали и вертикали, чтобы сместить элементы. Любые иллюстрации, выходящие за край холста, снова появятся на противоположной стороне, что формирует функциональность плитки с повторяющимся узором.

Промежутки, которые изначально были по краю документа, теперь легко видны, поскольку они пересекают центр. Выберите слой с иллюстрацией под снимком и перетащите его в верхнюю часть стопки слоев. Переставьте эту иллюстрацию, чтобы начать заполнять пустое пространство. Используйте CMD + T, чтобы изменить размер, затем щелкните правой кнопкой мыши и выберите «Отразить по горизонтали», чтобы он выглядел иначе, чем в другом месте рисунка.

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

Перейдите в «Правка»> «Определить узор», чтобы создать файл узора Photoshop, который будет сохранен в библиотеке узоров.

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

Дважды щелкните тестовый слой и примените Pattern Overlay. Выберите вновь созданный узор из библиотеки. При 100% узор будет того же размера, что и документ, поэтому уменьшите масштаб, чтобы увидеть, как узор плавно повторяется.

Конечный результат - плитка с бесконечно повторяющимся узором, которая теперь сохраняется в библиотеке узоров Photoshop для использования с инструментом «Заливка» или в качестве наложения узора. Фильтр «Смещение» в Photoshop позволяет легко создавать бесшовную плитку, автоматически дублируя иллюстрации, когда они выходят за край холста. Просто заполнив любые оставшиеся промежутки в макете, узор повторяется без видимых линий между каждой плиткой.

Что такое узор и как его создать?

  1. Что такое паттерн и чем он отличается от повторения и ритма?
  2. Как вы используете шаблоны в веб-дизайне?
  3. Базовые элементы, используемые в шаблонах
  4. Как создать шаблон самостоятельно

Чтобы создать красивый узор для вашей компании, вам необходимо владеть основами веб-дизайна. Спорим, ваша первая идея - нанять профессионального дизайнера или дизайн-студию. Но не торопитесь! Вам действительно нужна внешняя помощь? Вы уверены, что сами не сможете создать достойный узор?

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

Что такое паттерн и чем он отличается от повторения и ритма?

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

Итерация

Итерации очень распространены в веб-дизайне. Используя итерацию, вы привлекаете внимание клиентов двумя похожими изображениями, которые все же имеют некоторые различия. Жизнь показывает, что пользователям нравится изучать такие изображения! Итерации используются в двух случаях:

Итерации на фоновом изображении. Это дизайнерская техника, основанная на сопоставлении графических элементов.Несмотря на внешнее сходство, каждый элемент имеет свои уникальные характеристики. Подумайте о лестнице. Каждая лестница - это отдельный объект, хотя и похожа на другие лестницы. Отдельные элементы могут различаться по цвету, размеру и даже форме, имея при этом одну или несколько общих характеристик. Это секрет создания сбалансированного веб-дизайна.

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

Ритм

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

1. Случайный ритм.Элементы расположены хаотично, но уравновешенно. Случайный ритм - хороший способ освежить ваш веб-дизайн. Будьте осторожны, чтобы не саботировать доступность других типов вашего контента.

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

3. Чередующийся ритм следует последовательности 1-2-1-2-1-2, где расстояния между 1-2 и 2-1 разные.Используйте чередующийся ритм, чтобы оживить монохромный дизайн.

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

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

Шаблон

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

1. Симметричный узор основан на симметрии отражения. Уровень симметрии может варьироваться от базового до сложного.

2. Асимметричный узор. Элементы расположены хаотично, случайным образом. Несмотря на видимую асимметрию, элементы должны создавать сбалансированную композицию, основанную на одной идее.

3. Спираль. Элементы расположены в виде водоворота, создавая почти гипнотический эффект. Спираль ассоциируется с ростом и постоянным развитием.

4. Сетка. Квадратные или ромбовидные фигуры накладываются друг на друга. Сетка создает логичный геометрический узор, который притягивает внимание пользователя, как магнит.

5. Централизованный шаблон. Центральная часть узора выделяется, а края остаются блеклыми. Используйте этот шаблон, чтобы направить внимание пользователя к нужному месту на вашей странице.

6. Линейный узор. Проведите линию вдоль информации, которую хотите выделить. Это еще один способ привлечь внимание посетителей к наиболее важному контенту.

Источник: Mo

7. Радиальный узор. Элементы располагаются в форме круга или овала. В отличие от спирального узора, элементы не образуют спирали, а расходятся от центра, как лепестки цветов.

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

9. Фрактал. Маленькие элементы соединяются друг с другом таким же образом, чтобы создать более крупный элемент. Ссылки в цепочке - отличный пример фрактального узора.

Как вы используете шаблоны в веб-дизайне?

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

Веб-дизайн

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

Фирменный стиль

Хотите сделать себе логотип с абстрактным рисунком? На сайте Logaster вы найдете огромную коллекцию иконок и шаблонов. Вы обязательно найдете варианты, которые соответствуют индивидуальности вашего бренда!

Нужен оригинальный логотип для создания фирменного шаблона?

Создайте профессиональный логотип с Logaster всего за несколько минут!

При создании визуального стиля для вашего бренда выберите шаблон, который отражает суть вашего бренда и передает правильное сообщение вашей аудитории.

Одежда

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

Дизайн интерьера

Если в фирменном стиле присутствует узор, почему бы не использовать его в офисе, студии или магазине? Вы можете нарисовать узор на поверхности или наклеить наклейки - выбор за вами! Нанесите узор на стены, пол, зеркала или мебель, и вы создадите поистине уникальную атмосферу. Это отличный способ укрепить командный дух и повысить производительность ваших сотрудников. Что касается клиентов, они оценят, сколько внимания вы уделяете дизайну интерьера!

Упаковка и этикетки

Головоломка ломаете голову, как привлечь покупателей к вашим товарам на полке супермаркета? Используйте маркетинговый потенциал упаковки и этикетки вашего продукта. Повторяющийся шаблон выделит ваш продукт среди конкурентов и вызовет любопытство клиентов. Поэкспериментируйте с формами, размерами, цветами и визуальными эффектами. Помните, что даже самая мельчайшая деталь может склонить чашу весов к покупке!

Презентации

В презентациях и инфографике узор играет роль ориентира. Используйте шаблоны, чтобы расставить приоритеты для важной информации, удержать внимание зрителей, разнообразить отчет или просто украсить его! Создайте простой ненавязчивый фон, который сможет нарушить однообразие белого листа.

Базовые элементы, используемые в узорах

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

Четырехугольники

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

Круги и овалы

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

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

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

Линии

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

Как создать узор самостоятельно

Онлайн-генераторы паттернов

Онлайн-генераторы - самый простой способ составить узор. Вы можете выбрать готовый шаблон и настроить его в соответствии с индивидуальностью вашего бренда.Давайте сделаем краткий обзор лучших онлайн-генераторов.

Patternizer

Patternizer использует многослойные полосы для создания красивого узора за несколько минут. Вы можете изменить цвет, смещение, ширину, непрозрачность и другие параметры вашего узора.

GeoPattern

Если вас пугают сами слова «графический дизайн», у нас есть для вас ярлык. Перейдите в GeoPattern, выберите шаблон и введите текст, который вы хотите видеть на своем шаблоне.Умный сервис превратит ваши письма в аккуратное изображение.

Patterncooler

Вот еще один бесплатный генератор шаблонов с интуитивно понятным интерфейсом. Но больше всего Patterncooler гордится своей потрясающей коллекцией шаблонов, которые используют различные визуальные темы. Не стесняйтесь выбирать любой шаблон и редактировать его текстуру, цвета, перекрытия и т. Д., Пока не будете довольны результатом.

Генератор фоновых изображений

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

Полосатые фоны

Минималистский дизайн оказывает самое сильное психологическое воздействие на аудиторию. Посмотрите, как сервис «Полосатые фоны» создает пятицветный узор, используя только вертикальные линии!

Программы редактирования графики

Для использования программ редактирования графики вам, скорее всего, потребуются определенные навыки работы с графикой.Но пока не отказывайтесь от этой идеи! Поскольку выкройки - это довольно простые изображения, вы можете создать их даже без опыта.

Adobe Illustrator CS6 (и выше)

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

Шаг 1

  • Чтобы создать узор с нуля, сделайте следующее:

Откройте новый холст и выберите графический объект, который будет основным элементом вашего узора.Щелкните «Объект»> «Узор»> «Создать».

  • Чтобы отредактировать готовый узор, сделайте следующее:

Перейдите в «Образцы» и дважды щелкните нужный узор. Затем щелкните «Объект»> «Узор»> «Редактировать узор».

Шаг 2

В окне «Параметры шаблона» вы можете отредактировать имя шаблона или установить новое.

Шаг 3

Также вы можете сделать следующие настройки:

  • выбрать тип элемента;
  • установить высоту и ширину элемента;
  • добавить перекрытия и другие эффекты;
  • установить количество элементов;
  • настроить непрозрачность;
  • оформить элементы в раму;
  • и др.

Step 4

Сохраните свой узор в палитре «Образцы» или отмените изменения.

Adobe Photoshop

Открывая Adobe Photoshop, будьте готовы к запутанному разнообразию значков и функций. К счастью, вам не понадобятся все, чтобы составить красивый узор! Ознакомьтесь с нашей краткой инструкцией ниже.

Шаг 1

Откройте новый холст (8 x 8 пикселей) и создайте исходное изображение.

Шаг 2

Чтобы определить изображение как узор, щелкните: «Редактировать»> «Определить как узор». На этом шаге вы также можете задать новое имя для своего рисунка.

Шаг 3

Чтобы протестировать новый узор, откройте новый холст. Заполните узор, нажав: «Правка»> «Заливка». В раскрывающемся списке «Узор» выберите вновь созданный узор. Узор заполнит все полотно. Все, что вам осталось сделать, это выбрать сбалансированную цветовую палитру.

CorelDraw

Corel Draw - еще одна программа для редактирования графики, которая поможет вам в создании как простых, так и сложных шаблонов для вашего веб-сайта. Посмотрите этот видео-урок, чтобы без проблем освоить CorelDraw!

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

Как создать повторяющийся узор в Illustrator

Необходимо создать плавно повторяющиеся узоры в Illustrator CS6 или Illustrator CC 2014? Тогда тебе повезло. Adobe создала инструмент, который сделает процесс создания выкройки быстрым и простым.

При создании выкройки у вас есть несколько вариантов. Вы можете использовать шаблоны, установленные с Illustrator, нарисовать узор, выбрать узор на фотографии или отсканировать один дюйм.

Используйте готовый узор

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

Панель «Образцы» в верхнем левом углу, параметры в меню и панель «Меню библиотек образцов». Вы можете редактировать узоры в Illustrator или создавать их с нуля.

Вот пример различных шаблонов, поставляемых с Illustrator.

Создание рисунка с нуля

Чтобы создать свой собственный шаблон, нажмите «Файл»> «Создать».В диалоговом окне «Новый документ» выберите «Профиль»> «Пользовательский» и установите для ширины и высоты значение 300 пикселей. Нажмите ОК, чтобы принять.

Щелкните инструмент «Прямоугольник» ( M ), чтобы выбрать его, и щелкните монтажную область. Когда появится диалоговое окно «Прямоугольник», нажмите «ОК», чтобы установить значение по умолчанию 100x100 пикселей, и нарисуйте четыре прямоугольника.

Выберите любой цвет для обводки. Установите обводку на 2 и убедитесь, что заливка отключена. Активируйте инструмент Blend ( W ) и дважды щелкните по монтажной области.

Откроется диалоговое окно «Параметры наложения». Установите интервал на «Указанные шаги» и в поле параметров введите 16. В ориентации выберите первый вариант и нажмите «ОК».

При активном инструменте «Смешивание» щелкните верхнюю линию красного прямоугольника, затем щелкните верхнюю линию зеленого прямоугольника. Вы должны получить следующий результат:

Снимите выделение с текущих прямоугольников и повторите тот же процесс для синего и оранжевого прямоугольников. Снимите выделение с текущих прямоугольников и повторите тот же процесс для синего и оранжевого прямоугольников.Ваши прямоугольники должны выглядеть так:

Теперь у вас есть простой дизайн, который можно использовать для создания бесшовного узора в Illustrator. Прежде чем идти дальше, выделите все прямоугольники и нажмите «Объект»> «Сгруппировать» ( Ctrl + G ), чтобы сгруппировать все формы вместе.

Как создать узор

А теперь пора создать узор. Выделив группу узоров, нажмите Object> Pattern> Make.

При этом происходит несколько вещей: ваш дизайн автоматически преобразуется в узор, появляется диалоговое окно «Параметры узора», и узор добавляется на панель «Образцы».

Обратите внимание, что любые изменения, внесенные в режиме редактирования паттерна, будут применены к образцу после выхода. Нажмите ОК, чтобы принять.

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

Когда вы посмотрите на диалоговое окно «Параметры шаблона», вы увидите множество вариантов. . Непосредственно под названием шаблона указан Тип плитки.Доступны следующие варианты: сетка, кирпич за строкой, кирпич за столбцом, шестигранник за столбцом и шестигранник за строкой.

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

Как видите, вариантов много, но они могут вам не понравиться. Если это так, щелкните инструмент Pattern Tile Tool в верхней части диалогового окна Pattern.

Появится синий контур с ручками вокруг основного рисунка.Это может быть трудно увидеть, поэтому мы растянем фигуру, что создаст разделение между другими узорами и сделает синий контур более заметным.

Теперь вы можете видеть синий контур и некоторое пространство между узорами.

Другие настройки

В диалоговом окне «Параметры узора» есть много других параметров. Один из них - это числовое определение шага рисунка для большей точности. Для этого нажмите кнопку «Сохранить пропорции ширины и высоты» в верхней части и включите параметр «Размер плитки для искусства».Скопированные рисунки вернутся в соответствие с исходным рисунком.

Чтобы создать пространство, введите значение в поле параметров H Spacing и V Spacing. Обратите внимание, что вы можете активировать кнопку «Сохранить пропорции интервала» справа от поля параметров - или нет.

Вот результат:

Из других опций всплывающее окно «Копии» предлагает множество различных настроек, таких как 5x5 (по умолчанию), 7x7, 3x7, 3x3 и т. Д. Под опцией Copies находится заголовок> Dim Copies to . 70% - значение по умолчанию, но вы можете изменить, если копии расположены близко друг к другу. Так будет легче увидеть, что происходит с шаблоном.

Когда вы будете удовлетворены своими изменениями, щелкните заголовок Готово в верхней части рабочего пространства. Вот и все.

В этом уроке мы почти не коснулись того, что вы можете делать с узорами. Возможности безграничны, и вы ограничены только вашим воображением. Чтобы пойти дальше, ознакомьтесь с этими руководствами:

Words: Nathan Segal

Как создать бесшовный узор в Adobe Illustrator

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

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

Шаг 1

Создайте новый документ. Откройте файл с оригинальным изображением и выберите все. Скопируйте и вставьте выделение в новый документ AI, измените размер и снова скопируйте три раза. Разместите четыре копии в виде сетки из двух строк и двух столбцов.

Шаг 2

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

Шаг 3

Когда вы закончите, выберите все, затем выберите «Объект»> «Узор»> «Создать», и палитра появится в вашем рабочем пространстве. Нажмите на инструмент «Узорчатая плитка» (кнопка в верхнем левом углу палитры узоров), и на вашем монтажном столе появится выделенная область, представляющая «плитку» (модуль). Вы можете отрегулировать размеры плитки; ваш узор изменит свой вид в соответствии с вашими настройками, поэтому настройте его по своему усмотрению.

Шаг 4

Все готово. Теперь вы можете легко создать свой узор! Создайте новый слой, сохраняя фон видимым (если он у вас есть). Выберите свой узор на палитре образцов, и он появится внутри нужной вам формы!

Чтобы увидеть, как Джонатан создавал оригинальные иллюстрации, использованные в этом произведении, ознакомьтесь с его учебным курсом по паспорту дизайнера!

Как создать бесшовный фон в Photoshop

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

Что вам понадобится для выполнения задания

1. Adobe Photoshop. Если вы наткнулись на этот учебник, велика вероятность, что у вас уже есть эта программа. Однако на всякий случай вот ссылка для скачивания бесплатной тестовой версии.
2. Icons8 для рабочего стола. Это бесплатное приложение со множеством значков, которое хорошо работает с Photoshop.
3. Иконки или другие изображения, которые вы хотите добавить в свой узор. Для этого урока мы взяли наши иконки природы. К вашему сведению, они бесплатны в формате PNG любого размера, поэтому вы можете сохранить их в своей учетной записи и использовать для шаблона.

8 шагов для создания узора в Photoshop

1. Сделайте основу для вашего выкройки

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

2. Добавьте значки

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

3. Поместите каждую иконку на отдельный слой

Нажмите Введите , чтобы завершить процесс вставки значка. Придется нажимать на нее столько раз, сколько нужно, пока черная рамка больше не исчезнет.

В итоге это должно выглядеть так:

Теперь каждый значок находится на своем собственном слое в вашем файле.

4. Настройте первый уровень

Выберите один слой на панели слоев и перейдите к Filter> Other> Offset :

Установите параметры Horizontal и Vertical равными половине длины стороны файла. Помните Ширина и Высота вашего квадрата? Это две настройки, которые вам нужны.
Размер нашего файла составляет 200x200 пикселей, поэтому мы устанавливаем 100 пикселей для обоих параметров. Убедитесь, что вы отметили опцию Wrap Around в нижней части всплывающего окна.Щелкните ОК. Первый слой готов:

5. Настройте второй уровень

Выберите другой слой на панели слоев. Теперь снова перейдите в Filter> Other> Offset .

Затем установите Horizontal на 0 пикселей и нажмите OK:

6. Настройте третий уровень

Выберите еще один слой и перейдите в Filter> Other> Offset . Теперь переверните значения по горизонтали и по вертикали . В нашем случае по горизонтали будет 100 пикселей, а по вертикали 0 пикселей.Щелкните ОК.

Теперь у нас есть плитка с узором.

7. Объедините слои

Выберите все слои, кроме Фон на панели слоев и используйте комбинацию горячих клавиш Ctrl + E . Выбранные слои будут объединены.

8. Создайте свой узор

Сначала используйте еще одну комбинацию горячих клавиш Ctrl + A (выбрать все).

Затем перейдите к Edit> Define Pattern :

Назовите его и нажмите OK.Та-да! Ваша выкройка готова!

Как нанести узор

У вас есть выкройка, хорошо. Теперь давайте посмотрим, как использовать его на фоне.

1. Создайте новый файл

Сделайте его больше, чем ваш узор, чтобы увидеть результат. У нас 800x600 пикселей.

2. Выберите наложение узора

Дважды щелкните фон на панели слоев. Щелкните OK во всплывающем окне.

Перейдите в меню Слой> Стиль слоя> Наложение узора. :

Выберите вновь созданный узор во всплывающем окне и нажмите «ОК».

3. Наслаждайтесь выкройкой!

Дополнительная литература

Попробуйте бесплатные инструменты для авторов от команды Icons8

Photo Creator , бесплатное средство для создания коллажей с технологиями на основе искусственного интеллекта для создания индивидуальных фотографий для вашей истории Pichon , настольное приложение для загрузки значков и картинок и использования их в автономном режиме


Также получите списки бесплатных векторных программ и бесплатных программ для редактирования фотографий.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *