Урок-практикум по теме: "Web-графика. Форматы изображений"

Разделы: Информатика


Цели:

Обучающие:

  1. Познакомить учащихся с форматами графических файлов, применяемых в Web-дизайне.
  2. Отработать практические навыки по оптимизации изображений в среде Adobe ImageReady (версии 7 и 8).

Развивающие:

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

Воспитательные:

Воспитывать творческий подход в выполняемой работе.

Тип урока: практическая работа.

Материалы и оборудование:

  • класс, оборудованный ПК;
  • программа Adobe ImageReady (версии 7 или 8).
  • файлы изображений.

Ход урока

  1. Орг. момент, постановка цели урока.
  2. Знакомство учащихся с новой темой. Лекция учителя.
  3. Объяснение учителем, последовательности самостоятельной работы учащихся.
  4. Выполнение практической работы.
  5. Подведение итогов урока.

Лекция учителя:

Компьютерные изображения в 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-страницу изображение, довольно легко. Но гораздо сложнее — создание самого изображения.

Основные правила создания “хорошего” графического изображения:

  1. Фотография и графика должны непосредственно относится к информации на вашей странице.
  2. Изображения должны загружаться быстро. А для этого файлы должны иметь разумный размер.

Но как уменьшить размер файла? Для этого нам очень пригодятся возможности программы Adobe ImageReady.

ПРАКТИЧЕСКАЯ РАБОТА “ОПТИМИЗАЦИЯ ИЗОБРАЖЕНИЙ”

УДАЛЕНИЕ ФОНА

  1. Запустите программу Adobe ImageReady
  2. Откройте файл Рисунок1.gif из папки “Пратическая работа Photoshop”. Данное изображение содержит в себе логотип. Нам нужно убрать фон.
  3. Выберите инструмент Magic Wand Tool (Волшебная палочка).
  4. Щелкните указателем мыши в любом месте фона. В результате логотип должен выделиться пунктирной линией. Если выделилась не вся область, нажмите на клавишу Shift, установите курсор мыши на область, которую необходимо добавить и щелкните левой клавишей мыши.
  5. Нажмите клавишу Delete, фон будет удален.
  6. Нажмите комбинацию клавиш CTRL+D, чтобы снять выделение.

 ОПТИМИЗАЦИЯ ФОРМАТА GIF

  1. В окне изображения переключитесь на вкладку Optimized.
  2. В нижней части окна изображения вы увидите надпись 4235 bytes, нажмите на4 и выберите, например size/Download Time для 9600 bps Modem, появится надпись, показывающая время загрузки изображения в зависимости от типа модема или Интернет соединения, в данном случае 5сек.
  3. Откройте палитру Optimize (Window>Optimize)
  4. В палитре Optimize выберите Format - Gif.
  5. В поле Colors уменьшите количество цветов установите - 4.
  6. Выполните обрезку изображения, чтобы удалить пустые пространства около логотипа. Выберите пункт главного меню Image>Trim. В появившемся диалоговом окне установите переключатель Based On (основываться на) в положение Transparent Pixels (Прозрачные пиксели).
  7. Сохраним данное изображение. Выберите пункты меню File>Save Optimized As..
  8. В диалоговом окне сохранения файла выберите папку вашего сайта и введите имя файла lesnoff.gif. В раскрывающемся списке Тип файла должно стоять Image Only. (Только изображение).

 ОПТИМИЗАЦИЯ ФОРМАТА JPEG

  1. В программе Adobe ImageReady, откройте файл Рисунок2.jpeg из папки “Практическая работа Photoshop”. Размер данного файла 58,6Кбайт.
  2. Сначала оптимизируем размер изображения. Выберите пункты меню Image>Image Size.
  3. Убедитесь, что флажок Constrain Proportions выбран.
  4. В поле Width поставьте значение 250. В поле Height значение измениться пропорционально. Нажмите кнопку ОК.
  5. Установите масштаб изображения равным 100%.
  6. Переключитесь на вкладку Optimized и вы увидите, что размер файла стал 23 Кбайта.
  7. В палитре Optimize в раскрывающемся списке Format установите Jpeg.
  8. В палитре Optimize в Amount установите ползунок на значении 50.
  9. Посмотрите на размер вашего файла, он стал примерно 17 Кбайт.
  10. Сохраним изображение. File>Save Optimized As.
  11. В диалоговом окне сохранения файла введите имя файла и в раскрывающемся списке Тип файла должно стоять Image Only (Только изображение).