Создаем 8-битную пиксельную графику с помощью Photoshop — часть 1
В этой статье я расскажу, как в Photoshop CC / CS6 создать несколько различных игровых спрайтов. Для этого мы используем пиксельную графику:
Настройки Photoshop
1. Создайте новый квадратный документ со сторонами от 20 до 100 пикселей ( в зависимости от того, насколько большой спрайт ). Я буду работать с холстом 50 на 50 пикселей:
- Ширина: 50 пикселей;
- Высота: 50 пикселей;
- Разрешение: 72 точек / дюйм;
- Цветовой режим: RGB ( 8-бит );
- Содержимое фона: Прозрачный.
2. Продолжим наш урок пиксельной графики. Выберите инструмент « Карандаш » ( в выпадающем меню инструмента «Кисть» ) и установите размер кисти в 1 пиксель. Выберите инструмент « Ластик » и задайте для него размер — 1 пиксель, Режим — Карандаш :
3. Чтобы показать, где на холсте будут располагаться пиксели графики, мы включим сетку. В разделе Редактирование> Установки> Направляющие , сетка и фрагменты настройте параметры сетки. Задайте для сетки отображение каждого пикселя ( деление — 1 пиксель ). Нажмите кнопку « ОК », а затем включите сетку, чтобы вы могли ее видеть. Перейдите в Показать > Показать> Сетка :
4. Еще одно изменение, вернитесь в Настройки > Общие и измените интерполяцию изображения на « По соседним пикселям (сохраняет четкие края) »:
Теперь все готово, чтобы мы могли приступить к созданию пиксельной графики!
Создание персонажа
Мы начнем с создания спрайта одиночного персонажа.
1. Начнем с файла размером 50 на 50 пикселей, который мы создали. Я добавлю фоновый слой со сплошным цветом. После этого мы сможем видеть сетку.
В нижней части палитры слоев нажмите на иконку, которая выглядит как наполовину заполненная окружность. Выберите параметр « Цвет » и задайте для нового слоя нейтральный цвет заливки:
2. Добавьте новый прозрачный слой поверх этого слоя заливки цветом. Перейдите в Слой> Новый> Слой или просто нажмите иконку с загнутым листом в меню в нижней части палитры слоев.
3. Давайте создадим тело нашего персонажа. Выберем основной цвет кожи. Я использую цвет #f2cb9f :
4. С помощью инструмента « Карандаш » нарисуйте тело персонажа игры с пиксельной графикой. Я хочу сделать тело как можно более простым, а затем в конце подкорректировать его. Мы добавим больше деталей, когда создадим основную форму.
Подсказка: Для каждого нового элемента добавляйте дополнительный слой, чтобы иметь возможность вернуться позже и откорректировать.
Подсказка: Если хотите создать прямую линию, кликните один раз в том месте, где вы хотите ее начать, а затем, удерживая нажатой клавишу Shift , кликните в месте, где хотите завершить линию. Photoshop автоматически создаст прямую линию между двумя точками.
Вы можете создавать тело, как вам нравится. Вот, как это сделала я:
- Нажмите один раз на холсте карандашом размером 15 пикселей, чтобы создать голову;
- Создайте треугольник ( направленный вниз ), это будет грудь, и нарисуйте сверху от него шею ( с помощью карандаша с размером 3 пикселя );
- Создайте туловище с помощью другого треугольника ( направленного вверх ) снизу от треугольника груди;
- Нарисуйте ноги из нижней части треугольника туловища;
- Поставьте « точки » в тех местах, где будут заканчиваться руки. Одна рука у персонажа будет поднята вверх, а другая опущена. Удерживая нажатой клавишу Shift , кликните мышью по краю плеча, чтобы соединить плечо и конец руки;
- Добавьте кисти рук и ступни ног персонажа игры с пиксельной графикой;
- Теперь можете добавить или стереть некоторые пиксели, чтобы скорректировать форму тела. Я добавила немного больше объема в ногах, чтобы сделать шею и тело толще и немного округлила плечи.
5. Теперь мы добавим одежду, волосы и лицо. Используйте базовую форму тела как шаблон, чтобы создать одежду. Я хочу добавить шесть новых слоев для рубашки, брюк, обуви, волос, лица и мелких деталей:
6. Файл Photoshop так, как он есть на текущий момент.
7. На данном этапе урока пиксельной графики нашего парня уже можно было бы назвать завершенным, но я хочу добавить больше глубины с помощью света и тени.
Дополнительный шаг, добавление теней:
Создадим сведенную копию всех слоев. Для этого отключите видимость слоя заливки цветом ( нажмите на иконку глаза слева от миниатюры слоя ), затем нажмите Command-Option-Shift-E (Mac) или Ctrl-Alt-Shift-E (PC) . Это автоматически создаст сведенную копию всех видимых слоев поверх остального стека слоев.
Теперь я предлагаю поместить слои в отдельную папку и отключить ее видимость. Чтобы быстро сгруппировать слои, выберите их и кликните по ним, а затем нажмите Ctrl / Option -G :
8. Добавьте новый слой и измените его режим смешивания. Режим смешивания можно задать с помощью выпадающего меню в верхней части палитры слоев, слева от параметра непрозрачности. По умолчанию в этой программе для пиксельной графики он установлен на « Нормальный ».
Я хочу выбрать режим смешивания « Мягкий свет », потому что это хорошо затемнит цвета, которые я использовала для персонажа. При выбранном новом слое ( я назову его « Shading « ), удерживая нажатой клавишу Alt , кликните по слою, расположенному ниже ( сведенному слою персонажа ), чтобы создать маску. Таким образом, все, что вы рисуете на слое “ Shading ” будет видно в пределах маски слоя “ Character ”:
9. Зарисуйте области слоя « Shading » черным карандашом. При текущем режиме смешивания черный цвет будет затемнять цвет под ним. Красный цвет рубашки станет темно-красным, зеленый цвет волос станет темно-зеленым и так далее.
Подсказка: Если затенение является слишком жестким, измените режим смешивания или непрозрачность слоя. Если хотите добавить больше оттенков затененных цветов, создайте новые слои « Shading » с различной непрозрачностью.
В конце у меня получилось два слоя теней: первый с непрозрачностью 25%, а второй с непрозрачностью 45%:
10. Если хотите добавить светлые участки, создайте новый слой “ Highlighting ” так же, как мы добавили слой « Shading «, только установите режим смешивания « Перекрытие » и используйте белый карандаш.
11. После того, как вы будете удовлетворены видом своего 8-битного персонажа, пора сохранить окончательный спрайт в файл PNG . Но сначала мы должны обрезать холст, чтобы он плотно прилегал к изображению персонажа игры с пиксельной графикой и не содержал дополнительного пространства по краям. Это позволит нам уменьшить размер файла. Выключите видимость слоя заливки цветом, а затем перейдите в Изображение> Тримминг и задайте для параметра « На основе » значение – « Прозрачные пиксели ». Нажмите кнопку « ОК »:
12. Перейдите в меню Файл> Сохранить как…> Формат: PNG
У нас получился крохотный персонаж размеров 30 на 45 пикселей в файле PNG:
Если хотите, чтобы изображение было больше, перейдите в Изображение> Размер изображения , и задайте для параметра « Ресамплинг » значение « По соседним пикселям (четкие края) ».
Подводя итоги:
Мы начали с нескольких основных установок Photoshop , чтобы было проще создавать пиксельную графику. Мы задали для параметра « Интерполяция изображения » значение « Соседние пиксели », а для деления сетки — 1 пиксель. Затем мы использовали « Карандаш » и « Ластик » в режиме « Карандаш » соответственно.
Мы выбрали основной цвет с помощью палитры цветов и нарисовали базовую фигуру. По мере добавления новых деталей, создали несколько слоев, чтобы все было организованным, и можно было в случае чего вернуться и исправить что-нибудь. В качестве дополнительного шага с помощью Command-Option-Shift-E (Mac) или Ctrl-Alt-Shift-E (PC) создали сведенную копию всех слоев. Добавили темные и светлые участки с помощью различных слоев и измененных режимов наложения и / или непрозрачности. Наконец, подрезали холст спрайта и сохранили его в формате PNG .
В следующей части этого руководства, я возьмусь за создание других графических элементов фэнтези игры: врага, оружия, а также элемента здоровья.
Приложение 8Bit Photo Lab превратит ваши фото в олдскульный пиксель-арт
Это приложение для Android делает из обычных фотоснимков модные 8-битные изображения.
Разобраться в 8Bit Photo Lab сможет любой, кто имел дело с Instagram или другими приложениями для обработки фотографий. Принцип работы здесь в точности такой же: загружаем фото, применяем к нему фильтр, подкручиваем кое-какие детали и загружаем результат в Сеть.
Фильтры в 8Bit Photo Lab преобразуют фото так, как оно выглядело бы на культовых компьютерах и старых видеоадаптерах:
- Commodore PET — персональный компьютер, который выпускался с 1977 по 1982 год.
- CGA — первая цветная графическая карта от IBM PC.
- GameBoy — легендарная игровая консоль от Nintendo.
- Apple II — первый «яблочный» ПК, который появился на свет в 1978 году.
В бесплатной версии 8Bit Photo Lab доступно 12 фильтров. Pro-версия за 139 рублей даёт доступ к ещё 8 фильтрам, среди которых есть NES, ZX Spectrum и Commodore 64.
Фильтр можно настроить и самостоятельно, например изменить разрешение. Для пиксель-арта это целый художественный метод. Также меняется палитра: можно выбрать из 21 бесплатного варианта, включая VGA, 6-bit RGB, Commodore 16, CPC 6128 от компьютера Amstrad CPC.
Можно применить дизеринг. В результате цветовая палитра как бы расширяется за счёт изменения цвета соседних пикселей. Соотношение сторон пикселя также поддаётся изменению.
Гикам стоит попробовать функцию Hardware Limitations. Она группирует пиксели так, как это сделали бы старые ПК, учитывая их возможности. Правда, из 24 вариантов бесплатных всего два.
Но самый лютый эффект — Glitch. Приложение эмулирует разные ошибки графических адаптеров.
Есть в 8Bit Photo Lab и классические инструменты редактирования: настройка контрастности, яркости, насыщенности, кроп. Можно наложить текст, иконки, смайлики или сделать рамку.
8Bit Photo Lab — классное приложение, которое должно быть в арсенале каждого, кто неравнодушен к олдскульной кибертематике. Причём даже в бесплатном варианте это функциональный и забавный редактор.
Инструкция как рисовать Pixel-art(пиксель-арт) для Minecraft в программе MinecraftStructurePlanner
Недавно я с трудом нашел эту чудную программу MinecraftStructurePlanner, которая позволяет быстро, легко, и, главное, качественно нарисовать пиксель-арт в Minecraft.
В программе есть и другие функции: постройка мостов и зданий, но их я не трогал, речь идет только о Pixel-art.
Как я уже сказал, я давно искал программу для планирования пиксель-арта для майнкрафт, или хотя бы программу для перевода картинок в пиксель-арт.
Несколько слов о дополнительных функциях программы, в ней можно задать блоки из Minecraft с помощью которых программа и выполнить рисунок.
Можно выбрать разрешение картинки в игре, например высота 100, ширину она подберет сама.
Программа покажет, сколько понадобится ресурсов для постройки данного пиксель-арта.
Программа импортирует рисунок схему в специальный файл, который вы позже другой программой такой как MCEdit, вставить в мир Minecraft, то есть даже строить ничего не придется, изготовили, залили, наслаждаетесь.
Саму программу качайте на этой странице MinecraftStructurePlanner
Теперь по самой технологии изготовления пиксель-арта:
•1. Находим не сложный рисунок, допустим такой:
Простой рисунок, цвета черный и желтый, самое то для начала.
•2. Открываем программу (она между прочим написана на джаве и вы не запустите ее если у вас не стоит джава машина).
•3. Первым делом нам надо отредактировать палитру, в нашей картинке используется всего 2 цвета, черный и желтый, поэтому разумно сделать палитру и черной шерсти и кубов золота (оно ярче).
Важно отобрать только нужные блоки, так как программа не идеальна, и картинка тоже, в итоге много где могут вылезти ненужные блоки, например, земля или прочее, вы сами в этом убедитесь, когда выберете полную палитру.
Для этого открываем эту вкладку и выбираем выделенный пункт:
•4. Видим данную картину:
Жмем New и называем его например 2, и добавляем туда блоки золота и черную шерсть.
•5. Палитра готова, теперь заходим в раздел для пиксель-арта
•6. Готово, теперь справа добавляем необходимую картинку и выбираем необходимую высоту рисунка в игре (я выбрал 100, ширина выставилась автоматически).
•7. Все готово, теперь жмем кнопку Generate (под картинкой, где выставляли размер) и получаем картинку в пиксель-арте, но она еще не в блоках игры.
•8. Далее жмем кнопку перевода картинки в пиксель-арт из блоков Minecraft:
•9. Вот и все, пиксель-арт готов:
•10. Если вас что то не устраивает, вы можете вручную изменить каждый блок на любой другой, выберете его на палитре и ткните в нужный блок.
•11. Можно посмотреть 3D модель картинки, как она будет выглядеть в игре, для этого нажмите 3D Projection:
•12. Смотрим на результат.
•13. Сколько нужно ресурсов для постройки?
Всё видно, понадобится 6646 блоков черной шерсти и 3749 золотых блоков.
•14. Сохраняем готовую картинку
Заходим в File — Export
•15. Выбираем, формат готового выходного файла
Можно выбрать Plan Image File — вы сохраните файл картинку формата «png».
Можно выбрать McEdit file — как вы и поняли, это файл для работы в программе McEdit.
Дальше я расскажу как вставить готовый файл в мир при помощи McEdit.
Тут я не буду расписывать все очень подробно, открываем программу, и открываем нужный мир.
Управление происходит кнопками W, A, S, D ( движение вперед, назад, вправо, влево соответственно).
Так же правая кнопка мыши позволяет крутить камеру.
Теперь жмете импорт (в меню снизу картинка крана) и добавляете готовый файл (разрешением schematic).
Как видите картинка уже есть в мире, ее необходимо развернуть и вставить.
Кнопки управления написаны левее, методом тыка разберетесь.
Картинка у меня вышла очень большая, и она наполовину ушла в землю.