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

Статья
06/09/2015

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

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

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

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

Имя формата	Расширение имени файла
Формат PNG (Portable Network Graphics)	PNG
JPEG	.jpg, .jpeg, .jpe, .jfif
Поверхность DirectDraw	.dds
Graphics Interchange Format	GIF
Растровое изображение	.bmp, .dib
Формат изображений TIFF (Tagged Image File Format)	.tif, .tiff
TGA (Targa)	.tga

Приступая к работе

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

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

В Solution Explorer в контекстном меню проекта, в который вы хотите добавить изображение, выберите пункт Add, New Item.
В диалоговом окне Add New Item в разделе Installed выберите Graphics, а затем выберите подходящий формат файла для изображения. Дополнительные сведения о том, как выбрать формат файла на основе требований, см. в следующем разделе.
Укажите Name файла изображения и Location, где его необходимо создать.
Нажмите кнопку Добавить.

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

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

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

Точечный рисунок (.bmp)
Формат точечного рисунка. Несжатый формат изображения, который поддерживает 24 бита цветов. Формат растрового изображения не поддерживает прозрачность.
Изображение GIF (.gif)
Формат изображения GIF (Graphics Interchange Format). Формат изображения, сжатый LZW, без потерь, который поддерживает до 256 цветов. Неподобающе для фотоснимков и изображений, имеющих значительное количество информации цвета, но предоставляет хорошие коэффициенты сжатия для изображений с небольшим количеством цветов, которые имеют высокую степень согласованности цвета.
Изображение JPG (.jpg)
Формат изображения JPEG (Joint Photographic Experts Group). Формат изображения с высоким сжатием, допускающий потери, поддерживает 24 бита цвета и подходит для общецелевого сжатия изображений, которые имеют высокую степень согласованности цвета.
Изображение PNG (.png)
Формат изображений PNG (Portable Network Graphics). Формат изображения с умеренным сжатием без потерь поддерживает 24 бита цвета и альфа-прозрачность. Подходит как для естественных, так и для искусственных изображений, но не предоставляет коэффициенты сжатия столь же хорошие, как форматы с частичными потерями, такие как JPG или GIF.
Изображение TIFF (.tif)
Формат изображений TIFF или TIF (Tagged Image File Format). Гибкий формат изображения, который поддерживает несколько схем сжатия.
Текстура DDS (.dds)
Формат текстуры DirectDraw Surface (DDS). Формат текстуры с высоким сжатием, допускающий потери, поддерживает 24 бита цвета и альфы-версии и альфа-прозрачность. Коэффициенты сжатия могут достигать 8:1. Основано на сжатии S3 Texture, которое можно распаковать на графическом оборудовании.
Изображение TGA (.tga)
Формат изображения адаптера графики Truevision (TGA) (также известный как Targa). Формат изображения, сжатый RLE, без потерь, который поддерживает как изображения с сопоставлением по цвету (цветовая палитра), так и изображения с непосредственными цветами до 24 бита цветов и альфа-прозрачность. Неподобающе для фотоснимков и изображений, имеющих значительное количество информации цвета, но предоставляет хорошие коэффициенты сжатия для изображений, которые имеют длинные диапазоны одинаковых цветов.

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

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

Примечание

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

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

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

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

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

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

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

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

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

Элемент панели инструментов	Описание
Select	Включает выделение прямоугольной области изображения. После выбора области, можно вырезать, копировать, перемещать, масштабировать, поворачивать, отражать или удалять его. Если есть активное выделение, средства рисования влияют только на выбранную область.
Произвольное выделение	Включает выделение области изображения неправильной формы. После выбора области, можно вырезать, копировать, перемещать, масштабировать, поворачивать, отражать или удалять его. Если есть активное выделение, средства рисования влияют только на выбранную область.
Выбор волшебной палочкой	Включает выделение области изображения со схожим цветом. Погрешность, то есть максимальная разница между соседними цветами, в пределах которой они считаются одинаковыми- может быть настроена для включения небольшого или широкого диапазона сходных цветов. После выбора области, можно вырезать, копировать, перемещать, масштабировать, поворачивать, отражать или удалять его. Если есть активное выделение, средства рисования влияют только на выбранную область.
Сдвиг	Включает перемещение изображения по отношению к рамке окна. В режиме Панорама выберите точку на изображении и поверните ее. Можно временно активировать режим Сдвиг, нажав и удержав клавишу Ctrl.
Масштаб	Позволяет отображать изображение более или менее детально по отношению к рамке окна. В режиме Масштаб выберите точку на изображении, а затем переместите ее вправо или вниз, чтобы увеличить масштаб, либо влево или вверх, что уменьшить. Можно увеличить или уменьшить, нажав и удержав клавишу Ctrl и использовать колесико мыши или нажав клавиши знак плюс (+) или минус (-).
Масштабирование к действительному размеру	Показывает изображение с помощью связи 1:1 между пикселями изображения и точками экрана.
Вписать	Отображает полное изображение в рамке окна.
По ширине	Отображает полную ширину изображения в рамке окна.
Сетка	Включает или отключает сетку, которая отображает пиксельные границы. Сетка может не отображаться до тех пор, пока вы не увеличите масштаб изображения.
Просмотр следующего Уровня MIP	Активирует следующий больший уровень MIP в цепочке сопоставления MIP. Активный уровень MIP отображается на поверхности разработки. Этот элемент доступен только для текстур, имеющих уровни MIP.
Просмотр предыдущего уровень MIP	Активирует следующий меньший уровень MIP в цепочке сопоставления MIP. Активный уровень MIP отображается на поверхности разработки. Этот элемент доступен только для текстур, имеющих уровни MIP.
Красный канал Зеленый канал Синий канал Альфа-канал	Включает или отключает конкретный цветовой канал. Примечание Систематически включая или отключая каналы цвета можно изолировать проблемы, которые относятся к одному или нескольким из них.Например, можно определить неверную альфа-прозрачность.
Фон	Включает или отключает отображение фона через прозрачные части изображения. Можно настроить отображение фона путем выбора из следующих параметров: Шахматная доска Использует зеленый наряду с указанным цветом фона для отображения фона в качестве шаблона как шахматная доска. Этот параметр можно использовать, чтобы помочь сделать прозрачные части изображения более очевидными. Белый фон Использует белый цвет для отображения фона. Черный фон Использует черный цвет для отображения фона. Анимация фона Медленно сдвигает шахматный рисунок. Этот параметр можно использовать, чтобы помочь сделать прозрачные части изображения более очевидными.
Свойства	В другом случае открывает и закрывает окно Свойства.
Дополнительно	Содержит дополнительные команды и параметры. Фильтры Предоставляет несколько типовых фильтров изображений: Черно-белое, Размытие, Увеличить яркость, Затемнить, Определение границ, Тиснение, Обратить цвета, Рябь, Оттенок сепия и Повысить резкость. Графические модули Визуализация с помощью D3D11 Использует Direct3D 11, чтобы отрисовать поверхность разработки редактора изображений. Визуализация с помощью D3D11WARP Использует платформу Windows Advanced Rasterization Platform (WARP) Direct3D 11 для отрисовки поверхности разработки Редактора изображений. Инструменты Отразить слева направо Транспонирует изображение вокруг его горизонтальной, или x, оси. Отразить сверху вниз Транспонирует изображение вокруг его вертикальной, или y, оси. Сформировать Mips Создает уровни MIP для рисунка. Если уровни MIP уже существуют, они создаются повторно из самого крупного уровня MIP. Все изменения, внесенные в меньшие уровни MIP, потеряны. Чтобы сохранить созданные уровни MIP, следует использовать формат .dds для сохранения изображения. Просмотр Frame Rate при включении Указывает частоту кадров в правом верхнем углу поверхности разработки. Частота кадров — это количество кадров, рисуемых в секунду. Совет Можно выбрать кнопку Дополнительно, чтобы выполнить последнюю команду повторно.

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

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

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

