Презентация на тему "Сохранение изображения для публикации в интернете", (10, 11 класс)

Предпросмотр материала:

Сохранение изображения для публикации в интернете

Введение

Чтобы ускорить загрузку Web-страниц, надо пытаться в первую очередь уменьшать размеры рисунков на ней, пока их качество остается удовлетворительным.

Очень важно правильно выбрать формат

рисунка в зависимости от типа изображения.

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

Форматы GIF и PNG-8 могут хранить только изображения с палитрой от 2 до 256 цветов, а полноцветные рисунки записываются в форматах JPEG и PNG-24.

Если полноцветное изображение сохраняется c палитрой (GIF или PNG-8) и содержит больше цветов, чем есть в палитре, программа использует так называемый дизеринг (dithering) — цвета, отсутствующие в палитре, заменяются узором из пикселей других цветов, которые в палитре есть.

Пример

Пусть нам надо разместить на Web-странице кнопку . Попробуем сохранить ее в разных форматах и сравнить качество рисунка и объем файла.

Формат	Размер		Качество
GIF, 8 цветов		212 байт	хорошее
GIF, 16 цветов		257 байт	лучшее
PNG-8, 8 цветов		256 байт	хорошее
PNG-8, 16 цветов		303 байт	лучшее
PNG-24		526 байт	лучшее
JPEG, качество 0		468 байт	плохое
JPEG, качество 50%		684 байт	плохое
JPEG, качество 100%		1384 байта	лучшее

Формат	Размер	Качество
GIF, 32 цвета	5,91 Кб	низкое
GIF, 128 цветов	10,43 Кб	хорошее
GIF, 256 цветов	13,40 Кб	хорошее
PNG-8, 32 цвета	5,56 Кб	низкое
PNG-8, 128 цветов	9,41 Кб	хорошее
PNG-8, 256 цветов	12,25 Кб	хорошее
PNG-24	31,09 Кб	лучшее
JPEG, качество 0	1,90 Кб	плохое
JPEG, качество 50%	5,82 Кб	хорошее
JPEG, качество 100%	19,17 Кб	лучшее

Теперь сохраним в разных форматах фотографию девушки.

Рисунки с палитрой (GIF, PNG)

Выберите пункт меню Файл — Сохранить для Web (клавиши Alt+Shift+Ctrl+S).

Оптимизирование рисунка

Original — только исходное изображение

Optimized — только оптимизированное изображение, готовое для сохранения

2-Up — исходное и оптимизированное изображения

4-Up — исходное и три варианта оптимизированных изображений с разными параметрами

Выбор формата файла

Выбор цвета в палитре:

• Перцепционная (Perceptual) — в первую очередь выбираются цвета, которые лучше воспринимаются человеческим глазом

• Селективная (Selective) — преимущество в палитре отдается тем цветам, которые охватывают большие непрерывные области

• Адаптивная (Adaptive) — в первую очередь выбираются цвета, которые встречаются чаще всего

• Ограниченная (Web) (Restrictive (Web)) — используются только цвета из безопасной Web-палитры, которую браузеры не искажают

В левом нижнем углу окна можно увидеть размер файла в выбранном формате.

Посмотрите, как он изменяется при изменении количества цветов в палитре.

Дизеринг

замене цветов, отсутствующих в палитре — применяется или нет узорная заливка. При значении 100% дизеринг применяется везде, при значении 0% отсутствующие цвета просто заменяются ближайшими из палитры.

заменяться цвета

использовать дизеринг.

Прозрачность

• Флажок Прозрачность показывает, сохранять ли прозрачные пиксели рисунка. Если он установлен, прозрачность сохраняется, если нет — прозрачные пиксели заливаются цветом, который выбран в поле Матовый.

Изображения с прозрачными областями

Программа Photoshop позволяет обрабатывать рисунки с прозрачными областями.

Для размещения в сети Интернет их надо сохранять в форматах GIF или PNG (поддерживают прозрачность)

Прозрачные области обозначаются

"шахматкой" — клетчатым фоном, в котором чередуются серые и белые квадраты.

Изображения с прозрачными областями

Фоновый слой — всегда непрозрачный. Поэтому для получения изображения с прозрачными областями этот слой надо удалить или преобразовать в обычный слой (Слой — Новый — Слой из фона или двойной щелчок по нему в палитре Слои).

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

