Модуль Save for Web. Особенности сохранения изображений для Internet. Подготовка фотографии для интернета

В этом уроке Вы увидите, как картинки из PSD файла сохранить для Web.

Например, Вы хотите изменить этот голубой слоган и название, написанное большими черными буквами.

Как Вы видите, этот текст нельзя выделить и поэтому его нельзя изменить в HTML файле. Эти две фразы - изображения. Давайте их отредактируем.

1. Откройте файл PSD

Пожалуйста, обратите внимание, что для обработки текста в PSD файле нужно установить необходимые шрифты, которые указаны в fonts_info.txt файле.

То же самое нужно сделать и для слогана. Его перекрывают другие фрагменты. Так же перенесите его на перед.

3.Сейчас нужно при нажатой клавише "Shift" выделить все фрагменты, которые хотите сохранить.

4. В верхнем меню перейдите на File > Save for Web & Devices (файл > сохранить для Web & Devices)

5.Выберите инструмент Slice select (выбор фрагмента) и опять при нажатой клавише "Shift" выберите фрагменты. Нажмите на кнопку Save (сохранить)

Обратите внимание, пожалуйста, что картинки нужно сохранить в папке Site, а не в Images. Убедитесь еще раз, что у Вас такие же настройки:

— Save as type/Сохранить как тип: Images Only/Только картинки
— Settings/Настройки: Default Settings/Стандартные Настройки
— Slices/Фрагменты: Selected Slices/Выбрать фрагменты (Важно!)

6. Вы увидите файлы, которые будут заменены. Нажмите на кнопку "Replace" (Заменить)

7. Обновите страницу и проверьте картинку, которую Вы только что изменили.

Пожалуйста, ознакомьтесь с детальным, обучающим видео ниже.

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

При подготовке фото для интернета, нужно максимально уменьшить объем файла, что бы посетители не ушли с сайта до окончательной загрузки фотоснимка, в то же время, что бы качество снимка не сильно пострадало при сжатии.

Итак, сначала определяемся, какой размер будет у нашей фотографии.

Смотрим исходный размер. То есть, в меню Изображение , выбираете пункт Размер изображения .

Открывается окно Размер изображения

Как видите, у приведенной мной для образца фотографии размер слишком большой - объем файла будет тоже не маленький. Поскольку самое распространенное на данный момент экранное разрешение - 1024х768 пикселей, то и фотографию больше этого размера делать не стоит.

Вводим вместо 2048 (у вас скорее всего там другие цифры) 1024 в окошко "ширина", при этом в окошке "Высота" автоматически появится цифра 768 (потому, что перед фразой Сохранить пропорции стоит галочка)

Нажимаем кнопку "ОК" - теперь у Вашей фотографии нужный размер!
Кстати, если вы на первом уроке кадрировали снимок до нужного размера, то этот абзац можете пропустить.

Примечание: Если исходный размер снимка меньше, чем 1024х768, то увеличивать его не стоит. Он, конечно, растянется до требуемого размера, но качество изображения ухудшится. Поэтому, если фотография и не закрывает весь экран - то пусть радует глаз красотой а не размерами. Ведь еще Ленин говорил по этому поводу: "Лучше меньше - да лучше!"

С размерами определились, переходим непосредственно к сохранению.

Сохранение фотографии для Интернета

В меню Файл, выбираете пункт Сохранить для Web .

Открывается диалоговое окно Save For Web

Как видите, появляется 2 снимка для сравнения качества изображения: оригинал и тот снимок, который получится при устанавливаемых Вами параметрах.

Вы спросите: какие параметры устанавливать?

Во-первых, в окошке 2 выберите формат GIF или JPEG.

Формат GIF поддерживает не больше 256 цветов и подойдет только для сохранения рисунков и чертежей (рисунки 6-8 на этой странице сохранены в формате GIF с поддержкой 64 цветов, поэтому весят по 7-11 кб - мелочь, а приятно!)

Конечно, красивую фотографию в этом формате не сохранишь, поэтому выбираем формат JPEG.

В окошке 3 выбираем качество фотографии: низкое, среднее, высокое, максимальное. Вы скажете: конечно максимальное?

Да, если бы речь шла о сохранении на винчестер, то так бы оно и было. Но Вы же собираетесь эти фотографии размещать в Интернете для скачивания почитателями Вашего таланта! А кто любит долго ждать открытия страницы? Вот именно, никто!

Представленная фотография сохранена при среднем качестве и "весит" 36 кб. При высоком качестве она бы весила около 100 кб, а при максимальном - 200! Вообщем, я особой разницы между средним и высоким качеством не вижу, зато вижу большую разницу в объеме получаемого файла.

А вы можете поэкспериментировать. Меняя значения, вы будете видеть, как у вас на глазах меняется качество правого снимка. Кроме того, под правым снимком увидите, как меняется размер К (в килобайтах) снимка, в зависимости от качества.

Наконец, когда выбор размера изображения, формата и качества закончен, нажимаем кнопку Save (Сохранить). Как обычно, потребуется назвать файл (поскольку файл готовите для Интернета - сразу напишите латинскими буквами) и определить папку для сохранения. Когда вы это сделали - опять нажимаете кнопку Сохранить .

