Как добавить узоры в фотошоп. Создание нового узора в Фотошоп. Подготовка рабочего места
Применение узоров в Adobe Photoshop является необходимым процессом творчества для добавления различных интересных элементов в дизайне.
Узоры просты в использовании, но они могут значительно влиять на восприятие ваших композиций и гармонично дополнять их. В этом уроке Фотошоп вы узнаете, как создавать, использовать узоры и управлять ими на практике.
Образцы узоров в Фотошоп необходимы для неоднократного их использования в последующих работах. Применение шаблонов значительно ускоряет рабочий процесс, придавая сложным объектам текстуру выбранного узора. Вы значительно экономите время и добавляете некоторую изюминку вашей работе.
Вы можете создавать свои собственные узоры, использовать содержащиеся в программе паттерны и устанавливать образцы, скачанные из различных ресурсов интернета. В этом уроке мы рассмотрим следующие разделы:
1. Обзор узоров программы с функцией «Управление наборами» (Preset Manager) .
2. Три различных способа применения паттернов в Фотошоп .
3. Как создать собственный узор.
4. Создание и применение линейного диагонального узора на практике.
5. Установка Фотошоп-паттерна в библиотеке программы.
6. Создание библиотеки узоров.
Изучение узоров программы с функцией «Управление наборами» (Preset Manager) .
Вы можете найти узоры программы, заданные по умолчанию через функцию «Управление наборами». Доступ к наборам осуществляется через верхнее меню программы во вкладке Редактирование-Управление наборами (Edit > Preset Manager) . По умолчанию, окно Управления (Preset Manager) отображает палитру кистей (Brushes).
В открывшемся диалоговом окне найдите опцию «Тип набора» (Preset Type) и нажмите на стрелочку вниз. Из выпадающего подменю выберите параметр «Узоры» (Patterns) и вы увидите появившийся по умолчанию программы набор.
Это не все узоры, которые есть в программе. Для того, чтобы увидеть их все, нужно перейти к наборам библиотек. Библиотека узора представляет собой набор из 1 или более образцов, имеющих расширение файла PAT.
Для загрузки шаблонов библиотек программы Фотошоп нажмите на стрелку справа в окне «Управление наборами». В выпадающем подменю вы увидите список наборов различные узоров.
Выберите любой набор из списка и нажмите на него. После этого, появится диалоговое окно, где у вас спросят, заменить ли текущие узоры выбранными.
Нажмите опцию «Добавить» (Append) , если не хотите изменять предыдущие узоры, а просто хотите добавить выбранные сейчас.
Применение паттернов в Фотошоп.
Теперь, когда выбранный набор узоров загружен, посмотрим как его применять на практике. Существует несколько способов использования узоров и мы рассмотрим каждый.
Наложение узора при помощи команды «Заливка» (Fill).
Самый простой способ наложения паттерна заключается в заполнении им выделенной области. Например, активируйте инструмент «Прямоугольное выделение» и выделите участок любого размера на холсте. Затем, перейдите в меню Редактирование-Выполнить заливку (Edit> Fill (Shift + F5)) и в диалоговом окне заливки в опции «Использовать» (Use) укажите параметр Регулярный/Шаблон (Pattern).
Заливка узором позволяет использовать опцию «Заказной узор» (Custom Pattern) . Нажмите на стрелку параметра и вызовите подменю с библиотеками паттернов, нажав стрелочку справа. Выбрав нужный набор или узор, кликните по нему и нажмите ОК, чтобы заполнить им ваше выделение.
Важным преимуществом наложения узора способом Заливки является и то, что данный узор может использоваться на отдельном слое, не затрагивая остальные слои документа.
Наложение узора в «Стилях слоя».
Если вы хотите применить узор для любого выбранного слоя, двойным кликом по миниатюре этого слоя откройте окно «Стили слоя» (Layer Style) . Почти в самом низу найдите параметр «Наложение узора» (Pattern Overlay) и активируйте его. Откроется диалоговое окно опции, где вы можете так же, как и в предыдущем примере, выбрать необходимый паттерн и применить его к слою.
Этот способ требует от вас большей гибкости в использовании: вы можете скрывать, отображать, настраивать и удалять узор слоя, не затрагивая сам слой.
Совет: Чтобы отрегулировать положение узора на холсте, в параметре «Наложение узора» активируйте флажок Просмотр (Preview) , а затем поместите курсор мыши на холст и, удерживая ее нажатой, передвигайте ваш паттерн в основном окне программы в любом направлении.
Рисование узором при помощи инструментов «Заливка» (Paint Bucket Tool) и «Узорный штамп» (Pattern Stamp Tool) .
Если вы хотите применить узор, рисуя им по холсту, используйте инструменты Заливка и Узорный штамп. Активируйте их и настройте на применение узоров, а не цвета в верхней панели программы.
Использование инструментов рисования при наложении узора удобно в том случае, если вы применяете узор нерегулярно. Такой способ дает вам больше контроля за процессом, особенно при наличии графического планшета.
Но рисование узором займет у вас значительно больше времени, чем способ наложения узора при помощи команды «Заливка» или «Стилей слоя».
Посмотрите на сводную таблицу преимуществ и недостатков разных способов при наложении узора.
Создание собственного узора в Фотошоп.
Создание своего узора является несложным процессом. Имейте в виду, что создаваемый вами узор должен состоять из фигур только прямоугольной формы. Если вы захотите использовать круг, то программа будет рассматривать эту фигуру, как прямоугольник.
Чтобы создать узор, используйте инструмент «Прямоугольное выделение» (Rectangular Marquee Tool (M)) и выделите область, которую хотите поместить в узор. Затем перейдите во вкладку Редактирование-Определить узор (Edit> Define Pattern) , чтобы определить выделенную область как паттерн и присвойте ему имя в диалоговом окне.
Совет: Многие предпочитают создавать узор для своей работы за пределами рабочего документа. Это хорошая практика. Создавая Новый документ (Ctrl+N) для своего узора, вы тем самым, концентрируетесь на данной работе, не отвлекаясь ни на что более.
Создание и применение диагонального линейного узора.
Давайте попробуем сделать один из моих любимых паттернов в фотошоп: диагональный узор, который был применен для дизайна сайта «Design Instruct».
Создаем новый документ (Ctrl+N) в Фотошоп размером 600х600 рх и разрешением 72 рх/ дюйм c белым фоном.
Активируем инструмент «Горизонтальный текст» (Horizontal Text Tool (T)) и пишем фразу Design Instruct в верхней части холста. Выберите темный цвет для текста (#000000) , чтобы ясно видеть нашу работу. В данном варианте использован шрифт Helvetica Neue Medium размером 30 pt, но можно выбрать любой другой шрифт программы (например, Arial).
Теперь переходим к созданию узора для нашего основного документа. Его мы будем рисовать в отдельном документе Фотошоп
. Создаем новый документ (Ctrl+N)
размером 3х3 рх и разрешением 72 рх/дюйм. Цвет фона Прозрачный (Transparent)
.
При сохранении узора в программе позже будет выбран белый цвет фона по умолчанию.
Так как холст довольно маленького размера, увеличим его инструментом Zoom Tool (Z) (лупа), приблизив. Я увеличил холст до 3200% от основного размера, что является максимальным увеличением.
Теперь будем рисовать белые диагональные линии по направлению из верхнего левого угла к нижнему правому. Для этого активируем инструмент Карандаш (Pencil Tool (B)) .
Установим цвет переднего плана (Foreground) на белый (#ffffff) и настроим размер карандаша на 1 рх с жесткостью (Hardness) 100%. Убедитесь, что опции Непрозрачность (Opacity) и Нажим (Flow) равны 100%.
Я в своем примере специально переключился на другой цвет, чтобы вы могли ясно видеть весь процесс создания узора. Удерживая Shift, нажмите Карандашом (Pencil Tool) в левом верхнем углу холста, а, затем в правом нижнем. Получилось ровное диагональное соединение из квадратов.
Вот как должен выглядеть получившийся узор у вас (я переключился на исходный белый цвет):
После создания диагональной линии, перейдите в Выделение – Все (Select> All (Ctrl+A)) , чтобы выделить весь холст.
Теперь перейдите во вкладку Редактирование-Определить узор (Edit> Define Pattern) и в диалоговом окне присвойте имя вашей линии, т.е введите любое название для вашего узора. После нажмите ОК.
Теперь закройте документ с узором (его не нужно сохранять) и вернитесь в исходный рабочий документ.
Применим наш выполненный узор к документу тремя вышеописанными способами.
Команда «Заливка» (Fill).
Создаем новый слой выше слоя с текстом (Ctrl+Shift+N) . Выделим текст, удерживая Ctrl и кликнув по иконке этого слоя.
Переходим в Редактирование-Выполнить заливку (Shift+F5) . В диалоговом окне в опции Использовать (Use) выбираем Узор (Pattern) , а в опции Заказной узор (Custom Shape) находим наш нарисованный паттерн с диагональными линиями.
Нажимаем Ок, чтобы применить узор с помощью команды Заливка (Fill).
Положительным моментом данной техники является то, что заливка узором находится на отдельном слое, что позволяет добавлять к паттерну разные стили слоя, которые не влияют на текстовой слой под ним. Давайте попробуем так сделать. Уменьшим непрозрачность (Opacity) слоя с узором до 80%.
Совет: Хорошей практикой является использование узора на отдельном от объекта слое. Но, чтобы объект перемещался по холсту вместе с примененным к нему узором, используйте функцию Связать слои (Link Layers) . Иконка этой функции имеет форму скрепки и находится внизу панели слоев. Выделите нужные слои ( Ctrl +клик по миниатюре слоя) и нажмите на значок скрепки, или правой кнопкой мыши кликните по выделенным слоям и выберите опцию - Связать слои.
Применение диагонального узора в «Стилях слоя».
Теперь скройте верхний слой с узором (глазик напротив иконки слоя) или удалите его, перетянув слой на иконку корзины внизу панели слоев.
Дважды щелкните по текстовому слою, чтобы вызвать окно «Стилей слоя» (Layer Style) и выберите параметр «Наложение узора» (Pattern Overlay) . В окне параметра нажмите на стрелку с узором и из набора выберите ваш созданный диагональный паттерн. Включите функцию Предварительного просмотра (Preview) , чтобы контролировать процесс наложения узора и, если необходимо, изменить что-либо.
Вот вкратце разъяснение опций окна «Наложение узора» (Pattern Overlay) :
1. Изменение режима смешивания в узоре (Умножение, Перекрытие, Осветление основы и т.д.)
2. Управление непрозрачностью узора. Чем ниже уровень непрозрачности, тем прозрачнее узор.
3. Окно узора. Открыв его, можно выбрать любой узор для наложения на объект.
4. Создание нового имени для данного узора.
Нажав на окно узора, а затем на стрелку справа, вы можете выбрать функцию из выпадающего меню – Сохранить узор (Save Pattern) и сохранить его под другим именем в наборе. Если вы сделали с узором какие-либо изменения (масштаб, режим смешивания или непрозрачность), то они также будут сохранены вместе с выбранным образцом.
5. Масштаб (Scale) регулирует масштаб и разрешение узора.
6. Связать со слоем (Link with Layer)
При активации данной опции узор будет перемещаться по холсту вместе с объектом, относящимся к нему. Данная опция уже активирована по умолчанию программы.
Наложение узора при помощи инструмента «Узорный штамп» (Pattern Stamp Tool (S)) .
Теперь попробуем использовать в работе наш диагональный узор при помощи «Узорного штампа». По своему стилю данный инструмент похож на использование Кисти (Brush Tool (B)) , только рисуем мы не цветом, а узором по холсту.
Для начала, скройте видимость слой-эффекта «Наложение узора» на текстовом слое или удалите его, нажав правой кнопкой мыши по строке слоя и выбрав опцию – Очистить стили слоя.
В верхнем меню настроек нажмите на окно палитры узоров и найдите наш диагональный узор. Активируйте его и настройте дополнительные параметры: размер кисти штампа, непрозрачность или нажим.
На Новом слое (Ctrl+Shift+N)
начните рисовать поверх текста узором. Вы можете видеть, что я использовал штамп лишь в некоторых местах текста и менял непрозрачность (Opacity)
инструмента для уникального эффекта.
В отличие от предыдущих двух способов наложения узора (Заливки и Стилей слоя) этот прием немного сложнее и требует определенного навыка.
Установка узоров в Фотошоп.
Если вы хотите использовать узоры, скачанные с других сайтов, то загрузить их в программу довольно просто. Перейдите в Редактирование-Управление наборами (Edit> Preset Manager) и в диалоговом окне нажмите на функцию «Загрузить» (Load) справа. Помните, что ваш скачанный узор должен иметь расширение РАТ, чтобы программа установила его. В открывшемся окне загрузки укажите место нахождения вашего файла с узором и нажмите «Загрузить».
Обычно узоры устанавливаются программой в папку по такому пути: Adobe Photoshop > Presets > Patterns .
Вот несколько бесплатных ресурсов, которыми вы можете воспользоваться при поиске нужных узоров:
Создание библиотеки узоров.
Чтобы создать шаблоны узоров в библиотеке программы, перейдите во вкладку Редактирование-Управление наборами (Edit > Preset Manager) . Выберите в списке образцы, которые вы хотите добавить в библиотеку, удерживая Ctrl и делая клик по нужным узорам, выделяя их. Далее нажмите кнопку «Сохранить» (Save Set) . Сохраните набор выбранных узоров в любом месте вашего компьютера.
Теперь этот файл можно установить и на других компьютерах. Успехов в освоении программы!
В прошлых наших материалах мы много рассказывали о красивом праздничном оформлении дизайна сайта в честь Нового года и Рождества. В то же время, чем ближе само событие, тем больше в интернете начинает появляться и соответствующих тематических материалов. Это узоры, кисточки, текстуры, готовые шаблоны, фоны, actions и прочее, и прочее.
Но наше с вами особое внимание сегодня будет приковано к тому, как создать фон или текстуру в виде вязки на спицах или иначе, в виде джемперной вязки, вязки свитеров. Ни для кого не секрет, что вязка с «зимним» рисунком - «бич» новогодних праздников и особенно в западных странах (аналогично тому, как клипарты Санта-Клауса в России используются гораздо чаще, чем Деда Мороза). Поэтому, создавая оформление для распродажи в интернет-магазине, небольшой секции с товарами или для раздела «Наше Новогоднее Предложение » (а может даже просто, меняя дизайн самого обычного сайта компании на новогодне-праздничный), вполне уместно использовать небольшой кусочек такого вот вязаного фона или текстурки. Обычно в виде вязки изображают оленей, снежинки, елочки, угловые орнаменты, точечки, звездочки, буквы и надписи. Иными словами, все то, что легко самостоятельно вывязать спицами и нитками.
Разумеется, что не каждый из вас умеет вообще вязать в реальной жизни. Но это и не проблема. В Photoshop это получится быстро и легко. И да, одновременно с тем как используют обычные графические текстуры для фона, применяют для новогодней тематики и вязаные текстуры.
Особенности создания вязаной текстуры
Создавать вязаную текстуру в Photoshop недолго, но кропотливо для первого раза. Это уже второй-пятый вариант будет по времени осуществляться быстро и незаметно, тем более, если после первого останутся заготовки в виде кистей, текстур, шаблонов.
Кроме того, орнаменты в вязке всегда используются простые, а для веб-дизайна особенно. Разумеется, если необходимо/хочется создать шедевр Айвазовского в виде вязки, то это одно. Можно посидеть и отрисовать кисточками. Но для оформления сайтов такое не нужно. Даже…неуместно. Требуется нечто простое, скромное, несложное визуально, поскольку основной нагрузки все это нести не будет, но именно своей ненавязчивостью придаст праздничное настроение посетителям.
И еще один момент; он больше связан именно с вязанием. Чтобы вывязать рисунок (пусть и новогодний), его размечают строго по клеточкам, ассоциируя каждую петлю с одной клеткой. Поэтому, чтобы и нам в Photoshop нарисовать оленя или снежинку, придется её четко и симметрично рассчитать по клеточкам. На самом деле это несложно и в интернете таких материалов «навалом» и Google приходит на помощь. Тем более, что схемы вышивки крестиком тоже могут подойти, но они мелковаты в деталях.
Создавать красивую вязаную текстуру можно двумя способами: самостоятельно или с помощью готового Actions. Мы рассмотрим два варианта, ибо при самостоятельном создании настроек и коррекций можно производить гораздо больше.
Photoshop проще Illustrator
Достаточно часто вы можете видеть, что создание текстуры осуществляется в Adobe Illustrator. Но мы воспользуемся именно нашим любимым Photoshop и попробуем развеять миф о том, что в этом приложении чего-то нельзя создать!
Создаем новый документ с размерами 50х50 рх с прозрачным фоном. Это будет и наш узор, и наша кисточка. Рисуем фигуру Эллипс по высоте нашего квадратика. Толщину его определите сами, это и отобразит толщину нити. Выделяем фигуру ctrl+ T и поворачиваем ее так, чтобы нижний конец был в середине квадрата, а верхний смотрел в угол.
Копируем слой, зажимая Alt+ЛКМ и разворачиваем второй эллипс по горизонтали. Совмещаем две фигуры, чтобы их нижние концы сошлись, объединяем слои и сохраняем как кисть и как узор. Меню Редактирование -> Определить кисть и Определить узор.
Создаем новый документ. Размер его зависит от вашего узора, который вы будете размножать. Если это часть орнамента, посчитайте, сколько петелек в нем. А одна петля у нас 50 рх. Мы выбрали 1000х600, прозрачный.
Переходим в Редактирование -> Настройки -> Направляющие, сетки и устанавливаем линию сетки каждые 50 пикселей, то есть по ширине нашей петли. Внутреннее деление на свое усмотрение. Затем Просмотр - > Показать -> Сетку.
Казалось бы, что проще всего нажать заливку узором и затем раскрасить полосами и блоками. Но при этом узор будет выглядеть, как обычная «елочка». Поэтому проще сейчас выбрать кисточку с нашей петлей, определить цвет и на новом слое нарисовать петлю. Теперь переходим к инструменту Перемещение, зажимаем ALT + ЛКМ и копируем слой вправо . Таким образом, по горизонтали мы создаем полоску петелек.
Важно: для удобства ровности копирования увеличьте масштаб изображения, а также включите привязку к направляющим, сетке и пр. У вас будут показываться и значения смещения по осям Х и Y, а, значит, выровнять будет гораздо проще.
Создали полоску. Слоев много. Объединяем их. И аналогичным образом начинаем копировать одной большой полосой вниз. НО. Если у вас дома есть вязаные вещи и вы внимательно посмотрите на вязку, то петельки по вертикали расположены очень близко. То есть четко по вертикали в сетке в Photoshop выравнивать не стоит. Наоборот, подберите то значение (у нас смещение было 34 рх по Y), что более красиво и придерживайтесь его.
Эти слои тоже можно объединить, чтобы было проще. Фон залить красным, голубым или любым иным цветом.
Теперь приступим к самому простому орнаменту. Создаем новый слой. И вообще, все рисунки на фоне петель рисуем на новых слоях. Поскольку рождественские рисунки обычно вывязываются белым цветом на ярком контрастном фоне, то выбираем нашу кисточку. Размер может быть на пару пикселей больше, чем оригинальный размер в 50рх. Причина в том, что нитки, бывает, тоже используют чуть разные. А такой вариант добавит узору реалистичности. И рисуем столбик петельками поверх наших фоновых петелек. Поверьте, считать и фантазировать по уже заготовленному фону гораздо проще, чем сразу кисточкой рисовать, меняя цвета. Чуть ниже еще столбик, и еще. Затем, готовую часть орнамента можно скопировать на новый слой. И вот что получилось.
Разумеется, что 50 px кисточка может быть и крупной, поэтому смотрите по сетке (настройте её) и поэкспериментируйте с разными вариациями. Елочка, надписи, олени и другие украшательства рисуются точно также. Более того, можно создать заготовки фона или орнаментов.
Таким образом, один раз подобрав рисунок и подготовив базовые элементы, можно быстро создать вязаную текстуру и написать «Скидка 50% на все » и елочку со снежинкой в уголочке. А уже поверх петель разместить изображения флакончиков, баночек и прочего. Вариаций много и они разные.
Action Ugly Sweater
Второй, возможно, более простой способ создания вязаного рисунка - это использование actions для Photoshop. Ugly Sweater в своем составе имеет сам actions, а также узор и стиль.
Запускаем английскую версию Photoshop и последовательно устанавливаем каждый из трех файлов. Как это делается можно прочитать… да хотя бы и в последнем материале по actions 2017 .
Особенность данного дополнения в том, что перевести в вязаную текстуру можно практически любое изображение. То есть, совершенно неважно насколько оно художественное или схематичное, главное - чтобы оно было четким. Кроме этого, перед началом самого Actions вы можете выбрать размер петель.
Установили все файлы из архива, открываем изображение. Мы подобрали самые простые, но праздничные элементы и попробуем их «связать».
Мы также выбрали размер петель 50px (для сравнения) и нажимаем Play. Рано или поздно появится окно фильтра Постеризация . Чем больше вы укажите значение, тем плавнее и градиентнее будут переданы цветовые оттенки. В реальной вязке оттенки можно передавать, но сложно, поэтому цвета обычно четкие. Мы выберем нечто среднее - 4.
Следующий диалог ориентирован на работу с количеством петель в целом. Либо петель будет густо и много, либо мало.
И вот что получилось. Не слишком понятно, что изображено, но если включить фоновый слой, то видно, что плотность петель покрыла все изображение.
Но обратите внимание, если выбрать размер петли 30 пикселей , то рисунок заметнее красивее. Таким образом, тот же случай, что мы разбирали в первом варианте. От размера петли зависит целостность композиции. Более того, если в рисунке используются мелкие детали, то вывязывать их крупными петлями бессмысленно - просто не получится.
Или олень, вот, на белом фоне. Белый фон превратился в вязку и от обилия белого попросту режет глаза. Здесь вариант замены цвета не подходит, придется только вручную выполнять заливку фоновых петель. Поэтому старайтесь находить изображения на прозрачном фоне.
Кроме того, во время выбора разброса цветов и количества петель вы будете видеть изменения рисунка во время продвижения ползунка настроек, а значит, подобрать нужный вариант не составит труда.
Аналогично обрабатываются и надписи, но тоже нужно иметь в виду, что если шрифт маленький, то и петельки должны выбираться маленькие.
Наборы узоров
Но если самим создавать рисунки и вязки нет желания/фантазии, то, разумеется, в интернете можно найти и готовые варианты узоров, изображений, орнаментов. Например, на одном только freepik можно найти как просто подборку рождественских узоров, так и фоновых текстур. И вот какие:
Как видно, созданы они по принципу отрисовки общего фона петлями, а затем прокраски нужных петель строго по схеме: одна клетка = одна петля .
Заключение
Разумеется, в интернете можно подобрать и еще большее количество готовых текстур с рождественско-новогодней тематикой, и actions для Photoshop, и даже примеры того, как самим отрисовать орнаменты. Но мы остановились на самых простых решениях и вариантах, которые еще можно успеть использовать для работы над новогодним дизайном какого-либо сайта.
И да, какими бы насыщенными рисунки не казались, это вовсе не значит, что для дизайна сайта нужно использовать их в неизменном виде. Порой достаточно пары небольших снежинок или елочки, надписи или достаточно ограничиться только вязаным фоном без орнамента.
Так или иначе, но создание вязаной текстуры - отличный вариант сделать уникальный дизайн проекта. Никто не говорит о том, чтобы делать весь фон страницы (во весь экран монитора) в петельках и орнаментах. Но украсить какие-то отдельные элементы - это просто и красиво. Кроме того, такие текстуры придадут проекту некоторую изюминку и привлекут посетителей «домашней теплотой» к сайту, к контенту. Представьте, если интернет-магазин продает одежду. Почему бы не оформить раздел свитеров, шапок или шарфиков именно в вязаном стиле? Или объявление о тематической распродаже?
Скажите, что: «кропотливо и сложно. Хочется быстро: раз-два и быстренько отдали на верстку или сами сверстали ». Но такого не бывает или бывает редко. Чтобы получился отличный дизайн, нужно еще поработать и над визуальной составляющей, изображениями. Да к тому же, если не на этот год, то к следующему году можно успеть воплотить идеи орнаментов и неторопливо нарисовать что-то необычное и красивое. Ибо вязка спицами актуальна во все времена, вне зависимости от стилей, трендов, «фишек» и веяний в дизайне. Вечность в классике.
С наступающим вас, читатели, годом рыжего песика!
Adobe Photoshop имеет множество интересных и полезных инструментов. Некоторые могут существенно облегчить жизнь веб-дизайнеру. Потому как экономят ваше драгоценное время. Одним из таких инструментов является узор. Незаменимая штука при создании фона дня сайта или баннера. Откровенно говоря, используется этот инструмент нередко. Порой проще создать нужный узор, нежели искать его в интернете.
Давайте попробуем создать яркую полосатую текстуру при помощи инструмента «узор» самостоятельно. Для изучения этого урока потребуются простейшие инструменты.
Для начала создаем новый документ размером 120 на 60 пикселей.
Теперь выбираем инструмент «прямоугольник».
И на нашем документе рисуем прямоугольник нужного цвета. У меня будет # bbbed1.
Не забывайте, что узор выстроится из полосок. Их ширина – ширина ваших прямоугольников. Потому, рассчитывайте сразу.
И рядышком выставляю еще несколько прямоугольников цветов: # dce2ee, #e2dcea, #6c95c8, # 2b579e.
Вот такая симпатичная картинка у меня получилась. Ей-то и уготована учесть стать будущим узором для фона.
Сводим слои.
И во вкладке «редактирование» ищем команду «определить узор».
Даем ему поэтичное и уникальное имя.
И все! Готово! Мы выяснили, как сделать узор. Теперь нам остается только узнать, как наложить его и проверить все это в действии.
Создаем новый документ. А на нем любую геометрическую фигуру. Она должна находиться на новом слое. Это важно!
У меня это выглядит так.
И в окне слоев ищем «параметры наложения. Для этого кликаем по слою с прямоугольников левой клавишей мыши.
Наш узор найдется именно здесь. Выбираем его и применяем.
Вот такой узор мы создали. На мой взгляд, получилось просто волшебно.
Думаю, вы уже догадались, что вы можете создавать разные узоры множеством способов. Все, что придет в голову. Это могут быть точки, линии, кружки, звезды. Любые геометрические фигуры могут стать вашей заготовкой. Более того, можно особо не мучиться и взять кусочек готовой картинки. Допустим, какое-нибудь дерево или листочек. Определяем картинку как узор и вуаля! Мы можем замостить ею все, что душе угодно. И не придется страдать над выставлением линеек, наложением цветов и сдвиганием фигур. Казалось бы, прием элементарный, а экономия времени колоссальная.
Чтобы загрузить библиотеку, которые поставляются в комплекте с Photoshop, нажмите на иконки шестерёнки (треугольника в ранних версиях) справа, Это откроет Вам меню предустановленных наборов:
Выберите один из наборов из раздела, который я обвёл красной рамкой, например, "Скалы" (Rock Patterns).
При выборе шаблона для загрузки, вам будет задан вопрос, хотите ли Вы заменить существующие модели, или добавить к ним. Нажмите на кнопку "Добавить" (Append):
Это действие добавит набор к текущим образцам вместо их замены. Кроме того, для удобства выбора, можете увеличить миниатюры образцов, кликнув по пункту "Большие миниатюры" (Large Thumbnail):
Применение узоров Photoshop
Теперь мы можем использовать узоры из набора "Скалы". Давайте рассмотрим способы их применения.
Инструмент "Заливка" (Fill, Shift+F5): заливка узором выделенной области
Самый простой способ применения узора - это выделить область, которую необходимо заполнить вашим рисунком, а затем с помощью команды Редактирование --> Выполнить заливку (Edit --> Fill) залить выделение.
Например, вы можете использовать инструмент "Прямоугольная область" (Rectangular Marquee Tool), чтобы создать выделение где-либо на холсте, пройти о вкладке Редактирование --> Выполнить заливку, откроется диалоговое окно "Заполнить" (Fill), в окне в разделе "Использовать" (Use) выбираете пункт "Регулярный" (Pattern), затем кликаете по цветному квадратику, выбираете узор из тех, которые мы загрузили в менеджере, нажимаете ОК:
Команда "Заливка" (Fill) является самым простым способом нанесения узора на весь холст или его часть, кроме того, Вы можете использовать её на отдельном слое, а это означает, что вы можете вносить изменения в этот слое, не затрагивая другие слои.
Стиль слоя "Наложение узора" (Pattern Overlay)
Подробно работа с этим стилем слоя описывается .
Если Вы хотите применить узор ко всем непрозрачным пикселям слоя, воспользуйтесь этим способом.
Откройте диалоговое окно этого стиля слоя, выберите узор и примените стиль, подробнее читайте :
Этот метод даёт больше гибкости в настройках, вы можете легко скрывать, удалять, масштабировать, менять режим наложения , регулировать непрозрачность и т.д.
Совет: чтобы отрегулировать положение вашего узора на холсте, при открытом диалоговом окне редактирования стиля слоя наведите курсор на документ, нажмите и удерживайте левую клавишу мыши и перетаскивайте узор по холсту.
Инструменты рисования
Кроме этого, узоры на холст можно накладывать с помощью инструментов "Узорный штамп" (Pattern Stamp Tool) и "Заливка" (Paint Bucket Tool).
Данные инструменты следует применять в том случае, если вы хотите нанести узор на определённые области.
Инструменты рисования также вам больше контроля, что особенно проявляется при использовании графического планшета.
Тем не менее, работа этими инструментами займет гораздо больше времени, чем применения стиля слоя или заливки. Кроме того, при использовании "Узорного штампа" результаты могут быть непредсказуемыми.
Сводная таблица: применение узоров Photoshop:
| Способ нанесения | Преимущества | Недостатки |
|
Инструмент "Заливка" (Shift+F5) |
|
|
|
Режим наложения "Добавление узора" (Pattern Overlay) |
|
|
| Инструменты рисования |
|
|
Как создать собственный пользовательский узор Photoshop
Создать собственный узор совсем не сложно, если знаешь базовые принципы.
Для начала, нужно понять, что основа узора - это всегда прямоугольник. Даже если это круг на прозрачном фоне, всё-равно картинка будет рассматриваться как прямоугольник.
За основу для узора будет взят не только чёрный круг, но и весь холст, иными словами, картинка будет рассмотрена, как прямоугольник
Я продемонстрирую создание узора на примере. Создаю документ размером 40 на 40 пикселей и рисую в центре чёрный круг диаметром примерно 30 пикселей:
Чтобы создать узор на основе этого изображения, надо пройти по вкладке Редактирование --> Определить узор (Edit --> Define Pattern), после чего откроется диалоговое окно, где нужно задать имя:
Всё, узор сохранён в стеке. Если мы сейчас откроем менеджер наборов, мы его увидим:
Далее создадим документ, к примеру, 640 на 480 пикселей с белым фоном и нанесём на него это узор с помощью инструмента "Заливка". Нажимаем Ctrl+F5, открывается диалоговое окно, где выбираем "Регулярный" (Pattern), а затем наш узор:
Нажимаем ОК. Вот, что получилось:
Как видите, документ залит повторяющимися кружками, а между кружками имеется расстояние, как я и писал выше. Но это я сделал для примера, с помощью такого узора ничего интересного не сваять.
Создание собственного узора
Давайте сделаем собственный диагональный узор, с помощью которого придадим оригинальный дизайн логотипу сайта. Вот какой логотип получился у меня:
Но, т.к. материал получится очень длинным, я вынес урок по созданию собственного узора и применению его для создания логотипа сайта в отдельный материал .
Сохранение собственного узора
Сейчас наш новый узор находится в стеке программы Photoshop, если мы удалим его из стека, мы удалим его насовсем. Целесообразно будет сохранить узор на компьютере для дальнейшего по электронной почте, опубликовать в интернете и т.п.
Сделать это очень просто. Надо открыть диалоговое окно менеджера управления наборами и кликнуть мышкой по нужному узору. Если Вам необходимо сохранить несколько узоров, зажмите клавишу Ctrl и кликните по нужным. Вокруг выбранных узоров появится тонкая синяя рамка. При этом станет активной кнопка "Сохранить..." (Save Set...). Вам осталось лишь нажать на неё и выбрать папку для сохранения на Вашем компьютере.
Загрузка узоров в Photoshop
Для начала надо скачать набор узоров (файл.pat) и сохранить его на компьютере. Затем заходим в менеджер узоров и нажимаем кнопку "Загрузить" (Load):
Откроется стандартное окно Windows`а для выбора папки, выбираете папку, где сохранили набор и дважды кликаете по сохранённому файлу.
Откроется окно с вопросом, хотите ли Вы заменить набор или добавить к имеющемуся в стеке, или заменить (ОК или Append), выбираете:
Узоры из набора добавятся в стек.
Как вы знаете, существуют различные виды орнаментов. Они бывают растительными, предметными, пейзажными, астральными, цветочными, фантастическими, каллиграфическими и др. Все зависит от того, из каких элементов выполняется узор. Геометрический состоит из простых фигур — круга, квадрата, прямоугольников, треугольников. Это самый распространенный и легкий для построения вариант. Чтобы его сделать, достаточно использовать трафареты или и понимать закономерность построения.
Геометрические орнаменты и узоры: виды
Расположение и характер композиции всегда связаны с формой предмета, на который наносится рисунок. По этому признаку существуют такие типы орнаментов из фигур:
- ленточный;
- сетчатый;
- центрический или розеточный.
Первый строится в виде прямой или криволинейной полосы, идущей по центру или краю изделия. Так оформляют фризы, бордюры. Во втором случае вся декорируемая поверхность заполняется рисунком. У третьего варианта отдельные элементы располагаются внутри квадрата, круга, ромба, прямоугольника, которые находятся в центре украшаемого предмета.
Области применения орнамента
Геометрические применялись с древних времен. Это был самый легкий способ украшения кувшина или горшка. Использовались обычные палочки, которыми делались круглые углубления в поверхности, линии.
С развитием технологий геометрические орнаменты начали применяться в архитектуре, одежде. Сейчас их часто используют для украшения текстильной продукции, платков, постельного белья, ковров, а также в полиграфии при печати книг, обоев, для декорирования мебели, отделочных материалов (керамической и потолочной плитки, ламината, линолеума и.т.д).
Важные понятия
Любой узор, геометрический, растительный, имеет определенный мотив и раппорт. Нужно четко понимать, что значат оба слова. Первое — это главный элемент орнамента. Он бывает простой, состоящий из одной формы с единым контуром, или сложный, который предполагает наличие нескольких составных частей.
В качестве мотива может выступать стилизованный цветок, лист, звезда, разные виды многоугольников, звезда, состоящая из треугольников. Раппорт представляет собой совокупность мотива или их группы и расстояния до соседнего.
Приемы построения орнамента
Каждый узор, геометрический, растительный или любой другой, представляет собой определенный ритм, то есть повторение, чередование определенных элементов. В качестве мотива можно взять равнобедренный треугольник. Многократно повторите его по горизонтали без промежутков, тогда получатся своеобразные зубчики, на одинаковом расстоянии или чередуя длину пространства между элементами в определенной комбинации. Вид ленточного орнамента будет меняться. То же самое можно сделать по вертикали.
Чтобы создать сетчатый узор, достаточно полученную на первом этапе строчку из треугольников повторить несколько раз в столбик. Каждый модуль может находиться как один под другим, так и со смещением. Два разных горизонтальных ряда чередуются по определенной закономерности, через один, два и т.д
Оригинальные декоры получаются при комбинации различных видов отзеркаливания. По горизонтали или вертикали отражаются строчки, столбцы или только их части в определенной комбинации.
Центрические геометрические орнаменты и узоры получить также легко. Достаточно выбрать точку вращения на одном из концов элемента, внутри него или за пределами и вокруг нее сдвигать треугольник на определенное количество градусов.
Как сделать орнамент новичку
Простые геометрические узоры выполнить очень легко. За основу берется набор фигур, скомпонованных, например, в квадрате. Этот модуль повторяется многократно по любой из приведенных выше закономерностей.
Самый простой и увлекательный способ разработать узор, геометрический, растительный или любой другой — это использовать графический редактор на компьютере. Подойдет программа, работающая с векторной графикой, под которой понимаются как раз простые геометрические формы, имеющие контур и заливку. Такие узоры можно получить в редакторе или Adobe Illustrator.
Алгоритм работы будет следующий:
- Из геометрических фигур составляете базовый элемент.
- Выполняете операцию группировки частей.
- Копируете модуль.
- Вставляете нужное количество раз.
- Применяете функцию распределения всех выделенных фрагментов на определенном расстоянии. Строка готова.
- Группируете ее так же, как и сам модуль вначале.
- Пробуете различные комбинации отражений, повторений. Можно даже сделать вращение по окружности с разным углом поворота.
Комбинаций будет получаться множество. Выбирайте лучшие, распечатывайте или используйте в любых других целях. Кстати, можно воспользоваться таким изображением в качестве трафарета: обвести получившийся узор через стекло на бумагу, а дальше использовать для росписи ткани, декора открыток ручной работы, вышивки, витража, резьбы и любой другой техники художественного мастерства.
Построение по клеткам
Узоры из легко сделать по сетке. Можно воспользоваться обычным тетрадным листом или предварительно расчертить тонкими линиями ячейки любого размера на листе. Уже по ним обводятся контуры или зарисовываются цветом фигуры. Величину частей и промежутков легко определить, посчитав клеточки.
Итак, вы увидели, как строятся геометрические орнаменты и узоры. Вы можете выбрать любой из приведенных способов и попробовать самостоятельно выполнить какой-то вариант. Если делать это задание на компьютере, вы получите огромное количество вариантов. Это занятие очень увлекает, так как заранее трудно даже предположить, какой в итоге получится сложный декор из простого элемента.