редактор изображений

В этой статье рассматривается, как работать с редактором изображений Visual Studio для просмотра и изменения ресурсов изображений и текстур.

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

Поддерживаемые форматы

Редактор изображений поддерживает следующие форматы изображений:

Название формата Расширение имени файла
PNG (Portable Network Graphics) PNG
JPEG JPG, JPEG, JPE, JFIF
Поверхность DirectDraw DDS
Graphics Interchange Format GIF
Bitmap BMP, DIB
Формат TIFF TIF, TIFF
TGA (Targa) TGA

Начало работы

В этом разделе рассматривается, как добавить в проект Visual Studio изображение и настроить его в соответствии с вашими требованиями.

Добавление изображения в проект

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

  2. В диалоговом окне Добавление нового элемента в разделе Установленные выберите Графика, а затем выберите подходящий формат файла для изображения.

    Примечание

    Если в диалоговом окне Добавление нового элемента нет категории Графика, возможно, необходимо установить компонент Редакторы изображений и трехмерных моделей. Закройте диалоговое окно и в строке меню выберите Сервис > Получить средства и компоненты, чтобы открыть Visual Studio Installer. Перейдите на вкладку Отдельные компоненты и выберите компонент Редакторы изображений и трехмерных моделей в категории Наборы для разработки игр. Выберите Изменить.

    Компонент "Редакторы изображений и трехмерных моделей"

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

  3. Укажите имя файла изображения и расположение, где его необходимо создать.

  4. Выберите кнопку Добавить.

Выбор формата изображения

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

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

Точечный рисунок (BMP)

Формат растрового изображения. Формат изображения без сжатия, который поддерживает 24-разрядный цвет. Формат точечного рисунка не поддерживает прозрачность.

Изображение в формате GIF

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

Изображение в формате JPG

Формат изображения JPEG. Формат изображения с высокой степенью сжатия с потерями, который поддерживает 24-разрядный цвет и подходит для сжатия изображений общего назначения с высокой степенью согласованности цвета.

Изображение в формате PNG

Формат изображения PNG. Формат изображения средней степени сжатия, без потери качества, который поддерживает 24-разрядный цвет и альфа-прозрачность. Подходит для естественных и искусственных изображений, но не обеспечивает степень сжатия, применяемую в форматах JPG или GIF.

Изображение в формате TIFF

Формат изображения TIFF (TIFF или TIF). Гибкий формат изображения, поддерживающий несколько алгоритмов сжатия.

Текстура в формате DDS

Формат текстуры DirectDraw Surface (DDS). Формат текстур высокой степени сжатия с потерей качества, который поддерживает 24-разрядный цвет и альфа-прозрачность. Его максимальная степень сжатия равна 8:1. Он создан на основе сжатия текстур S3. Его можно распаковать с помощью графического оборудования.

Изображение в формате TGA

Формат изображения TGA или Targa. Формат изображения, сжатого с использованием алгоритма RLE, без потери данных, который поддерживает закодированные цветом (цветовой палитры) или простые цветные изображения с 24-разрядным цветом и альфа-прозрачностью. Не подходит для фотографий и изображений со значительным объемом цветовых деталей, но обеспечивает хорошую степень сжатия изображений с широким диапазоном одинаковых цветов.

Настройка изображения

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

Примечание

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

Работа с редактором изображений

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

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

Панель инструментов "Режим редактора изображений"

Панель инструментов "Режим редактора изображений" в Visual Studio

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

Элемент панели инструментов Описание
Select Позволяет выбрать прямоугольную область изображения. После выбора области ее можно вырезать, скопировать, переместить, масштабировать, повернуть, перевернуть или удалить. При наличии активного выделения инструменты рисования влияют только на область выделения.
Irregular Selection (Произвольное выделение) Позволяет выбрать нестандартную область изображения. После выбора области ее можно вырезать, скопировать, переместить, масштабировать, повернуть, перевернуть или удалить. При наличии активного выделения инструменты рисования влияют только на область выделения.
Wand Selection (Выделение с помощью инструмента "Волшебная палочка") Позволяет выбрать область изображения аналогичного цвета. Отклонение — это максимальный диапазон расхождения между соседними цветами, в пределах которого они считаются аналогичными. Настраивается для выделения меньшего или большего диапазона аналогичных цветов. После выбора области ее можно вырезать, скопировать, переместить, масштабировать, повернуть, перевернуть или удалить. При наличии активного выделения инструменты рисования влияют только на область выделения.
Сдвиг Активирует функцию перемещения изображения по отношению к рамке окна. В режиме Панорама выберите точку на изображении, а затем переместите его.

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

