Книжная полка Сохранить
Размер шрифта:
А
А
А
|  Шрифт:
Arial
Times
|  Интервал:
Стандартный
Средний
Большой
|  Цвет сайта:
Ц
Ц
Ц
Ц
Ц

Компьютерная графика и web-дизайн

Учебное пособие
Покупка
Основная коллекция
Артикул: 682954.07.01
К покупке доступен более свежий выпуск Перейти
Учебное пособие «Компьютерная графика и web-дизайн» посвящено работе с компьютерной графикой, включая создание анимации, а также основам web-дизайна. Книга знакомит с работой в следующих программах: Adobe Photoshop CS5, Adobe Flash CS5, а также c созданием web-страниц с помощью программы Блокнот. Предложен теоретический и практический материал. В теоретической части рассматриваются различные аспекты компьютерного дизайна и современные подходы к созданию web-страниц. В практической части описываются основные приемы работы в изучаемой программной среде и задания с подробными инструкциями по выполнению. Дополнительные материалы, иллюстрирующие теоретическую часть учебника, и материалы, необходимые для выполнения практических заданий, представлены в электронно-библиотечной системе Znanium.com. Пособие предназначено для студентов, изучающих дисциплину «Информатика», преподавателей, слушателей курсов повышения квалификации, а также для широкого круга пользователей персональных компьютеров, самостоятельно изучающих программные продукты.
5
112

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

Немцова, Т. И. Компьютерная графика и web-дизайн : учебное пособие / Т.И. Немцова, Т.В. Казанкова, А.В. Шнякин ; под ред. Л.Г. Гагариной. — Москва : ФОРУМ : ИНФРА-М, 2022. — 400 с. + Доп. материалы [Электронный ресурс]. — (Среднее профессиональное образование). - ISBN 978-5-8199-0790-0. - Текст : электронный. - URL: https://znanium.ru/catalog/product/1815964 (дата обращения: 28.03.2024). – Режим доступа: по подписке.
Фрагмент текстового слоя документа размещен для индексирующих роботов. Для полноценной работы с документом, пожалуйста, перейдите в ридер.
Предисловие

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

Книга предназначена для тех, кто хочет получить навыки работы

с компьютерной графикой, включая создание анимации, а также познакомиться с основами webдизайна.

Цель учебного пособия — научить:
• основным понятиям компьютерной графики, а также основам

построения композиции и подбора цвета;

• создавать растровые изображения и проводить коррекцию изображений средствами программы Adobe Photoshop CS5;

• создавать webсайты, используя текстовый редактор Блокнот,

учитывая современные требования в области webдизайна;

• разрабатывать анимацию средствами программы Adobe Flash

CS5.

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

Материал пособия разбит на четыре главы. Первая глава посвящена основам работы в программе. Во второй главе рассматриваются
профессиональные приемы коррекции фотографий в программе
Adobe Photoshop CS5. Третья глава посвящена разработке webсайтов.
Четвертая глава знакомит с принципами создания анимации в программе Adobe Flash CS5. Все главы книги состоят из занятий, которые
необходимо выполнять последовательно, не пропуская предыдущие.
Каждое последующее занятие раскрывает дополнительные возможности изучаемых программных продуктов, основываясь на знаниях,

полученных при изучении материала предыдущих занятий. Целью
любого занятия является постепенное, шаг за шагом, освоение технологии работы в изучаемой программной среде.
Каждое занятие пособия состоит из теоретической и практической частей. В теоретической части излагаются сведения, необходимые для получения практических навыков в программной среде.
Практическая часть делится на два раздела: основные приемы работы
и задания.
Раздел «Основные приемы работы» представляет собой краткую
справку, в которой описывается выполнение тех команд, которые
нужно освоить в данном занятии.
В разделе «Задания» подробно описывается технология работы
для достижения поставленной в задании цели. При возникновении
вопросов в процессе выполнения задания рекомендуется вновь обращаться к разделу «Основные приемы работы».
В конце занятия даются контрольные вопросы для закрепления
материала.

4
Предисловие

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

Методика, которая положена в основу изложения материала, позволяет существенно ускорить процесс освоения программной среды,
достаточно быстро сформировать целостное представление о технологии работы и ее возможностях для решения профессиональных задач. Выполнив все задания пособия, вы приобретете устойчивые навыки работы в изучаемой программной среде.
Книга рекомендуется в качестве пособия по курсу «Информатика» для средних и высших учебных заведений. Она также может использоваться как самоучитель, с помощью которого за короткое время вы самостоятельно освоите актуальные компьютерные технологии, поймете, где и как их применять в своей деятельности.
Данное пособие является результатом многолетней методической
и преподавательской работы в Центре компьютерного обучения Московского института электронной техники (WWW.ckomiet.ru).

Глава 1
РАСТРОВАЯ ГРАФИКА. ADOBE PHOTOSHOP,
ЧАСТЬ 1

Фирма Adobe Systems Incorporated является лидером на рынке

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

Глава 1 посвящена изучению основных возможностей и задач

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

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

Разделы «Основные приемы работы» могут быть использованы

как справочное пособие.

Изучив эту главу, вы научитесь:
• проводить трансформацию изображения (изменять размер, поворачивать, обрезать);

• работать с фрагментами изображения (выделять, трансформировать);

• создавать изображение с помощью инструментов рисования и

заливки;

• применять эффекты к слоям;
• работать с текстом в растровом изображении;
• использовать векторные возможности программы Photoshop.

1.1. ЗАНЯТИЕ 1

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

Цель занятия: 1) познакомиться с видами и особенностями компьютерной графики; 2) освоить основные приемы работы в программе Photoshop.

ТЕОРЕТИЧЕСКАЯ ЧАСТЬ. Виды компьютерной графики.
Размер и разрешение растровых изображений.
Интерфейс программы Adobe Photoshop CS5

1. Виды компьютерной графики

Компьютерная графика — раздел информатики, который изучает

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

Растровая графика. Растровое изображение — это прямоугольная

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

Пиксель (англ. pixel, сокр. от англ. PICture'S ELement, элемент изображения) — это мельчайшая единица цифрового изображения в растровой графике. Он представляет собой неделимый объект прямоугольной (обычно квадратной) формы, обладающий определенным
цветом. Любое растровое компьютерное изображение состоит из пикселей, расположенных по строкам и столбцам. При увеличении изображения видны ряды пикселей.

6
Глава 1. Растровая графика. Adobe Photoshop, часть 1

Максимальная детализация растрового изображения задается при

его создании и не может быть увеличена. Если увеличивается масштаб изображения, пиксели превращаются в крупные зерна и напоминают мозаику. Никаких дополнительных деталей при увеличении
растрового изображения рассмотреть не удается. От количества пикселей зависит детальность изображения. Чем больше количество пикселей и чем меньше их размеры, тем лучше выглядит изображение.
Пиксели, сливаясь на расстоянии, создают ощущение цветовых переходов.

Достоинства растровой графики:
• можно воспроизвести любой рисунок — и условный, схематичный, и фотографического качества;

• растровая графика используется сейчас практически везде —

от маленьких иконок до плакатов.

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

Форматы растровых графических файлов:
• PSD (PhotoShop Document) — формат файла для редактирования в Photoshop. В этом формате сохраняются все слои рисунка;

• JPEG (Joint Photographic Expert Group — название организации,

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

• GIF (Graphic Interchange Format — формат графики компании

CompuServe) — сжатый формат для размещения рисунка на
webстранице и для анимационных рисунков. В формате GIF
сохраняются рисунки с небольшим количеством цветов и резкими границами между цветами (типа мультика), а также рисунки, содержащие много текста. Формат GIF поддерживает
только 256 цветов, но позволяет сохранять прозрачный фон рисунка;

• PNG (Portable Network Graphics — портативная сетевая графика) — улучшенный формат, замена JPEG (PNG24) и GIF
(PNG8). В формате PNG нельзя сохранить анимацию.

Векторная графика. Векторное изображение представляет собой

набор объектов — линий или примитивных геометрических фигур

1.1. Понятие компьютерной графики
7

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

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

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

Достоинства векторной графики:
• небольшой размер файла;
• нет потери качества при операциях трансформирования объектов;

• векторные изображения на растровых устройствах выводятся с

максимальным качеством, доступным на этом устройстве.

Недостатки векторной графики:
• не каждый объект может быть изображен в векторном виде, например фотографии;

• чем больше число объектов, тем больше памяти и времени требуется на отображение и обработку векторного рисунка.

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

3Dграфика. Трехмерная графика (3Dграфика) изучает приемы и

методы создания объемных моделей объектов, которые максимально
соответствуют реальным. Такие объемные изображения можно вращать и рассматривать со всех сторон.

8
Глава 1. Растровая графика. Adobe Photoshop, часть 1

2. Размер и разрешение растровых изображений

Растровое изображение (растровая сетка) содержит цифровую

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

Параметры растровых изображений:
• размер растровой сетки (количество пикселей);
• разрешение устройства вводавывода (размер элемента изображения).

Устройства вывода. Изображение отображается устройствами вывода: монитором или принтером. Элементы растровой сетки монитора также называются пикселями. В принтере растровую сетку формируют пятна краски или тонера, эти пятна называются точками.

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

Все растровые устройства используют регулярную (то есть с одинаковыми интервалами) прямоугольную растровую сетку. Поэтому все
растровые изображения имеют прямоугольную форму, которую можно измерить в пикселях по ширине и высоте, например: 800×600,
1024×768.

Разрешение — это основная характеристика устройств ввода и вывода, которая показывает, сколько точек растровой сетки приходится
на единицу длины (сантиметр или дюйм). Разрешение измеряется в
точках на дюйм (dpi — dot per inch) или точках на сантиметр (dpc —
dot per centimeter).

Пример. Если принтер может печатать с максимальным разрешением 1200 dpi, то это значит, что он на одном дюйме (2,54 см) может
уместить 1200 цветных пятен. Если 1200 dpi — это максимальное разрешение сканера, это значит, что на одном дюйме сканируемого рисунка сканер способен различить 1200 цветных точек. В мониторах
стандартным является разрешение 72 или 96 dpi.

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

1.1. Понятие компьютерной графики
9

Определение физического размера изображения. Вычисляется физический размер по следующей формуле: ширина в пикселях / разрешение. Результат получается в дюймах. Если разрешение монитора
96 dpi, то изображение 100×100 пикселей будет иметь размеры
2,65×2,65 см. Например, при разрешение 72 dpi то же изображение
имело бы другой размер — 3,53×3,53 см. Вывод: чем больше разрешение изображения, тем меньше его физический размер. Если вы сканируете рисунок, который будет использоваться на webстраницах,
разрешение изображения может быть от 72 до 150 dpi. Но если вы готовите изображение для полиграфической печати, то его разрешение
должно быть от 150 до 300 dpi.

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

Adobe Photoshop — известный графический редактор, предназначенный для создания и редактирования графики. В нем можно сделать различные текстовые эффекты, коллажи из фотографий, графику для сайтов (webдизайн), различные фантастические изображения,
спецэффекты, фоновые изображения и так далее. Окно программы
Photoshop CS5 представлено на рис. 1.1.

10
Глава 1. Растровая графика. Adobe Photoshop, часть 1

Рис. 1.1. Окно программы Photoshop

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

В Adobe Photoshop CS5 можно решать различные задачи с помощью разнообразных инструментов, но иногда бывает сложно переключаться с одного набора панелей и палитр к другому. Именно для
решения этого вопроса разработчиками программы и была создана
панель Рабочая среда (2), которая предназначена для выбора рабочего
пространства. С ее помощью процесс работы в программе значительно упрощается. Данная панель имеет наборы инструментов, которые
предназначены для определенного вида работы с картинками. В каждый из наборов включены самые необходимые и часто используемые
параметры и панели, которые позволяют достигать требуемых результатов как при обработке фотографий, так при создании анимированных изображений или 3Dграфики:

• рабочая среда Design (Дизайн). Имеет набор палитры цветов, а

также панель с оформлением текстовых символов, которые
имеют всевозможные настройки вида шрифта и его расположения;

• рабочая среда Painting (Рисование) в основном имеет наборы

кистей и инструментов, которые предназначены для рисования.
Также в данную среду включена и палитра цветов;

• рабочая среда Photography (Фотография) имеет все необходимые элементы для редактирования фото, например, такие как
панели: Adjustments (Коррекция), History (История) и др.;

• рабочая среда Motion (Движение) предназначена для удобного

создания анимированных картинок;

• рабочая среда 3D пригодится вам в работе с 3Dобъектами.
Можно управлять рабочими средами, т. е. создавать новые либо

удалять уже имеющиеся.

Главное меню (3) имеет стандартный вид, содержит практически

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

1.1. Понятие компьютерной графики
11

Панель инструментов (4) содержит инструменты для работы с

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

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

треугольники. Это значит, что за ними скрывается всплывающая панель с дополнительными инструментами.

Все инструменты Photoshop условно можно разделить на четыре

группы:

• инструменты рисования и закрашивания;
• инструменты для выделения и перемещения выделенных областей;

• инструменты редактирования и ретуши изображений;
• текстовые инструменты.
На панели атрибутов Options (5) для любого активного (выбранного) инструмента отображаются все его настройки. Данная панель
меняет свой вид в зависимости от выбранного инструмента.

Справа находится панель палитр (6). Палитры представляют собой окна, в которых сгруппированы некоторые из элементов управления Photoshop. Эти палитры еще называют «плавающие», потому
что размещение палитр нестатично. Палитры могут быть зафиксированы, минимизированы в иконки или перенесены за пределы окна.
Вы можете менять их местами, добавлять или убирать. Палитры
снабжены закладками (вкладками).

Например, на палитре Color (Цвет) отображены значения текущих цветов переднего и заднего планов, которые можно отредактировать перемещением ползунков соответствующих компонентов цветовой модели. Вкладка Swatches (Образцы) этой палитры содержит набор доступных для использования цветов и позволяет добавлять в
набор новые и удалить ненужные цвета. Вкладка Styles (Стили) содержит варианты заливок рабочей области.

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

В окне документа (8) производятся все основные действия инструментами и отображается изображение. Окон может быть несколько. В них можно открывать как одно, так и несколько изображений.

12
Глава 1. Растровая графика. Adobe Photoshop, часть 1

К покупке доступен более свежий выпуск Перейти