reforef.ru 1

Зайцева Л.И. МОУ: СОШ п.Горноправдинск

Урок-практикум по теме: "Web-графика.

Форматы изображений"

11 класс



Цели:

Обучающие:


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

  2. Отработать практические навыки по оптимизации изображений в среде Adobe ImageReady

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

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

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

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

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

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

  • класс, оборудованный ПК;

  • программа Adobe ImageReady .

  • файлы изображений.

Ход урока

  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.

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

УДАЛЕНИЕ ФОНАhttp://festival.1september.ru/articles/310263/image167.gif

  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.http://festival.1september.ru/articles/310263/image168.jpg

  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 (Только изображение).