Как изменить цвет значка svg в фотошопе

Обновлено: 21.11.2024

DigitalOcean объединяет усилия с CSS-Tricks! Специальное приветственное предложение: получите бесплатный кредит в размере 100 долларов США.

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

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

Во-первых, давайте начнем с небольшой сокращенной разметки SVG:

Настройте класс .icon в CSS и установите свойство заполнения SVG в состоянии наведения, чтобы поменять местами цвета.

Это, безусловно, самый простой способ применить цветное состояние наведения к SVG. Три строчки кода!

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

Недавно я работал над проектом, в котором значки социальных сетей были компонентом библиотеки шаблонов, которой все были довольны. В этом случае на значки ссылались из элемента. Мне было поручено применить цветные стили :focus и :hover без корректировки разметки.

Итак, как вы собираетесь добавлять цветной эффект наведения к значку, если это не встроенный SVG?

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

Нам доступны фильтры CSS:

  • яркость();
  • контраст();
  • оттенки серого();
  • инвертировать();
  • непрозрачность();
  • насыщение();
  • сепия();
  • оттенок-поворот();
  • размытие();
  • падающая тень();

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

По умолчанию нет CSS-фильтра, позволяющего добавить собственный цвет.
У нас есть hue-rotate() , но он только регулирует существующий цвет; он не добавляет цвет, что не очень хорошо, поскольку мы начинаем с монохроматического значка.

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

Если одна из функций фильтрации не существует или имеет неверное значение, весь список игнорируется, и к элементу не применяется фильтр.

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


Итак, чтобы раскрасить наши значки, нам нужно найти правильную комбинацию.

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

Цвет на выходе зависит от начального значения тона:


Чтобы добавить достаточно цвета с помощью sepia() , нам сначала нужно использовать invert() для преобразования нашего значка в средне-серый цвет:

Затем мы можем добавить желто-коричневый тон с помощью sepia() :

…затем измените оттенок с помощью hue-rotate():

После того, как мы получим нужный цвет, мы можем настроить его с помощью saturation() и яркости():

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

Даже с этим инструментом, он все еще немного неудобен, не поддерживается Internet Explorer и, что самое главное, вы не можете указать точный цвет.

Эти данные о поддержке браузера предоставлены компанией Caniuse, в которой содержится более подробная информация. Число указывает, что браузер поддерживает эту функцию в этой версии и выше.

Рабочий стол

Мобильный телефон/планшет

< tr>
Android Chrome Android Firefox Android iOS Safari
99 96 4.4* 6.0-6.1*

Итак, что нам делать, если нам нужен определенный шестнадцатеричный код?

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

Фильтры изначально были взяты из SVG. На самом деле фильтры CSS — это просто ярлыки фильтров SVG с определенным набором встроенных значений.

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

Это синтаксис для определения фильтра:

Фильтры определяются элементом, который находится внутри раздела SVG.

Фильтры SVG можно применять к содержимому SVG в том же документе SVG. Или на фильтр можно ссылаться и применять его к содержимому HTML в другом месте.

Чтобы применить фильтр SVG к содержимому HTML, мы ссылаемся на него так же, как на фильтр CSS: с помощью функции фильтра url(). URL-адрес указывает на идентификатор фильтра SVG.

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

Вернуться к самому элементу.

Сейчас этот фильтр пуст и ничего не делает, поскольку мы не определили примитив фильтра. Примитивы фильтра — это то, что создает эффекты фильтра. Нам доступно несколько примитивов фильтров, в том числе:

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

Для наших целей мы просто собираемся использовать feColorMatrix , но если вы хотите узнать больше о фильтрах SVG, вы можете ознакомиться со спецификациями на MDN или в этой (на момент написания этой статьи) серии статей, в которой Сара Суэйдан стартовала.

feColourMatrix позволяет изменять значения цвета для каждого канала по принципу смешивания каналов в Photoshop.

Вот как выглядит синтаксис:

Атрибут color-interpolation-filters указывает наше цветовое пространство. Цветовое пространство по умолчанию для эффектов фильтра — linearRGB, тогда как в CSS цвета RGB задаются в цветовом пространстве sRGB. Важно, чтобы мы установили значение sRGB, чтобы наши цвета совпадали.

Давайте подробнее рассмотрим значения цветовой матрицы.


Первые четыре столбца представляют красный, зеленый и синий каналы цвета и значение альфа-канала (непрозрачности). Строки содержат значения красного, зеленого, синего и альфа-канала в этих каналах.

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

Мы могли бы записать эти значения как объявление цвета CSS RGBA следующим образом:

rgba(255, 255, 255, 1)

