Создать иконки для сайта: Как создавать иконки сайтов в 2022 году — всё о favicon / Хабр

Как создавать иконки сайтов в 2023 году — всё о favicon — Михаил Гок на vc.ru

Эта статья перевод англоязычной статьи Андрея Ситника из блога Злых марсиан.

42 просмотров

Пришло время переосмыслить то, как мы создаем набор иконок для современных браузеров, и остановить безумные генераторы. Фронтенд-разработчики сейчас вынуждены создавать более 20 PNG-файлов, чтобы отобразить крошечный логотип веб-сайта на вкладке браузера или сенсорном экране. Статья расскажет, как использовать более разумный подход и создать минимальный набор иконок, соответствующий большинству современных потребностей.

Статья глубоко погружается в тему, поэтому в начале я даю два фрагмента кода для тех, кто уже достаточно настрадался и понимает, что делать. Тем не менее, я всем рекомендую читать статью целиком!

Экстремально короткая версия

Вместо того, чтобы создавать десятки иконок, обойдемся созданием пяти иконок и одного файла JSON.

HTML:

<link rel=»icon» href=»/favicon.ico»><!— 32×32 —> <link rel=»icon» href=»/icon.svg» type=»image/svg+xml»> <link rel=»apple-touch-icon» href=»/apple-touch-icon.png»><!— 180×180 —> <link rel=»manifest» href=»/manifest.webmanifest»>

apple touch icon лучше ставить в начало — так старые версии сафари используют иконку лучше, а другим браузерам это не мешает

замечание от переводчика

И файл веб-манифеста:

// manifest.webmanifest { «icons»: [ { «src»: «/icon-192.png», «type»: «image/png», «sizes»: «192×192» }, { «src»: «/icon-512.png», «type»: «image/png», «sizes»: «512×512» } ] }

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

Воспользуйтесь генератором иконок, созданным по этой статье

Длинная версия, со всеми объяснениями

Концепция favicon (является сокращением от favorite icon, «любимая иконка»), существует с начала 2000-х годов. Мы каждый день видим эти милые маленькие изображения на панели вкладок браузера, они помогают нам различать открытые веб-сайты. Пользователи ожидают, что на вашем сайте будет favicon. Это одна из тех мелочей, которые заставляют людей относиться к вам серьезно.

Даже Apple, у которой всегда была какая-то эстетическая война с иконками (их не принимали в Купертино, скрывая favicon в Safari в течение многих лет) наконец-то сдалась и теперь правильно отображает их на всех своих устройствах.

Если у вас есть общедоступный веб-сайт, у него должен быть favicon. Многие люди думают, что одной иконки хватит для всех устройств, но, к сожалению, это не так.

Как правило, изнурительную задачу создания всех необходимых файлов для постоянно растущего списка экранов и устройств перекладывают на инструменты генератора favicon. Никто в здравом уме никогда не захочет тратить часы на создание их вручную. В конце концов, мы здесь для того, чтобы создавать веб-сайты, а не для того, чтобы удовлетворять прихоти различных браузеров.

Набор favicon, генерируемых популярным онлайн-генератором

Как создатель Nano ID и сторонник минималистичных библиотек, я предпочитаю думать иначе. Какой самый эффективный набор иконок веб-сайтов? Какие форматы устарели? Какие типы значков можно заменить с небольшими компромиссами?

Таким образом, я поставил перед собой цель создать минимальный список favicon, которые будут работать во всех случаях и во всех браузерах, за исключением некоторых редких случаев, но даже там всё будет работать, просто не на 100% идеально.

Идеальный набор Favicon

Вместо того, чтобы создавать много изображений разных размеров, я решил полагаться на SVG и масштабирование браузера. Не волнуйтесь по поводу производительности:

• Браузеры загружают favicon в фоновом режиме, поэтому большой размер favicon-файла не влияет на производительность веб-сайта.

• SVG — отличный способ уменьшить размер иконки для изображений, которые не должны быть растровыми; для многих логотипов результирующий файл будет намного меньше, чем PNG.

• Имея всего 3 PNG-файла, можно позволить себе оптимизировать их сильнее, хитро подбирая параметры в сложных инструментах. Это решит проблему тех пользователей, которые платят за каждый МБ на своём интернет-тарифе.

Теперь перейдём к тому минимальному набору, который я вывел из своих исследований и экспериментов. Этот список должен работать со всеми популярными браузерами и устройствами, как старыми, так и новыми.

