Как в фотошопе рисовать по пикселям: Как рисовать пиксель арт с помощью Photoshop

Изометрический пиксель арт в Фотошоп / Creativo.one

Если в детстве вам нравилось играть с конструктором Лего (или вы продолжаете с ним играть даже будучи взрослым), вас наверняка заинтересует изометрический пиксель арт. Он может зависеть от техники и быть похожим больше на точную науку, чем на иллюстрирование. Зато в таком художестве нет 3D перспективы, можно перемещать элементы окружающей среды с максимальной простотой.

Мы создадим персонажа как логическую точку отсчета для пиксель арта, поскольку он поможет определить пропорции для большинства остальных предметов, которые мы возможно будем создавать. Однако для начала нужно узнать некоторые основы изометрического пиксель арта, а потом переходить к созданию персонажа; если вы не хотите изучать основы и рисовать куб, переходите к пункту 3. Теперь начнем.

1. Пиксельные линии

Эти линии являются основой для самого распространенного (и интересного) стиля изометрического пиксель арта, стиля который мы будем использовать в уроке:

Они представляют собой два пикселя вдоль на каждый пиксель вниз. Такие линии выглядят относительно мягкими и используются для квадратных поверхностей:

Самые часто используемые структуры линий (как на рисунке ниже) будут работать хорошо, но рисунок получится более угловатым и грубым с каждым увеличением шага:

Для контраста вот несколько неравномерно структурированных линий:

 

Очень угловатые и выглядят не

красиво. Избегайте их использования.

2. Объемы

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

Создайте новый документ в Photoshop с разрешением 400 x 400 px.

Я люблю открывать дополнительное окно для того же файла, используя меню Окно > Упорядочить > Новое окно/lessons. (Window > Arrange > New Window…). Это позволяет, работая при увеличении 600% следить за результатом в окне с зумом 100%.

Использование сетки — ваше дело, но иногда она кажется мне более назойливой, чем полезной.

Давайте приблизим документ и создадим одну из линий 2:1

Я предпочитаю использовать 5% серый цвет вместо черного, чтобы потом добавить тени (черного цвета и с низкой непрозрачностью) и иметь возможность выбрать каждый цвет отдельно при помощи волшебной палочки.

Есть несколько способов нарисовать линию:

1. Используя инструмент Линия (Line Tool) с режимом Пиксели (Pixels), снятой галочкой Сглаживание (Anti-alias) и толщиной

1px. Во время рисования подсказка с углом наклона должна показывать 26,6°. На деле инструмент Линия нельзя назвать удобным, он создает неровные линии, если угол не точный.

2. Нужно создать выделение 20 х 40 px, затем выбрать Карандаш  (Pencil Tool) толщиной в 1px и нарисовать точку в левом нижнем углу выделения, после этого, удерживая нажатой клавишу Shift кликнуть в правом верхнем углу. Photoshop автоматически создаст новую линию между двумя точками. Если потренироваться, таким способом можно создавать ровные линии без выделения.

3. Нужно нарисовать карандашом два пикселя, выбрать их, нажать Ctrl + Alt, после этого перетянуть выделение на новое место так, чтобы пиксели сошлись на углах. Также можно перемещать выделение стрелками на клавиатуре, удерживая Alt. Такой метод называется Alt-смещение (Alt-Nudge).

Вот мы и создали первую линию. Выделите ее и переместите как в шаге 3 или просто скопируйте и вставьте, переместив новый слой вниз. После этого отразите вторую линию по горизонтали через меню Редактирование > Трансформирование > Отразить по горизонтали (Edit > Transform > Flip Horizontal). Я использую эту функцию так часто, что даже сделал для нее клавиатурное сокращение!

Теперь давайте объединим наши линии:

Затем, снова примените Alt-смещение, отразите копию по вертикали и объедините две половины, чтобы закончить нашу поверхность:

Пришло время добавить «третье измерение». Выполните Alt-смещение квадратной поверхности и переместите ее на 44px вниз:

Совет: Если при перемещении стрелками удерживать Shift, выделение сместится на 10 пикселей вместо одного.

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

Теперь уберите ненужные линии в нижней части куба. Чтобы начать раскрашивание нашей фигуры выберите любой цвет (желательно светлого оттенка) и заполните им верхний квадрат.

Теперь увеличьте яркость выбранного цвета на 10% (я рекомендую использовать HSB слайдеры на контрольной панели), чтобы нарисовать более светлые углы вдоль передней части нашего цветного квадрата. Из-за того, что мы немного обрезали куб, эти светлые линии будут выглядеть красивее, находясь над черными гранями (вместо того, чтобы заменять их) как на рисунке ниже:

Теперь нужно удалить черные грани. Используйте трюк из второго способа рисования линий для ластика (который должен быть настроен на обычный инструмент Ластик (Eraser Tool), режим Карандаш (Pencil Mode), толщина 1px).

Выберите цвет верхнего квадрата при помощи Пипетки (Eyedropper Tool). Чтобы быстро выбрать этот инструмент, во время рисования карандашом или заливки нажмите клавишу

Alt. Используйте полученный цвет пипетки, чтобы заполнить вертикальную линию посередине куба. После этого уменьшите яркость цвета на 15% и заполните левую грань куба полученным цветом. Уменьшите яркость еще на 10% для правой грани:

Наш куб завершен. Он должен выглядеть чисто и относительно гладко при зуме 100%. Можем продолжать.

3. Добавим персонажа

Стиль персонажа может быть совершенно разным, вы вольны изменять пропорции или элементы по своему желанию.

Как правило, я делаю тонкое тело и немного большую голову. Худое тело персонажа помогает сохранять линии прямыми и простыми.

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

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

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

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

Дорисуйте волосы и верх головы, затем смягчите углы. Вы должны получить что-то похожее:

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

Добавьте пиксель для верхней части уха и измените форму головы, если хотите; головы обычно рисуют уже в районе шеи:

Нарисуйте линию от подбородка — это будет грудь. Начало шеи будет в районе уха, несколько пикселей вниз и пара пикселей по диагонали, чтобы у нашего персонажа были видны плечи:

Теперь в месте, где заканчиваются плечи, добавим вертикальную линию длиной в 12 пикселей, чтобы сделать внешнюю сторону руки, а внутренняя сторона будет на два пикселя влево. Соедините линии внизу парой пикселей, чтобы получилась рука/кулак (в нашем случае нет детализации, поэтому не обращайте внимание на этот элемент) и сразу над местом, где заканчивается рука, добавьте линию 2:1, которая будет выступать в роли талии, затем дорисуйте линию груди и получите законченную верхнюю часть тела. Другую руку персонажа не видно, но это будет выглядеть нормально, так как она закрыта туловищем.

У вас должно получиться что-то на подобии этого:

Само собой вы можете использовать любые пропорции, которые вам нравятся; я предпочитаю нарисовать разные варианты рядом перед тем, как решить что лучше.

Теперь для нижней части туловища мы добавим еще несколько вертикальных линий. Мне нравится оставлять 12 пикселей между подошвами и талией. Ноги рисовать очень просто, нужно лишь сделать одну ногу немного длиннее, что позволит персонажу выглядеть более объемно:

Теперь мы добавим цвет. Подобрать хороший цвет кожи всегда трудно, поэтому если вы хотите использовать такой же, как в этом уроке, его код #FFCCA5. Подбор цветов для остальных элементов не должен стать проблемой. После этого определите длину рукавов, положение разреза рубашки, ее стиль. Теперь добавьте темную полоску, чтобы отделить рубашку от тела. Я предпочитаю делать все декоративные элементы светлее черного (особенно когда много элементов находятся на одном уровне, например от рубашки до кожи или штанов). Это позволяет получить необходимый контраст, при этом изображение не будет слишком грубым.

Вы можете добавить световые эффекты почти на каждую цветную зону. Избегайте слишком большого количества теней или использования градиентов. Нескольких пикселей более (10% или 25%) светлого или темного цвета вполне достаточно, чтобы заставить элементы выглядеть объемными и убрать плоскость иллюстрации. Если вы хотите добавить яркий цвет для зоны, которая уже имеет 100% яркости, попробуйте уменьшить его насыщенность. В некоторых случаях (например, при рисовании волос) это может стать хорошим способом изменить оттенки.

Вы можете попробовать много вариантов волос. Вот несколько идей:

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

Теперь все, что осталось сделать — поместить оба элемента вместе и оценить, как они смотрятся в одной обстановке:

Если вы хотите экспортировать свое творение, PNG станет идеальным форматом.

Вот и все, работа сделана!

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

Автор: René Alejandro Hernández

Переводчик: Шаповал Алексей

Источник: design.tutsplus.com

Как нарисовать пиксель-арт по фото в Photoshop

Введение

В этом уроке вы узнаете, как превратить фотографию человека в пиксельное искусство как вымышленный персонаж аркадной игры с начала 90-х годов.

Джеймс Май — aka Smudgethis — разработал этот стиль в 2011 году для музыкального видео для дабстеп-рок-акта. Первый хит Nero’s, Me & You — где он создал анимацию, чтобы показать старую игру с участием Nero’s два участника. Игра была 2D-платформером с ритмикой с 16-битной графикой, подобной Double Dragon, но намного превосходящей 8-битные игры ретро-классики, такие как Super Mario Bros.

Чтобы создать этот стиль, персонажи все равно должны быть блочными, но более сложными, чем старые игры. И хотя вам нужно использовать ограниченную цветовую палитру для достижения внешнего вида, помните, что в этих играх по-прежнему было 65 536 цветов.

Здесь Джеймс показывает вам, как создать персонаж на основе фотографии, используя простую цветовую палитру и инструмент «Карандаш».

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

После завершения ознакомьтесь с этим 16-разрядным учебником анимации After Effects, где Джеймс покажет вам, как взять этого персонажа в AE, оживить его и применить эффекты ретро-игры.

Шаг 1

Откройте Руководство по анимации (16 бит ) .psd и 18888111.jpg (или фото по вашему выбору) для использования в качестве основы для персонажа. Полноформатная фотография профиля будет работать лучше всего и поможет с получением цветовых палитр и стилей для вашей 16-битной фигуры.

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

Шаг 2

