Постепенная прозрачность в фотошопе. Создание градиента от цветного к прозрачному
Для создания градиентов (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», прозрачному цвету должен соответствовать белый цвет.
Теперь переходите к правой части бегунков. В параметрах правого нижнего бегунка выберите необходимый вам цвет, в пункте «Location» выставите 100%.
В параметрах верхнего правого бегунка, в «Opacity» и «Location» выставите по 100%.
Все градиент готов и вы можете применять его. Щелкните инструментом «Gradient Tool» в той части изображения откуда вы хотите начать ваш градиент и перетащите курсор мыши до той точки куда его нужно продолжить. Если вы работаете не с выделенной областью, градиент будет применен ко всей области изображения.
Градиентная прозрачность в Adobe Photoshop особый прием, используемый в случае необходимости мягкого согласования двух или большего количества разных изображений . В данном видеоуроке мы рассмотрим лишь одно из применений этой технологии. Довольно часто нам необходимо "сшить" два изображения между собой, но так, чтобы "шва" не было видно и чтобы полученное изображение воспринималось как единое логичное целое. Зачастую это даже не разные картинки, а копии одного и того же изображения, обработанные различными способами. В частности мы рассмотрим ситуацию, когда нам нужно сделать часть изображения черно-белым.
По сути нам потребуется не что иное, как настройка выборочной прозрачности: представьте себе такую картину. Мы берем два совершенно одинаковых изображения, только одно цветное, а другое черно-белое. Накладываем черно-белое изображение поверх цветного и делаем левый и правый край верхней картинки прозрачным.
В реальной жизни мы могли бы взять ножницы и обрезать часть черно-белого изображения слева и справа, однако у нас получилась бы резкая граница и эффект плавного перетекания не был бы достигнут . В программе Adobe Photoshop есть возможность использования градиентной прозрачности, позволяющей сделать постепенное плавное изменение прозрачности слоя с изображением. Это как раз то, что нам нужно.
Скачайте исходное изображение для отработки упражнения:
Видеоурок: Градиентная прозрачность в Adobe Photoshop
Прозрачность, тени и градиенты
Прозрачность
Возможность делать изображения и цвета прозрачными является одним из самых фундаментальных строительных блоков в CSS3. Существуют два способа установки прозрачности. Первый заключается в использовании функции rgba() , которая принимает четыре параметра. Первые три параметра задают значения (от 0 до 255) красной, зеленой и синей составляющей цвета. Последний параметр задает значение прозрачности, или альфа, которое может быть в диапазоне от 0 (полная прозрачность) до 1 (полная непрозрачность).
Следующее правило задает фон ярко-зеленого цвета 50-процентной прозрачности:
Aside { background: rgba(170,240,0,0.5); }
Браузеры, которые не поддерживают функцию rgba(), будут просто игнорировать это правило, и фон сохранит прозрачность по умолчанию - полная прозрачность.
Поэтому второй подход лучше. Здесь мы сначала устанавливаем сплошной резервный цвет, а потом заменяем его полупрозрачным цветом:
Aside { background: rgb(170,240,0); background: rgba(170,240,0,0.5); }
Таким образом, браузеры, которые не поддерживают функцию rgba(), все равно окрасят фон элемента, но только полностью непрозрачным цветом.
Чтобы добиться лучшего соответствия резервного цвета с основным, следует использовать такой резервный цвет, который наиболее точно воспроизводит эффект полупрозрачности. Например, если полупрозрачный цвет накладывается на белый фон, то этот цвет будет выглядеть еще светлее из-за просвечивающегося белого фона. При выборе резервного цвета этот эффект следует принять во внимание.
Спецификация CSS3 также определяет свойство стиля opacity (непрозрачность), которое работает точно так же, как и значение альфа. Значение opacity тоже устанавливается в диапазоне от 0 до 1, позволяя сделать любой элемент полупрозрачным:
Aside { background: rgb(170,240,0); opacity: 0.5; }
На рисунке ниже показаны два примера полупрозрачности, один из которых реализован с помощью функции rgba(), а другой - с помощью свойства opacity:
Свойство opacity предпочтительнее использовать вместо функции rgba() в следующих случаях:
когда нужно сделать полупрозрачными несколько цветов. Свойство opacity позволяет сделать полупрозрачными цвет фона, текста и рамки элемента;
когда нужно сделать что-то полупрозрачным, даже не зная его цвет, например, потому, что цвет может устанавливаться другой таблицей стилей или кодом сценариев JavaScript;
когда нужно сделать полупрозрачным изображение;
когда нужно использовать переход, т.е. эффект анимации, который делает элемент постепенно появляющимся или исчезающим.
Тени
Спецификация CSS3 определяет два новых типа теней: блочные тени (box shadows) и текстовые тени (text shadows) . Блочные тени обычно более полезны и имеют более высокий уровень поддержки, в то время как текстовые тени не работают ни в одной из версий Internet Explorer. Блочную тень можно использовать для создания прямоугольной тени позади любого блока элемента
Рассматриваемые тени создаются посредством свойств box-shadow и text-shadow . Далее приведен пример создания базовой блочной тени:
Aside { box-shadow: 8px 8px 10px gray; }
Первые два значения свойства box-shadow устанавливают горизонтальное и вертикальное смещения тени от исходного объекта. Положительные значения смещают тень вниз и вправо, отрицательные - вверх и влево. Следующее значение определяет размер размытия (blur, в данном примере 10 пикселов), которое увеличивает расплывчатость тени. Последнее значение определяет цвет тени. Если под блоком находится какое-либо содержимое, подумайте об использовании функции rgba(), чтобы сделать тень полупрозрачной.
Для более тонкой настройки тени в свойство box-shadow можно добавить два значения. Чтобы установить ширину (spread) тени - подсвойство, которое расширяет тень, утолщая ее сплошную часть между размытыми краями, добавляется значение между значениями размытия и цвета:
Aside { box-shadow: 8px 8px 10px 5px gray; }
А чтобы создать тень, отражающуюся не наружу, а внутрь элемента, в конце списка значений добавляется значение inset . Лучший эффект достигается, когда тень располагается непосредственно поверх элемента, без горизонтального или вертикального смещения:
Aside { box-shadow: 0px 0px 20px lime inset; }
Свойство text-shadow требует подобного набора значений, но в другом порядке. Сначала указывается цвет, за ним следует горизонтальное и вертикальное смещения, а потом размытие:
H1 { text-shadow: gray 10px 10px 7px; }
Градиенты
Градиенты - это переходы цветов, которые могут создавать широкий диапазон эффектов, от едва различимой тени под панелью меню до психоделически раскрашенных кнопок.
На многих веб-страницах градиенты симулируются фоновыми изображениями. Но технология CSS3 позволяет веб-разработчику определить требуемый градиент, который будет воспроизведен браузером. Преимущество этого подхода состоит в том, что он уменьшает количество файлов изображений, которые нужно обрабатывать, и предоставляет возможность создавать градиенты, которые без стыков изменяют свой размер, позволяя заполнять любое пространство.
В CSS нет никаких специальных свойств для создания градиентов. Вместо них используется функция градиента для установки свойства background. Но не забудьте сначала назначить этому свойству сплошной цвет, чтобы создать резервную заливку для браузеров, которые не поддерживают градиенты (включая Internet Explorer, который поддерживает градиенты, только начиная с версии IE 10).
Существуют четыре функции градиентов, и для всех них требуется применять префиксы разработчиков браузеров. В этом разделе мы рассмотрим примеры градиентов для браузера Chrome (для которого применяется префикс -webkit-). Для поддержки браузеров Firefox и Opera нужно добавить точно такие же значения градиентов, но с префиксами -moz- и -o-.
Первой рассмотрим функцию linear-gradient() . Далее приводится одна из ее простейших форм, окрашивающая блок белым цветом вверху, который переходит в синий внизу:
Aside { background: -webkit-linear-gradient(top, white, blue); }
Заменив значение top на left, получим линейный горизонтальный градиент. А указав для начала градиента угол блока, получим диагональный переход:
Aside { background: -webkit-linear-gradient(top left, white, blue); }
Можно создать многоцветный градиент, предоставив список цветов. Например, следующее правило создает трехцветный горизонтальный градиент:
Aside { background: -webkit-linear-gradient(left, red, orange, yellow); }
Наконец, вместо равномерного распределения цветов градиента можно указать позицию начала каждого цвета посредством точек остановки градиента (gradient stops) , растягивая или сжимая полосы или смещая их в ту или другую сторону.
Инструмент «Градиент» позволяет вам рисовать градиенты нескольких типов. Также, используя градиенты в режиме прозрачности, возможно получить эффект «затухания» или «слияния» двух изображений в одно.
Все типы градиента можно выбрать в секции градиента на :
Ниже приведены примеры воздействия каждого из типов градиента на изображение. Слева показаны изображения после обработки градиентом в режиме «Цвет» с двумя непрозрачными цветами (и значением альфа 255). Справа показаны изображения после обработки градиентом в режиме «Прозрачность»:
Круговой градиент в цветном и прозрачном режимах
Создание градиента
Чтобы нарисовать градиент, просто нажмите кнопку мыши и удерживая её, переместите курсор по холсту, так само, как если бы вы рисовали линию. Градиент будет расширятся согласно тому как вы будете перемещать мышку.
После того, как вы отпустите кнопку мышки, градиент можно будет подправить используя его контрольные точки или «узлы» в виде небольших кружочков. Щелчок правой кнопкой мыши по такому «узлу» поменяет первичный и вторичный цвет градиента. Если вы будете перемещать один из «узлов», удерживая обе кнопки мыши, то сможете переместить всю зону градиента.
Режим «Цвет»
Установленный по умолчанию режим «Цвет» воздействует на все цветовые каналы и альфа канал. При использовании градиента в этом режиме основной цвет будет постепенно переходить во вторичный. Если вместо левой кнопки мыши использовать правую, то основной и вторичный цвета меняются местами. На примерах, приведенных выше градиент использовал основной и вторичный цвета установленные по умолчанию (основной - черный, вторичный - белый).
Режим «Прозрачность»
Прозрачный режим градиента можно использовать для постепенного исчезновения (затухания) части изображения. Также этот режим может быть полезен для «смешивания» двух изображений. Для включения этого режима переведите соответствующий элемент управления в нужное положение:
Этот тип градиента действует только на альфа канал текущего слоя. Градиент будет плавно менять значение альфа первичного цвета до инверсии значения альфа вторичного цвета. При использовании правой кнопки мышки, градиент будет плавно менять альфа значение от инверсии значения альфа вторичного цвета до значения альфа первичного цвета. Проще говоря, вы можете рассматривать прозрачный градиент, как плавное изменение от полной непрозрачности (со значением альфа 255) к полной прозрачности (со значением альфа 0).
Чтобы сделать «плавный переход» или «смешивание» двух изображений, разместите их на разных слоях, а затем примените к верхнему слою градиент в режиме «Прозрачность».
Как пример используем два изображения, что приводились при описании . Плавный переход одного изображения в другое можно легко создать «протянув» прозрачный градиент с левого до правого края изображения:
