Учебник по повторению узорной заливки в Adobe Photoshop

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

1

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

2

Нажмите «Ctrl-Alt-I» чтобы открыть диалоговое окно «Размер изображения», запишите размеры изображения в пикселях и нажмите «Отмена».

3

Щелкните «Фильтр», наведите указатель мыши на «Другое» и выберите «Смещение».

4

Введите число, равное половине ширины изображения в текстовом поле «По горизонтали», и оставьте значение в поле «По вертикали» равным «0». Убедитесь, что выбран параметр «Обтекание» и нажмите «ОК». Это по сути разрезает ваше изображение пополам по вертикали и меняет две половины вокруг — то, что было слева и справа, теперь находится в центре и наоборот.

5

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

6

Нажмите «Фильтр», наведите курсор на «Другое» и выберите «Смещение». Введите «0» в текстовое поле «По горизонтали», а затем введите число, равное половине высоты изображения в текстовом поле «По вертикали». Щелкните «ОК». При этом процесс нарезки и перестановки повторяется, но происходит это по горизонтали, а не по вертикали.

7

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

8

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

9

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

10

Нажмите «Редактировать», выберите «Определить шаблон», введите имя для своего шаблона и нажмите «ОК. » Теперь узор сохранен как образец узора в Photoshop.

11

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

12

Нажмите «Shift-F5» «, чтобы открыть диалоговое окно» Заливка «. Выберите «Узор» в раскрывающемся меню «Использовать», а затем выберите новый узор из раскрывающегося меню «Пользовательский узор». Нажмите «ОК», чтобы заполнить весь документ новым узором.

13

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

14

Повторите шаги с 10 по 13, чтобы проверить свой шаблон, пока не обнаружите больше проблем. Если вам нужно было исправить шаблон, нажмите «Изменить», наведите указатель мыши на «Presets» и выберите «Preset Manager». Выберите «Узоры» из раскрывающегося меню «Предустановки». Щелкните правой кнопкой мыши все версии узора, кроме последней, и выберите «Удалить», чтобы удалить их из образцов узора в Photoshop.

15

Вернитесь к готовому изображению узора и сохраните его в желаемом формате.



Освоение Photoshop: шум, текстуры, градиенты и скругленные прямоугольники

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

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

Вы можете ознакомиться со следующими связанными публикациями:

  • Методы создания пользовательских текстур в Photoshop
  • Почему и как используются текстуры в веб-дизайне
  • Совершенство пикселей при повороте, вставке и смещении в Photoshop

Шум и текстуры

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

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

1. Слой растрового изображения с шумом

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

Использование большого количества шума, установка режима наложения слоя на Яркость и уменьшение непрозрачности даст максимальный контроль над шумом с наименьшим воздействием на нижележащие слои. Параметр шума 48% дает широкий динамический диапазон без ограничения шума. (Обрезка приводит к более высокому контрасту, что может быть нежелательно.)

  • Слои: 2
  • Масштаб : Нет, текстуру придется воссоздавать, если документ масштабируется
  • Работает со стилями слоя Color и Gradient: Да
  • Работает с любой текстурой: Да

2. Стиль слоя Inner Glow

Добавление стиля слоя Inner Glow с источником, установленным в центр, и размером 0 позволит вам использовать ползунок шума для добавления текстуры к любому слою. Это хорошее решение, если вы еще не используете стиль слоя Glow для чего-то еще. Шум добавляется над стилями слоя «Цвет», «Градиент» и «Узор», и это здорово.

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

  • Слои: 1
  • Масштаб: Да, текстура будет переделана автоматически
  • Работает со стилями слоя Color и Gradient: Да
  • Работает с любой текстурой: Нет

3. Смарт-объект с фильтром

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

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

  • Слои: 2
  • Масштаб: Да, текстура будет переделан автоматически
  • Работает со стилями слоя Color и Gradient: Да
  • Работает с любой текстурой: Нет

4. Стиль слоя наложения узора

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

Стиль слоя» Узор «совмещается под стилями» Цвет «и» Градиент «, что разрушает в остальном идеальный метод шума и текстуры. Однако вы можете создать второй слой, который просто содержит текстуру, если вам нужно, или начать со слоя градиентной заливки, минуя ограничение.

  • Слои: 1
  • Масштаб: Да, но вам нужно будет изменить масштаб стиля слоя на 100% после масштабирования
  • Работает со стилями слоя Color и Gradient: Нет, узор отображается под ним
  • Работает с любой текстурой: Да

Какой метод лучше всего?

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

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

Скачать PSD (.zip)

Прямоугольники со скругленными углами

Прямоугольники со скругленными углами, или «скругленные прямоугольники», как их нежно называет QuickDraw, являются стандартным атрибутом для веб-дизайнеров и разработчиков интерфейсов. Они настолько распространены, что веб-страницы или приложения редко содержат округление или два. К сожалению, закругленные прямоугольники с блокировкой пикселей на самом деле довольно сложно нарисовать в Photoshop. (Под блокировкой пикселей я подразумеваю, что каждый край попадает на точную границу пикселя, создавая максимально резкий объект. )

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

