Создание пиксель-арта

Пиксель-арт. Рисунок рыбки

Тюрина Екатерина Александровна педагог дополнительного образования

• Учебное пособие «Пиксель-арт. Рисунок рыбки» предназначено для учащихся художественных школ, учреждений дополнительного образования, частных художественных студий.

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

Пиксель-арт

(пиксельная графика, англ. pixel art)

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

Цель урока: создать пиксельное изображение рыбки.

Задачи:

• научиться рисовать пиксель-арт;
• изучить теоретические основы создания пиксельной графики;
• научиться использовать современные компьютерные технологии;
• сформировать умение анализировать свою работу.

Материалы:

• компьютер/ноутбук,
• компьютерная мышь/графический планшет,
• программа Adobe Photoshop.

Интерфейс программы Adobe Photoshop

1  - Строка меню. Представляет собой выпадающие списки, в которых находится доступ ко всем настройкам и командам программы.

2  - Панель параметров инструментов. При выборе инструмента в этой панели появляется доступ к его основным параметрам.

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

4  - Панель рабочей среды программы. Здесь можно поменять рабочую среду в зависимости от потребностей пользователя и спецификации его работы.

5  - Панели настроек инструментов, слоев, цветов и т.д. Данные панели позволят расширить функционал.

Настройки Photoshop Строка меню – Редактирование – Настройки – Основные

Настройки Photoshop Основные – Интерполяция: По соседним пикселям – ОК

Единицы измерения:

Линейки: Пиксели

Текст: Пиксели

Ширина:1 пункт

Средник: 1 пункт

Настройки Photoshop

Направляющие, сетка и фрагменты – Сетка:

Линия через каждые: 1 Пиксели Внутреннее деление на: 1

Создание файла Строка меню – Файл – Создать (Ctrl + N) – ОК

Ширина: 50 пикселей ; высота: 50 пикселей

Разрешение: 72 пикселя/ дюйм

Цветовой режим: Цвета RGB (8-бит)

Содержимое фона: Белый фон

Настройка инструментов «Карандаш» и «Ластик»

• На панели инструментов нужно выбрать инструмент «Кисть». Затем в выпадающем меню выбрать инструмент « Карандаш » и установить размер в 1 пиксель. Данный инструмент также можно вызвать нажатием кнопки «В».

• На панели инструментов нужно выбрать инструмент «Ластик» и задать для него размер в 1 пиксель. Затем на панели параметров инструмента выбрать режим «Карандаш». «Ластик» можно вызвать нажатием кнопки «Е».

Показ сетки

• Чтобы показать, где на холсте будут располагаться пиксели, можно включить сетку. Для этого нужно в строке меню выбрать «Просмотр», далее – «Показать» – «Сетку». Или воспользоваться комбинацией клавиш «Ctrl» + «’». В дальнейшем сетку можно убрать.

• Первый этап работы над рисунком - добавление контура основы рыбки.
• Нужно создать новый прозрачный слой поверх ранее созданного слоя «Фон». Это можно сделать 3 разными способами:

1) Строка меню – «Слои» – «Новый» – «Слой».

2) Нажатие на иконку с загнутым листом в нижней части панели слоев.

3) Одновременное нажатие клавиш «Ctrl» + «Shift» + «N».

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

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

Основа рыбки

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

Добавление глаза и плавников

Добавление основных цветов

Добавление теней

• Важно: периодически нужно уменьшать масштаб изображения, чтобы проверять, как выглядит рисунок с изначальными размерами 50×50 пикселей, и в случае необходимости корректировать его. Для этого на панели инструментов нужно нажать на значок лупы. Затем на панели параметров инструмента выбрать «100%».

• Иконки лупы со знаком «+» и «-» соответствуют увеличению и уменьшению масштаба холста. Чтобы изменить масштаб изображения, нужно навести на него соответствующий значок лупы и нажать на левую кнопку мыши. Или воспользоваться комбинациями клавиш «Ctrl» + «+»/ «Ctrl» + «-».

Добавление полутона

• Подсказка: можно не подбирать каждый раз новый цвет, а использовать цвет теней/ света, меняя прозрачность и режим кисти или слоя, на который добавляется новый элемент.

Добавление света

Добавление света (непрозрачность 50%)

Проработка глаза. Добавление света, полутона, теней.

Корректировка контура и деталей

Добавление полупрозрачных пикселей

Добавление деталей

Работа над грудным плавником

Добавление падающей тени от плавника

Итоговая корректировка рисунка и размеров холста

Итоговый результат

Масштаб 100%

Масштаб 600%