Используя инструмент Rectangular Marquee (M), выберите головку с вашей фотографии и копию (Cmd /Ctrl + C) и вставьте ее (Cmd /Ctrl + V) в Руководство по анимации (16 бит) .psd.

Масштабируйте изображение, чтобы оно соответствовало, пропорционально. Вы заметите, что по мере того, как размеры PSD очень малы, изображение мгновенно начнет рисовать пиксель.

Шаг 3

Создайте новый слой и нарисуйте контур одним пиксельным черным карандашом (B), используя предоставленную в нем руководство по анимации и фотографию в качестве основы. \ п

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

Шаг 4

Используя инструмент Eyedropper ( I), проведите образец самой темной области тона кожи на фотографии и создайте маленький квадрат цвета. Сделайте это еще три раза, чтобы создать четырехцветную палитру тон кожи.

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

Лучше всего хранить все элементы вашего произведения искусства или разные слои, поскольку это позволяет легко повторно использовать их на других фигурах. Это особенно полезно для «baddies», поскольку большинство 16-битных игр используют очень похожие цифры. Например, у одного бадди может быть красная рубашка и нож, в то время как более поздняя идентична, кроме синей рубашки и пистолета.

Шаг 5

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

Шаг 6

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

Шаг 7

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

Шаг 8

Чтобы проверить последовательность анимации в порядке, откройте панель анимации в Photoshop и убедитесь, что в данный момент только первый кадр анимации. Вы можете добавить новые кадры и включить и выключить слои, чтобы сделать свою анимацию, но самым быстрым способом является использование команды «Сделать кадры из слоев» в всплывающем меню панели (вверху справа).

Первый кадр — пустой фон, поэтому выберите его и нажмите на значок корзины панели (внизу), чтобы удалить его.

инструкция по применению / Блог компании Playgendary / Хабр

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

Фон

Пиксель-арт — форма цифрового художественного искусства, в котором изменения вносятся на уровне пикселей. В основном он ассоциируется с графикой видеоигр 80-х и 90-х годов. Тогда художникам приходилось учитывать ограничения памяти и низкого разрешения. Сейчас пиксель-арт все еще популярен в играх и как художественный стиль в целом, несмотря на возможность создания реалистичной 3D-графики. Почему? Даже если не брать в расчет ностальгию, создание крутой работы в таких жестких рамках — приятный и стоящий челлендж.

Порог вхождения в пиксель-арте сравнительно низкий по сравнению с традиционным артом и 3D-графикой, что привлекает инди-разработчиков. Но это вовсе не означает, что будет просто доделать игру в этом стиле. Я видел много инди-девелоперов с пиксель-арт метроидваниями на краудфандинговых платформах. Они думали, что закончат все за год, но на самом деле им нужно было еще лет шесть.

Metal Slug 3 (Arcade). SNK, 2000 год

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

В общем, я предупредил.

А теперь немного о моем стиле: в основном я рисую пиксель-арт для видеоигр и в них же нахожу вдохновение. В частности я фанат Famicom/NES, 16-битных консолей и аркад 90-х годов. Пиксель-арт моих любимых игр того времени можно описать как яркий, уверенный и чистый (но не слишком), его нельзя назвать жестким и минималистичным. В этом стиле я работаю сам, но вы легко можете применять идеи и техники из этого туториала для создания совершенно других вещей. Изучайте работы разных художников и создавайте пиксель-арт, который нравится вам!

Софт

Базовые цифровые инструменты для пиксель-арта — Зум (Zoom) и Карандаш (Pencil), чтобы размещать пиксели. Также вам пригодятся Линия (Line), Фигура (Shape), Выбрать (Select), Переместить (Move) и Заливка (Paint Bucket). Есть много бесплатного и платного ПО с таким набором инструментов. Я расскажу про самые популярные и те, которыми пользуюсь сам.

Paint (бесплатно)

Если у вас Windows, встроенный в нее Paint — примитивная программа, но в ней есть все инструменты для пиксель-арта.

Piskel (бесплатно)

Неожиданно функциональный редактор пиксель-арта, который запускается через браузер. Можно экспортировать работу в PNG или анимированный GIF. Отличный вариант для новичков.

GraphigsGale (бесплатно)

GraphicsGale — единственный редактор из тех, о которых я слышал, разработанный именно для пиксель-арта и включающий инструменты анимации. Его создала японская компания HUMANBALANCE. С 2017 года он распространяется бесплатно и до сих пор пользуется спросом, несмотря на рост популярности Aseprite. К сожалению, работает он только на Windows.

Aseprite ($)

Пожалуй, самый популярный редактор на данный момент. Открытый исходный код, куча возможностей, активная поддержка, версии для Windows, Mac и Linux. Если вы серьезно взялись за пиксель-арт и все еще не нашли нужный редактор, возможно, это то, что нужно.

GameMaker Studio 2 ($$+)

GameMaker Studio 2 — превосходный 2D-инструмент с хорошим редактором спрайтов (Sprite Editor). Если вы хотите создавать пиксель-арт для для собственных игр, очень удобно все делать в одной программе. Сейчас я использую этот софт в работе над UFO 50, коллекцией 50 ретро-игр: спрайты и анимации создаю в GameMaker, а тайлсеты — в Photoshop.

Photoshop ($$$+)

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

Прочее

Мой набор для пиксель-арта. Все черное, только сейчас заметил.

Графический планшет ($$+)

Рекомендую графические планшеты для любых работ с цифровыми иллюстрациями, чтобы избежать туннельного синдрома запястий. Его гораздо проще предотвратить, чем вылечить. Однажды вы почувствуете боль, и она будет только нарастать — позаботьтесь о себе с самого начала. Из-за того, что когда-то я рисовал мышкой, мне теперь тяжело играть в игры, в которых нужно нажимать на клавиши. Сейчас я использую Wacom Intuos Pro S.

Суппорт запястья ($)

Если вы не можете приобрести планшет, купите хотя бы суппорт запястья. Мне больше всего нравится Mueller Green Fitted Wrist Brace. Остальные либо слишком тугие, либо обеспечивают недостаточную поддержку. Суппорты без проблем можно заказать онлайн.

96×96 пикселей

Final Fight. Capcom, 1989 год

Приступим! Начнем со спрайта персонажа 96×96 пикселей. Для примера я нарисовал орка и поместил его на скриншот из Final Fight (картинка выше), чтобы вы понимали масштаб. Это большой спрайт для большинства ретро-игр, размер скриншота: 384×224 пикселя.

На таком большом спрайте будет легче показать технику, о которой я хочу рассказать. Также попиксельная отрисовка больше похожа на традиционные формы арта (например, рисование или живопись), с которыми вы, возможно, лучше знакомы. Освоив базовые техники, мы перейдем к спрайтам поменьше.

1. Выбираем палитру

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

Для этого туториала я буду использовать палитру из 32 цветов, которую мы создали для UFO 50. Для пиксель-арта их часто собирают из 32 или 16 цветов. Наша разработана для вымышленной консоли, которая могла бы появится где-то между Famicom и PC Engine. Можете взять ее или любую другую — туториал совсем не зависит от выбранной палитры.

2. Грубые контуры

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

3. Проработка контуров

Дорабатываем контуры: убираем лишние пиксели и сокращаем толщину каждой линии до одного пикселя. Но что именно считать лишним? Чтобы ответить на этот вопрос нужно разобраться в пиксельных линиях и неровностях.

Неровности

Нужно научиться рисовать две базовые линии в пиксель-арте: прямые и кривые. С ручкой и бумагой все сводится к мышечному контролю, но мы-то работаем с крошечными цветными блоками.

Ключ к отрисовке правильных пиксельных линий — неровности. Это единичные пиксели или небольшие сегменты, разрушающие сглаженность линии. Как я уже говорил, отдельный пиксель имеет огромное значение в пиксель-арте, поэтому неровности могут разрушить всю эстетику. Представьте, что вы проводите прямую линию на бумаге, и неожиданно кто-то ударяет по столу: неровности в пиксель-арте выглядят так же, как случайная закорючка.

Примеры:

Прямые

Кривые

Неровности появляются на кривых, когда длина сегментов линии увеличивается или уменьшается не постепенно.

Совсем избежать неровностей невозможно — во всех ваших любимых ретро-играх они есть (если, конечно, пиксель-арт состоит не исключительно из простых форм). Цель: свести неровности к минимуму, при этом показав все необходимое.

4. Применяем первые цвета

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

В нижнем левом углу я нарисовал нашего друга, знакомьтесь, это — Шар. С ним будет проще понять, что именно происходит на каждом этапе.

5. Шейдинг

Пора отобразить тени — просто добавляем более темные цвета на спрайт. Так изображение будет выглядеть объемным. Давайте предположим, что у нас один источник света, расположенный над орком левее от него. Значит, освещено будет все, что находится сверху и спереди нашего персонажа. Добавляем тени снизу справа.

Форма и объем

Если этот этап вызывает у вас сложности, представьте свой рисунок как объемные формы, а не просто линии и цвет. Формы существуют в трехмерном пространстве и могут иметь объем, который мы выстраиваем с помощью теней. Это поможет визуализировать персонажа без деталей и представить, что он сделан из глины, а не из пикселей. Шейдинг — это не просто добавление новых цветов, это процесс выстраивания формы. На хорошо проработанном персонаже детали не скрывают базовые формы: если вы прищуритесь, увидите несколько крупных кластеров света и тени.

Сглаживание (anti-aliasing, анти-алиасинг)

Каждый раз используя новый цвет, я применяю анти-алиасинг (АА). Он помогает сгладить пиксели добавляя промежуточные цвета по углам, в месте соприкосновения двух сегментов линии:

Серые пиксели смягчают «разрывы» в линии. Чем длиннее сегмент линии, тем длиннее АА-сегмент.

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

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

6. Выборочный контур

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

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

Также на этом этапе я добавил более темные тени. Получилось три градации зеленого на коже орка. Наиболее темно-зеленый цвет можно использовать для выборочного контура и АА.

7. Финальные штрихи

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

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

Создание шумов (dithering, дизеринг)

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

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

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

На нижнем градиенте мы применили дизеринг, который позволяет избежать бандинга и использует всего два цвета. Мы создаем шум разной интенсивности, чтобы имитировать градацию цвета. Эта техника очень похожа на халфтон (halftone — полутоновое изображение), применяемое на печати; а также на стипплинг (stippling — зернистое изображение) — в иллюстрации и комиксах.

На орке я применил дизеринг совсем немного для передачи текстуры. Некоторые пиксель-артисты совсем его не используют, другие — наоборот не стесняются и делают это очень умело. Мне кажется, что лучше всего дизеринг смотрится на больших участках залитых одним цветом (присмотритесь к небу на скриншоте Metal Slug, который был выше) или на тех участках, которые должны выглядеть шероховато и неровно (например, грязь). Решите сами, как его использовать.

Если хотите увидеть пример с масштабным и качественным дизерингом, изучите игры The Bitmap Brothers, британской студии 80-х годов, или игры на компьютере PC-98. Только учтите, что все они — NSFW.

Kakyusei (PC-98). Elf, 1996 год
На этом изображении всего 16 цветов!

8. Последний взгляд

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

Даже если ваш пиксель-арт не для игр, иногда стоит сказать себе: «Все уже достаточно хорошо!» И двигаться дальше. Лучший способ развития навыков — как можно больше раз пройти весь процесс целиком от начала до конца, используя как можно больше тем.

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

32×32 пикселя

Мы создали большой спрайт 96×96 пикселей первым, потому что при таком размере это больше напоминает рисование или живопись, но только пикселями. Чем меньше спрайт, тем меньше он похож на то, что должен отображать, и тем больше важен каждый пиксель.

В Super Mario Bros. глаз Марио — это всего два пикселя, расположенные один над другим. И его ухо тоже. Создатель персонажа Сигеру Миямото сказал, что усы потребовались для того, чтобы отделить нос от остального лица. Так что одна из главных черт лица Марио — не просто дизайн персонажа, но и прагматичная уловка. Что подтверждает старую мудрость — «нужда — мать изобретательности».

Основные этапы создания спрайта 32×32 пикселя нам уже знакомы: скетч, цвет, тени, дальнейшая доработка. Но в таких условиях, в качестве начального скетча я подбираю цветные фигуры вместо отрисовки контуров из-за маленького размера. Цвет играет более важную роль в определении персонажа, чем контуры. Посмотрите на Марио еще раз, у него вообще нет контуров. Интересны не только усы. Его бакенбарды определяют форму ушей, рукава показывают руки, а общая форма более-менее четко отображает все его тело.

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

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

Целая команда в сборе!

Форматы файлов

Такой результат может заставить понервничать любого пиксель-артиста

Картинка, которую вы видите — результат сохранения рисунка в JPG. Часть данных потерялась из-за алгоритмов сжатия файла. Качественный пиксель-арт в итоге будет выглядеть плохо, а вернуть его изначальную палитру будет непросто.

Для сохранения статической картинки без потери качества используйте формат PNG. Для анимаций — GIF.

Как правильно делиться пиксель-артом

Шеринг пиксель-арта в социальных сетях — отличный способ получить фидбек и познакомиться с другими художниками, работающими в том же стиле. Не забудьте поставить хэштег #pixelart. К сожалению, соцсети часто конвертируют PNG в JPG без спроса, ухудшая вашу работу. Причем не всегда понятно, почему ваша картинка была конвертирована.

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

Twitter

Чтобы PNG-файл не изменился в Twitter, используйте меньше 256 цветов или убедитесь, что ваш файл меньше 900 пикселей по длинной стороне. Я бы увеличил размер файла хотя бы до 512×512 пикселей. Причем так, чтобы масштабирование было кратно 100 (200%, а не 250%) и сохранялись резкие края (Nearest Neighbor в Photoshop).

Анимированные GIF-файлы для постов в Twitter должны весить не более 15 Мб. Картинка должна быть как минимум 800×800 пикселей, цикличная анимация должна повторяться трижды, а последний кадр должен быть вполовину короче по времени, чем все остальные — самая популярная теория. Однако, непонятно, насколько нужно выполнять эти требования, учитывая, что Twitter постоянно меняет свои алгоритмы отображения картинок.

Instagram

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

27 уроков по созданию пиксельных иллюстраций

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

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

Pixel Game Art Animated Background Tutorial in Photoshop

Pixel Game Art Design in Photoshop: Character animation & background tutorial

How create Pixel Art For Games – Tutorial – 8Bit Graphic Design

Pixel art/ Adam’s Nightmare indie game/ Drawing process

Как рисовать Пиксель Арт в Фотошопе

Speed Pixel Art #2 – A Japanese Tree

My secret way of improving fast

Pixel Art Timelapse: Necromancer Cast Animation

3 PixelArt Techniques/Common Mistakes

How To Draw Isometric Pixel Art | Photoshop Tutorial

How to make City Building background tiles

How To Pixel Art Tutorial Part 1: What Programs?

How To Pixel Art Tutorial Part 2: Basic Heart

How To Pixel Art Tutorial Part 3: Dithering

How To Pixel Art Tutorial Part 4: Form

How To Pixel Art Tutorial Part 5: Outlines

How To Pixel Art Tutorial Part 6: Pixel People

How To Pixel Art Tutorial Part 7: Sword & Sworcery

How To Pixel Art Tutorial Part 8: Background

How To Pixel Art Tutorial Part 9: Colour & Depth

How To Pixel Art Tutorial Part 10: Tile Basics

How To Pixel Art Tutorial Part 11: Character Design

How To Pixel Art Tutorial Part 12: Animation Basics

How To Pixel Art Tutorial Part 13: Base Sprite for Animation

How To Pixel Art Tutorial Part 14: Setting Up Layers

How To Pixel Art Tutorial Part 15: Idle Animation

How To Pixel Art Tutorial Part 16: Walk Cycle

Как начать делать пиксель арт #1 (RUS) | by Кирилл Евстигнеев

Руководство для Абсолютного Новичка

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

Этот гайд был поддержан на моем Патреоне! Если вам нравится то, что я делаю, то порадуйте меня своей подпиской, пожалуйста 🙂 (ВНИМАНИЕ! Это Патреон ОРИГИНАЛЬНОГО автора статьи, а не переводчика.)

Перед тем, как начнем…

Перед тем, как с открытым сердцем ворваться в мир пиксель арта, помните: пиксель арт — это лишь очередная разновидность искусства, как та же гуашь, масло, карандаш, скульптура или близкая к ней мозаика. Чтобы делать хорошие работы в пиксель арте, вам необходимо уметь рисовать. По сути, я имею в виду изучение анатомии, перспективы, светотени, основ цвета и даже историю искусства, так как все вышеуказанное нужно для создания хороших пиксельных работ.

Инструменты

Вам не нужно что-то эдакое для того, чтобы работать в пиксель арте, достаточно даже мышки и какой-нибудь бесплатной программы. Я использую маленький планшет от Wacom, очень хорошую мышку и клавиатуру; моя любимая программа — Aseprite, но вместо нее вы можете использовать все, в чем вам будет удобнее.

Вот список программ, которые чаще всего используются для пиксель артинга:

• Aseprite: Классный профессиональный редактор с кучей полезных плюшек (платный)
  (Примечание переводчика: но всегда можно скомпилировать.)
• GraphicsGale: Классика, использующаяся во множестве игр. Немножечко запутанная, но все так же с кучей полезных плюх (бесплатная)
• Piskel: Пиксельный онлайн-редактор (само собой, бесплатный)
• Photoshop: Мощный редактор изображений, который, по сути, не приспособлен для пиксель арта, но вы можете его настроить нужным образом (платный)

Aseprite

На данный момент это моя самая любимая программа. Она очень мощная, до краев забита полезными инструментами и очень даже проста для использования. Я выбрал Aseprite как программу для этого руководства, но я уверен, что адаптировать все написанное далее под любую другую программу вам не составит особого труда. Также вы можете взять бесплатную пробную версию этой программы, но помните, что тогда ваши файлы сохраняться не будут (если вы просто практикуетесь — в этом нет никаких проблем).

Создаем Новый Файл

Просто нажмите на “New File…” на загрузочном экране или на File > New File, чтобы мы могли начать.

Создадим новый файл. 16 на 16 пикселей кажется очень маленьким разрешением, но я думаю, что это прекрасно подойдет для начала. Слишком большие разрешения отвлекут вас от того, на чем мы должны сфокусироваться сейчас: на понятии того, как пиксели взаимодействуют друг с другом.

Окошко “Новый спрайт” в Aseprite

Режим цвета можно оставить в RGBA, на данный момент он самый простой и наглядный. Некоторые художники любят работать в режиме палитры “indexed”, который позволяет использовать несколько особых плюшек, но вместе с ними идут и некоторые недостатки.

Фон должен быть прозрачным или белым, пока без разницы. Теперь убедитесь, что Advanced Options отключены (но позже можете вернуться к ним) и можно наконец-то приступать!

Давайте рисовать!

Здесь мы сразу видим множество панелей и менюшек, но не волнуйтесь, пока нам будет нужна лишь самая малая их часть. Главный инструмент — Карандаш, который всегда должен быть в один пиксель шириной, и с помощью которого мы и будем размещать пиксели в специальном поле. Нажмите на иконку инструмента или на английскую клавишу B, а затем на экран, чтобы разместить пиксель того цвета, который вы сейчас используете.

Рабочая зона в Aseprite

Слева вы можете увидеть палитру с парочкой установленных по умолчанию цветов. Давайте поменяем их на другие, более простые. Нажмите на третью иконку над палитрой (Pressets) и выберите ARQ4 (хорошую палитру под авторством художника Endesga), которую вы будете использовать для своего первого творения.

А теперь, используя только четыре цвета слева, постарайтесь нарисовать кружку.

Будьте вольны пользоваться моей работой как предметом вашего вдохновения. Если вы вдруг сделаете ошибку, нажмите alt+ЛКМ по пустой зоне вне вашего рисунка, тем самым подобрав прозрачный цвет, которым можно пользоваться как ластиком. Ну или вы можете использовать, собственно, сам инструмент “Ластик” (горячая клавиша на английскую E).

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