Если шибко грамотный фотошоп при этом выдаст вам предупреждение, что "некоторые имена файлов несовместимы с некоторыми веб-браузерами" , скажите, что и без него все знаете и нажмите ОК.

Всё, снимок готов!

Внимание! Пока Вы полностью не закончите работу над фотографией, сохраняйте ее в "родном" фотошоповском формате PSD. Потому что многократное повторное сжатие в форматах GIF и JPEG приводит к безвозвратной потере качества.

Для многих вебмастеров оптимизация изображений для WEB-среды представляет собой обработку картинок и сохранение их в разных форматах: gif (1-256 цветов), png-8 (1-256 цветов), png, jpeg. После оптимизации картинок их вес должен быть наименьшим. Обычно страница сайта вместе с картинками не должна быть более 600 Кбайт. Размер картинок напрямую зависит от её качества. Чем меньше вес картинки, тем хуже её качество и наоборот. Если картинка содержит в себе 2-3 цвета, то её можно сохранить в форматах: gif, png-8. Если сайт содержит в себе много не оптимизированных картинок, то происходит большая нагрузка на сервер и пользователь с медленным интернетом может так и не дождаться загрузки страницы. В таких случаях пользователь уходит на другой сайт с "лёгкими" страницами. Одной из главных целей любого вебмастера является удержание посетителя на своём сайте.

Можно настроить качество изображения и количество цветов. Чем меньше цветов, тем меньше вес картинки. Но не увлекайтесь. Фотографии не стоит сохранять в gif и png-8 форматах. Для них подойдет jpeg c алгоритмами сжатия и png-24 с поддержкой прозрачных областей. Сохраним картинку для веб-среды. В строке меню выберем пункт "Сохранить для WEB и устройств" или "save for web" .

В выпадающем списке выберем "jpeg". Поставим галочку у режима "Прогрессивный". В поле качество поставим значение 80%. Для сайтов хорошо подойдёт такая оптимизация. Алгоритмы сжатия jpeg портят качество картинки , но именно они позволяют уменьшить вес картинки. При оптимизации внимательно смотрите на то, как будет выглядеть ваша картинка с алгоритмами сжатия. Для этого в окне найдите вкладку "2 варианта". Если изображение не содержит в себе фотографий, то его можно сохранить в разных форматах и сравнить полученные варианты между собой по качеству и по весу.

Тут придётся искать золотую середину между качеством и весом картинки. Форматы gif, png-8, png-24 позволяют использовать прозрачность. Формат jpeg не поддерживает прозрачность. Если вы пытаетесь сохранить картинку с прозрачностью в jpeg формате, то photoshop автоматически сохранит картинку с белым фоном. В том месте, где вы планировали прозрачный участок, появится белое поле. Все картинки, которые вы планируете закачать на сайт, должны иметь разрешение в 72 dpi. Именно такое разрешение должно быть у картинок.

Компания Adobe внесла некоторые незначительные изменения в популярную и всем полюбившуюся функцию Сохранить для сети в Photoshop CC 2015. Эта функция используется для многих задач - от подготовки ресурсов для размещения на веб-сайте до оптимизации фотографий высокого разрешения для создания анимированных GIF-файлов. Поскольку команда «Сохранить для сети» создана на основе ранее выпускаемого продукта ImageReady (срок его эксплуатации истек), ее код технически слишком устарел для дальнейшего поддержания и разработки новых элементов.

Была ли команда «Сохранить для сети» удалена из Photoshop CC 2015?

Я использую команду «Сохранить для сети» каждый день. Не будет ли мой рабочий процесс замедляться из-за изменений в системе меню?

Можно полностью пропустить данное меню путем использования существующего сочетания клавиш:

(Windows) Ctrl + Alt + Shift + S
(Mac) Cmd + Opt + Shift + S

При необходимости можно настроить сочетания клавиш. Для этого необходимо выбрать «Редактирование» > «Сочетания клавиш».

Были ли удалены какие-либо особенности команды «Сохранить для сети»?

Означает ли пометка «Устаревшие» то, что в будущем команда «Сохранить для сети» будет удалена?

Возможно. Тем не менее, будьте уверены, что компания Adobe не удалит команду «Сохранить для сети», не предоставив соответствующую функцию в новом, улучшенном формате рабочего процесса. Например, мы знаем, что многим пользователям требуются такие функции, как вид 2up , целевой размер файла, преобразование в формат sRGB, параметры метаданных и анимированные GIF-файлы. Команда «Сохранить для сети» не будет удалена без предоставления соответствующих возможностей в новом, улучшенном формате рабочего процесса.

Цель: изучение алгоритма подготовки графических элементов веб-страницы

Общие пожелания для подготовки изображений:

Графические элементы должны быть представлены в формате GIF или PNG .
Фотографии должны быть представлены в формате JPEG .
Обеспечьте показ изображений с малым разрешением, пока идет загрузка больших изображений.
Используйте GIF -изображения с чересстрочным форматом.
Укажите атрибуты height и width элемента img .
Сократите количество анимации.
По возможности используйте пиктограммы изображений.
Обязательно создавайте «альтернативный» текст (атрибут alt )