Чтобы увеличить или уменьшить масштаб, нажмите и удерживайте клавишу CTRL, а затем используйте колесо прокрутки мыши или клавиши знака плюс (+) или минус (-).
Фактический размер Позволяет отобразить изображение с соотношением 1:1 между пикселями изображения и пикселями экрана.
По размерам окна Отображает изображение в рамке окна в полном размере.
По ширине Отображает изображение в рамке окна во всю ширину.
Grid Включает или отключает сетку, которая показывает границы пикселей. Сетка может не отображаться до увеличения масштаба изображения.
View Next MIP Level (Просмотр следующего уровня MIP) Активирует следующий, больший уровень MIP в цепочке карты MIP. Активный уровень MIP отображается в области конструктора. Этот элемент доступен только для текстур с уровнями MIP.
View Previous MIP Level (Просмотр предыдущего уровня MIP) Активирует следующий, меньший уровень MIP в цепочке карты MIP. Активный уровень MIP отображается в области конструктора. Этот элемент доступен только для текстур с уровнями MIP.
Красный канал

Зеленый канал

Синий канал

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

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

Белый фон
Для отображения фона используется белый цвет.

Черный фон
Для отображения фона используется черный цвет.

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

Фильтры

Предоставляет несколько распространенных фильтров изображения: Черно-белое, Размытие, Brighten (Осветление), Darken (Затемнение), Определение границ, Тиснение, Обратить цвета, Ripple (Рябь), Sepia Tone (Оттенок сепия) и Повысить резкость.

Графические модули

Render with D3D11 (Визуализация с помощью D3D11)
Использует Direct3D 11, чтобы отрисовать область конструктора редактора изображений.

Render with D3D11WARP (Визуализация с помощью D3D11WARP)
Использует платформу Windows Advanced Rasterization Platform (WARP) Direct3D 11 для отрисовки области конструктора редактора изображений.

Инструменты

Отразить по-горизонтали
Транспонирует изображение вокруг оси X, или по горизонтали.

Отразить по-вертикали
Транспонирует изображение вокруг оси Y, или по вертикали.

Создать MIP-объекты
Создает уровни MIP для изображения. Если уровни MIP уже существуют, они создаются повторно из наибольшего уровня MIP. Любые изменения, внесенные в меньшие уровни MIP, будут потеряны. Чтобы сохранить созданные уровни MIP, для сохранения изображения необходимо использовать формат DDS.

Просмотр

Частота кадров
При включении указывает частоту кадров в правом верхнем углу поверхности разработки. Частота кадров — это количество кадров, рисуемых в секунду. Совет. Чтобы повторно запустить последнюю команду, нажмите кнопку Дополнительно.

Панель инструментов редактора изображений

Панель инструментов редактора изображений

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

Элемент панели инструментов Описание
Pencil Использует выбранный активный цвет для рисования сглаженного штриха. Цвет и толщину штриха можно задать в окне Свойства.
Brush Использует выбранный активный цвет для рисования не сглаженного штриха. Цвет и толщину штриха можно задать в окне Свойства.
Airbrush (Распылитель) Использует выбранный активный цвет для рисования не сглаженного штриха, который смешивается с изображением и со временем становится более насыщенным. Цвет и толщину штриха можно задать в окне Свойства.
Eyedropper Задает цвет выбранной точки в качестве выбранного активного цвета.
Заполнить Использует выбранный активный цвет для заполнения области изображения. Затронутая область определяется как группа смежных пикселей аналогичного цвета, к которым применяется заливка. Если заливка применяется к активному выделению, соответствующая область ограничивается выделением.

По умолчанию выбранный активный цвет смешивается с соответствующей областью изображения на основании его альфа-компонента. Чтобы использовать выбранный активный цвет для перезаписи соответствующей области, при использовании инструмента "Заливка" нажмите и удерживайте клавишу SHIFT.
Ластик Делает пиксели полностью прозрачными, если изображение поддерживает альфа-канал. В противном случае задает для пикселей активный цвет фона.
Линия, Прямоугольник, Скругленный прямоугольник, Эллипс Рисует фигуру на изображении. Цвет и толщину рамки можно задать в окне Свойства.

Чтобы нарисовать примитив с одинаковой шириной и высотой, при рисовании нажмите и удерживайте клавишу SHIFT.
Text Использует выбранный цвет для отрисовки текста. Цвет фона определяется выбранным цветом фона. Чтобы фон был прозрачным, альфа-фактор выбранного цвета фона должен быть равен 0. Когда область текста активна, можно указать, должен ли текст отрисовываться со сглаженными штрихами, а также задать значение, шрифт, размер и стиль — Полужирный, Курсив или Подчеркнутый — текста в окне Свойства. Содержимое и внешний вид текста применяются, когда область текста перестает быть активной.
Поворот Поворачивает изображение на 90 градусов по часовой стрелке.
Trim (Усечь) Усекает изображение до границ активного выделения.