Элемент панели инструментов	Описание
Карандаш	Использует активное выделение цвета для рисования ступенчатого штриха. Можно задать цвет и толщину штриха в окне Properties.
Brush	Использует активное выделение цвета для рисования сглаженного штриха. Можно задать цвет и толщину штриха в окне Properties.
Airbrush	Использует активное выделение цвета для рисования сглаженного штриха, который сливается с изображением и становится более насыщенным со временем. Можно задать цвет и толщину штриха в окне Properties.
Пипетка	Устанавливает активное выделение цвета равным цвету выбранного пикселя.
Fill	Использует активное выделение цвета, чтобы заполнить область изображения. Затрагиваемая область определяется как пиксель, где применяется заливка, вместе с каждым пикселем, соединенным с ним пикселями того же цвета и также имеющим этот цвет. Если заполнение применяется в границах активного выделения, затронутая область ограничивается этим выделением. По умолчанию активное выделение цветом смешивается с затронутой областью изображения в соответствии с альфа-компонентом. Чтобы Использовать активное выделение цвета, чтобы перезаписать соответствующую область, нажмите и удерживая клавишу Shift при использовании средства заполнения.
Ластик	Устанавливает для пикселей полностью прозрачный цвет, если изображение поддерживает альфа-канал. В противном случае задает для пикселей активный цвет фона.
Строка, Прямоугольник, Скругленный прямоугольник, Эллипс	Рисует фигуру на изображении. Можно задать цвет и толщину рамки в окне Properties. Чтобы нарисовать примитив, который имеет одинаковую ширину и высоту, нажмите и удерживайте Shift при рисовании.
Текст	Использует выделение Цвета переднего плана для рисования текста. Цвет фона определяется свойством выбранным цветом фона. Для прозрачного фона значение альфа выделения цвета фона должно быть равно 0. Пока область текста активна, можно указать, отображается ли текст со сглаженными штрихами, и можно задать тексту Value, Font, Size и стиль — Bold, Italics, or Underlined— в окне Properties. Содержимое и внешний вид текста становятся окончательными, когда область текста перестает быть активной.
Повернуть	Поворот изображения на 90 градусов по часовой стрелке.
Trim	Обрезает изображение до активного выделения.

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

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

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

Некоторые форматы изображений — например, DirectDraw Surface (.dds) — поддерживают прозрачность. Существует несколько способов, которыми прозрачность может быть использована в зависимости от инструмента. Чтобы Указать уровень непрозрачности для выбора цвета, в окне Свойства, задайте компонент А (альфа) выбора цвета. Вот как различные типы инструментов управляют способом применения прозрачности:

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

Карандаш, Кисть, Распылитель, Линия, Прямоугольник, Скругленный прямоугольник, Эллипс, Текст

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

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

Fill

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

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

Свойства изображений

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

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

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

Примечание

Поскольку свойство Rotate by применяется ко всем инструментами и выбранным областям, оно всегда отображается в нижней части окна Properties вместе с другими свойствами инструмента.Rotate by всегда отображается, поскольку изображение неявно выбрано, если нет других выделений или активного средства.Дополнительные сведения о свойстве Rotate by см. в разделе Tool Properties.

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

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

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

Работа с инструментами

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

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

Большинство инструментов — Pencil, Brush, Airbrush, Fill, Eraser — а также двумерные примитивы и преобразования — Rotate, Trim, Invert Colors, Flip Horizontal, and Flip Vertical — ограничиваются или определяются активным выделением. Однако некоторые средства — Пипетка и Текст — и преобразования — Создать MIP-объекты — не зависят от какого-либо активного выделения; эти инструменты всегда ведут себя так, как если бы все изображение было активным выделением.

При выборе области можно нажать и удержать Shift, чтобы сделать пропорциональное (квадратное) выделение ; в противном случае выделение не ограничено.

Изменение размера выбранных элементов

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

CTRL
Копирует содержимое выбранной области до изменения ее размера. Это оставляет исходное изображение неповрежденным при изменении размера копии.
Сдвиг
Изменяет размер выбранной области пропорционально ее исходным размерам.
Alt
Изменить размер области выделения. Это оставляет изображение неизмененным.

