Новости
25.10.2017
Показатель отказов: от чего он зависит? Показатель отказов: от чего он зависит?

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

18.10.2017
Копия сайта и необходимость ее создания Копия сайта и необходимость ее создания

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

10.10.2017
Грамматические ошибки на сайте: накажут ли за них поисковики? Грамматические ошибки на сайте: накажут ли за них поисковики?

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

Мировые новости


26.12.2014
Основы работы с пиксельной графикой

Основы работы с пиксельной графикой

Пиксельная графика, или пиксель-арт (англ. Pixel Art) – особое направление цифрового изобразительного искусства, в котором изображение создается и редактируется на уровне пикселов.

 

Виды пиксельной графики

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

К особенностям пиксельной графики можно отнести:

  • небольшой размер рисунка,
  • ограниченное количество цветов,
  • чёткий «мультяшный» контур,
  • отсутствие сглаживания,
  • ограниченные возможности масштабирования.

К каждой из этих особенностей следовало бы дописать «как правило»,  т.к. из каждого из них есть исключения.

Область применения пиксель-арта довольна обширна:

- Иконки, кнопки, баннеры, другие элементы оформления сайтов.

- Иллюстрации для сайтов.

- Иллюстрации для полиграфии.

- Графика для игр.

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

Основные базовые навыки

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

  • умение рисовать,
  • понимание цвета, текстуры, формы,
  • знание анатомии,
  • знание законов перспективы,
  • знание основ анимации.

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

Инструменты

Для создания пиксельных рисунков подходит практически любой графический редактор, предназначенный для работы с растровой графикой. Например, Adobe Photoshop, MS Paint, GIMP, Graphics Gale, Picture Editor идр.

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

Настройки Photoshop

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

Параметры Photoshop при создании нового файла:

  • Resolution: 72 pixel/inch;
  • Color Mode: RGB Color;
  • Background Contents: Transparent.

Настройки основных инструментов, используемых для пиксельных рисунков

  • Карандаш(Pencil Tool) иластик(Eraser Tool): Master Diameter: 1 px; Hardness: 100%; Opacity: 100%.
  • Инструментывыделения(Marquee, Lasso, Magic Wand): функциясглаживания(Anti-aliasing) отключена, Tolerance: 0.
  • Инструментзаливки(Paint Bucket): функциясглаживания(Anti-aliasing) отключена, Tolerance: 0.
  • Инструментырисованияфигур(Shape): Fill Pixel, функциясглаживания(Anti-aliasing) отключена.

Идея и Техническое Задание

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

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

Допустим, возникла идея нарисовать прыгающий шарик. Точнее, шарик, прыгающий на кубике=)  Идея, конечно, хорошая, просто замечательная идея… Но пока еще очень расплывчатая.

Шарики бывают разные. Кубики, впрочем, тоже. Разные по цвету, размеру, физическим свойствам и т.д. Значит так, пусть шарик будет упругий, а кубик жесткий… Нет, пусть лучше наоборот… Нет, лучше пусть будет два разных шарика и два кубика… Нет, лучше три… Нет, четыре… Стоп!

Мы видим, что очень важно иметь четкое техническое задание (ТЗ). Даже если вы рисуете для себя. В этом случае,конечно,  нет необходимости фиксировать ТЗ на бумаге или оформлять его в виде электронного документа, достаточно просто сформулировать его мысленно, продумать все детали, этапы работы. Прекрасно, если удастся «увидеть» конечный результат.

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

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

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

что должно получиться (рис.1):

Предметы, их форма, свойства, текстура и цвет.

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

1)      жесткий легкий шар и жесткий куб – шарик для пинг-понга, белый, гладкий, и кирпич, терракотовый, с отверстиями и ребрами жесткости;

2)      упругий шар и жесткая шестигранная призма – синий резиновый мяч и кусок мрамора, светлый, со сколами, царапинами и прожилками;

3)      жесткий тяжелый шар и упругий цилиндр – металлический шарик, гладкий и блестящий, и отрезок резины, темно-розового цвета, пористый, шероховатый;

4)      упругий шар и упругий предмет сложной формы – смайл желтого цвета, с глазами, ртом и руками, и пуфик, облезло-голубой, плюшевый, на деревянной основе и металлических ножках.. =)

Размеры.

1)      Шарик – 16×16 px (ширина 16 пикселов, высота 16 пикселов).

2)      Предмет, на котором прыгает шарик – ширина до 32 px, высота произвольная (в разумных пределах, чтобы все выглядело соразмерным).

3)      Анимация – ширина соответствует ширине предмета, высота до 96 px.

Проекция. Изометрическая.

Количество цветов в палитре. 15-20 цветов на один объект.

Этапы выполнения проекта.

1)      Контуры.

2)      Анимация.

3)      Цвет.

Использование референсов

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

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

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

Источник