Как поменять цвет иконки

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

Растровая или векторная?

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

Сравните. Справа векторная иконка на увеличении, края у нее ровные. Слева увеличена растровая иконка, при увеличении появляются пиксели и рваные края, а на краях цвет писклей неравномерный, какие-то темные, какие-то светлые.

Сама картинка уже растровая. То есть увеличивая эту картинку, правое изображение начнет терять качество).

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

Где взять векторные иконки (да и растровые)

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

Например, есть сайт https://www.iconfinder.com/ . Там большой выбор и удобная система поиска. Ставьте в фильтрах «бесплатные» и «не требуют обратной ссылки», если не хотите указывать авторство.

Iconfinder — поисковик по иконкам.

Как поменять цвет векторной иконки

Переходим в онлайн-редактор векторной графики https://vectr.com/. Если вдруг он не доступен, то попробуйте другие бесплатные графические онлайн-редакторы, там есть аналоги, которыми я тоже пользуюсь.

Загружаем иконку, кликаем на элементы иконки и в настройках задаем нужный цвет.

Редактирование цвета векторной иконки

При сохранении оставляем векторный формат SVG.

Как поменять цвет растровой иконки

Для замены цвета в растровой иконке идем в онлайн аналог фотошопа https://www.photopea.com/ и открываем изображение в нем.

Используя инструмент выделения «Цветовой диапазон», выделяем все элементы иконки.

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

Результат:

Ресурсы для поиска иконок

Напоследок, несколько популярных ресурсов для поиска иконок:

  • https://www.flaticon.com/
  • https://icons8.com/
  • https://www.iconfinder.com/
  • https://findicons.com/

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

Илья Пронин

Илья Пронин

специалист по SEO продвижению

Другие статьи:

Обсуждение и вопросы:

0 Комментариев
Оставить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *