Как пользоваться градиентом в фотошопе cs6: Использование градиентов в Photoshop

Содержание

Как сделать градиент в Adobe Photoshop

Всем привет! Сегодня я хочу рассказать вам о том, как пользоваться инструментами для создания градиентов в Фотошопе.

Градиенты и цветовые переходы часто используются в современном графическом дизайне – этот тренд ворвался в визуальную среду еще в 2018 и все еще не теряет своей актуальности. Дизайнеры используют градиенты для оформления фонов, иконок, типографики и многого другого, а еще с его помощью можно имитировать 3D!

Что самое главное для новичков в Photoshop – сделать градиент очень просто. Давайте разберем процесс на примерах.

Как создать свой градиент в Фотошопе

Откройте инструмент «Градиент». Он находится на панели инструментов в левой части экрана Adobe Photoshop. Если он не отображается сразу – просто кликните правой кнопкой мыши по «Заливке» и выберите его в выпадающем меню.

В верхней части экрана появится изображение градиента. Кликните по нему.

Открылось окно редактора градиентов. Щелкните по контрольной точке, а затем на окошко «Цвет».

Теперь задайте цвет. Я хочу сделать переход от сиреневого к темно-фиолетовому. Выбираю для этой точки наиболее светлый оттенок и нажимаю ОК.

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

Сохраните свой новый градиент, нажав на кнопку «Новый». Теперь он всегда будет лежать в списке градиентов в этом окне.

Как сделать фон градиентом

Чтобы залить фон градиентом, выберите инструмент «Градиент».

Затем кликните мышью в той части экрана, откуда будет начинаться заливка.

Проведите мышью по экрану.

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

А чтобы сделать такой переход, я кликнула и провела мышкой по диагонали справа налево. Попробуйте! Это работает во все стороны.

Как залить объект градиентом

Если делать заливку объектов градиентом в Фотошопе, можно добиться классного эффекта 3D, который в этом году самый трендовый. Я хочу показать вам, как сделать вот такую картинку:

Какой получается объем! На этом примере вы поймете все основные принципы использования градиента на объектах в Photoshop. Смотрите пошаговую инструкцию:

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

Чтобы создать шары, я воспользуюсь инструментом «Эллипс». Находится он вот здесь.

С зажатой клавишей Shift создаю эллипс. Он автоматически появляется на новом слое. В меню «Заливка» можно выбрать цвет.

Теперь дважды кликаю по слою с эллипсом, и появляется окно стилей.

Тут нужно нажать «Наложение градиента» (слева), а потом кликнуть по окошку с градиентом, чтобы настроить цвет.

Я хочу сделать шарик в малиновых тонах. Выбираю, какого цвета будет светлая и теневая сторона шара.

Настраиваю угол, чтобы «освещение» объекта совпадало с градиентом фона.

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

Давайте добавим немного «натуральности», чтобы шарик выглядел объемнее.

Добавляю пункт «Внутренняя тень» и щелкаю по цвету.

Выбираю цвет тени. Пусть уходит в фиолетовый.

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

Теперь я хочу скопировать и изменить размер объекта. Для копирования щелкните по объекту с инструментом «Перемещение» (V на клавиатуре) и с зажатой клавишей Ctrl сдвиньте его в сторону. Объект оказался на новом слое.

Чтобы он масштабировался с эффектами, нажмите правой кнопкой мыши по слою, а затем на «Преобразовать в смарт-объект».

Таким образом я несколько раз копирую и размещаю шарик в разных местах. Далее с помощью инструмента «Перо кривизны» (P) я нарисую еще один объект.

Нужно сделать заливку этого объекта с такими же настройками, как у шаров. Для этого я нажимаю правой кнопкой мыши по слою с первым шаром (который не смарт-объект) и копирую стиль слоя. Эта функция позволяет скопировать все настройки, которые мы делаем в окне стилей слоя.

Теперь нужно щелкнуть правой кнопкой мыши по слою с новой фигурой и вклеить стиль слоя.

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

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

Можете скопировать еще несколько шаров и добавить фильтр «Размытие по Гауссу», чтобы казалось, что они плавают где-то вдалеке. То же самое и для объекта на переднем плане – так будет выглядеть правдивее. Вот вам и имитация 3D в Фотошопе.

Как наложить градиент на текст

Наложить градиент на текст очень просто: мы будем пользоваться тем же окном стилей слоя. Давайте напишем какой-нибудь текст. Я просто возьму слово «Gradient», написанное жирным шрифтом черного цвета. Итак:

Дважды кликните по слою с текстом и выберите «Наложение градиента» в новом окне.

Выберите градиент из готовых наборов либо создайте свой. О том, как сделать собственный градиент, я писала выше в этой статье.

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

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

Как наложить градиент на фото в Adobe Photoshop

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

Откройте фотографию в новом документе и выберите слой с фото.

Пройдите по вкладкам «Изображение» – «Коррекция» – «Карта градиента».

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

Где взять идеи для градиентов: лучшие сервисы

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

Coolors

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

Перейти на ресурс можно по ссылке.

Uigradients

Здесь вы можете посмотреть самые невероятные варианты сочетаний. Хорош сервис тем, что градиенты можно посмотреть в полноэкранном формате. И еще есть маленькая фишка: каждый градиент имеет уникальное название, поэтому выглядит это очень атмосферно. Как вам градиент под именем Moonlit Asteroid?

Изучите остальные варианты здесь.

CoolHue

Небольшая, но очень милая коллекция готовых градиентов. Любой из них можно загрузить в виде PNG-изображения.

Ссылка на официальный сайт сервиса

Заключение

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

Надеюсь, что вы научились создавать и применять градиенты для ваших проектов, изучив этот материал. Удачи!

Эффект складок и складок в Photoshop CS6

В этом уроке по фотоэффектам мы узнаем, как добавлять складки и складки к изображению, чтобы оно выглядело, как если бы оно было сложено и развернуто как карта! Мы будем использовать направляющие и выделения для создания сложенных участков изображения, а также некоторые градиенты, режим наложения слоев и один из фильтров Photoshop для добавления бликов и теней. Мы даже будем использовать собственную кисть, чтобы придать линиям сгиба изношенный вид. Эта версия руководства была полностью обновлена для Photoshop CS6 (версия, которую я буду использовать здесь), а также полностью совместима с Photoshop CC (Creative Cloud). Если вы используете Photoshop CS5 или более раннюю версию, вам нужно ознакомиться с оригинальным руководством «Эффект сгиба и складки в Photoshop».

Вот изображение, которое я буду использовать (фото молодых авиаторов из Shutterstock):

Исходное изображение.

И вот как будет выглядеть конечный результат:

Конечный эффект.

Как создать эффект складок и складок

Шаг 1: Добавить новый пустой слой

Начните с добавления нового пустого слоя в документ. Нажмите на значок « Новый слой» в нижней части панели «Слои»:

Нажав на иконку Новый слой.

Поскольку наш новый слой пуст, он не будет выглядеть так, как будто в документе ничего не произошло. Но если мы посмотрим на панель «Слои», то увидим, что Photoshop добавил новый пустой слой с именем «Слой 1» над исходным изображением на фоновом слое:

Панель «Слои», показывающая добавленный слой.

Шаг 2: Включите Правителей

Далее мы вытащим несколько горизонтальных и вертикальных направляющих, чтобы выручить нас. Однако прежде чем мы сможем это сделать, нам нужно включить линейки Photoshop. Поднимитесь в меню « Вид» в строке меню в верхней части экрана и выберите « Линейки» . Вы также можете включить линейки, нажав клавиши Ctrl + R (Win) / Command + R (Mac) на клавиатуре:

Перейдите в «Просмотр»> «Линейки».

Линейки появятся в верхней и левой части документа:

Линейки отображаются выше и слева от изображения.

Шаг 3: перетащить две вертикальные направляющие

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

Нажмите на левую линейку и вытяните вертикальную направляющую на треть пути по изображению.

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

Нажмите и перетащите вторую вертикальную направляющую, расположив ее на две трети поперек изображения.

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

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

Шаг 4: выберите инструмент Rectangular Marquee Tool

Выберите инструмент Rectangular Marquee Tool на панели «Инструменты» или нажмите букву M на клавиатуре, чтобы быстро выбрать его с помощью ярлыка:

Выбор Прямоугольного Marquee Tool.

Шаг 5: перетащите схему выбора вокруг первого раздела

Выбрав Rectangular Marquee Tool, перетащите выделенный контур вокруг первого раздела (тот, что в левом верхнем углу изображения). Выбор будет привязан к направляющим:

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

Шаг 6: выбери инструмент градиента

Выберите инструмент «Градиент» на панели «Инструменты» или нажмите букву G на клавиатуре, чтобы выбрать его с помощью сочетания клавиш (сочетания клавиш для инструмента «Прямоугольная область» и «Инструмент градиента» пригодятся через мгновение):

Выбор инструмента Градиент.

Шаг 7: выбери черный, белый градиент

Выбрав инструмент «Градиент», щелкните правой кнопкой мыши (Победа) или удерживая нажатой клавишу « Control» (Mac) в любом месте окна документа, чтобы быстро открыть средство выбора градиентов в Photoshop, затем выберите « Черный, Белый градиент», дважды щелкнув его миниатюру (третий эскиз на панели инструментов). слева, верхний ряд). Двойной щелчок по миниатюре выберет градиент и закроет вас из окна выбора градиента:

Двойной щелчок по миниатюре черного, белого градиента.

Шаг 8: нарисуйте градиент от черного к белому через выделение

С инструментом «Градиент» в руке и градиентом «Черный, белый», выбранным из «Выбор градиента», щелкните и перетащите градиент от черного к белому внутри выделения. Я собираюсь перетащить мою по диагонали из нижнего левого угла в верхний правый угол:

Рисование градиента от черного к белому внутри выделения.

Шаг 9: нарисуйте схему выбора вокруг следующего раздела

Вернитесь к инструменту Rectangular Marquee Tool, нажав на клавиатуре букву M, затем перетащите выделенную область вокруг следующего раздела (тот, что находится в верхнем центре):

Вытаскивая контур выделения вокруг верхней средней части.

Шаг 10: нарисуйте градиент от черного к белому через выделение в другом направлении

Нажмите букву G на клавиатуре, чтобы быстро переключиться на инструмент «Градиент», затем щелкните и перетащите градиент от черного к белому внутри второго выделения. Убедитесь, что вы рисуете это в другом направлении, поэтому оба градиента выглядят по-разному. Это добавит разнообразие нашему световому эффекту, как мы скоро увидим:

Рисование второго градиента под другим углом, чем первый.

Шаг 11: Повторите шаги 9 и 10 для оставшихся разделов

Мы должны сделать то же самое для всех шести разделов, но это просто вопрос повторения одной и той же пары шагов для каждого из них. Сначала нажмите букву M на клавиатуре, чтобы переключиться на инструмент « Прямоугольная область», и перетащите контур выделения вокруг раздела, затем нажмите букву G на клавиатуре, чтобы переключиться на инструмент «Градиент», и нарисуйте градиент от черного к белому внутри выделения., рисуя каждый градиент под другим углом, чтобы добавить разнообразие. Когда вы закончите, у вас должен быть градиент по каждому разделу. Нажмите Ctrl + D (Победа) / Command + D (Mac) на клавиатуре после того, как вы нарисовали последний градиент, чтобы удалить контур выделения вокруг него:

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

Шаг 12: скрой правителей и гидов

Нам больше не нужны линейки или направляющие, поэтому, чтобы скрыть линейки, вернитесь в меню « Вид» вверху экрана и снова выберите линейки или нажмите Ctrl + R (Победа) / Command + R (Mac). на вашей клавиатуре. Чтобы скрыть направляющие, перейдите в меню « Вид», выберите « Показать», затем выберите « Направляющие» или нажмите Ctrl +; (Победа) / Command +; (Mac), чтобы отключить их с клавиатуры:

Выберите View> Show> Guides, чтобы скрыть направляющие, когда они видны на экране.

Шаг 13: измени режим смешивания на мягкий свет

Перейдите к параметру « Режим наложения» в верхнем левом углу панели «Слои» и измените режим наложения слоя градиентов с «Обычный» (по умолчанию) на « Мягкий свет» :

Измените режим наложения слоя 1 на Soft Light.

Это превращает наши градиенты в серию бликов и теней на изображении, и мы можем начать видеть, как наш эффект «складок и складок» принимает форму:

Изображение после изменения режима наложения на Soft Light.

Шаг 14: примени фильтр пластиковой обертки

Чтобы вывести линии сгиба немного больше, мы будем использовать фильтр Photoshop’s Plastic Wrap. Перейдите в меню « Фильтр» вверху экрана и выберите « Галерея фильтров» :

Перейдите в Фильтр> Галерея фильтров.

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

Twirl откройте категорию Artistic и выберите Plastic Wrap.

Параметры фильтра «Пластиковая упаковка» находятся в верхней части столбца справа. Установите значение Highlight Strength на 20 и Smoothness на 15, перетаскивая оба ползунка вправо. Затем установите параметр Detail в диапазоне от 5 до 10. Чем выше вы установите значение Detail, тем сильнее будет эффект вокруг линий сгиба, поэтому при перетаскивании ползунка следите за большим окном предварительного просмотра слева. значение, которое вы думаете, работает лучше всего. Я собираюсь установить значение моей детализации в 10:

Параметры фильтра «Пластиковая пленка».

Нажмите OK, когда вы закончите, чтобы закрыть из галереи фильтров. Линии сгиба теперь выглядят немного сильнее:

Изображение после применения фильтра Plastic Wrap.

Шаг 15: добавь еще один новый пустой слой

Нажмите еще раз на значок « Новый слой» в нижней части панели «Слои», чтобы добавить еще один пустой слой, на этот раз над слоем, содержащим градиенты:

Добавление второго нового слоя.

Шаг 16: выбери инструмент кисти

Чтобы еще больше усилить эффект, давайте добавим несколько линий износа к складкам, и мы сделаем это с помощью специальной кисти. Выберите инструмент « Кисть» в Photoshop на панели «Инструменты» или нажмите букву B, чтобы выбрать ее с помощью сочетания клавиш:

Выбор инструмента «Кисть».

Шаг 17: выбери разбрызгивающую кисть из подборщика

Выбрав Brush Tool, щелкните правой кнопкой мыши (Win) / Control-click (Mac) в любом месте окна документа, чтобы быстро открыть Brick Picker и выбрать кисть Spatter 59 пикселей, дважды щелкнув ее миниатюру, которая выберет кисть и закроем вас из палитры кистей (если в настройках Photoshop включены подсказки для инструментов, вы увидите, что имя кисти появляется, когда вы наводите курсор мыши на миниатюру):

Дважды щелкните кисть Spatter 59 пикселей, чтобы выбрать ее.

Шаг 18: открой панель кистей и выбери параметры формы кончика кисти

Выбрав кисть, щелкните значок панели «Кисть» в дальнем левом углу панели параметров вдоль верхней части экрана, чтобы переключить основную панель «Кисти» в Photoshop:

Щелкнув значок панели «Кисть» на панели параметров.

Нажмите на слова « Форма кисти» в верхнем левом углу панели, затем установите круглость кисти на 10% и увеличьте расстояние до 50% :

Настройка округлости до 10% и расстояния до 50% в разделе «Форма кисти».

Шаг 19: выберите параметры формы Shape Dynamics

В левой части панели «Кисть» находится столбец, в котором перечислены различные категории параметров кисти (динамика формы, разброс, текстура и т. Д.). Прежде чем мы пойдем дальше, убедитесь, что ни одна из этих категорий не выбрана, сняв отметку с любой из них, имеющей галочку рядом с их именем. Затем щелкните непосредственно слова « Динамика формы» в верхней части левого столбца, чтобы просмотреть различные параметры «Динамика формы» в основной части панели «Кисти». Убедитесь, что вы нажимаете непосредственно на слова «Shape Dynamics». Не устанавливайте флажок рядом со словами, в противном случае вы просто включите категорию, не получив доступ к каким-либо фактическим параметрам Shape Dynamics.

Увеличьте значение размера джиттера до 100%, переместив ползунок вправо, а затем установите для параметра « Управление» непосредственно под ползунком « Угол джиттера» значение « Направление» . Пока не закрывайте панель, потому что у нас еще есть еще одна категория для выбора:

Настройка размера джиттера до 100% и угла наклона в направлении в параметрах динамики формы.

Шаг 20: выберите параметры двойной кисти

Нажмите непосредственно на слова « Двойная кисть» в столбце слева, чтобы переключиться на параметры «Двойная кисть» в основной части панели «Кисть». Эти параметры позволяют нам смешать вторую кисть с нашей оригинальной. Выберите кисть Spatter 27 пикселей, щелкнув ее миниатюру, затем измените режим в верхней части панели «Кисть» на « Умножение» . Наконец, увеличьте размер кисти примерно до 55 пикселей, а расстояние до 55% . Когда вы закончите, вы можете закрыть панель Brush, нажав на тот же значок панели Brush на панели параметров или нажав F5 на клавиатуре:

Выберите кисть Spatter 27 пикселей, установите для параметра «Режим наложения» значение «Умножение», «Размер» — 55 пикселей и «Интервал» — 55%.

Шаг 21: установите цвет переднего плана на белый

Нам нужно, чтобы цвет кисти был белым, и Photoshop использует текущий цвет переднего плана в качестве цвета кисти, что означает, что мы должны убедиться, что наш цвет переднего плана установлен в белый цвет, прежде чем мы начнем рисовать. Самый простой способ сделать это — сначала нажать букву D на клавиатуре, чтобы восстановить значения по умолчанию для цветов переднего плана и фона (делая цвет переднего плана черным, а цвет фона — белым). Затем нажмите букву X на клавиатуре, чтобы поменять цвета, и цвет переднего плана станет белым. Вы можете увидеть текущие цвета переднего плана и фона в цветовых образцах в нижней части панели «Инструменты»:

Цвет переднего плана (вверху слева) должен быть белым.

Шаг 22: раскрась линии сгиба

Мы готовы рисовать линии износа, но вместо того, чтобы рисовать мазки кистью вручную, щёлкните кистью прямо над первой вертикальной линией сгиба (той, что слева). Не нажимайте и перетаскивайте, просто нажмите:

Нажмите прямо над первой вертикальной линией сгиба.

Затем, удерживая нажатой клавишу Shift, нажмите прямо под той же линией сгиба. Фотошоп автоматически нарисует мазок кисти по прямой линии между двумя нажатыми точками. Вы увидите тонкий белый мазок кисти, идущий вдоль линии сгиба, придавая ему изношенный вид:

Удерживая Shift и нажимая непосредственно под одной и той же линией сгиба, нарисуйте прямой мазок кисти между двумя точками.

Если угол или положение мазка кисти немного смещены, просто нажмите Ctrl + Z (Победа) / Command + Z (Mac) на клавиатуре, чтобы отменить его, затем повторите попытку. Чтобы увеличить интенсивность эффекта износа, добавьте еще несколько мазков поверх первого. Изменение размера вашей кисти с каждым ударом добавит больше разнообразия. Нажатие клавиши левой скобки ( ( ) на клавиатуре сделает кисть меньше. Нажатие клавиши правой скобки () увеличит ее. Просто нажмите над линией сгиба, затем, удерживая нажатой клавишу Shift, щелкните по линии сгиба, чтобы добавить каждый новый мазок кисти:

Изображение после добавления нескольких мазков кисти к первой вертикальной линии сгиба.

Повторите те же шаги со второй вертикальной линией сгиба, чтобы нарисовать несколько мазков, затем сделайте то же самое с горизонтальной линией сгиба, щелкнув кистью слева от линии, затем удерживая Shift и щелкнув справа от линия. Если это поможет, вы можете снова включить направляющие, нажав Ctrl +; (Победа) / Command +; (Mac) на клавиатуре, что может упростить выстраивание линий. Снова нажмите сочетание клавиш, чтобы выключить их. Вот мое изображение после добавления мазков кисти по всем трем линиям сгиба:

Изображение после добавления мазков кисти.

Шаг 23: понизь непрозрачность слоя (необязательно)

Наконец, если мазки кисти выглядят слишком белыми и интенсивными, вы можете добавить их в изображение, уменьшив непрозрачность слоя. Параметр « Непрозрачность» находится прямо напротив параметра «Режим наложения» в верхней части панели слоя. По умолчанию непрозрачность установлена на 100%. Я собираюсь уменьшить мой до 65%:

Понижение непрозрачности верхнего слоя.

И с этим мы закончили! Вот мой последний эффект «складок и складок»:

Конечный результат.

Куда пойти дальше …

И там у нас это есть! Вот так можно добавить складки и складки к изображению с помощью Photoshop CS6 и Photoshop CC! Посетите наш раздел «Фотоэффекты», чтобы узнать больше об эффектах Photoshop!

Как нанести градиент в фотошопе

Как нанести градиент на фото с помощью adobe photoshop

Сегодня мы наконец-то узнаем, как нанести на фото градиент с помощью замечательной программы adobe photoshop…

Почему говорю «наконец-то» а потому, что сам, задавшись таким вопросом, не мог нигде отыскать исчерпывающей информации: сколько ни Яндексил, ни Googleл ни в какую… и нужно сказать, что безрезультатно пытал этот вопрос периодически на протяжении месяцев… — посты попадались или слишком заумные, либо чувствовалось будто б автор сам не знает о чём толкует, сердешный…

А как оказалось, нанести на картинку стили градиента, дело вполне простое. Любому пользователю хватит нескольких минут для обучения… а опыт обретается практическими занятиями с инструментами фотошоп.

Что жж, приступим:

Однако прямо-таки зло вскипает от другого вопроса: кто эти авторы и как они отыскивают и находят заказчиков для своих ТРУДОВ?! ведь их верши, мягко говоря, странны и невразумительны…

Хотя да, нынче множество программ, которые замечательным образом способствуют написанию деревянно-железных текстов: это ещё сегодня называют «лаконичным и деловым информативным языком» ))

Ну, ладно !! бог с ними, с этими писятилями, ваяющими тексты на сумнительных программках прыщавых студентов…

Но мы-то, читатели !? должны быть в здравом рассудке ! Ведь текст, сляпанный программкой-роботом, по которому нельзя ничему выучиться, но возможно больше запутаться — виден невооружённым глазом…

Я за человеческий труд! И пусть текст получается не всегда гладкий слогом, однако, не математически зудящий)) Ведь все мы всегда чему-то учимся…

…и если нынче для вас настройка adobe photoshop и в частности инструмента «Градиент» будет непонятна, смело пишите и ругайтесь. Пропущу любой комментарий!

вернуться к оглавлению

уроки photoshop, как работать инструментом градиент

Итак: прежде всего нужна сама программа adobe фотошоп: если её у вас нет — скачайте и установите. Как это делается правильно, расскажу в следующей статье.

МИГ подписки — ЭРА полезных знаний!!

…а коли уже есть этот замечательный помощник в веб дизайне, — открывайте его!

Выбирайте из своих запасников на компе любую фотографию для редакции. Знаете как, да:

в верхнем горизонтальном меню наводите курсор на имя меню «Файл», а затем «Открыть»…

Фото -1.

В итоге у вас в окошке редакции появится нужная для редактирования в photoshop картинка.

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

Фото — 2.

1 — слева есть вертикальное меню (всевозможные полезные инструменты photoshop) выбираете «Градиент» см. фото:

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

вернуться к оглавлению

adobe фотошоп и подстройка инструментария градиента

Фото — 3.

В регулировках, показанных на фотке 3 немного разберёмся:

Зелёненький овал показывает менюшку настроек adobe photoshop, а именно инструменты цветности градиента (если кликнуть по стрелочке справа)… Советую для начала выбрать светлый, как показано на фотке, ибо проще учиться

Чуть правее зелёной области овала кнопочки, в которых задаётся область отработки градиента (выберете пока крайнюю слева).

Коричневый овал — поставьте такие же как на картинке величины цветового перехода градиента: «Режим» — «осветление» (хотя возможен выбор множества эффектов в выподающем меню). Самые оптимальные «Осветление» и «Линейный осветлитель» — а впрочем, разберётесь сами: ведь требования у нас у всех разные…

Далее подчёркнуто зелёным: поставьте галочку в чекбоксах «Инверсия», «Дизеринг» и «Прозрачность»… Описывать нюансы отработки всяких инверсий не стану, чтобы не путать ваше сознание и цели… Во всём этом замечательным образом разберётесь и без меня: ибо только практическим экспериментом приходят знания.

Коли что неясно, вопрошайте в комментариях.

вернуться к оглавлению

как на картинку нанести градиент в фотошопе adobe

Фото — 4.

фотку можно увеличить…

