Возьмем любую картинку

А теперь применим к нему фильтры:

Фильтр Alpha осветляет объект.
Синтаксис:

Opacity — степень осветления(0-100. 0 светло, 100 темно).
FinishOpacity — конечная степень осветления(0-100. 0 светло, 100 темно).
Style — Число 0(???), 1(линия) 2(круг) 3(прямоугольник)
Пример:

<style>
.gr{filter:Alpha(Opacity=»90″,FinishOpacity=»45″,Style=»3″)}
</style>
<img src=»a2.gif»>

Что у нас получилось:

Фильтр Blur размывает рисунок в определенную сторону. Синтаксис:
Add — Или 0, или 1.
Direction — От 0 до 315 — в какую сторону произойдет размытие.
Strength — Смещение
Пример:

<style>
<.gr2{filter:Blur(Add=»1″,Direction=»310″,Strength=»10″)}
</style>
<img src=»a2.gif»>

Что получилось:

Я самая размытая

Фильтр Invert

Синтаксис:

Пример:

<style>
.gr3{filter:Invert}
</style>
<img src=»a2.gif»>

Что получилось:

Фильтр Gray делает рисунок черно-белым
Синтаксис:

Пример:

<style>
.gr4{filter:Gray}
</style>
<img src=»a2.gif»>

Фильтр Chroma

Фильтр Chroma определенный цвет прозрачным.
Синтаксис:

Color — цвет(#ff0000)
Пример:

<style>
.gr5{filter:Chroma(Color =»#d1914e»)}
</style>
<img src=»a2.gif»>

Синтаксис:
Пример:

<style>
.gr6{filter:Xray}
</style>
<img src=»a2.gif»>

Что у нас получилось:

Filter — обработка фото в Figma [Плагин]

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

Как и всегда, нас выручит плагин — Filter. 

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

Рассмотрим подробнее возможности этого дополнения

Яркость и контрастность

Фильтр Brightness Contrast позволяет отрегулировать яркость и контрастность изображения. 

Оттенок и насыщенность

Настройка Hue Saturation позволяет настроить оттенок и насыщенность изображения. 

Экспозиция

Настройка Exposure позволит вам настроить экспозицию изображения. 

Сепия

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

Denoise

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

Сочность картинки

Параметр Vibrance позволит вам настроить сочность изображения. Схоже с Saturation, но действует несколько иначе. 

Оттенки серого

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

Mono

Данный фильтр изменяет палитру изображения

Чернила

Ink стилизует изображение под работу красками

Анимация

Cartoon пытается сделать фото как в мультфильме

Штриховка

Фильтр Crosshatch «заштриховывает» исходное изображение

Увеличение резкости

Unsharp mask позволяет увеличить резкость (четкость) фотографии. Для применения надо настроить радиус и силу эффекта

LSD

Делает картинку кислотной

Найти границы

Фильтр Edge Work выделяет все найденные границы в ЧБ. 

Ксерокопия

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

По контуру

Outline обводит детали изображения по контуру

Размытие через линзу

Классический блюр

Частичное размытие

Фильтр tilt shift позволяет размыть все, кроме выбранной области. Для управления перемещайте две точки на превью. Для степени размытия измените значение Blur Radius, для более или менее плавного перехода в размытие измените Gradient Radius — чем выше значение, тем плавнее переход. 

Triangle blur

Еще один тип размытия

Размытие в движении

Интересный эффект Zoom Blur, имитирующий размытие в движении. Для управление положением размытия переместите точку на превью. 

Ночное освещение

Фильтр Night создан для получения эффекта скудного освещения

Инверсия цвета

Фильтр Invert Color применяет инверсию к цветам изображения

Прозрачный фон

Фильтр Alpha находит фон и делает его прозрачным

Ломография

Фильтр Lomo стилизует изображение под снимок фотоаппарата Lomo

Ночное видение

Фильтр Night Vision стилизует изображение под вид из прибора ночного видения — в черно-зеленых тонах

Выпуклость

Фильтр Bulge / Pinch делает искажение в виде выпуклости. Для настройки укажите радиус, силу изгиба (по оси Z) и выберите центр с помощью точки на превью 

Водоворот

Фильтр Swirl создает загнутое искажение в виде водоворота

Туннель

Tunnel создает искажение на части изображение, имитирующее движение в туннеле

Соты

Фильтр Hexagonal Pixelate создает мозаику в виде сот 

Квадратная плитка

Фильтр Quadrangular Pixel создает мозаику в виде квадратов

Color halftone

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

Dot screen

Фильтр создает частичную видимость с «освещением» через точки

Вы можете использовать несколько фильтров сразу

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

Вы можете создавать свои пресеты, содержащие сразу несколько фильтров

По умолчанию плагин создает слой заливки для исходного элемента, но вы можете получать и новое изображение, указав Save as new image во вкладке Settings

Как пользоваться 

1. Чтобы добавить фильтр, нажмите + на панели Filters
2. Из выпадающего списка выберите нужный вам фильтр
3. Чтобы отредактировать параметры уже добавленного фильтра, нажмите на иконку слева от названия фильтра

Как установить Filter

Ссылка на плагин:  https://www.figma.com/community/plugin/792025380269016893/Filter

Как устанавливать плагины Figma читайте здесь

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

Линейные градиенты • Про CSS

CSS-градиенты позволяют сделать фон из двух и более цветов, плавно переходящих из одного в другой. Они с нами уже достаточно давно, и имеют довольно неплохую поддержку браузерами. Большинство современных браузеров понимает их без префиксов, для IE9 и старше есть Gradient Filter, также для IE9 можно использовать SVG.

Спецификация: w3.org/TR/css3-images/#gradients.

Градиенты могут быть использованы везде, где используются картинки: в фонах, в качестве буллетов списков, они могут быть заданы в content или border-image.

linear-gradient

Линейные градиенты достаточно просты в использовании. Для самого элементарного градиента достаточно задать начальный и конечный цвета:

background: linear-gradient(orangered, gold);

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

Угол или направление градиента

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

В градусах: от 0 до 360, например 270deg.

Ключевыми словами:

to top = 0deg;

to right = 90deg;

to bottom = 180deg — значение по умолчанию;

to left = 270deg.

Ключевые слова можно сочетать между собой, чтобы получить диагональный градиент, например to top left.

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

Вот код самого первого квадрата, для примера:

.top-left {
   background: linear-gradient(to top left, purple, crimson, orangered, gold);
}

Следует помнить, что to top right не то же самое, что 45deg. Цвета градиента располагаются перпендикулярно линии направления градиента. При to top right линия идет из нижнего левого в верхний правый угол, при 45deg — располагается строго под этим углом независимо от размеров фигуры.

Разница хорошо видна на прямоугольных фигурах:

Управление положением цветов

Значения точек остановки для цветов градиента задаются в единицах или в процентах и могут быть больше 100% и меньше 0%.

Примеры задания значений в %, в em и значения, выходящие за границы элемента:

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

Так можно сделать, например, фон под боковую колонку, растянутый на всю высоту родительского элемента:

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

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

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

.light {
  background: peachpuff linear-gradient(90deg,
    rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .4) 50%
  ) center center / 2em;
}

.dark {
  background: steelblue linear-gradient(
    rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .2) 50%
  ) center center / 100% 1em;
}

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

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

Также важно знать, что ключевое слово transparent означает прозрачный черный, а не прозрачный белый, поэтому при его использовании в Firefox можно получить вот такую неприятность:

Действующий пример (смотреть в Firefox): jsbin.com/OvOwEma/2/edit.

Чтобы этого избежать, используйте полностью прозрачные цвета нужного оттенка, например, белый: rgba(255, 255, 255, 0) или черный rgba(0, 0, 0, 0). Про разные способы задавать цвета можно почитать здесь.

Чтобы узнать rgb-нотацию конкретного цвета, можно воспользоваться leaverou.github.io/css-colors, инструментом от Lea Verou.

repeating-linear-gradient

Помимо обычного linear-gradient можно сделать repeating-linear-gradient — повторяющийся градиент

Примерный код:

background: repeating-linear-gradient(
  green, green .5em,
  transparent .5em, transparent 1em
);

К сожалению, повторяющиеся градиенты ведут себя как попало и подойдут только для узоров, которым не важна точность. Если нужна аккуратность, используйте linear-gradient в сочетании с background-size и background-repeat.

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

Ограничения

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

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

Для быстрого создания кроссбраузерных градиентов есть очень удобный инструмент: colorzilla.com/gradient-editor/. Помимо кода для современных браузеров, он предложит код для старых IE и SVG для 9-го.

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

Как убрать черно белый эффект в фотошопе

как убрать черно белый эффект

как убрать с готового фото черно-белый эффект?

Ответы:

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

5 лет назад

Для ответа необходимо авторизироваться

RPI.su — самая большая русскоязычная база вопросов и ответов. Наш проект был реализован как продолжение популярного сервиса otvety.google.ru, который был закрыт и удален 30 апреля 2015 года. Мы решили воскресить полезный сервис Ответы Гугл, чтобы любой человек смог публично узнать ответ на свой вопрос у интернет сообщества.

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

Чтобы связаться с нами по любому вопросу О САЙТЕ (реклама, сотрудничество, отзыв о сервисе), пишите на почту [email protected]. Только все общие вопросы размещайте на сайте, на них ответ по почте не предоставляется.

Работа с цветом в Фотошопе

13.04.2016

← Назад к списку

, Понедельник-четверг с 09.00 до 19.00 Пятница с 09.00 до 18.00

Делаем чёрно-белую цветокоррекцию в Фотошоп

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

​Перевод выполнен на основе урока, выложенного на видео портал YouTube, поэтому сделаем все, чтобы Вам было понятно и легко в выполнении.

Мы проработаем переэкспонированные (сильно осветлённые) области на изображении (небо, поверхность воды), которые были получены из-да длительной выдержки в момент создания данного снимка. Кстати говоря, эффект «размытия» движущейся воды и облаков также получены в следствие длительной выдержки. Простыми словами, выдержка (она же — скорость затвора (shutter speed value)) — это промежуток времени в течение которого ваша камера делает один снимок.

Финальный результат:

Скачать архив с материалами к уроку

Итак,приступим!

Шаг 1

Откроем изображение в фотошопе. Сделайте копию слоя (Ctrl+J) и, так как мы будем пользоваться фильтрами, преобразуйте слой с копией в смарт-объект Convert to Smart-Object (Преобразовать в смарт – объект).

прим.автора: если вы используете фильтры на слое со смарт-объектом, вы всегда можете отредактировать настройки фильтров, если это вам понадобится.

Шаг 2

Теперь перейдём в Image — Adjustments — Shadow/Highlights (Изображение – Коррекция — Тени и света) для того, чтобы проявить максимальное количество деталей в светах и тенях и применим  настройки, как на скриншоте. Поработав с настройками Shadow/Highlights (Изображение – Коррекция — Тени и света), можно запросто придать фотографии эффект HDR.

Примечание: подробнее о том, как применять коррекцию Света и Тени, вы можете прочитать в этом уроке.

Шаг 3

Теперь давайте создадим корректирующий слой Black/White (Чёрное и белое) для придания фотографии большего контраста (по большее части, объектам на переднем плане), а также для выявления деталей изображения и применим указанные настройки.

Шаг 4

Создадим новый корректирующий слой Gradient map (Карта градиента) с чёрно-белым градиентом, как на скриншоте (прим.автора: с этим корректирующим слоем мы добавим контраст фону фотографии). Измените режим наложения, этого корректирующего слоя, на Soft Light (Мягкий свет). После данной операции контраст станет более заметен. Для смягчения эффекта можно снизить Opacity (Непрозрачность) это слоя до 50%.

Шаг 5

Теперь давайте создадим новый корректирующий слой Levels (Уровни) и совсем немного приглушим светлые оттенки. Таким образом, увеличим кол-во света на переднем плане.

Шаг 6

Идём дальше. Создадим эффект виньетки, для нашего фото. Воспользуемся корректирующим слоем Solid Color (Цвет) и зальём его чёрным цветом. Далее, воспользуемся инструментом Elliptical Marque Tool  (Овальная область) и создадим такую же овальную область, как на картинке (для её редактирования можно использовать Transform Selection (Трансформирование выделенной области)). Далее, перейдём на маску корректирующего слоя и применим комбинацию клавиш Alt+Del. Дважды кликнув по маске слоя, мы попадём в окно редактирования маски. Если подвигать ползунок Feather (Растушёвка), то мы увидим, как чёрные края начнут размываться. Изменим радиус растушёвки на свой вкус (Автор использовал значение в 260 px). Измените режим наложения, данного слоя, на Soft Light (Мягкий свет), тем самым создав ещё больший контраст.

Шаг 7

Объединим все слои в один (Alt+Shift+Ctrl+E) и применим белую маску слоя. Теперь перейдём в Filter Gallery – Artistic – Paint Daubs (Галерея фильтров – Художественный – Масляная живопись). Этот фильтр придаст фотографии немного резкости. Далее создадим новый слой, в галерее фильтров и перейдём в Filter Gallery – Distort – Diffuse Glow (Галерея фильтров – Дисторсия – Диффузное свечение). С помощью указанных настроек фильтра, добавим фотографии свечения.

Шаг 8

Теперь перейдём в Image — Apply Image (Изображение — Внешний канал) и применим указанные настройки на маске слоя к слою Layer 0 copy (так он назван у автора).

Теперь мы получили тот самый результат, к которому стремились!

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

Автор: Andrei Oprinca

Как убрать эффект красных глаз в фотошопе

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

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

Я нашел в Интернете одну такую фотографию, чтобы показать, как это всё делается. Из данного фото мне понадобятся только глаза, над которыми мы будем проводить эксперименты:

И так мы убедились в том, что девушку с такими глазами оставлять просто невозможно, поэтому в панели инструментов ищем инструмент «Красные глаза»

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

Отпускаем левую кнопку мыши и смотрим, что получилось:

Точно такую же операцию проделываем и со вторым глазом:

Сохранить фотографию можно с помощью «Файл – Сохранить как…» либо «Файл – Сохранить для web и устройств».

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

А также смотрим тематическое видео:

HTML фильтр стиля DOM Свойство

❮ Объект стиля

Пример

Изменить цвет изображения на черно-белый (100% оттенки серого):

document.getElementById («myImg»). style.filter = «оттенки серого (100%)»;

Определение и использование

Свойство фильтра добавляет к изображениям визуальные эффекты (например, размытие и насыщенность).

Поддержка браузера

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Числа, за которыми следует Webkit, указывают первую версию, работавшую с префиксом.

Синтаксис

Вернуть свойство фильтра:

Установите свойство фильтра:

объект .style.filter = «нет | размытие () | яркость () | контраст () | тень () | оттенки серого () | оттенок-поворот () | инвертировать () | непрозрачность () | насыщенность () | сепия () »

Функции фильтра

Примечание: Фильтры, использующие процентные значения (т. Е. 75%), также принимают значение как десятичный (например, 0,75).

Технические данные

Связанные страницы

Ссылка CSS: свойство фильтра

Создайте простой темный режим с фильтрами CSS

Итак, есть вещь, о которой вы, вероятно, не слышали, называется «темный режим».Да, ты прав, они везде. Позвольте мне научить вас, как украсить паутину еще большим количеством случаев света на темноте! 🌓

Предупреждение : В этом руководстве используются возможности фильтров CSS, поэтому они поддерживаются не всеми браузерами. По данным на 10 июля 2019 года, его поддерживают 94,36% пользователей по всему миру.

Как работают фильтры? #

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

  .invert-me {
 фильтр: инвертировать (100%); 
}  

Другой функцией фильтра является функция ✨ invert () ✨. Требуется процент (или десятичное число от 0 до 1). MDN сообщает нам следующее:

[Функция фильтра] инвертирует образцы во входном изображении. Значение суммы определяет долю конверсии. Значение 100% полностью инвертируется. Значение 0% оставляет вход без изменений.Значения от 0% до 100% являются линейными множителями эффекта. Значение лакуны для интерполяции равно 0.

Звучит идеально для создания простого темного режима! Ведь перевернутое черное — это белое (и наоборот), верно? Конечно! Давайте попробуем просто перевернуть всю страницу и посмотрим, как это выглядит:

Выглядит уже неплохо! Если не считать перевернутого изображения, страница выглядит неплохо. Как мы могли предотвратить инвертирование изображения? Мы могли бы проделать магический трюк, переместив изображения из контейнера, а затем разместив их правильно с абсолютным позиционированием, однако это звучит ужасно для ux, dx и a11y и, возможно, других сокращений, поэтому нам нужно найти другой способ.Мы также можем инвертировать только части страницы, скажем, каждые

, , ,

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

Решение №

Но подождите! Инвертированный белый цвет — черный, а инвертированный черный — белый … Может ли это означать, что любой цвет, инвертированный четное количество раз, будет одного и того же цвета? Конечно это так! Давайте просто вернем все изображения обратно в исходную форму при инвертировании оболочки!

Кажется, работает! Теперь каждое изображение будет перевернуто обратно.Мы также можем использовать класс no-dark-mode , чтобы инвертировать другие элементы, такие как видео, элементы с фоновыми изображениями CSS или части страницы, которые уже светятся на темном цвете.

← На главную

Преобразование цветов изображения в оттенки серого в ванильном JavaScript

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

Но что, если мы хотим преобразовать их только в три варианта цвета?

Мы будем использовать следующие цвета:

• черный
• белый
• серый (только 1 тип!)

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

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

JavaScript для преобразования изображения в оттенки серого постоянная ссылка

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

  const img = document.getElementById ("eeveelutions"); 
 const canvas = document.getElementById ("холст"); 
 const ctx = canvas.getContext ("2d"); 
 
 img.onload = function () {
 ctx.drawImage (img, 0, 0); 
 const imgData = ctx.getImageData (0, 0, canvas.width, canvas.height); 
 
};  

Это возвращает rgba значений цвета, так как вчера нам нужно было перебрать каждый 4-й дочерний элемент.

  для (i = 0; i  
}  

Хорошо, теперь мы получаем 4-пиксельные значения, равные rgba . Альфа, которую мы не будем использовать, но мы хотим получить одно комбинированное значение для rgb .

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

  пусть count = imgData.data [i] + imgData.data [i + 1] + imgData.data [i + 2];  

Это даст нам номер пикселя от 0 (черный) до 765 (белый).

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

• 0-255 = черный
• 256-510 = серый
• 511-765 = белый

При этом мы может иметь следующий код:

  let color = 0; 
, если (количество> 510) цвет = 255; 
 иначе, если (count> 255) color = 127.5;  

Здесь мы определили наш цвет по умолчанию как черный (0), наш белый (255) и наш серый (127,5)

Затем мы можем добавить наш цвет к первым трем значениям пикселя и 255 к нашему альфа-слою .

  imgData.data [i] = цвет; 
 imgData.data [i + 1] = цвет; 
 imgData.data [i + 2] = цвет; 
 imgData.data [i + 3] = 255;  

Затем нам нужно вернуть данные на холст.

  ctx.putImageData (imgData, 0, 0);  

Итак, мы только что преобразовали наше изображение в три цвета!

Поэкспериментируйте с этим Codepen.

См. Изображение холста Pen Vanilla JavaScript в черно-белое от Криса Бонгерса (@rebelchris) на CodePen.

JavaScript для преобразования изображения в черно-белое постоянная ссылка

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

• черный = 0 — 382
• белый = 383 — 765

И это приведет к следующему циклу Jvascript:

  for (i = 0; i  let count = imgData.данные [я] + imgData.data [я + 1] + imgData.data [я + 2]; 
 пусть цвет = 0; 
, если (количество> 383) цвет = 255; 
 
 imgData.data [i] = цвет; 
 imgData.data [i + 1] = цвет; 
 imgData.data [i + 2] = цвет; 
 imgData.data [i + 3] = 255; 
}  

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

См. Изображения холста Pen Vanilla JavaScript в черно-белые — чистый черно-белый от Криса Бонгерса (@rebelchris) на CodePen.

У imageData API, как и у Canvas, очень хорошая поддержка!

Спасибо за чтение, давайте подключимся! постоянная ссылка

Спасибо, что прочитали мой блог. Не стесняйтесь подписаться на мою рассылку новостей по электронной почте и подключиться к Facebook или Twitter

CSS Filter Generator — CSS Portal

О CSS-фильтрах

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

У дизайнеров

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

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

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

Размытие

Эффект размытия делает изображение размытым. Для этого используется алгоритм размытия по Гауссу. Может быть используется для «цензуры» или для неважного фонового изображения, чтобы отвлечь внимание.

Функция blur () в CSS принимает только один аргумент — количество пикселей. Чем он больше, тем сильнее размытие. В по умолчанию — 0 (без размытия).

Без фильтра

Размытие 5px

Размытие 10px

Первое изображение в примере, как всегда, без фильтра, второе — со средой. blur (5px), а последний очень размытый (10px), так что картинку практически невозможно различить.

Яркость

Фильтр функции яркости () позволяет управлять уровнем яркости изображения.

Мы синтаксис для яркости () — это процентное значение или десятичная дробь. Изначально каждое изображение имеет 100% яркость. Его можно как уменьшить (до 0%), так и увеличить.

Без фильтра

Яркость 50%

Яркость 150%

У второго изображения в примере уменьшена яркость (фильтр: яркость (50%)), и третий — увеличился до 150%. Чем ниже значение, тем темнее изображение, и наоборот.

Оттенки серого

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

Функция оттенков серого () принимает процентное значение «серости», где 0% означает, что изображение не будет изменено, но 100% соответствует полностью черно-белому изображению. Вы также можете использовать доли от одного вместо процентов (0 = 0%, 0,5 = 50%, 1 = 100%).

Без фильтра

Оттенки серого 50%

Оттенки серого 100%

В этом примере первая фотография полностью без фильтра.Второй имеет свойство примененный фильтр: оттенки серого (50%) и 50% черно-белый. Третий полностью черный и белый из-за фильтра свойств: оттенки серого (100%).

Поворот оттенка

Параметр поворота оттенка соответствует углу на цветовом круге. Это выражается в градусов или радиан и колеблется от 0 до 360 градусов. Вы также можете указать меньшее (отрицательное) или большее значение, но оно все равно будет преобразовано в диапазон 0–360 (в градусах).

Каждый цвет на картинке соответствует определенному углу на цветовом круге. Например, красный — 0 (или 360) градусов, синий — 90 градусов, желтый — 120 градусов, зеленый — 180 градусов.

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

Без фильтра

Поворот оттенка на 90 градусов

Поворот оттенка на 180 градусов

Исходное изображение представлено в близких друг к другу желто-зеленых тонах, поэтому цветовой сдвиг равномерно по всему изображению.При повороте на 90 градусов на первом изображении общий тон меняется на зеленый, 180 градусов для синего и 270 градусов (-90 градусов равно 270) для красного.

Инвертировать

Еще один фильтр для работы с изображениями из CSS — инвертирование цветов (создание негатива).

Функция invert () принимает процент от 0% до 100% (или от 0 до 1). 0% — исходное изображение, 100% — полностью негатив.

Без фильтра

Инвертировать 75%

Инвертировать 100%

Второе изображение в примере инвертировано на 75%, а третье полностью негативно.

насыщенных

Насыщенность изображения — это степень интенсивности составляющих его цветов. Чем выше значение насыщенности, тем более «красочнее» изображение.

Вы можете контролировать насыщенность в CSS с помощью функции saturate () синтаксис которых похож на яркость () и контраст ().

Без фильтра

Насыщение 20%

Насыщение 200%

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

Сепия

Еще один популярный фильтр — сепия. Похоже на градации серого, только рисует картинку не в серый, но в красно-коричневых тонах. Это дает очень приятный эффект «старения».

Синтаксис и работа функции sepia () точно так же, как оттенки серого ().

Без фильтра

Сепия 50%

Сепия 100%

Пример демонстрирует, как работает этот фильтр. Первое изображение — оригинал без фильтры, второй имеет свойство filter: sepia (50%), а третий — filter: sepia (100%).

Заключение

CSS-фильтры позволяют создавать прекрасные визуальные эффекты с изображениями, не нанося вреда вашему сайту. представление.

В статье рассмотрено 8 функций фильтрации, но на самом деле их немного больше. Также есть: opacity (), который контролирует прозрачность, и drop-shadow (), который создает тень. Детально они не анализируются, так как не взаимодействуют напрямую с цветами. изображения.

10 Полезный CSS-фильтр изображений в градациях серого

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

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

См. Также: 25 полезных CSS Timeline

Кроссбраузерное изображение в оттенках серого с CSS

Это руководство Карла Хорки отлично подходит для применения эффекта оттенков серого к изображениям в Firefox 10+, Firefox на Android, Chrome 19+ и Safari 6+.

СКАЧАТЬ

Черно-белое изображение при наведении курсора с CSS

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

СКАЧАТЬ

Эффекты фильтра CSS: размытие, оттенки серого, яркость

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

СКАЧАТЬ

Эффекты наведения на изображение на чистом CSS3

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

СКАЧАТЬ

Фильтр оттенков серого для Google Map

Этот фильтр оттенков серого CSS для Google Map разработан Джо Уоткинсом.

СКАЧАТЬ

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

Этот фильтр оттенков серого Css3 совместим с Chrome 18+, Firefox 4+, IExplorer 6+, Safari 5.2+, Opera 13+. Вы можете загрузить этот фрагмент кода CSS в формате Zip вместе с файлом SVG.

СКАЧАТЬ

Эффекты фильтров CSS3: оттенки серого, инверсия, сепия и др.

CSS3 эффекты фильтров, включая оттенки серого, поворот оттенка, инвертирование, непрозрачность, насыщенность, сепия и комбинированные эффекты, которые включают создание черно-белого элемента.

СКАЧАТЬ

Imager (плагин WordPress)

Imager — это мощный плагин WordPress для графического инструмента, который позволяет вам улучшить ваше изображение с помощью CSS-фильтров и анимации прямо из раздела мультимедиа WP.

СКАЧАТЬ

Холщовые слайдеры в оттенках серого

Ползунки из холста в оттенках серого, разработанные Робертом Фергюсоном.

СКАЧАТЬ

Учебное пособие по градациям серого с LESS CSS

Этот скрипт / код можно использовать для создания желаемого эффекта изображения без Photoshop, используя LESS CSS с HTML для автоматического преобразования изображений из цветных в оттенки серого.

СКАЧАТЬ

News — Раскрашивание изображений с помощью двухцветных фильтров — WordPress.org

Создано Alex Lende

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

Фильтры? Нравится в инстаграмм?

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

Фото Чарльза Прагнелла.


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

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

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

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

Как добавить дуплексный фильтр?

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

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

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

Будет ли это перезаписывать изображения в моей медиатеке?

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

Могу ли я добавлять двухцветные цвета в блоки или темы, которые я разрабатываю?

API для добавления двухцветных цветов к блокам является экспериментальным в Gutenberg v10.6. Тем не менее, документацию по его использованию в ваших собственных блоках можно найти, и она будет обновлена ​​в разделе «Поддерживает цвет» в Руководстве редактора блоков. Темы могут добавлять предустановки дуплекса с помощью theme.json. Дополнительную информацию можно найти в разделе «Глобальные настройки и предустановки стилей» в Руководстве редактора блоков.

Попробуйте прямо сейчас Используя плагин Gutenberg

Функция дуплекса была выпущена в версии 10.6 плагина Gutenberg, так что вы можете попробовать ее прямо сейчас, до выпуска WordPress 5.8 в июле.

---

Спасибо @joen и @mkaz за помощь в написании и рецензировании этого сообщения.

Как это:

Нравится Загрузка …

Фильтры

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

Подкаст CSS — 023: Фильтры

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

Комбинация фильтров CSS и фонового фильтра позволяет нам применять эффекты и размывать то, что необходимо, в реальном времени. Размытие и непрозрачность — два из многих доступных фильтров, поэтому давайте быстро разберемся, что они все делают и как их использовать.

При размещении текста поверх изображений следите за тем, чтобы текст оставался читаемым, даже если эффект фильтра не поддерживается в браузере пользователя. Например, на данный момент backdrop-filter не поддерживается в Firefox, поэтому вы должны убедиться, что у пользователей Firefox не осталось текста, который они не могут легко прочитать.

Фильтр

Свойство #

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

blur #

Это применяет размытие по Гауссу, и единственный аргумент, который вы можете передать, — это радиус , который определяет степень размытия. Это должна быть единица длины, например 10px . Проценты не принимаются.

  .my-element {
 filter: blur (0.2em); 
}  

яркость #

Чтобы увеличить или уменьшить яркость элемента, используйте функцию яркости. Значение яркости выражается в процентах, а неизмененное изображение выражается как значение 100%.Значение 0% делает изображение полностью черным, поэтому значения от 0% до 100% делают изображение менее ярким. Используйте значения более 100%, чтобы увеличить яркость.

  .my-element {
 фильтр: яркость (80%); 
}  

Вы также можете использовать десятичные значения вместо процентных значений в таких фильтрах, как , яркость . Чтобы установить яркость 80% с помощью десятичной дроби, напишите 0,8 .

контраст #

Установите значение от 0% до 100% для уменьшения или увеличения контрастности соответственно.

  .my-element {
 фильтр: контраст (160%); 
}  

оттенки серого #

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

  .my-element {
 фильтр: оттенки серого (80%); 
}  

invert #

Так же, как оттенков серого , вы можете передать 1 или 0 функции invert () , чтобы включить или выключить ее. Когда он включен, цвета элемента полностью инвертируются. Вы также можете использовать процентные или десятичные значения, чтобы применить только частичную инверсию цветов. Если вы не передадите никаких аргументов в функцию invert () , элемент будет полностью инвертирован.

  .my-element {
 фильтр: инвертировать (1); 
}  

opacity #

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

  .my-element {
 фильтр: непрозрачность (0,3); 
}  

saturate #

Фильтр насыщения очень похож на фильтр яркости и принимает тот же аргумент: число или процент.Вместо увеличения или уменьшения эффекта яркости, saturate увеличивает или уменьшает насыщенность цвета.

  .my-element {
 фильтр: насыщенный (155%); 
}  

сепия #

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

  .my-element {
 фильтр: сепия (70%); 
}  

hue-rotate #

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

  .my-element {
 фильтр: изменение оттенка (120 градусов); 
}  

drop-shadow #

Вы можете применить отбрасываемую тень, охватывающую кривую, как в инструменте дизайна, таком как Photoshop с падающей тенью . Эта тень применяется к альфа-маске, что делает ее очень полезной для добавления тени к вырезанному изображению. Фильтр drop-shadow принимает параметр тени, который содержит разделенные пробелом значения смещения x, смещения y, размытия и цвета.Он почти идентичен box-shadow , но ключевое слово inset и значение распространения не поддерживаются.

  .my-element {
 filter: drop-shadow (5px 5px 10px оранжевый); 
}  

Узнайте больше о различных типах теней в модуле теней.

url #

Фильтр url позволяет применить фильтр SVG из связанного элемента или файла SVG. Вы можете узнать больше о фильтрах SVG здесь

Backdrop filter #

Свойство backdrop-filter принимает все те же значения функции фильтра, что и filter .Разница между фильтром фона и фильтром заключается в том, что свойство фонового фильтра применяет фильтры только к фону, а свойство filter применяет его ко всему элементу.

No related posts.