Если разделить эти значения цветового канала на 255, значения можно представить в виде числа с плавающей запятой, которое мы можем использовать в feColorMatrix.

Таким образом, мы можем создать цветовой фильтр для любого цвета со значением RGB!

Например, бирюзовый:

rgba(0, 128, 128, 1). 128%255=0,50

Этот фильтр SVG придаст цвет только значкам с белой заливкой, поэтому, если у нас есть значок с черной заливкой, мы можем использовать invert(), чтобы преобразовать его в белый перед применением фильтра SVG.

Если у нас есть просто шестнадцатеричный код, математика немного сложнее, хотя существует множество конвертеров шестнадцатеричного кода в RGBA. Чтобы помочь, я сделал конвертер HEX в feColorMatrix.

Онлайн-редактор значков позволяет очень просто создавать значки из файлов SVG. Просто загрузите, отредактируйте цвета и загрузите файл в формате PNG, SVG или PDF всего несколькими щелчками мыши.

1

Загрузить

Загрузите SVG-файл вашего значка.

2

Изменить цвет SVG, обводку или добавить плитку к значку.

3

Скачать

Скачать значок в формате PNG, SVG.

Посмотрите демонстрацию редактирования значков

Перекрасить значок с помощью редактора значков

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

Изменить цвет SVG онлайн

В зависимости от вашего бренда вы можете легко настроить основной цвет значка с помощью бесплатного онлайн-инструмента Iconscout для редактирования значков. Просто выберите цвет элемента в меню выбора цвета или добавьте значение HEX или RGB и измените цвет значка. Количество цветов, которые вы можете использовать, не ограничено!

Монохромный и серый тона

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

Доступ к тысячам уникальных цветовых палитр

Измените внешний вид значков одним щелчком мыши прямо сейчас. Мы подготовили встроенную коллекцию из тысяч уникальных цветовых палитр от наших друзей из Colorsinspo. Вы можете поделиться цветовой темой тысячами способов. Просто нажмите кнопку «Цветовая палитра» вверху, чтобы просмотреть нашу галерею цветовых палитр и выбрать понравившуюся для преобразования значков. Вы даже можете сохранять и использовать свои собственные цветовые палитры в качестве отправной точки для создания новых тем.

Добавьте плитку к значку

Загрузите SVG и добавьте плитку к своим значкам, чтобы сделать их готовыми для значков приложений. Выберите один из вариантов плитки: квадратная плитка, квадратная плитка, круглая плитка или плитка маяка. Вы также можете изменить цвет плитки, размер, радиус угла и размер значка. Скачать в формате SVG и PNG.

Часто задаваемые вопросы

Когда вы загружаете свой SVG в редактор значков, вы увидите несколько вариантов выбора цвета с левой стороны. Вам просто нужно выбрать разные цвета элементов, а затем предпочитаемые цвета. Вы найдете варианты выбора цвета по умолчанию, палитру цветов и возможность выбора путем ввода цветовых кодов. Вы также можете выбрать между монохромным цветом и монохромным серым цветом. Color Editor предоставляет вам самое простое решение для редактирования значков.

Когда вы закончите редактирование, вы увидите варианты SVG и PNG в правом нижнем углу. Прежде чем нажать кнопку загрузки, вы также можете изменить размер PNG.

Да, вы можете вносить изменения в любой файл SVG. Вы можете включить в загрузку значок из любой библиотеки значков или SVG-файл иллюстрации.

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

Photoshop позволяет сохранять элементы, слои или весь файл в формате SVG для создания масштабируемых и удобных для Интернета файлов. SVG — это масштабируемая векторная графика, которая обычно используется для логотипов и других объектов, требующих гибкости. Вот шаги по сохранению файлов SVG в Photoshop.

Чтобы сохранить файл SVG в Photoshop, выберите «Файл» > «Экспортировать как». В настройках файла установите формат SVG и нажмите «Экспорт», чтобы сохранить файл. Если параметр SVG недоступен, перейдите в Photoshop > «Установки» > «Экспорт» и снимите флажок «Использовать устаревший экспорт как», чтобы сделать формат SVG доступным.

Файлы SVG обычно обрабатываются с помощью Illustrator, хотя полезно преобразовать элементы Photoshop в формат SVG для использования во всех программах.

Несмотря на то, что сохранить файл SVG в Photoshop довольно просто, вы можете столкнуться с некоторыми проблемами.Поэтому позже в этом посте я также поделюсь некоторыми советами по устранению распространенных проблем!

А пока давайте рассмотрим три быстрых способа экспорта SVG.

Видеоруководство

Откроется окно, в котором вы можете указать детали вашего экспорта. В раскрывающемся меню рядом с Формат выберите параметр SVG.

