Как рисовать пиксель арт в фотошопе — часть 1
В этой статье я расскажу, как нарисовать пиксель арт в Photoshop CC / CS6. Для этого мы используем пиксельную графику:
Как создать пиксель арт — настройки Photoshop
Создайте новый квадратный документ со сторонами от 20 до 100 пикселей ( в зависимости от того, насколько большой спрайт ). Я буду работать с холстом 50 на 50 пикселей:
- Ширина: 50 пикселей;
- Высота: 50 пикселей;
- Разрешение: 72 точек / дюйм;
- Цветовой режим: RGB ( 8-бит );
- Содержимое фона: Прозрачный.
Рисунок 1: Новый файл в Photoshop 50 на 50 пикселей
Рисунок 2: Новый пустой холст в Photoshop 50 на 50 пикселей
Продолжим наш урок пиксельной графики. Выберите инструмент « Карандаш » ( в выпадающем меню инструмента «Кисть» ) и установите размер кисти в 1 пиксель. Выберите инструмент « Ластик » и задайте для него размер — 1 пиксель, Режим — Карандаш :
Рисунок 3: Инструмент «Карандаш» находится в выпадающем меню инструмента «Кисть»
Рисунок 4: Измените размер инструмента «Карандаш» на 1 пиксель
Рисунок 5: Измените параметры инструмента «Ластик»
Чтобы показать, где на холсте будут располагаться пиксели графики, мы включим сетку. В разделе Редактирование> Установки> Направляющие , сетка и фрагменты настройте параметры сетки. Задайте для сетки отображение каждого пикселя ( деление — 1 пиксель ). Нажмите кнопку « ОК », а затем включите сетку, чтобы вы могли ее видеть. Перейдите в Показать > Показать> Сетка :
Рисунок 6: Настройте установки сетки
Рисунок 7: Задайте для сетки отображение каждого пикселя
Рисунок 8: Включите сетку
Еще одно изменение, вернитесь в Настройки > Общие и измените интерполяцию изображения на « По соседним пикселям (сохраняет четкие края) »:
Рисунок 9: Изменение интерполяции изображения на «По соседним пикселям»
Теперь все готово, чтобы мы могли приступить к созданию пиксельной графики!
Как сделать пиксель арт — создание персонажа
Мы начнем с создания спрайта одиночного персонажа.
Начнем с файла размером 50 на 50 пикселей, который мы создали. Я добавлю фоновый слой со сплошным цветом. После этого мы сможем видеть сетку.
В нижней части палитры слоев нажмите на иконку, которая выглядит как наполовину заполненная окружность. Выберите параметр « Цвет » и задайте для нового слоя нейтральный цвет заливки:
Рисунок 10: Ярлык для добавления нового однородного слоя находится в меню в нижней части палитры слоев
Добавьте новый прозрачный слой поверх этого слоя заливки цветом. Перейдите в Слой> Новый> Слой или просто нажмите иконку с загнутым листом в меню в нижней части палитры слоев.
Давайте создадим тело нашего персонажа. Выберем основной цвет кожи. Я использую цвет #f2cb9f :
Рисунок 11: Выбор основного цвета кожи
С помощью инструмента « Карандаш » нарисуйте тело персонажа игры с пиксельной графикой. Я хочу сделать тело как можно более простым, а затем в конце подкорректировать его. Мы добавим больше деталей, когда создадим основную форму.
Подсказка: Для каждого нового элемента добавляйте дополнительный слой, чтобы иметь возможность вернуться позже и откорректировать.
Подсказка: Если хотите создать прямую линию, кликните один раз в том месте, где вы хотите ее начать, а затем, удерживая нажатой клавишу Shift , кликните в месте, где хотите завершить линию. Photoshop автоматически создаст прямую линию между двумя точками.
Вы можете создавать тело, как вам нравится. Вот, как это сделала я:
- Нажмите один раз на холсте карандашом размером 15 пикселей, чтобы создать голову;
- Создайте треугольник ( направленный вниз ), это будет грудь, и нарисуйте сверху от него шею ( с помощью карандаша с размером 3 пикселя );
- Создайте туловище с помощью другого треугольника ( направленного вверх ) снизу от треугольника груди;
- Нарисуйте ноги из нижней части треугольника туловища;
- Поставьте » точки » в тех местах, где будут заканчиваться руки. Одна рука у персонажа будет поднята вверх, а другая опущена. Удерживая нажатой клавишу Shift , кликните мышью по краю плеча, чтобы соединить плечо и конец руки;
- Добавьте кисти рук и ступни ног персонажа игры с пиксельной графикой;
- Теперь можете добавить или стереть некоторые пиксели, чтобы скорректировать форму тела. Я добавила немного больше объема в ногах, чтобы сделать шею и тело толще и немного округлила плечи.
Рисунок 12: Порядок создания частей тела, начиная с головы
Теперь мы добавим одежду, волосы и лицо. Используйте базовую форму тела как шаблон, чтобы создать одежду. Я хочу добавить шесть новых слоев для рубашки, брюк, обуви, волос, лица и мелких деталей:
Рисунок 13: Добавление деталей персонажа, начиная с рубашки
Рисунок 14: У меня получился один слой заливки цветом, один слой тела и шесть слоев деталей
Файл Photoshop так, как он есть на текущий момент.
На данном этапе урока пиксельной графики нашего парня уже можно было бы назвать завершенным, но я хочу добавить больше глубины с помощью света и тени.
Дополнительный шаг, добавление теней
Создадим сведенную копию всех слоев. Для этого отключите видимость слоя заливки цветом ( нажмите на иконку глаза слева от миниатюры слоя ), затем нажмите Command-Option-Shift-E (Mac) или Ctrl-Alt-Shift-E (PC) . Это автоматически создаст сведенную копию всех видимых слоев поверх остального стека слоев.
Теперь я предлагаю поместить слои в отдельную папку и отключить ее видимость. Чтобы быстро сгруппировать слои, выберите их и кликните по ним, а затем нажмите Ctrl / Option -G :
Рисунок 16: Неиспользуемые слои сгруппируйте в папку. Я также вновь включила видимость слоя заливки
Добавьте новый слой и измените его режим смешивания. Режим смешивания можно задать с помощью выпадающего меню в верхней части палитры слоев, слева от параметра непрозрачности. По умолчанию в этой программе для пиксельной графики он установлен на « Нормальный ».
Я хочу выбрать режим смешивания « Мягкий свет », потому что это хорошо затемнит цвета, которые я использовала для персонажа. При выбранном новом слое ( я назову его » Shading » ), удерживая нажатой клавишу Alt , кликните по слою, расположенному ниже ( сведенному слою персонажа ), чтобы создать маску. Таким образом, все, что вы рисуете на слое “ Shading ” будет видно в пределах маски слоя “ Character ”:
Рисунок 17: Режим смешивания «Мягкий свет»
Зарисуйте области слоя » Shading » черным карандашом. При текущем режиме смешивания черный цвет будет затемнять цвет под ним. Красный цвет рубашки станет темно-красным, зеленый цвет волос станет темно-зеленым и так далее.
Подсказка: Если затенение является слишком жестким, измените режим смешивания или непрозрачность слоя. Если хотите добавить больше оттенков затененных цветов, создайте новые слои » Shading » с различной непрозрачностью.
В конце у меня получилось два слоя теней: первый с непрозрачностью 25%, а второй с непрозрачностью 45%:
Рисунок 18: Добавление глубины с помощью дополнительных слоев теней
Если хотите добавить светлые участки, создайте новый слой “ Highlighting ” так же, как мы добавили слой » Shading «, только установите режим смешивания « Перекрытие » и используйте белый карандаш.
После того, как вы будете удовлетворены видом своего 8-битного персонажа, пора сохранить окончательный спрайт в файл PNG . Но сначала мы должны обрезать холст, чтобы он плотно прилегал к изображению персонажа игры с пиксельной графикой и не содержал дополнительного пространства по краям. Это позволит нам уменьшить размер файла. Выключите видимость слоя заливки цветом, а затем перейдите в Изображение> Тримминг и задайте для параметра « На основе » значение – « Прозрачные пиксели ». Нажмите кнопку « ОК »:
Рисунок 19: Обрежьте холст вокруг изображения
Перейдите в меню Файл> Сохранить как. > Формат: PNG
У нас получился крохотный персонаж размеров 30 на 45 пикселей в файле PNG:
Это идеальный размер для мобильных устройств, где предпочтение отдается компактной графике.
Если хотите, чтобы изображение было больше, перейдите в Изображение> Размер изображения , и задайте для параметра « Ресамплинг » значение « По соседним пикселям (четкие края) ».
Рисунок 20: Измените значение параметра «Ресамплинг» при изменении размеров
Подводя итоги
Мы начали с нескольких основных установок Photoshop , чтобы было проще создавать пиксельную графику. Мы задали для параметра « Интерполяция изображения » значение « Соседние пиксели », а для деления сетки — 1 пиксель. Затем мы использовали « Карандаш » и « Ластик » в режиме « Карандаш » соответственно.
Мы выбрали основной цвет с помощью палитры цветов и нарисовали базовую фигуру. По мере добавления новых деталей, создали несколько слоев, чтобы все было организованным, и можно было в случае чего вернуться и исправить что-нибудь. В качестве дополнительного шага с помощью Command-Option-Shift-E (Mac) или Ctrl-Alt-Shift-E (PC) создали сведенную копию всех слоев. Добавили темные и светлые участки с помощью различных слоев и измененных режимов наложения и / или непрозрачности. Наконец, подрезали холст спрайта и сохранили его в формате PNG .
В следующей части этого руководства, я возьмусь за создание других графических элементов фэнтези игры: врага, оружия, а также элемента здоровья.
Пиксельные кисти
Узнайте, как рисовать пиксельными кистями и как управлять ими в Adobe Fresco.
Воспользуйтесь значками Пиксельные кисти и Живые кисти в панели инструментов, чтобы получить доступ к коллекции кистей для рисования растровых иллюстраций и скетчей.
Вы также можете импортировать любимые кисти для Photoshop из коллекции Кайла Т. Вебстера (Kyle T. Webster).
Рисуйте, как вам удобно — к вашим услугам тысячи пиксельных кистей
Как выбрать и настроить пиксельную кисть
Чтобы выбрать и настроить пиксельную кисть, сделайте следующее:
Дважды коснитесь значка Пиксельные кисти , чтобы просмотреть список кистей в разных категориях и выбрать понравившуюся кисть.
Нажмите Цвет, чтобы открыть цветовую панель и отрегулировать цвет и прозрачность.
На панели «Параметры инструмента» в нижней части панели инструментов можно изменить размер кисти, а также количество краски и сглаживание, если потребуется.
Нажмите значок Настройки кисти для настройки параметров кисти, таких как интервал, угол, режим наложения, нажим стилуса и многое другое.
Когда вы начнете рисовать пиксельной кистью, значок на миниатюре слоя будет указывать, что это пиксельный слой.
Примечание.
При использовании пиксельных кистей вы можете добавить диапазон микс-кистей для естественного наложения и смешивания нескольких цветов.
Работа с инструментом «Линия»
Создавайте линии и стрелки с помощью инструмента «Линия» в Photoshop.
Чтобы научиться рисовать линии и стрелки в Photoshop, посмотрите следующее короткое видео.
Чтобы понять этот этап в подробностях, прочтите статью полностью. Для получения дополнительной информации начните с выбора любого из этих разделов:
- Рисование линии
- Параметры режима «Фигуры»
- Параметры режима «Пиксели»
- Дополнительные настройки
- Рисование стрелки
Рисование линии
Инструмент Линия позволяет нарисовать на холсте линию по двум точкам. Линии можно рисовать как векторные фигуры, контуры или пиксели. Выберите режим Фигура , если требуется провести неразрушающую масштабируемую линию, которую можно будет редактировать в дальнейшем. Выберите режим Пиксели при работе с растрированным содержимым, таким как пиксельная графика.
Выполните эти быстрые действия, чтобы нарисовать линию.
Выбор инструмента Линия
На панели инструментов щелкните и удерживайте значок группы инструментов Фигура (), чтобы вызвать различные варианты инструмента «Фигура». Выберите инструмент Линия .
Настройка ширины линии
Режим «Фигура»:
Задайте ширину линии фигуры с помощью параметров «Вес » на панели параметров. Для достижения наилучших результатов на панели «Параметры обводки» задайте параметру Выравнивание значение По центру либо Снаружи .Толщина обводки не отображается, если выбрано выравнивание Внутри .
Задайте цвет и толщину обводки на панели параметров.Можно также задать ширину линии без обводки.
A. Установка толщины хода B. Установка ширины линии
Режим «Контур» или «Пиксели»
Установите ширину пиксельной линии на панели «Параметры», задав требуемое значение для параметра Толщина .
Примечание.
Режим Пиксели и параметр Толщина недоступны для инструмента Линия в версиях Photoshop 22.0–22.2.
Щелчок и перетаскивание
Щелкните точку на холсте и перетащите в нужное место, чтобы нарисовать линию.Чтобы ограничить угол линии и сделать его кратным 45 градусам, удерживайте клавишу «Shift» при перетаскивании и рисовании линии.
Параметры режима «Фигура»
A. Можно настроить различные атрибуты и свойства инструмента, выбрав «Параметры обводки». B. Другие параметры
Режим «Линия»
- Чтобы создать линию, выберите Фигура .
Цвет заливки
- Выберите цвет из списка или на палитре цветов. Также для выбора цвета можно щелкнуть образец цвета в разделе Внешний вид панели Свойства . Этот цвет будет использоваться для заливки центра стрелки.
Цвет обводки
- Выберите цвет из списка или на палитре цветов. Также для выбора цвета можно щелкнуть образец цвета в разделе Внешний вид панели Свойства . Этот цвет используется для линии и контура стрелки.
Ширина обводки
- Введите ширину обводки в пикселях.
Толщина
- Введите Толщину линии в пикселях.
Другие параметры
- Набор : выберите сплошную линию, штриховую линию или пунктирную линию, либо щелкните Дополнительные параметры , чтобы создать пользовательский набор линии.
- Выравнивание : выберите По центру или Снаружи . Толщина обводки не отображается, если выбрано выравнивание Внутри .
- Концы : можно выбрать одну из трех форм концов линии: Срезанные , Скругленные или Квадратные . Форма концов линии определяет форму начала и конца линии.
- Штриховая линия : настройте внешний вид штриховой линии, задав количество штрихов и пробелов в повторяющемся мотиве.
Параметры режима «Пиксели»
Режим «Линия»
- Чтобы создать линию на основе пикселей, выберите Пиксели .
- Выберите требуемый режим наложения. Значение по умолчанию — Обычный
Непрозрачность
- Установите значение параметра Непрозрачность от 1 до 100 %.
- Установите нужную ширину линии в пикселях.
Дополнительные настройки
Щелкните по значку шестеренки () на панели параметров инструмента «Линия» и выберите Элементы управления интерактивными фигурами , чтобы включить элементы управления трансформированием холста. Это позволяет поворачивать линии на холсте и изменять их размер. При этом также изменяется размер стрелок.
Также можно настроить параметры «Трансформирование» и «Внешний вид» на панели Свойства . Ее можно вызвать в через главное меню: Окно > Свойства.
Рисование стрелки
Чтобы создать стрелку, просто добавьте на конце линии стрелку. После создания линии и настройки цвета и ширины штриха щелкните по значку шестеренки () на панели параметров инструмента «Линия». Чтобы добавить стрелку в начале линии, установите флажок Начало ; чтобы добавить стрелку в конце линии, установите флажок Конец . Чтобы добавить стрелки на обоих концах, установите флажки Начало и Конец.
- Задайте параметры стрелки Ширина и Длина в пикселях. В версии 22.0 и более поздних стрелки определяются в абсолютных пикселях, а не как процент толщины, так как теперь можно задать нулевую толщину линии.
- Задайте параметр Кривизна , он определяет степень изогнутости самой широкой части стрелки в месте, где она встречается с линией. Задайте параметру «Кривизна» значение от –50% до +50%.
Рисование и редактирование фигур
Узнайте, как создавать фигуры на холсте и использовать функцию «Свойства интерактивной формы» для взаимодействия с фигурами.
Поиск справки в приложении
Чтобы найти ответы на свои вопросы, просмотреть учебные пособия и получить дополнительные сведения о создании фигур, воспользуйтесь панелью «Новые возможности».
В Photoshop предусмотрена удобная функция рисования и редактирования векторных фигур. Также можно преобразовать векторную фигуру в растровую или пиксельную. Чтобы узнать подробности, прочитайте статью полностью. Темы этой статьи:
- Создание фигур
- Рисование произвольной фигуры
- Доступ к устаревшим пользовательским фигурам
- Заливка и обводка фигур
- Рисование звезды с помощью инструмента «Многоугольник»
- Рисование фигур в форме сердца в Photoshop
Создание фигур
Выполните эти быстрые действия для создания фигур в Photoshop:
Выберите инструмент «Фигура» На панели инструментов, нажмите и удерживайте значок группы инструментов Фигура (), чтобы вызвать различные варианты инструмента «Фигура» — Прямоугольник, Эллипс, Треугольник, Многоугольник, Линия и Произвольная фигура . Выберите инструмент для рисования нужной фигуры.
Настройка параметров инструментов группы «Фигура» На панели параметров инструментов группы «Фигура» можно задать следующие настройки:
- Режим : задайте режим для инструмента «Фигура» — Фигура, Контур и Пиксели .
- Заливка : выберите цвет заливки фигуры.
- Обводка : выберите цвет, ширину и тип обводки фигуры.
- Ш и В : вручную задайте ширину и высоту фигуры.
- Операции с контуром : используйте операции с контуром для настройки взаимодействия фигур друг с другом.
- Выравнивание контура : используйте этот параметр для выравнивания и распределения компонентов фигуры.
- Упорядочение контура : используйте этот параметр для настройки порядка расположения создаваемых фигур.
- Дополнительные параметры фигур и контуров : щелкните значок шестеренки () для доступа к дополнительным параметрам фигур и контуров, чтобы задать такие атрибуты, как ширина и цвет отображаемого на экране контура, и параметры соблюдения пропорций при рисовании фигур.
- Удерживайте клавишу Shift во время рисования, чтобы сделать фигуры пропорциональными.
- Выбрав слой-фигуру, используйте инструмент Перемещение , чтобы перемещать фигуру и менять ее расположение на холсте.
- Чтобы легко масштабировать, трансформировать или поворачивать фигуру, выберите Редактирование > Свободное трансформирование или нажмите клавиши Control+T (Win) / Command+T (Mac).
Редактирование свойств фигуры Можно легко редактировать свойства фигуры прямо с помощью элементов управления на холсте или с помощью раздела Свойства фигуры на панели Свойства . Элементы управления на холсте позволяют взаимодействовать с фигурами на более интуитивном уровне.
Можно использовать элементы управления трансформированием и скруглением на холсте для коррекции внешнего вида фигуры. Модификаторы клавиатуры будут управлять трансформированием на холсте так же, как при использовании инструмента Трансформирование в Photoshop. Можно изменять радиус всех углов прямоугольника одновременно: удерживайте клавишу Alt (Win) или Option (Mac) во время перетаскивания для изменения радиуса одного угла. У треугольников изменяются все углы, даже если перетащить только один из них. С легкостью поворачивайте фигуру с помощью маркера поворота на холсте, который появляется при наведении курсора мыши на фигуру. Щелкните значок сброса () на панели «Свойства», чтобы сбросить сразу все изменения.
Нарисовав фигуру, можно щелкнуть любую точку холста, чтобы вызвать всплывающее диалоговое окно Создание фигуры и изменить параметры фигуры.