Производство компьютерных иконок промышленности Urban Media, другие, разное, угол png
Производство компьютерных иконок промышленности Urban Media, другие, разное, угол pngтеги
- разное,
- угол,
- компания,
- прямоугольник,
- другие,
- электрон,
- бизнес,
- черный,
- промышленность,
- svg,
- производство,
- машина,
- фабрика,
- значки компьютеров,
- черно-белый,
- png,
- прозрачный png,
- без фона,
- бесплатная загрузка
- Размер изображения
- 512x512px
- Размер файла
- 5.55KB
- MIME тип
- Image/png
изменить размер PNG
ширина(px)
высота(px)
Некоммерческое использование, DMCA Contact Us
- почта, значки компьютеров электронная почта, электронная почта, Разное, угол png 1000x1000px 103.14KB
- Сборочная линия Производственная линия Производство Компьютерные иконы Фабрика, производство, Разное, другие png 512x512px 10.02KB
- Зажим Производство Сервисной Промышленности, иконка фабрики, угол, текст png 1000x1000px 7.28KB
- Иконки электронной почты компьютера Дизайн иконок Сообщение, электронная почта, разное, угол png
512x512px
10.
66KB - White-label продукт, этикетка, Разное, синий png 1700x1200px 74.34KB
- Машиностроение Производство Транспорт, другие, Разное, инфографики png 3351x1928px 268.22KB
- фабрика «Белое-синее», Фабрика «Бхосари Индустрия», разное, угол png 512x512px 100.78KB
- Фактор оранжевого и бирюзового искусства, Промышленный завод, Производственный корпус, завод, фотография, бизнес png 1622x1493px 31.43KB
- Иконки электронной почты компьютера Gmail, электронная почта, разное, угол png 980x984px 71.53KB
- Сборочная линия Фабрика Промышленность Производство Производственная линия, другие, угол, компания png 512x512px 10.99KB
- Бизнес-блог, разделитель, угол, компания png 500x500px 3.74KB
- Квадрат, квадраты, Разное, угол png
1000x1000px
5. 58KB
- Instagram логотип, логотип компьютер иконки, инста, Разное, другие png 500x500px 11.98KB
- Фабрика Компьютер Иконки Строительство, фабрика, угол, текст png 512x512px 4.48KB
- Промышленность Компьютерные Иконы Производство Фабрика, Иконка промышленности, угол, текст png 550x555px 3.22KB
- Электричество Производство стройматериалов Электротехнические работы Строительство, испытания электробезопасности, здание, компания png
728x470px
315.
- Компьютерные иконки Адрес электронной почты, электронная почта, разное, угол png 512x512px 7.61KB
- Иконки компьютеров Экологически чистая переработка отходов, другие, разное, лист png 500x500px 20.63KB
- Заводская промышленность, сектор, здание, логотип png 2000x2000px 32.38KB
- Логотип Facebook, Визитные карточки Logo Computer Icons Company, другие, Разное, другие png 512x512px 11.23KB
- черный телефон, Компьютерные иконки Мобильные телефоны Телефонный звонок Дизайн иконок, значок телефона, Разное, рука png 512x512px 5.56KB
org/ImageObject»> Автоматизация Промышленность Производство компьютерных иконок Промышленный робот, промышленность, угол, электроника png
512x512px
20.18KB- Gmail Computer Icons Logo Электронная почта, Gmail, угол, текст png 512x512px 5.44KB
- Сборочная линия Производственная линия Производственный Завод Промышленность, Производитель, разное, связи с общественностью png 512x512px 14.66KB
- Компьютерные иконки Инкапсулированные PostScript, иконки социальных сетей, разное, угол png 600x564px 24.28KB
- Компьютерное программное обеспечение Computer Icons Datacard Group, umbro, угол, прямоугольник png 575x575px 11.39KB
org/ImageObject»> Иллюстрация логотипа Gmail, электронное письмо с иконками компьютера, почтовый конверт, разное, угол png
1024x1024px
46.9KB- черно-белый логотип электронной почты, электронная почта иконки компьютеров дизайн иконок, электронная почта, Разное, угол png 1000x1000px 47.54KB
- Бумага Картонная коробка Упаковка и маркировка Гофрированный картон, коробка, Разное, угол png 1024x1024px 1.05MB
- Компьютерные иконки Facebook, Facebook, логотип, черно-белый png 605x605px 39.32KB
- Обрабатывающая промышленность, другие, Разное, текст png 900x900px 22.4KB
- текстовое облако, выноска выноски, текстовое поле, разное, угол png 800x718px 21.58KB
- зеленая иллюстрация, Четвертая промышленная революция Индустрия 4.0 Автоматизация, отраслевое резюме, электроника, текст png 1926x585px 78.99KB
- серо-голубая фабричная иллюстрация, Фабрика компьютерных значков, разное, 3D компьютерная графика png 512x512px 127.26KB
- Иконки электронной почты компьютера, электронная почта, разное, угол png 980x736px 41.19KB
- Расположение значков компьютеров, значок местоположения, значок местоположения на карте, Разное, другие png
686x980px
42. 54KB
- квадратная рамка, Разное, угол png 2000x2000px 9.98KB
- Иконки компьютеров AOL Mail Адрес электронной почты Веб-почта, электронная почта, разное, угол png 512x512px 12.81KB
- Ящик для электронной почты Computer Icons Symbol Адрес электронной почты, адрес электронной почты, разное, угол png 512x512px 5.44KB
- Тексмо Трубы и изделия Пластиковые трубы Трубопроводы и фитинги, капельное орошение, другие, сталь png 2471x1681px 3.5MB
- стрелка вправо, значки со стрелками на компьютере, белая стрелка сбоку, разное, угол png 600x419px 49KB
org/ImageObject»> Склад Компьютерные Иконки Бизнес Промышленность Коробка, склад, разное, угол png 512x512px 10.24KB
- логотип приложения вызова, iPhone X телефонный звонок компьютер иконки, вызов, разное, текст png 749x749px 48.23KB
- Индустрия 4.0 Интернет вещей Автоматизация бизнеса, переработка продуктов питания, бизнес, бизнес-процесс png 1150x704px 200.37KB
66KB
58KB
54KBПроизводство Material иконок для MacOSX приложения Home Assistant на Electron / Хабр
В первой серии я заварил умный дом на Home Assistant. В процессе я влюбился в Home Assistant и подумал, не написать ли десктопное приложение для этой системы. У Home Assitant есть прекрасный web-интерфейс и показалось разумным завернуть его в Electron, чтобы получить красивую иконку в доке, родные нотификации, menu bar для быстрого доступа и прочие zeroconf.
Home Assistant для всего что можно использует Material Icons: для дашбордов, для состояний, для кнопок, для всего. Это значит, что надо подтянуть весь набор материальных иконок в приложение Electron.
Electron применяет для работы с картинками API nativeImage, который в 2020м году не принимает векторные форматы и изволит потреблять только PNG и JPG. JPG нам не подходит так как артефакты компрессии для иконок убийственны. Значит надо где-то добыть формат перегоняемый в PNG. Забравшись на родной сайт материальных иконок я минут 15 искал готовый пакет материальных иконок для MacOSX нарезанных в png в разные размеры и под разные dpi… Сложно сказать почему, но ничего подобного там не публикуют. Придется производить самостоятельно.
Home Assistant предлагает в конфигах объявлять иконки в формате “mdi:home-cirlce” — имя иконки (отсюда) с заменой первого символа ‘-’ на ‘:’. Замену “-“=>”:” мы программно обратим, чтобы быть ближе к оригиналу и не использовались символы “:” в именах файлов. Первым местом, куда я хотел прикрутить иконки, было меню дашбордов Home Assistant. Для menubar в macosx используются картинки размером 16×16 пикселей и @2 для ретины (может еще какие-то, на моём маке этого хватало @2). Значит мне надо получить для каждой иконки из материального набора по два файла:
mdi-icon-name16.png mdi-icon-name16@2.png
В имя добавил размер, чтобы добавление новых размеров картинок не мешало ходить в будущем.
Конечные шрифты обычно собираются из картинок SVG, это породило две задачи: 1 — найти svg материальных иконок, 2 — автоматизировать их нарезку для >5000 файлов.
Родной сайт всё-таки пригодился, там я нашел команду «npm install mdi/font”. Наугад подставив svg вместо font командой „npm install mdi/svg” был получен весь набор материальных иконок аккуратно лежащих в одной директории node_modules/@mdi/svg/svg/ с именами типа mdi-icon-name.svg. Привычный ImageMagick показал крайне низкое качество получившихся картинок, утилита svg2png работала еще хуже. Но добрый stackoverflow подсказал, что с этой задачей справится inkscape вот такой командой
inkscape -w 16 -h 16 node_modules/@mdi/svg/svg/ab-testing.svg \
-o images/mdi-ab-testing16.pngРезультат оказался удовлетворительным
Но более пристальное вскрытие показало, что в Dark Mode такие иконки выглядят уныло:
Сайт эппла поведал, что они изобрели особый формат Template для того, чтобы картинки можно было инвертировать без особого труда, коли судьба приведет в Dark Mode. В роли такого файлы выступает PNG картинка в которой у все пиксели черные, а сама иконка рисуется прозрачностью (на альфа-канале). При этом Electron умеет подхватывать такие картинки если в их имени есть “Template”. Значит к двум файлам с иконками надо добавить еще два с Template иконками получаем вот такой набор для каждой иконки:
mdi-icon-name16.png mdi-icon-name16@2.png mdi-icon-name16Template.png mdi-icon-name16Template@2.png
Inkscape чудеса с альфаканалом вытворять с консоли не умеет, а вот convert из ImageMagick запросто.
Делаем в три шага:
inkscape -w 16 -h 16 \
node_modules/@mdi/svg/svg/ab-testing.svg \
-o images/mdi-ab-testing16.png
convert -size 16x16 xc:none images/background16.png
convert -verbose -composite images/background16.png \
images/mdi-ab-testing16.png -compose CopyAlpha \
menuicons/ab-testingTemplate16.png
1 — Создание растровой картинки из вектора
2 — Создание прозрачной картинки для шага три
3 — Создание файла с переносом градаций серого в альфаканал
Уже с Template иконками меню в Dark Mode стало выглядеть вот так
Ок, цель достигнута. Скриптом перегоняем все картинки в нужные форматы
#!/bin/sh -x set -e # Run 'npm install @mdi/svg' beforehead MDISVG_PATH='node_modules/@mdi/svg/svg/' #Put inkscape and convert into PATH PATH=$PATH:/Applications/Inkscape.app/Contents/MacOS/ mkdir -p images convert -size 32x32 xc:none images/background16@2x.png convert -size 16x16 xc:none images/background16.