Градиенты для фотошопа: Скачать бесплатно градиенты для Фотошопа

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

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

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

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

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

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

1.

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

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

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

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

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

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

• Слои: 1
• Масштаб: Да, текстура будет переделана автоматически
• Работает со стилями слоя Цвет и Градиент: Да текстура: №

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

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

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

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

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

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

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

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

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

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

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

Загрузите 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×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 (хорошо для затемнения).

Дизеринг решает все

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

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

Обеспечить сглаживание градиентов очень просто: просто установите соответствующий флажок в Photoshop.

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

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

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

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

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

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

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

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

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

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

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

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