Сохранение и оптимизация изображения для 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 97689
2. Интерфейс Photoshop® CS5 4:05 5 108187
3. Переключение рабочей среды 2:53 2 37219
4. Работа с панелями 2:50 3 59041
5. Панель «История» 1:42 1 24454
Работа с файлами
6. Открытие файла 1:06 2 34901
7. Создание нового файла 2:23 1 33342
8. Сохранение изображения 1:35 0 46411
9. Навигация по рабочему пространству 3:44 1 29138
Первичная обработка изображений
10. Работа со слоями 4:35 5 350640
11. Работа с масками 3:04 0 97898
12. Работа с каналами 1:40 0 33192
13. Работа с направляющими 2:13 0 41986
14. Палитра «Цвет» 1:43 0 23128
15. Изменение размеров изображения 2:00 0 40328
16. Обрезка изображений 2:01 0 89127
17. Трансформация изображения 2:28 0 57869
18. Цветовые режимы 2:23 1 33189
19. Корректирующие слои 2:01 0 29004
20. Заливка с учетом содержимого 1:57 0 43210
21. Марионеточная деформация 3:20 3 42207
Инструменты выделения
22. Обзор панели инструментов 2:21 0 17605
23. Магнитное Лассо - инструмент выделения 4:16 0 24411
24. Инструмент «Волшебная палочка» 2:50 1 47669
25. Инструмент «Быстрое выделение» 1:46 0 35352
Инструменты рисования и заливки
26. Инструменты «Кисть» и «Карандаш» 4:31 1 20926
27. Инструмент "Замена цвета" 2:43 0 106596
28. Инструмент «Микс-кисть» 1:34 0 15251
29. Инструмент «Ластик» 1:59 1 27360
30. Инструменты «Градиент» и «Заливка» 2:29 0 27133
Инструменты ретуширования
31. Инструмент «Восстанавливающая кисть» 2:30 0 34548
32. Инструмент «Точечная восстанавливающая кисть» 1:41 0 20274
33. Инструмент «Заплатка» 2:14 0 43664
34. Устранение эффекта красных глаз 2:35 3 1738615
35. Инструмент «Штамп» 1:23 1 40302
36. Инструменты «Размытие», «Резкость» и «Палец» 1:58 0 69597
37. Инструменты "Осветлитель" и "Затемнитель" 2:24 0 25328
38. Инструмент «Губка» 1:49 0 17433
Фильтры
39. Стандартные фильтры 3:36 0 19025
40. Галерея фильтров 2:48 0 13093
41. Фильтр «Пластика» 2:32 0 22760
42. Фильтры размытия изображения 3:56 0 20423
Векторные объекты и текст
43. Инструменты для работы с векторными объектами 3:23 0 47326
44. Работа с текстом 2:20 0 23292
45. Стили 1:51 0 17834
Работа с 3D-графикой
46. Создание 3D-слоя 3:13 3 44916
47. Инструменты управления 3D моделью 3:21 1 12912
48. Создание 3D-поверхностей 1:55 2 28028
Конечная подготовка изображений для сохранения и печати
49. Подготовка изображения для публикации в Web 3:00 1 11275
50. Сохранение и оптимизация изображения для Web 2:48 1 11477
51. Печать изображений 1:23 1 17673
Яндекс цитирования
Нажмите нравится, чтобы читать "TeachVideo.ru" в facebook