Тенденции веб-дизайна быстро изменяются за последние годы. Некоторые вещи исчезают на некоторое время, чтобы затем вернуться. Так случилось с градиентами, которые остаются востребованными и актуальными, хотя в эпоху flat design они исчезли полностью, и смогли вернуться к жизни только благодаря стараниям Google и их стилю material design. У многотонального эффекта существуют различные вариации и применения, и практически все они успешно используются в веб-дизайне.
Мы немного затрагивали тему градиентов в наших прошлых материалах, когда говорили о тенях и создании деформированной сложной тени, когда рассматривали мягкие (soft) линии и формы. Но все эти беседы были общими. Теперь же мы посмотрим на градиенты, что называется, «под лупой».
Градиент, как эффект, невероятен по своим возможностям. Являясь постепенным смешиванием от одного цвета к другому, он позволяет веб-дизайнерам создать практически новый цвет и тон. Это приводит к тому, что объекты выделяются, обретают реализм и новое измерение в дизайне. Проще говоря, градиенты добавляют глубины в визуальную композицию дизайна.
С другой стороны, постепенное смешивание с белым или черным цветом (а также игра с непрозрачностью) может имитировать собой расстояние от источника света. Градиенты – часть реального мира, поскольку наш с вами мир не состоит из плоских и однотонных цветов. Посмотрите вокруг, везде можно увидеть переходы одного цвета к другому.
Создание нового документа
Начнем мы с создания нового документа. Для создания перейдите в меню File > New (Файл — Создать).
Откроется диалоговое окно New. Я использовал следующие размеры для документа 1200х800 пикселей. Заданный мною размер здесь не играет огромной роли, поэтому по желанию можете установить любой. Разрешение оставьте 72 пикс/дюйм, содержимое фона – белый. После всех изменений нажмите OK.
Градиенты для фотошопа. Варианты применения
Автор: Сергей Бунин. Дата публикации: 21 марта 2020. Категория: Обработка фотографий в фотошопе.
Градиенты для фотошопа
Варианты применения
В первой части материала мы с Вами познакомились с инструментом «Градиент», разобрали его виды, настройки, научились создавать свои заливки и редактировать готовые наборы.
Теперь пора поговорить о вариантах применения.
Градиент – это инструмент позволяющий создать постепенно изменяющееся наложение нескольких цветов на Ваше изображение.
Из этого определения легко догадаться, где и для чего можно использовать градиентные заливки, а вот как правильно и какие есть варианты применения, мы и рассмотрим в этой части.
Итак, градиенты для фотошопа,и их варианты применения.
Если создать новый документ с любой фоновой заливкой (равнозначно, как и взять любую цветную картинку),
то с помощью ИНСТРУМЕНТА «Градиент» мы можем перекрасить его в цвет соответствующий цветам, применяемым в градиенте.
Причем цвет левой часть градиента (левая контрольная точка) всегда будет определять цвет начала линии протяжки.
Если в панели управления инструментом установить галочку «Инверсия», цвета в градиенте поменяются местами и ситуация с заливкой документа естественно поменяется на противоположную.
Такое применение инструмента «Градиент» редко встречается при ретуши фотографий, но имеет место быть в дизайнерских работах.
Чаще используется КОРРЕКТИРУЮЩИЙ СЛОЙ «Карта градиента». Его основное назначение это привязка эквивалентного диапазона оттенков серого на изображении к цветам определенной градиентной заливки. Если сказать проще, градиент предназначен для заливки изображения с учетом своего содержимого и с привязкой к яркости на этом изображении.
Обратимся снова к нашему изображению. В нем я специально для наглядности не стал располагать градации серого цвета последовательно.
Если, к примеру, взять градиент с двухцветной заливкой и наложить его на это изображение, то увидим, что по умолчанию темным участкам картинки будет соответствовать левая контрольная точка градиента, а правая контрольная точка – светлым. Средние по яркости участки будут окрашены в смешанный цвет, определяющий переход между двумя цветами используемой заливки.
Чтобы отредактировать градиентную заливку, дважды щелкните левой кнопкой мышки по миниатюре слоя «Карта градиента» или просто перейдите на панель свойств данного корректирующего слоя.
Далее щелкаете ЛКМ по изображению градиента и попадаете в редактор градиентов.
И как описано в первой части материала создаете необходимую Вам градиентную заливку или модифицируете уже имеющуюся.
В реальности метод применения градиента с учетом его содержимого может использоваться в сплит тонировании, когда тени на изображении заполняются одним цветом, а света другим.
Если поменять режимы наложения корректирующего слоя «Карта градиента», то можно добиться различных и весьма интересных результатов.
Контролировать воздействие степени градиентной заливки можно с помощью непрозрачности слоя.
Или с помощью параметров наложения слоя.
Если дважды щелкнуть ЛКМ по корректирующему слою, попадем в диалоговое окно «Стиль слоя». Здесь нам понадобится поле «Наложение если». Работаем в градациях серого и со шкалой подлежащего слоя.
Сдвинув белый регулятор влево, можно ограничить диапазон яркости, на которую будет воздействовать корректирующий слой «Карта градиента», тем самым светлые участки изображения находящиеся с правой стороны белого регулятора останутся нетронутыми, а расположенные слева перекрасятся в соответствии с применяемой заливкой в градиенте.
Чтобы избежать жестких и рваных границ между темными и светлыми областями, удерживая клавишу «Alt», наводим курсор мышки на белый регулятор и переместим его немного вправо. Бегунок расщепляется, область между его частями определяет ширину и плавность перехода между отсеченной зоной яркости.
Кроме заливки цветом (тонирования) с помощью градиентов можно повысить контрастность изображения.
Для этого существует простой способ: в свойствах корректирующего слоя «Карта градиента» щелкаем ЛКМ по шкале градиентной заливки, после чего перед нами открывается редактор градиентов. В списке наборов выбираем заливку «Черный, белый».
Нажав «Ок» в редакторе, изображение сразу заливается градиентом и становится более контрастным. Подобрав непрозрачность корректирующего слоя, можно добиться приемлемых для Вас результатов.
С помощью того же черно-белого градиента можно легко создать виньетку на фотографии.
Создадим для нашего изображения новый корректирующий слой «Кривые».
Переходим к свойствам корректирующего слоя и изгибаем кривую к низу, затеняя тем самым изображение.
Возвращаемся на панель слоев и щелкаем ЛКМ по маске слоя, она активируется, о чем свидетельствует ее выделение пунктирной линией.
На панели инструментов выбираем «Градиент», задаем ему радиальный вид и в его редакторе обращаемся к черно-белой заливке.
Устанавливаем перекрестие курсора приблизительно на центр изображения, зажимаем ЛКМ и протягиваем линию градиента к боковой стороне картинки, отпускаем ЛКМ.
Маска заполняется черно-белой заливкой и в соответствии со свойствами прозрачности через черный цвет воздействие корректирующего слоя не проходит на центр изображения, а края затеняются.
Нажмем комбинацию клавиш «Ctrl+T», появляется рамка свободного трансформирования. Исходя из размерности и ориентации фотографии, сформируем область заливки градиентом. Нажимаем «Enter» (Ввод).
Получим следующее изображение с наложенной на него виньеткой. Плотность маски (ее непрозрачность) а, следовательно, степень затенения и растушевку краев можно отрегулировать на панели свойств самой маски.
Интересны примеры использования градиентов в коллажах, когда надо совместить два различных изображения. Делается это аналогично, с использованием заливки градиентом маски слоя одного из изображения, размещенным над другим.
Мы с Вами рассмотрели одни из основных способов как можно применить Градиенты для фотошопа. Дальше все зависит от Вашего воображения и находчивости.
Приятных творческих успехов!
Если Вы не хотите пропустить интересные уроки по обработке фотографий — подпишитесь на рассылку. Форма для подписки находится ниже.
- Назад
- Вперед
Комментарии
0 Анатолий 18.05.2020 20:47 Спасибо! Стало намного понятнее
Ответить | Ответить с цитатой | Цитировать
0 Alex 24.03.2017 08:00 Спасибо!Интересно!
Ответить | Ответить с цитатой | Цитировать
Обновить список комментариев
Понравилось? Поделитесь:
Добавить комментарий
Введите Ваше имя, или зарегистрируйтесь на сайте, что бы имя в ответах вставлялось автоматически: это займёт 2 минуты! После регистрации вы сможете редактировать свои сообщения и не придётся вводить подтверждение
. Для отображения
Аватара
(вашей картинки) необходимо на ту же почту иметь аккаунт на — Gravatar, это бесплатно.
JComments
Палитра градиентов
Теперь нам необходимо выбрать сам градиент, который мы будем использовать, для этого есть несколько способов. Первый – это открытие Палитры градиентов, второй открыть большое окно Редактор градиентов. Разница между ними состоит в том, что в Палитре градиентов вы можете выбрать готовый градиент, а в Редакторе градиентов (название говорит само за себя) вы сможете редактировать и создавать свои собственные градиенты. Сегодня больше внимание мы отдадим Палитре градиентов.
Если вам нужно выбрать один из стандартных градиентов Photoshop или раннее созданный самостоятельно и сохранённый в качестве пользовательского образца, то нажмите на маленькую стрелочку справа на панели предварительного просмотра.
Чтобы выбрать понравившийся вам градиент, просто дважды кликните по миниатюре или нажмите Enter.
Открываем Редактор градиентов
Как мы с вами узнали из прошлого урока, после активации инструмента «Градиент» существует два способа выбрать градиент. Мы можем выбрать его из образцов готовых градиентов в Палитре градиентов или создать и отредактировать собственный градиент при помощи Редактора градиентов. Для того чтобы открыть Редактор градиентов, кликните прямо по окошку предварительного просмотра градиентов на панели настроек. Если вы кликните по маленькой стрелке с правой стороны окошка просмотра, то откроете Палитру градиентов, которую мы изучали ранее. Однако на этот раз нам нужен Редактор градиентов, поэтому кликните по самому окошку:
Кликаем по окошку предварительного просмотра градиентов на панели настроек
В результате этого действия откроется Редактор градиентов (Gradient Editor). Вначале он может выглядеть для вас несколько пугающе, но вскоре мы убедимся, что в действительности в нем работать очень легко:
Редактор градиентов
Новинки Premium-раздела
499
Коллажирование
Коллаж «Необычная прогулка»
0 0
99
Веб и приложения
Создаём форму оформления заказа
18 873 292
99
Веб и приложения
Cоздаём форму заказа авиабилетов
12 791 212
99
Работа с фото
Делаем художественную ретушь портрета
26 903 374
499
Работа с фото
Художественная обработка от Мадины Ахтаевой. Серия «Лето»
0 0
499
Коллажирование
Коллаж «На маскараде»
0 0
— часть сайта Фотошоп-мастер, где вас ждут 60 видеоуроков и 36 экспресс-курсов от профессионалов.
Вы можете покупать их по-отдельности, а можете оформить подписку на весь раздел (от 5 руб/день).
Загрузка дополнительных наборов градиентов
По умолчанию в Photoshop доступны несколько образцов градиентов, но можно воспользоваться другими стандартными наборами. Снова отрываем палитру градиентов, вверху справа находится значок шестерёнки, нажмите на неё.
В результате открылся список, в нижней его части представлены дополнительные наборы градиентов, каждый из которых основан на определённой тематике, к примеру, металлик, пастель, шумы и прочее. Если вы фотограф, то вам будут полезны такие наборы, как Нейтральная плотность и Фотографическое тонирование.
Выберите любой набор из представленного списка, я выбрал Фотографическое тонирование. Photoshop спросит вас, хотите ли вы заменить текущие градиенты на новые. Если вы нажмете Append (Добавить), то он просто добавит новые градиенты ниже оригиналов. Как вы видите, восстановить начальный набор не составит огромного труда, поэтому я нажму OK, чтобы заменить их на набор Фотографическое тонирование.
Обратите внимание на панель градиентов, начальный набор был заменен на новый. Не будем останавливаться на достигнутом, идем дальше.
Как сделать полупрозрачный градиент?
Верхние ползунки регулируют прозрачность. По умолчанию они черные, это значит что прозрачность на нуле. Кликните по одному из них или создайте новый, кликнув по пустому месту полоски, но выше неё.
Теперь вам доступны другие настройки, настройки прозрачности градиента. Степень прозрачности, местонахождение и удаление.
Как и с цветными ползунками, у ползунков прозрачности есть индикаторы степени прозрачности.
Градиент «От основного к фоновому»
Прежде чем мы приступим к созданию градиентов, давайте рассмотрим один из них, а в частности градиент От основного к фоновому. Photoshop выбирает его по умолчанию. В списке он стоит на первом месте.
На панели инструментов есть значок выбора цвета переднего плана и фона. По умолчанию цвет переднего плана установлен черный, а фоновый – белый.
Градиент От основного к фоновому является самым простым в настройках, так же он наиболее распространённый. В качестве дальнейших примеров я выбрал именно его.
Параметр «Гладкость»
Последний параметр, который нам надо рассмотреть в сегодняшнем уроке – параметр «Гладкость» (Smoothness), который отвечает за плавность и постепенность перехода между основными цветами. По умолчанию, его значение равно 100%, и все переходы распределены как можно более равномерно. По мере уменьшения его значения, при переходе между цветами появятся дополнительные тени, что приведет к появлению в градиенте нежелательных полос. В большинстве случаев, лучше оставлять параметр «Гладкость» равным 100%:
Параметр «Гладкость»
Создание градиента инструментом Градиент (G)
Чтобы создать градиент нужно поставить начальную точку и провести курсор мыши в нужное направление. Установите начальную точку градиента на рабочем документе, затем, не отпуская курсор мыши, переместите линию градиента в другую часть документа. Линия, которая появляется при этом, указывает направление градиента. Когда вы отпустите кнопку мыши, Photoshop создаст градиент с выбранными вами цветами.
Я создал градиент с левой стороны холста в правую. Если вам нужно, чтобы получилась идеально ровная линия, то при создании зажмите Shift. Затем сначала отпустите кнопку мыши, а затем клавишу Shift.
Как я уже говорил, Photoshop создаст градиент из тех цветов, которые выбрали вы. У меня получился черно-белый градиент.
уроки photoshop, как работать инструментом градиент
Как сделать прозрачный фон картинки в Фотошоп.
Итак: прежде всего нужна сама программа adobe фотошоп: если её у вас нет — скачайте и установите. Как это делается правильно, расскажу в следующей статье.
МИГ подписки — ЭРА полезных знаний!!
…а коли уже есть этот замечательный помощник в веб дизайне, — открывайте его!
Выбирайте из своих запасников на компе любую фотографию для редакции. Знаете как, да:
в верхнем горизонтальном меню наводите курсор на имя меню «Файл», а затем «Открыть»…
Фото -1.
В итоге у вас в окошке редакции появится нужная для редактирования в photoshop картинка.
Ну и для того, чтобы запустить инструмент «градиент» нужно выполнить несколько простых действий:
Фото — 2.
1 — слева есть вертикальное меню (всевозможные полезные инструменты photoshop) выбираете «Градиент» см. фото:
Когда кнопка будет активна (выделена тёмной подсветкой) — взгляните на верхнее горизонтальное меню, в котором теперь появились дополнительные инструменты эффектов градиента (фото ниже).
вернуться к оглавлению
Инверсия цветов
Вы можете изменить цвета наоборот. В верхней панели настроек есть такая функция Reverse (Инверсия).
Выбрав данную функцию, я снова создам градиент, но на этот раз цвета поменяются местами. Не забудьте позже её отключить.
Конечно, градиенты можно создавать не только слева направо, их можно создавать в любом направлении. Теперь я создам градиент сверху вниз, и мне даже не нужно удалять первый градиент. Photoshop автоматически заменит текущий градиент новым. Просто кликните мышью в верхней части документа и переместите линию вниз.
Чтобы получилась идеально ровная линия, при создании зажмите клавишу Shift. После этого отпустите сначала кнопку мыши, а затем клавишу Shift.
Программа заменила созданный горизонтальный черно-белый градиент на вертикальный.
Копирование существующего цвета
Еще один способ добавления цвета к градиенту заключается в создании копии существующего цвета. Для этого, необходимо нажать и удержать клавишу Alt (Win) / Option (Mac) по мере выделения контрольной точки цвета и перемещения ее вправо или влево. Таким образом, вместо передвижения исходной точки вы переместите копию точки, которую впоследствии можно разместить на вашем градиенте в нужном месте.
Предположим, что я в действительности хочу создать градиент с переходом от красного к желтому цвету и опять к красному. У меня уже есть красный цвет с левой стороны градиента. Вместо того чтобы добавить еще один цвет к градиенту и вручную подобрать в Палитре цветов тот же оттенок красного, я просто нажму и удержу клавишу Alt (Win) / Option (Mac), затем кликну по красной точке цвета и перемещу ее вправо, создав точную копию:
Кликните по точке цвета и переместите ее при нажатой клавише Alt (Win) / Option (Mac), чтобы создать копию
Далее я перемещу точку до правого края градиента и таким образом создам градиент с переходом от красного к желтому цвету и обратно к красному:
Создание копий точек цвета позволяет с легкостью добавлять те же самые цвета к различным частям градиента
Изменение цвета градиента
Поскольку по умолчанию градиент берет цвета из переднего плана и фонового, то мы с легкостью можем в любой момент изменить его цвета. Для начала кликните по верхнему квадратику «Цвет переднего плана», в настоящее время он окрашен в черный цвет.
Открылась палитра цветов, в которой я выбрал красный цвет. Нажмите OK, чтобы закрыть окно палитры цветов.
Теперь изменим цвет фона, кликните по дальнему квадратику, в данный момент он белый.
Снова открылась цветовая палитра, в которой я выбрал ярко-жёлтый оттенок. Нажмите OK.
Образцы цветов обновились.
Обратите внимание на градиент в верхней панели параметров, его цвета сменились на выбранные нами.
Приступаем к созданию градиента, на этот раз линию я проведу по диагонали от левого нижнего угла к правому верхнему. Нет необходимости удалять градиент, Photoshop автоматически заменит его новым.
У нас получился красно-желтый градиент по диагонали.
Настройка средней точки цвета
Если вы посмотрите на шкалу между двумя контрольными точками цвета, то увидите маленький значок в форме ромба. Это значок средней точки цвета, которая отмечает середину перехода между цветами (то место, где два цвета смешиваются между собой). Если вы не видите значок средней точки, кликните по любой из контрольных точек цвета, и он появится.
Значок средней точки цвета
Мы можем изменить положение средней точки, переместив значок поближе к одному или другому цвету. Например, я перемещу среднюю точку по направлению к левому краю, чтобы она стала ближе к красной точке цвета. Обратите внимание, что тогда произойдет с градиентом. Сместив среднюю точку влево, я укоротил область перехода между красной точкой цвета и средней точкой и удлинил переход между средней точкой и желтой точкой цвета:
Настраиваем область перехода с помощью перемещения средней точки цвета
Создание градиента на отдельном слое
Посмотрите на панель слоев, вы видите, что до этого момента все градиенты я создавал на фоновом слое.
Я вам показывал это в качестве примера, но в работе необходимо каждый элемент создавать на отдельном слое. Для начала уберите градиент, заполнив фоновый слой белым цветом. Для этого перейдите в меню Edit (Редактирование) и выберите Fill (Выполнить заливку).
В окне заливки установите белый цвет и нажмите OK. В результате фоновый слой заполнится белым цветом.
Теперь следующий градиент я буду создавать на отдельном слое. Зажмите Alt и кликните по значку создания нового слоя в нижней части панели слоёв.
Открылось диалоговое окно, впишите название слоя Gradient и нажмите OK.
В панели слоев добавился новый слой с названием Gradient выше фонового слоя. Теперь мы будем создавать градиент на новом слое.
Тип градиента
Если вместо градиента с плавным переходом, вы увидите на шкале градиента ряд разноцветных линий, то это значит, что параметр «Тип градиента» (Gradient Type) установлен не на «Непрерывный» (Solid), а на «Шум» (Noise). Мы рассмотрим такие градиенты в отдельном уроке, поскольку они не только выглядят по-другому, но и этапы их создания также другие. В общем говоря, всякий раз, как вы захотите создать обычный градиент с плавным переходом между двумя цветами, вам нужно установить тип градиента «Непрерывный» (Solid).
Убедитесь, что в качестве типа градиента выбран «Непрерывный»
Переходная область
Не забывайте, что при создании градиента важно не только направление линии градиента, но и расстояние между начальной и конечной точками градиента. Это расстояние определяет область перехода между цветами градиента. Какое расстояние будет между точками, такой и будет размер области перехода. Более длинные расстояния дадут более гладкие и плавные переходы, в то время как короткие создадут более жесткие и резкие переходы между цветами. Сейчас мы это подробно рассмотрим.
В качестве примера я буду использовать черно-белый градиент, создам я его слева направо с большим расстоянием между точками.
Так как у меня большое расстояние между точками, то переход между цветами получился плавным и постепенным.
Отмените градиент, для этого пройдите в меню Edit (Редактирование) и выберите Undo Gradient (Отменить градиент) или воспользуйтесь комбинацией клавиш Ctrl + Z.
В следующем примере я буду создавать новый градиент в том же направлении, но с гораздо меньшим расстоянием между точками.
В итоге мы видим, что переход между цветами в этом градиенте более резкий и внезапный. Поэтому в работе всегда учитывайте и этот фактор.
Взглянем на панель слоев, созданный градиент добавился на отдельный слой, что очень удобно в работе.
Ресурсы подбора градиентов
Смотря на все это, волей-неволей захочется самому буквально броситься рисовать что-нибудь эдакое-разэдакое. И тут, зачастую, возникает вопрос, где найти готовые градиенты, чтобы их можно было загрузить в Photoshop и затем использовать.
Freepik – представляет огромную базу по градиентам, причем, как наборам, так и отдельным изображениям-фонам.
Набор Apple Gradients – подборка основных цветовых переходов, что используются в iOS и OS X.
Ocean Breeze Ps Gradients – набор океанских цветовых схем. А архиве найдутся фалы png с предпросмотром всех градиентов и grd, в составе которого 140 цветовых переходов.
JJ’s Gradients-1 Skin Tones – подборка из 126 градиентов телесных оттенков. Достаточно занятная подборка, поскольку, с одной стороны – пастельные тона, с другой – необходимые для тех, кто создает «мягкие» композиции.
Coolhue – ресурс с набором готовых градиентов, которые используются достаточно часто в цифровом пространстве и легко узнаваемы.
Grabient – ресурс не только с набором готовых градиентов, но и с возможностью их изменить: выбрать угол направления перехода, расстояние между цветами, добавить новый цвет. Причем данные градиенты копируются в CSS код, благодаря которому можно увидеть шестнадцатеричные кода цветов и их процентовку. Затем достаточно вручную выставить данные параметры в Photoshop и градиент готов.
Градиент «От основного к прозрачному»
Помимо градиента «От основного к фоновому» в Photoshop есть ещё один образец – «От основного к прозрачному». У них есть небольшие отличия. Откройте Панель градиентов, данный образец находится на втором месте.
В качестве основного цвета выбираете цвет переднего плана, а второго цвета здесь нет. Этот вид градиента переходит из одного цвета в прозрачность.
Удалите предыдущий градиент Ctrl + Z. Теперь выберем цвет для переднего плана, на данный момент он черный. Кликните по черному квадратику.
Открылась цветовая панель, где я выбрал фиолетовый оттенок. Нажмите OK.
Посмотрите в верхней панели параметров изменился цвет градиента от фиолетового к прозрачному. Прозрачная область представляется в Photoshop в виде шахматной доски.
Создайте градиент от верхней части документа до центра.
Верхняя часть документа заполнится фиолетовым оттенком, а нижняя часть останется белой, то есть прозрачной.
Чтобы доказать, что нижняя часть бесцветная, в панели слоев отключите видимость фонового (белого) слоя, кликнув по значку глаза.
В результате белая заливка фонового слоя скроется и у нас остается градиент от фиолетового к прозрачному.
Ещё одним отличием этого градиента от другого является в том, что если поверх него создать такой же градиент но снизу вверх, Photoshop автоматически добавит новый градиент к предыдущему.
Сколько бы вы не добавляли градиентов «От основного к прозрачному», новый всегда будет добавляться к предыдущему.
Верните видимость фонового слоя.
Добавление прозрачности
Если вы посмотрите выше шкалы градиента, то увидите значки, похожие на дополнительные точки цвета. В действительности, это контрольные точки непрозрачности. Они позволяют нам регулировать непрозрачность различных частей градиента. На скриншоте ниже можно увидеть по одной контрольной точке непрозрачности с каждого конца градиента:
Контрольные точки непрозрачности
Некоторые из готовых образцов градиентов уже содержат прозрачность, некоторые – нет, но мы с легкостью можем добавить ее к градиенту по мере необходимости. Например, если я хочу, чтобы мой градиент имел переход от сплошного цвета слева до полностью прозрачного справа, то я могу достичь этого, кликнув по точке непрозрачности, расположенной над шкалой градиента с правой стороны. В результате, станут активными опции прозрачности в секции «Контрольные точки» (Stops) под градиентом. Обратите внимание, что текущее значение параметра «Непрозрачность» (Opacity) 100%, и это означает, что на данном участке градиента прозрачности нет совсем:
Выбираем контрольную точку непрозрачности с правой стороны
Для того чтобы добавить прозрачность, я кликну по стрелке с правой стороны от текущего значения непрозрачности и уменьшу значение параметра, переместив бегунок влево. Я снижу значение до 0%, чтобы сделать правую сторону градиента полностью прозрачной. Вы также можете создать частичную прозрачность градиента, выбрав значение в пределах от 0% до 100%.
Обратите внимание, что цвет контрольной точки непрозрачности изменился с черного на белый. Черный цвет означает, что значение непрозрачности равно 100%, белый – что значение непрозрачности равно 0% (полностью прозрачный цвет). Частичная непрозрачность представлена различными оттенками серого. Заметьте также, что шкала градиента теперь имеет переход от сплошного цвета слева до узора шахматной доски справа. Узор шахматной доски отвечает в программе Photoshop за изображение прозрачности:
Уменьшаем значение непрозрачности контрольной точки справа до 0%
Опция прозрачность
Градиент «От основного к прозрачному» в основном используется для затемнения краев изображения или затемнения неба на фото. Одним словом, чтобы повысить детализацию изображения. Когда вы работаете с этим видом градиента, обращайте внимание на опцию Transparency (Прозрачность), она всегда должна быть активна.
В ином случае прозрачность отключается, и рабочая область заполняется выбранным цветом переднего плана.
Что такое градиент
Термин «Градиент» в графических реакторах означает эффект плавного перехода от одного цвета к другому. Достаточно часто градиент используется на различных изображениях, в дизайне одежды и других областях. Такой плавный переход выглядит достаточно эффектно, его можно сделать ярким и сочным или наоборот спокойным в пастельных оттенках. Все зависит от желания пользователя и его целей.
Стили градиентов
До сих пор в качестве примеров мы рассматривали линейный градиент, это один из пяти градиентных стилей Photoshop.
На панели параметров чуть правее палитры градиентов вы можете увидеть пять значков стилей: Linear (Линейный), Radial (Радиальный), Angle (Конусовидный), Reflected (Зеркальный) и Diamond (Ромбовидный).
Ниже я подробно расскажу о каждом из них. Нажимайте комбинацию клавиш Ctrl + Alt + Z до тех пор, пока не отменятся все предыдущие шаги, и слой Gradient будет пустой. В палитре градиентов выберите градиент «От основного к фоновому».
Нажмите D на клавиатуре, чтобы сбросить цвета переднего плана и фона и установить их по умолчанию на чёрный и белый.
Линейный
Линейный стиль градиента в Photoshop выбран по умолчанию, он расположен первый по счету.
Из этого урока вы уже познакомились с градиентом в линейном стиле. Создается он от начальной точки до конечной по прямой линии в определенном направлении. Опция Reverse (Инверсия) на панели параметров поможет поменять цвета местами.
Радиальный
Радиальный стиль (второй значок по счету) – градиент получается в виде окружности в направлении от начальной точки.
Отмените линейный стиль Ctrl + Z, для создания радиального градиента кликните мышкой в центре документа и переместите курсор к краю.
Вот так выглядит радиальный градиент. Начинается он с цвета переднего плана (чёрный) и к краю переходит в цвет фона (синий).
Если бы опция Инверсия была бы активна, то цвета градиента поменялись бы местами.
Конусовидный
Конусовидный стиль (средний значок) – это вращающийся градиент по оси в 360 градусов от одного цвета к другому.
Подобно радиальному, конусовидный стиль так же создается от центра. Переход цветов происходит путем заворачивания их вокруг начальной точки в направлении по часовой стрелке. Отмените предыдущий градиент, сделайте клик в центре документа и переместите курсор к краю.
При активной опции Инверсия цвета, как в других градиентах, поменяются местами.
Зеркальный
Зеркальный стиль (четвертый значок по счету) очень похож на линейный, разница лишь в том, что он как бы отражает сам себя и в итоге возвращается к начальному цвету.
Протяните линию градиента из центра к верхнему краю.
В итоге верхняя половина документа схожа с линейным градиентом, в нижней части получается зеркальное отражение, отсюда и название этого стиля.
Вот, что получится, если инвертировать цвета зеркального градиента:
Ромбовидный
Самый последний стиль по счету – это ромбовидный. Он подобен радиальному стилю, но в итоге получается форма ромба.
Проведите линию градиента от центра документа к краю.
В центре получается форма ромба, отсюда его название.
Инверсия цветов.
Удаление цвета
Для того чтобы удалить из градиента какой-либо цвет, кликните по его контрольной точке для выбора, затем начните перемещать точку вниз за шкалу градиента до тех пор, пока она не исчезнет. Я удалю голубой цвет, кликнув по его контрольной точке для выбора:
Выбираем голубую контрольную точку цвета
Я перемещу ее вниз за шкалу градиента, и нам станет видно, что голубой цвет из градиента исчез, в то время как красный и желтый цвета остались. Программа Photoshop при редактировании градиентов дает нам возможность отменить одно действие, поэтому если вы по ошибке удалили нужный цвет, просто нажмите сочетание клавиш Ctrl+Z (Win) / Command+Z (Mac), чтобы отменить последнее действие и восстановить цвет:
Перемещаем контрольную точку цвета вниз для ее удаления
Режимы и непрозрачность
На панели параметров остались ещё две незатронутые опции – это режимы и непрозрачность. Подробно рассматривать мы их не будем. Эти опции влияют на то, как градиент будет гармонировать с содержимым других слоёв. Если вы знакомы с режимами наложения слоёв, то для градиентов они работают примерно так же. И функция Непрозрачность работает подобно непрозрачности в панели слоёв. Теперь вы знаете, что такое градиенты, для чего они нужны и какие виды и стили их бывают. Надеюсь из этой статьи вы узнали для себя что-то новое и полезное.
Выводы
Что главное в изменениях веб-дизайна? Человеческое восприятие цвета, его сочетания с другими цветами и оттенками. И таковое положение дел приводит к тому, что цвет является одним из мощных элементов дизайна. Причем любого: реального или виртуального. И понимание этого требует от веб-дизайнера всегда наблюдать за тем, как дизайн, в целом, эволюционирует, как меняются тенденции, что нравится людям, а что нет, к чему они тяготеют и кто задает новые веяния в использовании цветов.
В свою очередь, градиенты позволяют человеку воспринимать цвет, как нечто объемное в плоскости экрана. Они добавляют самым обычным фотографиям немного жизни, а простые изображения приобретают реалистичность. Мы привыкли видеть, как на склонах гор играет свет солнечных лучей и прекрасно осознаем, что фотография запечатлела только один момент из бесконечного множества. Но если добавить градиенты света-тени, лучей и оттенков общей гаммы, то на минуту покажется, что картинка чуть-чуть ожила. На плоском экране монитора это выглядит волшебно.
Придайте градиент обычному однотонному фону и получите объем, а пользователю захочется иногда заглянуть за край монитора: «вдруг там еще что-то есть
».
Роль градиентов огромна и их использование в Photoshop также почти безгранично. А значит, создавать уникальные проекты веб-дизайнерам чуть проще, ибо каждый градиент в отдельности уже представляет собой что-то новое.
Строим непрерывный цветопереход
Цветами управляют движки (они же контрольные точки, они же маркеры) в нижней части шкалы градиента, а верхние ползунки отвечают за непрозрачность. Контрольная точка добавляется щелчком по соответствующей границе панели выбора эффекта.
Щелчок по контрольной точке цвета/непрозрачности активирует окошки выбора краски/непрозрачности, позиции на шкале (%) и кнопку «Удалить». При этом по обе стороны от нового маркера редактор помещает средние точки (ромбики) цвета/непрозрачности, «молчаливо» занимающие срединное положение между соседними контрольными точками-маркерами, но их тоже можно передвигать. В средних точках цвета градиент в «Фотошопе» отображает равные смеси начального и конечного цветов, ну а средние точки непрозрачности в комментариях вряд ли нуждаются.
Цвета выбираются двойным щелчком по контрольной точке или по образцу цвета в разделе «Контрольные точки». Если курсор окажется внутри панели выбора градиента, он превращается в пипетку, которой можно выбрать цвет на шкале или прямо на изображении.
Движком «Гладкость» регулируется плавность перехода между разноцветными и разнотонными полосками.
Использование инструмента
В программе уже реализован специальный инструмент, который позволяет пользователю применять эффект плавного перехода на изображениях. Расположен он на панели инструментов и выглядит следующим образом:
Также его можно вызвать, кликнув на клавишу G в активном окне приложения. После чего указать направление цветового перехода на слое.
Когда все параметры будут заданы программа сделает переход от одного цвета к другому.