Icon сделать: Сделать – Бесплатные иконки: интерфейс

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

• Статья
• 11/16/2022

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

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

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

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

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

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

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

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

Примечание

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

Диалоговое окно Создание < типа образа устройства > позволяет создать новый образ устройства указанного типа. Чтобы открыть диалоговое окно » Создание < образа устройства > «, последовательно выберите пункты изображение>создать типизображения. Включены следующие свойства:

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

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, монохромная

Примечание

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

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

Диалоговое окно

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

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

Создание нового значка или курсора

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

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

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

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

1. Перейдите в меню изображение>создать изображение устройстваили щелкните правой кнопкой мыши в области редактора изображений и выберите пункт создать изображение устройства.

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

Копирование образа устройства

1. Последовательно выберите пункты

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

2. Копировать отображаемое в данный момент изображение значка (CTRL+C).

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

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

Удаление образа устройства

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

Примечание

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

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

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

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

Примечание

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

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

1. В окне цвета выберите Цвет экрана Selector или Инверсный цвет.

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

Изменение экрана или инвертированного цвета

1. Выберите селектор цвета экрана или селектор инвертированного цвета .

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

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

   Совет

   Если дважды щелкнуть селектор » Цвет экрана » или » инвертированный цвет «, откроется диалоговое окно Селектор пользовательских цветов .

Использовать палитру 256-Color

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

Создание значка или курсора 256-цвета

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

   RC -файле, например курсор, щелкните правой кнопкой мыши папку курсор и выберите команду Вставить курсор.

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

3. Последовательно выберите пункты меню изображение>создать изображение устройства и выбор стиля изображения 256-Color.

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

Чтобы нарисовать выделенный фрагмент из 256-цветовой палитры, необходимо выбрать цвета в палитре цвета в окне цвета.

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

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

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

   цвета в окне цвета .

   Примечание

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

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

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

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

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

   В свойстве Hotspot в окне свойства отображаются новые координаты.

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

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

Примечание

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

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

2. В диалоговом окне новый файлвыберите папку Visual C++ , а затем в поле шаблоны выберите файл точечного рисунка (.bmp) и нажмите кнопку Открыть.

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

3. Внесите необходимые изменения в новый точечный рисунок.

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

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

   Примечание

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

6. Щелкните Сохранить.

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

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

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

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

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

4. Щелкните Сохранить.

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

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

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

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

Добавление нового ресурса изображения в проект на языке программирования .NET

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

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

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

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

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

Требования

Нет

См. также раздел

Редактор изображений для значков
Как изменить изображение
Руководство. Использование инструмента рисования
Как работать с цветом
Сочетания клавиш

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

Иконка приложения для Android

1. Разрешение экранов устройств

Приложения для Android разрабатываются с учетом размера устройства и разрешения экрана.

Графика и разметка в приложениях измеряются в единицах — DPI (количество точек на дюйм).

2. Категории DPI

• Low DPI (LDPI) = 120DPI
• Medium DPI (MDPI) = 160DPI
• High DPI (HDPI) = 240DPI (Nexus S, SGS2)
• Extra High DPI (XHDPI) = 320DPI (Galaxy Nexus, Nexus 4, SGS3)
• Extra Extra High DPI (XXHDPI) = 480DPI (HTC One и SGS4)

Размер и формат иконок запуска приложения (launcher icon) для Android

Иконка приложения должна разрабатываться специально для Android. Используйте инструкции по разработке иконок от Android в стиле Material Design, не подражайте визуальным элементам и стилям других платформ.

Главное:

Иконка запуска приложения должна быть 32-битной, в формате PNGs с альфа-каналом (с прозрачным фоном).

Базовый размер — 48dp, с краями 1dp — для низкого разрешения. Чем выше плотность пикселей экрана (DPI), тем больше отображается деталей. Для остальных разрешений нужно увеличить масштаб на 400% 192 x 192 dp (с краями 4dp).

Хотите идеальную иконку для любого разрешения и не ищете легких путей? Сделайте несколько иконок разных размеров для всех вариантов разрешений, воспользовавшись таблицей ниже. Можно включить дополнительные значения для последовательного увеличения размеров. Например, иконки 96 x 96 пикселей xhdpi могут содержать промежуточный размер 88 x 88 пикселей с отступами в 4 пикселя с каждой стороны. Отступы образуют легкую тень и гарантируют четкость иконки на любом фоне.

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

Иконки приложения для публикации на Google Play

Иконка приложения для публикации в Google Play должна быть 512 x 512 пикселей, с высоким разрешением.

Эта иконка используется только для Google Play и не заменяет иконку запуска приложения (launcher icon). Иконка публикации на Google Play должна содержать тот же контент, что и иконка запуска приложения, за исключением некоторых идентификационных знаков.

Раздел “Рекомендуемые”

В разделе «Рекомендуемые» можно продемонстрировать потенциальным пользователям графические возможности приложения. 

Требования к иконке в разделе «Рекомендуемые» :

• JPEG или 24-битный PNG (без альфа-канала)
• 1024 х 500 пикселей

Расположение

Картинка для раздела «Рекомендуемые» располагается над сведениями о приложении в Play Маркете. Если загружен проморолик, поверх нее будет расположена кнопка «Воспроизвести».

Советы

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

Цели иконки приложения

У иконки приложения есть 3 основных цели:

1. Продвижение бренда, рассказ о цели приложения.
2. Помощь пользователю в поиске приложения в Google Play.  
3. Функция запуска.

Продвижение бренда

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

Образцы иконок приложений.

Помогите пользователю найти приложение в Google Play

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

Для разработки иконки приложения лучше обратиться к дизайнеру.

Правила дизайна иконки для Android

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

Для 3D-иконки:

• Перспектива не противоречит другим иконкам.
• Располагается ее по ходу движения.
• Имеет небольшую глубину.

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

Правильно и неправильно

Иконка для приложения на iOS

Размеры 

У каждого приложения должна быть маленькая и большая иконка. Маленькая иконка используется на домашнем экране и в системе после установки. Большая иконка нужна для App Store.

Устройство или контекст

Размер иконки

iPhone 6s Plus и выше, iPhone 6 Plus и выше

180x180px

iPhone 6s и выше, iPhone 6 и выше, 
iPhone SE и выше

120x120px

iPad Pro

167x167px

iPad, iPad mini

152x152px

App Store

1024x1024px

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

Также маленькие иконки нужны для показа:

• в поиске Spotlight,
• в приложении настроек смартфона.

Если у вас нет маленьких иконок, iOS уменьшит главную иконку приложения для показа в этих директориях.

Устройство

Размер иконок 
в поиске Spotlight

Размер иконки настроек

iPhone 6s Plus и выше, 
iPhone 6 Plus и выше

120x120px

87x87px

iPhone 6s и выше, iPhone 6 и выше, 
iPhone SE и выше

80x80px

58x58px

iPad Pro, iPad, iPad mini

80x80px

58x58px

Внимание:

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

Правила дизайна иконки для iOS:

Подкупающая простота

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

Четкий фокус

Создайте иконку с четким фокусом, который привлекает внимание и идентифицирует приложение.

Узнаваемость

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

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

Без прозрачности, простой фон

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

Без надписей

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

Без фото, скриншотов и элементов интерфейса

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

Без точных копий продуктов Apple

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

Не помещайте повсюду в интерфейсе иконку приложения

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