Сохранение и оптимизация изображения для 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 99147
2. Интерфейс Photoshop® CS5 4:05 5 109504
3. Переключение рабочей среды 2:53 2 37758
4. Работа с панелями 2:50 3 60710
5. Панель «История» 1:42 1 24926
Работа с файлами
6. Открытие файла 1:06 2 35488
7. Создание нового файла 2:23 1 34173
8. Сохранение изображения 1:35 0 47102
9. Навигация по рабочему пространству 3:44 1 29525
Первичная обработка изображений
10. Работа со слоями 4:35 5 352224
11. Работа с масками 3:04 0 99097
12. Работа с каналами 1:40 0 33755
13. Работа с направляющими 2:13 0 42931
14. Палитра «Цвет» 1:43 0 23423
15. Изменение размеров изображения 2:00 0 40810
16. Обрезка изображений 2:01 0 90397
17. Трансформация изображения 2:28 0 59376
18. Цветовые режимы 2:23 1 33682
19. Корректирующие слои 2:01 0 29293
20. Заливка с учетом содержимого 1:57 0 44310
21. Марионеточная деформация 3:20 3 42889
Инструменты выделения
22. Обзор панели инструментов 2:21 0 17907
23. Магнитное Лассо - инструмент выделения 4:16 0 24714
24. Инструмент «Волшебная палочка» 2:50 1 48293
25. Инструмент «Быстрое выделение» 1:46 0 35622
Инструменты рисования и заливки
26. Инструменты «Кисть» и «Карандаш» 4:31 1 21316
27. Инструмент "Замена цвета" 2:43 0 107848
28. Инструмент «Микс-кисть» 1:34 0 15671
29. Инструмент «Ластик» 1:59 1 28338
30. Инструменты «Градиент» и «Заливка» 2:29 0 27455
Инструменты ретуширования
31. Инструмент «Восстанавливающая кисть» 2:30 0 35450
32. Инструмент «Точечная восстанавливающая кисть» 1:41 0 20637
33. Инструмент «Заплатка» 2:14 0 45140
34. Устранение эффекта красных глаз 2:35 3 1739182
35. Инструмент «Штамп» 1:23 1 41081
36. Инструменты «Размытие», «Резкость» и «Палец» 1:58 0 70062
37. Инструменты "Осветлитель" и "Затемнитель" 2:24 0 25965
38. Инструмент «Губка» 1:49 0 17859
Фильтры
39. Стандартные фильтры 3:36 0 19559
40. Галерея фильтров 2:48 0 13398
41. Фильтр «Пластика» 2:32 0 23236
42. Фильтры размытия изображения 3:56 0 20768
Векторные объекты и текст
43. Инструменты для работы с векторными объектами 3:23 0 48714
44. Работа с текстом 2:20 0 23808
45. Стили 1:51 0 17997
Работа с 3D-графикой
46. Создание 3D-слоя 3:13 3 45810
47. Инструменты управления 3D моделью 3:21 1 13204
48. Создание 3D-поверхностей 1:55 2 29487
Конечная подготовка изображений для сохранения и печати
49. Подготовка изображения для публикации в Web 3:00 1 11442
50. Сохранение и оптимизация изображения для Web 2:48 1 11791
51. Печать изображений 1:23 1 18207
Яндекс цитирования
Нажмите нравится, чтобы читать "TeachVideo.ru" в facebook