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

7 принципов дизайна иконок. На что нужно обращать внимание при создании иконок

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

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

Понятность

Основная цель иконки – быстро донести до пользователя идею.

Иконки на приборной панели Toyota Prius Prime (Источник: 2020 Manual)

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

Примерно так они выстраиваются для меня по уровню понятности:

Когда иконка использует незнакомую метафору, ее трудно понять.

«Сигнал напоминания о ремне безопасности» (3-й слева) довольно буквальный, и мы можем его быстро понять. «Сигнал электроусилителя рулевого управления» (крайняя справа) намного сложнее.

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

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

Знакомые метафоры из семейства иконок Phosphor Carbon

Стрелка является мощным символом, используемым для навигации:

Знаки Нью-Йоркского метрополитена (Источник: Capture of an original copy of NYC Transit Authority Graphic Standards Manual)

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

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

В этом случае добавьте к иконке текстовую метку или найдите альтернативу.

Читабельность

Если у вас есть понятный символ, убедитесь, что он читабелен.

Иконки в мобильном приложении Amtrak

Сложно разглядеть иконку Station в приложении Amtrak (первая строка), потому что ее детали слишком мелкие.

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

Иконки в мобильном приложении Transit

Небольшая корректировка значительно улучшит иконки:

Улучшенная иконка

При работе с несколькими фигурами оставляйте достаточно места между ними. Обилие тонких штрихов делает иконку перегруженной и трудной для чтения.

Google Maps отлично справился с задачей – иконки удобочитаемы при очень маленьком размере:

Иконки Google Map

Выравнивание

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

Хотя в этой иконке “Play”, треугольник расположен в центре круга, нашим глазам он кажется смещенным. Широкая часть треугольника кажется «тяжелее», чем точка, и смещенной влево.

Точно так же, как художники-шрифтовики точно настраивают шрифты для создания оптической иллюзии баланса (обратите внимание на смещенные точки на «i» и «j» и на выступ буквы «O»)

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

Так лучше.

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

Краткость

Идея, выраженная в нескольких словах, кажется эффективной и элегантной.

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

Как сказал Роберт Хайнлайн:

Когда один преподаёт, двое учатся.

Прекрасно.

Material Design довольно хорошо иллюстрирует краткость в своем системном руководстве по иконкам. Вместо того чтобы говорить:

Чрезмерно сложная иконка корабля (Источник: Material)

Скажите проще:

Лаконичная иконка корабля (Источник: Material)

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

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

Telegram лаконичные и приятные:

Иконки Telegram

Иногда иконки интерфейса приобретают более иллюстративный стиль. Иконки Yelp – это восхитительные изображения популярных продуктов питания. Креветка в иконке тайской кухни изысканна:

Иконки Yelp от Scott Tusk

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

Иконки приложений Apple

Последовательность

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

До iOS 13 иконки Apple имели всевозможные штрихи, заливки и размеры:

Иконки Apple в меню быстрых действий до iOS 13

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

Apple недавно выпустила введение в SF Symbols, впечатляющее дополнение к шрифту San Francisco. SF Symbols охватывает графический стиль иконок в 9 весах и 3 масштабах (возможно, немного сложное, но дотошное руководство). Из-за этого иконки кажутся более гармоничными.

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

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

Подмножество семейства иконок Phosphor Carbon

Индивидуальность

Каждый набор иконок имеет вкус. Что делает его уникальным? Что он говорит о бренде? Какое настроение он создает?

Иконки Waze

Интерфейс Waze во многом зависит от иконок. Эти красочные, лаконичные иконки говорят: «Мы причудливы!»

Иконки Twitter легкие и четкие:

Иконки Twitter

Иконки Sketch утонченные и воздушные:

Иконки Sketch от Janik Baumgartner

Freemojis очень милые:

Freemojis от Streamline

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

Сверху вниз, слева направо: iJUK, PixBit, Crayon, Linebit

Простота использования

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

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

Организованный

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

Sketch-файл Nucleo, упорядоченный по типу

Хорошо задокументированный