1. favicon. ico для устаревших браузеров

   Файлы ICO могут содержать внутри несколько версий изображения под разный размер. Я рекомендую придерживаться одного изображения размера 32 × 32. Версию 16×16 стоит создавать только если логотип не становится слишком размытым или ваш дизайнер вручную может перерисовать его под этот размер. Именно этот файл лучше держать по точному адресу: https://example.com без кеш-бастеров и хитрых путей. Значок должен быть на https://example.com/favicon.ico. Некоторые инструменты, такие как RSS-ридеры, просто запрашивают /favicon. ico с сервера и не утруждают себя поиском в другом месте. Нам нужны sizes=«any» для на файл. ico, чтобы исправить ошибку Chrome, из-за которой он выбирает файл ICO вместо SVG.

2. Один значок SVG со светлой/темной версией для современных браузеров SVG — это векторный формат, который описывает кривые вместо пикселей. При больших размерах это более эффективно, чем растровые изображения. На момент написания этой статьи 72% всех браузеров поддерживают SVG-иконки. Ваша HTML-страница должна иметь тег в с rel=«icon», type=»image/svg+xml» и с href, содержащим ссылку на SVG-файл с атрибутами.

   SVG — это формат XML, он может содержать тег системными темами.

3. Изображение PNG 180×180 для устройств Apple Значок Apple touch — это изображение для рабочего стола iPhone или iPad. На вашей HTML-странице должен быть тег внутри. Начиная с iOS 8+, для iPad требуется изображение с разрешением 180 × 180. Более старые устройства уменьшат его масштаб.

   Вопрос производительности пояснён выше.Небольшое примечание: значок Apple touch будет выглядеть лучше, если сделать ему отступ размером 20 пикселей и добавить цвет фона. Для этого вы можете использовать любой графический редактор.

4. Манифест веб-приложения с иконками PNG 192×192 и 512×512 для устройств Android

   — Манифест веб-приложения — это файл JSON, содержащий все сведения, необходимые браузеру для установки вашего веб-сайта в качестве системного приложения. Этот формат появился у Google в рамках инициативы PWA. — Ваша HTML-страница должна содержать тег со ссылкой на файл манифеста. — В манифесте должно быть поле icon, которое ссылается на два значка: 192 × 192 для отображения на главном экране и 512 × 512, которые будут использоваться в качестве заставки при загрузке PWA.

{ «icons»: [ { «src»: «/icon-192.png», «type»: «image/png», «sizes»: «192×192» }, { «src»: «/icon-512.png», «type»: «image/png», «sizes»: «512×512» } ] }

Мы кого-то забыли?

Конечно, есть и другие варианты favicon. Дальше я объясняю, почему они устарели. Возможно, пришло время попрощаться с некоторыми менее успешными форматами.

Значок плитки Windows

Microsoft Edge раньше поддерживал специальный формат значков для прикрепления веб-сайтов к меню «Пуск». Для последних версий Windows это больше не требуется.

Закрепленный значок Safari

Ранее в Safari требовался монохромный значок SVG для закрепленных вкладок. Однако, начиная с Safari 12, мы можем использовать обычный значок для закрепленных вкладок. Дажеapple. com больше не использует mask-icon.

rel=”shortcut”

Многие (ныне устаревшие) руководства будут включать значок favicon. ico в HTML, как тут:

<link rel=»shortcut icon» href=»/favicon.ico»>

Имейте в виду, что shortcut не является и никогда не был допустим в отношении ссылки. Прочтите эту удивительную статью Матиаса Байненса десятилетней давности, в которой объясняется, почему нужно писать просто icon, а не shortcut icon.

Yandex Tableau

Яндекс Браузер — это браузер на базе Chromium от крупнейшей российской поисковой системы. В России его доля на рынке составляет 20%. У него есть приятная функция, которая позволяет веб-сайту отображать текущие данные в виджетах на главном экране с помощью специального JSON-манифеста, предоставляемого ссылкой yandex-tableau-widget. Однако эта функция оказалась не очень популярной, и теперь Яндекс удалил соответствующую техническую документацию со своего сайта. Обычные манифесты значков будут работать также хорошо.

Opera Coast

В прошлом, Opera Coast — экспериментальный браузер для iOS, требовал специального значка размером 228×228. Этот браузер покинул App Store в 2017 году, и я сомневаюсь, что с тех пор он пережил многочисленные обновления iOS.

Теперь, когда мы попрощались с нашими павшими товарищами, давайте посмотрим, как создать идеальный набор favicon для тех, кто всё ещё стоит на ногах.

Как создать окончательный набор favicon

