Урок Смена иконок в push-уведомлениях

Evbej

Активный участник
Автор темы
high coder
43
12
27
Добрый день, в этом уроке я расскажу, как заменять иконки в Push-уведомлениях на свои. Хотелось бы сразу сказать, что это не совсем иконки, а символы. И для их смены нам понадобиться редактировать шрифт или создать свой.

Для работы над шрифтом нам понадобиться программа FrontFroge.
FontForge

Для работы со шрифтом нам понадобятся 4 файла. (Cef/front/) notify.svg, notify.ttf, notify.woff, notify.eot.
Скачав и установив FrontFroge, запускаем программу и открываем 3 файла notify.svg, notify.ttf, notify.woff и переходим в файл notify.svg.
И мы сразу видим нужные нам символы
1.png

В этом уроке я покажу на примере символа с галочкой
RАGЕ Multiplауеr   26.09.2020 14_32_37 (2).png

А в конце прикреплю файл со всеми заменёнными символами.

Двойным кликом открываем первый символ
2.png


И видим рабочую область. Теперь нам нужно очистить рабочую область, удалив старый символ. Это можно сделать кликом на линию и нажав клавишу Delete, а можно просто всё выделить и удалить
3.gif


Теперь нам нужно импортировать картинку с которой будем делать символ. Я взял такую картинку
cc3d52eec7c4e0bb0dae91898215be68.png

Нажимаем CTRL+SHIFT+I и выбираем свою картинку. Должно получиться так:
5.png


Дальше мы выбираем инструмент для обводки. Это может быть карандаш, перо или можете использовать геометрические фигуры.
Я покажу на примере пера. Выбираем инструмент на панели:
6.png

И начинаем обводить картинку, как показано на гифке.
8.gif

Так же вы должны убедиться что линия замкнута (в таком случае она сменит цвет с красного на белый).
И теперь может подровнять линии, выбрав на панели значок курсора
10.gif

И уже в файле notify.svg мы видим что наша улыбка появилась
11.png

Далее повторяем данные действия с каждым элементом в отдельности.
И уже после этого удаляем саму картинку. Нажав Clear Background.
12.png

Должно получиться так:
13.png

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

После того, как мы вставили во все файлы символ. Нужно сохранить всё. Для этого в верхнем левом углу нажимаем File, и в выпадающем списке выбираем Generate Fonts.
19.png

Если это SVG формат то выбираем SVG font. Если ТTF то выбираем TrueType. Если WOFF то выбираем Web Open Font (WOFF). Далее во время сохранения возникнет ошибка, там нужно нажать GENERATE.
Теперь хочу сказать пару слов о формате .eot. Этот формат поддерживает Internet Explorel и для его создания можете воспользоваться конвентером. На этом всё и можно проверить в игре.
22.png

И теперь вместо галочки у нас символ.

Так же я подготовил свои иконки на подобии смайликов, для тех кому лень сделать свои.

 

Вложения

  • 28.1 KB Просмотры: 77
Последнее редактирование:
  • Like
Реакции: taga и shnyrxk