Как сделать узор – Рисуем повторяющиеся узоры с помощью произвольных фигур в Photoshop / Фотошоп-мастер

Содержание

Как сделать узор в фотошопе из картинки и пиксельный

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

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

Узор для фотошопа из картинки

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

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

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

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

Далее в верхнем меню выбираем «Редактирование» — «Определить узор».

В открывшемся окошке пишем название узора и нажимаем «Ок».

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

Выбрав инструмент «штамп», установим наш узор, выбрав его в верхнем меню настроек «штампа».

Пиксельный узор для фотошопа

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

Создаем новый документ, размером 5px на 5px, можно больше или меньше, смотря какой узор будет. Выбираем в верхнем меню «Файл» — «Создать», в открывшемся окне настроек указываем размер холста и нажисаем «Создать».

У нас получится очень маленький холст и чтобы нарисовать на нем узор, нужно выбрать в левой панели инструмент «Лупа» и максимально увеличить рабочую область.

Теперь в левой панели инструментов выбираем инструмент «Карандаш» и в верхней панели задаем ему размер 1px.

Далее выбираем нужный цвет и рисуем карандашом узор, после чего сохраняем его в узор, как и в первом случае («Редактирование» — «Определить узор»).

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

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

Рисуем повторяющиеся узоры с помощью произвольных фигур в Photoshop / Фотошоп-мастер

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

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

Шаг 1. Создаем новый документ

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

Выбираем «Файл» > «Новый»

В результате, откроется диалоговое окно «Новый» (New). Размер документа будет определять размер мотива, который в свою очередь будет сохранен как повторяющийся узор. Так как для мотива меньшего размера потребуется большее количество повторов, чем для мотива большего размера, чтобы занять одинаковое пространство, размер мотива будет оказывать значительное влияние на общий вид узора. В нашем случае мы будем создавать элемент размером 100 х 100 пикселей. Когда позже вы будете создавать свои собственные узоры, вы сможете поэкспериментировать с размерами мотива, но для целей этого урока введите значение 100 пикселей для параметров Ширина (Width) и Высота (Height). Убедитесь, что параметр «Содержимое заднего фона» (Background Contents) изменен на «Прозрачный» (Transparent). Параметр «Разрешение» (Resolution) можете оставить без изменения по умолчанию – 72 пикселя на дюйм (pixels/inch):

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

Нажмите ОК для закрытия диалогового окна. Новый пустой документ появится на экране. Поскольку документ достаточно мал – всего лишь 100 х 100 пикселей, я приближу его, удержав клавишу Ctrl (Win) / Command (Mac) и нажав «пробел». В результате временно активируется инструмент «Масштаб» (Zoom Tool) (вы увидите, как курсор примет форму увеличительного стекла). Далее кликните несколько раз в любом месте внутри документа для увеличения масштаба. Масштаб изображения стал равен 500%.

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

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

Теперь, нам нужно точно определить центр документа, и мы сможем это сделать с помощью направляющих. Ранее, в уроке по изучению основ создания повторяющихся узоров мы рассмотрели, как добавлять направляющие с помощью команды «Новая направляющая» (New Guide). На этот раз мы добавим направляющие, воспользовавшись линейками. Оба способа добавления направляющих удобны, поэтому применяйте по своему усмотрению любой их них. В нашем случае, перейдите в раздел меню «Просмотр» (View) в верхней части экрана и выберите пункт «Линейки» (Rulers):

Выбираем «Просмотр» > «Линейки»

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

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

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

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

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

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

Шаг 3. Выбираем инструмент «Произвольная фигура»

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

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

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

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

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

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

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

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

В результате откроется Палитра фигур, где отобразятся маленькие миниатюры всех доступных фигур, из которых мы сможем выбрать нужную. Для выбора фигуры, просто кликните по ее миниатюре. В моем случае, я выберу фигуру в виде сердца, нажав на нее. Как только вы выбрали фигуру, нажмите Enter (Win) / Return (Mac), чтобы закрыть палитру фигур:

Кликаем по миниатюре фигуры в виде сердца для ее выбора

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

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

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

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

Рисуем фигуру в центре документа

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

После того как мы нарисовали фигуру, направляющие нам больше не понадобятся, и поскольку они отвлекают внимание, давайте их отключим. Перейдите в раздел меню «Просмотр» (View) в верхней части экрана, выберите «Показать» (Show) — «Направляющие» (Guides). Слева от слова «Направляющие» вы увидите галочку, которая говорит нам о том, что направляющие включены. Кликните по галочке еще раз, чтобы их отключить.

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

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

Давайте сделаем наш рисунок немного интереснее, прежде чем сохранить его как узор. Создайте копию слоя, перейдя в раздел меню «Слои» (Layer) в верхней части экрана и выбрав пункт «Новый» (New) — «Скопировать на новый слой» (Layer via Copy):

Выбираем «Слои» > «Новый» > «Скопировать на новый слой»

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

Копия слоя появится выше исходного слоя

Шаг 9. Применяем фильтр «Сдвиг»

Так же, как и при изучении основ создания повторяющихся узоров, мы воспользуемся фильтром «Сдвиг», чтобы сделать мотив интереснее. Перейдите в раздел «Фильтр» (Filter) в строке меню в верхней части экрана, выберите пункт «Другое» (Other) и далее «Сдвиг» (Offset):  

Выбираем Фильтр > Другое > Сдвиг