Сформулируйте основные принципы семейства иконок:

Примеры принципов семейства иконок Phosphor:

• Понятность. В первую очередь ясно выражайте идеи. Сделайте иконку узнаваемой и читабельной. Никогда не жертвуйте ясностью значения иконки.
• Краткость. Используйте как можно меньше деталей. Стиль Phosphor направлен на упрощение. Будьте краткими и учитывайте каждый штрих, чтобы передать суть того, что представлено.
• Характер. Будьте причудливым. Экономно добавляйте уникальные детали, чтобы оживить иконки и не быть слишком строгим.

Перечислите технические правила:

Примеры технических правил семейства иконок Phosphor:

• Используйте холст 48x48px
• Используйте
  centered stroke 1.5px
• Используйте закругленные концы
• Используйте сплошные линии, за исключением случаев, когда ломаные сегменты полезны для понимания
• Используйте прямые сегменты, идеальные изгибы и приращение угла 15° там, где это возможно
• При необходимости отрегулируйте кривые, чтобы следовать принципам дизайна
• Используйте, по возможности, приращения целых, четных чисел; уменьшите до 1px и 0. 5px при необходимости
• Используйте следующие контуры фигур: 28x28px круг, 25x25px квадрат, 28x22px ландшафтная ориентация, 22x28px портретная ориентация
• Keep a 6px thick trim area

Проведите их итерацию и сделайте документацию общедоступной, если хотите:

• Иконки Material System
• Иконки интерфейса,иконки приложений и руководство по иконкам от IBM
• Иконки Shopify Polaris
• Иконография Atlassian

Проверенный

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

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

Тестовые листы, используемые в Phosphor

Специальные инструменты

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

Material делает иконки легко доступными с помощью собственной библиотеки иконок. Найдите нужную иконку и загрузите разные стили («темы»), цвета и размеры в выбранном вами формате файла:

Простая в использовании библиотека иконок Material

Набор иконок – это живое существо. Дайте ему любовь и инструменты, необходимые для успеха и роста.

Ресурсы

Библиотеки иконок

• Feather – великолепный набор из более 200 контурных иконок, которые хорошо масштабируются
• Material system icons – свыше тысячи утилитарных иконок для интерфейса в 5 стилях
• Nucleo – набор из примерно 30 тысяч иконок в 3 стилях: контурный, плоский / цветной и глиф
• Streamline – набор более 30 тысяч красиво нарисованных иконок в 3 весах

Агрегаторы иконок

• Noun Project – отличный способ поиска вдохновения в стилях и метафорах

Менеджеры иконок

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

---

Перевод статьи medium.com

Суперполезный гайд по созданию иконок для интерфейсов — Дизайн на vc.ru

Иконка, значок, символ, образ — каких только названий нет у этих атрибутов. Зачем они нужны, как их правильно использовать и что нужно знать, чтобы не запутать пользователя – всё это расскажем ниже.

33 816 просмотров

1. Используйте оптическую сетку

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

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

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

Будьте внимательны, сетка должна помогать, а не ограничивать. Если значок визуально лучше с некоторыми торчащими элементами, пусть так и будет.

2. Учтите пиксельную сетку

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

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

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

Задайте начальную и конечную точки диагоналей в соответствии с сеткой пикселей. Диагонали с углами 45 °, 30 ° и 60 ° выглядят более острыми, чем диагонали с неравномерными углами, такими как 13,7 ° или 81 °.

3. Сохраняйте определённый уровень детализации

Лучше начать набор значков с самого сложного значка. Он определит уровень детализации и поможет сделать иконки того же визуального веса.

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

4. Контролируйте минимальный размер зазора

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

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

5. Удалите повторяющиеся части

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

Если целевой пользователь уже понимает, с чем он или она работает, нет необходимости повторять это снова и снова. Например, без иконок «@» на конвертах люди всё равно знают, что речь идёт об электронной почте.

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

6. Выберите определённый стиль и следуйте ему

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

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

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

7. Используйте двухмерную систему калибровки

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

8. Следите, чтобы силуэты были чистыми и точными

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

Та же история с раздражающими размерами «8.999 px» или «100.001 px». Если фиксирующие фигуры расположены точно, края иконок выглядят острыми. И вы не рискуете получить чрезмерные якоря и промежутки при объединении фигур.

9. Очистка SVG от мусора

Многие редакторы интерфейсов, такие как Sketch, могут создавать SVG с ненужными элементами — чрезмерными группами, цветными слоями и обтравочными масками.

Смотрите, в Sketch всё выглядит хорошо.

Откройте этот SVG в другом редакторе (например, Adobe Illustrator). Вы заметите пустые слои, ненужные группы и иногда обрезающие маски. Всё это может вызвать проблемы, когда фронтенд-разработчики конвертируют значки в иконку или используют SVG на веб-странице.

Вы можете удалить этот мусор и пересохранить иконку.

Как видите, Sketch SVG (picture.svg) и отредактированный Illustrator SVG (picture_new.svg) имеют разные предварительные просмотры в вашем средстве просмотра файлов. Кстати, можно избавиться от мусора в значке в редакторе кода. Если вы знаете, как выглядит SVG-код, попробуйте удалить ненужные строки данных напрямую.

Конечно, все эти рекомендации исключительно субъективны. Но рекомендуем обратить внимание, где строгие геометрические иконы не выглядят лучшим образом.

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

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

Статья переведена и адаптирована на русский язык студией Netlab. Оригинал тут.

Как создать значок или другое изображение

• Статья
• 07.12.2021
• 10 минут на чтение

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

Значки и курсоры: ресурсы изображений для устройств отображения

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

При создании нового значка или курсора Редактор изображений сначала создает образ стандартного типа. Изображение изначально заливается экранным (прозрачным) цветом. Если изображение является курсором, горячая точка изначально является левым верхним углом с координатами 0,0 .

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

Цвет	Ширина (в пикселях)	Высота (в пикселях)
Монохромный	16	16
Монохромный	32	32
Монохромный	48	48
Монохромный	64	64
Монохромный	96	96
16	16	16
16	32	32
16	64	64
16	48	48
16	96	96
256	16	16
256	32	32
256	48	48
256	64	64
256	96	96

Создать образ устройства (значок или курсор)

При создании нового ресурса значка или курсора Редактор изображений сначала создает изображение в определенном стиле (32 × 32, 16 цветов для значков и 32 × 32, монохромный для курсоров). Затем вы можете добавлять изображения разных размеров и стилей к исходному значку или курсору и редактировать каждое дополнительное изображение по мере необходимости для разных устройств отображения. Вы также можете редактировать изображение, используя операцию вырезания и вставки из существующего типа изображения или из растрового изображения, созданного в графической программе.

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

Примечание

Если в вашем проекте еще нет файла .rc, см. раздел Создание нового файла сценария ресурсов.

Диалоговое окно New Image Type позволяет создать новый образ устройства указанного типа. Чтобы открыть диалоговое окно New Image , перейдите в меню Image 9.0016 > Новый тип изображения . Включены следующие свойства: Target Image Type и Custom .

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

16 x 16, 16 цветов
32 x 32, 16 цветов
48 x 48, 16 цветов
64 x 64, 16 цветов
96 x 96, 16 цветов

16 x 16, 256 цветов
32 x 32, 256 цветов
48 x 48, 256 цветов
64 x 64, 256 цветов
96 x 96, 256 цветов

16 x 16, монохромный
32 x 32, монохромный
48 x 48, монохромный
64 x 64, монохромный
96 x 96, монохромный

Примечание

Любые существующие изображения не будут отображаться в этом списке.

Свойство Custom открывает диалоговое окно Custom Image , в котором можно создать новое изображение с пользовательским размером и количеством цветов.

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

Собственность	Описание
Ширина	Предоставляет место для ввода ширины пользовательского изображения в пикселях (от 1 до 512, максимум 2048).
Высота	Предоставляет место для ввода высоты пользовательского изображения в пикселях (1–512, максимальное значение — 2048).
Цвета	Предоставляет место для выбора количества цветов для пользовательского изображения: 2, 16 или 256.

Используйте диалоговое окно Open Image для открытия образов устройств в проектах C++. В нем перечислены существующие образы устройств в текущем ресурсе (изображения, являющиеся частью текущего ресурса). Включено следующее имущество:

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

Чтобы создать новый значок или курсор

1. В представлении ресурсов щелкните правой кнопкой мыши файл .rc , затем выберите Вставить ресурс . Если у вас уже есть ресурс изображения в файле .rc , например курсор, вы можете щелкнуть правой кнопкой мыши папку Cursor и выбрать Insert Cursor .

2. В диалоговом окне «Вставить ресурс» выберите Значок или Курсор и выберите Новый . Для значков это действие создает ресурс значка с 16-цветным значком размером 32 × 32. Для курсоров создается монохромное (двухцветное) изображение размером 32 × 32.

   Если рядом с типом ресурса изображения в диалоговом окне Вставить ресурс отображается знак плюс ( + ), это означает, что доступны шаблоны панелей инструментов. Нажмите знак «плюс», чтобы развернуть список шаблонов, выберите шаблон и выберите New .

Добавление изображения для другого устройства отображения

1. Перейдите в меню Image > New Device Image или щелкните правой кнопкой мыши на панели Image Editor и выберите New Device Image .

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

Чтобы скопировать образ устройства

1. Перейдите в меню Изображение > Открыть изображение устройства и выберите изображение из списка текущих изображений. Например, выберите 16-цветную версию значка 32 × 32.

2. Скопируйте текущее отображаемое изображение значка ( Ctrl + C ).

3. Откройте другое изображение значка в другом окне редактора изображений . Например, откройте 16-цветную версию значка 16 × 16.

4. Вставьте изображение значка ( Ctrl + V ) из одного редактора изображений окно в другое. Если вы вставляете больший размер в меньший, вы можете использовать маркеры значков, чтобы изменить размер изображения.

Чтобы удалить образ устройства

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

Примечание

Когда вы нажимаете клавишу Del , изображения и цвета, которые вы нарисовали на значке, удаляются, но значок остается, и теперь вы можете изменить его дизайн. Если вы нажмете Del по ошибке, нажмите Ctrl + Z , чтобы отменить действие.

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

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

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

Примечание

Диалоговые окна и команды меню, которые вы видите, могут отличаться от описанных в Справка в зависимости от ваших активных настроек или редакции. Чтобы изменить настройки, перейдите в меню Инструменты > Настройки импорта и экспорта . Дополнительные сведения см. в разделе Персонализация интегрированной среды разработки Visual Studio.

Для создания прозрачных или инверсных областей

1. В окне Colors выберите селектор Screen-Color или Inverse-Color .

2. Примените трафаретный или инвертированный цвет к изображению с помощью инструмента рисования. Дополнительные сведения об инструментах рисования см. в разделе Использование инструмента рисования.

Чтобы изменить экран или инверсный цвет

1. Выберите либо селектор Screen-Color , либо селектор Inverse-Color .

2. Выберите цвет из палитры Colors в окне Colors .

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

   Совет

   Если дважды щелкнуть Screen-Color или Inverse-Color , появится диалоговое окно Выбор пользовательского цвета.

Используйте 256-цветную палитру

С помощью редактора изображений значки и курсоры могут иметь большой размер (64 × 64) с 256-цветной палитрой на выбор. После создания ресурса выбирается стиль изображения устройства.

Чтобы создать 256-цветный значок или курсор

1. В представлении ресурсов щелкните правой кнопкой мыши файл .rc , затем выберите Вставить ресурс . Если у вас уже есть существующий ресурс изображения в вашем .rc , такой как курсор, вы можете щелкнуть правой кнопкой мыши папку Cursor и выбрать Insert Cursor .

2. В диалоговом окне «Вставить ресурс» выберите Значок или Курсор и выберите Новый .

3. Перейдите в меню Изображение > Новое изображение устройства и выберите нужный стиль 256-цветного изображения.

Выбор цвета из 256-цветной палитры для больших значков

Для рисования выбором из 256-цветной палитры необходимо выбрать цвета из палитры Colors в окне Colors.

1. Выберите большой значок или курсор или создайте новый большой значок или курсор.

2. Выберите цвет из 256 цветов, отображаемых в палитре Colors в окне Colors .

   Выбранный цвет станет текущим цветом в палитре Colors в Цвета окно.

   Примечание

   Исходная палитра, используемая для 256-цветных изображений, соответствует палитре, возвращаемой CreateHalftonePalette Windows API. Все значки, предназначенные для оболочки Windows, должны использовать эту палитру, чтобы предотвратить мерцание во время реализации палитры.

Установка активной точки курсора

Горячая точка курсора — это точка, на которую Windows ссылается при отслеживании положения курсора. По умолчанию активная точка устанавливается в левый верхний угол курсора с координатами 9.0027 0,0 . Свойство Hotspot в окне свойств показывает координаты горячей точки.

1. На панели инструментов редактора изображений выберите инструмент Set Hotspot .

2. Выберите пиксель, который вы хотите назначить активной точкой курсора.

   Свойство Hotspot в окне Properties отображает новые координаты.

Для создания и сохранения растрового изображения в формате .gif или .jpeg

При создании растрового изображения изображение создается в растровом формате (.bmp). Однако вы можете сохранить изображение в формате GIF или JPEG или в других графических форматах.

Примечание

Этот процесс не применяется к значкам и курсорам.

1. Перейдите в меню Файл > Откройте , затем выберите Файл .

2. В диалоговом окне New File выберите папку Visual C++ , затем выберите Bitmap File (.bmp) в поле Templates и выберите Open .

   Растровое изображение открывается в редакторе изображений .

3. При необходимости внесите изменения в новое растровое изображение.

4. Когда растровое изображение все еще открыто в редакторе изображений , перейдите в меню Файл > Сохранить имя файла .bmp Как .

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

   Примечание

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

6. Выбрать Сохранить .

Преобразование изображения из одного формата в другой

Изображения в формате GIF или JPEG можно открывать в редакторе изображений и сохранять их в виде растровых изображений. Кроме того, вы можете открыть растровый файл и сохранить его в формате GIF или JPEG. Изображения, с которыми вы работаете, не обязательно должны быть частью проекта для редактирования в среде разработки (см. Автономное редактирование изображений).

1. Откройте изображение в редакторе изображений .

2. Перейдите в меню Файл > Сохранить имя файла Как .

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

4. Выбрать Сохранить .

Чтобы добавить новый ресурс изображения в неуправляемый проект C++

1. В представлении ресурсов щелкните правой кнопкой мыши файл .rc и выберите Вставить ресурс . Если у вас уже есть ресурс изображения в файле .rc , например курсор, вы можете просто Курсор и выберите Вставить курсор .

2. В диалоговом окне «Вставить ресурс» выберите тип ресурса изображения, который вы хотите создать (например, Bitmap ), затем выберите New .

   Если рядом с типом ресурса изображения в диалоговом окне Вставить ресурс отображается знак плюс ( + ), это означает, что доступны шаблоны панелей инструментов. Нажмите знак «плюс», чтобы развернуть список шаблонов, выберите шаблон и выберите Новый .

Чтобы добавить новый ресурс изображения в проект на языке программирования .NET

1. В обозревателе решений щелкните правой кнопкой мыши папку проекта (например, WindowsApplication1 ).

2. В контекстном меню выберите Добавить , затем выберите Добавить новый элемент .

3. На панели Категории разверните папку Локальные элементы проекта , затем выберите Ресурсы .

4. На панели Шаблоны выберите тип ресурса, который вы хотите добавить в свой проект.

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

Требования

Нет

См. также

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

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

Создать новый файл значка 

Сначала откройте Inkscape и создайте новый файл. Нажмите на меню файлов F и выберите « N ew», а затем «icon_32x32».

