Добрый день, в этом уроке я расскажу, как заменять иконки в Push-уведомлениях на свои. Хотелось бы сразу сказать, что это не совсем иконки, а символы. И для их смены нам понадобиться редактировать шрифт или создать свой.
Для работы над шрифтом нам понадобиться программа FrontFroge.
FontForge
Так же я подготовил свои иконки на подобии смайликов, для тех кому лень сделать свои.
Для работы над шрифтом нам понадобиться программа FrontFroge.
FontForge
Для работы со шрифтом нам понадобятся 4 файла. (Cef/front/) notify.svg, notify.ttf, notify.woff, notify.eot.
Скачав и установив FrontFroge, запускаем программу и открываем 3 файла notify.svg, notify.ttf, notify.woff и переходим в файл notify.svg.
И мы сразу видим нужные нам символы
В этом уроке я покажу на примере символа с галочкой
А в конце прикреплю файл со всеми заменёнными символами.
Двойным кликом открываем первый символ
И видим рабочую область. Теперь нам нужно очистить рабочую область, удалив старый символ. Это можно сделать кликом на линию и нажав клавишу Delete, а можно просто всё выделить и удалить
Теперь нам нужно импортировать картинку с которой будем делать символ. Я взял такую картинку
Нажимаем CTRL+SHIFT+I и выбираем свою картинку. Должно получиться так:
Дальше мы выбираем инструмент для обводки. Это может быть карандаш, перо или можете использовать геометрические фигуры.
Я покажу на примере пера. Выбираем инструмент на панели:
И начинаем обводить картинку, как показано на гифке.
Так же вы должны убедиться что линия замкнута (в таком случае она сменит цвет с красного на белый).
И теперь может подровнять линии, выбрав на панели значок курсора
И уже в файле notify.svg мы видим что наша улыбка появилась
Далее повторяем данные действия с каждым элементом в отдельности.
И уже после этого удаляем саму картинку. Нажав Clear Background.
Должно получиться так:
Теперь мы можем закрыть это окно. Дальше мы просто будем копировать наш символ и вставлять в файлы .ttf и .woff. Для этого кликаем правой кнопкой мыши по символу в выбираем COPY.
Переходим в .woff и .ttf. листаем практически в самый низ, находим наш символ и вставляем его, выбрав PASTE.
После того, как мы вставили во все файлы символ. Нужно сохранить всё. Для этого в верхнем левом углу нажимаем File, и в выпадающем списке выбираем Generate Fonts.
Если это SVG формат то выбираем SVG font. Если ТTF то выбираем TrueType. Если WOFF то выбираем Web Open Font (WOFF). Далее во время сохранения возникнет ошибка, там нужно нажать GENERATE.
Теперь хочу сказать пару слов о формате .eot. Этот формат поддерживает Internet Explorel и для его создания можете воспользоваться конвентером. На этом всё и можно проверить в игре.
И теперь вместо галочки у нас символ.
Скачав и установив FrontFroge, запускаем программу и открываем 3 файла notify.svg, notify.ttf, notify.woff и переходим в файл notify.svg.
И мы сразу видим нужные нам символы
В этом уроке я покажу на примере символа с галочкой
А в конце прикреплю файл со всеми заменёнными символами.
Двойным кликом открываем первый символ
И видим рабочую область. Теперь нам нужно очистить рабочую область, удалив старый символ. Это можно сделать кликом на линию и нажав клавишу Delete, а можно просто всё выделить и удалить
Теперь нам нужно импортировать картинку с которой будем делать символ. Я взял такую картинку
Нажимаем CTRL+SHIFT+I и выбираем свою картинку. Должно получиться так:
Дальше мы выбираем инструмент для обводки. Это может быть карандаш, перо или можете использовать геометрические фигуры.
Я покажу на примере пера. Выбираем инструмент на панели:
И начинаем обводить картинку, как показано на гифке.
Так же вы должны убедиться что линия замкнута (в таком случае она сменит цвет с красного на белый).
И теперь может подровнять линии, выбрав на панели значок курсора
И уже в файле notify.svg мы видим что наша улыбка появилась
Далее повторяем данные действия с каждым элементом в отдельности.
И уже после этого удаляем саму картинку. Нажав Clear Background.
Должно получиться так:
Теперь мы можем закрыть это окно. Дальше мы просто будем копировать наш символ и вставлять в файлы .ttf и .woff. Для этого кликаем правой кнопкой мыши по символу в выбираем COPY.
Переходим в .woff и .ttf. листаем практически в самый низ, находим наш символ и вставляем его, выбрав PASTE.
После того, как мы вставили во все файлы символ. Нужно сохранить всё. Для этого в верхнем левом углу нажимаем File, и в выпадающем списке выбираем Generate Fonts.
Если это SVG формат то выбираем SVG font. Если ТTF то выбираем TrueType. Если WOFF то выбираем Web Open Font (WOFF). Далее во время сохранения возникнет ошибка, там нужно нажать GENERATE.
Теперь хочу сказать пару слов о формате .eot. Этот формат поддерживает Internet Explorel и для его создания можете воспользоваться конвентером. На этом всё и можно проверить в игре.
И теперь вместо галочки у нас символ.
Так же я подготовил свои иконки на подобии смайликов, для тех кому лень сделать свои.
Вложения
-
1.png
Последнее редактирование:
