Урок 32. Изображение на WEB-странице

Материалы к уроку

Урок  5  курса Дуванова А.А.

ссылка работает только в школе

Картинка в тексте

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

Атрибут src = имя файла

Самым главным атрибутом команды является атрибут src, при помощи которого можно задать имя файла с картинкой. Например, команда <IMG src=img.gif> заставит браузер отобразить на экране графический файл img.gif из текущего каталога. 

Обычно графические файлы не смешивают с HTML-текстами, а помещают в отдельный каталог pic, который является подкаталогом для каталога с программами (html-файлами). Тогда команда вывода графики будет иметь вид: <IMG src=./pic/img.gif> 

Атрибут alt = "текст надписи"

Если браузер не находит картинки в указанном месте на диске, он вместо нее рисует на экране маленький прямоугольник и вписывает в него надпись, которая задана атрибутом alt:

<IMG src=monstr.jpg alt="Страшный зверь"> 

Атрибут alt рекомендуется использовать всегда. Даже если картинка найдена браузером, задание надписи не будет лишним: стоит пользователю остановить курсор на картинке, как надпись появится в маленьком окошке и сообщит дополнительную информацию. 

Атрибут title = "текст надписи"

Аналогичен alt, но более современен

Атрибуты width = n и height = m

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

Если атрибуты не заданы, картинка рисуется в естественных размерах. 

Атрибут border = n

Атрибут позволяет задать рамку иллюстрации толщиной в n пикселов. При отсутствии атрибута, или при значении n=0 рамка не рисуется. 

Атрибут align

Этот атрибут позволяет определять положение иллюстрации по отношению к соседним элементам документа. 

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

Урок 22. Создание коллажа. Иллюстрации для веб-сайтов

Создание коллажа

GIMP предоставляет инструмент для сохранения выделенной области как канал. Для одного изображения можно сохранить несколько выделенных областей.
Благодаря этому появляется возможность сохраненные в каналах фрагменты для создания и редактирования нового изображения.
Таким образом можно создать, например, коллаж из разных фрагментов.

Иллюстрации для веб-сайтов

Смотрим презентацию К.Ю.Полякова «Компьютерная графика и анимация». Часть II

Иллюстрации для веб-сайтов должны быть сохранены только в тех форматах, которые умеют отображать браузеры (слайд 16).
Эти форматы предназначены для однослойных изображений. Поэтому все слои приходится сводить в один слой.
В перечисленных форматах используется сжатие данных. Если увеличивать степень сжатия, то качество изображения ухудшается, и наоборот (слайды 17 -22).
Форматы GIF и PNG плохо подхолят для хранения изображения с плавными переходами цветов (градиентами). 

В Конструкторе сайтов Google для установки иллюстраций на веб-страницу в режиме редактирования используем кнопку "Вставить изображение".
Практическая работа 

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

Урок 20. Работа со слоями

Слои

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

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

Лучше всего познакомиться  с понятием слои на практике.

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

Урок 19. Цветовые модели. Коррекция фотографий

Цветовые модели

Теория в документе. 

По теории смотрим в презентации «Компьютерная графика и анимация». Часть I слайды с 11 по 16 .

Коррекция фотографий

По практике смотрим в презентации «Компьютерная графика и анимация». Часть I слайды с 25 по 37 

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

Исправление перспективы

Выделить все изображение. Затем применить инструмент 

Меню - Выделение - Все - Перспектива

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

Коррекция уровней

Гистограмма - график, который показывает распределение пикселей по яркости. Чтобы увидеть гистограмму для открытого изображения, выберите инструмент

Меню - Окно - Прикрепляющиеся диалоги - Гистограмма

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

Если фото слишком темное, то все пиксели сосредоточены слева.Если фото слишком светлое, то все пиксели сосредоточены справаВ малоконтрастном фото есть средние тона, но нет темных.Четкое контрастное фото содержит пиксели всех уровней яркости.

Откроем  последовательно фотографии morning.jpg, evening.jpg, sun.jpg и lake.jpg.

Сравним гистограммы для них. 

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

Для этого используется инструмент

Меню - Цвет Уровни

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

Для выравнивания уровней можно также использовать инструмент

Меню - Цвет - Яркость - Контраст

Коррекция цвета

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

Для коррекции цвета используется инструмент

 Меню - Цвет - Цветовой баланс

Ретушь

Ретушью называют устранение дефектов фотографий.

Практическая работа и домашнее задание

Урок 17. Работа с выделенным областями

Смотреть слайды 38 - 42 презентации «Компьютерная графика и анимация». Часть I

Инструменты выделения

Часто нужно работать с некоторой областью изображения, а пиксели вне этой области не должны меняться. Для выделения областей в редакторе GIMP предназначены несколько инструментов (слайды 39 - 40). 

Если в момент выделения области была нажата клавиши Shift, новая область добавляется к уже выделенной.Если в момент выделения области была нажата клавиши CTRL, новая область вычитается из  уже выделенной.

Таким образом можно можно строить сложные выделенные области.

Сглаживание и растушевка

Любой пиксель может быть выделен частчно, например на 25. Это значит, что для такого пикселя эффект, примененный к области, будет ослаблен в 4 раза (слайд 41). 
Частичное выделение получается при использовании двух параметров  - сглаживания и растушевки. 
Эти параметры задаются в окне параметров выбранного инструмента выделения (слайд 42).

Практическое задание и Домашнее задание