Градиент: как создать самому, установить готовый, тонировка с помощью градиента | Урок | Фото, видео, оптика
Градиент — это заливка, когда один цвет плавно переходит в другой. Например, черный превращается в белый постепенно, через оттенки серого. Иногда градиент — это больше, чем два цвета.
В обработке фотографий градиенты часто используют для тонирования. Представьте: можно наложить не один цвет на всю картинку, а совместить несколько вместе! Или можно пойти дальше: тени затонировать в один цвет, а света — в другой.
Мы расскажем, как создавать градиенты самому и загружать скачанные, чтобы за пару секунд создавать эффектные тонировки и экспериментировать с цветом.
Градиенты открывает огромные возможности для экспериментов, позволяя добавлять в фотографию множество оттенков / Фото: Елизавета Чечевица
Где найти градиент в Photoshop?
Градиенты в Photoshop можно найти в:
1. Инструмент Градиент / Gradient на панели инструментов слева.
Этот инструмент позволяет залить градиентом слой, на котором вы находитесь.
Если не получается найти Градиент на панели слева, воспользуйтесь горячей клавишей — G, чтобы быстро вызвать инструмент / Иллюстрация: Елизавета Чечевица, Фотосклад.Эксперт
Его используют:
- накладывая поверх фотографии для тонировки;
- накладывая под объектом, чтобы получить фон-градиент, и на объекты, если вы дизайнер, художник и т.д.
2. Корректирующий слой Карта градиентов / Gradien Map. Он находится в чёрно-белом кружочке палитры Слои/Layers.
Этот слой тонирует все света, тени и средние тона в цвета градиента. Например, жёлто-красный градиент. Все темные оттенки будут окрашиваться в красный, светлые и белые — в жёлтый, а средние тона в оттенки оранжевого.
Карту градиентов используют, чтобы быстро затонировать фотографию / Иллюстрация: Елизавета Чечевица, Фотосклад.Эксперт
Как сделать градиент в Photoshop?
В программе есть предустановленные градиенты от разработчиков.
Это что-то вроде «пресетов» — готовые решения, чтобы вы не тратили время. Их рассортировали по цветам и разбили по папкам, чтобы пользователю было проще выбирать. Но, если ни одно из решений вам не нравится, все кажутся скучными, не отвечют вашей идее, ниже мы расскажем, как создать градиент в Photoshop и сохранить свой собственный градиент.
Посмотреть готовые градиенты, если нажать на выделенные оранжевыми квадратиками стрелочки в инструменте Градиент или Карта градиентов / Иллюстрация: Елизавета Чечевица, Фотосклад.Эксперт
1. Откройте инструмент Градиент или корректирующий слой Карта градиентов.
2. Вы увидите полоску градиента. Кликните по ней левой кнопкой мыши.
Нажать нужно на одну из выделенных оранжевых полосок / Иллюстрация: Елизавета Чечевица, Фотосклад.Эксперт
3. Откроется окно с настройками градиента. Чтобы поменять один из цветов градиента, кликните левой кнопкой мыши по маркеру снизу и нажмите на окошко Цвет / Color.
Принцип работы градиента в Карте градиентов таков: цвет слева перекрашивает в себя тёмные пиксели, а цвет справа — светлые. Все остальные пиксели будут окрашиваться в те цвета, которые будут получаться при переходе цвета из одного в другой.
Когда вы нажмете на окошко Цвет, вам откроется палитра со всем многообразием цветов. Когда выберете подходящий, нажмите Ок / Иллюстрация: Елизавета Чечевица, Фотосклад.Эксперт
Таким же образом нажмите на маркер внизу справа, кликните левой кнопкой мыши по окошку Цвет и задайте второй цвет.
Готово! Вы создали градиент, где один цвет будет плавно перетекать в другой. Если вам этого достаточно, нажимайте Ок и применяйте градиент. Если же вам нужно добавить в градиент больше двух цветов и сохранить его в свой набор, читайте дальше.
4. Наведите мышку на пространство между маркерами внизу. Когда курсор превратится в сжатый кулак с вытянутым указательным пальцем, кликните левой кнопкой мыши.
У вас появится третий маркер, который также можно затонировать в любой цвет. Для этого опять нажмите на Цвет и задайте нужный оттенок.
Примерная область, куда нужно кликать, чтобы появился новый маркер. Таких маркеров можно сделать бесконечное количество, чтобы создавать сложные градиент из множества цветов / Иллюстрация: Елизавета Чечевица, Фотосклад.Эксперт
5. Чтобы сохранить созданный градиент, нажмите кнопку Новый / New. Ваш градиент появится внизу списка под папками.
Сохранять и создавать свою коллекцию градиентов удобно и нужно, если вы хотите наложить на несколько фотографий одну и ту же тонировку / Иллюстрация: Елизавета Чечевица, Фотосклад.Эксперт
Как установить градиент в Photoshop 2022?
Если предложенные разработчиками Adobe варианты вам не нравится, вдохновение покинуло и хочется свежих идей со стороны, вы можете скачать из интернета и установить себе любые градиенты.
1. Скачайте понравившийся градиент или набор градиентов. Обычно они «обитают» на ресурсах и сайтов для фотографов, ретушеров и дизайнеров. Но можно не заморачиваться с поиском специальных площадок, а просто вбить в поисковике «скачать градиенты для фотошопа».
2. В скачанной папке (если она была в архиве — разархивируйте его), вам нужен файл с расширением .GRD
3. Откройте инструмент Градиент или Карту градиентов. Кликните левой кнопкой мыши по полоске градиента, чтобы перейти в меню редактирования градиентов (это там же, куда вы нажимали, чтобы создать градиент).
Нажмите кнопку Импорт / Import и в открывшемся окне найдите скачанную вами папку, а в ней — файл с расширением .GRD / Иллюстрация: Елизавета Чечевица, Фотосклад.Эксперт
4. Кликните по нему левой кнопкой мыши и нажмите Загрузить / Load. Скачанные градиенты появятся в конце списка в автоматически созданной папке.
Каждый новый скачанный и установленный набор будет появляться в новой папке / Иллюстрация: Елизавета Чечевица, Фотосклад.
Эксперт
Как затонировать фотографию с помощью градиента?
Вы научились создавать и скачивать градиенты именно для того, чтобы с их помощью улучшать вашу фотографию. Ниже мы расскажем два способа, как создавать тонировки с помощью градиента.
Тонировка с помощью инструмента Градиент
- Откройте фотографию. Создайте новый слой, на котором будет лежать тонировка.
Чтобы создать новый пустой слой, нажмите на квадратик с плюсиком внизу панели Слои / Layers / Иллюстрация: Елизавета Чечевица, Фотосклад.Эксперт
2. Перейдите в инструмент Градиент (горячая клавиша G).
3. Нажмите на выпадающий список градиентов и найдите тот, который нравится вам. Кликните по понравившемуся градиенту.
4. Наведите курсор на фотографию, зажмите левую кнопку мыши и, не отпуская её, проведите линию.
В зависимости от направления и длины линии (чем длиннее, тем переход из цвета в цвет плавнее), будет меняться градиент / Иллюстрация: Елизавета Чечевица, Фотосклад.
Эксперт
5. Сейчас градиент полностью перекрывает фотографию под собой. Чтобы это исправить, выберите один из вариантов: измените непрозрачность слоя или выберите один из режимов наложения.
Под тонировки хорошо подходят такие режимы наложения:
– Умножение / Multiply;
– Экран / Screen;
– Перекрытие / Overlay;
– Мягкий свет / Soft Light;
– Цветность / Color.
Но вы можете выбрать любой режим, какой вам понравится. Если результат слишком грубый, снизьте непрозрачность слоя.
Сочетание режима наложения Экран и Непрозрачности 53% / Иллюстрация: Елизавета Чечевица, Фотосклад.Эксперт
Если вам не нравится, что получилось, не нужно удалять слой и начинать сначала. Просто проводите линию за линией до тех пор, пока вам не понравится результат.
Карта градиента — как пользоваться
Карта градиента — это корректирующий слой, который перекрашивает в цвета выбранного градиента света, тени и оттенки между ними.
Рассказываем, как тонироваться с помощью этого инструмента.
1. Откройте фотографию. В палитре Слои / Layers нажмите на чёрно-белый круг и выберите инструмент Карта Градиентов.
2. Нажмите на выпадающий список, чтобы выбрать готовый, скачанный или созданный вами и заранее сохранённый градиент, либо создайте свой (смотрите выше).
3. Все цвета на фотографии заменятся на цвета градиента (например, в данном случае их два).
Дальше возможны варианты:
- Если вам нравится обесцвеченная и затонированная в цвета градиента фотография, то на этом всё. Можете продолжать сохранять снимок.
Сочетание градиента из 5 цветов, режима наложения Жёсткий свет / Hard Light и Непрозрачности 18% / Иллюстрация: Елизавета Чечевица, Фотосклад.Эксперт
- Если хочется, чтобы от цветов оставались лишь легкие оттенки, переберите режимы наложения и настройки непрозрачности, как в предыдущем пункте.
POSITIVERECORDS.
RU — ВСЕ ДЛЯ ФОТОШОП POSITIVERECORDS.RU — ВСЕ ДЛЯ ФОТОШОП — ГРАДИЕНТЫ (GRADIENTS)
- ВИДЕОРЕДАКТОРЫ
- ВСЕ ДЛЯ ДИЗАЙНА
- Архив новостей (Общий топ)
- Все версии Adobe Photoshop
- Плагины для продуктов Adobe
- Иные графические редакторы
- Флаеры и баннеры
- Все для Фотошопа
- Кисти
- Стили
- Градиенты
- Экшены
- Фигуры
- Узоры
- Пресеты для продуктов от Adobe
- АРХИВ НОВОСТЕЙ (ОБЩИЙ ТОП)
- РАБОЧИЕ СТАНЦИИ (DAW)
- СИНТЕЗАТОРЫ (SYNTHS)
- СЕМПЛЕРЫ, ИНСТРУМЕНТЫ (SAMPLERS)
- ЭФФЕКТЫ (FX PLUGINS)
- БИБЛИОТЕКИ (SOUNDBANKS)
- BLUES
- ELECTRONIC
- EURODANCE
- JAZZ
- METAL
- POP
- ROCK
- ROCK (АРХИВ)
- СБОРНИКИ ХИТОВ
- Новинки (Общий топ)
- Игры для Linux
- Аркадные и платформеры
- Приключения
- RPG
- Ролевые
- Симуляторы (Спортивные, Гонки, Sims)
- Dirt
- Need For Speed
- The Sims
- Стратегии
- Total War
- Ужасы
- Файтинги
- Шутеры (От первого лица)
- Call Of Duty
- Far Cry
- Metro
- Serious Sam
- Экшены (От третьего лица)
- Assasins Creed
- GTA
- Mafia
- 3D-РЕДАКТОРЫ, САПР — АРХИВ НОВОСТЕЙ
- 3D-РЕДАКТОРЫ, РЕНДЕРЫ, МОДЕЛИ, ВИДКОУРОКИ
- САПР (ЭЛЕКТРОНИКА, АВТОМАТИКА, ГАП), ИНЖЕНЕРНО-ЧЕРТЕЖНЫЕ
- СОФТ (СИСТЕМНЫЕ И ИНЫЕ ПРОГРАММЫ)
- ЧАТ (ОНЛАЙН ПОДДЕРЖКА)
- ОБРАТНАЯ СВЯЗЬ
- СОДЕЙСТВОВАТЬ РАЗВИТИЮ САЙТА
ВСЕ ДЛЯ ФОТОШОПА / ГРАДИЕНТЫ
- 1000 Adobe Illustrator Swatches [AI, ASE] | Размер: 350 KB
- 75 Photoshop Gradients by ElvenSword [GRD] | Размер: 132 KB
-
Градиенты — 50000 Photoshop Gradients [GRD] | Размер: 62.
2 MB
2 MB
- CreativeMarket — Gold Gradients for Photoshop [GRD] [ID 5915141] | Размер: 1.4 MB
- Градиенты — 30000 Gradient Swatches Adobe Illustrator [AI] | Размер: 26.4 MB
- [Gradients] градиенты для Photoshop | Размер: 10.6 MB
- [Gradients] 6000 лучших градиентов для Photoshop | Размер: 3.6 MB
- [Gradients] 6000 градиентов для Photoshop | Размер: 2.9 MB
- [Gradients] Бронзовые градиенты | Размер: 4Kb
- [Gradients] «Dirty» (многоцветные с черным) | Размер: 244Kb
- [Gradients] Light 1 | Размер: 93Kb
- [Gradients] Light 2 | Размер: 194Kb
- [Gradients] Бело-серые | Размер: 294Kb
- [Gradients] Винтаж | Размер: 104Kb
-
[Gradients] Голубых снежинок хоровод | Размер: 1. 663Mb
663Mb
- [Gradients] Желто-зеленые | Размер: 419Kb
- [Gradients] Золото | Размер: 41Kb
- [Gradients] Метал 2 | Размер: 123Kb
- [Gradients] Метал 1 | Размер: 115Kb
- [Gradients] Микс | Размер: 263Kb
- [Gradients] Океанский бриз | Размер: 161Kb
- [Gradients] Серебро и цвет | Размер: 115Kb
- [Gradients] Тёплый песок | Размер: 1.622Mb
- [Gradients] Цветной блеск | Размер: 1.547Mb
- [Gradients] Шик | Размер: 117Kb
- [Gradients] Яркий микс 1 | Размер: 74Kb
- [Gradients] Яркий микс 2 | Размер: 74Kb
- [Gradients] Яркий микс | Размер: 65Kb
- [Gradients] Большой Микс (10000 шт) | Размер: 279Kb
Более 1000 бесплатных градиентов Photoshop для всех ваших дизайнерских потребностей
Главная › Блог › Дизайн › Более 1000 бесплатных градиентов Photoshop для всех ваших дизайнерских потребностей
Download Download 9003 Download.
20 бесплатных градиентов заката (Photoshop GRD & JPG)
Скачать
70+ Бесплатный градиент небес Тосканы
Скачать
208 вариантов градиента
Скачать
6 бесплатных карт градиента для Photoshop
Скачать
Как использовать градиенты в дизайне
Вы можете использовать эти градиенты, используя различные инструменты и настройки, доступные в Photoshop:
- 6 9084 Инструмент «Градиент»
- Градиент корректирующий слой
- Карта градиента корректирующий слой
- Наложение градиента стиль слоя
Градиенты — отличный способ добавить яркости и живости вашему дизайну.
Вот некоторые из способов, которыми вы можете использовать их в своих проектах в Photoshop:
1. Использование градиентного фона для графического дизайна
Вы можете использовать градиентный фон в качестве фона для текста и других элементов на переднем плане для создания графики в социальных сетях, такой как посты в Instagram, рекламная графика, а также брендинг и дизайн упаковки.
Кроме того, вы также можете применять градиенты к различным формам для создания интересных фоновых композиций для плакатов и флаеров. Вы можете взглянуть на эти примеры ярких градиентов в графическом дизайне для вдохновения.
Связано: Бесплатный фон с пастельным градиентом
2. Дизайн пользовательского интерфейса для веб-сайтов и приложений
Вы можете использовать градиенты в различных элементах дизайна интерфейса вашего веб-сайта и приложения. От фона до наложения изображений и эффектов двойного тона, от элементов пользовательского интерфейса, таких как кнопки, значки и текст, до их использования в анимации и эффектах наведения.
Вы можете посмотреть эту витрину градиентов в веб-дизайне, чтобы понять, о чем мы говорим.
3. Креативные фотоэффекты и градиентная типографика
Градиенты не только эффективны в качестве фона, но и могут использоваться в элементах переднего плана, таких как текст и изображения, для получения прекрасных результатов. Вы можете заполнять текст красочными градиентами, использовать их в качестве наложения на изображения для цветокоррекции или применять карты градиентов к изображениям для создания двухцветных изображений и других художественных фотоэффектов. Эти эффекты градиента помогут вам создавать визуально привлекательные плакаты и флаеры.
Другие надстройки Photoshop
Мы также рекомендуем вам ознакомиться с другими надстройками Photoshop на нашем сайте:
- Бесплатные текстуры Photoshop
- Лучшие акварельные кисти для Photoshop
- Лучшие Ретро Экшены Photoshop
Поделиться → Твиттер Фейсбук LinkedIn Пинтерест
Моника Ратан
Моника любит графический дизайн и другие формы творчества.
Когда она не возится со своими любимыми инструментами графического дизайна, она в основном читает или пишет на самые разные темы. Подпишитесь на нее в Твиттере @monikaratan
monikaratan.com
Шум, текстуры, градиенты и прямоугольники со скругленными углами — Smashing Magazine
- 12 минут чтения
- Графика, Техники, Photoshop
- Поделиться в Twitter, LinkedIn
Об авторе
Марк Эдвардс — дизайнер, известный спидраннер, создатель странных генеративных художественных GIF-файлов и основатель Bjango. Бьянго наиболее известен своими iStat Menus и… Больше о Марк ↬
Зачастую именно мелкие детали превращают хороший макет в великолепный дизайн; такие детали, как тонкие текстуры, тени и плавные формы. Photoshop содержит множество инструментов для украшения дизайна, но выбрать правильный не всегда просто. Часто именно мелкие детали превращают хороший макет в великолепный дизайн; такие детали, как тонкие текстуры, тени и плавные формы.
Photoshop содержит множество инструментов для украшения дизайна, но выбрать правильный не всегда просто. Будучи обсессивно-компульсивными людьми, мы провели огромное количество экспериментов, чтобы определить преимущества и недостатки каждой техники. Итак, вот руководство обсессивно-компульсивного человека по некоторым часто используемым инструментам и методам веб-дизайна и дизайна пользовательского интерфейса в Photoshop.
Возможно, вы захотите взглянуть на следующие статьи по теме:
- Методы создания пользовательских текстур в Photoshop
- Почему и как использовать текстуры в веб-дизайне
- Совершенство пикселей при вращении, вставке и сдвиге в Photoshop
Шум и текстуры
Тонкий шум или текстура на элементах пользовательского интерфейса могут выглядеть великолепно, но как лучше всего их добавить? Наша цель — найти наилучший метод, сохраняющий качество при масштабировании, но при этом простой в реализации и редактировании. Чтобы выяснить, какой из них лучше, мы оценим каждый метод по следующим критериям:
Еще после прыжка! Продолжить чтение ниже ↓
- Количество используемых слоев: чем меньше, тем лучше.
- Возможность масштабирования: при изменении размера документа эффект сохранит свое качество?
- Может ли шум быть поверх стилей слоя «Цвет» и «Градиент»?
- Можно ли использовать этот метод с любой текстурой, а не только с шумом?
1. Растровый слой с шумом
Вероятно, самый очевидный способ добавить текстуру к фигуре — это создать обычный растровый слой, заполнить его цветом, выбрать Фильтр → Шум → Добавить шум , затем примените маску или векторную маску, чтобы соответствовать элементу, к которому вы добавляете шум.
Используя большое количество шума, установив режим наложения слоя на Luminosity и уменьшив непрозрачность, вы получите максимальный контроль над шумом с наименьшим нарушением нижележащих слоев. Уровень шума 48% обеспечивает широкий динамический диапазон без ограничения шума. (Обрезка приводит к более высокому контрасту, что может быть нежелательно.)
- Слои: 2
- Масштабы: Нет, при масштабировании документа текстуру придется создавать заново
2.
Стиль слоя «Внутреннее свечение»Добавление стиля слоя «Внутреннее свечение» с источником, установленным в центре, и размером 0 позволит вам использовать ползунок шума для добавления текстуры к любому слою. Это хорошее решение, если вы еще не используете стиль слоя «Свечение» для чего-то другого. Шум добавляется поверх стилей слоя «Цвет», «Градиент» и «Узор», и это здорово.
К сожалению, шум может только осветлить или затемнить основные элементы. Предыдущий метод растрового слоя может одновременно добавлять блики и тени, сохраняя при этом среднюю яркость, и, на мой взгляд, он выглядит намного лучше.
- Слои: 1
- Масштабы: Да, текстура будет переделана автоматически0086
3. Смарт-объект с фильтром
Создайте слой сплошного цвета, преобразуйте его в смарт-объект, выберите Фильтр → Шум → Добавить шум , примените векторную маску в соответствии с вашим элементом, установите слой режим наложения на Luminosity и уменьшите непрозрачность слоя.
Это довольно сложный процесс, но он может включать комбинацию эффектов, которые можно переделать, если документ масштабируется.
- Слоев: 2
- Весы: Да, текстура будет автоматически переделана
- Работы с цветом и градиентными стилями слоя: Да
- Работа с любой текстурой: NO
Редактировать → Определить узор . После того, как вы определили узор, он будет доступен в параметрах стиля слоя Pattern Overlay. Как и в предыдущих методах, используя Luminosity в качестве режима наложения и уменьшение непрозрачности в соответствии с ним дают отличные результаты. Стиль слоя «Узор» скомпонован ниже стилей «Цвет» и «Градиент», разрушая в остальном идеальный метод шума и текстуры. Однако вы можете создать второй слой, который просто содержит текстуру, если вам нужно, или начать со слоя градиентной заливки, обойдя ограничение.
- Слои: 1
- Масштабы: Да, но после масштабирования 9 вам потребуется изменить масштаб стиля слоя на 100%.0205
- Работает со стилями слоя «Цвет» и «Градиент»: Нет, узор появляется под ним
- Работает с любой текстурой: Да
Какой метод лучше?
Хотя это немного громоздко, создание слоя «Градиентная заливка», добавление стиля слоя «Узор», а затем создание векторной маски кажется наилучшим возможным методом. Это можно использовать для создания гибких, масштабируемых и редактируемых однослойных элементов пользовательского интерфейса с текстурой. В качестве бонуса, слои с градиентной заливкой можно сглаживать, что также дает результаты высочайшего качества (стили слоев с градиентом нельзя сглаживать).
Ниже мы создали несколько примеров и включили исходный документ, чтобы вы могли увидеть, как они были построены.
Загрузите PSD-файл (.zip)
Прямоугольники со скругленными углами
Прямоугольники со скругленными углами, или «прямоугольники со скругленными углами», как их ласково называет QuickDraw, являются стандартным набором инструментов веб-дизайнеров и дизайнеров интерфейсов.
Они настолько распространены, что веб-страницы или приложения редко содержат , а не , содержащую прямоугольник или два. К сожалению, закругленные прямоугольники с блокировкой пикселей на самом деле довольно сложно рисовать в Photoshop. (Под пиксельной блокировкой я подразумеваю, что каждый край приходится на точную границу пикселя, создавая максимально четкий объект.)
Опытные пользователи Photoshop, вероятно, уже знают один или два способа рисования прямоугольника. Надеюсь, после прочтения этой статьи они также узнают еще пару, а также какие методы дают идеальные до пикселя результаты.
1. Векторный инструмент «Прямоугольник со скругленными углами»
Векторный инструмент Photoshop «Прямоугольник со скругленными углами» идеально подходит для этой задачи. В результате получаются идеальные прямоугольники каждый раз. Радиус угла можно изменить во время или после рисования формы (Окно > Свойства). С положительной стороны, сохранение ваших объектов в виде векторов означает, что вы сможете изменять размер документа, а углы будут в полной мере использовать любое дополнительное разрешение.
Однако есть одно небольшое предостережение: если вы изменяете размер, вам придется делать это как точное кратное, иначе вы рискуете получить нечеткие края без блокировки пикселей.
2. Размытие
Метод размытия — это своего рода хак, который включает в себя создание выделения, его размытие, затем увеличение контраста, чтобы у вас осталась резкая маска с хорошим сглаживанием.
Всего семь шагов, и они могут быть неточными; плюс радиус углов нельзя менять на лету. Применение уровней также может быть немного неудобным. Одним из преимуществ является то, что различные настройки уровней могут использоваться для получения различных степеней сглаживания, от невероятно мягкого до полного сглаживания.
- Создайте новый слой.
- Нарисуйте прямоугольное выделение.
- Введите быструю маску (
Q). - Размытие по Гауссу на половину радиуса, необходимого для закругленных углов. (Например, для 10-пиксельного радиуса потребуется 5-пиксельное размытие. )
- Применить уровни (
Command + L) и использовать около 118 для черной точки и 137 для белой точки на входных уровнях. - Выход из быстрой маски (
Q). - Выбор заливки.
)С положительной стороны, этот метод размытия можно использовать для быстрого создания интересных и органических форм, которые было бы трудно нарисовать вручную.
3. Круги
Метод кругов очень точен и легко воспроизводим, но состоит из целых 13 шагов. Это много кликов для одного прямоугольника.
- Создайте новый слой.
- Сделайте круговое выделение вдвое большего радиуса, чем вы хотели бы (например, для радиуса 10 пикселей потребуется круг размером 20×20 пикселей).
- Заполните выделение.
- Переместить выделение вправо. Это можно сделать быстро, удерживая нажатой клавишу Shift и несколько раз нажимая клавишу со стрелкой вправо.
- Заполните выделение.
- Переместить выделение вниз.
- Заполните выделение.
- Переместить выделение влево.
- Заполните выделение.
- Создайте прямоугольное выделение, покрывающее весь вертикальный диапазон прямоугольника, но начинающееся и заканчивающееся на полпути через круги на концах.
- Заполните выделение.
- Создайте прямоугольное выделение, покрывающее весь горизонтальный отрезок прямоугольника, но начинающееся и заканчивающееся посередине кругов на концах.
- Заполните выделение.
4. Штрих
Метод штриха очень точен, легко воспроизводим и состоит всего из четырех шагов, в зависимости от желаемого результата. Однако углы немного острее, чем у метода круга. Это может быть хорошо или плохо, в зависимости от ваших предпочтений.
- Создайте новый слой.
- Нарисуйте прямоугольное выделение, которое меньше требуемой области (меньше на удвоенный радиус, если хотите быть точным).
- Заполните выделение.
- Добавьте обводку в качестве стиля слоя толщиной, равной желаемому радиусу угла.
Если вы хотите сгладить объект, чтобы удалить обводку, продолжайте выполнять следующие шаги.
- Создайте новый слой.
- В палитре «Слои» выберите новый слой и предыдущий слой.
- Объединить слои (
Command + E).
Сведение можно автоматизировать с помощью экшена Photoshop. Это также может быть настроено как функциональная клавиша для дальнейшего ускорения работы.
Огромным преимуществом метода обводки является то, что он является динамическим, поэтому радиус можно редактировать в режиме реального времени. Его также можно использовать для простого создания других округлых форм, как показано ниже.
Какой метод лучше?
В большинстве случаев использование инструмента «Прямоугольник со скругленными углами» дает отличные результаты и является самым быстрым методом.
Градиенты
Градиенты — отличный способ добавить реалистичное освещение и тени на поверхности. При построении с градиентными слоями и стилями слоев они также гарантируют, что элементы пользовательского интерфейса можно легко масштабировать и повторно использовать.
Линейные градиенты
Линейные градиенты — это градиенты в их самой простой форме — постепенное смешение цветов и следование прямой линии. Я уверен, что вы это знали, так что перейдем к более интересным вещам.
Отраженные градиенты
Отраженные градиенты похожи на своих линейных друзей, но они повторяют градиент дважды, причем второй повтор зеркально отражен. Это делает редактирование немного менее утомительным, при условии, что оно соответствует результату, который вам нужен.
Радиальные градиенты
Радиальные градиенты начинаются от центра (или любой выбранной точки) и растут наружу по круговой схеме. Они удобны для создания сфер и применения эффектов к краям круглых элементов. Центральную точку градиента можно переместить, щелкнув и перетащив холст, когда открыто окно градиента или окно стилей слоя.
Градиенты угла
Градиенты угла могут быть отличным способом имитировать отражения окружающей среды, которые можно увидеть на полированных металлических предметах.
Центральную точку градиента можно переместить, щелкнув и перетащив холст, когда открыто окно градиента или окно стилей слоя.
Градиенты на градиентах
Все, что стоит делать, стоит переусердствовать, верно? Сочетание слоя градиента со стилем слоя градиента позволяет накладывать два разных градиента, получая более сложные и, что хорошо, полностью динамические результаты. Чтобы объединить градиенты, вам нужно установить режим наложения для стиля слоя градиента. Для приведенных ниже примеров я использовал Screen (хорошо для осветления) или Multiply (хорошо для затемнения).
Дизеринг решает все
Добавление дизеринга к градиенту дает более плавные результаты. Градиенты без сглаживания часто содержат видимые полосы. Дизеринг еще более важен, если ваши иллюстрации просматриваются на более дешевых ЖК-дисплеях TN с 6-битным каналом и некоторых типах дисплеев, которые, как правило, усиливают проблемы постеризации.
Если вы не видите разницы, вот экстремальный и совершенно нереалистичный пример градиентного сглаживания в действии:
Обеспечить сглаживание градиентов очень просто: просто установите соответствующий флажок в Photoshop.
Обратите внимание, что стили градиентных слоев нельзя сглаживать, а градиенты в размещенных объектах (например, объекты, вставленные из Illustrator) не сглаживаются.
Если вы используете прозрачность в градиенте, он также не будет сглаживаться, что иногда может быть серьезной проблемой. Для некоторых конкретных случаев есть решение: если вы используете градиент с прозрачностью, чтобы осветлить область белым цветом, то использование непрозрачного градиента с режимом наложения Screen Layer позволит вам сгладить его. Эту же технику можно использовать для затемнения в режиме наложения Multiply.
Комбинация методов градиента, описанных выше, была использована для создания значка приложения Mac ниже.
Карты градиентов
В отличие от других типов градиентов, карты градиентов могут быть отличным способом добавления обработки цвета, обеспечивая очень точный контроль. Карты градиента используют яркость каждого пикселя для сопоставления с соответствующим цветом в градиенте.
Если градиент начинается с красного и заканчивается синим, то все белое на изображении станет красным, а все черное станет синим. Все в середине тонально будет отображаться в градиенте, в зависимости от того, насколько он яркий.
Изображение ниже было использовано в плакате школы плавания Kingswim:
С картой градиента. Большой вид
Без карты градиента все выглядит совсем иначе. Это композиция из семи фотографий; мальчик и фон были сняты на черно-белую пленку с намеренно низким контрастом, чтобы зернистость была более заметной, когда контраст был увеличен картой градиента. Карта градиента также скрывает несоответствия цветов в композитинге.
Карта градиента выключена. Большой вид
Немного одержимы?
Абсолютно. Я провел все вышеперечисленные тесты, чтобы узнать больше о некоторых распространенных методах, которые я уже использую: то есть для переоценки и тонкой настройки с целью улучшения моих проектов.