Photoshop внешнее свечение css
В данном материале мы рассмотрим настройки и варианты использования стиля «Внешнее свечение» (Outer Glow).
Применение стиля «Внешнее свечение» (Outer Glow)
Когда начинающий пользователь слышит название стиля «Внешнее свечение», он автоматически предполагает, что этот эффект ограничивается только внешним светом. На самом деле с помощью этого стиля Вы можете сделать гораздо больше, чем просто эффект свечения.
К примеру, этот стиль может быть использован для создания падающей от предмета тени или добавления внешней штриховки к объектам.
Outer Glow (Внешнее свечение)
Outer Glow (Внешнее свечение) Эффект Outer Glow (Внешнее свечение) позволяет создать ореол света вокруг контура элемента. При помощи данного эффекта можно акцентировать внимание на определенных элементах изображения, выделять их, увеличивать контрастность, создавать эффект
Шаг 5: Настройка непрозрачности слоя
Для точной регулировки эффекта просто уменьшите непрозрачность слоя. Эта опция расположена в правом верхнем углу панели слоев, прямо напротив опции режима наложения. Значение непрозрачности по умолчанию составляет 100%. Чем сильнее вы понизите это значение, тем больше сквозь слой «Soft Glow» будет просматривается расположенный под ним слой с оригиналом фото. Другими словами, при понижении непрозрачности мы увидим больше исходного изображения и меньше размытого изображения.
Чтобы изменить значение непрозрачности, нажмите на маленькую стрелку справа от текущего значения, а затем перетащите ползунок. Я понизить своё значение до 75% , но опять таки, ваше значение зависит от вашего изображения и художественного вкуса.
Вот как выглядит окончательный результат:
После настройки непрозрачности эффект готов. Но теперь, когда я закончил работу, что делать, если мне очень нравится результат и я хочу его изменить? Я сделал лёгкое свечение, но, у примеру, теперь мне кажется, что более сильное, более «романтическое» свечение смотрелось бы лучше? Как я могу вернуться назад и изменить его? Чтобы изменить степень свечения, нужно изменить количество размытия, которое я сделал с помощью фильтра «Размытие по Гауссу» (Gaussian Blur) в шаге 3. Каким образом это можно сделать?
Ответ один — никаким. Как только мы нажали кнопку OK в диалоговом окне фильтра «Размытие по Гауссу», мы применили эффект размытия к слою. Другими словами, мы сделали постоянное изменение изображения, которое не может быть отменено.
Согласитесь, гораздо лучше создавать эффект (в том числе и с помощью «Размытия по Гауссу»), таким образом, чтобы он был полностью редактируемые даже после того, как вы полностью закончите работу.
И это совсем не трудно сделать, надо всего лишь воспользоваться смарт-объектами (Smart Objects) и смарт-фильтрами (Smart Filters). Начинающему пользователю они могут казаться пугающими, но на самом деле они очень просты в использовании. Смарт-объекты так же легко использовать в качестве обычных слоев и фильтров в Photoshop, но при этом они дают нам гораздо больше гибкости в редактировании.
В следующем уроке мы узнаем, как создать точно такой же эффект мягкого свечения, но при этом каждый шаг будет полностью редактируемым даже после полного завершения работы. Так что если вы готовы поднять ваши навыки Photoshop на следующий уровень, читайте урок «Полностью редактируемый эффект мягкого свечения на фото«.
Я работаю над проектом, в котором мне нужно внести изменения в более чем 500 изображений, чтобы создать эффект внешнего свечения при наведении . Мне нужно будет изменить каждое изображение, чтобы придать внешнее свечение. Это будет очень трудоемкая задача.
Это пример одного изображения. Все изображения прозрачные .jpg
Можно ли придать изображению бутылки этот эффект внешнего свечения, используя какие-либо приемы CSS3?
Это всего лишь пример одного изображения, другие изображения имеют разный размер и форму.
Нет, это не так. С помощью css вы можете применять только свечение/тень к элементу. Его можно округлить с помощью css3, но так как это не так и это прямоугольное изображение, тень также будет прямоугольником.
Вы можете сделать это с помощью холста, но это будет сложно. Вам, вероятно, придется перебирать каждый пиксель и определять границу бутылки (т. е. слева направо в каждой строке, находить первый непрозрачный, а затем повторять справа налево в каждой строке). Затем вы можете сделать все эти пиксели зеленый, затем добавьте отнимите 1 от координаты x для левой половины и добавьте один к правой, сделайте немного меньше зеленого и т. д. Дело в том, что это не будет выглядеть так же из-за кривых. Хммм. Я думаю, это сложная проблема!
@AramMkrtchyan: Я думаю, вы могли бы записать макрос для фотошопа или что-то в этом роде и сохранить обычную и светящуюся версию..
В какой-то момент я мог бы попробовать это на холсте - думая об этом, я вижу, как вы могли бы это сделать, но, конечно, будет ограничение, что это будет работать только в более новых браузерах, так что, возможно, не будет так полезно, как вы себе представляете.
Это можно сделать с помощью фильтра (тень).
Не работает на моем FF31, но работает на моем Chrome. Есть ли какое-то объяснение, которое объясняет, как и почему?
Вы говорите filter(box-shadow), но тогда ваш код использует drop-shadow. Также ссылка, которой вы поделились, мертва. Я запутался.
вот плагин, который я нашел раньше, который делает трюк с изображением PNG.
Включите свечение и установите цвет и радиус:
Да это прикольно!! Спасибо за это!! Я часами пытался заставить Рафаэля работать, но это намного проще и лучше
Проще простого. Вы просто используете одно и то же изображение дважды, одно над другим.
Вы просто работаете с изображением ниже, немного масштабируете его, делаете его ярче, пока оно не станет белым, а затем размываете его. Затем вы устанавливаете непрозрачность на 0 и снова устанавливаете ее на единицу при наведении курсора на изображение выше.
Javascript не требуется вообще.
БРАТАН. Я должен тебе сказать: ТЫ ГЕНИЙ. Мне даже не нужна эта функция в CSS/JS. Я хочу, чтобы это использовалось на холсте для приложения для Android. Я думал об итерации пикселей и о том, что такое край, когда я прочитал ваш ответ, я почувствовал себя очень глупо. Спасибо
Если вам нужно сделать это с более чем 500 изображениями, я бы сделал отличный прозрачный PNG обратной стороны бутылки с перьями вокруг бутылки и поместил его поверх DIV с фоновым цветом под ним и изображением бутылки между ними. . Это приведет к тому, что сплошной цвет фона будет постепенно переходить в обратную бутылку PNG, и все, что вам нужно будет сделать, чтобы изменить цвет свечения, — это изменить значение CSS.
Напишите какой-нибудь jQuery, чтобы вы могли ввести значение HEX, и все готово;)
Отредактируйте строку 19 кода CSS «background-color», и она обновит свечение. PNG имеют низкое качество, но вы можете точно настроить их, чтобы избавиться от ребристых краев.
Стиль Внешнее свечение создает вокруг изображения слоя иллюзию свечения, как, например, от неоновой рекламы (рис. 5.18).
Рис. 5.18. Пример использования стиля Внешнее свечение
Вы можете выбрать цвет свечения или градиент. Кроме того, градиент можно создать самостоятельно.
В раскрывающемся списке Метод выбирают тип свечения: Мягкий или Точный, а с помощью ползунков Размах и Размер устанавливают размер и плотность свечения. Для свечения можно также выбрать любой режим наложения цвета.
Обратите внимание, вы также можете выбрать стиль Внутреннее свечение. Данный стиль действует точно так же, как и Внешнее свечение, но свечение распространяется не наружу, а внутрь изображения.
Итак, после того как стили применены, нажмите кнопку Да в диалоговом окне Стиль слоя. Отметим, что стили в дальнейшем можно отменить даже в другом сеансе работы с программой, но для этого файл должен быть сохранен в формате PSD и никаком другом. К тому же стили невозможно будет откорректировать или отменить, если вы объедините слои. Иными словами, стиль – это набор настроек определенного слоя, который распознается только в редакторе Photoshop и сохраняется только в файле PSD. В файлах другого формата стиль также останется, но, например, появившаяся в результате применения стиля тень будет просто частью общего изображения. Убрать эту тень уже будет нельзя. Некоторые программы от компании Adobe поддерживают импорт стилей из файлов PSD. Так, при импорте PSD-файла в приложение After Effects вам будет предложено импортировать слои без стилей или с примененными стилями.
Чтобы удалить ранее примененный к слою стиль, необходимо просто снова вызвать диалоговое окно Стиль слоя и снять флажки возле тех стилей, которые вы хотите удалить из слоя.
Обратите внимание, что при применении стиля к слою на палитре Слои происходят некоторые изменения. Под слоем, к которому применен стиль, появляется список Эффекты, где перечислены примененные к слою стили. Слева от каждого стиля расположен значок в виде глаза. Это означает, что любой из примененных стилей можно временно отключить, а затем опять включить. Чтобы отключить все примененные стили, нужно щелкнуть кнопкой мыши на значке в виде глаза слева от пункта Эффекты. А если дважды щелкнуть кнопкой мыши на пункте любого стиля на палитре Слои, вы вызовете диалоговое окно Стиль слоя. Список стилей слоя на палитре Слои можно скрыть и вновь отобразить. Для этого используют кнопку, расположенную в правой части слоя на палитре.
Работа со слоями – важный этап работы с редактором Photoshop. Если вы используете программу только для того, чтобы отретушировать или подкорректировать цифровые фотографии, вы, возможно, и не столкнетесь с многослойными изображениями. Но как только вы захотите добавить к фотографии текст или заключить фотографию в красочную рамку, вам непременно понадобится создать, как минимум, один новый слой. В дальнейшем вы можете оставить изображение многослойным (в этом случае размер файла будет выше исходного) или объединить слои. Слои, кстати, будут автоматически объединены при сохранении изображения в файл, не поддерживающий многослойные изображения, например JPEG.
Данный текст является ознакомительным фрагментом.
Продолжение на ЛитРес
Шаг 2: Переименование нового слоя
Хорошим тоном считается давать слоям в панели слоёв осмысленные имена. Давайте дадим нашей копии описательное имя. Чтобы переименовать слой, просто дважды щелкните непосредственно по его имени в панели слоев, имя слоя выделится, после чего введите собственное название. Давайте переименуем этот слой в «Soft Glow». Нажмите Enter, чтобы принять изменение названия:
Слой «Слой 1» теперь переименован в «Soft Glow».
Шаг 1: Дублируйте фоновый слой
Открываем исходное изображение в Photoshop, в настоящее время в панели слоёв имеется единственный слой — фоновый.
Первое, что нам нужно для создания эффекта мягкого свечения — это сделать копию фонового слоя, и самый простой способ добиться этого — нажать комбинацию клавиш Ctrl+J. После применения данной комбинации, в панели слоёв должно быть два слоя — фоновый и его копия, у меня Photoshop автоматически именовал копию «Слой 1».
Inner Glow (Внутреннее свечение)
Inner Glow (Внутреннее свечение) Эффект Inner Glow (Внутреннее свечение), аналогично эффекту внутренней тени, позволяет задать свечение элемента по внутреннему его контуру. Во всем остальном его действие совпадает с действием эффекта Outer Glow (Внешнее свечение) (рис. 8.13). Рис. 8.13.
Вывод на внешнее устройство
Шаг 4: Изменение режима наложения слоя на «Мягкий свет» (Soft Light)
Теперь, когда мы размыли слой «Soft Glow», давайте изменим метод его взаимодействия с исходным изображением в фоновом слое, расположенном под ним. Мы делаем это, изменив его режим наложения. По умолчанию, режим наложения любого слоя установлен на «Обычные» (Normal). В верхней части панели слоёв нажмите на кнопку со словом «Обычные» (Normal), это откроет меню других режимов наложения, где выберете из списка «Мягкий свет» (Soft Light) из списка.
Режим «Мягкий свет» (Soft Light) производит в Photoshop две вещи — повышает общий контраст в изображении и усиливает цвета, делая их более яркими. Вот как выглядит моё изображение после изменения режима наложения на «Мягкий свет» (Soft Light), создающего теплое, тонкое свечение:
Эффект лёгкого тёплого свечения, создаваемый режимом наложения «Мягкий свет» (Soft Light).
Для более сильного эффекта, вместо «Мягкого света» попробуйте применить режим «Перекрытие» (Overlay). Действие «Перекрытия» очень похоже на «Мягкий свет», «Перекрытие» также повышает контрастность и цвет, но делает эффект более интенсивным. Вот как выглядит мой результат с режимом наложения «Перекрытие». «Перекрытие» может лучше работать с другими изображениями, но в моём случае эффект слишком сильный, так что я вернусь обратно на «Мягкий свет»:
Эффект, полученный при изменении режима смешивания «Мягкий свет»на «Перекрытие».
Внешнее давление, лень и наставник
Внешнее давление, лень и наставник Еще один момент, без которого большинство людей не в состоянии достичь успеха в жизни, – внешнее давление. Исключением здесь являются гении самомотивации, коих меньшинство! Большинство же в полной мере используют доставшуюся нам от
Шаг 3: Применение фильтра «Размытие по Гауссу» (Gaussian Blur Filter)
Для того, чтобы создать реальный эффект мягкого свечения, сначала следует несколько размыть слой «Soft Glow», для этого мы применим фильтр «Размытие по Гауссу» (Gaussian Blur Filter). Пройдите по вкладке главного меню Фильтр —> Размытие —> Размытие по Гауссу (Filter —> Blur —> Gaussian Blur), после чего откроется диалоговое окно фильтра, где мы сможем задать степень размытия, перемещая ползунок «Радиус» (Radius). Чем дальше вы перетащите ползунок вправо, тем сильнее будет эффект размытия. Photoshop дает нам возможность предварительного просмотра действия фильтра в самом документе, так что, чтобы судить о результатах, отслеживайте изменение изображения во время перемещения ползунка.
Не следует размывать изображение так сильно, чтобы картинка стала неузнаваемой. После применения фильтра должны просматриваться основные детали картинки! Мы просто пытаемся немного смягчить детали, так что более низкие значения «Радиуса», как правило, работают лучше всего. Однако, имейте в виду, что величина размытия зависит от конкретного изображения, его размеров и т.п. Как правило, для тонкого эффекта свечения, значение «Радиуса» где — то до десяти пикселей должно подойти.
Вот как выглядит мой эффект размытия с радиусом величиной 3 пикселя. Обратите внимание, несмотря на то, что фото выглядит размытым, тем не менее мы все еще можем разглядеть множество деталей. Мы увидим еще больше деталей, как только изменим режим наложения слоя в следующем шаге:
Подп.под.рис.Эффект размытия с радиусом 3 пикселя.
Для получения еще более мягкого, как во сне, эффекта свечения, попробуйте увеличить значение радиуса до 20 пикселей :
Ниже я показал, как выглядит эффект размытия с радиусом 8 пикселей. Мы все еще ??можем разглядеть детали на фото, но размытость, безусловно , на этот раз сильнее. Выбор нужного значения размытия — это ваш личный выбор, и будет зависеть от изображения. В моем случае, я думаю, что 8 — это слишком много , так что я остановлюсь на трёх пикселях. Когда вы будете удовлетворены результатом, нажмите кнопку OK , чтобы закрыть диалоговое окно фильтра:
Значение радиуса размытия 20 пикселей.
Glow (Свечение)
Glow (Свечение) Создает эффект свечения вокруг выделенных участков изображения (рис. 4.19). Рис. 4.19. Исходное изображение (слева) и пример использования фильтра Glow (Свечение)
Диалоговое окно
Диалоговое окно стиля в русско- и англоязычном Photoshop показано ниже.
Здесь мы видим несколько новых параметров, отличных от тех, которые мы рассматривали ранее. Это «Метод» (Technique), «Диапазон» (Range) и «Колебание» (Jitter):
Режимы наложения (Blend Mode)
Режимы наложения позволяют установить режим смешивания «Внешнего свечения» со слоем. Если вы создаёте эффект свечения, то хорошо подойдут «Линейный осветлитель» (Linear Dodge) или «Экран» (Screen), если вы хотите создать эффект типа «внешняя тень», то лучше использовать «Линейный затемнитель» (Linear Burn) или «Умножение» (Multiply), если вы создаёте обводку, то подойдёт режим «Обычный» (Normal).
Непрозрачность (Opacity)
Этот параметр регулирует степень прозрачности «Внешнего свечения». Значение 0% делает его полностью прозрачным. т.е. невидимым, значение 100% — полностью непрозрачным.
Параметр полностью соответствует аналогичному в «Тени» и других стилях слоя.
Шум (Noise)
Этот параметр также аналогичен таким же в «Тени» и др. Увеличение значения «Шума» придаёт зернистость свечению, с помощью него можно получить эффекты типа «светящейся пыли».
На примере показан левый текст со значением шума 0%, правый — 62%
Цвет и Градиент (Color and Gradient)
«Цвет» позволяет менять цвет свечения.
Если радиокнопка включена у «Градиента», то ваши возможности не ограничиваются только одним цветом, с помощью нескольких градиентных цветов и переходов вы можете создать очень сложные и абстрактные светящиеся эффекты:
На примере показаны оранжевый цвет и радужный градиент:
Метод (Technique)
Выпадающий список «Метод» дает нам два различных варианта рендеринга (визуализации) свечения, мягкий и точный (Softer and Precise). «Мягкий» метод дает нам более органичное и естественное свечение с плавными переходами, размытием и скруглёнными углами, в то время как «Точный» заставляет свечение точнее соответствовать форме предмета, от которого оно исходит.
В следующем примере вы можете увидеть разницу между мягким органичным и точным методами:
Размах (Spread)
Опция «Размах» изменяет уменьшение интенсивности свечения линейно, или, другими словами, изменяет то, как постепенно оно исчезает при приближении к краю.
Обычно этот параметр оставляют равным 0%, но если вам понадобились резкие края света, вам надо увеличить его значение. Величина 100% даёт резкую границу.
На рисунке показаны значения «Размаха» в 0 и 60%
Размер (Size)
Название опции говорит само за себя. Эта регулировка позволяет изменять размер свечения с шагом в один пиксель.
Контур (Contour)
Контур формы позволяют изменять уменьшение свечения к краям в нелинейном режиме. При выборе различных профилей кривой, вы можете получить различное затухание свечения. Применение «Контура» может быть полезно, когда вы пытаетесь достичь особого типа сияния или каких-либо абстрактных эффектов.
Кроме того, флажок «Сглаживание» позволяет улучшить качество сияния при очень незначительном падении производительности, поэтому я рекомендую всегда его ставить.
На рисунке показан, какой эффект может дать контур в виде синусоиды:
Диапазон (Range)
Параметр «Диапазон» похож на параметр «Размах». Он почти так же позволяет управлять спадом свечения к краю.
Меньшее значение дает нам жёсткое свечение, в то время как более высокое значение дает более мягкое.
В следующем примере показано, как значение «Диапазона» влияет на мягкость света:
Колебание (Jitter)
В то время, как параметр «Диапазон» похож на «Размах», «Колебание» похоже на «Шум». Отличие в том, что «Шум» создает прозрачность соседних пикселей, используя обычный (Normal) режим смешивания, в то время как «Колебание» делает то же самое, на в режиме смешивания, похожем на «Наложение» (Overlay).
Сохранение и загрузка значений по умолчанию осуществляется точно так же, как и у стиля слоя «Тени».
Стиль слоя «Внутреннее свечение» (Inner Glow) используют реже остальных стилей, но от этого он не теряет своей значимости. Он может быть использован, к примеру, вместе со стилем «Тиснение» для создания глубины, может добавлять зернистый фон или штриховку к вашему дизайну. Кроме того, с помощью него можно создавать ледяной эффект, имитацию гелевой поверхности и многое другое.
Диалоговое окно
Диалоговое окно стиля в русско- и англоязычном Photoshop показано ниже. Оно не сильно отличается от «Внешнего свечения» (Outer Glow), но здесь имеется новый параметр «Источник» (Source) с опциями «Из центра» (Center) и «На краях» (Edge):
Режимы наложения (Blend Mode)
Режимы наложения позволяют установить режим смешивания эффекта свечения со слоем, к которому оно применяется. Если вы создаёте светящийся эффект, то следует применять режимы «Линейный осветлитель» (Linear Dodge) или «Экран» (Screen), если вы хотите создать затенение, то лучше использовать «Линейный затемнитель» (Linear Burn) или «Умножение» (Multiply).
Как я упоминал выше, большинство параметров и регулировок «Внутреннего свечения» точно такие же, как и в стиле «Внешнее свечение», поэтому о параметрах Непрозрачность (Opacity), Цвет и Градиент (Color and Gradient), Метод (Technique), Размах (Spread), Размер (Size), Контур (Contour), Диапазон (Range), Колебание (Jitter) читайте на страничке описания этого стиля.
Имеется только один параметр, отличающий внутреннее свечение от внешнего, это «Источник» (Source). У него имеются две опции, переключаемые радиокнопками, это «Из центра» (Center) и «На краях» (Edge). При выбранной опции «Из центра», свет исходит из центральной части объекта, и, соответственно, при выбранной «На краях» свет исходит из краёв объекта:
На рисунке хорошо видно разницу между различными типами источников света:
Эффект мягкого свечения, добавленный на фотографию, является отличным способом оживить и улучшить качество восприятия фото, особенно подобный эффект хорошо подходит к портретным снимкам.
В этом уроке я расскажу о создании статической версии документа с готовым свечением, т.е. готовый результат будет не редактируемым, этот способ лучше походит для начинающих пользователей. А в следующем уроке мы узнаем, как создать точно такой же эффект, но с возможность изменить готовый результат в любой момент позже, после сохранения документа.
Даже если вы новичок в Photoshop, я рекомендую вам попробовать оба способа добавления мягкого свечения к вашим изображениям, чтобы лучше понять возможности и гибкость программы Photoshop.
Вот фотография , которую я буду использовать для этого урока:
А вот как будет выглядеть готовый снимок с добавленным эффектом свечения. Мало того, что эффект поможет смягчить фото, в том числе кожу женщины, но также он повысит общую контрастность изображения и сделает цвета выглядят более яркими. Для более наглядного сравнения с оригиналом наведите мышку на фото:
Процесс вывода на внешнее устройство
Читайте также: