Узоры в Фотошопе: теория, создание, использование. Уроки Photoshop. Рубрика: Эффекты. Создаём эффектные узоры в Фотошоп

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

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

Ой, что-то я заболтался.

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

Итак, приступим, наконец-то, научимся как сделать узор в фотошопе .

Шаг 1. Создаем файл с размерами 4 на 4 пикселя. Да-да, Вы все правильно прочитали. Такое маленькое изображение у нас будет.

Шаг 2. Берем карандаш, и выставляем цвет черный, и толщину 1 пиксель. То есть, минимум.

Шаг 3. Делаем подобное, как у меня на скриншоте:

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

Шаг 4. Все, узор у нас готов, но как же сохранить его? Переходим в Редактирование > Определить узор…

Даем имя и сохраняем.

Шаг 5. Учимся применять узор на практике. Открываем свойства слоя, и ставим галочку напротив “Наложение узора ”.

И выбираем в списке узоров наш.

Смотрим как было без узора, и как стало:

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

Надеюсь, вы научились как создавать узор в фотошопе .

P.S.: Наконец-то пришла книга Стивена Кинга “Оно”.

Кто-то читал?

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

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

Что такое узор в фотошопе?

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

Узор - это небольшое изображение представляющее собою сочетание переплетение линий, красок, теней.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ПРИМЕР 1

Шаг 1. Для начала создаем новый документ Ctrl+N 1000 Х 1000 пикс. (или другой по вашему желанию) с белым фоном.

Шаг 2. На новом слое рисуем круглое выделение инструментом Овальная область (Eliptical Marquee Tool), удерживая клавишу Shift для сохранения пропорций, и заливаем его любым цветом.

Шаг 3. Снимаем выделение (Deselect) Ctrl+D и перемещаем полученный круг на середину верхней части документа. Размер примерно такой, как на скриншоте.

Теперь нам нужно разместить копии этой фигуры по окружности равномерно. Для этого сначала будем использовать такое сочетание клавиш: Ctrl+Alt+T .
Известная комбинация клавиш Ctrl+T вызывает Свободную трансформацию (Free Transform) и позволяет выполнять любой вид трансформации на данном слое. А вот команда Ctrl+Alt+T делает то же самое, но на копии слоя!

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

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

Затем в панели настроек устанавливаем угол поворота в 18°. Можно использовать и другую величину угла - главное, чтобы она была кратна 360 (например, 4, 5, 6, 9, 10, 12, 15, 20, 24, 30 и т. д., также подходят и нецелые числа).

Применяем трансформацию - для этого нажимаем на галочку, или жмем Enter .
Шаг 5. Теперь нам остается только выполнить предыдущее преобразование несколько раз. Для этого используем следующую комбинацию клавиш: Ctrl+Shift+Alt+T . Эта команда повторяет предыдущую трансформацию каждый раз на новом слое. Зажимаем тремя пальцами левой руки три клавиши Ctrl+Shift+Alt и не отпускаем, а правой нажимаем клавишу T столько раз, сколько нужно повторов трансформации. Когда круг замкнулся - отпускаем все клавиши. Вот, что должно получиться:

Шаг 6. Теперь нужно слить все слои в один. Для этого временно отключаем фоновый слой и нажимаем Ctrl+Shift+E . Теперь опять включаем видимость фонового слоя.

Шаг 7. Будем продолжать выполнять трансформации уже на новом слое. Для этого новый слой создавать не надо, он появится автоматически благодаря команде Ctrl+Alt+T . Итак, нажимаем и опускаем клавиши Ctrl+Alt+T . В появившейся рамке тянем угловой маркер внутрь. При этом удерживаем одновременно клавишу Shift для сохранения пропорций и клавишу Alt , чтобы центр не смещался. Уменьшаем размер так, чтобы новая фигура поместилась внутри предыдущей. На панели настроек выставим угол поворота 9°.

Применяем трансформацию (Enter ).

Шаг 8. Опять для повтора предыдущей трансформации жмем Ctrl+Shift+Alt+T столько раз, сколько посчитаете нужным. Если все сделали правильно, то должно получиться примерно так:

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

а также можем использовать ее в качестве основы для создания кисти, или узора (заливки). Для этого переходим в меню Редактирование - Определить кисть (Edit - Define Brush), или Редактирование - Определить узор (Edit - Define Pattern). Сохраняем и находим новую кисть, или новый узор в библиотеке кистей и узоров.

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

ПРИМЕР 2
Следующий "узор" создадим при помощи повторения всего двух деформаций: масштабирования (Scale) и поворота (Rotate), без перемещения центрального маркера.
Шаг 1 . Создаем новый документ Ctrl+N 1000 Х 1000 пикс. На новом слое делаем квадратное выделение инструментом Прямоугольное область (Restangular Marquee Tool), одновременно удерживая клавишу Shift для сохранения пропорций

и заливаем его любым цветом, или градиентом.

Шаг 2 . Возвращаемся к инструменту Прямоугольная область (M) (Restangular Marquee Tool) и, не снимая выделения, щелкаем правой кнопкой мыши, вызывая меню, и выбираем команду Трансформировать выделенную область (Transform Selection).

Зажав одновременно клавиши Shift и Alt , немного уменьшаем размер выделения. Нажимаем Enter .

Шаг 3. Удаляем выделенную область - Delete . Снимаем выделение Ctrl+D . Получилась квадратная рамка.

Шаг 4. Дальше нажимаем уже знакомую комбинацию Ctrl+Alt+T , чтобы выполнить трансформацию на новом слое. Как и в ПРИМЕРЕ 1 , уменьшаем фигуру так, чтобы она поместилась внутри предыдущей. Не забываем одновременно удерживать клавиши Shift и Alt , чтобы уменьшить ее пропорционально и расположить по центру. Можно ограничиться только этой трансформацией и нажать Enter , а можно еще добавить поворот (Rotate), установив угол поворота на панели настроек (у меня 2°),

а затем нажать Enter . Попробуйте оба варианта.

Шаг 6. Сливаем все слои в один, когда все готово.
В первом случае получается своеобразный тоннель, во втором - спираль.

Чем больше угол поворота, тем круче спираль.

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

Интересные фигуры получаются из кругов и овалов.

ПРИМЕР 3

Команда Ctrl+Shift+Alt+T также используется для создания красивых фрактальных узоров. Такой урок вы можете посмотреть на нашем сайте. Из простых фигур получаются своеобразные необычные спирали, которые в свою очередь используются для создания более сложных спиралей и узоров. Посмотрим, как это делается на примере простой окружности.

Шаг 1. Опять создаем новый документ Ctrl+N с белым фоном размером 1000 х 1000 пикс. Для точности построения вызовем сетку: Просмотр - Показать - Сетку . (View - Show - Grid) Устанавливаем размер сетки 90 пикс. Ctrl+K - Направляющие, сетка и фрагменты. (Редактирование - Установки - Направляющие, сетка и фрагменты )(Preferences - General - Guides, Grid & Slices).

Шаг 2. На новом слое делаем круглое выделение. Для этого, когда выберем инструмент Овальная область (Eliptical Marquee Tool), ставим крестик на пересечении первых двух линий сетки слева вверху.

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

Шаг 3. Правой кнопкой мыши вызываем меню и выбираем команду Выполнить обводку (Stroke Selection)

со следующими параметрами:

Цвет выбираем на свой вкус. Снимаем выделение Ctrl+D .

Шаг 4. Затем нажимаем Ctrl+Alt+T и выполняем следующую трансформацию:
1. перемещаем центральный маркер поворота на 4 квадрата вниз и 2 квадрата вправо.

2. На панели настроек устанавливаем масштаб 98% по ширине, нажимаем значок сохранять пропорции , и те же значения устанавливаются по высоте.
3. Угол поворота выставляем 7,5°.

Enter - применяем трансформацию.
Теперь можно сетку скрыть: Просмотр - Показать - Сетку (View - Show - Grid).

Шаг 5. Остается дело за малым. Нажимаем Ctrl+Shift+Alt+T столько раз, сколько душе угодно. Сами решайте, когда остановиться. Слоев получается очень много - больше сотни. Ну а потом все слои сливаем в один.

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

Этот урок поможет вам установить новые текстуры (узоры) для версии программы Adobe Photoshop СС 2017. Для других версий алгоритм будет тот же.

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

Переходим в Управление наборами

Далее, откройте программу Photoshop и перейдите в главном меню в верхней части экрана во вкладку Редактирование - Наборы - Управление наборами (Edit - Preset Manager). Появится вот такое окошко:

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

Кнопка возле второго указателя показывает разновидности дополнения.

Загружаем узоры в Фотошоп

Кликаем по маленькой стрелке и в выпадающем списке, путем нажатия левой кнопки мышки, выбираем вид дополнения - Узоры (Patterns):

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

Снова нажимаем Загрузить (Load).

Теперь, в диалоговом окне «Управление наборами» вы сможете увидеть в конце набора текстур новые, только что загруженные нами текстуры:

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

Вот и все, программа Photoshop скопировала указанный файл с текстурами в свой набор. Можете пользоваться!

Я вместе с вами установила себе новые текстуры! Посмотрим, что получилось!

Замечательно!

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

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

Вручную

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

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

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

3.Заполните изображением образовавшуюся пустоту.

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

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

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

Photoshop

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

1. Создайте пустой документ небольшого размера с длиной сторон, пропорциональной двум.

Файл → Создать

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

3. В эксперименте с бумагой нам пришлось вручную разрезать лист и склеивать его снова. В Photoshop это делается одним нажатием кнопки, с помощью инструмента Сдвиг/Offset.

Фильтры → Другое → Сдвиг

Go to Filter → Other → Offset

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

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

Редактирование → Определить узор.

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