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

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

Пиксельные рисунки можно сохранять в форматы gif и png, а затем добавлять анимацию. Так рисуют анимированные смайлики для программ интерактивного общения, ICQ, Miranda и т.п.

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

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

Создаем новый документ размером 60 на 60 пикселей, разрешением 72 dpi и прозрачным фоном. Выбираем инструмент Elliptical Marquee Tool (Овальная область) и в панели параметров этого инструмента отключаем функцию Anti-Aliased (Сглаживание). Отключение сглаживания - очень важный момент, четкие границы получаются только при отключении Anti-Aliased.

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

В самом нижнем слое создаем выделение в форме окружности, которое будет основой для смайлика. Заливаем окружность черным цветом, это будет контур (screen 1).

Не снимая выделение, создаем новый слой. Выделенную область следует уменьшить на 1 пиксель. Для этого заходим в меню Select (Выделение), выбираем Modify (Модификация), затем Contract (Сжать). В выпадающем окне задаем уменьшение в 1 пиксель. Теперь заливаем выделенную область бежевым цветом (screen 2).

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

Полезные советы:

1. Нарисовать инструментом Pencil Tool (Карандаш) ровную горизонтальную или вертикальную линию можно зажав клавишу Shift.

2. Для инструмента Eraser Tool (Ластик) выберите режим Pencil (Карандаш) размером в 1 пиксель.

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

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

При активном окне рабочего файла следует зайти в меню Window (Окно), выбрать Arrange (Компоновка), далее New Window for... (Новое окно для) далее должно быть название вашего файла.

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

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

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

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

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

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

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

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

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

Получится приблизительно так, как на рисунке (screen 5).

Анимация смайлика

В Adobe Image Ready попробуем добавить движений. На том смайлике, который мы взяли в качестве примера, можно изобразить испуг, если увеличивать ему глаза. Вначале нарисуем глаза большего размера с поднятыми бровями и широко открытый рот в новых слоях (screen 6).

Еще один вариант, сделать волосы в момент испуга более взъерошенными. Это может выглядеть приблизительно так, как на рисунке (screen 7).

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

Переходим в редактор Adobe Image Ready, для этого заходим в меню File (Файл), выбираем Edit in Image Ready (Редактировать).

В Image Ready анимация создается включением и отключением нужных слоев для каждого кадра. Палитра Animation служит для управления ключевыми кадрами.

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

Во втором кадре следует сделать видимыми слои с широко открытыми глазами, ртом и взъерошенными волосами. Задержку для первого и второго кадров можно установить 0.1 или 0.2 секунды, а для последнего где-то 0.6 и больше.