В результате откроется диалоговое окно фильтра «Сдвиг». Нам нужно ввести значение, равное половине ширины документа в окошко ввода данных «По горизонтали» и значение, равное половине высоты документа в окошко ввода данных «По вертикали». Поскольку наш документ имеет размеры 100 x 100 пикселей, для параметров «По горизонтали» (Horizontal) и «По вертикали» (Vertical) установите значение, равное 50 пикселям. Далее, убедитесь, что в нижней части диалогового окна выбран параметр «Вставить отсеченные фрагменты» (Wrap Around):

Диалоговое окно фильтра «Сдвиг»

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

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

Шаг 10. Сохраняем рисунок как узор

Нарисовав мотив, мы готовы сохранить его как узор. Перейдите в раздел меню «Редактирование» (Edit) в верхней части экрана и выберите пункт «Определить узор» (Define Pattern):

Выбираем «Редактирование» > «Определить узор»

В результате этого действия откроется диалоговое окно «Название узора» (Pattern Name), где вам будет предложено дать название новому узору. Хорошей идей является включение в название узора размеров мотива, в случае если вы разрабатываете несколько похожих мотивов разного размера. В моем случае, я назову узор «Сердца 100х100», поскольку размеры моего мотива 100 х 100 пикселей. Нажмите ОК, когда вы дадите своему узору название, чтобы закрыть диалоговое окно. И теперь наш узор сохранен и готов к применению:

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

Шаг 11. Создаем новый документ

Давайте создадим новый документ, чтобы заполнить его новым узором. Так же, как и в Шаге 1, перейдите в меню «Файл» (File) и выберите пункт «Новый» (New). На этот раз, когда откроется диалоговое окно «Новый документ», введите значение 1000 пикселей для параметров Ширина (Width) и Высота (Height) и измените «Содержимое заднего фона» (Background Contents) на «Белый» (White). Параметр «Разрешение» (Resolution) можете оставить без изменения по умолчанию – 72 пикселя на дюйм (pixels/inch) Нажмите ОК для закрытия диалогового окна, и новый документ, заполненный белым цветом, появится на экране:

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

Шаг 12. Создаем новый пустой слой

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

Кликаем по значку «Создать новый слой»

Программа добавит новый пустой слой под названием «Слой 1» (Layer 1) выше слоя с задним фоном:

Программа поместит новый слой выше слоя с задним фоном

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

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

Кликните по инструменту «Градиент», удержите кнопку мышки нажатой и выберите из появившегося списка инструмент «Заливка»

Шаг 14. Изменяем источник для заливки на «Узор»

Выбрав инструмент «Заливка», перейдите на панель настроек и в качестве источника для заливки выберите «Узор» (Pattern) (по умолчанию, источник заливки установлен на «Основной цвет» (Foreground)):

Изменяем источник для заливки на «Узор»

Шаг 15. Выбираем узор

Выбрав пункт «Узор», кликните по миниатюре узора в окошке предварительного просмотра на панели настроек:

Кликаем по миниатюре узора в окошке предварительного просмотра справа от параметра «Источник» на панели настроек

В результате откроется Палитра узоров, где мы сможем выбрать нужный узор. Узор, который мы только что создали, будет располагаться в списке последним. Кликните по его миниатюре для выбора. Как только вы выберите узор, нажмите Enter (Win) / Return (Mac), чтобы закрыть Палитру узоров:

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

Шаг 16. Кликаем внутри документа для добавления узора

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

Кликните внутри документа, чтобы заполнить узором Слой 1

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

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

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

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

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

Выполняя Шаг 5 и выбирая произвольную фигуру в Палитре фигур, вы, возможно, обратили внимание, что по умолчанию в палитре доступно не так много фигур для выбора. Такой выбор мог бы вас немного расстроить, если только вам не нужно было бы добавлять к дизайну повторяющиеся стрелки, голубые пузыри или конверты. К счастью, есть и другие фигуры, из которых мы можем выбрать нужную. Нам требуется только самостоятельно загрузить их. Далее мы рассмотрим, как. Открыв Палитру фигур, кликните по маленьком значку в виде стрелки в правом верхнем углу:

Кликаем по значку в виде стрелки

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

Выбираем любой набор из перечня дополнительных наборов произвольных фигур

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

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

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

Выбираем фигуру в виде отпечатка собачьей лапы

Ниже приведен пример повторяющегося узора, созданного на основе произвольной фигуры «Собачий след». Для этого я сначала создал новый документ чуть большим размером 150 x 150 пикселей для разработки мотива (смотрите Шаг 1), затем в диалоговом окне фильтра «Сдвиг» (Шаг 8) для параметров «По горизонтали» (Horizontal) и «По вертикали» (Vertical) ввел значения, равные 75 пикселям каждое (половина ширины и высоты документа). Далее, я изменил цвет узора с помощью слоя-заливки цветом для заднего фона и еще одного слоя-заливки цветом для самого узора:

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

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

И вот мы закончили! Мы научились создавать повторяющиеся узоры на основе произвольных фигур в программе Photoshop! Посетите наш раздел «Основы работы», где представлены различные уроки по слоям, выделениям, интерфейсу и прочим элементам программы, или рассмотрите другие темы, которые вас заинтересуют!

Автор: Steve Patterson

Как рисовать повторяющиеся узоры в Фотошоп / Фотошоп-мастер

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

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

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

Шаг 1. Создаем новый документ

Давайте начнем с создания отдельного мотива для узора. Для этого нам нужен новый пустой документ, поэтому я перейду в раздел «Файл» (File) в строке меню в верхней части экрана и выберу пункт «Новый» (New):

Выбираем «Файл» > «Новый»

