Паттерн фотошоп: Как сделать паттерн в Фотошопе

Бесшовный паттерн как сделать в фотошопе

Главная » Разное » Бесшовный паттерн как сделать в фотошопе

Как создать бесшовный паттерн: в 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

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. Для чего мне уметь создавать паттерны, можете спросить вы? Для того, чтобы создать уникальный трафарет для декора стен, упаковать рождественские подарки в бумагу с именами одариваемых, сделать на заказ подушку с принтом мечты, которую все не удавалось найти в продаже.

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

Создаем паттерн в Фотошопе

Паттерн, регулярный узор, бесшовный фон… Называйте, как хотите, но смысл один – заполнение фона (сайта, документа) повторяющимися элементами, между которыми нет видимой границы или перехода.

В этом уроке будет рассказано о том, как сделать узор в Фотошопе.

Скачать последнюю версию Photoshop

Здесь рассказывать особенно нечего, поэтому сразу приступаем к практике.

Создаем документ с размерами 512х512 пикселей.

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

Берем один из элементов и помещаем в рабочую область Фотошопа на наш документ.

Затем перемещаем элемент на границу холста и дублируем его (СTRL+J).

Теперь идем в меню «Фильтр – Другое – Сдвиг».

Смещаем объект на 512 пикселей вправо.

Для удобства выделим оба слоя с зажатой клавишей CTRL и поместим их в группу (CTRL+G).

Помещаем новый объект на холст и перемещаем к верхней границе документа. Дублируем.

Снова идем в меню «Фильтр – Другое – Сдвиг» и перемещаем объект на 512 пикселей вниз.

Таким же способом помещаем и обрабатываем другие объекты.

Осталось лишь заполнить центральную область холста. Я мудрить не буду, а помещу один большой объект.

Паттерн готов. Если требуется его использование в качестве фона веб страницы, то просто сохраняем в формате JPEG или PNG.

Если же планируется заливать паттерном фон документа в Фотошопе, то нужно сделать еще пару шагов.

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

Затем идем в меню «Редактирование – Определить узор».

Даем имя узору и нажимаем ОК.

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

Создаем новый документ с любыми размерами. Затем нажимаем сочетание клавиш SHIFT+F5. В настройках выбираем «Регулярный» и ищем в списке созданный паттерн.

Нажимаем ОК и любуемся…

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

Помогла ли вам эта статья?

ДА НЕТ

Бесшовный узор в Фотошоп

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

Хорошо, начнем с создания нового документа, размером 300 × 300 пикселей. Залейте его любым цветом, например черный.

После этого начнем создавать нашу картину. С помощью Custom Shape Tool (произвольная фигура) выберите одну из стандартных фигур в галерее Photoshop.

Используйте белый цвет для создания фигуры.

Растрируйте эту фигуру Layer> Rasterize> Shape (слои> растрировать> фигуру). После этого возьмите инструмент Rectangular Marquee Tool (прямоугольная область), чтобы создать выделение как на картинке ниже. Вы должны выбрать четвёртую часть фигуры, это имеет важное значение для нашей будущей картины.

Затем инвертируйте выделение Select> Inverse (выделение> инверсия) и нажмите Удалить, чтобы очистить выделенную область.

Ладно, теперь снимаем выделение: выделение>отменить выделение (CTRL+D). Выберите Custom Shape Tool (произвольная фигура), добавьте еще одну пользовательскую фигуру, которую вы видите ниже:

Добавьте фигуру к нашему документу.

Нажмите Ctrl + T и поверните эту фигуру примерно на 45 градусов и переместите его немного ниже. Удерживайте кнопку Shift при повороте фигуры, чтобы получить точный угол вращения объекта.

Слейте слои с фигурами в один с пощью Ctrl + E и дублируйте полученный слой с помощью Ctrl + J. Используя Edit> Transform> Flip Horizontal (редактирование> трансформирование> отразить по горизонтали), отразите новый слой по горизонтали и переместите его в право.

Хорошо, слейте текущий слой с предыдущим и дублируйте новый слой. Используя Edit> Transform> Flip Vertical (редактирование> трансформирование> отразить по вертикали),переверните дублированный слой по вертикали и переместите его ниже. Слейте этот слой с предыдущим.

Нажмите Ctrl + T и уменьшите размер в два раза.

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

ПЕРВЫЙ СПОСОБ Нажмите Ctrl +A, чтобы выделить наш документ и нажмите Ctrl + C, чтобы скопировать выделенную область. Ладно, теперь используя Ctrl + N, создайте новый документ, но, прежде чем нажать Enter, вы должны добавить два пикселя по ширине и высоте.

Залейте созданный документ цветом # 003e16 и после этого нажмите Ctrl + V, чтобы вставить скопированный фрагмент в этот документ.

Измените непрозрачность этому слою на 40% и измените режим слоя на Overlay (перекрытие). Затем примените стиль слоя Outer Glow (слой> стиль слоя> внешнее свечение)  к этому слою.

Вы можете увидеть результат ниже:

Примените Edit> Define Pattern (редактирование> определить узор), чтобы сохранить это изображение как узор и закройте текущий документ без сохранения. После этого вы можете создать документ любого размера и залить его нашими узором с помощью Paint Bucket Tool (заливка).

ВТОРОЙ СПОСОБ Вернитесь на основной документ и скопируйте текущую фигуру три раза. Расположите фигуры  как показано ниже:

Объедините все слои с фигурами в один слой. Затем с помощью Rectangular Marquee Tool (прямоугольная область), создайте выделение как на картинке ниже. Обратите внимание, что границы вашего выделения должны быть расположены непосредственно по центру фигур.

