Автор: Scooba

Меня нередко спрашивают о том, как создавалась растровая графика на funkreich.de. Я решил написать этот урок. В нем я расскажу как я создал этот пиксельный рисунок - старомодная патефонная иголка.

Какую программу использовать? Первое, что приходит в голову -Photoshop. Если вы уже привыкли к нему, то вряд ли променяете на что-нибудь другое. Я работаю в данный момент на версии 5.5, в которую входит приложение ImageReady. Последнее я рекомендовал бы для создания анимированных gif-файлов - ImageReady справляется с этим лучше, чем Fireworks.

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

В этом уроке вы получите только основную информацию. Главное в этом деле - наметанный глаз. Нужно уловить особенности этого стиля изображения. Самый важный технический момент - создание нового вида в Photoshop (View > New View / Вид > Новый вид). При этом открывается новое окно, в котором вы можете независимо изменять масштаб изображения.

Шаг 1

Создайте новый документ. В диалоговом окне введите размеры изображения в пикселах. Размер лучше взять с запасом, немного больше предполагаемого размера вашего рисунка. Я ставил 320х240. Что касается цветовой палитры, то лучше выбрать RGB. Разрешение поставьте на 72 пиксела на дюйм (это разрешение монитора).

Теперь создайте новый вид (View > New View / Вид > Новый вид), установите масштаб 600% и разместите окна так, чтобы вы могли полностью видеть их одновременно. Создайте новый слой (нажмите иконку "Create New Layer" / "Создать новый слой"). Переключитесь на черно-белый цветовой режим (нажмите "D") и с помощью прямоугольного выделения очертите границу предполагаемого изображения. В моем случае это было 66х64 пиксела.

Преобразуем выделение в штрих (Edit > Stroke...; Width = 1 Pixel; Location =inside; Opacity =50% / Правка > Штрих…; Размещение - внутри, Непрозрачность - 50%).

С помощью инструмента "рука" (hand) расположите выделение во втором окне (с большим масштабом) так, чтобы вы могли видеть его полностью.

Рабочее пространство теперь будет выглядеть вот так:

Мои поздравления! Вы закончили первый этап. Теперь запасемся терпением и продолжим.

Шаг 2

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

Чтобы линии не выглядели "зазубренными", придерживайтесь золотого правила: диагональные линии нужно рисовать так:
один пиксел влево/вправо и один - вверх/вниз - т.е. под углом 45°;
или несколько пикселов вправо/влево и один вверх/вниз.

Учтите, что инструмент "линия" в Photoshop для последнего случая не подходит - появляется нежелательные пикселы, огрубляющие линию, или, если включено сглаживание, создается сглаженная версия. Этот инструмент можно использовать для горизонтальных и вертикальных линий, а также линий под 45°. Посмотрите на примеры качественной и некачественной линий.

Теперь все зависит от вас. Мало что могу сказать об этом этапе - это этап проб и ошибок. Создайте новый слой, зайдите во второе окно и приступайте к рисованию. Не старайтесь тщательно прорабатывать детали - вы сделаете это на завершающем этапе. Если вы ошиблись, сотрите лишние пикселы "ластиком" (переключаться между ластиком и карандашом можно клавишами "E" и "N"). Посматривайте в первое окно (масштаб 100%). Результат моих стараний на этом этапе выглядел вот так:

Шаг 3

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

Теперь залейте контуры. В этом примере я не использовал цвета, оптимизированные для Сети. Если вы хотите взять такие же цвета, отключите параметр "только цвета для web" ("Only Web Colors") на панели цветов. Для этого достаточно дважды кликнуть на черном основном цвете на панели инструментов. Я выбрал цвета #FFF600 (желтый) для самой иголки и #000000 (черный) - для корпуса. Вот так выглядит результат:

Шаг 4

Довольно просто, не правда ли? Теперь мы займемся светотенью. Это придаст рисунку реалистичности. Цвет тени для иголки #C8C100, светлых областей -
#FFFDC0. Конечно, вы можете выбрать свои значения. Поэкспериментируйте. Вы увидите, что нужны лишь незначительные изменения оттенка - этого, как правило, достаточно.

В увеличенном виде заметно подобие градиента. На самом деле, я не использовал градиент из набора Photoshop, а создал этот эффект с помощью инструмента "линия". Сначала рисуем смую яркую линию, потом - более тусклую и т.д. Я не сторонник применения сглаживания (anti-alias). Оно позволяет сделать некоторые переходы плавными. Но с другой стороны, вы не контролируете отдельные пикселы изображения. А это может быть важно.

Шаг 5

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

Шаг 6

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

Да прибудет с вами Пиксел!

2006-07-18

Неплохо, спасибо. Можно еще статейки про пиксельную графику?