В результате, откроется диалоговое окно «Новый» (New). Для параметров Ширина (Width) и Высота (Height) введите значение 100 пикселей. Размер документа будет определять размер мотива, который в свою очередь будет влиять на частоту повтора узора в документе (так как для мотива меньшего размера потребуется большее количество повторов, чем для мотива большего размера, чтобы занять одинаковое пространство). В нашем случае мы будем создавать элемент размером 100 х 100 пикселей.  Когда позже вы будете создавать свои собственные узоры, вы сможете поэкспериментировать с размерами мотива.  Параметр «Разрешение» (Resolution) я оставлю без изменения по умолчанию – 72 пикселя на дюйм (pixels/inch), а параметр «Содержимое заднего фона» (Background Contents) изменю на «Прозрачный» (Transparent), таким образом, новый документ будет иметь прозрачный фон:

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

Нажмите ОК, когда вы закончите ввод значений, для закрытия диалогового окна, и новый документ появится у вас на экране. Узор в виде шахматной доски в окне заливки свидетельствует о том, что задний фон документа прозрачный. Поскольку документ достаточно мал – всего лишь 100 х 100 пикселей, я приближу его, удержав клавишу Ctrl (Win) / Command (Mac) и нажав значок «+» несколько раз (примечание: если вы не знаете, как изменять масштаб изображения, изучите этот урок по масштабированию). Теперь, масштаб изображения равен 500%.

Новый пустой документ с масштабом изображения, равным 500%

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

Нам нужно точно определить центр документа, и мы сможем это сделать с помощью направляющих. Перейдите в меню «Просмотр» (View) в верхней части экрана и выберите пункт «Новая направляющая» (New Guide):

Выбираем «Просмотр» > «Новая направляющая»

В результате этого действия откроется диалоговое окно «Новая направляющая». В разделе «Ориентация» (Orientation) выберите «Горизонтальная» (Horizontal), а для параметра «Положение» (Position) введите 50%. Нажмите ОК для закрытия диалогового окна, и в документе появится горизонтальная направляющая, проходящая через центр:

Выбираем «Горизонтальная» и вводим 50% для параметра «Положение»

Вернитесь в меню «Просмотр» (View) и снова выберите пункт «Новая направляющая» (New Guide). На этот раз в диалоговом окне в разделе «Ориентация» (Orientation)  выберите «Вертикальная» (Vertical), а для параметра «Положение» (Position) введите 50%.

Выбираем «Вертикальная» и вводим 50% для параметра «Положение»

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

Вертикальная и горизонтальная направляющие, проходящие через центр документа

Изменяем цвет направляющей (Дополнительный шаг)

Если Вам трудно увидеть направляющие из-за их светлого цвета, вы можете изменить цвет в разделе «Установки». На компьютере РС перейдите в раздел меню «Редактирование» (Edit) , далее выберите «Установки» (Preferences), «Направляющие, сетка и фрагменты» (Guides, Grid & Slices). На компьютере Mac перейдите в меню «Фотошоп» (Photoshop), выберите «Установки» (Preferences) и далее «Направляющие, сетка и фрагменты» (Guides, Grid & Slices):

Выбираем «Направляющие, сетка и фрагменты» в разделе «Установки»

В результате откроется диалоговое окно раздела «Установки» с опциями направляющих, сетки и фрагментов. Самая верхняя опция «Цвет» (Color) отвечает за цвет направляющей. Как я уже упоминал, по умолчанию цвет направляющей – голубой. Кликните по слову «Голубой» (Cyan) и выберите из появившегося списка другой цвет. В окне документа вы будете видеть образец цвета. Я изменю цвет на «Светло-красный» (Light Red):

Выбираем светло-красный в качестве нового цвета для направляющих

Нажмите ОК, когда вы закончите, чтобы закрыть диалоговое окно «Установки». Цвет направляющих в окне документа изменится (обратите внимание, что программа будет отображать направляющие с новым цветом до тех пор, пока вы снова не зайдете в раздел «Установки» и не измените цвет обратно на голубой или на какой-либо другой):

Направляющие изменили свой цвет и стали заметнее

Шаг 3. Рисуем фигуру в центре документа

Вы можете создать очень сложные узоры в программе Photoshop, или узоры могут быть достаточно простыми и состоять всего лишь из точек или кругов. Давайте нарисуем в центре документа круг. Сначала на панели инструментов выберите инструмент «Овальная область»  (Elliptical Marquee Tool). По умолчанию, он находится под инструментом «Прямоугольная область» (Rectangular Marquee Tool), поэтому кликните по инструменту «Прямоугольная область» и удержите кнопку мышки нажатой несколько секунд до тех пор, пока не появится всплывающее меню, где вы сможете выбрать инструмент «Овальная область»:

Кликните по инструменту Прямоугольная область», удержите нажатой кнопку мышки и затем выберите инструмент «Овальная область»

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

Удержите нажатыми клавиши Shift+Alt (Win) / Shift+Option (Mac) и нарисуйте от центра выделение круглой формы

Шаг 4. Заполняем выделение черным цветом

Перейдите в раздел меню «Редактирование» (Edit) в верхней части экрана и выберите пункт «Выполнить заливку» (Fill):

Выбираем «Редактирование» > «Выполнить заливку»

В результате откроется диалоговое окно «Заполнить» (Fill), где мы сможем выбрать цвет, которым заполним наше выделение. Установите параметр «Использовать» (Use) в верхней части диалогового окна на «Черный» (Black):

Устанавливаем параметр «Использовать» на «Черный»