Также вы можете немного поэкспериментировать с другими кнопками на панели инструментов. Нужно заметить, что некоторые инструменты открывают еще несколько альтернативных инструментов, если на них нажать. Пока вам следует избегать инструмента “Блюр”, который добавляет кучу ненужных нам цветов.

Теперь давайте сделаем еще больше спрайтов! Попробуйте нарисовать череп, меч и лицо человека. Но в этот раз без примера моих работ. Если вы почувствовали, что работа не влезает в эти рамки размера, то не волнуйтесь — это нормально, попробуйте что-либо немного поменять или попробуйте сначала. Работа в таком низком разрешении очень сложная и иногда напоминает паззл. Вот еще одна статья, которую я написал, посвященная работе в низком разрешении: [link]

Если вы так хотите, то вот вам моя версия этих трех спрайтов. Пожалуйста, не нажимайте сюда до того, как вы закончите рисовать их сами. [skull, sword and human face].

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

Сохраняем файл

Для сохранения файла нажмите Control+S (или File>Save As…), Выберите имя файлу и путь сохранения, а потом нажмите кнопку save.

Помните, что в триале Aseprite’а нельзя сохранять работы!

Окошко экспортировки файла в Aseprite

Вы можете заметить, что Aseprite поддерживает очень много форматов для сохранения файла, но я рекомендую всегда держать при себе .ase версию каждого файла, который вы создаете. Точно так же, как формат .psd в Photoshop. Во время экспорта файла в интернет или игры, вы можете нажать Control+Alt+Shif+S или File>Export.

Вот почему никогда не следует изменять размер работ не на круглые числа

В Aseprite есть о-о-очень хорошая функция “Resize”, меняющая размер спрайта в окошке экспорта. Оно изменяет ваш спрайт только на какую-нибудь круглую процентную величину. Если вы измените размер спрайта, например, на 107%, это разобьет большинство пикселей и исказит изображение, но если вы измените размер на 200%, то каждый пиксель будет в 2 пикселя шириной и выстой, что, несомненно, выглядит классно и точно.

Бо́льшие разрешения

Теперь, когда мы разобрались с основами типа сохранения нового файла и рисования в указанном размере, давайте попробуем порисовать в еще большем разрешении, 32 на 32 пикселя. Также мы будем использовать палитру немного пошире, попробуйте AAP-Micro12 (сделана художником AdigunPolack). В этот раз мы будем рисовать лопату.

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

Шаг 1: Линии

Шаг 1

Такой принцип работы мы называем pixel-perfect (дословно вплоть до пикселя), он отличается тем, что линия лишь в 1 пиксель шириной и соединяется с другими пикселями по диагонали. Когда мы делаем подобные линии, мы стараемся избегать нежелательных пикселей и углов, например:

В Aseprite есть очень удобная функция в настройках кисти, которая позволяет делать описанный выше процесс автоматически: выбрав инструмент кисть, нажмите на кнопку Pixel-perfect. Только не забудьте выключить это после работы с обводкой, так как в таком случае она будет вас раздражать.

Алгоритм Pixel-Perfect в Aseprite

Шаг 2: Основные цвета

Шаг 2

Самое большое преимущество маленькой палитры в том, что у вас не будет слишком много вариантов выбора цветов, которые частенько сбивают с толку. Вот почему работать в больших палитрах гораздо сложнее, ибо всегда есть вероятность того, что выбранный вами цвет не имеет гораздо более подходящей альтернативы. Представляйте, что ваша работа — это паззл, экспериментируйте даже со странными и непонятными комбинациями цветов, пока вы не поймете, что нашли тот самый “идеальный цвет” для каждой зоны спрайта.

Шаг 3: Светотень

Шаг 3

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

Импровизируем с цветами для света и теней

Например, слева вы видите работу, которую я нарисовал с помощью точно такой же палитры, как у вас — AAP-Mini12. Когда я рисовал этого зеленого мужчинку, у меня не было ни одного ярко-зеленого в палитре, поэтому я решил использовать ближайший цвет, доступный мне, которым оказался желтый. То же самое произошло и с тенью, я выбрал синий, потому что это был самый подходящий темный цвет. Но что если мы сделаем немного по-другому? Ведь ничего не мешает мне использовать синий вместо самого яркого и красный вместо самого темного, правда? Ну, не совсем:

Инвертированная светотень

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

Шаг 4: Сглаживание и финальные штрихи

Шаг 4, финальный

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

Еще на этом этапе неплохо бы поискать “сиротские пиксели” (англ. Orphan PIxels). Это такие пиксели, которые не относятся ни к группе других пикселей, ни к части сглаживания, как на планете слева:

Убираем одиночные пиксели

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

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

Я хочу донести до вас, что не надо бездумно стирать сиротские пиксели, надо посмотреть и спросить себя: а нужно ли этому пикселю вообще быть одиночным?

А что теперь?

А теперь вам нужно экспериментировать с количеством цветов в палитре и разрешением! Но делайте это постепенно, начните, к примеру, с 48 на 48 пикселей и 16 цветов в палитре. Если вы действительно только начали, я настоятельно рекомендую вам избегать анимаций и для начала привыкнуть к статичным изображениям.

Я выбрал еще немного гайдов по пиксель артингу, которые мне нравятся. Если вы хотите развиваться еще больше, то я рекомендую к прочтению следующее:

Также я делаю немного других туториалов по разным аспектам пиксель арта и гейм дизайна, вы можете найти их здесь:

Часть 2 уже доступна тут!

(Примечание переводчика: Ну что же, вот мои руки и дошли до первой части этого замечательного гайда. Прямо сейчас я занимаюсь переводом второй части, а пока хочу поблагодарить вас за уделение внимания моему переводу. Творческих успехов вам, удачи!)

Создаем аппетитный пиксель-арт завтрак в Adobe Photoshop

Вкусный завтрак, как известно, это залог отличного начала нового дня. Так начните свой день с создания вкуснейшего пиксель-арта на тему завтрака. Нарисованные в Adobe Photoshop эти милые вкусняшки можно использовать в качестве аватаров, игровых иконок и иконок для рабочего стола. Мы же в процессе изучим основы создания формы, сглаживания и подбора цветов.

1. Жарим тост!

Шаг 1

Начнем с простого и неспешного построения контура поджаренного хлебца. Создадим новый документ в Adobe Photoshop. Я, как правило, рисую пиксель-арт элементы на холсте размером 200х200, с прозрачным фоном. Используя Карандаш (Pencil Tool (B)) размером 1 пиксель рисуем следующее:

1. 7 пикселей горизонтально.

2. От проведенной линии с каждой стороны 1 пиксель по диагонали вверх.

3. По 11 пикселей в обе стороны от крайних верхних углов контура. Закруглим углы двумя пикселями по диагонали вниз с обеих сторон и добавим по 10 пикселей вертикально вниз, чтобы получить основу классической хлебной формы.

4. Рисуем 2 пикселя вниз, 1 вниз по диагонали и 20 вертикально вниз с каждой из сторон.

5. Еще 2 пикселя вниз, 2 горизонтально для закругления нижней части хлебца.

6. Замкнем контур 23 горизонтальными пикселями.

Шаг 2

Здесь приведены цвета, которые понадобятся нам для создания базовой формы тоста:

• темно-коричневый для внешнего контура: R:108 G:013 B:003.
• нейтральный коричневый для контура хлебной корочки: R:182 G:090 B:020.
• коричневый для оставшейся части корочки: R:214 G:123 B:027.
• желто-коричневый для хлебного мякиша: R:250 G:211 B:127.

Расположим нейтральный коричневый по краям тоста, коричневым обозначим края корочки с внутренней стороны. И, наконец, используя инструмент Заливка (Paint Bucket Tool (G)), заполним наш кусочек хлеба желто-коричневым цветом.

Шаг 3

1. Однако тост нельзя считать настоящим тостом без кусочка топленого масла. Создадим для него новый слой (New Layer) на панели Слои (Layers).

2. Используем яркий светло-желтый цвет и инструмент Карандаш (Pencil Tool (B)) для создания формы подтаявшего масла.

3. В отличие от тоста, края масла выделим коричневым на самом последнем этапе.

4. Обратим внимание, как лежат темные цвета на углах и вертикальных краях.

5. Поместим масло в центр нашего тоста.

6. Используем белый и светлый кремовый цвета для обозначения самых светлых участков на масле и хлебе.

7. Выберем для нашего Карандаша темно-коричневый цвет, снизим Непрозрачность (Opacity) до 30-50% и обведем наш тост, используя более темный оттенок на углах пиксельной формы, чтобы смягчить резкие края.

2. Печем вафли!

Шаг 1

Форма вафли проста и понятна: квадрат с закругленными углами. Первоначально мы выполняли углы двумя диагональными пикселями, но вафля выглядела слишком «квадратно». И мы решили, что для углов отлично подойдет комбинация из двух горизонтальных, одного диагонального и двух вертикальных пикселей.

Шаг 2

Для заливки вафли мы использовали R:241 G:180 B:99. Оттеночными цветами стали коричневый и нейтральный коричневый из Пункта 1, Шаг 2. На панели Слои (Layers) создадим Новый слой (New Layer) и нарисуем маленькие 6х6 квадраты, удалим угловые пиксели, — и наш вафельный паттерн готов.

Шаг 3

На наш взгляд, при создании такого рода рисунка проще всего скопировать (Ctrl-C) квадратик паттерна и расставить его (Ctrl-V) по внутренней части вафли. Используем желто-коричневый, чтобы высветлить участки вокруг паттерна, нейтральным коричневым обозначим глубину.

Шаг 4

Рисуем кусочек масла и выполняем сглаживание краев вафли точно также, как мы делали это в Пункте 1, Шаг 3.

3. Кому пироженку?

Шаг 1

Форма пироженки также довольно проста: прямоугольник с закругленными углами (обратим внимание на исполнение углов – 2 пикселя вниз, 2 в сторону) и верхним правым углом, исполненным шестью диагональными пикселями, будто кто-то откусил от него кусок.

Шаг 2

Начнем работу над пирожным так же, как мы это делали ранее, с создания внешнего контура коричневым и желто-коричневым цветом. Поначалу и «укус» обводим коричневым для того, чтобы обозначить рабочую зону, а также, чтобы создать теневую область, куда мы позднее поместим желейную начинку.

