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

Как рисовать градиенты с помощью инструмента «Градиент» в Photoshop

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

Создание нового документа

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

Идем в Файл> Новый.

Это открывает диалоговое окно New. Для этого урока я установлю ширину моего документа на 1200 пикселей и высоту на 800 пикселей. Нет особой причины, по которой я использую этот размер, поэтому, если вы работаете вместе со мной и думаете о другом размере, не стесняйтесь использовать его. Я оставлю для параметра « Разрешение» значение по умолчанию, равное 72 пикселям / дюйм , и буду следить за тем, чтобы для параметра « Содержимое фона» было установлено значение « Белый» . Я нажму OK, когда закончу, чтобы закрыть диалоговое окно, после чего на экране появится новый белый документ:

Новое диалоговое окно.

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

Инструмент « Градиент» в Photoshop находится на панели «Инструменты» в левой части экрана. Я выберу его, нажав на его значок. Вы также можете выбрать инструмент Градиент, просто нажав клавишу G на клавиатуре:

Выбор инструмента «Градиент» на панели «Инструменты».

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

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

Photoshop ; другой — открыв большой редактор градиентов . Разница между ними заключается в том, что Gradient Picker просто позволяет нам выбирать из готовых предустановленных градиентов, а в Gradient Editor, как следует из его названия, мы можем редактировать и настраивать наши собственные градиенты. В этом уроке мы сосредоточимся на самом Gradient Picker. Мы узнаем все о редакторе градиентов в следующем уроке.

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

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

Нажмите на стрелку, чтобы открыть градиент.

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

Enter (Win) / Return (Mac) на клавиатуре или щелкните любое пустое место на панели параметров, чтобы закрыть средство выбора градиента . Вы также можете дважды щелкнуть по миниатюре, которая выберет градиент и закроется в градиенте:

Выбор градиента.

Загрузка больше градиентов

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

значок шестеренки в правом верхнем углу:

Нажав на значок шестеренки в градиенте.

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

Другие наборы градиентов, которые мы можем выбрать.

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

нажмете «Добавить» , а не заменять исходные градиенты, они просто добавят новые под оригиналами. Как мы увидим через некоторое время, восстановить оригиналы очень просто, поэтому я нажму OK, чтобы заменить их набором Photographic Toning:

Нажмите OK, чтобы заменить исходные градиенты новым набором.

И теперь мы видим в Gradient Picker, что оригинальные градиенты были заменены градиентами фотографического тонирования. Чтобы узнать больше о наборе Photographic Toning и о том, как его использовать, ознакомьтесь с нашим полным руководством по настройкам Photographic Toning :

Оригинальные градиенты были заменены новым набором.

Восстановление градиентов по умолчанию

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

Нажав на значок шестеренки.

Затем выберите « Сбросить градиенты» из меню:

Выбор «Сбросить градиенты».

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

Замена текущих градиентов на значения по умолчанию.

А теперь вернемся к оригиналам:

Градиенты по умолчанию были восстановлены.

Передний план к фоновому градиенту

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

Выбор градиента переднего плана к фону.

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

Образец в верхнем левом углу показывает цвет переднего плана , а образец в нижнем правом — цвет фона . По умолчанию цвет переднего плана установлен на черный, а цвет фона на белый :

Текущие цвета переднего плана (вверху слева) и фона (внизу справа).

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

Рисование градиента с помощью инструмента «Градиент»

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

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

Нажатие и перетаскивание (с нажатой кнопкой мыши) с одной стороны документа на другую.

Когда я отпускаю кнопку мыши, Photoshop рисует градиент. Так как мой цвет переднего плана был установлен на черный, а цвет фона — белый, я получаю градиент от черного к белому:

Photoshop рисует градиент, когда вы отпустите кнопку мыши.

Поменять цвета

Вы можете изменить цвета в вашем градиенте, выбрав опцию Reverse на панели параметров:

Выбор «Обратный» в панели параметров.

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

Тот же градиент, что и раньше, но с перевернутыми цветами.

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

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

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

Новый черно-белый вертикальный градиент.

Изменение цветов градиента по умолчанию

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

Нажав образец цвета переднего плана.

Это открывает палитру цветов Photoshop . Я выберу красный для моего нового цвета переднего плана, затем я нажму OK, чтобы закрыть из палитры цветов:

Выбор красного цвета для нового цвета переднего плана.

Затем я изменю свой цвет фона, щелкнув его образец цвета (тот, который в настоящее время заполнен белым):

Нажав образец цвета фона.

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

Выбор желтого цвета для нового цвета фона.

Обратите внимание, что образцы цветов обновлены, чтобы показать новые цвета, которые я выбрал для переднего плана и фона:

Образцы обновлены новыми цветами.

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

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

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

Рисование нового градиента от левого нижнего до правого верхнего угла документа.

Когда я отпускаю кнопку мыши, Photoshop рисует градиент от красного до желтого по диагонали через документ:

Новый красный или желтый диагональный градиент.

Сброс цветов переднего плана и фона

Обратите внимание, что если я открою свой Gradient Picker на панели параметров, миниатюра градиента переднего плана к фону также показывает мои новые красный и желтый цвета:

Обновленная миниатюра «Передний план — фон» в палитре «Градиент».

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

Образцы переднего плана и фона были сброшены.

И вы увидите, что и панель предварительного просмотра градиента на панели параметров, и миниатюра градиента переднего плана к фону в средстве выбора градиента снова показывают цвета по умолчанию:

Теперь все вернулось к тому, что было изначально.

Рисование градиента на собственном слое

Если мы посмотрим на мою панель «Слои» , то увидим, что до этого момента я рисовал свои градиенты непосредственно на фоновом слое :

Панель «Слои», показывающая градиент на фоновом слое.

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

Собираюсь Правка> Заполнить.

Когда откроется диалоговое окно «Заливка», я установлю для параметра « Содержимое» вверху значение « Белый» , затем нажмите « ОК» . Это заполняет фоновый слой белым цветом:

Диалоговое окно Fill.

Затем я добавлю новый слой для моего градиента, нажав и удерживая клавишу Alt (Win) / Option (Mac) на моей клавиатуре и щелкнув значок « Новый слой» в нижней части панели «Слои»:

Нажмите и удерживайте Alt (Win) / Option (Mac), одновременно нажимая значок «Новый слой».

При добавлении клавиши Alt (Win) / Option (Mac) при нажатии значка «Новый слой» Photoshop сначала открывает диалоговое окно « Новый слой », в котором мы можем назвать слой до его добавления. Я назову свой слой «Градиент», затем я нажму OK :

Диалоговое окно Новый слой.

Photoshop добавляет новый пустой слой с именем «Градиент» над фоновым слоем. Теперь я могу нарисовать свой градиент на этом новом слое и отделить его от всего остального (хотя «все остальное» в данном случае на самом деле является просто фоновым слоем, но это все еще хорошая привычка рабочего процесса, чтобы войти в него):

Теперь у меня есть отдельный слой для моего градиента.

Переходная зона

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

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

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

Рисование градиента с широкой областью перехода.

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

Градиент с постепенным переходом между цветами.

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

Собираюсь Правка> Отменить градиент.

На этот раз я нарисую градиент в том же направлении (слева направо), но с гораздо меньшим промежутком между моей начальной и конечной точками:

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

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

Аналогичный градиент, но с гораздо меньшей площадью перехода.

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

Теперь градиент располагается на собственном слое над фоновым слоем.

Передний план к прозрачному градиенту

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

Выбор переднего плана для прозрачного градиента.

Градиент «Передний план к прозрачному» аналогичен градиенту «Передний план к фону» в том смысле, что он получает свой цвет от текущего цвета переднего плана , что означает, что вы можете легко изменить его, выбрав другой цвет переднего плана. Что делает его особенным, так это то, что второго цвета нет. Вместо этого он переходит от одного цвета к прозрачности.

Я отменю свой текущий градиент, зайдя в меню « Правка» и выбрав « Отменить градиент» . Затем я выберу цвет, щелкнув образец цвета переднего плана на панели «Инструменты». На данный момент установлено черное:

Нажав образец цвета переднего плана.

Когда откроется палитра цветов, я выберу фиолетовый, затем нажму OK:

Выбор пурпурного цвета в качестве нового цвета переднего плана.

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

Теперь градиент переходит от фиолетового к прозрачному.

Я нарисую вертикальный градиент от верхней части моего документа до центра:

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

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

Фиолетовый от градиента, но белый от фона под ним.

Чтобы доказать это, я временно отключу фоновый слой, щелкнув его значок видимости (значок глазного яблока) на панели «Слои»:

Отключение фонового слоя.

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

Фактический градиент от фиолетового до прозрачного.

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

Добавление второго переднего плана к прозрачному градиенту.

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

Градиенты переднего плана и прозрачного были объединены.

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

Включение фонового слоя.

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

Тот же градиент с включенным фоновым слоем.

Опция прозрачности

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

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

Если параметр «Прозрачность» отключен при рисовании градиента «Передний план» в «Прозрачный», все, что вам в итоге нужно будет сделать, — это заполнить слой или выделение выбранным цветом «Переднего плана»:

Если параметр «Прозрачность» отключен, Photoshop не может нарисовать прозрачную часть градиента.

Черный, Белый Градиент

Мы не будем проходить через каждый градиент, который мы можем выбрать в Photoshop (поскольку вы можете легко сделать это самостоятельно), но если вам нужно нарисовать градиент от черного к белому, и ваши цвета переднего плана и фона в настоящее время установлены на что-то другое чем черный и белый, просто захватить черный, белый градиент от градиента Picker (третий эскиз с левой стороны , верхний ряд). В отличие от градиента переднего плана к фону, градиент черного и белого всегда будет рисовать градиент от черного к белому независимо от ваших текущих цветов переднего плана и фона:

Черно-белый градиент миниатюры.

Градиентные стили

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

Если вы посмотрите справа от панели предварительного просмотра градиента на панели параметров, вы увидите пять значков стиля градиента . Начиная слева, у нас есть Линейный , Радиальный , Угловой , Отраженный и Алмазный :

Значки линейного, радиального, углового, отраженного и алмазного градиента.

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

Выбор градиента переднего плана к фону.

Я буду нажимать букву D на клавиатуре, чтобы сбросить цвета переднего плана и фона обратно на черный и белый. Затем, чтобы было интересно, я поменяю цвет фона с белого на светло-синий:

Мои последние цвета переднего плана и фона.

линейный

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

Выбор стиля линейного градиента.

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

Пример стандартного линейного градиента.

радиальный

Radial стиль (вторая иконка слева) нарисует круговой градиент в направлении от начальной точки:

Выбор стиля радиального градиента.

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

Рисование радиального градиента от центра документа.

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

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

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

Тот же радиальный градиент с перевернутыми цветами.

Угол

Стиль Angle (средняя иконка) — это то, где вещи начинают становиться интересными (хотя, возможно, не такими полезными):

Выбор стиля углового градиента.

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

Рисование углового градиента от центра.

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

Стиль угла оборачивает градиент вокруг вашей начальной точки против часовой стрелки.

отраженный

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

Выбор стиля отраженного градиента.

Здесь я щелкаю в центре документа, чтобы установить начальную точку, а затем перетаскиваю вверх:

Рисование градиента в отраженном стиле.

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

Градиент отраженного стиля.

Вот как будет выглядеть отраженный градиент с обращенными цветами:

Градиент в отраженном стиле с реверсом, выбранным на панели параметров.

ромб

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

Выбор стиля градиента бриллианта.

Я еще раз щелкну в центре моего документа, чтобы установить начальную точку, а затем уйду от нее:

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

Когда я отпускаю кнопку мыши, мы получаем интересную форму ромба:

Градиент в алмазном стиле.

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

Алмазный градиент с обращенными цветами.

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

Последний вариант, который мы должны рассмотреть на панели параметров, — это сглаживание . С выбранным Dither, Photoshop будет смешивать немного шума с вашими градиентами, чтобы помочь сгладить переходы между цветами. Это помогает уменьшить полосы (видимые линии, которые образуются между цветами, когда переходы не являются достаточно гладкими). Опция Dither включена по умолчанию, и вы обычно хотите оставить ее выбранной:

Параметр «Сглаживание» помогает уменьшить уродливые полосы между цветами.

Параметры режима и прозрачности

На панели параметров есть несколько других параметров инструмента «Градиент», которые мы сохраним для другого учебника, поскольку они выходят за рамки базовых. Как опция Mode (сокращение от Blend Mode), так и опция Opacity влияют на то, как градиент будет сливаться с исходным содержимым слоя. Если вы знакомы с режимами наложения слоев, режимы наложения градиентов работают примерно так же, а параметр непрозрачности градиента работает так же, как параметр «Непрозрачность» на панели «Слои» . В большинстве случаев вы захотите оставить для них значения по умолчанию, но, опять же, мы подробно рассмотрим эти два параметра в их отдельном учебном пособии:

Опции режима и непрозрачности.

Создание градиентного фона фотошоп. Как сделать градиент в фотошопе (Photoshop)

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

Работа с градиентами.

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

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

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

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

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

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

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

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

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

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

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

1. Выбрать инструмент Gradient на панели инструментов.
2. Щёлкнуть мышкой на том месте изображения,где вы хотите поставить стартовую точку вашего градиента.
3. Не отпуская кнопку мыши, протяните направление градиента.
4. Там, где будет отпущена кнопка мыши вы установите конечную точку градиента.

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

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

Управление градиентом, как и любым инструментом находится на палитре Options.

Photoshop имеет ряд заготовок градиентных переходов. Заготовка включает в себя понятие заранее созданного набора параметров для градиента, т.е. количества ключевых точек, цвета ключевых точек расстояние между ключевыми точками и многие другие, пока неизвестные нам параметры. Если щёлкнуть на треугольничке выпадающего меню заготовок, то можно узреть весь список заготовок, предоставленных нам создателями Photoshop. Этот список можно редактировать, удаляя и добавляя свои заготовки. Справа находится кнопочка для получения дополнительного меню. Разберём подробнее:

• Команда New Gradient вызывает окно редактирования параметров градиента
• Команда Rename Gradient даёт новое название старым заготовкам градиентов.
• Команда Delite Gradient удаляет заготовку.
• Команда Text Only включяет режим палитры, при котором вместо иконок будут только подписи.
• Команда Small Tambnails включяет режим палитры, при котором в палитре будет отображено содержимое в виде небольших по размеру иконок.
• Команда Large Tambnails включяет режим палитры, при котором в палитре будет отображено содержимое в виде больших по размеру иконок.
• Команда Small list включяет режим палитры, при котором в палитре будет отображено содержимое в виде небольших иконок и текстовой информации.
• Команда Large list включяет режим палитры, при котором в палитре будет отображено содержимое в виде больших иконок и текстовой информации.
• Команда Preset Manager вызывает менеджер (интерфейс) позволяющий загрузить заготовки из файлов, сохранить в виде файлов, перименовать и удалить.
• Команда Reset Gradients сбрасывает изменённые настройки заготовок до начальных згначений параметров.
• Команда Load Gradients загружает заготовки из файла. Полезно сохранять удачно получившиеся градиенты для дальнейшего использования.
• Команда Save Gradients сохраняет настройки градиента в виде заготовки.
• Команда Repalce Gradients змещает существующий градиент загружаемым.
• Команда Color Harmonis 1 загружает набор градиентов, который создатели Photoshop считают гармоничным по цветовой гамме.
• Команда Color Harmonis 2 загружает набор градиентов, который создатели Photoshop считают гармоничным по цветовой гамме. Серия №2.
• Команда Metals загружает набор градиентов, иммитирующмх всевозможные металлические блески.
• Команда Noise Samples загружает градиенты с некоторым цветовым «шумом».
• Команда Pastels загружает градиенты пастельных тонов.
• Команда Simple загружает совершенно простые градиенты.
• Команда Special Effects загружает нечто визуально приятное.
• Команда Spectrums загружает градиенты спектральных цветов.

Набор готовых градиентов это здорово, но порою нужно что-то особенное, своё. Для этого существует конструктор градиентов. Вызывается он просто — достаточно щёлкнуть по иконке заготовки на панели Options при выбранном инструменте Gradient. Вашему виду откроется следующее диалоговое окно.

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

1. Foregraund Color — Установить в качестве стартового цвета основной цвет (выбирается на панели инструментов). Это означает, что стартовый цвет вашего градиента всегда будет такой же, как и выставленный вами основной цвет.
2. Background Color — Установить в качестве стартового цвета фоновый цвет (выбирается на панели инструментов). Это означает, что стартовый цвет вашего градиента всегда будет такой же, как и выставленный вами фоновый цвет.
3. User Color — Вы устанавливаете фиксированный стартовый цвет, который можно выбрать в открывшемся диалоговом окне если щёлкнуть по пиктограмме цвета.

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

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

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

Для промежуточных ключевых точек существует ещё несколько характеристик. Параметр Location (поле этого параметра расположено так же внизу диалогового окна) указывает на расстояние между этой точкой и стартовой точкой градиента. Это расстояние измеряется в процентах, а за 100% процентов принимается расстояние между стартовой и конечной точкой.

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

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

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

Есть ещё одно очень полезное свойство у градиента в Photoshop — это локальная, градиентная прозрачность. Название я выдумал жуткое, но на самом деле всё относительно просто. Для проведения эксперемента проведём следующие подготовительные действия. Откройте любой документ (рисунок). Далее создадим новую заготовку градиента нажав кнопочку NEW в редакторе (конструкторе градиентов). У нас будет всего 2 ключевые точки — стартовая и конечная. Задайте обоим точкам одинаковый цвет, к примеру чёрный. Теперь обратите внимание на ползунки над образцом градиента. Это стартовая и конечная точка управления локальной прозрачностью или точнее говоря непрозрачностью. Щёлкните на левом верхнем ползунке (стартовая прозрачность градиента).

В нижней части окна станет доступным поле Opacity. По умолчанию этот параметр равен 100%, т.е. абсолютно непрозрачно. Установите значение opacity для стартовой точки равным 0. Теперь У вас появились шашечки которые свидетельствуют о том, что прозрачность появилась. Если применить полученный градиент в «линейном типе» слева направо, то получится следующая картина:

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

Для получения резких границ можно использовать по две ключевые точки в одном месте (location). Ромбики между ползунками также помогут вам акцентировать прозрачность к началу градиента или к конечной точке. Орла вы сможете взять из папки sample находящейся в папке Adobe. Как только получится, сразу сохраняйте и приносите преподавателю на занятие. Это тоже домашнее задание.

Мы щё не разобрали выпадающее меню Gradient Type. Оно даёт вам возможность выбрать тип перехода. Всего два типа — solid и noise. Состоят в способе фофирования переходных цветов. В случае, если тип solid, то промежуточные пиксели (пиксели находящиеся между статовой точкой и конечной точкой) принимают значение промежуточных цветов (как вы помните пиксел имеет только одно значение — цвет). В случае если тип градиента noise то оттенок цвета получается при перемешивании пикселей начального и конечного цвета в разных пропорциях. Визуально это производит впечатление некоторого «шума».

Теперь, разобрав редактор градиентов вернёмся к палитре Options инструмента Gradient.

Теперь можно переключать тип градиента.

В Photoshop, кроме стандартных типов градиентов, присутствует ещё один тип — отражённый градиент. Он иммитирует блеск на какой либо поверхности.

При нанесении градиента на изображение можно изменять прозрачность инструмента. Это то, что я назвал глобальной прозрачностью. действие такое же как и у прозрачности инструмента «Кисть». Опция REVERSE позволяет менять местами стартовую и конечную точку градиента. Опция Transparency включает или выключает прозрачность настроенную в редакторе градиентов. Так же существует понятие режимов наложение — смысл тот же, что и у кистей (см. урок первый).

• Просмотров: 96403

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

2. Выберите инструмент «Градиент» (1).(Рисунок 2)
Выберите градиентную заливку на панели параметров.
— Щелкните треугольник рядом с образцом градиента(2), чтобы выбрать подготовленный вариант градиентной заливки.(3)
— Выполните щелчок внутри образца градиента(4), чтобы на экране появилось окно «Редактор градиентов»(Рисунок 3).

3.Выберите подготовленный вариант градиентной заливки (1)или создайте новую градиентную заливку(2)(как создать,смотри ниже). Затем нажмите кнопку «ОК»(3).

4. Выберите вариант применяемой градиентной заливки на панели параметров.(Рисунок4)
Линейный градиент (1)
Выполняет затенение от начальной до конечной точки по прямой линии

Радиальный градиент (2)
Выполняет затенение от начальной до конечной точки в виде кругового узора.

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

Зеркальный градиент (4)
Выполняет затенение с использованием симметричных линейных градиентов по обе стороны от начальной точки.

Ромбовидный градиент (5)
Выполняет затенение во все стороны от начальной точки в виде ромбовидного узора. Конечная точка определяет один из углов ромба.

На панели выбора параметров выполните следующие действия.
— Укажите режим наложения(6) и непрозрачность для краски. (7)
— Чтобы сменить порядок цветов в градиентной заливке на противоположный, установите флажок «Инверсия».(8)
— Для создания более гладкого наложения с меньшим количеством полос установите флажок «Дизеринг».(9)
— Чтобы использовать маску прозрачности для градиентной заливки, установите флажок «Прозрачность». (10)

5.Поместите курсор в то место изображения, где необходимо установить начальную точку градиента(1), и перетащите курсор, чтобы определить конечную точку(2). Чтобы ограничить угол наклона линии значением, кратным 45°, удерживайте клавишу «Shift» во время перетаскивания курсора.(Рисунок 5)

7.Создадим новую градиентную заливку:(Рисунок 7)
Чтобы взять за основу нового градиента существующий градиент, выберите градиент в разделе «Наборы» диалогового окна.(1)
— Выберите пункт «Непрерывный» в раскрывающемся меню «Градиент».(2)
— Чтобы определить начальный цвет градиента, щелкните левую контрольную точку цвета (3) .

8.Цвет треугольника над контрольной точкой окрашивается,(1) указывая, что происходит редактирование начального цвета Чтобы выбрать цвет, выполните одно из следующих действий.(Рисунок 8)
— Дважды щелкните контрольную точку цвета(2) или щелкните образец цвета(3) в разделе «Контрольные точки» диалогового окна. Выберите цвет и нажмите кнопку «ОК».
-Выберите параметр во всплывающем меню «Цвет»(4) в разделе «Контрольные точки» диалогового окна.
-Переместите курсор на панель выбора градиента(5) (курсор превращается в пипетку) и щелкните, чтобы произвести выборку цвета, или щелкните в любом месте изображения, чтобы произвести выборку цвета из изображения.
Чтобы определить конечный цвет, щелкните правую контрольную точку цвета (6). После этого выберите цвет.

9. Чтобы откорректировать местоположение начальной(1) или конечной точки(2), выполните одно из следующих действий.(Рисунок 9)
-Перетащите соответствующую контрольную точку цвета влево или вправо в нужное местоположение.
-Щелкните соответствующую контрольную точку цвета и задайте значение для параметра «Позиция»(3) в разделе «Контрольные точки» диалогового окна. При значении 0 % точка помещается в крайний левый конец панели выбора градиента, а при значении 100 % — в крайний правый конец.
Чтобы откорректировать местоположение средней точки(4) (в которой градиент отображает равную смесь начального и конечного цветов), перетащите ромб (4) под панелью выбора градиента влево или вправо или щелкните ромб и задайте значение для параметра «Позиция»(3).

10. Чтобы добавить промежуточные цвета к градиенту, щелкните под панелью выбора градиента(должна появиться рука) для определения еще одной контрольной точки цвета(1). (Рисунок 10)Укажите цвет и откорректируйте местоположение и среднюю точку как для промежуточной точки, так и для начальной или конечной точки.
Для удаления редактируемой контрольной точки цвета нажмите кнопку «Удалить»(2) или перетаскивайте контрольную точку вниз, пока она не исчезнет.(3)
Для управления тем, насколько постепенными должны быть переходы между цветными полосами в градиенте, задайте значение в текстовом поле «Гладкость»(4) или перетащите всплывающий ползунок «Гладкость»(5).
В случае необходимости установите значения прозрачности для градиента(6).
Введите имя для нового градиента(7).
Чтобы сохранить градиент в качестве подготовленного, нажмите кнопку «Новый» (8)после завершения создания градиента.
Примечание. Новые подготовленные градиенты сохраняются в файле настроек и отражаются в наборе под новым именем.. Если этот набор градиентов удален или поврежден или выполняется переустановка градиентов для использования заданной по умолчанию библиотеки, то вновь подготовленные градиенты будут потеряны. Чтобы обеспечить постоянное хранение новых подготовленных градиентов, сохраните их в библиотеке(9).
Если нужно загрузить новый набор градиентов,воспользуйтесь кнопкой «Загрузить»(10)

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

Приятного Вам творчества!!

Источник текста: справка программы Фотошоп(версия 5)

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

• Применить градиент через Gradient Overlay
• Применить градиент инструментом Gradient Tool
• Применить градиент через слой заливки Fill Layer

Я намеренно поставил стили слоя на первое место, потому что на мой взгляд сегодня в Фотошопе это самый разумный способ применения градиента. За ним следует градиент через слой заливки, для задних фонов. Исключением являются ситуации, при которых нам нужно применить простой и быстрый градиент, не требующий никаких изысков. Например, быстро и без затей скрыть часть изображения черно белым градиентом, в режиме Multiply . Другая причина, по которой вы можете захотеть пользоваться этим инструментом Фотошопа — .

В отсутствии возможности настраивать инструмент Gradient Tool на лету лежит основа работы всех инструментов Фотошопа. Мы выбираем инструмент, будь то Gradient Tool , или Brush Tool или Paint Bucket , или Clone Stamp . Кликаем по рабочей области, и получаем результат, в виде изменения пикселей. И этот результат является изменение пикселей на прямую. Он окончателен и его невозможно изменить «на лету» поменяв настройки.

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

Градиент в дизайне

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

Самый простой и доступный способ применить градиент в Фотошопе, это выбрать инструмент Gradient Tool . Кликнуть по рабочей области и не отпуская клавишу мышки, провести курсором по рабочей области.

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

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

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

Панель настроек позволяет нам создавать такой градиент, какой нам нужен. И, конечно, содержит ряд полезных фич. Если у вас нет панели настроек откройте Windows > Options По умолчанию все панели настроек для всех инструментов начинаются с менеджера настроек . Подробности работы этого менеджера можно прочитать в статьях и Preset Manager Tool .

В целом, эта панель позволяет записывать инструменты с заранее готовыми настройками. Допустим, вам постоянно необходим инструмент градиента от черного к невидимому, с прозрачностью 20% и режимом наложения Multiply . Вы проставляете настройки инструменту и записываете их в панель Presets Tool . Теперь ваш шаблон всегда под рукой.

Панель градиента

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

Кликнув по круглой кнопке вы попадаете в меню панели градиента. Это стандартное меню, точно такое же есть и у кистей, стилей, контуров, фигур. Везде это меню делает одно и тоже. Позволяет создать и сохранить новый градиент. Переназвать, удалить. Вызвать Preset manager в котором можно больше всякого. Загрузить новые градиенты, или сохранить те что есть, очистить, вернуть к стандартным настройками и, конечно, загрузить готовые шаблонные коллекции градиентов Фотошопа, которые тоже не лишние.

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

Не сказать что у Фотошопа очень много разновидностей градиента. Вид — это метод, которым фотошоп создает градиент. Всего их пять.

Linear gradient (Линейный градиент) — заливает градиент по прямой линии от цвета А к цвету Б.

Radial gradient (Радиальный градиент) — заливает градиент в виде окружности от цвета А к цвету Б.

Angle gradient (Конусовидный градиент) — создает вращающийся градиент по 360 оси от цвета А к цвету Б.

Reflected gradient (Зеркальный градиент) — вариация линейного градиента, с одной лишь разницей. Этот градиент отражает сам себя и возвращается к первоначальному цвету. В этом случае градиент движется от цвета А, к цвету Б и опять к А.

Diamond gradient (Ромбовидный градиент) — создает ромбовидные градиент от цвета А к цвету Б.

Режимы наложения и невидимость

Режимы наложения как таковые прикручены ко всем инструментам которые могут рисовать. Данные режимы являются неотменяемыми. Вы не сможете сменить их задним числом, как это можно сделать у слоя. Режим применяется сразу и необратимо. Открутить назад можно только в панели Истории History .

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

Интерес представляют следующие три галочки: Reverse , Dither , Transparency . Как обычно о них нет никакой информации нигде. Самые мощные сайты по фотошопу ограничиваются выдержками в пару слов, содранными с официального Хелпа. Интересно, кроме Хронофага их вообще кто-нибудь разбирает?

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

Dither — не очевидная настройка. Что включай, что выключай. Все равно не понятно что происходит. Давайте разбираться. Тема галочки Dither заслуживает отдельной статьи, но я постараюсь объяснить этот момент кратко.

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

Фотошопу нужно как-то распределить градации серого по 1000 пикселям, при этом мы должны получить плавный переход из одной градации в другую. Стоит заметить что ступеней цвета от белого к черному и так не очень много. Их всего 256. То есть идеальный градиент от черного к белому получается на области 256 пикселей. Если же мы хотим применить такой градиент на области в два раза больше, то Фотошопу придется просто дублировать каждую полоску пикселя по два раза. А если градация градиента ещё уже? А область ещё больше? На практике получаются следующие полосы.

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

Transparency — позволяет градиенту быть полупрозрачным. То есть если эта галочка не включена, вы не сможете сделать полупрозрачный градиент в редакторе градиентов. Сделать вы его конечно сделаете, но работать как полупрозрачный он просто не будет. Нет никакого смысла отключать эту галочку. Всегда держите её включенной.

Редактор градиента Gradient Editor

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

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

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

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

Мягкость градиента

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

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

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

На панели редактора градиента вы видите местоположение градиента Location и цвет Color . Location — это местонахождения ползунка на полоске градиента. Цвет можно выбрать из цвета заднего и передних фонов, которые установлены на панели инструментов Tools . Или произвольный цвет, который вы выберете в диалоговом окне Color Picker . Не обязательно выбирать цвет внизу диалогового окна. Вы можете вызвать Color Picker просто кликнув по ползунку дважды.

Манипуляции с ползунками

Активируя ползунок вам становится доступна кнопка удаления. Её тоже не обязательно нажимать чтобы удалить ступень цвета. Для удаления просто утяните ползунок с полоски градиента.

Чтобы добавить новый ползунок, кликните по полоске градиента снизу. Удалить базовые ползунки нельзя. У градиента должно обязательно остаться два ползунка.

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

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

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

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

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

Режимы градиента в Фотошопе

У градиента в Фотошопе есть два режима: Solid и Noise .

• Solid — обычный стандартный градиент, сплошной переход от одного цвета к другому.
• Noise — создает хаотичный шумовой градиент и настраивается совершенно иначе. Переключить режимы можно прямо в диалоговом окне Gradient Editor .

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

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

Чтобы контролировать процесс и получать более менее нужные вам градиенты, рассмотрим настройки цвета и кнопки Randomize .

• Restrict Colors — исключает особенно яркие или перенасыщенные цвета из шумового градиента. То есть если вы эту галочку поставили, то при нажатии на Randomize Фотошоп исключает слишком выбивающиеся из общего ряда цвета.
• Add Transperancy — добавляет невидимость. Если выставить эту галочку вместе с произвольными цветами вы получите и произвольную невидимость. Фотошоп сам будет решать где и как она появится. Она может появиться либо вначале, либо в конце, либо местами в середине, и у вас нет возможности контролировать этот процесс.

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

Лучше переключитесь на более понятную схему HSB . Допустим я хочу получить шумовой градиент в голубой тональности. Тогда я уменьшаю действие ползунков исключая лишний цвет.

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

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

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

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

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

Photoshop является самой популярной программой для обработки изображений растровой графики. Ежедневно количество ее поклонников увеличивается. Поэтому есть смысл рассказать, где градиент в фотошопе находится. Несмотря на то, что инструмент градиент является одним из основных инструментов Photoshop, незнающий человек сразу его не найдет. Итак, где градиент в фотошопе находится?
Выбор инструмента градиент (Рис. 1) осуществляется кликом правой клавиши мыши по группе с инструментом «Заливка» (Paint Bucker) (1) на панели инструментов. При открытии дополнительного окна, кликом левой клавишей мыши непосредственно по иконке «инструмент градиент» (2), переходим в режим работы с градиентами. Так же для перехода в режим работы с градиентами можно воспользоваться клавишей G, или Shift+G, для переключения между инструментами группы.

При этом на панели свойств появятся: изображение градиента в окне активного инструмента (3), окно текущего градиента (4) и кнопки выбора типа градиента (6-10).

Тип градиента выбираем в зависимости от спланированной работы при помощи кнопок на панели параметров (6-10).
Линейный градиент (6) предназначен для градиентной заливки слоя цветом или прозрачностью по прямой линии, вдоль указанного нами направления (включен по умолчанию).

Радиальный градиент (7) определяет переход цвета или прозрачности равномерно во все стороны от той точки, которую Вы задали.

Конусообразный градиент (8) предусматривает переход цвета или прозрачности по спирали, образующую форму в виде конуса.

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

Ромбовидный градиент (10) позволяет задать переход цвета или прозрачности по диагоналям ромба от его центра. Или другими словами — четыре линейных градиента, расходящихся из одной точки под углом 90 градусов относительно друг друга.

В прямоугольном окошке (4) мы с Вами видим текущий вариант градиента (Рис. 2). Если щёлкнуть левой кнопкой мыши по стрелке (5), расположенной рядом, то нам откроется палитра градиентов. Нам остается выбрать нужный градиент, кликнув по нему левой кнопкой мыши.

При клике по стрелке (11) нам откроется меню (Рис. 3), разделенное на несколько подменю. С помощью подменю (12) мы можем настроить вид политры градиентов. В другом подменю (13) находятся доступные нам наборы градиентов, которыми можно заменить набор градиентов, представленный в палитре градиентов.

Кроме уже перечисленных вышее свойств градиента, на панели свойств мы увидим: «Режим» (14), «Непрозрачность» (15), «Инверсия» (16), «Дизеринг» (17) и «Прозрачность» (18).

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

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

Свойство градиента «Режим» предоставляет нам широкий выбор режимов наложения градиента (Рис. 4). Достаточно кликнуть по треугольной стрелки справа от окна текущего режима наложенич градиента и перед нами откроется меню режимов наложения градиента. Используя один и тот же градиент, но разные режимы его наложения, Вы сможите добиться нужного эффекта. Поэкспериментируйте с режимами на одном и том же изображении, чтобы понять какие эффекты они дают. Не забудьте, что сначала выбираем режим, и только затем осуществляем наложение градиента.

Если мы кликнем левой кнопкой мыши по окну градиента (4) (Рис. 2), то откроется редактор градиентов (Рис. 5), который мы и будем использовать для редактирования имеющихся и создания новых градиентов фотошоп.

Теперь давайте перейдем непосредственно к процессу создания (редактирования) градиента.

Современную деятельность нынче тяжело показать вовсе без привычного удобства, который предварительней всего этого выражает теплый плюс устойчиво упорядочен легкий струю, та что идет вместе с кондиционерного также очищающих устройств. С помощью установленной теплоты у комнате люди ипытываем самого себя надежно также смирно, ведь согласно помощью технике можно применить идеальный обстановку, который сделает домашним легко работать важными работой. Откровенно от этого подбор вентиляционной набора или же климатизера является значительным движением, какая собственно в выводе предоставит ваше помещение качественным продуктом, какова выслужитотслужит для Вас много лет.
Фирма «Мастер Климат» Кондиционеры панасоник предоставляет свой значительный комплект стенных, единоканальный, подпотолочных и в виде кассет систем, что уреглируют проблему температурного наблюдения на помещении, офисе иначе химическом фабрике по приятным сложениях к тому же техническим обслуживанием от наших технических мастеров. Веб- сайт фирмы показывает различные модели воздухоподаваемых систем Декайн, Olmo, Leberg, Cooper Hunter или популярных брендов вместе с детальным определением и отзывами. У нас клиенты сможете выделить необходимый предназначенность техники, вытяжных установок или же модели по отоплению по самой выгодной стоимости и 100% обеспечением особенностью. Мастер Климат предугадали касательно клиентского удобстве, потому ориентируемся лишь с проверенными мировыми марками вытяжной техники, что безостановочно растет и делает серии из высшим качеством, предельной тишиной, доступным контрлем, неприхотливостью у обслуживании плюс современномстильным проектировкой.
Осмотреть технику, систему топки либо вытяжной конструкции очень http://master-climat.com.ua/ доступно непосредственно именно на ссылке онлайн странички, потом заявки из клиентом позвонит работающий специалист и если необходимости покажет пользователю по причине необходимого кондиционера. Команда Мастер Климат заинтересована, чтобы потенциальные клиенты видели полный пакетпрограмму по работы и всегда ставали довольны новой продуктом поэтому мастер Климат предоставляем отменный обслуживание касательно доставке, внедрению, размонтировке, уборке, диагностике, наладке также рекомендациях нашей снабжения.
Ваша обеспеченность — потеха в нашей компании, потому наши управленцы зачастую направляемся по прием покупателю плюс устанавливаем лучшие работу относительно установки новых налаженность под уютный помещение.

Инструмент Градиент (Gradient Tool) создаёт заливку с плавным переходом между двумя или несколькими цветами. На протяжении цветовой растяжки могут меняться как цвета, так и прозрачность. Градиент (Gradient Tool) является одним из самых эффективных и часто используемых инструментов Фотошоп, поэтому отличное владение этим инструментом является обязательным условием эффективной работы в Фотошоп.

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

Панель инструментов.

Инструмент Градиент (Gradient Tool) находится в одной группе с инструментом Заливка (Paint Bucker) . Данную группу инструментов можно активировать с помощью клавиши быстрого вызова (G) , либо кликнув на значок Градиента (Gradient Tool) или Заливки (Paint Bucker) в панели инструментов. Чтобы переключиться с одного инструмента на другой, достаточно кликнуть на значке правой клавишей мышки и выбрать нужный инструмент или с помощью сочетания клавиш (Shift + G) .

В рамках данной статьи мы познакомимся с инструментом Градиента (Gradient Tool) , обладающим широкими возможностями в управлении.

Панель настроек инструмента.

Инструмент Градиента (Gradient Tool) имеет свою панель настроек.

1. Выбор градиента.

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

2. Вариант применяемой градиентной заливки.

