Рисуем в Фотошоп улицу в стиле пиксель арт. Пиксель арт фотошоп


Pixel Warheads: Пиксель-арт. Настройка

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

Софт для пиксель-арта: Тут без вариантов, Фотошоп. Много где пишут что пикс-арт можно рисовать хоть в ms Paint, да можно, чисто в теории и только как развлечение для себя и как особый вид морального мазохизма, то еще извращение. Есть еще куча маленьких бесплатных, шароварных и откровенно дешевых програмулин, но на практике всё это треш. Gimp - не в обиду линуксойдам, но Гимп ниразу не аналог фотошопу, хотя почти все те же функции от ФШ в нем якобы есть, но вместо работы будет война с интерфейсом, т.к. он расчитан исключительно для пришельцев, но никак не для людей. В добавок нет адекватной поддержки планшета. Graphic Gale - прога заточена исключительно под пиксель-арт, но нет многих нюансов, облегчающих работу, как в ФШ. Хотя посмотреть прогу стоит, если кому понравится - хорошо. Мне не понравилось. Фотошоп это уже давно производственный стандарт, так что советую сразу привыкать к нему. Я же в этой статье постараюсь поделиться важными нюансами:

Ctrl+K Открываем фотошоп и сразу нажимаем Ctrl+K, хоткей открывает общие настройки ФШ. Самое важное, в Image Interpolation выставляем Nearst Neighbor - это обеспечит нам отсутствие интерполяции при ресайзе или всяком прочем трансформе нашей графики. Must Have! Идем далее по вкладкам: Единицы измерения должны стоять в пикселях, другие варианты нам никогда более не понадобятся. Сетка. Сюда заглядывать будем часто. Сетка крайне удобная вещь, когда работаем с тайлами да и вообще есть лимиты по размерам спрайта. Gridline Every (XX) Pixels - задает размеры нашей сетки. Subdivisions - разбивает каждую клетку сетки на заданное кол-во квадратов. 1 - минимальное значение, означает что сетка не будет разбиваться на "подклетки". Мне обычно больше и не нужно. В процессе работы сетка включается/выключается через Ctrl+'. На этом можно закрыть окно настроек.

View Заходим в меню View Отключаем Snap - привязка нам никогда не понадобится в процессе рисования, а только будет мешать Rulers - отличная помощь при рисовании персонажей.

Настройка окон Через меню window можно удобнее настроить себе рабоче пространство, отключив ненужное и оставив важное. Тут всё очень субъективно, кому как удобнее, я работаю с такой вот организацией: через Info - удобно смотреть размер выделенной области, а это часто нужно. Navigator впринципе можно было бы и убрать совсем т.к. "зумать" привык через Alt+Shift+колесо. Actions, иногда очень помогают, когда например нужно увеличить в два раза и сохранить несколько десятков спрайтов. Мелочь, но жизнь облегчает, поэтому под рукой.

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

Double Viewport Ну и на последок, важный трикс. Второе окно одного документа: Отличная помщь в работе, если одно окно будет в своем 100% размере, а во втором будет зазумлено так как вам удобно. В нормальное смотрим- оцениваем как у нас получается арт, в зазумленом работаем. Очень удобно, позволяет не гонять туда-сюда зум.

Комфортной работы и успешных начинаний.

pixelwarheads.blogspot.ru

Рисуем дом в стиле пиксель арт

Вы уже создали изометрического пиксель арт персонажа, но где же ему жить? Пришло время сделать дом для него!

Также как и в Лего, постройки - весь смысл пиксель арта. Их создание займет определенное время, но вы проведете это время приятно!

Если вы не прошли урок Изометрический пиксель арт в Фотошоп, вам лучше начать с него; мы будем использовать персонажа с этого урока и пропустим советы по Photoshop, которые уже были рассмотрены.

1. Измерения

Шаг 1

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

Мы остановились на этом:

Теперь давайте возьмем нашего персонажа и определимся с некоторыми высотами.

На новом слое давайте создадим "стену" из линий 2:1, каждая на 4px выше от предыдущей (также видно как три пустых пикселя между каждой линией). Если мы будем выбирать высоты, которые соответствуют этим линиям, позже это сделает добавление текстур, таких как кирпич или дерево более эстетично приятным.

Шаг 2

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

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

Шаг 3

Мы сделаем фундамент в L-образной форме, чтобы добавить ему замысловатости; дом будет выглядеть приятнее, а мы изучим больше геометрии.

Сейчас нам нужно продолжить структуру только в одном направлении. Вот оно, с добавленной длиной справа от двери: 40px от грани дверного проема до края нового угла.

Здесь комната с одним или двумя окнами. Мы займемся ею позже.

Шаг 4

Теперь давайте выберем секцию этих линий, применим alt-смещение (или скопировать/вставить), горизонтально отразим их и разместим на правой лицевой стене, затем продлим линии, пока они не станут шириной в 50px:

Шаг 5

Теперь выберем всю левую лицевую стену плюс 10px правой стены (всего должно выйти 60px), применим alt-смещение, Отразить по горизонтали (Flip Horizontal), а затем разместим с другой стороны, чтобы сделать нашу L:

Мы просто пропускаем нижние линии, необходимые для L, вместо этого просто дорисовываем линии над ними:

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

Шаг 6

Можете перейти в меню Изображение > Коррекция > Цветовой тон/насыщенность (Image > Adjustments > Hue/Saturation), чтобы с легкостью оценить разнообразные цветовые опции и подобрать ту, которая нравится больше. Выбирайте земляные тона, если хотите сделать кирпичный дом, или любой другой цвет, который вы предпочитаете для текстуры из деревянных досок или стен без текстур.

Я пометил красным то, с чем мы еще не встречались: угол "впадина". Все углы куба были "наружными", поэтому более светлые цвета выглядели отлично. Но для "впадин" использование светлых цветов не имеет смысла, а черный может быть слишком грубым, поэтому лучший способ - использовать цвет на 10% или 15% темнее от цвета стен:

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

2. Углы

Шаг 1

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

Эти новые линии будут нижней частью крыши.

Шаг 2

Создайте новый слой и нарисуйте несколько вертикальных линий из двух углов нашей L:

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

Шаг 3

