Создание перекрашиваемой иконки для веба без векторного исходника:
По сути с небольшими доработками все это можно запихать в один экшн фотошопа который делал бы это автоматически.
Берем иконку (эта первая попавшаяся из того что было под рукой):
Чтобы получить базовый цвет — переводим из RGB в Lab. Канал Light заливаем 50% серым.
Как видно, иконка состоит из 2х цветов — основной голубой вверху и фиолетовый внизу. Так как голубого больше — берем пипеткой этот цвет и его используем как базовый.
Делаем наложение базового цвета на нашу иконку с режимами darken и lighten (слева и справа соответственно).
Переводим в ЧБ — desaturate
Автоуровни:
Инвертируем результат darken
По полученым яркостям делам маски прозрачности (darken для черного и для lighten белого)
белую маску не видно на светлом фоне.
Подкладываем наш базовый цвет и видим что все получилось.
Теперь совмещаем полученые результаты. Сначала кладем черный слой, потом белый.
Вот мы и получили клон нашей иконки.
И теперь мы можем подкладывать абсолютно любой цвет.
Спасибо за внимание.
По сути с небольшими доработками все это можно запихать в один экшн фотошопа который делал бы это автоматически.
Берем иконку (эта первая попавшаяся из того что было под рукой):
Чтобы получить базовый цвет — переводим из RGB в Lab. Канал Light заливаем 50% серым.
Как видно, иконка состоит из 2х цветов — основной голубой вверху и фиолетовый внизу. Так как голубого больше — берем пипеткой этот цвет и его используем как базовый.
Делаем наложение базового цвета на нашу иконку с режимами darken и lighten (слева и справа соответственно).
Переводим в ЧБ — desaturate
Автоуровни:
Инвертируем результат darken
По полученым яркостям делам маски прозрачности (darken для черного и для lighten белого)
белую маску не видно на светлом фоне.
Подкладываем наш базовый цвет и видим что все получилось.
Теперь совмещаем полученые результаты. Сначала кладем черный слой, потом белый.
Вот мы и получили клон нашей иконки.
И теперь мы можем подкладывать абсолютно любой цвет.
Спасибо за внимание.