Шаг 3

Сахарная глазурь будет белого цвета, тени на глазури сделаем бледно-голубыми. Обратим внимание на то, что некоторые линии как бы «растрированы». Растеризация в пиксель-арте – техника, при помощи которой создается шумовой эффект света или тени без изменения значения цвета.

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

Желейную начинку сделаем ярко-розовой, с тёмными и насыщенными акцентами. Не забудем обвести пирожное темно-коричневым со значением Непрозрачности (Opacity) 30-50%, чтобы сгладить углы.

4. Готовим глазунью!

Шаг 1

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

• десять пикселей по горизонтали.
• отступаем один пиксель и размещаем по три горизонтальных с каждой стороны на линию ниже верхушки;
• от этих трех по диагонали вниз размещаем два горизонтальных пикселя и еще по одному диагонально.
• далее повторяем данный алгоритм с оставшихся сторон: справа, слева, снизу. В пропущенных углах добавим по пикселю, используя то же цвет, но снизив Непрозрачность (Opacity) до 50% (см. как показано ниже). Круг готов!

Шаг 2

Начнем с простого – с яичного желтка, ибо изображение яйца потребует гораздо больше усилий и терпения, чем любая другая иконка, которую мы рисовали ранее. Для желтка нам понадобятся три цвета:

• нейтральный коричневый для нижней части: R:182 G:090 B:020
• желтая охра по бокам: R:255 G:150 B:57
• желтый для оставшейся части: R:251 G:208 B:59

Шаг 3

А следующее изображение может показаться очень сложным, но только на первый взгляд. Мы используем тот же светло-голубой, что и при рисовании пирожного (Пункт 3), но будем менять его Непрозрачность (Opacity) для затенения и размытия некоторых участков. То же проделаем с темно-коричневым, снижая его Непрозрачность (Opacity) до 20-50%, наложим поверх белого и голубого (в нижней части яйца). Затем добавим немного света на желток, используя желтый, бежевый и белый цвета.

Сглаживание вокруг внешнего края яйца выполним в три этапа: Непрозрачность (Opacity) 50% для углов, Непрозрачность (Opacity) 30% для пары пикселей у каждого угла, Непрозрачность (Opacity) 10% для всего остального.

5. Поджарим бекон!

Шаг 1

А теперь приступим к бекону: мы предпочитаем широкий короткий кусочек чему-либо более реалистичному. Так как эта иконка будет уже и длиннее остальных иконок, нам не хотелось бы, чтобы она слишком уж выделялась, когда мы соберем все иконки вместе.

Используя Карандаш (Pencil Tool (В)) нарисуем 4 горизонтальных пикселя, затем справа 3 пикселя вниз по диагонали и еще 4 по горизонтали.

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

Справа добавим три пикселя по горизонтали вправо, один по диагонали вниз, шесть вертикально вниз, два по диагонали влево, четыре вниз и еще восемь вниз на правую сторону.

Скопируем (Copy) и Вставим (Paste) верхушку бекона, идем в Редактирование-Трансформирование-Отразить по вертикали (Edit-Transform-Flip Vertical), чтобы повернуть изображение, и присоединим его к верхней части. Выполним команду Объединить слои (Merge Down (Ctrl-E)) и начнем раскрашивать иконку.

Шаг 2

Используя инструмент Заливка, заполним кусок бекона кирпичным красным (R:204 G:0 B:0). Нарисуем волнистые полосы белым (Непрозрачность (Opacity) 50%), оттеним края бекона темно-коричневым (Непрозрачность (Opacity) 50%).

Шаг 3

Добавим немного света на полосы при помощи белого со значением Непрозрачности (Opacity) в 30%, 20% и 100%. Сделаем несколько светлых акцентов по краям бекона (Непрозрачность (Opacity) 80%).

Шаг 4

Чтобы легко и быстро сделать обводку, используем инструмент Волшебная палочка (Magic Wand Tool (W)) и выберем внешнюю область иконки. Идем в Выделение-Модификация-Сжать (Select-Modify-Contract), там выставим значение в 1 пиксель. Выполним Инверсию (Shift-Ctrl-I). Создадим новый слой (New Layer) под слоем с беконом и заполним выделение темно-коричневым со значением Непрозрачности (Opacity) 30%. Добавим прозрачные коричневые пиксели по углам, чтобы смягчить края иконки. И на завершающем этапе выполним объединение слоев (Merge (Ctrl-E)).

Приятного аппетита!

Дополните свой пиксель-арт завтрак фруктами, кофе, соком – чем пожелаете. Эта серия иконок создавалась по мотивам традиционного американского завтрака, поэтому если вы живете за пределами США (а вы, скорее всего, за пределами и живете;), на ваши привычки влияет ваша собственная культура, и мы предлагаем вам создавать иконки ваших собственных привычных утренних блюд. Вы можете пойти дальше и «пикселизировать» все съестное, что найдется на вашей кухне. Удачи!

Как рисовать пиксель арт в Adobe Illustrator

Всем привет! Известно, что Adobe Illustrator – это векторный редактор. Но если вам вдруг захотелось порисовать в нем Pixel Art, то в этом уроке я покажу, как этот делается.  Используя технику из урока, вы сможете вдоволь наиграться векторными пикселями!

Итак, открываем новый документ размером 1000×1000 px. Далее выбираем инструмент “Прямоугольная сетка” (Rectangular Grid Tool).

Дважды кликаем на инструмент – выскакивает окошко с опциями.

Нас интересуют количество горизонтальных и вертикальных разделителей, от них зависит величина наших “пикселей”. Выставим 100 на 100 и OK. Теперь с зажатым Shift (чтобы пиксели были квадратные, а не прямоугольные) растягиваем сетку по рабочей области. Я рекомендую размер сетки делать по размеру рабочей области, в нашем случае 1000×1000 px, так проще будет ориентироваться, если вам попозже захочется дорисовать ещё элементов.

Теперь выбираем инструмент Live Paint – “Быстрая заливка” (горячая клавиша К).

Берём нужный нам цвет (только заливка, без обводки) и начинаем рисовать по сетке. Кликайте быстрой заливкой в квадратики, и они будут закрашиваться.

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

Когда рисунок закончен, выбираем инструмент Selection Tool “Выделение” (V), и идём в меню Object (Объект) > Expand (Разобрать).

В выскакивающей табличке ничего не меняем – жмём OK. Вот что у нас получилось.

Сетка пропала, остался только ваш рисунок. Если же у вас сетка не пропала, и получилось что-то такое…

Значит вы не убрали обводку. Вернитесь на пару шагов назад (Ctrl+Z), когда у вас сетка ещё не разобрана, и просто уберите обводку.

В принципе наш рисунок готов, если вам надо подредактировать какие-то отдельные “пиксели”, то можете выбрать отдельный квадратик с зажатой клавишей Ctrl, или использовать функцию Divide (Разделение) в панели Pathfinder (Обработка контуров).

Потом разгруппировать рисунок (Ctrl+Shift+G) и работать уже с отдельными “пикселями”.

На этом у меня все. До скорого!

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

Как сделать пиксель-арт в Photoshop для начинающих

Готовы ли вы создать свой собственный пиксель-арт? Независимо от того, хотите ли вы создать что-то, чем можно поделиться в своей учетной записи в социальных сетях, или, возможно, вам нужен персонаж для вашей ретро-видеоигры этот урок Photoshop поможет вам создать пиксельная графика быстро с Adobe Photoshop.

Начиная

Пиксель-арт — это быстрый и простой способ создавать 2D-изображения для ваших игр или творческие работы, как на картинках, которые вы видите в популярных мобильных играх, таких как Flappy Bird! Это также основа для создания отличного воксельного искусства.Для создания пиксельной графики доступно множество инструментов, но в этом мы будем использовать самое популярное программное обеспечение для 2D-изображений, доступное на паутина. Photoshop — явный фаворит для создания пиксельной графики из-за его множество функций, направленных на создание потрясающе выглядящей пиксельной графики!

Создать новый файл

После того, как вы установили Photoshop через Creative Cloud, продолжайте и откройте программа. Вы должны увидеть меню, подобное приведенному ниже.Это называется «Экран приветствия». Идите вперед и нажмите Create New.

Откроется экран «Новый документ». Здесь вы можете выбрать из готовых шаблоны для создания фотопроектов, предназначенных для разных экранов размеры. В этом уроке мы покажем вам, как сделать пиксельную собаку. К для этого мы будем использовать опцию Custom . Внутри меню справа называется Preset Details введите имя HipsterDog и введите 32 для ширины и 32 для высоты.Нажмите Создайте , когда закончите.

В основном это создает новый файл с именем HipsterDog с холстом. то есть размером 32×32 пикселя. Этот холст будет тем, что мы будем использовать для рисования наших пиксельная графика. После того, как вы нажмете Create , вы должны увидеть экран, похожий на один ниже. Имейте в виду, что 32×32 действительно мало. Если вы посмотрите внизу слева вы заметите, что мы на 100% увеличили масштаб. Пиксель-арт по своей природе произведение искусства, работающее на пиксельном уровне.Мы всегда можем увеличить наши изображения позже, но пока мы проектируем, мы должны оставаться в этой резолюции.

Однако, чтобы упростить дизайн, мы всегда можем просто увеличить масштаб, чтобы посмотри лучше. Для этого нажмите CTRL + на компьютере с Windows или CMD + на Mac. Мы увеличивали масштаб, пока не достигли 3200%. Ты можешь видеть масштаб в левом нижнем углу.

Если этого недостаточно, вы можете увеличить или уменьшить масштаб.Теперь, когда у нас есть пустой холст, нам нужно настроить нашу рабочую среду, чтобы мы могли отличная пиксельная графика.

Настройка Adobe Photoshop для Pixel Art

Теперь, когда у вас есть холст, нам нужно настроить некоторые основные параметры в Photoshop, который поможет нам в создании нашей самой первой пиксельной графики, а также чтобы он отображался правильно.

Включить ближайшего соседа

Когда вы впервые открываете Photoshop, все изображения создаются с использованием Бикубический автоматический для интерполяции изображений.Это отлично подходит для нормального изображения, потому что когда вы увеличиваете или уменьшаете масштаб изображения, это помогает размывать пиксели поэтому они выглядят «гладкими» и менее пиксельными. Однако это полный напротив в пиксельной графике. Когда вы создаете пиксельные изображения, они должны смотреть четкий и резкий. Для этого нам нужно изменить этот параметр на Ближайший сосед . На изображениях ниже показан пример масштабирования изображение, которое мы сделаем 8x .

Изображение с бикубическим автоматом

Изображение с ближайшим соседом

Итак, без дальнейших задержек, давайте изменим Интерполяцию изображений.Перейти к Preferences и выберите категорию General .

Когда откроется меню настроек, нажмите кнопку Интерполяция изображения в раскрывающемся списке и выберите Ближайший сосед (сохранить жесткие края) из списка элементов.

Теперь, когда вы изменяете размер пиксельной графики, Photoshop сохранит резкие края. придавая вашим работам чистый, четкий вид.

Включите сеть

Следующая важная настройка, которую мы включим, — это Grid . Пиксель арт работает с невидимой 2D сеткой. Включив это, он сделает это легко увидеть, где именно мы размещаем пиксели. Чтобы включить наши сетка перейдите в View> Show> Grid .

Когда вы щелкнете по сетке, вы должны увидеть что-то похожее на этом на вашем Холст. Имейте в виду, что эта сетка является лишь ориентиром и не будет отображаться, когда вы экспортируете свои произведения искусства.

Иногда сетка не подходит по размеру. Это потому, что сетка линии установлены неправильно. Если вам нужно это изменить или вы хотите дважды проверьте, продолжайте и снова переходите к панели Preferences и на этот раз выберите Guides, Grid & Slices … из опций.

После открытия меню убедитесь, что Сетка Каждые: свойство имеет 1 пиксель в качестве значений.Также убедитесь, что Subdivisions — это 1 .

Это гарантирует, что ваша сетка будет подходящего размера. Поздравляю! Мы теперь готовы создать пиксельную графику!

Нарисуйте свое изображение в стиле пиксель-арт

Теперь, когда у вас есть Photoshop, настроенный для пиксельной графики, пришло время выбрать инструмент, который мы будем использовать для рисования нашего пиксельного искусства. Хотя там десятки инструментов и ярлыков, которые вы можете использовать, чтобы сделать пиксели в вашем image мы сосредоточимся на 1 основном инструменте.Этот инструмент Карандаш инструмент.

Установите инструмент «Карандаш»

Инструмент «Карандаш» станет одним из наиболее часто используемых инструментов, когда вы начнете создание пиксельной графики. Чтобы максимизировать его эффективность, мы скорректируем некоторые настройки, прежде чем мы начнем.

Для начала выберем инструмент «Карандаш» на панели инструментов. Вы можете найти это на правая сторона. Он буквально похож на карандаш.

Выбрав карандаш, мы собираемся настроить некоторые свойства.Щелкните стрелку раскрывающегося списка в верхнем левом углу окна Photoshop. Это рядом должен быть номер. Это число показывает, сколько пикселей широкий карандаш будет рисовать, когда вы нажимаете на холст. Поскольку мы делаем пиксельная графика, мы хотим, чтобы это было очень хорошо. Для этого установите размер 1. Это позволит нам рисовать по 1 пикселю за раз. Затем установите Hardness на 100%. Помните, что пиксельная графика должна быть четкой и резкой. Это свойство будет предотвратить сглаживание, делающее наши пиксели резкими.

Обведите голову

И вот момент, которого мы все ждали! Чтобы просто нарисовать пиксель щелкните в любом месте холста. Поскольку мы проделали всю тяжелую работу по настройке up Photoshop, это должно быть буквально похоже на заливку кубов на сетке. Мы будем начните с обрисовки головы, используя черный цвет.

Чтобы изменить цвета, щелкните поле «Цвет» в нижней части панели инструментов. область.Появится всплывающее окно, в котором вы можете перетащить ползунок, чтобы настройте свой цвет. Когда закончите, нажмите ОК.

Теперь, чтобы добавить пиксель, просто щелкните внутри созданной сетки. ранее. С нашими текущими настройками он будет заполнять по одной ячейке за раз. Попробуй скопируйте изображение ниже, щелкнув инструментом «Карандаш».

Очень хорошо! Теперь, когда у нас есть контур для нашего персонажа в пиксельной графике, мы можем начните добавлять детали внутри головы.Продолжайте добавлять больше деталь, используя тот же метод, который вы использовали для контура. Обрисуем уши и добавляем носик. Повторите изображение ниже.

Сейчас он начинает обретать форму! Чтобы сделать очки для нашей собаки нам нужно изменить цвет. Щелкните поле цвета еще раз и введите цвет. ниже.

Теперь, когда мы изменили цвет, приступим к рисованию очков.Попробуйте воспроизвести изображение ниже, используя тот же инструмент «Карандаш».

Отличная работа! Теперь у нас есть нанесенная на карту большая часть нашей пиксельной собаки. Начнем заполнять пустые области. Отличный способ раскрасить ряд пикселей — это щелкнуть левой кнопкой мыши по первому пикселю в ряду. Затем, удерживая нажатой клавишу SHIFT, щелкните пиксель в конце строки, которую вы хотите раскрасить. Это заполнит пиксели между автоматически, сэкономив вам время. Попытайтесь завершить изображение ниже, используя методы, которые вы уже изучили.

Отличная работа! Теперь у вас есть навыки для создания собственного пиксельного искусства для ваших проектов! Продолжайте экспериментировать с разными цветами и добавляйте к пиксельному изображению все, что захотите. Когда вы закончите, выключите сетку, которую мы включили ранее, чтобы увидеть готовый продукт.

Как начать рисовать пиксель-арт №1. Руководство для абсолютного новичка | Педро Медейрос | Pixel Grimoire

Руководство для абсолютного новичка

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

Эту статью поддержал Patreon! Если вам нравится то, что я делаю здесь, пожалуйста, поддержите меня там 🙂

Кроме того, это первая часть серии статей, прочтите всю серию здесь, в Pixel Grimoire.

Перед тем, как начать

Перед тем, как перейти к пиксельной графике, помните: пиксельная графика — это просто еще одна художественная среда, такая как гуаш, масляная живопись, карандаш, скульптура или ее близкая родственница мозаика.Чтобы сделать хороший пиксель-арт, вам нужно уметь делать хорошие рисунки. В общем, это означает изучение анатомии, перспективы, света и тени, теории цвета и даже истории искусства, поскольку все это необходимо для создания хорошего пиксельного искусства.

Инструменты

Для создания хорошей пиксельной графики вам не нужно ничего особенного, и вы справитесь даже с хорошей мышью и бесплатным программным обеспечением. Моя установка включает в себя небольшой перьевой планшет Wacom, хорошую мышь, хорошую клавиатуру и мое любимое программное обеспечение — Aseprite , но вы должны использовать то, с чем вам удобнее всего.

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

• Aseprite : Отличный профессиональный редактор с множеством функций экономии времени (платный)
• GraphicsGale : Классический, используемый во многих играх. Это немного сложно, но полно замечательных функций (бесплатно)
• Piskel : Бесплатный онлайн-редактор пиксельной графики (бесплатно)
• Photoshop : Мощный редактор изображений, не предназначенный для создания пиксельной графики, но вы можете установить до использования (платно)

Aseprite

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

Создание нового файла

Просто щелкните ссылку « New File… » на главном экране или перейдите в File> New File , чтобы мы могли начать рисование.

Давайте создадим новый файл. 16 на 16, вероятно, покажется слишком маленьким, но я думаю, что это хорошая отправная точка. Большие разрешения могут отвлечь вас от того, на чем вы должны сосредоточиться сейчас: понимания взаимодействия пикселей со своими соседями.

Диалоговое окно «Новый спрайт» Aseprite

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

Оставьте фон прозрачным или белым , пока это не сильно изменится. Просто убедитесь, что расширенные параметры не отмечены (но не стесняйтесь экспериментировать с ними позже), и все готово!

Давай нарисуем!

Там много панелей инструментов и меню, но не волнуйтесь, нам сейчас просто нужно несколько кнопок. Главный инструмент — Pencil , который всегда должен иметь ширину 1 пиксель, и именно так мы размещаем наши пиксели на холсте.Просто нажмите кнопку или нажмите B и щелкните по экрану, чтобы разместить пиксель выбранного цвета.

Рабочее пространство Aseprite

Слева вы можете увидеть свою цветовую палитру с некоторыми из цветов по умолчанию. Давайте заменим их на другой, более простой набор. Щелкните третий значок в верхней части цветовой палитры ( Pressets ) и выберите ARQ4 (действительно хорошая палитра от Endesga), которую вы будете использовать для своего первого спрайта.

Теперь, используя только 4 цвета в верхнем левом углу, попробуйте нарисовать кружку .

Не стесняйтесь использовать мое как вдохновение, но также попробуйте сделать его уникальным. Если вы ошиблись, нажмите alt + щелкните в пустой области или за пределами вашего рисунка, и вы «выберете» прозрачный цвет и сможете использовать его для стирания пикселей. В качестве альтернативы вы можете нажать на ластик или нажать E , чтобы выбрать его.

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

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

А теперь давайте сделаем еще спрайтов! Попробуйте нарисовать череп , меч и человеческое лицо . На этот раз без моей ссылки на пиксельное искусство. Если вы чувствуете, что спрайты просто не помещаются на холсте, это абсолютно нормально, попробуйте абстрагировать что-то до одного пикселя и повторите попытку.Работать с таким низким разрешением очень сложно, и иногда это кажется загадкой. Вот еще одна статья, которую я написал о работе с низкими разрешениями для Кано: [ссылка]

Если хотите, вот мои версии этих спрайтов, просто убедитесь, что вы закончили свою, прежде чем смотреть на них [череп, меч и человеческое лицо].

Это всегда хорошее упражнение. Если вы хотите продолжать практиковаться, попробуйте сделать еще больше рисунков с этими ограничениями.

Сохранение файла

Чтобы сохранить файл, нажмите Control + S (или перейдите в Файл> Сохранить как… ), выберите имя файла и местоположение и просто нажмите «Сохранить».

Не забывайте, что в пробной версии Aseprite сохранение отключено!

Диалог экспорта файла Aseprite

Вы увидите, что Aseprite может сохранять в различных форматах, но я всегда рекомендую сохранять версию .ase для каждого файла, который вы создаете. Как и в Photoshop, вы должны сохранить файл .psd . При экспорте для Интернета или игр вы можете использовать Control + Alt + Shif + S или File> Export .

Почему никогда не следует изменять размер пиксельной графики частично

Aseprite имеет действительно хорошую функцию Resize в окне экспорта.Он масштабирует ваш спрайт только круглыми числами, что идеально. Если вы измените масштаб вашего спрайта на 107%, например, он повсюду разбивает пиксели, и это будет беспорядок, но если вы масштабируете его на 200%, каждый пиксель теперь будет 2 пикселя в ширину и в высоту, поэтому он будет выглядеть красиво и резким.

Большой холст

Теперь, когда у вас есть основы, такие как создание нового файла, сохранение и рисование на холсте, давайте попробуем рисовать на холсте чуть большего размера, 32 на 32 пикселя. Теперь мы также будем использовать большую палитру, попробуйте AAP-Micro12 (от AdigunPolack).На этот раз нарисуем лопату.

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

Шаг 1: Линии

Шаг 1

Этот стиль линии — это то, что мы называем линией идеального пикселя, его ширина всего 1 пиксель, и он соединяется по диагонали с другими пикселями. При создании таких линий мы избегаем непреднамеренных краев, как здесь:

Aseprite также имеет действительно хорошую функцию в настройках кисти, чтобы делать это почти автоматически: с выбранным инструментом кисти установите флажок Pixel-perfect .Только не забывайте выключать его, когда не работаете с контурами, потому что это, вероятно, вас раздражает.

Aseprite Pixel perfect algorithm

Шаг 2: Базовые цвета

Step 2

Преимущество ограниченного количества цветов на выбор в том, что вы не будете перегружены слишком большим количеством вариантов. Вот почему работать с большим количеством цветов намного сложнее: если у вас есть цвет в вашей палитре, нет оправдания, чтобы не использовать его в лучшем виде. Попробуйте думать об этом как о головоломке, много экспериментируйте, даже со странными или необычными комбинациями, пока не найдете то, что, по вашему мнению, является «наилучшим соответствием» для каждой области.

Шаг 3: Затенение

Шаг 3

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

Импровизация оттенков с разными оттенками

В примере слева я использую ту же палитру, что и вы, AAP-Mini12 . Когда я рисовал этого зеленого чувака, у меня не было светло-зеленого цвета, поэтому я выбрал ближайший доступный оттенок — желтый.То же самое и с тенью, я выбрал синий, потому что он был самым близким к темному. Но что, если я пойду другим путем? Я мог бы получить более яркий синий и более темный красный, верно? Ну, не совсем:

Оттенки с использованием инвертированного оттенка

Это классный эффект, но явно что-то не так. Обычно вы хотите, чтобы холодные оттенки были вашими тенями, а теплые — вашим ключевым светом, иначе они могут выглядеть странно. Это не каменное правило или что-то в этом роде, есть много исключений, но если вы не уверены, просто следуйте им.

Шаг 4: Сглаживание и полировка

Шаг 4

Это та часть рисунка, где вы пытаетесь сделать пиксели менее «заостренными». Ручное сглаживание — сложная тема, и нам, вероятно, понадобится целая статья, чтобы обсудить это, но теория такова, что вы будете использовать средние тона для имитации «полупикселей» и смягчения краев. Но пока особо не беспокойтесь об этом, а пока сосредоточьтесь на том, чтобы ваш спрайт был как можно более читабельным.

Еще одна хорошая идея на этом этапе — найти несколько потерянных пикселей, чтобы уменьшить шум.Сиротские пиксели — это пиксели, которые не являются частью большей группы пикселей одного цвета и не являются частью сглаживания, например:

Удаление бесхозных пикселей

Вы видите маленькие островки размером в 1 пиксель слева? Это бесхозные пиксели, поскольку вы можете видеть, что планета выглядит намного лучше после того, как мы объединим эти пиксели с некоторыми другими соседними пикселями того же цвета.

А как насчет звезд в этом примере? Что ж, они нужны, чтобы доказать, что бесхозные пиксели не всегда плохие, эти звезды работают точно так, как задумано, создавая текстуру шума и усиливая контраст фона.

Идея состоит не в том, чтобы бездумно удалять бесхозные пиксели, а в том, чтобы через них спросить себя: действительно ли этот пиксель должен быть один?

Что теперь?

Пришло время поэкспериментировать с большим количеством цветов и большим разрешением! Но не торопитесь, может 48 на 48 и 16 цветов и так далее. Если вы действительно только начинаете, я бы пока избегал анимации и сосредоточился на том, чтобы сначала освоиться со статическими изображениями.

Я выбрал несколько других руководств по пиксельной графике, которые мне очень нравятся, если вы хотите провести небольшое исследование:

Я также делаю несколько руководств по конкретным темам или аспектам пиксельной графики и игрового дизайна, вы можете увидеть их все здесь:

Продолжайте читать часть 2 здесь !

Как сделать пиксель-арт с помощью Photoshop

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

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

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

Итак, приступим!

Шаг 1. Создание нового образа

• В Photoshop нажмите Файл -> Создать -> Пустой файл…

• Установите для ширины и высоты что-нибудь небольшое (в моем случае я начну с создания плитки земли, поэтому ширина и высота установлены на 16)
• Установите для Color Mode значение RGB Color, затем нажмите Ok

• Появится новое пустое изображение (Вы можете увеличить масштаб, нажав Ctrl и +)

• Выберите инструмент «Карандаш» и установите его размер на 1 пиксель и непрозрачность на 100%

Шаг 2. Раскрасьте пиксели

• Теперь мы готовы рисовать (я начну с изготовления плитки земли с травой наверху)

Как видите, получившееся изображение довольно маленькое (я расскажу, как его увеличить в конце статьи)

• Тем временем я повторил тот же процесс для еще трех элементов своего искусства (Дом, Забор и Дерево)

• Теперь пора объединить изображения, вот окончательный результат:

Чтобы масштабировать изображение без потери пикселизации, вам необходимо выполнить следующие шаги:

• Перейдите в Изображение -> Изменить размер -> Размер изображения…

• Установите для ширины большее значение (в моем случае я установил 784 пикселей), высота должна масштабироваться пропорционально.

Теперь, если вы нажмете ОК, изображение будет размытым, потому что нам нужно изменить алгоритм масштабирования на «Ближайший сосед» следующим образом:

А вот масштабированное изображение (Совет: щелкните изображение, чтобы развернуть его):

Бонус: заполнение области пикселей

Допустим, вы закончили рисовать своего пиксельного персонажа и вам нужно заполнить внутреннюю часть сплошным цветом.

Обычно вы делаете это с помощью Paint Bucket Tool, но вы заметите, что некоторые пиксели выступают наружу:

Чтобы этого избежать, нам нужно отключить сглаживание в Paint Bucket Tool:

Намного лучше!

Изометрическая пиксельная графика. Настройка Photoshop для пиксельной графики — уроки Photoshop и уроки Pixelart, смайлы и пиксельная графика

Часть 1: Настройка Photoshop для выталкивания квадратов

Примечание. Я обычно использую Adobe ImageReady для всего своего пиксельного искусства, поскольку много лет пользовался фотошопом, я привык к макету и интерфейсу инструментов Imageready.Поскольку Imageready — это в основном фотошоп для изображений с низким разрешением, он идеально подходит для пиксельной графики, а также предлагает множество других отмен без хлопот с палитрой истории фотошопов. Помните, что все пиксельные рисунки должны создаваться при разрешении экрана 72DPI

.

Однако вы ни в коем случае не ограничены ImageReady, Paint Shop Pro, Graphics Gale или даже старым добрым MSPaint — все они способны работать с pixleart-приложениями, только PShop и PSP предлагают слои, которые помогают при создании больших иллюстраций. Но если вы только начинаете как художник-пиксельщик, бесплатная версия Microsoft с Windows MSPaint отлично себя зарекомендовала.В этом уроке я предполагаю, что вы используете Adobe ImageReady.

1: Откройте ImageReady и создайте новый документ, выберите инструмент «Карандаш» (ярлык «N») и выберите наименьший размер кисти. Этот размер кисти составляет 1 пиксель, все изображения, которые вы видите на экране компьютера, состоят из этих отдельных пикселей, полюбите этот крошечный квадратный пиксель, который вы будете видеть много.

2: При создании пиксельной графики большую часть времени вы будете использовать увеличенное изображение. Однако также очень полезно иметь возможность увидеть, как выглядит ваше изображение на 100%.Для этого выберите новый документ, перейдите в ПРОСМОТР — НОВЫЙ ВИД (в новой версии Image Ready: Окно — Документы — Новое окно).

3: Это создаст другой вид вашего уже открытого документа, поместите его сбоку от основного документа, все, что вы сейчас делаете в увеличенном виде, будет отображаться в 100% виде.

4: Если вы используете какой-либо из инструментов Imagereadys Marquee для рисования фигур, убедитесь, что вы отключили функцию сглаживания. Сглаживание — это большой запрет при работе с пиксельной графикой, хотя ручное сглаживание используется в определенных стилях работы со спрайтами.

5: Также полезно создавать палитру цветов во время работы. Когда вы используете новый цвет, поместите небольшой квадрат этого выбранного оттенка в верхнем левом углу вашего документа, это простой способ отслеживать используемые вами цвета, быстрый щелчок инструмента пипетки и вы. Вернусь к работе с выбранным вами цветом.

6: Увеличьте масштаб ближе к пиксельному рисунку, чтобы сосредоточиться на деталях крупным планом. Помните, что у вас также есть 100% обзор с одной стороны, поэтому вы можете в любое время увидеть, выглядит ли ваше искусство так, как вы этого хотите.Если что-то выглядит не совсем правильно, иногда бывает, что вы пытаетесь использовать много пикселей и слишком усложняете слишком маленькую область. Pixelart не похож на обычное искусство, поскольку вы сильно ограничены ограниченным количеством квадратов, с помощью которых вы можете создавать свои изображения. Иногда так же важно, где вы не размещаете пиксель, чем где вы это делаете.