Теперь найдите место между этими двумя линиями, чтобы добавить третью. Можете измерить при помощи инструмента выделения или можете сместить выделение и посчитать расстояние по ходу перемещения его при помощи стрелок на клавиатуре (запомните: смещение с удержанием Shift перемещает выделение на 10px за раз)

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

Одна из них - диагональная линия типа 1:1 с прямой горизонтальной линией, а вторая - 1:2 с 1:1.

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

Шаг 4

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

Должно получиться примерно так:

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

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

Если вы следуете этому правилу, стоит немного сместить диагональную линию типа 1:1.

Шаг 5

Теперь давайте объединим линии крыши (но пока еще не со слоем L-образной основы), затем применим alt-смещение, Отражение по горизонтали (Flip Horizontal) и разместим на левой стороне L-основы, чтобы получить такой результат:

Нам больше не понадобятся линии на верху, поэтому сотрите их и добавьте вертикальную линию, чтобы сделать угол "впадину". На слое с L-образной основой крыши сотрите две черных линии на заднем фоне (две линии выше на экране), а после этого объедините слой с линиями крыши и слой с основой крыши.

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

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

Шаг 7

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

Шаг 8

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

Шаг 9

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

Это не обязательно, но теперь мы можем объединить слой крыши с L-слоем дома. Должно быть легче заполнить пустые зоны треугольников цветом стен перед объединением. Инструмент Лассо (Lasso Tool) - ваш друг; только запомните, что нужно снять галочку сглаживание (anti-alias).

Отлично! Мы довольно много сделали с геометрической работой!

3. Детали

Шаг 1

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

Шаг 2

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

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

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

Шаг 3

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

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

(Не волнуйтесь, если меньшие окошки не отцентрированы относительно крыше, ведь сама крыша находится не на том вертикальном уровне, что стены и окна.)

Шаг 4

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

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

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

Шаг 5

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

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

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

Шаг 6

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

Добавлена дверная ручка золотистого цвета.

Шаг 7

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

4. Текстуры

Давайте создадим и применим текстуры. Зоны, которые нам нужны - это, конечно же, крыша и стены.

Начнем с крыши. Создайте новый слой.

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

Шаг 2

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

Шаг 3

На левой стороне крыши текстура должна лежать в противоположном направлении, поэтому отразите эту зону по горизонтали (Flip Horizontal). После этого перейдите на слой с домом и используйте инструмент Волшебная палочка (Magic Wand), чтобы выбрать все цвета крыши (кроме черных линий). Если удерживать Shift, можно продолжать добавлять зоны к выделению. Когда вы закончили выделение, перейдите в слой с текстурой, инвертируйте выделение через меню Выделение > Инверсия (Select > Inverse) и удалите его, чтобы получить такой результат:

Шаг 4

Перед объединением слоев, нужно уменьшить непрозрачность (Opacity) слоя с текстурой примерно до 20%. Но вот что я посоветовал бы, чтобы сохранить нашу цветовую палитру в порядке - можно заменить цвет текстуры темными оттенками, которые уже использовались в крыше:

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

Шаг 5

Для текстуры дерева нам просто нужно нарисовать линии, идущие вдоль фундамента дома, затем при помощи alt-смещения переместить их на 4px вверх, повторяя этот процесс пока линии не покроют все стены:

Затем повторите процесс из четвертого шага:

Поздравляю! Ваш дом готов!

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

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

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

photoshop-master.ru

Pixel art для начинающих. | Введение. — Обо всем — Игры — Gamer.ru: социальная сеть для геймеров

Pixel art для начинающих. | Введение.

Обо всем - Pixel art для начинающих. | Введение.Pixel art для начинающих. | Введение.

1. История.

Pixel art для начинающих. | Введение.

Обо всем - Pixel art для начинающих. | Введение.Pixel art для начинающих. | Введение.

Pixel art (пишется без дефиса) или пиксельная графика – направление цифрового искусства, которое заключается в создании изображений на уровне пикселя (т. е. минимальной логической единицы, из которой состоит изображение). Далеко не все растровые картинки являются пиксель артом, хотя все они и состоят из пикселей. Почему? Потому что в конечном счёте понятие pixel art вмещает в себя не столько результат, сколько процесс создания иллюстрации. Пиксель за пикселем, и только так. Если вы возьмёте цифровое фото, сильно его уменьшите (так, чтобы пиксели стали видны) и заявите что нарисовали его с нуля – это будет настоящий подлог. Хотя наверняка найдутся наивные простаки, которые вас похвалят за кропотливый труд.

Сейчас неизвестно, когда точно зародилась эта техника, корни теряются где-то в начале 1970-х. Однако приём составления изображений из малых элементов восходит к куда более древним формам искусства, таким как мозаика, вышивание крестиком, ковроплетение и бисероплетение. Само же словосочетание «pixel art» как определение пиксельной графики впервые было использовано в статье Адель Голдберг и Роберта Флегала в журнале Communications of the ACM (декабрь 1982-го).

Pixel art для начинающих. | Введение.

Обо всем - Pixel art для начинающих. | Введение.Pixel art для начинающих. | Введение.

Разновидность пиксель арта – т. н. line art. Неизвестный автор.

Наиболее широкое прикладное применение pixel art получил в компьютерных играх, что неудивительно – он позволял создавать изображения, нетребовательные к ресурсам и выглядящие при этом по-настоящему красиво (при этом отнимающие у художника немало времени и требовавшие определённых навыков, а потому подразумевающие хорошую оплату труда). Расцветом, наивысшей точкой в развитии официально называют видеоигры на приставках 2-го и 3-го поколения (начало 1990-х). Дальнейший прогресс технологий, появление сперва 8-битного цвета, а затем и True Color, развитие трёхмерной графики – всё это со временем оттеснило pixel art на второй и третий планы, а потом и вовсе стало казаться, что пиксельной графике пришёл конец.

Pixel art для начинающих. | Введение.

Обо всем - Pixel art для начинающих. | Введение.Pixel art для начинающих. | Введение.

Наивысшая точка развития pixel art’а в видеоиграх. Хотя официально апогей приписывают 2-му и 3-му поколениям, на мой взгляд он пришёлся несколько позже. Именно на приставках 4-го поколения (Sega MD, SNES, TurboGrafx-16 и Neo Geo) вышли игры с самой красивой и безупречной по технике пиксельной графикой. Это несмотря на то, что технология наступала на пятки и повсеместно предпринимались попытки ввести в игры full motion video, а также спрайты, созданные на основе фотографий, видеоматериалов и заранее визуализированных 3D-моделей.