Нажмите Ctrl + C, чтобы скопировать выделенную область. Затем создайте новый документ и залейте его этим цветом # 003e16. Нажмите Ctrl + V, чтобы вставить скопированный фрагмент.

Установите прозрачность на 40% и измените режим слоя на Overlay (перекрытие). После этого примените стиль слоя Outer Glow (внешнее свечение) для этого слоя.

Результат вы видите ниже:

Хорошо.Примените Edit> Define Pattern (редактирование> определить узор), чтобы сохранить это изображение как узор и закройте текущий документ без сохранения. После этого вы можете создать документ любого размера и залить его нашими узором с помощью Paint Bucket Tool(заливка). Результат должен выглядеть так:

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

Переводчик: Пихтелькова Анна Ссылка на источник

Паттерны в Фотошопе с помощью смарт-объектов

На днях Летта написала Как сделать растровый паттерн в Adobe Illustrator и признаюсь это суперское решение делающее все легко и изящно. Спасибо тебе Летточка что поделилась:) Вот только одно но, у меня Иллюстратор 5-тый, а посему паттерноделки у меня просто нету:( Еще не найдя этой статьи от Летты я попробовала делать паттерны в Фотошопе с помощью смарт-объектов. Вот хочу поделится что у меня получилось, может кому ни будь будет полезно. Итак по порядку: 1. Создаю файл размером скажем 5000х5000. Поцентру задаю фигуру квадрат на 4000х4000 это мой будущий паттерн. Дальше к краям квадрата ставлю направляющие (при включенной привязке к обектам). Фон выключаю — теперь фон у меня прозрачний. Это файл — заготовка который послужит основой для всех будущих моих паттернов. Называю файл скажем pattern_1 и сохраняю. 2. В меню файл выбираю — открыть как смарт-объект — открываю этот же файл и сохраняю, называя скажем pattern_1_3х3. Название условно, я назвала так, просто чтобы было понятно, что этот файл состоит как бы из 9 квадратов первоначального паттерна. В палитре слои будет находится смарт-объект файла pattern_1. 3. Теперь файл pattern_1_3х3 расширяю по размерам с помощью инструмента рамка (crop) до размера 12000х12000 (мне нужно уместить в него те 9 квадратов первоначального паттерна). Первый у меня уже есть, он по центру — остальные копирую и выравниваю для точного совпадения — это важно для того чтоб паттерн был бесшовным. Слой с первым смарт-объектом — первым белим квадратом — перемещаю поверх всех слоев.

4. На данном этапе у меня в Фотошопе открыты два файла pattern_1 и pattern_1_3х3 с которыми мне нужно работать одновременно. Для удобства я иду в панель окно — упорядочить- расположить две вертикально. Оба файла я открываю себе так, чтобы было видно белый квадрат, направляющие и чуть-чуть пространства вокруг.

5. Дальше первым делом в файле pattern_1 выключаю слой с белим квадратом — дальше мне он будет только мешать — и на прозрачное пространство между направляющими вставляю элементы будущего паттерна (они у меня все в PNG а в настройках Фотошопа стоит галка вставлять как смарт-объекты (это чтобы все элементы не теряли качества при роботе с ними) Теперь размещаю элементы как мне нравится и сохраняю файл pattern_1. 6. Дальше открытый рядом файл pattern_1_3х3 обновляется и мы получаем полностью составленный паттерн.

Пока что он с прозрачным фоном поэтому нужно в файле pattern_1_3х3 ниже всех слоев разместить квадрат 4000х4000 нужного цвета — наш фон. Корректируйте ваш pattern_1 пока это нужно и каждий раз сохраняйте после коррекции, и не забывайте сохранять файл pattern_1_3х3 после каждого обновления(на всякий случай). 7. Когда паттерн готов в файле pattern_1_3х3 делаю обрезку по направляющим, и — сохранить как JPG указывая теперь уже финишное название паттерна, у меня это branches_1.Он помучится размером 4000х4000 как и планировалось.

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

Для меня этот способ оказался довольно удобным. Может и кому то из вас пригодится. 🙂

---

Смотрите также

• Как сделать в фотошопе светящуюся линию
• Как сделать в фотошопе объемный шрифт
• Как можно обработать фото в фотошопе
• Как в фотошопе пользоваться магнитным лассо
• Как в фотошопе на фото убрать ненужные предметы
• Как заработать с помощью фотошопа
• Как в автокаде создать блок
• Как в фотошоп установить новые кисти
• Как в фотошопе фотошопить
• Как в фотошопе создать календарь
• Как в фотошопе сделать овал

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

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

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

1.Набросок паттерна

Шаг 1.

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

Шаг 2.

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

Шаг 3.

Если ваш скетч уже доведен до ума и вы хотите приступить непосредственно к созданию паттерна, то отсканируйте ваш рисунок с разрешением примерно 300 dpi.

Чтобы дать самому себе пространство для творчества, создайте новый файл в AdobePhotoshop размера как минимум 5 000 х 5 000 px. Вы всегда сможете изменить размер в настройках, если чувствуете что пространства слишком много. Но вы не сможете масштабировать растровое изображение, а это как раз самая худшая вещь в мире – сделать красивый аккуратный паттерн и понять, что он слишком мал для использования.

Шаг 4.

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

Можно улучшить набросок, используя настройки Image > Adjustments > Levels. Передвиньте левый ползунок, чтобы выделить черный цвет, правый ползунок для регулировки белого, и напоследок поиграйте со средним ползунком, чтобы выровнять баланс рисунка.

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

 

2.Создание слоя с паттерном

Шаг 1.

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

Помните, что один и тот же элемент в паттерне можно использовать несколько раз, всего лишь модифицировав его с помощью функций Edit>Transform>Rotate,Scale, илиFlip. Когда вы добавляете новый фрагмент скетча для своего будущего паттерна, удобнее всего делать его другим цветом, чтобы при финальной обработке было легче рисовать.

Шаг 2.

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

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

Шаг 3.

Когда участок рисунка для паттерна продуман до конца и дорисован, вам нужно сделать его копию. Для этого нужно использовать клавиши Ctrl+J и перенести рисунок с одной стороны на другую. Здесь очень важным моментом является то, что копировать наш участок на новый слой нужно строго по прямой линии, без смещений, а сделать это можно зажав клавишу Shift перед началом горизонтального переноса.

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

Шаг 4.

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

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

Шаг 5.

Когда вы завершите дорисовку между частями паттерна, деактивируйте главный слой и сделайте новую копию оригинального паттерна используя клавиши Ctrl+J. На этот раз используйте Shift для перетягивания нового слоя вверх или вниз.

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

>CanvasSize.

Шаг 6.

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

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

 

3.Тестируем повторение рисунка

Шаг 1.

Скопируйте весь паттерн в новый файл (Control-A> Control-C > Control-N>Control-V), чтобы без помех протестировать его там. Размер файла и рисунка нужно выставить в районе 1 000 мегапикселей. При этом пострадает качество изображения, но сейчас это не важно, ведь мы просто тестируем нашу работу. Убедитесь еще раз, что используете копию иллюстрации, а не часть основного файла.

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

С помощью клавиш Ctrl+D повторите тоже самое, но уже с вертикальной частью рисунка – выберите часть снизу и переместите на верхний край иллюстрации. И все! Теперь у вас красивый паттерн!

Шаг 2.

Перетащите вспомогательные линейки Guides, чтобы они располагались вокруг всего нашего паттерна, и нам было легко выделить его полностью с помощью RectangularMarqueeTool. Затем нажмите на Edit>DefinePattern, назовите новый паттерн и сохраните его.

Шаг 3.

Создайте новый файл, который будет больше вашего паттерна как минимум в три или четыре раза. Заполните его нажав PaintBucketTool и заменив заливку на ваш паттерн в выпадающего меню (поменяйте ‘Foreground’ на ‘Pattern’ и в конце будет как раз наш шаблон). Посмотрите на результат, есть ли там нечеткие края, довольны ли вы внешним видом своей работы.

Шаг 4.

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

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

 

4.Добавление цвета

Шаг 1.

Теперь вы готовы добавить цвет к паттерну! Самый простой способ – воспользоваться функцией ColorOverlays.

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

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

Шаг 2.

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

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

Шаг 3.

Когда вы закончите с добавлением цвета, вы заметите, что цвет контуров в некоторых частях рисунка мог потеряться или ослабеть. К счастью, это легко можно исправить на основном слое ( Ctrl-клик по миниатюре слоя на панели слоев), нажав Select>Modify>Contract, поставив значение «1» и далее ОК.

Данный процесс выделяет рисунок в окружности 1 пикселя. Теперь остается только нажать Ctrl+Shift+Iчтобы инвентировать нашу выделенную область и Delete. Получится к итоге, что по краям контура исчезнет раздражающий неровный край.

 

5. Последние штрихи

Шаг 1.

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

Как уже говорилось ранее, самый простой способ это сделать – воспользоваться направляющими Guides и линейками (их можно активировать в настройках View>Rulers).

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

Шаг 2.

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

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

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

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

Шаг 3.

Кстати, в таком многослойном файле как мы сделали, легко менять цветовую палитру паттерна. Нужно нажать на эффект Overlay и выбрать любой другой цвет из ColorPalette– можно наблюдать в режиме реального времени как меняется рисунок с новым выбранным оттенком!

Мы закончили!

Разве не получилось легче, чем вы думали?

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

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

Не могу дождаться ваших работ! Что вышло у вас?

POSITIVERECORDS.RU — ВСЕ ДЛЯ ФОТОШОП

POSITIVERECORDS.RU — ВСЕ ДЛЯ ФОТОШОП — УЗОРЫ (PATTERNS)

• ВИДЕОРЕДАКТОРЫ
• ВСЕ ДЛЯ ДИЗАЙНА
  • Все версии Adobe Photoshop
  • Плагины для продуктов Adobe
  • Иные графические редакторы
  • Флаеры и баннеры
  • Все для Фотошопа
    • Кисти
    • Стили
    • Градиенты
    • Экшены
    • Фигуры
    • Узоры
  • Пресеты для продуктов от Adobe

VST И БИБЛИОТЕКИ

• АРХИВ НОВОСТЕЙ (ОБЩИЙ ТОП)
• РАБОЧИЕ СТАНЦИИ (DAW)
• СИНТЕЗАТОРЫ (SYNTHS)
• СЕМПЛЕРЫ, ИНСТРУМЕНТЫ (SAMPLERS)
• ЭФФЕКТЫ (FX PLUGINS)
• БИБЛИОТЕКИ (SOUNDBANKS)

МУЗЫКА

• BLUES
• ELECTRONIC
• EURODANCE
• JAZZ
• METAL
• POP
• RAP
• ROCK
• СБОРНИКИ ХИТОВ

ИГРЫ НА ПК

• Новинки (Общий топ)
• Аркадные и платформеры
• Приключения
• RPG
• Ролевые
• Симуляторы (Спортивные, Гонки, Sims)
  • Dirt
  • Need For Speed
  • The Sims
• Стратегии
  • Total War
• Ужасы
• Файтинги
• Шутеры (От первого лица)
  • Call Of Duty
  • Far Cry
  • Metro
  • Serious Sam
• Экшены (От третьего лица)
  • Assasins Creed
  • GTA
  • Mafia

3D И ДРУГИЕ ПРОГРАММЫ

• 3D-РЕДАКТОРЫ, РЕНДЕРЫ, МОДЕЛИ, ВИДКОУРОКИ
• САПР (ЭЛЕКТРОНИКА, АВТОМАТИКА, ГАП), ИНЖЕНЕРНО-ЧЕРТЕЖНЫЕ

КОНТАКТЫ

• ЧАТ (ОНЛАЙН ПОДДЕРЖКА)
• ОБРАТНАЯ СВЯЗЬ
• СОДЕЙСТВОВАТЬ РАЗВИТИЮ САЙТА

ПОИСК

ВСЕ ДЛЯ ФОТОШОП / УЗОРЫ

• [Patterns] Line Pixel Patterns Shapes [Пиксельные линии] [PAT] | Размер: 37 Kb

• [Patterns] Pixel Patterns Shapes [Пиксельные] [PAT] | Размер: 3 Kb

• [Patterns] Minimal Pattern Set — Vol3 [Пиксельные] | Размер: 2 Kb

• [Patterns] Grid Patterns Shapes (Пиксельная сетка) [PAT] | Размер: 6 Kb

• [Patterns] Webtreats Tileable Metal Patterns [PAT] | Размер: 40. 3 MB

• [Patterns] Carbon Fiber Patterns [PAT] | Размер: 114 KB

• [Patterns] Free Grunge 3 [PAT] | Размер: 5.23 MB

• [Patterns] Free Grunge 3 [PAT] | Размер: 5.23 MB

• [Patterns] Webtreats Blue Creme Pattern 03 [PAT] | Размер: 71.1 MB

• [Patterns] Light Grunge 1 [PAT] | Размер: 3.1 MB

• [Patterns] Photoshop Hexagonal Patterns [PAT] | Размер: 26 KB

• [Patterns] Hexagons 1 Pattern Set [PAT] | Размер: 800 KB

• [Patterns] Subtle Web Patterns [PAT] | Размер: 331 KB

• [Patterns] Video Game Brick 1 Pattern Set [PAT] | Размер: 153 KB

• [Patterns] 40 Textured Web Patterns [PAT] | Размер: 117 KB

• [Patterns] Web Design Patterns for Photoshop [PAT] | Размер: 3. 11 MB

• [Patterns] DesignTNT — Tileable Paper Textures Set [PAT] | Размер: 8.03 MB

• [Patterns] Tileable Metal Textures [PAT] | Размер: 23.6 MB

• [Patterns] Webtreats Leather Patterns | Размер: 12.6 MB

• [Patterns] Texture Pattern Pack | Размер: 183 KB

• [Patterns] DesignTNT — Addons Simple Patterns [PAT] | Размер: 115 KB

• [Patterns] Screentones Patterns [PAT] | Размер: 175 KB

• [Patterns] Design Tnt — Carbon Patterns Set 1 [PAT] | Размер: 81 KB

• [Patterns] 9-Blue Stripes Photoshop Pattern Sets [PAT] | Размер: 4.4 MB

• [Patterns] Ground Patterns for Photoshop (высокое разрешение, 15шт.) | Размер: 36.5 MB

• [Patterns] Das große Texturenpaket — 3. 000 Texturen — подборка паттернов | Размер: 2.51 GB

Бесплатные шаблоны для фотошопа скачать

Расширенный поиск Запросить дизайн

[ PS Patterns ] шаблон с цветами в японском стиле плоский классический повторяющийся дизайн ( .pat 2.99MB )

All-free-download.com

[PS Patterns] шаблон шаблона с цветами в японском стиле, повторяющиеся лепестки, плоский классический дизайн (.pat 2.97MB)

All-free-download.com

[ PS Patterns ] шаблон шаблона мандалы плоский классический симметричный цветочный контур ( .pat 1.72MB )

All-free-download. com

[ PS Patterns ] шаблон шаблона мандалы плоский винтажный симметричный повторяющийся рисунок от руки ( .pat 2.02MB )

All-free-download.com

[ PS Patterns ] шаблон с оранжевым узором, плоский ретро грязный декор ( .pat 1.18MB )

All-free-download.com

[ PS Patterns ] шаблон с цветами в японском стиле элегантный ретро повторяющийся дизайн ( .pat 2.11MB )

All-free-download.com

[ PS Patterns ] Шаблоны с птицами и цветами Плоские виды туканов Листья Флора Декор ( .pat 4.15MB )

All-free-download. com

[ PS Patterns ] шаблон шаблона мандалы плоский ретро симметричный контур формы флоры ( .pat 1.81MB )

All-free-download.com

[ PS Patterns ] шаблон шаблона мандалы плоский ретро симметричный декор лепестков ( .pat 1.80MB )

All-free-download.com

[ PS Patterns ] шаблон шаблона дыни плоский классический эскиз ломтиков ( .pat 1.54MB )

All-free-download.com

[ PS Patterns ] шаблон узора с цветами в японском стиле, повторяющий элегантный классический эскиз лепестков ( .pat 3.27MB )

All-free-download. com

[ PS узоры ] узор с птицами и цветами плоский классический повторяющийся эскиз ( .pat 2.52MB )

All-free-download.com

[ PS Patterns ] шаблон рисунка мандалы плоские симметричные геометрические фигуры эскиз ( .pat 1.06MB )

All-free-download.com

[ PS Patterns ] шаблон арбузного узора плоский грязный ретро-дизайн ( .pat 1.31MB )

All-free-download.com

[ PS узоры ] шаблон мандаринового узора плоский классический грязный декор ( .pat 1.55MB )

All-free-download. com

скачать бесплатно фотошоп шаблон Пэт Пэт файл бесплатно скачать фотошоп шаблон Пэт фотошоп цветочный узор бесплатно коммерческое использование фотошоп шаблоны веб-шаблон бесплатно фотошоп цветочный узор золотые узоры классические узоры почтовый файл пэт файл фотошоп цветочный узор коммерческое использование фотошоп шаблоны бумажный шаблон фотошоп 7 0 шаблоны образцы фотошоп бесплатно шаблон дерева формата pat

[ PS Patterns ] шаблон шаблона с цветами в японском стиле плоский классический нарисованный от руки повторяющийся дизайн ( .pat 1.87MB )

All-free-download.com

[ PS Patterns ] Шаблоны с птицами и цветами плоские классические повторяющиеся элементы природы ( .pat 2.96MB )

All-free-download. com

[ PS Patterns ] шаблон шаблона мандалы плоский классический симметричный цветочный эскиз ( .pat 841.74KB )

All-free-download.com

[ PS узоры ] разнообразие фруктовых узоров плоский красочный ретро-дизайн ( .pat 1.60MB )

All-free-download.com

[ PS Patterns ] клубничный узор шаблон плоский классический повторяющийся грязный дизайн ( .pat 2.28MB )

All-free-download.com

[ PS Patterns ] шаблон с цветами в японском стиле, повторяющий плоский классический дизайн ( .pat 2.51MB )

All-free-download. com

[ PS узоры ] шаблон узора мандалы симметричный плоский классический декор ( .pat 1.64MB )

All-free-download.com

[ PS Patterns ] шаблон шаблона мандалы плоский ретро повторяющиеся лепестки эскиз ( .pat 2.81MB )

All-free-download.com

[ PS Patterns ] разнообразие шаблонов фруктовых узоров красочный плоский беспорядочный дизайн ( .pat 2.10MB )

All-free-download.com

[ PS выкройки ] ананас узор шаблон яркий повторяющийся классический декор ( .pat 1.83MB )

All-free-download. com

Загрузка дополнительных элементов, пожалуйста, подождите…

Идет загрузка дополнительных элементов, пожалуйста, подождите…

Критерий поиска:

Тип поиска:

Совпадение с любымСовпадение со всеми

Искать в:

ВекторыИконкиФотоШрифтыШаблоны сайтовPSD

Лицензия:

Все лицензииРазрешить коммерческое использование

Результат сортировки:

Сначала лучшее совпадениеСначала новыеСначала много загрузокСначала меньше загрузок

• Дом
• Лицензии
• Срок
• Конфиденциальность
• О
• Связаться с

Создание повторяющихся узоров из пользовательских фигур в Photoshop

Шаг 1.

Создание нового документа

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

Выберите «Файл» > «Создать».

Откроется диалоговое окно «Новый документ» Photoshop. Размер документа, который мы здесь создадим, станет размером плитки, которая будет повторяться как узор. Поскольку меньшие плитки должны повторяться больше, чем большие, чтобы заполнить одинаковое пространство, размер плитки оказывает большое влияние на общий вид узора. Позже вы захотите поэкспериментировать с различными размерами плитки для своих собственных дизайнов, но для этого урока введите 100 пикселей 9.0248 для Ширина и Высота документа и убедитесь, что Фоновое содержимое установлено на Прозрачный . Вы можете оставить значение Разрешение по умолчанию 72 пикселя/дюйм :

Диалоговое окно «Новый документ».

Когда закончите, нажмите OK, чтобы закрыть диалоговое окно. Новый пустой документ появится на вашем экране. Документ размером всего 100 x 100 пикселей может быть немного мал для работы с ним, поэтому я увеличу его, удерживая нажатой кнопку 9.0247 Ctrl (Win) / Command (Mac) и мой пробел , который временно переключает нас на Photoshop Zoom Tool (вы увидите, как курсор мыши изменится на увеличительное стекло) и несколько раз щелкнув внутри окно документа. Здесь я увеличил до 500%:

Шаблон шахматной доски — это способ Photoshop сообщить нам, что фон документа прозрачен.

Шаг 2. Добавьте направляющие в центр документа

Далее нам нужно найти точный центр нашего документа, и мы можем сделать это с помощью Photoshop направляющие . Когда мы рассмотрели основы создания повторяющихся узоров, мы узнали, как добавлять направляющие с помощью команды «Новая направляющая». На этот раз мы добавим направляющие с помощью линеек Photoshop . Любой способ добавления направляющих подходит, поэтому не стесняйтесь использовать любой метод, который вы предпочитаете. Однако для этого руководства перейдите в меню View в верхней части экрана и выберите Rulers :

.

Выберите Вид > Линейки.

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

Щелкните внутри левой линейки и перетащите направляющую в вертикальный центр документа.

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

.

Щелкните внутри верхней линейки и перетащите направляющую в центр документа по горизонтали.

После добавления обеих направляющих можно отключить линейки, вернувшись в меню View и снова выбрав Rulers . Или вы можете использовать удобное сочетание клавиш Ctrl+R (Win) / Command+R (Mac), чтобы быстро включать и выключать линейки при необходимости. Место, где пересекаются обе направляющие, является точным центром документа. На моем снимке экрана направляющие отображаются красным цветом. Если вы следили за первым уроком в серии, вы знаете, что это потому, что я изменил цвет моих направляющих в настройках Photoshop, просто чтобы их было легче увидеть на снимках экрана. Цвет направляющих по умолчанию — голубой, это цвет, в котором будут отображаться ваши направляющие, если вы не изменили его в настройках:

Не волнуйтесь, если ваши направляющие отображаются другим цветом, например голубым. Цвет не важен.

Шаг 3. Выберите инструмент пользовательской формы

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

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

Шаг 4. Выберите параметр «Заполнить пиксели»

Photoshop дает нам три различных способа использования его инструментов формы. Мы не будем вдаваться в подробности о них здесь, но в целом мы можем использовать их для рисования векторных фигур , путей или фигур на основе пикселей . Photoshop позволит нам сохранить наш дизайн как шаблон только в том случае, если он был сделан с пикселями, поэтому сначала нам нужно сообщить Photoshop, что мы хотим, чтобы формы, которые мы собираемся нарисовать, были заполнены пикселями, и мы делаем это в параметрах. Полоса вдоль верхней части экрана. В крайнем левом углу панели параметров находится ряд из трех значков. Каждый значок выбирает один из трех типов фигур, которые мы можем рисовать. Нажмите на третий значок (тот, что справа), чтобы выбрать Заполнить пикселей вариант:

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

Шаг 5. Выберите пользовательскую форму

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

.

Щелкните миниатюру предварительного просмотра формы.

Откроется Средство выбора форм , в котором отображаются маленькие эскизы всех форм, из которых мы в данный момент можем выбирать. Чтобы выбрать фигуру, просто нажмите на ее миниатюру. я выберу Форма сердца , нажав на нее. После того, как вы выбрали форму, нажмите , введите (Win) / , верните (Mac), чтобы закрыть окно выбора формы:

Нажмите на миниатюру формы сердца, чтобы выбрать ее.

Шаг 6. Нарисуйте фигуру в центре документа

Нам нужно нарисовать нашу фигуру в центре документа, поэтому мы добавили направляющие, чтобы найти центр для нас. Мы хотим, чтобы наша фигура была черной на данный момент, поэтому нажмите букву D на клавиатуре, чтобы быстро сбросить настройки Photoshop.0247 Цвета переднего плана и фона к их значениям по умолчанию, если это необходимо, что установит цвет переднего плана на черный. Вы можете увидеть текущие цвета переднего плана и фона, посмотрев на их миниатюры в нижней части панели «Инструменты»:

.

Образцы цветов переднего плана (вверху слева) и фона (внизу справа) на панели инструментов.

Установив черный цвет переднего плана, поместите курсор мыши прямо над центром документа, чтобы целевой символ курсора совпал с вертикальной и горизонтальной направляющими, затем щелкните и, удерживая нажатой кнопку мыши, начните перетаскивать фигуру. . После того, как вы начали перетаскивать, удерживайте Shift+Alt (Win) / Shift+Option (Mac) и удерживайте их нажатыми, продолжая перетаскивать фигуру. Удерживая нажатой клавишу Shift, сохранится исходное соотношение сторон фигуры, поэтому вы не сделаете ее выше и тоньше или короче и шире, чем она должна быть, в то время как клавиша Alt (Win) / Option (Mac) сообщает Photoshop вытяните фигуру из ее центра. Когда вы закончите, ваш документ должен выглядеть примерно так (мой документ увеличен до 500%, поэтому края фигуры выглядят блочными):

Перетащите фигуру в центр документа.

Шаг 7. Отключите направляющие

Теперь, когда мы нарисовали фигуру, направляющие больше не нужны и только мешают, так что давайте отключим их. Перейдите к меню View в верхней части экрана, выберите Show , затем выберите Guides . Вы увидите галочку слева от слова «Гиды», которая говорит нам, что они в настоящее время включены. Выбор их, когда они включены, отключит их:

Выберите Вид > Показать > Направляющие, чтобы отключить направляющие.

Шаг 8. Дублируйте слой

Давайте сделаем наш дизайн немного интереснее перед тем, как сохранить его как образец. Сделайте копию слоя, перейдя в меню Layer в верхней части экрана, выбрав New , затем выбрав Layer через Copy :

Выберите «Слой» > «Создать» > «Слой через копирование».

Вы также можете использовать сочетание клавиш Ctrl+J (Win) / Command+J (Mac), чтобы быстро скопировать слой. В любом случае программа Photoshop делает копию слоя 1, которую он творчески называет «Копия слоя 1», и размещает ее над оригиналом на панели «Слои»:

.

Копия слоя появляется над оригиналом.

Плагин шорткодов, действий и фильтров: ошибка в шорткоде [ ads-basics-middle ]

Шаг 9. Применение фильтра смещения

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

».

Выберите «Фильтр» > «Другое» > «Смещение».

Откроется диалоговое окно фильтра смещения. Мы хотим ввести половину ширины нашего документа в поле значений Horizontal и половину высоты документа в поле значений Vertical . Поскольку наш документ имеет размеры 100 x 100 пикселей, установите параметры Horizontal и Vertical на 50 пикселей. Затем убедитесь, что Параметр Wrap Around выбран в нижней части диалогового окна:

Диалоговое окно фильтра смещения.

Когда закончите, нажмите OK, чтобы закрыть диалоговое окно. Фильтр «Смещение» по существу разделил копию формы сердца на четыре равные части и поместил их в каждый угол документа. Это может показаться странным в данный момент, но не будет, когда мы увидим повторение паттерна чуть позже. Форма сердца в центре документа — это исходная форма, которую мы добавили еще на шаге 6: 9.0003

Документ после применения фильтра «Смещение» к копии формы сердца.

Шаг 10. Сохраните дизайн как шаблон

После завершения дизайна нашей плитки мы готовы сохранить ее как шаблон. Перейдите в меню Edit в верхней части экрана и выберите Define Pattern :

.

Выберите «Правка» > «Определить шаблон».

Photoshop откроет диалоговое окно Имя шаблона , чтобы мы могли дать нашему новому шаблону имя. Хорошей практикой является указание размера вашей плитки в названии на случай, если в конечном итоге вы создадите несколько одинаковых плиток разных размеров. Я назову свой шаблон «Сердца 100×100», так как размеры плитки 100 x 100 пикселей. Когда вы закончите, нажмите OK, чтобы закрыть диалоговое окно. Шаблон сохранен и готов к использованию:

Включение размеров плитки в название может быть полезным.

Шаг 11.

Создайте новый документ

Давайте создадим новый документ, чтобы заполнить его только что созданным узором. Как и в шаге 1, перейдите в меню File и выберите New . На этот раз, когда появится диалоговое окно «Новый документ», введите 1000 пикселей для Ширины и Высоты документа и измените Фоновое содержимое 9от 0248 до Белый . Оставьте значение Разрешение равным 72 пикселя/дюйм . Нажмите OK, чтобы закрыть диалоговое окно. Новый документ, залитый белым цветом, появится на вашем экране:

.

Создание нового документа.

Шаг 12: Добавьте новый пустой слой

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

Щелкните значок «Новый слой».

Photoshop добавляет новый пустой слой с именем «Слой 1» над фоновым слоем:

Photoshop помещает новый слой над фоновым слоем.

Шаг 13. Выберите инструмент Заливка

В предыдущих уроках этой серии мы узнали, как заполнить слой узором с помощью команды Photoshop «Заливка». На этот раз давайте посмотрим, как мы можем сделать то же самое, используя инструмент Paint Bucket Tool , который также позволяет нам заполнять слой или выделение цветом или узором. Вы найдете инструмент «Заливка» на панели «Инструменты». По умолчанию он прячется за цифрой 9.0247 Инструмент «Градиент» , поэтому нажмите на инструмент «Градиент» и удерживайте кнопку мыши, пока не появится всплывающее меню, затем выберите инструмент «Заливка» из списка:

Нажмите и удерживайте инструмент «Градиент», затем выберите инструмент «Заливка» из списка.

Шаг 14. Измените источник на шаблон

Выбрав Paint Bucket Tool, перейдите на панель параметров и установите Source для Paint Bucket на Pattern (по умолчанию он установлен на передний план):

Измените источник с переднего плана на образец.

Шаг 15. Выберите шаблон

С выбранным узором щелкните миниатюру предварительного просмотра узора на панели параметров:

Нажмите миниатюру предварительного просмотра справа от параметра «Источник» на панели параметров.

Это открывает Pattern Picker Photoshop, где мы можем выбрать шаблон, который мы хотим использовать. Только что созданный шаблон будет последним в списке. Нажмите на его эскиз , чтобы выбрать его. После того, как вы выбрали шаблон, нажмите , введите (Win) / , верните (Mac), чтобы закрыть окно выбора шаблона:

Выберите узор «Сердца», нажав на его миниатюру.

Шаг 16. Щелкните внутри документа, чтобы добавить шаблон

Убедитесь, что на панели «Слои» выбран «Слой 1» (выбранные слои выделены синим цветом), затем, выбрав шаблон на панели параметров, просто щелкните в любом месте документа с помощью инструмента «Заливка», который мгновенно заполнит документ цветом. шаблон. Плитка повторяется столько раз, сколько необходимо для заполнения всего пространства:

Щелчок в любом месте внутри документа заполняет слой 1 узором.

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

Тот же узор после добавления цвета.

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

.

Цвета были добавлены с помощью слоев сплошной заливки.

Загрузка дополнительных пользовательских форм

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

В открытом средстве выбора формы нажмите на маленькую иконку со стрелкой в правом верхнем углу:

Щелкните значок стрелки.

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

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

Photoshop спросит, хотите ли вы заменить текущие фигуры новыми или хотите сохранить текущие фигуры и добавить новые в конец списка. Выберите Добавьте :

Нажмите кнопку «Добавить».

Вернувшись в средство выбора фигур, прокрутите миниатюры, чтобы найти новые фигуры, добавленные после исходных. Выберите любую из недавно добавленных фигур, щелкнув ее миниатюру. Я выберу Dog Print форма:

Выбор формы «Отпечаток собаки».

А вот пример того, как будет выглядеть повторяющийся узор с формой отпечатка собаки, используя шаги, которые мы рассмотрели в этом уроке. В этом случае я создал документ размером 150 x 150 пикселей для своей плитки немного большего размера (см. шаг 1) и в диалоговом окне фильтра смещения (шаг 8) установил параметры по горизонтали и вертикали на 75 пикселей каждый (половина ширины и высота документа). И снова к узору был добавлен цвет с использованием слоя заливки сплошным цветом для фона и другого для самого узора:

Еще один пример повторяющегося узора, созданного с помощью пользовательских фигур Photoshop.

Если ни одна из пользовательских фигур, поставляемых в Photoshop, не соответствует потребностям вашего дизайна, вы можете легко создавать свои собственные пользовательские формы! Обязательно ознакомьтесь с нашим уроком «Создание пользовательских фигур в Photoshop» , чтобы узнать все подробности!

Как сделать бесшовный узор в Photoshop с предварительным просмотром узора — CatCoq

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

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

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

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

• Как оцифровать аналоговое изображение

• Удаление бумажного фона в Photoshop

Есть много , которые идут на создание бесшовного узора. Я хочу максимально упростить процесс, но я понимаю, что это может показаться сложным, когда вы впервые учитесь этому. Если вы больше визуальный ученик и хотите увидеть, как процесс работает шаг за шагом, ознакомьтесь с моим классом Акварель бесшовный узор: дизайн поверхности в Adobe Photoshop .

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

Смотреть класс

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

Теперь давайте углубимся в изучение того, как использовать инструмент предварительного просмотра узора!

Начните с открытия квадратного холста в Photoshop. Я всегда использую холст размером 12 000 x 12 000 пикселей для своих блоков шаблонов, потому что мне нужна гибкость для их использования на больших продуктах. Но это действительно огромный размер холста, поэтому, если вы просто практикуетесь или не хотите использовать свои шаблоны на крупномасштабных продуктах, вы можете использовать меньший размер. Просто убедитесь, что это идеальный квадрат!

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

Если вы не изолировали каждый элемент на отдельном слое, вы можете сделать это, выбрав инструмент «Лассо» (сочетание клавиш : L ). Мне нравится использовать для этого Polygonal Lasso . Выберите каждый элемент своим лассо, вырежьте его с помощью сочетания клавиш cmd + X и вставьте его на место с помощью сочетания клавиш cmd + shift + V . Это вставит элемент точно туда, где он был раньше, но на своем собственном слое!

Последнее, что вам нужно сделать для подготовки ваших элементов, это сделать каждый из них смарт-объектом. Смарт-объект — это, по сути, расширенная версия того, что находится на этом слое. Это дает вам больше гибкости с неразрушающим редактированием. Но все, что вам действительно нужно знать, это то, что Pattern Preview работает только со смарт-объектами.

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

Вы сможете подтвердить, что это смарт-объект, проверив наличие небольшого прямоугольника на миниатюре слоя. Это способ Photoshop указать, что это смарт-объект.

После того, как вы превратили все свои элементы в смарт-объекты, не забудьте нажать «Сохранить», прежде чем переходить к следующему шагу!

Теперь, когда все ваши элементы находятся на отдельном слое и превращены в смарт-объекты, ваш квадратный холст должен выглядеть примерно так.

В моем примере все элементы узора уложены друг на друга в углу, но пока это совершенно нормально. Мы собираемся сложить их в узор!

Затем убедитесь, что автовыбор включен. Это позволит вам автоматически выбирать элемент при нажатии на него. Используйте сочетание клавиш : v  , чтобы выбрать инструмент перемещения. Оттуда проверьте в верхнем левом углу и убедитесь, что установлен флажок рядом с «Автоматический выбор».

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

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

Чтобы начать размещение блока шаблона, убедитесь, что выбран инструмент перемещения, и начните перемещать элементы один за другим!

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

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

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

Дублировать

Выберите элемент, который вы хотите дублировать, и используйте сочетание клавиш : cmd + j , чтобы скопировать элемент и вставить его на новый слой. Это не будет выглядеть так, как будто что-то произошло, но вы сможете увидеть на панели слоев, что у вас есть дубликат этого слоя.

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

Поворот и изменение размера

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

Отразить

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

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

Если вы когда-нибудь отключите предварительный просмотр узора, вы увидите, что некоторые «обрезанные» элементы отсутствуют. Не волнуйся! Вы не потеряли ни одной своей работы. Повторяющиеся элементы видны только в режиме просмотра узора. Когда вы снова включите его, эти элементы снова появятся.

Надеюсь, вам понравилось это пошаговое руководство по инструменту просмотра шаблонов! Этот инструмент изменил правила игры в моем рабочем процессе, и я надеюсь, что он изменится и для вас!

Этот урок лишь поверхностно описывает процесс создания выкройки. Если вы хотите научиться создавать профессиональные бесшовные узоры из нарисованных вручную рисунков, я бы хотел, чтобы вы присоединились ко мне в моем классе «Акварель и бесшовный узор: дизайн поверхности в Adobe Photoshop 9».0248 .

На этом курсе вы узнаете:

• Как рисовать элементы с учетом бесшовного рисунка

• Как оцифровывать окрашенные элементы

• Советы по созданию узоров, которые будут хорошо продаваться

  9

  3

  3

  Как настроить цвет узоров в Photoshop

• Как добавить металлические акценты к узорам в Photoshop

• Загрузка узоров для печати на таких сайтах, как Society6, Spoonflower и Redbubble

• И так много других советов и подсказок!

И самое приятное? Новые участники Skillshare могут получить бесплатную пробную версию, чтобы посмотреть этот класс и тысячи других на Skillshare с по этой ссылке ! Надеюсь увидеть вас на уроке!

Записаться в класс

Ресурсы для художников, Учебники по искусству, Учебники по PhotoshopCatCoq 22 июля 2022 г.