Затем откроется новый пустой файл, в данном примере с сеткой:

Сетка представляет собой блочную сетку 32×32, такого же размера, как и многие значки, которые вы найдете на своем компьютере. Линии в этой сетке не отображаются при экспорте конечного изображения в файл другого типа, например JPEG или GIF. Сетка предназначена только для того, чтобы помочь вам создать квадратную иконку со стандартными размерами 32×32 пикселя. Можно добавить или удалить сетку, используя ‘V просмотр > G рид’ меню.

Сохранить файл

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

Откроется диалоговое окно. Стиль вашего диалогового окна может отличаться от следующего:

 

Вы можете изменить имя файла на любое, чтобы облегчить его идентификацию (в приведенном выше примере это «drawing.svg»). Убедитесь, что при сохранении имя файла имеет в конце «.svg». Вы также можете щелкать папки на вашем компьютере, используя это диалоговое окно, пока не найдете папку, в которой вы хотите сохранить файл. Когда у вас есть правильное местоположение, нажмите «Сохранить».

Использование окна предварительного просмотра значков

Если вы собираетесь экспортировать изображение в растровую версию и использовать его по нескольким причинам, может быть важно знать, как оно будет отображаться в виде значка в процессе создания. Поэтому Inkscape имеет дополнительную функцию предварительного просмотра растровых изображений. Это окно позволит вам увидеть, как будет выглядеть ваша иконка в стандартных размерах 16×16, 24×24, 32×32, 48×48 и 128×128. Находится в Меню через: View > Ico n Preview…

Начать работу

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

Давайте начнем с создания фонового круга. Выберите инструмент «Круг» на панели инструментов слева от Inkscape:

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

У вас может быть темная линия вокруг внешней стороны круга. Если вы это сделаете, мы рассмотрим, как удалить это в ближайшее время. Сейчас мы изменим цвет круга на желаемый цвет. Я выберу цветовой код HTML «#ff7f00». Вы можете выбрать другой цвет. Чтобы изменить цвет круга, щелкните его правой кнопкой мыши и выберите «Заливка и обводка»:

Должно появиться следующее диалоговое окно:

Я знаю, что цветовой код HTML эквивалентен RGB. код + ‘ff’. Поэтому я добавлю «ff7f00ff» в поле RGBA внизу:

Если вы знаете код цвета HTML, добавьте его сюда. В противном случае вы можете использовать ползунки RGB для выбора цвета. Когда вы меняете значения, вы увидите, как одновременно меняется цвет круга. Если у вас была линия вокруг внешней стороны круга, когда вы его создавали, теперь вы можете удалить его, щелкнув вкладку «Stroke st y le» и установив поле «Ширина» (вверху вкладки) на 0. (ноль) пикселей. Когда вы довольны цветом круга, просто переместите диалоговое окно «Заливка и обводка» в сторону (если у вас достаточно места на экране) или закройте его. Мы будем использовать его снова чуть позже.

Мой цветной круг теперь выглядит так:

Теперь мы хотим добавить радио в середину нашего круга. Сначала мы добавим черный ящик с закругленными углами в середину круга. Нажмите на инструмент «Квадрат и прямоугольник» слева:

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

Теперь вернитесь в диалоговое окно «Заливка и обводка» и измените значение поля RGBA (на вкладке «Заливка») на «000000ff»:

Теперь квадрат должен стать черным:

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

Теперь нам нужно красиво закруглить углы черного ящика. Для этого наведите указатель мыши на маленький круглый кружок в правом верхнем углу черного ящика. Он должен стать «красным»:

Нажмите на кружок, когда он станет красным, и перетащите его вертикально вниз, и при перетаскивании все углы черного ящика изменятся на закругленные. Когда вы удовлетворены величиной «округления», отпустите кнопку мыши:

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

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

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

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

Нажмите на среднее поле в этом разделе, и ваша антенна будет мгновенно округлена:

 

Экспорт в PNG

Теперь мы экспортируем это в PNG.