7: Если вы чувствуете, что вам нужно следовать руководству при создании графических изображений, можно использовать пиксели поверх отсканированных изображений. Отсканируйте свое искусство с разрешением 72DPI, пытаясь нарисовать оригинал как можно ближе по размеру к конечной части, таким образом вы потеряете меньше деталей при уменьшении изображения до подходящего размера пикселя.Большинство спрайтов в видеоиграх создаются в количестве, кратном 8, поэтому размеры 8×8, 16×16, 32×32 и 64×64 являются обычным явлением в пиксельной графике. Конечно, если вы создаете журнальную иллюстрацию, на вас нет таких ограничений.

В комплекте:

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

Уроки Photoshop по пиксель-арт для любителей пикселей

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

Выполнение пиксельной графики может означать, что вы стремитесь к совершенству, так как вам даже нужно вручную настроить затенение, дизеринг и даже сглаживание. Это означает, что вам нужно рисовать изображение пиксель за пикселем! Поэтому это называется пиксельной графикой.Звучит страшно, правда?

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

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

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

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

50 красивых и креативных пиксель-артов

50 Красивый и креативный пиксель-арт

Пиксель-арт, при котором изображения создаются и редактируются на уровне пикселей, кажется, является торговой маркой для … Читать дальше

Затенение скалы

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

Судя по виду, я считаю, что это непросто сделать, но как только вы научитесь рисовать, это станет большим шагом вперед к вашему мастерству в области пиксельной графики!

Текстуры

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

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

Дерево

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

Человек-спрайт

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

Цвета

Я нашел этот учебник вдохновляющим, поскольку он не только знакомит вас с цветами, но и объясняет «Правило изменения оттенка» и правильные способы формирования цветовой палитры.Наверное, достойный учебник даже для художника!

Отражение

Сногсшибательно слышать, что для создания пиксельной графики нужно вручную выполнять затенение, сглаживание и сглаживание! Эти техники — это то, чем я страдал, изучая штриховой рисунок, и теперь мне нужно применить их к пиксель-арту вручную! Тем не менее, сердечная благодарность всем пиксельным художникам, которые велики и достаточно любезны, чтобы раскрыть свои секреты создания пиксельной графики, тем самым возродив эту некогда упавшую, но бесценную форму искусства!

Что ж, хотя мы покопались в сети и продемонстрировали классные уроки, которые мы нашли здесь, наверняка где-то в сети лежат и другие впечатляющие уроки.Пожалуйста, дайте нам знать, если вы наткнулись на это или действительно наткнулись, не стесняйтесь показать нам! Тогда наслаждайтесь пикселингом!

Примечание редактора: Неработающие ссылки в этом сообщении были обнаружены и исправлены с обновленными ссылками. Если вы найдете больше, дайте нам знать в разделе комментариев ниже.

Настройка Photoshop для пиксельной графики · brandontreb.com

Обо всем по порядку. Моя жена и я приветствовали новорожденного мальчика в мир в понедельник, так что вы, ребята, должны будете увидеть обязательные фотографии «папы».

Вот они

Хорошо, теперь мы поговорим о пиксельной графике. Я всегда был ОГРОМНЫМ поклонником пиксельной графики как в играх, так и в виде искусства. Как начинающий разработчик игр (игры скоро появятся 😉), я обнаружил, что пиксельная графика мне очень подходит. Это не только эстетично, но и позволяет разработчикам создавать «лучшее» искусство, чем искусство разработчика. Все, что нужно, — это немного терпения.

Сегодня я собираюсь поделиться с вами, как я настроил Photoshop для создания пиксельной графики, и, в конечном итоге, покажу вам, как создавать свои собственные Bitizens из Tiny Tower в следующем посте.

Некоторые из вас могут возразить, что Photoshop — не лучший вариант и что есть лучших инструментов для пиксельной графики. Я пробовал довольно много и продолжаю возвращаться к PS из-за некоторых из замечательных функций (формы, слои, маски, градиенты, фильтры шума и т. Д.…). Мы можем использовать многие из этих инструментов в наших интересах при создании пиксельной графики, PS просто необходимо правильно настроить.

Предупреждаем, прежде чем я начну, я использую Adobe Photoshop CS3 для Mac.

Измените способ масштабирования изображений в Photoshop

Во-первых, нам нужно изменить способ масштабирования изображений PS.Это полезно, когда вы готовы экспортировать свои спрайты для производства. По умолчанию PS использует бикубический алгоритм, когда вы хотите увеличить изображение. Обычно это дает очень размытый эффект. Во многих случаях это очень полезно, но ужасно для пиксельной графики. Здесь нам нужно указать PS использовать алгоритм масштабирования «ближайшего соседа». Это сохранит все наши края без искажения PS при смешивании.

Чтобы изменить этот параметр, перейдите к Photoshop-> Настройки-> Общие

Единственный параметр, который необходимо изменить, — это «Интерполяция изображения».Обязательно измените его на «Ближайший сосед».

Включение сетки

При создании пиксельной графики очень полезно иметь сетку, чтобы определить, где разместить следующий пиксель. Без него вы просто слепо их размещаете. Чтобы включить и настроить сетку в PS, перейдите к Photoshop-> Настройки-> Направляющие, сетка, фрагменты и счетчик…

Обязательно установите Gridline каждые на 1 и Subdivisions на 1.Это создаст сетку размером 1 пиксель, которую вы будете использовать в качестве ориентира.

После того, как вы настроили сетку, нажмите View-> Show-> Grid , чтобы отобразить ее. Возможно, вам придется сделать это для каждого документа.

Настройка Pencil Tool

При создании пиксельной графики в PS карандаш — ваш лучший друг. Вы будете использовать его ~ 95% времени при рисовании. Нам нужно убедиться, что карандаш рисует точки в один пиксель без какой-либо интерполяции. Выбрав инструмент «Карандаш», щелкните раскрывающийся список рядом с кистью , коснитесь стрелки и затем выберите базовые кисти .Когда будет предложено заменить текущие кисти, нажмите OK .

Затем выберите кисть размером 1 пиксель (она должна быть в верхнем левом углу). В большинстве случаев вам нужно рисовать отдельными пикселями.

Создание нового документа

Определить размер документа может быть непросто. Обычно вы хотите, чтобы ваш документ был как можно меньше, чтобы вам не приходилось выполнять больше работы, чем вам нужно. Размер зависит от того, насколько «пиксельным» вы хотите, чтобы ваше искусство выглядело после масштабирования.В основном, используя масштабирование, которое мы выбрали выше (ближайший сосед), «пиксели» просто увеличиваются в размере.

Вот увеличенный вид нашего изображения 15 × 25, которое мы будем использовать в следующем уроке, чтобы создать Bitizen из Tiny Tower.

Поскольку уровень масштабирования не слишком высок, мы видим фрагменты сетки каждые 2 пикселя, а не 1. При масштабировании вы увидите, что размер сетки увеличивается.

Несколько уровней масштабирования в поле обзора

Одна интересная уловка с PS заключается в том, что она позволяет вам открывать несколько окон одного и того же документа.Причина, по которой это удобно, заключается в том, что вы можете одновременно видеть различные уровни масштабирования для своих работ. При рисовании каждого пикселя с увеличением вы можете увидеть результат в желаемом разрешении. Это очень помогает, когда вы пытаетесь настроить свою работу.

Для этого перейдите в Window-> Arrange-> New Window for [projectname.psd] Теперь вы можете управлять уровнем масштабирования каждого окна индивидуально.

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

Если у вас есть какие-либо комментарии, вопросы или советы по Photoshop Pixel Art, не стесняйтесь размещать их в комментариях.

Удачного кодирования!

Этот пост является частью iDevBlogADay, группы независимых блогов разработчиков iOS, публикующих две публикации в день. Вы можете следить за iDevBlogADay через веб-сайт, RSS-канал или Twitter.

Включение Pixel Brush в Pixelmator для рисования Pixel Art на Mac

В пиксельной графике есть определенная магия, будь то ностальгический аспект или просто намеренные ограничения рисования более простой графики.Хотя существует множество конкретных приложений, предназначенных для создания пиксельной графики, и Photoshop, и Pixelmator для Mac также имеют такую ​​возможность. Здесь мы сосредоточимся на включении пиксельной кисти в Pixelmator, поскольку это, вероятно, лучшая альтернатива Photoshop для Mac.

Рисование пиксель-арта с помощью Pixelmator

Для тех, кому интересно, вот , как включить специальную кисть для рисования пикселей в Pixelmator для Mac OS X :

1. Откройте Pixelmator на Mac, если вы еще этого не сделали (он доступен в Mac App Store за 30 долларов)
2. Откройте меню Pixelmator и выберите «Настройки».
3. Перейдите на вкладку настроек «Инструменты» и выберите «Рисование».
4. Щелкните и перетащите кисть Pixel на панель инструментов Pixelmator в нужном месте

Теперь, когда вы включили замечательную кисть Pixel, вы можете легко создать пиксельную графику.

Для достижения наилучших результатов вы, вероятно, захотите открыть новое изображение с довольно низким разрешением (75 x 75 пикселей или около того) и увеличить его так, чтобы получить очевидный уровень пикселей. Все остальное на вас, просто выберите эту кисть Pixel и держите ее.

Если вы не особенно артистичны (добро пожаловать в клуб!), То играть с ним веселее, чем с чем-либо еще, но, как мы все видели в ретро-видеоиграх для Atari, NES и SNES, творчески настроенные люди могут получить очень креатив, несмотря на ограничения на большие блочные пиксели.

Для целей этого пошагового руководства я создал мое глупое, менее чем удивительное произведение с пиксельной графикой, которое я преобразовал в анимированный GIF с помощью GifBrewery и на Mac, что также является довольно забавным приложением.

Не совсем Пикассо, но смысл понятен, верно? Удачи с пикселями!

Связанные

.