Работа с уровнями MIP

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

Работа с прозрачностью

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

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

Средство Описание
Карандаш, Кисть, Распылитель, Линия, Прямоугольник, Скругленный прямоугольник, Эллипс, Текст Чтобы смешать выбранный активный цвет с изображением, в окне Свойства разверните группу свойств Каналы и напротив канала Альфа установите флажок Рисование, а затем рисуйте как обычно.

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

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

Свойства образа

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

В приведенной ниже таблице описаны свойства изображений.

Свойство Описание
Ширина Ширина изображения.
Высота Высота изображения.
Бит на пиксель Количество битов, в которых представлен каждый пиксель. Значение этого свойства зависит от цветового формата изображения.
Прозрачное выделение Если задать значение True, выбранный слой смешивается с основным изображением на основе альфа-фактора выбранного слоя. В противном случае следует установить значение False. Этот элемент доступен только для изображений, поддерживающих альфа-канал.
Формат Формат цвета изображения. Вы можете указать несколько форматов цвета в зависимости от формата изображения. Формат цвета определяет количество и тип цветовых каналов, которые содержит изображение, а также размер и кодирование различных каналов.
Уровень MIP Активный уровень MIP. Этот элемент доступен только для текстур с уровнями MIP.
Число уровней MIP Общее количество уровней MIP в изображении. Этот элемент доступен только для текстур с уровнями MIP.
Число кадров Общее количество кадров в изображении. Этот элемент доступен только для изображений, поддерживающих массивы текстур.
Frame Текущий кадр. Вы можете просмотреть только первый кадр. Остальные кадры будут потеряны при сохранении изображения.
Число срезов глубины Общее количество срезов глубины в изображении. Этот элемент доступен только для изображений, которые поддерживают объемные текстуры.
Срез глубины Текущий срез глубины. Вы можете просмотреть только первый срез. Остальные срезы будут потеряны при сохранении изображения.

Примечание