• Линейный градиент (Linear Gradient) выполняет переход от начальной до конечной точки по прямой линии.
• Радиальный градиент (Radial Gradient) выполняет равномерный переход от центральной точки во все стороны.
• Конусовидный градиент (Angle Gradient) выполняет переход в виде спирали по часовой стрелки вокруг начальной точки.
• Зеркальный градиент (Reflected Gradient) выполняет переход с использованием симметричных линейных градиентов по обе стороны от начальной точки.
• Ромбовидный градиент (Diamond Gradient) выполняет переход в виде ромба.

3. Режим (Mode) наложения градиента.

4. Непрозрачность (Opacity) градиента.

5. Чтобы сменить порядок цветов в градиентной заливке на противоположный, поставьте галочку Инверсия (Reverse) .

6. Для создания более гладкого наложения с меньшим количеством полос установите галочку Дизеринг (Dither) .

7. Поставьте галочку Прозрачность (Transparency) , чтобы прозрачные области также можно было залить градиентом.

Выбор образца градиента.

Чтобы выбрать другой набор градиентов загруженных в Фотошоп, нажмите на треугольник в красном кружке и выберите набор из списка, обведённого красной рамкой.

1. Чтобы добавить скаченный из интернета набор градиентов, выберите команду Загрузить градиенты (Load Gradients) (на скриншоте выше в синей рамке). В открывшемся окне укажите путь к Вашему набору и нажмите Загрузить.

2. Чтобы заменить активный набор градиентов, выберите команду Заменить градиенты (Replace Gradients) и так же в открывшемся окне укажите путь к Вашему набору и нажмите Заменить.

3. Если хотите сохранить созданный Вами набор градиентов, выберите команду Сохранить градиенты (Save Gradients) . В открывшемся окне введите название файла, укажите местоположение для хранения и нажмите Сохранить (расширение файла.grd).

Градиент можно сохранить в любом месте. Но если файл будет помещен в папку с примерным путём: Диск C / Program Files / Adobe / Adobe Photoshop CS3 / Presets / Gradients , то имя градиента появится в списке наборов градиентов (обведён красной рамкой на скриншоте выше) после перезапуска Фотошоп.

4. Чтобы восстановить набор градиентов заданных по умолчанию, выберите команду Восстановить градиенты (Reset Gradients) .

Диалоговое окно «Редактор градиентов» .

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

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

1 . Меню инструмента градиент.

2 . Тип градиента: Непрерывный (Solid) или Шумовой (Noise) . Эти два типа градиентов имеют разные элементы управления.

3 . Гладкость (Smoothness) . Устанавливает плавность перехода между цветами градиента.

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

4 . Контрольная точка Непрозрачности (Opacity) .

5 . Контрольная точка Цвета (Color) .

Для того, чтобы создать новую контрольную точку с промежуточным цветом, достаточно кликнуть в любой точке над или под цветовой полосой градиента. Чтобы удалить контрольную точку нажмите кнопку Удалить (Delete) (10 ).

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

7 . Непрозрачность (Opacity) . Непрозрачностью управляют контрольные точки над цветовой полосой.

8 . Позиция (Location) . Определяет положение контрольной точки на цветовой полосе.

9 . Цвет (Color) . Цветом управляет контрольная точка под цветовой полосой. Чтобы поменять цвет, достаточно кликнуть на образце цвета в окошке и в открывшемся окне Палитры цветов (Color Picke) выбрать нужный цвет.

10 . Удалить (Delete) . Удаляет контрольные точки.

Если Вы хотите сохранить созданный образец градиента, достаточно сделать следующее: в поле Имя (Name) (11 ) введите название созданного градиента. Нажмите кнопку Новый (New) (12 ). Ваш градиент появится в окошке Наборы (Presets) (13 ). Нажмите ОК (14 ).

Чтобы удалить сохранённый градиент из окошка Наборы (Presets) (13 ), кликните на образце градиента в этом окне правой клавишей мышки и выберите в появившемся списке доступных операций команду Удалить градиент (Delete Gradient) . Будьте осторожны, удаляйте только свои сохранённые градиенты!

Ну вот пожалуй и всё. Успеха Вам в освоении этого интересного инструмента!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Практика

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

1. Активируем точку, нажимаем на поле с названием «Цвет» и выбираем нужный оттенок.

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

3. Теперь, когда градиент готов, даем ему название и нажимаем кнопку «Новый». Наш градиент появился внизу набора, осталось только применить его на практике.

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

5. Теперь зажимаем левую кнопку мыши на холсте и тянем градиент.

6. Получаем градиентный фон из материала, сделанного своими руками.

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

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

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

ДА НЕТ

Как сделать градиент фона в фотошопе. Градиентная заливка в программе фотошоп

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

Adobe Photoshop дает дизайнеру очень много возможностей

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

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

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

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

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

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

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

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

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

Процесс создания

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

Прежде всего, следует активировать на панели инструмент «Градиент», сопровождающийся пиктограммой, имеющей форму прямоугольника с неравномерной заливкой.

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

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

В практической деятельности случается так, что желаемый градиент в предлагаемом перечне отсутствует. В этом случае следует уточнить, как установить градиенты в Фотошоп, после чего закачать его на компьютер в формате grd и переместить в папку Gradients, которая размещается внутри корневой папки Adobe Photoshop, чаще всего находящейся на системном диске.

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

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

Дополнительные режимы

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

Процесс применения дополнительных инструментов

Безусловно, даже начинающие дизайнеры, желая постепенно развивать своё творческое мастерство, стремятся первоначально уяснить для себя, как наложить градиент в Фотошопе или как сделать уникальный его вариант?

Используя поле «Непрозрачность», можно варьировать визуальное отображение основного фона, устанавливая параметры прозрачности от 1 до 100%. Следует помнить, что выбрав максимальный показатель, выбранная область после заливки станет полностью непрозрачной.

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

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

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

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

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

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

Инструмент Gradient (Градиент) находится в панели инструментов слева, иконка выглядит так:

Нажав на эту иконку вы увидите сверху настройки градиента:

Нажав на полоску градиента вы попадете в Gradient Editor (Редактор градиента). Здесь задаётся количество точек и цвета переходов. Стандартный набор градиентов должен выглядеть примерно таким образом:

Если вы нажмёте на стрелку, то откроется список всех установленных в фотошоп градиентов:

Чтобы установить новый градиент, нужно положить файл формата.grd в папку фотошопа/Presets/Gradients (Например, C:\Program Files\Adobe\Photoshop CS5\Presets\Gradients). А сейчас я расскажу, как создать свой градиент в фотошопе . В редакторе градиента выберите любой из градиентов (желательно обычный чёрно-белый) и начните редактировать точки:

Затем нажмите кнопку New, и ваш градиент будет сохранён. Для того, чтобы сохранить полученный набор в отдельный файл, нажмите кнопку Save. Обратите внимание, что у нижних точек активны параметры цвета и положения, а у верхних непрозрачности (Opacity) и положения. Таким образом, вы можете сделать градиент прозрачным, уменьшив для одной или нескольких точек параметр Opacity. Ну что, с редактором градиента мы разобрались, теперь остановимся на том, как собственно пользоваться градиентом. Допустим вы настроили нужный градиент, и хотите залить им текущий слой. Нет ничего проще. Для этого выберите точку начала градиента (она будет соответствовать положению 0% на полосе градиента) и протяните градиент в другую часть изображения. Обратите внимание, что чем дальше вы растяните градиент, тем шире будут полосы:

А теперь рассмотрим остальные настройки градиента в фотошопе.

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

Всего существует 5 видов градиента в фотошопе.

— Линейный (Linear). Градиент строится по прямой линии по заданному направлению:

— Радиальный (Radial). Этот тип градиента распределяется равномерно во всех направлениях от заданной точки:

— Конус (Angle). Градиент строится по кругу, начиная из заданной точки:

— Зеркальный (Reflected). Этот градиент представляет собой 2 линейный градиента, распространяющихся в противоположных направлениях:

— Ромб (Diamond). Градиент строится по форме ромба:

Режимы наложения градиента

Галочка Reverse инвертирует цвета градиента:

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

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

На этом я прощаюсь с вами до следующего урока photoshop и желаю вам творческих успехов.

P.S. Не забывайте оставлять комментарии 🙂

В прошлом уроке мы научились рисовать градиенты с помощью инструмента «Градиент». Также мы рассмотрели, как использовать палитру градиентов и выбирать необходимый градиент из множества предложенных градиентов. Однако независимо от того, как много градиентов включено в программу 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 добавит новый градиент к остальным образцам, присвоив ему собственную миниатюру, кликнув по который вы можете в следующий раз выбрать при необходимости новый градиент:

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

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

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

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

Инструмент Градиент (Gradient Tool) создаёт заливку с плавным переходом между двумя или несколькими цветами. На протяжении цветовой растяжки могут меняться как цвета, так и прозрачность. Градиент (Gradient Tool) является одним из самых эффективных и часто используемых инструментов Фотошоп, поэтому отличное владение этим инструментом является обязательным условием эффективной работы в Фотошоп.

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

Панель инструментов.

Инструмент Градиент (Gradient Tool) находится в одной группе с инструментом Заливка (Paint Bucker) . Данную группу инструментов можно активировать с помощью клавиши быстрого вызова (G) , либо кликнув на значок Градиента (Gradient Tool) или Заливки (Paint Bucker) в панели инструментов. Чтобы переключиться с одного инструмента на другой, достаточно кликнуть на значке правой клавишей мышки и выбрать нужный инструмент или с помощью сочетания клавиш (Shift + G) .

В рамках данной статьи мы познакомимся с инструментом Градиента (Gradient Tool) , обладающим широкими возможностями в управлении.

Панель настроек инструмента.

Инструмент Градиента (Gradient Tool) имеет свою панель настроек.

1. Выбор градиента.

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

2. Вариант применяемой градиентной заливки.

• Линейный градиент (Linear Gradient) выполняет переход от начальной до конечной точки по прямой линии.
• Радиальный градиент (Radial Gradient) выполняет равномерный переход от центральной точки во все стороны.
• Конусовидный градиент (Angle Gradient) выполняет переход в виде спирали по часовой стрелки вокруг начальной точки.
• Зеркальный градиент (Reflected Gradient) выполняет переход с использованием симметричных линейных градиентов по обе стороны от начальной точки.
• Ромбовидный градиент (Diamond Gradient) выполняет переход в виде ромба.

3. Режим (Mode) наложения градиента.

4. Непрозрачность (Opacity) градиента.

5. Чтобы сменить порядок цветов в градиентной заливке на противоположный, поставьте галочку Инверсия (Reverse) .

6. Для создания более гладкого наложения с меньшим количеством полос установите галочку Дизеринг (Dither) .

7. Поставьте галочку Прозрачность (Transparency) , чтобы прозрачные области также можно было залить градиентом.

Выбор образца градиента.

Чтобы выбрать другой набор градиентов загруженных в Фотошоп, нажмите на треугольник в красном кружке и выберите набор из списка, обведённого красной рамкой.

1. Чтобы добавить скаченный из интернета набор градиентов, выберите команду Загрузить градиенты (Load Gradients) (на скриншоте выше в синей рамке). В открывшемся окне укажите путь к Вашему набору и нажмите Загрузить.

2. Чтобы заменить активный набор градиентов, выберите команду Заменить градиенты (Replace Gradients) и так же в открывшемся окне укажите путь к Вашему набору и нажмите Заменить.

3. Если хотите сохранить созданный Вами набор градиентов, выберите команду Сохранить градиенты (Save Gradients) . В открывшемся окне введите название файла, укажите местоположение для хранения и нажмите Сохранить (расширение файла.grd).

Градиент можно сохранить в любом месте. Но если файл будет помещен в папку с примерным путём: Диск C / Program Files / Adobe / Adobe Photoshop CS3 / Presets / Gradients , то имя градиента появится в списке наборов градиентов (обведён красной рамкой на скриншоте выше) после перезапуска Фотошоп.

4. Чтобы восстановить набор градиентов заданных по умолчанию, выберите команду Восстановить градиенты (Reset Gradients) .

Диалоговое окно «Редактор градиентов» .

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

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

1 . Меню инструмента градиент.

2 . Тип градиента: Непрерывный (Solid) или Шумовой (Noise) . Эти два типа градиентов имеют разные элементы управления.

3 . Гладкость (Smoothness) . Устанавливает плавность перехода между цветами градиента.

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

4 . Контрольная точка Непрозрачности (Opacity) .

5 . Контрольная точка Цвета (Color) .

Для того, чтобы создать новую контрольную точку с промежуточным цветом, достаточно кликнуть в любой точке над или под цветовой полосой градиента. Чтобы удалить контрольную точку нажмите кнопку Удалить (Delete) (10 ).

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

7 . Непрозрачность (Opacity) . Непрозрачностью управляют контрольные точки над цветовой полосой.

8 . Позиция (Location) . Определяет положение контрольной точки на цветовой полосе.

9 . Цвет (Color) . Цветом управляет контрольная точка под цветовой полосой. Чтобы поменять цвет, достаточно кликнуть на образце цвета в окошке и в открывшемся окне Палитры цветов (Color Picke) выбрать нужный цвет.

10 . Удалить (Delete) . Удаляет контрольные точки.

Если Вы хотите сохранить созданный образец градиента, достаточно сделать следующее: в поле Имя (Name) (11 ) введите название созданного градиента. Нажмите кнопку Новый (New) (12 ). Ваш градиент появится в окошке Наборы (Presets) (13 ). Нажмите ОК (14 ).

Чтобы удалить сохранённый градиент из окошка Наборы (Presets) (13 ), кликните на образце градиента в этом окне правой клавишей мышки и выберите в появившемся списке доступных операций команду Удалить градиент (Delete Gradient) . Будьте осторожны, удаляйте только свои сохранённые градиенты!

Ну вот пожалуй и всё. Успеха Вам в освоении этого интересного инструмента!

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

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

Photoshop является самой популярной программой для обработки изображений растровой графики. Ежедневно количество ее поклонников увеличивается. Поэтому есть смысл рассказать, где градиент в фотошопе находится. Несмотря на то, что инструмент градиент является одним из основных инструментов Photoshop, незнающий человек сразу его не найдет. Итак, где градиент в фотошопе находится?
Выбор инструмента градиент (Рис. 1) осуществляется кликом правой клавиши мыши по группе с инструментом «Заливка» (Paint Bucker) (1) на панели инструментов. При открытии дополнительного окна, кликом левой клавишей мыши непосредственно по иконке «инструмент градиент» (2), переходим в режим работы с градиентами. Так же для перехода в режим работы с градиентами можно воспользоваться клавишей G, или Shift+G, для переключения между инструментами группы.

При этом на панели свойств появятся: изображение градиента в окне активного инструмента (3), окно текущего градиента (4) и кнопки выбора типа градиента (6-10).

Тип градиента выбираем в зависимости от спланированной работы при помощи кнопок на панели параметров (6-10).
Линейный градиент (6) предназначен для градиентной заливки слоя цветом или прозрачностью по прямой линии, вдоль указанного нами направления (включен по умолчанию).

Радиальный градиент (7) определяет переход цвета или прозрачности равномерно во все стороны от той точки, которую Вы задали.

Конусообразный градиент (8) предусматривает переход цвета или прозрачности по спирали, образующую форму в виде конуса.

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

Ромбовидный градиент (10) позволяет задать переход цвета или прозрачности по диагоналям ромба от его центра. Или другими словами — четыре линейных градиента, расходящихся из одной точки под углом 90 градусов относительно друг друга.

В прямоугольном окошке (4) мы с Вами видим текущий вариант градиента (Рис. 2). Если щёлкнуть левой кнопкой мыши по стрелке (5), расположенной рядом, то нам откроется палитра градиентов. Нам остается выбрать нужный градиент, кликнув по нему левой кнопкой мыши.

При клике по стрелке (11) нам откроется меню (Рис. 3), разделенное на несколько подменю. С помощью подменю (12) мы можем настроить вид политры градиентов. В другом подменю (13) находятся доступные нам наборы градиентов, которыми можно заменить набор градиентов, представленный в палитре градиентов.

Кроме уже перечисленных вышее свойств градиента, на панели свойств мы увидим: «Режим» (14), «Непрозрачность» (15), «Инверсия» (16), «Дизеринг» (17) и «Прозрачность» (18).

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

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

Свойство градиента «Режим» предоставляет нам широкий выбор режимов наложения градиента (Рис. 4). Достаточно кликнуть по треугольной стрелки справа от окна текущего режима наложенич градиента и перед нами откроется меню режимов наложения градиента. Используя один и тот же градиент, но разные режимы его наложения, Вы сможите добиться нужного эффекта. Поэкспериментируйте с режимами на одном и том же изображении, чтобы понять какие эффекты они дают. Не забудьте, что сначала выбираем режим, и только затем осуществляем наложение градиента.

Если мы кликнем левой кнопкой мыши по окну градиента (4) (Рис. 2), то откроется редактор градиентов (Рис. 5), который мы и будем использовать для редактирования имеющихся и создания новых градиентов фотошоп.

Теперь давайте перейдем непосредственно к процессу создания (редактирования) градиента.

Современную деятельность нынче тяжело показать вовсе без привычного удобства, который предварительней всего этого выражает теплый плюс устойчиво упорядочен легкий струю, та что идет вместе с кондиционерного также очищающих устройств. С помощью установленной теплоты у комнате люди ипытываем самого себя надежно также смирно, ведь согласно помощью технике можно применить идеальный обстановку, который сделает домашним легко работать важными работой. Откровенно от этого подбор вентиляционной набора или же климатизера является значительным движением, какая собственно в выводе предоставит ваше помещение качественным продуктом, какова выслужитотслужит для Вас много лет.
Фирма «Мастер Климат» Кондиционеры панасоник предоставляет свой значительный комплект стенных, единоканальный, подпотолочных и в виде кассет систем, что уреглируют проблему температурного наблюдения на помещении, офисе иначе химическом фабрике по приятным сложениях к тому же техническим обслуживанием от наших технических мастеров. Веб- сайт фирмы показывает различные модели воздухоподаваемых систем Декайн, Olmo, Leberg, Cooper Hunter или популярных брендов вместе с детальным определением и отзывами. У нас клиенты сможете выделить необходимый предназначенность техники, вытяжных установок или же модели по отоплению по самой выгодной стоимости и 100% обеспечением особенностью. Мастер Климат предугадали касательно клиентского удобстве, потому ориентируемся лишь с проверенными мировыми марками вытяжной техники, что безостановочно растет и делает серии из высшим качеством, предельной тишиной, доступным контрлем, неприхотливостью у обслуживании плюс современномстильным проектировкой.
Осмотреть технику, систему топки либо вытяжной конструкции очень http://master-climat.com.ua/ доступно непосредственно именно на ссылке онлайн странички, потом заявки из клиентом позвонит работающий специалист и если необходимости покажет пользователю по причине необходимого кондиционера. Команда Мастер Климат заинтересована, чтобы потенциальные клиенты видели полный пакетпрограмму по работы и всегда ставали довольны новой продуктом поэтому мастер Климат предоставляем отменный обслуживание касательно доставке, внедрению, размонтировке, уборке, диагностике, наладке также рекомендациях нашей снабжения.
Ваша обеспеченность — потеха в нашей компании, потому наши управленцы зачастую направляемся по прием покупателю плюс устанавливаем лучшие работу относительно установки новых налаженность под уютный помещение.

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

Градиентная прозрачность в Фотошопе

Градиентная прозрачность в Фотошопе делается буквально в два клика.

Шаг 1.  
Открываем изображение. Шаг 2.  
На слое с изображением создаём маску слоя:

чтобы получилось так:

Шаг 3. Выбираем в палитре инструментов Gradient Tool
(линейный градиент от черного к белому) и проводим линию градиента от непрозрачного края до места, где изображение должно быть прозрачным.

Если удерживать нажатой клавишу Shift во время перетаскивания — курсор будет двигался параллельно сторонам картинки.

Градиентная прозрачность изображений

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

Шаг 1.  Открываем изображение (CTRL+O) или создаем новый файл (CTRL+N)

Затем, например, пишем текст, который потом будем растворять в синем фоне.

Шаг 2. На слое с внедренным изображением (в нашем случае текст) создаете маску слоя, кликнув на соответствующей иконке в нижней части палитры слоев, или же из меню Layer > Layer Mask > Reveal All

Шаг 3. Выберите в палитре инструментов Gradient Tool, затем линейный градиент от черного к белому и проведите линюю градиента в окне документа от того края, который должен быть совершенно прозрачен до того места, где изображение должно быть абсолютно непрозрачным. Удерживайте нажатой клавишу Shift во время перетаскивания, чтобы курсор двигался параллельно сторонам документа.

Градиентная прозрачность в Adobe Photoshop

Для создания градиентов (Gradient) в Photoshop используется инструмент «Gradient Tool». В Photoshop у вас есть возможность создавать различные по виду градиенты «Linear gradient», «Radial gradient», «Angle gradient», «Reflected gradient», «Diamond gradient» (для выбора необходимого вам градиента, используйте соответствующие кнопки в панели опций, иконки с образцом вида градиента). Чаще всего используется именно «Linear gradient» (линейный градиент) область заливки равномерно окрашивается в цвета входящие в градиент, линейно в выбранное вами направление.

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

В открывшемся диалоговом окне «Gradient Editor» создайте новый градиент, в поле «Name»

введите название вашего градиента и нажмите на кнопку «New». В поле «Gradient Type» выберите «Solid», в «Smoothness» выставите 100%. Ниже «Smoothness» вы увидите будущий градиент с бегунками выбора цвета сверху и снизу.

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

Щелкните по левому верхнему бегунку и в его параметрах в поле «Stops» выставите 0% у «Opacity» и 0% у «Location».

Перейдите к нижнему левому бегунку (также просто щелкнув по нему). В данных параметрах «Stops» вы также регулируете «Location», выставляя 0%, и выбираете цвет в пункте «Color», прозрачному цвету должен соответствовать белый цвет.

Теперь переходите к правой части бегунков. В параметрах правого нижнего бегунка выберите необходимый вам цвет, в пункте «Location» выставите 100%.

В параметрах верхнего правого бегунка, в «Opacity» и «Location» выставите по 100%.

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

Создание градиента от цветного к прозрачному

Для создания градиентов (Gradient) в Photoshop используется инструмент «Gradient Tool». В Photoshop у вас есть возможность создавать различные по виду градиенты «Linear gradient», «Radial gradient», «Angle gradient», «Reflected gradient», «Diamond gradient» (для выбора необходимого вам градиента, используйте соответствующие кнопки в панели опций, иконки с образцом вида градиента). Чаще всего используется именно «Linear gradient» (линейный градиент) область заливки равномерно окрашивается в цвета входящие в градиент, линейно в выбранное вами направление.

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

В открывшемся диалоговом окне «Gradient Editor» создайте новый градиент, в поле «Name»

введите название вашего градиента и нажмите на кнопку «New». В поле «Gradient Type» выберите «Solid», в «Smoothness» выставите 100%. Ниже «Smoothness» вы увидите будущий градиент с бегунками выбора цвета сверху и снизу.

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

Щелкните по левому верхнему бегунку и в его параметрах в поле «Stops» выставите 0% у «Opacity» и 0% у «Location».

Перейдите к нижнему левому бегунку (также просто щелкнув по нему). В данных параметрах «Stops» вы также регулируете «Location», выставляя 0%, и выбираете цвет в пункте «Color», прозрачному цвету должен соответствовать белый цвет.

Теперь переходите к правой части бегу

Как работать с Редактором градиентов / 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

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

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

1. Сначала создайте новый проект в Photoshop и откройте фотографию заката в качестве основного слоя. Чтобы применить градиент размытия в Photoshop, нужно скопировать изображение, а затем создать маску слоя. Перейдите на панель «Layers», выберите верхнюю вкладку «Layers», а затем щелкните правой кнопкой мыши пустое пространство на панели. Будут отображены дополнительные параметры. Нажмите «Duplicate Layer».  
2. На панели «Layers» щелкните значок в форме глаза рядом с исходным слоем, чтобы скрыть его в главном окне редактирования. Затем создайте маску слоя, выбрав дублирующий слой, а затем щелкнув по прямоугольному серому значку с кругом внутри, который расположен в нижней части панели «Layers». Вы увидите, что маска была применена, когда на дублирующем слое появится белый прямоугольник.  
3. Теперь, когда у вас есть маска слоя, пора создавать прозрачный градиент. Сначала выберите инструмент «Gradient» на главной панели инструментов, а затем перейдите к настройкам градиента в верхней части экрана. Выберите градиент от черного к белому, включите стиль «linear» и параметр «Transparency».     
4. Не снимая выделения с инструмента «Gradient», щелкните и перетащите выделение из левого верхнего угла изображения в левый нижний угол, удерживая клавишу Shift. Ко всему слою будет применен прозрачный градиент с учетом выбранных параметров. 
5. На нашей фотографии заката солнце находится на правой стороне рамки, поэтому теперь мы применим градиент, который добавит размытие слева направо. Сначала вернитесь на панель «Layers» и нажмите на значок в форме глаза около исходного слоя, чтобы отобразить его. Не снимая выделения с дублирующего слоя, перейдите на вкладку «Filter» в верхнем меню и выберите «Blur»> «Gaussian Blur». 
6. Появится новое диалоговое окно с параметром «Radius», который определяет силу эффекта гауссовского размытия. Попробуйте установить несколько разных значений радиуса, посмотрите, как они выглядят в окне предварительного просмотра, и выберите то, которое вам больше нравится. Теперь отдаленный закат на фотографии будет размытым, а градиент размытия будет становиться менее интенсивным при взгляде на передний план. 

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

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

Основная непрозрачность

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

Здесь можно как поработать ползунком, так и ввести точное значение.

Как видим, через наш черный объект частично проступил подлежащий слой.

Непрозрачность заливки

Если основная непрозрачность влияет на весь слой целиком, то настройка «Заливка» не затрагивает стили, примененные к слою.

Предположим, что мы применили к объекту стиль «Тиснение»,

а затем снизили значение «Заливки» до нуля.

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

При помощи такого приема создаются прозрачные объекты, в частности, водяные знаки.

Непрозрачность отдельного объекта

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

Для изменения непрозрачности объект необходимо выделить любым доступным способом.

Читайте статью «Как вырезать объект в Фотошопе»

Я воспользуюсь «Волшебной палочкой».

Затем зажимаем клавишу ALT и кликаем по значку маски в панели слоев.

Как видим, объект полностью пропал из вида, а на маске появилась черная область, повторяющая его форму.
Далее зажимаем клавишу CTRL и кликаем по миниатюре маски в палитре слоев.

На холсте появилось выделение.

Выделение нужно инвертировать, нажав сочетание клавиш CTRL+SHIFT+I.

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

Нажимаем сочетание клавиш SHIFT+F5 и в настройках выбираем цвет.

Нажимаем ОК в обоих окнах и получаем непрозрачность в соответствии с выбранным оттенком.

Выделение можно (нужно) снять при помощи клавиш CTRL+D.

Градиентная непрозрачность

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

Затем выбрать инструмент «Градиент».

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

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

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

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

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

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

ДА НЕТ

Как создать прозрачный градиент в Photoshop

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

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

Выберите инструмент «Градиент» и примените черно-белый градиент к слою изображения.

В приведенном ниже примере градиент применяется к фотографии справа налево.

(1) Исходное изображение.		(2) После применения градиента вы можете увидеть клетчатый узор, который указывает на пустой слой.
(3) Чтобы фотография стала белой, заполните пустой слой сплошным белым цветом.		(4) Чтобы превратить фотографию в другое изображение, поместите второе изображение на слой под фотографией.

.

Как создать и изменить прозрачный градиент в Photoshop

Прозрачный градиент в Photoshop очень полезен для фотографов и графических дизайнеров.

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

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

Как создать прозрачный градиент в Photoshop

Во-первых, давайте добавим фотографию к фону с помощью прозрачного градиента.

Шаг 1. Добавьте новый слой

Откройте фотографию, которую хотите использовать в Photoshop.

Щелкните значок «Создать новый слой» на панели «Слои».

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

Дважды щелкните фоновый слой, чтобы разблокировать его. Щелкните ОК. Теперь щелкните и перетащите новый слой полностью вниз, чтобы он стал фоном.

Шаг 2. Добавьте маску слоя

Выберите слой, содержащий фотографию.

Щелкните значок «Добавить маску слоя» на панели «Слои».

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

Закрасьте белым, и они снова появятся.

Шаг 3: Добавьте прозрачный градиент

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

Выберите инструмент градиента на панели инструментов слева.

В верхнем меню выберите черно-белый градиент.

Убедитесь, что эскиз маски выбран.

Щелкните любую сторону фотографии и перетащите курсор на фотографию ближе к центру.Отпустите половину фотографии.

Часть фото становится прозрачной. Если вам не нравится результат, нажмите Cmd + Z (Ctrl + Z для окон), чтобы отменить и повторно применить градиент. Вы также можете просто снова залить маску слоя белым цветом.

Шаг 4: Заливка фонового слоя

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

Убедитесь, что фоновый слой выбран, и залейте его выбранным цветом.

И это очень простой способ превратить фотографию в фон в Photoshop.

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

Как настроить прозрачный градиент в Photoshop

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

Убедитесь, что выбрали миниатюру маски слоя. Выберите инструмент «Кисть» и установите черный цвет.

Начните закрашивать фото. Чем больше вы рисуете, тем большая часть фотографии становится прозрачной.

Чтобы части фотографии снова стали сплошными, закрасьте белым цветом.

Заключение

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

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

.

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

Прозрачные градиенты чрезвычайно полезны, если вы хотите, чтобы изображение переходило в фоновый или чтобы два изображения переходили друг в друга. Обычно эти градиенты меняются от полной видимости до полной прозрачности, но можно создать эффект с любыми настройками, которые вам нравятся! Ниже мы описали, как создать прозрачный градиент в стиле Photoshop. В этом примере мы будем затемнять фотографию вечерней уличной сцены до сплошного черного. Сначала запустите новый проект Photoshop и загрузите основное изображение, чтобы оно отображалось на панели «Слои» как слой «Фон». Затем выберите инструмент «Прямоугольник» на главной панели инструментов и выберите контрастный оттенок в качестве цвета «переднего плана», чтобы он отличался от вашей уличной фотографии. Теперь нарисуйте прямоугольник над той областью фотографии, где вы хотите получить прозрачный градиент. Для достижения наилучших результатов ваш прямоугольник должен покрывать около 50% фотографии.Чтобы точно настроить размер прямоугольника, вы также можете использовать инструмент «Прямое выделение», чтобы расширить углы после его рисования. Значок инструмента «Прямое выделение» выглядит как простой указатель мыши. После того, как вы нарисовали и разместили прямоугольник, щелкните значок «FX» в нижней части палитры слоев. Появится окно «Стиль слоя» с множеством опций. Выберите вкладку «Gradient Overlay» с левой стороны, и вы увидите настройки для применения градиента к прямоугольнику. На вкладке «Наложение градиента» выберите градиент, который изменяется с черного на белый.Для нашей вечерней уличной сцены мы хотим, чтобы городские здания стали черными, поэтому в нашем конкретном примере мы бы выбрали Угол «90». Это отрегулирует градиент так, чтобы он плавно появлялся снизу вверх. Однако, если вы хотите, чтобы градиент сдвигался слева направо, выберите Угол «0», а справа налево выберите «-180». Затем нажмите на опцию «Цвет градиента» на той же вкладке, чтобы открыть редактор градиента. Здесь вы сможете изменить градиент от черного к белому на прозрачный.Выберите параметр «Непрозрачность» в нижней части редактора, измените его на «0» и нажмите «ОК». Это объединит градиент с исходным цветом вашей фигуры. Теперь вернитесь в редактор градиента («FX»> «Gradient Overlay»> «Gradient»), и на этот раз щелкните настройку «Color» и измените ее на черный. Затем нажмите ОК. Когда вы изначально создавали форму прямоугольника, необходимо было заполнить ее контрастным цветом, но теперь, когда вы применили прозрачный градиент, цвет можно удалить.Для этого выберите прямоугольник в палитре «Слои» и введите «0%» в разделе «Заливка», который находится в той же палитре. Чтобы отрегулировать положение прямоугольника и покрыть большую часть изображения прозрачным градиентом, щелкните верхние углы прямоугольника, а затем удерживайте Shift при перетаскивании, чтобы удлинить форму. Вы также можете использовать инструмент «Прямое выделение», чтобы сразу переместить всю фигуру, не расширяя ее — просто нажмите на прямоугольник и перетащите его, не удерживая клавишу Shift.

.

Как использовать радиальный градиент в Photoshop

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

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

1. Сначала запустите новый проект Photoshop и создайте форму с помощью инструмента «Прямоугольник», расположенного на главной панели инструментов. В этом проекте мы хотим заполнить всю фигуру радиальным градиентом, но Photoshop также позволяет вам выбрать меньшую область фигуры с помощью лассо и применить градиент только к этой части.
2. Выделив фигуру, выберите инструмент «Градиент» на главной панели инструментов.Значок выглядит как прямоугольник, меняющий цвет с черного на белый, и вам может потребоваться сначала щелкнуть и удерживать значок ведерка с краской, чтобы найти его.
3. Инструмент «Градиент» имеет ряд мощных функций, которые можно настроить на верхней горизонтальной панели инструментов. Здесь вы найдете множество значков, соответствующих различным стилям градиента. Чтобы включить радиальный градиент, выберите значок с исчезающим белым кружком посередине.
4. Затем, если вы хотите изменить цветовую схему градиента, дважды щелкните любой из двух цветных квадратов в нижней части главной панели инструментов.Верхний квадрат — ваш начальный цвет (в данном случае цвет исчезающего круга), а нижний квадрат — последний цвет.
5. Наконец, чтобы убедиться, что ваш радиальный градиент начинается в нужном месте (и с правильным цветом), щелкните и удерживайте указатель мыши там, где вы хотите, чтобы градиент начинался. Вы также можете щелкнуть за пределами экрана, если хотите, чтобы на вашей фигуре появлялась только часть затемнения. Затем переместите курсор туда, куда вы хотите, чтобы градиент исчез, продолжая удерживать кнопку мыши.
6. Когда вы отпустите кнопку мыши, к форме будет применен радиальный градиент. Рисование длинной линии до того, как отпустить мышь, приведет к постепенному градиенту, а рисование короткой линии создаст более быстрый градиент. Для еще большего контроля вы можете настроить непрозрачность, гладкость и другие параметры в редакторе градиентов, который можно открыть, щелкнув предварительный просмотр градиента в верхнем левом углу панели инструментов градиента.

.

Оптимизация градиентов в Фотошопе / Хабр

Материал, скорее, для начинающих верстальщиков, например таких, что работают в Microsoft 😉 На тему натолкнула

одна картинка

с одной

популярной странички

:

Дело в том, что весит картинка 55 211 байт. А вот она же, но уже размером 1 764 байт. Если вы думаете, что разница в формате (у меня png, а в оригинале gif), то вы правы лишь отчасти. Попробуйте пересохранить исходное изображение в png, врядли у вас получится серьезный выигрыш (у меня размер получился 45 кб). В общем, дело не в формате.

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

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

Для простоты будем считать, что у нас один компонент цвета, серый. Нам нужен градиент от цвета 10 до цвета 20 (от совсем черного до чуть более светлого) высотой 40 пикселей. Что же делать программе, которая рисует градиент, если промежуточных значений цвета 10, а высота градиента 40 пикселей? У нее есть 2 выхода: либо делать полоски по 4 пикселя одного цвета, либо применять какие-то хитрые маски так, что рядом стоящие пиксели были разного цвета, но их общая интенсивность изменялась равномерно. Понятно, что второй способ может оказаться приятнее для глаз, когда как первый намного лучше поддается компрессии. Чтобы хоть как-то проиллюстрировать различия, я выставил контраст почти на максимум для моей и майкрософтовской картинки:

Дак что там про фотошоп?

Но какой из этих алгоритмов использует Фотошоп? Это зависит от того, стои ли у вас эта галочка на панели инструмента «градиент»:

Кроме того, если градиент рисуется эффектом «Gradient overlay» у слоя, то градиент всегда будет без dither.

Думаю, понятно, что в данном случае удачным выбором будет градиент без dither. Именно он и применен в моей картинке.

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

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

В то же время, вариант с dither смотрится куда лучше:

Правда и весит он, как и картинка, с которой все началось, 50+ килобайт. Для таких случаев я бы порекомендовал сохранить картинку в формате jpg с качеством 100. От этого качество не на много ухудшится, но размер будет волне приемлемым — 8 кб.

(Архивы) Adobe Photoshop CS3: Применение градиента

Эта статья основана на устаревшем программном обеспечении.

Photoshop позволяет выполнять постепенный переход между двумя или более цветами с помощью инструмента Gradient Tool . Градиент можно применить к любой выделенной области изображения или фона. Если область не выделена, градиент будет применен ко всему слою. Photoshop предлагает множество шаблонов для градиента, или вы можете создать свой собственный узор.В этом документе показано, как применять предустановленный градиент.

Заполните область градиентом, щелкнув и перетащив изображение. Начальная и конечная точки влияют на внешний вид градиента по-разному, в зависимости от используемого Gradient Tool .

ПРИМЕЧАНИЕ. Инструмент «Градиент» не работает в режимах Bitmap или Indexed Color.

Выберите цвета переднего плана и фона.

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

В Toolbox выберите Gradient Tool .
ПРИМЕЧАНИЕ. Если инструмент градиента не отображается, щелкните и удерживайте указатель мыши над инструментом Paint Bucket Tool.
Панель инструментов Gradient Tool Options появится в верхней части экрана.

На панели инструментов Gradient Tool Options в раскрывающемся списке Gradient Options выберите параметр градиентной заливки.

В разделе Preset Tools выберите градиентную заливку.

На панели инструментов Gradient Tool Options выберите одно из следующего:

Кнопка	Имя	Описание
	Линейный градиент	Создает градиент, который простирается от одной стороны к другой стороне слоя или выделения.Следует за направлением пути мыши.
	Радиальный градиент	Создает круговой градиент на основе центральной точки и радиуса, которые вы указываете, перетаскивая мышь. Самый внешний цвет градиента распространяется на весь слой или выделение.
	Угловой градиент	Создает градиент от одной точки к другой по наклонной линии.
	Отраженный градиент	Создает градиент, отраженный от центра; дизайн отражается либо вертикально, либо горизонтально.
	Алмазный градиент	Создает градиент в форме ромба, идущий от центральной точки.

