Цели:
Обучающие:
- Познакомить учащихся с форматами графических файлов, применяемых в Web-дизайне.
- Отработать практические навыки по оптимизации изображений в среде Adobe ImageReady (версии 7 и 8).
Развивающие:
Развивать самостоятельность при выполнении практических работ.
Воспитательные:
Воспитывать творческий подход в выполняемой работе.
Тип урока: практическая работа.
Материалы и оборудование:
- класс, оборудованный ПК;
- программа Adobe ImageReady (версии 7 или 8).
- файлы изображений.
Ход урока
- Орг. момент, постановка цели урока.
- Знакомство учащихся с новой темой. Лекция учителя.
- Объяснение учителем, последовательности самостоятельной работы учащихся.
- Выполнение практической работы.
- Подведение итогов урока.
Лекция учителя:
Компьютерные изображения в Web — это файлы определенных форматов, которые распознаются браузерами и графическими приложениями. В Сети используются форматы JPEG, GIF,PNG. Но в компьютерном мире изображения могут существовать и во многих других форматах.
GIF (Graphics Interchange Format) — наиболее широко распространенный формат в Web. Файлы такого формата чаще всего являются созданными на компьютере: рисунок, текст. Максимальное число цветов в изображении в этом формате, не может превышать 256.
Схема сжатия, используемая в GIF, дает хорошие результаты для изображений с большими областями. Кроме этого, формат GIF позволяет создавать прозрачные изображения, так что, кажется, будто рисунок действительно нарисован на Web-странице и создавать анимацию.
JPEG (Joint Photographic Experts Group). Данный формат использует метод сжатия с потерями, при работе с ним всегда существует возможность выбора между меньшим размером файла и качеством изображения. Он обычно используется для передачи фотографий, поскольку он умеет неплохо справляться с изображениями, содержащими несколько миллионов цветов.
PNG (Portable Network Graphics). Этот формат также умеет делать изображения прозрачными и позволяет создавать анимацию.
Поскольку формат JPEG, хорошо подходит для фотографий, а формат GIF для рисованных иллюстраций, правильным выбором формата файла вполне можно достичь хорошего сочетания качества изображения и размера файла.
Вставить в Web-страницу изображение, довольно легко. Но гораздо сложнее — создание самого изображения.
Основные правила создания “хорошего” графического изображения:
- Фотография и графика должны непосредственно относится к информации на вашей странице.
- Изображения должны загружаться быстро. А для этого файлы должны иметь разумный размер.
Но как уменьшить размер файла? Для этого нам очень пригодятся возможности программы Adobe ImageReady.
ПРАКТИЧЕСКАЯ РАБОТА “ОПТИМИЗАЦИЯ ИЗОБРАЖЕНИЙ”
УДАЛЕНИЕ ФОНА
- Запустите программу Adobe ImageReady
- Откройте файл Рисунок1.gif из папки “Пратическая работа Photoshop”. Данное изображение содержит в себе логотип. Нам нужно убрать фон.
- Выберите инструмент Magic Wand Tool (Волшебная палочка).
- Щелкните указателем мыши в любом месте фона. В результате логотип должен выделиться пунктирной линией. Если выделилась не вся область, нажмите на клавишу Shift, установите курсор мыши на область, которую необходимо добавить и щелкните левой клавишей мыши.
- Нажмите клавишу Delete, фон будет удален.
- Нажмите комбинацию клавиш CTRL+D, чтобы снять выделение.
ОПТИМИЗАЦИЯ ФОРМАТА GIF
- В окне изображения переключитесь на вкладку Optimized.
- В нижней части окна изображения вы увидите надпись 4235 bytes, нажмите на4 и выберите, например size/Download Time для 9600 bps Modem, появится надпись, показывающая время загрузки изображения в зависимости от типа модема или Интернет соединения, в данном случае 5сек.
- Откройте палитру Optimize (Window>Optimize)
- В палитре Optimize выберите Format - Gif.
- В поле Colors уменьшите количество цветов установите - 4.
- Выполните обрезку изображения, чтобы удалить пустые пространства около логотипа. Выберите пункт главного меню Image>Trim. В появившемся диалоговом окне установите переключатель Based On (основываться на) в положение Transparent Pixels (Прозрачные пиксели).
- Сохраним данное изображение. Выберите пункты меню File>Save Optimized As..
- В диалоговом окне сохранения файла выберите папку вашего сайта и введите имя файла lesnoff.gif. В раскрывающемся списке Тип файла должно стоять Image Only. (Только изображение).
ОПТИМИЗАЦИЯ ФОРМАТА JPEG
- В программе Adobe ImageReady, откройте файл Рисунок2.jpeg из папки “Практическая работа Photoshop”. Размер данного файла 58,6Кбайт.
- Сначала оптимизируем размер изображения. Выберите пункты меню Image>Image Size.
- Убедитесь, что флажок Constrain Proportions выбран.
- В поле Width поставьте значение 250. В поле Height значение измениться пропорционально. Нажмите кнопку ОК.
- Установите масштаб изображения равным 100%.
- Переключитесь на вкладку Optimized и вы увидите, что размер файла стал 23 Кбайта.
- В палитре Optimize в раскрывающемся списке Format установите Jpeg.
- В палитре Optimize в Amount установите ползунок на значении 50.
- Посмотрите на размер вашего файла, он стал примерно 17 Кбайт.
- Сохраним изображение. File>Save Optimized As.
- В диалоговом окне сохранения файла введите имя файла и в раскрывающемся списке Тип файла должно стоять Image Only (Только изображение).