Здесь приведены допустимые сочетания клавиш-модификаторов:

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

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

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

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

Свойства инструмента описываются в следующей таблице.

Средство	Свойства
Все инструменты и выделения	Повернуть на Указывает величину поворота выделения или эффекта инструмента по часовой стрелке в градусах.
Карандаш, Кисть, Распылитель, Ластик	Thickness Определяет размер области, затронутой инструментом.
Текст	Сглаживание Рисует текст, который имеет сглаженные края. Это предоставляет тексту более ровный вид. Значение Текст для отрисовки. Шрифт Шрифт, который используется для отрисовки текста. Размер Размер текста. Полужирный Делает шрифт полужирным. Курсив Делает шрифт курсивом. Подчеркивание Делает шрифт подчеркнутым.
2-D примитив	Сглаживание Рисует примитивы, которые имеют сглаженные края. Это предоставляет им более ровный вид. Thickness Указывает толщину линии, формирующей границу примитива. Радиус X (Только округленный прямоугольник) Указывает радиус для округления верхнего и нижнего краев примитива. Радиус Y (Только округленный прямоугольник) Указывает радиус для округления левого и правого краев примитива.
Карандаш, Кисть, Распылитель, 2-D примитив	Каналы Включает или отключает определенные цветовые каналы для просмотра и рисования. Если элемент Вид задан для конкретного канала цвета, этот канал виден на изображение; в противном случае он невидимый. Если установлено Рисование для конкретного канала цвета, этот канал затрагивается операциями рисования; в противном случае этого не происходит.
Выбор волшебной палочкой, Заполнения	Отклонение Определяет максимальную разницу между соседними цветами, в пределах которой они считаются схожими, чтобы большее или меньшее количество схожих цветов составляли часть выделенной или затронутой области. По умолчанию значение равно 32, что означает, что смежные пиксели в 32 оттенках (светлее или темнее) исходного цвета считаются частью области.

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

Команда	Сочетания клавиш
Переключение на режим Выбора	S
Переключение на режим Масштаба	Z
Переключение на режим Панорамы	K
Выделить все	CTRL+A
Удалить текущее выделение	Delete
Отменить текущее выделение	Escape-символ
Увеличить	Ctrl+ прокручивание колесика мыши вперед CTRL+PAGE UP Знак плюс (+)
Уменьшить	Ctrl- прокручивание колесика мыши назад Ctrl-PageDown Знак минус (-)
Сдвиг изображения вверх	Прокручивание колеса мыши назад PAGE DOWN
Сдвиг изображения вниз	Прокручивание колеса мыши вперед PAGE UP
Сдвиг изображения влево	Shift+ прокручивание колеса мыши назад Прокручивание колеса мыши влево SHIFT+PAGE DOWN
Сдвиг изображения вправо	Shift+прокручивание колеса мыши вперед Прокручивание колеса мыши вправо SHIFT+PAGE UP
Масштабирование к действительному размеру	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
Переход к инструменту "кисть"	B
Переход к инструменту "заливка"	F
Переход к инструменту "ластик"	E
Переход к инструменту "текст"	T
Перейдите к инструменту выбора цвета (пипетке)	I
Переместить активное выделение и его содержимое.	Клавиши со стрелками.
Изменить размер активного выделения и его содержимого.	Ctrl+ клавиши со стрелками
Переместить активное выделение, но не его содержимое.	Shift+ клавиши со стрелками
Изменить размер активного выделения, но не его содержимого.	Shift+Ctrl+клавиши со стрелками
Фиксировать текущий уровень	Return
Уменьшить толщину инструмента	[
Увеличить толщину инструмента	]

См. также

Название	Описание
Работа с трехмерными ресурсами для игр и приложений	Обзор средств, которые можно использовать в Visual Studio для работы с графическими активами, такими как текстуры и изображения, трехмерные модели и эффекты шейдеров.
Редактор моделей	Описывает способ использования редактора моделей Visual Studio для работы с трехмерными моделями.
Конструктор шейдеров	Описывает способ использования конструктора шейдеров Visual Studio для работы с шейдерами.

Поделиться через