01. Компьютерная графика. Инструменты графического редактора

Компьютерная графика

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

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

Позже у ЭВМ появились экраны, отдалённо напоминающие современные, на которых можно было осуществлять ввод изображений.

Эти изображения строились из алфавитно-цифровых символов по следующему принципу — буквы алфавита и символы подбирались таким образом, чтобы человеческий глаз с определённого расстояния мог воспринимать этот набор символов как изображение. 

В настоящее время этот принцип лёг в основу формы изобразительного искусства, которая называется ASCII artwork.

Вы можете встретить примеры такой графики в социальных сетях — по такому же принципу образованы смайлики (набор символов складывается в «рожицу», передающую ту или иную эмоцию. С течением времени техника всё больше и больше усложнялась, применялись специальные фильтры, компьютеры усовершенствовали в военных целях, было изобретено световое перо, что внесло немалый вклад в вопросы компьютерной графики. Кстати, произошло это раньше, чем вы могли бы подумать — в 1955 г.

Вскоре был изобретён сканер, и уже в 60-е годы XX века начался реальный расцвет компьютерной графики, который можно объяснить приходом микросхем.

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

Эволюция компьютеров. Микросхемы

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

Такие компьютеры работали по принципу наличия или отсутствия сигнала (напряжения) на лампе. Этот способ передачи сигнала можно считать предком 0 и 1, о которых мы так много слышим теперь, говоря об информатике.

Посмотрим, как выглядел такой компьютер. Один из первых — ENIAC (электронный числовой интегратор и вычислитель), созданный по заказу армии США.

Построен он был к осени 1945 года и имел следующие характеристики:

• вес — 30 тонн;

• объём памяти — 20 число-слов;

• потребляемая мощность — 174 кВт;

• количество электронных ламп — 17 468;

• вычислительная мощность — 357 операций умножения или 5000 операций сложения в секунду.

У такого компьютера средств для работы с графикой не было. 

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

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

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

Интегральная микросхема — символ третьего поколения компьютеров. 

Компьютеры, которые окружают нас сегодня, — четвёртое поколение, но уже с элементами пятого поколения, над которым ещё работают.

Компьютеры четвёртого поколения — поколение компьютерной техники, разработанное после 1970 года. Эти компьютеры дали возможность познакомиться с вычислительной техникой практически для любого человека. 

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

Сфера эта важна для инженеров-конструкторов при создании новых или усовершенствовании уже существующих видов техники, архитекторов, создающих здания, дороги или другие объекты, авиаконструкторов и пилотов, использующих специальные тренажёры для совершенствования лётного мастерства, дизайнеров и мультипликаторов при создании роликов, макетов и иллюстраций.

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

Графические редакторы. Paint. Paint 3D

Вспомните уроки рисования: у вас есть задание — нарисовать картину, на которой будут дерево, дом и озеро.

Вы решаете начать с озера. Кропотливо трудитесь над его изображением, прорисовываете все детали, а приступив к дому, понимаете, что ваше озеро слишком большое и остальные элементы на листе бумаги не уместятся. Думаю, вы огорчитесь, потому что цена ошибки — потраченное время.

Нельзя уменьшить озеро по щелчку пальца или переместить его в другую часть листа. Придётся начинать всё сначала.

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

Одно из самых известных произведений живописи «Мона Лиза» известно в том числе тем, что Леонардо да Винчи, по некоторым данным, на детальную прорисовку губ потратил 12 лет.

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

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

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

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

У истоков графических редакторов стоял Microsoft Paint, входящий в состав всех операционных систем Windows. 

Первая его версия появилась вместе с первой версией операционной системы Microsoft Windows 1.0 в 1985 г. и, конечно, претерпела массу изменений и улучшений прежде, чем оказаться в вашем компьютере.

Конечно, сегодня графических редакторов огромное множество: от простейших, таких как GIMP и Paint, до профессиональных (Adobe и Spotlight), платных (CorelDraw) и бесплатных (OpenOffice Draw), с самыми разными функциями для дизайнеров, фотографов и любителей. 

На уроке вы частично познакомитесь с интерфейсом и функционалом редактора Paint. Изучив его, вы с лёгкостью сможете адаптироваться к другим. Вы узнаете о базовых элементах управления программой Paint 3D и потренируетесь в их использовании на практике. 

После запуска программы Microsoft Paint на экране появляется окно, отображающее основные элементы редактора. 

Рабочая область — место, где вы будете работать с графикой. Она может занимать как всё окно, так и небольшую его часть. Чтобы контролировать рабочую область, используйте «Масштаб» и полосы прокрутки. Это важно для работы с мелкими деталями. 

Панель быстрого доступа предоставляет возможность работать с действиями, отменяя и возвращая их, сохранять данные и т.д. Кнопка основного меню предлагает действия с файлом, а вкладка «Главная» содержит все основные инструменты художника. Вы, скорее всего, похожими уже пользовались на уроках рисования. 

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

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

Заливка заполняет некоторую область выбранным цветом по щелчку в ней. Область должна быть замкнутой. 

Также вы можете вставлять текст, выбирать цвет с изображения для продолжения работы и изменять масштаб его фрагмента.

Если при работе с карандашом, кистью и заливкой вы используете левую кнопку мыши, то изображение выполняется основным выбранным цветом, если нажимаете правую, то цветом фона. Цвета выбираются на панели вкладки «Главная». 

Для редактирования рисунка и исправления ошибок и неточностей используется ряд инструментов на панели «Главная».

Прежде всего необходимо выделить нужную область, над которой будем выполнять операцию. Для этого щёлкаем по иконке «Выделить» и выделяем нужную область. Причём выделить можно произвольную или прямоугольную область. В первом случае указатель протаскивают вокруг нужной части рисунка, во втором по диагонали через нужную область. Выделение снимается щелчком в любом месте вне области выделения. 

Выделенный фрагмент можно:

• удалить; 

• переместить, т.е. перетащить в любое другое место на рабочей области;

• перетащить так, что он оставит фигурный след (для этого при нажатой левой кнопке нужно удерживать клавишу Shift);

• вырезать;

• скопировать; 

• вставить в нужное место рабочей области;

• размножить перетаскиванием, удерживая клавишу Ctrl (новая копия будет появляться, когда кнопка мыши будет отпущена);

• преобразовать (повернуть, растянуть, наклонить).

Но это ещё не всё. Знаете ли вы, что значит 3D? 

Нам так часто в повседневной жизни встречаются словосочетания 3D-принтер, 3D-моделирование, 3D-кинотеатр. 3D — от английского \"3-dimensional\" означает «что-либо, имеющее три измерения (обычно длину, ширину и высоту)», что-то объёмное.

Так, 3D-принтер печатает объёмные объекты, 3D-моделирование — создание трёхмерной модели объекта, в 3D-кинотеатре создаётся иллюзия объёмных, живых героев и пространства.

Так же и Paint 3D предоставляет возможность создавать трёхмерные изображения. 

Прежде чем начать работу с программой, убедитесь, что она установлена на вашем устройстве. Попросите помощи родителей для скачивания программы, если у вас её нет. 

Запустите программу и внимательно изучите экран приветствия. Он включает в себя окно создания нового проекта и открытия уже существующего.

Щёлкните иконку создания нового проекта, и перед вами откроется главная страница, на которой вы можете видеть:

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

• на верхней панели располагается кнопка меню, нажав которую, можно увидеть все доступные действия с изображением (создать, открыть, вставить и т.д.). Здесь же расположена кнопка панели инструментов, которая содержит в себе команды для работы с кистями, 2D-фигурами, 3D-фигурами, характеристики которых вы можете изменять, а также можете добавлять наклейки, размещая их, например, на трёхмерных объектах. Также здесь находится кнопка «Текст», которую мы будем использовать в случае, если потребуется добавить текст к изображению. Кнопка «Эффекты» позволит применить к изображению фильтр или изменить его уровень освещения. Кнопка «Холст» используется реже, с помощью неё можно выбрать фрагмент изображения и поработать над его внешним видом, а в Библиотеке 3D-моделей находятся объёмные фигуры. Здесь же находятся кнопки вставки, отмены действия, а также журнал изменений, которым можно воспользоваться, чтобы проследить цепочку изменений или отменить одно или несколько действий.

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

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

Практика

Для начала попрактикуемся в использовании инструментов художника в классическом Paint. 

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

Задание 1. Рисуем дерево 

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

По окончании не забудьте сохранить вашу работу в одном из предлагаемых форматов. 

Задание 2. Раскраска

Откроем в графическом редакторе заранее заготовленный эскиз. Его можно скачать из интернета по запросу «эскиз для раскрашивания». По желанию можно уточнить запрос, добавив слово «пейзаж», «медведь» или любое другое на ваш вкус. При выборе изображения постарайтесь ориентироваться на количество элементов — чем больше, тем лучше. 
Загрузим изображение в графический редактор, щёлкнув иконку «Вставить — Вставить из» и выбрав из памяти компьютера нужное изображение.

Теперь выберем инструмент «Заливка» и подключим весь наш творческий потенциал. 
Будьте внимательны при заливке. Если граница имеет разрыв, то при заливке фигуры будут закрашены и соседние области. Ликвидировать разрывы можно при помощи инструмента «Карандаш». Чтобы закрасить более мелкие элементы изображения, используйте инструмент «Масштаб».

По окончании не забудьте сохранить вашу работу в одном из предлагаемых форматов. 
Подобный принцип используется в популярных играх с коллекциями раскрасок. Инструменты рисования мы отработали в классической версии Paint.

Теперь попрактикуемся в использовании двумерных и трёхмерных фигур. Следующие задания позволят вам вспомнить уроки математики, развить ваше пространственное воображение и почувствовать себя художником-кубистом.

Задание 3. 

Перед вами развёртка куба. 

Попробуйте нарисовать кубик, который получится собрать из этой развёртки в программе Paint 3D.
В открывшемся окне программы Paint 3D щёлкнем кнопку «Создать». Загрузим изображение в графический редактор, щёлкнув кнопку «Меню», «Вставить» и выбрав из памяти компьютера нужное изображение. 
На верхней панели щёлкните кнопку «Панель инструментов» и выберите команду «Трёхмерные фигуры — Куб».

Чтобы получить фигуру с равными сторонами, при размещении фигуры в рабочей области удерживайте нажатой клавишу Shift. Увидеть куб в 3D-формате поможет команда «Трёхмерное представление». При выделении объекта вокруг него, а также на боковой панели появляются маркеры для изменения размеров, перемещения и вращения по осям и другие параметры редактирования.

Раскрасьте грани куба в соответствии с развёрткой. Для того чтобы раскрашивать грани, нужно применить инструмент «Кисти — Заливка», а для выбора одной грани — использовать параметр «Боковая сторона». 
В соответствии с развёрткой нижняя грань куба — жёлтая. Выберем «Кисти» — «Заполнить», тип заливки — «Боковая сторона» и жёлтый цвет заливки. Боковые стороны кубика красная, зелёная, синяя и голубая. Обратите внимание, что красная грань находится напротив синей. Это важно. Чтобы раскрасить нужную сторону кубика, используйте инструмент «Выбрать», щёлкните фигуру и поверните её в нужном направлении. После вернитесь к кистям, выберите заливку и цвет. Можете покрутить кубик и проверить, точно ли заливка выполнена верно. 

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

Задание 4. 

Постройте такую скульптуру из кубиков, используя Paint 3D. Затем изобразите, как будет выглядеть эта скульптура сверху.

Используя команду «Трёхмерные объекты», добавьте куб. Не забывайте удерживать клавишу Shift при рисовании. Посчитайте, сколько кубиков содержит скульптура.
При помощи сочетания клавиш CTRL + C скопируйте созданный кубик, при помощи сочетания CTRL + V вставьте нужное количество кубиков. Раскрасьте кубики в нужные цвета и объедините их согласно условию в единую композицию. Следите за ровностью стыков. Выделите получившуюся фигуру и щёлкните «Группировать».

Теперь это настоящая скульптура — единый объект, который можно вращать, перетаскивать и над которым можно выполнять другие команды. Обратите внимание, что можно разгруппировать объект, если возникнет такая необходимость. 
Теперь представьте, как будет выглядеть скульптура, если посмотреть на неё сверху. Используйте команду «Двумерные фигуры — Квадрат», чтобы изобразить его. При рисовании квадрата не забывайте о клавише Shift. Раскрасьте квадраты. Проверьте правильность представления, развернув объёмный объект.

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

Список литературы

1. Информатика. 5 класс: учебник / Л. Л. Босова, А. Ю. Босова. — Москва: Просвещение, 2024.

Домашнее задание

1. Что такое компьютерная графика?

2. Какие приложения можно использовать для создания: 2D-изображений? 3D-изображений?

3. На что следует обратить внимание при использовании инструмента «Заливка» для закрашивания плоской фигуры?

4. С какой целью группируются отдельные 3D-изображения?

Список использованных источников:

Рис. 1. Источник: wikipedia.org / название: ENIAC-changing a tube / атрибуция: public domain, автор: M. Weik

Рис. 2. Источник: wikipedia.org / название: Minskytron-PDP-1-20070512 / атрибуция: https://creativecommons.org/licenses/by/2.0/deed.en, автор: Joi Ito, дополнительно: в контент не было внесено изменений

Рис. 3. Источник: wikipedia.org / название: 1983-albert-apple-clone-photo / атрибуция: CC0 1.0, автор: Michael Nadeau

Рис. 4, 2, 8, 9. Изображения используются согласно лицензии Shutterstock / FOTODOM

Рис. 5. Источник: wikipedia.org / название: Integrated circuit optical sensor / атрибуция: CC0 public domain, автор: Xoneca

Рис. 1. Источник: wikipedia.org / название: Classic shot of the ENIAC (full resolution) / атрибуция: public domain, автор: Unidentified U.S. Army photographer

Рис. 3. Источник: wikipedia.org / название: Glen Beck and Betty Snyder program the ENIAC in building 328 at the Ballistic Research Laboratory/ атрибуция: public domain, unknown author

Рис. 4. Источник: wikipedia.org / название: Gebouwen en monumenten knhm, interieurs, bedieningspanelen, coordinatograaf, ele, Bestanddeelnr 162-0963 / атрибуция: CC0 1.0, автор: Nationaal Archief

Рис. 5. Источник: wikipedia.org / название: Transistors-white / атрибуция: public domain, автор: Benedikt.Seidl

Рис. 6. Источник: wikipedia.org / название: IBM 7090 computer / атрибуция: public domain, автор: NASA Ames Research Center / Emerson Shaw

Рис. 7. Источник: wikipedia.org / название: Photo-SMDchips / атрибуция: public domain, автор: Shaddack

Рис. 6, 7, 9, 10, 12–18, 20–24. Иллюстратор Гурьева Е. С.

Рис. 8. Источник: wikipedia.org / название: Mona Lisa, by Leonardo da Vinci, from C2RMF retouched/ атрибуция: Леонардо да Винчи, Лувр, public domain, автор: C2RMF (photo), Dcoetzee (retouch)

Рис. 11, 19. Иллюстратор Бумастрова А. В.