Гайд. Как корректировать спрайты (.spr) с помощью Sprite Creator и Photoshop

[sedjii]

 Цель:

Безопасное редактирование спрайта (изменение размера, цвета, отражение по горизонтали и т.д.) с сохранением прозрачности и палитры.

Что нам понадобится:

Исходный файл спрайта (.spr);

Программа Sprite Creator

Программа Adobe Photoshop (или похожая программа с поддержкой палитр (.act) и индексированных цветов), но тут объясню для Фотошопа (русский интерфейс).

 

Пошаговая Инструкция:

Шаг 1: Вытаскиваем нужную нам картинку и палитру (в Sprite Creator)

Открываем наш спрайт-файл (.spr) в Sprite Creator (File → Open…) выбираем файл и жмем Открыть.

В открывшемся окне появятся три вкладки default, guibig и guismall.

Выбираем, например, guibig.

 Далее, сохраняем картинку (Image → Export from → Layer 1) придумываем название и жмем Сохранить.

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

Далее, сохраняем палитру к этой картинке (Palette → Export from → Layer 1) придумываем название (желательно такое же, как и для нашей картинки чтобы легче было искать её потом жмем Сохранить.

Примечание: это таблица цветов для выбранной картинки (у каждой картинки своя палитра).

Первый шаг завершен!

PS: При необходимости редактирования default и guismall – сделать тоже самое по аналогии с guibig.

 

Шаг 2: Редактируем картинку (в Photoshop)

Вносим правки: масштабируем, переворачиваем, корректируем цвета и т.п.

Примечание: Во-первых – делаем правки только в RGB-режиме для доступа ко всем инструментам и качественного масштабирования (картинка уже находится в этом режиме).

Во-вторых – для данной картинки – Черные области = прозрачность! Не нужно трогать эти области.

После редактирования, переходим к следующему шагу!

 

Шаг 3: Применяем палитру (в Photoshop)

САМЫЙ ВАЖНЫЙ ШАГ!

Переводим изображение в Индексированный режим (Изображение → Режим → Индексированные цвета).

Появится диалоговое окно Индексированные цвета. В нем, во вкладке Палитра: выбираем «Заказная…».

В открывшемся окне Таблица цветов нажимаем кнопку Загрузить…

выбираем нужный файл палитры (экспортированный ранее из Sprite Creator вместе с редактируемой картинкой)

жмем Загрузить.

Нажимаем ОК и окно Таблица цветов закроется.

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

Главное – загрузить правильную (.act) палитру!

Другие настройки (Дизеринг, Подложка, Принудительные и Эффект) можно оставить – Не показывать (по умолчанию).

Нажимаем кнопку ОК.

 

Шаг 4: Возвращаемся в RGB (в Photoshop)

Сразу после Шага 3 переводим изображение в RGB режим (Изображение → Режим → RGB).

Картинка снова станет "обычной". Области прозрачности ОСТАНУТСЯ ЧЕРНЫМИ. Это необходимо для корректного импорта в нашем методе.

 

Шаг 5: Сохраняем результат в формате BMP (в Photoshop)

Открываем диалоговое окно Сохранить как (Файл → Сохранить как...).

Указываем новое имя файла, тип файла: BMP (Должно быть уже выбрано, если всё сделано правильно) и нажимаем Сохранить.

В появившемся окне Параметры BMP выбираем Формат файла: Windows, Глубина: 32 бит (должно быть уже выбрано по умолчанию). 

Другие настройки: Уплотнение (RLE) – УБИРАЕМ галочку, если она установлена (обычно эта настройка серая и не активная).

Настройку Изменить порядок строк можно оставь как есть (галочка стоит или нет – не важно. Есть рекомендации галочку убрать, но у меня и с галочкой все работает).

А вот в меню Дополнительные режимы я даже и не лез. Нажимаем кнопку ОК.

 

Шаг 6: Собираем спрайт (в Sprite Creator)

Снова открываем наш спрайт-файл (.spr) в Sprite Creator (File → Open…) выбираем файл и жмем Открыть.

В открывшемся окне появятся три вкладки default, guibig и guismall.

Снова выбираем guibig (как наш пример).

Далее, импортируем новую картинку взамен старой (Image → Import to → Layer 1)

выбираем сохраненный ранее файл BMP (см. Шаг 5) и жмем Открыть.

Если всё сделано правильно, и новая картинка заменила собой старую, то при необходимости меняем настройки позиции изображения кнопками Left/ Right и Тор/ Down в Image position.

Внимание! Если появились сообщения «Too many colors in layer’s palette!» или «Wrong bitmap type!» значит что-то пошло не так и была допущена ошибка, скорее всего была применена другая палитра). Возвращаемся к Шагу 3 и перепроверяем, что мы точно загрузили нужный файл палитры (.act) и сделали все действия правильно. А также, проверяем, что в Sprite Creator мы загружаем ту же самую палитру, что и в исходном спрайте (в программе должен быть открыт спрайт, из которого мы вытаскивали картинку для редактирования и её палитру).

Это критично для соответствия цветов и прозрачности!

 

Шаг 7: Сохраняем спрайт (в Sprite Creator)

Сохраняем наш спрайт-файл (.spr) в Sprite Creator (File → Save As...) указываем имя файла (желательно новое, чтобы не перезаписать оригинальный файл) и жмем Сохранить.

Всё! Готово!

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

Удачи в редактировании спрайтов и модостроении!

24 минуты назад, sedjii сказал:

 Цель:

Безопасное редактирование спрайта (изменение размера, цвета, отражение по горизонтали и т.д.) с сохранением прозрачности и палитры.

Что нам понадобится:

Исходный файл спрайта (.spr);

Программа Sprite Creator

Программа Adobe Photoshop (или похожая программа с поддержкой палитр (.act) и индексированных цветов), но тут объясню для Фотошопа (русский интерфейс).

 

Пошаговая Инструкция:

Шаг 1: Вытаскиваем нужную нам картинку и палитру (в Sprite Creator)

Открываем наш спрайт-файл (.spr) в Sprite Creator (File → Open…) выбираем файл и жмем Открыть.

В открывшемся окне появятся три вкладки default, guibig и guismall.

Выбираем, например, guibig.

 Далее, сохраняем картинку (Image → Export from → Layer 1) придумываем название и жмем Сохранить.

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

Далее, сохраняем палитру к этой картинке (Palette → Export from → Layer 1) придумываем название (желательно такое же, как и для нашей картинки чтобы легче было искать её потом жмем Сохранить.

Примечание: это таблица цветов для выбранной картинки (у каждой картинки своя палитра).

Первый шаг завершен!

PS: При необходимости редактирования default и guismall – сделать тоже самое по аналогии с guibig.

 

Шаг 2: Редактируем картинку (в Photoshop)

Вносим правки: масштабируем, переворачиваем, корректируем цвета и т.п.

Примечание: Во-первых – делаем правки только в RGB-режиме для доступа ко всем инструментам и качественного масштабирования (картинка уже находится в этом режиме).

Во-вторых – для данной картинки – Черные области = прозрачность! Не нужно трогать эти области.

После редактирования, переходим к следующему шагу!

 

Шаг 3: Применяем палитру (в Photoshop)

САМЫЙ ВАЖНЫЙ ШАГ!

Переводим изображение в Индексированный режим (Изображение → Режим → Индексированные цвета).

Появится диалоговое окно Индексированные цвета. В нем, во вкладке Палитра: выбираем «Заказная…».

В открывшемся окне Таблица цветов нажимаем кнопку Загрузить…

выбираем нужный файл палитры (экспортированный ранее из Sprite Creator вместе с редактируемой картинкой)

жмем Загрузить.

Нажимаем ОК и окно Таблица цветов закроется.

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

Главное – загрузить правильную (.act) палитру!

Другие настройки (Дизеринг, Подложка, Принудительные и Эффект) можно оставить – Не показывать (по умолчанию).

Нажимаем кнопку ОК.

 

Шаг 4: Возвращаемся в RGB (в Photoshop)

Сразу после Шага 3 переводим изображение в RGB режим (Изображение → Режим → RGB).

Картинка снова станет "обычной". Области прозрачности ОСТАНУТСЯ ЧЕРНЫМИ. Это необходимо для корректного импорта в нашем методе.

 

Шаг 5: Сохраняем результат в формате BMP (в Photoshop)

Открываем диалоговое окно Сохранить как (Файл → Сохранить как...).

Указываем новое имя файла, тип файла: BMP (Должно быть уже выбрано, если всё сделано правильно) и нажимаем Сохранить.

В появившемся окне Параметры BMP выбираем Формат файла: Windows, Глубина: 32 бит (должно быть уже выбрано по умолчанию). 

Другие настройки: Уплотнение (RLE) – УБИРАЕМ галочку, если она установлена (обычно эта настройка серая и не активная).

Настройку Изменить порядок строк можно оставь как есть (галочка стоит или нет – не важно. Есть рекомендации галочку убрать, но у меня и с галочкой все работает).

А вот в меню Дополнительные режимы я даже и не лез. Нажимаем кнопку ОК.

 

Шаг 6: Собираем спрайт (в Sprite Creator)

Снова открываем наш спрайт-файл (.spr) в Sprite Creator (File → Open…) выбираем файл и жмем Открыть.

В открывшемся окне появятся три вкладки default, guibig и guismall.

Снова выбираем guibig (как наш пример).

Далее, импортируем новую картинку взамен старой (Image → Import to → Layer 1)

выбираем сохраненный ранее файл BMP (см. Шаг 5) и жмем Открыть.

Если всё сделано правильно, и новая картинка заменила собой старую, то при необходимости меняем настройки позиции изображения кнопками Left/ Right и Тор/ Down в Image position.

Внимание! Если появились сообщения «Too many colors in layer’s palette!» или «Wrong bitmap type!» значит что-то пошло не так и была допущена ошибка, скорее всего была применена другая палитра). Возвращаемся к Шагу 3 и перепроверяем, что мы точно загрузили нужный файл палитры (.act) и сделали все действия правильно. А также, проверяем, что в Sprite Creator мы загружаем ту же самую палитру, что и в исходном спрайте (в программе должен быть открыт спрайт, из которого мы вытаскивали картинку для редактирования и её палитру).

Это критично для соответствия цветов и прозрачности!

 

Шаг 7: Сохраняем спрайт (в Sprite Creator)

Сохраняем наш спрайт-файл (.spr) в Sprite Creator (File → Save As...) указываем имя файла (желательно новое, чтобы не перезаписать оригинальный файл) и жмем Сохранить.

Всё! Готово!

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

Удачи в редактировании спрайтов и модостроении!

Всем привет!

Предлагаю подробный руководство по редактированию спрайтов.

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

Надеюсь, мой опыт будет полезен для вас. Удачи в модостроении!

Если возникнут вопросы, обращайтесь — помогу.

Изменено 22 июня пользователем sedjii