Нажмите ОК, чтобы закрыть диалоговое окно. Программа заполнит наше выделение круглой формы черным цветом. Нажмите сочетание клавиш Ctrl+D (Win) /Command+D (Mac), чтобы быстро убрать контур вокруг фигуры (вы также можете перейти в раздел меню «Выделение» (Select) и выбрать пункт «Отменить выделение» (Deselect), но нажатие клавиш – более быстрый вариант). Помните, что масштаб изображения все еще равен 500%, поэтому края круга выглядят угловатыми:

Выделение заполнилось черным цветом

Шаг 5. Дублируем слой

Добавив всего лишь один круг в центр нашего мотива, мы уже можем сохранить его как узор. Однако прежде чем мы это сделаем, давайте придадим мотиву более интересный вид. Для начала, сделайте копию слоя, перейдя в раздел меню «Слои» (Layer) в верхней части экрана, выбрав «Новый» (New) и далее «Скопировать на новый слой» (Layer via Copy). Или, если вы предпочитаете работать с клавишными комбинациями, нажмите Ctrl+J (Win) /Command+J (Mac):

Выбираем «Слои» > «Новый» > «Скопировать на новый слой»

В окне документа ничего не изменится, однако на панели слоев выше исходного слоя появится копия слоя под названием «Слой 1 копия» (Layer 1 copy):

На панели слоев выше исходного слоя появится копия слоя 1

Шаг 6. Применяем фильтр «Сдвиг»

При рисовании мотивов, которые впоследствии будут использоваться как повторяющиеся узоры, практически всегда желательно применять фильтр «Сдвиг» (Offset). Его можно найти, выбрав раздел «Фильтр» (Filter) в строке меню в верхней части экрана, перейдя в пункт «Другое» (Other) и далее «Сдвиг» (Offset):

Выбираем Фильтр > Другое > Сдвиг

В результате откроется диалоговое окно фильтра «Сдвиг». Данный фильтр перемещает или сдвигает содержимое слоя на определенное число пикселей по горизонтали, по вертикали или в обоих направлениях. При создании простых повторяющихся узоров, как в нашем случае, вам нужно ввести значение, равное половине ширины документа в окошко ввода данных «По горизонтали» и значение, равное половине высоты документа в окошко ввода данных «По вертикали». Поскольку наш документ имеет размеры 100 x 100 пикселей, установите значение 50 пикселей для параметра «По горизонтали» (Horizontal) и «По вертикали» (Vertical). В нижней части диалогового окна в разделе «Неопределенные области» (Undefined Area) выберите пункт «Вставить отсеченные фрагменты» (Wrap Around):

Установите для параметров «По горизонтали» и «По вертикали» значения, равные половине размеров документа и убедитесь, что выбран пункт «Вставить отсеченные фрагменты»

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

Изображение после применения фильтра «Сдвиг»

Шаг 7. Определяем мотив в качестве узора

Нарисовав мотив, давайте сохраним его в качестве узора. Это действие в программе Photoshop называется «Определение узора». Перейдите в раздел меню «Редактирование» (Edit) в верхней части экрана и выберите пункт «Определить узор» (Define Pattern):

Выбираем «Редактирование» > «Определить узор»

В результате этого действия откроется диалоговое окно, где вам будет предложено дать название новому узору. Хорошей идей является включение в название узора размеров мотива, в случае если вы разрабатываете несколько похожих мотивов разного размера. Таким образом, я назову свой узор «Круги 100х100». Нажмите ОК, когда вы дадите своему узору название, чтобы закрыть диалоговое окно. И теперь наш мотив сохранен как узор!

Назовите узор «Круги 100х100»

Шаг 8. Создаем новый документ

Мы создали наш мотив и сохранили его как узор, теперь мы можем воспользоваться им, чтобы заполнить целый слой! Давайте создадим новый документ, в котором будем работать. Так же как мы делали в Шаге 1, перейдите в раздел «Файл» (File) в строке меню в верхней части экрана и выберите пункт «Новый» (New). Когда откроется диалоговое окно нового документа, введите значение 1000 рх для параметров «Ширина» (Width) и «Высота» (Height). Параметр «Разрешение» (Resolution) оставьте без изменения по умолчанию – 72 пикселя на дюйм (pixels/inch), а параметр «Содержимое заднего фона» (Background Contents) в этот раз измените на «Белый» (Transparent), чтобы задний фон нового документа был заполнен белым цветом. Нажмите ОК, когда вы закончите вводить значения, для закрытия диалогового окна. Новый документ появится на вашем экране:

Создаем новый документ с белым задним фоном размером1000 x 1000 px

Шаг 9. Добавляем новый слой

Теперь мы могли бы просто заполнить слой с задним фоном созданным узором, но тогда возможности работы с узором будут сильно ограничены. Как мы с Вами рассмотрим далее, в следующем уроке, когда будем добавлять к узору цвета и градиентную заливку, лучше всего для работы с повторяющимся узором размещать его на отдельном слое. Кликните по значку «Создать новый слой» (New Layer) в нижней части панели слоев:

Нажимаем на значок «Создать новый слой»

Новый пустой слой под названием «Слой 1» (Layer 1) появится выше слоя с задним фоном:

Появится новый слой

Шаг 10. Заполняем новый слой узором

Добавив новый слой, давайте заполним его нашим узором! Для этого перейдите в раздел меню «Редактирование» (Edit)  и выберите «Выполнить заливку» (Fill):

Выбираем «Редактирование» > «Выполнить заливку»

Обычно команда «Выполнить заливку» используется для заливки слоя или выделения чистым цветом, как мы делали в Шаге 4, когда заполняли выделение черным цветом. Но также мы можем воспользоваться командой «Выполнить заливку», чтобы заполнить какую-либо область узором. Для этого сначала измените значение параметра «Использовать» (Use) на «Узор» (Pattern):