осветляем нижнюю часть картинки

Теперь самое главное!!

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

чтобы получилась чётко горизонтальная смена цвета — осветления, прижмите одновременно с клавишей мыши клавишу «Shift» и проводите линию как на фото…

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

Таки образом, проведя одну, скажем, до середины, обусловите более плавный переход — другие линии возможно намечать более коротко — резкость и насыщенность перехода…

А все ваши наработки (слои) отмечаются в меню редакций справа. где вы с лёгкостью сможете вернуться (коли не понравится штрих) на ранее выполненный шаг — кликнув на нужный пункт.

По шагам:

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

Чтобы регулировать интенсивность (насыщенность) ЦВЕТА — кликните стрелочку (фото 3) зелёный овал «шахматного» прямоугольника и выбирайте различные цветовые гаммы и оттенки, — словом, творите как душе угодно…

А если кликнете на само размеченное прямоугольное поле менюшки, откроется окно «Редактор градиента» (фото справа от «редиски») — боле тонкие настройки переходов цветовой интенсивности: цветовая яркость… шумовой эффект (опять же различных цветов)…

Вот и вся настроечная работа… Остаётся только экспериментировать…

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

Смею спросить: ну что получается..!?

Тогда смело делитесь с другом в соцсетях.

…а на этой дивной фотке дивы Eniko-Mihalik, и по случаю нашей и студии ATs media fashion вензелной дамой, эксить с градиентом рука не поднимается… ))

МИГ подписки — ЭРА полезных знаний!!

!..подписываясь —
мы расстаёмся с невежеством..!

На этом моё повествование решительно окончено!..

Однако, пользы для, вот вам видео: в нём рассказано о полезной программе менеджере паролей KeePass.

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

Если что-то не ясно и остались вопросы, делитесь ими в комментариях…

Самое время рассказать о статье в соцсетях, буду признателен… complitra.ru !

Как сделать градиент в Фотошопе

Градиент – плавный переход между цветами. Градиенты используются повсеместно – от оформления фонов до тонирования различных объектов. В этой статье мы научимся создавать пользовательские переходы в Фотошопе.

Создание градиентов

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

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

Необходимый инструмент находится на левой панели инструментов.

После выбора инструмента на верхней панели появятся его настройки. Нас интересует, в данном случае, только одна функция – редактирование градиента.

Основные настройки

После нажатия на миниатюру градиента (не на стрелочку, а именно на миниатюру) открывается окно, в котором можно отредактировать существующий градиент или создать свой (новый). Создадим новый. Здесь все сделано немного не так, как везде в Фотошопе. Градиент сначала необходимо создать, затем дать ему имя, а только после нажать на кнопку «Новый».

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

Клик по контрольной точке активирует ее свойства.

Для цветовых точек это смена цвета и позиции, а для точек непрозрачности – регулировка уровня и положения.

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

Все точки можно перемещать вдоль градиента.

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

Удалить контрольную точку можно, нажав на кнопку «Удалить».

Практика

Итак, давайте окрасим точки в какой-нибудь цвет и применим материал к слою.

Активируем точку, нажимаем на поле с названием «Цвет» и выбираем нужный оттенок.
Дальнейшие действия сводятся к добавлению контрольных точек, присваиванию им цвета и перемещению их вдоль градиента. Мы создали вот такой градиент:
Теперь, когда градиент готов, даем ему название и нажимаем кнопку «Новый». Наш градиент появился внизу набора, осталось только применить его на практике.
Создаем новый документ, выбираем соответствующий инструмент и ищем в списке наш только что созданный градиент.
Теперь зажимаем левую кнопку мыши на холсте и тянем градиент.
Получаем градиентный фон из материала, сделанного своими руками.

Вот таким образом можно создавать градиенты любой сложности.

Мы рады, что смогли помочь Вам в решении проблемы.
Опишите, что у вас не получилось. Наши специалисты постараются ответить максимально быстро.

Помогла ли вам эта статья?

ДА НЕТ

Как работать с Редактором градиентов / Creativo.one

В прошлом уроке мы научились рисовать градиенты с помощью инструмента «Градиент». Также мы рассмотрели, как использовать палитру градиентов и выбирать необходимый градиент из множества предложенных градиентов. Однако независимо от того, как много градиентов включено в программу Photoshop, полезнее (и всегда веселее) уметь создавать собственный градиент!

В этом уроке мы научимся создавать, редактировать и сохранять наши собственные градиенты с помощью Редактора градиентов. Далее вы увидите, что Редактор градиентов позволяет не только выбирать необходимый градиент из готовых образцов (как и Палитра градиентов), но и редактировать градиенты, выбирая другие цвета, добавляя новые, изменяя их порядок и удаляя лишние цвета. Мы можем добавлять градиенту прозрачность и даже регулировать переход цветов! И, наконец, мы можем сохранять наш градиент как готовый образец, что позволит нам быстро выбирать его в дальнейшей работе в случае необходимости!

В прошлом уроке мы рассмотрели основы рисования градиентов, поэтому сегодняшний урок мы посвятим изучению Редактора градиентов. Если вы еще не знаете, как использовать инструмент «Градиент» (Gradient Tool) или как рисовать градиенты, я советую вам изучить прошлый урок по рисованию градиентов. В данном уроке я буду работать в версии программы Photoshop CC, но и версия Photoshop CS6 также подойдет. Итак, приступим!

Создаем новый документ

Давайте начнем урок с создания нового документа. Для этого, я перейду в раздел «Файл» (File) в строке меню в верхней части экрана и выберу пункт «Новый» (New):

Выбираем Файл > Новый (File > New)

В результате, откроется диалоговое окно «Новый» (New). Поскольку мы будем изучать сам Редактор градиентов, размер файла для нас не важен. Но если вы работаете вместе со мной, давайте создадим файл того же размера, что и в прошлый раз: Ширина (Width) 1200 пикселей, Высота (Height) 800 пикселей. Параметр «Разрешение» (Resolution) я оставлю без изменения по умолчанию – 72 пикселя на дюйм (pixels/inch), а параметр «Содержимое заднего фона» (Background Contents) — «Белый» (White). Я нажму ОК, когда закончу вводить данные, чтобы закрыть диалоговое окно, и на экране появится новый документ с белым фоном:

Создаем новый файл размером 1200х800 px

Выбираем инструмент «Градиент»

