Сохранение и оптимизация изображения для 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 99031
2. Интерфейс Photoshop® CS5 4:05 5 109384
3. Переключение рабочей среды 2:53 2 37715
4. Работа с панелями 2:50 3 60600
5. Панель «История» 1:42 1 24898
Работа с файлами
6. Открытие файла 1:06 2 35454
7. Создание нового файла 2:23 1 34139
8. Сохранение изображения 1:35 0 47071
9. Навигация по рабочему пространству 3:44 1 29495
Первичная обработка изображений
10. Работа со слоями 4:35 5 352090
11. Работа с масками 3:04 0 98940
12. Работа с каналами 1:40 0 33705
13. Работа с направляющими 2:13 0 42895
14. Палитра «Цвет» 1:43 0 23403
15. Изменение размеров изображения 2:00 0 40778
16. Обрезка изображений 2:01 0 90335
17. Трансформация изображения 2:28 0 59284
18. Цветовые режимы 2:23 1 33655
19. Корректирующие слои 2:01 0 29269
20. Заливка с учетом содержимого 1:57 0 44217
21. Марионеточная деформация 3:20 3 42834
Инструменты выделения
22. Обзор панели инструментов 2:21 0 17876
23. Магнитное Лассо - инструмент выделения 4:16 0 24675
24. Инструмент «Волшебная палочка» 2:50 1 48248
25. Инструмент «Быстрое выделение» 1:46 0 35595
Инструменты рисования и заливки
26. Инструменты «Кисть» и «Карандаш» 4:31 1 21280
27. Инструмент "Замена цвета" 2:43 0 107766
28. Инструмент «Микс-кисть» 1:34 0 15637
29. Инструмент «Ластик» 1:59 1 28206
30. Инструменты «Градиент» и «Заливка» 2:29 0 27438
Инструменты ретуширования
31. Инструмент «Восстанавливающая кисть» 2:30 0 35396
32. Инструмент «Точечная восстанавливающая кисть» 1:41 0 20605
33. Инструмент «Заплатка» 2:14 0 44970
34. Устранение эффекта красных глаз 2:35 3 1739132
35. Инструмент «Штамп» 1:23 1 41038
36. Инструменты «Размытие», «Резкость» и «Палец» 1:58 0 70027
37. Инструменты "Осветлитель" и "Затемнитель" 2:24 0 25928
38. Инструмент «Губка» 1:49 0 17802
Фильтры
39. Стандартные фильтры 3:36 0 19512
40. Галерея фильтров 2:48 0 13373
41. Фильтр «Пластика» 2:32 0 23218
42. Фильтры размытия изображения 3:56 0 20750
Векторные объекты и текст
43. Инструменты для работы с векторными объектами 3:23 0 48642
44. Работа с текстом 2:20 0 23781
45. Стили 1:51 0 17980
Работа с 3D-графикой
46. Создание 3D-слоя 3:13 3 45744
47. Инструменты управления 3D моделью 3:21 1 13150
48. Создание 3D-поверхностей 1:55 2 29269
Конечная подготовка изображений для сохранения и печати
49. Подготовка изображения для публикации в Web 3:00 1 11432
50. Сохранение и оптимизация изображения для Web 2:48 1 11777
51. Печать изображений 1:23 1 18156
Яндекс цитирования
Нажмите нравится, чтобы читать "TeachVideo.ru" в facebook