Практическая работа «Работа с растровым графическим редактором»

Практическая работа № 6

«Работа с растровым графическим редактором»

Цель урока: Научиться работать в растровом онлайн редакторе Pixilart.

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

Инструкция по выполнению практической работы

Подготовка:

1. Откройте браузер и перейдите на сайт https://www.pixilart.com/

Рабочее окно программы

2.Нажмите на кнопку START DRAWING (начать рисовать).

3. Откроется окно для создания нового рисунка. Задайте длину и ширину полотна: 200х200.

4. Появилось поле для рисования. Это фоновый слой BACKGROUND.На этом слое лучше не рисовать, так как при редактировании рисунка, будет удаляться и фон. Все слои вы можете найти в окне справа. Мы будем рисовать каждый элемент робота на отдельном слое, чтобы можно было перемещать и редактировать каждый элемент отдельно. В дальнейшем слои можно объединить.

5. Можно убрать видимость фонового слоя. Для этого нажмите на белый маркер-круг слева от слоя.

Создание тела робота:

6. Создайте первый слой LAYER1. Для этого нажмите на + в окне навигации справа. А чтобы не запутаться, переименуйте слой в «Тело робота». Для этого оставайтесь на нужном слое и нажмите в окне под слоями Rename Layer или Layer Properties. Или 2 раза щелкнуть левой кнопкой мыши по слою.

7. На первом новом слое постройте тело робота. Выберите цвет основной фигуры и толщину линии (по умолчанию стоит 1, максимум — 24). Прямоугольником постройте фигуру робота и залейте его понравившимся цветом.

8. Чтобы придать объем фигуре, можно с помощью инструмента Линия создать дополнительные плоскости. Залейте их тем же цветом, что и основной прямоугольник. Эффект градиента создайте линиями разного цвета и толщины. Все инструменты находятся на левой панели: Карандаш, Ластик, Фигуры, Добавление текстового блока и т.д.

Создание головы робота:

9. Добавьте второй слой и назовите его «Голова».

10. Скопируйте тело с помощью инструмента Select Tool.

Он находится в левой панели. Им можно выделить нужные элементы, а затем скопировать их и вставить , с помощью команд CTRL+C и CTRL+V.

11. Вставьте в слой “Тело”, скопированный элемент, который станет головой робота. Уменьшите размер элемента и поднимите его над телом.

12. Используя Карандаш, дорисуйте шею робота.

Создание рук робота:

13. Создайте новый слой и назовите его «Правая рука».

14. Соберите руку из кругов разного размера. Используйте инструмент Круг. Можно разукрасить круги в разные цвета.

15. Используя Карандаш, нарисуйте пальцы робота.

16. Скопируйте правую руку с помощью инструмента Select Tool, как это делали с телом. Вставьте вторую руку на новый слой и переименуйте его в «Левая рука».

17. Переместите элемент и подставьте его к телу слева.

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

Создание ног робота:

19. На следующем слое, который мы назовем «Правая нога»

20. Нарисуйте ногу с помощью инструментов Круг и Линия.

21. Создайте вторую ногу. Для этого просто скопируйте ту, которую вы уже нарисовали. Вставьте скопированные элементы на слой «Левая нога».

22. C помощью инструмент Карандаш или Ластик убирите мелкие

погрешности.

Создание лица робота:

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

24. В любой части полотна нарисуйте один глаз, скопируйте его и выровняйте относительно первого глаза.

25. Переместите глаза на лицо.

26. Создайте новый слой для улыбки робота.

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

Украшение робота:

28. Можно добавить пару штампов для красоты. Создайте новый слой «Броня».

29. Добавьте штамп из коллекции Mario. Для этого на панели

инструментов слева найдите Stamp tool.

Затем в поисковой строке введите Mario. Появятся все штампы из этой коллекции.

30. Добавьте щит, увеличьте его размер и поместите на грудь робота.

Объединение слоёв:

31. Теперь можете объединить слои. Для этого выберите самый нижний или самый верхний слой и нажмите на кнопку Merge Layer Up или Merge Layer Down, которые находятся на панели справа под блоком со слоями. Постепенно, при каждом нажатии слои объединяться.

Сохранение робота:

32. Есть два способа сохранить рисунок: как фото и как файл с расширением pixil. Нам нужен первый способ.

33. Выберите DOWNLOAD. Укажите путь и имя файла.

34. Документ сохранился на вашем компьютере.

Дополнительное задание: создание GIF-ки

1. Откройте панель инструментов GIF FRAMES, которая находится в левом нижнем углу под холстом.

2. Скопируйте ваш фрейм. Эта команда находится чуть правее на нижней панели, альтернативный способ SHIFT+D.

3. Измените робота. Например, длину ног или цвет глаз.

4. Настройте время просмотра одного фрейма и общее время анимации.

5. Для просмотра GIF нажмите

6. Сохраните документ как гифку.

Ваш робот теперь прыгает и подмигивает.