1. Инструмент вектора скругленного прямоугольника

Инструмент вектора скругленного прямоугольника Photoshop является идеальным кандидатом для этой задачи. В результате всегда получаются идеальные круглые выпрямления. Радиус угла можно изменить во время или после рисования формы (Окно> Свойства). С положительной стороны, сохранение объектов в виде векторов означает, что вы сможете изменять размер документа, а углы будут использовать любое дополнительное разрешение в полной мере. Однако есть одно небольшое предостережение: если вы измените размер, вам придется делать это как точное кратное, иначе вы рискуете получить нечеткие края без блокировки пикселей.

2. Размытие

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

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

  1. Создайте новый слой.
  2. Нарисуйте прямоугольное выделение.
  3. Введите быструю маску ( Q ).
  4. Размытие по Гауссу на половину радиуса, который вы ‘ Мне нравится закругленные углы. (Например, для радиуса 10 пикселей потребуется размытие в 5 пикселей.)
  5. Применить уровни ( Command + L ) и использовать около 118 для черная точка и 137 для белой точки на входных уровнях.
  6. Выйти из быстрой маски ( Q ).
  7. Заполнить выделение.

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

3. Круги

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

  1. Создайте новый слой.
  2. Сделайте круговое выделение, которое в два раза больше, чем желаемый радиус (например, для радиуса 10 пикселей потребуется круг размером 20 x 20 пикселей).
  3. Заполните выделение.
  4. Переместите выделение вправо. Это можно сделать быстро, удерживая клавишу Shift и несколько раз нажав клавишу со стрелкой вправо.
  5. Заполните выделение.
  6. Переместите выделение вниз.
  7. Заполните выделение.
  8. Переместите выделение влево.
  9. Заполните выделение.
  10. Создайте прямоугольную область выделения, охватывающую весь вертикальный промежуток круглого прямоугольника, но начинающуюся и заканчивающуюся на полпути через круги на концах.
  11. Заполните выделение.
  12. Создайте прямоугольную область выделения, охватывающую весь горизонтальный промежуток круглого прямоугольника, но начинающуюся и заканчивающуюся на полпути через круги на концах.
  13. Заполните выделение.

4. Обводка

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

  1. Создайте новый слой.
  2. Нарисуйте прямоугольное выделение, которое является меньше требуемой области (меньше на двойной радиус, если хотите быть точным).
  3. Заполните выделение.
  4. Добавьте обводку в качестве стиля слоя толщиной с желаемый угловой радиус.

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

  1. Создайте новый слой.
  2. В палитре «Слои» выберите новый слой и предыдущий слой.
  3. Объедините слои ( Command + E ).

Сглаживание можно автоматизировать с помощью экшена Photoshop. Его также можно настроить как функциональную клавишу для дальнейшего ускорения.

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

Какой метод лучше всего?

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

Градиенты

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

Линейные градиенты

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

Отраженные градиенты

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

Радиальные градиенты

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

Угловые градиенты

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

Градиенты на градиентах

Все, чем стоит заняться, стоит переусердствовать, верно? Комбинирование слоя градиента со стилем слоя градиента позволяет накладывать два разных градиента, давая более сложные и — вот что хорошо — полностью динамические результаты. Чтобы объединить градиенты, вам нужно установить режим наложения для стиля градиентного слоя. В приведенных ниже примерах я использовал либо Screen (подходит для осветления), либо Multiply (подходит для затемнения).

Дизеринг — это все

Добавление дизеринга к градиенту дает более плавные результаты. Градиенты без размытия часто содержат видимые полосы. Дизеринг еще более важен, если ваши работы просматриваются на более дешевых 6-битных ЖК-дисплеях TN и некоторых типах дисплеев, которые имеют тенденцию усиливать проблемы постеризации.

Если вы не видите разницы, вот экстремальный и совершенно нереалистичный пример градиентного дизеринга в действии:

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

Обратите внимание, что стили слоя градиента нельзя смешивать, а градиенты в размещенных объектах (например, материалах, которые вы вставили из Illustrator) не размываются.

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

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

Карты градиентов

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

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

Изображение ниже было использовано в плакате для школы плавания Kingswim:


С картой градиента. Большой вид

Без карты градиента все выглядит иначе. Он состоит примерно из семи фотографий; Мальчик и фон были сняты на черно-белую пленку с намеренно низким контрастом, чтобы зерно было более заметным, когда контраст был увеличен картой градиента. Карта градиента также скрывает несоответствие цветов при наложении.


Градиентная карта отключена. Большой вид

Немного одержим?

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

(al), ( dm)

Оцените статью
clickpad.ru
Добавить комментарий