Сохранение и оптимизация изображения для Web

С этим уроком также смотрят

Представляем вашему вниманию новый обучающий видеокурс по работе в самом популярном на сегодняшний день графическом редакторе Adobe® Photoshop® CS5!

Идем в ногу со временем! Видео уроки Фотошопа CS 5 на русском языке помогут Вам научиться обрабатывать любые изображения. Вы покорите весь мир идеальными фотографиями!

Adobe® and Photoshop® are registered trademarks of Adobe® Systems Incorporated in the United States and/or other countries.

Обновлен: 16 ноября 2015

Обзор Adobe® Photoshop® CS5,
Графика

Loading the player...
Текст урока

Как сохранить изображение для Web и устройств


В этом уроке мы продолжим готовить файл для публикации в Интернете.
Как уменьшить размер с помощью команды «Размер изображения» мы уже знаем. Теперь попробуем еще больше уменьшить его размер с помощью оптимизации.

Зайдите в меню «Файл» и выберите пункт «Сохранить для Web и устройств». В открывшемся окне вы увидите четыре вкладки. На вкладке Исходное представлено изображение в первоначальном виде. На вкладке Оптимизация находится изображение с выполненной оптимизацией. Сравнить исходное и оптимизированное изображение вы можете на вкладке «2 варианта».

На последней вкладке, 4 варианта вы можете подобрать качество оптимизации, сравнивая 3 оптимизированных картинки разного качества с исходным изображением. Обратите внимание на то, что под каждым изображением содержится информация о его размере.

Справа Вы можете наблюдать секцию установок сохранения. Так как мы работаем с фотографией, то лучше всего выбрать формат сохранения JPEG, в то время как для рисунков и других изображений, не содержащих в себе полутонов и оттенков, целесообразно устанавливать формат GIF или PNG.

После выбора формата необходимо подобрать качество. Установите у правого верхнего рисунка значение ползунка Качество 75, у левого нижнего – 40, и у последнего – 15.

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

Для лучшего рассмотрения деталей можно изменить масштаб в левом нижнем углу окна. Анализируя изображения, можно заметить, что при почти полной идентичности с оригиналом, изображение с качеством «75» меньше исходного в несколько раз (по размеру файла). При установке качества «40» уже заметно ухудшение картинки. При установке качества «15» изображение и вовсе становится плохо различимым.
Значит, качество конечного варианта можно установить где-то между сорока пятью и семьюдесятью пятью. Можно остановиться, например, на значении «60». После этого нажмите на кнопку «Сохранить» и введите желаемое имя файла.

Комментарии (1)

Оглавление
Общий обзор Adobe® Photoshop® CS5
1. Новое в Adobe® Photoshop® CS5 2:08 10 98932
2. Интерфейс Photoshop® CS5 4:05 5 109256
3. Переключение рабочей среды 2:53 2 37665
4. Работа с панелями 2:50 3 60510
5. Панель «История» 1:42 1 24846
Работа с файлами
6. Открытие файла 1:06 2 35406
7. Создание нового файла 2:23 1 34073
8. Сохранение изображения 1:35 0 47025
9. Навигация по рабочему пространству 3:44 1 29454
Первичная обработка изображений
10. Работа со слоями 4:35 5 351943
11. Работа с масками 3:04 0 98808
12. Работа с каналами 1:40 0 33648
13. Работа с направляющими 2:13 0 42825
14. Палитра «Цвет» 1:43 0 23384
15. Изменение размеров изображения 2:00 0 40733
16. Обрезка изображений 2:01 0 90267
17. Трансформация изображения 2:28 0 59087
18. Цветовые режимы 2:23 1 33612
19. Корректирующие слои 2:01 0 29246
20. Заливка с учетом содержимого 1:57 0 44109
21. Марионеточная деформация 3:20 3 42748
Инструменты выделения
22. Обзор панели инструментов 2:21 0 17854
23. Магнитное Лассо - инструмент выделения 4:16 0 24632
24. Инструмент «Волшебная палочка» 2:50 1 48212
25. Инструмент «Быстрое выделение» 1:46 0 35577
Инструменты рисования и заливки
26. Инструменты «Кисть» и «Карандаш» 4:31 1 21250
27. Инструмент "Замена цвета" 2:43 0 107671
28. Инструмент «Микс-кисть» 1:34 0 15592
29. Инструмент «Ластик» 1:59 1 28119
30. Инструменты «Градиент» и «Заливка» 2:29 0 27409
Инструменты ретуширования
31. Инструмент «Восстанавливающая кисть» 2:30 0 35355
32. Инструмент «Точечная восстанавливающая кисть» 1:41 0 20573
33. Инструмент «Заплатка» 2:14 0 44851
34. Устранение эффекта красных глаз 2:35 3 1739057
35. Инструмент «Штамп» 1:23 1 40990
36. Инструменты «Размытие», «Резкость» и «Палец» 1:58 0 69978
37. Инструменты "Осветлитель" и "Затемнитель" 2:24 0 25905
38. Инструмент «Губка» 1:49 0 17769
Фильтры
39. Стандартные фильтры 3:36 0 19452
40. Галерея фильтров 2:48 0 13341
41. Фильтр «Пластика» 2:32 0 23182
42. Фильтры размытия изображения 3:56 0 20725
Векторные объекты и текст
43. Инструменты для работы с векторными объектами 3:23 0 48560
44. Работа с текстом 2:20 0 23750
45. Стили 1:51 0 17965
Работа с 3D-графикой
46. Создание 3D-слоя 3:13 3 45632
47. Инструменты управления 3D моделью 3:21 1 13119
48. Создание 3D-поверхностей 1:55 2 29086
Конечная подготовка изображений для сохранения и печати
49. Подготовка изображения для публикации в Web 3:00 1 11397
50. Сохранение и оптимизация изображения для Web 2:48 1 11749
51. Печать изображений 1:23 1 18106
Яндекс цитирования
Нажмите нравится, чтобы читать "TeachVideo.ru" в facebook