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

1. Шум и текстуры
2. 1. Растровый слой с шумом
3. 2. Стиль внутреннего свечения
4. 3. Смарт-объект с фильтром
5. 4. Стиль наложения рисунка
6. Какой метод лучше?
7. Скругленные прямоугольники
8. 1. Rounded Rectangle Vector Tool
9. 2. Размытие
10. 3. Круги
11. 4-тактный
12. Какой метод лучше?
13. Градиенты
14. Линейные градиенты
15. Отраженные градиенты
16. Радиальные градиенты
17. Угловые градиенты
18. Градиенты на градиенты
19. Дизеринг - это все
20. Градиентные карты
21. Немного одержим?

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

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

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

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

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

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

1. Растровый слой с шумом

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

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

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

2. Стиль внутреннего свечения

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

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

• Слои: 1
• Весы: Да, текстура будет переделана автоматически
• Работает со стилями слоев Цвет и Градиент: Да
• Работает с любой текстурой: нет

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

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

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

• Слои: 2
• Весы: Да, текстура будет переделана автоматически
• Работает со стилями слоев Цвет и Градиент: Да
• Работает с любой текстурой: нет

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

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

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

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

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

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

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

Скачать PSD (ZIP)

Скругленные прямоугольники

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

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

1. Rounded Rectangle Vector Tool

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

2. Размытие

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

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

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

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

3. Круги

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

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

4-тактный

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

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

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

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

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

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

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

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

Градиенты

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Градиентные карты

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

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

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

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

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

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

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

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

(ал), (дм)

Похожие

Комментарии