После создания нового документа я выберу инструмент «Градиент» (Gradient Tool) на панели инструментов:

Выбираем инструмент «Градиент»

Открываем Редактор градиентов

Как мы с вами узнали из прошлого урока, после активации инструмента «Градиент» существует два способа выбрать градиент. Мы можем выбрать его из образцов готовых градиентов в Палитре градиентов или создать и отредактировать собственный градиент при помощи Редактора градиентов. Для того чтобы открыть Редактор градиентов, кликните прямо по окошку предварительного просмотра градиентов на панели настроек. Если вы кликните по маленькой стрелке с правой стороны окошка просмотра, то откроете Палитру градиентов, которую мы изучали ранее. Однако на этот раз нам нужен Редактор градиентов, поэтому кликните по самому окошку:

Кликаем по окошку предварительного просмотра градиентов на панели настроек

В результате этого действия откроется Редактор градиентов (Gradient Editor). Вначале он может выглядеть для вас несколько пугающе, но вскоре мы убедимся, что в действительности в нем работать очень легко:

Редактор градиентов

Область готовых образцов градиентов

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

Редактор градиентов разделен на две основных секции: вверху расположена область готовых образцов градиентов (Наборы), внизу – секция редактирования градиентов. Область готовых образцов работает в Редакторе градиентов так же, как и в Палитре градиентов, отображая миниатюры всех готовых образцов градиентов. Для того чтобы выбрать нужный градиент, просто кликните по его миниатюре. Название градиента, по которому вы кликнули, появится под областью готовых образцов:

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

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

Кликаем по иконке шестерни

В конце списка появившегося на экране меню вы увидите другие наборы градиентов, каждый из которых имеет определенную тематику, например, «Гармонизированные цвета» (Color Harmonies), «Металлик» (Metals), «Пастель» (Pastels) и т.д. Для выбора какого-либо набора кликните по его названию. В моем случае, я выберу набор Гармонизированные цвета 1 (Color Harmonies 1):

Выбираем набор «Гармонизированные цвета 1»

Программа спросит вас, необходимо ли заменить текущие градиенты новыми из набора. Если вы нажмете кнопку «Добавить» (Append), вместо замены градиентов программа добавит новые градиенты к уже существующим. Мне нравится, когда на экране у меня порядок и нет нагромождения иконок, поэтому я нажму ОК, чтобы заменить градиенты, тем более восстановить исходные будет очень просто (как мы с вами узнаем позже):

Нажимаем ОК, чтобы заменить текущие градиенты по умолчанию новыми из набора

И теперь нам видно, что вместо исходных градиентов появились новые градиенты из набора:

Градиенты из набора «Гармонизированные цвета 1»

Для восстановления исходных градиентов по умолчанию, опять кликните по иконке шестерни:

Кликаем по иконке шестерни

Затем из появившегося меню выбираем команду «Восстановить градиенты» (Reset Gradients):

Выбираем команду «Восстановить градиенты»

Программа Photoshop спросит вас о необходимости замены текущих градиентов градиентами по умолчанию. Нажмите ОК:

Нажимаем ОК, чтобы восстановить градиенты по умолчанию

И теперь мы снова можем видеть исходные градиенты:

Исходные градиенты были восстановлены

Область редактирования

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

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

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

Или если градиент будет использовать, например, пастельные тона, то, возможно, будет проще сначала загрузить набор «Пастель» (Pastels) и выбрать оттуда готовый образец с подходящими цветами.

По крайней мере, это один из вариантов. Однако на самом деле создавать любой градиент с помощью Редактора градиентов так легко, что часто вы будете для начала просто выбирать один из основных градиентов «Черный, белый» (Black, White). Я выберу его, кликнув по соответствующей миниатюре (третья слева в верхнем ряду):

Выбираем градиент «Черный, белый»

Все параметры и средства редактирования градиентов расположены в нижней части Редактора градиентов. Как только вы выбрали нужный образец градиента, он появится у вас на шкале градиента, которая является для нас рабочей областью. Это то место, где мы будем «строить» наш градиент. В моем случае, поскольку я выбрал черно-белый градиент, шкала стала отражать переход от черного цвета слева до белого цвета справа:

Выбранный градиент появился на шкале предварительного просмотра градиента

Тип градиента

Если вместо градиента с плавным переходом, вы увидите на шкале градиента ряд разноцветных линий, то это значит, что параметр «Тип градиента» (Gradient Type) установлен не на «Непрерывный» (Solid), а на «Шум» (Noise). Мы рассмотрим такие градиенты в отдельном уроке, поскольку они не только выглядят по-другому, но и этапы их создания также другие. В общем говоря, всякий раз, как вы захотите создать обычный градиент с плавным переходом между двумя цветами, вам нужно установить тип градиента «Непрерывный» (Solid).

Убедитесь, что в качестве типа градиента выбран «Непрерывный»

Замена цветов в градиенте

Если вы посмотрите под шкалу градиента, то увидите контрольные точки цвета (образцы цвета в виде маленьких квадратиков со стрелками, указывающими на градиент над ними). На каждый цвет в градиенте приходится по одной точке цвета. Поскольку я выбрал черно-белый градиент, то у него имеется две точки цвета: одна, заполненная черным цветом, слева и другая, заполненная белым цветом, справа. Эти точки цвета указывают программе Photoshop на два важных момента – какие цвета использовать в градиенте и как их разместить:

Контрольные точки цвета под каждым из краев градиента

Для того чтобы изменить текущий цвет, сначала кликните по соответствующей контрольной точке для ее выбора. Далее, кликните по образцу цвета в секции «Контрольные точки» (Stops) в нижней части Редактора градиентов, чтобы выбрать другой цвет. Например, допустим, я хочу изменить цвет в моем градиенте с черного на красный. Для этого, я кликну по черной точке цвета:

Щелкаем по точке того цвета, который вы хотите изменить

Выбрав точку, я кликну по образцу цвета

Щелкаем по образцу, чтобы изменить цвет

В результате, откроется Палитра цветов (Color Picker). Я выберу темно-красный в качестве нового цвета, а затем нажму ОК для выхода из Палитры:

Выбираем в Палитре цветов красный цвет

После этого, мой исходный черно-белый градиент превратится в красно-белый градиент:

Черный цвет в моем градиенте изменился на красный

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

Дважды кликаем кнопкой мыши по белой контрольной точке цвета

В результате двойного щелчка кнопки мыши произойдет мгновенное открытие Палитры цветов. Я выберу желтый цвет и затем нажму ОК, чтобы закрыть Палитру:

Изменяем белый цвет в градиенте на желтый

Таким образом, после нескольких кликов, наш исходный черно-белый градиент превратился в новый красно-желтый градиент:

Новые цвета градиента

Настройка средней точки цвета

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

Значок средней точки цвета

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

Настраиваем область перехода с помощью перемещения средней точки цвета

Параметр «Позиция»

По мере перемещения иконки средней точки цвета параметр «Позиция» (Location) под шкалой градиента меняется, отражая в процентах точное место, где средняя точка расположена между двумя цветами. По умолчанию, значение местоположения средней точки равно 50% (точно посередине между цветами), но после перемещения средней точки влево значение местоположения изменяется до 25%. Другими словами, переход между цветом градиента слева и средней точкой занимает теперь четвертую часть от всей длины градиента, а переход между средней точкой и цветом градиента справа — три четверти от всей длины:

Текущая позиция средней точки цвета

Мы с вами уже рассмотрели, как можно изменить позицию средней точки цвета при помощи перемещения ее значка, однако также мы можем изменить ее месторасположение, введя конкретные значения в окошко ввода данных параметра «Позиция» (Location). Если я захочу, например, переместить среднюю точку с отметки «1/4» до отметки «3/4», то я смогу сделать это, изменив значение параметра «Позиция» с 25% до 75%:

Вручную вводим новое значение параметра «Позиция»

И теперь нам видно, что средняя точка переместилась на отметку 75%, одновременно удлинив расстояние между красной точкой цвета и средней точкой и сократив расстояние между средней точкой и желтой точкой цвета:

Новая позиция средней точки цвета

Я верну среднюю точку обратно на ее исходную позицию по молчанию, установив значение параметра «Позиция» (Location) на 50%:

Средняя точка вернулась обратно на середину градиента

Добавление к градиенту цветов

Для того чтобы добавить к градиенту новых цветов, все, что нужно – кликнуть под градиентом по тому месту, где следует добавить новый цвет. Программа Photoshop добавит на данную позицию новую контрольную точку цвета. Например, для добавления третьего цвета между двумя исходными цветами, я кликну в нужном месте под градиентом (обратите внимание, что я кликаю под значком средней точки, а не по нему):

Кликаем кнопкой мыши в соответствующем месте, чтобы добавить третий цвет

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

Дважды кликаем кнопкой мыши по новому образцу цвета

Затем в появившейся Палитре цветов выберите нужный цвет. В моем случае, я выберу голубой:

Выбираем для градиента третий цвет

Далее я нажму ОК, чтобы закрыть Палитру цветов, и мой двухцветный градиент преобразовался в трехцветный. Не так уж и плохо, особенно учитывая, что мы изначально выбрали черно-белый градиент:

Третий цвет был добавлен

Перемещение цветов в градиенте

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

Передвигаем цвет с помощью перемещения его контрольной точки вдоль градиента

Второй способ перемещения цвета – это кликнуть по его контрольной точке для выбора цвета, а затем ввести в окошко ввода данных параметра «Позиция» конкретные значения. Я кликну по желтой точке цвета, чтобы ее выбрать. Обратите внимание, что ее текущая позиция равна 100%:

Выбираем желтую точку цвета

Я изменю местоположение точки, введя значение, равное 50%, что приведет к перемещению желтой точки на середину градиента:

Перемещаем цвет с помощью ввода новых значений параметра «Позиция»

Далее я кликну по голубой точке цвета, чтобы выбрать ее:

Выбираем голубую точку цвета

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

Перемещаем голубую точку цвета до конца правого края градиента

Удаление цвета

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

Выбираем голубую контрольную точку цвета

Я перемещу ее вниз за шкалу градиента, и нам станет видно, что голубой цвет из градиента исчез, в то время как красный и желтый цвета остались. Программа Photoshop при редактировании градиентов дает нам возможность отменить одно действие, поэтому если вы по ошибке удалили нужный цвет, просто нажмите сочетание клавиш Ctrl+Z (Win) / Command+Z (Mac), чтобы отменить последнее действие и восстановить цвет:

Перемещаем контрольную точку цвета вниз для ее удаления

Копирование существующего цвета

Еще один способ добавления цвета к градиенту заключается в создании копии существующего цвета. Для этого, необходимо нажать и удержать клавишу Alt (Win) / Option (Mac) по мере выделения контрольной точки цвета и перемещения ее вправо или влево. Таким образом, вместо передвижения исходной точки вы переместите копию точки, которую впоследствии можно разместить на вашем градиенте в нужном месте.

Предположим, что я в действительности хочу создать градиент с переходом от красного к желтому цвету и опять к красному. У меня уже есть красный цвет с левой стороны градиента. Вместо того чтобы добавить еще один цвет к градиенту и вручную подобрать в Палитре цветов тот же оттенок красного, я просто нажму и удержу клавишу Alt (Win) / Option (Mac), затем кликну по красной точке цвета и перемещу ее вправо, создав точную копию:

Кликните по точке цвета и переместите ее при нажатой клавише Alt (Win) / Option (Mac), чтобы создать копию

Далее я перемещу точку до правого края градиента и таким образом создам градиент с переходом от красного к желтому цвету и обратно к красному:

Создание копий точек цвета позволяет с легкостью добавлять те же самые цвета к различным частям градиента

Добавление прозрачности

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

Контрольные точки непрозрачности

Некоторые из готовых образцов градиентов уже содержат прозрачность, некоторые – нет, но мы с легкостью можем добавить ее к градиенту по мере необходимости. Например, если я хочу, чтобы мой градиент имел переход от сплошного цвета слева до полностью прозрачного справа, то я могу достичь этого, кликнув по точке непрозрачности, расположенной над шкалой градиента с правой стороны. В результате, станут активными опции прозрачности в секции «Контрольные точки» (Stops) под градиентом. Обратите внимание, что текущее значение параметра «Непрозрачность» (Opacity) 100%, и это означает, что на данном участке градиента прозрачности нет совсем:

Выбираем контрольную точку непрозрачности с правой стороны

Для того чтобы добавить прозрачность, я кликну по стрелке с правой стороны от текущего значения непрозрачности и уменьшу значение параметра, переместив бегунок влево. Я снижу значение до 0%, чтобы сделать правую сторону градиента полностью прозрачной. Вы также можете создать частичную прозрачность градиента, выбрав значение в пределах от 0% до 100%.

Обратите внимание, что цвет контрольной точки непрозрачности изменился с черного на белый. Черный цвет означает, что значение непрозрачности равно 100%, белый – что значение непрозрачности равно 0% (полностью прозрачный цвет). Частичная непрозрачность представлена различными оттенками серого. Заметьте также, что шкала градиента теперь имеет переход от сплошного цвета слева до узора шахматной доски справа. Узор шахматной доски отвечает в программе Photoshop за изображение прозрачности:

Уменьшаем значение непрозрачности контрольной точки справа до 0%

Перемещение контрольных точек непрозрачности

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

Перемещаем контрольную точку непрозрачности от левого края до центра градиента

Добавление контрольных точек непрозрачности

Во-вторых, я могу оставить две исходных точки непрозрачности на их исходных позициях и просто добавить третью точку над серединой шкалы градиента. Для начала я верну контрольную точку непрозрачности обратно на ее исходную позицию в левой части градиента, изменив значение параметра «Позиция» (Location) с 50% на 0%:

Так же, как и контрольные точки цвета, контрольные точки непрозрачности можно перемещать с помощью изменения значения параметра «Позиция»

Далее я кликну над шкалой градиента в том месте, где я хочу добавить новую точку, в моем случае — в середине:

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

Программа Photoshop добавит новую точку непрозрачности. Обратите внимание, что значение параметра «Непрозрачность» (Opacity) для данной точки уже равно 100%, поэтому нам его менять не нужно. Однако я мог бы при необходимости ввести любое значение непрозрачности от 0% до 100%. Также заметьте, что значение параметра «Позиция» (Location) равно 50%, но снова, при необходимости я мог бы изменить данное значение либо с помощью перемещения самой точки, либо ввода нового значения в окошко параметра «Позиция». Вы можете добавлять к градиенту столько контрольных точек непрозрачности, сколько вам требуется для лучшего контроля перехода цвета:

Каждая точка непрозрачности полностью независима от других

Вы можете копировать существующие контрольные точки непрозрачности, так же как вы это делали с контрольными точками цвета. Просто нажмите и удержите клавишу Alt (Win) / Option (Mac) при перемещении точки непрозрачности влево или вправо, чтобы создать копию и поместить ее в нужном месте. Так же, как и в случае с контрольными точками цвета, вы можете увидеть значок средней точки непрозрачности для каждого набора точек непрозрачности. Кликните по данному значку и переместите его поближе к одной или к другой точки непрозрачности, чтобы настроить нужным образом переход между цветами:

Смещаем среднюю точку непрозрачности вправо

Удаление контрольных точек непрозрачности

Чтобы удалить контрольную точку непрозрачности, кликните по ней для выбора и далее переместите вверх за пределы градиента до тех пор, пока она не исчезнет. Я удалю точку непрозрачности с правого края, кликнув по ней и переместив вверх. Поскольку только у этой точки из трех существующих степень непрозрачности (Opacity) отличалась от 100%, при ее удалении наш градиент опять стал полностью непрозрачным:

Удаляем контрольную точку непрозрачности справа

И наконец, чтобы вернуть градиент к исходному состоянию (хотя это не требуется, поскольку у градиента больше нет прозрачных участков), я кликну по контрольной точке непрозрачности в середине градиента и перемещу ее вправо:

Перемещаем контрольную точку непрозрачности из середины градиента в правую часть

Параметр «Гладкость»

Последний параметр, который нам надо рассмотреть в сегодняшнем уроке – параметр «Гладкость» (Smoothness), который отвечает за плавность и постепенность перехода между основными цветами. По умолчанию, его значение равно 100%, и все переходы распределены как можно более равномерно. По мере уменьшения его значения, при переходе между цветами появятся дополнительные тени, что приведет к появлению в градиенте нежелательных полос. В большинстве случаев, лучше оставлять параметр «Гладкость» равным 100%:

Параметр «Гладкость»

Сохранение градиента в качестве нового образца

Когда вы будете довольны видом получившегося градиента, вы можете сохранить его как новый образец. Для этого, сначала введите название градиента в поле «Имя» (Name). Я назову свой градиент «Красно-желто-красный»:

Даем название новому градиенту

Затем, кликните по кнопке «Новый» (New):

Щелкаем по кнопке «Новый»

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

Новый градиент появится в области готовых образцов градиентов

Когда вы закончите, нажмите ОК, чтобы закрыть Редактор градиентов:

Щелкните по кнопке ОК

И вот мы закончили! Мы научились создавать, редактировать и сохранять собственные градиенты с помощью Редактора градиентов!

Автор: Стив Паттерсон (Steve Patterson)

Как сделать градиент в Photoshop. Градиент в дизайне — Медиасвод

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

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

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

В Фотошопе имеется набор готовых градиентов, с разной формой цветовых переходов.

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

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

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

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

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

Радиальный градиент обеспечит цветовой переход от центральной точки к радиусу.

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

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

Конусовидный градиент выполняет затенение в виде спирали, развернутой против часовой стрелки вокруг начальной точки.

Зеркальный градиент

Зеркальный градиент отражает один и тот же линейный градиент по обе стороны от начальной точки.

Ромбовидный градиент

Ромбовидный градиент выполняет цветовой переход от центра к углам ромба.

Как создать градиент в фотошопе

Чтобы создать градиент в фотошопе, выберите область, которую будете заливать. Если этого не сделать, градиентная заливка применяется ко всему активному слою. Выберите инструмент «Градиент».

На панели параметров в поле с образцом градиента выберите вид градиента.

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

Посмотрите видеоурок о том, как создать неоновый градиент

Как создать градиент с прозрачностью

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

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

Как создать сложный градиент из трех и более цветов

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

Обзор редактора градиентов

Чтобы открыть «Редактор градиентов», щелкните ЛКМ по текущему образцу градиента на панели параметров.

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

Как сохранить градиент

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

Кроме того в редакторе градиентов можно загрузить готовые градиенты, найденные на просторах Интернета.

Корректирующий слой «Градиент»

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