Пропустить эти шаги можно просто воспользовавшись генератором иконок, созданным на основе этой статьи

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

Шаг 1: Подготовка SVG

Убедитесь, что изображение в формате SVG имеет квадратную форму. Откройте исходный файл в вашем системном средстве просмотра и проверьте ширину и высоту изображения. Размер SVG легко настроить с помощью любого редактора SVG. В Inkscape вы можете изменить размер документа, выбрав File → Document Properties, а затем отцентровать логотип с помощью Object → Align и Distribute.

Сохраните ваш файл в формате icon. svg. Теперь давайте поработаем с SVG и сделаем так, чтобы он хорошо сочетался с современными системными темами. Спросите своего дизайнера, как следует инвертировать цвета для темной темы (в черно-белых логотипах вы просто меняете черный на белый).

Теперь откройте свой SVG-файл в текстовом редакторе. Найдите с темной или отсутствующей заливкой. Добавьте медиа-выражение CSS, которое будет запускаться при изменении темы, и измените заливку на нужные вам цвета:

<svg xmlns=»http://www. w3.org/2000/svg» viewBox=»0 0 500 500″> + <style> + @media (prefers-color-scheme: dark) { + .a { fill: #f0f0f0 } + } + </style> — <path fill=»#0f0f0f» d=»…» /> + <path fill=»#0f0f0f» d=»…» /> </svg>

Вы также можете использовать этот метод с медиа-выражением в SVG, чтобы добавить цвета P3 с широкой гаммой к вашим значкам.

Шаг 2: Создание ico файла

Откройте свой файл icon. svg в редакторе растровой графики. Я рекомендую GIMP; он бесплатный и мультиплатформенный.

Согласитесь на конвертацию SVG в растр. Установите ширину и высоту равными 32 пикселям. Экспортируйте файл в favicon. ico с использованием настроек: 32 бит/с, 8-битный альфа-код, без настроек палитры (32 bpp, 8-bit alpha, no palette).

Если у вас нет GIMP, вы можете установить Inkscape и ImageMagick и преобразовать SVG в ICO в терминале:

inkscape ./icon.svg —export-width=32 —export-filename=»./tmp.png» # In Windows call `magick convert . /tmp.png ./favicon.ico` convert ./tmp.png ./favicon.ico rm ./tmp.png

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

Чтобы включить отдельную версию значка размером 16×16:

• Откройте значок favicon. ico со значком 32×32.
• Создайте новый слой размером 16×16.
• Поместите в этот слой версию значка размером 16×16.
• Экспортируйте файл. GIMP сохранит каждый макет как отдельную версию значка.

Или вы можете сделать то же самое в ImageMagick с помощью:

convert ./icon-32.png ./icon-16.png ./favicon.ico

Шаг 3: Создание png изображений

Снова откройте исходный SVG-файл в редакторе растровой графики и создайте изображение размером 512×512. Экспортируйте его в видеicon-512.png.

Масштабируйте изображение до 192×192 и экспортируйте его в icon-192. png. Теперь масштабируйте само изображение до 140×140 и установите размер холста 180 ×180, а затем экспортируйте его в формате apple-touch-icon. png.

Или вы можете сделать то же самое в Inkscape:

inkscape ./icon.svg —export-width=512 —export-filename=»./icon-512.png» inkscape ./icon.svg —export-width=192 —export-filename=»./icon-192.png»

Шаг 4: Оптимизация SVG и PNG файлов

Лучшее средство для оптимизации svg — это SVGO. Чтобы использовать его, запустите:

npx svgo —multipass icon.svg

Squoosh — отличное веб-приложение для оптимизации растровых изображений:

• Откройте icon-512.png в Squoosh.
• Измените настройку сжатия на OxiPNG.
• Включите уменьшение палитры: “Reduce palette”.
• Установите 64 цвета.
• Сравните «до« и »после», перемещая ползунок. Если вы видите разницу, увеличьте количество цветов.
• Сохраните файл. Повторите эти действия для icon-192.png и apple-touch-icon. png.

Шаг 5: Добавление иконок в HTML

Вам нужно добавить ссылки в favicon.ico и в apple-touch-icon.png в ваш HTML.

Для статического HTML:

<title>My website</title> + <link rel=»icon» href=»/favicon.ico»> + <link rel=»icon» href=»/icon.svg» type=»image/svg+xml»> + <link rel=»apple-touch-icon» href=»/apple-touch-icon.png»>

Шаг 6: Создание web app manifest

Для статического HTML создайте JSON-файл с именем: manifest. webmanifest:

{ «name»: «My website», «icons»: [ { «src»: «/icon-192.png», «type»: «image/png», «sizes»: «192×192» }, { «src»: «/icon-512.png», «type»: «image/png», «sizes»: «512×512» } ] }

И добавьте в свой html-файл:

<title>My website</title> + <link rel=»manifest» href=»/manifest.webmanifest»> <link rel=»icon» href=»/favicon.ico»> <link rel=»icon» href=»/icon. svg» type=»image/svg+xml»> <link rel=»apple-touch-icon» href=»/apple-touch-icon.png»>

При работе с Webpack вы можете использовать плагин webpack-pwa-manifest:

plugins: [ …, new WebpackPwaManifest({ name: ‘My website’, icons: [ { src: resolve(‘./icon-192.png’), sizes: ‘192×192’ }, { src: resolve(‘./icon-512.png’), sizes: ‘512×512 } ] }) ]

Спасибо вам за чтение! С современными веб-стандартами легко создать свой набор значков даже руками. Но это не значит, что мы против автоматизации. Если у вас есть, что добавить к набору иконок — пишите мне в Твиттер.

Автор: Андрей Ситник

Сайт, twitter

Перевод: Михаил Гок

Генератор иконок по заветам этой статьи.

Создание иконки для сайта (favicon.ico) (Web Мастерская :: Статья: 265)

Иконка для сайта (файл favicon.ico), Favicon – сокращение от Favorite Icon, в переводе: любимая иконка.

Иконка сайта – это маленькая картинка, которая несёт в себе логотип своего сайта. Ресурс с иконкой становится непохожим на другие, икона придаёт сайту индивидуальность. Картинка размером 16 на 16 пикселей характерна для профессионально сделанных сайтов. Иконка отображается в адресной строке, в названии и в закладках браузера, ещё в результатах поиска Яндекс, так что, если икона сайта грамотно оформлена, есть возможность, что пользователь выберет именно Ваш проект и переедет по ссылке.

Где же брать икону или как её сделать? Тут всё очень просто: можно качать иконки с Интернета в архиве и выбирать. Но здесь так, если скачали Вы и она Вам понравилась, может кто-то скачал такую же и вставил её на свой сайт. По мне, так лучше быть непохожим на других, поэтому делаем сами. Очень хорошо, если у Вас есть специальная программка для создания иконок: нарисовали картинку, прогнали через прогу и логотип готов. Но если такой машины у Вас нет, не расстраивайтесь. Быстрый и абсолютно бесплатный способ сделать значок для Вашего проекта — это воспользоваться сервисом Favicon. ru.

Чтобы воспользоваться сервисом Favicon.ru, Вам необходимо за — ранее подготовить изображение будущей иконки. Делайте изображение квадратным, т.к. сервис уменьшает его до размера 16 на 16 пикселей и, если оно изначально не-квадратное, может выйти некачественный рисунок логотипа. Размер файла должен быть не больше 300 кб. Затем изображение нужно загрузить на сервис Favicon.ru и нажать кнопку «Создать favicon.iсo«, после скачать свеже испеченную иконку, нажав на кнопку «Скачать favicon.ico!». Иконка готова!

После создания логотипа Вашего сайта, необходимо вставить иконку в сам сайт, для этого нужно между тегами <head> и </head> прописать следующие:

<linkrel="shortcuticon"href="favicon.ico"/>

Файл favicon.ico должен находится в одной папке с сайтом, в другом случае указывайте полный адрес местонахождения файла. Написав код на каждой странице, стоит проверить проделанную работу в разных браузерах. Для этого перейдите на сайт, где была добавлена иконка и, если всё выполнено правильно, то в адресной сроке Вы увидите свой логотип.

В результатах поиска Яндекс икона может появиться не сразу

. Это связано с временем обновления КЭШа, срок появления иконки доходит до нескольких месяцев.

Хочу поделиться ещё одним сервисом создания иконки: http://www.favicon.cc/ на мой взгляд этот сервис лучше чем выше представленный.

Возможности:

• Создавать иконку с прозрачным фоном.
• Создавать анимированную иконку.

Как пользоваться:

• Выберите цвет.
• Рисуйте свою картинку или редактируйте загруженную.
• Скачайте готовую иконку (бесплатно).

Автор: Slash  12:27 20.06.2017

Как сделать текст жирным на HTML + CSS

Приведу пару примеров, как можно сделать текст жирным шрифтом. Для этого существует в HTML специальные теги <b> и. ..

С чего начать создание сайта

Вы решили сделать свой первый сайт, это очень похвально и это говорит о том, что Вы современный человек. У Вас есть…

Вещи, которые вы должны не пропустить как дизайнер

ИКОНЫ! Мы все очень зависим от них.

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

Каждая иконка представляет ценность целого, которой нельзя пренебрегать, поэтому она является важной частью веб-дизайна. Через иконку пользователь мог легко понять какое-то действие на компьютере или мобильном телефоне. Это тоже легко запомнить.

Вспомните время, когда вы открываете Facebook. Каждый значок заменяется длинным предложением на навигационной кнопке. Половина времени пройдет без понимания того, что написано на экране.

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

В чем разница между логотипом и значком?

Прежде чем мы перейдем к тому, что нужно помнить при создании иконок, давайте проясним несколько моментов. Как вы думаете, логотипы и иконки — это одно и то же? Это приводит нас к вопросу о том, что такое значок и как его отличить от логотипа.

Важно отметить, что логотипы и значки — это не одно и то же. Иконки повсюду, если вы посмотрите вокруг, но пока давайте рассмотрим только те, что есть в цифровом мире.

Да, вы можете взглянуть на экран рабочего стола и заметить, что Adobe Acrobat может отображать логотип Adobe в виде значка. Однако важно знать, что «логотип» — это то, что представляет всю компанию или организацию.

Иконки — это то, что компания или организация использует для дальнейшего развития своего контента. Иконки поддерживают вашу концепцию, идею или действие.

Значки почти часто создаются в квадрантах и ​​масштабируются до определенных пропорций. Это позволяет им вписываться в квадратные размеры значков приложений и/или обеспечивать единообразие при построении действий на сайте. Они имеют тенденцию быть довольно маленькими по размеру.

У них много общего, но на обычном языке. Однако я бы пришел к выводу, что логотип представляет бренд, а значок представляет действия, идеи, концепции или аналогии.

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

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

Поэтому, прежде чем создавать иконку, важно отметить, что иконка не может оставаться неясной по своему назначению. Это может быть огромной ошибкой для дизайна веб-сайта, если ему не будет уделено должное внимание. Разве сейчас не имеет большого смысла то, что мелочи имеют значение?

О чем следует помнить перед созданием иконок для веб-сайтов

Перед созданием иконок для веб-сайтов необходимо помнить о нескольких вещах:

KISS — Keep It Simple & Schematic

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

Цвета

Цвет может помочь сохранить соответствие значков вашему бренду или привлечь внимание потребителей к ключевым действиям или функциям. Имея отдельный цветной значок для активного состояния, цвет может помочь людям лучше ориентироваться на сайте. Использование более чем одного цвета в значке может затруднить чтение.

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

Просторный дизайн

В иконах должно быть место для дыхания. Не перепутайте элементы; скорее, сделайте четкие значки, которые также сделают элементы усиленными.

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

Консистенция

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

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

Сходство

Все иконки должны иметь некоторое сходство. Сходство относится не к их содержанию, а к таким аспектам, как размер штриха, размер пикселя*пикселя, выравнивание и позиционирование.

Работа по сетке

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

Где найти бесплатные иконки или вдохновение?

Существует множество сайтов с бесплатными иконками, где вы можете легко найти бесплатные иконки. Но если вы хотите сделать что-то новое и отличное от существующих иконок (которые будут использоваться многими), вы можете использовать их в качестве сайтов для вдохновения для иконок.

Вот некоторые названия веб-сайтов с бесплатными иконками: 

• Плоская иконка
• Freepik
• Иконфайндер
• Иконки8
• 1001 бесплатная загрузка
• Пикседен

В ключе

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

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

Вы планируете разработать свой веб-сайт? С помощью наших веб-дизайнеров и команды веб-разработчиков вы можете создать сайт своей мечты. Посетите www.webdew.com или свяжитесь с нами, чтобы узнать больше.

Редактор: Amrutha

Полное руководство по иконографии

Иконки являются важной частью любой системы дизайна или взаимодействия с продуктом. Иконки помогают нам быстро ориентироваться. Они не зависят от языка. И самое главное: они действительно крошечные, поэтому не занимают много места. Иконки являются фундаментальной частью хорошей системы дизайна и очень полезны для маркетинговых материалов. Они являются фундаментальным строительным блоком иллюстрированного контента, но они также являются высокотехнологичными.

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

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

Основные элементы значка

Размер

Согласованность является ключом к значкам, и все ваши значки должны быть одинакового размера при их создании. Во-первых, вам нужно убедиться, что вы знаете, как построена ваша сетка (кратно 8 или 10?). Оттуда ваш базовый размер значка должен напрямую относиться к этому. Итак, если у вас есть сетка, основанная на 8-ках, вы бы хотели строить на 16, 24 или 32.

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

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

Значок магазина с размерами 24 x 24, 40 x 40 и 80 x 80

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

Цвет

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

Слева: это точечный рисунок. Посередине: иконка с перспективой. Справа: плоский значок.

Сетки

Сетка пикселей — это основная сетка, в которой используется наименьшее приращение: пиксель. При создании значков вы всегда хотите выровнять объекты по пиксельной сетке, особенно по прямым линиям. Но вы можете создавать другие фигуры на пиксельной сетке (и если вы используете Figma, вы уже делаете это автоматически). Вы хотите строить вещи на пиксельной сетке не только потому, что это будет лучше отображать, но и потому, что это сделает вашу жизнь проще. Равномерное размещение элементов намного проще, когда вы используете сетку. Это поможет вам оставаться в соответствии с вашим размещением, и в целом ваши значки будут выглядеть лучше. Вы можете легко увидеть в Figma разницу между чем-то, что находится «в пикселях» и выключено.

Слева: на пикселе. Справа: выключенный пиксель.

Мне нравится строить себе сетку перед тем, как начать. Вот мои настройки в Figma.

Отлично! Теперь, когда вы освоили пиксельную сетку, вам нужно узнать об оптической сетке. Оптическая сетка помогает нам понять, где находится центр масс значка, а также насколько он велик для восприятия человеческим глазом. Круги и изогнутые объекты занимают меньше визуального пространства, чем квадраты. Лучше всего поместить значки в контейнер фиксированного размера, чтобы при экспорте все они были одинакового размера. Добавление этого встроенного дополнения поддерживает оптическое/воспринимаемое взвешивание без дополнительной суеты в разработке позже.

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

Визуально доминирующий объект должен быть центрирован как по вертикали, так и по горизонтали.

Доминирующий объект (прямоугольник) находится в центре

Если вы используете пиксельную сетку и пользуетесь преимуществами оптической сетки, вы будете впереди всех.

Обводки и заливки

Помните, я говорил, что ключевым фактором является согласованность? Я говорю это снова. Ничто не беспокоит меня больше, чем две иконки рядом, одна из которых заполнена, а другая обведена. Очень важно убедиться, что все ваши значки имеют одинаковый стиль. Например, у вас могут быть варианты использования заливки, чтобы показать, что что-то выбрано, но вы определенно хотите создать набор с одним стилем и, возможно, создать другой вариант.

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

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

Расстояние между штрихами должно по возможности отражать толщину штриха

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

Я не рекомендую делать значки с обводкой размером менее 10 пикселей (при толщине обводки 1-2 пикселя). Их будет очень трудно разобрать.

Выбор стиля

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

Некоторые значки кажутся простыми (X, гамбургер-меню, шеврон), но эти значки требуют, чтобы вы уже поняли основные принципы вашей системы значков. Я рекомендую начинать с более сложных иконок (то есть более сложных), чтобы помочь вам определить, какие правила вы хотите внедрить. Таким образом, как только вы начнете создавать более простые значки, это будет легко.

5 значков продуктов в 5 стилях — обратите внимание, как небольшие различия делают каждый набор единым и цельным.

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

• Uber
• Google
• Apple
• Airbnb
• Square

Рисование иконок

Геометрические фигуры

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

Эта резиновая уточка состоит из кругов (и одного прямоугольника со скругленными углами).

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

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

Слева: повернутый прямоугольник (якоря не совпадают с сеткой). Справа: нарисованный от руки прямоугольник (обеспечивает совпадение точек с сеткой).

Естественные формы

Рисовать более естественные формы в Figma очень просто. Вы можете либо использовать традиционный метод рисования кривых точка за точкой, либо использовать превосходный инструмент Figma для закругления углов точки. Мне нравится рисовать все точки в виде прямых линий, а затем скруглять углы с помощью инструмента «Радиус угла». Этот инструмент очень полезен для создания органических, сбалансированных форм. Поскольку углы Figma настраиваются автоматически, вы можете перемещаться по этим точкам, и углы будут подстраиваться под вас.

Углы/стыки

Существует несколько вариантов углов: скошенные (квадратные), скошенные и закругленные. Я настоятельно рекомендую вам придерживаться одного стиля для вашего набора иконок.