Изменяем параметр «Использовать» на «Узор»

После выбора параметра «Узор» (Pattern), еще один параметр «Заказной узор» (Custom Pattern) появится прямо под ним. Здесь мы сможем выбрать узор, который будем использовать. Кликните по миниатюре предварительного просмотра узора:

Кликните по миниатюре заказного узора

В результате откроется Палитра узоров (Pattern Picker), где будут отображены маленькие миниатюры всех доступных узоров. Узор в виде кругов, который мы только что создали, будет в самом конце перечня. Если опция «Показывать подсказки» (Tool Tips) в разделе «Установки» (Preferences) у вас включена (по умолчанию, она включена), то по мере наведения курсора на миниатюру будет появляться название узора. Дважды кликните по миниатюре узора, чтобы его выбрать и закрыть Палитру узоров.

В Палитре узоров выбираем узор «Круги 100х100»

Как только вы выбрали узор, все, что вам остается – нажать ОК для выхода из диалогового окна «Заполнить» (Fill). Программа заполнит пустой слой узором в виде кругов, повторив его столько раз, сколько требуется для заполнения всего слоя:

Слой 1 теперь заполнен повторяющимся узором в виде кругов

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

Автор: Steve Patterson

Создаем простые орнаменты | Журнал Ярмарки Мастеров

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

Создаем простые орнаменты, фото № 1

Начинаем с точек. Потом изогнутой линией соединяем верхнюю часть 1-ой точечки и нижний край 2-ой точечки.

Создаем простые орнаменты, фото № 2

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

Создаем простые орнаменты, фото № 3

А вот орнамент из скобочек и капелек. Сначала рисуются скобочки, потом капельки.

Создаем простые орнаменты, фото № 4

Здесь последовательность такая: скобочки, сетка, капельки. Но можно и капельки сначала, а потом сеточку.

Создаем простые орнаменты, фото № 5

Еще один пример простого орнамента.

Создаем простые орнаменты, фото № 6

Это пример более сложного орнамента, но в его основе — капельки.

Благодарю за внимание!

Создаем четкий, иллюстрированный бесшовный паттерн в Adobe Photoshop

Над чем сегодня работаем

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

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

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

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

Создайте новый Photoshop-документ достаточного размера. Я рекомендую использовать размер не менее 5000 на 5000 пикселей. При необходимости его всегда можно уменьшить, а вот увеличить изображение маленького размера без потери качества уже не получится:

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

Это легче всего сделать при помощи меню Изображение > Коррекция > Уровни (Image > Adjustments > Levels). Передвиньте левый ползунок внутрь окна, чтобы сделать черные элементы еще темнее, а затем передвиньте правый ползунок левее, чтобы сделать белые фрагменты еще светлее. Затем поэкспериментируйте со средним ползунком до тех пор, пока не найдете подходящий баланс.

Затем выделите белые фрагменты инструментом «Волшебная палочка» (Magic Wand) и нажмите Delete. Если вам не удалось добиться четкости на эскизе или хорошо отсканировать документ, то можно воспользоваться иллюстрацией для создания нового изображения на отдельном слое. Разместите слой с эскизом на самый верх в панели слоев, немного уменьшите уровень его непрозрачности. После этого продублируйте его кистью или другим инструментом на новом слое:

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

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

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

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

Когда фрагмент будет готов, сделайте копию слоя с шаблоном (Ctrl+J), и переместите копию в одну из сторон по прямой линии (для этого можно зажать клавишу Shift).

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

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

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

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

Помните, что нам важны только края контрольного слоя (слоя с копией), но если вам не хватает места для работы, можно увеличить размер холста через меню Изображение > Размер холста (Image > Canvas Size):

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

После этого этапа ваш бесшовный паттерн будет практически завершен. Снова удалите копию, и приступим к тестированию:

Скопируйте получившийся фрагмент в новый файл (Ctrl-A > Ctrl -C > Ctrl -N > Ctrl-V).

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

Активируйте инструмент «Прямоугольная область» (Rectangular Marquee Tool), и протяните квадрат, отступив примерно 1/5 от краев фрагмента.

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

Снимите выделение (Ctrl-D), и проделайте то же самое с верхним и нижним краями. У нас получился красивый фрагмент мозаики:

Теперь выделите полностью весь фрагмент. Здесь нужно быть предельно точным, поэтому лучше воспользоваться направляющими (Guides). Затем перейдите в меню Редактирование > Определить узор (Edit > Define Pattern). Укажите название нового узора и затем сохраните его:


Создайте новый пустой файл, по размеру раза в три больше вашего паттерна, и залейте его только что созданным узором при помощи инструмента «Заливка» (Paint Bucket Tool), предварительно изменив стандартную опцию «Основной цвет» (Foreground) на «Узор» (Regular) с указанием нашего нового узора. Новые узоры всегда показываются в самом конце перечня. Теперь внимательно рассмотрите все «швы»:

Если все-таки выявились какие-либо неровности, то просто пометьте для себя их расположение. Затем возвратитесь к исходному паттерну и исправьте их.

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

Теперь пришло время раскрасить нашу иллюстрацию. Легче всего это делается при помощи «Наложения цвета» (Color Overlay).

Для каждого цвета, который вы хотите добавить, создайте новый слой, и выставите наложение необходимого цвета. Для этого можно нажать кнопку Fx в самом низу панели слоев, а затем выбрав «Наложение цвета» из меню. Работая таким образом, вы всегда будете видеть, с каким цветом имеете дело.

В узоре можно использовать сколько угодно цветов, но следует учесть, что если шаблон предназначается для печати, то лучше всего использовать не более 4-8 цветов.

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

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

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

Теперь нужно проверить, не заходит ли фоновый цвет на передний план. Это просто исправляется: нужно выбрать фрагменты иллюстрации, вокруг которых виден небольшой контур базового цвета при помощи зажатия клавиши Ctrl на клавиатуре и клика левой кнопкой мыши по миниатюре этого изображения на нужном слое. Затем нужно перейти в меню Выделение > Модификация > Сжать (Select > Modify > Contract) и ввести значение 1, после чего нажимаем ОК.

Это сожмет все выделение на 1 пиксель. Теперь инвертируйте выделение (Ctrl-Shift-I), а затем нажмите «Удалить» (Delete). Это приведет к удалению контура толщиной в 1 пиксель по всему фрагменту:

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

Это легче всего делается при помощи направляющих. Установите одну горизонтальную и одну вертикальную направляющую рядом с краями документа. Если вы не видите линейки по краям рабочей области, то нужно включить их при помощи меню Просмотр > Линейки (View > Rulers).

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

Когда выберете нужный фрагмент, воспользуйтесь инструментом «Масштаб» (Zoom), и сильно увеличьте документ. Установите следующую направляющую точно по краю выделения.

Теперь повторите эту операцию с каждым слоем цвета, и выделение всегда установлено в нужном месте.

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

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

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

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

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

Данная публикация представляет собой перевод статьи «Create a Detailed, Illustrative, Seamless Pattern in Adobe Photoshop» , подготовленной дружной командой проекта Интернет-технологии.ру

Как сделать узор в Фотошопе

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

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

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

Узоры в Фотошопе

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

Применение

  1. Настройка заливки.
    При помощи данной функции можно заполнить узором пустой или фоновый (закрепленный) слой, а также выделенную область. Рассмотрим способ на примере выделения.
    • Берем инструмент «Овальная область».

      Инструмент Овальная область для заливки узором в Фотошопе

    • Выделяем участок на слое.

      Создание овальной области выделения для заливки узором в Фотошопе

    • Идем в меню «Редактирование» и кликаем по пункту «Выполнить заливку». Эту функцию также можно вызвать сочетанием клавиш SHIFT+F5.

      Функция Выполнить заливку в меню Редактирование при заполнении выделения узором в Фотошопе

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

      Окно настройки заливки для заполнения выделенной области узором в Фотошопе

    • В разделе с названием «Содержимое», в выпадающем списке «Использовать» выбираем пункт «Регулярный».

      Выбор пункта Регулярный в выпадающем списке Использовать окна настроек заливки выделения узром в Фотошопе

    • Далее открываем палитру «Заказной узор» и в открывшемся наборе выбираем тот, который считаем нужным.

      Выбор образца в палитре Заказной узор окна настройки заливки выделения узором в Фотошопе

    • Нажимаем кнопку ОК и смотрим на результат:

      Результат заливки выделенной области узором в Фотошопе

  2. Заполнение при помощи стилей слоя.
    Данный способ подразумевает наличие на слое какого-либо объекта или сплошной заливки.
    • Кликаем ПКМ по слою и выбираем пункт «Параметры наложения», после чего откроется окно настроек стилей. Такого же результата можно добиться, кликнув дважды левой кнопкой мыши.

      Пункт контекстного меню Параметры наложения для вызова настроеу ститей при заливке слоя узором в Фотошопе

    • В окне настроек переходим к разделу «Наложение узора».

      Раздел Наложение узора в окне настройки стилей слоя при заливке узором в Фотошопе

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

Пользовательские фоны

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

Интернет предоставляет нам возможность пользоваться чужими наработками и опытом. В сети существует множество сайтов с пользовательскими фигурами, кистями и паттернами. Для поиска таких материалов достаточно вбить в Гугл или Яндекс такой запрос: «узоры для фотошопа» без кавычек.

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

Скачанный архив содержащий файл узора с расширением PAT для использования в Фотошопе

Данный файл необходимо распаковать (перетащить) в папку

C:\Пользователи\Ваша учетная запись\AppData\Roaming\Adobe\Adobe Photoshop CS6\Presets\Patterns

Целевая папка для распаковки скачанных узоров для использования в Фотошопе

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

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

    Пункт Загрузить узоры в контекстном меню настройки заливки в Фотошопе

  2. Откроется папка, о которой мы говорили выше. В ней выбираем наш распакованный ранее файл PAT и жмем кнопку «Загрузить».

    Загрузка файла формата PAT содержащего узоры для использования в Фотошопе

  3. Загруженные паттерны автоматически появятся в палитре.

    Загруженные узоры в палитре Заказной узор окна настройки заливки в Фотошопе

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

Создание узора

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

Нам понадобится документ квадратной формы.