При размещении градиента на фон, подбирается либо горизонтальный либо вертикальный градиент, и, в зависимости от этого, вырезается лишь тонкая линия данного градиента. При размещении в CSS устанавливаются соответствующие свойства фона (см. рис. 1.1 )

Рис. 1.1. Градиент на фон в Photoshop

Прежде чем использовать файл изображения в веб-странице, необходимо в графическом редакторе подготовить его для размещения. При этом важно не только определить в photoshop размер изображения, но и правильно сохранить: используя диалоговое окно Сохранить для Веб и устройств (см. рис. 1.2 ):

Устанавливаем настройки диалогового окна Сохранить для Интернета и устройств :

Оптимизация и сжатие до заданного размера файла:

Рис. 1.4. Оптимизация и сжатие до заданного размера файла

Лабораторная работа Photoshop 1_1:

Откройте изображение в Photoshop и выберите «Файл» -> .
В диалоговом окне «Сохранить для Интернета и устройств» щелкните вкладку «Оптимизированный» .
В меню «Стиль» выберите «Низкое качество JPEG» .
Щелкните вкладку «Размер изображения» .
Убедитесь, что установлен параметр «Сохранить пропорции» и введите ширину. Для электронной почты подходит размер 400 пикселов.
Нажмите кнопку «Сохранить» . Введите имя файла и путь для сохранения файла. Убедитесь, что в меню «Формат» выбран вариант «Только изображения» . Нажмите кнопку «Сохранить» .

Установка параметров оптимизации JPEG

Для размещения качественных фото, необходимо подготовить в Photoshop изображение в формате JPEG:

Рис. 1.5. Параметры оптимизации JPEG

Установка параметров оптимизации для форматов GIF и PNG

Рис. 1.6. Параметры оптимизации для форматов GIF и PNG

Лабораторная работа Photoshop 1_2 : JPEG-сохранение

Откройте в редакторе изображение jpg формата (или скачайте ) и вызовите диалог (Save for Web & Devices ) в меню File .
Выберите вкладку «Оптимизированный» (Optimized )
Откройте список «Наборы параметров» (Preset ) и выберите один из 12 предлагаемых вариантов – JPEG Medium (средний)
Оцените качество изображения и размер итогового файла
Уровень качества, можно грубо задать в меню, а можно точно настроить ползунком «Качество» (Quality ): передвиньте ползунок на 70 .
Включите флажок опции «Оптимизированный» (Optimized ): позволяет чуть уменьшить размер файла в обмен на ограничение совместимости со старинными браузерами.

Лабораторная работа Photoshop 1_3 : GIF-сохранение

для работы.
Из «списка форматов» выберите пункт «GIF» .
Выберите (или впечатайте) количество оттенков в поле «Цвета» (Colors) и посмотрите, как это отразилось на изображении и размере итогового файла (установите 90 )
Для уменьшения исходной гаммы картинки до заданного количества, можно воспользоваться одним из 9 доступных методов редукции цвета. Выберите одну из четырёх верхних опций: установите «Ограниченная» (Restrictive)
Смешение цветов (Dithering ) отчасти компенсирует узость гаммы, «конструируя» отсутствующие цвета из набора имеющихся. Выберите «Диффузия» (Diffusion) и передвиньте ползунок Dither (степень количества полутонов) на 80 .
В таблице цветов выберите один из цветов (желтый), дважды щелкнув по цвету, и замените его другим оттенком. Для выбора можно воспользоваться Пипеткой в левой части экрана.
Щелкните кнопку Done , чтобы сохранить параметры оптимизации в исходный документ

Лабораторная работа Photoshop 1_4 : Взвешенная оптимизация

для работы.
Откройте файл в редакторе. Выделите фрагмент картинки (цветок) Прямолинейным Лассо или любым другим инструментом.
Сохраните выделение в альфа-канал (Select → Save Selection (Выделение → Сохранить выделение )). Дайте ему имя (введите в поле Имя ).
Откройте диалог «Сохранить для Веб и устройств» , выберите «JPEG» в качестве формата на выходе и, если нужно, настройте уровень качества.
Щёлкните кнопку «маска» по соседству с полем «Качество» (Quality) . Открывается диалоговое окно.
Выберите в меню «Канал» (Channel) только что сохранённый альфа-канал. Настройте «Минимальное» и / или «Максимальное» значения по вкусу и нажмите Ok .

Лабораторная работа Photoshop 1_5 : Настройка параметров вывода

В диалоговом окне «Сохранить для Интернета и устройств» в раскрывающемся меню «Оптимизация» выберите пункт «Изменить настройки вывода» (Edit output settings ).
Отметьте флажок Вывод XHTML : При экспорте создаются web-страницы, соответствующие стандарту XHTML.
Щелкните по кнопке Следующая и настройте параметры в группе «Фрагменты» .
Настройте вывод фона щелкнув по Следующая .
Щелкните ОК и сохраните оптимизированный файл.
Просмотрите HTML-код результирующего файла.