Иконка создать: Создание – Бесплатные иконки: образование

Как сделать иконку для приложения iOS и Android

В первом квартале 2021 года в Google Play было доступно около 3.5 миллиона приложений, а в App Store — ещё 2.2 миллиона. У пользователей есть масса приложений и игр, а конкуренция за них у разработчиков как никогда высока.

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

Почему иконка приложения важна

Что человеческий мозг обрабатывает быстрее: изображения или текст? Правильный ответ — изображения. Визуальные эффекты обрабатываются значительно быстрее, чем текст.

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

Хотя иконка может показаться незначительной частью вашего мобильного продукта, подумайте над следующим:

1. Иконка приложения непосредственно влияет на количество загрузок. Поскольку 70% пользователей ищут приложения в магазинах, иконка должна быть запоминающейся и привлекающей внимание. Это первое, что видят пользователи, поэтому разработчики должны работать над созданием положительного первого впечатления. Кроме того, уникальный значок будет выделяться на главном экране среди других, привлекая внимание к приложению и побуждая пользователей проводить в нем больше времени.
2. Иконка — это мост между пользователем и приложением. Во многих случаях о книге судят по обложке. В нашем случае приложения оцениваются по их значкам. Красивый значок может служить хорошей обёрткой для вашего приложения и вызывать к нему повышенный интерес (правильная иконка может повысить количество установок до 40%). Хотя, конечно, главное значение имеет функционал вашего продукта, пользователь может никогда до него не добраться, если приложение оттолкнёт его на  эстетическом или эмоциональном уровне. И наоборот, красивая иконка может установить эстетическую и эмоциональную связь, что будет способствовать виральности.

Иконка — это логотип?

Нет, в общепринятом смысле иконка вашего приложения  — это совсем не логотип. Хотя иконки и обладают некоторыми «брендинговыми» качествами логотипов, для них существует множество своих собственных ограничений и смыслов. Вы должны понимать различия между этими понятиями. Логотип —  это масштабируемое изображение, элемент брендинга компании, который используется на бланках и рекламных щитах. Иконка  — визуальное представление вашего продукта,  Она должна не просто красиво выглядеть и выделяться везде, где используется, но ещё и передавать основную суть вашего приложения.

Как создать хорошую иконку для мобильного приложения

Шаг 1. Концепция

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

1. Сосредоточьтесь на своей аудитории. Чтобы иконка  работала как маркетинговый инструмент, увеличивающий количество загрузок, он должен быть привлекательным для вашей целевой аудитории. Это должно отражаться в цветах, шаблоне и общем дизайне.
2. Будьте аутентичными. Вы вряд ли сможете усилить свой бренд и выделиться, если ваш значок будет похож на значок вашего конкурента. Более того, плохая иконка, не соответствующая вашему бренду, может запутать пользователей и оттолкнуть клиентов.
3. Опишите ваш продукт, используя визуальный язык. Иконка  должна рассказывать про ваше приложение. Создайте список описательных ключевых слов и проведите мозговой штурм с командой о том, как представить эти ключевые слова в виде символов или рисунков. Они и  могут стать основой для дизайна лучшей иконки.

Шаг 2. Рекомендации платформ по созданию иконок приложений

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

И iOS, и Android разработали определённый набор правил относительно шаблонов, стиля, макетов и т.д. Вы можете найти рекомендации по дизайну Android здесь, а iOS — тут. Ниже мы составили сводку основных отличий этих магазинов:

	Google Play Store (Android)	App Store (iOS)
Разрешение	512px × 512px	iPhone: 180px × 180px (60pt × 60pt @3x), 120px × 120px (60pt × 60pt @2x) iPad Pro: 167px × 167px (83,5pt × 83,5pt @2x) iPad, iPad mini: 152px × 152px (76pt × 76pt @2x) App Store: 1024px × 1024px (1024pt × 1024pt @1x)
Формат	32-битный PNG	PNG
Цвета	sRGB	sRGB или P3
Форма	Квадрат — Google Play автоматически скруглит углы (20% от размера иконки) и добавит тени	Квадрат — без скругления или теней