Радиус угла

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

Большой образец концентрических радиусов в этом портфеле

Любая промежуточная точка на пути может быть скруглена с помощью свойства Угловой радиус в Инспекторе. Если вы выбираете весь путь, он скругляет все углы в одинаковой степени. Если вы перейдете в режим редактирования, вы можете выбрать отдельные точки и округлить их по отдельности.

Заглушки

Заглушки могут быть круглыми или квадратными. Придерживайтесь одного варианта.

Объекты с заливкой

Если для ваших значков требуются объекты с заливкой внутри их основных форм (например, окна в доме), в идеале вам следует сохранить обведенные фигуры в обведенных значках. И залитые объекты залитыми значками. Когда у вас нет места для фигур с обводкой, вы хотите использовать фигуры с заливкой, которые пропорциональны вашим обводкам. Например, если у вас толщина обводки 2 пикселя, вам не нужны заполненные фигуры размером более 4×4 пикселя.

Метафора

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

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

Перспектива

Использовать перспективу в значках сложно — их размер усложняет задачу, так как рисование с перспективой занимает дополнительное место. Если вы хотите использовать перспективу, либо используйте ее широко и сделайте ее ключевой частью вашей системы, либо используйте ее экономно, когда она помогает повысить разборчивость и ясность.

Верхний ряд: плоский. Нижний ряд: перспектива.

Введите (избегайте!)

По возможности избегайте ввода значков. Иконки должны быть глобальными. Если вам нужен шрифт (например, символы валюты), нарисуйте его сами, а не используйте шрифт.

Подсказки

Логические операции

Логические операции объединяют любой набор слоев формы с помощью одной из четырех формул: объединение, вычитание, пересечение и исключение. Этот инструмент живой и удивительный. Это отличный способ сделать ваши значки более редактируемыми. Вместо того, чтобы разрезать пути, вы можете использовать функцию объединения. Не хотите находить пересечение фигур вручную? Попробуйте вычесть.

Логические группы обрабатываются как единый слой формы, имеют общие свойства заливки и обводки и могут быть объединены с другими логическими группами с помощью последующих логических операций.

• Union : Union объединяет выбранные фигуры в логическую группу. Если объекты перекрываются, внешний путь новой фигуры состоит из комбинации путей ее подслоев за вычетом любых перекрывающихся сегментов. Затем штрих будет применен к этому внешнему пути, игнорируя любые сегменты пути, которые перекрывают друг друга.
• Вычитание : Вычитание противоположно объединению. Вычитание удаляет площадь фигуры или набора фигур из базовой фигуры. Сплошным является только нижний слой формы, остальные вычитаются из него.
• Пересечение : Пересечение создает логическую группу, форма которой состоит только из перекрывающихся частей ее подслоев.
• Исключить : Исключить — это противоположность пересечения. Exclude показывает только области своих подслоев, которые не перекрываются.

Когда я закончу со значком, мне нравится создавать объединение (если это уже не один большой путь), чтобы, когда будущие дизайнеры настраивают цвет, было легко просто изменить одно свойство (значок fill) вместо заливок и штрихов.

Векторная сеть

Векторные сети — одна из самых уникальных функций Figma. Большинство инструментов пера рисуют пути в виде петли с определенным направлением, всегда желая воссоединиться с исходной точкой. Векторные сети не имеют направления и могут разветвляться в разных направлениях, не требуя создания отдельного объекта пути. Затем сложные объекты можно создавать внутри одного и того же объекта и с теми же свойствами намного быстрее, чем их можно было бы рисовать с помощью традиционных инструментов векторного контура. Чтобы узнать больше об этом, посетите эту статью.

Доступ к вашему набору значков для остальной части вашей команды зависит от организации, управления активами и осведомленности.

Организация

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

Для таких значков может потребоваться несколько слов, например, поварская шапка.

В конце концов, вы превратите все свои значки в компоненты. В Figma компоненты работают точно так же, как фреймы, с тем отличием, что дубликаты компонента создают новые экземпляры, а не копии. Это означает, что у вас может быть гигантская библиотека всех ваших значков, и когда вам нужно ее использовать, вы создаете экземпляр из библиотеки. Если кто-то внесет изменения в оригинал, ваши значки останутся актуальными. Вы можете искать эти активы, поэтому вы можете добавить информацию, доступную для поиска. Но вместо того, чтобы помещать его в имя файла, есть альтернатива. В Figma есть поле описания компонента, которое позволяет добавлять теги и ключевые слова. Это отличное место для добавления всех тех фраз, которые люди могут искать в вашей библиотеке, без создания безумно длинных и сложных имен. Вот куда идут эти ценности продукта!

Чтобы помочь вашим инженерам, вы можете использовать как фреймы, так и страницы. Страницы представляют собой самую внешнюю группу (поэтому мне нравится сортировать их по размеру). Затем фреймы помогают сузить содержимое, как в примере ниже. Система именования этого значка выглядит следующим образом: размер > категория > имя файла .

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

Различные размеры : Используйте разные страницы, поскольку вы редко будете переключаться напрямую с одного экземпляра на другой.

Заливка или обводка : Если вы используете оба стиля, используйте косую черту после имени значка, чтобы указать значки с заливкой или обводкой.

Слева: кофе/поглаживание. Справа: кофе/заполненный

Скорректированное изображение : Если у вас есть значок с визуальным вариантом (например, несколько вариантов валюты), вы также можете использовать название, чтобы различать его, используя тот же метод, что и для значков с заливкой и обводкой.

Первоначальный значок слева был бы «щитом». Затем слева направо: «щит/доллар», «щит/евро», «щит/фунт», «щит/иена», «щит/плюс» 9.0040 Управление вашими активами

Когда вы закончите со своими значками, вы хотите, чтобы они были как можно более чистыми для наилучшего экспорта. Используйте логические операции, чтобы упростить себе работу (помните нашего друга Union?). Избегайте лишних линий или форм. Убедитесь, что все ваши линии попадают в кадр. Абсолютно стоит попросить другого человека просмотреть все ваши значки и дважды проверить их аккуратность.

Figma великолепна, потому что поощряет сотрудничество и прозрачность. Что касается значков, может возникнуть соблазн предоставить всем вашим дизайнерам доступ к редактированию, чтобы они могли добавлять новые значки. Я рекомендую собирать значки по отдельности, проверять их и добавлять самостоятельно, когда они соответствуют стандарту. Предоставления вашим коллегам доступа к просмотру (и доступа к вашей библиотеке) достаточно, чтобы вовлечь их в то, что вы делаете, не заканчивая библиотекой и файлом cattywampus. Некоторые из ваших коллег могут захотеть создать разные версии одного и того же значка (например, в разных цветах или с разными именами). Это часто происходит, когда кто-то связывает значок с концепцией или продуктом. Вы никогда не захотите иметь более одной версии каждой иконки в своей библиотеке. Используйте описание компонента для этих имен. Ваши коллеги-дизайнеры должны настраивать цвета значков в своих отдельных файлах, а не в главном. Поверьте мне, вам придется время от времени вносить изменения в эти значки, и вы не хотите делать это более чем в одном месте. Форматы файлов имеют ключевое значение, когда вы готовы экспортировать значки. Если вы предоставляете значки партнерам, не входящим в вашу команду дизайнеров или инженеров, вы, вероятно, предоставляете им файлы .png. Экспортируйте в 1-кратном, 2-кратном и 3-кратном увеличении для разных устройств. Для разработки и дизайна вы часто будете экспортировать файлы .svg, которые редактируются в программах для дизайна и рисуются в браузере с помощью кода при отображении онлайн в вашем приложении или на сайте. При экспорте SVG вам понадобится как можно более чистый код. Еще одна веская причина для выбора Figma — сверхминимальный экспорт SVG. Поскольку они оптимизированы, это устраняет необходимость дальнейшей оптимизации в будущем. Прочтите эту статью, чтобы узнать больше.

Передача ваших иконок в руки другим

Вы можете быть лучшим в мире дизайнером иконок, но если вы не можете внедрить свои иконки в свое приложение/веб-страницу/прямую почтовую программу, это не принесет никакой пользы. Прежде чем приступить к проектированию, поговорите с командой инженеров, ответственной за их внедрение в продукт. Они смогут предоставить вам информацию об инфраструктуре веб-сайта или приложения, которая будет определять некоторые из ваших вариантов, таких как вес штриха или размер. Спросите других дизайнеров, что было сделано в прошлом, чтобы убедиться, что вы не дублируете работу. Выясните у ваших PMM, какие дополнительные значки они хотели бы увидеть. Будьте дружелюбным коллегой, который просит у людей отзывов, советов и помощи. Это даст вам лучшее представление о том, что вы должны делать, чтобы вы не переделывали работу и не игнорировали ключевых арендаторов, уже выявленных другими людьми. А когда вы будете готовы к реализации вместе со своими разработчиками, попробуйте использовать API Figma для программного экспорта.