• Ластик (Eraser) — на любом слое, кроме фонового, стирает пиксели — делает их прозрачными

• Стиратель фона (Background Eraser) — при стирании на фоновом слое преобразует его в обычный и устанавливает фоновым цветом цвет пикселя, на котором щелкнули. Стирает пиксели до прозрачного состояния. Параметр Дискретизация (Sampling) на панели параметров может принимать значения

– Непрерывная (Continuous) — удаляется тот цвет, который находится под курсором

– Одиночная (Once) — удаляется тот цвет, который находился под курсором в начале движения кисти

– Образец фона (Background Swatch) — удаляется фоновый цвет

• Волшебный ластик (Magic Eraser) — выделяет пиксели, как Волшебная палочка, и сразу делает их прозрачными. Если применяется к фоновому слою, автоматически преобразует его в обычный слой.

Изображения из фрагментов

При разработке дизайна Web-страниц чаще всего страница сначала рисуется целиком в графическом редакторе, например в Photoshop, а потом "режется на куски". Каждый такой фрагмент (slice) будет храниться в виде отдельного файла.

Это дает несколько преимуществ:

• маленькие файлы быстрее загружаются

• для каждого фрагмента можно использовать оптимальные для него формат и параметры: например, один фрагмент удобнее сохранять в формате GIF, а другой — в JPEG

• каждый фрагмент может служить гиперссылкой ссылкой на отдельный документ

• при создании анимационных рисунков можно ограничить область анимации: например, у автомобиля может мигать только фара, а остальная часть будет обычными рисунками, это уменьшает объем файлов

Инструменты для работы с фрагментами

• Раскройка позволяет "разрезать" рисунок на части

• Выбор фрагмента служит для перемещения и изменения границ фрагментов

• Эти инструменты связаны с одной и той же кнопкой и вызываются по клавише K.

Порядок работы с "разрезанными" изображениями

• разделить рисунок на фрагменты с помощью инструмента Раскройка, для точного размещения можно использовать направляющие — специальные линии разметки

• если нужно, передвинуть фрагменты и изменить их размеры с помощью инструмента Выбор фрагмента

• настроить свойства каждого фрагмента: имя файла при сохранении, гиперссылку, всплывающую подсказку и т.д.

• сохранить рисунок как Web-страницу: HTML-файл и набор файлов, гда хранятся фрагменты изображения

Настройка фрагментов

• имя файла, в котором он будет сохранен

• адрес гиперссылки (URL), если фрагмент ссылается на другой документ

• имя окна (фрейма), в котором открывается новый документ

• надпись, которая появляется в строке состояния при наведении мыши

• текст всплывающей подсказки

Краткое описание материала

Данная презентация предназначена для сопровождения занятия в рамках элективного курса для старшеклассников по теме «Сохранение изображения для публикации в интернете». Разработка составлена по авторскому учебнику Полякова К.Ю. и в соответствии с его авторской программой элективного курса «ЦИФРОВАЯ ОБРАБОТКА ИЗОБРАЖЕНИЙ ДЛЯ WEB-САЙТОВ».

Чтобы ускорить загрузку Web-страниц, надо пытаться в первую очередь уменьшать размеры рисунков на ней, пока их качество остается удовлетворительным. Очень важно правильно выбрать формат рисунка в зависимости от типа изображения.

В презентации отражены основные аспекты оптимизации таких изображений.

Презентация на тему "Сохранение изображения для публикации в интернете", (10, 11 класс)

Информатика

11 класс

Другие методич. материалы

PDF

21.12.2014

612

Информатика

11 класс

Другие методич. материалы

Файл будет скачан в формате:

PDF

Краткое описание материала

В презентации отражены основные аспекты оптимизации таких изображений.

Автор материала

Дербеденева Татьяна Евгеньевна

учитель

На сайте: 10 лет и 8 месяцев
Всего просмотров: 30515
Подписчики: 1
Всего материалов: 21

30515
просмотров
21
материалов
1
подписчиков

Настоящий материал опубликован пользователем Дербеденева Татьяна Евгеньевна.
Инфоурок является информационным посредником. Всю ответственность за опубликованные материалы несут пользователи, загрузившие материал на сайт. Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете на материал.