Вступление

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

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

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

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

Программное обеспечение

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

Pixen (Mac)

Graphics Gale (Win)

Другие программы…

Я работал в обеих этих программах, но вернулся к Photoshop, так как привык к его клавиатурным командам.

Давайте все подготовим

1. Во-первых, откройте установки в Photoshop и установите Интерполяцию изображения «по соседним пикселам».

2. Создайте новый документ размером 300 x 300 пикселей и разрешением 72 dpi (точек на дюйм).

3. Установите инструмент Карандаш в 1 пиксель. Инструменты Карандаш и Ластик, единственные инструменты, которые нам нужны.

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

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

Когда пиксельный рисунок рассматривается на 100% (реальный размер) инструмент Карандаш в 1 пиксель очень мал, поэтому вам может оказаться трудно его увидеть и управлять им. Идея заключается в увеличении изображения до 800%, так что вы сможете увидеть, что делаете. Мне часто приходится открывать 2-е окно в Photoshop с размером изображения в 200%, так я смогу видеть, как мой рисунок выглядит вблизи и в тоже время чуть подальше.

Мы можем сохранить наш рабочий документ в формате PSD и экспорта для использования в web, а потом и в GIF. Также мы можем потом увеличить файл в сохранить в TIF для печати CMYK.

Давайте начнем урок

Давайте попробуем нарисовать что-нибудь похожее на отрытую книгу. С помощью инструмента Карандаш нарисуйте черный контур. Затем заполните цветом страницы и закладку книги.

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

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

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

Угловые пиксельные линии

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

Необходимо помнить, что линии под углом выглядят лучше всего, когда они симметричные. Если они несимметричные (как показано ниже), они могу показаться бугристыми и грубыми, если смотреть без увеличения. Второй пример ниже более гладкий изометрический угол, который прекрасно смотрится на пиксельных рисунках. Но это угол в 30 º «ISO», который вы использовали, например, в Начертательной геометрии – это что-то ближе к 26.5º. Угол в 30 º, к сожалению, дает бугристую линию на 100%. Если вы рисуете линию, которая симметрично движется на 2 точки в сторону и 1 точку вверх, то вы получите угол в 26.5 º. Мы попробуем нарисовать что-нибудь еще, но немного более геометрическое и, используя больше линий по образцу?

Давайте рисовать пиксельное бревно

Линии по всей длине это легко, мы знаем, как это сделать, но как насчет тех круглых спилов?

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

Я часто подсчитываю количество пикселей или вспоминаю точные комбинации. Комбинация пикселей в круге…

• 3 пикселя (в ширину)
• 2
• 222 (вниз)
• 6
• 2
• 1
• 
  

Немного утомительно вначале, но вскоре вы «почувствуете» это. Длина бревна просто: мы просто используем систему 2 вдоль 1 вверх и создаем бревно длинное или короткое, как мы хотим.

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

Вы можете сделать это как на образце, а можете и более сложное.

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

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

Давайте рисовать пиксельное бревно

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

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

Как вы можете увидеть деталей совсем немного – я просто хочу в первую очередь получить основные формы и правильные углы. Все остальное мы сделаем в Photoshop.

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

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

Она по-прежнему выглядит немного неаккуратно, но будет формироваться!

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

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

Заключение

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