Существуют и не технические отличия — например, в Google Play не рекомендуют использовать бейджи, а в App Store оружие, так что хорошо изучите правила магазинов, в которых вы собираетесь публиковать приложение или игру.

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

Шаг 3. Дизайн и размер иконки

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

Вот некоторые советы, которые важно учесть уже на стадии разработки самого изображения:

1. Помните о масштабируемости. Иконка представляет приложение практически везде (в магазине, на домашнем экране, в диспетчере задач, в уведомлениях). Следовательно, её размер будет отличаться, и вам нужно убедиться, что ваш значок будет хорошо смотреться в любом месте.

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

3. Сведите детали к минимуму. Значок должен быть символическим. Лучший способ достичь желаемого результата — свести к минимуму количество деталей, используемых в дизайне. В конце концов, простота — это ключ к успеху. Простой дизайн передаёт чёткое сообщение, а также вписывается в текущую тенденцию минимализма в дизайне. Кроме того, простой значок помогает уменьшить путаницу среди ваших пользователей. Чем проще дизайн, тем легче его понять. Можно выбрать один символический элемент и сделать его центральным в окончательном дизайне иконки.

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

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

6. Предпочитайте символы тексту. Вам не нужен текст, чтобы сделать значок приложения понятным или рассказать о своём продукте. Фактически, вы можете отказаться от текста и говорить с помощью символов и изображений, которые олицетворяют идентичность вашего бренда. Однако, если вы всё же хотите использовать текст, сведите его к минимуму. Вы можете вставить название приложения, если оно короткое, как, например, BBC. В любом другом случае лучше ограничить текст одной буквой. Например, в Skype используется буква «S», а в Facebook — буква «F». Добавление слишком большого количества текста ухудшает читаемость иконки, и она точно станет нечитаемой при малых размерах.

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

Шаг 4. Тестирование

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

В ходе тестирования необходимо создать несколько вариантов дизайна и протестировать их. Андроид-разработчики могут использовать Google Experiments в Google Play, которые позволяют им тестировать различные элементы страницы приложения, включая иконку. Разработчики iOS могут использовать для A/B-тестирования Facebook или соответствующие сервисы.

Помните, что в силу различий аудитории, лучше всего работающие иконки в Google Play могут быть менее эффективными в App Store, и наоборот. Как мы указали выше, не обязательно создавать разные дизайны для iOS и Android. Но лучше протестировать разные варианты в соответствующих магазинах приложений, чтобы понимать, какие работают лучше.

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

Создание иконки — это начало успеха

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

Бесплатный конструктор для создания иконок от AppBooster

Перейти на сайт Appbooster и начать продвигаться в топ

Создание значка приложения для Windows — Windows apps

• Статья
• 09/24/2022
• Чтение занимает 3 мин

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

Размеры значков (WPF, UWP, WinUI)

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

Размеры значков (Win32)

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

Масштабирование значков

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

коэффициент масштабирования Windows 11	100 %	125%	150%	200 %	250%	300%	400 %
Контекстное меню, строка заголовка, панель системной области	16 пикселей	20 пикселей	24 пикселей	32 пикселей	40px	48 пикселей	64 пикселей
Панель задач, результаты поиска, запуск списка всех приложений	24 пикселей	30 пикселей	36 пикселей	48 пикселей	60 пикселей	72 пикселей	96 пикселей
Начальные закрепления	32 пикселей	40px	48 пикселей	64 пикселей	80 пикселей	96 пикселей	256 пикселей

Примечание

Приложения должны иметь не менее: 16×16, 24×24, 32×32, 48×48 и 256×256. Это охватывает наиболее распространенные размеры значков и, предоставляя значок размером 256 пикселей, гарантирует, что Windows только когда-либо масштабировать значок вниз, никогда не вверх.

Прозрачные фоны

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

Полный список значков и вариантов

Windows использует различные ресурсы значков в разных контекстах пользовательского интерфейса. Использование немного изменилось между Windows 10 & Windows 11.

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

Значок приложения

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

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

Целевой размер списка приложений (обязательно)

• AppList.targetsize-16.png
• AppList.targetsize-20.png
• AppList.targetsize-24.png
• AppList.targetsize-30.png
• AppList.targetsize-32.png
• AppList.targetsize-36.png
• AppList.targetsize-40.png
• AppList.targetsize-48.png
• AppList.targetsize-60.png
• AppList.targetsize-64.png
• AppList.targetsize-72.png
• AppList.targetsize-80.png
• AppList.targetsize-96.png
• AppList. targetsize-256.png

Темная тема (обязательно)

• AppList.targetsize-16_altform-unplated.png
• AppList.targetsize-20_altform-unplated.png
• AppList.targetsize-24_altform-unplated.png
• AppList.targetsize-30_altform-unplated.png
• AppList.targetsize-32_altform-unplated.png
• AppList.targetsize-36_altform-unplated.png
• AppList.targetsize-40_altform-unplated.png
• AppList.targetsize-48_altform-unplated.png
• AppList.targetsize-60_altform-unplated.png
• AppList.targetsize-64_altform-unplated.png
• AppList.targetsize-72_altform-unplated.png
• AppList.targetsize-80_altform-unplated.png
• AppList.targetsize-96_altform-unplated.png
• AppList.targetsize-256_altform-unplated.png

Светлая тема (обязательно)

• AppList.targetsize-16_altform-lightunplated.png
• AppList.targetsize-20_altform-lightunplated.png
• AppList.targetsize-24_altform-lightunplated. png
• AppList.targetsize-30_altform-lightunplated.png
• AppList.targetsize-32_altform-lightunplated.png
• AppList.targetsize-36_altform-lightunplated.png
• AppList.targetsize-40_altform-lightunplated.png
• AppList.targetsize-48_altform-lightunplated.png
• AppList.targetsize-60_altform-lightunplated.png
• AppList.targetsize-64_altform-lightunplated.png
• AppList.targetsize-72_altform-lightunplated.png
• AppList.targetsize-80_altform-lightunplated.png
• AppList.targetsize-96_altform-lightunplated.png
• AppList.targetsize-256_altform-lightunplated.png

Масштабирование списка приложений (Windows 10) (необязательно)

• AppList.scale-100.png
• AppList.scale-125.png
• AppList.scale-150.png
• AppList.scale-200.png
• AppList.scale-400.png

Светлая тема (Windows 10) (необязательно)

• AppList.scale-100_altform-colorful_theme-light. png
• AppList.scale-125_altform-colorful_theme-light.png
• AppList.scale-150_altform-colorful_theme-light.png
• AppList.scale-200_altform-colorful_theme-light.png
• AppList.scale-400_altform-colorful_theme-light.png

Примечание

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

Плитки

Windows 10 поддерживает четыре размера плитки: малый, средний, широкий и большой.

Тема по умолчанию и темная (частично обязательная)

• SmallTile.scale-100.png
• SmallTile.scale-125.png
• SmallTile.scale-150.png
• SmallTile.scale-200.png
• SmallTile.scale-400.png

• MedTile.scale-100.png
• MedTile.scale-125.png
• MedTile.scale-150.png
• MedTile.scale-200.png
• MedTile.scale-400.png

• WideTile. scale-100.png
• WideTile.scale-125.png
• WideTile.scale-150.png
• WideTile.scale-200.png
• WideTile.scale-400.png

• LargeTile.scale-100.png
• LargeTile.scale-125.png
• LargeTile.scale-150.png
• LargeTile.scale-200.png
• LargeTile.scale-400.png

Светлая тема (необязательно)

• SmallTile.scale-100_altform-colorful_theme-light.png
• SmallTile.scale-125_altform-colorful_theme-light.png
• SmallTile.scale-150_altform-colorful_theme-light.png
• SmallTile.scale-200_altform-colorful_theme-light.png
• SmallTile.scale-400_altform-colorful_theme-light.png

• MedTile.scale-100_altform-colorful_theme-light.png
• MedTile.scale-125_altform-colorful_theme-light.png
• MedTile.scale-150_altform-colorful_theme-light.png
• MedTile.scale-200_altform-colorful_theme-light.png
• MedTile.scale-400_altform-colorful_theme-light.png

• WideTile. scale-100_altform-colorful_theme-light.png
• WideTile.scale-125_altform-colorful_theme-light.png
• WideTile.scale-150_altform-colorful_theme-light.png
• WideTile.scale-200_altform-colorful_theme-light.png
• WideTile.scale-400_altform-colorful_theme-light.png

• LargeTile.scale-100_altform-colorful_theme-light.png
• LargeTile.scale-125_altform-colorful_theme-light.png
• LargeTile.scale-150_altform-colorful_theme-light.png
• LargeTile.scale-200_altform-colorful_theme-light.png 8 LargeTile.scale-400_altform-colorful_theme-light.png

Примечание

Windows 11 не использует ресурсы плиток, но в настоящее время для публикации в Microsoft Store требуется как минимум средний ресурс плитки с 100 %. Если ваше приложение Windows 10 & 11 совместимо, рекомендуется включить как можно больше ресурсов плитки.

Экран-заставка

Экраны-заставки также могут быть светлыми и темными темами, такими как ресурсы значков приложения.

Default

• SplashScreen.scale-100.png
• SplashScreen.scale-125.png
• SplashScreen.scale-150.png
• SplashScreen.scale-200.png
• SplashScreen.scale-400.png

Темная тема (необязательно)

• SplashScreen.scale-100_altform-colorful_theme-dark.png
• SplashScreen.scale-125_altform-colorful_theme-dark.png
• SplashScreen.scale-150_altform-colorful_theme-dark.png
• SplashScreen.scale-200_altform-colorful_theme-dark.png
• SplashScreen.scale-400_altform-colorful_theme-dark.png

Светлая тема (необязательно)

• SplashScreen.scale-100_altform-colorful_theme-light.png
• SplashScreen.scale-125_altform-colorful_theme-light.png
• SplashScreen.scale-150_altform-colorful_theme-light.png
• SplashScreen.scale-200_altform-colorful_theme-light.png
• SplashScreen.scale-400_altform-colorful_theme-light.png

Эмблема

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

Windows 10 (необязательно)

• BadgeLogo.scale-100.png
• BadgeLogo.scale-125.png
• BadgeLogo.scale-150.png
• BadgeLogo.scale-200.png
• BadgeLogo.scale-400.png

Логотип пакета (логотип Microsoft Store)

Эти ресурсы необходимы для публикации в Microsoft Store.

Темная тема по умолчанию (требуется)

• StoreLogo.scale-100.png
• StoreLogo.scale-125.png
• StoreLogo.scale-150.png
• StoreLogo.scale-200.png
• StoreLogo.scale-400.png

Светлая тема (необязательно)

• StoreLogo.scale-100_altform-colorful_theme-light.png
• StoreLogo.scale-125_altform-colorful_theme-light.png
• StoreLogo.scale-150_altform-colorful_theme-light.png
• StoreLogo.scale-200_altform-colorful_theme-light.png
• StoreLogo.scale-400_altform-colorful_theme-light.png

Как создавать иконки в Figma?

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

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

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

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

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

• Маленькая иконка  — 12×12 пикселей, 16×16 пикселей, 24×24 пикселей, 32×32 пикселей, 48×48 пикселей

• Значок среднего размера  — 64×64 пикселей, 96×96 пикселей, 128×128 пикселей, 256×256 пикселей.

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

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

Формы KeyLine необходимы для поддержания согласованных визуальных пропорций всех значков.

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

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

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

Существуют различные типы значков —

Контурные значки Заполненные значки Двухцветные контурные значки Комбинация контурных и заполненных значков

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

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

• Поместите сетку значков и контурную линию внутри фрейма ( выберите инструмент «Рамка» F и вытяните область экрана ), в которой вы хотите создать значок. Отрегулируйте рамку в соответствии с размером макета сетки значков.

• Создайте базовый контур значка, используя существующую направляющую формы ключа. Измените или отрегулируйте форму, используя только область Live. Я использую ширину обводки 1,5 пикселя для значка контура. Вы можете использовать другую ширину штриха для значка. Я использовал ширину обводки 1,5, потому что ширина обводки в 1 пиксель была бы слишком тонкой, и на значке появилось бы много пустого пространства. Для значков, где требуется некоторый уровень детализации, ширина штриха в 2 пикселя выглядит слишком толстой и перегруженной.

Разная ширина обводки

• Создайте желаемую форму. Отрегулируйте размер в соответствии с вашими требованиями.

• После создания значка выберите рамку значка и дважды щелкните/щелкните левой кнопкой мыши/дважды коснитесь рамки. На экране появится выпадающее меню. В этом меню выберите Outline Stroke, откройте тот же раскрывающийся список и выберите Flatten. Эти шаги обрисуют в общих чертах все ваши различные штрихи и сгладят их в одну единую форму.

• Теперь отрегулируйте значок внутри рамки и при необходимости измените его размер.

• Чтобы значок можно было масштабировать, измените ограничения на Масштабировать по вертикали и по горизонтали.

• Создайте компонент своей иконки и измените цвет в соответствии с вашими требованиями.

• Вуаля! ваша иконка готова 😄

Вот туториал по созданию значка шестеренки, который, как правило, очень сложен в дизайне, и мне потребовалось несколько часов практики, чтобы сделать это примерно за 3 минуты в конце 🙂

Как создать значок с помощью Rich Content Edi…

Если это разрешено вашим учреждением, вы можете использовать предварительно определенные изображения Instructure или загружать свои собственные изображения для создания значков в Rich Content Editor. Вы можете получить доступ к редактору расширенного содержимого из объявлений, заданий, обсуждений, страниц, классических викторин и программы.

Примечание : Если в вашем курсе отсутствует Icon Maker, значит, ваше учреждение не включило его.

Открыть редактор расширенного содержимого

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

Открытие Icon Maker с панели инструментов

Чтобы добавить значок с панели инструментов, щелкните значок Icon Maker [1].

Чтобы создать новый значок, щелкните ссылку Create Icon Maker Icon [2].

Чтобы открыть сохраненный значок, щелкните ссылку Saved Icon Maker Icons [3].

Добавить сведения о значке

В поле Имя [1] введите имя для своего значка.

Чтобы добавить описательный текст к значку, введите имя в поле Альтернативный текст [2].

Чтобы отключить Альтернативный текст для значка, установите флажок Декоративный значок [3].

Значок редактирования

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

Если вы хотите изменить размер значка, используйте раскрывающееся меню Размер значка [2].

Чтобы изменить цвет значка, щелкните раскрывающееся меню Цвет значка [3].

Чтобы добавить контур значку, щелкните раскрывающееся меню Icon Outline [4].

Если вы хотите изменить размер контура, используйте раскрывающееся меню Icon Outline Size [5].

Редактировать текст

Введите текст, который вы хотите включить в значок, в поле Текст поле [1].

Если вы хотите изменить размер текста, используйте раскрывающееся меню Размер текста [2].

Чтобы изменить цвет текста, щелкните раскрывающееся меню Text Color [3].

Чтобы изменить цвет фона текста, щелкните раскрывающееся меню Text Background Color [4].

Если вы хотите изменить положение вашего текста, используйте Text Position выпадающее меню [5].

 

Добавить изображение

Чтобы добавить изображение к значку, щелкните раскрывающееся меню Добавить изображение  [1].

Вы можете загрузить свое собственное изображение [2], добавить предопределенное в Instructure одноцветное изображение [3], добавить предопределенное в Instructure многоцветное изображение [4] или добавить изображение из файлов вашего курса [5].

Добавление предопределенных изображений в структуру

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

Загрузить изображение

Чтобы добавить пользовательское изображение к значку, перетащите или найдите файл на своем компьютере [1], а затем нажмите кнопку Submit [2].