Новый документ для создания пользовательского узора в Фотошопе

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

  1. Ограничиваем холст направляющими со всех сторон.

    Ограничение холста направляющими при создании пользовательского узора в Фотошопе

    Урок: Применение направляющих в Фотошопе

  2. Переходим в меню «Изображение» и жмем на пункт «Размер холста».

    Пункт меню Размер холста для создания пользовательского узора в Фотошопе

  3. Добавляем по 50 пикселей к размерам Ширины и Высоты. Цвет расширения холста выбираем нейтральный, например, светло-серый.

    Настройка расширения холста для создания пользовательского узорв в Фотошопе

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

    Зона безопасности контента для создания пользовательского узора в Фотошопе

  4. Создаем новый слой и заливаем его темно-зеленым цветом.

    Урок: Как залить слой в Фотошопе

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

  5. Добавим нашему фону немного зернистости. Для этого обратимся к меню «Фильтр», откроем раздел «Шум». Необходимый нам фильтр называется «Добавить шум».

    Фильтр Добавить шум для создания пользовательского узора в Фотошопе

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

    Настройка фильтра Добавить шум при создании пользовательского узора в Фотошопе

  6. Далее применим фильтр «Перекрестные штрихи» из соответствующего блока меню «Фильтр».

    Фильтр Перекрестные штрихи для создания пользовательского узора в Фотошопе

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

    Настройка фильтра Перекрестные штрихи при создании пользовательского узора в Фотошопе

  7. Применим к фону еще один фильтр под названием «Размытие по Гауссу».

    Фильтр Размытие по Гауссу для создания пользовательского узора в Фотошопе

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

    Настройка фильтра Размытие по Гауссу для создания пользовательского узора в Фотошопе

  8. Проводим еще две направляющих, определяющих центр холста.

    Дополнительные центральные направляющие для создания пользовательского узора в Фотошопе

  • Активируем инструмент «Произвольная фигура».

    Инструмент Произвольная фигура для создания пользовательского узора в Фотошопе

  • На верхней панели параметров настраиваем заливку белым цветом.

    Настройка заливки произвольной фигуры при создании пользовтельского узора в Фотошопе

  • Выбираем вот такую фигуру из стандартного набора Фотошопа:

    Выбор произвольной фигуры из стандартного набора для создания пользовательского узора в Фотошопе

  • Ставим курсор на пересечение центральных направляющих, зажимаем клавишу SHIFT и начинаем растягивать фигуру, затем добавляем еще клавишу ALT, чтобы построение выполнялось равномерно во все стороны от центра.

    Построение произвольной фигуры от центра при создании пользовательского узора в Фотошопе

  • Растрируем слой, нажав по нему ПКМ и выбрав соответствующий пункт контекстного меню.

    Растрирование слоя с произвольной фигурой при создании пользовательского узора в Фотошопе

  • Вызываем окно настройки стилей (см. выше) и в разделе «Параметры наложения» снижаем значение «Непрозрачности заливки» до нуля.

    Снижение непрозрачности заливки в окне натройки стилей при создании пользовательского узора в Фотошопе

    Далее переходим к разделу «Внутреннее свечение». Здесь настраиваем Шум (50%), Стягивание (8%) и Размер (50 пикселей). На этом настройка стиля завершена, нажимаем ОК.

    Настройка Внутреннего свечения фигуры при создании пользовательского узора в Фотошопе

  • При необходимости немного снижаем непрозрачность слоя с фигурой.

    Снижение непрозрачности слоя с фигурой при создании пользовательского узора в Фотошопе

  • Кликаем ПКМ по слою и растрируем стиль.

    Растрирование стиля слоя с фигурой при создании пользовательского узора в Фотошопе

  • Выбираем инструмент «Прямоугольная область».

    Инструмент Прямоугольная область для создания пользовательского узора в Фотошопе

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

    Выделение участка ограниченного направляющими при создании пользовательского узора в Фотошопе

  • Копируем выделенный участок на новый слой горячими клавишами CTRL+J.

    Копирование выделенного участка на новый слой при создании пользовательского узора в Фотошопе

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

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

  • Переходим обратно на слой с исходной фигурой, и повторяем действия (выделение, копирование, перемещение) с остальными участками.

    Размещение элементов по углам холста при создании пользовательского узора в Фотошопе

  • С оформлением мы закончили, теперь идем в меню «Изображение – Размер холста» и возвращаем размер к исходным значениям.

    Настройка размера холста на исходные значения при создании пользовательского узора в Фотошопе

    Получим вот такую заготовку:

    Заготовка пользовательского узора в Фотошопе

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

  • Снова переходим к меню «Изображение», но на этот раз выбираем «Размер изображения».

    Пункт меню Размер изображения для создания пользовательского узора в Фотошопе

  • Для эксперимента зададим размер узора 100х100 пикселей.

    Уменьшение размера изображения для создания пользовательского узора в Фотошопе

  • Теперь идем в меню «Редактировать» и выбираем пункт «Определить узор».

    Пункт меню Определить узор для создания пользовательского узора в Фотошопе

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

    Присваивание имени новому узору в Фотошопе

  • Теперь у нас в наборе есть новый, собственноручно созданный паттерн.

    Созданный пользовательский узор в наборе в Фотошопе

    Выглядит он следующим образом:

    Залитый пользовательским узором слой в Фотошопе

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

    Результат создания пользовательского узора в Фотошопе

    Сохранение набора с узорами

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

    1. Нужно перейти в меню «Редактирование – Наборы – Управление наборами».

      Пункт меню Управление наборами для создания пользовательского набора узоров в Фотошопе

    2. В открывшемся окне выбрать тип набора «Узоры»,

      Выбор типа набора при создании пользовательского набора узоров в Фотошопе

      Зажать CTRL и выделить нужные паттерны по очереди.

      Выделение требуемых узоров при создании пользовательского набора в Фотошопе

    3. Нажать кнопку «Сохранить».

      Кнопка Сохранить для создания пользовательского набора узоров в Фотошопе

      Выбрать место для сохранения и название файла.

      Место сохранения и имя файла пользовательского набора узоров в Фотошопе

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

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

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

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

    ДА НЕТ

    Узоры (Patterns) Photoshop: полное руководство

    Чтобы загрузить библиотеку, которые поставляются в комплекте с Photoshop, нажмите на иконки шестерёнки (треугольника в ранних версиях) справа, Это откроет Вам меню предустановленных наборов:

    2

    Выберите один из наборов из раздела, который я обвёл красной рамкой, например, «Скалы» (Rock Patterns).

    При выборе шаблона для загрузки, вам будет задан вопрос, хотите ли Вы заменить существующие модели, или добавить к ним. Нажмите на кнопку «Добавить» (Append):

    3

    Это действие добавит набор к текущим образцам вместо их замены. Кроме того, для удобства выбора, можете увеличить миниатюры образцов, кликнув по пункту «Большие миниатюры» (Large Thumbnail):

    4

    Применение узоров Photoshop

    Теперь мы можем использовать узоры из набора «Скалы». Давайте рассмотрим способы их применения.

    Инструмент «Заливка» (Fill, Shift+F5): заливка узором выделенной области

    Самый простой способ применения узора — это выделить область, которую необходимо заполнить вашим рисунком, а затем с помощью команды Редактирование —> Выполнить заливку (Edit —> Fill) залить выделение.
    Например, вы можете использовать инструмент «Прямоугольная область» (Rectangular Marquee Tool), чтобы создать выделение где-либо на холсте, пройти о вкладке Редактирование —> Выполнить заливку, откроется диалоговое окно «Заполнить» (Fill), в окне в разделе «Использовать» (Use) выбираете пункт «Регулярный» (Pattern), затем кликаете по цветному квадратику, выбираете узор из тех, которые мы загрузили в менеджере, нажимаете ОК:

    5

    Команда «Заливка» (Fill) является самым простым способом нанесения узора на весь холст или его часть, кроме того, Вы можете использовать её на отдельном слое, а это означает, что вы можете вносить изменения в этот слое, не затрагивая другие слои.

    Стиль слоя «Наложение узора» (Pattern Overlay)

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

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

    Откройте диалоговое окно этого стиля слоя, выберите узор и примените стиль, подробнее читайте здесь:

    s

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

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

    Инструменты рисования

    Кроме этого, узоры на холст можно накладывать с помощью инструментов «Узорный штамп» (Pattern Stamp Tool) и «Заливка» (Paint Bucket Tool).

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

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

    Сводная таблица: применение узоров Photoshop:

    Способ нанесения Преимущества Недостатки
    Инструмент «Заливка»
    (Shift+F5)
    • Простота в использовании
    • Может находиться на отдельном слое, которым Вы можете манипулировать независимо от других слоёв
    • Отлично подходит для заполнения больших площадей
    • Зависит от инструментов выделения Photroshop, а, значит, возможны трудности с заливкой некоторых объектов
    Режим наложения
    «Добавление узора»
    (Pattern Overlay)
    • Легко наносится на сложные объекты и формы
    • Имеет множество вариантов нанесения, Вы можете настроить такие параметры, как непрозрачность, масштаб и режим наложения
    • Возможность перемещать узор по холсту курсором мыши
    • Находится на одном и том же слое с объектом нанесения, а значит, любые изменения влияют на слой
    Инструменты рисования
    • Лучшая управляемость и контроль
    • Может быть сделана на отдельном слое, которым вы можете манипулировать независимо от других слоёв
    • Отлично подходит для нерегулярного применения шаблонов
    • Результаты можно смотреть в процессе нанесения
    • Займет более длительное время и требует навыков при применении узора по сравнению с другими методами
    • Результаты могут получиться неожиданные и нежелательные

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

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

    6

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

    Я продемонстрирую создание узора на примере. Создаю документ размером 40 на 40 пикселей и рисую в центре чёрный круг диаметром примерно 30 пикселей:

    27

    Чтобы создать узор на основе этого изображения, надо пройти по вкладке Редактирование —> Определить узор (Edit —> Define Pattern), после чего откроется диалоговое окно, где нужно задать имя:

    28

    Всё, узор сохранён в стеке. Если мы сейчас откроем менеджер наборов, мы его увидим:

    28

    Далее создадим документ, к примеру, 640 на 480 пикселей с белым фоном и нанесём на него это узор с помощью инструмента «Заливка». Нажимаем Ctrl+F5, открывается диалоговое окно, где выбираем «Регулярный» (Pattern), а затем наш узор:

    30

    Нажимаем ОК. Вот, что получилось:

    31

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

    Создание собственного узора

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

    Узоры (Patterns) Photoshop: полное руководство

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

    Сохранение собственного узора

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

    Сделать это очень просто. Надо открыть диалоговое окно менеджера управления наборами и кликнуть мышкой по нужному узору. Если Вам необходимо сохранить несколько узоров, зажмите клавишу Ctrl и кликните по нужным. Вокруг выбранных узоров появится тонкая синяя рамка. При этом станет активной кнопка «Сохранить…» (Save Set…). Вам осталось лишь нажать на неё и выбрать папку для сохранения на Вашем компьютере.

    Узоры (Patterns) Photoshop: полное руководство

    Загрузка узоров в Photoshop

    Для начала надо скачать набор узоров (файл .pat) и сохранить его на компьютере. Затем заходим в менеджер узоров и нажимаем кнопку «Загрузить» (Load):

    Узоры (Patterns) Photoshop: полное руководство

    Откроется стандартное окно Windows`а для выбора папки, выбираете папку, где сохранили набор и дважды кликаете по сохранённому файлу.

    Откроется окно с вопросом, хотите ли Вы заменить набор или добавить к имеющемуся в стеке, или заменить (ОК или Append), выбираете:

    3

    Узоры из набора добавятся в стек.

    Отправить ответ

    avatar
      Подписаться  
    Уведомление о