Проверьте предварительный просмотр в середине, чтобы убедиться, что изображение правильное. Затем выберите Экспорт в нижней части окна.

Вы также можете экспортировать один или несколько слоев с помощью этой функции. Щелкните правой кнопкой мыши слой, который хотите экспортировать, и выберите «Экспортировать как».

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

2. Экспорт файла SVG с использованием ресурсов изображения

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

Вам нужно сначала переименовать свой слой, дважды щелкнув имя объекта или слоя, который вы хотите сохранить в виде файла SVG. Добавьте «.svg» в конец имени слоя и нажмите Enter (Windows) или Return (Mac).

Выберите ресурсы изображения, нажав Файл > Создать > Ресурсы изображения. Если у вас выбраны графические ресурсы, рядом с параметром будет стоять галочка.

Теперь вы можете сохранить документ в нужном формате. Выберите «Файл» > «Сохранить как» или нажмите Shift + Control + S (Windows) или Shift + Command + S (Mac).

Выберите формат файла, в котором вы хотите сохранить файл, затем нажмите "Сохранить".

После сохранения файла в папке назначения появится дополнительная папка с изображениями. Поскольку вы использовали расширение .svg, он будет содержать файл SVG в папке.

3. Скопируйте код SVG

Если вам нужен только код SVG для вставки в документ HTML, вы можете скопировать код из слоя объектов. Чтобы скопировать код, щелкните правой кнопкой мыши слой объекта SVG и выберите «Копировать SVG».

Затем код можно вставить в выбранный вами целевой документ.

Не работает сохранение в формате SVG — как исправить

При сохранении файлов SVG вы можете столкнуться с некоторыми проблемами, особенно с последними версиями Photoshop. Вот две распространенные ошибки и способы их исправления.

1. Формат SVG не отображается

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

Выберите «Правка» > «Установки» > «Экспорт» или нажмите Control + K (Windows) или Command + K (Mac) и выберите «Экспорт» в левой части окна.

Установите флажок «Использовать старый вариант «Экспортировать как», и в следующий раз при экспорте файла можно будет использовать формат SVG.

Если он не появится сразу, попробуйте перезапустить Photoshop перед повторной попыткой.

2. Экспорт текста в виде файла SVG

При экспорте текста в виде файла SVG перед экспортом файла необходимо преобразовать текст в фигуру. Это позволит вам управлять элементами в других программах, таких как Adobe Illustrator.

Чтобы преобразовать текстовый слой в фигуру, выберите текстовый слой на панели «Слои».

Нажмите правой кнопкой мыши и выберите «Преобразовать в фигуру». Слой теперь является слоем формы, как показано значком в правом нижнем углу миниатюры. Вы больше не сможете редактировать текст, но сможете сохранить весь файл как пригодный для использования файл SVG.

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

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

1. Сохранение изображений в правильном цветовом пространстве

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

Чтобы преобразовать изображение CMYK в RGB, откройте изображение в Adobe Photoshop. Перейдите к Изображение в строке меню, в раскрывающемся списке наведите указатель мыши на Режим и выберите Цвет RGB. Это преобразует изображение в цветовое пространство RGB, и вы можете заметить, что некоторые цвета стали более яркими. Затем выберите Файл, затем Сохранить как и сохраните файл. Обязательно измените имя файла, чтобы вы или кто-то еще знал, что это файл для цифровых приложений.

2. Сжать размеры файлов

При сохранении изображений для Интернета мы рекомендуем, чтобы размер файла был меньше 2 МБ (2048 килобайт), чтобы обеспечить высокую скорость загрузки страниц. При этом мы также хотим, чтобы изображения были четкими, а не пикселизированными. Качество изображения зависит от таких факторов, как окончательный размер файла и параметры сжатия. При правильных настройках сжатия можно добиться хорошего качества изображения и небольшого размера файла. Как правило, вы можете сохранить файл с уровнем сжатия изображения от 70 до 80 %, не видя пикселизации или отдельных цветовых точек. Примечание. Степень сжатия зависит от ряда факторов, включая размер и формат файла исходного изображения. Вы можете использовать бесплатный инструмент, например Imagify, для дальнейшего сжатия файла.

3. Используйте правильный формат файла

Существует четыре основных формата файлов для сохранения изображений и графики для Интернета: JPG, PNG, GIF и SVG. Каждый формат файла имеет свои преимущества, недостатки и предполагаемый вариант использования.Ваше изображение или графика должны быть сохранены в определенном формате в зависимости от того, является ли оно растровым или векторным. Растровые изображения создаются с помощью программ на основе пикселей или захватываются камерой или сканером. Эти изображения имеют конечное число пикселей и могут терять качество при увеличении. Форматы JPG, PNG и GIF лучше всего подходят для растровых изображений. Векторная графика создается с помощью векторного программного обеспечения и может иметь бесконечный размер без потери качества. SVG и GIF лучше всего подходят для векторных изображений, в то время как вы также можете сохранить векторную графику в формате JPG или PNG, однако вы потеряете возможность бесконечно масштабировать графику.

JPG или JPEG – наиболее распространенный формат растровых файлов для изображений.

Плюсы

  • Самый маленький размер файла
  • Оптимально для фотографий высокого качества.
  • Совместимость в Интернете и на любом устройстве

Минусы

  • Качество изображения может значительно снизиться при слишком сильном сжатии.
  • Файлы JPG не поддерживают прозрачный фон.

Когда использовать JPG

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

PNG

PNG – еще один распространенный растровый формат, более универсальный, чем JPG. PNG может поддерживать больше цветов (более 16 миллионов) и поддерживать прозрачный фон или альфа-канал.

Плюсы

  • Возможность иметь прозрачный фон для наложения изображения на цветной фон
  • Можно сжать без потери качества, как в формате JPG.

Минусы

  • Размеры файлов обычно больше, чем JPG.
  • Не поддерживает анимацию

Когда использовать PNG

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

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

Плюсы

  • Возможность создавать анимированные изображения и сообщения
  • Поддерживает прозрачный фон

Минусы

  • Качество изображения и размер файла зависят от количества цветов. Больше цветов в изображении будет иметь более четкое изображение, но больший размер файла. Чем меньше цветов в изображении, тем зернистее изображение, но меньше размер файла.
  • Вы можете использовать изображение только с 256 цветами.

Когда использовать GIF

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

SVG

SVG — это векторный формат, позволяющий размещать в Интернете четкую графику и управляемые объекты. SVG можно создавать и редактировать в векторных программах, таких как Adobe Illustrator, Sketch и Inkscape.
Плюсы

  • Небольшой размер файла
  • Бесконечный размер (вектор) без потери качества
  • Гибкость для разработчиков (можно изменять настройки, включая цвет и размер)
  • Можно редактировать в векторной программе, такой как Adobe Illustrator.
  • Поддерживается в продуктах Microsoft Office для графики.
  • Можно анимировать

Минусы

  • Качество изображения и размер файла зависят от количества цветов. Больше цветов в изображении будет иметь более четкое изображение, но больший размер файла. Чем меньше цветов в изображении, тем зернистее изображение, но меньше размер файла.
  • Вы ограничены использованием изображения с 256 цветами.

Когда использовать SVG

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

4. Экспорт нескольких размеров для дисплеев с высокой плотностью пикселей

Поскольку пользователи предпочитают мобильные устройства для просмотра цифрового контента, они имеют экраны с более высоким разрешением, чем обычные настольные компьютеры. Эти дисплеи HiDPI, Retina или дисплеи с высокой плотностью имеют более 200 пикселей на дюйм (PPI). Стандарт для Интернета и большинства настольных компьютеров — 72 PPI. Если пользователь просматривает изображение с разрешением 72 PPI на своем мобильном устройстве, а не на компьютере, оно не будет выглядеть таким же четким, как изображение, сохраненное с большим количеством пикселей. подходят для мобильных и настольных браузеров.

  1. Вы можете экспортировать изображение с масштабом @2x и @3x. Это означает, что программа автоматически создаст версию вашего изображения в 2 раза (200%) или в 3 раза (300%) по сравнению с исходным размером. Мобильный веб-браузер пользователя автоматически отобразит изображение с увеличением 2x или 3x на том же месте, что и исходный размер.
  2. Вы можете экспортировать изображение с более высоким разрешением. Например, в Adobe Photoshop или Illustrator вы можете сохранить изображение с разрешением 96 или 150 пикселей на дюйм. Примечание. Размер вашего файла будет больше, так как программа добавляет больше пикселей к вашему изображению.

5. Уменьшение размера изображений на 115 %

Если у вас есть небольшое растровое изображение, размер которого необходимо увеличить, вы можете увеличить его размер на 115 % в Adobe Photoshop. Это уменьшит количество пикселей, которые будут возникать при увеличении физического размера изображения. Для этого откройте свое изображение в Photoshop. В строке меню перейдите в «Изображение» и выберите «Размер изображения». В диалоговом окне в разделе «Ширина и высота» измените единицы измерения на «Проценты», а затем введите 115% в оба поля. Убедитесь, что установлен флажок «Пересэмплировать» и выбрано «Бикубическое сглаживание (увеличение)».

Четкие и сфокусированные изображения будут привлекать внимание к странице

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

Брэндон Шилдс
Дизайнер

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

Читайте также: