Учебно-методическое пособие
для студентов
Простое, наглядное изложение
технологий графики, web-дизайна
Брянск 2010
ББК 32 я73 М - 54 |
Сидорова Л.В. Компьютерная графика и web-дизайн. Учебно-методическое пособие. – Брянск: РИО БГУ, 2010. – 112 с. |
Рецензенты:
Поздняков В.А. – кандидат педагогических наук, заведующий кафедрой "Вычислительная техника и информационные технологии" Брянского госуниверситета им. И.Г. Петровского.
Хохлова Т.В. - кандидат педагогических наук, доцент Брянского института повышения квалификации работников образования.
Рекомендовано к печати кафедрой "Вычислительная техника и информационные технологии" факультета технологии и дизайна БГУ. Протокол № 3 от 29.09.10.
Данное пособие предназначено для поддержки изучения курсов «Компьютерная графика», «Мультимедийные средства обучения», «Мультимедиа».
В учебно-методическом пособии раскрываются теоретические основы компьютерной графики, технология работы в универсальном растровом графическом редакторе Adobe Photoshop (с многочисленными примерами, заданиями и описанием их пошагового выполнения), раскрывается технология создания анимации (анимированных рекламных баннеров).
Также раскрываются основы web-дизайна, а именно - теория и практика обработки графики для WEB и мультимедийных продуктов, конструкции языка HTML и технология создания web-страниц посредством языка HTML, основы сайтостроения и разработка сайтов в программе Macromedia Dreamweaver. Отдельно раскрывается последовательность разработки web-сайта путём его поэтапного проектирования. В последней главе приводится образец выполнения отчета по разработке сайта (в помощь студентам для оформления творческой зачетной работы - отчета об этапах проектирования своего сайта).
© Сидорова Л.В., 2010
© РИО БГУ, 2010
Содержание
Глава 1. Виды компьютерной графики, их характеристика 6
I. Растровая, векторная, фрактальная графика 6
II. Разрешение растровых изображений 9
III. Изменение размеров, разрешения изображения 11
IV. Программы – графические редакторы двумерной графики 13
V. Форматы графических файлов 15
1. Критерии выбора формата файла 15
2. Методы сжатия информации (используемые в разных форматах файлов) 16
3. Виды форматов графических файлов 17
Глава 2. Графический редактор adobe photoshop 19
I. ВЫДЕЛЕНИЕ ОБЛАСТЕЙ в Photoshop 20
II. ИНСТРУМЕНТЫ РИСОВАНИЯ. ВЫБОР ЦВЕТА 28
III. МНОГОСЛОЙНЫЕ ИЗОБРАЖЕНИЯ 32
IV. СОЗДАНИЕ ТЕНЕЙ, ОТРАЖЕНИЙ 47
V. ЦВЕТОКОРРЕКЦИЯ 50
VI. РЕТУШЬ – УСТРАНЕНИЕ ДЕФЕКТОВ ФОТО 55
1. ИНСТРУМЕНТЫ РЕТУШИ, КОРРЕКЦИИ 57
1.1. Инструмент `Штамп` 57
1.2. Инструмент `Восстанавливающая кисть` 58
1.3. Инструмент `Заплатка` (Patch) 58
1.4. Инструментом `Красные глаза` убираем дефект 59
1.5. Инструмент `Замена цвета` 59
1.6. Инструменты Размытие , Палец (Размазывание) , Резкость 60
1.7. Инструменты Осветлитель, Затемнитель, Губка 60
1.8. Инструмент Обрезка (Рамка) 61
2. УВЕЛИЧЕНИЕ РЕЗКОСТИ 61
2.1. ИНСТРУМЕНТЫ увеличения резкости отдельных элементов (вручную) 61
2.2. ФИЛЬТРЫ для увеличения резкости 62
3. ПРОФЕССИОНАЛЬНАЯ РЕТУШЬ ФОТО: 63
По раз 68
VII. ИСПОЛЬЗОВАНИЕ КАНАЛОВ 69
VIII. ВЕКТОРНЫЕ ИНСТРУМЕНТЫ, КОНТУРЫ в Photoshop 76
1. Работа с векторными фигурами (Shape) 76
2. Работа с контурами (Paths): обводка, заливка и пр. 77
Глава 3. Подготовка графики для web и мультимедиа 81
I. Оптимизация – уменьшение объема файла 81
(для его публикации в Интернете, в мультимедиа-продуктах) 81
II. СОЗДАНИЕ РИСУНКА НА ПРОЗРАЧНОМ ФОНЕ (без фона) 85
III. АНИМАЦИЯ: разработка анимированных баннеров 86
Глава 4. Основы web-дизайна. Язык html 90
I. Основные понятия. Редакторы HTML 90
II. Структура HTML-кода страницы 90
III. HTML-теги и атрибуты 91
Глава 5. Сайтостроение в Macromedia Dreamweaver 103
I. Интерфейс Dreamweaver. Начало работы 103
II. Принципы языка HTML и работа в режиме html-кода 104
III. Работа в режиме дизайна: форматирование текста 106
IV. Создание сайта в Dreamweaver 108
1. Настройки окна `Определение сайта` 108
2. Установка параметров страницы и русской кодировки 111
3. Разметка макета web-страницы 111
4. Настройка цвета страницы 114
5. Вставка рисунков 114
6. Ввод текста web-страницы 117
7. Настройка гиперссылок 117
Глава 6. Проектирование web-сайта 122
Рекомендуемая литература 127
Введение
Компьютерная графика - область деятельности, в которой компьютеры используются как для синтеза изображений (для их создания на компьютере "с нуля"), так и для обработки визуальной информации, полученной из реального мира. Также компьютерной графикой называют и результаты этой деятельности.
Интерактивная компьютерная графика позволяет воспроизводить изображения в режиме диалога пользователя с ЭВМ. Т.е. в изображение заложено некое продолжение (разворачивание сюжета представления, выдача дополнительной информации), но чтоб это увидеть, пользователю предлагается вступить в диалог – щелкнуть по изображению (или по какой-либо кнопке, ссылке, или ввести ответ на вопрос).
Работа с компьютерной графикой (КГ) - одно из самых популярных направлений использования компьютера. Ко многим специалистам сегодня выдвигают требование - владение технологиями КГ. Ведь на основе КГ интенсивно развиваются процессы визуализации знаний в самых разных областях – в управлении, образовании, науке, медицине, маркетинге, электронной коммерции, рекламе, дизайне и пр.
Чем обусловлено бурное развитие процессов визуализации информации? Это связано с глобализацией мира, ростом интенсивности разных контактов в экономике, политике, культуре и потребностью в быстром взаимопонимании и взаимодействии. При этом КГ позволяет передавать информацию максимально наглядно, эффективно, интенсивно и выразительно (в сравнении с традиционным текстом), а главное - более удобно, природосообразно для человека, т.к. мы по психологии восприятия 97% информации окружающего мира получаем через зрение, визуально.
Ученые считают, что нам предстоит пережить эпоху тотальной визуализации на основе КГ; это характерный признак формирующегося информационного общества. Формируется новая образная культура компьютерной эпохи, базирующаяся на КГ, мультимедиа. Это позволяет говорить о новом глобальном феномене - постепенном переходе от "текстовой цивилизации" к "цивилизации изображений".
Где брать изображения для работы? Перечислим основные источники цифровых изображений. Сканеры позволяют получить качественную цифровую копию фото (документа) с бумаги, с фотоплёнки, слайда. Слайд-сканеры позволяют получать изображения небольших объёмных предметов (карандашей, часов, украшений, пр.)
Цифровой фотоаппарат позволяет делать фотоснимки, которые удобно хранить в цифровой форме на компьютерных носителях (винчестере, лазерных дисках, `флэшке`). 1 диск DVD может хранить тысячи фото (чем выше разрешение и размер фото, тем меньше фото вмещает диск). Заснятые цифровые фото можно ретушировать, художественно оформлять, используя мощные возможности КГ.
Мобильные телефоны тоже позволяют снимать - делать цифровые фото, которые потом можно передавать на компьютер.
Клипарты – диски, хранящие в цифровой форме сотни изображений, которые по темам разделены на каталоги (их много в продаже). Многие графические программы идут в комплекте со своим клипартом. Когда нужно найти изображение нужной тематики, удобно пролистывать каталоги (клипарты) и подбирать изображений, потом их можно комбинировать, дорабатывать средствами КГ.
Интернет. Есть много сайтов с галереями картинок - сетевые клипарты. Зайдя на сайт, выбрав понравившуюся картинку, дают команду сохранения её на своем ПК.