Вы создали в Фотошопе
свой маленький шедевр и Вам хочется похвастаться им перед своими друзьями. Для
этого его нужно сохранить для публикации в Интернет.
В меню «Файл» выберите команду «Сохранить для Веб и устройств» (Save for Web
& Devices). Открывается большое диалоговое окно, предназначенное для
оптимизации сохраняемых изображений, то есть, для поиска оптимального
соотношения качества изображения и размера получаемого файла.
· 1. Панель инструментов.
· 2. Параметры отображения
· 3. Область комментариев
· 4. Масштаб
· 5. Информация о цвете
· 6. Просмотр в браузере
· 7. Палитра оптимизации
· 8. Метаданные
· 9. Таблица цветов
· 10. Размер изображения
· 11. Элементы управления анимацией
· 12. Кнопки подтверждения отмены операции
· 13. Область предварительного просмотра
Область предварительного просмотра
Если Вам кажется, что картинка великовата для размещения на веб-странице, откройте вкладку «Размер Изображения» (Image Size) - (№10 в описании диалогового окна)- и уменьшите её ширину и высоту.
Настройки и оптимизация для формата GIF
1. Меню "Оптимизировать"
2. Меню "Формат файла"
3. Алгоритм редукции цвета
4. Алгоритм дизеринга
Примечание:
Сохранение изображений с помощью диалога «Сохранить для Web и
устройств (Save for Web)» (часто называемое «экспортом») подразумевает создание
«облегчённой» и несколько «ухудшенной» копии, предназначенной именно для
публикации в Web. Ни в коем случае не сохраняйте оптимизированную копию поверх
исходного изображения!
Модуль Save For Web & Devices (Сохранить для Веб и устройств), который сильно облегчает работу, обеспечивает большую гибкость и лучшее качество экорта изображений в форматы GIF, JPEG и PNG. Главное окно модуля изображено на рис. 15.10. Оно открывается одноименной командой из меню File (Файл). Волните эту команду для файла БАРЕЛЬЕФ1_НА_ДОМЕ_ЗИНГЕР.jpg.
Рис. 15.10. Диалоговое окно Save For Web & Devices (вкладка 4-Up )
Основную часть окна занимает область предварительного просмотра. Она мет находиться в одном из четырех режимов, устанавливаемых с помощью вкладок:
± Original (Оригинал). Изображение в исходном виде.
± Optimized (Оптимизированное). Вид изображения после оптимизации. Именно так оно и будет выглядеть в браузере.
± 2-Up (Два). Одновременный просмотр оригинала и оптимизированного изобрения. Впрочем, оба окна в области просмотра могут отображать оптимизиранное изображение, но с различными параметрами оптимизации.
± 4-Up (Четыре). В этом режиме область просмотра делится на четыре окна, в которых можно заказать демонстрацию оригинала и оптимизированного изображения с разными параметрами оптимизации. Такой режим удобно иользовать для выбора наилучших параметров. Он позволяет визуально оцивать влияние сжатия или уменьшения палитры на качество изображения и его размер.
Управление масштабом отображения в области просмотра организовано так же, как и в самом Photoshop: с помощью списка масштабов в левом нижнем углу окна и инструментов Zoom (Масштаб) и Hand (Рука).
Под каждым окном области просмотра указываются формат файла изображия (GIF, JPEG или PNG), параметры оптимизации, размер файла и время его зрузки в браузер при заданной скорости модема. Выберите ее в меню просмотра, открывающегося нажатием круглой кнопки с треугольной стрелкой. Там же вы найдете и варианты отображения цветов:
± Browser Dither (Плавный переход цветов в браузере). Если изображение сержит больше цветов, чем может отобразить монитор, то в браузере они будут аппроксимироваться, если включить флажок.
± Hide Auto Slice (Скрыть деление на фрагменты). Применяется для изображий, которые "разрезаны" на фрагменты.
± Uncompensated Color (Без корректировки). Цвета отображаются в области просмотра "как есть", без поправок.
± Standard Windows Color (Стандартные цвета Windows). Таким образом отражаются цвета на мониторах компьютеров, работающих под управлением системы Windows.
± Standard Macintosh Color (Стандартные цвета Macintosh). На компьютерах Macintosh изображения выглядят несколько светлее, поскольку Mac OS иользует иное значение гаммы (1,8), чем Windows (2,2). Выбрав этот вариант, вы сможете оценить, как будет выглядеть изображение для пользователей Macintosh.
± Use Document Color Profile (Использовать профиль документа). Вид изобрения корректируется в соответствии с установками системы управления цвом, сделанными в Photoshop.
В этой же области просмотра можно указать параметры используемого модема.
Опробуем эту команду в действии на изображении барельефа из файла БАРЕЛЬЕФ2_НА_ДОМЕ_ЗИНГЕР.jpg.
1. Откройте файл БАРЕЛЬЕФ2_НА_ДОМЕ_ЗИНГЕР.jpg.
2. Выберите команду Save For Web & Devices (Сохранить для Веб и устройств) из меню File (Файл).
3. Выберите режим 2-Up (Два), перейдя на соответствующую вкладку (рис. 15.11).
Рис. 15.11. Диалоговое окно Save For Web & Devices (вкладка 2-Up )
4. В правой части окна находятся элементы управления параметрами экспорта. В списке Preset (Предлагаемые установки) выберите формат сохранения JPEG Medium (рис. 15.12).
5. Список Preset (Предлагаемые установки) предлагает несколько типичных знений качества изображения: JPEG High (Высокое), JPEG Low (Низкое), JPEG Medium (Среднее). Более тонкая регулировка осуществляется ползунком Quality (Качество), расположенным правее. Для начала установите с его помью максимальное качество, 100%. При столь высоком значении изображение в правой части области просмотра (оптимизированное) практически не отличтся от оригинала в левой части. Уменьшите качество изображения с помощью
ползунка Quality (Качество) до 15-18%. Взгляните на информационные поля в соответствующих частях области просмотра. Оригинал, несжатое изображение, занимает 3,21 Мбайт, а сжатое - 109 Кбайт. Даже столь низкий коэффициент сжатия обеспечивает почти четырехкратный выигрыш в размере файла.
6. Посмотрите на оценку времени загрузки сжатого изображения. Оно составит 40 секунд при скорости модема 28,8 Кбайт/с. Теперь представьте себя читателем веб-страницы, на которой находится пять таких изображений. Будете ли вы дидаться, пока страница загрузится целиком? Скорее всего, нет. Чтобы удержать читателя, требуется делать изображения как можно более компактными. В случае формата JPEG нужно просто понизить качество, увеличив коэффициент сжатия. Установите ползунок Quality (Качество) ближе к левому краю. Очевидно, качтво ухудшилось, появилась характерная "грязь". Но так ли уж плохо дело?
7. Теперь отыграем еще несколько секунд для читателя веб-страницы. Коэффицнт сжатия можно повысить за счет предварительного размывания изображия. Ползунок Blur (Размытие) в области Preset (Предлагаемые установки) избавит от необходимости покидать окно фильтра экспорта. Разумеется, раывка должна быть не слишком значительной, чтобы качество изображения не пострадало. Значение 0,2 вполне удовлетворяет этому требованию.
8. Флажок Progressive (Постепенный) задает чересстрочную развертку изображия при загрузке в браузере. Она слегка увеличивает размер файла, но и дает возможность читателю страницы самому определять, стоит ли дожидаться поой загрузки. Установите его.
9. Флажок ICC Profile (Профиль ICC) позволяет внедрить в файл изображения цветовой профиль. Устанавливайте данный флажок, только если у вас есть для этого весьма веские причины, поскольку внедренный профиль увеличивает размер файла на 3-4 Кбайт.
10. Флажок Optimized (Оптимизированное) включает дополнительную оптимизию внутренней структуры JPEG, что иногда еще сильнее сокращает размер файла. Побочный эффект оптимизации может сказаться только при использании очень старых версий браузеров. Все новые браузеры нормально обрабывают такие файлы.
11. Правильность сделанных установок легко проверить, загрузив готовое изобрение в браузер. Для этого вам даже не придется покидать окно модуля экорта. Нажмите кнопку Device Central (Центр устройств), и модуль откроет браузер радиотелефона с загруженным в него изображением (рис. 15.13). Цвет фона страницы можно предварительно задать с помощью списка Matte (Цвет фона страницы).
Рис. 15.13. Предварительный просмотр оптимизированного изображения в окне браузера
Компания Adobe внесла некоторые незначительные изменения в популярную и всем полюбившуюся функцию Сохранить для сети в Photoshop CC 2015. Эта функция используется для многих задач - от подготовки ресурсов для размещения на веб-сайте до оптимизации фотографий высокого разрешения для создания анимированных GIF-файлов. Поскольку команда «Сохранить для сети» создана на основе ранее выпускаемого продукта ImageReady (срок его эксплуатации истек), ее код технически слишком устарел для дальнейшего поддержания и разработки новых элементов.
Была ли команда «Сохранить для сети» удалена из Photoshop CC 2015?
Я использую команду «Сохранить для сети» каждый день. Не будет ли мой рабочий процесс замедляться из-за изменений в системе меню?
Можно полностью пропустить данное меню путем использования существующего сочетания клавиш:
(Windows)
Ctrl + Alt + Shift + S
(Mac)
Cmd + Opt + Shift + S
При необходимости можно настроить сочетания клавиш. Для этого необходимо выбрать «Редактирование» > «Сочетания клавиш».
Были ли удалены какие-либо особенности команды «Сохранить для сети»?
Означает ли пометка «Устаревшие» то, что в будущем команда «Сохранить для сети» будет удалена?
Возможно. Тем не менее, будьте уверены, что компания Adobe не удалит команду «Сохранить для сети», не предоставив соответствующую функцию в новом, улучшенном формате рабочего процесса. Например, мы знаем, что многим пользователям требуются такие функции, как вид 2up , целевой размер файла, преобразование в формат sRGB, параметры метаданных и анимированные GIF-файлы. Команда «Сохранить для сети» не будет удалена без предоставления соответствующих возможностей в новом, улучшенном формате рабочего процесса.
Фотошоп предлагает прекрасный инструмент для оптимизации ваших изображений и фотографий — команда (Save for Web).
Оптимизация изображения — это нахождение золотой середины между качеством и размером файла, подходящего для решения поставленной задачи.
Самая популярная причина необходимости оптимизации — подготовить изображение для передачи через интернет или разместить на сайте. Верстальщики сайтов и веб-студии по разработке графического дизайна, такие как http://brandbe.net , после подготовки , прибегают к оптимизации получившихся частей изображения, чтобы снизить их вес (для быстрой загрузки графики будущего сайта), но чтобы при этом качество картинки не ухудшилось.
Описание элементов диалогового окна
(Нажмите, чтобы увеличить)
После выполнения команды загруженное изображение появляется в центральной части диалогового окна. Окно делится на следующие элементы:
- слева – панель инструментов;
- сверху – параметры отображения изображения;
- в центре – область просмотра;
- справа – инструменты управления оптимизацией;
- внизу – некоторые сервисные параметры;
Панель инструментов
С помощью инструмента Рука осуществляется навигация по области изображения. Нажимайте левой кнопкой мыши и перемещайте руку в сторону, чтобы двигать изображение из стороны в сторону. Если выбран другой инструмент, нажмите и удерживайте Пробел , чтобы активировать руку и подвинуть изображение. Прокрутка колесика мыши двигает картинку вверх-вниз.
Инструмент Выделение фрагмента позволяет работать с отдельными фрагментами раскройки: объединять, разделять, изменять параметры, удалять и тому подобное. Подробнее об этом инструменте и раскройке читайте .
После нажатия на инструмент Масштаб и наведения курсора на изображение появляется значок лупы. Каждый щелчок мышью увеличивает масштаб изображения (при удержании клавиши Alt – уменьшает). В контекстном меню, открывающемся по правому клику, можно выбрать необходимый масштаб из списка или показать изображение во всё окно или экран. Также можно выделить часть изображения рамкой, чтобы увеличить этот фрагмент.
Пипеткой можно узнать оттенок интересующего цвета на изображении. Этот оттенок будет отображаться в окне Цвет пипетки . Нажмите на этот цвет, чтобы открыть палитру цветов и узнать буквенно-цифровой код.
Если изображение было раскроено на отдельные фрагменты, и границы этой раскройки вам мешают — нажмите на Выкл показ фрагментов раскройки , чтобы их скрыть. Повторное нажатие вернет их обратно.
Параметры отображения
Загруженное изображение автоматически оптимизируется, используя настройки по умолчанию. В верхней области диалогового окна активизируется вкладка Оптимизация , отображающая внешний вид, размер и примерное время загрузки оптимизированного изображения на сайт.
Вкладка Исходное отображает начальный вид и размер изображения. Для наглядного сравнения оригинала с оптимизированным изображением можно перейти на вкладку 2 варианта . Ещё более удобна вкладка 4 варианта , предлагающая пользователю не один, а три варианта оптимизации.
Управление оптимизацией
Коррекция произведённой по умолчанию оптимизации может быть произведена в правой части диалогового окна.
Прежде всего, надо указать формат оптимизируемого файла! Предлагаемые пользователю средства коррекции меняются соответственно выбранному формату.
В списке «Набор» и его подсписке (под JPEG) уточняется качество оптимизированного изображения. Оно имеет 5 вариантов:
- наилучшее (по умолчанию);
- очень высокое;
- высокое;
- среднее;
- низкое.
При выборе перечисленных вариантом автоматически устанавливается значение параметра Качества в 100, 80, 60, 30 и 10 соответственно. Выбор худшего качества производится в случае, когда размер изображения неприемлемо велик.
Выбор параметра Прогрессивный определяет способ развёртки изображения в браузере. Незначительно увеличение размера файла более чем компенсируется ускоренным отображением фотографии ещё до окончания её полной загрузки. А передвижение ползунка Размытие справа от исходного нулевого значения дополнительно сжимает файл, уменьшая его размер.
В списке Матовый/Подложка при необходимости можно задать раскраску прозрачных пикселей. Доступны основной цвет, цвет фона, пипетки, белый и чёрный.
Флажок Встроенный профиль активируется для сохранения в оптимизированном файле цветовых профилей. Они используются для цветокоррекции в некоторых браузерах.
GIF или PNG
Форматы работают с ограниченной палитрой цветов глубиной 8 разрядов. Рисунки этих форматов используют до 256 оттенков, хранящихся в специальной таблице цветов, появляющейся при работе с GIF и PNG. При отсутствии нужного цвета производится дизеринг – его имитация смешиванием других цветов. Высокий процент дизеринга позволяет сохранить больше деталей и цветов, но и увеличивает вес файла. Дизеринг рекомендуется применять для градиентных изображений.
В верхнем списке Набор выбираются возможные варианты оптимизации с дизерингом или без него. Большее значение цветов и дизеринга улучшают качество оптимизированного изображения, но и увеличивают его размер. Количество цветов отдельно можно выбрать справа в списке Цвета .
В левом от него списке выбирается метод создания таблицы цветов со следующими основными вариантами:
- перцепционная – с предпочтением тех цветов, к которым глаз максимально чувствителен;
- селективная (по умолчанию) – с дополнительным предпочтением цветов больших фрагментов изображения;
- адаптивная – с предпочтением цветов преобладающего спектра;
- ограниченная (безопасная палитра Web) – с полным исключением дизеринга.
В том же списке есть возможность применения готовых таблиц цветов или палитры Заказная , созданной пользователем.
В следующем списке выбирается алгоритма дизеринга из 3 вариантов:
- случайный, использующий для имитации случайный узор;
- регулярный, использующий квадратный узор;
- «шум», свободный от «швов» в изображении.
Дополнительные регулировки доступны в нескольких списках справа. В списке Дизеринг его процент может изменяться плавным перемещением ползунка. В списке Web-цвета таким же образом можно регулировать и их процент.
Список Потери предназначен только для формата GIF. Он позволяет задавать допустимый порог удаления части изображения для минимизации размера оптимизированного файла.
Сервисные параметры нижней части окна
Внизу диалогового окна дублируется возможность масштабирования изображения. Справа внизу можно изменять размер изображения в пикселях или процентах. Чуть ниже находятся кнопки Сохранить и Готово. Очень удобна возможность периодического просмотра оптимизируемого изображения в браузере, реализуемая по нажатию кнопки Просмотр .
Сохранение/удаление набора параметров
Вышеописанные многочисленные настройки оптимизации можно сохранять в виде именованных пользовательских наборов, которые можно будет применять и к другим изображениям. Это позволит существенно уменьшить время оптимизации большого количества изображений.
Чтобы сохранить свой набор параметров, нужно сперва изменить один из стандартных наборов. Например, выбрав набор Высокое качество JPEG , поставим галочку Прогрессивный . Теперь в меню появится активная команда Сохранить настройки .
После сохранения своих настроек, они станут доступны в списке Набор:
Для удаления созданного пользовательского набора:
- в списке Набор выберите его имя;
- Откройте окно меню;
- Выберите команду Удалить настройки .
Работа с фрагментами изображения
При рассмотрении панели инструментов упоминалась возможность оптимизации отдельно взятого фрагмента большого изображения. Но для этого оно предварительно должно быть разделено на фрагменты.
Для такого разделения используется с основной панели инструментов фотошопа. После его выбора появившимся пером нужно очертить необходимый фрагмент. Большое изображение разделится на несколько фрагментов.
После выполнения команды Сохранить для Web и устройств можно переходить к оптимизации отдельно взятого фрагмента. Сначала надо включить показ фрагментов настройки одноимённым нижним инструментом локальной панели. Затем выбрать нужный фрагмент инструментом Выделение сегмента .
Заметили ошибку в тексте - выделите ее и нажмите Ctrl + Enter . Спасибо!
