Как улучшить пиксель арт
Обновлено: 06.07.2024
Пиксельная графика появилась на самом рассвете игровой индустрии. Тогда компьютеры не обладали внушающей производительностью и использовать графику более высокого уровня не могли. С ростом производительности росла и графика в играх. Появилось 3D. А сегодня на презентации PlayStation 5 люди спорят, настоящий ли человек в кадре или это графика? Остаются ли ярко выраженные пиксели актуальными на сегодня или же теперь они пережитки прошлого?
Как уже было сказано выше, история развивалась далеко не в пользу пикселей. Научный прогресс буквально погубил этот вид искусства и оставил только в узких кругах. Но с появлением телефонов всё поменялось. Опять появились не сильно производительные устройства, а игры туда добавить надо. Где экран с низким разрешением, там и пиксельная графика в играх.
В современных реалиях Pixel art устоялся благодаря появлению такого жанра, как инди и просто бешеному успеху игр MineCraft и Terraria. Инди-разработчики используют пиксельную графику по причине низкого порога вхождения (обучиться её созданию довольно легко) и скорости рисования (если объекты не сильно детализированы). И благодаря играм, упомянутым выше, люди уже привыкли к такому Pixel art и будут относиться к игре лояльно.
Перейдём к созданию Pixel art. Тут всё очень просто и, если вы когда-нибудь строили дома в MineCraft, вы быстро вольётесь в пиксельную графику. Также стоит упомянуть, что все написанное ниже — это лишь советы и рекомендации, а никак не правила. Если у вас получается отличный рисунок, вопреки всему написанному ниже, то кому какое дело к тем словам?
Существует огромное количество различных решений, направленных конкретно на пиксельную графику. Множество из них неплохие, а некоторые даже хорошие и удобные в использовании. Но всё-таки большая часть художников отдаёт своё предпочтение фотошопу. Он привычен и удобен, собственно, как и все программы от Adobe.
Фотошоп — это универсальное программное обеспечение, а значит его нужно немного видоизменять в различных ситуациях. В первую очередь нужно создать новый документ. Выставить настройки можно таким же образом, как показано на фото ниже…
На созданном проекте нужно подготовить сетку. Для начала открываем окно “Просмотр”, находим пункт “Показать”, включаем сетку и отключаем пиксельную сетку. Стандартная пиксельная сетка не очень удобная, поэтому мы настроим свою.
Перейдём к самой настройке. Открываем окно “Редактирование”, находим пункт “Настройки” в самом низу окна. В открывшемся окне выбираем “Направляющие, сетка и фрагменты…”.
Далее выставляем основные параметры, как показано на фото ниже.
Слева сверху этого же окна выбираем пункт “Основные”. Выставляем интерполяцию изображения на “По соседним пикселям…”. Таким образом наш арт не будет сглаживаться.
Также для того, чтобы белые пиксели было хорошо видно, на панели слоёв кликаем два раза на фон и делаем его слоем. Затем нажимаем сочетание клавиш Ctrl + U. В открывшемся окне выставляем яркость примерно на -32.
Знаю, вам уже не терпится начать, но не стоит торопиться. Во всяком случае вам хватит времени на пару рекомендаций для более красивого рисунка. Чаще всего, после их применения рисунок становится красивее и приятнее. В конце мы разберём процесс создания, основываясь на этих рекомендациях.
● Не делать соединяющие пиксели
Для наглядности я нарисовал доллар на фотографии ниже. Красным цветом выделены те самые соединяющие пиксели. Интуитивно кажется, что они делают арт плавнее и соответственно красивее. Но, зачастую, это не так.
● Убирать изломы
Продолжим на том же долларе. Изломы — это пиксели, которые явно выбиваются из общего строя. На фото они отмечены красным цветом. Невероятно красивым доллар не стал, но теперь он выглядит ровнее и аккуратнее. Чтобы избежать изломов, делайте выход из прямой на скругление плавно.
● Создавайте новый слой
В начале работы не забывайте создавать новый слой и работать на нём. Не нужно рисовать прямо на фоне. Также научитесь работать со слоями. Этот навык значительно ускорит и облегчит вашу работу.
Наконец то пришло время для самого пиксель арта. Почему именно трезубец? На самом деле, он просто первый пришёл в голову… Ну и в его форме есть интересные моменты.
* Форма
На этом этапе мы просто подбираем основной цвет, от которого будем отталкиваться в последующих этапах. Выбираем и заливаем всю форму.
Здесь нам нужно определиться с позицией источника освещения. После выбираем наш основной цвет, делаем его немного темнее и рисуем тени. На ручке трезубца тоже можно было создать тень, но этого я делать не стал. Ведь рукоятка слишком узкая (1 px, не считая обводки) и с взятой мною позицией источника света было бы сложно выбрать между тенью и бликом…
* Блики
Ставить их нужно на самые освещённые места. Чтобы выбрать цвет, также берём основной, но делаем его не темнее, а светлее. Блики не должны быть слишком заметными, ибо тогда они будут выбиваться из общей картины.
* Обводка
Возвращаемся к ней. Для интерактивных предметов её лучше оставлять. Её можно сделать не чёрную, а, например, коричневую, как в случае с трезубцем. Для не интерактивных предметов (фоновые вещи, с которыми нельзя взаимодействовать) можно вообще убирать обводку.
Dithering — это интересный приём смешивания цветов в пиксельной графике. Зачастую он используется в ретро играх или же играх пытающихся походить на ретро. Иногда он способен значительно улучшить арт, но применять его тоже нужно уметь. Рассказать больше о Dithering не могу, так как сам его не использую.
Используют пиксельную графику в основном в играх, так как сложно представить другой медиа продукт в таком стиле…
Нужно изменить размер пиксельной графики? Узнайте, как увеличить ваши художественные работы и сохранить четкие и четкие формы с помощью Photoshop!
Из этого урока вы узнаете, как получить отличные результаты при изменении размера пиксельной графики в Photoshop! Пиксель-арт отличается от стандартных изображений и создает уникальные проблемы при изменении его размера. Обычно, увеличивая изображение и добавляя больше пикселей, Photoshop старается не давать результату выглядеть блочным и пикселированным, смешивая пиксели вместе и сглаживая все.
Наряду с изменением размера пиксельной графики, я также использую эту же технику для изменения размера скриншотов, используемых в моих уроках. И вы можете использовать его для изменения размера любой графики, где вам нужно сохранить четкие, резкие края или читаемый текст. Чтобы получить наилучшие результаты на этом уроке, вы захотите использовать Photoshop CC , но подойдет любая версия Photoshop.
Я буду использовать этого маленького персонажа пиксельной графики, который я скачал с Adobe Stock :
Это урок 7 в моей серии «Изменение размера изображения» . Давайте начнем!
Как увеличить пиксель арт в фотошопе
Вот персонаж, открытый в фотошопе. И, как вы можете видеть, он выглядит довольно маленьким:
Шаг 1. Откройте диалоговое окно «Размер изображения»
В Photoshop CC диалоговое окно содержит удобное окно предварительного просмотра слева, а также параметры размера изображения справа:
Просмотр текущего размера изображения
Текущий размер изображения находится вверху. Рядом со словом « Размеры» мы видим, что мое изображение довольно маленькое, с шириной и высотой всего 500 пикселей:
Шаг 2: Включите опцию Resample
Допустим, мне нужно сделать своего персонажа намного больше. Может быть, я хочу использовать его в качестве плаката или в качестве фона рабочего стола. Для этого мне нужно увеличить изображение, добавив больше пикселей.
Во- первых, убедитесь , что Resample параметр в диалоговом окне в повернулся на . Если Resample выключен, размеры в пикселях заблокированы, и все, что мы можем изменить, это размер печати . Чтобы добавить или удалить пиксели, Resample должен быть включен:
Шаг 3: Введите процент в поля Ширина и Высота
Это увеличит размеры в пикселях с 500 пикселей на 500 пикселей до 2000 пикселей на 2000 пикселей :
Изменение размера окна предварительного просмотра
Обратите внимание, что, увеличив ширину и высоту в 4 раза, изображение теперь слишком велико, чтобы поместиться в маленьком окне предварительного просмотра. Чтобы увеличить окно предварительного просмотра, я увеличу само диалоговое окно «Размер изображения», перетаскивая нижний правый угол наружу. Затем я нажму и перетащу в окно предварительного просмотра, чтобы центрировать изображение внутри него:
Проблема с изменением размера пиксельной графики
Все идет нормально. Либо это? Если мы посмотрим на иллюстрацию в окне предварительного просмотра, мы увидим, что она выглядит неправильно. Вместо того, чтобы края вокруг фигур выглядели четкими и резкими, они выглядят немного мягкими и размытыми:
И если мы посмотрим поближе, то увидим ореолы вокруг фигур, особенно в областях с более высокой контрастностью. Я увеличу изображение, используя кнопки масштабирования в нижней части окна предварительного просмотра. И здесь, на уровне увеличения 400%, мы можем ясно видеть ореолы, особенно вокруг глаз персонажа:
Однако обратите внимание, что если вы щелкнете мышью по обложке в окне предварительного просмотра и удержите ее, ореолы исчезнут, а края будут выглядеть очень острыми, чего мы и хотим:
Но как только вы отпустите кнопку мыши, вы снова увидите ореолы:
Метод интерполяции изображения
Опция интерполяции находится справа от опции Resample. И по умолчанию установлено значение « Автоматически» :
Обычно автоматическая настройка подходит, потому что она позволяет Photoshop выбрать лучший метод для работы. Но проблема в том, что Photoshop предполагает, что мы меняем стандартное изображение с большим количеством мелких деталей. Таким образом, он выбирает метод, который заставил бы стандартное изображение выглядеть хорошо. Но тот же самый метод заставляет пиксельную графику и подобные типы графики выглядеть плохо. Поэтому при повышении дискретизации пиксельной графики нам нужно самим выбрать другой метод интерполяции.
Шаг 4: Установите метод интерполяции на Nearest Neighbor
Чтобы повысить качество иллюстрации без усреднения пикселей, необходим метод интерполяции « Ближайший сосед» :
Как только вы выбираете Nearest Neighbor, изображение в окне предварительного просмотра выглядит четким и четким! И если вы щелкните и удержите в окне предварительного просмотра, а затем отпустите кнопку мыши, вы увидите, что на этот раз ничего не происходит. Иллюстрации выглядят одинаково четко до и после применения метода интерполяции.
Это потому, что теперь это один и тот же метод интерполяции оба раза. Photoshop всегда добавляет пиксели, изначально используя Nearest Neighbor. Но теперь, когда мы сами выбрали Nearest Neighbor, он не использует ничего другого, что могло бы ухудшить пиксель-арт:
Шаг 5: Нажмите ОК
Когда вы будете готовы пробовать иллюстрацию, нажмите кнопку «ОК», чтобы принять ваши настройки и закрыть диалоговое окно «Размер изображения»:
И теперь мой маленький герой пиксельной графики выглядит намного больше, но все же он сохраняет тот же блочный, пиксельный вид, который мы ожидали:
Прежде чем идти дальше, давайте кратко суммируем шаги для получения наилучших результатов при расширении пиксельной графики в Photoshop.
- 1. Откройте диалоговое окно «Размер изображения» («Изображение»> «Размер изображения»).
- 2. Установите для параметра Ширина и высота значение Процент, а затем для получения наилучших результатов выберите процент, кратный 100 (200%, 300%, 400% и т. Д.).
- 3. Измените метод интерполяции на «Ближайший сосед».
- 4. Нажмите ОК.
Как изменить размер пиксельной графики до точного размера
Например, увеличив частоту дискретизации на 400%, я увеличил ширину и высоту с 500 до 2000 пикселей:
Но что, если мне нужно, чтобы ширина и высота были немного меньше, например, 1600 пикселей? Если бы я увеличил частоту дискретизации моего изображения 500 px x 500 px на 300%, его ширина и высота были бы равны только 1500 пикселям, оставив его все еще слишком маленьким. А повышение частоты дискретизации на 400% сделало его слишком большим. Что мне действительно нужно было что-то среднее. В этом случае вам нужно изменить размер изображения в два этапа .
Шаг 1. Отобразите пиксельную графику в процентах.
Во-первых, увеличьте образец пикселя, используя процентное значение, кратное 100, что сделает его больше, чем вам нужно. В моем случае, я уже сделал это, увеличив частоту дискретизации на 400%, поэтому первый шаг сделан.
Шаг 2. Повторно откройте диалоговое окно «Размер изображения»
Затем измените его размер во второй раз, на этот раз, чтобы уменьшить его до точных размеров в пикселях. Для этого снова откройте диалоговое окно «Размер изображения», зайдя в меню « Изображение» и выбрав « Размер изображения» :
Шаг 3: Оставьте опцию Resample включенной
Убедитесь , что Resample вариант еще на так что вы можете изменить количество пикселей:
Шаг 4: Установите ширину и высоту в пикселях
Введите нужный вам размер в пикселях в поля Ширина и Высота . Я установлю их на 1600 пикселей:
Шаг 5: Установите метод интерполяции на Автоматический
И наконец, хотя метод интерполяции Nearest Neighbor отлично работает для пиксельной графики с повышенной дискретизацией , вы не хотите использовать его при понижающей дискретизации. Вместо этого для получения самых резких результатов измените метод интерполяции обратно на автоматический . Это вернет управление обратно в Photoshop, а при уменьшении количества изображений автоматически выберет Bicubic Sharper :
Когда вы будете готовы изменить размеры иллюстрации до точного размера, нажмите кнопку ОК, чтобы закрыть диалоговое окно, и все готово:
И там у нас это есть! Вот как можно добиться наилучших результатов при изменении размера пиксельной графики, снимков экрана или аналогичной графики в Photoshop! В следующем и последнем уроке этой серии мы рассмотрим лучший способ увеличения изображений в Photoshop CC с помощью новой функции, известной как Preserve Details 2.0 !
Или посмотрите предыдущие уроки этой серии:
И не забывайте, что все наши учебники теперь доступны для скачивания в формате PDF !
Прошлая статья от Блейка Рейнольдса (Dinofarm Games) удивила многих людей в индустрии, что разработчики действительно гонятся за пиксель артом. Похоже на то, что основная публика действительно не понимает этого стиля и не может увидеть всех тех стараний, которые были в него вложены. Тем не менее, не все пиксель художники чувствуют этот путь. Мы поговорили с Полом Конвеем – пиксель артовым фриланс-художником из Ирландии про лучшие методы работы с пиксель артом и его использовании в видеоиграх.
Я художник-фрилансер по видеоиграм, работающий под началом DoomCube. Как профессионал, я работал в игровой индустрии около 10 лет. Ещё будучи ребёнком я хотел работать над видеоиграми, вдохновлённый такими классическими играми как Another World и Flashback. Я начал работать в индустрии с ныне уже несуществующей студией Nephin Games, которая специализировалась на старых телефонных играх на Java. Первоначально я был студентом по направлению 3Д анимация, однако в Ирландии рабочих мест в игровой индустрии было мало, и тут Nephin объявила о вакансии художника. Я сделал всё возможное, чтобы научиться элементарному пиксель-арту и тому, как он применяется в работе, и всё это всего за одну ночь. Видимо получилось достаточно хорошо, так как они наняли меня после собеседования, но это уже другая история.
Я работаю на Aporkalyspe Now вместе с местной ирландской студией по инди-играм Tribal City Interactive. Игра, над которой мы работаем - это дань уважения вещам из 80-ых и 90-ых, рождённая от моей бездарной молодости, когда я смотрел глупые фильмы и играл в видеоигры. Это любовная история, посвящённая простому воображению ребёнка эпохи VHS-кассет, когда роботы-трансформеры были самой крутой штукой когда-либо придуманной человеком и один главный герой, имея лишь один пистолет, мог остановить целую армию врагов.
История игры базируется на «отдалённом будущем 1996-го». Учёный экспериментировал над беконом, чтобы улучшить и без того его идеальный вкус, и по случайности создал расу супер-свиней, которые быстро поднялись на вершину пищевой цепочки. Свиньи начали свой крестовый поход на человечество, чтобы отомстить людям за их непримиримые для свиней вкусовые пристрастия. И только один человек нашёл в себе силы дать им бой – Стэйк Блистерин [1] .
Она нацелена на мобильный рынок, и текущий прототип игры представляет собой бесконечную бродилку, смешанную с кучей пушек и больших взрывов. Её разработка застопорилась из-за некоторых обстоятельств (сейчас я работаю на Gunman Taco Truck вместе с Джоном Ромеро работавшим над Doom и моя собственная игра The Darkside Detective находится в разработке), но в свободное от проекта время (и от общения с народом) мы пришли к выводу, что нужно вернуться к более традиционному шутеру в стиле Metal Slug и Contra и опубликовать его в Steam. Мы надеемся выложить больше контента, как только наш рабочий график придёт в норму.
[1] Если перевести на русский, то получится Пупырчатый Стэйк))
Обаяние Пиксель Арта
Я склоняюсь к пиксель арту, как к своему избранному средству рисования. Я вижу в нём стилистический выбор, который на мой взгляд, может помочь реализовать уникальные визуальные образы, которые скрыты в сердце видеоигр, гораздо лучше чем большинство продвинутых движков для ААА 3Д игр.
Пиксель арт всегда будет обладать ретро очарованием, которое привлекает пользователей определённого возраста, но я ещё вижу в нём средство, которое помогает найти искусство через ограничения. Для меня это словно видеоигровой импрессионизм. Существует достаточно иконичных и важных деталей в разных стилях пиксель арта, и я верю, что игроки мысленно переносят на них произведения искусства или перспективы красоты. Для меня эта трансформация словно магия, которая оставляет определённое количество информации в воображении пользователей, что, в конечном счете, очень полезно. И ни сколько не обидно, что пиксель арт, когда сделан правильно выглядит чертовски крутым.
Лучшие инструменты для пиксель художника
Основные мои инструменты для создания пиксель арта это Photoshop и Graphics Gale.
Photoshop очень гибок, когда дело доходит до рисования пиксельной графики. Графический планшет хорошо совместим с Gale и имеет плавный ход работы для редактирования изображений в целом. Это особенно удобно для определения главных цветовых палитр, и он также имеет несколько удобных инструментов для быстрого редактирования и фильтрации вашего пиксель арта, доводя результаты до невообразимых высот.
Graphics Gale особенно хорош в анимации по временной линии (time line). Его основной набор инструментов очень похож на Photoshop, когда дело доходит до пиксель арта, в частности Gale имеет поддержку слоёв, но кое в чём другом он сильно превосходит Photoshop, это когда дело доходит до покадровой анимации, которая является одной из основ пиксель арта. Существуют и другие более специализированные средства для пиксель арта, которые нравятся многим художникам, но Gale и Photoshop это мой выбор.
Другой инструмент, который я нахожу очень полезным, когда создаются концепты это Adobe Flash. Он очень хорош для некоторой сложной игровой анимации, позволяя мне смешать вместе пре-анимированные спрайты в более случайной манере. Я нахожу это очень полезным в деле продажи игровых концептов, так как они, таким образом, выглядят гораздо живее, чем статичные скриншоты простых концептов.
Анимация в пикселях может быть жёсткой, особенно из-за того, что большая часть пиксель артовых спрайтов по своей природе небольшого размера и с очень маленьким разрешением, чтобы передать информацию.
Я думаю, что наиболее важная вещь, которую нужно запомнить, когда анимируешь таким маленьким и ограниченным средством, это фокусировка на сильных ключевых кадрах. Если ключевые позы вашего персонажа достаточно сильные, то это может помочь передать его действия и мотивацию почти без дополнений. Кадры появляются на экране на очень малое время, поэтому вам необходимо вложить этот информационный снимок прямо в глаза зрителю, с максимально возможной ясностью. Ограничения по железу, особенно на мобильных устройствах, сокращают количество доступных для персонажа кадров, таким образом сильные ключевые кадры жизненно необходимы, для того чтобы передать весь эффект с небольшим количеством промежуточных кадров.
Вторичная анимация, такая как отдача от оружия, перекрывающаяся одежда и движение волос добавляется к основной анимации, так что она должна быть продуманной и к месту. Она добавляют физических эффектов от спрайтов действия к игроку. Вторичная анимация показывает вес и гравитацию, действующие на персонажа в окружающем его мире. Без них, анимация даже с сильными ключевыми кадрами, обычно смотрится плоско.
Хитрости и трюки пиксель арта.
Игровой арт в целом, живёт и умирает благодаря своей читабельности. Если игрок не может легко различить соответствующие объекты и персонажей на фоне или в окружающих их предметах, то у вас проблема. Я думаю (или скорее считаю), что сильные контрасты по свету и цвету очень важны для читабельности, и если вы можете выразить их на раннем этапе вашего дизайна, то убережёте себя от кучи дополнительной работы. Если же вы не можете с первого взгляда понять что происходит в кадре, то вам следует вернуться на шаг назад и выяснить, как решить эту проблему.
Когда цвет используется в пиксель арте, то очень рекомендуется использовать его в ограниченном количестве. Некоторые из наиболее чистейших пиксель художников гордятся тем, что они могут достичь сильного изображения с невероятно малым количеством цветов и это просто сногсшибательно, когда они достигают таких высот. Когда многие художники начинают пикселлизировать (и я был в их числе), они склонны использовать огромное количество разных теней в своих работах. Но результат в таком случае может получиться грязным и с недостатком той ясности, которая склонна для более продуманных работ.
Мы можем использовать все цвета, которые только захотим, но использование большого количества цветов, в результате добавит вам очень много работы по анимированную ваших спрайтов. Вы в буквальном смысле должны поставить каждый пиксель на своё место, а использование большой палитры цветов приведёт вас к большому количеству работы, когда вы начнёте рисовать много кадров. Современные компьютеры сегодня могут обрабатывать большое разнообразие цветов, так что было бы очень неплохо использовать в своей палитре как можно большее количество оттенков. Я твёрдо верю, что большая часть современного пиксель арта выигрывает от своих цветовых решений. Мы больше не ограничены в ярких цветах как это было раньше, так что меня радует тот факт, что я могу использовать цвет в своих работах самыми разнообразными способами. Одно удовольствие работать с палитрой из насыщенных и ненасыщенных цветов, которую я использую в Aporkalypse Now.
Другая более новая техника подразумевает, использование современных эффектов с ретро-пикселями. В адвенчуре The Darkside Detective, над которой я сейчас работаю, у меня появилась возможность соединить вместе богатые градиенты цвета и света с одной стороны и очень простой стиль пиксель арта с другой. В результате получилась игра которая выглядит очень классически, часто сравниваемая с классикой от Lucas Arts нашими сторонниками, но с настроением и атмосферой которые, трудно было достичь используя только традиционные для пиксель арта техники. Такой стиль не подходит для каждой игры, но попал в яблочко для The Darkside Detective.
Сильные силуэты персонажей играют очень важную роль. Я всегда стараюсь определить приблизительную форму персонажа до того как я пойду дальше к деталям и цвету. Ясные силуэты позволяют отличить один предмет от другого, или одного персонажа от другого, и по быстрой игровой природе большинства игр, когда мы не можем точно разглядеть детали вблизи, это очень хорошо помогает игрокам идентифицировать объект на экране быстро и безошибочно. Силуэты также помогают передать настроение или намерения персонажей, и в крохотном мире пиксельных спрайтов они стоят многого от того, что вы не можете физически положить на экран.
Как я и говорил ранее, читабельность очень важна. Вещи, представленные на экране не должны бороться за ваше внимание. Самым важным является нахождение баланса, чтобы удостовериться, что игроки смогут принять участие в действии на экране.
Пиксель арт и геймплей
Пиксель арт может оказывать влияние на дизайн уровней, потому что он основан на плитках в большинстве жанров, но в другом случае я не думаю, что он может влиять на решения в геймплее больше чем другие формы 2Д искусства. Современные механики геймплея, неплохо работают в пиксель арт играх, но добавленная несовместимость современного игрового стиля и визуальных ретро решений придаёт определённый шарм, который я нахожу очень привлекательным.
В этой статье я расскажу, как нарисовать пиксель арт в Photoshop CC / CS6. Для этого мы используем пиксельную графику:
Создайте новый квадратный документ со сторонами от 20 до 100 пикселей ( в зависимости от того, насколько большой спрайт ). Я буду работать с холстом 50 на 50 пикселей:
Еще одно изменение, вернитесь в Настройки > Общие и измените интерполяцию изображения на « По соседним пикселям (сохраняет четкие края) »:
Теперь все готово, чтобы мы могли приступить к созданию пиксельной графики!
Мы начнем с создания спрайта одиночного персонажа.
Начнем с файла размером 50 на 50 пикселей, который мы создали. Я добавлю фоновый слой со сплошным цветом. После этого мы сможем видеть сетку.
В нижней части палитры слоев нажмите на иконку, которая выглядит как наполовину заполненная окружность. Выберите параметр « Цвет » и задайте для нового слоя нейтральный цвет заливки:
Добавьте новый прозрачный слой поверх этого слоя заливки цветом. Перейдите в Слой> Новый> Слой или просто нажмите иконку с загнутым листом в меню в нижней части палитры слоев.
С помощью инструмента « Карандаш » нарисуйте тело персонажа игры с пиксельной графикой. Я хочу сделать тело как можно более простым, а затем в конце подкорректировать его. Мы добавим больше деталей, когда создадим основную форму.
Подсказка: Для каждого нового элемента добавляйте дополнительный слой, чтобы иметь возможность вернуться позже и откорректировать.
Подсказка: Если хотите создать прямую линию, кликните один раз в том месте, где вы хотите ее начать, а затем, удерживая нажатой клавишу Shift , кликните в месте, где хотите завершить линию. Photoshop автоматически создаст прямую линию между двумя точками.
Вы можете создавать тело, как вам нравится. Вот, как это сделала я:
Рисунок 12: Порядок создания частей тела, начиная с головыТеперь мы добавим одежду, волосы и лицо. Используйте базовую форму тела как шаблон, чтобы создать одежду. Я хочу добавить шесть новых слоев для рубашки, брюк, обуви, волос, лица и мелких деталей:
Рисунок 13: Добавление деталей персонажа, начиная с рубашки
Файл Photoshop так, как он есть на текущий момент.
На данном этапе урока пиксельной графики нашего парня уже можно было бы назвать завершенным, но я хочу добавить больше глубины с помощью света и тени.
Дополнительный шаг, добавление теней
Создадим сведенную копию всех слоев. Для этого отключите видимость слоя заливки цветом ( нажмите на иконку глаза слева от миниатюры слоя ), затем нажмите Command-Option-Shift-E (Mac) или Ctrl-Alt-Shift-E (PC) . Это автоматически создаст сведенную копию всех видимых слоев поверх остального стека слоев.
Теперь я предлагаю поместить слои в отдельную папку и отключить ее видимость. Чтобы быстро сгруппировать слои, выберите их и кликните по ним, а затем нажмите Ctrl / Option -G :
Добавьте новый слой и измените его режим смешивания. Режим смешивания можно задать с помощью выпадающего меню в верхней части палитры слоев, слева от параметра непрозрачности. По умолчанию в этой программе для пиксельной графики он установлен на « Нормальный ».
В конце у меня получилось два слоя теней: первый с непрозрачностью 25%, а второй с непрозрачностью 45%:
Это идеальный размер для мобильных устройств, где предпочтение отдается компактной графике.
Если хотите, чтобы изображение было больше, перейдите в Изображение> Размер изображения , и задайте для параметра « Ресамплинг » значение « По соседним пикселям (четкие края) ».
Подводя итоги
В следующей части этого руководства, я возьмусь за создание других графических элементов фэнтези игры: врага, оружия, а также элемента здоровья.
Читайте также: