Значок веб-страницы — это… Что такое Значок веб-страницы?
- Значок сайта
- Зноймо (район)
Полезное
Смотреть что такое «Значок веб-страницы» в других словарях:
Значок веб-сайта — Favicon Википедии Favicon (сокр. от англ. FAVorites ICON «значок для избранного», от названия папки с закладками в MSIE) значок веб сайта или веб страницы. Отображается браузером в адресной строке перед Традиционно использовались изображения… … Википедия
Значок сайта — Favicon Википедии Favicon (сокр. от англ. FAVorites ICON «значок для избранного», от названия папки с закладками в MSIE) значок веб сайта или веб страницы. Отображается браузером в адресной строке перед Традиционно использовались изображения… … Википедия
Возможности браузера Opera — Содержание 1 Отображение страниц 1.1 Масштаб страницы … Википедия
Favicon — В данной статье или разделе имеется список источников или внешних ссылок, но источники отдельных утверждений остаются неясными из за отсутствия сносок … Википедия
Speed dial — Содержание 1 Отображение страниц 1.
1 Масштаб страницы 1.2 Подогнать по ширине 1.3 … ВикипедияДостоинства браузера Opera — Содержание 1 Отображение страниц 1.1 Масштаб страницы 1.2 Подогнать по ширине 1.3 … Википедия
Google Chrome — Для термина «Chrome» см. другие значения. Эта статья о браузере; об операционной системе см.: Google Chrome OS. Google Chrome … Википедия
Camino — Camino … Википедия
Safari — 6 на платформе OS X 10.8 … Википедия
FAVICON — Значок веб сайта или веб страницы. Отображается браузером в адресной строке перед URL страницы, а также в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса (сокр. от англ. FAVorites ICON значок для избранного )… … Словарь бизнес-терминов
Как сделать PWA устанавливаемым — Прогрессивные веб-приложения
В предыдущей статье мы читали о том, как js13kPWA работает в off-line режиме благодаря service worker, но мы можем пойти дальше и позволить устанавливать веб-приложения на поддерживающие мобильные браузеры, как если бы это было нативное приложение.
Эта технология позволяет запускать приложение прямо с рабочего стола, без запуска браузера и ручного ввода URL-адреса. Ваше веб-приложение может быть установлено рядом с нативным. Поэтому к нему проще получить доступ, а так же вы можете указать, что приложение должно использовать полноэкранный режим браузера, делая его ещё более похожим на нативное
Чтобы сделать сайт доступным для установки, ему необходимы следующие вещи:
- Веб-манифест с правильно заполненными полями
- Сайт должен использовать защищённый (HTTPS) домен
- Иконка для предоставления приложения на устройстве
- Зарегистрированный service worker, чтобы приложение работало в off-line режиме (на данный момент требуется только для Chrome на Android)
Файл манифеста
Ключевым элементом является файл манифеста, в котором представлена вся информация о веб-сайте в JSON формате.
Обычно находится в корневой папке веб-приложения. Содержит информацию, такую как название приложения, paths пути к значкам разных размеров, которые можно использовать для представления приложения в мобильных операционных системах (например, в качестве значка домашнего экрана), и цвет фона для использования при загрузке. Эта информация необходима браузеру для правильного отображения приложения при установке и на домашнем экране.
Файл js13kpwa.webmanifest веб-приложения js13kPWA включён в раздел <head> файла index.html с помощью следующей строчки кода:
<link rel="manifest" href="js13kpwa.webmanifest">Примечание: Существует несколько расширений, используемых в прошлом: manifest.webapp был популярен в манифестах приложений Firefox OS, также многие используют . явно упоминается в W3C manifest specification, поэтому давайте придерживаться именно этого стандарта.
webmanifest
Содержимое файла может выглядеть так:
{ "name": "js13kGames Progressive Web App", "short_name": "js13kPWA", "description": "Progressive Web App that lists games submitted to the A-Frame category in the js13kGames 2017 competition.", "icons": [ { "src": "icons/icon-32.png", "sizes": "32x32", "type": "image/png" }, { "src": "icons/icon-512.png", "sizes": "512x512", "type": "image/png" } ], "start_url": "/pwa-examples/js13kpwa/index.html", "display": "fullscreen", "theme_color": "#B12A34", "background_color": "#B12A34" }
Названия большинства полей говорят сами за себя, но давайте разберём документ и объясним всё подробно:
name: Полное название вашего приложения.
short_name: Короткое название для отображения на домашнем экране.descriptionicons: Куча информации о значках — URL, размеры, типы. Не забудьте указать хотя бы несколько, чтобы иконка лучше подходила под устройство пользователяstart_url: Загружаемый исходный документ при запуске приложенияdisplay: Как приложение должно отображаться; может быть fullscreen (полноэкранный), standalone (автономный), minimal-ui (минимальный пользовательский интерфейс), browser (браузер)theme_color: Основной цвет для интерфейса, используемый операционной системойbackground_color: Цвет для фона, используемый при установке и на заставке
Минимальные требования к манифесту — name и хотя бы один значок (с src, size и type). Поля description, short_name, и start_url являются рекомендуемыми.
Вы можете использовать даже больше полей, чем указано выше — не забудьте проверить ссылку на Web App Manifest reference.
«Добавить на домашний экран» (кратко: a2hs) — это функция, реализованная браузерами, которая берёт информацию, найденную в веб-манифесте, и использует для добавления приложения на домашний экран устройства со значком и именем. Это работает при выполнении требований, описанных выше.
Когда пользователь посещает PWA с помощью браузера, поддерживающего технологию, должен отобразиться значок, указывающий на возможность установки приложения в качестве PWA.
После того, как пользователь кликнет на иконку, отобразится баннер установки. Информация в баннере генерируется на основе файла-манифеста — имя и значок отображаются в приглашении.
Если пользователь нажимает кнопку, появляется окно, на котором изображены ярлык приложения и кнопки для подтверждения действий.
При подтверждении ярлык будет добавлен на рабочий стол.
После этого пользователь может запустить приложение и сразу начать его использовать. Обратите внимание, иногда у PWA (в зависимости от браузера и/или операционной системы) в правом нижнем углу отображается иконка браузера, чтобы пользователи понимали, что работают с веб-приложением.
Экран загрузки
В некоторых браузерах, на основе информации из манифеста, создаётся заставка, отображаемая при запуске PWA
Иконка и фоновый цвет использовались для создания заставки.
В статье мы узнали, как сделать PWA устанавливаемыми, используя веб-манифест, и добавить их на главный экран.
Для получения большей информации, можете почитать наш Add to Home screen гайд. В настоящее время поддержка ограничена браузерами Firefox для Android 58+, Мобильным Chrome и Android Webview 31+, также Opera для Android 32+, но поддержка должна расширяться в ближайшем будущем.
Теперь давайте перейдём к последнему фрагменту PWA-головоломки — повторному запуску с помощью push-уведомлений.
Её величество иконка в manifest.json
Немного о добавление иконок для сайта в мультибраузерном и мультиплатформенном мире. О возможности добавления иконки сайта на рабочий стол мобильного устройства и многом другом.
Иконка для сайта называется Favicon.
Favicon – это маленький значок, помогающий идентифицировать страницу. Это часто забываемая концепция бренда для сайта. Они дополняют UX просмотра в нескольких ключевых местах.
В зависимости от браузера и контекста они могут отображаться:
ICO – формат изображений для отображения иконок. Изначально favicon в вебе был размером 16х16 пикселей, но со временем появилась поддержка разных размеров в ICO файле (32×32, 24×24, 48×48, 64×64, 128×128 и 256×256).
В настоящее время favicon не обязательно должен быть формата ICO. Часто встречаются форматы GIF, PNG, JPG и даже SVG favicon.
Почему я назвал статью «Ее величество иконка»? Да потому, что эта «пешка» прошла в «ферзи».
Изначально Microsoft для Internet Explorer 5 разработала способ добавления favicon на сайт.
Позже, когда favicon стал частью стандартов HTML 4.01 и XHTML 1.0, рекомендовали использовать тег link для размещения favicon.
Тег link можно прописать по разному, я использую все сразу, чтобы угадать:
Иконка представляет собой точку запуска сайта или приложения. Она всегда должна смотреться хорошо. То есть быть четкой и ясной, без видимых пикселей, а размер и качество должны подходить под разрешение экрана устройства. Favicon 16×16 и 32×32 – это хороший фолбек, но они будут плохо смотреться на экранах с большим разрешением.
Дело осложняется тем, что современные браузеры и мобильные ОС требуют разные размеры иконок и угадать бывает очень трудно.
Смотрите сами неполный список рекомендаций:
Если собрать все вместе, предполагая, что мы следуем всем рекомендованным размерам для всех основных браузеров и платформ, наш набор файлов будет примерно такой:
favicon.
ico
favicon-16.png
favicon-32.png
icon-48.png
icon-96.png
icon-144.png
icon-192.png
icon-256.png
icon-384.png
icon-512.png
apple-touch-icon-57.png
apple-touch-icon-60.png
apple-touch-icon-72.png
apple-touch-icon-76.png
apple-touch-icon-114.png
apple-touch-icon-120.png
apple-touch-icon-152.png
apple-touch-icon-167.png
apple-touch-icon-180.png
ms-tile-144.png
ms-tile-126.png
ms-tile-270.png
ms-tile-558×270.png
ms-tile-558.png
Разметка link примерна такая:
<link rel="icon" href="/icon-96.png">
<link rel="icon" href="/icon-144.png">
<link rel="icon" href="/icon-192.png">
<link rel="icon" href="/icon-256.png">
<link rel="icon" href="/icon-384.png">
<link rel="icon" href="/icon-512.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-57.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-60.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-72.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-76.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-114.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-120.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-152.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-167.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-180.png">
Уверен, вы уже схватились за голову. Караул!!! Это ж сколько рисовать всего, да еще вставлять столько тегов.
А еще появился Manifest.json и browserconfig.xml.
По сути своей это конфигурационные файлы которые управляют иконками на той или иной ОС или браузере.
Вы опять скажете — «Блин…. еще и эти файлы делать к куче картинок»… «Королева иконка требует меня в жертву»…
Все просто на самом деле. Я сейчас подскажу как все сделать. У меня на этот сайт — все про все — заняло 10 минут.
Но сначала разберемся с этими файлами, а не с иконками разных размеров.
Manifest.json
Файл манифеста содержит информацию об иконках, цветовой теме, ориентации экрана, начальном URL и т.д. Используется для создания виджета в закладках браузеров.
Подключение файла как и всего остального в head:
<link rel="manifest" href="/manifest.json">
Пример простого файла:
{
"lang": "ru",
"name": "Моё приложение",
"description": "Описание приложения",
"icons": [{
"src": "/icon.png",
"sizes": "64x64",
"type": "image/png"
}],
"start_url": "/",
"display": "fullscreen",
"orientation": "landscape",
"background_color": "#000000",
"screenshots": [{
"src": "/screenshots.jpg",
"sizes": "640x480",
"type": "image/jpeg"
}]
}Манифест для сайта – это простой JSON-файл, который позволяет вам настроить следующие вещи:
1.
Какая будет иконка у пользователя, после того как он добавит ваш сайт на рабочий стол
2. Как будет запускаться ваш сайт (с адресной строкой, без нее или в полноэкранном режиме)
3. Splash screen
4. Цветовую тему
5. Ориентацию экрана
6. Начальный url
и многое другое, например мы можем убрать адресную строку, чтобы было похоже на нативное приложение.
Кратко пройдемся по параметрам:
name – имя, которое будет отображаться под иконкой, ну и вообще везде, где будет отображаться ваше «приложение»
short_name – будет использоваться в тех случаях, когда места для отображения полного имени недостаточно
icons – набор иконок разных размеров
start_url – определяет url, которые открывается при нажатии иконки (можно использовать, чтобы зафиксировать пользователей, которые открывают сайт через иконку на рабочем столе, добавив параметр, допустим, ?src=homescreen в url)
display – отвечает за то, как будет отображаться ваш сайт (с адресной строкой без нее и т.
п.)
background_color – устанавливает цвет страницы до того как она загрузилась. Пока страница не загрузилась пользователь видит перед собой белое пустое поле. Чтобы как-то разукрасить его серые будни, можно изменить этот цвет. Например, поставить цвет фона сайта.
Как быстро все реализовать:
1. Вначале приготовьте прозрачный свой логотип или квадратную картинку в формате PNG, достаточного размера.
2. Идем на бесплатный сервис https://www.favicon-generator.org/
Выставляем в нем галочки как на скриншоте:
Выбираем созданную заранее картинку и генерируем.
И о чудо! Получаем полный комплект иконок с нужными названиями и размерами, готовые конфигурационные файлы и теги link для вставки в шаблон сайта.
Хотя прямое назначение этого сервиса генерировать иконки, а не манифест, он его создает. Таким образом, у вас будут и иконки (для iOS и Андроид), и манифест. Полный комплект! Правда, манифест придется подправить (изменить имя и прочие настройки).
Я исправил в нем только имя:
"name": "Веб-студия WebTend",
"short_name": "WebTend",
Если name не влазит, устройства сами берут short_name. Лучше имя покороче, чтоб влазило под иконку в одну строку.
Правьте в NotePad++ в UTF-8 без BOM.
Вставил полученные на этом же сервисе теги в head:
<link rel="apple-touch-icon" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png">
<link rel="icon" type="image/png" href="/favicon-96x96.png">
<link rel="icon" type="image/png" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
И кинул все иконки в главную директорию (не хотелось пути менять).
В результате, добавив ссылку на экран IPhone, получил такое:
Как видим это 5s — экран маленький и он взял short_name — WebTend из manifest.json, что логично. На Ipad я уже увидел полное имя. При добавлении пользователь может изменить имя. Единственно на Android нет скругления иконки, что растраивает, думаю будет в будущем, при развитии этой системы.
При открытии по клику на ней очень интересно — при загрузке иконка с названием по типу preloader без анимации (можно цвет фона предзагрузки менять в manifest.
json). Открывается без строки браузера, в полноэкранном режиме, с имитацией приложения.
А совсем недавно такое работало только на андроид системах. Прогресс идет.
Еще один отличный сервис: https://realfavicongenerator.net
Очень удобный, есть много настроек для каждого устройства с демо результата. Я пользуюсь им.
Мне в нем понравилось, что он генерирует и черно-белый файл svg, кроме всего прочего. Для чего он нужен?
А нужен он в В Mac OS с его Safari (не путайте Safari в iOS!).
Чтобы использовать SVG Mac OS, необходимо указать атрибут rel со значением mask-icon, все элементы SVG должны быть черного цвета. Но не стоит пугаться, цвет можно поменять атрибутом color. Эта SVG-иконка нужна для закрепления вкладки в Safari. А цвет при наведении будет таким, какой мы указали в атрибуте color.
<link rel=»mask-icon» href=»/safari-pinned-tab.svg» color=»#00а0ff»> Название файла именно такое — safari-pinned-tab.svg.
Если не указывать эту иконку, то браузер будет отображать первую букву домена вашего сайта.
В Mac OS особо не разгуляешься, к сожалению. Если сохранить сайт на рабочий стол в Mac OS, то значок будет отображаться как скриншот страницы с html кодом. Просто так сайт приложением в Mac OS не сделать.
Для такой маленькой иконки очень много работы
С этим соглашается Philippe Bernard, автор RealFaviconGenerator. Он протестировал несколько вариантов, чтобы уменьшить количество необходимых файлов.
Он предполагает, что более минимальный подход обеспечивает достаточное покрытие совместимости для подавляющего большинства случаев.
Пусть браузер сам занимается уменьшением
Как говорилось ранее, браузеры обычно используют иконку самого близкого большего размера и уменьшают ее до желаемого размера, когда оптимального размера нет.
Поэтому если вы не возражаете, чтобы браузер за вас автоматически уменьшал изображения, можете предоставить всего одну большую иконку, которая будет покрывать большинство случаев.
Но есть случаи, когда такой подход не позволителен: необходимо, чтобы иконки всегда смотрелись идеально, чтобы были видны детали и цвета, чтобы все было читаемо и хорошо смотрелось на всех размерах.
В больших иконках лучше добавить больше деталей, таких как текст, название бренда, то, что невозможно поместить на маленькие размеры.
Минимальный набор иконок (от Ruadhán O’Donoghue)
Следующие файлы в корневой папке
favicon.ico (с размерами 16×16, 32×32)
favicon-16×16.png: современный эквивалент формата ICO
favicon-32×32.png: Safari
apple-touch-icon-180.png: Apple touch icon
icon-192.png: Chrome/Android
safari-pinned-tab.svg: SVG на закрепленной вкладке в Safari
mstile-150×150.png: MS плитка
Файл manifest.json, использующий изображение chrome:
{
"name": "",
"short_name": "",
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}Файл browserconfig.xml, использующий изображение mstile:
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square150x150logo src="/mstile-150x150.png"/>
<TileColor>#da532c</TileColor>
</tile>
</msapplication>
</browserconfig>
Разметка:
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/icon-32x32.png">
<link rel="icon" type="image/png" href="/icon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">
Но проще воспользоваться сервисом. Ничего страшного и утяжеляющего сайт не будет, если вы все сделаете как я написал.
Можно и закончить эту публикацию, но осталась одна важная вещь:
Сейчас многие шаблоны прописывают вызов иконки из папки самого шаблона. Если шаблон и фреймворк не позволяет вывести иконку из директории шаблона, то не забудьте путь до нее разрешить в robots.txt. Пример: Allow: /templates/vash-shablon/favicon.ico Так как по умолчанию в нем закрыто индексирование папки templates (для CMS Joomla).
И наконец, в догонку, связанная с темой информация — вывод Иконки в Яндекс браузере.
Она там имеет «кличку» — Виджет для Табло. Жуткое название. Всегда были Визуальные закладки. Красиво и понятно. Теперь Табло…
Про табло и иконки (виджеты на нем) читайте тут: https://yandex.ru/support/browser/personalization/tableau.html
Я попробовал, взял иконку для айфона побольше и переименновал, добавил link и дописал в ранее созданный manifest.json рекомендуемое яндекс.
И ничего в начале не получил. Виджет да, Заголовок да, а вот саму иконку нет. Оказалось абсолютный путь до иконки должен быть закодирован в URLencoded — вот ссылка на сервис это делающий: http://www.codenet.ru/services/urlencode-urldecode/
Это для информации. Меня вполне устраивают на панели быстрого запуска яндекс браузера и стандартно формируемые.
Вот и все, пожалуй, на это время. В принципе просто, но конечно удивляет и восхищает Карьера фавиконки за эти годы. Мы сами придумываем себе трудности, чтобы их преодолевать. Вроде, про это…
Дополнение:
После того как я написал эту статью, прошло не так много и времени и в Яндекс вебмастере появились уведомления, что формат SVG у них сейчас стал рекомендуемый. Требования к фавиконке: Размер: 120 × 120 пикселей (рекомендуемый), 16 × 16 или 32 × 32. Формат: SVG (рекомендуемый), ICO, GIF, JPEG, PNG, BMP. Совет. Используйте размер 120 × 120 пикселей или формат SVG, чтобы на сервисах Яндекса логотип сайта выглядел четче и заметнее.
SVG формат конечно хорош, но я лично рисовать ничего не буду. И так все четко и заметно. Могли бы сами сконвертировать при желании. В on line конвертерах в svg из png и генераторах даже не пытайтесь, при сохранении будет черно-белая иконка (такая применима только в mac os. Писал выше). Если есть правильная цветная svg, то вставить ее можно как обычный файл, используя в type (Тип передаваемых данных) image/svg — для формата SVG:
<link rel="icon" type="image/svg" href="/image.svg">
У svg есть конечно перспективы сделаться «ферзем» в будущем. Несомненный плюс — в возможностях переопределения размеров svg изображений. Но я бы не стал торопиться. Всему свое время.
Поэтому все выше описанное — актуально.
Web-иконки на дисплее iPhone | iBobr.ru
Кроме значков игр и приложений на рабочем экране iPhone можно разместить иконки Web-ресурсов. Если, с помощью телефона или планшета на базе iOS, подключенного к сети, Вы часто просматриваете Интернет-издания, то созданные Web-иконки бывают иногда полезны.
Пользователю
Web-иконки для iPhone выглядят как значки приложений, служат они для быстрого запуска часто посещаемого сайта или блога. Любители минимализма, конечно, предпочтут не заполнять экран телефона лишними значками и в качестве альтернативы создадут в браузере обычную закладку или сложат созданные иконки в отдельную папку. Но если Вы не Интернет-гик и мониторите лишь несколько порталов, то от пары Web-иконок эстетическая составляющая рабочего экрана iPhone вряд ли нарушится.
Пока Вы решаете, нужны ли эти значки, мы приступаем созданию Web-иконки. После выполнения действий инструкции на экране появится новый значок:
- Запускаем браузер Safari
- Вводим адрес полюбившегося блога или сайта
- После того как страница прогрузится, нажимаем на кнопку «+»
- Выбираем «Добавить в Домой»
- Редактируем название, которое будет отображаться на экране, и нажимаем – Добавить
Web-мастеру
Многие Интернет-пользователи просматривают сетевые ресурсы при помощи своих iPad, iPhone и iPod Touch, число таких пользователей только увеличивается, в связи с этим рекомендуем Web-мастерам создать Web-иконку для читателей своего проекта. Сделать это несложно, самый простой способ потребует наличия графического редактора и небольших навыков рисования.
При помощи Adobe Photoshop рисуем иконку, сохраняем её в 3-х файлах в форте PNG с разными размерами – 57x57px, 72x72px и 114x114px. Файлам присваиваем названия, указанные ниже и размещаем их в корневом каталоге ресурса.
• apple-touch-icon-57×57.png
• apple-touch-icon-72×72.png
• apple-touch-icon.png
За идею спасибо Мухахе!
Запись опубликована в рубрике ИНСТРУКЦИИ с метками iPhone иконки. Добавьте в закладки постоянную ссылку.Как правильно выбрать иконки | Веб-дизайн
В веб-дизайне подбор иконок это стандартная задача, но далеко не такая простая, как может показаться на первый взгляд.
Как и все остальное, что касается вашего сайта, это требует продуманного подхода. Несмотря на то, что украшение вашего сайта декоративными иконками придаст ему уникальный вид, это не всегда самый мудрый из возможных вариантов.
В данной статье мы дадим некоторые рекомендации, которые стоит держать в уме при подборе иконок, а также рассмотрим краткий список моих личных фаворитов.
Например, в программе Mondrian.io для обозначения инструмента «Текст» часто используется значок печатной машинки.
В первую очередь, ваши иконки должны быть легко и быстро узнаваемы. Не делайте их слишком замудренными.
Порой, встретившийся красочный набор иконок может вас очаровать, но когда вы начнете интегрировать его в дизайн сайта, то может выясниться, что он не вписывается в задуманную концепцию.
А иногда, вам может захотеться быть очень оригинальным в выборе иконок. «А почему бы не поставить значок ракеты для кнопки отправки сообщения?» — рассуждаете вы.
Основное правило: если у вас есть сомнение в правильности выбора, значит вы с большой долей вероятности приняли неверное решение.
Mondrian.io — это векторное приложение для интернет-браузера с открытым исходным кодом, которое выглядит очень многообещающе, и, в то же время, оно прекрасно иллюстрирует дилемму выбора подходящего набора иконок.
Текущая (на момент написания статьи) версия Mondrian использует иконку печатной машинки для инструмента «Текст» (смотрите картинку выше).
На первый взгляд, такой выбор может показаться вполне резонным. В конце концов, печатная машинка является реальным печатным инструментом, верно?
Однако спросите себя:
- Как много вы знаете людей, у которых есть печатная машинка?
- Сможет ли школьник средних классов легко понять назначение иконки?
- Где еще, кроме кино, вы последний раз видели настоящую печатную машинку?
Печатная машинка, как символ письма, технологических достижений и современных офисов, утратила свое значение 30 лет назад.
Иконки текстовых инструментов в программных продуктах: Fireworks, MacPaint,Freehand и Photoshop.
Еще с начала 80-х годов прошлого века сложилась традиция изображать значки текстовых инструментов в виде заглавной буквы «T» или «A». Любой человек, от секретаря, использующего MS Word, до архитектора, работающего в Autocad и с серьезными 3D-пакетами, легко поймет смысл этого символа.
Запомните: если у вас есть возможность использовать проверенный временем способ, то не будьте слишком гордыми – используйте его.
Как и плохое сочетание цветов, неудачный подбор иконок может убить ваш сайт. Заметьте, что некоторые иконки могут иметь разное значение в различных контекстах.
Если вы не уверены в своем выборе, не бойтесь его опробовать: поспрашивайте своих друзей и семью, что они об этом думают.
Если вы не получаете желаемого результата, то повесьте на сайте текстовую подсказку, сообщающую назначение инструмента.
Помните, что единственным назначением иконки служит передача назначения через образ.
Размер иконок в вашем проекте имеет очень важное значение. Обычно в веб-дизайне создают визуальную иерархию значков — от самого большого до самого маленького — для увеличения удобства восприятия.
Для таких элементов как логотипы и заголовки, это помогает создать баланс и гармонию. Однако важно соблюдать соответствие размеров, чтобы ваша страничка не выглядела неаккуратно.
Общее соотношение размеров также очень сильно влияет на восприятие дизайна. Слишком большие иконки будут загромождать страницу и мешать нормальному чтению текста, в то время как слишком маленькие значки сложно различить.
Для удобства конечного пользователя нужно будет подобрать золотую середину.
В конечном итоге, это поможет вам быть уверенным в том, что взгляд посетителя беспрепятственно перемещается по содержимому.
Выбор подходящих размеров защитит глаза от излишнего напряжения, а также повысит скорость и полноту восприятия материала и всех элементов страницы посетителем.
Как дизайнеры, мы хорошо осведомлены, насколько важен подбор цветов.
Цвет, как правило, используется для вызывания определенных эмоций. То же самое применимо и к иконкам. Если ваши значки должны призывать к действию убедитесь, что их цвета подобраны соответствующим образом.
Также, имейте в виду, что иконки служат иной цели, нежели изображения или диаграммы — они являются «визуальной рукой помощи» и служат для облегчения взаимодействия, а не вспомогательными картинками или декоративными элементами.
Это значит, что приоритетом для вас является не детальность и не цвета.
Серьезный вопрос заключается в том, как много цветов вам нужно, чтобы достигнуть поставленных целей, и нужны ли вам цвета вообще. Хороший значок это по своей сути визуальное примечание, а не картина маслом.
Предлагаю вам ознакомиться с примерами того, как грамотно подбирать иконки. Ниже представлена десятка моих личных фаворитов, которые к тому же бесплатны и находятся в свободном доступе для скачивания и использования.
РедакцияПеревод статьи «How to Choose the Right Icons»
Настроить значок веб-части | Документы Microsoft
- 5 минут на чтение
Оцените свой опыт
да Нет
Любой дополнительный отзыв?
Отзыв будет отправлен в Microsoft: при нажатии кнопки «Отправить» ваш отзыв будет использован для улучшения продуктов и услуг Microsoft.Политика конфиденциальности.
Представлять на рассмотрение
Спасибо.
В этой статье
Выбор значка, который иллюстрирует назначение вашей клиентской веб-части SharePoint, упрощает пользователям поиск вашей веб-части среди всех других веб-частей, доступных в наборе инструментов или при создании страниц приложения с одной частью.
Предварительная настройка веб-частей
Значок веб-части определяется в манифесте веб-части как часть предварительно настроенных записей.Если у вас есть многоцелевая веб-часть, которую можно настроить в соответствии с различными потребностями, каждая конфигурация может иметь свой значок, указывающий ее назначение.
Использование характерного значка помогает пользователям найти нужную веб-часть. Дополнительные сведения о предварительной настройке веб-частей см. В разделе Упрощение добавления веб-частей с предварительно настроенными записями.
В манифесте веб-части можно настроить значок веб-части, отображаемый на панели инструментов, и изображение предварительного просмотра, отображаемое при создании страниц приложения с одной частью.
Значок панели инструментов отображается на панели инструментов веб-части, когда пользователи решают добавить веб-часть на страницу.
SharePoint Framework предлагает несколько способов определения значка панели инструментов для веб-части.
Использовать шрифт значка Fluent UI
Один из способов определить значок для веб-части — использовать свойство officeFabricIconFontName . Это свойство позволяет вам выбрать один из значков, предлагаемых как часть пользовательского интерфейса Fluent.
Список доступных значков пользовательского интерфейса Fluent см. В разделе Значки.
Для использования определенного значка
На странице обзора значков пользовательского интерфейса Fluent скопируйте его имя и вставьте его как значение свойства
officeFabricIconFontNameв манифест веб-части.{ «$ schema»: «https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json», "id": "bcae7077-85cb-41a0-b3d3-2084f268a211", "псевдоним": "WeatherWebPart", "componentType": "WebPart", "версия": "*", "manifestVersion": 2, "requiresCustomScript": ложь, "preconfiguredEntries": [ { "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Другое "группа": { "default": "Другое" }, "заглавие": { "default": "Погода" }, "описание": { "default": "Показывает текущую погоду в данном месте" }, "officeFabricIconFontName": "Солнечно", "характеристики": { "location": "Мюнхен" } } ] }При добавлении веб-части на страницу выбранный значок отображается на панели инструментов.
Преимущество этого подхода заключается в том, что вам не нужно развертывать файл изображения значка вместе с ресурсами веб-части. Кроме того, на компьютерах с другим разрешением или другими настройками специальных возможностей значок автоматически адаптируется к этим настройкам без потери качества.
Использовать внешний значок изображения
Хотя пользовательский интерфейс Fluent предлагает множество изображений, при создании веб-частей вы можете захотеть использовать что-то особенное для вашей организации, чтобы четко отделить свои веб-части от других основных и сторонних веб-частей, видимых на панели инструментов.
В дополнение к использованию значков пользовательского интерфейса Fluent, SharePoint Framework также позволяет использовать изображения.
Использование изображения в качестве значка веб-части
Укажите абсолютный URL-адрес изображения в свойстве
iconImageUrlв манифесте веб-части.{ «$ schema»: «https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json», "id": "bcae7077-85cb-41a0-b3d3-2084f268a211", "псевдоним": "WeatherWebPart", "componentType": "WebPart", "версия": "*", "manifestVersion": 2, "requiresCustomScript": ложь, "preconfiguredEntries": [ { "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Другое "группа": { "default": "Другое" }, "заглавие": { "default": "Погода" }, "описание": { "default": "Показывает текущую погоду в данном месте" }, "iconImageUrl": "https: // assets.contoso.com/weather.png ", "характеристики": { "location": "Мюнхен" } } ] }Размер значка веб-части, отображаемого на панели инструментов, составляет 40×28 пикселей. Если ваше изображение больше, оно пропорционально этим размерам.
Хотя использование настраиваемых изображений дает вам больше гибкости при выборе значка для веб-части, оно требует развертывания их вместе с другими ресурсами веб-части. Кроме того, ваше изображение может потерять качество при отображении с более высоким разрешением или определенными настройками специальных возможностей.Чтобы избежать потери качества, вы можете использовать векторные изображения SVG, которые также поддерживаются SharePoint Framework.
Использовать изображение в кодировке base64
При использовании настраиваемого изображения вместо того, чтобы указывать абсолютный URL-адрес файла изображения, размещенного вместе с другими ресурсами веб-части, вы можете закодировать изображение в кодировке base64 и использовать строку base64 вместо URL-адреса.
В Интернете доступен ряд сервисов, которые вы можете использовать для кодирования вашего изображения с помощью base64; для получения дополнительной информации см. Преобразование изображений в Base64.
Для использования изображения в кодировке base64
Кодировать изображение.
Скопируйте строку base64 и используйте ее в качестве значения для свойства
iconImageUrlв манифесте веб-части.{ «$ schema»: «https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json», "id": "bcae7077-85cb-41a0-b3d3-2084f268a211", "псевдоним": "WeatherWebPart", "componentType": "WebPart", "версия": "*", "manifestVersion": 2, "requiresCustomScript": ложь, "preconfiguredEntries": [ { "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Другое "группа": { "default": "Другое" }, "заглавие": { "default": "Погода" }, "описание": { "default": "Показывает текущую погоду в данном месте" }, "iconImageUrl": «данные: изображения / SVG + XML; base64, PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTAyMiIgaGVpZ2h0PSI5NzgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI + CiA8Zz4KICA8dGl0bGU + TGF5ZXIgMTwvdGl... ", "характеристики": { "location": "Мюнхен" } } ] }
Кодировка Base64 работает как для растровых изображений, таких как PNG, так и для векторных изображений SVG. Преимущество использования изображений в кодировке base64 заключается в том, что вам не нужно отдельно развертывать изображение значка веб-части.
Дополнительные соображения
Каждая веб-часть должна иметь значок. Если вы указываете значок веб-части с помощью свойств officeFabricIconFontName и iconImageUrl , используется значок, указанный в officeFabricIconFontName .
Если вы решите не использовать значок Fluent UI, необходимо указать URL-адрес в свойстве iconImageUrl .
Установить изображение предварительного просмотра страницы приложения с одной частью
Начиная с SharePoint Framework v1.11, вы можете указать изображение предварительного просмотра для своей веб-части, которое отображается, когда пользователи создают страницу приложения, состоящую из одной части.
Осторожно
В настоящий момент для изображения страницы приложения, состоящей из одной части, можно установить только URL-адрес изображения. Использование изображений в кодировке base64 в настоящее время не поддерживается.
Для установки изображения предварительного просмотра страницы приложения, состоящего из одной части
Укажите абсолютный URL-адрес изображения в свойстве fullPageAppIconImageUrl в манифесте веб-части.
{
«$ schema»: «https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json»,
"id": "bcae7077-85cb-41a0-b3d3-2084f268a211",
"псевдоним": "WeatherWebPart",
"componentType": "WebPart",
"версия": "*",
"manifestVersion": 2,
"requiresCustomScript": ложь,
"preconfiguredEntries": [
{
"groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Другое
"группа": {
"default": "Другое"
},
"заглавие": {
"default": "Погода"
},
"описание": {
"default": "Показывает текущую погоду в данном месте"
},
"officeFabricIconFontName": "Солнечно",
"fullPageAppIconImageUrl": "https: // assets.contoso.com/fullPageAppIcon.png ",
"характеристики": {
"location": "Мюнхен"
}
}
]
}
Подсказка
При отображении в браузере размер изображения будет изменяться в зависимости от текущего размера экрана. По умолчанию размеры изображения составляют 193×158 пикселей, при этом нижние 48 пикселей частично закрываются меткой с именем веб-части. На экранах меньшего размера размер и размер отображаемого изображения будут отличаться, и метка с именем веб-части может покрывать относительно большую часть изображения.
Поддержка адаптивных значков в PWA с маскируемыми значками
Новый формат значков для использования адаптивных значков на поддерживаемых платформах.
• Обновлено
Появляется в: прогрессивных веб-приложенияхЧто такое маскируемые значки? #
Если вы установили прогрессивное веб-приложение на недавний телефон Android, вы можете заметить, что значок отображается на белом фоне. Android Oreo представил адаптивные значки, которые отображают значки приложений различной формы на разных моделях устройств.Иконки, которые не соответствуют этому новому формату, имеют белый фон.
Прозрачные значки PWA отображаются внутри белых кругов на Android.Маскируемые значки — это новый формат значков, который дает вам больше контроля и позволяет вашему прогрессивному веб-приложению использовать адаптивные значки. Если вы предоставите маскируемый значок, ваш значок может заполнить всю форму и отлично выглядеть на всех устройствах Android. Firefox и Chrome недавно добавили поддержку этого нового формата, и вы можете использовать его в своих приложениях.
Маскируемые значки вместо этого покрывают весь круг.Мои текущие значки готовы? #
Поскольку маскируемые значки должны поддерживать различные формы, вы предоставляете непрозрачное изображение с некоторым отступом, которое браузер может позже обрезать до нужной формы и размера.Лучше не полагаться на какую-либо конкретную форму, поскольку окончательно выбранная форма может варьироваться в зависимости от браузера и платформы.
Различные формы для конкретных платформК счастью, существует четко определенная и стандартизированная «минимальная безопасная зона», которую соблюдают все платформы. Важные части вашего значка, такие как логотип, должны находиться в пределах круглой области в центре значка с радиусом, равным 40% ширины значка. Внешний край 10% можно обрезать.
Вы можете проверить, какие части ваших значков попадают в безопасную зону, с помощью Chrome DevTools.Открыв прогрессивное веб-приложение, запустите DevTools и перейдите на панель Application . В разделе Значки вы можете выбрать Показывать только минимальную безопасную область для маскируемых значков . Ваши значки будут обрезаны, чтобы была видна только безопасная область. Если ваш логотип виден в этой безопасной зоне, все готово.
Панель приложенийЧтобы протестировать маскируемый значок с различными формами Android, используйте созданный мною инструмент Maskable.app. Откройте значок, затем «Маскируемый».приложение позволит вам опробовать различные формы и размеры, и вы можете поделиться предварительным просмотром с другими членами вашей команды.
Как использовать маскируемые значки? #
Если вы хотите создать маскируемый значок на основе существующего значка, вы можете использовать редактор Maskable.app. Загрузите свой значок, настройте цвет и размер, затем экспортируйте изображение.
Создание значков в редакторе Maskable.app После того, как вы создали маскируемое изображение значка и протестировали его в DevTools, вам необходимо обновить манифест веб-приложения, чтобы он указывал на новые ресурсы.Манифест веб-приложения предоставляет информацию о вашем веб-приложении в файле JSON и включает в себя массив значков и .
С включением маскируемых значков было добавлено новое значение свойства для ресурсов изображений, перечисленных в манифесте веб-приложения. Поле назначения сообщает браузеру, как следует использовать ваш значок. По умолчанию значки имеют назначение «любой» . Размер этих значков будет изменен поверх белого фона на Android.
Маскируемые значки должны использовать другое назначение: «маскируемые» .Это указывает на то, что изображение предназначено для использования с масками значков, что дает вам больше контроля над результатом. Таким образом, ваши значки не будут иметь белый фон. Вы также можете указать несколько целей, разделенных пробелами (например, «любой маскируемый» ), если вы хотите, чтобы маскируемый значок использовался без маски на других устройствах.
В то время как вы можете указать несколько целей, разделенных пробелами, например «любая маскировка» , на практике вы не должны . Использование «маскируемых» значков в качестве «любых» значков является неоптимальным, поскольку значок будет использоваться как есть, что приведет к избыточному заполнению и уменьшению основного содержимого значка.В идеале значки для цели «любая» должны иметь прозрачные области и не иметь дополнительных отступов, таких как значки вашего сайта, поскольку браузер не собирается добавлять это для них.
{
…
«значки»: [
…
{
«src»: «путь / к / regular_icon.png»,
«размеры»: «196x196»,
«тип»: «изображение / png») ,
"цель": "любой"
},
{
"src": "путь / к / maskable_icon.png",
"размеры": "196x196",
"тип": "изображение / png",
"цель": "маскируемый"
},
…
],
…
} С его помощью вы можете пойти дальше и создать свои собственные маскируемые значки, убедившись, что ваше приложение отлично выглядит от края до края (и для чего стоит, круг-круг, овал-овал 😄).
Выражение признательности #
Эта статья была отрецензирована Джо Медли.
Последнее обновление: Улучшить статьюКак создать веб-значок в Adobe Illustrator
Adobe Illustrator • Уроки Андрей Штефан • 28 июля 2014 г. • 11 минут ПРОЧИТАТЬ
Вы когда-нибудь хотели создать значок для Интернета? Сегодня твой день. В этом руководстве вы узнаете, как создавать веб-иконки.
Если вы увлекаетесь иконками, вы, вероятно, уже знаете, как иконография (осторожное использование символов вместо слов) может сделать сайт более привлекательным, но, что более важно, более удобным для навигации.
Для этого урока я взял гипотетический веб-сайт электронной книги (назовем его Libro), который может использовать некоторые визуальные элементы, чтобы пользователь, просматривающий его, мог различать разные разделы, просто глядя на значки. Поскольку самая популярная программа для чтения электронных книг производится Amazon, мы будем использовать Kindle в качестве визуального представления портативности устройства и создадим из него векторную иконку.
Шаг 1. Проведите исследование
Как и в любом новом проекте, первый этап творческого процесса начинается с определения идеи, фразы или слова, которые вы хотите изобразить, используя образы.
Таким образом, вы определите аспекты, которые вам понадобятся, чтобы понять, что может (или не может) помочь вам сформировать значок.
Лучшие ресурсы для этого:
Конструктор шаблонов электронной почты в Интернете
С Postcards вы можете создавать и редактировать шаблоны электронных писем онлайн без каких-либо навыков программирования! Включает более 100 компонентов, которые помогут вам создавать собственные шаблоны писем быстрее, чем когда-либо прежде.
Попробуйте бесплатноДругие продукты- Словарь : Будь то в Интернете или в твердом переплете, этот маленький парень всегда поможет вам получить первое представление о том, каким должен быть или представлять ваш продукт.
- Веб-сайт, специализирующийся на работе со значками : попробуйте Iconfinder, в котором есть отличная поисковая система, которая просматривает тонны категоризированных значков, связанных с определенными ключевыми словами.
- Прогулка по городу : вы будете поражены количеством информации, которую наше окружение может предложить в виде символов.
- Google: Если и есть что-то, что Google делает лучше всего, так это поиск релевантной информации (определения, характеристики и наиболее важные изображения), напрямую связанной с искомым словом.
Предполагая, что вы выполнили свою детективную работу, вы должны иметь более глубокое представление о том, что вы хотите изобразить с помощью цвета, линий и других форм изображений. Теперь вы действительно можете приступить к творчеству.
Шаг 2 — Начать рисование
Как и в случае с любым новым продуктом, способ перевода информации, которую вы сейчас храните, глубоко связан с вашей личностью, поскольку нет двух одинаковых идей. Нет никаких правил, но, самое главное, нет границ, к которым вам нужно адаптироваться или ограничиваться — единственная истинная переменная — это ваше воображение.
Будь то чашка кофе или старая добрая Нирвана (группа), найдите то, что заставляет ваш разум двигаться, а руку течет, и начните рисовать. Неважно, насколько вы хороши, важно то, что, поступая так, вы начинаете определять форму и функции, которые будет использовать ваш значок.
Совет: Никогда не выбрасывайте вещи. Даже если вы начали идею и отказались от нее по ходу дела, всегда старайтесь проложить путь, чтобы вы могли видеть направления, из которых возник ваш дизайн.Таким образом вы можете накладывать части из одной версии на другую и улучшать качество визуальной композиции.
Эти первые два шага носят общий характер. Для нашего проекта будет достаточно пары изображений, представляющих настоящий Kindle; у него простой дизайн, который можно легко воспроизвести, используя базовые формы.
Шаг 3. Запуск Illustrator
Неважно, давно ли вы работаете с пикселями или только начинаете, — одним из самых важных инструментов является Adobe Illustrator.Я не буду говорить о самом программном обеспечении, но расскажу, как настроить новый документ и приступить к созданию значка.
3.1. Создать новый документ
Предполагая, что у вас уже есть Illustrator, работающий в фоновом режиме, создайте новый документ, нажав Ctrl + n (или ⌘ + n , если вы используете Mac), или выбрав ФАЙЛ> Создать… , и давайте рассмотрим некоторые из настроек , которые появятся во всплывающем окне.
- Имя : Это очевидно; дайте ему любое имя, подходящее для вашего проекта.
- Профиль : это важно, потому что графика, разработанная для Интернета, будет отличаться от графики, основанной на профиле для печати. Обязательно выберите Интернет в раскрывающемся меню.
- Количество артбордов : Артборд согласно Adobe представляет области, которые могут содержать фактические графические объекты. Я обычно выбираю больший артборд, даже если у меня несколько дизайнов, и кладу их на разные слои, чтобы они были под рукой, и выбираю именно те, которые я хочу увидеть.
- Ширина и Высота : Меры, в соответствии с которыми вы можете изменять размер монтажной области — в нашем случае мы выберем размер 120 на 120 пикселей.
- Единицы : Illustrator предназначен для использования в Интернете и для печати, поэтому у вас есть много вариантов; для этого проекта мы будем использовать пиксель.
- Цветовой режим : еще раз проверьте, подходит ли этот параметр для материала, для которого вы создаете. RGB (красный, зеленый, синий) — это цвет, специфичный для цифрового носителя, тогда как CMYK (голубой, пурпурный, желтый, черный) используется в проектах, связанных с печатью.Для нашего проекта мы будем использовать RGB.
Быстрый совет : узнайте больше о различиях между RGB и CMYK в этом официальном руководстве Adobe (которое хорошо объясняет ключевые различия, о которых вам нужно знать).
- Растровые эффекты : можно выбрать одно из трех значений
- Экран (72 ppi), — значение по умолчанию. Это стандартный вариант, который вы бы выбрали, если бы создавали дизайн для Интернета (что в нашем случае так и есть).
- Средний (150 пикселей на дюйм).
- Высокое (300 пикселей на дюйм). Две последние опции предназначены для графики, которая будет использоваться для печати.
Быстрый совет : Теперь, когда вы создали иллюстрацию и предположим, что в вашем дизайне используются эффекты из меню Stylize , такие как Drop Shadows , Outer Glow или Inner Glow , вам необходимо убедиться, что качественный. Печатная версия должна выглядеть такой же гладкой и чистой, как и версия на вашем мониторе.Для этого выберите «Эффект »> «Параметры растровых эффектов документа» и выберите более высокое разрешение из флажков — вы также можете ввести собственное значение в поле « Другое, ».
Хотя мы собираемся разработать дизайн для Интернета ( 72 ppi, ), в конечном итоге арт будет как png или jpeg , которые являются растровыми изображениями . Если вы зайдете на сайт Adobe, то найдете еще один совет, посвященный влиянию ppi на штрихи дизайна:
«Четкий вид выровненных по пикселям штрихов сохраняется в растровом выводе только с разрешением 72 ppi.Для других разрешений высока вероятность того, что такие штрихи приведут к сглаживанию результатов ».
- Выровнять новые объекты по пиксельной сетке : это необходимо, если вы хотите добиться идеального дизайна. Программа дает указание векторным объектам выравниваться по пиксельной сетке при их перемещении или масштабировании, выравнивая их по новым позициям.
Вот и оно: одноразовое и откровенное вступление, которое заполнит некоторые пробелы, которые могут появиться при запуске.
3.2. Получение основных форм
Сначала создайте круг , который будет служить фоном для всего дизайна. Используя инструмент «Эллипс» ( L), щелкните левой кнопкой мыши в любом месте Illustrator, чтобы открыть окно настроек прямоугольника со скругленными углами и установите ширину и высоту круга. Введите 110 пикселей для и нажмите ОК. Выделите только что созданный объект, удалите цвет обводки и придайте ему красивую светло-красноватую заливку ( HEX = ff7171 или R = 255, G = 113, B = 113 ).
Возьмите инструмент Rounded Rectangle Tool (находится на левой панели инструментов, там же, что и инструмент Rectangle Tool ), щелкните левой кнопкой мыши на монтажной области и создайте фигуру 55 x 80 пикселей с радиусом угла 5 пикселей . Используя параметры Align ( Window> Align ), выберите новый объект и по горизонтали, и по вертикали, выровняйте его по монтажной области. Заливка темно-серым цветом # 606060 ( R = 96, G = 96, B = 96 )
Подсказка : Если вы только что настроили панель «Выравнивание», к выбранным объектам будет применено выравнивание по умолчанию.Чтобы выровнять по монтажной области, посмотрите в правый нижний угол, нажмите « Align To» и выберите Align to Artboard.
Следуя тем же шагам, что и раньше, создайте новый прямоугольник с закругленными углами (ширина = 39 пикселей, высота = 64 пикселя, радиус угла = 1 пиксель, ). Выберите новый объект, выровняйте его по горизонтали с монтажной областью и переместите к верхней части большего прямоугольника.
Выделив объект, измените его цвет заливки на более светлый серый D3D3D3 ( R = 211, G = 211, B = 211 ).
Это основная рамка и экран, которые будут представлять Kindle.
3.3 Кнопки наслоения
Следующий шаг связан с кнопками . Выберите инструмент Прямоугольник со скругленными углами и создайте объект 5 x 5 пикселей с радиусом угла 2 пикселя . Выровняйте его по горизонтали с другими частями и переместите в середину пространства между нижней стороной экрана и нижней стороной тела (вы также можете сделать это, перетащив и создав прямоугольник и выровняв по вертикали кнопку с ним. ).Назначьте цвет заливки ( 474747, R = 71, G = 71, B = 71 ), затем скопируйте его и вставьте на место ( Ctrl + f / ⌘ + f ). Выделите дублирующую кнопку и отразите ее обводку цветом заливки, оставив 1px .
Теперь у нас есть основная кнопка; далее идут четыре закругленных. Выберите инструмент Ellipse Tool ( L ) и создайте круг 3 x 3px . Выделите его и, удерживая Alt , перетащите влево для дублирования.Выбрав оба, снова удерживайте Alt ( ⌥ Option на Mac ) , и перетащите вправо от основной кнопки. Выделите все круглые кнопки и основную. Щелкните левой кнопкой мыши по центральной кнопке и, используя панель Align , отцентрируйте их по вертикали. Теперь нам нужно расположить их, оставив все объекты выделенными, перейти в левый нижний угол Align to Distribute Spacing , присвоить ему 4px и выбрать Horizontal Distribute Space .
Для боковых кнопок мы создадим объект с закругленными углами (ширина = 5 пикселей, высота = 30 пикселей, радиус угла = 1 пиксель, ) и выровняем его по вертикали относительно основной части значка. Перетащите его немного вправо, чтобы он перекрывал друг друга. Используя инструмент Shape Builder Tool ( Shift + m ) вычтите пересечение двух объектов, и у вас появятся кнопки навигации по страницам.
Выберите новый объект и измените заливку на 3d3d3d ( R = 61, G = 61, B = 61 ).Дублируйте и отразите его по вертикали ( щелкните правой кнопкой мыши> Трансформировать> Зеркальное отражение> Вертикальное ), затем выровняйте по правой стороне основного тела.
На этом этапе иконка начинает обретать форму. На следующем шаге мы начнем добавлять детали .
3.4. Добавление деталей
Теперь, когда наш Kindle разложен, мы начнем добавлять последние штрихи к экрану. Возьмите инструмент Rectangle Tool и нарисуйте объект 100 x 55px . Поверните его, нажав R , а затем перетащите один угол влево, удерживая нажатой Shift , чтобы получить хороший угол в 45 градусов.Дублируйте экран Kindle и выберите как его, так и повернутый объект и нажмите Shift + M для инструмента Shape Builder Tool. Вычтите пересеченный путь для красивого отражения.
Повторите шаг выше, но вместо вычитания из прямоугольника экрана переместите повернутый объект немного выше первого отражения, снова вычтите и придайте ему более светлый цвет. Также используйте этот эффект на основной кнопке устройства и на его корпусе, чтобы придать ему немного блеска.
Еще раз выберите экран, скопируйте и вставьте его на место, перевернув заливку обводкой и придав ей более темный серый цвет ( 3d3d3d ).
Выделите основную часть устройства, продублируйте ее и снова отразите заливку ее обводкой. Из цветовой палитры выберите более заметный серый цвет, чтобы его можно было отличить от остальной части тела.
3,5. Добавить длинную тень
Мы закончим нашу иконку, отбросив длинную тень. Дублируйте основную часть значка ( Ctrl + c, , затем Ctrl + f) , чтобы вставить на место.Выберите новый объект и перетащите его под углом 45 к правому нижнему углу. Мы сделаем это, удерживая Alt и, перетаскивая вправо, нажимая и удерживая Shift , чтобы вы получили его точно под 45 градусами.
Создайте переход между двумя объектами; перейдите к Object> Blend Options и в Specified Steps введите 200 . Теперь, используя тот же путь, выберите Make .
Эти двое объединились в единую форму.Перейдите в Object> Expand> OK , а затем в окне Transform нажмите Unite . Это базовая тень. Придайте ему более темный цвет, чем фоновый круг, а затем замаскируйте его, чтобы он не выпадал из фактического дизайна. Измените цвет на d85d5d ( R = 216, G = 93, B = 93 ), затем скопируйте и вставьте круг перед длинной тенью. Выделите и тень, и объект над ней, затем щелкните правой кнопкой мыши > Сделать обтравочную маску .
Мы прибили!
Вы можете менять цвета по своему усмотрению, адаптируя стиль к вашим потребностям. Кроме того, поскольку все это мы делали с помощью векторов, мы можем масштабировать значок до любого размера или меньшего размера, чем захотим.
Шаг 4. Сохранить для Интернета
У нас есть красивый значок, но как насчет его сохранения, чтобы мы действительно могли использовать его для того, что мы задумали в первую очередь — для Интернета? Экспортируйте иллюстрации, используя векторный формат SVG (масштабируемая векторная графика) XML.Основные преимущества использования SVG по сравнению с другими форматами (такими как PNG):
- Возможность редактирования: Вы можете редактировать изображение в любое время с помощью любого текстового редактора.
- Масштабируемость: Вы можете легко масштабировать изображения, когда они размещены в Интернете, без необходимости создания нескольких версий.
Итак, давайте посмотрим некоторые настройки этого формата. Перейдите в Файл> Сохранить как> и из Сохранить как тип щелкните раскрывающийся список и выберите SVG ( *.SVG ) — не забудьте установить флажок Use Artboards , чтобы сохранить только элементы на вашем артборде. Должно появиться всплывающее окно — нажмите на опцию еще , чтобы увидеть полный набор опций. Пройдемся по каждому из них:
- Профили SVG : с августа 2011 года стандартная версия, продвигаемая W3C , — 1.1
- Шрифты
Тип: Управляет способом встраивания шрифтов в фактический файл.Обычно, если у вас есть текст, Adobe рекомендует SVG, , но это имеет некоторые недостатки и не поддерживается Firefox.
Подмножество : Используя SVG , вы можете сохранить подмножество глифов (символов) в фактическом файле (что увеличит размер, но позволит вам изменять содержимое), но мы будем использовать Только используемые глифы , потому что наш дизайн делает не включать текст.
- Расположение изображения : этот параметр во многом определяет способ встраивания изображений в файл SVG .Согласно Adobe, лучший вариант — использовать Link , а затем изменить параметр href , чтобы он указывал на ваш собственный файл изображения, который вы должны сжать с помощью Photoshop или любого другого программного обеспечения для редактирования изображений.
- Свойства CSS : с помощью элементов стиля вы можете изменить код SVG в соответствии с вашими потребностями после экспорта файла и использования его на своем веб-сайте.
- Десятичные разряды : Значение здесь будет определять точность экспортируемых векторов.Чем больше число, тем больше размер файла. Рекомендуется ввести значение 1.
- Вывести меньше элементов
После выбора всех вышеперечисленных параметров нажмите Сохранить .
Подсказка: Для получения дополнительных сведений об остальных параметрах сохранения перейдите по этой ссылке.
Вот и все!
Надеюсь, вам понравился этот урок, и вы научились создавать значки в Illustrator. Эти методы можно применить к любому проекту, независимо от его тематики.
Нравится то, что вы читаете? Подпишитесь на наши главные новости.
Иконки для веб-сайтов, Иконки для веб-сайтов, Иконки для веб-сайтов, Веб-кнопки
Здесь вы можете найти иконок для веб-сайтов и веб-кнопки для использования в ваших творческих проектах, веб-разработке, рекламной кампании, страницах в социальных сетях, презентациях.Icons4web — это веб-сайт из стоковых иконок, . Мы продаем бесплатные иконки для веб-дизайна.
Вы можете использовать панель поиска, чтобы найти значки для веб-сайтов и выбрать свой уникальный значок веб-дизайна. Просмотрите нашу коллекцию значков и выберите свои любимые веб-кнопки. Мы продаем широкий ассортимент значков — вы можете купить их модели, цвета, формы и размеры, чтобы сделать ваш веб-сайт или приложение популярными.
Значок веб-сайта или кнопка веб-сайта — это пиктограмма, отображаемая на экране компьютера, планшета или мобильного телефона.Эти значки помогают пользователям перемещаться по системе, приложению или Интернету. Графически значок веб-сайта представляет собой стилизованную иллюстрацию знакомых пользователям объектов, знаков или текста. Значок графического дизайна размещается на главной странице веб-сайта. В результате вы можете использовать его как гиперссылку на другие страницы того же веб-сайта или, возможно, на другие веб-сайты.
Иконки сайтов для рекламы, проектов
У нас есть иконки из разных областей, в первую очередь офисных, деловых, медицинских, а также социальных сетей, веб-дизайна и т. Д.У нас есть огромная коллекция иконок по простой и справедливой цене. Поскольку значки в основном являются изображениями, мы продаем файлы в формате jpg и / или eps vector.
Вам не нужно регистрироваться, просто выберите понравившийся значок, добавьте его в корзину и перейдите к оформлению заказа. Таким образом, вы можете покупать значки, используя Paypal или кредитную карту , с простой оплатой и мгновенной загрузкой. Следовательно, значки готовы к загрузке и использованию для приложений, веб-сайтов, книг, игр, визитных карточек, листовок, социальных сетей, маркетинга.
Кроме того, если у вас есть особые пожелания, предложения и т. Д., Не стесняйтесь обращаться к нам.
Вы можете купить иконку со стандартной лицензией или с расширенной лицензией. Поэтому перед покупкой, пожалуйста, посетите нашу страницу лицензирования, чтобы узнать подробности.
значков — манифесты веб-приложения
Элемент icons определяет массив объектов, представляющих файлы изображений, которые могут служить значками приложений для различных контекстов. Например, их можно использовать для представления веб-приложения среди списка других приложений или для интеграции веб-приложения с переключателем задач ОС и / или системными настройками.
"значки": [
{
"src": "icon / lowres.webp",
"размеры": "48x48",
"тип": "изображение / webp"
},
{
"src": "icon / lowres",
"размеры": "48x48"
},
{
"src": "icon / hd_hi.ico",
"размеры": "72x72 96x96 128x128 256x256"
},
{
"src": "icon / hd_hi.svg",
"размеры": "72x72"
}
]
Объекты изображения могут содержать следующие значения:
| Член | Описание |
|---|---|
размеры | Строка, содержащая размеры изображения, разделенные пробелами. |
SRC | Путь к файлу изображения. Если src — относительный URL,
базовый URL-адрес будет URL-адресом манифеста. |
тип | Подсказка относительно медиа-типа изображения. Цель этого члена — чтобы позволить пользовательскому агенту быстро игнорировать изображения с типами мультимедиа, которые он делает не поддерживается. |
назначение | Определяет цель изображения, например, если изображение предназначено служить некоторой специальной цели в контексте ОС хоста (т.е.е., для лучшая интеграция).
|
Таблицы BCD загружаются только в браузере
| Любительские газеты Американского антикварного общества | |||
| Американская фантастика, 1774-1920 | |||
| Американские исторические периодические издания Американского антикварного общества | |||
| Архивы несвязанные | |||
| Архив сексуальности и пола | |||
| Интернет-коллекции Ассошиэйтед Пресс | |||
| История и культура Бразилии и Португалии | |||
| Газеты Британской библиотеки | |||
| Британские литературные рукописи в Интернете | |||
| Business Insights: Essentials | |||
| Бизнес-аналитика: весь мир | |||
| Кэмеронский оздоровительный лагерь | |||
| Коллекция Кэмерона | |||
| Онлайн-архив Chatham House | |||
| ChiltonLibrary.com | |||
| Китай и современный мир | |||
| Преступление, наказание и народная культура, 1790-1920 годы | |||
| Исторический архив Daily Mail | |||
| Рассекреченные документы Интернет: Британская разведка двадцатого века | |||
| Цифровая научная лаборатория | |||
| Ранние арабские печатные книги из Британской библиотеки | |||
| Онлайн-коллекции восемнадцатого века | |||
| Исторический архив Financial Times | |||
| Gale Academic OneFile | |||
| Gale Academic OneFile Select | |||
| Gale Analytics | |||
| Гейл Книги и авторы | |||
| Gale Business: DemographicsNow | |||
| Gale Business: предпринимательство | |||
| Gale Business: построитель планов | |||
| Примеры из практики Гейла | |||
| Коллекция Гейл-колледжа | |||
| Штормовые курсы | |||
| Справочная библиотека Gale | |||
| Gale General OneFile | |||
| Гейл Здоровье и благополучие | |||
| Гейл в контексте: биография | |||
| Ураган в контексте: Канада | |||
| Гейл в контексте: колледж | |||
| Гейл в контексте: элементарный | |||
| Гейл в контексте: исследования окружающей среды | |||
| Gale In Context: для преподавателей | |||
| Гейл в контексте: глобальные проблемы | |||
| Гейл в контексте: средняя школа | |||
| Гейл в контексте: средняя школа | |||
| Буря в контексте: противоположные точки зрения | |||
| Гейл в контексте: наука | |||
| Гейл в контексте: У.С. История | |||
| Буря в контексте: всемирная история | |||
| Gale Interactive: Chemistry | |||
| Gale Interactive: Анатомия человека | |||
| Gale Interactive: Science | |||
| Gale LegalForms | |||
| Литературный указатель Гейла | |||
| Литература Гейла | |||
| Гейл Литературная критика | |||
| Литературный ресурсный центр Гейла | |||
| Литература Гейла: указатель рецензий на книги | |||
| Гейл Литература: современные авторы | |||
| Литература Гейла: Литературный биографический словарь | |||
| Gale Литература: LitFinder | |||
| Gale Literature: Scribner Writer Series | |||
| Штормовая литература: кое-что об авторе | |||
| Литература Гейла: серия авторов Туэйна | |||
| Gale NewsVault | |||
| Gale One Файл: Сельское хозяйство | |||
| Gale One Файл: Business | |||
| Gale One Файл: CPI.Q | |||
| Gale OneFile: Связь и СМИ | |||
| Gale One Файл: Компьютерные науки | |||
| Gale OneFile: Contemporary Women’s Issues | |||
| Gale OneFile: Уголовное правосудие | |||
| Gale One Файл: Кулинарное искусство | |||
| Gale OneFile: исследования разнообразия | |||
| Gale OneFile: Economics and Theory | |||
| Gale OneFile: Полный справочник учителя | |||
| Gale OneFile: Entrepreneurship | |||
| Gale OneFile: экологические исследования и политика | |||
| Gale One Файл: Fine Arts | |||
| Gale One Файл: Садоводство и садоводство | |||
| Gale OneFile: гендерные исследования | |||
| Gale One Файл: Здоровье и медицина | |||
| Gale OneFile: High School Edition | |||
| Gale OneFile: Товары для дома | |||
| Gale OneFile: Гостиничный бизнес и туризм | |||
| Gale OneFile: Информационные науки | |||
| Gale One Файл: Informe Académico | |||
| Gale OneFile: Страхование и ответственность | |||
| Gale OneFile: лидерство и управление | |||
| Gale One Файл: LegalTrac | |||
| Gale One Файл: Военные и разведка | |||
| Gale One Файл: Новости | |||
| Gale OneFile: сестринское дело и смежное здравоохранение | |||
| Gale OneFile: Физическая терапия и спортивная медицина | |||
| Gale One Файл: Исследования поп-культуры | |||
| Gale OneFile: Popular Magazines | |||
| Gale One Файл: Психология | |||
| Gale One Файл: религия и философия | |||
| Gale One Файл: Science | |||
| Gale One Файл: U.С. История | |||
| Gale OneFile: Призвания и карьера | |||
| Gale OneFile: War and Terrorism | |||
| Gale One Файл: Всемирная история | |||
| Gale Power Search | |||
| Гейл представляет: Средняя школа Excel для взрослых | |||
| Gale представляет: Imago | |||
| Гейл представляет: подготовка Петерсона к карьере | |||
| Гейл представляет: тест Петерсона | |||
| Гейл представляет: тест Петерсона и подготовка к карьере | |||
| Gale представляет: Udemy | |||
| Первичные источники штормового ветра | |||
| Gale Reference Complete | |||
| Gale электронные книги | |||
| Gale eBooks: Professional Learning | |||
| Лихорадочная литература | |||
| Коренные народы Северной Америки | |||
| Исторический архив Интернэшнл Геральд Трибьюн, 1887-2013 гг. | |||
| Исторический архив журнала Liberty Magazine, 1924-1950 гг. | |||
| Литературная критика в Интернете (международная) | |||
| Зеркало исторического архива, 1903-2000 гг. | |||
| Академия мисс Хамблби | |||
| National Geographic Kids | |||
| Национальная географическая виртуальная библиотека | |||
| Интернет-коллекции девятнадцатого века | |||
| Девятнадцатый век U.С. Газеты | |||
| Периодические издания Великобритании девятнадцатого века | |||
| Фотоархив, 1938–1957 | |||
| Политический экстремизм и радикализм | |||
| Архивы общественного здравоохранения: Общественное здравоохранение в современной Америке, 1890-1970 гг. | |||
| Исторический архив пунша, 1841-1992 гг. | |||
| Беженцы, помощь и переселение: вынужденная миграция и Вторая мировая война | |||
| Религии Америки | |||
| Сабин Американа: История Америки, 1500-1926 гг. | |||
| Коллекция газет Бёрни семнадцатого и восемнадцатого веков | |||
| Коллекция газет Николса семнадцатого и восемнадцатого веков | |||
| Рабство и противодействие рабству: транснациональный архив | |||
| Интернет-коллекции Смитсоновского института | |||
| Смитсоновский институт первичных источников в СШАС. История | |||
| Государственные документы в Интернете | |||
| Исторический архив Economist | |||
| Иллюстрированный исторический архив лондонских новостей, 1842-2003 гг. | |||
| Независимый исторический архив | |||
| Слушатель Исторический архив, 1929-1991 годы | |||
| Создание современного права: документы Американского союза гражданских свобод | |||
| Становление современного права: иностранные первоисточники, 1600–1970 | |||
| Создание современного права: иностранное, сравнительное и международное право, 1600–1926 | |||
| Создание современного права: важнейшие документы и отчеты U.S. Апелляционные суды | |||
| Создание современного права: юридические трактаты, 1800–1926 гг. | |||
| Создание современного права: первоисточники | |||
| Создание современного права: судебные процессы, 1600–1926 гг. | |||
| Создание современного права: У.S. Протоколы и отчеты Верховного суда, 1832–1978 гг. | |||
| Создание современного мира | |||
| Собрание Шекспира | |||
| Исторический архив «Санди Таймс» | |||
| Телеграф исторический архив | |||
| Цифровой архив Times | |||
| The Times Literary Supplement Historical Archive | |||
| Пресс Торндайк | |||
| U.С. Рассекреченные документы на сайте | |||
| Архив женских исследований | |||
| Ученый мира: Латинская Америка и Карибский бассейн |
Как сделать ваши веб-значки доступными для пользователей с ограниченными возможностями
Значки широко используются в веб-дизайне.Они могут привлечь внимание к важным частям веб-страницы, действовать как стенография там, где текст не подходит, укрепить бренд и сообщить посетителям о языковых барьерах.
Но чтобы быть действительно инклюзивным, ваш веб-сайт должен использовать доступных значка.
Что такое доступные значки?
Доступные значки — это значки, которые могут быть понятны всем посетителям веб-сайта, независимо от физических или физических недостатков.
Чтобы значки были доступны, они должны быть видны.Если они сначала требуют, чтобы взаимодействия были замечены, их можно упустить.
Вот пример из Google Maps.
Используя меню ниже, посетитель может искать рестораны, отели, бары и кафе в своем районе, щелкнув значок. При нажатии на значок ресторана отображается список местных ресторанов, отмеченных на карте значком ножа и вилки.
Источник
Что может быть менее очевидным для посетителей, так это дополнительные критерии поиска, скрытые за значком «Подробнее».Только щелкнув значок «Еще», вы сможете искать банки, заправочные станции, парковки, продуктовые магазины, почтовые отделения и больницы.
Источник
Причина, по которой это важно указать, заключается в том, что универсально понятные значки встречаются редко. Увеличительное стекло, что означает «поиск», — одно из немногих, которые действительно широко известны. Для большинства значков необходимо сопровождать изображение текстовой меткой, чтобы избежать двусмысленности.
Например, пользователи могут не заметить даже вездесущий значок гамбургера в меню мобильных устройств.Фактически, A / B-тест показал лучшее взаимодействие и конверсию, когда к значку было добавлено слово «Меню».
Вы также должны учитывать цвет для доступности значков. Если цветовой контраст значка слишком низкий по сравнению с его фоном, некоторые пользователи с потерей зрения могут не увидеть или использовать его.
Например, большинство из нас узнают ссылки на бренды в социальных сетях только по их значкам:
Источник
Но слепому, который полагается на программу чтения с экрана для понимания контента, ему понадобится метка, написанная в коде, чтобы понять, что такое значок для Twitter.
Кроме того, посетители не должны зачитывать какие-либо декоративные значки, потому что они не добавляют им понимания. Например, четыре значка используются для иллюстрации предметов в следующем списке Airbnb, но сообщать слепому человеку о том, что есть значок дома или значок ключа, излишне — все, что им нужно знать, содержится в сопроводительном тексте:
Источник
Размер значка также важен, особенно для ссылок на значки. Рекомендуется запомнить размер 44 x 44 пикселя, потому что некоторым людям будет сложно нажимать на значок меньшего размера на телефоне.
Наконец, интерактивные значки должны быть доступны с клавиатуры и сенсорным экраном, а также должны быть доступны для щелчка мышью.
Готовы добавить на свой сайт иконки со специальными возможностями? Самый простой способ начать — скачать готовые иконки.
Готовые наборы иконок
Если вы не уверены в дизайне или ограничены во времени, вы можете загрузить заранее нарисованные значки по отдельности или в виде наборов значков. (Вот 15 бесплатных наборов иконок для начала.)
Убедитесь, что вы проверили лицензию для всех загружаемых значков.Это особенно важно, если вы планируете использовать их в коммерческих целях. Для некоторых значков есть требования к авторству, которым вы должны следовать.
Один из самых известных наборов иконок — Font Awesome, который содержит тысячи иконок. Давайте посмотрим на это поближе.
Доступные значки с использованием Font Awesome
Font Awesome — это набор иконок с открытым исходным кодом, популярный среди веб-дизайнеров. Хотя бесплатные значки Font Awesome можно использовать в коммерческих целях, некоторые значки представляют бренды, которые могут быть зарегистрированы как товарные знаки, поэтому убедитесь, что у вас есть право на их использование.
Мощный поискFont Awesome упрощает поиск нужного значка для вашего проекта. Вы можете фильтровать свой поиск по бесплатному или профессиональному, стилю значка, типу значка и т. Д.
Источник
Значки Font Awesome можно использовать двумя способами. Во-первых, есть иконочные шрифты, в которых вместо букв и цифр обычных шрифтов используются символы. Font Awesome также предоставляет значки SVG, которые лучше всего подходят для обеспечения доступности, потому что проще добавить код со специальными возможностями, необходимый для чтения с экрана, в SVG, а не в шрифты значков.
Некоторыми преимуществами использования Font Awesome являются широкий спектр доступных значков, многие из которых имеют варианты. Вы можете изменять размер значков без потери резкости, придавать им любой цвет, а также вращать, анимировать или переворачивать их.
Если вы не можете найти нужные значки в Font Awesome или где-либо еще, создание собственных может быть лучшим решением — давайте посмотрим, что влечет за собой этот процесс дальше.
Как сделать значки доступными
Если у вас есть художественный талант, вы можете создавать свои собственные доступные значки с помощью программы графического дизайна.
Вот несколько советов, которые следует учитывать при разработке значков со специальными возможностями:
- Проверьте размер значка в программе и при необходимости отрегулируйте его перед экспортом. (Размеры в мм могут подходить для полиграфического дизайна, но могут сделать ваши значки слишком большими.)
- Измерения в пикселях больше подходят для веб-дизайна. Нередко иконки имеют квадратные размеры. (Стандартные размеры в пикселях: 16×16, 32×32, 64×64, 128×128, 256×256 или 512×512.)
- Убедитесь, что размер документа соответствует размеру значка.
- Обычно при экспорте значков можно выбрать один из нескольких форматов файлов. Для использования в Интернете наиболее распространенными форматами файлов являются PNG или SVG. Поскольку сделать значки PNG проще, давайте посмотрим на них.
- Если вы планируете добавить значок к фону, убедитесь, что он будет достаточно контрастным.
Доступные значки в формате PNG
Созданы ли вы или скачали значки в формате PNG, их можно использовать двумя разными способами.
Во-первых, есть семантический значок — значки, которые имеют значение.Если значение вашего значка неочевидно, рекомендуется добавить видимый текст рядом со значком, чтобы он был понятен всем.
Источник
Если ваш значок связан, используйте замещающий текст, который указывает место назначения ссылки.
Например, значок электронной почты может иметь следующий замещающий текст:
Источник
Чтобы сделать значение значка понятным для всех, вы можете добавить видимый текст, например «Напишите нам.Это дает дополнительное преимущество, так как область обращения по ссылке становится больше, поэтому ее легче нажимать или касаться.
Если вы используете видимый текст, вам не нужно добавлять замещающий текст к значку, потому что текст ссылки уже описывает его. Вместо этого значок выполняет декоративную функцию, поэтому должен иметь замещающий текст нулевого изображения:
Источник
Начните делать ваши веб-иконки доступными
Доступные значки жизненно важны, чтобы помочь посетителям с ограниченными возможностями понять ваш веб-сайт.
