В последние пару лет я собираю для своих проектов векторные иконки с ретро-предметами. Сначала для себя, потом — для клиентов. И заметил одну вещь: хороших, внятных наборов с кинокамерами, старыми фотоаппаратами и швейными машинками — кот наплакал. В основном или примитивные силуэты, или перегруженные иллюстрации, которые в маленьком размере превращаются в кашу.
Иконка должна работать на размер 24×24 пикселя. Если на этом масштабе не видно, что это кинокамера — вы нарисовали просто прямоугольник с трубой.
Поэтому я решил написать эту статью. Без маркетинговой шелухи, без «огромное количество качественных изображений». Только практика: какие предметы действительно узнаваемы, где брать нормальные векторы, как самому нарисовать иконку, которая не стыдна поставить в интерфейс или на визитку.
Почему ретро-иконки до сих пор не вышли из моды
Есть три причины. Первая — эмоциональный отклик. Кинокамера 16-мм или швейная машинка «Зингер» вызывают тёплые ассоциации даже у тех, кто никогда ими не пользовался. Вторая — уникальность. На фоне бесконечных плоских «гамбургеров» и «домиков» винтажный объектив сразу привлекает внимание. Третья — вариативность. Один и тот же предмет можно подать в десяти стилях: от гравюры до неоморфизма.
Три главных героя: что выбирают дизайнеры
Кинокамера (киносъёмочный аппарат)
Узнаваемые детали: два круглых барабана (бобины) сверху, прямоугольный корпус, один крупный объектив. Часто добавляют ручку для переноски. В иконке достаточно сохранить силуэт «два круга на прямоугольнике» — и мозг дорисует остальное. Плохие примеры: когда бобины сливаются с корпусом или объектив слишком мал.
Фотоаппарат
Самый частый персонаж. Классическая дальномерная Leica или зеркальный «Зенит» имеют характерный «пенёк» (видоискатель) и выступающий объектив. В профиль корпус выглядит как вытянутый прямоугольник с двумя-тремя округлостями. Ошибка новичков: рисовать много линз внутри объектива. На мелком размере это просто чёрное пятно. Лучше одна крупная блестящая точка или полное зачернение.
Швейная машинка
Самая сложная для иконки. Главные признаки: характерный изогнутый корпус, маховое колесо справа (или ручка), платформа с игольной пластиной. В упрощённом варианте достаточно показать «горбатый» силуэт и колесо. Текстильные бренды и ателье любят такие иконки, но часто заказывают слишком детализированные версии, которые потом не работают в футере сайта.
Таблица 1: Сравнение стилей для ретро-иконок (на примере фотоаппарата)
| Стиль | Узнаваемость в 24px | Лучшее применение | Минусы |
|---|---|---|---|
| Линейный (контур) 1–2px | Высокая | Веб-интерфейсы, мобильные приложения | Теряется на пёстрых фонах |
| Плоский залитый (solid) | Очень высокая | Кнопки, иконки в карточках | Меньше «ретро-духа» |
| Гранж / потёртый | Средняя (сливаются пятна) | Лендинги «под старину», пивные этикетки | При масштабировании текстуры плывут |
| Неоморфный (мягкие тени) | Низкая | Практически не подходит для ретро | Предметы выглядят пластиковыми |
Где брать качественные векторы: мой личный чек-лист
Перепробовал почти все стоки. Вот где реально можно найти приличные иконки кинокамер, фотоаппаратов и швейных машинок без мыла и кривых контуров.
- The Noun Project — хорошая база, много бесплатных с атрибуцией. Ищите по запросам «movie camera», «vintage photo», «sewing machine». Фильтр «solid» или «outline».
- Freepik — много, но качество скачет. Скачивайте только те, у которых в превью чёткие линии, без лишних узлов. И обязательно смотрите вектор в редакторе, часто контуры рваные.
- Vecteezy — неплохая коллекция ретро-векторов. Минус — медленный сайт.
- photolessons.org (собственные подборки) — мы выкладываем только то, что сами отобрали и проверили. В каждой статье — ссылки на проверенные источники и прямые загрузки.
Как нарисовать свою иконку, если стоки разочаровали
Рисую в Adobe Illustrator, но подойдёт и бесплатный Inkscape. Алгоритм рабочий, проверен на новичках из моей дизайн-группы.
- Найдите две-три реальные фотографии предмета с разных ракурсов. Лучше всего — профиль и чуть сверху. Изучите пропорции. Например, у швейной машинки расстояние от колеса до игольной пластины примерно равно высоте корпуса.
- Сделайте набросок в векторе одними прямоугольниками и кругами. Не используйте кривые, пока не выстроите крупные массы. Инструмент «Перо» оставьте на потом.
- Объедините формы (Pathfinder → Unite) и добавьте скругления. Ретро-предметы редко имеют острые углы. Радиус скругления на глаз: 10–15% от ширины детали.
- Прорисуйте главные детали. У кинокамеры — бобины и объектив. У фотоаппарата — видоискатель и спусковая кнопка. У машинки — колесо и игольную пластину. Всё остальное — лишнее.
- Проверьте в размере 24×24. Если не читается — удалите второстепенное. Если читается плохо — увеличьте контраст (например, сделайте объектив чёрным, корпус серым).
<!-- Минимальный код иконки фотоаппарата в SVG (рабочий) -->
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="4" y="8" width="24" height="16" rx="3" stroke="currentColor" stroke-width="2"/>
<circle cx="22" cy="16" r="3" fill="currentColor"/>
<rect x="7" y="5" width="6" height="3" fill="currentColor"/>
</svg>Таблица 2: Частые ошибки в ретро-иконках и как их исправить
| Ошибка | Пример (что плохо) | Как исправить |
|---|---|---|
| Слишком много линий внутри контура | Объектив с тремя бликами, лепестками диафрагмы, резьбой | Оставить одну толстую дугу или просто заливку |
| Тонкие выступающие части | Колесо швейной машинки со спицами, острый видоискатель | Сделать спицы единым залитым кругом, видоискатель — скруглённым прямоугольником |
| Неверные пропорции | Объектив больше корпуса фотоаппарата | Сравнить с реальным фото: объектив занимает 30–40% высоты корпуса, не больше |
| Слишком тёмная или светлая гамма | Серый на сером, белый на бежевом | Использовать чёрный/белый или два контрастных цвета (например, тёмно-бордовый и кремовый) |
Практика: как встроить иконки на сайт без танцев с бубном
Допустим, вы нашли или нарисовали набор. Теперь техническая часть.
- Самый правильный способ — SVG-спрайт. Складываете все иконки в один файл-спрайт, подключаете через
<use>. Скорость загрузки высокая, цвет менять легко. - Если лень возиться со спрайтом — вставляйте каждую иконку через
<img src="icon.svg">. Но тогда цвет не поменять через CSS (только если иконка монохромная и внутри SVG задан fill="currentColor"). - Для печатного макета — сохраняйте в EPS или PDF, причём сразу в CMYK. Многие начинающие дизайнеры сдают в типографию RGB-файлы — итог: цвета грязные, чёрный не насыщенный.
Часто задаваемые вопросы
Могу ли я использовать иконки с кинокамерой для логотипа своего видеоблога?
Да, если у вас есть права на коммерческое использование (проверьте лицензию стока). Но для логотипа лучше не брать готовую иконку «как есть» — доработайте уникальную деталь (ручку, вспышку, рамку), чтобы вас не обвинили в копировании.
Почему после скачивания с Freepik иконка выглядит нормально, но при открытии в Illustrator — куча лишних точек?
Авторы часто используют автотрейсинг растровых картинок. Результат — тысячи узлов на простом контуре. Решение: перерисовать иконку вручную (это 10 минут для простого силуэта) или найти другой источник.
Есть ли готовый набор, где кинокамера, фотоаппарат и швейная машинка в одном стиле?
Да, например, набор «Vintage Essentials» от IconBros (на платформе Iconscout). Но он платный (около $19). Бесплатные наборы часто разрозненные, приходится комбинировать. Я иногда составляю такие сборники сам — подписывайтесь на обновления photolessons.org, периодически выкладываю.
Как анимировать иконку кинокамеры, чтобы крутились бобины?
В SVG через CSS-анимацию: задайте каждому барабану <g> и добавьте правило @keyframes spin { 100% { transform: rotate(360deg); } }. Затем примените к каждой бобине animation: spin 2s linear infinite;. Но не анимируйте на постоянной основе — пользователи быстро устанут. Лучше по наведению (hover).
Что такое лицензия «Creative Commons BY», и можно ли мне её ставить в коммерческой визитке?
Можно, но в выходных данных визитки (мелким шрифтом) или на сайте вы обязаны указать имя автора и источник. Если не хотите указывать — ищите CC0 (общественное достояние) или покупайте расширенную лицензию.
Почему моя иконка фотоаппарата в SVG выглядит расплывчатой на iOS, хотя на компьютере чётко?
iOS Safari некорректно обрабатывает width/height в пикселах без дробной части. Пропишите shape-rendering="crispEdges" внутри SVG или задайте размеры в rem. Также проверьте, не стоит ли transform: scale() на родителе — он сглаживает вектор.
Как быстро сделать из плоской иконки ретро-эффект «под старую бумагу»?
В Adobe Illustrator: наложите текстуру (например, «шум» или сканированную фактуру акварельной бумаги) в режиме наложения Multiply поверх иконки. Для веб — можно использовать CSS filter: url(#noise) с SVG-фильтром, но это тяжеловато для производительности. Лучше оставить чистую векторную иконку, а «старость» добавить в фон.
На каких реальных проектах вы сами использовали такие иконки?
Делал сайт для бара в стиле 1920-х — там поставил неоновые контурные иконки кинокамеры и фотоаппарата как ссылки на галерею исторических фото. Для портфолио свадебного фотографа — иконки ретро-камер в футере. И недавно логотип ателье по ремонту швейных машин — там иконка машинки стала основой айдентики.
Вместо заключения: три вещи, которые надо запомнить
Первое: ретро-иконки работают только тогда, когда в маленьком размере силуэт остаётся безошибочно узнаваемым. Тестируйте на 24 пикселях. Второе: не гонитесь за уникальностью в ущерб ясности — лучше пусть иконка будет проще, но понятнее. Третье: не воруйте чужие векторы из поисковой выдачи. Авторы потратили время, а вы — репутацию. Используйте легальные стоки или рисуйте сами, это несложно.
Если остались вопросы по конкретным наборам или техникам — пишите в комментариях. Постараюсь ответить каждому. А если сами сделали крутой сет ретро-иконок — делитесь, возможно, мы вместе оформим его как бесплатный набор для всех читателей photolessons.org.
DownloadНажмите для реакции
