Значок фотошопа png: Иконки фотошоп — 524 бесплатных иконок

Пишем URL, получаем бесплатную иконку / Хабр

Сервис omg-img позволяет вставлять иконки вот так:

<img src="https://png.icons8.com/search">

Чувствуете, к чему я клоню? Сделали вставление иконок не выходя из IDE. Просто пишете URL, параметры вроде цвета и стиля — мы отрендерим иконку и отдадим через хороший, годный CDN.

Вместо search можно написать любое название иконки:

• home
• sheep-on-bike
• trump

Выбрать можно любую иконку с сайта Icons8 или из приложения под Винду и Мак.

Если точного совпадения по имени не нашлось, мы отдадим что нашли. Часто угадывает: например, в примере выше иконки trump нет, есть donald trump. Но ведь нашлось.

Можно выбрать другой стиль

<img src="https://png.icons8.com/firewall/color">

Всего стилей несколько:

Угадайте, какие самые популярные?

Ответ

первый и последний

Вот тот же список со ссылками. Заходите и будьте как дома, обещаем не приставать:

• iOS icons
• Windows 10 icons
• Windows Metro icons
• Material Design Filled icons
• Android Ice Cream icons
• Flat Color
• Office
• Ultraviolet, Free Blue UI Icons
• Free Dotted Icons
• Gradient Line icons
• Dusk, Free Cute Color Icons

Можно покрасить

<img src="https://png.icons8.com/batman/2266EE">

Можно указать размер

<img src="https://png.icons8.com/firewall/2266EE/96">

Ради такого случая Icons8 убрал бесплатное ограничение 100х100 пикселов и оставил только 512×512 (чтобы не положить сервер). Но ссылку все равно ставить нужно.

CDN

Все хостится на KeyCDN  — он на хорошем счету. Для нас с вами все бесплатно — они большие молодцы и нас спонсируют. Так что можно использовать иконки в коммерческих проектах: все будет работать и не упадет.

Конечно, при первом запуске иконке надо сгенериться,

накраситься и доползти до ближайшей ноды — на это уйдет полсекунды. Зато потом все быстро.

Пинг 1 мс до Билайна, 18 мс — до Ульяновска. И даже до моего Буэнос-Айреса… доходит.

Вопрос из зала: так есть же уже Font Awesome, Material Icons?

Есть, и тоже с CDN, и тоже можно включать одним кодом. Но у них их очень мало, около 600 и 900 соответственно. А у нас 46,000, сами рисовали.

Кстати, если у вас Font Awesome, можете заменить на наши Line Awesome. Они, кажется, более сексапильные (по крайней мере, по нашей аналитике). Ну и Material у нас на 4200 иконок.

Идея

Вообще-то не наша, а microicon. Большое спасибо автору за идею.

Вопрос из зала: а зачем вы нужны?

У него 1327 опенсорсных иконок, а у нас — 46000 уникальных. Кстати, опенсорсные мы тоже выложили, 9000 штук.

Вопрос из зала: что, вставлять иконку не глядя?

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

Если вы используете WebStorm, PhpStorm и тому подобное, он при наведении показывает картинку.

Под Visual Studio Code есть плагины. Например, Image Preview.

Как помочь

• Поставьте на нас ссылку с сайта, где используете наши иконки. SEO — это наше все.
• Это не обязательно, но если не хотите ставить ссылку, можно купить платную лицензию
• Расскажите о нас соседу по этажу. Ну или зашарьте этот пост.
• Потестить поиск. Мы переписали алгоритм, должен быть хорошим и очень быстрым (до 1 мс + расходы на транспорт). Посмотреть всю выдачу (а не только первый результат), можно в черновой утилите.
• Потестить растеризацию. Если что-то съехало, вылезло за границы или размазалось, поправим.

Как сохранить небольшие PNG-файлы (иконки) с минимальным пикселизацией?

• Png
• Икона
• Дизайн
• Пикселизация
• Adobe-photoshop
• Разрешающая-способность

Renee

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

Значки должны быть 24 х 24 пикселей и сохранены в формате PNG. Я создал иконки в Photoshop, установил разрешение 300 (чтобы сделать его максимально четким и резким) и сохранил каждый файл в формате PNG. Вот пример того, как они оказались:

У меня сложилось впечатление, что при разрешении 24×24 пикселя пикселизация не будет намного меньше этой. Я ошибаюсь по этому поводу? Есть ли способ экспортировать эти крошечные файлы изображений, чтобы они были как можно более непиксельными?

Как я могу сохранить эти файлы и получить наилучший результат?

Рафаэль

Это не пикселизация, это размыто. Ваша иконка размыта.

Проблема в том, что вы сделали их с разным разрешением и уменьшили их, а программа произвела повторную выборку. Чтобы смоделировать апропиатную пропорцию инсульта, он применил несколько псевдонимов.

Вам нужно сделать их:

а) идеальный пиксель при точном разрешении.

б) сделать их в векторах, как SVG.

в) перепроверить их, отключив анти-псевдоним …. Я не думаю, что это сработает, но вы можете попробовать.

г) Попробуйте применить некоторую резкость … Может сработать, но они будут не такими чистыми, как варианты а и б.

Дополнительные заметки.

300 dpi, которые на самом деле не dpi, а ppi, не имеют ничего общего с иконкой для веба. Просто используйте простые пиксели в качестве размера вашего документа.

Отредактировано:

Крупный план вашей иконы:

http://otake.com.mx/Foros/PixelPerfect1600CloseUp-01.png

Значок идеального пикселя должен выглядеть примерно так:

http://otake. com.mx/Foros/PixelPerfect1600CloseUp-02.png

Вот значок 24×24 px: http://otake.com.mx/Foros/ck60t-01.png по сравнению с

cockypup

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

Я бы предложил установить размеры вашего холста на 24px x 24px и увеличить масштаб настолько, чтобы вы могли видеть пиксельную сетку. Затем сместите и / или измените размеры своих значков, пока они не будут совмещены с конкретными пикселями. Это сведет к минимуму сглаживание на прямоугольных формах. Не так много вы можете сделать с крошечными кругами, хотя. Будет анти-алиасинг, хотите вы этого или нет.

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

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

В этом вопросе вы можете взглянуть на мое руководство по ОКР по совершенствованию пикселей . Хотя в ответе предлагается использовать AI, а не PS, некоторые комментарии также применимы.

Что нужно учитывать:

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

Последняя вещь. Ваш комментарий о 300dpi меня смущает.