Интересные дизайнерские веб-сервисы №13: PNG, иллюстрации, иконки…

Что-то в этом году, как и в прошлом, никак не получается собирать каждый месяц по одной полноценной подборке веб-проектов с краткими обзорами. Прошлый 12-тый выпуск вышел аж в январе. В нем можете почитать про сервисы Emoji и скриншотов, использование шритов + посмотреть парочку вариантов скроллинга (горизонтальный, диагональный и др.).

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

IMGBIN

IMGBIN

Это один из самых больших каталогов PNG-изображений — в Imgbin.com находится более 7,7 миллионов файлов. На главной есть несколько инструментов, позволяющих быстро найти нужные материалы: разбиение по категориям (еда, цветы, игры, спорт, транспорт), поисковая форма и разделы графики под определенные праздники (Halloween, Пасха, Новый Год).

При переходе на единичную страницу с детальным описанием отображаются похожие объекты, что здорово помогает при поиске. По словам разработчиков, графика бесплатная. Логика работы напоминает проект StickPNG.com (хотя там архив поменьше).

Pngquant

Pngquant

Библиотека/утилита pngquant применяется для компрессии PNG-картинок, которая позволяет сократить до 70% объема файла и сохранить при этом альфа-прозрачность. Данный алгоритм позволяет получить лучший результат обработки с меньшим числом шумов. Он может быть интегрирован в разное программное обеспечение и имеет быстрый режим массовой обработки объектов в реальном времени.

Как уже вы поняли, это инструмент больше для разработчиков или просто продвинутых пользователей. Здесь нет полноценного веб-интерфейса, как в TinyPNG хотя на сайте найдете некоторые сборки для Win/Mac, Debian и другие инструкции.

Moose — Photo Creator

Moose - Photo Creator

Интересная наработка от популярного сервиса иконок Icons8 — их Photo Creator позволяет компоновать несколько исходных фоток для получения оригинальной картинки. На выбор у вас есть 3 вида элементов: модели (т.е. люди), фоновые бэкграунды (пляж, кухня, стена и т.п.), а также разные объекты интерьера или окружения. В общем, в несколько кликов вы можете сделать вполне оригинальную и уникальную иллюстрацию для своего сайта, статьи или соц.сетей. Максимально быстро и легко. Такая себе упрощенная версия Canva получается.

Font Bombinations

Font Bombinations

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

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

Iconsvg

Iconsvg

Использование инструмента Iconsvg должно помочь упростить работу с SVG-иконками в ваших веб-проектах. Выбираете один из предложенных здесь объектов и настраиваете его параметры: размер иконки, ширину и цвет контуров, закругленность углов. Затем можете скачать либо скопировать готовый код, отображаемый на вебстранице. Из графики тут представлены популярные и соответствующие направления: медиа, интерфейс, стрелки, устройства.

cssfx

cssfx

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

MailtoUI

MailtoUI

Напоследок предлагаем простенькую JavaScript библиотеку с открытым кодом MailtoUI, которая помогает реализовать более интерактивное взаимодействие с ссылкой почтового Email-адреса. При клике по такому линку будет всплывать специальное окошко, и пользователь сможет выбрать какой инструмент он хочет использовать для написания письма: Gmail, браузерный Outlook, почтовый клиент по умолчанию либо просто скопировать адрес. На странице найдете детальное описание параметров скрипта. Выглядит неплохо.

В этот 13-тый выпуск у нас получилось поведать лишь о 7-ми разных находках для разработчиков и веб-дизайнеров. Постараемся в следующий раз подобрать куда большее число сервисов + добавить немного материалов для скачивания. Если у вас есть интересные «наводки» о чем рассказать, пишите нам.