Так как свойство Повернуть на применяется ко всем инструментам и выбранным областям, оно всегда отображается в нижней части окна Свойства вместе с другими свойствами инструмента. Свойство Повернуть на отображается всегда, так как все изображения неявно выбраны, если нет другого выделения или активного инструмента. Дополнительные сведения о свойстве Повернуть на см. в разделе [Свойства инструментов](#tool -properties).

Изменение размеров изображений

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

  • В окне Свойства задайте новые значения для свойств Ширина и Высота.

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

Выбранные области

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

Большинство инструментов (Карандаш, Кисть, Распылитель, Заливка, Ластик, а также двумерные примитивы) и преобразований (Повернуть, Обрезать, Обратить цвета, Перевернуть слева направо и Перевернуть сверху вниз) ограничиваются или определяются активным выделением. Но некоторые инструменты (Пипетка и Текст) и преобразования (Создать MIP-объекты) работают независимо от выделений. Эти инструменты всегда действуют так, как если бы было выделено все изображение.

Выделяя область, можно сделать ее пропорциональной (квадрат). Для этого нужно нажать и удерживать клавишу SHIFT. В противном случае выделение не ограничивается.

Изменение размера выделения

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

CTRL: копирует содержимое выбранной области до изменения ее размера. Исходное изображение при этом остается неизменным; изменяется размер копии.

SHIFT: изменяет размер выбранной области пропорционально ее исходным размерам.

ALT: изменяет размер области выделения. Изображение при этом остается неизменным.

В следующей таблице перечислены сочетания клавиш-модификаторов:

Ctrl Shift Alt Описание
Изменяет размер содержимого области выделения.
Сдвиг Пропорционально изменяет размер содержимого области выделения.
ALT Изменяет размер области выделения. Определяет новую область выделения.
Сдвиг ALT Пропорционально изменяет размер области выделения. Определяет новую область выделения.
Ctrl Копирует, а затем изменяет размер содержимого области выделения.
Ctrl Сдвиг Копирует, а затем пропорционально изменяет размер содержимого области выделения.

Свойства инструмента

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

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

Эти свойства инструментов описаны в приведенной ниже таблице:

Средство Свойства
Все инструменты и выделения Повернуть на
Задает величину поворота выделения или эффекта инструмента по часовой стрелке в градусах.
Карандаш, Кисть, Распылитель, Ластик Thickness
Определяет размер области, которую затронет инструмент.
Text Сглаживание
Рисует текст со сглаженными краями. Это придает тексту более плавный вид.

Значение
Текст для отрисовки.

Шрифт
Шрифт, который используется для отрисовки текста.

Размер
Размер текста.

Полужирный
Делает шрифт полужирным.

Курсив
Выделяет шрифт курсивом.

Подчеркнутый
Делает шрифт подчеркнутым.
Двумерный примитив Сглаживание
Рисует примитивы со сглаженными краями. Это придает им более плавный вид.

Thickness
Определяет толщину линии, формирующей границу примитива.

Радиус X
(Скругленный прямоугольник.) Определяет радиус закругления для верхнего и нижнего краев примитива.

Радиус Y
(Скругленный прямоугольник.) Определяет радиус закругления для левого и правого краев примитива.
Карандаш, Кисть, Распылитель, Двумерный примитив Каналы
Включает или отключает определенные цветовые каналы для просмотра и рисования. Если для представления выбран определенный цветовой канал, он отображается на изображении. В противном случае он не отображается. Если для рисования выбран определенный цветовой канал, на него будут влиять операции рисования. В противном случае этого не произойдет.
Wand Selection (Выделение с помощью инструмента "Волшебная палочка"), Заливка Отклонение
Определяет максимальный диапазон расхождения между соседними цветами, в пределах которого они считаются аналогичными. Таким образом меньше или больше подобных цветов становятся частью затрагиваемой области или области выделения. По умолчанию значение равно 32. Это означает, что смежные пиксели в пределах 32 оттенков исходного цвета (светлее или темнее), считаются частью области.

Сочетания клавиш

Get-Help Сочетания клавиш
Переход в режим Выбрать S
Переход в режим Масштаб Z
Переход в режим Панорама K
Выбрать все CTRL+A
Удалить текущее выделение Удалить
Отменить текущее выделение ESC (Escape)
Увеличение масштаба. CTRL+Прокручивание колеса мыши вперед

CTRL+PageUp

Знак плюса ( + )
Уменьшение масштаба. CTRL-Прокручивание колеса мыши назад

CTRL-PageDown

Знак минуса ( - )
Сдвинуть изображение вверх Прокручивание колеса мыши назад

PageDown
Сдвинуть изображение вниз Прокручивание колеса мыши вперед

PageUp
Сдвинуть изображение влево SHIFT+Прокручивание колеса мыши назад

Прокручивание колеса мыши влево

SHIFT+PageDown
Сдвинуть изображение вправо SHIFT+Прокручивание колеса мыши вперед

Прокручивание колеса мыши вправо

SHIFT+PageUp
Масштабирование до фактического размера CTRL+0 (ноль)
Масштабировать изображение по размеру окна. CTRL+G, CTRL+F
Масштабировать изображение по ширине окна CTRL+G, CTRL+I
Показать сетку CTRL+G, CTRL+G
Обрезать изображение по текущему выделению CTRL+G, CTRL+C
Просмотр следующего уровня MIP (больше деталей) CTRL+G, CTRL+6
Просмотр предыдущего уровня MIP (меньше деталей) CTRL+G, CTRL+7
Показать красный цветовой канал CTRL+G, CTRL+1
Показать зеленый цветовой канал CTRL+G, CTRL+2
Показать синий цветовой канал CTRL+G, CTRL+3
Показать альфа-канал (прозрачность) CTRL+G, CTRL+4
Показать узор в виде шахматной доски для альфа-канала CTRL+G, CTRL+B
Переключиться на произвольное выделение L
Переключиться на выделение с помощью инструмента "Волшебная палочка" M
Переключиться на карандаш P
Переключиться на кисть Б
Переключиться на заливку Ж
Переключитесь на ластик E
Переключиться на текст T
Переключиться на пипетку I
Перейти к активному выделению и его содержимому Клавиши со стрелками.
Изменить размер активного выделения и его содержимого CTRL+Клавиши со стрелками
Перейти к активному выделению, а не к его содержимому SHIFT+Клавиши со стрелками
Изменить размер активного выделения, а не его содержимого SHIFT+CTRL+Клавиши со стрелками
Зафиксировать текущий слой Return
Уменьшить толщину инструмента [
Увеличить толщину инструмента ]
Заголовок Описание
Работа с трехмерными ресурсами для игр и приложений Обзор предусмотренных в Visual Studio инструментов для работы с графическими ресурсами, такими как текстуры и изображения, трехмерные модели и эффекты шейдеров.
Редактор моделей Описывается работа с трехмерными моделями с помощью редактора моделей Visual Studio.
Конструктор шейдеров Описывается работа с шейдерами с помощью редактора шейдеров Visual Studio.