Как ни странно, но именно господин Научно-технический прогресс, задвинувший в середине 90-х пиксельную графику на последние позиции, и вернул её позже в игру – явив миру мобильные устройства в виде сотовых телефонов и КПК. Ведь каким бы полезным ни был новомодный дивайс, мы-то с вами знаем – если на нём нельзя хотя бы разложить пасьянс, грош ему цена. Ну а там где есть экран с невысоким разрешением, там и pixel art. Как говорится, добро пожаловать назад.

Pixel art для начинающих. | Введение.

Обо всем - Pixel art для начинающих. | Введение.Pixel art для начинающих. | Введение.У дизайнеров из «eBoy» было трудное детство, они провели его в восточной Германии и были начисто лишены возможности наслаждаться изящными искусствами. Потому не научились рисовать ничего кроме пиксельной графики. Но главная их заслуга – они убедили рекламодателей, что pixel art это модно и круто. Если по мнению дизайнеров из «eBoy» ГДРовские игрушки и одежда были некрасивыми – интересно, что бы они сказали про советские?
Разумеется, свою роль в возвращении пиксельной графики сыграли различные ретроградно настроенные элементы, любящие поностальжировать над старыми-добрыми играми детства, приговаривая при этом: «Эх, теперь такого не делают»; эстеты, способные оценить красоту пиксель арта, и инди-разработчики, не воспринимающие современные графические красоты (а иногда, правда редко, элементарно не умеющие их реализовать в собственных проектах), оттого и ваяющие pixel art. Но давайте всё-таки не будем сбрасывать со счетов сугубо коммерческие проекты – приложения для мобильных устройств, рекламу и web-дизайн.

Pixel art для начинающих. | Введение.

Обо всем - Pixel art для начинающих. | Введение.Pixel art для начинающих. | Введение.Еще одна заметная фигура – голландец Хэнк Ниебург, начавший карьеру пиксельного художника аж в 1989-м. В конце 90-х был вынужден зарабатывать на жизнь вебдизайном и едва сводил концы с концами, но с 2000-го снова рисует pixel art, теперь уже для мобильных игр.
Так что сейчас pixel art, что называется, широко распространён в узких кругах и заработал себе своеобразный статус искусства «не для всех». И это несмотря на то, что для простого обывателя он предельно доступен, ведь чтобы работать в этой технике, достаточно иметь под рукой компьютер и простейший графический редактор! (умение рисовать, между прочим, тоже не помешает) Хватит слов, ближе к делу!

Pixel art для начинающих. | Введение.

Обо всем - Pixel art для начинающих. | Введение.Pixel art для начинающих. | Введение.Pixel dolls, развлечение для взрослых девочек, ненаигравшихся в куклы. Кроме шуток, это тоже pixel art, и работы некоторых авторов вызывают восхищение как среди фанатов пиксельной графики, так и среди ценителей прекрасного.

2. Инструменты.

Что нужно для создания пиксель арта? Как сказал выше, достаточно компьютера и любого графического редактора, способного работать на уровне пикселей. Рисовать можно где угодно, хоть на Game Boy, хоть на Nintendo DS, хоть в Microsoft Paint (другое дело, что рисовать в последнем крайне неудобно). Есть великое множество растровых редакторов, многие из них бесплатны и достаточно функциональны, так что с программным обеспечением каждый может определится самостоятельно.

Pixel art для начинающих. | Введение.

Обо всем - Pixel art для начинающих. | Введение.Pixel art для начинающих. | Введение.Microsoft Paint – оружие последнего шанса, когда рисовать уже совсем негде. Это «круги», во всяком случае Paint считает именно так. Особенно примечателен уродец в центре, который даже не симметричен.
Я рисую в Adobe Photoshop, потому что удобно и потому что давно. Не стану врать и рассказывать, шамкая вставной челюстью, что де «Я помню Фотошоп был еще са-а-авсем маленьким, это было на Макинтоше, и был он с номером 1.0» Такого не было. Но я помню Фотошоп 4.0 (и также на Маке). А потому для меня вопрос выбора никогда не стоял. И потому нет-нет, но я буду давать рекомендации касательно Photoshop, особенно там, где его возможности помогут значительно упростить творчество.

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

Pixel art для начинающих. | Введение.

Обо всем - Pixel art для начинающих. | Введение.Pixel art для начинающих. | Введение.Тоже своего рода пиксель арт, картина составлена из… кубиков Рубика! 1330 кубиков, размер полотна 116х107 см, автор Джон Куигли (John Quigley).
Начнём? Вы наверное ждёте списка каких-то секретных приёмов, рекомендаций, которые научат вас рисовать pixel art? А правда в том, что ничего такого по большому счёту нет. Единственный способ научиться рисовать пиксельную графику – это рисовать самому, пробовать, пытаться, не бояться и экспериментировать. Не стесняйтесь повторять чужие работы, не бойтесь показаться неоригинальным (просто не выдавайте чужое за своё, хе-хе). Внимательно и вдумчиво анализируйте работы мастеров (не мои) и рисуйте, рисуйте, рисуйте. Несколько полезных ссылок вас ждёт в конце статьи.

3. Общие принципы.

И всё же существует несколько общих принципов, знать которые не помешает. Их действительно немного, я называю их «принципами», а не законами, потому что они носят скорее рекомендательный характер. В конце-концов, если у вас получится нарисовать гениальную пиксельную картинку в обход всех правил – кому до них дело?

Самым основной принцип можно сформулировать так: минимальной единицей изображения является пиксель, и по возможности все элементы композиции должны быть соразмерны ему. Расшифрую: всё, что вы нарисуете, состоит из пикселей, и пиксель должен читаться во всём. Это не значит, что в рисунке вообще не может быть элементов, к примеру, 2х2 пикселя, или 3х3. Но строить изображение всё же предпочтительно из отдельных пикселей.

Обводка и вообще все линии рисунка должны быть толщиной в один пиксель (за редким исключением).

Pixel art для начинающих. | Введение.

Обо всем - Pixel art для начинающих. | Введение.Pixel art для начинающих. | Введение.То самое исключение, Jimmy Two Shoes. Здесь пиксельная графика стремится повторить стиль оригинального мультфильма, на персонажах которого основана игра, и в котором все персонажи имеют чётковыраженную обводку.
Я вовсе не утверждаю, что это неправильно. Но это всё же не очень красиво. А чтобы было красиво, запомним еще одно правило: рисовать без изломов, скруглять плавно. Есть такое понятие как изломы – фрагменты, выбивающиеся из общего порядка, они придают линиям неровный, зазубренный вид (в англоговорящей среде пиксельных художников их называют jaggies):

Pixel art для начинающих. | Введение.

Обо всем - Pixel art для начинающих. | Введение.Pixel art для начинающих. | Введение.

Изломы лишают рисунок естественной плавности и красоты. И если фрагменты 3, 4 и 5 очевидны и исправляются легко, с прочими дело обстоит сложнее – там нарушена длина одного-единственного кусочка в цепи, казалось бы мелочь, но мелочь заметная. Чтобы научиться видеть такие места и избегать их, требуется небольшая практика. Излом 1 выбивается из линии, потому что это единичный пиксель – в то время как на участке, где он затесался, линия состоит из сегментов по 2 пикселя. Чтобы избавиться от него, я смягчил вход кривой в изгиб, удлинив верхний сегмент до 3-х пикселей, и перерисовал всю линию сегментами по 2 пикселя. Изломы 2 и 6 идентичны друг другу – это уже фрагменты длиной 2 пикселя на участках, построенных единичными пикселями.

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

Pixel art для начинающих. | Введение.

Обо всем - Pixel art для начинающих. | Введение.Pixel art для начинающих. | Введение.

Как видите, прямая линия составляется из отрезков одинаковой длины, смещаемых по мере её прорисовки на один пиксель – только таким образом достигается эффект линейности. Наиболее распространённые способы построения с длиной отрезка 1, 2 и 4 пикселя (встречаются и другие, но представленных вариантов должно хватить для реализации практически любой художественной задумки). Из этих трёх самым популярным можно уверенно назвать длину отрезка в 2 пикселя: рисуем отрезок, сдвигаем перо на 1 пиксель, рисуем еще один отрезок, сдвигаем перо на 1 пиксель, рисуем еще отрезок:

Pixel art для начинающих. | Введение.

Обо всем - Pixel art для начинающих. | Введение.Pixel art для начинающих. | Введение.

Несложно, верно? Нужна лишь привычка. Умение рисовать наклонные прямые с шагом в 2 пикселя поможет в изометрии, так что подробнее остановимся на ней в следующий раз. Вообще прямые линии это здорово – но только до тех пор, пока не встанет задача нарисовать что-нибудь нерукотворное. Тут нам понадобятся кривые, и много самых разных кривых. И берём на вооружение простое правило закругления кривых линий: длина элементов кривой должна уменьшаться/увеличиваться постепенно.

Pixel art для начинающих. | Введение.

Обо всем - Pixel art для начинающих. | Введение.Pixel art для начинающих. | Введение.

Выход из прямой на скругление ведётся плавно, я обозначил длину каждого сегмента: 5 пикселей, 3, 2, 2, 1, 1, снова 2 (уже вертикально), 3, 5 и далее. Не обязательно ваш случай будет использовать такую же последовательность, здесь всё зависит от плавности, которая требуется. Еще пример скругления:

Pixel art для начинающих. | Введение.

Обо всем - Pixel art для начинающих. | Введение.Pixel art для начинающих. | Введение.

Опять же, избегаем изломов, которые так портят картинку. Если есть желание проверить усвоенный материал, здесь у меня нарисованный неизвестным автором skin для Winamp’а, заготовка:

Pixel art для начинающих. | Введение.

Обо всем - Pixel art для начинающих. | Введение.Pixel art для начинающих. | Введение.

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

4.1. Рисуем склянку с живой водой.

Pixel art для начинающих. | Введение.

Обо всем - Pixel art для начинающих. | Введение.Pixel art для начинающих. | Введение.

1. Форма объекта, пока можно не использовать цвет.

2. Красная жидкость.

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

4. Добавляем белые блики на пузырьке, и тень шириной 1 пиксель тёмно-красного цвета на приграничных к стенкам пузырька областях жидкости. Смотрится вроде неплохо, а?

5. Аналогично рисуем склянку с синей жидкостью – здесь тот же цвет стекла, плюс три оттенка синего для жидкости.

4.2. Рисуем арбуз.

Pixel art для начинающих. | Введение.

Обо всем - Pixel art для начинающих. | Введение.Pixel art для начинающих. | Введение.

. Нарисуем круг и полукруг – это будут арбуз и вырезанная долька.

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

3. Заливка. Цвета из палитры, средний оттенок зелёного – цвет корки, средний красный – цвет мякоти.

4. Обозначим переходный участок от корки к мякоти.

5. Светлые полосы на арбузе (наконец-то он похож сам на себя). И конечно – семечки! Если скрестить арбуз с тараканами, будут расползаться сами.

6. Доводим до ума. Бледно-розовый цвет используем для обозначения бликов над семечками в разрезе, и, выкладывая пиксели в шахматном порядке, добиваемся от вырезанной дольки некоего подобия объёма (метод называется dithering, о нём позже). Тёмный красный оттенок используем, чтобы обозначить затенённые места в разрезе арбуза, и тёмно-зелёный (опять же пиксели в шахматном порядке) – чтобы придать объём самому арбузу.

5. Dithering.

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

Pixel art для начинающих. | Введение.

Обо всем - Pixel art для начинающих. | Введение.Pixel art для начинающих. | Введение.

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

Pixel art для начинающих. | Введение.

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

Pixel art для начинающих. | Введение.

Обо всем - Pixel art для начинающих. | Введение.Pixel art для начинающих. | Введение.Game Boy, 4 цвета (чёрный, белый и два оттенка серого). Настоящий вызов художнику!
Сейчас, в эпоху безграничных технических возможностей, многие говорят что необходимость в дизеринге отпала сама собой. Однако грамотное его использование может придать вашим работам характерный ретро-стиль, узнаваемый всеми любителями старых видеоигр. Лично я люблю использовать dithering. Не очень хорошо им владею, тем не менее, люблю.

Pixel art для начинающих. | Введение.

Обо всем - Pixel art для начинающих. | Введение.Pixel art для начинающих. | Введение.

Еще два варианта дизеринга:

Pixel art для начинающих. | Введение.

Обо всем - Pixel art для начинающих. | Введение.Pixel art для начинающих. | Введение.Расширенная версия базового дизеринга, с заводом отдельных пикселей смешиваемых цветов.

Pixel art для начинающих. | Введение.

Обо всем - Pixel art для начинающих. | Введение.Pixel art для начинающих. | Введение.

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

Что нужно знать про дизеринг, чтобы уметь им пользоваться. Минимальная ширина зоны смешивания должна быть не меньше 2-х пикселей (те самые шашечки). Больше – можно. Меньше лучше не делать.

Pixel art для начинающих. | Введение.

Обо всем - Pixel art для начинающих. | Введение.Pixel art для начинающих. | Введение.

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

Pixel art для начинающих. | Введение.

Обо всем - Pixel art для начинающих. | Введение.Pixel art для начинающих. | Введение.

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

Pixel art для начинающих. | Введение.

Обо всем - Pixel art для начинающих. | Введение.Pixel art для начинающих. | Введение.

Пиксель арт можно рисовать в любой программе для работы с растровой графикой, это вопрос личных предпочтений и опыта (а также финансовых возможностей, разумеется). Кто-то использует самый простой Paint, я делаю это в Photoshop – потому что, во-первых, давно в нём работаю, а во-вторых, мне там комфортней. Как-то решил попробовать бесплатный Paint.NET, не понравилось – это как с автомобилем, узнавший иномарку с коробкой-автоматом в «Запорожец» уже вряд ли сядет. Мой работодатель предоставляет мне лицензионный софт, так что перед корпорацией Adobe совесть моя чиста... Хотя цены за свои программы они заламывают немыслимые, и гореть им за это в аду.

1. Подготовка к работе.

Создаём новый документ с любыми настройками (пусть будет ширина 60, высота 100 пикселей). Основным инструментом пиксельартиста является карандаш (Pencil Tool, вызывается горячей клавишей B). Если на панели инструментов включена кисть (и пиктограмма, изображающая кисточку), наведите на неё курсор, нажмите и удерживайте LMB – появится небольшое выпадающее меню, в котором следует выбрать карандаш. Устанавливаем размер пера 1 пиксель (в верхней панели слева выпадающее меню Brush):

Pixel art для начинающих. | Введение.

Обо всем - Pixel art для начинающих. | Введение.Pixel art для начинающих. | Введение.

Еще несколько полезных комбинаций. «Ctrl +» и «Ctrl -» увеличивают и уменьшают масштаб изображения. Также пригодится знать, что нажатие Ctrl и " (кавычки-ёлочки, или русская клавиша «Э») включает и отключает сетку, что здорово помогает при рисовании pixel art’а. Шаг сетки также следует настроить под себя, кому-то удобней когда он составляет 1 пиксель, я привык что ширина ячейки 2 пикселя. Нажимаем Ctrl+K (или идём в Edit->Preferences), заходим в пункт Guides, Grid & Slices и устанавливаем Gridline every 1 pixels (мне, повторюсь, удобней 2).

2. Рисование.

Наконец приступаем к рисованию. Для чего создадим новый слой (Ctrl+Shift+N), переключаемся на чёрный цвет пера (нажатие D устанавливает цвета по умолчанию, чёрный и белый) и нарисуем голову персонажа, в моём случае это вот такой симметричный эллипс:

Pixel art для начинающих. | Введение.

Обо всем - Pixel art для начинающих. | Введение.Pixel art для начинающих. | Введение.

Нижнее и верхнее основания у него длиной 10 пикселей, потом идут отрезки в 4 пикселя, три, три, один, один и вертикальная линия высотой 4 пикселя. Прямые в Photoshop удобно рисовать с зажатым Shift, хотя масштабы изображения в пиксель арте минимальные, всё же этот приём иногда здорово экономит время. Если ошиблись и нарисовали лишнего, залезли куда мимо – не расстраивайтесь, переключайтесь на инструмент ластик (Eraser Tool или клавиша «E») и удалите ненужное. Да, обязательно установите ластику также размер пера в 1 пиксель, чтобы он подтирал попиксельно, и режим карандаша (Mode: Pencil), иначе будет стирать не то что нужно. Переключение обратно на карандаш, напомню, через «B»

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

Продолжаем рисовать, добавляем нос, усики и рот:

Pixel art для начинающих. | Введение.

Обо всем - Pixel art для начинающих. | Введение.Pixel art для начинающих. | Введение.

Теперь глаза:

Pixel art для начинающих. | Введение.

Обо всем - Pixel art для начинающих. | Введение.Pixel art для начинающих. | Введение.

Обратите внимание, при таком мелком масштабе глазам не обязательно быть круглыми – в моём случае это квадраты с длиной стороны 5 пикселей, у которых не дорисованы угловые точки. При возвращении в оригинальный масштаб они будут выглядеть достаточно круглыми, плюс впечатление сферичности можно усилить с помощью теней (об этом позже, см. 3-ий раздел урока). Пока же я слегка откорректирую форму головы подтерев пару пикселей в одном месте и дорисовав их в другом:

Pixel art для начинающих. | Введение.

Обо всем - Pixel art для начинающих. | Введение.Pixel art для начинающих. | Введение.

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

Pixel art для начинающих. | Введение.

Обо всем - Pixel art для начинающих. | Введение.Pixel art для начинающих. | Введение.

Углы пока выглядят не очень, одно из правил pixel art’а гласит, что каждый пиксель обводки и элементов может соприкасаться не более чем с двумя соседними пикселями. Но если внимательно изучить спрайты из игр конца 80-х – начала 90-х, эту ошибку там можно встретить довольно часто. Вывод – если нельзя, но очень хочется, то можно. Эту деталь позже во время заливки можно будет обыграть с помощью теней, так что пока рисуем дальше. Туловище:

Pixel art для начинающих. | Введение.

Обо всем - Pixel art для начинающих. | Введение.Pixel art для начинающих. | Введение.

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

Pixel art для начинающих. | Введение.

Обо всем - Pixel art для начинающих. | Введение.Pixel art для начинающих. | Введение.

3. Заливка.

Для каждого элемента персонажа нам пока будет достаточно трёх цветов – основного цвета заливки, цвета тени и обводки. Вообще по теории цвета в pixel art советовать можно много чего, на начальном этапе не стесняйтесь подсматривать за работами мастеров и анализировать, как именно они подбирают цвета. Обводку каждого элемента можно, разумеется, оставить чёрной, но в таком случае элементы наверняка будут сливаться, я предпочитаю использовать самостоятельные цвета, близкие по тому с основным цветом элемента, но с низкой насыщенностью. Удобней всего нарисовать где-нибудь рядом с вашим персонажем небольшую палитру и далее брать цвета с неё при помощи инструмента «пипетка» (Eyedropper Tool, I):

Pixel art для начинающих. | Введение.

Обо всем - Pixel art для начинающих. | Введение.Pixel art для начинающих. | Введение.

В этой палитре у меня 13 цветов, их цифровые значения таковы

Pixel art для начинающих. | Введение.

Обо всем - Pixel art для начинающих. | Введение.Pixel art для начинающих. | Введение.

Глаза: c4df9b, b4cc8f

Кожа: 00a651, 007539, 003d1e

Рубашка: 9e0b0f, 80090d, 4d0003

Брюки: 0072bc, 005c99, 08314d

Ботинки: 754c24, 663d14

Эти значения можно скопировать и вставить в соответствующую панель Color Picker (открывается LMB на иконке с цветом), а можно скопировать в документ саму палитру, здесь вопрос привычки.

Pixel art для начинающих. | Введение.

Обо всем - Pixel art для начинающих. | Введение.Pixel art для начинающих. | Введение.

Выбрав нужный цвет, активируем инструмент «ведро» (Paint Bucket, G). Также обязательно отключите в настройках функцию Anti-alias, нам нужно чтобы заливка работала чётко в пределах прорисованных контуров и не выходила за них:

Pixel art для начинающих. | Введение.

Обо всем - Pixel art для начинающих. | Введение.Pixel art для начинающих. | Введение.

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

Pixel art для начинающих. | Введение.

Обо всем - Pixel art для начинающих. | Введение.Pixel art для начинающих. | Введение.

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

Pixel art для начинающих. | Введение.

Обо всем - Pixel art для начинающих. | Введение.Pixel art для начинающих. | Введение.

В Photoshop есть удобная функция выбора по цвету (Select->Color range, ткнув пипеткой в нужный цвет мы получим выделение всех аналогичных по цвету участков и возможностью мгновенной их заливки, но для этого нужно чтобы элементы вашего персонажа находились на разных слоях, так что пока будем считать эту функцию полезной для продвинутых пользователей Photoshop):

Pixel art для начинающих. | Введение.

Обо всем - Pixel art для начинающих. | Введение.Pixel art для начинающих. | Введение.

4. Тень и dithering.

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

Pixel art для начинающих. | Введение.

Обо всем - Pixel art для начинающих. | Введение.Pixel art для начинающих. | Введение.

Тень это очень мощное изобразительное средство, грамотно обозначенная тень благоприятно скажется на внешнем виде персонажа – и на том впечатлении, что он окажет на зрителя. В pixel art один-единственный пиксель, поставленный не на своё место, способен разрушить всю работу, в то же время казалось бы такие незначительные поправки могут сделать изображение гораздо симпатичней.

Что же касается dithering’а, в изображении с такими миниатюрными размерами он, на мой взгляд, совершенно лишний. Сам по себе метод заключается в «замешивании» двух соседних цветов, которое достигается путём шахматного расположения пикселей. Тем не менее, чтобы было представление о технике, я всё же введу небольшие области смешения, на брюках, на рубашке и немного на лице:

Pixel art для начинающих. | Введение.

Обо всем - Pixel art для начинающих. | Введение.Pixel art для начинающих. | Введение.

В целом же, как видите, ничего особо сложного. Pixel art тем и привлекателен, что усвоив некоторые закономерности, любой сможет неплохо рисовать сам – просто внимательно изучив работы мастеров. Хотя да, некоторое знание основ рисунка и теории цвета всё же не помешает. Дерзайте!

Гуляя утром по интернету, захотелось написать пост про Pixel Art, в поисках материала нашел эти две статьи.

Первая.

Вторая.

www.gamer.ru

Рисуем в Фотошоп улицу в стиле пиксель арт

Финальный результат:

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

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

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

  1. Изометрический пиксель арт в Фотошоп  
  2. Рисуем дом в стиле пиксель арт
  3. Машина в стиле пиксель арт

Если вы готовы, можем начинать!

1. Собираем исходные материалы

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

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

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

Вот так выглядит наш набор элементов:

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

2. Меняем цвета

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

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

Шаг 1

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

У нас есть один основной цвет примерно с четырьмя оттенками, поэтому давайте увеличим масштаб и выберем их. Для этого используется инструмент Волшебная палочка (Magic Wand Tool). При этом нужно снять галочку Смежные пиксели (Contiguous tool). Я предпочитаю устанавливать параметр Допуск (Tolerance) на 0%, это позволяет выделить все необходимые области.

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

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

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

Шаг 2

Теперь при помощи инструмента Прямоугольная область (Rectangular Marquee Tool) выберите одну из крыш, а затем измените настройки оттенка, насыщенности и/или яркости на свой вкус. Для этого перейдите в меню Изображение > Коррекция > Цветовой тон/насыщенность... (Image > Adjustments > Hue/Saturation…). Это намного проще, чем заполнять все новым цветом, который может выглядеть не так хорошо, как изначально задумывалось. Если цвета, получившиеся в итоге выглядят хорошо, но текстуры и контраст немного теряются, попробуйте отрегулировать яркость и контраст, перейдя в меню Изображение > Коррекция > Яркость/Контрастность... (Image > Adjustments > Brightness/Contrast…) или используйте Палитру цветов (Color Mixer) и инструмент Заливка (Paint Bucket), чтобы вручную улучшить каждый цвет.

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

Шаг 3

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

Шаг 4

Теперь двери.

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

3. Планируем расположение

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

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

Шаг 1

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

Они должны быть достаточно длинными, чтобы могла уместиться машина.

Шаг 2

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

Шаг 3

Теперь давайте добавим еще немного линий, чтобы ограничить наше имущество.

Нарисуем еще одну линию для заднего двора.

Теперь мы полностью определили границы для двора.

Шаг 4

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

Шаг 5

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

4. Разделяй и умножай

Пора добавить что-нибудь для разделения земли между соседями: мы нарисуем забор вокруг заднего двора.

Шаг 1

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

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

Шаг 2

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

Шаг 3

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

Шаг 4

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

Шаг 5

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

Шаг 6

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

Шаг 7

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

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

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

Шаг 8

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

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

Шаг 9

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

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

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

5. Заканчиваем поверхность

Теперь нам необходимо придать всем элементам вид одного единого окружения.

Шаг 1

Начнем с удаления всех ненужных разделяющих линий (то есть линии на стыке поверхностей).

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

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

Шаг 2

Чтобы смягчить линии между травой и бетоном нам лучше закруглить эти углы:

Шаг 3

Мы можем придать траве тонкую подсветку, чтобы выглядело так, как будто она растет немного выше уровня бетона. Это можно легко сделать, если выбрать темную обводку травы при помощи инструмента Волшебная палочка (Magic Wand Tool), затем передвинуть выделение вверх на один пиксель и в итоге заполнить его светлым зеленым цветом (галочка Смежные пиксели (Contiguous tool) инструмента Заливка (Paint Bucket tool) должна быть снята).

Шаг 4

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

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

Чтобы создать его, необходимо выделить часть узора как показано выше (одна грань начинается там, где заканчивается противоположная), а затем перейти в меню Редактирование > Определить узор... (Edit > Define Pattern…)

Затем, чтобы применить его, используйте инструмент Заливка (Paint Bucket tool) и выберите Регулярный (Pattern) вместо Основной цвет (Foreground). Выберите новосозданный узор среди остальных и заполните им зону травы (галочка Смежные пиксели (Contiguous tool) должна быть снята).

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

Шаг 5

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

Шаг 6

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

Шаг 7

Добавим немного объема обочине. Вы можете сместить всю поверхность на несколько пикселей вниз, а затем, применив alt-смещение, вернуть ее обратно и закрасить пиксели между контурами. Надеюсь, теперь вы знаете, что нужно делать: подсветка на самых передних углах, затемнение на сторонах.

Шаг 8

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

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

Шаг 9

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

Шаг 10

Вот так выглядит финальный уклон. Большинство линий были смягчены в тоне, так как вся поверхность довольно плоская, поэтому она должна немного выделяться. Я добавил сглаживание, чтобы сократить неровность и контрасты, но идеальное сглаживание не должно добавлять слишком много цветов; не используйте инструмент Градиент (Gradient Tool).

Шаг 11

Скопируйте и вставьте уклон для всех домов.

Шаг 12

Пора добавить дороги: сначала заполним фон асфальтовым цветом. Лучше всего сделать это на новом фоновом слое.

Шаг 13

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

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

Готово!

Квартал закончен. Если вы хотите размножить кварталы, можете выбрать все, убрать видимость слоя с асфальтом и копировать все (Ctrl + Shift + C), а затем вставить, выровнять и корректно упорядочить слои, после чего повторять этот процесс до получения необходимого количества улиц.

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

Надеюсь, вам понравилось, удачи!

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

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

photoshop-master.ru

Рисуем пиксельное изображение в Photoshop

Я уже писал о pixel art‘e, и обещал написать ещё. Пришло время) Сегодня я покажу более детально как отрисовывать пиксельный рисунок. Теория + Практика.

1) Создадим новый документ , размером 1*1px. Зальём его чёрным и определим как кисть. Назовём её «PixelBrush»

2) Открываем изображение, которое будем превращать в пиксельное. Сделаем его полупрозрачным, чтобы были видно контуры, но линии не были слишком яркими, и мы могли спокойно обводить.Выбираем карандаш, и установим ему кисть «PixelBrush», диаметр 1px. Перед обводкой, необходимо подумать о уровне детализации, который вам походит. Статичное изображение содержит больше деталей, чем анимированное. Обводим контуры на новом слое. В сложных местах, таких, как окружности, я пользовался инструментом Pen, и затем обводил контуры(панель Path-правый клик на контуре — Stroke Path).

3) Немного теории. Чтобы визуально не возникало ощущения рваности линии, необходимо придерживаться гармоничности. Покажу на примере:

Прямые/наклонные

Скруглённые линии

Чистим и подправляем контуры.

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

Назовём слой «Colors»

5) Помещаем слой контур и «Colors» в новую папку. Теперь дублируем их и объединяем копии. Правый клик на иконке этого слоя и выбираем Select Pixels. Выбираем папку и создаём маску. Теперь мы можем спокойно работать с нашим персонажем, не боясь, что что-то вылезет за его пределы.

6) Наносим тени

7) Как делать плавный переход.

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

а более сложный градиент выглядит так:

Я добавил что-то подобное к шапке. Я не стал увлекаться «фотореалом», и не стал использовать много градиентов.

8

8) Сгладим шероховатые линии. Объяснить сложно, так что смотрим примеры:

8a

8b

А вот и наш результат:

У меня не точно соблюдена цветовая гамма, но, надеюсь, сам принцип понятен

Желаю успехов!

Кстати, можете посмотреть блог веб-мастера, который я сам читаю)

Читателям также нравится:

Обратите внимание!

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

naikom.ru

Adobe Photoshop: Рисуем и анимируем персонажа в технике Pixel Art

В этом уроке вы научитесь рисовать и анимировать персонажей в технике Pixel Art. Для этого вам понадобится только программа Adobe Photoshop. В итоге получится GIF с бегущим космонавтом.

Программа: Adobe Photoshop Сложность: новички, средний уровень Понадобится времени:  30 мин – час

Animated-Pixel-Art-Sprite-in-Photoshop-1

I. Настройка документа и инструментов

Шаг 1

Выберите Pencil (карандаш) на панели инструментов – это будет основной инструмент для нашего урока. В настройках выберите тип Hard Round brush, и установите остальные значения так же как на картинке. Наша цель – сделать перо карандаша максимально резким.

Animated-Pixel-Art-Sprite-in-Photoshop-2

Шаг 2

В настройках Eraser Tool (ластик) выберите режим Pencil Mode, и установите остальные значения как показано на картинке.

Animated-Pixel-Art-Sprite-in-Photoshop-3

Шаг 3

Включите пиксельную сетку Pixel Grid (View > Show > Pixel Grid). Если в меню нет такого пункта, то зайдите в настройки и включите графическое ускорение Preferences > Performance > Graphic acceleration.

Обратите внимание: Сетка будет видна только на вновь созданном холсте при увеличении масштаба 600% и более.

Animated-Pixel-Art-Sprite-in-Photoshop-4

Animated-Pixel-Art-Sprite-in-Photoshop-5

Шаг 4

В настройках Preferences > General (Control-K) поменяйте режим интерполяции изображения на режим Nearest Neighbor (по соседним пикселам). Это позволит границам объектов оставаться максимально четкими.

Animated-Pixel-Art-Sprite-in-Photoshop-6

В настройках единиц измерения и линеек установите единицы измерения линеек в пикселах Preferences > Units & Rulers > Pixels.

Animated-Pixel-Art-Sprite-in-Photoshop-7

II. Создание персонажа

Шаг 1

И вот теперь, когда все настроено, мы можем приступить непосредственно к рисованию персонажа.

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

Animated-Pixel-Art-Sprite-in-Photoshop-8

Шаг 2

Уменьшите масштаб эскиза до 60 пикселей в высоту, используя комбинацию клавиш Control+T, или команду Edit > Free Transform.

Размер объекта отображается на информационной панели. Обратите внимание, чтобы настройки интерполяции были такими же, как мы делали в шаге 4.

Animated-Pixel-Art-Sprite-in-Photoshop-9

Шаг 3

Приблизьте эскиз на 300-400%, чтобы было легче работать, и уменьшите прозрачность слоя. Затем создайте новый слой и обрисуйте контуры эскиза, используя Pencil Tool. Если персонаж симметричный, как в нашем случае, можно обрисовать только половину, а затем продублировать и отразить нарисованное зеркально (Edit > Transform > Flip Horizontal).

Animated-Pixel-Art-Sprite-in-Photoshop-10

Ритм: Чтобы нарисовать сложные элементы разбивайте их на части. Когда пикселы (точки) в линии образуют «ритм», например, 1-2-3, или 1-1-2-2-3-3, набросок выглядит более гладко для человеческого глаза. Но, если того требует форма, этот ритм может быть нарушен.

Animated-Pixel-Art-Sprite-in-Photoshop-11

Шаг 4

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

Animated-Pixel-Art-Sprite-in-Photoshop-12

Шаг 5

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

Animated-Pixel-Art-Sprite-in-Photoshop-13

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

Animated-Pixel-Art-Sprite-in-Photoshop-14

Шаг 6

Создайте новый слой для бликов.

Выберите режим наложения Overlay из выпадающего списка на панели слоев. Нарисуйте светлым цветом над теми областями, которые хотите подсветить. Затем сгладьте блик, применив фильтр Filter > Blur > Blur.

Animated-Pixel-Art-Sprite-in-Photoshop-15

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

Animated-Pixel-Art-Sprite-in-Photoshop-16

Шаг 7

Теперь космонавту нужно добавить контрастности. С помощью настроек уровней (Image > Adjustments > Levels) сделайте его ярче, а затем отрегулируйте оттенок с помощью опции Color Balance (Image > Adjustments > Color Balance).

Animated-Pixel-Art-Sprite-in-Photoshop-17

Теперь персонаж готов к анимации.

Animated-Pixel-Art-Sprite-in-Photoshop-18

III. Анимирование персонажа

Шаг 1

Создайте копию слоя (Layer > New > Layer Via Copy) и сдвиньте ее на 1 вверх и на 2 пиксела правее. Это ключевой пункт в анимации персонажа.

Снизьте прозрачность оригинального слоя на 50% чтобы видеть предыдущий кадр. Это называется “Onion Skinning”(режим плюра).

Animated-Pixel-Art-Sprite-in-Photoshop-19

Шаг 2

Теперь согните руки и ноги персонажа так, как будто он бежит.

● Выделите левую руку инструментом Lasso● Используя FreeTransformTool (Edit > FreeTransform) и удерживая клавишу Control, передвиньте границы контейнера так, чтобы рука отодвинулась назад.● Выделите сначала одну ногу, и немного растяните ее. Затем вторую ногу наоборот сожмите так, чтобы создалось ощущение, что персонаж шагает.● С помощью карандаша и ластика подправьте часть правой руки ниже локтя.

Animated-Pixel-Art-Sprite-in-Photoshop-20

Шаг 3

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

Animated-Pixel-Art-Sprite-in-Photoshop-21

Шаг 4

Сделайте копию второго слоя и отразите ее по горизонтали. Теперь у вас есть 1 базовая поза и 2 в движении. Восстановите непрозрачность всех слоев до 100%.

Animated-Pixel-Art-Sprite-in-Photoshop-22

Шаг 5

Перейдите Window > Timeline чтобы отобразилась Timeline панель, и нажмите Create Frame Animation.

Animated-Pixel-Art-Sprite-in-Photoshop-23

На временной шкале сделайте следующее:

  1. Установите задержку времени в 0,15 сек
  2. Кликните на DuplicatesSelectedFrames, чтобы создать еще 3 копии
  3. Установите цикл повтора Forever

Animated-Pixel-Art-Sprite-in-Photoshop-24

Шаг 6

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

Базовая позиция→Бег с правой ноги→Базовая позиция→Бег с левой ноги.

Animated-Pixel-Art-Sprite-in-Photoshop-25

Нажмите на пробел, чтобы проиграть анимацию.

Animated-Pixel-Art-Sprite-in-Photoshop-26

Шаг 7

Теперь сохраните результат. Перейдите File > SaveForWebи выберите GIFформат. Установите значение 300% в графе Размер для лучшего результата, и нажмите Save.

Animated-Pixel-Art-Sprite-in-Photoshop-27

Поздравляем! Ваш анимированный пиксельный персонаж готов!

Animated-Pixel-Art-Sprite-in-Photoshop-1

Скачать приложения для урока

Автор: Глеб Поликанин Перевод PressFoto

Related

www.pressfoto.ru


Смотрите также