Как правильно сохранить изображение для Web в Photoshop
В этом уроке мы узнаем, как правильно работать с инструментом Photoshop «Сохранить для Web» (Save for Web), т.е. как сохранять подготовленную и уменьшенную фотографию или изображение для загрузки на веб-сайте или отправки по электронной почте.
Надо отметить, что технология не изменилась с версии Photoshop CS4 до версии CC (Creative Cloud), так что данный урок подойдёт ко всем этим версиям.
Об уменьшении размера изображения в Photoshop для версий CS6 и ниже рассказывается здесь, а для как изменять размер картинки в новом Photoshop CC — здесь.
Я буду работать с этой фотографией:
Итак мы изменили размер изображения так. как нам надо. Теперь пришло время для его оптимизации и сохранения в одном из популярных графических форматов, чаще всего это JPG(JPEG) или PNG. Теперь нажмите на вкладку главного меню «Файл» (File) и выберите из списка пункт «Сохранить для Web. » (Save For Web & Devices) или нажмите мою любимою комбинацию клавиш Ctrl+Alt+Shift+S:
Это действие открывает в Photoshop большое диалоговое окно «Сохранить для Web», в котором область предварительного просмотра занимает большую часть пространства.
В левом верхнем углу области предварительного просмотра вы увидите серию из четырех вкладок. По умолчанию, выбрана вкладка «Оптимизация» (Optimized), которая означает, что вы не видите исходное изображение. Вместо этого, показан предварительный просмотр того, как изображение выглядит с текущими настройками оптимизации (которые мы рассмотрим чуть позже):
Как советуют веб-дизайнеры, лучше воспользоваться другой вкладкой, где в окне предпросмотра показываются сразу два изображения, оригинальное и оптимизированное, это вкладка «2 варианта» (2-Up):
При активной вкладке «2 варианта», теперь мы видим сразу два изображение, оригинальную версию слева и оптимизированную версию справа (если Ваша картинка имеет альбомную ориентацию, т.е. её ширина больше, чем высота, то тогда картинки будут показываться одна над другой):
Формат файла
С правой стороны диалогового окна находятся опции оптимизации изображения.
Первое, что нужно сделать, это выбрать правильный формат файла для нашего изображения. Если Вы открываете это окно в первый раз, по умолчанию установлен формат GIF. формат выбранного файла в верхней части (непосредственно под словом «Preset»). GIF в некоторых случаях используется для сохранения веб-графики, но для моей фотографии лучше подойдёт формат JPEG, поэтому я изменю GIF на JPEG:
Качество сжатия изображения
Непосредственно под опцией формата находится варианты выбора качества сжатия изображения, т.е. выходного качества самой картинки.
Мы можем выбрать из предварительно заданные параметров качества (низкое, среднее, высокое и очень высокое, и наилучшее, в англ. — Low, Medium, High, Very High, и Maximum) в выпадающем списке слева, либо можем ввести определённое значения качества в процентах справа.
Хотя довольно таки заманчиво задать максимальное качество для наших фотографий, оптимизация для интернета означает, что мы должны делать размер файла в мегабайтах как можно меньше, что означает поиск золотой середины между качеством изображения и размером файла. Значение качества «Высокое» почти всегда является оптимальным выбором, оно даёт нам приемлемое качество изображения при относительно небольшом размере файла. Выбор значения «Высокое» автоматически устанавливает значение качества на 60%:
Как только вы выбрали значение качества, убедитесь, что опция «Оптимизация» (Optimized) у Вас включена, т.к. она может помочь ещё несколько уменьшить размер файла. Опции «Прогрессивный» (Progressive) и «Встроенный (цветовой) профиль» (Embed Color Profile) включать не обязательно, т.к. всё-равно большинство веб-браузеров не поддерживают цветовые профили:
Цветовое пространство
Наконец, включите опцию «Преобразовать в sRGB» (Convert to sRGB), если она ещё не активна. Это позволит убедиться в том, что фотография сохраняется в цветовом пространстве sRGB, что, проще говоря, означает, что цвета на фотографии будут корректно отображаться на веб-сайте:
Размер изображения
Диалоговое окно также дает нам возможность изменить линейный размер изображения. Я рекомендую изменять размер изображения заранее, перед включением диалогового окна «Сохранением для Web», чтобы при сохранении для Web линейные размеры в пикселях были уже готовыми. Особенно это актуально для последней версии Photoshop CC с его
новым диалоговым окном «Размер изображения». Об изменении размера изображения в Photoshop CC рассказывается здесь, а в версиях CS6 и ниже — здесь.
Сравнение исходных и оптимизированных размеров файла
На данный момент, мы сделали все, что нужно, для оптимизации файла для Web, и теперь давайте посмотрим на размер файла в байтах в исходной и оптимизированной версиях. В моем случае, размер исходной фотографии (слева) был равен колоссальному для интернета значению — 1,29Mb что слишком велико для пользователей даже со средней скоростью интернета, а оптимизированная версия (справа), которая выглядит почти так же хорошо, как и оригинал, получилась всего 41,85 Kb :
Сохранение изображения
Чтобы сохранить оптимизированную версию Вашей фотографии, нажмите кнопку «Сохранить» (Save) в нижней части диалогового окна. Photoshop откроет новое диалоговое окно «Сохранить оптимизированный как» (Save Optimized As), которое позволяет при необходимости переименовать изображение, а также выбрать нужную папку на жёстком диске для сохранения. Когда закончите, нажмите кнопку «Сохранить», чтобы сохранить изображение и выйти из диалогового окна:
Ну вот, собственно, и всё. Фото теперь полностью оптимизировано и готово к оправке по электронной почте либо для размещения на сайте.
Сохранение и оптимизация изображений для Web
Чтобы открыть изображение в программе Adobe Photoshop CS5, нужно зайти в меню Файл — Открыть , и выбрать нужный файл. Также можно открыть изображение с помощью горячих клавиш Ctrl + O . Если ни одно изображение не открыто, можно сделать двойной клик по пустой рабочей области. Также можно открыть файл из папки с помощью нажатия правой клавишей мыши: нажимаете и выбираете пункт Открыть с помощью , а далее выбираете программу фотошоп.
И еще один способ открытия изображения в программе: сворачиваете программу. затем из папки тащите файл вниз, на панель задач на кнопку свернутой программы фотошоп. После этого, не отпуская клавишу мыши, тащите на пустую рабочую область, или, если уже есть картинка, на серую полоску — туда, где располагаются названия картинок.
Чтобы сохранить изображение в программе Adobe Photoshop CS5, нужно зайти в меню Файл — Сохранить , выбрать место, куда сохранять, прописать название и сохранить. Также созранение производится с помощью горячих клавиш Ctrl+S .
Кроме того, если Вы производите с изображением какие-либо действия, то можете сохранить не изображение, а его копию, выбрав меню Файл — Сохранить как , и прописав другое имя файла.
При сохранении появляется диалоговое окно, в котором можно выбрать параметры качества изображения. Чем лучше качество, тем больше будет вес изображения. Кроме того можно переключать разновидности формата при сохранении. При выборе параметров Вы можете увидеть вес изображения в килобайтах, в области диалогового окна справа.
Изображение можно сохранять в разных форматах. Если мы поработали с изображением. и в итоге у нас в нем появилось несколько слоев, то по умолчанию нам предлагается сохранять изображение в формате PSD . Этот формат — формат фотошопа, он позволяет сохранять все слои, а также настройки их наложения друг на друга. Таким образом, Вы можете всегда сохранять изображение в этом формате, если планируете его редактировать в дальнейшем.
После редактирования итоговое изображение можно сохранять в формате JPEG, GIF или PNG. Формат JPEG подходит для фотографий или рисунков с множеством цветов, оттенков и переходов, формат GIF работает с 256 цветами и поддерживает прозрачность, а формат PNG хорошо подходит для картинок с наложенным на них текстом.
Откройте какое-либо изображение в программе Adobe Photoshop CS5, и сделайте на нем любую надпись с помощью инструмента Горизонтальный текст. Если Вы теперь посмотрите палитру Слои, то увидите, что изображение состоит теперь из двух слоев: фонового слоя, и слоя с текстом, которые лежат один над другим. Это позволяет в дальнейшем редактировать текст: например, исправить надпись, сделать ее другим цветом, или изменить расположение, не затрагивая фон. Или наоборот, мы можем изменять фон, не изменяя текст, работая над каждым слоем отдельно.
Если Вы сохраняете это изображение в самых распространенных форматах для просмотра: JPEG, GIF или PNG, то слои сольются в один, и при последнем открытии в программе фотошоп Вы их не увидите. А это означает, что возможности редактировать слои в картинке по отдельности у Вас уже не будет. Именно поэтому для дальнейшего редактирования изображение сохраняйте в формате PSD: когда Вы открываете его в программе фотошоп снова, Вы сможете со слоями работать.
А уже после редактирования, чтобы их просмотреть, или разместить в Интернете, изображения сохраняются в других форматах.
Для размещения изображений в Интернете их сначала, как правило, оптимизируют — то есть уменьшают их вес. Оптимизация изображений производится с помощью меню Файл — Сохранить для Web и устройств . В этом пункте изображение можно оптимизировать — уменьшить его вес. Оптимизация изображения — это самая последняя операция перед размещением в Интернете, ее делают после совершения всех остальных операций редактирования.
Заходите в этот пункт и во вкладках на рабочей области выбираете различные варианты просмотра: можно посмотреть исходное изображение, изображение после оптимизации, оба варианта сразу, или четыре варианта оптимизации, которые предлагает программа. Изображения в окнах можно перемещать с помощью инструмента Рука , а также увеличивать или уменьшать с помощью инструмента Лупа .
Справа Вы выбираете форматы изображения после оптимизации, а также качество оптимизированного изображения: в выпадающем списке, или двигая бегунок в окошке Качество . Опять же, чем лучше качество — тем больше вес изображения, и тем дольше оно будет потом загружаться у пользователей, которые его откроют в Интернете. Необходимо выбирать оптимальный для Вас вариант — и качество приемлемое, и вес небольшой.
Вес картинки, исходной и оптимизированной, Вы можете увидеть внизу, под изображением.
По окончании настройки оптимизации нажимаете внизу кнопку Сохранить .
Видео о том, как открыть, сохранить изображение, и сохранить его для Web
Более подробные сведения Вы можете получить в разделах «Все курсы» и «Полезности», в которые можно перейти через верхнее меню сайта. В этих разделах статьи сгруппированы по тематикам в блоки, содержащие максимально развернутую (насколько это было возможно) информацию по различным темам.
Также Вы можете подписаться на блог, и узнавать о всех новых статьях.
Это не займет много времени. Просто нажмите на ссылку ниже:
Подписаться на блог: Дорога к Бизнесу за Компьютером
Вам понравилась статья? Поделитесь, буду весьма признателен:
Как открыть в фотошопе сохранить для веб
Чтобы сохранить изображение для web пространства в графическом редакторе Adobe Photoshop, необходимо нажать на кнопку — Файл, и выбрать из раскрывшегося списка пункт — Сохранить для Web.
Появилось окно в котором нужно произвести ряд простых действий:
- Выбираем нужный формат для изображения (*.jpg, *.png и тд);
- Ставим галочку на пункте — Преобразовать в sRGB.
- Изменяем размер изображения (если конечно нужно);
- Нажимаем — Сохранить.
Далее присваиваем имя файлу, и нажимаем на кнопку — Сохранить.
С уважением, Артём Санников
Записи, которые могут вас заинтересовать
Как разгруппировать слои в Adobe Photoshop
Пошаговая инструкция по отмене группировки слоёв в графическом редакторе Adobe Photoshop.
Как сгруппировать слои в Adobe Photoshop
Пошаговая инструкция по группировке слоёв в графическом редакторе Adobe Photoshop.
Как скрыть слой в Adobe Photoshop
Пошаговая инструкция по скрытию слоя в графическом редакторе Adobe Photoshop.
Как заблокировать слой в Adobe Photoshop
Пошаговая инструкция по блокировке слоя в графическом редакторе Adobe Photoshop.
Как открыть свойства слоя в Adobe Photoshop
Пошаговая инструкция по открытию свойств слоя в графическом редакторе Adobe Photoshop.
Как отменить связь слоёв в Adobe Photoshop
Пошаговая инструкция по отмене связи между слоями в графическом редакторе Adobe Photoshop.
Сохранение для WEB для фотошопа
После того как ваш документ готов , идём в «Файл — Сохранить для WEB» или клавиши Alt+Shift+Ctrl+S.
Для сохранения документа в формате JPEG:
в открывшемся окне справа выбираете настройки, смотрите ниже 
Для сохранения документа в формате GIF:
в открывшемся окне справа выбираете настройки, смотрите ниже 
Если сохраняете из Image Ready, то заходим в меню ФАЙЛ-СОХРАНИТЬ ОПТИМИЗИРОВАННЫЙ КАК и сохраняем изображение как рисунок и HTML-код в формате GIF
Но бывает ,что Photoshop CS. закрывается и естественно результаты нашего большого труда никак не сохраняются, что бывает ну очень обидно!
Устранить эту проблему оказалось очень просто. Последовательность действий такова:
1. Скачиваем необходимый нам файл. 
Когда Вы распакуете скачанный файл, то увидите папку «Save_for_Web_CS2», открываем её и находим там необходимый нам файл «Save for Web».
2. Идём в диск «C (если фотошоп стоит на этом диске):\Program Files\Adobe\Adobe Photoshop CS3\Plug-Ins\Import-Export».
3. В последней папке находим файл «Save for Web» и заменяем его на скачанный выше.
4. Перезагружаем фотошоп. Всё, теперь можно спокойно пользоваться функцией «Сохранить для WEB».
Теперь в ходе своей работы с фотошопом Вы можете сохранять свои работы с помощью функции «Сохранить для WEB».
Р.S — Единственное, чтобы я посоветовал Вам сделать перед проведением вышеописанной процедуры — на всякий случай, сохраните исходный файл «Save for Web», который находится в папке «Import-Export». Если после замены исходного файла на скачанный что-то пойдёт не так, Вы всегда можете вернуть состояние фотошопа до всех внесённых изменений.