(Необязательно) На панели инструментов Gradient Tool Options выберите режим из раскрывающегося списка Mode .

(Необязательно) Отрегулируйте ползунок Непрозрачность до желаемого значения непрозрачности.

(Необязательно) Чтобы уменьшить появление полос в градиенте, выберите Дизеринг .
ПРИМЕЧАНИЯ:
Для некоторых градиентов и цветовых комбинаций функция дизеринга ничего не изменит.
Предварительный просмотр вашего градиента появится на панели инструментов «Параметры градиента».

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

Щелкните и перетащите изображение в том направлении, в котором должен следовать градиент.

Отпустите кнопку мыши.
Градиент применяется ко всему слою.

Как сделать градиент в Photoshop (с изображениями)

Об этой статье

Написано:

Технический специалист

Эта статья написана Николь Левин, МИД. Николь Левин — автор статей по технологиям и редактор wikiHow. Она имеет более чем 20-летний опыт создания технической документации и руководит группами поддержки в крупных компаниях, занимающихся веб-хостингом и программным обеспечением.Николь также имеет степень магистра искусств в области творческого письма в Государственном университете Портленда и преподает композицию, написание художественной литературы и создание журналов в различных учреждениях. Эту статью просмотрели 357 713 раз (а).

Соавторы: 10

Обновлено: 16 сентября 2021 г.

Просмотры: 357,713

Сводка статьи X

Чтобы создать градиент в Photoshop, щелкните инструмент градиента на панели инструментов.Этот инструмент имеет квадратный значок с серым градиентом и имеет ту же кнопку, что и инструмент «Ведро с краской». Если вы не видите инструмент градиента, нажмите и удерживайте ведро с краской, пока меню не развернется, а затем нажмите «« Инструмент градиента »». На панели вверху Photoshop появятся различные инструменты градиента. Щелкните раскрывающееся меню, которое выглядит как широкий градиент, чтобы открыть редактор градиентов. Выберите одну из предустановок, чтобы открыть градиент для редактирования — панель градиента внизу отобразит предварительный просмотр. Чтобы использовать предустановленный градиент, нажмите «ОК», а затем щелкните и перетащите по области, которую вы хотите заполнить градиентом.Когда вы поднимаете мышь, это добавит градиент к той части изображения, на которой вы разместили линию. Вы также можете использовать цвета, отличные от того, что вы видите в подарках. Для этого щелкните раскрывающееся меню «Градиент», чтобы вернуться в редактор градиентов, и выберите «Основные градиенты» для запуска. Вы увидите квадрат в каждом углу панели предварительного просмотра. Ползунки внизу называются «Остановками», и они определяют, где цвета появляются на градиенте. Щелкните нижний левый упор, а затем выберите цвет из раскрывающегося списка «Цвет».Затем выберите конечный цвет, щелкнув нижний правый ограничитель и выбрав другой оттенок. Теперь перетащите упоры в нужные места, пока цвета градиента не появятся так, как вы хотите. Когда вы это сделаете, посередине появится еще одна остановка, которая регулирует место смешивания цветов. Если вы хотите добавить больше цветов, нажмите под градиентом, где вы хотите добавить цвет, чтобы создать еще одну остановку, а затем выберите нужный цвет. Чтобы удалить остановку, просто выберите ее и нажмите «Удалить».»» Ограничения в двух верхних углах — это остановки непрозрачности, которые определяют, насколько твердым или полупрозрачным будет цвет в определенной области. Вы также можете использовать меню «Гладкость», чтобы настроить плавность градиента там, где он меняет цвет. Когда вы закончите, нажмите «ОК», а затем нарисуйте линию, чтобы разместить градиент.

• Печать
• Отправить письмо авторам

Спасибо всем авторам за создание страницы, которую прочитали 357 713 раз.

лучших бесплатных пакетов градиентов Photoshop для PSD, CC

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

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

---

Как применить предустановленный градиент к выделению в Photoshop CS6

В общем, если хотите показать свою уникальность и креативность. Градиент Photoshop — это именно то, что нужно. Градиент Photoshop — чрезвычайно полезный инструмент для рисования определенной области в особом стиле, поскольку градиент помогает вам создать смесь разных цветов. Вы можете создать свой собственный или использовать предустановленный. В Photoshop CS6 удобнее сначала работать с предустановленным градиентом, а затем создавать свой невероятный градиент.Более того, такая функция, как загрузка других библиотек градиентов из всплывающего меню панели градиентов. Итак, теперь вы можете ознакомиться с простым и понятным руководством по использованию предустановленного градиента.

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

2. Выберите на панели «Инструменты» инструмент градиента (в случае отсутствия видимости удерживайте инструмент «Заливка») или просто нажмите кнопку G или Shift + G и подождите, пока инструмент «Градиент» станет активным.

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

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

Обратите внимание, что для коррекции слишком яркого неба или пуха на картинке вы можете использовать Natural Density. Это придаст вашей фотографии естественности. Для этого поверх вашего изображения создайте новый слой и перенесите градиент вниз.Не забудьте использовать ранее упомянутую предустановку. Теперь вы можете делать все со смешанными моделями. Настоятельно рекомендуется использовать Overlay и Soft Light.

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

Существует широкий выбор типов градиента. Вы можете найти эти типы на панели параметров.

• Окраска по прямой линии
• Раскраска по кругу — Радиальная
• Раскраска против часовой стрелки вокруг начальной точки — Угловая
• Раскраска в зеркальном стиле — Отражение
• Раскраска в алмазном стиле — Бриллиант

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

---

---

Бесплатные пакеты градиентов для Photoshop

36 Узор размытия фона

Набор узоров 36 Blur Backgrounds Pattern — лучшее решение для вашего дизайна. Он подойдет исключительно для самых разных целей. Все, что вам понадобится для использования и редактирования фонов, — это Adobe Photoshop.Воспользуйтесь преимуществами этого продукта исключительного качества и подумайте об интеграции этих фонов в свое приложение или сайт, что поможет привлечь внимание пользователя и выделить определенные части внешнего вида вашего проекта. Универсальные и в то же время уникальные модели размытия создают ощущение трехмерной сцены. Это визуальное восприятие размытых текстур можно разумно использовать в ваших творческих проектах.

---

Абстрактный фон 3D Flow Vol.2

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

---

Фон Abstract Vibrant Liquid s Vol.1

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

---

60+ бесплатных предварительных настроек Photoshop для двухцветных градиентов

Этот пакет предустановок градиента для фотошопа содержит 61 свежий стиль дуплекса для ваших дизайнов.

---

Градиентные фоны Photoshop

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

---

Цветовые палитры градиента Photoshop

Эти градиентные палитры были созданы, чтобы помочь ускорить ваши дизайнерские проекты, предлагая отличные цветовые комбинации.Существует 8 различных стилей градиента, которые легко настроить, каждый размером 3,3 МБ.

---

Градиенты серебра или платины

---

32 градиента Photoshop для Photoshop

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

---

24 свободных ярких градиента

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

---

30 бесплатных градиентов неба для Photoshop

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

---

14 бесплатных оригинальных градиентов для Photoshop

---

4500 Бесплатные градиенты Photoshop WEB 2.0

---

50000 Бесплатные градиенты Photoshop

---

Небесные градиенты для Photoshop

---

1360 Free Line Photoshop Gradients Pack

---

160 Бесплатные полосы градиентов Photoshop

---

2000 Free Green Photoshop Gradient Pack

---

FAQ

? Что такое градиент?

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

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

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

? Могу ли я получить бесплатные пакеты градиентов PhotoShop?

Да, все пакеты, перечисленные в этой статье, предлагаются совершенно бесплатно.

---

Читайте также

130+ Тщательно отобранные уроки по созданию текстовых эффектов в Photoshop

25+ бесплатных наборов градиентов Photoshop для улучшения графики

20 лучших видеоуроков по Photoshop, которые стоит посмотреть в 2020 году

18 лучших бесплатных экшенов Photoshop с винтажными фотоэффектами и старые стили ретро

Как использовать инструмент «Градиент» в Photoshop — Креатив Брендана Уильямса

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

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

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

Что такое «градиент» в фотошопе?

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

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

Сочетание клавиш для доступа к инструменту градиента

Простое сочетание клавиш, которое можно использовать для доступа к инструменту «Градиент» в Photoshop, — это нажать G на клавиатуре. Нажатие G выберет инструмент «Градиент», так что вы сможете сразу же приступить к настройке параметров и созданию градиентов по своему желанию.

Как создать новый градиент с помощью инструмента «Градиент»

Давайте рассмотрим основы создания нового градиента в Photoshop.Чтобы начать, нажмите G или нажмите на инструмент «Градиент» на панели инструментов.

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

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

— Окно предустановок

Самая большая часть вашего редактора градиентов — это предустановленное окно.В более старых версиях Photoshop этих предустановок было довольно мало, и их было очень мало. Однако в новых обновлениях Photoshop CC есть несколько отличных вариантов градиента, разбросанных по разным цветным папкам. Это позволяет легко найти идеальный градиент, который точно соответствует цветовым потребностям вашего проекта.

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

— Градиентная полоса

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

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

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

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

При плавности 100% между каждым цветом будет очень мягкий переход. Однако при гладкости 0% переход между цветами будет немного более резким. Для общего использования вполне подойдет установка ползунка плавности на 100%.

— Цвета градиента

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

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

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

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

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

— Средние точки градиента

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

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

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

Типы градиентов

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

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

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

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

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

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

3. Угловой градиент

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

Этот тип градиента гораздо более специализирован по сравнению с некоторыми другими типами градиента в Photoshop.Скорее всего, вы не будете так часто использовать эту опцию.

4. Отраженный градиент

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

5. Алмазный градиент

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

— Объяснение настроек инструмента «Градиент»

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

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

Затем ваш параметр непрозрачности изменит видимость ваших настроек градиента. Чтобы градиент был полностью виден, я рекомендую оставить непрозрачность 100%. В конце концов, вы всегда можете настроить непрозрачность слоя позже, когда примените градиент к новому слою.В этом смысле параметр непрозрачности становится немного лишним.

Наконец, вы увидите три флажка: реверс, дизеринг и прозрачность .

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

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

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

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

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

— Применение градиентов к слою

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

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

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

Таким образом, вы применили градиент к новому слою, и он выглядит точно так же, как в редакторе градиентов! Очень просто.

— Создание слоя градиентной заливки

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

Чтобы создать новый слой с градиентной заливкой, выберите Layer> New Fill Layer> Gradient.

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

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

Если вы согласны с настройками, нажмите ОК.

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

Как создать собственный градиент в Photoshop

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

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

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

Итак, вы создали свой собственный градиент, готовый к использованию!

Сохранение пользовательских градиентов в качестве предустановки градиента

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

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

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

Теперь ваш собственный градиент будет отображаться как собственная предустановка в нижней части окна ваших предустановок!

Создание прозрачных градиентов

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

Чтобы создать прозрачный градиент, выберите инструмент градиента ( G ) и откройте редактор градиента.

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

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

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

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

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

Теперь вы успешно создали прозрачный градиент!

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

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

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

Выбрав фоновый слой, возьмите инструмент градиента ( G ) и выполните все необходимые настройки на верхней панели настроек.

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

А что, если у нет слоя фона ?

В этом случае просто примените градиент на новом слое.После применения щелкните и перетащите слой в нижнюю часть стопки слоев. Теперь это будет градиент вашего «фонового» слоя!

Как изменить цвет градиента

На этом этапе вы знаете, как изменить цвет градиента, прежде чем вы его действительно создадите. Итак, как вы можете изменить цвета уже существующего градиента? Ну, все зависит от типа созданного вами градиента. Если вы применили разноцветный градиент к слою, вы не сможете изменить цвет, не переделав его полностью.

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

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

Как вы узнали выше, новый слой градиентной заливки создается путем перехода к Layer> New Fill Layer> Gradient.

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

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

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

Как повернуть или инвертировать градиенты Photoshop

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

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

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

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

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

Если вы хотите инвертировать цвета градиента, отметьте опцию «реверс».Это переключит, с какой стороны градиента исходят ваши цвета. Нет ничего проще!

Инструмент градиента в Photoshop — впечатляющий инструмент с бесконечными возможностями настройки. Применяете ли вы градиент к тексту, фоновому слою, маске слоя или фигурам, инструмент градиента сделает все. Хотя самый простой способ создания градиентов — это применить его непосредственно к новому слою, может быть более выгодным создание нового слоя градиентной заливки.Таким образом, у вас всегда есть возможность внести изменения в градиент позже в вашем проекте. Теперь, когда вы знаете, как использовать инструмент градиента в Photoshop, начните практиковаться и посмотрите, какие потрясающие эффекты градиента вы можете создать!

Удачного редактирования!

— Брендан 🙂

Как создать прозрачный градиент в Photoshop

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

В Photoshop это можно сделать разными способами.Один из самых простых — создать прозрачный градиент.

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

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

Приступим.

Как создать прозрачный градиент в Photoshop

Шаг 1. Выберите основное изображение

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

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

Я выбрал одну из своих кухонь:

Шаг 2. Добавьте новый слой

Затем вам нужно добавить новый слой.

Это можно сделать, щелкнув значок New Layer внизу панели Layers .

Если вы предпочитаете сочетание клавиш, вы можете использовать Command-Option-Shift-N (Mac) или Control-Alt-Shift-N (Windows).

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

Как только вы это сделаете, ваша панель слоев должна выглядеть так:

Шаг 3. Добавьте маску слоя

Следующий шаг — добавить маску слоя к слою изображения.

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

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

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

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

Шаг 4. Создайте прозрачный градиент

Сначала выберите инструмент Gradient tool на панели инструментов слева. Вы можете сделать это, просто нажав клавишу G или щелкнув по ней.

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

Photoshop часто накладывает несколько инструментов на один значок, поэтому убедитесь, что вы выбрали правильный инструмент.

Выбрав инструмент «Градиент», перейдите на панель инструментов градиента вверху и выберите вариант градиента от черного к белому (от переднего плана к фону).

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

Теперь создадим прозрачный градиент.

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

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

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

Для получения нужного градиента может потребоваться несколько раз. Хорошо. Просто нажмите Cmd -Z (Mac) или Ctrl-Z (Windows), чтобы отменить, а затем примените повторно, пока не получите желаемый эффект. (Вы можете сделать это в любой момент в процессе.)

Для этого изображения я предпочитаю подниматься из нижнего правого угла:

Шаг 5: Добавить фон

Теперь, когда у вас есть градиент, пора добавить фон, на котором он будет плавно переходить.

Переход к сплошному цвету

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

Чтобы использовать сплошной цвет, выберите фоновый слой, а затем инструмент «Заливка» . Как упоминалось ранее, это может быть совмещено с вашим инструментом градиента. Если это так, щелкните правой кнопкой мыши инструмент градиента и выберите ведро с краской.

В последних версиях Photoshop ведро с краской вложено с инструментом «Градиент».

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

Переход к фоновому изображению

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

Сначала перетащите / вырежьте и вставьте ваше фоновое изображение в Photoshop и убедитесь, что это фоновый слой.

Если размер не идеален, не волнуйтесь.Мы исправим это сейчас.

Чтобы получить правильный размер изображения, используйте инструмент Free Transform .

Убедитесь, что выбрано фоновое изображение, а затем нажмите Command-t (Mac) или Control-t (Windows). Теперь вы можете изменить размер, пропорции и расположение фонового изображения.

С помощью инструмента Free Transform я смог увеличить изображение вафли и немного сдвинуть его вправо. Конечно, инструмента «Перемещение» было бы достаточно, чтобы просто переместить его, но мне нужно было заполнить всю прозрачную область .

Шаг 6: Тонкая настройка

Если вы хотите внести изменения в то, как элементы переходят друг в друга, это легко. Вы всегда можете вернуться к маске слоя и изменить градиент или использовать инструмент «Кисть » .

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

(Чтобы добавить больше фонового изображения, я бы изменил цвет на белый.)

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

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

Вот окончательное изображение:

Заключительные слова

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

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

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

Как насчет вас? Вы использовали прозрачный градиент в Photoshop для добавления эффектов к своим фотографиям? Возможно, при совмещении экспозиций или создании брошюр? Есть какие-нибудь советы, которые вы хотите добавить?

Создание изображений для создания градиентного фона в Adobe Photoshop

В свое время я делал много графики.Моими фаворитами, безусловно, были рекламные листовки с выставками автомобилей и мотоциклов, которые я создавал несколько раз в год для некоторых мероприятий радиостанций в период с 2002 по 2007 год. Радиостанции, на которые я работал, проводили много подобных мероприятий и несли ответственность за все мероприятия. СМИ держали меня очень занятым. Хотя это было полезно, и у меня в офисе есть несколько листовок в рамках. Я смотрю на них прямо сейчас.

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

В сегодняшней публикации я буду создавать фон для летчика, который собираюсь разработать в Adobe Photoshop. Это совсем не сложно. Все, что нужно, — это несколько навыков, воображение и направление.Цвета и формы должны соответствовать видению остальной части конечного продукта, поэтому при создании чего-то подобного важно оставаться сосредоточенным и не переусердствовать. С учетом сказанного, эта часть процесса должна быть интересной.

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

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

Поскольку этот проект будет размещен только в этом блоге, я буду придерживаться размера в пикселях 1000 × 667, как я всегда использую. Если бы я пошел на печать с чем-то вроде этого, я бы использовал разрешение 300 точек на дюйм вместо 72 точек на дюйм, цвета CMYK вместо RGB, и у меня был бы физический размер, установленный в соответствии с окончательными размерами печати. Поскольку это только для Интернета, все будет намного проще.

Чтобы создать новый документ, я перейду к пункту меню File> New и нажму.Как только я это сделаю, появится диалоговое окно, требующее некоторых спецификаций. Я заполню поля информацией, которой только что поделился с вами, и когда я закончу, я нажму кнопку Create .

Теперь, когда файл создан, я перейду к панели Layers справа и щелкну по маленькому значку замка на слое, который в настоящее время называется Background . Это разблокирует слой (значок замка будет удален) и позволит мне работать с ним.Сделав это, я дважды щелкаю слово «Фон», набираю вместо него Gradient и нажимаю клавишу Enter на клавиатуре. Переименование этого слоя просто для того, чтобы все было организовано. Пришло время создать градиент.

Существует несколько различных методов создания градиента в Adobe Photoshop, но на данный момент я думаю, что проще всего использовать диалоговое окно Layer Style . Чтобы получить доступ к этому окну, я дважды щелкну по белой миниатюре слоя Gradient на панели Layers.Когда я это сделаю, появится диалоговое окно. Когда это откроется, я поставлю флажок Gradient Overlay , а затем щелкну прямо на словах «Gradient Overlay». Щелчок по флажку активирует стиль, а щелчок по словам фактически приводит вас в область для изменения связанных настроек.

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

Если вы посмотрите на снимок экрана выше, вы увидите настройки, о которых я здесь говорю. Я оставил Blend Mode на Normal и Opacity на 100% . Под окном градиента я установил Style на Radial и оставил Angle равным 90 градусов. Наконец, я установил масштаб на 150% . Что касается цветов самого градиента, я щелкнул прямо на шкале цвета градиента и дождался появления панели Gradient Editor .

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

Как загрузить дополнительные градиенты в Adobe Photoshop

Когда я закончил, я нажал обе кнопки OK и вернулся к изображению, которое я создал до сих пор.

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

Добавление дополнительных изображений

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

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

Добавление первого изображения

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

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

Добавление второго изображения

Затем я проделаю то же самое со вторым изображением.Это будет фото блочной стены. Я перетащу его в файл проекта, и после того, как я закончу размер и расположение, я применю к нему тот же режим наложения Overlay. Получу вот такой результат.

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

Добавление третьего изображения

Этот будет немного другим. Я перетащу бело-фиолетовое размытие в файл проекта, но на этот раз я собираюсь применить к нему режим наложения Hard Light .Это придаст изображению немного другой вид, чем если бы я применил режим наложения Overlay. Фактически, режим наложения Hard Light противоположен режиму наложения Overlay. Вот результат.

Думаю, вы понимаете, к чему я веду. Моя цель — создать фон, на который вы не сможете даже пальцем пощупать. В нынешнем виде это довольно круто. Однако я хочу внести несколько изменений.

Регулировка непрозрачности слоя

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

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

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

——

Надеюсь, я наглядно продемонстрировал, как объединить несколько изображений вместе со слоем градиента для создания композиции в Adobe Photoshop. Если у вас есть какие-либо вопросы или опасения по поводу этого сообщения, дайте мне знать в разделе комментариев ниже.Спасибо за прочтение!

300+ популярных цветовых градиентов для ваших дизайнерских проектов

Если вы дизайнер, вы всегда будете искать крутой фоновый градиент для своего пользовательского интерфейса. Как мы все знаем, яркие цвета и яркие градиенты сейчас являются одной из основных тенденций, таких как графический дизайн, веб-дизайн, фон контента и дизайн пользовательского интерфейса. Также мы опубликовали статью о последних тенденциях в дизайне текущего года. Здесь мы собрали более 300 красивых и ярких цветовых градиентов для ваших будущих дизайнерских проектов, созданных графическим дизайнером из Парижа Лео Саймоном.и да! Вы можете бесплатно скачать этот файл градиента Photoshop (GRD) по ссылке в конце этой статьи и установить его в любую версию Photoshop, и это совершенно бесплатно. Вы можете скачать и установить полный пакет из 300 градиентов за пару кликов. Мы также делимся кратким руководством в конце этой статьи, чтобы узнать, как установить файл градиента в Photoshop.

В этом посте мы составили короткий список и собрали некоторых из наших фаворитов из последней коллекции Лео Саймона и поделились ими с их соответствующим шестнадцатеричным кодом ниже.

В качестве бонуса мы также делимся с вами ссылкой для загрузки нашего личного пакета градиентов CGfrog, который вы можете использовать в своем предстоящем дизайн-проекте, и да, вы можете использовать его одним щелчком мыши! Мы также подготовили PNG-версию каждого градиента.

Давайте загрузим и установим.
Наслаждайтесь!

300+ красивых и ярких цветовых градиентов для вашего дизайна

Bloody Mary

Bloody Mary — Gradient Code — # ff512f → # dd2476

Can You Feel The Love Tonight

Can You Feel The Love Tonight — Gradient Code — # b06ab3 → # 4568dc

Cosmic Fusion

Cosmic Fusion — Код градиента — # ff00cc → # 333399

Crimson Tide

Crimson Tide — Код градиента — # c6426e → # 642b73

Day Tripper

Day Tripper — Gradient Code — # ff57858 Dimigo Dimigo — Код градиента — # fc6767 → # ec008c

Easymed

Easymed — Код градиента — # dce35b → # 45b649

Electric Violet

Electric Violet — Код градиента — # 4776e6 → # 8e54e9

Ibiza Sunset — Gradient Code

Ibiza Sunset Ibiza Sunset # ff6a00 → # ee0979

Instagram Gradient

Instagram — Код градиента — # 833ab4 → # fd1d1d → # fcb045

Mango Gradient

Mango — Gradient Code — # ffe259 → # ffa751

Mello

Mello — Gradient Code 57 Messenger Messenger — Код градиента — # 00c6ff → # 0072ff

Netflix

Netflix — Код градиента — # 8e0e00 → # 1f1c18

Oh Happiness

Oh Happiness — Код градиента — # 96c93d → # 00b09b

Orange Coral

Orange Gradient Coral — # ff9966 → # ff5e62

Passion

Passion — Код градиента — # e35d5b → # e53935

Pinky

Pinky — Код градиента — # f7bb97 → # dd5e89

Purpink

Purpink — Код градиента — Relay # e100ff → # 7f00ay Код градиента — # ffaf7b → # d76d77 → # 3a1c71

Roseanna

Roseanna — Код градиента — # ffc3a0 → #ffafbd

Shifter

Shifter — Gradient Code — # f80759 → # bc4e9c

Shore

Code — # Gradient Code → # Gradient Code

Timber

Timber — Код градиента — # 00dbde → # fc00ff

Vanusa

Vanusa — Код градиента — # da4453 → # 89216b

Virgin America

Virgin America — Код градиента — # dc2430 → # 7b4397

YouTube — Код градиента

— # e52d27 → # b3121 7

Ссылки для скачивания:

Скачать 300+ Pack:
Тип файла:.GRD (Photoshop Gradient)
Размер файла: 213.7kb
[boombox_download_button file_url = ”” external_url = ”http://www.mediafire.com/file/09o8iufhr2ilz16/300Gradient-by-Leo-Simon.grd”] Загрузить [/ boombox_download_button ]

Загрузить бонусный пакет:
Тип файла: .GRD (Photoshop Gradient)
Размер файла: 22 КБ
[boombox_download_button file_url = ”https://cgfrog.com/wp-content/uploads/2019/02/30Gradients- Pack-by-CGfrog.grd_.zip ”external_url =” ”] Загрузить [/ boombox_download_button]

Как установить файл градиента (GRD) в Adobe Photoshop:

1.Перейдите в Edit> Preset> Preset Manager

2. Выберите Preset Type: Gradients (Короткая клавиша: Command + 3)

3. Нажмите Load, найдите свой файл GRD и нажмите, чтобы открыть

4. Ваши градиенты будут доступны для используйте с инструментом «Градиент» или там, где градиенты находятся в стилях слоя («Окно»> «Инструменты» или «Слой»> «Стили слоя»).

Наслаждайтесь !!
Совет: сохраните файл GRD в том же месте, что и другие градиенты Photoshop (Adobe Photoshop> Шаблоны> Градиенты)

.

No related posts.